js-draw 0.25.0 → 1.0.0

package/src/toolbar/widgets/BaseWidget.ts

@@ -1,428 +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 Editor.toolController} to have an enabled {@link 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`.
-	 * Returns the element that was just added to `parent`.
-	 * @internal
-	 */
-	public addTo(parent: HTMLElement) {
-		// Update title and icon
-		this.icon = null;
-		this.updateIcon();
-		this.label.innerText = this.getTitle();
-
-		const longLabelCSSClass = 'long-label';
-		if (this.label.innerText.length > 7) {
-			this.label.classList.add(longLabelCSSClass);
-		} else {
-			this.label.classList.remove(longLabelCSSClass);
-		}
-
-		// Click functionality
-		this.setupActionBtnClickListener(this.button);
-
-		// Clear anything already in this.container.
-		this.container.replaceChildren();
-
-		this.button.replaceChildren(this.icon!, this.label);
-		this.container.appendChild(this.button);
-
-		// Clear the dropdownContainer in case this element is being moved to another
-		// parent.
-		this.dropdownContainer.replaceChildren();
-		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;
-		}
-
-		// Ensure that accessibility tools check and read the value of
-		// aria-checked.
-		// TODO: Ensure that 'role' is set to 'switch' by default for selectable
-		//       buttons.
-		this.button.setAttribute('role', 'switch');
-
-		if (selected) {
-			this.container.classList.add('selected');
-			this.button.setAttribute('aria-checked', 'true');
-		} else {
-			this.container.classList.remove('selected');
-			this.button.setAttribute('aria-checked', 'false');
-		}
-	}
-
-	private hideDropdownTimeout: any|null = null;
-
-	protected setDropdownVisible(visible: boolean) {
-		const currentlyVisible = this.container.classList.contains('dropdownVisible');
-		if (currentlyVisible === visible) {
-			return;
-		}
-
-		// If waiting to hide the dropdown, cancel it.
-		if (this.hideDropdownTimeout) {
-			clearTimeout(this.hideDropdownTimeout);
-			this.hideDropdownTimeout = null;
-			this.dropdownContainer.classList.remove('hiding');
-			this.repositionDropdown();
-		}
-
-
-		const animationDuration = 150; // ms
-
-		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,
-			});
-
-			this.repositionDropdown();
-		} else {
-			this.container.classList.remove('dropdownVisible');
-			this.editor.announceForAccessibility(
-				this.localizationTable.dropdownHidden(this.getTitle())
-			);
-
-			this.dropdownContainer.classList.add('hiding');
-
-			// Hide the dropdown *slightly* before the animation finishes. This
-			// prevents flickering in some browsers.
-			const hideDelay = animationDuration * 0.95;
-
-			this.hideDropdownTimeout = setTimeout(() => {
-				this.dropdownContainer.classList.add('hidden');
-				this.dropdownContainer.classList.remove('hiding');
-				this.repositionDropdown();
-			}, hideDelay);
-		}
-
-		// Animate
-		const animationName = `var(--dropdown-${
-			visible ? 'show' : 'hide'
-		}-animation)`;
-		this.dropdownContainer.style.animation = `${animationDuration}ms ease ${animationName}`;
-	}
-
-	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) {
-			// Use .translate so as not to conflict with CSS animating the
-			// transform property.
-			this.dropdownContainer.style.translate = `calc(${this.button.clientWidth + 'px'} - 100%) 0`;
-		} else {
-			this.dropdownContainer.style.translate = '';
-		}
-	}
-
-	/** 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,234 +0,0 @@
-import Color4 from '../../Color4';
-import Erase from '../../commands/Erase';
-import SerializableCommand from '../../commands/SerializableCommand';
-import uniteCommands from '../../commands/uniteCommands';
-import BackgroundComponent, { BackgroundType } from '../../components/BackgroundComponent';
-import Editor from '../../Editor';
-import { EditorImageEventType } from '../../EditorImage';
-import Rect2 from '../../math/shapes/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, 'document-properties-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 removeBackgroundComponents(): SerializableCommand {
-		const previousBackgrounds = [];
-		for (const component of this.editor.image.getBackgroundComponents()) {
-			if (component instanceof BackgroundComponent) {
-				previousBackgrounds.push(component);
-			}
-		}
-
-		return new Erase(previousBackgrounds);
-	}
-
-	/** Replace existing background components with a background of the given type. */
-	private setBackgroundType(backgroundType: BackgroundType): SerializableCommand {
-		const prevBackgroundColor = this.editor.estimateBackgroundColor();
-		const newBackground = new BackgroundComponent(backgroundType, prevBackgroundColor);
-		const addBackgroundCommand = this.editor.image.addElement(newBackground);
-
-		return uniteCommands([ this.removeBackgroundComponents(), addBackgroundCommand ]);
-	}
-
-	/** Returns the type of the topmost background component */
-	private getBackgroundType(): BackgroundType {
-		const backgroundComponents = this.editor.image.getBackgroundComponents();
-		for (let i = backgroundComponents.length - 1; i >= 0; i--) {
-			const component = backgroundComponents[i];
-			if (component instanceof BackgroundComponent) {
-				return component.getBackgroundType();
-			}
-		}
-
-		return BackgroundType.None;
-	}
-
-	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 override 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 useGridRow = document.createElement('div');
-		const useGridLabel = document.createElement('label');
-		const useGridCheckbox = document.createElement('input');
-
-		useGridCheckbox.id = `${toolbarCSSPrefix}docPropertiesUseGridCheckbox-${DocumentPropertiesWidget.idCounter++}`;
-		useGridLabel.htmlFor = useGridCheckbox.id;
-
-		useGridCheckbox.type = 'checkbox';
-		useGridLabel.innerText = this.localizationTable.useGridOption;
-
-		useGridCheckbox.oninput = () => {
-			const prevBackgroundType = this.getBackgroundType();
-			const wasGrid = prevBackgroundType === BackgroundType.Grid;
-
-			if (wasGrid === useGridCheckbox.checked) {
-				// Already the requested background type.
-				return;
-			}
-
-			let newBackgroundType = BackgroundType.SolidColor;
-			if (useGridCheckbox.checked) {
-				newBackgroundType = BackgroundType.Grid;
-			}
-
-			this.editor.dispatch(this.setBackgroundType(newBackgroundType));
-		};
-
-		useGridRow.replaceChildren(useGridLabel, useGridCheckbox);
-
-		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);
-
-			useGridCheckbox.checked = this.getBackgroundType() === BackgroundType.Grid;
-		};
-		this.updateDropdownContent();
-
-
-		container.replaceChildren(
-			backgroundColorRow, useGridRow, imageWidthRow.element, imageHeightRow.element
-		);
-		dropdown.replaceChildren(container);
-
-		return true;
-	}
-}