js-draw 0.18.1 → 0.18.2

package/src/toolbar/widgets/HandToolWidget.ts

@@ -0,0 +1,250 @@
+import Editor from '../../Editor';
+import Mat33 from '../../math/Mat33';
+import PanZoom, { PanZoomMode } from '../../tools/PanZoom';
+import ToolController from '../../tools/ToolController';
+import { EditorEventType } from '../../types';
+import Viewport from '../../Viewport';
+import { toolbarCSSPrefix } from '../HTMLToolbar';
+import { ToolbarLocalization } from '../localization';
+import BaseToolWidget from './BaseToolWidget';
+import BaseWidget, { SavedToolbuttonState } from './BaseWidget';
+
+const makeZoomControl = (localizationTable: ToolbarLocalization, editor: Editor) => {
+	const zoomLevelRow = document.createElement('div');
+
+	const increaseButton = document.createElement('button');
+	const decreaseButton = document.createElement('button');
+	const resetViewButton = document.createElement('button');
+	const zoomLevelDisplay = document.createElement('span');
+	increaseButton.innerText = '+';
+	decreaseButton.innerText = '-';
+	resetViewButton.innerText = localizationTable.resetView;
+	zoomLevelRow.replaceChildren(zoomLevelDisplay, increaseButton, decreaseButton, resetViewButton);
+
+	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();
+
+			// Can't reset if already reset.
+			resetViewButton.disabled = event.newTransform.eq(Mat33.identity);
+		}
+	});
+
+	const zoomBy = (factor: number) => {
+		const screenCenter = editor.viewport.visibleRect.center;
+		const transformUpdate = Mat33.scaling2D(factor, screenCenter);
+		editor.dispatch(Viewport.transformBy(transformUpdate), false);
+	};
+
+	increaseButton.onclick = () => {
+		zoomBy(5.0/4);
+	};
+
+	decreaseButton.onclick = () => {
+		zoomBy(4.0/5);
+	};
+
+	resetViewButton.onclick = () => {
+		editor.dispatch(Viewport.transformBy(
+			editor.viewport.canvasToScreenTransform.inverse()
+		), true);
+	};
+
+	return zoomLevelRow;
+};
+
+class ZoomWidget extends BaseWidget {
+	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');
+	}
+
+	protected getTitle(): string {
+		return this.localizationTable.zoom;
+	}
+	
+	protected createIcon(): Element {
+		return this.editor.icons.makeZoomIcon();
+	}
+
+	protected handleClick(): void {
+		this.setDropdownVisible(!this.isDropdownVisible());
+	}
+
+	protected fillDropdown(dropdown: HTMLElement): boolean {
+		dropdown.replaceChildren(makeZoomControl(this.localizationTable, this.editor));
+		return true;
+	}
+}
+
+class HandModeWidget extends BaseWidget {
+	public constructor(
+		editor: Editor,
+
+		protected tool: PanZoom, protected flag: PanZoomMode, protected makeIcon: ()=> Element,
+		private title: string,
+
+		localizationTable?: ToolbarLocalization,
+	) {
+		super(editor, `pan-mode-${flag}`, 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) {
+		this.tool.setModeEnabled(this.flag, enabled);
+	}
+
+	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 allowTogglingBaseTool: boolean;
+	
+	public constructor(
+		editor: Editor,
+
+		// Pan zoom tool that overrides all other tools (enabling this tool for a device
+		// causes that device to pan/zoom instead of interact with the primary tools)
+		protected overridePanZoomTool: PanZoom,
+
+		localizationTable: ToolbarLocalization,
+	) {
+		const primaryHandTool = HandToolWidget.getPrimaryHandTool(editor.toolController);
+		const tool = primaryHandTool ?? overridePanZoomTool;
+		super(editor, tool, 'hand-tool-widget', localizationTable);
+
+		// Only allow toggling a hand tool if we're using the primary hand tool and not the override
+		// hand tool for this button.
+		this.allowTogglingBaseTool = primaryHandTool !== null;
+
+		// Allow showing/hiding the dropdown, even if `overridePanZoomTool` isn't enabled.
+		if (!this.allowTogglingBaseTool) {
+			this.container.classList.add('dropdownShowable');
+		}
+
+		// Controls for the overriding hand tool.
+		const touchPanningWidget = new HandModeWidget(
+			editor,
+
+			overridePanZoomTool, PanZoomMode.OneFingerTouchGestures,
+			() => this.editor.icons.makeTouchPanningIcon(),
+
+			localizationTable.touchPanning,
+
+			localizationTable,
+		);
+		
+		const rotationLockWidget = new HandModeWidget(
+			editor,
+
+			overridePanZoomTool, PanZoomMode.RotationLocked,
+			() => this.editor.icons.makeRotationLockIcon(),
+
+			localizationTable.lockRotation,
+			localizationTable,
+		);
+
+		this.addSubWidget(touchPanningWidget);
+		this.addSubWidget(rotationLockWidget);
+		this.addSubWidget(
+			new ZoomWidget(editor, localizationTable)
+		);
+	}
+
+	private static getPrimaryHandTool(toolController: ToolController): PanZoom|null {
+		const primaryPanZoomToolList = toolController.getPrimaryTools().filter(tool => tool instanceof PanZoom);
+		const primaryPanZoomTool = primaryPanZoomToolList[0];
+		return primaryPanZoomTool as PanZoom|null;
+	}
+
+	protected getTitle(): string {
+		return this.localizationTable.handTool;
+	}
+
+	protected createIcon(): Element {
+		return this.editor.icons.makeHandToolIcon();
+	}
+
+	protected handleClick(): void {
+		if (this.allowTogglingBaseTool) {
+			super.handleClick();
+		} else {
+			this.setDropdownVisible(!this.isDropdownVisible());
+		}
+	}
+
+	public setSelected(selected: boolean): void {
+		if (this.allowTogglingBaseTool) {
+			super.setSelected(selected);
+		}
+	}
+
+	public serializeState(): SavedToolbuttonState {
+		const toolMode = this.overridePanZoomTool.getMode();
+
+		return {
+			...super.serializeState(),
+			touchPanning: toolMode & PanZoomMode.OneFingerTouchGestures,
+			rotationLocked: toolMode & PanZoomMode.RotationLocked,
+		};
+	}
+
+	public deserializeFrom(state: SavedToolbuttonState): void {
+		if (state.touchPanning !== undefined) {
+			this.overridePanZoomTool.setModeEnabled(PanZoomMode.OneFingerTouchGestures, state.touchPanning);
+		}
+
+		if (state.rotationLocked !== undefined) {
+			this.overridePanZoomTool.setModeEnabled(PanZoomMode.RotationLocked, state.rotationLocked);
+		}
+
+		super.deserializeFrom(state);
+	}
+}

package/src/toolbar/widgets/InsertImageWidget.css

@@ -0,0 +1,44 @@
+
+.toolbar-image-selection-overlay {
+	position: absolute;
+
+	width: 100%;
+	height: 100%;
+	z-index: 10;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.toolbar-image-selection-overlay > div {
+	background: var(--primary-background-color);
+	box-shadow: 1px 1px 3px var(--primary-shadow-color);
+
+	padding: 18px;
+	border-radius: 3px;
+}
+
+.toolbar-image-selection-overlay > div > div {
+	padding: 5px;
+}
+
+.toolbar-image-selection-overlay img {
+	max-width: min(50vw, 75%);
+	max-height: 50vh;
+
+	/* Center */
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.toolbar-image-selection-overlay .action-button-row {
+	margin-top: 4px;
+	display: flex;
+	flex-direction: row;
+}
+
+.toolbar-image-selection-overlay .action-button-row > button {
+	flex-grow: 1;
+}

package/src/toolbar/widgets/InsertImageWidget.ts

@@ -0,0 +1,223 @@
+import ImageComponent from '../../components/ImageComponent';
+import Editor from '../../Editor';
+import Erase from '../../commands/Erase';
+import EditorImage from '../../EditorImage';
+import uniteCommands from '../../commands/uniteCommands';
+import SelectionTool from '../../tools/SelectionTool/SelectionTool';
+import Mat33 from '../../math/Mat33';
+import fileToBase64 from '../../util/fileToBase64';
+import { ToolbarLocalization } from '../localization';
+import ActionButtonWidget from './ActionButtonWidget';
+
+export default class InsertImageWidget extends ActionButtonWidget {
+	private imageSelectionOverlay: HTMLElement;
+	private imagePreview: HTMLImageElement;
+	private imageFileInput: HTMLInputElement;
+	private imageAltTextInput: HTMLInputElement;
+	private statusView: HTMLElement;
+	private imageBase64URL: string|null;
+	private submitButton: HTMLButtonElement;
+
+	public constructor(editor: Editor, localization?: ToolbarLocalization) {
+		localization ??= editor.localization;
+
+		super(editor,
+			'insert-image-widget',
+			() => editor.icons.makeInsertImageIcon(),
+			localization.image,
+			() => this.onClicked()
+		);
+
+		this.imageSelectionOverlay = document.createElement('div');
+		this.imageSelectionOverlay.classList.add('toolbar-image-selection-overlay');
+		this.fillOverlay();
+
+		this.editor.createHTMLOverlay(this.imageSelectionOverlay);
+		this.imageSelectionOverlay.style.display = 'none';
+	}
+
+	private static nextInputId = 0;
+
+	private fillOverlay() {
+		const container = document.createElement('div');
+
+		const chooseImageRow = document.createElement('div');
+		const altTextRow = document.createElement('div');
+		this.imagePreview = document.createElement('img');
+		this.statusView = document.createElement('div');
+		const actionButtonRow = document.createElement('div');
+
+		actionButtonRow.classList.add('action-button-row');
+
+		this.submitButton = document.createElement('button');
+		const cancelButton = document.createElement('button');
+
+		this.imageFileInput = document.createElement('input');
+		this.imageAltTextInput = document.createElement('input');
+		const imageFileInputLabel = document.createElement('label');
+		const imageAltTextLabel = document.createElement('label');
+
+		const fileInputId = `insert-image-file-input-${InsertImageWidget.nextInputId ++}`;
+		const altTextInputId = `insert-image-alt-text-input-${InsertImageWidget.nextInputId++}`;
+
+		this.imageFileInput.setAttribute('id', fileInputId);
+		this.imageAltTextInput.setAttribute('id', altTextInputId);
+		imageAltTextLabel.htmlFor = altTextInputId;
+		imageFileInputLabel.htmlFor = fileInputId;
+
+		this.imageFileInput.accept = 'image/*';
+
+		imageAltTextLabel.innerText = this.localizationTable.inputAltText;
+		imageFileInputLabel.innerText = this.localizationTable.chooseFile;
+
+		this.imageFileInput.type = 'file';
+		this.imageAltTextInput.type = 'text';
+
+		this.statusView.setAttribute('aria-live', 'polite');
+
+		cancelButton.innerText = this.localizationTable.cancel;
+		this.submitButton.innerText = this.localizationTable.submit;
+
+		this.imageFileInput.onchange = async () => {
+			if (this.imageFileInput.value === '' || !this.imageFileInput.files || !this.imageFileInput.files[0]) {
+				this.imagePreview.style.display = 'none';
+				this.submitButton.disabled = true;
+				return;
+			}
+
+			this.imagePreview.style.display = 'block';
+
+			const image = this.imageFileInput.files[0];
+
+			let data: string|null = null;
+
+			try {
+				data = await fileToBase64(image);
+			} catch(e) {
+				this.statusView.innerText = this.localizationTable.imageLoadError(e);
+			}
+
+			this.imageBase64URL = data;
+
+			if (data) {
+				this.imagePreview.src = data;
+				this.submitButton.disabled = false;
+				this.updateImageSizeDisplay();
+			} else {
+				this.submitButton.disabled = true;
+				this.statusView.innerText = '';
+			}
+		};
+
+		cancelButton.onclick = () => {
+			this.hideDialog();
+		};
+
+		this.imageSelectionOverlay.onclick = (evt: MouseEvent) => {
+			// If clicking on the backdrop
+			if (evt.target === this.imageSelectionOverlay) {
+				this.hideDialog();
+			}
+		};
+
+		chooseImageRow.replaceChildren(imageFileInputLabel, this.imageFileInput);
+		altTextRow.replaceChildren(imageAltTextLabel, this.imageAltTextInput);
+		actionButtonRow.replaceChildren(cancelButton, this.submitButton);
+
+		container.replaceChildren(
+			chooseImageRow, altTextRow, this.imagePreview, this.statusView, actionButtonRow
+		);
+
+		this.imageSelectionOverlay.replaceChildren(container);
+	}
+
+	private hideDialog() {
+		this.imageSelectionOverlay.style.display = 'none';
+	}
+
+	private updateImageSizeDisplay() {
+		const imageData = this.imageBase64URL ?? '';
+
+		const sizeInKiB = imageData.length / 1024;
+		const sizeInMiB = sizeInKiB / 1024;
+
+		let units = 'KiB';
+		let size = sizeInKiB;
+
+		if (sizeInMiB >= 1) {
+			size = sizeInMiB;
+			units = 'MiB';
+		}
+
+		this.statusView.innerText = this.localizationTable.imageSize(
+			Math.round(size), units
+		);
+	}
+
+	private clearInputs() {
+		this.imageFileInput.value = '';
+		this.imageAltTextInput.value = '';
+		this.imagePreview.style.display = 'none';
+		this.submitButton.disabled = true;
+		this.statusView.innerText = '';
+	}
+
+	private onClicked() {
+		this.imageSelectionOverlay.style.display = '';
+		this.clearInputs();
+		this.imageFileInput.focus();
+
+		const selectionTools = this.editor.toolController.getMatchingTools(SelectionTool);
+		const selectedObjects = selectionTools.map(tool => tool.getSelectedObjects()).flat();
+
+		let editingImage: ImageComponent|null = null;
+		if (selectedObjects.length === 1 && selectedObjects[0] instanceof ImageComponent) {
+			editingImage = selectedObjects[0];
+
+			this.imageAltTextInput.value = editingImage.getAltText() ?? '';
+			this.imagePreview.style.display = 'block';
+			this.submitButton.disabled = false;
+
+			this.imageBase64URL = editingImage.getURL();
+			this.imagePreview.src = this.imageBase64URL;
+
+			this.updateImageSizeDisplay();
+		} else {
+			selectionTools.forEach(tool => tool.clearSelection());
+		}
+
+		this.submitButton.onclick = async () => {
+			if (!this.imageBase64URL) {
+				return;
+			}
+
+			const image = new Image();
+			image.src = this.imageBase64URL;
+			image.setAttribute('alt', this.imageAltTextInput.value);
+
+			const component = await ImageComponent.fromImage(image, Mat33.identity);
+
+			if (component.getBBox().area === 0) {
+				this.statusView.innerText = this.localizationTable.errorImageHasZeroSize;
+				return;
+			}
+
+			this.imageSelectionOverlay.style.display = 'none';
+
+			if (editingImage) {
+				const eraseCommand = new Erase([ editingImage ]);
+
+				await this.editor.dispatch(uniteCommands([
+					EditorImage.addElement(component),
+					component.transformBy(editingImage.getTransformation()),
+					component.setZIndex(editingImage.getZIndex()),
+					eraseCommand,
+				]));
+
+				selectionTools[0]?.setSelection([ component ]);
+			} else {
+				await this.editor.addAndCenterComponents([ component ]);
+			}
+		};
+	}
+}

package/src/toolbar/widgets/OverflowWidget.css

@@ -0,0 +1,27 @@
+
+.toolbar-overflow-widget-overflow-list {
+	display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
+	justify-content: center;
+}
+
+.toolbar-overflow-widget-overflow-list > .toolbar-toolContainer > .toolbar-button {
+	height: var(--toolbar-button-height);
+}
+
+.toolbar-overflow-widget.horizontal .toolbar-overflow-widget-overflow-list {
+	flex-direction: row;
+}
+
+.toolbar-overflow-widget.horizontal > .toolbar-dropdown {
+	max-width: 100%;
+	left: 15px;
+	right: 15px;
+
+	/* Override the default transform and margin-left */
+	margin-left: 0 !important;
+	transform: none !important;
+
+	padding: 4px;
+}

package/src/toolbar/widgets/OverflowWidget.ts

@@ -0,0 +1,92 @@
+import Editor from '../../Editor';
+import { ToolbarLocalization } from '../localization';
+import BaseWidget from './BaseWidget';
+
+
+export default class OverflowWidget extends BaseWidget {
+	private overflowChildren: BaseWidget[] = [];
+	private overflowContainer: HTMLElement;
+	
+	public constructor(editor: Editor, localizationTable?: ToolbarLocalization) {
+		super(editor, 'overflow-widget', localizationTable);
+
+
+		this.container.classList.add('toolbar-overflow-widget');
+
+		// Make the dropdown openable
+		this.container.classList.add('dropdownShowable');
+		this.overflowContainer ??= document.createElement('div');
+	}
+
+	protected getTitle(): string {
+		return this.localizationTable.toggleOverflow;
+	}
+
+	protected createIcon(): Element | null {
+		return this.editor.icons.makeOverflowIcon();
+	}
+
+	protected handleClick(): void {
+		this.setDropdownVisible(!this.isDropdownVisible());
+	}
+
+	protected fillDropdown(dropdown: HTMLElement) {
+		this.overflowContainer ??= document.createElement('div');
+		if (this.overflowContainer.parentElement) {
+			this.overflowContainer.remove();
+		}
+
+		this.overflowContainer.classList.add('toolbar-overflow-widget-overflow-list');
+		dropdown.appendChild(this.overflowContainer);
+
+		return true;
+	}
+
+	/**
+	 * Removes all `BaseWidget`s from this and returns them.
+	 */
+	public clearChildren(): BaseWidget[] {
+		this.overflowContainer.replaceChildren();
+		this.container.classList.remove('horizontal');
+
+		const overflowChildren = this.overflowChildren;
+		this.overflowChildren = [];
+		return overflowChildren;
+	}
+
+	public getChildWidgets(): BaseWidget[] {
+		return [ ...this.overflowChildren ];
+	}
+
+	public hasAsChild(widget: BaseWidget) {
+		for (const otherWidget of this.overflowChildren) {
+			if (widget === otherWidget) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	/**
+	 * Adds `widget` to this.
+	 * `widget`'s previous parent is still responsible
+	 * for serializing/deserializing its state.
+	 */
+	public addToOverflow(widget: BaseWidget) {
+		this.overflowChildren.push(widget);
+		widget.addTo(this.overflowContainer);
+		widget.setIsToplevel(false);
+
+		// Switch to a horizontal layout if enough children
+		if (this.overflowChildren.length > 2) {
+			this.container.classList.add('horizontal');
+		}
+	}
+
+	// This always returns false.
+	// Don't try to move the overflow menu to itself.
+	public canBeInOverflowMenu(): boolean {
+		return false;
+	}
+}