Skip to content

Commit 490cdef

Browse files
authored
Merge pull request #79 from canercanbaz/master
new tool: Highlighter added
2 parents 36e75ee + 0f6723b commit 490cdef

File tree

5 files changed

+77
-1
lines changed

5 files changed

+77
-1
lines changed

examples/main.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -397,6 +397,7 @@ class SketchFieldDemo extends React.Component {
397397
<MenuItem value={Tools.Rectangle} key="Rectangle">Rectangle</MenuItem>
398398
<MenuItem value={Tools.Circle} key="Circle">Circle</MenuItem>
399399
<MenuItem value={Tools.Pan} key="Pan">Pan</MenuItem>
400+
<MenuItem value={Tools.Highlighter} key="Highlighter">Highlighter</MenuItem>
400401
<MenuItem value={Tools.RectangleLabel} key="Pan">RectangleLabel</MenuItem>
401402
</TextField>
402403
</div>

src/SketchField.jsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import Rectangle from './rectangle';
1212
import Circle from './circle';
1313
import Pan from './pan';
1414
import Tool from './tools';
15+
import Highlighter from './highlighter';
1516
import RectangleLabel from './rectangle-label';
1617
import DefaultTool from './defaul-tool';
1718

@@ -119,6 +120,7 @@ class SketchField extends PureComponent {
119120
this._tools[Tool.RectangleLabel] = new RectangleLabel(fabricCanvas);
120121
this._tools[Tool.Circle] = new Circle(fabricCanvas);
121122
this._tools[Tool.Pan] = new Pan(fabricCanvas);
123+
this._tools[Tool.Highlighter] = new Highlighter(fabricCanvas);
122124
this._tools[Tool.DefaultTool] = new DefaultTool(fabricCanvas);
123125
};
124126

src/highlighter.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
2+
import FabricCanvasTool from './fabrictool'
3+
import { hexToRgbA, colorNameToHex } from './utils';
4+
5+
class Highlighter extends FabricCanvasTool {
6+
7+
configureCanvas(props) {
8+
this._canvas.isDrawingMode = true;
9+
this._canvas.freeDrawingBrush.width = props.lineWidth;
10+
this._canvas.freeDrawingBrush.color = props.lineColor.indexOf('#') > -1 ? hexToRgbA(props.lineColor) : hexToRgbA(colorNameToHex(props.lineColor));
11+
}
12+
}
13+
14+
export default Highlighter;

src/tools.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,6 @@ export default {
77
RectangleLabel: 'rectangle-label',
88
Select: 'select',
99
Pan: 'pan',
10+
Highlighter: 'highlighter',
1011
DefaultTool: 'default-tool',
1112
}

src/utils.js

Lines changed: 59 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,4 +59,62 @@ export const uuid4 = () => {
5959
}
6060
}
6161
return uuid;
62-
};
62+
};
63+
64+
/**
65+
*
66+
* @param hex is a color code in the form of hex.
67+
* Return a rgba equivalent of given hex.
68+
* @returns {string}
69+
*/
70+
export const hexToRgbA = (hex) => {
71+
var c;
72+
if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
73+
c = hex.substring(1).split('');
74+
if (c.length == 3) {
75+
c = [c[0], c[0], c[1], c[1], c[2], c[2]];
76+
}
77+
c = '0x' + c.join('');
78+
return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',0.4)';
79+
}
80+
throw new Error('Bad Hex');
81+
}
82+
83+
/**
84+
*
85+
* @param color is a color name to convert it to hex
86+
* Return hex equivalent of given color name
87+
*/
88+
export const colorNameToHex = (color) => {
89+
var colors = {
90+
"aliceblue": "#f0f8ff", "antiquewhite": "#faebd7", "aqua": "#00ffff", "aquamarine": "#7fffd4", "azure": "#f0ffff",
91+
"beige": "#f5f5dc", "bisque": "#ffe4c4", "black": "#000000", "blanchedalmond": "#ffebcd", "blue": "#0000ff", "blueviolet": "#8a2be2", "brown": "#a52a2a", "burlywood": "#deb887",
92+
"cadetblue": "#5f9ea0", "chartreuse": "#7fff00", "chocolate": "#d2691e", "coral": "#ff7f50", "cornflowerblue": "#6495ed", "cornsilk": "#fff8dc", "crimson": "#dc143c", "cyan": "#00ffff",
93+
"darkblue": "#00008b", "darkcyan": "#008b8b", "darkgoldenrod": "#b8860b", "darkgray": "#a9a9a9", "darkgreen": "#006400", "darkkhaki": "#bdb76b", "darkmagenta": "#8b008b", "darkolivegreen": "#556b2f",
94+
"darkorange": "#ff8c00", "darkorchid": "#9932cc", "darkred": "#8b0000", "darksalmon": "#e9967a", "darkseagreen": "#8fbc8f", "darkslateblue": "#483d8b", "darkslategray": "#2f4f4f", "darkturquoise": "#00ced1",
95+
"darkviolet": "#9400d3", "deeppink": "#ff1493", "deepskyblue": "#00bfff", "dimgray": "#696969", "dodgerblue": "#1e90ff",
96+
"firebrick": "#b22222", "floralwhite": "#fffaf0", "forestgreen": "#228b22", "fuchsia": "#ff00ff",
97+
"gainsboro": "#dcdcdc", "ghostwhite": "#f8f8ff", "gold": "#ffd700", "goldenrod": "#daa520", "gray": "#808080", "green": "#008000", "greenyellow": "#adff2f",
98+
"honeydew": "#f0fff0", "hotpink": "#ff69b4",
99+
"indianred ": "#cd5c5c", "indigo": "#4b0082", "ivory": "#fffff0", "khaki": "#f0e68c",
100+
"lavender": "#e6e6fa", "lavenderblush": "#fff0f5", "lawngreen": "#7cfc00", "lemonchiffon": "#fffacd", "lightblue": "#add8e6", "lightcoral": "#f08080", "lightcyan": "#e0ffff", "lightgoldenrodyellow": "#fafad2",
101+
"lightgrey": "#d3d3d3", "lightgreen": "#90ee90", "lightpink": "#ffb6c1", "lightsalmon": "#ffa07a", "lightseagreen": "#20b2aa", "lightskyblue": "#87cefa", "lightslategray": "#778899", "lightsteelblue": "#b0c4de",
102+
"lightyellow": "#ffffe0", "lime": "#00ff00", "limegreen": "#32cd32", "linen": "#faf0e6",
103+
"magenta": "#ff00ff", "maroon": "#800000", "mediumaquamarine": "#66cdaa", "mediumblue": "#0000cd", "mediumorchid": "#ba55d3", "mediumpurple": "#9370d8", "mediumseagreen": "#3cb371", "mediumslateblue": "#7b68ee",
104+
"mediumspringgreen": "#00fa9a", "mediumturquoise": "#48d1cc", "mediumvioletred": "#c71585", "midnightblue": "#191970", "mintcream": "#f5fffa", "mistyrose": "#ffe4e1", "moccasin": "#ffe4b5",
105+
"navajowhite": "#ffdead", "navy": "#000080",
106+
"oldlace": "#fdf5e6", "olive": "#808000", "olivedrab": "#6b8e23", "orange": "#ffa500", "orangered": "#ff4500", "orchid": "#da70d6",
107+
"palegoldenrod": "#eee8aa", "palegreen": "#98fb98", "paleturquoise": "#afeeee", "palevioletred": "#d87093", "papayawhip": "#ffefd5", "peachpuff": "#ffdab9", "peru": "#cd853f", "pink": "#ffc0cb", "plum": "#dda0dd", "powderblue": "#b0e0e6", "purple": "#800080",
108+
"rebeccapurple": "#663399", "red": "#ff0000", "rosybrown": "#bc8f8f", "royalblue": "#4169e1",
109+
"saddlebrown": "#8b4513", "salmon": "#fa8072", "sandybrown": "#f4a460", "seagreen": "#2e8b57", "seashell": "#fff5ee", "sienna": "#a0522d", "silver": "#c0c0c0", "skyblue": "#87ceeb", "slateblue": "#6a5acd", "slategray": "#708090", "snow": "#fffafa", "springgreen": "#00ff7f", "steelblue": "#4682b4",
110+
"tan": "#d2b48c", "teal": "#008080", "thistle": "#d8bfd8", "tomato": "#ff6347", "turquoise": "#40e0d0",
111+
"violet": "#ee82ee",
112+
"wheat": "#f5deb3", "white": "#ffffff", "whitesmoke": "#f5f5f5",
113+
"yellow": "#ffff00", "yellowgreen": "#9acd32"
114+
};
115+
116+
if (typeof colors[color.toLowerCase()] != 'undefined')
117+
return colors[color.toLowerCase()];
118+
119+
return false;
120+
}

0 commit comments

Comments
 (0)