js-draw 0.25.0 → 1.0.0

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

@@ -0,0 +1 @@
+export declare const toolbarCSSPrefix = "toolbar-";

package/dist/cjs/toolbar/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toolbarCSSPrefix = void 0;
+exports.toolbarCSSPrefix = 'toolbar-';

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

@@ -1,3 +1,5 @@
 export * from './widgets/lib';
-export * from './makeColorInput';
-export { default as IconProvider } from './IconProvider';
+export * from './widgets/components/makeColorInput';
+export { default as IconProvider, IconElemType } from './IconProvider';
+export { makeDropdownToolbar } from './DropdownToolbar';
+export { makeEdgeToolbar } from './EdgeToolbar';

package/dist/cjs/toolbar/lib.js

@@ -13,9 +13,16 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconProvider = void 0;
+exports.makeEdgeToolbar = exports.makeDropdownToolbar = exports.IconProvider = void 0;
 __exportStar(require("./widgets/lib"), exports);
-__exportStar(require("./makeColorInput"), exports);
+__exportStar(require("./widgets/components/makeColorInput"), exports);
 var IconProvider_1 = require("./IconProvider");
-Object.defineProperty(exports, "IconProvider", { enumerable: true, get: function () { return IconProvider_1.default; } });
+Object.defineProperty(exports, "IconProvider", { enumerable: true, get: function () { return __importDefault(IconProvider_1).default; } });
+var DropdownToolbar_1 = require("./DropdownToolbar");
+Object.defineProperty(exports, "makeDropdownToolbar", { enumerable: true, get: function () { return DropdownToolbar_1.makeDropdownToolbar; } });
+var EdgeToolbar_1 = require("./EdgeToolbar");
+Object.defineProperty(exports, "makeEdgeToolbar", { enumerable: true, get: function () { return EdgeToolbar_1.makeEdgeToolbar; } });

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

@@ -11,11 +11,13 @@ export interface ToolbarLocalization {
     image: string;
     inputAltText: string;
     chooseFile: string;
+    dragAndDropHereOrBrowse: string;
     cancel: string;
     submit: string;
     roundedTipPen: string;
     flatTipPen: string;
-    selectPenType: string;
+    selectPenTip: string;
+    selectShape: string;
     colorLabel: string;
     pen: string;
     eraser: string;
@@ -28,11 +30,13 @@ export interface ToolbarLocalization {
     pickColorFromScreen: string;
     clickToPickColorAnnouncement: string;
     colorSelectionCanceledAnnouncement: string;
-    reformatSelection: string;
     undo: string;
     redo: string;
+    exit: string;
+    save: string;
     zoom: string;
     resetView: string;
+    reformatSelection: string;
     selectionToolKeyboardShortcuts: string;
     paste: string;
     documentProperties: string;
@@ -41,7 +45,10 @@ export interface ToolbarLocalization {
     imageHeightOption: string;
     useGridOption: string;
     toggleOverflow: string;
+    about: string;
+    inputStabilization: string;
     errorImageHasZeroSize: string;
+    closeSidebar: (toolName: string) => string;
     dropdownShown: (toolName: string) => string;
     dropdownHidden: (toolName: string) => string;
     zoomLevel: (zoomPercentage: number) => string;

package/dist/cjs/toolbar/localization.js

@@ -9,34 +9,40 @@ exports.defaultToolbarLocalization = {
     zoom: 'Zoom',
     image: 'Image',
     reformatSelection: 'Format selection',
-    inputAltText: 'Alt text: ',
-    chooseFile: 'Choose file: ',
+    inputAltText: 'Alt text',
+    chooseFile: 'Choose file',
+    dragAndDropHereOrBrowse: 'Drag and drop here\nor\n{{browse}}',
     submit: 'Submit',
     cancel: 'Cancel',
     resetView: 'Reset view',
-    thicknessLabel: 'Thickness: ',
-    colorLabel: 'Color: ',
-    fontLabel: 'Font: ',
-    textSize: 'Size: ',
+    thicknessLabel: 'Thickness',
+    colorLabel: 'Color',
+    fontLabel: 'Font',
+    textSize: 'Size',
     resizeImageToSelection: 'Resize image to selection',
     deleteSelection: 'Delete selection',
     duplicateSelection: 'Duplicate selection',
+    exit: 'Exit',
+    save: 'Save',
     undo: 'Undo',
     redo: 'Redo',
-    selectPenType: 'Pen type: ',
+    selectPenTip: 'Pen tip',
+    selectShape: 'Shape',
     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: ',
+    backgroundColor: 'Background color',
+    imageWidthOption: 'Width',
+    imageHeightOption: 'Height',
+    useGridOption: 'Grid',
     toggleOverflow: 'More',
+    about: 'About',
+    inputStabilization: 'Input stabilization',
     touchPanning: 'Touchscreen panning',
-    roundedTipPen: 'Rounded Tip',
-    flatTipPen: 'Flat Tip',
+    roundedTipPen: 'Round',
+    flatTipPen: 'Flat',
     arrowPen: 'Arrow',
     linePen: 'Line',
     outlinedRectanglePen: 'Outlined rectangle',
@@ -44,11 +50,12 @@ exports.defaultToolbarLocalization = {
     outlinedCirclePen: 'Outlined circle',
     lockRotation: 'Lock rotation',
     paste: 'Paste',
-    dropdownShown: function (toolName) { return "Dropdown for ".concat(toolName, " shown"); },
-    dropdownHidden: function (toolName) { return "Dropdown for ".concat(toolName, " hidden"); },
-    zoomLevel: function (zoomPercent) { return "Zoom: ".concat(zoomPercent, "%"); },
-    colorChangedAnnouncement: function (color) { return "Color changed to ".concat(color); },
-    imageSize: function (size, units) { return "Image size: ".concat(size, " ").concat(units); },
+    closeSidebar: (toolName) => `Close sidebar for ${toolName}`,
+    dropdownShown: (toolName) => `Menu for ${toolName} shown`,
+    dropdownHidden: (toolName) => `Menu 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: function (message) { return "Error loading image: ".concat(message); },
+    imageLoadError: (message) => `Error loading image: ${message}`,
 };

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

@@ -1,4 +1,11 @@
+import IconProvider from './IconProvider';
+import type { ToolbarLocalization } from './localization';
 export interface ActionButtonIcon {
     icon: Element;
     label: string;
 }
+export interface ToolbarContext {
+    announceForAccessibility(text: string): void;
+    localization: ToolbarLocalization;
+    icons: IconProvider;
+}

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

@@ -11,5 +11,5 @@ export default class ActionButtonWidget extends BaseWidget {
     protected getTitle(): string;
     protected createIcon(): Element | null;
     protected fillDropdown(_dropdown: HTMLElement): boolean;
-    canBeInOverflowMenu(): boolean;
+    mustBeInToplevelMenu(): boolean;
 }

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

@@ -1,47 +1,31 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var BaseWidget_1 = require("./BaseWidget");
-var ActionButtonWidget = /** @class */ (function (_super) {
-    __extends(ActionButtonWidget, _super);
-    function ActionButtonWidget(editor, id, makeIcon, title, clickAction, localizationTable, mustBeToplevel) {
-        if (mustBeToplevel === void 0) { mustBeToplevel = false; }
-        var _this = _super.call(this, editor, id, localizationTable) || this;
-        _this.makeIcon = makeIcon;
-        _this.title = title;
-        _this.clickAction = clickAction;
-        _this.mustBeToplevel = mustBeToplevel;
-        return _this;
+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;
     }
-    ActionButtonWidget.prototype.handleClick = function () {
+    handleClick() {
         this.clickAction();
-    };
-    ActionButtonWidget.prototype.getTitle = function () {
+    }
+    getTitle() {
         return this.title;
-    };
-    ActionButtonWidget.prototype.createIcon = function () {
+    }
+    createIcon() {
         return this.makeIcon();
-    };
-    ActionButtonWidget.prototype.fillDropdown = function (_dropdown) {
+    }
+    fillDropdown(_dropdown) {
         return false;
-    };
-    ActionButtonWidget.prototype.canBeInOverflowMenu = function () {
-        return !this.mustBeToplevel;
-    };
-    return ActionButtonWidget;
-}(BaseWidget_1.default));
+    }
+    mustBeInToplevelMenu() {
+        return this.mustBeToplevel;
+    }
+}
 exports.default = ActionButtonWidget;

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

@@ -1,6 +1,6 @@
 import Editor from '../../Editor';
 import BaseTool from '../../tools/BaseTool';
-import { KeyPressEvent } from '../../types';
+import { KeyPressEvent } from '../../inputEvents';
 import { ToolbarLocalization } from '../localization';
 import BaseWidget from './BaseWidget';
 export default abstract class BaseToolWidget extends BaseWidget {

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

@@ -1,50 +1,49 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var types_1 = require("../../types");
-var BaseWidget_1 = require("./BaseWidget");
-var BaseToolWidget = /** @class */ (function (_super) {
-    __extends(BaseToolWidget, _super);
-    function BaseToolWidget(editor, targetTool, id, localizationTable) {
-        var _this = _super.call(this, editor, id, localizationTable) || this;
-        _this.targetTool = targetTool;
-        editor.notifier.on(types_1.EditorEventType.ToolEnabled, function (toolEvt) {
+const types_1 = require("../../types");
+const BaseWidget_1 = __importDefault(require("./BaseWidget"));
+const constants_1 = require("../constants");
+const isToolWidgetFocused = () => {
+    const currentFocus = [...document.querySelectorAll('*:focus')];
+    return currentFocus.length && currentFocus.some(elem => elem.classList.contains(`${constants_1.toolbarCSSPrefix}button`));
+};
+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.setSelected(true);
+                this.setSelected(true);
+                // Transfer focus to the current button, only if another toolbar button is
+                // focused.
+                // This prevents pressing "space" from triggering a different action when
+                // the current is selected.
+                if (isToolWidgetFocused()) {
+                    this.focus();
+                }
             }
         });
-        editor.notifier.on(types_1.EditorEventType.ToolDisabled, function (toolEvt) {
+        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);
+                this.setSelected(false);
+                this.setDropdownVisible(false);
             }
         });
-        return _this;
     }
-    BaseToolWidget.prototype.handleClick = function () {
+    handleClick() {
         if (this.hasDropdown) {
             if (!this.targetTool.isEnabled()) {
                 this.targetTool.setEnabled(true);
+                this.activateDropdown();
             }
             else {
                 this.setDropdownVisible(!this.isDropdownVisible());
@@ -53,19 +52,18 @@ var BaseToolWidget = /** @class */ (function (_super) {
         else {
             this.targetTool.setEnabled(!this.targetTool.isEnabled());
         }
-    };
-    BaseToolWidget.prototype.onKeyPress = function (event) {
+    }
+    onKeyPress(event) {
         if (this.isSelected() && event.key === ' ' && this.hasDropdown) {
             this.handleClick();
             return true;
         }
         return false;
-    };
-    BaseToolWidget.prototype.addTo = function (parent) {
-        var result = _super.prototype.addTo.call(this, parent);
+    }
+    addTo(parent) {
+        const result = super.addTo(parent);
         this.setSelected(this.targetTool.isEnabled());
         return result;
-    };
-    return BaseToolWidget;
-}(BaseWidget_1.default));
+    }
+}
 exports.default = BaseToolWidget;

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

@@ -1,7 +1,17 @@
 import Editor from '../../Editor';
-import { KeyPressEvent } from '../../types';
+import { KeyPressEvent } from '../../inputEvents';
 import { ToolbarLocalization } from '../localization';
+import { WidgetContentLayoutManager } from './layout/types';
 export type SavedToolbuttonState = Record<string, any>;
+/**
+ * A set of labels that allow toolbar themes to treat buttons differently.
+ */
+export declare enum ToolbarWidgetTag {
+    Save = "save",
+    Exit = "exit",
+    Undo = "undo",
+    Redo = "redo"
+}
 export default abstract class BaseWidget {
     #private;
     protected editor: Editor;
@@ -9,7 +19,9 @@ export default abstract class BaseWidget {
     protected readonly container: HTMLElement;
     private button;
     private icon;
-    private dropdownContainer;
+    private layoutManager;
+    private dropdown;
+    private dropdownContent;
     private dropdownIcon;
     private label;
     private disabled;
@@ -18,6 +30,23 @@ export default abstract class BaseWidget {
     protected readonly localizationTable: ToolbarLocalization;
     constructor(editor: Editor, id: string, localizationTable?: ToolbarLocalization);
     getId(): string;
+    /**
+     * Note: Tags should be set *before* a tool widget is added to a toolbar.
+     *
+     *
+     * Associates tags with this widget that can be used by toolbar themes
+     * to customize the layout/appearance of this button. Prefer tags in
+     * the `ToolbarWidgetTag` enum, where possible.
+     *
+     * In addition to being readable from the {@link getTags} method, tags are
+     * added to a button's main container as CSS classes with the `toolwidget-tag--` prefix.
+     *
+     * For example, the `undo` tag would result in `toolwidget-tag--undo`
+     * being added to the button's container's class list.
+     *
+     */
+    setTags(tags: (string | ToolbarWidgetTag)[]): void;
+    getTags(): string[];
     /**
      * Returns the ID of this widget in `container`. Adds a suffix to this' ID
      * if an item in `container` already has this' ID.
@@ -26,33 +55,59 @@ export default abstract class BaseWidget {
      * `container = { 'foo': somethingNotThis, 'foo-1': somethingElseNotThis }`, this method
      * returns `foo-2` because elements with IDs `foo` and `foo-1` are already present in
      * `container`.
+     *
+     * If `this` is already in `container`, returns the id given to `this` in the container.
      */
     getUniqueIdIn(container: Record<string, BaseWidget>): string;
     protected abstract getTitle(): string;
     protected abstract createIcon(): Element | null;
     protected fillDropdown(dropdown: HTMLElement): boolean;
+    /** @deprecated Renamed to `setUpButtonEventListeners`. */
     protected setupActionBtnClickListener(button: HTMLElement): void;
+    protected setUpButtonEventListeners(button: HTMLElement): void;
     protected onKeyPress(_event: KeyPressEvent): boolean;
     protected abstract handleClick(): void;
     protected get hasDropdown(): boolean;
     protected addSubWidget(widget: BaseWidget): void;
-    private toolbarWidgetToggleListener;
+    setLayoutManager(manager: WidgetContentLayoutManager): void;
     /**
      * Adds this to `parent`.
      * Returns the element that was just added to `parent`.
      * @internal
      */
     addTo(parent: HTMLElement): HTMLElement;
+    focus(): void;
+    /**
+     * @internal
+     */
+    addCSSClassToContainer(className: string): void;
+    removeCSSClassFromContainer(className: string): void;
+    remove(): void;
     protected updateIcon(): void;
     setDisabled(disabled: boolean): void;
     setSelected(selected: boolean): void;
-    private hideDropdownTimeout;
     protected setDropdownVisible(visible: boolean): void;
+    /**
+     * Only used by some layout managers.
+     * In those layout managers, makes this dropdown visible.
+     */
+    protected activateDropdown(): void;
+    /**
+     * Returns `true` if this widget must always be in a toplevel menu and not
+     * in a scrolling/overflow menu.
+     *
+     * This method can be overidden to override the default of `true`.
+     */
+    mustBeInToplevelMenu(): boolean;
+    /**
+     * Returns true iff this widget can be in a nontoplevel menu.
+     *
+     * @deprecated Use `!mustBeInToplevelMenu()` instead.
+     */
     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;