js-draw 1.0.1 → 1.0.2

package/src/toolbar/widgets/InsertImageWidget.ts

@@ -1,248 +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 '@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

@@ -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 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

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