js-draw 0.18.2 → 0.20.0

package/src/toolbar/widgets/PenToolWidget.ts

@@ -1,288 +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 { 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

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

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

@@ -1,13 +0,0 @@
-
-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';