js-draw 0.1.5 → 0.1.8

package/src/toolbar/widgets/BaseToolWidget.ts

@@ -0,0 +1,53 @@
+import Editor from '../../Editor';
+import BaseTool from '../../tools/BaseTool';
+import { EditorEventType } from '../../types';
+import { ToolbarLocalization } from '../localization';
+import BaseWidget from './BaseWidget';
+
+export default abstract class BaseToolWidget extends BaseWidget {
+	public constructor(
+		protected editor: Editor,
+		protected targetTool: BaseTool,
+		protected localizationTable: ToolbarLocalization,
+	) {
+		super(editor, localizationTable);
+
+		editor.notifier.on(EditorEventType.ToolEnabled, toolEvt => {
+			if (toolEvt.kind !== EditorEventType.ToolEnabled) {
+				throw new Error('Incorrect event type! (Expected ToolEnabled)');
+			}
+
+			if (toolEvt.tool === targetTool) {
+				this.setSelected(true);
+			}
+		});
+
+		editor.notifier.on(EditorEventType.ToolDisabled, toolEvt => {
+			if (toolEvt.kind !== EditorEventType.ToolDisabled) {
+				throw new Error('Incorrect event type! (Expected ToolDisabled)');
+			}
+
+			if (toolEvt.tool === targetTool) {
+				this.setSelected(false);
+				this.setDropdownVisible(false);
+			}
+		});
+	}
+
+	protected handleClick() {
+		if (this.hasDropdown) {
+			if (!this.targetTool.isEnabled()) {
+				this.targetTool.setEnabled(true);
+			} else {
+				this.setDropdownVisible(!this.isDropdownVisible());
+			}
+		} else {
+			this.targetTool.setEnabled(!this.targetTool.isEnabled());
+		}
+	}
+
+	public addTo(parent: HTMLElement) {
+		super.addTo(parent);
+		this.setSelected(this.targetTool.isEnabled());
+	}
+}

package/src/toolbar/widgets/BaseWidget.ts

@@ -0,0 +1,175 @@
+import Editor from '../../Editor';
+import { toolbarCSSPrefix } from '../HTMLToolbar';
+import { makeDropdownIcon } from '../icons';
+import { ToolbarLocalization } from '../localization';
+
+export default abstract class BaseWidget {
+	protected readonly container: HTMLElement;
+	private button: HTMLElement;
+	private icon: Element|null;
+	private dropdownContainer: HTMLElement;
+	private dropdownIcon: Element;
+	private label: HTMLLabelElement;
+	#hasDropdown: boolean;
+	private disabled: boolean = false;
+	private subWidgets: BaseWidget[] = [];
+
+	public constructor(
+		protected editor: Editor,
+		protected localizationTable: ToolbarLocalization,
+	) {
+		this.icon = null;
+		this.container = document.createElement('div');
+		this.container.classList.add(`${toolbarCSSPrefix}toolContainer`);
+		this.dropdownContainer = document.createElement('div');
+		this.dropdownContainer.classList.add(`${toolbarCSSPrefix}dropdown`);
+		this.dropdownContainer.classList.add('hidden');
+		this.#hasDropdown = false;
+
+		this.button = document.createElement('div');
+		this.button.classList.add(`${toolbarCSSPrefix}button`);
+		this.label = document.createElement('label');
+		this.button.setAttribute('role', 'button');
+		this.button.tabIndex = 0;
+	}
+
+	protected abstract getTitle(): string;
+	protected abstract createIcon(): Element;
+
+	// Add content to the widget's associated dropdown menu.
+	// Returns true if such a menu should be created, false otherwise.
+	protected fillDropdown(dropdown: HTMLElement): boolean {
+		if (this.subWidgets.length === 0) {
+			return false;
+		}
+
+		for (const widget of this.subWidgets) {
+			widget.addTo(dropdown);
+		}
+		return true;
+	}
+
+	protected setupActionBtnClickListener(button: HTMLElement) {
+		button.onclick = () => {
+			if (!this.disabled) {
+				this.handleClick();
+			}
+		};
+	}
+
+	protected abstract handleClick(): void;
+
+	protected get hasDropdown() {
+		return this.#hasDropdown;
+	}
+
+	// Add a widget to this' dropdown. Must be called before this.addTo.
+	protected addSubWidget(widget: BaseWidget) {
+		this.subWidgets.push(widget);
+	}
+
+	// Adds this to [parent]. This can only be called once for each ToolbarWidget.
+	public addTo(parent: HTMLElement) {
+		this.label.innerText = this.getTitle();
+
+		this.setupActionBtnClickListener(this.button);
+
+		this.icon = null;
+		this.updateIcon();
+
+		this.button.replaceChildren(this.icon!, this.label);
+		this.container.appendChild(this.button);
+
+		this.#hasDropdown = this.fillDropdown(this.dropdownContainer);
+		if (this.#hasDropdown) {
+			this.dropdownIcon = this.createDropdownIcon();
+			this.button.appendChild(this.dropdownIcon);
+			this.container.appendChild(this.dropdownContainer);
+		}
+
+		this.setDropdownVisible(false);
+		parent.appendChild(this.container);
+	}
+
+
+	protected updateIcon() {
+		const newIcon = this.createIcon();
+		this.icon?.replaceWith(newIcon);
+		this.icon = newIcon;
+		this.icon.classList.add(`${toolbarCSSPrefix}icon`);
+	}
+
+	public setDisabled(disabled: boolean) {
+		this.disabled = disabled;
+		if (this.disabled) {
+			this.button.classList.add('disabled');
+		} else {
+			this.button.classList.remove('disabled');
+		}
+	}
+
+	public setSelected(selected: boolean) {
+		const currentlySelected = this.isSelected();
+		if (currentlySelected === selected) {
+			return;
+		}
+
+		if (selected) {
+			this.container.classList.add('selected');
+			this.button.ariaSelected = 'true';
+		} else {
+			this.container.classList.remove('selected');
+			this.button.ariaSelected = 'false';
+		}
+	}
+
+	protected setDropdownVisible(visible: boolean) {
+		const currentlyVisible = this.container.classList.contains('dropdownVisible');
+		if (currentlyVisible === visible) {
+			return;
+		}
+
+		if (visible) {
+			this.dropdownContainer.classList.remove('hidden');
+			this.container.classList.add('dropdownVisible');
+			this.editor.announceForAccessibility(
+				this.localizationTable.dropdownShown(this.getTitle())
+			);
+		} else {
+			this.dropdownContainer.classList.add('hidden');
+			this.container.classList.remove('dropdownVisible');
+			this.editor.announceForAccessibility(
+				this.localizationTable.dropdownHidden(this.getTitle())
+			);
+		}
+
+		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 {
+		return !this.dropdownContainer.classList.contains('hidden');
+	}
+
+	protected isSelected(): boolean {
+		return this.container.classList.contains('selected');
+	}
+
+	private createDropdownIcon(): Element {
+		const icon = makeDropdownIcon();
+		icon.classList.add(`${toolbarCSSPrefix}showHideDropdownIcon`);
+		return icon;
+	}
+}

package/src/toolbar/widgets/EraserWidget.ts

@@ -0,0 +1,16 @@
+import { makeEraserIcon } from '../icons';
+import BaseToolWidget from './BaseToolWidget';
+
+export default class EraserWidget extends BaseToolWidget {
+	protected getTitle(): string {
+		return this.localizationTable.eraser;
+	}
+	protected createIcon(): Element {
+		return makeEraserIcon();
+	}
+
+	protected fillDropdown(_dropdown: HTMLElement): boolean {
+		// No dropdown associated with the eraser
+		return false;
+	}
+}

package/src/toolbar/widgets/HandToolWidget.ts

@@ -0,0 +1,186 @@
+import Editor from '../../Editor';
+import Mat33 from '../../geometry/Mat33';
+import PanZoom, { PanZoomMode } from '../../tools/PanZoom';
+import { EditorEventType } from '../../types';
+import Viewport from '../../Viewport';
+import { toolbarCSSPrefix } from '../HTMLToolbar';
+import { makeAllDevicePanningIcon, makeHandToolIcon, makeTouchPanningIcon, makeZoomIcon } from '../icons';
+import { ToolbarLocalization } from '../localization';
+import BaseToolWidget from './BaseToolWidget';
+import BaseWidget from './BaseWidget';
+
+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 ZoomWidget extends BaseWidget {
+	public constructor(editor: Editor, localizationTable: ToolbarLocalization) {
+		super(editor, localizationTable);
+
+		// Make it possible to open the dropdown, even if this widget isn't selected.
+		this.container.classList.add('dropdownShowable');
+	}
+
+	protected getTitle(): string {
+		return this.localizationTable.zoom;
+	}
+	
+	protected createIcon(): Element {
+		return makeZoomIcon();
+	}
+
+	protected handleClick(): void {
+		this.setDropdownVisible(!this.isDropdownVisible());
+	}
+
+	protected fillDropdown(dropdown: HTMLElement): boolean {
+		dropdown.appendChild(makeZoomControl(this.localizationTable, this.editor));
+		return true;
+	}
+}
+
+class HandModeWidget extends BaseWidget {
+	public constructor(
+		editor: Editor, localizationTable: ToolbarLocalization,
+
+		protected tool: PanZoom, protected flag: PanZoomMode, protected makeIcon: ()=> Element,
+		private title: string,
+	) {
+		super(editor, localizationTable);
+
+		editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
+			if (toolEvt.kind === EditorEventType.ToolUpdated && toolEvt.tool === tool) {
+				const allEnabled = !!(tool.getMode() & PanZoomMode.SinglePointerGestures);
+				this.setSelected(!!(tool.getMode() & flag) || allEnabled);
+
+				// Unless this widget toggles all single pointer gestures, toggling while
+				// single pointer gestures are enabled should have no effect
+				this.setDisabled(allEnabled && flag !== PanZoomMode.SinglePointerGestures);
+			}
+		});
+		this.setSelected(false);
+	}
+
+	private setModeFlag(enabled: boolean) {
+		const mode = this.tool.getMode();
+		if (enabled) {
+			this.tool.setMode(mode | this.flag);
+		} else {
+			this.tool.setMode(mode & ~this.flag);
+		}
+	}
+
+	protected handleClick() {
+		this.setModeFlag(!this.isSelected());
+	}
+
+	protected getTitle(): string {
+		return this.title;
+	}
+
+	protected createIcon(): Element {
+		return this.makeIcon();
+	}
+
+	protected fillDropdown(_dropdown: HTMLElement): boolean {
+		return false;
+	}
+}
+
+export default class HandToolWidget extends BaseToolWidget {
+	private touchPanningWidget: HandModeWidget;
+	public constructor(
+		editor: Editor, protected tool: PanZoom, localizationTable: ToolbarLocalization
+	) {
+		super(editor, tool, localizationTable);
+		this.container.classList.add('dropdownShowable');
+
+		this.touchPanningWidget = new HandModeWidget(
+			editor, localizationTable,
+
+			tool, PanZoomMode.OneFingerTouchGestures,
+			makeTouchPanningIcon,
+
+			localizationTable.touchPanning
+		);
+
+		this.addSubWidget(this.touchPanningWidget);
+		this.addSubWidget(
+			new HandModeWidget(
+				editor, localizationTable,
+
+				tool, PanZoomMode.SinglePointerGestures,
+				makeAllDevicePanningIcon,
+
+				localizationTable.anyDevicePanning
+			)
+		);
+		this.addSubWidget(
+			new ZoomWidget(editor, localizationTable)
+		);
+	}
+
+	protected getTitle(): string {
+		return this.localizationTable.handTool;
+	}
+
+	protected createIcon(): Element {
+		return makeHandToolIcon();
+	}
+
+	public setSelected(_selected: boolean): void {
+	}
+
+	protected handleClick() {
+		this.setDropdownVisible(!this.isDropdownVisible());
+	}
+}

package/src/toolbar/widgets/PenWidget.ts

@@ -0,0 +1,165 @@
+import { makeArrowBuilder } from '../../components/builders/ArrowBuilder';
+import { makeFreehandLineBuilder } from '../../components/builders/FreehandLineBuilder';
+import { makeLineBuilder } from '../../components/builders/LineBuilder';
+import { makeFilledRectangleBuilder, makeOutlinedRectangleBuilder } from '../../components/builders/RectangleBuilder';
+import { ComponentBuilderFactory } from '../../components/builders/types';
+import Editor from '../../Editor';
+import Pen from '../../tools/Pen';
+import { EditorEventType } from '../../types';
+import { toolbarCSSPrefix } from '../HTMLToolbar';
+import { makeIconFromFactory, makePenIcon } from '../icons';
+import { ToolbarLocalization } from '../localization';
+import makeColorInput from '../makeColorInput';
+import BaseToolWidget from './BaseToolWidget';
+
+
+interface PenTypeRecord {
+	name: string;
+	factory: ComponentBuilderFactory;
+}
+
+export default class PenWidget extends BaseToolWidget {
+	private updateInputs: ()=> void = () => {};
+	protected penTypes: PenTypeRecord[];
+
+	public constructor(
+		editor: Editor, private tool: Pen, localization: ToolbarLocalization
+	) {
+		super(editor, tool, localization);
+
+		// Default pen types
+		this.penTypes = [
+			{
+				name: localization.freehandPen,
+				factory: makeFreehandLineBuilder,
+			},
+			{
+				name: localization.arrowPen,
+				factory: makeArrowBuilder,
+			},
+			{
+				name: localization.linePen,
+				factory: makeLineBuilder,
+			},
+			{
+				name: localization.filledRectanglePen,
+				factory: makeFilledRectangleBuilder,
+			},
+			{
+				name: localization.outlinedRectanglePen,
+				factory: makeOutlinedRectangleBuilder,
+			},
+		];
+
+		this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
+			if (toolEvt.kind !== EditorEventType.ToolUpdated) {
+				throw new Error('Invalid event type!');
+			}
+
+			// The button icon may depend on tool properties.
+			if (toolEvt.tool === this.tool) {
+				this.updateIcon();
+				this.updateInputs();
+			}
+		});
+	}
+
+	protected getTitle(): string {
+		return this.targetTool.description;
+	}
+
+	protected createIcon(): Element {
+		const strokeFactory = this.tool.getStrokeFactory();
+		if (strokeFactory === makeFreehandLineBuilder) {
+			// 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 {
+			const strokeFactory = this.tool.getStrokeFactory();
+			return makeIconFromFactory(this.tool, strokeFactory);
+		}
+	}
+
+	private static idCounter: number = 0;
+	protected fillDropdown(dropdown: HTMLElement): boolean {
+		const container = document.createElement('div');
+
+		const thicknessRow = document.createElement('div');
+		const objectTypeRow = document.createElement('div');
+
+		// Thickness: Value of the input is squared to allow for finer control/larger values.
+		const thicknessLabel = document.createElement('label');
+		const thicknessInput = document.createElement('input');
+		const objectSelectLabel = document.createElement('label');
+		const objectTypeSelect = document.createElement('select');
+
+		// Give inputs IDs so we can label them with a <label for=...>Label text</label>
+		thicknessInput.id = `${toolbarCSSPrefix}thicknessInput${PenWidget.idCounter++}`;
+		objectTypeSelect.id = `${toolbarCSSPrefix}builderSelect${PenWidget.idCounter++}`;
+
+		thicknessLabel.innerText = this.localizationTable.thicknessLabel;
+		thicknessLabel.setAttribute('for', thicknessInput.id);
+		objectSelectLabel.innerText = this.localizationTable.selectObjectType;
+		objectSelectLabel.setAttribute('for', objectTypeSelect.id);
+
+		thicknessInput.type = 'range';
+		thicknessInput.min = '1';
+		thicknessInput.max = '20';
+		thicknessInput.step = '1';
+		thicknessInput.oninput = () => {
+			this.tool.setThickness(parseFloat(thicknessInput.value) ** 2);
+		};
+		thicknessRow.appendChild(thicknessLabel);
+		thicknessRow.appendChild(thicknessInput);
+
+		objectTypeSelect.oninput = () => {
+			const penTypeIdx = parseInt(objectTypeSelect.value);
+			if (penTypeIdx < 0 || penTypeIdx >= this.penTypes.length) {
+				console.error('Invalid pen type index', penTypeIdx);
+				return;
+			}
+
+			this.tool.setStrokeFactory(this.penTypes[penTypeIdx].factory);
+		};
+		objectTypeRow.appendChild(objectSelectLabel);
+		objectTypeRow.appendChild(objectTypeSelect);
+
+		const colorRow = document.createElement('div');
+		const colorLabel = document.createElement('label');
+		const [ colorInput, colorInputContainer ] = makeColorInput(this.editor, color => {
+			this.tool.setColor(color);
+		});
+
+		colorInput.id = `${toolbarCSSPrefix}colorInput${PenWidget.idCounter++}`;
+		colorLabel.innerText = this.localizationTable.colorLabel;
+		colorLabel.setAttribute('for', colorInput.id);
+
+		colorRow.appendChild(colorLabel);
+		colorRow.appendChild(colorInputContainer);
+
+		this.updateInputs = () => {
+			colorInput.value = this.tool.getColor().toHexString();
+			thicknessInput.value = Math.sqrt(this.tool.getThickness()).toString();
+
+			objectTypeSelect.replaceChildren();
+			for (let i = 0; i < this.penTypes.length; i ++) {
+				const penType = this.penTypes[i];
+				const option = document.createElement('option');
+				option.value = i.toString();
+				option.innerText = penType.name;
+
+				objectTypeSelect.appendChild(option);
+
+				if (penType.factory === this.tool.getStrokeFactory()) {
+					objectTypeSelect.value = i.toString();
+				}
+			}
+		};
+		this.updateInputs();
+
+		container.replaceChildren(colorRow, thicknessRow, objectTypeRow);
+		dropdown.replaceChildren(container);
+		return true;
+	}
+}

package/src/toolbar/widgets/SelectionWidget.ts

@@ -0,0 +1,72 @@
+import Editor from '../../Editor';
+import SelectionTool from '../../tools/SelectionTool';
+import { EditorEventType } from '../../types';
+import { makeSelectionIcon } from '../icons';
+import { ToolbarLocalization } from '../localization';
+import BaseToolWidget from './BaseToolWidget';
+
+export class SelectionWidget extends BaseToolWidget {
+	public constructor(
+		editor: Editor, private tool: SelectionTool, localization: ToolbarLocalization
+	) {
+		super(editor, tool, localization);
+	}
+
+	protected getTitle(): string {
+		return this.localizationTable.select;
+	}
+
+	protected createIcon(): Element {
+		return makeSelectionIcon();
+	}
+
+	protected fillDropdown(dropdown: HTMLElement): boolean {
+		const container = document.createElement('div');
+		const resizeButton = document.createElement('button');
+		const duplicateButton = document.createElement('button');
+		const deleteButton = document.createElement('button');
+
+		resizeButton.innerText = this.localizationTable.resizeImageToSelection;
+		resizeButton.disabled = true;
+		deleteButton.innerText = this.localizationTable.deleteSelection;
+		deleteButton.disabled = true;
+		duplicateButton.innerText = this.localizationTable.duplicateSelection;
+		duplicateButton.disabled = true;
+
+		resizeButton.onclick = () => {
+			const selection = this.tool.getSelection();
+			this.editor.dispatch(this.editor.setImportExportRect(selection!.region));
+		};
+
+		deleteButton.onclick = () => {
+			const selection = this.tool.getSelection();
+			this.editor.dispatch(selection!.deleteSelectedObjects());
+			this.tool.clearSelection();
+		};
+
+		duplicateButton.onclick = () => {
+			const selection = this.tool.getSelection();
+			this.editor.dispatch(selection!.duplicateSelectedObjects());
+		};
+
+		// Enable/disable actions based on whether items are selected
+		this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
+			if (toolEvt.kind !== EditorEventType.ToolUpdated) {
+				throw new Error('Invalid event type!');
+			}
+
+			if (toolEvt.tool === this.tool) {
+				const selection = this.tool.getSelection();
+				const hasSelection = selection && selection.region.area > 0;
+
+				resizeButton.disabled = !hasSelection;
+				deleteButton.disabled = resizeButton.disabled;
+				duplicateButton.disabled = resizeButton.disabled;
+			}
+		});
+
+		container.replaceChildren(resizeButton, duplicateButton, deleteButton);
+		dropdown.appendChild(container);
+		return true;
+	}
+}