js-draw 0.18.1 → 0.19.0

package/dist/cjs/src/toolbar/localization.d.ts

@@ -0,0 +1,49 @@
+export interface ToolbarLocalization {
+    fontLabel: string;
+    textSize: string;
+    touchPanning: string;
+    lockRotation: string;
+    outlinedRectanglePen: string;
+    filledRectanglePen: string;
+    linePen: string;
+    arrowPen: string;
+    image: string;
+    inputAltText: string;
+    chooseFile: string;
+    cancel: string;
+    submit: string;
+    freehandPen: string;
+    pressureSensitiveFreehandPen: string;
+    selectObjectType: string;
+    colorLabel: string;
+    pen: string;
+    eraser: string;
+    select: string;
+    handTool: string;
+    thicknessLabel: string;
+    resizeImageToSelection: string;
+    deleteSelection: string;
+    duplicateSelection: string;
+    pickColorFromScreen: string;
+    clickToPickColorAnnouncement: string;
+    reformatSelection: string;
+    undo: string;
+    redo: string;
+    zoom: string;
+    resetView: string;
+    selectionToolKeyboardShortcuts: string;
+    paste: string;
+    documentProperties: string;
+    backgroundColor: string;
+    imageWidthOption: string;
+    imageHeightOption: string;
+    toggleOverflow: string;
+    errorImageHasZeroSize: string;
+    dropdownShown: (toolName: string) => string;
+    dropdownHidden: (toolName: string) => string;
+    zoomLevel: (zoomPercentage: number) => string;
+    colorChangedAnnouncement: (color: string) => string;
+    imageSize: (size: number, units: string) => string;
+    imageLoadError: (message: string) => string;
+}
+export declare const defaultToolbarLocalization: ToolbarLocalization;

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: 'Page',
+    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.d.ts

@@ -0,0 +1,6 @@
+import Color4 from '../Color4';
+import Editor from '../Editor';
+type OnColorChangeListener = (color: Color4) => void;
+type SetColorCallback = (color: Color4 | string) => void;
+export declare const makeColorInput: (editor: Editor, onColorChange: OnColorChangeListener) => [HTMLInputElement, HTMLElement, SetColorCallback];
+export default makeColorInput;

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

@@ -0,0 +1,4 @@
+export interface ActionButtonIcon {
+    icon: Element;
+    label: string;
+}

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

@@ -0,0 +1,15 @@
+import Editor from '../../Editor';
+import { ToolbarLocalization } from '../localization';
+import BaseWidget from './BaseWidget';
+export default class ActionButtonWidget extends BaseWidget {
+    protected makeIcon: () => Element | null;
+    protected title: string;
+    protected clickAction: () => void;
+    protected mustBeToplevel: boolean;
+    constructor(editor: Editor, id: string, makeIcon: () => Element | null, title: string, clickAction: () => void, localizationTable?: ToolbarLocalization, mustBeToplevel?: boolean);
+    protected handleClick(): void;
+    protected getTitle(): string;
+    protected createIcon(): Element | null;
+    protected fillDropdown(_dropdown: HTMLElement): boolean;
+    canBeInOverflowMenu(): boolean;
+}

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

@@ -0,0 +1,11 @@
+import Editor from '../../Editor';
+import BaseTool from '../../tools/BaseTool';
+import { ToolbarLocalization } from '../localization';
+import BaseWidget from './BaseWidget';
+export default abstract class BaseToolWidget extends BaseWidget {
+    protected editor: Editor;
+    protected targetTool: BaseTool;
+    constructor(editor: Editor, targetTool: BaseTool, id: string, localizationTable?: ToolbarLocalization);
+    protected handleClick(): void;
+    addTo(parent: HTMLElement): HTMLElement;
+}

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

@@ -0,0 +1,72 @@
+import Editor from '../../Editor';
+import { KeyPressEvent } from '../../types';
+import { ToolbarLocalization } from '../localization';
+export type SavedToolbuttonState = Record<string, any>;
+export default abstract class BaseWidget {
+    #private;
+    protected editor: Editor;
+    protected id: string;
+    protected readonly container: HTMLElement;
+    private button;
+    private icon;
+    private dropdownContainer;
+    private dropdownIcon;
+    private label;
+    private disabled;
+    private subWidgets;
+    private toplevel;
+    protected readonly localizationTable: ToolbarLocalization;
+    constructor(editor: Editor, id: string, localizationTable?: ToolbarLocalization);
+    getId(): string;
+    /**
+     * 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: Record<string, BaseWidget>): string;
+    protected abstract getTitle(): string;
+    protected abstract createIcon(): Element | null;
+    protected fillDropdown(dropdown: HTMLElement): boolean;
+    protected setupActionBtnClickListener(button: HTMLElement): void;
+    protected onKeyPress(_event: KeyPressEvent): boolean;
+    protected abstract handleClick(): void;
+    protected get hasDropdown(): boolean;
+    protected addSubWidget(widget: BaseWidget): void;
+    private toolbarWidgetToggleListener;
+    addTo(parent: HTMLElement): HTMLElement;
+    protected updateIcon(): void;
+    setDisabled(disabled: boolean): void;
+    setSelected(selected: boolean): void;
+    protected setDropdownVisible(visible: boolean): void;
+    canBeInOverflowMenu(): boolean;
+    getButtonWidth(): number;
+    isHidden(): boolean;
+    setHidden(hidden: boolean): void;
+    protected repositionDropdown(): void;
+    /** Set whether the widget is contained within another. @internal */
+    setIsToplevel(toplevel: boolean): void;
+    protected isDropdownVisible(): boolean;
+    protected isSelected(): boolean;
+    private createDropdownIcon;
+    /**
+     * 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(): SavedToolbuttonState;
+    /**
+     * Restore widget state from serialized data. See also `saveState`.
+     *
+     * Overriders must call `super`.
+     */
+    deserializeFrom(state: SavedToolbuttonState): void;
+}