js-draw 0.8.0 → 0.9.1

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;

package/src/tools/SelectionTool/Selection.ts

@@ -453,7 +453,7 @@ export default class Selection {
 
 	public setSelectedObjects(objects: AbstractComponent[], bbox: Rect2) {
 		this.originalRegion = bbox;
-		this.selectedElems = objects;
+		this.selectedElems = objects.filter(object => object.isSelectable());
 		this.updateUI();
 	}