js-draw 0.1.6 → 0.1.9

package/src/toolbar/icons.ts

@@ -1,3 +1,4 @@
+import Color4 from '../Color4';
 import { ComponentBuilderFactory } from '../components/builders/types';
 import { TextStyle } from '../components/Text';
 import EventDispatcher from '../EventDispatcher';
@@ -14,6 +15,20 @@ const primaryForegroundFill = `
 const primaryForegroundStrokeFill = `
 	style='fill: var(--primary-foreground-color); stroke: var(--primary-foreground-color);'
 `;
+const checkerboardPatternDef = `
+	<pattern
+		id='checkerboard'
+		viewBox='0,0,10,10'
+		width='20%'
+		height='20%'
+		patternUnits='userSpaceOnUse'
+	>
+		<rect x=0 y=0 width=10 height=10 fill='white'/>
+		<rect x=0 y=0 width=5 height=5 fill='gray'/>
+		<rect x=5 y=5 width=5 height=5 fill='gray'/>
+	</pattern>
+`;
+const checkerboardPatternRef = 'url(#checkerboard)';
 
 export const makeUndoIcon = () => {
 	return makeRedoIcon(true);
@@ -91,7 +106,7 @@ export const makeSelectionIcon = () => {
 export const makeHandToolIcon = () => {
 	const icon = document.createElementNS(svgNamespace, 'svg');
 
-	// Draw a cursor-like shape
+	// Draw a cursor-like shape (like some of the other icons, made with Inkscape)
 	icon.innerHTML = `
 	<g>
 		<path d='
@@ -127,6 +142,139 @@ export const makeHandToolIcon = () => {
 	return icon;
 };
 
+export const makeTouchPanningIcon = () => {
+	const icon = document.createElementNS(svgNamespace, 'svg');
+	icon.innerHTML = `
+		<path
+			d='
+				M 5,5.5
+				V 17.2
+				L 16.25,5.46
+				Z
+
+				m 33.75,0
+				L 50,17
+				V 5.5
+				Z
+
+				M 5,40.7
+				v 11.7
+				h 11.25
+				z
+				
+				M 26,19
+				C 19.8,19.4 17.65,30.4 21.9,34.8
+				L 50,70
+				H 27.5
+				c -11.25,0 -11.25,17.6 0,17.6
+				H 61.25
+				C 94.9,87.8 95,87.6 95,40.7 78.125,23 67,29 55.6,46.5
+				L 33.1,23
+				C 30.3125,20.128192 27.9,19 25.830078,19.119756
+				Z
+			'
+			fill='none'
+			style='
+				stroke: var(--primary-foreground-color);
+				stroke-width: 2;
+			'
+		/>
+	`;
+
+	icon.setAttribute('viewBox', '0 0 100 100');
+	return icon;
+};
+
+export const makeAllDevicePanningIcon = () => {
+	const icon = document.createElementNS(svgNamespace, 'svg');
+	icon.innerHTML = `
+		<path
+			d='
+				M 5 5
+				L 5 17.5
+				  17.5 5
+				  5 5
+				z
+				
+				M 42.5 5
+				L 55 17.5
+				  55 5
+				  42.5 5
+				z
+				
+				M 70 10
+				L 70 21
+				  61 15
+			      55.5 23
+			      66 30
+				  56 37
+				  61 45
+				  70 39
+				  70 50
+				  80 50
+				  80 39
+				  89 45
+				  95 36
+				  84 30
+				  95 23
+				  89 15
+				  80 21
+				  80 10
+				  70 10
+				z
+
+				M 27.5 26.25
+				L 27.5 91.25
+				L 43.75 83.125
+				L 52 99
+				L 68 91
+				L 60 75
+				L 76.25 66.875
+				L 27.5 26.25
+				z
+				
+				M 5 42.5
+				L 5 55
+				L 17.5 55
+				L 5 42.5
+				z 
+			'
+			fill='none'
+			style='
+				stroke: var(--primary-foreground-color);
+				stroke-width: 2;
+			'
+		/>
+	`;
+
+	icon.setAttribute('viewBox', '0 0 100 100');
+	return icon;
+};
+
+export const makeZoomIcon = () => {
+	const icon = document.createElementNS(svgNamespace, 'svg');
+	icon.setAttribute('viewBox', '0 0 100 100');
+
+	const addTextNode = (text: string, x: number, y: number) => {
+		const textNode = document.createElementNS(svgNamespace, 'text');
+		textNode.appendChild(document.createTextNode(text));
+		textNode.setAttribute('x', x.toString());
+		textNode.setAttribute('y', y.toString());
+		textNode.style.textAlign = 'center';
+		textNode.style.textAnchor = 'middle';
+		textNode.style.fontSize = '55px';
+		textNode.style.fill = 'var(--primary-foreground-color)';
+		textNode.style.fontFamily = 'monospace';
+
+		icon.appendChild(textNode);
+	};
+
+	addTextNode('+', 40, 45);
+	addTextNode('-', 70, 75);
+
+	return icon;
+};
+
 export const makeTextIcon = (textStyle: TextStyle) => {
 	const icon = document.createElementNS(svgNamespace, 'svg');
 	icon.setAttribute('viewBox', '0 0 100 100');
@@ -161,17 +309,7 @@ export const makePenIcon = (tipThickness: number, color: string) => {
 	const backgroundStrokeTipPath = `M14,63 L${50 - halfThickness},85 L${50 + halfThickness},83 L88,60 Z`;
 	icon.innerHTML = `
 	<defs>
-		<pattern
-			id='checkerboard'
-			viewBox='0,0,10,10'
-			width='20%'
-			height='20%'
-			patternUnits='userSpaceOnUse'
-		>
-			<rect x=0 y=0 width=10 height=10 fill='white'/>
-			<rect x=0 y=0 width=5 height=5 fill='gray'/>
-			<rect x=5 y=5 width=5 height=5 fill='gray'/>
-		</pattern>
+		${checkerboardPatternDef}
 	</defs>
 	<g>
 		<!-- Pen grip -->
@@ -182,7 +320,7 @@ export const makePenIcon = (tipThickness: number, color: string) => {
 	</g>
 	<g>
 		<!-- Checkerboard background for slightly transparent pens -->
-		<path d='${backgroundStrokeTipPath}' fill='url(#checkerboard)'/>
+		<path d='${backgroundStrokeTipPath}' fill='${checkerboardPatternRef}'/>
 
 		<!-- Actual pen tip -->
 		<path
@@ -225,3 +363,57 @@ export const makeIconFromFactory = (pen: Pen, factory: ComponentBuilderFactory)
 
 	return icon;
 };
+
+export const makePipetteIcon = (color?: Color4) => {
+	const icon = document.createElementNS(svgNamespace, 'svg');
+	const pipette = document.createElementNS(svgNamespace, 'path');
+
+	pipette.setAttribute('d', `
+		M 47,6
+		C 35,5 25,15 35,30
+		c -9.2,1.3 -15,0 -15,3
+			0,2 5,5 15,7
+		V 81
+		L 40,90
+		h 6
+		L 40,80
+		V 40
+		h 15
+		v 40
+		l -6,10
+		h 6
+		l 5,-9.2
+		V 40
+		C 70,38 75,35 75,33
+			75,30 69.2,31.2 60,30
+			65,15 65,5      47,6
+		Z
+	`);
+	pipette.style.fill = 'var(--primary-foreground-color)';
+
+	if (color) {
+		const defs = document.createElementNS(svgNamespace, 'defs');
+		defs.innerHTML = checkerboardPatternDef;
+		icon.appendChild(defs);
+
+		const fluidBackground = document.createElementNS(svgNamespace, 'path');
+		const fluid = document.createElementNS(svgNamespace, 'path');
+
+		const fluidPathData = `
+			m 40,50 c 5,5 10,0 15,-5 V 80 L 50,90 H 45 L 40,80 Z
+		`;
+
+		fluid.setAttribute('d', fluidPathData);
+		fluidBackground.setAttribute('d', fluidPathData);
+
+		fluid.style.fill = color.toHexString();
+		fluidBackground.style.fill = checkerboardPatternRef;
+
+		icon.appendChild(fluidBackground);
+		icon.appendChild(fluid);
+	}
+	icon.appendChild(pipette);
+
+	icon.setAttribute('viewBox', '0 0 100 100');
+	return icon;
+};

package/src/toolbar/localization.ts

@@ -18,12 +18,16 @@ export interface ToolbarLocalization {
 	thicknessLabel: string;
 	resizeImageToSelection: string;
 	deleteSelection: string;
+	duplicateSelection: string;
+	pickColorFronScreen: string;
 	undo: string;
 	redo: string;
+	zoom: string;
 
-	dropdownShown: (toolName: string)=>string;
-	dropdownHidden: (toolName: string)=>string;
+	dropdownShown: (toolName: string)=> string;
+	dropdownHidden: (toolName: string)=> string;
 	zoomLevel: (zoomPercentage: number)=> string;
+	colorChangedAnnouncement: (color: string)=> string;
 }
 
 export const defaultToolbarLocalization: ToolbarLocalization = {
@@ -31,14 +35,17 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 	eraser: 'Eraser',
 	select: 'Select',
 	handTool: 'Pan',
+	zoom: 'Zoom',
 	thicknessLabel: 'Thickness: ',
 	colorLabel: 'Color: ',
 	fontLabel: 'Font: ',
 	resizeImageToSelection: 'Resize image to selection',
 	deleteSelection: 'Delete selection',
+	duplicateSelection: 'Duplicate selection',
 	undo: 'Undo',
 	redo: 'Redo',
 	selectObjectType: 'Object type: ',
+	pickColorFronScreen: 'Pick color from screen',
 
 	touchPanning: 'Touchscreen panning',
 	anyDevicePanning: 'Any device panning',
@@ -52,4 +59,5 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 	dropdownShown: (toolName) => `Dropdown for ${toolName} shown`,
 	dropdownHidden: (toolName) => `Dropdown for ${toolName} hidden`,
 	zoomLevel: (zoomPercent: number) => `Zoom: ${zoomPercent}%`,
+	colorChangedAnnouncement: (color: string)=> `Color changed to ${color}`,
 };

package/src/toolbar/makeColorInput.ts

@@ -0,0 +1,120 @@
+import Color4 from '../Color4';
+import Editor from '../Editor';
+import PipetteTool from '../tools/PipetteTool';
+import { ToolType } from '../tools/ToolController';
+import { EditorEventType } from '../types';
+import { makePipetteIcon } from './icons';
+
+type OnColorChangeListener = (color: Color4)=>void;
+
+
+// Returns [ input, container ].
+export const makeColorInput = (editor: Editor, onColorChange: OnColorChangeListener): [ HTMLInputElement, HTMLElement ] => {
+	const colorInputContainer = document.createElement('span');
+	const colorInput = document.createElement('input');
+
+	colorInput.type = 'button';
+	colorInput.classList.add('coloris_input');
+	colorInputContainer.classList.add('color-input-container');
+
+	colorInputContainer.appendChild(colorInput);
+	addPipetteTool(editor, colorInputContainer, (color: Color4) => {
+		colorInput.value = color.toHexString();
+		onInputEnd();
+
+		// Update the color preview, if it exists (may be managed by Coloris).
+		const parentElem = colorInput.parentElement;
+		if (parentElem && parentElem.classList.contains('clr-field')) {
+			parentElem.style.color = colorInput.value;
+		}
+	});
+
+	let currentColor: Color4|undefined;
+	const handleColorInput = () => {
+		currentColor = Color4.fromHex(colorInput.value);
+	};
+	const onInputEnd = () => {
+		handleColorInput();
+
+		if (currentColor) {
+			editor.announceForAccessibility(
+				editor.localization.colorChangedAnnouncement(currentColor.toHexString())
+			);
+			onColorChange(currentColor);
+			editor.notifier.dispatch(EditorEventType.ColorPickerColorSelected, {
+				kind: EditorEventType.ColorPickerColorSelected,
+				color: currentColor,
+			});
+		}
+	};
+
+	colorInput.oninput = handleColorInput;
+	colorInput.addEventListener('open', () => {
+		editor.notifier.dispatch(EditorEventType.ColorPickerToggled, {
+			kind: EditorEventType.ColorPickerToggled,
+			open: true,
+		});
+	});
+	colorInput.addEventListener('close', () => {
+		editor.notifier.dispatch(EditorEventType.ColorPickerToggled, {
+			kind: EditorEventType.ColorPickerToggled,
+			open: false,
+		});
+		onInputEnd();
+	});
+
+	return [ colorInput, colorInputContainer ];
+};
+
+const addPipetteTool = (editor: Editor, container: HTMLElement, onColorChange: OnColorChangeListener) => {
+	const pipetteButton = document.createElement('button');
+	pipetteButton.classList.add('pipetteButton');
+	pipetteButton.title = editor.localization.pickColorFronScreen;
+	pipetteButton.setAttribute('alt', pipetteButton.title);
+
+	const updatePipetteIcon = (color?: Color4) => {
+		pipetteButton.replaceChildren(makePipetteIcon(color));
+	};
+	updatePipetteIcon();
+
+	const pipetteTool: PipetteTool|undefined = editor.toolController.getMatchingTools(ToolType.Pipette)[0] as PipetteTool|undefined;
+	const endColorSelectMode = () => {
+		pipetteTool?.clearColorListener();
+		updatePipetteIcon();
+		pipetteButton.classList.remove('active');
+	};
+	const pipetteColorSelect = (color: Color4|null) => {
+		endColorSelectMode();
+
+		if (color) {
+			onColorChange(color);
+		}
+	};
+	const pipetteColorPreview = (color: Color4|null) => {
+		if (color) {
+			updatePipetteIcon(color);
+		} else {
+			updatePipetteIcon();
+		}
+	};
+
+	pipetteButton.onclick = () => {
+		// If already picking, cancel it.
+		if (pipetteButton.classList.contains('active')) {
+			endColorSelectMode();
+			return;
+		}
+
+		pipetteTool?.setColorListener(
+			pipetteColorPreview,
+			pipetteColorSelect,
+		);
+		if (pipetteTool) {
+			pipetteButton.classList.add('active');
+		}
+	};
+
+	container.appendChild(pipetteButton);
+};
+
+export default makeColorInput;

package/src/toolbar/toolbar.css

@@ -1,138 +1,176 @@
 .toolbar-root {
-    background-color: var(--primary-background-color);
+	background-color: var(--primary-background-color);
 
-    border: 1px solid var(--secondary-background-color);
-    border-radius: 2px;
-    flex-wrap: wrap;
+	border: 1px solid var(--secondary-background-color);
+	border-radius: 2px;
+	flex-wrap: wrap;
 
-    box-sizing: border-box;
-    width: 100%;
+	box-sizing: border-box;
+	width: 100%;
 
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
 
-    /* Display above selection dialogs, etc. */
-    z-index: 2;
+	/* Display above selection dialogs, etc. */
+	z-index: 2;
 
-    font-family: system-ui, -apple-system, sans-serif;
+	font-family: system-ui, -apple-system, sans-serif;
 }
 
-.toolbar-button, .toolbar-root button {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+.toolbar-root > .toolbar-toolContainer > .toolbar-button,
+.toolbar-root > .toolbar-toolContainer > * > button,
+.toolbar-root > .toolbar-buttonGroup > button {
+	width: min-content;
+	height: min(20vh, 60px);
+}
 
-    text-align: center;
-    border-radius: 6px;
-    cursor: pointer;
+.toolbar-dropdown .toolbar-button > .toolbar-icon {
+	max-width: 50px;
+}
 
-    padding-left: 3px;
-    padding-right: 3px;
-    margin-left: 3px;
-    margin-right: 3px;
+.toolbar-button.disabled {
+	filter: opacity(0.8) saturate(0.1);
+}
 
-    min-width: 40px;
-    max-width: 70px;
-    width: min-content;
-    font-size: 11pt;
+.toolbar-button, .toolbar-root button {
+	cursor: pointer;
+	text-align: center;
+	border-radius: 6px;
 
-    cursor: pointer;
+	background-color: var(--primary-background-color);
+	color: var(--primary-foreground-color);
+	border: none;
+	box-shadow: 0px 0px 2px var(--primary-shadow-color);
 
-    height: min(20vh, 60px);
-    background-color: var(--primary-background-color);
-    color: var(--primary-foreground-color);
-    border: none;
-    box-shadow: 0px 0px 2px var(--primary-shadow-color);
+	transition: background-color 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease;
+}
+
+.toolbar-button,
+.toolbar-buttonGroup > button,
+.toolbar-toolContainer > * > button,
+.toolbar-root > button {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
 
-    transition: background-color 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease;
+	padding-left: 3px;
+	padding-right: 3px;
+	margin-left: 3px;
+	margin-right: 3px;
+
+	min-width: 40px;
+	max-width: 70px;
+	font-size: 11pt;
 }
 
 .toolbar-button:hover, .toolbar-root button:not(:disabled):hover {
-    box-shadow: 0px 2px 4px var(--primary-shadow-color);
+	box-shadow: 0px 2px 4px var(--primary-shadow-color);
 }
 
 .toolbar-root button:disabled {
-    cursor: inherit;
-    filter: opacity(0.5);
+	cursor: inherit;
+	filter: opacity(0.5);
 }
 
 .toolbar-root .toolbar-icon {
-    flex-shrink: 1;
-    min-width: 30px;
+	flex-shrink: 1;
+	min-width: 30px;
+	min-height: 30px;
 }
 
 .toolbar-toolContainer.selected .toolbar-button {
-    background-color: var(--secondary-background-color);
-    color: var(--secondary-foreground-color);
+	background-color: var(--secondary-background-color);
+	color: var(--secondary-foreground-color);
 }
 
-.toolbar-toolContainer:not(.selected):not(.dropdownShowable) .toolbar-showHideDropdownIcon {
-    display: none;
+.toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-button > .toolbar-showHideDropdownIcon {
+	display: none;
 }
 
-.toolbar-toolContainer .toolbar-showHideDropdownIcon {
-    height: 10px;
-    transition: transform 0.5s ease;
+.toolbar-toolContainer > .toolbar-button > .toolbar-showHideDropdownIcon {
+	height: 10px;
+	transition: transform 0.5s ease;
 }
 
-.toolbar-toolContainer.dropdownVisible .toolbar-showHideDropdownIcon {
-    transform: rotate(180deg);
+.toolbar-toolContainer.dropdownVisible > .toolbar-button > .toolbar-showHideDropdownIcon {
+	transform: rotate(180deg);
 }
 
 .toolbar-dropdown.hidden,
 .toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-dropdown {
-    display: none;
+	display: none;
 }
 
 .toolbar-dropdown {
-    position: absolute;
-    padding: 15px;
-    padding-top: 5px;
-    /* Prevent overlap/being displayed under the undo/redo buttons */
-    z-index: 2;
-    background-color: var(--primary-background-color);
-    box-shadow: 0px 3px 3px var(--primary-shadow-color);
+	position: absolute;
+	padding: 15px;
+	padding-top: 5px;
+
+	/* Prevent overlap/being displayed under the undo/redo buttons */
+	z-index: 2;
+	background-color: var(--primary-background-color);
+	box-shadow: 0px 3px 3px var(--primary-shadow-color);
 }
 
 .toolbar-buttonGroup {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
 }
 
 .toolbar-closeColorPickerOverlay {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
+	display: none;
+	position: fixed;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
 
-    background-color: var(--primary-background-color);
-    opacity: 0.3;
+	background-color: var(--primary-background-color);
+	opacity: 0.3;
 }
 
 /* Make color selection buttons fill their containing label */
 .toolbar-dropdown .clr-field button {
-    width: 100%;
-    height: 100%;
-    border-radius: 2px;
-    margin-left: 0;
-    margin-right: 0;
+	width: 100%;
+	height: 100%;
+	border-radius: 2px;
+	margin-left: 0;
+	margin-right: 0;
 }
 
 .toolbar-root .toolbar-zoomLevelEditor {
-    display: flex;
-    flex-direction: row;
+	display: flex;
+	flex-direction: row;
 }
 
 .toolbar-root .toolbar-zoomLevelEditor .zoomDisplay {
-    flex-grow: 1;
+	flex-grow: 1;
 }
 
 .toolbar-root .toolbar-zoomLevelEditor button {
-    width: min-content;
-    height: min-content;
+	width: min-content;
+	height: min-content;
+}
+
+.color-input-container {
+	display: inline-flex;
+	flex-direction: row;
+}
+
+.color-input-container .pipetteButton {
+	width: 30px;
+	height: 30px;
+	padding: 0;
+	display: inline-flex;
+}
+
+.color-input-container .pipetteButton > svg {
+	width: 100%;
+}
+
+.color-input-container .pipetteButton.active {
+	background-color: var(--secondary-background-color);
 }