js-draw 0.8.0 → 0.9.0

package/src/toolbar/widgets/BaseToolWidget.ts

@@ -8,9 +8,10 @@ export default abstract class BaseToolWidget extends BaseWidget {
 	public constructor(
 		protected editor: Editor,
 		protected targetTool: BaseTool,
-		protected localizationTable: ToolbarLocalization,
+		id: string,
+		localizationTable?: ToolbarLocalization,
 	) {
-		super(editor, localizationTable);
+		super(editor, id, localizationTable);
 
 		editor.notifier.on(EditorEventType.ToolEnabled, toolEvt => {
 			if (toolEvt.kind !== EditorEventType.ToolEnabled) {
@@ -50,4 +51,4 @@ export default abstract class BaseToolWidget extends BaseWidget {
 		super.addTo(parent);
 		this.setSelected(this.targetTool.isEnabled());
 	}
-}
+}

package/src/toolbar/widgets/BaseWidget.ts

@@ -4,6 +4,8 @@ import { EditorEventType, InputEvtType, KeyPressEvent } from '../../types';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
 import { ToolbarLocalization } from '../localization';
 
+export type SavedToolbuttonState = Record<string, any>;
+
 export default abstract class BaseWidget {
 	protected readonly container: HTMLElement;
 	private button: HTMLElement;
@@ -13,13 +15,20 @@ export default abstract class BaseWidget {
 	private label: HTMLLabelElement;
 	#hasDropdown: boolean;
 	private disabled: boolean = false;
-	private subWidgets: BaseWidget[] = [];
+
+	// Maps subWidget IDs to subWidgets.
+	private subWidgets: Record<string, BaseWidget> = {};
+
 	private toplevel: boolean = true;
+	protected readonly localizationTable: ToolbarLocalization;
 
 	public constructor(
 		protected editor: Editor,
-		protected localizationTable: ToolbarLocalization,
+		protected id: string,
+		localizationTable?: ToolbarLocalization,
 	) {
+		this.localizationTable = localizationTable ?? editor.localization;
+
 		this.icon = null;
 		this.container = document.createElement('div');
 		this.container.classList.add(`${toolbarCSSPrefix}toolContainer`);
@@ -43,17 +52,44 @@ export default abstract class BaseWidget {
 		}
 	}
 
+	public getId(): string {
+		return this.id;
+	}
+
+	/**
+	 * Returns the ID of this widget in `container`. Adds a suffix to this' ID
+	 * if an item in `container` already has this' ID.
+	 * 
+	 * For example, if `this` has ID `foo` and if
+	 * `container = { 'foo': somethingNotThis, 'foo-1': somethingElseNotThis }`, this method
+	 * returns `foo-2` because elements with IDs `foo` and `foo-1` are already present in
+	 * `container`.
+	 */
+	public getUniqueIdIn(container: Record<string, BaseWidget>): string {
+		let id = this.getId();
+		let idCounter = 0;
+
+		while (id in container && container[id] !== this) {
+			id = this.getId() + '-' + idCounter.toString();
+			idCounter ++;
+		}
+
+		return id;
+	}
+
 	protected abstract getTitle(): string;
 	protected abstract createIcon(): Element;
 
 	// Add content to the widget's associated dropdown menu.
 	// Returns true if such a menu should be created, false otherwise.
 	protected fillDropdown(dropdown: HTMLElement): boolean {
-		if (this.subWidgets.length === 0) {
+		if (Object.keys(this.subWidgets).length === 0) {
 			return false;
 		}
 
-		for (const widget of this.subWidgets) {
+		for (const widgetId in this.subWidgets) {
+			const widget = this.subWidgets[widgetId];
+
 			widget.addTo(dropdown);
 			widget.setIsToplevel(false);
 		}
@@ -118,7 +154,10 @@ export default abstract class BaseWidget {
 
 	// Add a widget to this' dropdown. Must be called before this.addTo.
 	protected addSubWidget(widget: BaseWidget) {
-		this.subWidgets.push(widget);
+		// Generate a unique ID for the widget.
+		const id = widget.getUniqueIdIn(this.subWidgets);
+
+		this.subWidgets[id] = widget;
 	}
 
 	// Adds this to [parent]. This can only be called once for each ToolbarWidget.
@@ -251,4 +290,43 @@ export default abstract class BaseWidget {
 		icon.classList.add(`${toolbarCSSPrefix}showHideDropdownIcon`);
 		return icon;
 	}
+
+	/**
+	 * Serialize state associated with this widget.
+	 * Override this method to allow saving/restoring from state on application load.
+	 * 
+	 * Overriders should call `super` and include the output of `super.serializeState` in
+	 * the output dictionary.
+	 * 
+	 * Clients should not rely on the output from `saveState` being in any particular
+	 * format.
+	 */
+	public serializeState(): SavedToolbuttonState {
+		const subwidgetState: Record<string, any> = {};
+
+		// Save all subwidget state.
+		for (const subwidgetId in this.subWidgets) {
+			subwidgetState[subwidgetId] = this.subWidgets[subwidgetId].serializeState();
+		}
+
+		return {
+			subwidgetState,
+		};
+	}
+
+	/**
+	 * Restore widget state from serialized data. See also `saveState`.
+	 * 
+	 * Overriders must call `super`.
+	 */
+	public deserializeFrom(state: SavedToolbuttonState): void {
+		if (state.subwidgetState) {
+			// Deserialize all subwidgets.
+			for (const subwidgetId in state.subwidgetState) {
+				if (subwidgetId in this.subWidgets) {
+					this.subWidgets[subwidgetId].deserializeFrom(state.subwidgetState[subwidgetId]);
+				}
+			}
+		}
+	}
 }

package/src/toolbar/widgets/EraserToolWidget.ts

@@ -1,6 +1,17 @@
+import Editor from '../../Editor';
+import Eraser from '../../tools/Eraser';
+import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
 
 export default class EraserToolWidget extends BaseToolWidget {
+	public constructor(
+		editor: Editor,
+		tool: Eraser,
+		localizationTable?: ToolbarLocalization
+	) {
+		super(editor, tool, 'eraser-tool-widget', localizationTable);
+	}
+
 	protected getTitle(): string {
 		return this.localizationTable.eraser;
 	}

package/src/toolbar/widgets/HandToolWidget.ts

@@ -7,7 +7,7 @@ import Viewport from '../../Viewport';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
 import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
-import BaseWidget from './BaseWidget';
+import BaseWidget, { SavedToolbuttonState } from './BaseWidget';
 
 const makeZoomControl = (localizationTable: ToolbarLocalization, editor: Editor) => {
 	const zoomLevelRow = document.createElement('div');
@@ -74,8 +74,8 @@ const makeZoomControl = (localizationTable: ToolbarLocalization, editor: Editor)
 };
 
 class ZoomWidget extends BaseWidget {
-	public constructor(editor: Editor, localizationTable: ToolbarLocalization) {
-		super(editor, localizationTable);
+	public constructor(editor: Editor, localizationTable?: ToolbarLocalization) {
+		super(editor, 'zoom-widget', localizationTable);
 
 		// Make it possible to open the dropdown, even if this widget isn't selected.
 		this.container.classList.add('dropdownShowable');
@@ -101,12 +101,14 @@ class ZoomWidget extends BaseWidget {
 
 class HandModeWidget extends BaseWidget {
 	public constructor(
-		editor: Editor, localizationTable: ToolbarLocalization,
+		editor: Editor,
 
 		protected tool: PanZoom, protected flag: PanZoomMode, protected makeIcon: ()=> Element,
 		private title: string,
+
+		localizationTable?: ToolbarLocalization,
 	) {
-		super(editor, localizationTable);
+		super(editor, `pan-mode-${flag}`, localizationTable);
 
 		editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
 			if (toolEvt.kind === EditorEventType.ToolUpdated && toolEvt.tool === tool) {
@@ -122,12 +124,7 @@ class HandModeWidget extends BaseWidget {
 	}
 
 	private setModeFlag(enabled: boolean) {
-		const mode = this.tool.getMode();
-		if (enabled) {
-			this.tool.setMode(mode | this.flag);
-		} else {
-			this.tool.setMode(mode & ~this.flag);
-		}
+		this.tool.setModeEnabled(this.flag, enabled);
 	}
 
 	protected handleClick() {
@@ -148,7 +145,6 @@ class HandModeWidget extends BaseWidget {
 }
 
 export default class HandToolWidget extends BaseToolWidget {
-	private touchPanningWidget: HandModeWidget;
 	private allowTogglingBaseTool: boolean;
 	
 	public constructor(
@@ -162,7 +158,7 @@ export default class HandToolWidget extends BaseToolWidget {
 	) {
 		const primaryHandTool = HandToolWidget.getPrimaryHandTool(editor.toolController);
 		const tool = primaryHandTool ?? overridePanZoomTool;
-		super(editor, tool, localizationTable);
+		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.
@@ -174,16 +170,29 @@ export default class HandToolWidget extends BaseToolWidget {
 		}
 
 		// Controls for the overriding hand tool.
-		this.touchPanningWidget = new HandModeWidget(
-			editor, localizationTable,
+		const touchPanningWidget = new HandModeWidget(
+			editor,
 
 			overridePanZoomTool, PanZoomMode.OneFingerTouchGestures,
 			() => this.editor.icons.makeTouchPanningIcon(),
 
-			localizationTable.touchPanning
+			localizationTable.touchPanning,
+
+			localizationTable,
 		);
+		
+		const rotationLockWidget = new HandModeWidget(
+			editor,
 
-		this.addSubWidget(this.touchPanningWidget);
+			overridePanZoomTool, PanZoomMode.RotationLocked,
+			() => this.editor.icons.makeRotationLockIcon(),
+
+			localizationTable.lockRotation,
+			localizationTable,
+		);
+
+		this.addSubWidget(touchPanningWidget);
+		this.addSubWidget(rotationLockWidget);
 		this.addSubWidget(
 			new ZoomWidget(editor, localizationTable)
 		);
@@ -216,4 +225,26 @@ export default class HandToolWidget extends BaseToolWidget {
 			super.setSelected(selected);
 		}
 	}
+
+	public serializeState(): SavedToolbuttonState {
+		const toolMode = this.overridePanZoomTool.getMode();
+
+		return {
+			...super.serializeState(),
+			touchPanning: toolMode & PanZoomMode.OneFingerTouchGestures,
+			rotationLocked: toolMode & PanZoomMode.RotationLocked,
+		};
+	}
+
+	public 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);
+	}
 }

package/src/toolbar/widgets/PenToolWidget.ts

@@ -11,12 +11,17 @@ 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;
 }
@@ -26,34 +31,46 @@ export default class PenToolWidget extends BaseToolWidget {
 	protected penTypes: PenTypeRecord[];
 
 	public constructor(
-		editor: Editor, private tool: Pen, localization: ToolbarLocalization
+		editor: Editor, private tool: Pen, localization?: ToolbarLocalization
 	) {
-		super(editor, tool, localization);
+		super(editor, tool, 'pen', localization);
 
 		// Default pen types
 		this.penTypes = [
 			{
-				name: localization.pressureSensitiveFreehandPen,
+				name: this.localizationTable.pressureSensitiveFreehandPen,
+				id: 'pressure-sensitive-pen',
+
 				factory: makePressureSensitiveFreehandLineBuilder,
 			},
 			{
-				name: localization.freehandPen,
+				name: this.localizationTable.freehandPen,
+				id: 'freehand-pen',
+
 				factory: makeFreehandLineBuilder,
 			},
 			{
-				name: localization.arrowPen,
+				name: this.localizationTable.arrowPen,
+				id: 'arrow',
+
 				factory: makeArrowBuilder,
 			},
 			{
-				name: localization.linePen,
+				name: this.localizationTable.linePen,
+				id: 'line',
+
 				factory: makeLineBuilder,
 			},
 			{
-				name: localization.filledRectanglePen,
+				name: this.localizationTable.filledRectanglePen,
+				id: 'filled-rectangle',
+
 				factory: makeFilledRectangleBuilder,
 			},
 			{
-				name: localization.outlinedRectanglePen,
+				name: this.localizationTable.outlinedRectanglePen,
+				id: 'outlined-rectangle',
+
 				factory: makeOutlinedRectangleBuilder,
 			},
 		];
@@ -75,6 +92,30 @@ export default class PenToolWidget extends BaseToolWidget {
 		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) {
@@ -138,7 +179,7 @@ export default class PenToolWidget extends BaseToolWidget {
 
 		const colorRow = document.createElement('div');
 		const colorLabel = document.createElement('label');
-		const [ colorInput, colorInputContainer ] = makeColorInput(this.editor, color => {
+		const [ colorInput, colorInputContainer, setColorInputValue ] = makeColorInput(this.editor, color => {
 			this.tool.setColor(color);
 		});
 
@@ -150,9 +191,10 @@ export default class PenToolWidget extends BaseToolWidget {
 		colorRow.appendChild(colorInputContainer);
 
 		this.updateInputs = () => {
-			colorInput.value = this.tool.getColor().toHexString();
+			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];
@@ -161,10 +203,14 @@ export default class PenToolWidget extends BaseToolWidget {
 				option.innerText = penType.name;
 
 				objectTypeSelect.appendChild(option);
+			}
 
-				if (penType.factory === this.tool.getStrokeFactory()) {
-					objectTypeSelect.value = i.toString();
-				}
+			// Update the selected stroke factory.
+			const strokeFactoryIdx = this.getCurrentPenTypeIdx();
+			if (strokeFactoryIdx === -1) {
+				objectTypeSelect.value = '';
+			} else {
+				objectTypeSelect.value = strokeFactoryIdx.toString();
 			}
 		};
 		this.updateInputs();
@@ -190,4 +236,50 @@ export default class PenToolWidget extends BaseToolWidget {
 
 		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

@@ -7,20 +7,21 @@ import BaseToolWidget from './BaseToolWidget';
 
 export default class SelectionToolWidget extends BaseToolWidget {
 	public constructor(
-		editor: Editor, private tool: SelectionTool, localization: ToolbarLocalization
+		editor: Editor, private tool: SelectionTool, localization?: ToolbarLocalization
 	) {
-		super(editor, tool, localization);
+		super(editor, tool, 'selection-tool-widget', localization);
 
 		const resizeButton = new ActionButtonWidget(
-			editor, localization,
+			editor, 'resize-btn',
 			() => editor.icons.makeResizeViewportIcon(),
 			this.localizationTable.resizeImageToSelection,
 			() => {
 				this.resizeImageToSelection();
 			},
+			localization,
 		);
 		const deleteButton = new ActionButtonWidget(
-			editor, localization,
+			editor, 'delete-btn',
 			() => editor.icons.makeDeleteSelectionIcon(),
 			this.localizationTable.deleteSelection,
 			() => {
@@ -28,15 +29,17 @@ export default class SelectionToolWidget extends BaseToolWidget {
 				this.editor.dispatch(selection!.deleteSelectedObjects());
 				this.tool.clearSelection();
 			},
+			localization,
 		);
 		const duplicateButton = new ActionButtonWidget(
-			editor, localization,
+			editor, 'duplicate-btn',
 			() => editor.icons.makeDuplicateSelectionIcon(),
 			this.localizationTable.duplicateSelection,
 			() => {
 				const selection = this.tool.getSelection();
 				this.editor.dispatch(selection!.duplicateSelectedObjects());
 			},
+			localization,
 		);
 
 		this.addSubWidget(resizeButton);

package/src/toolbar/widgets/TextToolWidget.ts

@@ -1,3 +1,4 @@
+import Color4 from '../../Color4';
 import Editor from '../../Editor';
 import TextTool from '../../tools/TextTool';
 import { EditorEventType } from '../../types';
@@ -5,11 +6,12 @@ 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, localization);
+	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) {
@@ -36,7 +38,7 @@ export default class TextToolWidget extends BaseToolWidget {
 		const fontInput = document.createElement('select');
 		const fontLabel = document.createElement('label');
 
-		const [ colorInput, colorInputContainer ] = makeColorInput(this.editor, color => {
+		const [ colorInput, colorInputContainer, setColorInputValue ] = makeColorInput(this.editor, color => {
 			this.tool.setColor(color);
 		});
 		const colorLabel = document.createElement('label');
@@ -74,7 +76,7 @@ export default class TextToolWidget extends BaseToolWidget {
 
 		this.updateDropdownInputs = () => {
 			const style = this.tool.getTextStyle();
-			colorInput.value = style.renderingStyle.fill.toHexString();
+			setColorInputValue(style.renderingStyle.fill);
 
 			if (!fontsInInput.has(style.fontFamily)) {
 				addFontToInput(style.fontFamily);
@@ -86,4 +88,27 @@ export default class TextToolWidget extends BaseToolWidget {
 		dropdown.replaceChildren(colorRow, fontRow);
 		return true;
 	}
+
+	public serializeState(): SavedToolbuttonState {
+		const textStyle = this.tool.getTextStyle();
+
+		return {
+			...super.serializeState(),
+
+			fontFamily: textStyle.fontFamily,
+			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));
+		}
+
+		super.deserializeFrom(state);
+	}
 }

package/src/tools/PanZoom.ts

@@ -21,6 +21,8 @@ export enum PanZoomMode {
 	RightClickDrags = 0x1 << 2,
 	SinglePointerGestures = 0x1 << 3,
 	Keyboard = 0x1 << 4,
+
+	RotationLocked = 0x1 << 5,
 }
 
 export default class PanZoom extends BaseTool {
@@ -90,10 +92,15 @@ export default class PanZoom extends BaseTool {
 		const { screenCenter, canvasCenter, angle, dist } = this.computePinchData(allPointers[0], allPointers[1]);
 
 		const delta = this.getCenterDelta(screenCenter);
+		let rotation = angle - this.lastAngle;
+
+		if (this.isRotationLocked()) {
+			rotation = 0;
+		}
 
 		const transformUpdate = Mat33.translation(delta)
 			.rightMul(Mat33.scaling2D(dist / this.lastDist, canvasCenter))
-			.rightMul(Mat33.zRotation(angle - this.lastAngle, canvasCenter));
+			.rightMul(Mat33.zRotation(rotation, canvasCenter));
 		this.lastScreenCenter = screenCenter;
 		this.lastDist = dist;
 		this.lastAngle = angle;
@@ -250,6 +257,10 @@ export default class PanZoom extends BaseTool {
 			rotation += 0.0001;
 		}
 
+		if (this.isRotationLocked()) {
+			rotation = 0;
+		}
+
 		const toCanvas = this.editor.viewport.screenToCanvasTransform;
 
 		// Transform without translating (treat toCanvas as a linear instead of
@@ -270,6 +281,22 @@ export default class PanZoom extends BaseTool {
 		return true;
 	}
 
+	private isRotationLocked(): boolean {
+		return !!(this.mode & PanZoomMode.RotationLocked);
+	}
+
+	// Sets whether the given `mode` is enabled. `mode` should be a single
+	// mode from the `PanZoomMode` enum.
+	public setModeEnabled(mode: PanZoomMode, enabled: boolean) {
+		let newMode = this.mode;
+		if (enabled) {
+			newMode |= mode;
+		} else {
+			newMode &= ~mode;
+		}
+		this.setMode(newMode);
+	}
+
 	public setMode(mode: PanZoomMode) {
 		if (mode !== this.mode) {
 			this.mode = mode;