Skip to content

Commit 777de6f

Browse files
nateirwin25nateirwin25
authored
Color size toolbar (#14)
* Added selection indicators to toolbar and mapped toolbar to tool * Fixing tests * Fixing tests * Added circle cursors to match tool size * Fixed colors to match colorblind palette * Made size 1 cursor a bit larger for visibility * Fixed tests
1 parent 3eba7d5 commit 777de6f

File tree

15 files changed

+275
-95
lines changed

15 files changed

+275
-95
lines changed

‎src/annotator/components/toolbar.js‎

Lines changed: 156 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -120,14 +120,34 @@ export default function Toolbar({
120120
const large = 10;
121121

122122
const [toolSize, setToolSize] = useState(medium);
123+
const [color, setColor] = useState('#d81b60');
123124

124-
const [tool, setTool] = useState('pen');
125+
const eraserSmall = 10;
126+
const eraserMedium = 30;
127+
const eraserLarge = 60;
128+
129+
const [eraserSize, setEraserSize] = useState(eraserMedium);
125130

126-
const [color, setColor] = useState('red');
131+
const [tool, setTool] = useState('pen');
127132

128133
useEffect(() => {
129-
setDoodleOptions({ tool: tool, size: toolSize, color: color });
130-
}, [toolSize, tool, color, setDoodleOptions]);
134+
if (tool === 'pen') {
135+
setDoodleOptions({ tool: 'pen', size: toolSize, color: color });
136+
} else {
137+
setDoodleOptions({ tool: 'eraser', size: eraserSize });
138+
}
139+
}, [tool, toolSize, color, eraserSize, setEraserSize, setDoodleOptions]);
140+
141+
function setSelected(e, optionalClass = '') {
142+
let elems = e.target?.parentElement.querySelectorAll(
143+
'.annotator-toolbar-button' + optionalClass
144+
);
145+
[].forEach.call(elems, function (el) {
146+
//@ts-ignore
147+
el.classList.remove('selected');
148+
});
149+
e.target?.classList.toggle('selected');
150+
}
131151

132152
if (!drawingToolbarActivated) {
133153
return (
@@ -210,95 +230,155 @@ export default function Toolbar({
210230
icon="close"
211231
onClick={drawingToolbarToggle}
212232
/>
213-
<ToolbarButton
214-
label="Pen"
215-
icon="pen"
216-
onClick={() => {
217-
setTool('pen');
218-
}}
219-
/>
220-
<ToolbarButton
221-
label="Eraser"
222-
icon="erase"
223-
onClick={() => {
224-
setTool('eraser');
225-
}}
226-
/>
227233
<button
228-
className="popup annotator-toolbar-button size selected"
234+
className="popup annotator-toolbar-button
235+
toolbar selected"
236+
id="pen"
229237
onClick={e => {
238+
setTool('pen');
230239
//@ts-ignore
231-
e.target?.querySelector('#myPopup').classList.toggle('show');
240+
e.target?.querySelector('#penPopup').classList.toggle('show');
232241
//@ts-ignore
233242
e.target?.parentElement
234-
.querySelector('.color')
235-
.querySelector('#myPopup')
243+
.querySelector('#eraser')
244+
.querySelector('#eraserPopup')
236245
.classList.remove('show');
246+
setSelected(e, '.toolbar');
237247
}}
238-
aria-label="Brush Size"
248+
aria-label="Pen"
249+
title="Pen"
239250
>
240-
<SvgIcon name="sizes-icon" className="svgicon" />
241-
<span className="popuptext" id="myPopup">
242-
<ToolbarButton
243-
label="Large"
244-
icon="circle-large"
245-
onClick={() => {
246-
setToolSize(large);
247-
}}
248-
/>
249-
<ToolbarButton
250-
label="Medium"
251-
icon="circle-medium"
252-
onClick={() => {
253-
setToolSize(medium);
254-
}}
255-
/>
256-
<ToolbarButton
257-
label="Small"
258-
icon="circle-small"
259-
className="annotator-toolbar-button smallSelector"
260-
onClick={() => {
261-
setToolSize(small);
262-
}}
263-
/>
251+
<SvgIcon name="pen" className="svgicon" />
252+
<span className="popuptext show" id="penPopup">
253+
<div className="popup-child">
254+
<button
255+
className="popup annotator-toolbar-button"
256+
onClick={e => {
257+
setToolSize(large);
258+
setSelected(e);
259+
}}
260+
aria-label="Large"
261+
title="Large"
262+
>
263+
<SvgIcon name="circle-large" className="svgicon" />
264+
</button>
265+
<button
266+
className="popup annotator-toolbar-button selected"
267+
onClick={e => {
268+
setToolSize(medium);
269+
setSelected(e);
270+
}}
271+
aria-label="Medium"
272+
title="Medium"
273+
>
274+
<SvgIcon name="circle-medium" className="svgicon" />
275+
</button>
276+
<button
277+
className="popup annotator-toolbar-button"
278+
onClick={e => {
279+
setToolSize(small);
280+
setSelected(e);
281+
}}
282+
aria-label="Small"
283+
title="Small"
284+
>
285+
<SvgIcon name="circle-small" className="svgicon" />
286+
</button>
287+
</div>
288+
<div className="popup-child">
289+
<button
290+
className="popup annotator-toolbar-button selected"
291+
onClick={e => {
292+
setColor('#d81b60');
293+
setSelected(e);
294+
}}
295+
aria-label="Red"
296+
title="Red"
297+
>
298+
<SvgIcon name="red-icon" className="svgicon" />
299+
</button>
300+
<button
301+
className="popup annotator-toolbar-button"
302+
onClick={e => {
303+
setColor('#004d40');
304+
setSelected(e);
305+
}}
306+
aria-label="Green"
307+
title="Green"
308+
>
309+
<SvgIcon name="green-icon" className="svgicon" />
310+
</button>
311+
<button
312+
className="popup annotator-toolbar-button"
313+
onClick={e => {
314+
setColor('#1e88e5');
315+
setSelected(e);
316+
}}
317+
aria-label="Blue"
318+
title="Blue"
319+
>
320+
<SvgIcon name="blue-icon" className="svgicon" />
321+
</button>
322+
</div>
264323
</span>
265324
</button>
266325
<button
267-
className="popup annotator-toolbar-button color"
326+
className="popup annotator-toolbar-button
327+
toolbar"
328+
id="eraser"
268329
onClick={e => {
269-
//@ts-ignore
270-
e.target?.querySelector('#myPopup').classList.toggle('show');
330+
setTool('eraser');
331+
e.target
332+
//@ts-ignore
333+
?.querySelector('#eraserPopup')
334+
.classList.toggle('show');
271335
//@ts-ignore
272336
e.target?.parentElement
273-
.querySelector('.size')
274-
.querySelector('#myPopup')
337+
.querySelector('#pen')
338+
.querySelector('#penPopup')
275339
.classList.remove('show');
340+
setSelected(e, '.toolbar');
276341
}}
277-
aria-label="Brush Color"
342+
aria-label="Eraser"
343+
title="Eraser"
278344
>
279-
<SvgIcon name="color-icon" className="svgicon" />
280-
<span className="popuptext" id="myPopup">
281-
<ToolbarButton
282-
label="Red"
283-
icon="red-icon"
284-
onClick={() => {
285-
setColor('red');
286-
}}
287-
/>
288-
<ToolbarButton
289-
label="Green"
290-
icon="green-icon"
291-
onClick={() => {
292-
setColor('green');
293-
}}
294-
/>
295-
<ToolbarButton
296-
label="Blue"
297-
icon="blue-icon"
298-
onClick={() => {
299-
setColor('blue');
300-
}}
301-
/>
345+
<SvgIcon name="erase" className="svgicon" />
346+
<span className="popuptext erase" id="eraserPopup">
347+
<div className="popup-child">
348+
<button
349+
className="popup annotator-toolbar-button"
350+
onClick={e => {
351+
setEraserSize(eraserLarge);
352+
setSelected(e);
353+
}}
354+
aria-label="Large"
355+
title="Large"
356+
>
357+
<SvgIcon name="circle-large" className="svgicon" />
358+
</button>
359+
<button
360+
className="popup annotator-toolbar-button selected"
361+
onClick={e => {
362+
setEraserSize(eraserMedium);
363+
setSelected(e);
364+
}}
365+
aria-label="Medium"
366+
title="Medium"
367+
>
368+
<SvgIcon name="circle-medium" className="svgicon" />
369+
</button>
370+
<button
371+
className="popup annotator-toolbar-button"
372+
onClick={e => {
373+
setEraserSize(eraserSmall);
374+
setSelected(e);
375+
}}
376+
aria-label="Small"
377+
title="Small"
378+
>
379+
<SvgIcon name="circle-small" className="svgicon" />
380+
</button>
381+
</div>
302382
</span>
303383
</button>
304384
<ToolbarButton

‎src/annotator/sidebar.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ export default class Sidebar extends Guest {
148148
{
149149
tool: 'pen',
150150
size: 5,
151-
color: 'red',
151+
color: '#d81b60',
152152
},
153153
tag => {
154154
this.crossframe?.call('showAnnotations', [tag]);

‎src/doodle/canvas.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ const Canvas = ({
99
handleMouseUp,
1010
handleMouseMove,
1111
handleMouseLeave,
12+
className = 'size5',
1213
doodles,
1314
handleDoodleClick,
1415
}) => {
@@ -139,6 +140,8 @@ const Canvas = ({
139140
onMouseMove={handleMouseMove}
140141
onMouseUp={handleMouseUp}
141142
onMouseLeave={handleMouseLeave}
143+
id="canvas"
144+
className={className}
142145
/>
143146
<canvas
144147
width={width}
@@ -157,6 +160,7 @@ Canvas.propTypes = {
157160
handleMouseUp: propTypes.func.isRequired,
158161
handleMouseMove: propTypes.func.isRequired,
159162
handleMouseLeave: propTypes.func.isRequired,
163+
className: propTypes.string,
160164
handleDoodleClick: propTypes.func.isRequired,
161165
doodles: propTypes.array.isRequired,
162166
};

‎src/doodle/doodleCanvas.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,7 @@ const DoodleCanvas = ({
121121
handleMouseUp={handleMouseUp}
122122
handleMouseLeave={handleMouseLeave}
123123
handleMouseMove={handleMouseMove}
124+
className={'size' + size}
124125
doodles={[{ $tag: 'none', lines: lines }]}
125126
handleDoodleClick={() => {}}
126127
/>

‎src/images/icons/blue.svg‎

Lines changed: 3 additions & 3 deletions
Loading

‎src/images/icons/circle1.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎src/images/icons/circle10.png‎

165 Bytes
Loading

‎src/images/icons/circle10.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎src/images/icons/circle30.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎src/images/icons/circle5.svg‎

Lines changed: 9 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)