js-draw 0.17.1 → 0.17.2

package/dist/src/EditorImage.d.ts

@@ -5,7 +5,6 @@ import Rect2 from './math/Rect2';
 import RenderingCache from './rendering/caching/RenderingCache';
 import SerializableCommand from './commands/SerializableCommand';
 import EventDispatcher from './EventDispatcher';
-import Command from './commands/Command';
 export declare const sortLeavesByZIndex: (leaves: Array<ImageNode>) => void;
 export declare enum EditorImageEventType {
     ExportViewportChanged = 0
@@ -21,11 +20,6 @@ export default class EditorImage {
     private importExportViewport;
     readonly notifier: EditorImageNotifier;
     constructor();
-    /**
-     * @returns a `Viewport` for rendering the image when importing/exporting.
-     */
-    getImportExportViewport(): Viewport;
-    setImportExportRect(imageRect: Rect2): Command;
     getBackgroundComponents(): AbstractComponent[];
     findParent(elem: AbstractComponent): ImageNode | null;
     queueRerenderOf(elem: AbstractComponent): void;
@@ -63,6 +57,12 @@ export default class EditorImage {
     /** @see EditorImage.addElement */
     addElement(elem: AbstractComponent, applyByFlattening?: boolean): SerializableCommand;
     private static AddElementCommand;
+    /**
+     * @returns a `Viewport` for rendering the image when importing/exporting.
+     */
+    getImportExportViewport(): Viewport;
+    setImportExportRect(imageRect: Rect2): SerializableCommand;
+    private static SetImportExportRectCommand;
 }
 type TooSmallToRenderCheck = (rect: Rect2) => boolean;
 /** Part of the Editor's image. @internal */

package/dist/src/EditorImage.js

@@ -1,12 +1,12 @@
-var _a;
+var _a, _b, _c;
 import Viewport from './Viewport';
 import AbstractComponent from './components/AbstractComponent';
 import Rect2 from './math/Rect2';
 import SerializableCommand from './commands/SerializableCommand';
 import EventDispatcher from './EventDispatcher';
 import { Vec2 } from './math/Vec2';
-import Command from './commands/Command';
 import Mat33 from './math/Mat33';
+import { assertIsNumber, assertIsNumberArray } from './util/assertions';
 // @internal Sort by z-index, low to high
 export const sortLeavesByZIndex = (leaves) => {
     leaves.sort((a, b) => a.getContent().getZIndex() - b.getContent().getZIndex());
@@ -31,34 +31,6 @@ export default class EditorImage {
         // Default to a 500x500 image
         this.importExportViewport.updateScreenSize(Vec2.of(500, 500));
     }
-    /**
-     * @returns a `Viewport` for rendering the image when importing/exporting.
-     */
-    getImportExportViewport() {
-        return this.importExportViewport;
-    }
-    setImportExportRect(imageRect) {
-        const importExportViewport = this.getImportExportViewport();
-        const origSize = importExportViewport.visibleRect.size;
-        const origTransform = importExportViewport.canvasToScreenTransform;
-        return new class extends Command {
-            apply(editor) {
-                const viewport = editor.image.getImportExportViewport();
-                viewport.updateScreenSize(imageRect.size);
-                viewport.resetTransform(Mat33.translation(imageRect.topLeft.times(-1)));
-                editor.queueRerender();
-            }
-            unapply(editor) {
-                const viewport = editor.image.getImportExportViewport();
-                viewport.updateScreenSize(origSize);
-                viewport.resetTransform(origTransform);
-                editor.queueRerender();
-            }
-            description(_editor, localizationTable) {
-                return localizationTable.resizeOutputCommand(imageRect);
-            }
-        };
-    }
     // Returns all components that make up the background of this image. These
     // components are rendered below all other components.
     getBackgroundComponents() {
@@ -75,8 +47,8 @@ export default class EditorImage {
     }
     // Returns the parent of the given element, if it exists.
     findParent(elem) {
-        var _a;
-        return (_a = this.background.getChildWithContent(elem)) !== null && _a !== void 0 ? _a : this.root.getChildWithContent(elem);
+        var _b;
+        return (_b = this.background.getChildWithContent(elem)) !== null && _b !== void 0 ? _b : this.root.getChildWithContent(elem);
     }
     // Forces a re-render of `elem` when the image is next re-rendered as a whole.
     // Does nothing if `elem` is not in this.
@@ -128,8 +100,8 @@ export default class EditorImage {
      * @see {@link AbstractComponent.getId}
      */
     lookupElement(id) {
-        var _a;
-        return (_a = this.componentsById[id]) !== null && _a !== void 0 ? _a : null;
+        var _b;
+        return (_b = this.componentsById[id]) !== null && _b !== void 0 ? _b : null;
     }
     addElementDirectly(elem) {
         elem.onAddToImage(this);
@@ -162,9 +134,22 @@ export default class EditorImage {
     addElement(elem, applyByFlattening) {
         return EditorImage.addElement(elem, applyByFlattening);
     }
+    /**
+     * @returns a `Viewport` for rendering the image when importing/exporting.
+     */
+    getImportExportViewport() {
+        return this.importExportViewport;
+    }
+    setImportExportRect(imageRect) {
+        const importExportViewport = this.getImportExportViewport();
+        const origSize = importExportViewport.visibleRect.size;
+        const origTransform = importExportViewport.canvasToScreenTransform;
+        return new EditorImage.SetImportExportRectCommand(origSize, origTransform, imageRect);
+    }
 }
+_a = EditorImage;
 // A Command that can access private [EditorImage] functionality
-EditorImage.AddElementCommand = (_a = class extends SerializableCommand {
+EditorImage.AddElementCommand = (_b = 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).
@@ -201,9 +186,9 @@ EditorImage.AddElementCommand = (_a = class extends SerializableCommand {
             return localization.addElementAction(this.element.description(localization));
         }
         serializeToJSON() {
-            var _a;
+            var _b;
             return {
-                elemData: (_a = this.serializedElem) !== null && _a !== void 0 ? _a : this.element.serialize(),
+                elemData: (_b = this.serializedElem) !== null && _b !== void 0 ? _b : this.element.serialize(),
             };
         }
     },
@@ -217,7 +202,63 @@ EditorImage.AddElementCommand = (_a = class extends SerializableCommand {
             return result;
         });
     })(),
-    _a);
+    _b);
+// Handles resizing the background import/export region of the image.
+EditorImage.SetImportExportRectCommand = (_c = class extends SerializableCommand {
+        constructor(originalSize, originalTransform, finalRect) {
+            super(EditorImage.SetImportExportRectCommand.commandId);
+            this.originalSize = originalSize;
+            this.originalTransform = originalTransform;
+            this.finalRect = finalRect;
+        }
+        apply(editor) {
+            const viewport = editor.image.getImportExportViewport();
+            viewport.updateScreenSize(this.finalRect.size);
+            viewport.resetTransform(Mat33.translation(this.finalRect.topLeft.times(-1)));
+            editor.queueRerender();
+        }
+        unapply(editor) {
+            const viewport = editor.image.getImportExportViewport();
+            viewport.updateScreenSize(this.originalSize);
+            viewport.resetTransform(this.originalTransform);
+            editor.queueRerender();
+        }
+        description(_editor, localization) {
+            return localization.resizeOutputCommand(this.finalRect);
+        }
+        serializeToJSON() {
+            return {
+                originalSize: this.originalSize.xy,
+                originalTransform: this.originalTransform.toArray(),
+                newRegion: {
+                    x: this.finalRect.x,
+                    y: this.finalRect.y,
+                    w: this.finalRect.w,
+                    h: this.finalRect.h,
+                },
+            };
+        }
+    },
+    _c.commandId = 'set-import-export-rect',
+    (() => {
+        const commandId = _c.commandId;
+        SerializableCommand.register(commandId, (json, _editor) => {
+            assertIsNumber(json.originalSize.x);
+            assertIsNumber(json.originalSize.y);
+            assertIsNumberArray(json.originalTransform);
+            assertIsNumberArray([
+                json.newRegion.x,
+                json.newRegion.y,
+                json.newRegion.w,
+                json.newRegion.h,
+            ]);
+            const originalSize = Vec2.ofXY(json.originalSize);
+            const originalTransform = new Mat33(...json.originalTransform);
+            const finalRect = new Rect2(json.newRegion.x, json.newRegion.y, json.newRegion.w, json.newRegion.h);
+            return new EditorImage.SetImportExportRectCommand(originalSize, originalTransform, finalRect);
+        });
+    })(),
+    _c);
 /** Part of the Editor's image. @internal */
 export class ImageNode {
     constructor(parent = null) {
@@ -351,7 +392,7 @@ export class ImageNode {
     // this' ancestors bounding boxes. This also re-computes this' bounding box
     // in the z-direction (z-indicies).
     recomputeBBox(bubbleUp) {
-        var _a;
+        var _b;
         const oldBBox = this.bbox;
         if (this.content !== null) {
             this.bbox = this.content.getBBox();
@@ -360,7 +401,7 @@ export class ImageNode {
             this.bbox = Rect2.union(...this.children.map(child => child.getBBox()));
         }
         if (bubbleUp && !oldBBox.eq(this.bbox)) {
-            (_a = this.parent) === null || _a === void 0 ? void 0 : _a.recomputeBBox(true);
+            (_b = this.parent) === null || _b === void 0 ? void 0 : _b.recomputeBBox(true);
         }
     }
     updateParents(recursive = false) {
@@ -395,8 +436,8 @@ export class ImageNode {
     }
     // Remove this node and all of its children
     remove() {
-        var _a;
-        (_a = this.content) === null || _a === void 0 ? void 0 : _a.onRemoveFromImage();
+        var _b;
+        (_b = this.content) === null || _b === void 0 ? void 0 : _b.onRemoveFromImage();
         if (!this.parent) {
             this.content = null;
             this.children = [];

package/dist/src/components/TextComponent.d.ts

@@ -31,7 +31,7 @@ export default class TextComponent extends AbstractComponent implements Restylea
     getTextStyle(): {
         renderingStyle: {
             fill: import("../Color4").default;
-            stroke?: {
+            stroke: {
                 color: import("../Color4").default;
                 width: number;
             } | undefined;

package/dist/src/components/TextComponent.js

@@ -2,7 +2,7 @@ import LineSegment2 from '../math/LineSegment2';
 import Mat33 from '../math/Mat33';
 import Rect2 from '../math/Rect2';
 import { Vec2 } from '../math/Vec2';
-import { textStyleFromJSON, textStyleToJSON } from '../rendering/TextRenderingStyle';
+import { cloneTextStyle, textStyleFromJSON, textStyleToJSON } from '../rendering/TextRenderingStyle';
 import AbstractComponent from './AbstractComponent';
 import { createRestyleComponentCommand } from './RestylableComponent';
 const componentTypeId = 'text';
@@ -132,7 +132,7 @@ export default class TextComponent extends AbstractComponent {
     }
     forceStyle(style, editor) {
         if (style.textStyle) {
-            this.style = style.textStyle;
+            this.style = cloneTextStyle(style.textStyle);
         }
         else if (style.color) {
             this.style = Object.assign(Object.assign({}, this.style), { renderingStyle: Object.assign(Object.assign({}, this.style.renderingStyle), { fill: style.color }) });
@@ -152,7 +152,7 @@ export default class TextComponent extends AbstractComponent {
     }
     // See this.getStyle
     getTextStyle() {
-        return Object.assign(Object.assign({}, this.style), { renderingStyle: Object.assign({}, this.style.renderingStyle) });
+        return cloneTextStyle(this.style);
     }
     getBaselinePos() {
         return this.transform.transformVec2(Vec2.zero);
@@ -165,7 +165,15 @@ export default class TextComponent extends AbstractComponent {
         this.recomputeBBox();
     }
     createClone() {
-        return new TextComponent(this.textObjects, this.transform, this.style);
+        const clonedTextObjects = this.textObjects.map(obj => {
+            if (typeof obj === 'string') {
+                return obj;
+            }
+            else {
+                return obj.createClone();
+            }
+        });
+        return new TextComponent(clonedTextObjects, this.transform, this.style);
     }
     getText() {
         const result = [];

package/dist/src/rendering/RenderingStyle.d.ts

@@ -7,6 +7,13 @@ interface RenderingStyle {
     };
 }
 export default RenderingStyle;
+export declare const cloneStyle: (style: RenderingStyle) => {
+    fill: Color4;
+    stroke: {
+        color: Color4;
+        width: number;
+    } | undefined;
+};
 export declare const stylesEqual: (a: RenderingStyle, b: RenderingStyle) => boolean;
 export declare const styleToJSON: (style: RenderingStyle) => {
     fill: string;

package/dist/src/rendering/RenderingStyle.js

@@ -1,4 +1,10 @@
 import Color4 from '../Color4';
+export const cloneStyle = (style) => {
+    return {
+        fill: style.fill,
+        stroke: style.stroke ? Object.assign({}, style.stroke) : undefined,
+    };
+};
 export const stylesEqual = (a, b) => {
     var _a, _b, _c, _d, _e, _f;
     const result = a === b || (a.fill.eq(b.fill)

package/dist/src/rendering/TextRenderingStyle.d.ts

@@ -7,6 +7,19 @@ export interface TextStyle {
     renderingStyle: RenderingStyle;
 }
 export default TextStyle;
+export declare const cloneTextStyle: (style: TextStyle) => {
+    renderingStyle: {
+        fill: import("../Color4").default;
+        stroke: {
+            color: import("../Color4").default;
+            width: number;
+        } | undefined;
+    };
+    size: number;
+    fontFamily: string;
+    fontWeight?: string | undefined;
+    fontVariant?: string | undefined;
+};
 export declare const textStyleFromJSON: (json: any) => TextStyle;
 export declare const textStyleToJSON: (style: TextStyle) => {
     renderingStyle: {

package/dist/src/rendering/TextRenderingStyle.js

@@ -1,4 +1,7 @@
-import { styleFromJSON, styleToJSON } from './RenderingStyle';
+import { cloneStyle, styleFromJSON, styleToJSON } from './RenderingStyle';
+export const cloneTextStyle = (style) => {
+    return Object.assign(Object.assign({}, style), { renderingStyle: cloneStyle(style.renderingStyle) });
+};
 export const textStyleFromJSON = (json) => {
     if (typeof json === 'string') {
         json = JSON.parse(json);

package/dist/src/tools/FindTool.js

@@ -29,7 +29,8 @@ export default class FindTool extends BaseTool {
             matchIdx = matches.length + matchIdx;
         }
         if (matchIdx < matches.length) {
-            this.editor.dispatch(this.editor.viewport.zoomTo(matches[matchIdx], true, true));
+            const undoable = false;
+            this.editor.dispatch(this.editor.viewport.zoomTo(matches[matchIdx], true, true), undoable);
             this.editor.announceForAccessibility(this.editor.localization.focusedFoundText(matchIdx + 1, matches.length));
         }
     }

package/dist/src/util/assertions.d.ts

@@ -1 +1,23 @@
+/**
+ * Compile-time assertion that a branch of code is unreachable.
+ * @internal
+ */
 export declare const assertUnreachable: (key: never) => never;
+/**
+ * Throws an exception if the typeof given value is not a number or `value` is NaN.
+ *
+ * @example
+ * ```ts
+ * const foo: unknown = 3;
+ * assertIsNumber(foo);
+ *
+ * assertIsNumber('hello, world'); // throws an Error.
+ * ```
+ *
+ *
+ */
+export declare const assertIsNumber: (value: any, allowNaN?: boolean) => value is number;
+/**
+ * Throws if any of `values` is not of type number.
+ */
+export declare const assertIsNumberArray: (values: any[], allowNaN?: boolean) => values is number[];

package/dist/src/util/assertions.js

@@ -1,6 +1,45 @@
-// Compile-time assertion that a branch of code is unreachable.
-// See https://stackoverflow.com/a/39419171/17055750
-// @internal
+/**
+ * Compile-time assertion that a branch of code is unreachable.
+ * @internal
+ */
 export const assertUnreachable = (key) => {
+    // See https://stackoverflow.com/a/39419171/17055750
     throw new Error(`Should be unreachable. Key: ${key}.`);
 };
+/**
+ * Throws an exception if the typeof given value is not a number or `value` is NaN.
+ *
+ * @example
+ * ```ts
+ * const foo: unknown = 3;
+ * assertIsNumber(foo);
+ *
+ * assertIsNumber('hello, world'); // throws an Error.
+ * ```
+ *
+ *
+ */
+export const assertIsNumber = (value, allowNaN = false) => {
+    if (typeof value !== 'number' || (!allowNaN && isNaN(value))) {
+        throw new Error('Given value is not a number');
+        // return false;
+    }
+    return true;
+};
+/**
+ * Throws if any of `values` is not of type number.
+ */
+export const assertIsNumberArray = (values, allowNaN = false) => {
+    if (typeof values !== 'object') {
+        throw new Error('Asserting isNumberArray: Given entity is not an array');
+    }
+    if (!assertIsNumber(values['length'])) {
+        return false;
+    }
+    for (const value of values) {
+        if (!assertIsNumber(value, allowNaN)) {
+            return false;
+        }
+    }
+    return true;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.17.1",
+	"version": "0.17.2",
 	"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",
@@ -78,31 +78,31 @@
 		"postpack": "pinst --enable"
 	},
 	"dependencies": {
-		"@melloware/coloris": "^0.16.1",
-		"bezier-js": "^6.1.0"
+		"@melloware/coloris": "^0.18.0",
+		"bezier-js": "^6.1.3"
 	},
 	"devDependencies": {
 		"@types/bezier-js": "^4.1.0",
-		"@types/jest": "^29.2.5",
-		"@types/jsdom": "^20.0.1",
-		"@types/node": "^18.11.18",
-		"@typescript-eslint/eslint-plugin": "^5.44.0",
-		"@typescript-eslint/parser": "^5.44.0",
+		"@types/jest": "^29.4.0",
+		"@types/jsdom": "^21.1.0",
+		"@types/node": "^18.14.0",
+		"@typescript-eslint/eslint-plugin": "^5.53.0",
+		"@typescript-eslint/parser": "^5.53.0",
 		"css-loader": "^6.7.3",
-		"eslint": "^8.31.0",
+		"eslint": "^8.34.0",
 		"husky": "^8.0.3",
-		"jest": "^29.3.1",
-		"jest-environment-jsdom": "^29.3.1",
-		"jsdom": "^20.0.3",
-		"lint-staged": "^13.1.0",
+		"jest": "^29.4.3",
+		"jest-environment-jsdom": "^29.4.3",
+		"jsdom": "^21.1.0",
+		"lint-staged": "^13.1.2",
 		"pinst": "^3.0.0",
 		"style-loader": "^3.3.1",
 		"terser-webpack-plugin": "^5.3.6",
-		"ts-jest": "^29.0.3",
+		"ts-jest": "^29.0.5",
 		"ts-loader": "^9.4.2",
 		"ts-node": "^10.9.1",
-		"typedoc": "^0.23.24",
-		"typescript": "^4.9.4",
+		"typedoc": "^0.23.25",
+		"typescript": "^4.9.5",
 		"webpack": "^5.75.0"
 	},
 	"bugs": {

package/src/EditorImage.test.ts

@@ -6,6 +6,9 @@ import Color4 from './Color4';
 import DummyRenderer from './rendering/renderers/DummyRenderer';
 import createEditor from './testing/createEditor';
 import RenderingStyle from './rendering/RenderingStyle';
+import Rect2 from './math/Rect2';
+import Mat33 from './math/Mat33';
+import { SerializableCommand } from './lib';
 
 describe('EditorImage', () => {
 	const testStroke = new Stroke([
@@ -84,4 +87,34 @@ describe('EditorImage', () => {
 		expect(firstParent?.getParent()).toStrictEqual(secondParent?.getParent());
 		expect(firstParent?.getParent()?.getParent()).toBeNull();
 	});
+
+	it('setImportExportRect should return a serializable command', () => {
+		const editor = createEditor();
+		const image = editor.image;
+
+		const originalRect = editor.getImportExportRect();
+		const newRect = new Rect2(3, 4, 5, 6);
+		const command = image.setImportExportRect(newRect);
+		expect(command.serialize().data).toMatchObject({
+			originalSize: originalRect.size.xy,
+			originalTransform: Mat33.identity.toArray(),
+			newRegion: {
+				x: 3,
+				y: 4,
+				w: 5,
+				h: 6,
+			},
+		});
+
+		expect(editor.getImportExportRect()).objEq(originalRect);
+		command.apply(editor);
+		expect(editor.getImportExportRect()).objEq(newRect);
+
+		const deserializedCommand = SerializableCommand.deserialize(command.serialize(), editor);
+
+		deserializedCommand.unapply(editor);
+		expect(editor.getImportExportRect()).objEq(originalRect);
+		deserializedCommand.apply(editor);
+		expect(editor.getImportExportRect()).objEq(newRect);
+	});
 });

package/src/EditorImage.ts

@@ -8,8 +8,8 @@ import RenderingCache from './rendering/caching/RenderingCache';
 import SerializableCommand from './commands/SerializableCommand';
 import EventDispatcher from './EventDispatcher';
 import { Vec2 } from './math/Vec2';
-import Command from './commands/Command';
-import Mat33 from './math/Mat33';
+import Mat33, { Mat33Array } from './math/Mat33';
+import { assertIsNumber, assertIsNumberArray } from './util/assertions';
 
 // @internal Sort by z-index, low to high
 export const sortLeavesByZIndex = (leaves: Array<ImageNode>) => {
@@ -51,39 +51,6 @@ export default class EditorImage {
 		this.importExportViewport.updateScreenSize(Vec2.of(500, 500));
 	}
 
-	/**
-	 * @returns a `Viewport` for rendering the image when importing/exporting.
-	 */
-	public getImportExportViewport() {
-		return this.importExportViewport;
-	}
-
-	public setImportExportRect(imageRect: Rect2): Command {
-		const importExportViewport = this.getImportExportViewport();
-		const origSize = importExportViewport.visibleRect.size;
-		const origTransform = importExportViewport.canvasToScreenTransform;
-
-		return new class extends Command {
-			public apply(editor: Editor) {
-				const viewport = editor.image.getImportExportViewport();
-				viewport.updateScreenSize(imageRect.size);
-				viewport.resetTransform(Mat33.translation(imageRect.topLeft.times(-1)));
-				editor.queueRerender();
-			}
-
-			public unapply(editor: Editor) {
-				const viewport = editor.image.getImportExportViewport();
-				viewport.updateScreenSize(origSize);
-				viewport.resetTransform(origTransform);
-				editor.queueRerender();
-			}
-
-			public description(_editor: Editor, localizationTable: EditorLocalization) {
-				return localizationTable.resizeOutputCommand(imageRect);
-			}
-		};
-	}
-
 	// Returns all components that make up the background of this image. These
 	// components are rendered below all other components.
 	public getBackgroundComponents(): AbstractComponent[] {
@@ -271,6 +238,91 @@ export default class EditorImage {
 			});
 		}
 	};
+
+
+
+	/**
+	 * @returns a `Viewport` for rendering the image when importing/exporting.
+	 */
+	public getImportExportViewport() {
+		return this.importExportViewport;
+	}
+
+	public setImportExportRect(imageRect: Rect2): SerializableCommand {
+		const importExportViewport = this.getImportExportViewport();
+		const origSize = importExportViewport.visibleRect.size;
+		const origTransform = importExportViewport.canvasToScreenTransform;
+
+		return new EditorImage.SetImportExportRectCommand(origSize, origTransform, imageRect);
+	}
+
+	// Handles resizing the background import/export region of the image.
+	private static SetImportExportRectCommand = class extends SerializableCommand {
+		private static commandId = 'set-import-export-rect';
+
+		public constructor(
+			private originalSize: Vec2,
+			private originalTransform: Mat33,
+			private finalRect: Rect2,
+		) {
+			super(EditorImage.SetImportExportRectCommand.commandId);
+		}
+
+		public apply(editor: Editor) {
+			const viewport = editor.image.getImportExportViewport();
+			viewport.updateScreenSize(this.finalRect.size);
+			viewport.resetTransform(Mat33.translation(this.finalRect.topLeft.times(-1)));
+			editor.queueRerender();
+		}
+
+		public unapply(editor: Editor) {
+			const viewport = editor.image.getImportExportViewport();
+			viewport.updateScreenSize(this.originalSize);
+			viewport.resetTransform(this.originalTransform);
+			editor.queueRerender();
+		}
+
+		public description(_editor: Editor, localization: EditorLocalization) {
+			return localization.resizeOutputCommand(this.finalRect);
+		}
+
+		protected serializeToJSON() {
+			return {
+				originalSize: this.originalSize.xy,
+				originalTransform: this.originalTransform.toArray(),
+				newRegion: {
+					x: this.finalRect.x,
+					y: this.finalRect.y,
+					w: this.finalRect.w,
+					h: this.finalRect.h,
+				},
+			};
+		}
+
+		static {
+			const commandId = this.commandId;
+			SerializableCommand.register(commandId, (json: any, _editor: Editor) => {
+				assertIsNumber(json.originalSize.x);
+				assertIsNumber(json.originalSize.y);
+				assertIsNumberArray(json.originalTransform);
+				assertIsNumberArray([
+					json.newRegion.x,
+					json.newRegion.y,
+					json.newRegion.w,
+					json.newRegion.h,
+				]);
+
+				const originalSize = Vec2.ofXY(json.originalSize);
+				const originalTransform = new Mat33(...(json.originalTransform as Mat33Array));
+				const finalRect = new Rect2(
+					json.newRegion.x, json.newRegion.y, json.newRegion.w, json.newRegion.h
+				);
+				return new EditorImage.SetImportExportRectCommand(
+					originalSize, originalTransform, finalRect
+				);
+			});
+		}
+	};
 }
 
 type TooSmallToRenderCheck = (rect: Rect2)=> boolean;