js-draw 0.18.0 → 0.18.1

package/src/toolbar/widgets/HandToolWidget.ts

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

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

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

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

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