js-draw 0.18.0 → 0.18.1

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

@@ -1,49 +0,0 @@
-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

@@ -1,51 +0,0 @@
-"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.d.ts

@@ -1,6 +0,0 @@
-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

@@ -1,120 +0,0 @@
-"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

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

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

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

package/dist/cjs/src/toolbar/widgets/ActionButtonWidget.d.ts

@@ -1,15 +0,0 @@
-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

@@ -1,31 +0,0 @@
-"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

@@ -1,11 +0,0 @@
-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

@@ -1,50 +0,0 @@
-"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

@@ -1,72 +0,0 @@
-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;
-}