js-draw 0.1.1 → 0.1.4

package/src/toolbar/HTMLToolbar.ts

@@ -1,6 +1,6 @@
 import Editor from '../Editor';
 import { ToolType } from '../tools/ToolController';
-import { EditorEventType, StrokeDataPoint } from '../types';
+import { EditorEventType } from '../types';
 
 import { coloris, init as colorisInit } from '@melloware/coloris';
 import Color4 from '../Color4';
@@ -9,25 +9,20 @@ import Eraser from '../tools/Eraser';
 import BaseTool from '../tools/BaseTool';
 import SelectionTool from '../tools/SelectionTool';
 import { makeFreehandLineBuilder } from '../components/builders/FreehandLineBuilder';
-import { Vec2 } from '../geometry/Vec2';
-import SVGRenderer from '../rendering/renderers/SVGRenderer';
-import Viewport from '../Viewport';
-import EventDispatcher from '../EventDispatcher';
 import { ComponentBuilderFactory } from '../components/builders/types';
 import { makeArrowBuilder } from '../components/builders/ArrowBuilder';
 import { makeLineBuilder } from '../components/builders/LineBuilder';
 import { makeFilledRectangleBuilder, makeOutlinedRectangleBuilder } from '../components/builders/RectangleBuilder';
 import { defaultToolbarLocalization, ToolbarLocalization } from './localization';
+import { ActionButtonIcon } from './types';
+import { makeDropdownIcon, makeEraserIcon, makeIconFromFactory, makePenIcon, makeRedoIcon, makeSelectionIcon, makeHandToolIcon, makeUndoIcon, makeTextIcon } from './icons';
+import PanZoom, { PanZoomMode } from '../tools/PanZoom';
+import Mat33 from '../geometry/Mat33';
+import Viewport from '../Viewport';
+import TextTool from '../tools/TextTool';
 
-const primaryForegroundFill = `
-	style='fill: var(--primary-foreground-color);'
-`;
-const primaryForegroundStrokeFill = `
-	style='fill: var(--primary-foreground-color); stroke: var(--primary-foreground-color);'
-`;
 
 const toolbarCSSPrefix = 'toolbar-';
-const svgNamespace = 'http://www.w3.org/2000/svg';
 
 abstract class ToolbarWidget {
 	protected readonly container: HTMLElement;
@@ -57,11 +52,6 @@ abstract class ToolbarWidget {
 		this.button.setAttribute('role', 'button');
 		this.button.tabIndex = 0;
 
-		this.button.onclick = () => {
-			this.handleClick();
-		};
-
-
 		editor.notifier.on(EditorEventType.ToolEnabled, toolEvt => {
 			if (toolEvt.kind !== EditorEventType.ToolEnabled) {
 				throw new Error('Incorrect event type! (Expected ToolEnabled)');
@@ -91,6 +81,12 @@ abstract class ToolbarWidget {
 	// Returns true if such a menu should be created, false otherwise.
 	protected abstract fillDropdown(dropdown: HTMLElement): boolean;
 
+	protected setupActionBtnClickListener(button: HTMLElement) {
+		button.onclick = () => {
+			this.handleClick();
+		};
+	}
+
 	protected handleClick() {
 		if (this.hasDropdown) {
 			if (!this.targetTool.isEnabled()) {
@@ -107,6 +103,8 @@ abstract class ToolbarWidget {
 	public addTo(parent: HTMLElement) {
 		this.label.innerText = this.getTitle();
 
+		this.setupActionBtnClickListener(this.button);
+
 		this.icon = null;
 		this.updateIcon();
 
@@ -167,6 +165,21 @@ abstract class ToolbarWidget {
 				this.localizationTable.dropdownHidden(this.targetTool.description)
 			);
 		}
+
+		this.repositionDropdown();
+	}
+
+	protected repositionDropdown() {
+		const dropdownBBox = this.dropdownContainer.getBoundingClientRect();
+		const screenWidth = document.body.clientWidth;
+
+		if (dropdownBBox.left > screenWidth / 2) {
+			this.dropdownContainer.style.marginLeft = this.button.clientWidth + 'px';
+			this.dropdownContainer.style.transform = 'translate(-100%, 0)';
+		} else {
+			this.dropdownContainer.style.marginLeft = '';
+			this.dropdownContainer.style.transform = '';
+		}
 	}
 
 	protected isDropdownVisible(): boolean {
@@ -174,17 +187,8 @@ abstract class ToolbarWidget {
 	}
 
 	private createDropdownIcon(): Element {
-		const icon = document.createElementNS(svgNamespace, 'svg');
-		icon.innerHTML = `
-		<g>
-			<path
-				d='M5,10 L50,90 L95,10 Z'
-				${primaryForegroundFill}
-			/>
-		</g>
-		`;
+		const icon = makeDropdownIcon();
 		icon.classList.add(`${toolbarCSSPrefix}showHideDropdownIcon`);
-		icon.setAttribute('viewBox', '0 0 100 100');
 		return icon;
 	}
 }
@@ -194,21 +198,7 @@ class EraserWidget extends ToolbarWidget {
 		return this.localizationTable.eraser;
 	}
 	protected createIcon(): Element {
-		const icon = document.createElementNS(svgNamespace, 'svg');
-
-		// Draw an eraser-like shape
-		icon.innerHTML = `
-		<g>
-			<rect x=10 y=50 width=80 height=30 rx=10 fill='pink' />
-			<rect
-				x=10 y=10 width=80 height=50
-				${primaryForegroundFill}
-			/>
-		</g>
-		`;
-		icon.setAttribute('viewBox', '0 0 100 100');
-
-		return icon;
+		return makeEraserIcon();
 	}
 
 	protected fillDropdown(_dropdown: HTMLElement): boolean {
@@ -229,19 +219,9 @@ class SelectionWidget extends ToolbarWidget {
 	}
 
 	protected createIcon(): Element {
-		const icon = document.createElementNS(svgNamespace, 'svg');
-
-		// Draw a cursor-like shape
-		icon.innerHTML = `
-		<g>
-			<rect x=10 y=10 width=70 height=70 fill='pink' stroke='black'/>
-			<rect x=75 y=75 width=10 height=10 fill='white' stroke='black'/>
-		</g>
-		`;
-		icon.setAttribute('viewBox', '0 0 100 100');
-
-		return icon;
+		return makeSelectionIcon();
 	}
+
 	protected fillDropdown(dropdown: HTMLElement): boolean {
 		const container = document.createElement('div');
 		const resizeButton = document.createElement('button');
@@ -284,42 +264,229 @@ class SelectionWidget extends ToolbarWidget {
 	}
 }
 
-class TouchDrawingWidget extends ToolbarWidget {
+const makeZoomControl = (localizationTable: ToolbarLocalization, editor: Editor) => {
+	const zoomLevelRow = document.createElement('div');
+
+	const increaseButton = document.createElement('button');
+	const decreaseButton = document.createElement('button');
+	const zoomLevelDisplay = document.createElement('span');
+	increaseButton.innerText = '+';
+	decreaseButton.innerText = '-';
+	zoomLevelRow.replaceChildren(zoomLevelDisplay, increaseButton, decreaseButton);
+
+	zoomLevelRow.classList.add(`${toolbarCSSPrefix}zoomLevelEditor`);
+	zoomLevelDisplay.classList.add('zoomDisplay');
+
+	let lastZoom: number|undefined;
+	const updateZoomDisplay = () => {
+		let zoomLevel = editor.viewport.getScaleFactor() * 100;
+
+		if (zoomLevel > 0.1) {
+			zoomLevel = Math.round(zoomLevel * 10) / 10;
+		} else {
+			zoomLevel = Math.round(zoomLevel * 1000) / 1000;
+		}
+
+		if (zoomLevel !== lastZoom) {
+			zoomLevelDisplay.innerText = localizationTable.zoomLevel(zoomLevel);
+			lastZoom = zoomLevel;
+		}
+	};
+	updateZoomDisplay();
+
+	editor.notifier.on(EditorEventType.ViewportChanged, (event) => {
+		if (event.kind === EditorEventType.ViewportChanged) {
+			updateZoomDisplay();
+		}
+	});
+
+	const zoomBy = (factor: number) => {
+		const screenCenter = editor.viewport.visibleRect.center;
+		const transformUpdate = Mat33.scaling2D(factor, screenCenter);
+		editor.dispatch(new Viewport.ViewportTransform(transformUpdate), false);
+	};
+
+	increaseButton.onclick = () => {
+		zoomBy(5.0/4);
+	};
+
+	decreaseButton.onclick = () => {
+		zoomBy(4.0/5);
+	};
+
+	return zoomLevelRow;
+};
+
+class HandToolWidget extends ToolbarWidget {
+	public constructor(
+		editor: Editor, protected tool: PanZoom, localizationTable: ToolbarLocalization
+	) {
+		super(editor, tool, localizationTable);
+		this.container.classList.add('dropdownShowable');
+	}
 	protected getTitle(): string {
-		return this.localizationTable.touchDrawing;
+		return this.localizationTable.handTool;
 	}
 
 	protected createIcon(): Element {
-		const icon = document.createElementNS(svgNamespace, 'svg');
-
-		// Draw a cursor-like shape
-		icon.innerHTML = `
-		<g>
-			<path d='M11,-30 Q0,10 20,20 Q40,20 40,-30 Z' fill='blue' stroke='black'/>
-			<path d='
-				M0,90 L0,50 Q5,40 10,50
-				L10,20 Q20,15 30,20
-				L30,50 Q50,40 80,50
-				L80,90 L10,90 Z'
-				
-				${primaryForegroundStrokeFill}
-			/>
-		</g>
-		`;
-		icon.setAttribute('viewBox', '-10 -30 100 100');
+		return makeHandToolIcon();
+	}
 
-		return icon;
+	protected fillDropdown(dropdown: HTMLElement): boolean {
+		type OnToggle = (checked: boolean)=>void;
+		let idCounter = 0;
+		const addCheckbox = (label: string, onToggle: OnToggle) => {
+			const rowContainer = document.createElement('div');
+			const labelElem = document.createElement('label');
+			const checkboxElem = document.createElement('input');
+
+			checkboxElem.type = 'checkbox';
+			checkboxElem.id = `${toolbarCSSPrefix}hand-tool-option-${idCounter++}`;
+			labelElem.setAttribute('for', checkboxElem.id);
+
+			checkboxElem.oninput = () => {
+				onToggle(checkboxElem.checked);
+			};
+			labelElem.innerText = label;
+
+			rowContainer.replaceChildren(checkboxElem, labelElem);
+			dropdown.appendChild(rowContainer);
+
+			return checkboxElem;
+		};
+
+		const setModeFlag = (enabled: boolean, flag: PanZoomMode) => {
+			const mode = this.tool.getMode();
+			if (enabled) {
+				this.tool.setMode(mode | flag);
+			} else {
+				this.tool.setMode(mode & ~flag);
+			}
+		};
+
+		const touchPanningCheckbox = addCheckbox(this.localizationTable.touchPanning, checked => {
+			setModeFlag(checked, PanZoomMode.OneFingerTouchGestures);
+		});
+
+		const anyDevicePanningCheckbox = addCheckbox(this.localizationTable.anyDevicePanning, checked => {
+			setModeFlag(checked, PanZoomMode.SinglePointerGestures);
+		});
+
+		dropdown.appendChild(makeZoomControl(this.localizationTable, this.editor));
+
+		const updateInputs = () => {
+			const mode = this.tool.getMode();
+			anyDevicePanningCheckbox.checked = !!(mode & PanZoomMode.SinglePointerGestures);
+			if (anyDevicePanningCheckbox.checked) {
+				touchPanningCheckbox.checked = true;
+				touchPanningCheckbox.disabled = true;
+			} else {
+				touchPanningCheckbox.checked = !!(mode & PanZoomMode.OneFingerTouchGestures);
+				touchPanningCheckbox.disabled = false;
+			}
+		};
+
+		updateInputs();
+		this.editor.notifier.on(EditorEventType.ToolUpdated, event => {
+			if (event.kind === EditorEventType.ToolUpdated && event.tool === this.tool) {
+				updateInputs();
+			}
+		});
+
+		return true;
 	}
-	protected fillDropdown(_dropdown: HTMLElement): boolean {
-		// No dropdown
-		return false;
+
+	protected updateSelected(_active: boolean) {
 	}
-	protected updateSelected(active: boolean) {
-		if (active) {
-			this.container.classList.remove('selected');
-		} else {
-			this.container.classList.add('selected');
-		}
+
+	protected handleClick() {
+		this.setDropdownVisible(!this.isDropdownVisible());
+	}
+}
+
+class TextToolWidget extends ToolbarWidget {
+	private updateDropdownInputs: (()=>void)|null = null;
+	public constructor(editor: Editor, private tool: TextTool, localization: ToolbarLocalization) {
+		super(editor, tool, localization);
+
+		editor.notifier.on(EditorEventType.ToolUpdated, evt => {
+			if (evt.kind === EditorEventType.ToolUpdated && evt.tool === tool) {
+				this.updateIcon();
+				this.updateDropdownInputs?.();
+			}
+		});
+	}
+
+	protected getTitle(): string {
+		return this.targetTool.description;
+	}
+
+	protected createIcon(): Element {
+		const textStyle = this.tool.getTextStyle();
+		return makeTextIcon(textStyle);
+	}
+
+	private static idCounter: number = 0;
+	protected fillDropdown(dropdown: HTMLElement): boolean {
+		const fontRow = document.createElement('div');
+		const colorRow = document.createElement('div');
+
+		const fontInput = document.createElement('select');
+		const fontLabel = document.createElement('label');
+
+		const colorInput = document.createElement('input');
+		const colorLabel = document.createElement('label');
+
+		const fontsInInput = new Set();
+		const addFontToInput = (fontName: string) => {
+			const option = document.createElement('option');
+			option.value = fontName;
+			option.textContent = fontName;
+			fontInput.appendChild(option);
+			fontsInInput.add(fontName);
+		};
+
+		fontLabel.innerText = this.localizationTable.fontLabel;
+		colorLabel.innerText = this.localizationTable.colorLabel;
+
+		colorInput.classList.add('coloris_input');
+		colorInput.type = 'button';
+		colorInput.id = `${toolbarCSSPrefix}-text-color-input-${TextToolWidget.idCounter++}`;
+		colorLabel.setAttribute('for', colorInput.id);
+
+		addFontToInput('monospace');
+		addFontToInput('serif');
+		addFontToInput('sans-serif');
+		fontInput.id = `${toolbarCSSPrefix}-text-font-input-${TextToolWidget.idCounter++}`;
+		fontLabel.setAttribute('for', fontInput.id);
+
+		fontInput.onchange = () => {
+			this.tool.setFontFamily(fontInput.value);
+		};
+
+		colorInput.oninput = () => {
+			this.tool.setColor(Color4.fromString(colorInput.value));
+		};
+
+		colorRow.appendChild(colorLabel);
+		colorRow.appendChild(colorInput);
+
+		fontRow.appendChild(fontLabel);
+		fontRow.appendChild(fontInput);
+
+		this.updateDropdownInputs = () => {
+			const style = this.tool.getTextStyle();
+			colorInput.value = style.renderingStyle.fill.toHexString();
+
+			if (!fontsInInput.has(style.fontFamily)) {
+				addFontToInput(style.fontFamily);
+			}
+			fontInput.value = style.fontFamily;
+		};
+		this.updateDropdownInputs();
+
+		dropdown.replaceChildren(colorRow, fontRow);
+		return true;
 	}
 }
 
@@ -348,92 +515,17 @@ class PenWidget extends ToolbarWidget {
 		return this.targetTool.description;
 	}
 
-	private makePenIcon(elem: SVGSVGElement) {
-		// Use a square-root scale to prevent the pen's tip from overflowing.
-		const scale = Math.round(Math.sqrt(this.tool.getThickness()) * 2);
-		const color = this.tool.getColor();
-
-		// Draw a pen-like shape
-		const primaryStrokeTipPath = `M14,63 L${50 - scale},95 L${50 + scale},90 L88,60 Z`;
-		const backgroundStrokeTipPath = `M14,63 L${50 - scale},85 L${50 + scale},83 L88,60 Z`;
-		elem.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>
-		</defs>
-		<g>
-			<!-- Pen grip -->
-			<path
-				d='M10,10 L90,10 L90,60 L${50 + scale},80 L${50 - scale},80 L10,60 Z'
-				${primaryForegroundStrokeFill}
-			/>
-		</g>
-		<g>
-			<!-- Checkerboard background for slightly transparent pens -->
-			<path d='${backgroundStrokeTipPath}' fill='url(#checkerboard)'/>
-
-			<!-- Actual pen tip -->
-			<path
-				d='${primaryStrokeTipPath}'
-				fill='${color.toHexString()}'
-				stroke='${color.toHexString()}'
-			/>
-		</g>
-		`;
-	}
-
-	// Draws an icon with the pen.
-	private makeDrawnIcon(icon: SVGSVGElement) {
-		const strokeFactory = this.tool.getStrokeFactory();
-
-		const toolThickness = this.tool.getThickness();
-
-		const nowTime = (new Date()).getTime();
-		const startPoint: StrokeDataPoint = {
-			pos: Vec2.of(10, 10),
-			width: toolThickness / 5,
-			color: this.tool.getColor(),
-			time: nowTime - 100,
-		};
-		const endPoint: StrokeDataPoint = {
-			pos: Vec2.of(90, 90),
-			width: toolThickness / 5,
-			color: this.tool.getColor(),
-			time: nowTime,
-		};
-
-		const builder = strokeFactory(startPoint, this.editor.viewport);
-		builder.addPoint(endPoint);
-
-		const viewport = new Viewport(new EventDispatcher());
-		viewport.updateScreenSize(Vec2.of(100, 100));
-		const renderer = new SVGRenderer(icon, viewport);
-		builder.preview(renderer);
-	}
-
 	protected createIcon(): Element {
-		// We need to use createElementNS to embed an SVG element in HTML.
-		// See http://zhangwenli.com/blog/2017/07/26/createelementns/
-		const icon = document.createElementNS(svgNamespace, 'svg');
-		icon.setAttribute('viewBox', '0 0 100 100');
-
 		const strokeFactory = this.tool.getStrokeFactory();
 		if (strokeFactory === makeFreehandLineBuilder) {
-			this.makePenIcon(icon);
+			// Use a square-root scale to prevent the pen's tip from overflowing.
+			const scale = Math.round(Math.sqrt(this.tool.getThickness()) * 4);
+			const color = this.tool.getColor();
+			return makePenIcon(scale, color.toHexString());
 		} else {
-			this.makeDrawnIcon(icon);
+			const strokeFactory = this.tool.getStrokeFactory();
+			return makeIconFromFactory(this.tool, strokeFactory);
 		}
-
-		return icon;
 	}
 
 	private static idCounter: number = 0;
@@ -614,10 +706,24 @@ export default class HTMLToolbar {
 		});
 	}
 
-	public addActionButton(text: string, command: ()=> void, parent?: Element) {
+	public addActionButton(title: string|ActionButtonIcon, command: ()=> void, parent?: Element) {
 		const button = document.createElement('button');
-		button.innerText = text;
 		button.classList.add(`${toolbarCSSPrefix}toolButton`);
+
+		if (typeof title === 'string') {
+			button.innerText = title;
+		} else {
+			const iconElem = title.icon.cloneNode(true) as HTMLElement;
+			const labelElem = document.createElement('label');
+
+			// Use the label to describe the icon -- no additional description should be necessary.
+			iconElem.setAttribute('alt', '');
+			labelElem.innerText = title.label;
+			iconElem.classList.add('toolbar-icon');
+
+			button.replaceChildren(iconElem, labelElem);
+		}
+
 		button.onclick = command;
 		(parent ?? this.container).appendChild(button);
 
@@ -628,10 +734,16 @@ export default class HTMLToolbar {
 		const undoRedoGroup = document.createElement('div');
 		undoRedoGroup.classList.add(`${toolbarCSSPrefix}buttonGroup`);
 
-		const undoButton = this.addActionButton('Undo', () => {
+		const undoButton = this.addActionButton({
+			label: 'Undo',
+			icon: makeUndoIcon()
+		}, () => {
 			this.editor.history.undo();
 		}, undoRedoGroup);
-		const redoButton = this.addActionButton('Redo', () => {
+		const redoButton = this.addActionButton({
+			label: 'Redo',
+			icon: makeRedoIcon(),
+		}, () => {
 			this.editor.history.redo();
 		}, undoRedoGroup);
 		this.container.appendChild(undoRedoGroup);
@@ -677,8 +789,20 @@ export default class HTMLToolbar {
 			(new SelectionWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
 		}
 
-		for (const tool of toolController.getMatchingTools(ToolType.TouchPanZoom)) {
-			(new TouchDrawingWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
+		for (const tool of toolController.getMatchingTools(ToolType.Text)) {
+			if (!(tool instanceof TextTool)) {
+				throw new Error('All text tools must have kind === ToolType.Text');
+			}
+	
+			(new TextToolWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
+		}
+
+		for (const tool of toolController.getMatchingTools(ToolType.PanZoom)) {
+			if (!(tool instanceof PanZoom)) {
+				throw new Error('All SelectionTools must have kind === ToolType.PanZoom');
+			}
+	
+			(new HandToolWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
 		}
 
 		this.setupColorPickers();