js-draw 1.27.1 → 1.28.0

package/dist/mjs/components/Stroke.mjs

@@ -1,5 +1,5 @@
-import { Path, Rect2, PathCommandType, comparePathIndices, stepPathIndexBy, } from '@js-draw/math';
-import  { styleFromJSON, styleToJSON }  from '../rendering/RenderingStyle.mjs';
+import { Path, Rect2, PathCommandType, comparePathIndices, stepPathIndexBy, Color4, } from '@js-draw/math';
+import  { styleFromJSON, styleToJSON, }  from '../rendering/RenderingStyle.mjs';
 import  AbstractComponent  from './AbstractComponent.mjs';
 import  { createRestyleComponentCommand, }  from './RestylableComponent.mjs';
 import  { pathFromRenderable, pathToRenderable, simplifyPathToFullScreenOrEmpty, }  from '../rendering/RenderablePathSpec.mjs';
@@ -69,6 +69,35 @@ export default class Stroke extends AbstractComponent {
         }
         this.contentBBox ??= 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 = Path.fromString(path);
+        }
+        return new Stroke([pathToRenderable(path, { fill: Color4.transparent, stroke: style })]);
+    }
+    /** @see fromStroked */
+    static fromFilled(path, fill) {
+        if (typeof path === 'string') {
+            path = Path.fromString(path);
+        }
+        return new Stroke([pathToRenderable(path, { fill })]);
+    }
     getStyle() {
         if (this.parts.length === 0) {
             return {};

package/dist/mjs/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/mjs/components/TextComponent.mjs

@@ -40,7 +40,7 @@ const defaultTextStyle = {
  * };
  *
  * editor.dispatch(
- *     editor.image.addElement(new TextComponent(['Hello, world'], positioning1, style)),
+ *     editor.image.addComponent(new TextComponent(['Hello, world'], positioning1, style)),
  * );
  *
  *
@@ -51,7 +51,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/mjs/components/builders/PolylineBuilder.mjs

@@ -12,7 +12,7 @@ import  makeShapeFitAutocorrect  from './autocorrect/makeShapeFitAutocorrect.mjs
 export const makePolylineBuilder = makeShapeFitAutocorrect((initialPoint, viewport) => {
     // Fit to a value slightly smaller than the pixel size. A larger value can
     // cause the stroke to appear jagged at some zoom levels.
-    const minFit = viewport.getSizeOfPixelOnCanvas() * 0.75;
+    const minFit = viewport.getSizeOfPixelOnCanvas() * 0.65;
     return new PolylineBuilder(initialPoint, minFit, viewport);
 });
 export default class PolylineBuilder {

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/AbstractToolbar.d.ts

@@ -21,10 +21,10 @@ export type ToolbarActionButtonOptions = {
 export default abstract class AbstractToolbar {
     #private;
     protected editor: Editor;
-    protected localizationTable: ToolbarLocalization;
     private static colorisStarted;
+    protected localizationTable: ToolbarLocalization;
     /** @internal */
-    constructor(editor: Editor, localizationTable?: ToolbarLocalization);
+    constructor(editor: Editor, localizationTable: ToolbarLocalization);
     private closeColorPickerOverlay;
     private setupCloseColorPickerOverlay;
     setupColorPickers(): void;

package/dist/mjs/toolbar/AbstractToolbar.mjs

@@ -12,7 +12,6 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
 var _AbstractToolbar_listeners, _AbstractToolbar_widgetsById, _AbstractToolbar_widgetList, _AbstractToolbar_updateColoris;
 import  { EditorEventType }  from '../types.mjs';
 import { coloris, close as closeColoris, init as colorisInit } from '@melloware/coloris';
-import  { defaultToolbarLocalization }  from './localization.mjs';
 import  SelectionTool  from '../tools/SelectionTool/SelectionTool.mjs';
 import  PanZoomTool  from '../tools/PanZoom.mjs';
 import  TextTool  from '../tools/TextTool.mjs';
@@ -39,14 +38,14 @@ import  { assertIsObject, assertTruthy }  from '../util/assertions.mjs';
  */
 class AbstractToolbar {
     /** @internal */
-    constructor(editor, localizationTable = defaultToolbarLocalization) {
+    constructor(editor, localizationTable) {
         this.editor = editor;
-        this.localizationTable = localizationTable;
         _AbstractToolbar_listeners.set(this, []);
         _AbstractToolbar_widgetsById.set(this, {});
         _AbstractToolbar_widgetList.set(this, []);
         _AbstractToolbar_updateColoris.set(this, null);
         this.closeColorPickerOverlay = null;
+        this.localizationTable = localizationTable ?? editor.localization;
         if (!AbstractToolbar.colorisStarted) {
             colorisInit();
             AbstractToolbar.colorisStarted = true;

package/dist/mjs/toolbar/DropdownToolbar.d.ts

@@ -35,7 +35,7 @@ export default class DropdownToolbar extends AbstractToolbar {
     private widgetOrderCounter;
     private overflowWidget;
     /** @internal */
-    constructor(editor: Editor, parent: HTMLElement, localizationTable?: ToolbarLocalization);
+    constructor(editor: Editor, parent: HTMLElement, localizationTable: ToolbarLocalization);
     private reLayoutQueued;
     private queueReLayout;
     private reLayout;

package/dist/mjs/toolbar/DropdownToolbar.mjs

@@ -1,4 +1,3 @@
-import  { defaultToolbarLocalization }  from './localization.mjs';
 import  OverflowWidget  from './widgets/OverflowWidget.mjs';
 import  AbstractToolbar  from './AbstractToolbar.mjs';
 import  { toolbarCSSPrefix }  from './constants.mjs';
@@ -29,11 +28,11 @@ import  { toolbarCSSPrefix }  from './constants.mjs';
  * - {@link AbstractToolbar.addExitButton}
  */
 export const makeDropdownToolbar = (editor) => {
-    return new DropdownToolbar(editor, editor.getRootElement());
+    return new DropdownToolbar(editor, editor.getRootElement(), editor.localization);
 };
 export default class DropdownToolbar extends AbstractToolbar {
     /** @internal */
-    constructor(editor, parent, localizationTable = defaultToolbarLocalization) {
+    constructor(editor, parent, localizationTable) {
         super(editor, localizationTable);
         // Flex-order of the next widget to be added.
         this.widgetOrderCounter = 0;

package/dist/mjs/toolbar/DropdownToolbar.test.d.ts

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

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');