js-draw 0.8.0 → 0.9.1

package/src/math/Path.test.ts

@@ -171,4 +171,28 @@ describe('Path', () => {
 			).toBe(true);
 		});
 	});
+
+	describe('fromRect', () => {
+		const filledRect = Path.fromRect(Rect2.unitSquare);
+		const strokedRect = Path.fromRect(Rect2.unitSquare, 0.1);
+
+		it('filled should be closed shape', () => {
+			const lastSegment = filledRect.parts[filledRect.parts.length - 1];
+
+			if (lastSegment.kind !== PathCommandType.LineTo) {
+				throw new Error('Rectangles should only be made up of lines');
+			}
+
+			expect(filledRect.startPoint).objEq(lastSegment.point);
+		});
+
+		it('stroked should be closed shape', () => {
+			const lastSegment = strokedRect.parts[strokedRect.parts.length - 1];
+			if (lastSegment.kind !== PathCommandType.LineTo) {
+				throw new Error('Rectangles should only be made up of lines');
+			}
+			
+			expect(strokedRect.startPoint).objEq(lastSegment.point);
+		});
+	});
 });

package/src/math/Path.ts

@@ -285,7 +285,7 @@ export default class Path {
 		}
 		const isClosed = this.startPoint.eq(this.getEndPoint());
         
-		if (isClosed && strokeWidth == 0) {
+		if (isClosed && strokeWidth === 0) {
 			return this.closedRoughlyIntersects(rect);
 		}
 
@@ -401,6 +401,12 @@ export default class Path {
 			});
 		}
 
+		// Close the shape
+		commands.push({
+			kind: PathCommandType.LineTo,
+			point: startPoint,
+		});
+
 		return new Path(startPoint, commands);
 	}
 

package/src/rendering/renderers/SVGRenderer.ts

@@ -94,7 +94,11 @@ export default class SVGRenderer extends AbstractRenderer {
 		pathElem.setAttribute('d', this.lastPathString.join(' '));
 
 		const style = this.lastPathStyle;
-		pathElem.setAttribute('fill', style.fill.toHexString());
+		if (style.fill.a > 0) {
+			pathElem.setAttribute('fill', style.fill.toHexString());
+		} else {
+			pathElem.setAttribute('fill', 'none');
+		}
 
 		if (style.stroke) {
 			pathElem.setAttribute('stroke', style.stroke.color.toHexString());

package/src/toolbar/HTMLToolbar.ts

@@ -24,6 +24,8 @@ type UpdateColorisCallback = ()=>void;
 export default class HTMLToolbar {
 	private container: HTMLElement;
 
+	private widgets: Record<string, BaseWidget> = {};
+
 	private static colorisStarted: boolean = false;
 	private updateColoris: UpdateColorisCallback|null = null;
 
@@ -121,10 +123,41 @@ export default class HTMLToolbar {
 	// Adds an `ActionButtonWidget` or `BaseToolWidget`. The widget should not have already have a parent
 	// (i.e. its `addTo` method should not have been called).
 	public addWidget(widget: BaseWidget) {
+		// Prevent name collisions
+		const id = widget.getUniqueIdIn(this.widgets);
+
+		// Add the widget
+		this.widgets[id] = widget;
+
+		// Add HTML elements.
 		widget.addTo(this.container);
 		this.setupColorPickers();
 	}
 
+	public serializeState(): string {
+		const result: Record<string, any> = {};
+
+		for (const widgetId in this.widgets) {
+			result[widgetId] = this.widgets[widgetId].serializeState();
+		}
+
+		return JSON.stringify(result);
+	}
+
+	// Deserialize toolbar widgets from the given state.
+	// Assumes that toolbar widgets are in the same order as when state was serialized.
+	public deserializeState(state: string) {
+		const data = JSON.parse(state);
+
+		for (const widgetId in data) {
+			if (!(widgetId in this.widgets)) {
+				console.warn(`Unable to deserialize widget ${widgetId} ­— no such widget.`);
+			}
+
+			this.widgets[widgetId].deserializeFrom(data[widgetId]);
+		}
+	}
+
 	public addActionButton(title: string|ActionButtonIcon, command: ()=> void, parent?: Element) {
 		const button = document.createElement('button');
 		button.classList.add(`${toolbarCSSPrefix}button`);

package/src/toolbar/IconProvider.ts

@@ -8,6 +8,9 @@ import Pen from '../tools/Pen';
 import { StrokeDataPoint } from '../types';
 import Viewport from '../Viewport';
 
+// Provides a default set of icons for the editor.
+// Many of the icons were created with Inkscape.
+
 type IconType = SVGSVGElement|HTMLImageElement;
 
 const svgNamespace = 'http://www.w3.org/2000/svg';
@@ -138,7 +141,7 @@ export default class IconProvider {
 		const strokeColor = 'var(--icon-color)';
 		const strokeWidth = '3';
 	
-		// Draw a cursor-like shape (like some of the other icons, made with Inkscape)
+		// Draw a cursor-like shape
 		return this.makeIconFromPath(`
 			m 10,60
 				5,30
@@ -275,6 +278,51 @@ export default class IconProvider {
 	
 		return icon;
 	}
+
+	public makeRotationLockIcon(): IconType {
+		const icon = this.makeIconFromPath(`
+			M 40.1 25.1 
+			C 32.5 25 27.9 34.1 27.9 34.1 
+			L 25.7 30 
+			L 28 44.7 
+			L 36.6 40.3 
+			L 32.3 38.3 
+			C 33.6 28 38.1 25.2 45.1 31.8 
+			L 49.4 29.6 
+			C 45.9 26.3 42.8 25.1 40.1 25.1 
+			z
+
+			M 51.7 34.2 
+			L 43.5 39.1 
+			L 48 40.8 
+			C 47.4 51.1 43.1 54.3 35.7 48.2 
+			L 31.6 50.7 
+			C 45.5 62.1 52.6 44.6 52.6 44.6 
+			L 55.1 48.6 
+			L 51.7 34.2 
+			z
+
+			M 56.9 49.9 
+			C 49.8 49.9 49.2 57.3 49.3 60.9 
+			L 47.6 60.9 
+			L 47.6 73.7 
+			L 66.1 73.7 
+			L 66.1 60.9 
+			L 64.4 60.9 
+			C 64.5 57.3 63.9 49.9 56.9 49.9 
+			z
+
+			M 56.9 53.5 
+			C 60.8 53.5 61 58.2 60.8 60.9 
+			L 52.9 60.9 
+			C 52.7 58.2 52.9 53.5 56.9 53.5 
+			z
+		`);
+
+		icon.setAttribute('viewBox', '10 10 70 70');
+
+		return icon;
+	}
 	
 	public makeTextIcon(textStyle: TextStyle): IconType {
 		const icon = document.createElementNS(svgNamespace, 'svg');

package/src/toolbar/localization.ts

@@ -3,6 +3,7 @@
 export interface ToolbarLocalization {
 	fontLabel: string;
 	touchPanning: string;
+	lockRotation: string;
 	outlinedRectanglePen: string;
 	filledRectanglePen: string;
 	linePen: string;
@@ -61,6 +62,7 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 	linePen: 'Line',
 	outlinedRectanglePen: 'Outlined rectangle',
 	filledRectanglePen: 'Filled rectangle',
+	lockRotation: 'Lock rotation',
 
 	dropdownShown: (toolName) => `Dropdown for ${toolName} shown`,
 	dropdownHidden: (toolName) => `Dropdown for ${toolName} hidden`,

package/src/toolbar/makeColorInput.ts

@@ -4,10 +4,13 @@ import PipetteTool from '../tools/PipetteTool';
 import { EditorEventType } from '../types';
 
 type OnColorChangeListener = (color: Color4)=>void;
+type SetColorCallback = (color: Color4|string) => void;
 
+// Returns [ color input, input container, callback to change the color value ].
+export const makeColorInput = (
+	editor: Editor, onColorChange: OnColorChangeListener
+): [ HTMLInputElement, HTMLElement, SetColorCallback ] => {
 
-// Returns [ color input, input container ].
-export const makeColorInput = (editor: Editor, onColorChange: OnColorChangeListener): [ HTMLInputElement, HTMLElement ] => {
 	const colorInputContainer = document.createElement('span');
 	const colorInput = document.createElement('input');
 
@@ -31,6 +34,9 @@ export const makeColorInput = (editor: Editor, onColorChange: OnColorChangeListe
 	const handleColorInput = () => {
 		currentColor = Color4.fromHex(colorInput.value);
 	};
+
+	// Only change the pen color when we finish sending input (this limits the number of
+	// editor events triggered and accessibility announcements).
 	const onInputEnd = () => {
 		handleColorInput();
 
@@ -61,7 +67,19 @@ export const makeColorInput = (editor: Editor, onColorChange: OnColorChangeListe
 		onInputEnd();
 	});
 
-	return [ colorInput, colorInputContainer ];
+	const setColorInputValue = (color: Color4|string) => {
+		if (typeof color === 'object') {
+			color = color.toHexString();
+		}
+
+		colorInput.value = color;
+
+		// Fire all color event listeners. See
+		// https://github.com/mdbassit/Coloris#manually-updating-the-thumbnail
+		colorInput.dispatchEvent(new Event('input', { bubbles: true }));
+	};
+
+	return [ colorInput, colorInputContainer, setColorInputValue ];
 };
 
 const addPipetteTool = (editor: Editor, container: HTMLElement, onColorChange: OnColorChangeListener) => {

package/src/toolbar/widgets/ActionButtonWidget.ts

@@ -4,13 +4,16 @@ import BaseWidget from './BaseWidget';
 
 export default class ActionButtonWidget extends BaseWidget {
 	public constructor(
-		editor: Editor, localizationTable: ToolbarLocalization,
+		editor: Editor,
+		id: string,
+
         protected makeIcon: ()=> Element,
 		protected title: string,
-
         protected clickAction: ()=>void,
+
+        localizationTable?: ToolbarLocalization,
 	) {
-		super(editor, localizationTable);
+		super(editor, id, localizationTable);
 	}
 
 	protected handleClick() {

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);
+	}
 }