js-draw 0.1.6 → 0.1.9

package/dist/src/tools/localization.d.ts

@@ -1,11 +1,12 @@
 export interface ToolLocalization {
-    rightClickDragPanTool: string;
     penTool: (penId: number) => string;
     selectionTool: string;
     eraserTool: string;
     touchPanTool: string;
     twoFingerPanZoomTool: string;
     undoRedoTool: string;
+    pipetteTool: string;
+    rightClickDragPanTool: string;
     textTool: string;
     enterTextToInsert: string;
     toolEnabledAnnouncement: (toolName: string) => string;

package/dist/src/tools/localization.js

@@ -2,10 +2,11 @@ export const defaultToolLocalization = {
     penTool: (penId) => `Pen ${penId}`,
     selectionTool: 'Selection',
     eraserTool: 'Eraser',
-    touchPanTool: 'Touch Panning',
-    twoFingerPanZoomTool: 'Panning and Zooming',
+    touchPanTool: 'Touch panning',
+    twoFingerPanZoomTool: 'Panning and zooming',
     undoRedoTool: 'Undo/Redo',
     rightClickDragPanTool: 'Right-click drag',
+    pipetteTool: 'Pick color from screen',
     textTool: 'Text',
     enterTextToInsert: 'Text to insert',
     toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,

package/dist/src/types.d.ts

@@ -58,7 +58,8 @@ export declare enum EditorEventType {
     ObjectAdded = 4,
     ViewportChanged = 5,
     DisplayResized = 6,
-    ColorPickerToggled = 7
+    ColorPickerToggled = 7,
+    ColorPickerColorSelected = 8
 }
 declare type EditorToolEventType = EditorEventType.ToolEnabled | EditorEventType.ToolDisabled | EditorEventType.ToolUpdated;
 export interface EditorToolEvent {
@@ -86,7 +87,11 @@ export interface ColorPickerToggled {
     readonly kind: EditorEventType.ColorPickerToggled;
     readonly open: boolean;
 }
-export declare type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | ColorPickerToggled;
+export interface ColorPickerColorSelected {
+    readonly kind: EditorEventType.ColorPickerColorSelected;
+    readonly color: Color4;
+}
+export declare type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | ColorPickerToggled | ColorPickerColorSelected;
 export declare type OnProgressListener = (amountProcessed: number, totalToProcess: number) => Promise<void> | null;
 export declare type ComponentAddedListener = (component: AbstractComponent) => void;
 export declare type OnDetermineExportRectListener = (exportRect: Rect2) => void;

package/dist/src/types.js

@@ -18,4 +18,5 @@ export var EditorEventType;
     EditorEventType[EditorEventType["ViewportChanged"] = 5] = "ViewportChanged";
     EditorEventType[EditorEventType["DisplayResized"] = 6] = "DisplayResized";
     EditorEventType[EditorEventType["ColorPickerToggled"] = 7] = "ColorPickerToggled";
+    EditorEventType[EditorEventType["ColorPickerColorSelected"] = 8] = "ColorPickerColorSelected";
 })(EditorEventType || (EditorEventType = {}));

package/jest.config.js

@@ -17,6 +17,8 @@ const config = {
 		'\\.(css|lessc)': '<rootDir>/__mocks__/styleMock.js',
 		'@melloware/coloris': '<rootDir>/__mocks__/coloris.ts',
 	},
+	
+	testEnvironment: 'jsdom',
 };
 
 module.exports = config;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "0.1.6",
+  "version": "0.1.9",
   "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
   "main": "dist/src/Editor.js",
   "types": "dist/src/Editor.d.ts",
@@ -59,14 +59,14 @@
     "@types/bezier-js": "^4.1.0",
     "@types/jest": "^28.1.7",
     "@types/jsdom": "^20.0.0",
-    "@types/node": "^18.7.9",
-    "@typescript-eslint/eslint-plugin": "^5.33.1",
-    "@typescript-eslint/parser": "^5.33.1",
+    "@types/node": "^18.7.15",
+    "@typescript-eslint/eslint-plugin": "^5.36.2",
+    "@typescript-eslint/parser": "^5.36.2",
     "css-loader": "^6.7.1",
-    "eslint": "^8.22.0",
+    "eslint": "^8.23.0",
     "husky": "^8.0.1",
     "jest": "^28.1.3",
-    "jest-environment-jsdom": "^28.1.3",
+    "jest-environment-jsdom": "^29.0.2",
     "jsdom": "^20.0.0",
     "lint-staged": "^13.0.3",
     "pinst": "^3.0.0",

package/src/Color4.ts

@@ -5,14 +5,20 @@ export default class Color4 {
 		public readonly g: number,
 		public readonly b: number,
 		public readonly a: number
-	) { }
+	) {
+	}
 
 	// Each component should be in the range [0, 1]
 	public static ofRGB(red: number, green: number, blue: number): Color4 {
-		return new Color4(red, green, blue, 1.0);
+		return Color4.ofRGBA(red, green, blue, 1.0);
 	}
 
 	public static ofRGBA(red: number, green: number, blue: number, alpha: number): Color4 {
+		red = Math.max(0, Math.min(red, 1));
+		green = Math.max(0, Math.min(green, 1));
+		blue = Math.max(0, Math.min(blue, 1));
+		alpha = Math.max(0, Math.min(alpha, 1));
+
 		return new Color4(red, green, blue, alpha);
 	}
 
@@ -49,7 +55,7 @@ export default class Color4 {
 			throw new Error(`Unable to parse ${hexString}: Wrong number of components.`);
 		}
 
-		return new Color4(components[0], components[1], components[2], components[3]);
+		return Color4.ofRGBA(components[0], components[1], components[2], components[3]);
 	}
 
 	// Like fromHex, but can handle additional colors if an HTML5Canvas is available.

package/src/Editor.ts

@@ -108,7 +108,7 @@ export class Editor {
 		);
 
 		this.registerListeners();
-		this.rerender();
+		this.queueRerender();
 		this.hideLoadingWarning();
 	}
 
@@ -307,6 +307,7 @@ export class Editor {
 		});
 	}
 
+	// Adds to history by default
 	public dispatch(command: Command, addToHistory: boolean = true) {
 		if (addToHistory) {
 			// .push applies [command] to this
@@ -318,6 +319,15 @@ export class Editor {
 		this.announceForAccessibility(command.description(this.localization));
 	}
 
+	// Dispatches a command without announcing it. By default, does not add to history.
+	public dispatchNoAnnounce(command: Command, addToHistory: boolean = false) {
+		if (addToHistory) {
+			this.history.push(command);
+		} else {
+			command.apply(this);
+		}
+	}
+
 	// Apply a large transformation in chunks.
 	// If [apply] is false, the commands are unapplied.
 	// Triggers a re-render after each [updateChunkSize]-sized group of commands
@@ -381,6 +391,11 @@ export class Editor {
 	public rerender(showImageBounds: boolean = true) {
 		this.display.startRerender();
 
+		// Don't render if the display has zero size.
+		if (this.display.width === 0 || this.display.height === 0) {
+			return;
+		}
+
 		// Draw a rectangle around the region that will be visible on save
 		const renderer = this.display.getDryInkRenderer();
 
@@ -486,7 +501,7 @@ export class Editor {
 		this.display.setDraftMode(true);
 
 		await loader.start((component) => {
-			(new EditorImage.AddElementCommand(component)).apply(this);
+			this.dispatchNoAnnounce(EditorImage.addElement(component));
 		}, (countProcessed: number, totalToProcess: number) => {
 			if (countProcessed % 500 === 0) {
 				this.showLoadingWarning(countProcessed / totalToProcess);
@@ -498,8 +513,8 @@ export class Editor {
 
 			return null;
 		}, (importExportRect: Rect2) => {
-			this.setImportExportRect(importExportRect).apply(this);
-			this.viewport.zoomTo(importExportRect).apply(this);
+			this.dispatchNoAnnounce(this.setImportExportRect(importExportRect), false);
+			this.dispatchNoAnnounce(this.viewport.zoomTo(importExportRect), false);
 		});
 		this.hideLoadingWarning();
 
@@ -517,22 +532,24 @@ export class Editor {
 		const origSize = this.importExportViewport.visibleRect.size;
 		const origTransform = this.importExportViewport.canvasToScreenTransform;
 
-		return {
-			apply(editor) {
+		return new class extends Command {
+			public apply(editor: Editor) {
 				const viewport = editor.importExportViewport;
 				viewport.updateScreenSize(imageRect.size);
 				viewport.resetTransform(Mat33.translation(imageRect.topLeft.times(-1)));
 				editor.queueRerender();
-			},
-			unapply(editor) {
+			}
+
+			public unapply(editor: Editor) {
 				const viewport = editor.importExportViewport;
 				viewport.updateScreenSize(origSize);
 				viewport.resetTransform(origTransform);
 				editor.queueRerender();
-			},
-			description(localizationTable) {
+			}
+
+			public description(localizationTable: EditorLocalization) {
 				return localizationTable.resizeOutputCommand(imageRect);
-			},
+			}
 		};
 	}
 

package/src/EditorImage.test.ts

@@ -6,8 +6,8 @@ import { Vec2 } from './geometry/Vec2';
 import Path, { PathCommandType } from './geometry/Path';
 import Color4 from './Color4';
 import DummyRenderer from './rendering/renderers/DummyRenderer';
-import { RenderingStyle } from './rendering/renderers/AbstractRenderer';
 import createEditor from './testing/createEditor';
+import RenderingStyle from './rendering/RenderingStyle';
 
 describe('EditorImage', () => {
 	const testStroke = new Stroke([
@@ -25,7 +25,7 @@ describe('EditorImage', () => {
 		},
 	]);
 	const testFill: RenderingStyle = { fill: Color4.black };
-	const addTestStrokeCommand = new EditorImage.AddElementCommand(testStroke);
+	const addTestStrokeCommand = EditorImage.addElement(testStroke);
 
 	it('elements added to the image should be findable', () => {
 		const editor = createEditor();
@@ -48,7 +48,7 @@ describe('EditorImage', () => {
 		expect(renderer.objectNestingLevel).toBe(0);
 		editor.dispatch(addTestStrokeCommand);
 		editor.rerender();
-		expect(renderer.renderedPathCount - emptyDocumentPathCount).toBe(1);
+		expect(renderer.renderedPathCount - emptyDocumentPathCount).toBeGreaterThanOrEqual(1);
 
 		// Should not be within objects after finished rendering
 		expect(renderer.objectNestingLevel).toBe(0);
@@ -69,7 +69,7 @@ describe('EditorImage', () => {
 
 		expect(!leftmostStroke.getBBox().intersects(rightmostStroke.getBBox()));
 
-		(new EditorImage.AddElementCommand(leftmostStroke)).apply(editor);
+		(EditorImage.addElement(leftmostStroke)).apply(editor);
 
 		// The first node should be at the image's root.
 		let firstParent = image.findParent(leftmostStroke);
@@ -77,7 +77,7 @@ describe('EditorImage', () => {
 		expect(firstParent?.getParent()).toBe(null);
 		expect(firstParent?.getBBox()?.corners).toMatchObject(leftmostStroke.getBBox()?.corners);
 
-		(new EditorImage.AddElementCommand(rightmostStroke)).apply(editor);
+		(EditorImage.addElement(rightmostStroke)).apply(editor);
 
 		firstParent = image.findParent(leftmostStroke);
 		const secondParent = image.findParent(rightmostStroke);

package/src/EditorImage.ts

@@ -6,6 +6,7 @@ import AbstractComponent from './components/AbstractComponent';
 import Rect2 from './geometry/Rect2';
 import { EditorLocalization } from './localization';
 import RenderingCache from './rendering/caching/RenderingCache';
+import SerializableCommand from './commands/SerializableCommand';
 
 export const sortLeavesByZIndex = (leaves: Array<ImageNode>) => {
 	leaves.sort((a, b) => a.getContent()!.getZIndex() - b.getContent()!.getZIndex());
@@ -14,13 +15,11 @@ export const sortLeavesByZIndex = (leaves: Array<ImageNode>) => {
 // Handles lookup/storage of elements in the image
 export default class EditorImage {
 	private root: ImageNode;
+	private componentsById: Record<string, AbstractComponent>;
 
 	public constructor() {
 		this.root = new ImageNode();
-	}
-
-	private addElement(elem: AbstractComponent): ImageNode {
-		return this.root.addLeaf(elem);
+		this.componentsById = {};
 	}
 
 	// Returns the parent of the given element, if it exists.
@@ -59,50 +58,76 @@ export default class EditorImage {
 		return leaves.map(leaf => leaf.getContent()!);
 	}
 
-	// A Command that can access private [EditorImage] functionality
-	public static AddElementCommand = class implements Command {
-		readonly #element: AbstractComponent;
-		#applyByFlattening: boolean = false;
+	public onDestroyElement(elem: AbstractComponent) {
+		delete this.componentsById[elem.getId()];
+	}
+
+	public lookupElement(id: string): AbstractComponent|null {
+		return this.componentsById[id] ?? null;
+	}
 
+	private addElementDirectly(elem: AbstractComponent): ImageNode {
+		this.componentsById[elem.getId()] = elem;
+		return this.root.addLeaf(elem);
+	}
+
+	public static addElement(elem: AbstractComponent, applyByFlattening: boolean = false): Command {
+		return new EditorImage.AddElementCommand(elem, applyByFlattening);
+	}
+
+	// A Command that can access private [EditorImage] functionality
+	private static AddElementCommand = class extends SerializableCommand {
 		// If [applyByFlattening], then the rendered content of this element
 		// is present on the display's wet ink canvas. As such, no re-render is necessary
 		// the first time this command is applied (the surfaces are joined instead).
 		public constructor(
-			element: AbstractComponent,
-			applyByFlattening: boolean = false
+			private element: AbstractComponent,
+			private applyByFlattening: boolean = false
 		) {
-			this.#element = element;
-			this.#applyByFlattening = applyByFlattening;
+			super('add-element');
 
-			if (isNaN(this.#element.getBBox().area)) {
+			if (isNaN(element.getBBox().area)) {
 				throw new Error('Elements in the image cannot have NaN bounding boxes');
 			}
 		}
 
 		public apply(editor: Editor) {
-			editor.image.addElement(this.#element);
+			editor.image.addElementDirectly(this.element);
 
-			if (!this.#applyByFlattening) {
+			if (!this.applyByFlattening) {
 				editor.queueRerender();
 			} else {
-				this.#applyByFlattening = false;
+				this.applyByFlattening = false;
 				editor.display.flatten();
 			}
 		}
 
 		public unapply(editor: Editor) {
-			const container = editor.image.findParent(this.#element);
+			const container = editor.image.findParent(this.element);
 			container?.remove();
 			editor.queueRerender();
 		}
 
 		public description(localization: EditorLocalization) {
-			return localization.addElementAction(this.#element.description(localization));
+			return localization.addElementAction(this.element.description(localization));
+		}
+
+		protected serializeToString() {
+			return JSON.stringify({
+				elemData: this.element.serialize(),
+			});
+		}
+
+		static {
+			SerializableCommand.register('add-element', (data: string, _editor: Editor) => {
+				const json = JSON.parse(data);
+				const elem = AbstractComponent.deserialize(json.elemData);
+				return new EditorImage.AddElementCommand(elem);
+			});
 		}
 	};
 }
 
-export type AddElementCommand = typeof EditorImage.AddElementCommand.prototype;
 type TooSmallToRenderCheck = (rect: Rect2)=> boolean;
 
 // TODO: Assign leaf nodes to CacheNodes. When leaf nodes are modified, the corresponding CacheNodes can be updated.
@@ -221,6 +246,7 @@ export class ImageNode {
 			nodeForChildren.children = this.children;
 			this.children = [nodeForNewLeaf, nodeForChildren];
 			nodeForChildren.recomputeBBox(true);
+			nodeForChildren.updateParents();
 
 			return nodeForNewLeaf.addLeaf(leaf);
 		}
@@ -279,6 +305,16 @@ export class ImageNode {
 		}
 	}
 
+	private updateParents(recursive: boolean = false) {
+		for (const child of this.children) {
+			child.parent = this;
+
+			if (recursive) {
+				child.updateParents(recursive);
+			}
+		}
+	}
+
 	private rebalance() {
 		// If the current node is its parent's only child,
 		if (this.parent && this.parent.children.length === 1) {
@@ -296,6 +332,7 @@ export class ImageNode {
 			} else if (this.content === null) {
 				// Remove this and transfer this' children to the parent.
 				this.parent.children = this.children;
+				this.parent.updateParents();
 				this.parent = null;
 			}
 		}
@@ -314,7 +351,11 @@ export class ImageNode {
 		this.parent.children = this.parent.children.filter(node => {
 			return node !== this;
 		});
-		console.assert(this.parent.children.length === oldChildCount - 1);
+
+		console.assert(
+			this.parent.children.length === oldChildCount - 1,
+			`${oldChildCount - 1} ≠ ${this.parent.children.length} after removing all nodes equal to ${this}. Nodes should only be removed once.`
+		);
 
 		this.parent.children.forEach(child => {
 			child.rebalance();

package/src/SVGLoader.ts

@@ -8,7 +8,8 @@ import Mat33 from './geometry/Mat33';
 import Path from './geometry/Path';
 import Rect2 from './geometry/Rect2';
 import { Vec2 } from './geometry/Vec2';
-import { RenderablePathSpec, RenderingStyle } from './rendering/renderers/AbstractRenderer';
+import { RenderablePathSpec } from './rendering/renderers/AbstractRenderer';
+import RenderingStyle from './rendering/RenderingStyle';
 import { ComponentAddedListener, ImageLoader, OnDetermineExportRectListener, OnProgressListener } from './types';
 
 type OnFinishListener = ()=> void;

package/src/Viewport.ts

@@ -13,10 +13,11 @@ type PointDataType<T extends Point2|StrokeDataPoint|number> = T extends Point2 ?
 
 export class Viewport {
 	// Command that translates/scales the viewport.
-	public static ViewportTransform = class implements Command {
+	public static ViewportTransform = class extends Command {
 		readonly #inverseTransform: Mat33;
 
 		public constructor(public readonly transform: Mat33) {
+			super();
 			this.#inverseTransform = transform.inverse();
 		}
 

package/src/commands/Command.ts

@@ -1,32 +1,28 @@
 import Editor from '../Editor';
 import { EditorLocalization } from '../localization';
 
-interface Command {
-	apply(editor: Editor): void;
-	unapply(editor: Editor): void;
+export abstract class Command {
+	public abstract apply(editor: Editor): void;
+	public abstract unapply(editor: Editor): void;
 
-	description(localizationTable: EditorLocalization): string;
-}
+	// Called when the command is being deleted
+	public onDrop(_editor: Editor) { }
 
-// eslint-disable-next-line no-redeclare
-namespace Command {
-	export const empty = {
-		apply(_editor: Editor) { },
-		unapply(_editor: Editor) { },
-	};
+	public abstract description(localizationTable: EditorLocalization): string;
 
-	export const union = (a: Command, b: Command): Command => {
-		return {
-			apply(editor: Editor) {
+	public static union(a: Command, b: Command): Command {
+		return new class extends Command {
+			public apply(editor: Editor) {
 				a.apply(editor);
 				b.apply(editor);
-			},
-			unapply(editor: Editor) {
+			}
+
+			public unapply(editor: Editor) {
 				b.unapply(editor);
 				a.unapply(editor);
-			},
+			}
 
-			description(localizationTable: EditorLocalization) {
+			public description(localizationTable: EditorLocalization) {
 				const aDescription = a.description(localizationTable);
 				const bDescription = b.description(localizationTable);
 
@@ -35,8 +31,14 @@ namespace Command {
 				}
 
 				return `${aDescription}, ${bDescription}`;
-			},
+			}
 		};
+	}
+
+	public static readonly empty = new class extends Command {
+		public description(_localizationTable: EditorLocalization) { return ''; }
+		public apply(_editor: Editor) { }
+		public unapply(_editor: Editor) { }
 	};
 }
 

package/src/commands/Duplicate.ts

@@ -0,0 +1,49 @@
+import AbstractComponent from '../components/AbstractComponent';
+import describeComponentList from '../components/util/describeComponentList';
+import Editor from '../Editor';
+import { EditorLocalization } from '../localization';
+import Erase from './Erase';
+import SerializableCommand from './SerializableCommand';
+
+export default class Duplicate extends SerializableCommand {
+	private duplicates: AbstractComponent[];
+	private reverse: Erase;
+
+	public constructor(private toDuplicate: AbstractComponent[]) {
+		super('duplicate');
+
+		this.duplicates = toDuplicate.map(elem => elem.clone());
+		this.reverse = new Erase(this.duplicates);
+	}
+
+	public apply(editor: Editor): void {
+		this.reverse.unapply(editor);
+	}
+
+	public unapply(editor: Editor): void {
+		this.reverse.apply(editor);
+	}
+
+	public description(localizationTable: EditorLocalization): string {
+		if (this.duplicates.length === 0) {
+			return localizationTable.duplicatedNoElements;
+		}
+
+		return localizationTable.duplicateAction(
+			describeComponentList(localizationTable, this.duplicates) ?? localizationTable.elements,
+			this.duplicates.length
+		);
+	}
+
+	protected serializeToString(): string {
+		return JSON.stringify(this.toDuplicate.map(elem => elem.getId()));
+	}
+
+	static {
+		SerializableCommand.register('duplicate', (data: string, editor: Editor) => {
+			const json = JSON.parse(data);
+			const elems = json.map((id: string) => editor.image.lookupElement(id));
+			return new Duplicate(elems);
+		});
+	}
+}

package/src/commands/Erase.ts

@@ -1,18 +1,23 @@
 import AbstractComponent from '../components/AbstractComponent';
+import describeComponentList from '../components/util/describeComponentList';
 import Editor from '../Editor';
 import EditorImage from '../EditorImage';
 import { EditorLocalization } from '../localization';
-import Command from './Command';
+import SerializableCommand from './SerializableCommand';
 
-export default class Erase implements Command {
+export default class Erase extends SerializableCommand {
 	private toRemove: AbstractComponent[];
+	private applied: boolean;
 
 	public constructor(toRemove: AbstractComponent[]) {
+		super('erase');
+
 		// Clone the list
 		this.toRemove = toRemove.map(elem => elem);
+		this.applied = false;
 	}
 
-	public apply(editor: Editor): void {
+	public apply(editor: Editor) {
 		for (const part of this.toRemove) {
 			const parent = editor.image.findParent(part);
 
@@ -21,32 +26,48 @@ export default class Erase implements Command {
 			}
 		}
 
+		this.applied = true;
 		editor.queueRerender();
 	}
 
-	public unapply(editor: Editor): void {
+	public unapply(editor: Editor) {
 		for (const part of this.toRemove) {
 			if (!editor.image.findParent(part)) {
-				new EditorImage.AddElementCommand(part).apply(editor);
+				EditorImage.addElement(part).apply(editor);
 			}
 		}
 
+		this.applied = false;
 		editor.queueRerender();
 	}
 
+	public onDrop(editor: Editor) {
+		if (this.applied) {
+			for (const part of this.toRemove) {
+				editor.image.onDestroyElement(part);
+			}
+		}
+	}
+
 	public description(localizationTable: EditorLocalization): string {
 		if (this.toRemove.length === 0) {
 			return localizationTable.erasedNoElements;
 		}
 
-		let description = this.toRemove[0].description(localizationTable);
-		for (const elem of this.toRemove) {
-			if (elem.description(localizationTable) !== description) {
-				description = localizationTable.elements;
-				break;
-			}
-		}
-
+		const description = describeComponentList(localizationTable, this.toRemove) ?? localizationTable.elements;
 		return localizationTable.eraseAction(description, this.toRemove.length);
 	}
+
+	protected serializeToString() {
+		const elemIds = this.toRemove.map(elem => elem.getId());
+		return JSON.stringify(elemIds);
+	}
+
+	static {
+		SerializableCommand.register('erase', (data: string, editor: Editor) => {
+			const json = JSON.parse(data);
+			const elems = json.map((elemId: string) => editor.image.lookupElement(elemId));
+			return new Erase(elems);
+		});
+	}
 }