js-draw 0.11.2 → 0.12.0

package/dist/src/Color4.d.ts

@@ -39,5 +39,6 @@ export default class Color4 {
     static yellow: Color4;
     static clay: Color4;
     static black: Color4;
+    static gray: Color4;
     static white: Color4;
 }

package/dist/src/Color4.js

@@ -146,4 +146,5 @@ Color4.purple = Color4.ofRGB(0.5, 0.2, 0.5);
 Color4.yellow = Color4.ofRGB(1, 1, 0.1);
 Color4.clay = Color4.ofRGB(0.8, 0.4, 0.2);
 Color4.black = Color4.ofRGB(0, 0, 0);
+Color4.gray = Color4.ofRGB(0.5, 0.5, 0.5);
 Color4.white = Color4.ofRGB(1, 1, 1);

package/dist/src/Editor.js

@@ -188,8 +188,7 @@ export class Editor {
     addToolbar(defaultLayout = true) {
         const toolbar = new HTMLToolbar(this, this.container, this.localization);
         if (defaultLayout) {
-            toolbar.addDefaultToolWidgets();
-            toolbar.addDefaultActionButtons();
+            toolbar.addDefaults();
         }
         return toolbar;
     }
@@ -718,9 +717,9 @@ export class Editor {
         return __awaiter(this, void 0, void 0, function* () {
             this.showLoadingWarning(0);
             this.display.setDraftMode(true);
-            yield loader.start((component) => {
-                this.dispatchNoAnnounce(EditorImage.addElement(component));
-            }, (countProcessed, totalToProcess) => {
+            yield loader.start((component) => __awaiter(this, void 0, void 0, function* () {
+                yield this.dispatchNoAnnounce(EditorImage.addElement(component));
+            }), (countProcessed, totalToProcess) => {
                 if (countProcessed % 500 === 0) {
                     this.showLoadingWarning(countProcessed / totalToProcess);
                     this.rerender();

package/dist/src/EditorImage.js

@@ -244,17 +244,7 @@ export class ImageNode {
             this.bbox = this.content.getBBox();
         }
         else {
-            this.bbox = Rect2.empty;
-            let isFirst = true;
-            for (const child of this.children) {
-                if (isFirst) {
-                    this.bbox = child.getBBox();
-                    isFirst = false;
-                }
-                else {
-                    this.bbox = this.bbox.union(child.getBBox());
-                }
-            }
+            this.bbox = Rect2.union(...this.children.map(child => child.getBBox()));
         }
         if (bubbleUp && !oldBBox.eq(this.bbox)) {
             (_a = this.parent) === null || _a === void 0 ? void 0 : _a.recomputeBBox(true);

package/dist/src/SVGLoader.js

@@ -125,22 +125,24 @@ export default class SVGLoader {
     // Adds a stroke with a single path
     addPath(node) {
         var _a;
-        let elem;
-        try {
-            const strokeData = this.strokeDataFromElem(node);
-            elem = new Stroke(strokeData);
-            this.attachUnrecognisedAttrs(elem, node, new Set([...supportedStrokeFillStyleAttrs, 'd']), new Set(supportedStrokeFillStyleAttrs));
-        }
-        catch (e) {
-            console.error('Invalid path in node', node, '\nError:', e, '\nAdding as an unknown object.');
-            if (this.storeUnknown) {
-                elem = new UnknownSVGObject(node);
+        return __awaiter(this, void 0, void 0, function* () {
+            let elem;
+            try {
+                const strokeData = this.strokeDataFromElem(node);
+                elem = new Stroke(strokeData);
+                this.attachUnrecognisedAttrs(elem, node, new Set([...supportedStrokeFillStyleAttrs, 'd']), new Set(supportedStrokeFillStyleAttrs));
             }
-            else {
-                return;
+            catch (e) {
+                console.error('Invalid path in node', node, '\nError:', e, '\nAdding as an unknown object.');
+                if (this.storeUnknown) {
+                    elem = new UnknownSVGObject(node);
+                }
+                else {
+                    return;
+                }
             }
-        }
-        (_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, elem);
+            yield ((_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, elem));
+        });
     }
     // If given, 'supportedAttrs' will have x, y, etc. attributes that were used in computing the transform added to it,
     // to prevent storing duplicate transform information when saving the component.
@@ -223,14 +225,16 @@ export default class SVGLoader {
     }
     addText(elem) {
         var _a;
-        try {
-            const textElem = this.makeText(elem);
-            (_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, textElem);
-        }
-        catch (e) {
-            console.error('Invalid text object in node', elem, '. Continuing.... Error:', e);
-            this.addUnknownNode(elem);
-        }
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const textElem = this.makeText(elem);
+                yield ((_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, textElem));
+            }
+            catch (e) {
+                console.error('Invalid text object in node', elem, '. Continuing.... Error:', e);
+                this.addUnknownNode(elem);
+            }
+        });
     }
     addImage(elem) {
         var _a, _b, _c;
@@ -243,20 +247,22 @@ export default class SVGLoader {
                 const transform = this.getTransform(elem, supportedAttrs);
                 const imageElem = yield ImageComponent.fromImage(image, transform);
                 this.attachUnrecognisedAttrs(imageElem, elem, new Set(supportedAttrs), new Set(['transform']));
-                (_c = this.onAddComponent) === null || _c === void 0 ? void 0 : _c.call(this, imageElem);
+                yield ((_c = this.onAddComponent) === null || _c === void 0 ? void 0 : _c.call(this, imageElem));
             }
             catch (e) {
                 console.error('Error loading image:', e, '. Element: ', elem, '. Continuing...');
-                this.addUnknownNode(elem);
+                yield this.addUnknownNode(elem);
             }
         });
     }
     addUnknownNode(node) {
         var _a;
-        if (this.storeUnknown) {
-            const component = new UnknownSVGObject(node);
-            (_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, component);
-        }
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.storeUnknown) {
+                const component = new UnknownSVGObject(node);
+                yield ((_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, component));
+            }
+        });
     }
     updateViewBox(node) {
         var _a;
@@ -278,9 +284,11 @@ export default class SVGLoader {
     }
     updateSVGAttrs(node) {
         var _a;
-        if (this.storeUnknown) {
-            (_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, new SVGGlobalAttributesObject(this.getSourceAttrs(node)));
-        }
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.storeUnknown) {
+                yield ((_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, new SVGGlobalAttributesObject(this.getSourceAttrs(node))));
+            }
+        });
     }
     visit(node) {
         var _a;
@@ -292,10 +300,10 @@ export default class SVGLoader {
                     // Continue -- visit the node's children.
                     break;
                 case 'path':
-                    this.addPath(node);
+                    yield this.addPath(node);
                     break;
                 case 'text':
-                    this.addText(node);
+                    yield this.addText(node);
                     visitChildren = false;
                     break;
                 case 'image':
@@ -308,14 +316,14 @@ export default class SVGLoader {
                     this.updateSVGAttrs(node);
                     break;
                 case 'style':
-                    this.addUnknownNode(node);
+                    yield this.addUnknownNode(node);
                     break;
                 default:
                     console.warn('Unknown SVG element,', node);
                     if (!(node instanceof SVGElement)) {
                         console.warn('Element', node, 'is not an SVGElement!', this.storeUnknown ? 'Continuing anyway.' : 'Skipping.');
                     }
-                    this.addUnknownNode(node);
+                    yield this.addUnknownNode(node);
                     return;
             }
             if (visitChildren) {

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

@@ -25,6 +25,7 @@ export default abstract class AbstractComponent {
     getBBox(): Rect2;
     abstract render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
     abstract intersects(lineSegment: LineSegment2): boolean;
+    intersectsRect(rect: Rect2): boolean;
     protected abstract serializeToJSON(): any[] | Record<string, any> | number | string | null;
     protected abstract applyTransformation(affineTransfm: Mat33): void;
     transformBy(affineTransfm: Mat33): SerializableCommand;

package/dist/src/components/AbstractComponent.js

@@ -43,6 +43,21 @@ export default class AbstractComponent {
     getBBox() {
         return this.contentBBox;
     }
+    intersectsRect(rect) {
+        // If this component intersects rect,
+        // it is either contained entirely within rect or intersects one of rect's edges.
+        // If contained within,
+        if (rect.containsRect(this.getBBox())) {
+            return true;
+        }
+        // Calculated bounding boxes can be slightly larger than their actual contents' bounding box.
+        // As such, test with more lines than just the rect's edges.
+        const testLines = [];
+        for (const subregion of rect.divideIntoGrid(2, 2)) {
+            testLines.push(...subregion.getEdges());
+        }
+        return testLines.some(edge => this.intersects(edge));
+    }
     // Returns a command that, when applied, transforms this by [affineTransfm] and
     // updates the editor.
     transformBy(affineTransfm) {

package/dist/src/math/Rect2.d.ts

@@ -45,6 +45,7 @@ export default class Rect2 {
     toString(): string;
     static fromCorners(corner1: Point2, corner2: Point2): Rect2;
     static bboxOf(points: Point2[], margin?: number): Rect2;
+    static union(...rects: Rect2[]): Rect2;
     static of(template: RectTemplate): Rect2;
     static empty: Rect2;
     static unitSquare: Rect2;

package/dist/src/math/Rect2.js

@@ -197,6 +197,26 @@ export default class Rect2 {
         }
         return Rect2.fromCorners(Vec2.of(minX - margin, minY - margin), Vec2.of(maxX + margin, maxY + margin));
     }
+    // @returns a rectangle that contains all of the given rectangles, the bounding box
+    //     of the given rectangles.
+    static union(...rects) {
+        if (rects.length === 0) {
+            return Rect2.empty;
+        }
+        const firstRect = rects[0];
+        let minX = firstRect.topLeft.x;
+        let minY = firstRect.topLeft.y;
+        let maxX = firstRect.bottomRight.x;
+        let maxY = firstRect.bottomRight.y;
+        for (let i = 1; i < rects.length; i++) {
+            const rect = rects[i];
+            minX = Math.min(minX, rect.topLeft.x);
+            minY = Math.min(minY, rect.topLeft.y);
+            maxX = Math.max(maxX, rect.bottomRight.x);
+            maxY = Math.max(maxY, rect.bottomRight.y);
+        }
+        return new Rect2(minX, minY, maxX - minX, maxY - minY);
+    }
     static of(template) {
         var _a, _b, _c, _d;
         const width = (_b = (_a = template.width) !== null && _a !== void 0 ? _a : template.w) !== null && _b !== void 0 ? _b : 0;

package/dist/src/toolbar/HTMLToolbar.d.ts

@@ -3,6 +3,11 @@ import { ToolbarLocalization } from './localization';
 import { ActionButtonIcon } from './types';
 import BaseWidget from './widgets/BaseWidget';
 export declare const toolbarCSSPrefix = "toolbar-";
+interface SpacerOptions {
+    grow: number;
+    minSize: string;
+    maxSize: string;
+}
 export default class HTMLToolbar {
     private editor;
     private localizationTable;
@@ -13,8 +18,45 @@ export default class HTMLToolbar {
     /** @internal */
     constructor(editor: Editor, parent: HTMLElement, localizationTable?: ToolbarLocalization);
     setupColorPickers(): void;
+    /**
+     * Adds an `ActionButtonWidget` or `BaseToolWidget`. The widget should not have already have a parent
+     * (i.e. its `addTo` method should not have been called).
+     *
+     * @example
+     * ```ts
+     * const toolbar = editor.addToolbar();
+     * const insertImageWidget = new InsertImageWidget(editor);
+     * toolbar.addWidget(insertImageWidget);
+     * ```
+     */
     addWidget(widget: BaseWidget): void;
+    /**
+     * Adds a spacer.
+     *
+     * @example
+     * Adding a save button that moves to the very right edge of the toolbar
+     * while keeping the other buttons centered:
+     * ```ts
+     * const toolbar = editor.addToolbar(false);
+     *
+     * toolbar.addSpacer({ grow: 1 });
+     * toolbar.addDefaults();
+     * toolbar.addSpacer({ grow: 1 });
+     *
+     * toolbar.addActionButton({
+     * 	label: 'Save',
+     * 	icon: editor.icons.makeSaveIcon(),
+     * }, () => {
+     * 	  saveCallback();
+     * });
+     * ```
+     */
+    addSpacer(options?: Partial<SpacerOptions>): void;
     serializeState(): string;
+    /**
+     * Deserialize toolbar widgets from the given state.
+     * Assumes that toolbar widgets are in the same order as when state was serialized.
+     */
     deserializeState(state: string): void;
     /**
      * Adds an action button with `title` to this toolbar (or to the given `parent` element).
@@ -25,4 +67,13 @@ export default class HTMLToolbar {
     addUndoRedoButtons(): void;
     addDefaultToolWidgets(): void;
     addDefaultActionButtons(): void;
+    /**
+     * Adds both the default tool widgets and action buttons. Equivalent to
+     * ```ts
+     * toolbar.addDefaultToolWidgets();
+     * toolbar.addDefaultActionButtons();
+     * ```
+     */
+    addDefaults(): void;
 }
+export {};

package/dist/src/toolbar/HTMLToolbar.js

@@ -12,7 +12,8 @@ import EraserWidget from './widgets/EraserToolWidget';
 import SelectionToolWidget from './widgets/SelectionToolWidget';
 import TextToolWidget from './widgets/TextToolWidget';
 import HandToolWidget from './widgets/HandToolWidget';
-import { ActionButtonWidget, InsertImageWidget } from './lib';
+import ActionButtonWidget from './widgets/ActionButtonWidget';
+import InsertImageWidget from './widgets/InsertImageWidget';
 export const toolbarCSSPrefix = 'toolbar-';
 export default class HTMLToolbar {
     /** @internal */
@@ -94,8 +95,17 @@ export default class HTMLToolbar {
             }
         });
     }
-    // Adds an `ActionButtonWidget` or `BaseToolWidget`. The widget should not have already have a parent
-    // (i.e. its `addTo` method should not have been called).
+    /**
+     * Adds an `ActionButtonWidget` or `BaseToolWidget`. The widget should not have already have a parent
+     * (i.e. its `addTo` method should not have been called).
+     *
+     * @example
+     * ```ts
+     * const toolbar = editor.addToolbar();
+     * const insertImageWidget = new InsertImageWidget(editor);
+     * toolbar.addWidget(insertImageWidget);
+     * ```
+     */
     addWidget(widget) {
         // Prevent name collisions
         const id = widget.getUniqueIdIn(this.widgets);
@@ -105,6 +115,41 @@ export default class HTMLToolbar {
         widget.addTo(this.container);
         this.setupColorPickers();
     }
+    /**
+     * Adds a spacer.
+     *
+     * @example
+     * Adding a save button that moves to the very right edge of the toolbar
+     * while keeping the other buttons centered:
+     * ```ts
+     * const toolbar = editor.addToolbar(false);
+     *
+     * toolbar.addSpacer({ grow: 1 });
+     * toolbar.addDefaults();
+     * toolbar.addSpacer({ grow: 1 });
+     *
+     * toolbar.addActionButton({
+     * 	label: 'Save',
+     * 	icon: editor.icons.makeSaveIcon(),
+     * }, () => {
+     * 	  saveCallback();
+     * });
+     * ```
+     */
+    addSpacer(options = {}) {
+        const spacer = document.createElement('div');
+        spacer.classList.add(`${toolbarCSSPrefix}spacer`);
+        if (options.grow) {
+            spacer.style.flexGrow = `${options.grow}`;
+        }
+        if (options.minSize) {
+            spacer.style.minWidth = options.minSize;
+        }
+        if (options.maxSize) {
+            spacer.style.maxWidth = options.maxSize;
+        }
+        this.container.appendChild(spacer);
+    }
     serializeState() {
         const result = {};
         for (const widgetId in this.widgets) {
@@ -112,8 +157,10 @@ export default class HTMLToolbar {
         }
         return JSON.stringify(result);
     }
-    // Deserialize toolbar widgets from the given state.
-    // Assumes that toolbar widgets are in the same order as when state was serialized.
+    /**
+     * Deserialize toolbar widgets from the given state.
+     * Assumes that toolbar widgets are in the same order as when state was serialized.
+     */
     deserializeState(state) {
         const data = JSON.parse(state);
         for (const widgetId in data) {
@@ -188,5 +235,16 @@ export default class HTMLToolbar {
     addDefaultActionButtons() {
         this.addUndoRedoButtons();
     }
+    /**
+     * Adds both the default tool widgets and action buttons. Equivalent to
+     * ```ts
+     * toolbar.addDefaultToolWidgets();
+     * toolbar.addDefaultActionButtons();
+     * ```
+     */
+    addDefaults() {
+        this.addDefaultToolWidgets();
+        this.addDefaultActionButtons();
+    }
 }
 HTMLToolbar.colorisStarted = false;

package/dist/src/toolbar/IconProvider.d.ts

@@ -7,7 +7,7 @@ export default class IconProvider {
     makeUndoIcon(): IconType;
     makeRedoIcon(mirror?: boolean): IconType;
     makeDropdownIcon(): IconType;
-    makeEraserIcon(): IconType;
+    makeEraserIcon(eraserSize?: number): IconType;
     makeSelectionIcon(): IconType;
     /**
      * @param pathData - SVG path data (e.g. `m10,10l30,30z`)

package/dist/src/toolbar/IconProvider.js

@@ -67,19 +67,46 @@ export default class IconProvider {
         icon.setAttribute('viewBox', '0 0 100 100');
         return icon;
     }
-    makeEraserIcon() {
+    makeEraserIcon(eraserSize) {
         const icon = document.createElementNS(svgNamespace, 'svg');
-        // Draw an eraser-like shape
+        eraserSize !== null && eraserSize !== void 0 ? eraserSize : (eraserSize = 10);
+        const scaledSize = eraserSize / 4;
+        const eraserColor = '#ff70af';
+        // Draw an eraser-like shape. Created with Inkscape
         icon.innerHTML = `
 		<g>
-			<rect x=10 y=50 width=80 height=30 rx=10 fill='pink' />
+			<path
+				style="fill:${eraserColor}"
+				stroke="black"
+				transform="rotate(41.35)"
+				d="M 52.5 27
+					C 50 28.9 48.9 31.7 48.9 34.8
+					L 48.9 39.8
+					C 48.9 45.3 53.4 49.8 58.9 49.8
+					L 103.9 49.8
+					C 105.8 49.8 107.6 49.2 109.1 48.3
+					L 110.2 ${scaledSize + 49.5} L 159.7 ${scaledSize + 5}
+					L 157.7 ${-scaledSize + 5.2} L 112.4 ${49.5 - scaledSize}
+					C 113.4 43.5 113.9 41.7 113.9 39.8
+					L 113.9 34.8
+					C 113.9 29.3 109.4 24.8 103.9 24.8
+					L 58.9 24.8
+					C 56.5 24.8 54.3 25.7 52.5 27
+					z "
+				id="path438" />
+
 			<rect
-				x=10 y=10 width=80 height=50
+				stroke="#cc8077"
 				${iconColorFill}
-			/>
+				id="rect218"
+				width="65"
+				height="75"
+				x="48.9"
+				y="-38.7"
+				transform="rotate(41.35)" />
 		</g>
 		`;
-        icon.setAttribute('viewBox', '0 0 100 100');
+        icon.setAttribute('viewBox', '0 0 120 120');
         return icon;
     }
     makeSelectionIcon() {
@@ -353,17 +380,19 @@ export default class IconProvider {
         return icon;
     }
     makeIconFromFactory(pen, factory) {
-        const toolThickness = pen.getThickness();
+        // Increase the thickness we use to generate the icon less with larger actual thicknesses.
+        // We want the icon to be recognisable with a large range of thicknesses.
+        const thickness = Math.sqrt(pen.getThickness()) * 3;
         const nowTime = (new Date()).getTime();
         const startPoint = {
             pos: Vec2.of(10, 10),
-            width: toolThickness / 5,
+            width: thickness,
             color: pen.getColor(),
             time: nowTime - 100,
         };
         const endPoint = {
             pos: Vec2.of(90, 90),
-            width: toolThickness / 5,
+            width: thickness,
             color: pen.getColor(),
             time: nowTime,
         };

package/dist/src/toolbar/widgets/EraserToolWidget.d.ts

@@ -2,9 +2,16 @@ import Editor from '../../Editor';
 import Eraser from '../../tools/Eraser';
 import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
+import { SavedToolbuttonState } from './BaseWidget';
 export default class EraserToolWidget extends BaseToolWidget {
+    private tool;
+    private thicknessInput;
     constructor(editor: Editor, tool: Eraser, localizationTable?: ToolbarLocalization);
     protected getTitle(): string;
     protected createIcon(): Element;
-    protected fillDropdown(_dropdown: HTMLElement): boolean;
+    private updateInputs;
+    private static nextThicknessInputId;
+    protected fillDropdown(dropdown: HTMLElement): boolean;
+    serializeState(): SavedToolbuttonState;
+    deserializeFrom(state: SavedToolbuttonState): void;
 }

package/dist/src/toolbar/widgets/EraserToolWidget.js

@@ -1,16 +1,57 @@
+import { EditorEventType } from '../../types';
+import { toolbarCSSPrefix } from '../HTMLToolbar';
 import BaseToolWidget from './BaseToolWidget';
 export default class EraserToolWidget extends BaseToolWidget {
     constructor(editor, tool, localizationTable) {
         super(editor, tool, 'eraser-tool-widget', localizationTable);
+        this.tool = tool;
+        this.thicknessInput = null;
+        this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
+            if (toolEvt.kind === EditorEventType.ToolUpdated && toolEvt.tool === this.tool) {
+                this.updateInputs();
+                this.updateIcon();
+            }
+        });
     }
     getTitle() {
         return this.localizationTable.eraser;
     }
     createIcon() {
-        return this.editor.icons.makeEraserIcon();
+        return this.editor.icons.makeEraserIcon(this.tool.getThickness());
     }
-    fillDropdown(_dropdown) {
-        // No dropdown associated with the eraser
-        return false;
+    updateInputs() {
+        if (this.thicknessInput) {
+            this.thicknessInput.value = `${this.tool.getThickness()}`;
+        }
+    }
+    fillDropdown(dropdown) {
+        const thicknessLabel = document.createElement('label');
+        this.thicknessInput = document.createElement('input');
+        this.thicknessInput.type = 'range';
+        this.thicknessInput.min = '4';
+        this.thicknessInput.max = '40';
+        this.thicknessInput.oninput = () => {
+            this.tool.setThickness(parseFloat(this.thicknessInput.value));
+        };
+        this.thicknessInput.id = `${toolbarCSSPrefix}eraserThicknessInput${EraserToolWidget.nextThicknessInputId++}`;
+        thicknessLabel.innerText = this.localizationTable.thicknessLabel;
+        thicknessLabel.htmlFor = this.thicknessInput.id;
+        this.updateInputs();
+        dropdown.replaceChildren(thicknessLabel, this.thicknessInput);
+        return true;
+    }
+    serializeState() {
+        return Object.assign(Object.assign({}, super.serializeState()), { thickness: this.tool.getThickness() });
+    }
+    deserializeFrom(state) {
+        super.deserializeFrom(state);
+        if (state.thickness) {
+            const parsedThickness = parseFloat(state.thickness);
+            if (typeof parsedThickness !== 'number' || !isFinite(parsedThickness)) {
+                throw new Error(`Deserializing property ${parsedThickness} is not a number or is not finite.`);
+            }
+            this.tool.setThickness(parsedThickness);
+        }
     }
 }
+EraserToolWidget.nextThicknessInputId = 0;

package/dist/src/toolbar/widgets/PenToolWidget.js

@@ -105,8 +105,8 @@ export default class PenToolWidget extends BaseToolWidget {
         const objectSelectLabel = document.createElement('label');
         const objectTypeSelect = document.createElement('select');
         // Give inputs IDs so we can label them with a <label for=...>Label text</label>
-        thicknessInput.id = `${toolbarCSSPrefix}thicknessInput${PenToolWidget.idCounter++}`;
-        objectTypeSelect.id = `${toolbarCSSPrefix}builderSelect${PenToolWidget.idCounter++}`;
+        thicknessInput.id = `${toolbarCSSPrefix}penThicknessInput${PenToolWidget.idCounter++}`;
+        objectTypeSelect.id = `${toolbarCSSPrefix}penBuilderSelect${PenToolWidget.idCounter++}`;
         thicknessLabel.innerText = this.localizationTable.thicknessLabel;
         thicknessLabel.setAttribute('for', thicknessInput.id);
         objectSelectLabel.innerText = this.localizationTable.selectObjectType;

package/dist/src/toolbar/widgets/SelectionToolWidget.js

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { EditorEventType } from '../../types';
 import ActionButtonWidget from './ActionButtonWidget';
 import BaseToolWidget from './BaseToolWidget';
@@ -13,10 +22,10 @@ export default class SelectionToolWidget extends BaseToolWidget {
             this.editor.dispatch(selection.deleteSelectedObjects());
             this.tool.clearSelection();
         }, localization);
-        const duplicateButton = new ActionButtonWidget(editor, 'duplicate-btn', () => editor.icons.makeDuplicateSelectionIcon(), this.localizationTable.duplicateSelection, () => {
+        const duplicateButton = new ActionButtonWidget(editor, 'duplicate-btn', () => editor.icons.makeDuplicateSelectionIcon(), this.localizationTable.duplicateSelection, () => __awaiter(this, void 0, void 0, function* () {
             const selection = this.tool.getSelection();
-            this.editor.dispatch(selection.duplicateSelectedObjects());
-        }, localization);
+            this.editor.dispatch(yield selection.duplicateSelectedObjects());
+        }), localization);
         this.addSubWidget(resizeButton);
         this.addSubWidget(deleteButton);
         this.addSubWidget(duplicateButton);