js-draw 1.0.0 → 1.0.1

package/src/toolbar/widgets/DocumentPropertiesWidget.ts

@@ -0,0 +1,250 @@
+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, Color4 } from '@js-draw/math';
+import { EditorEventType } from '../../types';
+import { toolbarCSSPrefix } from '../constants';
+import { ToolbarLocalization } from '../localization';
+import makeColorInput from './components/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`,
+			`${toolbarCSSPrefix}nonbutton-controls-main-list`,
+			`${toolbarCSSPrefix}document-properties-widget`
+		);
+
+		// Background color input
+		const backgroundColorRow = document.createElement('div');
+		const backgroundColorLabel = document.createElement('label');
+
+		backgroundColorLabel.innerText = this.localizationTable.backgroundColor;
+
+		const {
+			input: colorInput, container: backgroundColorInputContainer, setValue: 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);
+
+		// Background style selector
+		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);
+
+		// Adds a width/height input
+		const addDimensionRow = (labelContent: string, onChange: (value: number)=>void) => {
+			const row = document.createElement('div');
+			const label = document.createElement('label');
+			const input = document.createElement('input');
+
+			label.innerText = labelContent;
+			input.type = 'number';
+			input.min = '0';
+			input.id = `${toolbarCSSPrefix}docPropertiesDimensionRow-${DocumentPropertiesWidget.idCounter++}`;
+			label.htmlFor = input.id;
+
+			input.style.flexGrow = '2';
+			input.style.width = '25px';
+
+			row.style.display = 'flex';
+
+			input.oninput = () => {
+				onChange(parseFloat(input.value));
+			};
+
+			row.replaceChildren(label, 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 });
+		});
+
+		// The "About..." button
+		const aboutButton = document.createElement('button');
+		aboutButton.classList.add('about-button');
+		aboutButton.innerText = this.localizationTable.about;
+
+		aboutButton.onclick = () => {
+			this.editor.showAboutDialog();
+		};
+
+
+		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, aboutButton
+		);
+		dropdown.replaceChildren(container);
+
+		return true;
+	}
+}

package/src/toolbar/widgets/EraserToolWidget.ts

@@ -0,0 +1,84 @@
+import Editor from '../../Editor';
+import Eraser from '../../tools/Eraser';
+import { EditorEventType } from '../../types';
+import { toolbarCSSPrefix } from '../constants';
+import { ToolbarLocalization } from '../localization';
+import BaseToolWidget from './BaseToolWidget';
+import { SavedToolbuttonState } from './BaseWidget';
+import makeThicknessSlider from './components/makeThicknessSlider';
+
+export default class EraserToolWidget extends BaseToolWidget {
+	private updateInputs: ()=>void = () => {};
+
+	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());
+	}
+
+	protected override fillDropdown(dropdown: HTMLElement): boolean {
+		const container = document.createElement('div');
+
+		container.classList.add(`${toolbarCSSPrefix}spacedList`, `${toolbarCSSPrefix}nonbutton-controls-main-list`);
+
+		const thicknessSlider = makeThicknessSlider(this.editor, thickness => {
+			this.tool.setThickness(thickness);
+		});
+		thicknessSlider.setBounds(10, 55);
+
+		this.updateInputs = () => {
+			thicknessSlider.setValue(this.tool.getThickness());
+		};
+
+		this.updateInputs();
+
+		const spacer = document.createElement('div');
+		spacer.style.height = '5px';
+
+		container.replaceChildren(thicknessSlider.container, spacer);
+
+		dropdown.replaceChildren(container);
+		return true;
+	}
+
+	public override serializeState(): SavedToolbuttonState {
+		return {
+			...super.serializeState(),
+
+			thickness: this.tool.getThickness(),
+		};
+	}
+
+	public override 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);
+		}
+	}
+}

package/src/toolbar/widgets/HandToolWidget.ts

@@ -0,0 +1,239 @@
+import Editor from '../../Editor';
+import { Mat33 } from '@js-draw/math';
+import PanZoom, { PanZoomMode } from '../../tools/PanZoom';
+import ToolController from '../../tools/ToolController';
+import { EditorEventType } from '../../types';
+import Viewport from '../../Viewport';
+import { toolbarCSSPrefix } from '../constants';
+import { ToolbarLocalization } from '../localization';
+import BaseToolWidget from './BaseToolWidget';
+import BaseWidget, { SavedToolbuttonState } from './BaseWidget';
+import makeSeparator from './components/makeSeparator';
+
+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 = () => {
+		const addToHistory = false;
+		editor.dispatch(Viewport.transformBy(
+			editor.viewport.canvasToScreenTransform.inverse()
+		), addToHistory);
+	};
+
+	return zoomLevelRow;
+};
+
+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 override 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);
+	}
+
+	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 override handleClick(): void {
+		if (this.allowTogglingBaseTool) {
+			super.handleClick();
+		} else {
+			this.setDropdownVisible(!this.isDropdownVisible());
+		}
+	}
+
+	protected override fillDropdown(dropdown: HTMLElement): boolean {
+		super.fillDropdown(dropdown);
+
+		// The container for all actions that come after the toolbar buttons.
+		const nonbuttonActionContainer = document.createElement('div');
+		nonbuttonActionContainer.classList.add(`${toolbarCSSPrefix}nonbutton-controls-main-list`);
+
+		makeSeparator().addTo(nonbuttonActionContainer);
+		nonbuttonActionContainer.appendChild(
+			makeZoomControl(this.localizationTable, this.editor)
+		);
+		dropdown.appendChild(nonbuttonActionContainer);
+
+		return true;
+	}
+
+	public override setSelected(selected: boolean): void {
+		if (this.allowTogglingBaseTool) {
+			super.setSelected(selected);
+		}
+	}
+
+	public override serializeState(): SavedToolbuttonState {
+		const toolMode = this.overridePanZoomTool.getMode();
+
+		return {
+			...super.serializeState(),
+			touchPanning: toolMode & PanZoomMode.OneFingerTouchGestures,
+			rotationLocked: toolMode & PanZoomMode.RotationLocked,
+		};
+	}
+
+	public override 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);
+	}
+}