js-draw 0.23.1 → 0.24.1

package/dist/mjs/src/toolbar/localization.mjs

@@ -1,50 +0,0 @@
-export const 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',
-    selectPenType: 'Pen type: ',
-    pickColorFromScreen: 'Pick color from screen',
-    clickToPickColorAnnouncement: 'Click on the screen to pick a color',
-    colorSelectionCanceledAnnouncement: 'Color selection canceled',
-    selectionToolKeyboardShortcuts: 'Selection tool: Use arrow keys to move selected items, lowercase/uppercase ‘i’ and ‘o’ to resize.',
-    documentProperties: 'Page',
-    backgroundColor: 'Background Color: ',
-    imageWidthOption: 'Width: ',
-    imageHeightOption: 'Height: ',
-    useGridOption: 'Grid: ',
-    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/mjs/src/toolbar/makeColorInput.mjs

@@ -1,121 +0,0 @@
-import  Color4  from '../Color4.mjs';
-import  PipetteTool  from '../tools/PipetteTool.mjs';
-import  { EditorEventType }  from '../types.mjs';
-// Returns [ color input, input container, callback to change the color value ].
-export 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.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(EditorEventType.ColorPickerColorSelected, {
-                kind: EditorEventType.ColorPickerColorSelected,
-                color: currentColor,
-            });
-        }
-    };
-    colorInput.oninput = handleColorInput;
-    colorInput.addEventListener('open', () => {
-        editor.notifier.dispatch(EditorEventType.ColorPickerToggled, {
-            kind: EditorEventType.ColorPickerToggled,
-            open: true,
-        });
-        pipetteController.cancel();
-        // Focus the Coloris color picker, if it exists.
-        // Don't focus the text input within the color picker, however,
-        // as this displays a keyboard on mobile devices.
-        const colorPickerElem = document.querySelector('#clr-picker #clr-hue-slider');
-        colorPickerElem === null || colorPickerElem === void 0 ? void 0 : colorPickerElem.focus();
-    });
-    colorInput.addEventListener('close', () => {
-        editor.notifier.dispatch(EditorEventType.ColorPickerToggled, {
-            kind: EditorEventType.ColorPickerToggled,
-            open: false,
-        });
-        onInputEnd();
-        // Restore focus to the input that opened the color picker
-        colorInput.focus();
-    });
-    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];
-};
-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)[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();
-            editor.announceForAccessibility(editor.localization.colorSelectionCanceledAnnouncement);
-            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();
-        },
-    };
-};
-export default makeColorInput;

package/dist/mjs/src/toolbar/widgets/ActionButtonWidget.mjs

@@ -1,25 +0,0 @@
-import  BaseWidget  from './BaseWidget.mjs';
-export default class ActionButtonWidget extends BaseWidget {
-    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;
-    }
-}

package/dist/mjs/src/toolbar/widgets/BaseToolWidget.mjs

@@ -1,43 +0,0 @@
-import  { EditorEventType }  from '../../types.mjs';
-import  BaseWidget  from './BaseWidget.mjs';
-export default class BaseToolWidget extends BaseWidget {
-    constructor(editor, targetTool, id, localizationTable) {
-        super(editor, id, localizationTable);
-        this.targetTool = targetTool;
-        editor.notifier.on(EditorEventType.ToolEnabled, toolEvt => {
-            if (toolEvt.kind !== EditorEventType.ToolEnabled) {
-                throw new Error('Incorrect event type! (Expected ToolEnabled)');
-            }
-            if (toolEvt.tool === targetTool) {
-                this.setSelected(true);
-            }
-        });
-        editor.notifier.on(EditorEventType.ToolDisabled, toolEvt => {
-            if (toolEvt.kind !== 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;
-    }
-}

package/dist/mjs/src/toolbar/widgets/BaseWidget.mjs

@@ -1,345 +0,0 @@
-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 _BaseWidget_hasDropdown;
-import  ToolbarShortcutHandler  from '../../tools/ToolbarShortcutHandler.mjs';
-import  { EditorEventType, InputEvtType }  from '../../types.mjs';
-import  { toolbarCSSPrefix }  from '../HTMLToolbar.mjs';
-export default 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.hideDropdownTimeout = null;
-        this.localizationTable = localizationTable !== null && localizationTable !== void 0 ? localizationTable : editor.localization;
-        this.icon = null;
-        this.container = document.createElement('div');
-        this.container.classList.add(`${toolbarCSSPrefix}toolContainer`);
-        this.dropdownContainer = document.createElement('div');
-        this.dropdownContainer.classList.add(`${toolbarCSSPrefix}dropdown`);
-        this.dropdownContainer.classList.add('hidden');
-        __classPrivateFieldSet(this, _BaseWidget_hasDropdown, false, "f");
-        this.button = document.createElement('div');
-        this.button.classList.add(`${toolbarCSSPrefix}button`);
-        this.label = document.createElement('label');
-        this.button.setAttribute('role', 'button');
-        this.button.tabIndex = 0;
-        const toolbarShortcutHandlers = this.editor.toolController.getMatchingTools(ToolbarShortcutHandler);
-        // 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: 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: 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 Editor.toolController} to have an enabled {@link 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`.
-     * Returns the element that was just added to `parent`.
-     * @internal
-     */
-    addTo(parent) {
-        // Update title and icon
-        this.icon = null;
-        this.updateIcon();
-        this.label.innerText = this.getTitle();
-        const longLabelCSSClass = 'long-label';
-        if (this.label.innerText.length > 7) {
-            this.label.classList.add(longLabelCSSClass);
-        }
-        else {
-            this.label.classList.remove(longLabelCSSClass);
-        }
-        // Click functionality
-        this.setupActionBtnClickListener(this.button);
-        // Clear anything already in this.container.
-        this.container.replaceChildren();
-        this.button.replaceChildren(this.icon, this.label);
-        this.container.appendChild(this.button);
-        // Clear the dropdownContainer in case this element is being moved to another
-        // parent.
-        this.dropdownContainer.replaceChildren();
-        __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(EditorEventType.ToolbarDropdownShown, (evt) => {
-                if (evt.kind === 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(`${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;
-        }
-        // Ensure that accessibility tools check and read the value of
-        // aria-checked.
-        // TODO: Ensure that 'role' is set to 'switch' by default for selectable
-        //       buttons.
-        this.button.setAttribute('role', 'switch');
-        if (selected) {
-            this.container.classList.add('selected');
-            this.button.setAttribute('aria-checked', 'true');
-        }
-        else {
-            this.container.classList.remove('selected');
-            this.button.setAttribute('aria-checked', 'false');
-        }
-    }
-    setDropdownVisible(visible) {
-        const currentlyVisible = this.container.classList.contains('dropdownVisible');
-        if (currentlyVisible === visible) {
-            return;
-        }
-        // If waiting to hide the dropdown, cancel it.
-        if (this.hideDropdownTimeout) {
-            clearTimeout(this.hideDropdownTimeout);
-            this.hideDropdownTimeout = null;
-            this.dropdownContainer.classList.remove('hiding');
-        }
-        const animationDuration = 150; // ms
-        if (visible) {
-            this.dropdownContainer.classList.remove('hidden');
-            this.container.classList.add('dropdownVisible');
-            this.editor.announceForAccessibility(this.localizationTable.dropdownShown(this.getTitle()));
-            this.editor.notifier.dispatch(EditorEventType.ToolbarDropdownShown, {
-                kind: EditorEventType.ToolbarDropdownShown,
-                parentWidget: this,
-            });
-        }
-        else {
-            this.container.classList.remove('dropdownVisible');
-            this.editor.announceForAccessibility(this.localizationTable.dropdownHidden(this.getTitle()));
-            this.dropdownContainer.classList.add('hiding');
-            // Hide the dropdown *slightly* before the animation finishes. This
-            // prevents flickering in some browsers.
-            const hideDelay = animationDuration * 0.95;
-            this.hideDropdownTimeout = setTimeout(() => {
-                this.dropdownContainer.classList.add('hidden');
-                this.dropdownContainer.classList.remove('hiding');
-            }, hideDelay);
-        }
-        // Animate
-        const animationName = `var(--dropdown-${visible ? 'show' : 'hide'}-animation)`;
-        this.dropdownContainer.style.animation = `${animationDuration}ms ease ${animationName}`;
-        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) {
-            // Use .translate so as not to conflict with CSS animating the
-            // transform property.
-            this.dropdownContainer.style.translate = `calc(${this.button.clientWidth + 'px'} - 100%) 0`;
-        }
-        else {
-            this.dropdownContainer.style.translate = '';
-        }
-    }
-    /** 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(`${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]);
-                }
-            }
-        }
-    }
-}
-_BaseWidget_hasDropdown = new WeakMap();