js-draw 0.18.2 → 0.20.0

package/src/toolbar/widgets/BaseWidget.ts

@@ -1,377 +0,0 @@
-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

@@ -1,167 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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);
-		}
-	}
-}