js-draw 0.13.1 → 0.15.0

package/dist/src/tools/SelectionTool/Selection.js

@@ -77,6 +77,17 @@ export default class Selection {
         const scaleAndTranslateMat = this.transform.rightMul(rotationMatrix.inverse());
         return this.originalRegion.transformedBoundingBox(scaleAndTranslateMat);
     }
+    /**
+     * Computes and returns the bounding box of the selection without
+     * any additional padding. Computes directly from the elements that are selected.
+     * @internal
+     */
+    computeTightBoundingBox() {
+        const bbox = this.selectedElems.reduce((accumulator, elem) => {
+            return (accumulator !== null && accumulator !== void 0 ? accumulator : elem.getBBox()).union(elem.getBBox());
+        }, null);
+        return bbox !== null && bbox !== void 0 ? bbox : Rect2.empty;
+    }
     get regionRotation() {
         return this.transform.transformVec3(Vec2.unitX).angle();
     }
@@ -161,9 +172,7 @@ export default class Selection {
     // Recompute this' region from the selected elements.
     // Returns false if the selection is empty.
     recomputeRegion() {
-        const newRegion = this.selectedElems.reduce((accumulator, elem) => {
-            return (accumulator !== null && accumulator !== void 0 ? accumulator : elem.getBBox()).union(elem.getBBox());
-        }, null);
+        const newRegion = this.computeTightBoundingBox();
         if (!newRegion) {
             this.cancelSelection();
             return false;
@@ -431,7 +440,7 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand {
             this.resolveToElems(editor);
             (_b = this.selection) === null || _b === void 0 ? void 0 : _b.setTransform(this.fullTransform.inverse(), false);
             (_c = this.selection) === null || _c === void 0 ? void 0 : _c.updateUI();
-            yield editor.asyncUnapplyCommands(this.transformCommands, updateChunkSize);
+            yield editor.asyncUnapplyCommands(this.transformCommands, updateChunkSize, true);
             (_d = this.selection) === null || _d === void 0 ? void 0 : _d.setTransform(Mat33.identity);
             (_e = this.selection) === null || _e === void 0 ? void 0 : _e.recomputeRegion();
             (_f = this.selection) === null || _f === void 0 ? void 0 : _f.updateUI();

package/dist/src/tools/SelectionTool/SelectionTool.js

@@ -47,10 +47,12 @@ export default class SelectionTool extends BaseTool {
     snapSelectionToGrid() {
         if (!this.selectionBox)
             throw new Error('No selection to snap!');
-        const topLeftOfBBox = this.selectionBox.region.topLeft;
-        const snapDistance = this.editor.viewport.snapToGrid(topLeftOfBBox).minus(topLeftOfBBox);
+        // Snap the top left corner of what we have selected.
+        const topLeftOfBBox = this.selectionBox.computeTightBoundingBox().topLeft;
+        const snappedTopLeft = this.editor.viewport.snapToGrid(topLeftOfBBox);
+        const snapDelta = snappedTopLeft.minus(topLeftOfBBox);
         const oldTransform = this.selectionBox.getTransform();
-        this.selectionBox.setTransform(oldTransform.rightMul(Mat33.translation(snapDistance)));
+        this.selectionBox.setTransform(oldTransform.rightMul(Mat33.translation(snapDelta)));
         this.selectionBox.finalizeTransform();
     }
     onPointerDown({ allPointers, current }) {
@@ -169,7 +171,7 @@ export default class SelectionTool extends BaseTool {
         this.expandingSelectionBox = false;
     }
     onKeyPress(event) {
-        if (event.key === 'Control') {
+        if (event.key === 'Control' || event.key === 'Meta') {
             this.ctrlKeyPressed = true;
             return true;
         }
@@ -179,8 +181,7 @@ export default class SelectionTool extends BaseTool {
             return true;
         }
         else if (event.key === 'a' && event.ctrlKey) {
-            // Handle ctrl+A on key up.
-            // Return early to prevent 'a' from moving the selection/view.
+            this.setSelection(this.editor.image.getAllElements());
             return true;
         }
         else if (event.ctrlKey) {
@@ -266,7 +267,7 @@ export default class SelectionTool extends BaseTool {
         return handled;
     }
     onKeyUp(evt) {
-        if (evt.key === 'Control') {
+        if (evt.key === 'Control' || evt.key === 'Meta') {
             this.ctrlKeyPressed = false;
             return true;
         }
@@ -281,10 +282,6 @@ export default class SelectionTool extends BaseTool {
                 });
                 return true;
             }
-            else if (evt.key === 'a') {
-                this.setSelection(this.editor.image.getAllElements());
-                return true;
-            }
         }
         if (this.selectionBox && SelectionTool.handleableKeys.some(key => key === evt.key)) {
             this.selectionBox.finalizeTransform();
@@ -392,5 +389,5 @@ SelectionTool.handleableKeys = [
     'e', 'j', 'ArrowDown',
     'r', 'R',
     'i', 'I', 'o', 'O',
-    'Control',
+    'Control', 'Meta',
 ];

package/dist/src/tools/SelectionTool/TransformMode.js

@@ -51,7 +51,7 @@ export class ResizeTransformer {
         // Round: If this isn't done, scaling can create numbers with long decimal representations.
         //    long decimal representations => large file sizes.
         scale = scale.map(component => Viewport.roundScaleRatio(component, 2));
-        if (scale.x > 0 && scale.y > 0) {
+        if (scale.x !== 0 && scale.y !== 0) {
             const origin = this.editor.viewport.roundPoint(this.selection.preTransformRegion.topLeft);
             this.selection.setTransform(Mat33.scaling2D(scale, origin));
         }

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

@@ -1,9 +1,9 @@
 import Color4 from '../Color4';
-import { TextStyle } from '../components/TextComponent';
 import Editor from '../Editor';
 import { PointerEvt } from '../types';
 import BaseTool from './BaseTool';
 import { ToolLocalization } from './localization';
+import TextStyle from '../rendering/TextRenderingStyle';
 export default class TextTool extends BaseTool {
     private editor;
     private localizationTable;

package/dist/src/tools/ToolController.js

@@ -13,6 +13,7 @@ import PasteHandler from './PasteHandler';
 import ToolbarShortcutHandler from './ToolbarShortcutHandler';
 import { makePressureSensitiveFreehandLineBuilder } from '../components/builders/PressureSensitiveFreehandLineBuilder';
 import FindTool from './FindTool';
+import SelectAllShortcutHandler from './SelectionTool/SelectAllShortcutHandler';
 export default class ToolController {
     /** @internal */
     constructor(editor, localization) {
@@ -43,6 +44,7 @@ export default class ToolController {
             new ToolSwitcherShortcut(editor),
             new FindTool(editor),
             new PasteHandler(editor),
+            new SelectAllShortcutHandler(editor),
         ];
         primaryTools.forEach(tool => tool.setToolGroup(primaryToolGroup));
         panZoomTool.setEnabled(true);

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

@@ -10,6 +10,7 @@ export { default as PanZoomTool, PanZoomMode } from './PanZoom';
 export { default as PenTool, PenStyle } from './Pen';
 export { default as TextTool } from './TextTool';
 export { default as SelectionTool } from './SelectionTool/SelectionTool';
+export { default as SelectAllShortcutHandler } from './SelectionTool/SelectAllShortcutHandler';
 export { default as EraserTool } from './Eraser';
 export { default as PasteHandler } from './PasteHandler';
 export { default as ToolbarShortcutHandler } from './ToolbarShortcutHandler';

package/dist/src/tools/lib.js

@@ -10,6 +10,7 @@ export { default as PanZoomTool, PanZoomMode } from './PanZoom';
 export { default as PenTool } from './Pen';
 export { default as TextTool } from './TextTool';
 export { default as SelectionTool } from './SelectionTool/SelectionTool';
+export { default as SelectAllShortcutHandler } from './SelectionTool/SelectAllShortcutHandler';
 export { default as EraserTool } from './Eraser';
 export { default as PasteHandler } from './PasteHandler';
 export { default as ToolbarShortcutHandler } from './ToolbarShortcutHandler';

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

@@ -2,6 +2,7 @@ export interface ToolLocalization {
     keyboardPanZoom: string;
     penTool: (penId: number) => string;
     selectionTool: string;
+    selectAllTool: string;
     eraserTool: string;
     touchPanTool: string;
     twoFingerPanZoomTool: string;

package/dist/src/tools/localization.js

@@ -1,6 +1,7 @@
 export const defaultToolLocalization = {
     penTool: (penId) => `Pen ${penId}`,
     selectionTool: 'Selection',
+    selectAllTool: 'Select all shortcut',
     eraserTool: 'Eraser',
     touchPanTool: 'Touch panning',
     twoFingerPanZoomTool: 'Panning and zooming',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.13.1",
+	"version": "0.15.0",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"main": "./dist/src/lib.d.ts",
 	"types": "./dist/src/lib.js",

package/src/Color4.test.ts

@@ -27,4 +27,8 @@ describe('Color4', () => {
 			Color4.ofRGB(0.7, 0.3, 0)
 		);
 	});
+
+	it('should mix red with nothing and get red', () => {
+		expect(Color4.average([ Color4.red ])).objEq(Color4.red);
+	});
 });

package/src/Color4.ts

@@ -151,6 +151,32 @@ export default class Color4 {
 		);
 	}
 
+	/**
+	 * @returns the component-wise average of `colors`, or `Color4.transparent` if `colors` is empty.
+	 */
+	public static average(colors: Color4[]) {
+		let averageA = 0;
+		let averageR = 0;
+		let averageG = 0;
+		let averageB = 0;
+
+		for (const color of colors) {
+			averageA += color.a;
+			averageR += color.r;
+			averageG += color.g;
+			averageB += color.b;
+		}
+
+		if (colors.length > 0) {
+			averageA /= colors.length;
+			averageR /= colors.length;
+			averageG /= colors.length;
+			averageB /= colors.length;
+		}
+
+		return new Color4(averageR, averageG, averageB, averageA);
+	}
+
 	private hexString: string|null = null;
 
 	/**

package/src/Editor.toSVG.test.ts

@@ -1,5 +1,5 @@
-import { TextStyle } from './components/TextComponent';
 import { Color4, Mat33, Rect2, TextComponent, EditorImage, Vec2 } from './lib';
+import TextStyle from './rendering/TextRenderingStyle';
 import SVGLoader from './SVGLoader';
 import createEditor from './testing/createEditor';
 

package/src/Editor.ts

@@ -315,7 +315,7 @@ export class Editor {
 
 			// Process wheel events if the ctrl key is down, even if disabled -- we do want to handle
 			// pinch-zooming.
-			if (!evt.ctrlKey) {
+			if (!evt.ctrlKey && !evt.metaKey) {
 				if (!this.settings.wheelEventsEnabled) {
 					return;
 				} else if (this.settings.wheelEventsEnabled === 'only-if-focused') {
@@ -333,7 +333,7 @@ export class Editor {
 				delta = delta.times(100);
 			}
 
-			if (evt.ctrlKey) {
+			if (evt.ctrlKey || evt.metaKey) {
 				delta = Vec3.of(0, 0, evt.deltaY);
 			}
 
@@ -598,7 +598,7 @@ export class Editor {
 			} else if (this.toolController.dispatchInputEvent({
 				kind: InputEvtType.KeyPressEvent,
 				key: evt.key,
-				ctrlKey: evt.ctrlKey,
+				ctrlKey: evt.ctrlKey || evt.metaKey,
 				altKey: evt.altKey,
 			})) {
 				evt.preventDefault();
@@ -611,7 +611,7 @@ export class Editor {
 			if (this.toolController.dispatchInputEvent({
 				kind: InputEvtType.KeyUpEvent,
 				key: evt.key,
-				ctrlKey: evt.ctrlKey,
+				ctrlKey: evt.ctrlKey || evt.metaKey,
 				altKey: evt.altKey,
 			})) {
 				evt.preventDefault();
@@ -704,8 +704,14 @@ export class Editor {
 		return this.asyncApplyOrUnapplyCommands(commands, true, chunkSize);
 	}
 
+	// If `unapplyInReverseOrder`, commands are reversed before unapplying.
 	// @see {@link #asyncApplyOrUnapplyCommands }
-	public asyncUnapplyCommands(commands: Command[], chunkSize: number) {
+	public asyncUnapplyCommands(commands: Command[], chunkSize: number, unapplyInReverseOrder: boolean = false) {
+		if (unapplyInReverseOrder) {
+			commands = [ ...commands ]; // copy
+			commands.reverse();
+		}
+
 		return this.asyncApplyOrUnapplyCommands(commands, false, chunkSize);
 	}
 
@@ -745,6 +751,11 @@ export class Editor {
 		});
 	}
 
+	// @internal
+	public isRerenderQueued() {
+		return this.rerenderQueued;
+	}
+
 	public rerender(showImageBounds: boolean = true) {
 		this.display.startRerender();
 

package/src/EditorImage.ts

@@ -34,6 +34,19 @@ export default class EditorImage {
 		return null;
 	}
 
+	// Forces a re-render of `elem` when the image is next re-rendered as a whole.
+	// Does nothing if `elem` is not in this.
+	public queueRerenderOf(elem: AbstractComponent) {
+		// TODO: Make more efficient (e.g. increase IDs of all parents,
+		// make cache take into account last modified time instead of IDs, etc.)
+		const parent = this.findParent(elem);
+
+		if (parent) {
+			parent.remove();
+			this.addElementDirectly(elem);
+		}
+	}
+
 	/** @internal */
 	public renderWithCache(screenRenderer: AbstractRenderer, cache: RenderingCache, viewport: Viewport) {
 		cache.render(screenRenderer, this.root, viewport);

package/src/SVGLoader.ts

@@ -3,7 +3,7 @@ import AbstractComponent from './components/AbstractComponent';
 import ImageComponent from './components/ImageComponent';
 import Stroke from './components/Stroke';
 import SVGGlobalAttributesObject from './components/SVGGlobalAttributesObject';
-import TextComponent, { TextStyle } from './components/TextComponent';
+import TextComponent from './components/TextComponent';
 import UnknownSVGObject from './components/UnknownSVGObject';
 import Mat33 from './math/Mat33';
 import Path from './math/Path';
@@ -11,6 +11,7 @@ import Rect2 from './math/Rect2';
 import { Vec2 } from './math/Vec2';
 import { RenderablePathSpec } from './rendering/renderers/AbstractRenderer';
 import RenderingStyle from './rendering/RenderingStyle';
+import TextStyle from './rendering/TextRenderingStyle';
 import { ComponentAddedListener, ImageLoader, OnDetermineExportRectListener, OnProgressListener } from './types';
 
 type OnFinishListener = ()=> void;
@@ -244,7 +245,14 @@ export default class SVGLoader implements ImageLoader {
 
 		// Compute styles.
 		const computedStyles = window.getComputedStyle(elem);
-		const fontSizeMatch = /^([-0-9.e]+)px/i.exec(computedStyles.fontSize);
+		const fontSizeExp = /^([-0-9.e]+)px/i;
+
+		// In some environments, computedStyles.fontSize can be increased by the system.
+		// Thus, to prevent text from growing on load/save, prefer .style.fontSize.
+		let fontSizeMatch = fontSizeExp.exec(elem.style.fontSize);
+		if (!fontSizeMatch) {
+			fontSizeMatch = fontSizeExp.exec(computedStyles.fontSize);
+		}
 
 		const supportedStyleAttrs = [
 			'fontFamily',
@@ -455,7 +463,7 @@ export default class SVGLoader implements ImageLoader {
 					<meta name='viewport' conent='width=device-width,initial-scale=1.0'/>
 					<meta charset='utf-8'/>
 				</head>
-				<body>
+				<body style='font-size: 12px;'>
 					<script>
 						console.error('JavaScript should not be able to run here!');
 						throw new Error(

package/src/Viewport.ts

@@ -157,14 +157,18 @@ export class Viewport {
 	 * should return `100` because `100` is the nearest power of 10 to 101.
 	 */
 	public getScaleFactorToNearestPowerOfTen() {
+		return this.getScaleFactorToNearestPowerOf(10);
+	}
+
+	private getScaleFactorToNearestPowerOf(powerOf: number) {
 		const scaleFactor = this.getScaleFactor();
-		return Math.pow(10, Math.round(Math.log10(scaleFactor)));
+		return Math.pow(powerOf, Math.round(Math.log(scaleFactor) / Math.log(powerOf)));
 	}
 
 	public snapToGrid(canvasPos: Point2) {
 		const snapCoordinate = (coordinate: number) => {
-			const scaleFactor = this.getScaleFactorToNearestPowerOfTen();
-			const roundFactor = scaleFactor / 100;
+			const scaleFactor = this.getScaleFactorToNearestPowerOf(2);
+			const roundFactor = scaleFactor / 50;
 			const snapped = Math.round(coordinate * roundFactor) / roundFactor;
 
 			return snapped;

package/src/commands/UnresolvedCommand.ts

@@ -0,0 +1,37 @@
+import EditorImage from '../EditorImage';
+import AbstractComponent from '../components/AbstractComponent';
+import SerializableCommand from './SerializableCommand';
+
+export type ResolveFromComponentCallback = () => SerializableCommand;
+
+/**
+ * A command that requires a component that may or may not be present in the editor when
+ * the command is created.
+ */
+export default abstract class UnresolvedSerializableCommand extends SerializableCommand {
+	protected component: AbstractComponent|null;
+	protected readonly componentID: string;
+
+	protected constructor(
+		commandId: string,
+		componentID: string,
+		component?: AbstractComponent
+	) {
+		super(commandId);
+		this.component = component ?? null;
+		this.componentID = componentID;
+	}
+
+	protected resolveComponent(image: EditorImage) {
+		if (this.component) {
+			return;
+		}
+
+		const component = image.lookupElement(this.componentID);
+		if (!component) {
+			throw new Error(`Unable to resolve component with ID ${this.componentID}`);
+		}
+
+		this.component = component;
+	}
+}

package/src/commands/uniteCommands.ts

@@ -32,11 +32,14 @@ class NonSerializableUnion extends Command {
 	}
 
 	public unapply(editor: Editor) {
+		const commands = [ ...this.commands ];
+		commands.reverse();
+
 		if (this.applyChunkSize === undefined) {
-			const results = this.commands.map(cmd => cmd.unapply(editor));
+			const results = commands.map(cmd => cmd.unapply(editor));
 			return NonSerializableUnion.waitForAll(results);
 		} else {
-			return editor.asyncUnapplyCommands(this.commands, this.applyChunkSize);
+			return editor.asyncUnapplyCommands(commands, this.applyChunkSize, false);
 		}
 	}
 

package/src/components/AbstractComponent.ts

@@ -7,6 +7,7 @@ import Rect2 from '../math/Rect2';
 import { EditorLocalization } from '../localization';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import { ImageComponentLocalization } from './localization';
+import UnresolvedSerializableCommand from '../commands/UnresolvedCommand';
 
 export type LoadSaveData = (string[]|Record<symbol, string|number>);
 export type LoadSaveDataTable = Record<string, Array<LoadSaveData>>;
@@ -132,12 +133,12 @@ export default abstract class AbstractComponent {
 	// Returns a command that, when applied, transforms this by [affineTransfm] and
 	// updates the editor.
 	public transformBy(affineTransfm: Mat33): SerializableCommand {
-		return new AbstractComponent.TransformElementCommand(affineTransfm, this);
+		return new AbstractComponent.TransformElementCommand(affineTransfm, this.getId(), this);
 	}
 
 	// Returns a command that updates this component's z-index.
 	public setZIndex(newZIndex: number): SerializableCommand {
-		return new AbstractComponent.TransformElementCommand(Mat33.identity, this, newZIndex);
+		return new AbstractComponent.TransformElementCommand(Mat33.identity, this.getId(), this, newZIndex);
 	}
 
 	// @returns true iff this component can be selected (e.g. by the selection tool.)
@@ -154,69 +155,42 @@ export default abstract class AbstractComponent {
 
 	private static transformElementCommandId = 'transform-element';
 
-	private static UnresolvedTransformElementCommand = class extends SerializableCommand {
-		private command: SerializableCommand|null = null;
+	private static TransformElementCommand = class extends UnresolvedSerializableCommand {
+		private origZIndex: number|null = null;
+		private targetZIndex: number;
 
+		// Construct a new TransformElementCommand. `component`, while optional, should
+		// be provided if available. If not provided, it will be fetched from the editor's
+		// document when the command is applied.
 		public constructor(
 			private affineTransfm: Mat33,
-			private componentID: string,
-			private targetZIndex?: number,
+			componentID: string,
+			component?: AbstractComponent,
+			targetZIndex?: number,
 		) {
-			super(AbstractComponent.transformElementCommandId);
-		}
-
-		private resolveCommand(editor: Editor) {
-			if (this.command) {
-				return;
-			}
+			super(AbstractComponent.transformElementCommandId, componentID, component);
+			this.targetZIndex = targetZIndex ?? AbstractComponent.zIndexCounter++;
 
-			const component = editor.image.lookupElement(this.componentID);
-			if (!component) {
-				throw new Error(`Unable to resolve component with ID ${this.componentID}`);
+			// Ensure that we keep drawing on top even after changing the z-index.
+			if (this.targetZIndex >= AbstractComponent.zIndexCounter) {
+				AbstractComponent.zIndexCounter = this.targetZIndex + 1;
 			}
-			this.command = new AbstractComponent.TransformElementCommand(
-				this.affineTransfm, component, this.targetZIndex
-			);
-		}
-
-		public apply(editor: Editor) {
-			this.resolveCommand(editor);
-			this.command!.apply(editor);
-		}
-
-		public unapply(editor: Editor) {
-			this.resolveCommand(editor);
-			this.command!.unapply(editor);
-		}
-
-		public description(_editor: Editor, localizationTable: EditorLocalization) {
-			return localizationTable.transformedElements(1);
-		}
-
-		protected serializeToJSON() {
-			return {
-				id: this.componentID,
-				transfm: this.affineTransfm.toArray(),
-				targetZIndex: this.targetZIndex,
-			};
 		}
-	};
 
-	private static TransformElementCommand = class extends SerializableCommand {
-		private origZIndex: number;
-		private targetZIndex: number;
+		protected resolveComponent(image: EditorImage): void {
+			if (this.component) {
+				return;
+			}
 
-		public constructor(
-			private affineTransfm: Mat33,
-			private component: AbstractComponent,
-			targetZIndex?: number,
-		) {
-			super(AbstractComponent.transformElementCommandId);
-			this.origZIndex = component.zIndex;
-			this.targetZIndex = targetZIndex ?? AbstractComponent.zIndexCounter++;
+			super.resolveComponent(image);
+			this.origZIndex = this.component!.getZIndex();
 		}
 
 		private updateTransform(editor: Editor, newTransfm: Mat33) {
+			if (!this.component) {
+				throw new Error('this.component is undefined or null!');
+			}
+
 			// Any parent should have only one direct child.
 			const parent = editor.image.findParent(this.component);
 			let hadParent = false;
@@ -235,13 +209,17 @@ export default abstract class AbstractComponent {
 		}
 
 		public apply(editor: Editor) {
-			this.component.zIndex = this.targetZIndex;
+			this.resolveComponent(editor.image);
+
+			this.component!.zIndex = this.targetZIndex;
 			this.updateTransform(editor, this.affineTransfm);
 			editor.queueRerender();
 		}
 
 		public unapply(editor: Editor) {
-			this.component.zIndex = this.origZIndex;
+			this.resolveComponent(editor.image);
+
+			this.component!.zIndex = this.origZIndex!;
 			this.updateTransform(editor, this.affineTransfm.inverse());
 			editor.queueRerender();
 		}
@@ -252,16 +230,13 @@ export default abstract class AbstractComponent {
 
 		static {
 			SerializableCommand.register(AbstractComponent.transformElementCommandId, (json: any, editor: Editor) => {
-				const elem = editor.image.lookupElement(json.id);
+				const elem = editor.image.lookupElement(json.id) ?? undefined;
 				const transform = new Mat33(...(json.transfm as Mat33Array));
 				const targetZIndex = json.targetZIndex;
 
-				if (!elem) {
-					return new AbstractComponent.UnresolvedTransformElementCommand(transform, json.id, targetZIndex);
-				}
-
 				return new AbstractComponent.TransformElementCommand(
 					transform,
+					json.id,
 					elem,
 					targetZIndex,
 				);
@@ -270,7 +245,7 @@ export default abstract class AbstractComponent {
 
 		protected serializeToJSON() {
 			return {
-				id: this.component.getId(),
+				id: this.componentID,
 				transfm: this.affineTransfm.toArray(),
 				targetZIndex: this.targetZIndex,
 			};