js-draw 1.5.0 → 1.6.0

package/dist/cjs/components/Stroke.js

@@ -37,7 +37,7 @@ class Stroke extends AbstractComponent_1.default {
      *
      * const stroke = new Stroke([
      *     // Fill with red
-     *     path.toRenderable({ fill: Color4.red })
+     *     pathToRenderable({ fill: Color4.red })
      * ]);
      * ```
      */

package/dist/cjs/image/EditorImage.js

@@ -58,7 +58,7 @@ class EditorImage {
         this.settingExportRect = false;
         this.root = new RootImageNode();
         this.background = new RootImageNode();
-        this.componentsById = {};
+        this.componentsById = Object.create(null);
         this.notifier = new EventDispatcher_1.default();
         this.importExportViewport = new Viewport_1.default(() => {
             this.onExportViewportChanged();

package/dist/cjs/toolbar/AbstractToolbar.d.ts

@@ -162,7 +162,10 @@ export default abstract class AbstractToolbar {
      * Adds both the default tool widgets and action buttons.
      */
     abstract addDefaults(): void;
-    /** Remove this toolbar from its container and clean up listeners. */
+    /**
+     * Remove this toolbar from its container and clean up listeners.
+     * This should only be called **once** for a given toolbar.
+     */
     remove(): void;
     /**
      * Removes `listener` when {@link remove} is called.

package/dist/cjs/toolbar/AbstractToolbar.js

@@ -404,7 +404,10 @@ class AbstractToolbar {
     addDefaultActionButtons() {
         this.addUndoRedoButtons();
     }
-    /** Remove this toolbar from its container and clean up listeners. */
+    /**
+     * Remove this toolbar from its container and clean up listeners.
+     * This should only be called **once** for a given toolbar.
+     */
     remove() {
         this.closeColorPickerOverlay?.remove();
         for (const listener of __classPrivateFieldGet(this, _AbstractToolbar_listeners, "f")) {
@@ -412,6 +415,9 @@ class AbstractToolbar {
         }
         __classPrivateFieldSet(this, _AbstractToolbar_listeners, [], "f");
         this.onRemove();
+        for (const widget of __classPrivateFieldGet(this, _AbstractToolbar_widgetList, "f")) {
+            widget.remove();
+        }
     }
     /**
      * Removes `listener` when {@link remove} is called.

package/dist/cjs/toolbar/widgets/BaseToolWidget.js

@@ -3,7 +3,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const types_1 = require("../../types");
 const BaseWidget_1 = __importDefault(require("./BaseWidget"));
 const constants_1 = require("../constants");
 const isToolWidgetFocused = () => {
@@ -14,11 +13,8 @@ class BaseToolWidget extends BaseWidget_1.default {
     constructor(editor, targetTool, id, localizationTable) {
         super(editor, id, localizationTable);
         this.targetTool = targetTool;
-        editor.notifier.on(types_1.EditorEventType.ToolEnabled, toolEvt => {
-            if (toolEvt.kind !== types_1.EditorEventType.ToolEnabled) {
-                throw new Error('Incorrect event type! (Expected ToolEnabled)');
-            }
-            if (toolEvt.tool === targetTool) {
+        this.targetTool.enabledValue().onUpdateAndNow(enabled => {
+            if (enabled) {
                 this.setSelected(true);
                 // Transfer focus to the current button, only if another toolbar button is
                 // focused.
@@ -28,12 +24,7 @@ class BaseToolWidget extends BaseWidget_1.default {
                     this.focus();
                 }
             }
-        });
-        editor.notifier.on(types_1.EditorEventType.ToolDisabled, toolEvt => {
-            if (toolEvt.kind !== types_1.EditorEventType.ToolDisabled) {
-                throw new Error('Incorrect event type! (Expected ToolDisabled)');
-            }
-            if (toolEvt.tool === targetTool) {
+            else {
                 this.setSelected(false);
                 this.setDropdownVisible(false);
             }
@@ -57,7 +48,7 @@ class BaseToolWidget extends BaseWidget_1.default {
         }
     }
     onKeyPress(event) {
-        if (this.isSelected() && event.key === ' ' && this.hasDropdown) {
+        if (this.isSelected() && event.code === 'Space' && this.hasDropdown) {
             this.handleClick();
             return true;
         }

package/dist/cjs/toolbar/widgets/BaseToolWidget.test.d.ts

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

package/dist/cjs/toolbar/widgets/BaseWidget.d.ts

@@ -81,13 +81,17 @@ export default abstract class BaseWidget {
      * @internal
      */
     addTo(parent: HTMLElement): HTMLElement;
+    /**
+     * Remove this. This allows the widget to be added to a toolbar again
+     * in the future using {@link addTo}.
+     */
+    remove(): void;
     focus(): void;
     /**
      * @internal
      */
     addCSSClassToContainer(className: string): void;
     removeCSSClassFromContainer(className: string): void;
-    remove(): void;
     protected updateIcon(): void;
     setDisabled(disabled: boolean): void;
     setSelected(selected: boolean): void;

package/dist/cjs/toolbar/widgets/BaseWidget.js

@@ -13,7 +13,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-var _BaseWidget_hasDropdown, _BaseWidget_disabledDueToReadOnlyEditor, _BaseWidget_tags, _BaseWidget_readOnlyListener;
+var _BaseWidget_instances, _BaseWidget_hasDropdown, _BaseWidget_disabledDueToReadOnlyEditor, _BaseWidget_tags, _BaseWidget_removeEditorListeners, _BaseWidget_addEditorListeners;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToolbarWidgetTag = void 0;
 const ToolbarShortcutHandler_1 = __importDefault(require("../../tools/ToolbarShortcutHandler"));
@@ -32,6 +32,7 @@ var ToolbarWidgetTag;
 })(ToolbarWidgetTag || (exports.ToolbarWidgetTag = ToolbarWidgetTag = {}));
 class BaseWidget {
     constructor(editor, id, localizationTable) {
+        _BaseWidget_instances.add(this);
         this.editor = editor;
         this.id = id;
         this.dropdown = null;
@@ -44,8 +45,7 @@ class BaseWidget {
         // Maps subWidget IDs to subWidgets.
         this.subWidgets = {};
         this.toplevel = true;
-        // Listens for changes in whether the editor is read-only
-        _BaseWidget_readOnlyListener.set(this, null);
+        _BaseWidget_removeEditorListeners.set(this, null);
         this.localizationTable = localizationTable ?? editor.localization;
         // Default layout manager
         const defaultLayoutManager = new DropdownLayoutManager_1.default((text) => this.editor.announceForAccessibility(text), this.localizationTable);
@@ -66,12 +66,6 @@ class BaseWidget {
         this.button.oncontextmenu = event => {
             event.preventDefault();
         };
-        const toolbarShortcutHandlers = this.editor.toolController.getMatchingTools(ToolbarShortcutHandler_1.default);
-        // If the onKeyPress function has been extended and the editor is configured to send keypress events to
-        // toolbar widgets,
-        if (toolbarShortcutHandlers.length > 0 && this.onKeyPress !== BaseWidget.prototype.onKeyPress) {
-            toolbarShortcutHandlers[0].registerListener(event => this.onKeyPress(event));
-        }
     }
     /**
      * Should return a constant true or false value. If true (the default),
@@ -274,22 +268,18 @@ class BaseWidget {
         if (this.container.parentElement) {
             this.container.remove();
         }
-        __classPrivateFieldSet(this, _BaseWidget_readOnlyListener, this.editor.isReadOnlyReactiveValue().onUpdateAndNow(readOnly => {
-            if (readOnly && this.shouldAutoDisableInReadOnlyEditor() && !this.disabled) {
-                this.setDisabled(true);
-                __classPrivateFieldSet(this, _BaseWidget_disabledDueToReadOnlyEditor, true, "f");
-                if (__classPrivateFieldGet(this, _BaseWidget_hasDropdown, "f")) {
-                    this.dropdown?.requestHide();
-                }
-            }
-            else if (!readOnly && __classPrivateFieldGet(this, _BaseWidget_disabledDueToReadOnlyEditor, "f")) {
-                __classPrivateFieldSet(this, _BaseWidget_disabledDueToReadOnlyEditor, false, "f");
-                this.setDisabled(false);
-            }
-        }), "f");
+        __classPrivateFieldGet(this, _BaseWidget_instances, "m", _BaseWidget_addEditorListeners).call(this);
         parent.appendChild(this.container);
         return this.container;
     }
+    /**
+     * Remove this. This allows the widget to be added to a toolbar again
+     * in the future using {@link addTo}.
+     */
+    remove() {
+        this.container.remove();
+        __classPrivateFieldGet(this, _BaseWidget_removeEditorListeners, "f")?.call(this);
+    }
     focus() {
         this.button.focus();
     }
@@ -302,11 +292,6 @@ class BaseWidget {
     removeCSSClassFromContainer(className) {
         this.container.classList.remove(className);
     }
-    remove() {
-        this.container.remove();
-        __classPrivateFieldGet(this, _BaseWidget_readOnlyListener, "f")?.remove();
-        __classPrivateFieldSet(this, _BaseWidget_readOnlyListener, null, "f");
-    }
     updateIcon() {
         let newIcon = this.createIcon();
         if (!newIcon) {
@@ -443,5 +428,37 @@ class BaseWidget {
         }
     }
 }
-_BaseWidget_hasDropdown = new WeakMap(), _BaseWidget_disabledDueToReadOnlyEditor = new WeakMap(), _BaseWidget_tags = new WeakMap(), _BaseWidget_readOnlyListener = new WeakMap();
+_BaseWidget_hasDropdown = new WeakMap(), _BaseWidget_disabledDueToReadOnlyEditor = new WeakMap(), _BaseWidget_tags = new WeakMap(), _BaseWidget_removeEditorListeners = new WeakMap(), _BaseWidget_instances = new WeakSet(), _BaseWidget_addEditorListeners = function _BaseWidget_addEditorListeners() {
+    __classPrivateFieldGet(this, _BaseWidget_removeEditorListeners, "f")?.call(this);
+    const toolbarShortcutHandlers = this.editor.toolController.getMatchingTools(ToolbarShortcutHandler_1.default);
+    let removeKeyPressListener = null;
+    // If the onKeyPress function has been extended and the editor is configured to send keypress events to
+    // toolbar widgets,
+    if (toolbarShortcutHandlers.length > 0 && this.onKeyPress !== BaseWidget.prototype.onKeyPress) {
+        const keyPressListener = (event) => this.onKeyPress(event);
+        const handler = toolbarShortcutHandlers[0];
+        handler.registerListener(keyPressListener);
+        removeKeyPressListener = () => {
+            handler.removeListener(keyPressListener);
+        };
+    }
+    const readOnlyListener = this.editor.isReadOnlyReactiveValue().onUpdateAndNow(readOnly => {
+        if (readOnly && this.shouldAutoDisableInReadOnlyEditor() && !this.disabled) {
+            this.setDisabled(true);
+            __classPrivateFieldSet(this, _BaseWidget_disabledDueToReadOnlyEditor, true, "f");
+            if (__classPrivateFieldGet(this, _BaseWidget_hasDropdown, "f")) {
+                this.dropdown?.requestHide();
+            }
+        }
+        else if (!readOnly && __classPrivateFieldGet(this, _BaseWidget_disabledDueToReadOnlyEditor, "f")) {
+            __classPrivateFieldSet(this, _BaseWidget_disabledDueToReadOnlyEditor, false, "f");
+            this.setDisabled(false);
+        }
+    });
+    __classPrivateFieldSet(this, _BaseWidget_removeEditorListeners, () => {
+        readOnlyListener.remove();
+        removeKeyPressListener?.();
+        __classPrivateFieldSet(this, _BaseWidget_removeEditorListeners, null, "f");
+    }, "f");
+};
 exports.default = BaseWidget;

package/dist/cjs/toolbar/widgets/BaseWidget.test.d.ts

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

package/dist/cjs/tools/BaseTool.js

@@ -167,6 +167,7 @@ class BaseTool {
     onDestroy() {
         __classPrivateFieldGet(this, _BaseTool_readOnlyEditorChangeListener, "f")?.remove();
         __classPrivateFieldSet(this, _BaseTool_readOnlyEditorChangeListener, null, "f");
+        __classPrivateFieldSet(this, _BaseTool_group, null, "f");
     }
 }
 _BaseTool_enabled = new WeakMap(), _BaseTool_group = new WeakMap(), _BaseTool_inputMapper = new WeakMap(), _BaseTool_readOnlyEditorChangeListener = new WeakMap();

package/dist/cjs/tools/ToolController.d.ts

@@ -13,9 +13,32 @@ export default class ToolController implements InputEventListener {
     /** @internal */
     constructor(editor: Editor, localization: ToolLocalization);
     setTools(tools: BaseTool[], primaryToolGroup?: ToolEnabledGroup): void;
+    /**
+     * Add a tool that acts like one of the primary tools (only one primary tool can be enabled at a time).
+     *
+     * If the tool is already added to this, the tool is converted to a primary tool.
+     *
+     * This should be called before creating the app's toolbar.
+     */
     addPrimaryTool(tool: BaseTool): void;
     getPrimaryTools(): BaseTool[];
     addTool(tool: BaseTool): void;
+    /**
+     * Removes **and destroys** all tools in `tools` from this.
+     */
+    removeAndDestroyTools(tools: BaseTool[]): void;
+    private insertTools;
+    /**
+     * Removes a tool from this' tool list and replaces it with `replaceWith`.
+     *
+     * If any of `toolsToInsert` have already been added to this, the tools are
+     * moved.
+     *
+     * This should be called before creating the editor's toolbar.
+     */
+    insertToolsAfter(insertAfter: BaseTool, toolsToInsert: BaseTool[]): void;
+    /** @see {@link insertToolsAfter} */
+    insertToolsBefore(insertBefore: BaseTool, toolsToInsert: BaseTool[]): void;
     private onEventInternal;
     /** Alias for {@link dispatchInputEvent}. */
     onEvent(event: InputEvt): boolean;

package/dist/cjs/tools/ToolController.js

@@ -115,14 +115,21 @@ class ToolController {
         this.tools = tools;
         this.primaryToolGroup = primaryToolGroup ?? new ToolEnabledGroup_1.default();
     }
-    // Add a tool that acts like one of the primary tools (only one primary tool can be enabled at a time).
-    // This should be called before creating the app's toolbar.
+    /**
+     * Add a tool that acts like one of the primary tools (only one primary tool can be enabled at a time).
+     *
+     * If the tool is already added to this, the tool is converted to a primary tool.
+     *
+     * This should be called before creating the app's toolbar.
+     */
     addPrimaryTool(tool) {
         tool.setToolGroup(this.primaryToolGroup);
         if (tool.isEnabled()) {
             this.primaryToolGroup.notifyEnabled(tool);
         }
-        this.addTool(tool);
+        if (!this.tools.includes(tool)) {
+            this.addTool(tool);
+        }
     }
     getPrimaryTools() {
         return this.tools.filter(tool => {
@@ -131,8 +138,62 @@ class ToolController {
     }
     // Add a tool to the end of this' tool list (the added tool receives events after tools already added to this).
     // This should be called before creating the app's toolbar.
+    //
+    // A tool should only be added once.
     addTool(tool) {
-        this.tools.push(tool);
+        // Only add if not already present.
+        if (!this.tools.includes(tool)) {
+            this.tools.push(tool);
+        }
+    }
+    /**
+     * Removes **and destroys** all tools in `tools` from this.
+     */
+    removeAndDestroyTools(tools) {
+        const newTools = [];
+        for (const tool of this.tools) {
+            if (tools.includes(tool)) {
+                if (this.activeTool === tool) {
+                    this.activeTool = null;
+                }
+                tool.onDestroy();
+            }
+            else {
+                newTools.push(tool);
+            }
+        }
+        this.tools = newTools;
+    }
+    insertTools(insertNear, toolsToInsert, mode) {
+        this.tools = this.tools.filter(tool => !toolsToInsert.includes(tool));
+        const newTools = [];
+        for (const tool of this.tools) {
+            if (mode === 'after') {
+                newTools.push(tool);
+            }
+            if (tool === insertNear) {
+                newTools.push(...toolsToInsert);
+            }
+            if (mode === 'before') {
+                newTools.push(tool);
+            }
+        }
+        this.tools = newTools;
+    }
+    /**
+     * Removes a tool from this' tool list and replaces it with `replaceWith`.
+     *
+     * If any of `toolsToInsert` have already been added to this, the tools are
+     * moved.
+     *
+     * This should be called before creating the editor's toolbar.
+     */
+    insertToolsAfter(insertAfter, toolsToInsert) {
+        this.insertTools(insertAfter, toolsToInsert, 'after');
+    }
+    /** @see {@link insertToolsAfter} */
+    insertToolsBefore(insertBefore, toolsToInsert) {
+        this.insertTools(insertBefore, toolsToInsert, 'before');
     }
     // @internal use `dispatchEvent` rather than calling `onEvent` directly.
     onEventInternal(event) {

package/dist/cjs/tools/ToolController.test.d.ts

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

package/dist/cjs/version.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
-    number: '1.5.0',
+    number: '1.6.0',
 };

package/dist/mjs/Editor.d.ts

@@ -64,6 +64,14 @@ export interface EditorSettings {
      * Additional messages to show in the "about" dialog.
      */
     notices: AboutDialogEntry[];
+    /**
+     * Information about the app/website js-draw is running within
+     * to show at the beginning of the about dialog.
+     */
+    appInfo: {
+        name: string;
+        version?: string;
+    } | null;
 }
 /**
  * The main entrypoint for the full editor.

package/dist/mjs/Editor.mjs

@@ -106,6 +106,7 @@ export class Editor {
             keyboardShortcutOverrides: settings.keyboardShortcutOverrides ?? {},
             iconProvider: settings.iconProvider ?? new IconProvider(),
             notices: [],
+            appInfo: settings.appInfo ? { ...settings.appInfo } : null,
         };
         // Validate settings
         if (this.settings.minZoom > this.settings.maxZoom) {
@@ -644,12 +645,16 @@ export class Editor {
                 htmlEvent.preventDefault();
             }
         });
-        elem.addEventListener('blur', () => {
-            for (const event of keysDown) {
-                this.toolController.dispatchInputEvent({
-                    ...event,
-                    kind: InputEvtType.KeyUpEvent,
-                });
+        elem.addEventListener('focusout', (event) => {
+            const stillHasFocus = event.relatedTarget && elem.contains(event.relatedTarget);
+            if (!stillHasFocus) {
+                for (const event of keysDown) {
+                    this.toolController.dispatchInputEvent({
+                        ...event,
+                        kind: InputEvtType.KeyUpEvent,
+                    });
+                }
+                keysDown = [];
             }
         });
         // Allow drop.
@@ -1116,16 +1121,34 @@ export class Editor {
     showAboutDialog() {
         const iconLicenseText = this.icons.licenseInfo();
         const notices = [];
+        if (this.settings.appInfo) {
+            const versionLines = [];
+            if (this.settings.appInfo.version) {
+                versionLines.push(`v${this.settings.appInfo.version}`, '');
+            }
+            notices.push({
+                heading: `${this.settings.appInfo.name}`,
+                text: [
+                    ...versionLines,
+                    `Image editor library: js-draw v${version.number}.`,
+                ].join('\n'),
+            });
+        }
+        else {
+            notices.push({
+                heading: 'js-draw',
+                text: `v${version.number}`,
+            });
+        }
         notices.push({
-            heading: 'js-draw',
+            heading: 'Developer information',
             text: [
-                `v${version.number}`,
-                '',
                 'Image debug information (from when this dialog was opened):',
                 `    ${this.viewport.getScaleFactor()}x zoom, ${180 / Math.PI * this.viewport.getRotationAngle()} rotation`,
                 `    ${this.image.estimateNumElements()} components`,
                 `    ${this.getImportExportRect().w}x${this.getImportExportRect().h} size`,
             ].join('\n'),
+            minimized: true,
         });
         notices.push({
             heading: 'Libraries',

package/dist/mjs/SVGLoader.d.ts

@@ -11,9 +11,14 @@ export type SVGLoaderUnknownStyleAttribute = {
     value: string;
     priority?: string;
 };
+export declare enum SVGLoaderLoadMethod {
+    IFrame = "iframe",
+    DOMParser = "domparser"
+}
 export interface SVGLoaderOptions {
     sanitize?: boolean;
     disableUnknownObjectWarnings?: boolean;
+    loadMethod?: 'iframe' | 'domparser';
 }
 export default class SVGLoader implements ImageLoader {
     private source;
@@ -32,6 +37,7 @@ export default class SVGLoader implements ImageLoader {
     private attachUnrecognisedAttrs;
     private addPath;
     private addBackground;
+    private getComputedStyle;
     private getTransform;
     private makeText;
     private addText;