js-draw 1.27.2 → 1.28.0

package/dist/mjs/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/mjs/image/EditorImage.mjs

@@ -21,7 +21,7 @@ export var EditorImageEventType;
 })(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`
@@ -29,9 +29,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]]
@@ -78,7 +78,7 @@ class EditorImage {
         const parent = this.findParent(elem);
         if (parent) {
             parent.remove();
-            this.addElementDirectly(elem);
+            this.addComponentDirectly(elem);
         }
     }
     /** @internal */
@@ -133,25 +133,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();
         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));
@@ -179,7 +187,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);
@@ -210,12 +218,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.
@@ -346,7 +362,7 @@ class EditorImage {
 }
 _a = EditorImage;
 // A Command that can access private [EditorImage] functionality
-EditorImage.AddElementCommand = (_b = class extends SerializableCommand {
+EditorImage.AddComponentCommand = (_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).
@@ -366,7 +382,7 @@ EditorImage.AddElementCommand = (_b = class extends SerializableCommand {
             }
         }
         apply(editor) {
-            editor.image.addElementDirectly(this.element);
+            editor.image.addComponentDirectly(this.element);
             if (!this.applyByFlattening) {
                 editor.queueRerender();
             }
@@ -380,7 +396,7 @@ EditorImage.AddElementCommand = (_b = class extends SerializableCommand {
             editor.queueRerender();
         }
         description(_editor, localization) {
-            return localization.addElementAction(this.element.description(localization));
+            return localization.addComponentAction(this.element.description(localization));
         }
         serializeToJSON() {
             return {
@@ -388,13 +404,13 @@ EditorImage.AddElementCommand = (_b = class extends SerializableCommand {
             };
         }
     },
-    __setFunctionName(_b, "AddElementCommand"),
+    __setFunctionName(_b, "AddComponentCommand"),
     (() => {
         SerializableCommand.register('add-element', (json, editor) => {
             const id = json.elemData.id;
             const foundElem = editor.image.lookupElement(id);
             const elem = foundElem ?? AbstractComponent.deserialize(json.elemData);
-            const result = new _a.AddElementCommand(elem);
+            const result = new _a.AddComponentCommand(elem);
             result.serializedElem = json.elemData;
             return result;
         });

package/dist/mjs/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/mjs/localizations/de.mjs

@@ -65,9 +65,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/mjs/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/mjs/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/mjs/rendering/renderers/AbstractRenderer.mjs

@@ -140,6 +140,8 @@ export default 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));
     }
@@ -147,6 +149,8 @@ export default 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/mjs/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/mjs/rendering/renderers/CanvasRenderer.mjs

@@ -208,6 +208,20 @@ export default class CanvasRenderer extends AbstractRenderer {
             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;

package/dist/mjs/rendering/renderers/SVGRenderer.d.ts

@@ -15,6 +15,9 @@ type FromViewportOptions = {
      */
     useViewBoxForPositioning?: boolean;
 };
+type DrawWithSVGParentContext = {
+    sanitize: boolean;
+};
 /**
  * Renders onto an `SVGElement`.
  *
@@ -57,7 +60,22 @@ export default class SVGRenderer extends AbstractRenderer {
     protected traceCubicBezierCurve(_controlPoint1: Point2, _controlPoint2: Point2, _endPoint: Point2): void;
     protected traceQuadraticBezierCurve(_controlPoint: Point2, _endPoint: Point2): void;
     drawPoints(...points: Point2[]): void;
+    /**
+     * Adds a **copy** of the given element directly to the container
+     * SVG element, **without applying transforms**.
+     *
+     * If `sanitize` is enabled, this does nothing.
+     */
     drawSVGElem(elem: SVGElement): void;
+    /**
+     * Allows rendering directly to the underlying SVG element. Rendered
+     * content is added to a `<g>` element that's passed as `parent` to `callback`.
+     *
+     * **Note**: Unlike {@link drawSVGElem}, this method can be used even if `sanitize` is `true`.
+     * In this case, it's the responsibility of `callback` to ensure that everything added
+     * to `parent` is safe to render.
+     */
+    drawWithSVGParent(callback: (parent: SVGGElement, context: DrawWithSVGParentContext) => void): void;
     isTooSmallToRender(_rect: Rect2): boolean;
     /**
      * Creates a new SVG element and `SVGRenerer` with `width`, `height`, `viewBox`,

package/dist/mjs/rendering/renderers/SVGRenderer.mjs

@@ -341,7 +341,12 @@ export default class SVGRenderer extends AbstractRenderer {
             this.elem.appendChild(elem);
         });
     }
-    // Renders a **copy** of the given element.
+    /**
+     * Adds a **copy** of the given element directly to the container
+     * SVG element, **without applying transforms**.
+     *
+     * If `sanitize` is enabled, this does nothing.
+     */
     drawSVGElem(elem) {
         if (this.sanitize) {
             return;
@@ -355,6 +360,21 @@ export default class SVGRenderer extends AbstractRenderer {
         this.elem.appendChild(elemToDraw);
         this.objectElems?.push(elemToDraw);
     }
+    /**
+     * Allows rendering directly to the underlying SVG element. Rendered
+     * content is added to a `<g>` element that's passed as `parent` to `callback`.
+     *
+     * **Note**: Unlike {@link drawSVGElem}, this method can be used even if `sanitize` is `true`.
+     * In this case, it's the responsibility of `callback` to ensure that everything added
+     * to `parent` is safe to render.
+     */
+    drawWithSVGParent(callback) {
+        const parent = document.createElementNS(svgNameSpace, 'g');
+        this.transformFrom(Mat33.identity, parent, true);
+        callback(parent, { sanitize: this.sanitize });
+        this.elem.appendChild(parent);
+        this.objectElems?.push(parent);
+    }
     isTooSmallToRender(_rect) {
         return false;
     }

package/dist/mjs/toolbar/utils/HelpDisplay.mjs

@@ -134,6 +134,8 @@ const createHelpPage = (helpItems, onItemClick, onBackgroundClick, context) => {
                 clonedElement.style.margin = '0';
                 const clonedElementContainer = document.createElement('div');
                 clonedElementContainer.classList.add('cloned-element-container');
+                clonedElementContainer.role = 'group';
+                clonedElementContainer.ariaLabel = context.localization.helpControlsAccessibilityLabel;
                 clonedElementContainer.style.position = 'absolute';
                 clonedElementContainer.style.left = `${targetBBox.topLeft.x}px`;
                 clonedElementContainer.style.top = `${targetBBox.topLeft.y}px`;
@@ -152,11 +154,11 @@ const createHelpPage = (helpItems, onItemClick, onBackgroundClick, context) => {
     };
     const onItemChange = () => {
         const helpTextElement = document.createElement('div');
-        helpTextElement.innerText = currentItem?.helpText ?? '';
+        helpTextElement.textContent = currentItem?.helpText ?? '';
         // For tests
         helpTextElement.classList.add('current-item-help');
         const navigationHelpElement = document.createElement('div');
-        navigationHelpElement.innerText = context.localization.helpScreenNavigationHelp;
+        navigationHelpElement.textContent = context.localization.helpScreenNavigationHelp;
         navigationHelpElement.classList.add('navigation-help');
         textLabel.replaceChildren(helpTextElement, ...(currentItemIndex === 0 ? [navigationHelpElement] : []));
         updateClonedElementStates();
@@ -273,8 +275,8 @@ class HelpDisplay {
             navigationButtonContainer.classList.add('navigation-buttons');
             const nextButton = document.createElement('button');
             const previousButton = document.createElement('button');
-            nextButton.innerText = this.context.localization.next;
-            previousButton.innerText = this.context.localization.previous;
+            nextButton.textContent = this.context.localization.next;
+            previousButton.textContent = this.context.localization.previous;
             nextButton.classList.add('next');
             previousButton.classList.add('previous');
             const updateButtonVisibility = () => {

package/dist/mjs/toolbar/utils/localization.d.ts

@@ -1,6 +1,7 @@
 export interface ToolbarUtilsLocalization {
     help: string;
     helpScreenNavigationHelp: string;
+    helpControlsAccessibilityLabel: string;
     helpHidden: string;
     next: string;
     previous: string;

package/dist/mjs/toolbar/utils/localization.mjs

@@ -5,4 +5,5 @@ export const defaultToolbarUtilsLocalization = {
     previous: 'Previous',
     close: 'Close',
     helpScreenNavigationHelp: 'Click on a control for more information.',
+    helpControlsAccessibilityLabel: 'Controls: Activate a control to show help.',
 };

package/dist/mjs/toolbar/widgets/DocumentPropertiesWidget.mjs

@@ -62,7 +62,7 @@ class DocumentPropertiesWidget extends BaseWidget {
     setBackgroundType(backgroundType) {
         const prevBackgroundColor = this.editor.estimateBackgroundColor();
         const newBackground = new BackgroundComponent(backgroundType, prevBackgroundColor);
-        const addBackgroundCommand = this.editor.image.addElement(newBackground);
+        const addBackgroundCommand = this.editor.image.addComponent(newBackground);
         return uniteCommands([this.removeBackgroundComponents(), addBackgroundCommand]);
     }
     /** Returns the type of the topmost background component */

package/dist/mjs/toolbar/widgets/InsertImageWidget/InsertImageWidget.mjs

@@ -270,7 +270,7 @@ class InsertImageWidget extends BaseWidget {
                     const widthAdjustTransform = Mat33.scaling2D(originalWidth / newWidth);
                     const commands = [];
                     for (const component of newComponents) {
-                        commands.push(EditorImage.addElement(component), component.transformBy(originalTransform.rightMul(widthAdjustTransform)), component.setZIndex(editingImage.getZIndex()));
+                        commands.push(EditorImage.addComponent(component), component.transformBy(originalTransform.rightMul(widthAdjustTransform)), component.setZIndex(editingImage.getZIndex()));
                     }
                     this.editor.dispatch(uniteCommands([...commands, eraseCommand]));
                     selectionTools[0]?.setSelection(newComponents);

package/dist/mjs/toolbar/widgets/components/makeGridSelector.mjs

@@ -17,7 +17,7 @@ labelText, defaultId, choices) => {
     outerContainer.classList.add(`${toolbarCSSPrefix}grid-selector`);
     const selectedValue = MutableReactiveValue.fromInitialValue(defaultId);
     const menuContainer = document.createElement('div');
-    menuContainer.setAttribute('role', 'menu');
+    menuContainer.role = 'group';
     menuContainer.id = `${toolbarCSSPrefix}-grid-select-id-${idCounter++}`;
     stopPropagationOfScrollingWheelEvents(menuContainer);
     const label = document.createElement('label');

package/dist/mjs/tools/Eraser.mjs

@@ -139,7 +139,7 @@ export default class Eraser extends BaseTool {
         const line = new LineSegment2(this.lastPoint, currentPoint);
         const region = Rect2.union(line.bbox, eraserRect);
         const intersectingElems = this.editor.image
-            .getElementsIntersectingRegion(region)
+            .getComponentsIntersecting(region)
             .filter((component) => {
             return component.intersects(line) || component.intersectsRect(eraserRect);
         });
@@ -178,7 +178,7 @@ export default class Eraser extends BaseTool {
                 toAdd.push(...targetElem.withRegionErased(erasePath, this.editor.viewport));
             }
             const eraseCommand = new Erase(toErase);
-            const newAddCommands = toAdd.map((elem) => EditorImage.addElement(elem));
+            const newAddCommands = toAdd.map((elem) => EditorImage.addComponent(elem));
             eraseCommand.apply(this.editor);
             newAddCommands.forEach((command) => command.apply(this.editor));
             const finalToErase = [];
@@ -234,7 +234,7 @@ export default class Eraser extends BaseTool {
                     this.toRemove = this.toRemove.filter((other) => other !== item);
                 }
             }
-            commands.push(...[...this.toAdd].map((a) => EditorImage.addElement(a)));
+            commands.push(...[...this.toAdd].map((a) => EditorImage.addComponent(a)));
             this.addCommands = [];
         }
         if (this.eraseCommands.length > 0) {

package/dist/mjs/tools/FindTool.mjs

@@ -22,7 +22,7 @@ export default class FindTool extends BaseTool {
     }
     getMatches(searchFor) {
         const lowerSearchFor = searchFor.toLocaleLowerCase();
-        const matchingComponents = this.editor.image.getAllElements().filter((component) => {
+        const matchingComponents = this.editor.image.getAllComponents().filter((component) => {
             let text = '';
             if (component instanceof TextComponent) {
                 text = component.getText();

package/dist/mjs/tools/PasteHandler.mjs

@@ -71,7 +71,10 @@ export default class PasteHandler extends BaseTool {
     async doSVGPaste(data) {
         this.editor.showLoadingWarning(0);
         try {
-            const loader = SVGLoader.fromString(data, true);
+            const loader = SVGLoader.fromString(data, {
+                sanitize: true,
+                plugins: this.editor.getCurrentSettings().svg?.loaderPlugins ?? [],
+            });
             const components = [];
             await loader.start((component) => {
                 components.push(component);

package/dist/mjs/tools/Pen.mjs

@@ -213,7 +213,7 @@ export default class Pen extends BaseTool {
                     this.editor.announceForAccessibility(this.editor.localization.autocorrectedTo(stroke.description(this.editor.localization)));
                 }
                 const canFlatten = true;
-                const action = EditorImage.addElement(stroke, canFlatten);
+                const action = EditorImage.addComponent(stroke, canFlatten);
                 this.editor.dispatch(action);
             }
             else {

package/dist/mjs/tools/SelectionTool/SelectAllShortcutHandler.mjs

@@ -17,7 +17,7 @@ export default class SelectAllShortcutHandler extends BaseTool {
             if (selectionTools.length > 0) {
                 const selectionTool = selectionTools[0];
                 selectionTool.setEnabled(true);
-                selectionTool.setSelection(this.editor.image.getAllElements());
+                selectionTool.setSelection(this.editor.image.getAllComponents());
                 return true;
             }
         }