js-draw 0.18.1 → 0.18.2

package/src/toolbar/widgets/PenToolWidget.ts

@@ -0,0 +1,288 @@
+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 { ComponentBuilderFactory } from '../../components/builders/types';
+import Editor from '../../Editor';
+import Pen from '../../tools/Pen';
+import { EditorEventType, KeyPressEvent } from '../../types';
+import { toolbarCSSPrefix } from '../HTMLToolbar';
+import { ToolbarLocalization } from '../localization';
+import makeColorInput from '../makeColorInput';
+import BaseToolWidget from './BaseToolWidget';
+import Color4 from '../../Color4';
+import { SavedToolbuttonState } from './BaseWidget';
+
+
+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;
+
+	// Creates an `AbstractComponent` from pen input.
+	factory: ComponentBuilderFactory;
+}
+
+export default class PenToolWidget extends BaseToolWidget {
+	private updateInputs: ()=> void = () => {};
+	protected penTypes: PenTypeRecord[];
+
+	public constructor(
+		editor: Editor, private tool: Pen, localization?: ToolbarLocalization
+	) {
+		super(editor, tool, 'pen', localization);
+
+		// Default pen types
+		this.penTypes = [
+			{
+				name: this.localizationTable.pressureSensitiveFreehandPen,
+				id: 'pressure-sensitive-pen',
+
+				factory: makePressureSensitiveFreehandLineBuilder,
+			},
+			{
+				name: this.localizationTable.freehandPen,
+				id: 'freehand-pen',
+
+				factory: makeFreehandLineBuilder,
+			},
+			{
+				name: this.localizationTable.arrowPen,
+				id: 'arrow',
+
+				factory: makeArrowBuilder,
+			},
+			{
+				name: this.localizationTable.linePen,
+				id: 'line',
+
+				factory: makeLineBuilder,
+			},
+			{
+				name: this.localizationTable.filledRectanglePen,
+				id: 'filled-rectangle',
+
+				factory: makeFilledRectangleBuilder,
+			},
+			{
+				name: this.localizationTable.outlinedRectanglePen,
+				id: 'outlined-rectangle',
+
+				factory: makeOutlinedRectangleBuilder,
+			},
+		];
+
+		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;
+	}
+
+	protected createIcon(): Element {
+		const strokeFactory = this.tool.getStrokeFactory();
+		if (strokeFactory === makeFreehandLineBuilder || strokeFactory === makePressureSensitiveFreehandLineBuilder) {
+			// Use a square-root scale to prevent the pen's tip from overflowing.
+			const scale = Math.round(Math.sqrt(this.tool.getThickness()) * 4);
+			const color = this.tool.getColor();
+			const roundedTip = strokeFactory === makeFreehandLineBuilder;
+
+			return this.editor.icons.makePenIcon(scale, color.toHexString(), roundedTip);
+		} else {
+			const strokeFactory = this.tool.getStrokeFactory();
+			return this.editor.icons.makeIconFromFactory(this.tool, strokeFactory);
+		}
+	}
+
+	private static idCounter: number = 0;
+	protected fillDropdown(dropdown: HTMLElement): boolean {
+		const container = document.createElement('div');
+		container.classList.add(`${toolbarCSSPrefix}spacedList`);
+
+		const thicknessRow = document.createElement('div');
+		const objectTypeRow = document.createElement('div');
+
+		// Thickness: Value of the input is squared to allow for finer control/larger values.
+		const thicknessLabel = document.createElement('label');
+		const thicknessInput = document.createElement('input');
+		const objectSelectLabel = document.createElement('label');
+		const objectTypeSelect = document.createElement('select');
+
+		// Give inputs IDs so we can label them with a <label for=...>Label text</label>
+		thicknessInput.id = `${toolbarCSSPrefix}penThicknessInput${PenToolWidget.idCounter++}`;
+		objectTypeSelect.id = `${toolbarCSSPrefix}penBuilderSelect${PenToolWidget.idCounter++}`;
+
+		thicknessLabel.innerText = this.localizationTable.thicknessLabel;
+		thicknessLabel.setAttribute('for', thicknessInput.id);
+		objectSelectLabel.innerText = this.localizationTable.selectObjectType;
+		objectSelectLabel.setAttribute('for', objectTypeSelect.id);
+
+		// Use a logarithmic scale for thicknessInput (finer control over thinner strokewidths.)
+		const inverseThicknessInputFn = (t: number) => Math.log10(t);
+		const thicknessInputFn = (t: number) => 10**t;
+
+		thicknessInput.type = 'range';
+		thicknessInput.min = `${inverseThicknessInputFn(2)}`;
+		thicknessInput.max = `${inverseThicknessInputFn(400)}`;
+		thicknessInput.step = '0.1';
+		thicknessInput.oninput = () => {
+			this.tool.setThickness(thicknessInputFn(parseFloat(thicknessInput.value)));
+		};
+		thicknessRow.appendChild(thicknessLabel);
+		thicknessRow.appendChild(thicknessInput);
+
+		objectTypeSelect.oninput = () => {
+			const penTypeIdx = parseInt(objectTypeSelect.value);
+			if (penTypeIdx < 0 || penTypeIdx >= this.penTypes.length) {
+				console.error('Invalid pen type index', penTypeIdx);
+				return;
+			}
+
+			this.tool.setStrokeFactory(this.penTypes[penTypeIdx].factory);
+		};
+		objectTypeRow.appendChild(objectSelectLabel);
+		objectTypeRow.appendChild(objectTypeSelect);
+
+		const colorRow = document.createElement('div');
+		const colorLabel = document.createElement('label');
+		const [ colorInput, colorInputContainer, 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);
+
+		this.updateInputs = () => {
+			setColorInputValue(this.tool.getColor());
+			thicknessInput.value = inverseThicknessInputFn(this.tool.getThickness()).toString();
+
+			// Update the list of stroke factories
+			objectTypeSelect.replaceChildren();
+			for (let i = 0; i < this.penTypes.length; i ++) {
+				const penType = this.penTypes[i];
+				const option = document.createElement('option');
+				option.value = i.toString();
+				option.innerText = penType.name;
+
+				objectTypeSelect.appendChild(option);
+			}
+
+			// Update the selected stroke factory.
+			const strokeFactoryIdx = this.getCurrentPenTypeIdx();
+			if (strokeFactoryIdx === -1) {
+				objectTypeSelect.value = '';
+			} else {
+				objectTypeSelect.value = strokeFactoryIdx.toString();
+			}
+		};
+		this.updateInputs();
+
+		container.replaceChildren(colorRow, thicknessRow, objectTypeRow);
+		dropdown.replaceChildren(container);
+		return true;
+	}
+
+	protected onKeyPress(event: KeyPressEvent): boolean {
+		if (!this.isSelected()) {
+			return false;
+		}
+
+		// Map alt+0-9 to different pen types.
+		if (/^[0-9]$/.exec(event.key) && event.ctrlKey) {
+			const penTypeIdx = parseInt(event.key) - 1;
+			if (penTypeIdx >= 0 && penTypeIdx < this.penTypes.length) {
+				this.tool.setStrokeFactory(this.penTypes[penTypeIdx].factory);
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	public serializeState(): SavedToolbuttonState {
+		return {
+			...super.serializeState(),
+
+			color: this.tool.getColor().toHexString(),
+			thickness: this.tool.getThickness(),
+			strokeFactoryId: this.getCurrentPenType()?.id,
+		};
+	}
+
+	public 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;
+				}
+			}
+		}
+	}
+}

package/src/toolbar/widgets/SelectionToolWidget.ts

@@ -0,0 +1,190 @@
+import Color4 from '../../Color4';
+import { isRestylableComponent } from '../../components/RestylableComponent';
+import Editor from '../../Editor';
+import uniteCommands from '../../commands/uniteCommands';
+import SelectionTool from '../../tools/SelectionTool/SelectionTool';
+import { EditorEventType, KeyPressEvent } from '../../types';
+import { ToolbarLocalization } from '../localization';
+import makeColorInput from '../makeColorInput';
+import ActionButtonWidget from './ActionButtonWidget';
+import BaseToolWidget from './BaseToolWidget';
+import BaseWidget from './BaseWidget';
+
+class RestyleSelectionWidget extends BaseWidget {
+	private updateFormatData: ()=>void = () => {};
+
+	public constructor(editor: Editor, private selectionTool: SelectionTool, localizationTable?: ToolbarLocalization) {
+		super(editor, 'restyle-selection', localizationTable);
+
+		// Allow showing the dropdown even if this widget isn't selected yet
+		this.container.classList.add('dropdownShowable');
+
+		this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
+			if (toolEvt.kind !== EditorEventType.ToolUpdated) {
+				throw new Error('Invalid event type!');
+			}
+
+			if (toolEvt.tool === this.selectionTool) {
+				this.updateFormatData();
+			}
+		});
+	}
+
+	protected getTitle(): string {
+		return this.localizationTable.reformatSelection;
+	}
+
+	protected createIcon(){
+		return this.editor.icons.makeFormatSelectionIcon();
+	}
+
+	protected handleClick(): void {
+		this.setDropdownVisible(!this.isDropdownVisible());
+	}
+
+	protected fillDropdown(dropdown: HTMLElement): boolean {
+		const container = document.createElement('div');
+		const colorRow = document.createElement('div');
+		const colorLabel = document.createElement('label');
+		const [ colorInput, colorInputContainer, setColorInputValue ] = makeColorInput(this.editor, color => {
+			const selection = this.selectionTool.getSelection();
+
+			if (selection) {
+				const updateStyleCommands = [];
+
+				for (const elem of selection.getSelectedObjects()) {
+					if (isRestylableComponent(elem)) {
+						updateStyleCommands.push(elem.updateStyle({ color }));
+					}
+				}
+
+				const unitedCommand = uniteCommands(updateStyleCommands);
+				this.editor.dispatch(unitedCommand);
+			}
+		});
+
+		colorLabel.innerText = this.localizationTable.colorLabel;
+
+		this.updateFormatData = () => {
+			const selection = this.selectionTool.getSelection();
+			if (selection) {
+				colorInput.disabled = false;
+
+				const colors = [];
+				for (const elem of selection.getSelectedObjects()) {
+					if (isRestylableComponent(elem)) {
+						const color = elem.getStyle().color;
+						if (color) {
+							colors.push(color);
+						}
+					}
+				}
+				setColorInputValue(Color4.average(colors));
+			} else {
+				colorInput.disabled = true;
+			}
+		};
+
+		colorRow.replaceChildren(colorLabel, colorInputContainer);
+		container.replaceChildren(colorRow);
+		dropdown.replaceChildren(container);
+		return true;
+	}
+}
+
+export default class SelectionToolWidget extends BaseToolWidget {
+	public constructor(
+		editor: Editor, private tool: SelectionTool, localization?: ToolbarLocalization
+	) {
+		super(editor, tool, 'selection-tool-widget', localization);
+
+		const resizeButton = new ActionButtonWidget(
+			editor, 'resize-btn',
+			() => editor.icons.makeResizeViewportIcon(),
+			this.localizationTable.resizeImageToSelection,
+			() => {
+				this.resizeImageToSelection();
+			},
+			localization,
+		);
+		const deleteButton = new ActionButtonWidget(
+			editor, 'delete-btn',
+			() => editor.icons.makeDeleteSelectionIcon(),
+			this.localizationTable.deleteSelection,
+			() => {
+				const selection = this.tool.getSelection();
+				this.editor.dispatch(selection!.deleteSelectedObjects());
+				this.tool.clearSelection();
+			},
+			localization,
+		);
+		const duplicateButton = new ActionButtonWidget(
+			editor, 'duplicate-btn',
+			() => editor.icons.makeDuplicateSelectionIcon(),
+			this.localizationTable.duplicateSelection,
+			async () => {
+				const selection = this.tool.getSelection();
+				this.editor.dispatch(await selection!.duplicateSelectedObjects());
+			},
+			localization,
+		);
+		const restyleButton = new RestyleSelectionWidget(
+			editor,
+			this.tool,
+			localization,
+		);
+
+		this.addSubWidget(resizeButton);
+		this.addSubWidget(deleteButton);
+		this.addSubWidget(duplicateButton);
+		this.addSubWidget(restyleButton);
+
+		const updateDisabled = (disabled: boolean) => {
+			resizeButton.setDisabled(disabled);
+			deleteButton.setDisabled(disabled);
+			duplicateButton.setDisabled(disabled);
+			restyleButton.setDisabled(disabled);
+		};
+		updateDisabled(true);
+
+		// Enable/disable actions based on whether items are selected
+		this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
+			if (toolEvt.kind !== EditorEventType.ToolUpdated) {
+				throw new Error('Invalid event type!');
+			}
+
+			if (toolEvt.tool === this.tool) {
+				const selection = this.tool.getSelection();
+				const hasSelection = selection && selection.getSelectedItemCount() > 0;
+
+				updateDisabled(!hasSelection);
+			}
+		});
+	}
+
+	private resizeImageToSelection() {
+		const selection = this.tool.getSelection();
+		if (selection) {
+			this.editor.dispatch(this.editor.setImportExportRect(selection.region));
+		}
+	}
+
+	protected onKeyPress(event: KeyPressEvent): boolean {
+		// Resize image to selection:
+		// Other keys are handled directly by the selection tool.
+		if (event.ctrlKey && event.key === 'r') {
+			this.resizeImageToSelection();
+			return true;
+		}
+
+		return false;
+	}
+
+	protected getTitle(): string {
+		return this.localizationTable.select;
+	}
+
+	protected createIcon(): Element {
+		return this.editor.icons.makeSelectionIcon();
+	}
+}

package/src/toolbar/widgets/TextToolWidget.ts

@@ -0,0 +1,145 @@
+import Color4 from '../../Color4';
+import Editor from '../../Editor';
+import TextTool from '../../tools/TextTool';
+import { EditorEventType } from '../../types';
+import { toolbarCSSPrefix } from '../HTMLToolbar';
+import { ToolbarLocalization } from '../localization';
+import makeColorInput from '../makeColorInput';
+import BaseToolWidget from './BaseToolWidget';
+import { SavedToolbuttonState } from './BaseWidget';
+
+export default class TextToolWidget extends BaseToolWidget {
+	private updateDropdownInputs: (()=>void)|null = null;
+	public constructor(editor: Editor, private tool: TextTool, localization?: ToolbarLocalization) {
+		super(editor, tool, 'text-tool-widget', localization);
+
+		editor.notifier.on(EditorEventType.ToolUpdated, evt => {
+			if (evt.kind === EditorEventType.ToolUpdated && evt.tool === tool) {
+				this.updateIcon();
+				this.updateDropdownInputs?.();
+			}
+		});
+	}
+
+	protected getTitle(): string {
+		return this.targetTool.description;
+	}
+
+	protected createIcon(): Element {
+		const textStyle = this.tool.getTextStyle();
+		return this.editor.icons.makeTextIcon(textStyle);
+	}
+
+	private static idCounter: number = 0;
+	protected fillDropdown(dropdown: HTMLElement): boolean {
+		const container = document.createElement('div');
+		container.classList.add(`${toolbarCSSPrefix}spacedList`);
+		const fontRow = document.createElement('div');
+		const colorRow = document.createElement('div');
+		const sizeRow = document.createElement('div');
+
+		const fontInput = document.createElement('select');
+		const fontLabel = document.createElement('label');
+
+		const sizeInput = document.createElement('input');
+		const sizeLabel = document.createElement('label');
+
+		const [ colorInput, colorInputContainer, setColorInputValue ] = makeColorInput(this.editor, color => {
+			this.tool.setColor(color);
+		});
+		const colorLabel = document.createElement('label');
+
+		const fontsInInput = new Set();
+		const addFontToInput = (fontName: string) => {
+			const option = document.createElement('option');
+			option.value = fontName;
+			option.textContent = fontName;
+			fontInput.appendChild(option);
+			fontsInInput.add(fontName);
+		};
+
+		sizeInput.setAttribute('type', 'number');
+		sizeInput.min = '1';
+		sizeInput.max = '128';
+
+		fontLabel.innerText = this.localizationTable.fontLabel;
+		colorLabel.innerText = this.localizationTable.colorLabel;
+		sizeLabel.innerText = this.localizationTable.textSize;
+
+		colorInput.id = `${toolbarCSSPrefix}-text-color-input-${TextToolWidget.idCounter++}`;
+		colorLabel.setAttribute('for', colorInput.id);
+
+		sizeInput.id = `${toolbarCSSPrefix}-text-size-input-${TextToolWidget.idCounter++}`;
+		sizeLabel.setAttribute('for', sizeInput.id);
+
+		addFontToInput('monospace');
+		addFontToInput('serif');
+		addFontToInput('sans-serif');
+		fontInput.id = `${toolbarCSSPrefix}-text-font-input-${TextToolWidget.idCounter++}`;
+		fontLabel.setAttribute('for', fontInput.id);
+
+		fontInput.onchange = () => {
+			this.tool.setFontFamily(fontInput.value);
+		};
+
+		sizeInput.onchange = () => {
+			const size = parseInt(sizeInput.value);
+			if (!isNaN(size) && size > 0) {
+				this.tool.setFontSize(size);
+			}
+		};
+
+		colorRow.appendChild(colorLabel);
+		colorRow.appendChild(colorInputContainer);
+
+		fontRow.appendChild(fontLabel);
+		fontRow.appendChild(fontInput);
+
+		sizeRow.appendChild(sizeLabel);
+		sizeRow.appendChild(sizeInput);
+
+		this.updateDropdownInputs = () => {
+			const style = this.tool.getTextStyle();
+			setColorInputValue(style.renderingStyle.fill);
+
+			if (!fontsInInput.has(style.fontFamily)) {
+				addFontToInput(style.fontFamily);
+			}
+			fontInput.value = style.fontFamily;
+			sizeInput.value = `${style.size}`;
+		};
+		this.updateDropdownInputs();
+
+		container.replaceChildren(colorRow, sizeRow, fontRow);
+		dropdown.appendChild(container);
+		return true;
+	}
+
+	public serializeState(): SavedToolbuttonState {
+		const textStyle = this.tool.getTextStyle();
+
+		return {
+			...super.serializeState(),
+
+			fontFamily: textStyle.fontFamily,
+			textSize: textStyle.size,
+			color: textStyle.renderingStyle.fill.toHexString(),
+		};
+	}
+
+	public deserializeFrom(state: SavedToolbuttonState) {
+		if (state.fontFamily && typeof(state.fontFamily) === 'string') {
+			this.tool.setFontFamily(state.fontFamily);
+		}
+
+		if (state.color && typeof(state.color) === 'string') {
+			this.tool.setColor(Color4.fromHex(state.color));
+		}
+
+		if (state.textSize && typeof(state.textSize) === 'number') {
+			this.tool.setFontSize(state.textSize);
+		}
+
+		super.deserializeFrom(state);
+	}
+}

package/src/toolbar/widgets/lib.ts

@@ -0,0 +1,13 @@
+
+export { default as ActionButtonWidget } from './ActionButtonWidget';
+export { default as BaseToolWidget } from './BaseToolWidget';
+export { default as BaseWidget } from './BaseWidget';
+
+export { default as PenToolWidget } from './PenToolWidget';
+export { default as TextToolWidget } from './TextToolWidget';
+export { default as HandToolWidget } from './HandToolWidget';
+export { default as SelectionToolWidget } from './SelectionToolWidget';
+export { default as EraserToolWidget } from './EraserToolWidget';
+
+export { default as InsertImageWidget } from './InsertImageWidget';
+export { default as DocumentPropertiesWidget } from './DocumentPropertiesWidget';