js-draw 1.27.2 → 1.28.0

package/dist/cjs/commands/Duplicate.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const describeComponentList_1 = __importDefault(require("../components/util/describeComponentList"));
+const assertions_1 = require("../util/assertions");
 const Erase_1 = __importDefault(require("./Erase"));
 const SerializableCommand_1 = __importDefault(require("./SerializableCommand"));
 /**
@@ -16,7 +17,7 @@ const SerializableCommand_1 = __importDefault(require("./SerializableCommand"));
  *
  * // Find all elements intersecting the rectangle with top left (0,0) and
  * // (width,height)=(100,100).
- * const elems = editor.image.getElementsIntersectingRegion(
+ * const elems = editor.image.getComponentsIntersecting(
  * 	new Rect2(0, 0, 100, 100)
  * );
  *
@@ -27,13 +28,24 @@ const SerializableCommand_1 = __importDefault(require("./SerializableCommand"));
  * editor.dispatch(duplicateElems);
  * ```
  *
- * @see {@link Editor.dispatch} {@link EditorImage.getElementsIntersectingRegion}
+ * @see {@link Editor.dispatch} {@link EditorImage.getComponentsIntersecting}
  */
 class Duplicate extends SerializableCommand_1.default {
-    constructor(toDuplicate) {
+    constructor(toDuplicate, 
+    // @internal -- IDs given to the duplicate elements
+    idsForDuplicates) {
         super('duplicate');
         this.toDuplicate = toDuplicate;
-        this.duplicates = toDuplicate.map((elem) => elem.clone());
+        this.duplicates = toDuplicate.map((elem, idx) => {
+            // For collaborative editing, it's important for the clones to have
+            // the same IDs as the originals
+            if (idsForDuplicates && idsForDuplicates[idx]) {
+                return elem.cloneWithId(idsForDuplicates[idx]);
+            }
+            else {
+                return elem.clone();
+            }
+        });
         this.reverse = new Erase_1.default(this.duplicates);
     }
     apply(editor) {
@@ -52,13 +64,42 @@ class Duplicate extends SerializableCommand_1.default {
         return localizationTable.duplicateAction((0, describeComponentList_1.default)(localizationTable, this.duplicates) ?? localizationTable.elements, this.duplicates.length);
     }
     serializeToJSON() {
-        return this.toDuplicate.map((elem) => elem.getId());
+        return {
+            originalIds: this.toDuplicate.map((elem) => elem.getId()),
+            cloneIds: this.duplicates.map((elem) => elem.getId()),
+        };
     }
 }
 (() => {
     SerializableCommand_1.default.register('duplicate', (json, editor) => {
-        const elems = json.map((id) => editor.image.lookupElement(id));
-        return new Duplicate(elems);
+        let originalIds;
+        let cloneIds;
+        // Compatibility with older editors
+        if (Array.isArray(json)) {
+            originalIds = json;
+            cloneIds = [];
+        }
+        else {
+            originalIds = json.originalIds;
+            cloneIds = json.cloneIds;
+        }
+        (0, assertions_1.assertIsStringArray)(originalIds);
+        (0, assertions_1.assertIsStringArray)(cloneIds);
+        // Resolve to elements -- only keep the elements that can be found in the image.
+        const resolvedElements = [];
+        const filteredCloneIds = [];
+        for (let i = 0; i < originalIds.length; i++) {
+            const originalId = originalIds[i];
+            const foundElement = editor.image.lookupElement(originalId);
+            if (!foundElement) {
+                console.warn('Duplicate command: Could not find element with ID', originalId);
+            }
+            else {
+                filteredCloneIds.push(cloneIds[i]);
+                resolvedElements.push(foundElement);
+            }
+        }
+        return new Duplicate(resolvedElements, filteredCloneIds);
     });
 })();
 exports.default = Duplicate;

package/dist/cjs/commands/Duplicate.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/commands/Erase.d.ts

@@ -31,7 +31,7 @@ import SerializableCommand from './SerializableCommand';
  *
  * // Find all elements intersecting the rectangle with top left (-10,-30) and
  * // (width,height)=(50,100).
- * const elems = editor.image.getElementsIntersectingRegion(
+ * const elems = editor.image.getComponentsIntersecting(
  * 	new Rect2(-10, -30, 50, 100)
  * );
  *

package/dist/cjs/commands/Erase.js

@@ -36,7 +36,7 @@ const SerializableCommand_1 = __importDefault(require("./SerializableCommand"));
  *
  * // Find all elements intersecting the rectangle with top left (-10,-30) and
  * // (width,height)=(50,100).
- * const elems = editor.image.getElementsIntersectingRegion(
+ * const elems = editor.image.getComponentsIntersecting(
  * 	new Rect2(-10, -30, 50, 100)
  * );
  *
@@ -68,7 +68,7 @@ class Erase extends SerializableCommand_1.default {
     unapply(editor) {
         for (const part of this.toRemove) {
             if (!editor.image.findParent(part)) {
-                EditorImage_1.default.addElement(part).apply(editor);
+                EditorImage_1.default.addComponent(part).apply(editor);
             }
         }
         this.applied = false;

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

@@ -11,11 +11,11 @@ export interface CommandLocalization {
     duplicatedNoElements: string;
     elements: string;
     updatedViewport: string;
-    transformedElements: (elemCount: number) => string;
+    transformedElements: (elemCount: number, transformDescription: string) => string;
     resizeOutputCommand: (newSize: Rect2) => string;
     enabledAutoresizeOutputCommand: string;
     disabledAutoresizeOutputCommand: string;
-    addElementAction: (elemDescription: string) => string;
+    addComponentAction: (elemDescription: string) => string;
     eraseAction: (elemDescription: string, numElems: number) => string;
     duplicateAction: (elemDescription: string, count: number) => string;
     inverseOf: (actionDescription: string) => string;

package/dist/cjs/commands/localization.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.defaultCommandLocalization = void 0;
 exports.defaultCommandLocalization = {
     updatedViewport: 'Transformed Viewport',
-    transformedElements: (elemCount) => `Transformed ${elemCount} element${elemCount === 1 ? '' : 's'}`,
+    transformedElements: (elemCount, action) => `Transformed ${elemCount} element${elemCount === 1 ? '' : 's'} (${action})`,
     resizeOutputCommand: (newSize) => `Resized image to ${newSize.w}x${newSize.h}`,
     enabledAutoresizeOutputCommand: 'Enabled output autoresize',
     disabledAutoresizeOutputCommand: 'Disabled output autoresize',
-    addElementAction: (componentDescription) => `Added ${componentDescription}`,
+    addComponentAction: (componentDescription) => `Added ${componentDescription}`,
     eraseAction: (componentDescription, numElems) => `Erased ${numElems} ${componentDescription}`,
     duplicateAction: (componentDescription, numElems) => `Duplicated ${numElems} ${componentDescription}`,
     unionOf: (actionDescription, actionCount) => `Union: ${actionCount} ${actionDescription}`,

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

@@ -158,6 +158,13 @@ export default abstract class AbstractComponent {
     abstract description(localizationTable: ImageComponentLocalization): string;
     protected abstract createClone(): AbstractComponent;
     clone(): AbstractComponent;
+    /**
+     * Creates a copy of this component with a particular `id`.
+     * This is used internally by {@link Duplicate} when deserializing.
+     *
+     * @internal -- users of the library shouldn't need this.
+     */
+    cloneWithId(cloneId: string): AbstractComponent;
     /**
      * **Optional method**: Divides this component into sections roughly along the given path,
      * removing parts that are roughly within `shape`.

package/dist/cjs/components/AbstractComponent.js

@@ -13,6 +13,8 @@ const SerializableCommand_1 = __importDefault(require("../commands/SerializableC
 const EditorImage_1 = __importDefault(require("../image/EditorImage"));
 const math_1 = require("@js-draw/math");
 const UnresolvedCommand_1 = __importDefault(require("../commands/UnresolvedCommand"));
+const describeTransformation_1 = __importDefault(require("../util/describeTransformation"));
+const assertions_1 = require("../util/assertions");
 var ComponentSizingMode;
 (function (ComponentSizingMode) {
     /** The default. The compnent gets its size from its bounding box. */
@@ -207,6 +209,17 @@ class AbstractComponent {
         }
         return clone;
     }
+    /**
+     * Creates a copy of this component with a particular `id`.
+     * This is used internally by {@link Duplicate} when deserializing.
+     *
+     * @internal -- users of the library shouldn't need this.
+     */
+    cloneWithId(cloneId) {
+        const clone = this.clone();
+        clone.id = cloneId;
+        return clone;
+    }
     // Convert the component to an object that can be passed to
     // `JSON.stringify`.
     //
@@ -250,6 +263,7 @@ class AbstractComponent {
         if (AbstractComponent.isNotDeserializable(json)) {
             throw new Error(`Element with data ${json} cannot be deserialized.`);
         }
+        (0, assertions_1.assertIsString)(json.id);
         const instance = this.deserializationCallbacks[json.name](json.data);
         instance.id = json.id;
         if (isFinite(json.zIndex)) {
@@ -313,7 +327,7 @@ AbstractComponent.TransformElementCommand = (_a = class extends UnresolvedComman
             }
             // Add the element back to the document.
             if (hadParent) {
-                EditorImage_1.default.addElement(this.component).apply(editor);
+                EditorImage_1.default.addComponent(this.component).apply(editor);
             }
         }
         apply(editor) {
@@ -327,7 +341,7 @@ AbstractComponent.TransformElementCommand = (_a = class extends UnresolvedComman
             editor.queueRerender();
         }
         description(_editor, localizationTable) {
-            return localizationTable.transformedElements(1);
+            return localizationTable.transformedElements(1, (0, describeTransformation_1.default)(math_1.Vec2.zero, this.affineTransfm, false, localizationTable));
         }
         serializeToJSON() {
             return {

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

@@ -1,7 +1,8 @@
 import SerializableCommand from '../commands/SerializableCommand';
-import { Mat33, Path, Rect2, LineSegment2 } from '@js-draw/math';
+import { Mat33, Path, Rect2, LineSegment2, Color4 } from '@js-draw/math';
 import Editor from '../Editor';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
+import { StrokeStyle } from '../rendering/RenderingStyle';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 import RestyleableComponent, { ComponentStyle } from './RestylableComponent';
@@ -48,6 +49,25 @@ export default class Stroke extends AbstractComponent implements RestyleableComp
      * ```
      */
     constructor(parts: RenderablePathSpec[], initialZIndex?: number);
+    /**
+     * Creates a new `Stroke` from a {@link Path} and `style`. Strokes created
+     * with this method have transparent fill.
+     *
+     * Example:
+     * ```ts,runnable
+     * import { Editor, Stroke, Color4 } from 'js-draw';
+     * const editor = new Editor(document.body);
+     * ---visible---
+     * const stroke = Stroke.fromStroked('m0,0 l10,10', { width: 10, color: Color4.red });
+     * editor.dispatch(editor.image.addComponent(stroke));
+     * ```
+     * Notice that `path` can be a string that specifies an SVG path
+     *
+     * @see fromFilled
+     */
+    static fromStroked(path: Path | string, style: StrokeStyle): Stroke;
+    /** @see fromStroked */
+    static fromFilled(path: Path | string, fill: Color4): Stroke;
     getStyle(): ComponentStyle;
     updateStyle(style: ComponentStyle): SerializableCommand;
     forceStyle(style: ComponentStyle, editor: Editor | null): void;

package/dist/cjs/components/Stroke.js

@@ -74,6 +74,35 @@ class Stroke extends AbstractComponent_1.default {
         }
         this.contentBBox ??= math_1.Rect2.empty;
     }
+    /**
+     * Creates a new `Stroke` from a {@link Path} and `style`. Strokes created
+     * with this method have transparent fill.
+     *
+     * Example:
+     * ```ts,runnable
+     * import { Editor, Stroke, Color4 } from 'js-draw';
+     * const editor = new Editor(document.body);
+     * ---visible---
+     * const stroke = Stroke.fromStroked('m0,0 l10,10', { width: 10, color: Color4.red });
+     * editor.dispatch(editor.image.addComponent(stroke));
+     * ```
+     * Notice that `path` can be a string that specifies an SVG path
+     *
+     * @see fromFilled
+     */
+    static fromStroked(path, style) {
+        if (typeof path === 'string') {
+            path = math_1.Path.fromString(path);
+        }
+        return new Stroke([(0, RenderablePathSpec_1.pathToRenderable)(path, { fill: math_1.Color4.transparent, stroke: style })]);
+    }
+    /** @see fromStroked */
+    static fromFilled(path, fill) {
+        if (typeof path === 'string') {
+            path = math_1.Path.fromString(path);
+        }
+        return new Stroke([(0, RenderablePathSpec_1.pathToRenderable)(path, { fill })]);
+    }
     getStyle() {
         if (this.parts.length === 0) {
             return {};

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

@@ -38,7 +38,7 @@ type TextElement = TextComponent | string;
  * };
  *
  * editor.dispatch(
- *     editor.image.addElement(new TextComponent(['Hello, world'], positioning1, style)),
+ *     editor.image.addComponent(new TextComponent(['Hello, world'], positioning1, style)),
  * );
  *
  *
@@ -49,7 +49,7 @@ type TextElement = TextComponent | string;
  * // is placed directly after 'Test'.
  * const positioning2 = Mat33.translation(Vec2.of(10, 50));
  * editor.dispatch(
- *     editor.image.addElement(
+ *     editor.image.addComponent(
  *         new TextComponent([ new TextComponent(['Test'], positioning1, style), '[Test]' ], positioning2, style)
  *     ),
  * );

package/dist/cjs/components/TextComponent.js

@@ -46,7 +46,7 @@ const defaultTextStyle = {
  * };
  *
  * editor.dispatch(
- *     editor.image.addElement(new TextComponent(['Hello, world'], positioning1, style)),
+ *     editor.image.addComponent(new TextComponent(['Hello, world'], positioning1, style)),
  * );
  *
  *
@@ -57,7 +57,7 @@ const defaultTextStyle = {
  * // is placed directly after 'Test'.
  * const positioning2 = Mat33.translation(Vec2.of(10, 50));
  * editor.dispatch(
- *     editor.image.addElement(
+ *     editor.image.addComponent(
  *         new TextComponent([ new TextComponent(['Test'], positioning1, style), '[Test]' ], positioning2, style)
  *     ),
  * );

package/dist/cjs/image/EditorImage.d.ts

@@ -22,7 +22,7 @@ export type EditorImageNotifier = EventDispatcher<EditorImageEventType, {
  */
 export type PreRenderComponentCallback = (component: AbstractComponent, componentsProcessed: number, totalComponents: number) => Promise<boolean>;
 /**
- * @summary Handles lookup/storage of elements in the image.
+ * Handles lookup/storage of elements in the image.
  *
  * `js-draw` images are made up of a collection of {@link AbstractComponent}s (which
  * includes {@link Stroke}s, {@link TextComponent}s, etc.). An `EditorImage`
@@ -30,9 +30,9 @@ export type PreRenderComponentCallback = (component: AbstractComponent, componen
  *
  * Here's how to do a few common operations:
  * - **Get all components in a {@link @js-draw/math!Rect2 | Rect2}**:
- *    {@link EditorImage.getElementsIntersectingRegion}.
+ *    {@link EditorImage.getComponentsIntersecting}.
  * - **Draw an `EditorImage` onto a canvas/SVG**: {@link EditorImage.render}.
- * - **Adding a new component**: {@link EditorImage.addElement}.
+ * - **Adding a new component**: {@link EditorImage.addComponent}.
  *
  * **Example**:
  * [[include:doc-pages/inline-examples/image-add-and-lookup.md]]
@@ -82,19 +82,23 @@ export default class EditorImage {
      * @returns all elements in the image, sorted by z-index (low to high).
      *
      * This can be slow for large images. If you only need all elemenst in part of the image,
-     * consider using {@link getElementsIntersectingRegion} instead.
+     * consider using {@link getComponentsIntersecting} instead.
      *
      * **Note**: The result does not include background elements. See {@link getBackgroundComponents}.
      */
+    getAllComponents(): AbstractComponent[];
+    /** @deprecated in favor of {@link getAllComponents} */
     getAllElements(): AbstractComponent[];
     /** Returns the number of elements added to this image. @internal */
     estimateNumElements(): number;
+    /** @deprecated @see getComponentsIntersecting */
+    getElementsIntersectingRegion(region: Rect2, includeBackground?: boolean): AbstractComponent[];
     /**
      * @returns a list of `AbstractComponent`s intersecting `region`, sorted by increasing z-index.
      *
      * Components in the background layer are only included if `includeBackground` is `true`.
      */
-    getElementsIntersectingRegion(region: Rect2, includeBackground?: boolean): AbstractComponent[];
+    getComponentsIntersecting(region: Rect2, includeBackground?: boolean): AbstractComponent[];
     /** Called whenever (just after) an element is completely removed. @internal */
     onDestroyElement(elem: AbstractComponent): void;
     /** Called just after an element is added. @internal */
@@ -105,7 +109,7 @@ export default class EditorImage {
      * @see {@link AbstractComponent.getId}
      */
     lookupElement(id: string): AbstractComponent | null;
-    private addElementDirectly;
+    private addComponentDirectly;
     private removeElementDirectly;
     /**
      * Returns a command that adds the given element to the `EditorImage`.
@@ -118,10 +122,14 @@ export default class EditorImage {
      *
      * [[include:doc-pages/inline-examples/adding-a-stroke.md]]
      */
-    static addElement(elem: AbstractComponent, applyByFlattening?: boolean): SerializableCommand;
-    /** @see EditorImage.addElement */
+    static addComponent(elem: AbstractComponent, applyByFlattening?: boolean): SerializableCommand;
+    /** @see EditorImage.addComponent */
+    addComponent(component: AbstractComponent, applyByFlattening?: boolean): SerializableCommand;
+    /** Alias for {@link addComponent}. @deprecated Prefer `.addComponent` */
     addElement(elem: AbstractComponent, applyByFlattening?: boolean): SerializableCommand;
-    private static AddElementCommand;
+    /** Alias for {@link addComponent}. @deprecated Prefer `.addComponent`. */
+    static addElement(elem: AbstractComponent, applyByFlattening?: boolean): SerializableCommand;
+    private static AddComponentCommand;
     /**
      * @returns a `Viewport` for rendering the image when importing/exporting.
      */

package/dist/cjs/image/EditorImage.js

@@ -61,7 +61,7 @@ var EditorImageEventType;
 })(EditorImageEventType || (exports.EditorImageEventType = EditorImageEventType = {}));
 let debugMode = false;
 /**
- * @summary Handles lookup/storage of elements in the image.
+ * Handles lookup/storage of elements in the image.
  *
  * `js-draw` images are made up of a collection of {@link AbstractComponent}s (which
  * includes {@link Stroke}s, {@link TextComponent}s, etc.). An `EditorImage`
@@ -69,9 +69,9 @@ let debugMode = false;
  *
  * Here's how to do a few common operations:
  * - **Get all components in a {@link @js-draw/math!Rect2 | Rect2}**:
- *    {@link EditorImage.getElementsIntersectingRegion}.
+ *    {@link EditorImage.getComponentsIntersecting}.
  * - **Draw an `EditorImage` onto a canvas/SVG**: {@link EditorImage.render}.
- * - **Adding a new component**: {@link EditorImage.addElement}.
+ * - **Adding a new component**: {@link EditorImage.addComponent}.
  *
  * **Example**:
  * [[include:doc-pages/inline-examples/image-add-and-lookup.md]]
@@ -118,7 +118,7 @@ class EditorImage {
         const parent = this.findParent(elem);
         if (parent) {
             parent.remove();
-            this.addElementDirectly(elem);
+            this.addComponentDirectly(elem);
         }
     }
     /** @internal */
@@ -173,25 +173,33 @@ class EditorImage {
      * @returns all elements in the image, sorted by z-index (low to high).
      *
      * This can be slow for large images. If you only need all elemenst in part of the image,
-     * consider using {@link getElementsIntersectingRegion} instead.
+     * consider using {@link getComponentsIntersecting} instead.
      *
      * **Note**: The result does not include background elements. See {@link getBackgroundComponents}.
      */
-    getAllElements() {
+    getAllComponents() {
         const leaves = this.root.getLeaves();
         (0, exports.sortLeavesByZIndex)(leaves);
         return leaves.map((leaf) => leaf.getContent());
     }
+    /** @deprecated in favor of {@link getAllComponents} */
+    getAllElements() {
+        return this.getAllComponents();
+    }
     /** Returns the number of elements added to this image. @internal */
     estimateNumElements() {
         return this.componentCount;
     }
+    /** @deprecated @see getComponentsIntersecting */
+    getElementsIntersectingRegion(region, includeBackground = false) {
+        return this.getComponentsIntersecting(region, includeBackground);
+    }
     /**
      * @returns a list of `AbstractComponent`s intersecting `region`, sorted by increasing z-index.
      *
      * Components in the background layer are only included if `includeBackground` is `true`.
      */
-    getElementsIntersectingRegion(region, includeBackground = false) {
+    getComponentsIntersecting(region, includeBackground = false) {
         let leaves = this.root.getLeavesIntersectingRegion(region);
         if (includeBackground) {
             leaves = leaves.concat(this.background.getLeavesIntersectingRegion(region));
@@ -219,7 +227,7 @@ class EditorImage {
     lookupElement(id) {
         return this.componentsById[id] ?? null;
     }
-    addElementDirectly(elem) {
+    addComponentDirectly(elem) {
         // Because onAddToImage can affect the element's bounding box,
         // this needs to be called before parentTree.addLeaf.
         elem.onAddToImage(this);
@@ -250,12 +258,20 @@ class EditorImage {
      *
      * [[include:doc-pages/inline-examples/adding-a-stroke.md]]
      */
-    static addElement(elem, applyByFlattening = false) {
-        return new _a.AddElementCommand(elem, applyByFlattening);
+    static addComponent(elem, applyByFlattening = false) {
+        return new _a.AddComponentCommand(elem, applyByFlattening);
+    }
+    /** @see EditorImage.addComponent */
+    addComponent(component, applyByFlattening) {
+        return _a.addComponent(component, applyByFlattening);
     }
-    /** @see EditorImage.addElement */
+    /** Alias for {@link addComponent}. @deprecated Prefer `.addComponent` */
     addElement(elem, applyByFlattening) {
-        return _a.addElement(elem, applyByFlattening);
+        return this.addComponent(elem, applyByFlattening);
+    }
+    /** Alias for {@link addComponent}. @deprecated Prefer `.addComponent`. */
+    static addElement(elem, applyByFlattening = false) {
+        return this.addComponent(elem, applyByFlattening);
     }
     /**
      * @returns a `Viewport` for rendering the image when importing/exporting.
@@ -386,7 +402,7 @@ class EditorImage {
 }
 _a = EditorImage;
 // A Command that can access private [EditorImage] functionality
-EditorImage.AddElementCommand = (_b = class extends SerializableCommand_1.default {
+EditorImage.AddComponentCommand = (_b = class extends SerializableCommand_1.default {
         // 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).
@@ -406,7 +422,7 @@ EditorImage.AddElementCommand = (_b = class extends SerializableCommand_1.defaul
             }
         }
         apply(editor) {
-            editor.image.addElementDirectly(this.element);
+            editor.image.addComponentDirectly(this.element);
             if (!this.applyByFlattening) {
                 editor.queueRerender();
             }
@@ -420,7 +436,7 @@ EditorImage.AddElementCommand = (_b = class extends SerializableCommand_1.defaul
             editor.queueRerender();
         }
         description(_editor, localization) {
-            return localization.addElementAction(this.element.description(localization));
+            return localization.addComponentAction(this.element.description(localization));
         }
         serializeToJSON() {
             return {
@@ -428,13 +444,13 @@ EditorImage.AddElementCommand = (_b = class extends SerializableCommand_1.defaul
             };
         }
     },
-    __setFunctionName(_b, "AddElementCommand"),
+    __setFunctionName(_b, "AddComponentCommand"),
     (() => {
         SerializableCommand_1.default.register('add-element', (json, editor) => {
             const id = json.elemData.id;
             const foundElem = editor.image.lookupElement(id);
             const elem = foundElem ?? AbstractComponent_1.default.deserialize(json.elemData);
-            const result = new _a.AddElementCommand(elem);
+            const result = new _a.AddComponentCommand(elem);
             result.serializedElem = json.elemData;
             return result;
         });

package/dist/cjs/lib.d.ts

@@ -20,7 +20,7 @@ export * from './types';
 export * from './inputEvents';
 export { default as getLocalizationTable, matchingLocalizationTable, } from './localizations/getLocalizationTable';
 export * from './localization';
-export { default as SVGLoader } from './SVGLoader/SVGLoader';
+export { default as SVGLoader, SVGLoaderPlugin } from './SVGLoader/SVGLoader';
 export { default as Viewport } from './Viewport';
 export * from '@js-draw/math';
 export * from './components/lib';

package/dist/cjs/localizations/de.js

@@ -67,9 +67,9 @@ const localization = {
     toolEnabledAnnouncement: (toolName) => `${toolName} aktiviert`,
     toolDisabledAnnouncement: (toolName) => `${toolName} deaktiviert`,
     updatedViewport: 'Transformierte Ansicht',
-    transformedElements: (elemCount) => `${elemCount} Element${1 === elemCount ? '' : 'e'} transformiert`,
+    transformedElements: (elemCount, action) => `${elemCount} Element${1 === elemCount ? '' : 'e'} transformiert (${action})`,
     resizeOutputCommand: (newSize) => `Bildgröße auf ${newSize.w}x${newSize.h} geändert`,
-    addElementAction: (componentDescription) => `${componentDescription} hinzugefügt`,
+    addComponentAction: (componentDescription) => `${componentDescription} hinzugefügt`,
     eraseAction: (elemDescription, countErased) => `${countErased} ${elemDescription} gelöscht`,
     duplicateAction: (elemDescription, countErased) => `${countErased} ${elemDescription} dupliziert`,
     inverseOf: (actionDescription) => `${actionDescription} umgekehrt`,

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

@@ -1,11 +1,12 @@
 import { Color4 } from '@js-draw/math';
-interface RenderingStyle {
+export interface StrokeStyle {
+    readonly color: Color4;
+    /** Note: The stroke `width` is twice the stroke radius. */
+    readonly width: number;
+}
+export interface RenderingStyle {
     readonly fill: Color4;
-    readonly stroke?: {
-        readonly color: Color4;
-        /** Note: The stroke `width` is twice the stroke radius. */
-        readonly width: number;
-    };
+    readonly stroke?: StrokeStyle;
 }
 export default RenderingStyle;
 export declare const cloneStyle: (style: RenderingStyle) => {

package/dist/cjs/rendering/lib.d.ts

@@ -4,5 +4,5 @@ export { default as SVGRenderer } from './renderers/SVGRenderer';
 export { default as CanvasRenderer } from './renderers/CanvasRenderer';
 export { default as Display, RenderingMode } from './Display';
 export { default as TextRenderingStyle } from './TextRenderingStyle';
-export { default as RenderingStyle } from './RenderingStyle';
+export { default as RenderingStyle, StrokeStyle as StrokeRenerdingStyle } from './RenderingStyle';
 export { pathToRenderable, pathFromRenderable, visualEquivalent as pathVisualEquivalent, default as RenderablePathSpec, } from './RenderablePathSpec';

package/dist/cjs/rendering/renderers/AbstractRenderer.js

@@ -142,6 +142,8 @@ class AbstractRenderer {
         this.selfTransform = transform;
     }
     pushTransform(transform) {
+        // Draw all pending paths that used the previous transform (if any).
+        this.flushPath();
         this.transformStack.push(this.selfTransform);
         this.setTransform(this.getCanvasToScreenTransform().rightMul(transform));
     }
@@ -149,6 +151,8 @@ class AbstractRenderer {
         if (this.transformStack.length === 0) {
             throw new Error('Unable to pop more transforms than have been pushed!');
         }
+        // Draw all pending paths that used the old transform (if any):
+        this.flushPath();
         this.setTransform(this.transformStack.pop() ?? null);
     }
     // Get the matrix that transforms a vector on the canvas to a vector on this'

package/dist/cjs/rendering/renderers/CanvasRenderer.d.ts

@@ -42,6 +42,15 @@ export default class CanvasRenderer extends AbstractRenderer {
     private clipLevels;
     startObject(boundingBox: Rect2, clip?: boolean): void;
     endObject(): void;
+    /**
+     * Returns a reference to the underlying `CanvasRenderingContext2D`.
+     * This can be used to render custom content not supported by {@link AbstractRenderer}.
+     * However, such content won't support {@link SVGRenderer} or {@link TextOnlyRenderer}
+     * by default.
+     *
+     * Use with caution.
+     */
+    drawWithRawRenderingContext(callback: (ctx: CanvasRenderingContext2D) => void): void;
     drawPoints(...points: Point2[]): void;
     isTooSmallToRender(rect: Rect2): boolean;
     static fromViewport(exportViewport: Viewport, options?: {

package/dist/cjs/rendering/renderers/CanvasRenderer.js

@@ -213,6 +213,20 @@ class CanvasRenderer extends AbstractRenderer_1.default {
             this.ignoringObject = false;
         }
     }
+    /**
+     * Returns a reference to the underlying `CanvasRenderingContext2D`.
+     * This can be used to render custom content not supported by {@link AbstractRenderer}.
+     * However, such content won't support {@link SVGRenderer} or {@link TextOnlyRenderer}
+     * by default.
+     *
+     * Use with caution.
+     */
+    drawWithRawRenderingContext(callback) {
+        this.ctx.save();
+        this.transformBy(this.getCanvasToScreenTransform());
+        callback(this.ctx);
+        this.ctx.restore();
+    }
     // @internal
     drawPoints(...points) {
         const pointRadius = 10;