js-draw 0.18.1 → 0.18.2

package/src/toolbar/widgets/BaseWidget.ts

@@ -0,0 +1,377 @@
+import Editor from '../../Editor';
+import { DispatcherEventListener } from '../../EventDispatcher';
+import ToolbarShortcutHandler from '../../tools/ToolbarShortcutHandler';
+import { EditorEventType, InputEvtType, KeyPressEvent } from '../../types';
+import { toolbarCSSPrefix } from '../HTMLToolbar';
+import { ToolbarLocalization } from '../localization';
+
+export type SavedToolbuttonState = Record<string, any>;
+
+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;
+
+	// Maps subWidget IDs to subWidgets.
+	private subWidgets: Record<string, BaseWidget> = {};
+
+	private toplevel: boolean = true;
+	protected readonly localizationTable: ToolbarLocalization;
+
+	public constructor(
+		protected editor: Editor,
+		protected id: string,
+		localizationTable?: ToolbarLocalization,
+	) {
+		this.localizationTable = localizationTable ?? editor.localization;
+
+		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;
+
+		const toolbarShortcutHandlers = this.editor.toolController.getMatchingTools(ToolbarShortcutHandler);
+
+		// If the onKeyPress function has been extended and the editor is configured to send keypress events to
+		// toolbar widgets,
+		if (toolbarShortcutHandlers.length > 0 && this.onKeyPress !== BaseWidget.prototype.onKeyPress) {
+			toolbarShortcutHandlers[0].registerListener(event => this.onKeyPress(event));
+		}
+	}
+
+	public getId(): string {
+		return this.id;
+	}
+
+	/**
+	 * Returns the ID of this widget in `container`. Adds a suffix to this' ID
+	 * if an item in `container` already has this' ID.
+	 * 
+	 * For example, if `this` has ID `foo` and if
+	 * `container = { 'foo': somethingNotThis, 'foo-1': somethingElseNotThis }`, this method
+	 * returns `foo-2` because elements with IDs `foo` and `foo-1` are already present in
+	 * `container`.
+	 */
+	public getUniqueIdIn(container: Record<string, BaseWidget>): string {
+		let id = this.getId();
+		let idCounter = 0;
+
+		while (id in container && container[id] !== this) {
+			id = this.getId() + '-' + idCounter.toString();
+			idCounter ++;
+		}
+
+		return id;
+	}
+
+	protected abstract getTitle(): string;
+	protected abstract createIcon(): Element|null;
+
+	// 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 (Object.keys(this.subWidgets).length === 0) {
+			return false;
+		}
+
+		for (const widgetId in this.subWidgets) {
+			const widget = this.subWidgets[widgetId];
+
+			widget.addTo(dropdown);
+			widget.setIsToplevel(false);
+		}
+		return true;
+	}
+
+	protected setupActionBtnClickListener(button: HTMLElement) {
+		const clickTriggers = { Enter: true, ' ': true, };
+		button.onkeydown = (evt) => {
+			let handled = false;
+
+			if (evt.key in clickTriggers) {
+				if (!this.disabled) {
+					this.handleClick();
+					handled = true;
+				}
+			}
+
+			// If we didn't do anything with the event, send it to the editor.
+			if (!handled) {
+				handled = this.editor.toolController.dispatchInputEvent({
+					kind: InputEvtType.KeyPressEvent,
+					key: evt.key,
+					ctrlKey: evt.ctrlKey || evt.metaKey,
+					altKey: evt.altKey,
+				});
+			}
+
+			if (handled) {
+				evt.preventDefault();
+			}
+		};
+
+		button.onkeyup = evt => {
+			if (evt.key in clickTriggers) {
+				return;
+			}
+
+			const handled = this.editor.toolController.dispatchInputEvent({
+				kind: InputEvtType.KeyUpEvent,
+				key: evt.key,
+				ctrlKey: evt.ctrlKey || evt.metaKey,
+				altKey: evt.altKey,
+			});
+
+			if (handled) {
+				evt.preventDefault();
+			}
+		};
+
+		button.onclick = () => {
+			if (!this.disabled) {
+				this.handleClick();
+			}
+		};
+	}
+
+	// Add a listener that is triggered when a key is pressed.
+	// Listeners will fire regardless of whether this widget is selected and require that
+	// {@link lib!Editor.toolController} to have an enabled {@link lib!ToolbarShortcutHandler} tool.
+	protected onKeyPress(_event: KeyPressEvent): boolean {
+		return false;
+	}
+
+	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) {
+		// Generate a unique ID for the widget.
+		const id = widget.getUniqueIdIn(this.subWidgets);
+
+		this.subWidgets[id] = widget;
+	}
+
+	private toolbarWidgetToggleListener: DispatcherEventListener|null = null;
+
+	// Adds this to [parent]. This can only be called once for each ToolbarWidget.
+	// Returns the element that was just added to `parent`.
+	// @internal
+	public addTo(parent: HTMLElement) {
+		this.label.innerText = this.getTitle();
+
+		this.setupActionBtnClickListener(this.button);
+
+		this.icon = null;
+		this.updateIcon();
+
+		this.container.replaceChildren();
+
+		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);
+
+			if (this.toolbarWidgetToggleListener) {
+				this.toolbarWidgetToggleListener.remove();
+			}
+
+			this.toolbarWidgetToggleListener = this.editor.notifier.on(EditorEventType.ToolbarDropdownShown, (evt) => {
+				if (
+					evt.kind === EditorEventType.ToolbarDropdownShown
+					&& evt.parentWidget !== this
+
+					// Don't hide if a submenu wash shown (it might be a submenu of
+					// the current menu).
+					&& evt.parentWidget.toplevel
+				) {
+					this.setDropdownVisible(false);
+				}
+			});
+		}
+
+		this.setDropdownVisible(false);
+
+		if (this.container.parentElement) {
+			this.container.remove();
+		}
+
+		parent.appendChild(this.container);
+		return this.container;
+	}
+
+
+	protected updateIcon() {
+		const newIcon = this.createIcon();
+
+		if (newIcon) {
+			this.icon?.replaceWith(newIcon);
+			this.icon = newIcon;
+			this.icon.classList.add(`${toolbarCSSPrefix}icon`);
+		} else {
+			this.icon?.remove();
+		}
+	}
+
+	public setDisabled(disabled: boolean) {
+		this.disabled = disabled;
+		if (this.disabled) {
+			this.button.classList.add('disabled');
+			this.button.setAttribute('aria-disabled', 'true');
+		} else {
+			this.button.classList.remove('disabled');
+			this.button.removeAttribute('aria-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())
+			);
+
+			this.editor.notifier.dispatch(EditorEventType.ToolbarDropdownShown, {
+				kind: EditorEventType.ToolbarDropdownShown,
+				parentWidget: this,
+			});
+		} else {
+			this.dropdownContainer.classList.add('hidden');
+			this.container.classList.remove('dropdownVisible');
+			this.editor.announceForAccessibility(
+				this.localizationTable.dropdownHidden(this.getTitle())
+			);
+		}
+
+		this.repositionDropdown();
+	}
+
+	public canBeInOverflowMenu(): boolean {
+		return true;
+	}
+
+	public getButtonWidth(): number {
+		return this.button.clientWidth;
+	}
+
+	public isHidden(): boolean {
+		return this.container.style.display === 'none';
+	}
+
+	public setHidden(hidden: boolean) {
+		this.container.style.display = hidden ? 'none' : '';
+	}
+
+	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 = '';
+		}
+	}
+
+	/** Set whether the widget is contained within another. @internal */
+	public setIsToplevel(toplevel: boolean) {
+		this.toplevel = toplevel;
+	}
+
+	protected isDropdownVisible(): boolean {
+		return !this.dropdownContainer.classList.contains('hidden');
+	}
+
+	protected isSelected(): boolean {
+		return this.container.classList.contains('selected');
+	}
+
+	private createDropdownIcon(): Element {
+		const icon = this.editor.icons.makeDropdownIcon();
+		icon.classList.add(`${toolbarCSSPrefix}showHideDropdownIcon`);
+		return icon;
+	}
+
+	/**
+	 * Serialize state associated with this widget.
+	 * Override this method to allow saving/restoring from state on application load.
+	 * 
+	 * Overriders should call `super` and include the output of `super.serializeState` in
+	 * the output dictionary.
+	 * 
+	 * Clients should not rely on the output from `saveState` being in any particular
+	 * format.
+	 */
+	public serializeState(): SavedToolbuttonState {
+		const subwidgetState: Record<string, any> = {};
+
+		// Save all subwidget state.
+		for (const subwidgetId in this.subWidgets) {
+			subwidgetState[subwidgetId] = this.subWidgets[subwidgetId].serializeState();
+		}
+
+		return {
+			subwidgetState,
+		};
+	}
+
+	/**
+	 * Restore widget state from serialized data. See also `saveState`.
+	 * 
+	 * Overriders must call `super`.
+	 */
+	public deserializeFrom(state: SavedToolbuttonState): void {
+		if (state.subwidgetState) {
+			// Deserialize all subwidgets.
+			for (const subwidgetId in state.subwidgetState) {
+				if (subwidgetId in this.subWidgets) {
+					this.subWidgets[subwidgetId].deserializeFrom(state.subwidgetState[subwidgetId]);
+				}
+			}
+		}
+	}
+}

package/src/toolbar/widgets/DocumentPropertiesWidget.ts

@@ -0,0 +1,167 @@
+import Color4 from '../../Color4';
+import Editor from '../../Editor';
+import { EditorImageEventType } from '../../EditorImage';
+import Rect2 from '../../math/Rect2';
+import { EditorEventType } from '../../types';
+import { toolbarCSSPrefix } from '../HTMLToolbar';
+import { ToolbarLocalization } from '../localization';
+import makeColorInput from '../makeColorInput';
+import BaseWidget from './BaseWidget';
+
+export default class DocumentPropertiesWidget extends BaseWidget {
+	private updateDropdownContent: ()=>void = () => {};
+
+	public constructor(editor: Editor, localizationTable?: ToolbarLocalization) {
+		super(editor, 'zoom-widget', localizationTable);
+
+		// Make it possible to open the dropdown, even if this widget isn't selected.
+		this.container.classList.add('dropdownShowable');
+
+		this.editor.notifier.on(EditorEventType.UndoRedoStackUpdated, () => {
+			this.queueDropdownUpdate();
+		});
+
+
+		this.editor.image.notifier.on(EditorImageEventType.ExportViewportChanged, () => {
+			this.queueDropdownUpdate();
+		});
+	}
+
+	protected getTitle(): string {
+		return this.localizationTable.documentProperties;
+	}
+
+	protected createIcon(): Element {
+		return this.editor.icons.makeConfigureDocumentIcon();
+	}
+
+	protected handleClick() {
+		this.setDropdownVisible(!this.isDropdownVisible());
+		this.queueDropdownUpdate();
+	}
+
+	private dropdownUpdateQueued: boolean = false;
+	private queueDropdownUpdate() {
+		if (!this.dropdownUpdateQueued) {
+			requestAnimationFrame(() => this.updateDropdown());
+			this.dropdownUpdateQueued = true;
+		}
+	}
+
+	private updateDropdown() {
+		this.dropdownUpdateQueued = false;
+
+		if (this.isDropdownVisible()) {
+			this.updateDropdownContent();
+		}
+	}
+
+	private setBackgroundColor(color: Color4) {
+		this.editor.dispatch(this.editor.setBackgroundColor(color));
+	}
+
+	private getBackgroundColor() {
+		return this.editor.estimateBackgroundColor();
+	}
+
+	private updateImportExportRectSize(size: { width?: number, height?: number }) {
+		const filterDimension = (dim: number|undefined) => {
+			if (dim !== undefined && (!isFinite(dim) || dim <= 0)) {
+				dim = 100;
+			}
+
+			return dim;
+		};
+
+		const width = filterDimension(size.width);
+		const height = filterDimension(size.height);
+
+		const currentRect = this.editor.getImportExportRect();
+		const newRect = new Rect2(
+			currentRect.x, currentRect.y,
+			width ?? currentRect.w, height ?? currentRect.h
+		);
+
+		this.editor.dispatch(this.editor.image.setImportExportRect(newRect));
+		this.editor.queueRerender();
+	}
+
+	private static idCounter = 0;
+
+	protected fillDropdown(dropdown: HTMLElement): boolean {
+		const container = document.createElement('div');
+		container.classList.add(`${toolbarCSSPrefix}spacedList`);
+
+		const backgroundColorRow = document.createElement('div');
+		const backgroundColorLabel = document.createElement('label');
+
+		backgroundColorLabel.innerText = this.localizationTable.backgroundColor;
+
+		const [ colorInput, backgroundColorInputContainer, setBgColorInputValue ] = makeColorInput(this.editor, color => {
+			if (!color.eq(this.getBackgroundColor())) {
+				this.setBackgroundColor(color);
+			}
+		});
+
+		colorInput.id = `${toolbarCSSPrefix}docPropertiesColorInput-${DocumentPropertiesWidget.idCounter++}`;
+		backgroundColorLabel.htmlFor = colorInput.id;
+
+		backgroundColorRow.replaceChildren(backgroundColorLabel, backgroundColorInputContainer);
+
+		const addDimensionRow = (labelContent: string, onChange: (value: number)=>void) => {
+			const row = document.createElement('div');
+			const label = document.createElement('label');
+			const spacer = document.createElement('span');
+			const input = document.createElement('input');
+
+			label.innerText = labelContent;
+			input.type = 'number';
+			input.min = '0';
+			input.id = `${toolbarCSSPrefix}docPropertiesDimensionRow-${DocumentPropertiesWidget.idCounter++}`;
+			label.htmlFor = input.id;
+
+			spacer.style.flexGrow = '1';
+			input.style.flexGrow = '2';
+			input.style.width = '25px';
+
+			row.style.display = 'flex';
+
+			input.oninput = () => {
+				onChange(parseFloat(input.value));
+			};
+
+			row.replaceChildren(label, spacer, input);
+
+			return {
+				setValue: (value: number) => {
+					input.value = value.toString();
+				},
+				element: row,
+			};
+		};
+
+		const imageWidthRow = addDimensionRow(this.localizationTable.imageWidthOption, (value: number) => {
+			this.updateImportExportRectSize({ width: value });
+		});
+		const imageHeightRow = addDimensionRow(this.localizationTable.imageHeightOption, (value: number) => {
+			this.updateImportExportRectSize({ height: value });
+		});
+
+		this.updateDropdownContent = () => {
+			setBgColorInputValue(this.getBackgroundColor());
+
+			const importExportRect = this.editor.getImportExportRect();
+			imageWidthRow.setValue(importExportRect.width);
+			imageHeightRow.setValue(importExportRect.height);
+		};
+		this.updateDropdownContent();
+
+
+		container.replaceChildren(
+			backgroundColorRow, imageWidthRow.element, imageHeightRow.element
+		);
+		dropdown.replaceChildren(container);
+
+		return true;
+	}
+}

package/src/toolbar/widgets/EraserToolWidget.ts

@@ -0,0 +1,85 @@
+import Editor from '../../Editor';
+import Eraser from '../../tools/Eraser';
+import { EditorEventType } from '../../types';
+import { toolbarCSSPrefix } from '../HTMLToolbar';
+import { ToolbarLocalization } from '../localization';
+import BaseToolWidget from './BaseToolWidget';
+import { SavedToolbuttonState } from './BaseWidget';
+
+export default class EraserToolWidget extends BaseToolWidget {
+	private thicknessInput: HTMLInputElement|null = null;
+	public constructor(
+		editor: Editor,
+		private tool: Eraser,
+		localizationTable?: ToolbarLocalization
+	) {
+		super(editor, tool, 'eraser-tool-widget', localizationTable);
+
+		this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
+			if (toolEvt.kind === EditorEventType.ToolUpdated && toolEvt.tool === this.tool) {
+				this.updateInputs();
+				this.updateIcon();
+			}
+		});
+	}
+
+	protected getTitle(): string {
+		return this.localizationTable.eraser;
+	}
+
+	protected createIcon(): Element {
+		return this.editor.icons.makeEraserIcon(this.tool.getThickness());
+	}
+
+	private updateInputs() {
+		if (this.thicknessInput) {
+			this.thicknessInput.value = `${this.tool.getThickness()}`;
+		}
+	}
+
+	private static nextThicknessInputId = 0;
+
+	protected fillDropdown(dropdown: HTMLElement): boolean {
+		const thicknessLabel = document.createElement('label');
+		this.thicknessInput = document.createElement('input');
+
+		this.thicknessInput.type = 'range';
+		this.thicknessInput.min = '4';
+		this.thicknessInput.max = '40';
+		this.thicknessInput.oninput = () => {
+			this.tool.setThickness(parseFloat(this.thicknessInput!.value));
+		};
+		this.thicknessInput.id = `${toolbarCSSPrefix}eraserThicknessInput${EraserToolWidget.nextThicknessInputId++}`;
+
+		thicknessLabel.innerText = this.localizationTable.thicknessLabel;
+		thicknessLabel.htmlFor = this.thicknessInput.id;
+
+		this.updateInputs();
+		dropdown.replaceChildren(thicknessLabel, this.thicknessInput);
+		return true;
+	}
+
+	public serializeState(): SavedToolbuttonState {
+		return {
+			...super.serializeState(),
+
+			thickness: this.tool.getThickness(),
+		};
+	}
+
+	public deserializeFrom(state: SavedToolbuttonState) {
+		super.deserializeFrom(state);
+
+		if (state.thickness) {
+			const parsedThickness = parseFloat(state.thickness);
+
+			if (typeof parsedThickness !== 'number' || !isFinite(parsedThickness)) {
+				throw new Error(
+					`Deserializing property ${parsedThickness} is not a number or is not finite.`
+				);
+			}
+
+			this.tool.setThickness(parsedThickness);
+		}
+	}
+}