js-draw 1.0.1 → 1.0.2

package/src/toolbar/widgets/DocumentPropertiesWidget.ts

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

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

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