js-draw 0.1.5 → 0.1.8

package/dist/src/commands/SerializableCommand.js

@@ -0,0 +1,28 @@
+import Command from './Command';
+export default class SerializableCommand extends Command {
+    constructor(commandTypeId) {
+        super();
+        this.commandTypeId = commandTypeId;
+        if (!(commandTypeId in SerializableCommand.deserializationCallbacks)) {
+            throw new Error(`Command ${commandTypeId} must have a registered deserialization callback. To do this, call SerializableCommand.register.`);
+        }
+    }
+    serialize() {
+        return JSON.stringify({
+            data: this.serializeToString(),
+            commandType: this.commandTypeId,
+        });
+    }
+    static deserialize(data, editor) {
+        const json = JSON.parse(data);
+        const commandType = json.commandType;
+        if (!(commandType in SerializableCommand.deserializationCallbacks)) {
+            throw new Error(`Unrecognised command type ${commandType}!`);
+        }
+        return SerializableCommand.deserializationCallbacks[commandType](json.data, editor);
+    }
+    static register(commandTypeId, deserialize) {
+        SerializableCommand.deserializationCallbacks[commandTypeId] = deserialize;
+    }
+}
+SerializableCommand.deserializationCallbacks = {};

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

@@ -8,12 +8,14 @@ export interface CommandLocalization {
     zoomedOut: string;
     zoomedIn: string;
     erasedNoElements: string;
+    duplicatedNoElements: string;
     elements: string;
     updatedViewport: string;
     transformedElements: (elemCount: number) => string;
     resizeOutputCommand: (newSize: Rect2) => string;
     addElementAction: (elemDescription: string) => string;
     eraseAction: (elemDescription: string, numElems: number) => string;
+    duplicateAction: (elemDescription: string, count: number) => string;
     selectedElements: (count: number) => string;
 }
 export declare const defaultCommandLocalization: CommandLocalization;

package/dist/src/commands/localization.js

@@ -4,8 +4,10 @@ export const defaultCommandLocalization = {
     resizeOutputCommand: (newSize) => `Resized image to ${newSize.w}x${newSize.h}`,
     addElementAction: (componentDescription) => `Added ${componentDescription}`,
     eraseAction: (componentDescription, numElems) => `Erased ${numElems} ${componentDescription}`,
+    duplicateAction: (componentDescription, numElems) => `Duplicated ${numElems} ${componentDescription}`,
     elements: 'Elements',
     erasedNoElements: 'Erased nothing',
+    duplicatedNoElements: 'Duplicated nothing',
     rotatedBy: (degrees) => `Rotated by ${Math.abs(degrees)} degrees ${degrees < 0 ? 'clockwise' : 'counter-clockwise'}`,
     movedLeft: 'Moved left',
     movedUp: 'Moved up',

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

@@ -4,14 +4,20 @@ import Mat33 from '../geometry/Mat33';
 import Rect2 from '../geometry/Rect2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import { ImageComponentLocalization } from './localization';
-declare type LoadSaveData = unknown;
+declare type LoadSaveData = (string[] | Record<symbol, string | number>);
 export declare type LoadSaveDataTable = Record<string, Array<LoadSaveData>>;
+declare type DeserializeCallback = (data: string) => AbstractComponent;
 export default abstract class AbstractComponent {
+    private readonly componentKind;
     protected lastChangedTime: number;
     protected abstract contentBBox: Rect2;
     private zIndex;
+    private id;
     private static zIndexCounter;
-    protected constructor();
+    protected constructor(componentKind: string);
+    getId(): string;
+    private static deserializationCallbacks;
+    static registerComponent(componentKind: string, deserialize: DeserializeCallback | null): void;
     private loadSaveData;
     attachLoadSaveData(key: string, data: LoadSaveData): void;
     getLoadSaveData(): LoadSaveDataTable;
@@ -19,8 +25,15 @@ export default abstract class AbstractComponent {
     getBBox(): Rect2;
     abstract render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
     abstract intersects(lineSegment: LineSegment2): boolean;
+    protected abstract serializeToString(): string | null;
     protected abstract applyTransformation(affineTransfm: Mat33): void;
     transformBy(affineTransfm: Mat33): Command;
+    private static TransformElementCommand;
     abstract description(localizationTable: ImageComponentLocalization): string;
+    protected abstract createClone(): AbstractComponent;
+    clone(): AbstractComponent;
+    serialize(): string;
+    private static isNotDeserializable;
+    static deserialize(data: string): AbstractComponent;
 }
 export {};

package/dist/src/components/AbstractComponent.js

@@ -1,10 +1,30 @@
+var _a;
+import SerializableCommand from '../commands/SerializableCommand';
 import EditorImage from '../EditorImage';
+import Mat33 from '../geometry/Mat33';
 export default class AbstractComponent {
-    constructor() {
+    constructor(
+    // A unique identifier for the type of component
+    componentKind) {
+        this.componentKind = componentKind;
         // Get and manage data attached by a loader.
         this.loadSaveData = {};
         this.lastChangedTime = (new Date()).getTime();
         this.zIndex = AbstractComponent.zIndexCounter++;
+        // Create a unique ID.
+        this.id = `${new Date().getTime()}-${Math.random()}`;
+        if (AbstractComponent.deserializationCallbacks[componentKind] === undefined) {
+            throw new Error(`Component ${componentKind} has not been registered using AbstractComponent.registerComponent`);
+        }
+    }
+    getId() {
+        return this.id;
+    }
+    // Store the deserialization callback (or lack of it) for [componentKind].
+    // If components are registered multiple times (as may be done in automated tests),
+    // the most recent deserialization callback is used.
+    static registerComponent(componentKind, deserialize) {
+        this.deserializationCallbacks[componentKind] = deserialize !== null && deserialize !== void 0 ? deserialize : null;
     }
     attachLoadSaveData(key, data) {
         if (!this.loadSaveData[key]) {
@@ -24,37 +44,113 @@ export default class AbstractComponent {
     // Returns a command that, when applied, transforms this by [affineTransfm] and
     // updates the editor.
     transformBy(affineTransfm) {
-        const updateTransform = (editor, newTransfm) => {
+        return new AbstractComponent.TransformElementCommand(affineTransfm, this);
+    }
+    clone() {
+        const clone = this.createClone();
+        for (const attachmentKey in this.loadSaveData) {
+            for (const val of this.loadSaveData[attachmentKey]) {
+                clone.attachLoadSaveData(attachmentKey, val);
+            }
+        }
+        return clone;
+    }
+    serialize() {
+        const data = this.serializeToString();
+        if (data === null) {
+            throw new Error(`${this} cannot be serialized.`);
+        }
+        return JSON.stringify({
+            name: this.componentKind,
+            zIndex: this.zIndex,
+            id: this.id,
+            loadSaveData: this.loadSaveData,
+            data,
+        });
+    }
+    // Returns true if [data] is not deserializable. May return false even if [data]
+    // is not deserializable.
+    static isNotDeserializable(data) {
+        const json = JSON.parse(data);
+        if (typeof json !== 'object') {
+            return true;
+        }
+        if (!this.deserializationCallbacks[json === null || json === void 0 ? void 0 : json.name]) {
+            return true;
+        }
+        if (!json.data) {
+            return true;
+        }
+        return false;
+    }
+    static deserialize(data) {
+        if (AbstractComponent.isNotDeserializable(data)) {
+            throw new Error(`Element with data ${data} cannot be deserialized.`);
+        }
+        const json = JSON.parse(data);
+        const instance = this.deserializationCallbacks[json.name](json.data);
+        instance.zIndex = json.zIndex;
+        instance.id = json.id;
+        // TODO: What should we do with json.loadSaveData?
+        //       If we attach it to [instance], we create a potential security risk — loadSaveData
+        //       is often used to store unrecognised attributes so they can be preserved on output.
+        //       ...but what if we're deserializing data sent across the network?
+        return instance;
+    }
+}
+// Topmost z-index
+AbstractComponent.zIndexCounter = 0;
+AbstractComponent.deserializationCallbacks = {};
+AbstractComponent.TransformElementCommand = (_a = class extends SerializableCommand {
+        constructor(affineTransfm, component) {
+            super('transform-element');
+            this.affineTransfm = affineTransfm;
+            this.component = component;
+            this.origZIndex = component.zIndex;
+        }
+        updateTransform(editor, newTransfm) {
             // Any parent should have only one direct child.
-            const parent = editor.image.findParent(this);
+            const parent = editor.image.findParent(this.component);
             let hadParent = false;
             if (parent) {
                 parent.remove();
                 hadParent = true;
             }
-            this.applyTransformation(newTransfm);
+            this.component.applyTransformation(newTransfm);
             // Add the element back to the document.
             if (hadParent) {
-                new EditorImage.AddElementCommand(this).apply(editor);
+                EditorImage.addElement(this.component).apply(editor);
             }
-        };
-        const origZIndex = this.zIndex;
-        return {
-            apply: (editor) => {
-                this.zIndex = AbstractComponent.zIndexCounter++;
-                updateTransform(editor, affineTransfm);
-                editor.queueRerender();
-            },
-            unapply: (editor) => {
-                this.zIndex = origZIndex;
-                updateTransform(editor, affineTransfm.inverse());
-                editor.queueRerender();
-            },
-            description(localizationTable) {
-                return localizationTable.transformedElements(1);
-            },
-        };
-    }
-}
-// Topmost z-index
-AbstractComponent.zIndexCounter = 0;
+        }
+        apply(editor) {
+            this.component.zIndex = AbstractComponent.zIndexCounter++;
+            this.updateTransform(editor, this.affineTransfm);
+            editor.queueRerender();
+        }
+        unapply(editor) {
+            this.component.zIndex = this.origZIndex;
+            this.updateTransform(editor, this.affineTransfm.inverse());
+            editor.queueRerender();
+        }
+        description(localizationTable) {
+            return localizationTable.transformedElements(1);
+        }
+        serializeToString() {
+            return JSON.stringify({
+                id: this.component.getId(),
+                transfm: this.affineTransfm.toArray(),
+            });
+        }
+    },
+    (() => {
+        SerializableCommand.register('transform-element', (data, editor) => {
+            const json = JSON.parse(data);
+            const elem = editor.image.lookupElement(json.id);
+            if (!elem) {
+                throw new Error(`Unable to retrieve non-existent element, ${elem}`);
+            }
+            const transform = json.transfm;
+            return new AbstractComponent.TransformElementCommand(new Mat33(...transform), elem);
+        });
+    })(),
+    _a);

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

@@ -4,12 +4,17 @@ import Rect2 from '../geometry/Rect2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
+declare type GlobalAttrsList = Array<[string, string | null]>;
 export default class SVGGlobalAttributesObject extends AbstractComponent {
     private readonly attrs;
     protected contentBBox: Rect2;
-    constructor(attrs: Array<[string, string | null]>);
+    constructor(attrs: GlobalAttrsList);
     render(canvas: AbstractRenderer, _visibleRect?: Rect2): void;
     intersects(_lineSegment: LineSegment2): boolean;
     protected applyTransformation(_affineTransfm: Mat33): void;
+    protected createClone(): SVGGlobalAttributesObject;
     description(localization: ImageComponentLocalization): string;
+    protected serializeToString(): string | null;
+    static deserializeFromString(data: string): AbstractComponent;
 }
+export {};

package/dist/src/components/SVGGlobalAttributesObject.js

@@ -1,10 +1,11 @@
 import Rect2 from '../geometry/Rect2';
 import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import AbstractComponent from './AbstractComponent';
+const componentKind = 'svg-global-attributes';
 // Stores global SVG attributes (e.g. namespace identifiers.)
 export default class SVGGlobalAttributesObject extends AbstractComponent {
     constructor(attrs) {
-        super();
+        super(componentKind);
         this.attrs = attrs;
         this.contentBBox = Rect2.empty;
     }
@@ -22,7 +23,28 @@ export default class SVGGlobalAttributesObject extends AbstractComponent {
     }
     applyTransformation(_affineTransfm) {
     }
+    createClone() {
+        return new SVGGlobalAttributesObject(this.attrs);
+    }
     description(localization) {
         return localization.svgObject;
     }
+    serializeToString() {
+        return JSON.stringify(this.attrs);
+    }
+    static deserializeFromString(data) {
+        const json = JSON.parse(data);
+        const attrs = [];
+        const numericAndSpaceContentExp = /^[ \t\n0-9.-eE]+$/;
+        // Don't deserialize all attributes, just those that should be safe.
+        for (const [key, val] of json) {
+            if (key === 'viewBox' || key === 'width' || key === 'height') {
+                if (val && numericAndSpaceContentExp.exec(val)) {
+                    attrs.push([key, val]);
+                }
+            }
+        }
+        return new SVGGlobalAttributesObject(attrs);
+    }
 }
+AbstractComponent.registerComponent(componentKind, SVGGlobalAttributesObject.deserializeFromString);

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

@@ -1,5 +1,6 @@
 import LineSegment2 from '../geometry/LineSegment2';
 import Mat33 from '../geometry/Mat33';
+import Path from '../geometry/Path';
 import Rect2 from '../geometry/Rect2';
 import AbstractRenderer, { RenderablePathSpec } from '../rendering/renderers/AbstractRenderer';
 import AbstractComponent from './AbstractComponent';
@@ -12,5 +13,9 @@ export default class Stroke extends AbstractComponent {
     render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
     private bboxForPart;
     protected applyTransformation(affineTransfm: Mat33): void;
+    getPath(): Path;
     description(localization: ImageComponentLocalization): string;
+    protected createClone(): AbstractComponent;
+    protected serializeToString(): string | null;
+    static deserializeFromString(data: string): Stroke;
 }

package/dist/src/components/Stroke.js

@@ -1,10 +1,11 @@
 import Path from '../geometry/Path';
 import Rect2 from '../geometry/Rect2';
+import { styleFromJSON, styleToJSON } from '../rendering/RenderingStyle';
 import AbstractComponent from './AbstractComponent';
 export default class Stroke extends AbstractComponent {
     constructor(parts) {
         var _a;
-        super();
+        super('stroke');
         this.parts = parts.map(section => {
             const path = Path.fromRenderable(section);
             const pathBBox = this.bboxForPart(path.bbox, section.style);
@@ -73,7 +74,37 @@ export default class Stroke extends AbstractComponent {
             };
         });
     }
+    getPath() {
+        var _a;
+        return (_a = this.parts.reduce((accumulator, current) => {
+            var _a;
+            return (_a = accumulator === null || accumulator === void 0 ? void 0 : accumulator.union(current.path)) !== null && _a !== void 0 ? _a : current.path;
+        }, null)) !== null && _a !== void 0 ? _a : Path.empty;
+    }
     description(localization) {
         return localization.stroke;
     }
+    createClone() {
+        return new Stroke(this.parts);
+    }
+    serializeToString() {
+        return JSON.stringify(this.parts.map(part => {
+            return {
+                style: styleToJSON(part.style),
+                path: part.path.serialize(),
+            };
+        }));
+    }
+    static deserializeFromString(data) {
+        const json = JSON.parse(data);
+        if (typeof json !== 'object' || typeof json.length !== 'number') {
+            throw new Error(`${data} is missing required field, parts, or parts is of the wrong type.`);
+        }
+        const pathSpec = json.map((part) => {
+            const style = styleFromJSON(part.style);
+            return Path.fromString(part.path).toRenderable(style);
+        });
+        return new Stroke(pathSpec);
+    }
 }
+AbstractComponent.registerComponent('stroke', Stroke.deserializeFromString);

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

@@ -1,7 +1,8 @@
 import LineSegment2 from '../geometry/LineSegment2';
 import Mat33 from '../geometry/Mat33';
 import Rect2 from '../geometry/Rect2';
-import AbstractRenderer, { RenderingStyle } from '../rendering/renderers/AbstractRenderer';
+import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
+import RenderingStyle from '../rendering/RenderingStyle';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 export interface TextStyle {
@@ -11,12 +12,14 @@ export interface TextStyle {
     fontVariant?: string;
     renderingStyle: RenderingStyle;
 }
+declare type GetTextDimensCallback = (text: string, style: TextStyle) => Rect2;
 export default class Text extends AbstractComponent {
-    protected textObjects: Array<string | Text>;
+    protected readonly textObjects: Array<string | Text>;
     private transform;
-    private style;
+    private readonly style;
+    private readonly getTextDimens;
     protected contentBBox: Rect2;
-    constructor(textObjects: Array<string | Text>, transform: Mat33, style: TextStyle);
+    constructor(textObjects: Array<string | Text>, transform: Mat33, style: TextStyle, getTextDimens?: GetTextDimensCallback);
     static applyTextStyles(ctx: CanvasRenderingContext2D, style: TextStyle): void;
     private static textMeasuringCtx;
     private static getTextDimens;
@@ -25,6 +28,10 @@ export default class Text extends AbstractComponent {
     render(canvas: AbstractRenderer, _visibleRect?: Rect2): void;
     intersects(lineSegment: LineSegment2): boolean;
     protected applyTransformation(affineTransfm: Mat33): void;
+    protected createClone(): AbstractComponent;
     private getText;
     description(localizationTable: ImageComponentLocalization): string;
+    protected serializeToString(): string;
+    static deserializeFromString(data: string, getTextDimens?: GetTextDimensCallback): Text;
 }
+export {};

package/dist/src/components/Text.js

@@ -1,12 +1,18 @@
 import LineSegment2 from '../geometry/LineSegment2';
+import Mat33 from '../geometry/Mat33';
 import Rect2 from '../geometry/Rect2';
+import { styleFromJSON, styleToJSON } from '../rendering/RenderingStyle';
 import AbstractComponent from './AbstractComponent';
+const componentTypeId = 'text';
 export default class Text extends AbstractComponent {
-    constructor(textObjects, transform, style) {
-        super();
+    constructor(textObjects, transform, style, 
+    // If not given, an HtmlCanvasElement is used to determine text boundaries.
+    getTextDimens = Text.getTextDimens) {
+        super(componentTypeId);
         this.textObjects = textObjects;
         this.transform = transform;
         this.style = style;
+        this.getTextDimens = getTextDimens;
         this.recomputeBBox();
     }
     static applyTextStyles(ctx, style) {
@@ -34,7 +40,7 @@ export default class Text extends AbstractComponent {
     }
     computeBBoxOfPart(part) {
         if (typeof part === 'string') {
-            const textBBox = Text.getTextDimens(part, this.style);
+            const textBBox = this.getTextDimens(part, this.style);
             return textBBox.transformedBoundingBox(this.transform);
         }
         else {
@@ -93,6 +99,9 @@ export default class Text extends AbstractComponent {
         this.transform = affineTransfm.rightMul(this.transform);
         this.recomputeBBox();
     }
+    createClone() {
+        return new Text(this.textObjects, this.transform, this.style);
+    }
     getText() {
         const result = [];
         for (const textObject of this.textObjects) {
@@ -108,4 +117,49 @@ export default class Text extends AbstractComponent {
     description(localizationTable) {
         return localizationTable.text(this.getText());
     }
+    serializeToString() {
+        const serializableStyle = Object.assign(Object.assign({}, this.style), { renderingStyle: styleToJSON(this.style.renderingStyle) });
+        const textObjects = this.textObjects.map(text => {
+            if (typeof text === 'string') {
+                return {
+                    text,
+                };
+            }
+            else {
+                return {
+                    json: text.serializeToString(),
+                };
+            }
+        });
+        return JSON.stringify({
+            textObjects,
+            transform: this.transform.toArray(),
+            style: serializableStyle,
+        });
+    }
+    static deserializeFromString(data, getTextDimens = Text.getTextDimens) {
+        const json = JSON.parse(data);
+        const style = {
+            renderingStyle: styleFromJSON(json.style.renderingStyle),
+            size: json.style.size,
+            fontWeight: json.style.fontWeight,
+            fontVariant: json.style.fontVariant,
+            fontFamily: json.style.fontFamily,
+        };
+        const textObjects = json.textObjects.map((data) => {
+            var _a;
+            if (((_a = data.text) !== null && _a !== void 0 ? _a : null) !== null) {
+                return data.text;
+            }
+            return Text.deserializeFromString(data.json);
+        });
+        json.transform = json.transform.filter((elem) => typeof elem === 'number');
+        if (json.transform.length !== 9) {
+            throw new Error(`Unable to deserialize transform, ${json.transform}.`);
+        }
+        const transformData = json.transform;
+        const transform = new Mat33(...transformData);
+        return new Text(textObjects, transform, style, getTextDimens);
+    }
 }
+AbstractComponent.registerComponent(componentTypeId, (data) => Text.deserializeFromString(data));

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

@@ -11,5 +11,7 @@ export default class UnknownSVGObject extends AbstractComponent {
     render(canvas: AbstractRenderer, _visibleRect?: Rect2): void;
     intersects(lineSegment: LineSegment2): boolean;
     protected applyTransformation(_affineTransfm: Mat33): void;
+    protected createClone(): AbstractComponent;
     description(localization: ImageComponentLocalization): string;
+    protected serializeToString(): string | null;
 }

package/dist/src/components/UnknownSVGObject.js

@@ -1,9 +1,10 @@
 import Rect2 from '../geometry/Rect2';
 import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import AbstractComponent from './AbstractComponent';
+const componentId = 'unknown-svg-object';
 export default class UnknownSVGObject extends AbstractComponent {
     constructor(svgObject) {
-        super();
+        super(componentId);
         this.svgObject = svgObject;
         this.contentBBox = Rect2.of(svgObject.getBoundingClientRect());
     }
@@ -19,7 +20,17 @@ export default class UnknownSVGObject extends AbstractComponent {
     }
     applyTransformation(_affineTransfm) {
     }
+    createClone() {
+        return new UnknownSVGObject(this.svgObject.cloneNode(true));
+    }
     description(localization) {
         return localization.svgObject;
     }
+    serializeToString() {
+        return JSON.stringify({
+            html: this.svgObject.outerHTML,
+        });
+    }
 }
+// null: Do not deserialize UnknownSVGObjects.
+AbstractComponent.registerComponent(componentId, null);

package/dist/src/components/builders/RectangleBuilder.d.ts

@@ -1,6 +1,7 @@
 import Rect2 from '../../geometry/Rect2';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
+import Viewport from '../../Viewport';
 import AbstractComponent from '../AbstractComponent';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';
 export declare const makeFilledRectangleBuilder: ComponentBuilderFactory;
@@ -8,8 +9,9 @@ export declare const makeOutlinedRectangleBuilder: ComponentBuilderFactory;
 export default class RectangleBuilder implements ComponentBuilder {
     private readonly startPoint;
     private filled;
+    private viewport;
     private endPoint;
-    constructor(startPoint: StrokeDataPoint, filled: boolean);
+    constructor(startPoint: StrokeDataPoint, filled: boolean, viewport: Viewport);
     getBBox(): Rect2;
     private buildPreview;
     build(): AbstractComponent;

package/dist/src/components/builders/RectangleBuilder.js

@@ -1,16 +1,18 @@
+import Mat33 from '../../geometry/Mat33';
 import Path from '../../geometry/Path';
 import Rect2 from '../../geometry/Rect2';
 import Stroke from '../Stroke';
-export const makeFilledRectangleBuilder = (initialPoint, _viewport) => {
-    return new RectangleBuilder(initialPoint, true);
+export const makeFilledRectangleBuilder = (initialPoint, viewport) => {
+    return new RectangleBuilder(initialPoint, true, viewport);
 };
-export const makeOutlinedRectangleBuilder = (initialPoint, _viewport) => {
-    return new RectangleBuilder(initialPoint, false);
+export const makeOutlinedRectangleBuilder = (initialPoint, viewport) => {
+    return new RectangleBuilder(initialPoint, false, viewport);
 };
 export default class RectangleBuilder {
-    constructor(startPoint, filled) {
+    constructor(startPoint, filled, viewport) {
         this.startPoint = startPoint;
         this.filled = filled;
+        this.viewport = viewport;
         // Initially, the start and end points are the same.
         this.endPoint = startPoint;
     }
@@ -19,9 +21,16 @@ export default class RectangleBuilder {
         return preview.getBBox();
     }
     buildPreview() {
-        const startPoint = this.startPoint.pos;
-        const endPoint = this.endPoint.pos;
-        const path = Path.fromRect(Rect2.fromCorners(startPoint, endPoint), this.filled ? null : this.endPoint.width);
+        const canvasAngle = this.viewport.getRotationAngle();
+        const rotationMat = Mat33.zRotation(-canvasAngle);
+        // Adjust startPoint and endPoint such that applying [rotationMat] to them
+        // brings them to this.startPoint and this.endPoint.
+        const startPoint = rotationMat.inverse().transformVec2(this.startPoint.pos);
+        const endPoint = rotationMat.inverse().transformVec2(this.endPoint.pos);
+        const rect = Rect2.fromCorners(startPoint, endPoint);
+        const path = Path.fromRect(rect, this.filled ? null : this.endPoint.width).transformedBy(
+        // Rotate the canvas rectangle so that its rotation matches the screen
+        rotationMat);
         const preview = new Stroke([
             path.toRenderable({
                 fill: this.endPoint.color

package/dist/src/components/util/describeComponentList.d.ts

@@ -0,0 +1,4 @@
+import AbstractComponent from '../AbstractComponent';
+import { ImageComponentLocalization } from '../localization';
+declare const _default: (localizationTable: ImageComponentLocalization, elems: AbstractComponent[]) => string | null;
+export default _default;

package/dist/src/components/util/describeComponentList.js

@@ -0,0 +1,14 @@
+// Returns the description of all given elements, if identical, otherwise,
+// returns null.
+export default (localizationTable, elems) => {
+    if (elems.length === 0) {
+        return null;
+    }
+    const description = elems[0].description(localizationTable);
+    for (const elem of elems) {
+        if (elem.description(localizationTable) !== description) {
+            return null;
+        }
+    }
+    return description;
+};