js-draw 0.17.4 → 0.18.0

package/dist/cjs/src/toolbar/localization.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultToolbarLocalization = void 0;
+exports.defaultToolbarLocalization = {
+    pen: 'Pen',
+    eraser: 'Eraser',
+    select: 'Select',
+    handTool: 'Pan',
+    zoom: 'Zoom',
+    image: 'Image',
+    reformatSelection: 'Format selection',
+    inputAltText: 'Alt text: ',
+    chooseFile: 'Choose file: ',
+    submit: 'Submit',
+    cancel: 'Cancel',
+    resetView: 'Reset view',
+    thicknessLabel: 'Thickness: ',
+    colorLabel: 'Color: ',
+    fontLabel: 'Font: ',
+    textSize: 'Size: ',
+    resizeImageToSelection: 'Resize image to selection',
+    deleteSelection: 'Delete selection',
+    duplicateSelection: 'Duplicate selection',
+    undo: 'Undo',
+    redo: 'Redo',
+    selectObjectType: 'Object type: ',
+    pickColorFromScreen: 'Pick color from screen',
+    clickToPickColorAnnouncement: 'Click on the screen to pick a color',
+    selectionToolKeyboardShortcuts: 'Selection tool: Use arrow keys to move selected items, lowercase/uppercase ‘i’ and ‘o’ to resize.',
+    documentProperties: 'Document',
+    backgroundColor: 'Background Color: ',
+    imageWidthOption: 'Width: ',
+    imageHeightOption: 'Height: ',
+    toggleOverflow: 'More',
+    touchPanning: 'Touchscreen panning',
+    freehandPen: 'Freehand',
+    pressureSensitiveFreehandPen: 'Freehand (pressure sensitive)',
+    arrowPen: 'Arrow',
+    linePen: 'Line',
+    outlinedRectanglePen: 'Outlined rectangle',
+    filledRectanglePen: 'Filled rectangle',
+    lockRotation: 'Lock rotation',
+    paste: 'Paste',
+    dropdownShown: (toolName) => `Dropdown for ${toolName} shown`,
+    dropdownHidden: (toolName) => `Dropdown for ${toolName} hidden`,
+    zoomLevel: (zoomPercent) => `Zoom: ${zoomPercent}%`,
+    colorChangedAnnouncement: (color) => `Color changed to ${color}`,
+    imageSize: (size, units) => `Image size: ${size} ${units}`,
+    errorImageHasZeroSize: 'Error: Image has zero size',
+    imageLoadError: (message) => `Error loading image: ${message}`,
+};

package/dist/cjs/src/toolbar/makeColorInput.js

@@ -0,0 +1,120 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeColorInput = void 0;
+const Color4_1 = __importDefault(require("../Color4"));
+const PipetteTool_1 = __importDefault(require("../tools/PipetteTool"));
+const types_1 = require("../types");
+// Returns [ color input, input container, callback to change the color value ].
+const makeColorInput = (editor, onColorChange) => {
+    const colorInputContainer = document.createElement('span');
+    const colorInput = document.createElement('input');
+    colorInput.type = 'button';
+    colorInput.classList.add('coloris_input');
+    colorInputContainer.classList.add('color-input-container');
+    colorInputContainer.appendChild(colorInput);
+    const pipetteController = addPipetteTool(editor, colorInputContainer, (color) => {
+        colorInput.value = color.toHexString();
+        onInputEnd();
+        // Update the color preview, if it exists (may be managed by Coloris).
+        const parentElem = colorInput.parentElement;
+        if (parentElem && parentElem.classList.contains('clr-field')) {
+            parentElem.style.color = colorInput.value;
+        }
+    });
+    let currentColor;
+    const handleColorInput = () => {
+        currentColor = Color4_1.default.fromHex(colorInput.value);
+    };
+    // Only change the pen color when we finish sending input (this limits the number of
+    // editor events triggered and accessibility announcements).
+    const onInputEnd = () => {
+        handleColorInput();
+        if (currentColor) {
+            editor.announceForAccessibility(editor.localization.colorChangedAnnouncement(currentColor.toHexString()));
+            onColorChange(currentColor);
+            editor.notifier.dispatch(types_1.EditorEventType.ColorPickerColorSelected, {
+                kind: types_1.EditorEventType.ColorPickerColorSelected,
+                color: currentColor,
+            });
+        }
+    };
+    colorInput.oninput = handleColorInput;
+    colorInput.addEventListener('open', () => {
+        editor.notifier.dispatch(types_1.EditorEventType.ColorPickerToggled, {
+            kind: types_1.EditorEventType.ColorPickerToggled,
+            open: true,
+        });
+        pipetteController.cancel();
+    });
+    colorInput.addEventListener('close', () => {
+        editor.notifier.dispatch(types_1.EditorEventType.ColorPickerToggled, {
+            kind: types_1.EditorEventType.ColorPickerToggled,
+            open: false,
+        });
+        onInputEnd();
+    });
+    const setColorInputValue = (color) => {
+        if (typeof color === 'object') {
+            color = color.toHexString();
+        }
+        colorInput.value = color;
+        // Fire all color event listeners. See
+        // https://github.com/mdbassit/Coloris#manually-updating-the-thumbnail
+        colorInput.dispatchEvent(new Event('input', { bubbles: true }));
+    };
+    return [colorInput, colorInputContainer, setColorInputValue];
+};
+exports.makeColorInput = makeColorInput;
+const addPipetteTool = (editor, container, onColorChange) => {
+    const pipetteButton = document.createElement('button');
+    pipetteButton.classList.add('pipetteButton');
+    pipetteButton.title = editor.localization.pickColorFromScreen;
+    pipetteButton.setAttribute('alt', pipetteButton.title);
+    const updatePipetteIcon = (color) => {
+        pipetteButton.replaceChildren(editor.icons.makePipetteIcon(color));
+    };
+    updatePipetteIcon();
+    const pipetteTool = editor.toolController.getMatchingTools(PipetteTool_1.default)[0];
+    const endColorSelectMode = () => {
+        pipetteTool === null || pipetteTool === void 0 ? void 0 : pipetteTool.clearColorListener();
+        updatePipetteIcon();
+        pipetteButton.classList.remove('active');
+    };
+    const pipetteColorSelect = (color) => {
+        endColorSelectMode();
+        if (color) {
+            onColorChange(color);
+        }
+    };
+    const pipetteColorPreview = (color) => {
+        if (color) {
+            updatePipetteIcon(color);
+        }
+        else {
+            updatePipetteIcon();
+        }
+    };
+    pipetteButton.onclick = () => {
+        // If already picking, cancel it.
+        if (pipetteButton.classList.contains('active')) {
+            endColorSelectMode();
+            return;
+        }
+        pipetteTool === null || pipetteTool === void 0 ? void 0 : pipetteTool.setColorListener(pipetteColorPreview, pipetteColorSelect);
+        if (pipetteTool) {
+            pipetteButton.classList.add('active');
+            editor.announceForAccessibility(editor.localization.clickToPickColorAnnouncement);
+        }
+    };
+    container.appendChild(pipetteButton);
+    return {
+        // Cancel a pipette color selection if one is in progress.
+        cancel: () => {
+            endColorSelectMode();
+        },
+    };
+};
+exports.default = exports.makeColorInput;

package/dist/cjs/src/toolbar/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/src/toolbar/widgets/ActionButtonWidget.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const BaseWidget_1 = __importDefault(require("./BaseWidget"));
+class ActionButtonWidget extends BaseWidget_1.default {
+    constructor(editor, id, makeIcon, title, clickAction, localizationTable, mustBeToplevel = false) {
+        super(editor, id, localizationTable);
+        this.makeIcon = makeIcon;
+        this.title = title;
+        this.clickAction = clickAction;
+        this.mustBeToplevel = mustBeToplevel;
+    }
+    handleClick() {
+        this.clickAction();
+    }
+    getTitle() {
+        return this.title;
+    }
+    createIcon() {
+        return this.makeIcon();
+    }
+    fillDropdown(_dropdown) {
+        return false;
+    }
+    canBeInOverflowMenu() {
+        return !this.mustBeToplevel;
+    }
+}
+exports.default = ActionButtonWidget;

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

@@ -0,0 +1,50 @@
+"use strict";
+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"));
+class BaseToolWidget extends BaseWidget_1.default {
+    constructor(editor, targetTool, id, localizationTable) {
+        super(editor, id, localizationTable);
+        this.editor = editor;
+        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.setSelected(true);
+            }
+        });
+        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) {
+                this.setSelected(false);
+                this.setDropdownVisible(false);
+            }
+        });
+    }
+    handleClick() {
+        if (this.hasDropdown) {
+            if (!this.targetTool.isEnabled()) {
+                this.targetTool.setEnabled(true);
+            }
+            else {
+                this.setDropdownVisible(!this.isDropdownVisible());
+            }
+        }
+        else {
+            this.targetTool.setEnabled(!this.targetTool.isEnabled());
+        }
+    }
+    addTo(parent) {
+        const result = super.addTo(parent);
+        this.setSelected(this.targetTool.isEnabled());
+        return result;
+    }
+}
+exports.default = BaseToolWidget;

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

@@ -0,0 +1,313 @@
+"use strict";
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var _BaseWidget_hasDropdown;
+Object.defineProperty(exports, "__esModule", { value: true });
+const ToolbarShortcutHandler_1 = __importDefault(require("../../tools/ToolbarShortcutHandler"));
+const types_1 = require("../../types");
+const HTMLToolbar_1 = require("../HTMLToolbar");
+class BaseWidget {
+    constructor(editor, id, localizationTable) {
+        this.editor = editor;
+        this.id = id;
+        _BaseWidget_hasDropdown.set(this, void 0);
+        this.disabled = false;
+        // Maps subWidget IDs to subWidgets.
+        this.subWidgets = {};
+        this.toplevel = true;
+        this.toolbarWidgetToggleListener = null;
+        this.localizationTable = localizationTable !== null && localizationTable !== void 0 ? localizationTable : editor.localization;
+        this.icon = null;
+        this.container = document.createElement('div');
+        this.container.classList.add(`${HTMLToolbar_1.toolbarCSSPrefix}toolContainer`);
+        this.dropdownContainer = document.createElement('div');
+        this.dropdownContainer.classList.add(`${HTMLToolbar_1.toolbarCSSPrefix}dropdown`);
+        this.dropdownContainer.classList.add('hidden');
+        __classPrivateFieldSet(this, _BaseWidget_hasDropdown, false, "f");
+        this.button = document.createElement('div');
+        this.button.classList.add(`${HTMLToolbar_1.toolbarCSSPrefix}button`);
+        this.label = document.createElement('label');
+        this.button.setAttribute('role', 'button');
+        this.button.tabIndex = 0;
+        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));
+        }
+    }
+    getId() {
+        return this.id;
+    }
+    /**
+     * Returns the ID of this widget in `container`. Adds a suffix to this' ID
+     * if an item in `container` already has this' ID.
+     *
+     * For example, if `this` has ID `foo` and if
+     * `container = { 'foo': somethingNotThis, 'foo-1': somethingElseNotThis }`, this method
+     * returns `foo-2` because elements with IDs `foo` and `foo-1` are already present in
+     * `container`.
+     */
+    getUniqueIdIn(container) {
+        let id = this.getId();
+        let idCounter = 0;
+        while (id in container && container[id] !== this) {
+            id = this.getId() + '-' + idCounter.toString();
+            idCounter++;
+        }
+        return id;
+    }
+    // Add content to the widget's associated dropdown menu.
+    // Returns true if such a menu should be created, false otherwise.
+    fillDropdown(dropdown) {
+        if (Object.keys(this.subWidgets).length === 0) {
+            return false;
+        }
+        for (const widgetId in this.subWidgets) {
+            const widget = this.subWidgets[widgetId];
+            widget.addTo(dropdown);
+            widget.setIsToplevel(false);
+        }
+        return true;
+    }
+    setupActionBtnClickListener(button) {
+        const clickTriggers = { Enter: true, ' ': true, };
+        button.onkeydown = (evt) => {
+            let handled = false;
+            if (evt.key in clickTriggers) {
+                if (!this.disabled) {
+                    this.handleClick();
+                    handled = true;
+                }
+            }
+            // If we didn't do anything with the event, send it to the editor.
+            if (!handled) {
+                handled = this.editor.toolController.dispatchInputEvent({
+                    kind: types_1.InputEvtType.KeyPressEvent,
+                    key: evt.key,
+                    ctrlKey: evt.ctrlKey || evt.metaKey,
+                    altKey: evt.altKey,
+                });
+            }
+            if (handled) {
+                evt.preventDefault();
+            }
+        };
+        button.onkeyup = evt => {
+            if (evt.key in clickTriggers) {
+                return;
+            }
+            const handled = this.editor.toolController.dispatchInputEvent({
+                kind: types_1.InputEvtType.KeyUpEvent,
+                key: evt.key,
+                ctrlKey: evt.ctrlKey || evt.metaKey,
+                altKey: evt.altKey,
+            });
+            if (handled) {
+                evt.preventDefault();
+            }
+        };
+        button.onclick = () => {
+            if (!this.disabled) {
+                this.handleClick();
+            }
+        };
+    }
+    // Add a listener that is triggered when a key is pressed.
+    // Listeners will fire regardless of whether this widget is selected and require that
+    // {@link lib!Editor.toolController} to have an enabled {@link lib!ToolbarShortcutHandler} tool.
+    onKeyPress(_event) {
+        return false;
+    }
+    get hasDropdown() {
+        return __classPrivateFieldGet(this, _BaseWidget_hasDropdown, "f");
+    }
+    // Add a widget to this' dropdown. Must be called before this.addTo.
+    addSubWidget(widget) {
+        // Generate a unique ID for the widget.
+        const id = widget.getUniqueIdIn(this.subWidgets);
+        this.subWidgets[id] = widget;
+    }
+    // Adds this to [parent]. This can only be called once for each ToolbarWidget.
+    // Returns the element that was just added to `parent`.
+    // @internal
+    addTo(parent) {
+        this.label.innerText = this.getTitle();
+        this.setupActionBtnClickListener(this.button);
+        this.icon = null;
+        this.updateIcon();
+        this.container.replaceChildren();
+        this.button.replaceChildren(this.icon, this.label);
+        this.container.appendChild(this.button);
+        __classPrivateFieldSet(this, _BaseWidget_hasDropdown, this.fillDropdown(this.dropdownContainer), "f");
+        if (__classPrivateFieldGet(this, _BaseWidget_hasDropdown, "f")) {
+            this.dropdownIcon = this.createDropdownIcon();
+            this.button.appendChild(this.dropdownIcon);
+            this.container.appendChild(this.dropdownContainer);
+            if (this.toolbarWidgetToggleListener) {
+                this.toolbarWidgetToggleListener.remove();
+            }
+            this.toolbarWidgetToggleListener = this.editor.notifier.on(types_1.EditorEventType.ToolbarDropdownShown, (evt) => {
+                if (evt.kind === types_1.EditorEventType.ToolbarDropdownShown
+                    && evt.parentWidget !== this
+                    // Don't hide if a submenu wash shown (it might be a submenu of
+                    // the current menu).
+                    && evt.parentWidget.toplevel) {
+                    this.setDropdownVisible(false);
+                }
+            });
+        }
+        this.setDropdownVisible(false);
+        if (this.container.parentElement) {
+            this.container.remove();
+        }
+        parent.appendChild(this.container);
+        return this.container;
+    }
+    updateIcon() {
+        var _a, _b;
+        const newIcon = this.createIcon();
+        if (newIcon) {
+            (_a = this.icon) === null || _a === void 0 ? void 0 : _a.replaceWith(newIcon);
+            this.icon = newIcon;
+            this.icon.classList.add(`${HTMLToolbar_1.toolbarCSSPrefix}icon`);
+        }
+        else {
+            (_b = this.icon) === null || _b === void 0 ? void 0 : _b.remove();
+        }
+    }
+    setDisabled(disabled) {
+        this.disabled = disabled;
+        if (this.disabled) {
+            this.button.classList.add('disabled');
+            this.button.setAttribute('aria-disabled', 'true');
+        }
+        else {
+            this.button.classList.remove('disabled');
+            this.button.removeAttribute('aria-disabled');
+        }
+    }
+    setSelected(selected) {
+        const currentlySelected = this.isSelected();
+        if (currentlySelected === selected) {
+            return;
+        }
+        if (selected) {
+            this.container.classList.add('selected');
+            this.button.ariaSelected = 'true';
+        }
+        else {
+            this.container.classList.remove('selected');
+            this.button.ariaSelected = 'false';
+        }
+    }
+    setDropdownVisible(visible) {
+        const currentlyVisible = this.container.classList.contains('dropdownVisible');
+        if (currentlyVisible === visible) {
+            return;
+        }
+        if (visible) {
+            this.dropdownContainer.classList.remove('hidden');
+            this.container.classList.add('dropdownVisible');
+            this.editor.announceForAccessibility(this.localizationTable.dropdownShown(this.getTitle()));
+            this.editor.notifier.dispatch(types_1.EditorEventType.ToolbarDropdownShown, {
+                kind: types_1.EditorEventType.ToolbarDropdownShown,
+                parentWidget: this,
+            });
+        }
+        else {
+            this.dropdownContainer.classList.add('hidden');
+            this.container.classList.remove('dropdownVisible');
+            this.editor.announceForAccessibility(this.localizationTable.dropdownHidden(this.getTitle()));
+        }
+        this.repositionDropdown();
+    }
+    canBeInOverflowMenu() {
+        return true;
+    }
+    getButtonWidth() {
+        return this.button.clientWidth;
+    }
+    isHidden() {
+        return this.container.style.display === 'none';
+    }
+    setHidden(hidden) {
+        this.container.style.display = hidden ? 'none' : '';
+    }
+    repositionDropdown() {
+        const dropdownBBox = this.dropdownContainer.getBoundingClientRect();
+        const screenWidth = document.body.clientWidth;
+        if (dropdownBBox.left > screenWidth / 2) {
+            this.dropdownContainer.style.marginLeft = this.button.clientWidth + 'px';
+            this.dropdownContainer.style.transform = 'translate(-100%, 0)';
+        }
+        else {
+            this.dropdownContainer.style.marginLeft = '';
+            this.dropdownContainer.style.transform = '';
+        }
+    }
+    /** Set whether the widget is contained within another. @internal */
+    setIsToplevel(toplevel) {
+        this.toplevel = toplevel;
+    }
+    isDropdownVisible() {
+        return !this.dropdownContainer.classList.contains('hidden');
+    }
+    isSelected() {
+        return this.container.classList.contains('selected');
+    }
+    createDropdownIcon() {
+        const icon = this.editor.icons.makeDropdownIcon();
+        icon.classList.add(`${HTMLToolbar_1.toolbarCSSPrefix}showHideDropdownIcon`);
+        return icon;
+    }
+    /**
+     * Serialize state associated with this widget.
+     * Override this method to allow saving/restoring from state on application load.
+     *
+     * Overriders should call `super` and include the output of `super.serializeState` in
+     * the output dictionary.
+     *
+     * Clients should not rely on the output from `saveState` being in any particular
+     * format.
+     */
+    serializeState() {
+        const subwidgetState = {};
+        // Save all subwidget state.
+        for (const subwidgetId in this.subWidgets) {
+            subwidgetState[subwidgetId] = this.subWidgets[subwidgetId].serializeState();
+        }
+        return {
+            subwidgetState,
+        };
+    }
+    /**
+     * Restore widget state from serialized data. See also `saveState`.
+     *
+     * Overriders must call `super`.
+     */
+    deserializeFrom(state) {
+        if (state.subwidgetState) {
+            // Deserialize all subwidgets.
+            for (const subwidgetId in state.subwidgetState) {
+                if (subwidgetId in this.subWidgets) {
+                    this.subWidgets[subwidgetId].deserializeFrom(state.subwidgetState[subwidgetId]);
+                }
+            }
+        }
+    }
+}
+exports.default = BaseWidget;
+_BaseWidget_hasDropdown = new WeakMap();