js-draw 1.0.0 → 1.0.1

package/src/toolbar/widgets/InsertImageWidget.ts

@@ -0,0 +1,248 @@
+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 '@js-draw/math';
+import fileToBase64 from '../../util/fileToBase64';
+import { ToolbarLocalization } from '../localization';
+import BaseWidget from './BaseWidget';
+import { EditorEventType } from '../../types';
+import { toolbarCSSPrefix } from '../constants';
+import makeFileInput from './components/makeFileInput';
+import { MutableReactiveValue } from '../../util/ReactiveValue';
+
+export default class InsertImageWidget extends BaseWidget {
+	private imagePreview: HTMLImageElement;
+	private selectedFiles: MutableReactiveValue<File[]>|null;
+	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', localization);
+
+		// Make the dropdown showable
+		this.container.classList.add('dropdownShowable');
+
+		editor.notifier.on(EditorEventType.SelectionUpdated, event => {
+			if (event.kind === EditorEventType.SelectionUpdated && this.isDropdownVisible()) {
+				this.updateInputs();
+			}
+		});
+	}
+
+	protected override getTitle(): string {
+		return this.localizationTable.image;
+	}
+
+	protected override createIcon(): Element | null {
+		return this.editor.icons.makeInsertImageIcon();
+	}
+
+	protected override setDropdownVisible(visible: boolean): void {
+		super.setDropdownVisible(visible);
+
+		// Update the dropdown just before showing.
+		if (this.isDropdownVisible()) {
+			this.updateInputs();
+		}
+	}
+
+	protected override handleClick() {
+		this.setDropdownVisible(!this.isDropdownVisible());
+	}
+
+	private static nextInputId = 0;
+
+	protected override fillDropdown(dropdown: HTMLElement): boolean {
+		const container = document.createElement('div');
+		container.classList.add(
+			'insert-image-widget-dropdown-content',
+			`${toolbarCSSPrefix}spacedList`,
+			`${toolbarCSSPrefix}nonbutton-controls-main-list`,
+		);
+
+		const {
+			container: chooseImageRow,
+			selectedFiles,
+		} = makeFileInput(
+			this.localizationTable.chooseFile,
+			this.editor,
+			'image/*',
+		);
+		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');
+		this.selectedFiles = selectedFiles;
+		this.imageAltTextInput = document.createElement('input');
+
+		// Label the alt text input
+		const imageAltTextLabel = document.createElement('label');
+
+		const altTextInputId = `insert-image-alt-text-input-${InsertImageWidget.nextInputId++}`;
+		this.imageAltTextInput.setAttribute('id', altTextInputId);
+		imageAltTextLabel.htmlFor = altTextInputId;
+
+		imageAltTextLabel.innerText = this.localizationTable.inputAltText;
+		this.imageAltTextInput.type = 'text';
+
+		this.statusView.setAttribute('aria-live', 'polite');
+
+		this.submitButton.innerText = this.localizationTable.submit;
+
+		this.selectedFiles.onUpdateAndNow(async files => {
+			if (files.length === 0) {
+				this.imagePreview.style.display = 'none';
+				this.submitButton.disabled = true;
+				this.submitButton.style.display = 'none';
+				return;
+			}
+
+			this.imagePreview.style.display = 'block';
+
+			const image = 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.submitButton.style.display = '';
+				this.updateImageSizeDisplay();
+			} else {
+				this.submitButton.disabled = true;
+				this.submitButton.style.display = 'none';
+				this.statusView.innerText = '';
+			}
+		});
+
+		altTextRow.replaceChildren(imageAltTextLabel, this.imageAltTextInput);
+		actionButtonRow.replaceChildren(this.submitButton);
+
+		container.replaceChildren(
+			chooseImageRow, altTextRow, this.imagePreview, this.statusView, actionButtonRow
+		);
+
+		dropdown.replaceChildren(container);
+		return true;
+	}
+
+	private hideDialog() {
+		this.setDropdownVisible(false);
+	}
+
+	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 updateInputs() {
+		const resetInputs = () => {
+			this.selectedFiles?.set([]);
+			this.imageAltTextInput.value = '';
+			this.imagePreview.style.display = 'none';
+			this.submitButton.disabled = true;
+			this.statusView.innerText = '';
+
+			this.submitButton.style.display = '';
+
+			this.imageAltTextInput.oninput = null;
+		};
+		resetInputs();
+
+		const selectionTools = this.editor.toolController.getMatchingTools(SelectionTool);
+		const selectedObjects = selectionTools.map(tool => tool.getSelectedObjects()).flat();
+
+		// Check: Is there a selected image that can be edited?
+		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 if (selectedObjects.length > 0) {
+			// If not, clear the selection.
+			selectionTools.forEach(tool => tool.clearSelection());
+		}
+
+		// Show the submit button only when there is data to submit.
+		this.submitButton.style.display = 'none';
+		this.imageAltTextInput.oninput = () => {
+			if (this.imagePreview.src?.length > 0) {
+				this.submitButton.style.display = '';
+			}
+		};
+
+		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.hideDialog();
+
+			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.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 override 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 override canBeInOverflowMenu(): boolean {
+		return false;
+	}
+}

package/src/toolbar/widgets/PenToolWidget.ts

@@ -0,0 +1,369 @@
+import { makeArrowBuilder } from '../../components/builders/ArrowBuilder';
+import { makeFreehandLineBuilder } from '../../components/builders/FreehandLineBuilder';
+import { makePressureSensitiveFreehandLineBuilder } from '../../components/builders/PressureSensitiveFreehandLineBuilder';
+import { makeLineBuilder } from '../../components/builders/LineBuilder';
+import { makeFilledRectangleBuilder, makeOutlinedRectangleBuilder } from '../../components/builders/RectangleBuilder';
+import { makeOutlinedCircleBuilder } from '../../components/builders/CircleBuilder';
+import { ComponentBuilderFactory } from '../../components/builders/types';
+import Editor from '../../Editor';
+import Pen from '../../tools/Pen';
+import { EditorEventType } from '../../types';
+import { KeyPressEvent } from '../../inputEvents';
+import { ToolbarLocalization } from '../localization';
+import makeColorInput from './components/makeColorInput';
+import BaseToolWidget from './BaseToolWidget';
+import { Color4 } from '@js-draw/math';
+import { SavedToolbuttonState } from './BaseWidget';
+import { selectStrokeTypeKeyboardShortcutIds } from './keybindings';
+import { toolbarCSSPrefix } from '../constants';
+import makeThicknessSlider from './components/makeThicknessSlider';
+import makeGridSelector from './components/makeGridSelector';
+
+export interface PenTypeRecord {
+	// Description of the factory (e.g. 'Freehand line')
+	name: string;
+
+	// A unique ID for the facotory (e.g. 'chisel-tip-pen')
+	id: string;
+
+	// True if the pen type generates shapes (and should thus be shown in the GUI
+	// as a shape generator). Defaults to false.
+	isShapeBuilder?: boolean;
+
+	// Creates an `AbstractComponent` from pen input.
+	factory: ComponentBuilderFactory;
+}
+
+export default class PenToolWidget extends BaseToolWidget {
+	private updateInputs: ()=> void = () => {};
+	protected penTypes: PenTypeRecord[];
+	protected shapelikeIDs: string[];
+
+	// A counter variable that ensures different HTML elements are given unique names/ids.
+	private static idCounter: number = 0;
+
+	public constructor(
+		editor: Editor, private tool: Pen, localization?: ToolbarLocalization
+	) {
+		super(editor, tool, 'pen', localization);
+
+		// Pen types that correspond to
+		this.shapelikeIDs = [ 'pressure-sensitive-pen', 'freehand-pen' ];
+
+		// Default pen types
+		this.penTypes = [
+			{
+				name: this.localizationTable.flatTipPen,
+				id: 'pressure-sensitive-pen',
+
+				factory: makePressureSensitiveFreehandLineBuilder,
+			},
+			{
+				name: this.localizationTable.roundedTipPen,
+				id: 'freehand-pen',
+
+				factory: makeFreehandLineBuilder,
+			},
+			{
+				name: this.localizationTable.arrowPen,
+				id: 'arrow',
+
+				isShapeBuilder: true,
+				factory: makeArrowBuilder,
+			},
+			{
+				name: this.localizationTable.linePen,
+				id: 'line',
+
+				isShapeBuilder: true,
+				factory: makeLineBuilder,
+			},
+			{
+				name: this.localizationTable.filledRectanglePen,
+				id: 'filled-rectangle',
+
+				isShapeBuilder: true,
+				factory: makeFilledRectangleBuilder,
+			},
+			{
+				name: this.localizationTable.outlinedRectanglePen,
+				id: 'outlined-rectangle',
+
+				isShapeBuilder: true,
+				factory: makeOutlinedRectangleBuilder,
+			},
+			{
+				name: this.localizationTable.outlinedCirclePen,
+				id: 'outlined-circle',
+
+				isShapeBuilder: true,
+				factory: makeOutlinedCircleBuilder,
+			}
+		];
+
+		this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
+			if (toolEvt.kind !== EditorEventType.ToolUpdated) {
+				throw new Error('Invalid event type!');
+			}
+
+			// The button icon may depend on tool properties.
+			if (toolEvt.tool === this.tool) {
+				this.updateIcon();
+				this.updateInputs();
+			}
+		});
+	}
+
+	protected getTitle(): string {
+		return this.targetTool.description;
+	}
+
+	// Return the index of this tool's stroke factory in the list of
+	// all stroke factories.
+	//
+	// Returns -1 if the stroke factory is not in the list of all stroke factories.
+	private getCurrentPenTypeIdx(): number {
+		const currentFactory = this.tool.getStrokeFactory();
+
+		for (let i = 0; i < this.penTypes.length; i ++) {
+			if (this.penTypes[i].factory === currentFactory) {
+				return i;
+			}
+		}
+		return -1;
+	}
+
+	private getCurrentPenType(): PenTypeRecord|null {
+		for (const penType of this.penTypes) {
+			if (penType.factory === this.tool.getStrokeFactory()) {
+				return penType;
+			}
+		}
+		return null;
+	}
+
+	private createIconForRecord(record: PenTypeRecord|null) {
+		const style = {
+			...this.tool.getStyleValue().get(),
+		};
+
+		if (record?.factory) {
+			style.factory = record.factory;
+		}
+
+		const strokeFactory = record?.factory;
+		if (!strokeFactory || strokeFactory === makeFreehandLineBuilder || strokeFactory === makePressureSensitiveFreehandLineBuilder) {
+			return this.editor.icons.makePenIcon(style);
+		} else {
+			return this.editor.icons.makeIconFromFactory(style);
+		}
+	}
+
+	protected createIcon(): Element {
+		return this.createIconForRecord(this.getCurrentPenType());
+	}
+
+
+	// Creates a widget that allows selecting different pen types
+	private createPenTypeSelector() {
+		const allChoices = this.penTypes.map((penType, index) => {
+			return {
+				id: index,
+				makeIcon: () => this.createIconForRecord(penType),
+				title: penType.name,
+				isShapeBuilder: penType.isShapeBuilder ?? false,
+			};
+		});
+
+		const penSelector = makeGridSelector(
+			this.localizationTable.selectPenTip,
+			this.getCurrentPenTypeIdx(),
+			allChoices.filter(choice => !choice.isShapeBuilder),
+		);
+
+		const shapeSelector = makeGridSelector(
+			this.localizationTable.selectShape,
+			this.getCurrentPenTypeIdx(),
+			allChoices.filter(choice => choice.isShapeBuilder),
+		);
+
+		const onSelectorUpdate = (newPenTypeIndex: number) => {
+			this.tool.setStrokeFactory(this.penTypes[newPenTypeIndex].factory);
+		};
+
+		penSelector.value.onUpdate(onSelectorUpdate);
+		shapeSelector.value.onUpdate(onSelectorUpdate);
+
+		return {
+			setValue: (penTypeIndex: number) => {
+				penSelector.value.set(penTypeIndex);
+				shapeSelector.value.set(penTypeIndex);
+			},
+
+			updateIcons: () => {
+				penSelector.updateIcons();
+				shapeSelector.updateIcons();
+			},
+
+			addTo: (parent: HTMLElement) => {
+				penSelector.addTo(parent);
+				shapeSelector.addTo(parent);
+			},
+		};
+	}
+
+	private setInputStabilizationEnabled(enabled: boolean) {
+		this.tool.setHasStabilization(enabled);
+	}
+
+	protected createStabilizationOption() {
+		const stabilizationOption = document.createElement('div');
+		const stabilizationCheckbox = document.createElement('input');
+		const stabilizationLabel = document.createElement('label');
+		stabilizationLabel.innerText = this.localizationTable.inputStabilization;
+
+		stabilizationCheckbox.type = 'checkbox';
+		stabilizationCheckbox.id = `${toolbarCSSPrefix}-penInputStabilizationCheckbox-${PenToolWidget.idCounter++}`;
+		stabilizationLabel.htmlFor = stabilizationCheckbox.id;
+
+		stabilizationOption.replaceChildren(stabilizationLabel, stabilizationCheckbox);
+
+		stabilizationCheckbox.oninput = () => {
+			this.setInputStabilizationEnabled(stabilizationCheckbox.checked);
+		};
+
+		return {
+			update: () => {
+				stabilizationCheckbox.checked = !!this.tool.getInputMapper();
+			},
+
+			addTo: (parent: HTMLElement) => {
+				parent.appendChild(stabilizationOption);
+			}
+		};
+	}
+
+	protected override fillDropdown(dropdown: HTMLElement): boolean {
+		const container = document.createElement('div');
+		container.classList.add(
+			`${toolbarCSSPrefix}spacedList`, `${toolbarCSSPrefix}nonbutton-controls-main-list`
+		);
+
+		// Thickness: Value of the input is squared to allow for finer control/larger values.
+		const { container: thicknessRow, setValue: setThickness } = makeThicknessSlider(this.editor, thickness => {
+			this.tool.setThickness(thickness);
+		});
+
+		const penTypeSelect = this.createPenTypeSelector();
+
+		const colorRow = document.createElement('div');
+		const colorLabel = document.createElement('label');
+		const {
+			input: colorInput, container: colorInputContainer, setValue: setColorInputValue
+		} = makeColorInput(this.editor, color => {
+			this.tool.setColor(color);
+		});
+
+		colorInput.id = `${toolbarCSSPrefix}colorInput${PenToolWidget.idCounter++}`;
+		colorLabel.innerText = this.localizationTable.colorLabel;
+		colorLabel.setAttribute('for', colorInput.id);
+
+		colorRow.appendChild(colorLabel);
+		colorRow.appendChild(colorInputContainer);
+
+		const stabilizationOption = this.createStabilizationOption();
+
+		this.updateInputs = () => {
+			setColorInputValue(this.tool.getColor());
+			setThickness(this.tool.getThickness());
+
+			penTypeSelect.updateIcons();
+
+			// Update the selected stroke factory.
+			penTypeSelect.setValue(this.getCurrentPenTypeIdx());
+			stabilizationOption.update();
+		};
+		this.updateInputs();
+
+		container.replaceChildren(colorRow, thicknessRow);
+		penTypeSelect.addTo(container);
+		stabilizationOption.addTo(container);
+
+		dropdown.replaceChildren(container);
+		return true;
+	}
+
+	protected override onKeyPress(event: KeyPressEvent): boolean {
+		if (!this.isSelected()) {
+			return false;
+		}
+
+		for (let i = 0; i < selectStrokeTypeKeyboardShortcutIds.length; i++) {
+			const shortcut = selectStrokeTypeKeyboardShortcutIds[i];
+			if (this.editor.shortcuts.matchesShortcut(shortcut, event)) {
+				const penTypeIdx = i;
+				if (penTypeIdx < this.penTypes.length) {
+					this.tool.setStrokeFactory(this.penTypes[penTypeIdx].factory);
+					return true;
+				}
+			}
+		}
+
+		// Run any default actions registered by the parent class.
+		if (super.onKeyPress(event)) {
+			return true;
+		}
+		return false;
+	}
+
+	public override serializeState(): SavedToolbuttonState {
+		return {
+			...super.serializeState(),
+
+			color: this.tool.getColor().toHexString(),
+			thickness: this.tool.getThickness(),
+			strokeFactoryId: this.getCurrentPenType()?.id,
+			inputStabilization: !!this.tool.getInputMapper(),
+		};
+	}
+
+	public override deserializeFrom(state: SavedToolbuttonState) {
+		super.deserializeFrom(state);
+
+		const verifyPropertyType = (propertyName: string, expectedType: 'string'|'number'|'object') => {
+			const actualType = typeof(state[propertyName]);
+			if (actualType !== expectedType) {
+				throw new Error(
+					`Deserializing property ${propertyName}: Invalid type. Expected ${expectedType},` +
+					` was ${actualType}.`
+				);
+			}
+		};
+
+		if (state.color) {
+			verifyPropertyType('color', 'string');
+			this.tool.setColor(Color4.fromHex(state.color));
+		}
+
+		if (state.thickness) {
+			verifyPropertyType('thickness', 'number');
+			this.tool.setThickness(state.thickness);
+		}
+
+		if (state.strokeFactoryId) {
+			verifyPropertyType('strokeFactoryId', 'string');
+
+			const factoryId: string = state.strokeFactoryId;
+			for (const penType of this.penTypes) {
+				if (factoryId === penType.id) {
+					this.tool.setStrokeFactory(penType.factory);
+					break;
+				}
+			}
+		}
+
+		if (state.inputStabilization !== undefined) {
+			this.setInputStabilizationEnabled(!!state.inputStabilization);
+		}
+	}
+}