js-draw 0.25.0 → 1.0.0

package/dist/cjs/util/stopPropagationOfScrollingWheelEvents.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const stopPropagationOfScrollingWheelEvents = (scrollingContainer) => {
+    scrollingContainer.onwheel = (event) => {
+        const hasScroll = scrollingContainer.clientWidth !== scrollingContainer.scrollWidth
+            && event.deltaX !== 0;
+        const eventScrollsPastLeft = scrollingContainer.scrollLeft + event.deltaX <= 0;
+        const scrollRight = scrollingContainer.scrollLeft + scrollingContainer.clientWidth;
+        const eventScrollsPastRight = scrollRight + event.deltaX > scrollingContainer.scrollWidth;
+        // Stop the editor from receiving the event if it will scroll the pen type selector
+        // instead.
+        if (hasScroll && !eventScrollsPastLeft && !eventScrollsPastRight) {
+            event.stopPropagation();
+        }
+    };
+};
+exports.default = stopPropagationOfScrollingWheelEvents;

package/dist/cjs/util/untilNextAnimationFrame.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 /** @internal */
-var untilNextAnimationFrame = function () {
-    return new Promise(function (resolve) {
-        requestAnimationFrame(function () { return resolve(); });
+const untilNextAnimationFrame = () => {
+    return new Promise((resolve) => {
+        requestAnimationFrame(() => resolve());
     });
 };
 exports.default = untilNextAnimationFrame;

package/dist/cjs/util/waitForAll.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * Resolves when all given promises have resolved. If no promises are given,
  * does not return a Promise.
  */
-var waitForAll = function (results) {
+const waitForAll = (results) => {
     // If any are Promises...
-    if (results.some(function (command) { return command && command['then']; })) {
+    if (results.some(command => command && command['then'])) {
         // Wait for all commands to finish.
         return Promise.all(results)
             // Ensure we return a Promise<void> and not a Promise<void[]>
-            .then(function () { });
+            .then(() => { });
     }
     return;
 };

package/dist/cjs/util/waitForTimeout.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 // Returns a promise that resolves after `timeout` milliseconds.
-var waitForTimeout = function (timeout) {
-    return new Promise(function (resolve) {
-        setTimeout(function () { return resolve(); }, timeout);
+const waitForTimeout = (timeout) => {
+    return new Promise(resolve => {
+        setTimeout(() => resolve(), timeout);
     });
 };
 exports.default = waitForTimeout;

package/dist/cjs/version.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    number: string;
+};
+export default _default;

package/dist/cjs/version.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    number: '1.0.0',
+};

package/dist/mjs/Editor.d.ts

@@ -1,21 +1,21 @@
 import EditorImage from './EditorImage';
 import ToolController from './tools/ToolController';
-import { InputEvtType, EditorNotifier, ImageLoader, HTMLPointerEventFilter } from './types';
+import { EditorNotifier, ImageLoader } from './types';
+import { HTMLPointerEventFilter, InputEvtType } from './inputEvents';
 import Command from './commands/Command';
 import UndoRedoHistory from './UndoRedoHistory';
 import Viewport from './Viewport';
-import { Point2, Vec2 } from './math/Vec2';
-import HTMLToolbar from './toolbar/HTMLToolbar';
-import { RenderablePathSpec } from './rendering/renderers/AbstractRenderer';
+import { Point2, Vec2, Color4, Rect2 } from '@js-draw/math';
 import Display, { RenderingMode } from './rendering/Display';
-import Color4 from './Color4';
 import Pointer from './Pointer';
-import Rect2 from './math/shapes/Rect2';
 import { EditorLocalization } from './localization';
 import IconProvider from './toolbar/IconProvider';
 import AbstractComponent from './components/AbstractComponent';
 import KeyboardShortcutManager from './shortcuts/KeyboardShortcutManager';
 import KeyBinding from './shortcuts/KeyBinding';
+import AbstractToolbar from './toolbar/AbstractToolbar';
+import RenderablePathSpec from './rendering/RenderablePathSpec';
+import { AboutDialogEntry } from './dialogs/makeAboutDialog';
 export interface EditorSettings {
     /** Defaults to `RenderingMode.CanvasRenderer` */
     renderingMode: RenderingMode;
@@ -29,6 +29,7 @@ export interface EditorSettings {
     wheelEventsEnabled: boolean | 'only-if-focused';
     /** Minimum zoom fraction (e.g. 0.5 → 50% zoom). */
     minZoom: number;
+    /** Maximum zoom fraction (e.g. 2 → 200% zoom). */
     maxZoom: number;
     /**
      * Overrides for keyboard shortcuts. For example,
@@ -41,7 +42,40 @@ export interface EditorSettings {
      * where shortcut IDs map to lists of associated keybindings.
      */
     keyboardShortcutOverrides: Record<string, Array<KeyBinding>>;
+    /**
+     * Provides a set of icons for the editor.
+     *
+     * See, for example, the `@js-draw/material-icons` package.
+     *
+     * @example
+     * ```ts
+     * import * as jsdraw from 'js-draw';
+     * import MaterialIconProvider from '@js-draw/material-icons';
+     * import 'js-draw/styles';
+     *
+     * const settings: Partial<jsdraw.EditorSettings> = {
+     *   // Default to material icons
+     *   iconProvider: new MaterialIconProvider(),
+     *
+     *   // Only scroll the editor if it's focused.
+     *   wheelEventsEnabled: 'only-if-focused',
+     * };
+     *
+     * // Add an editor to the document, using the above settings
+     * const editor = new jsdraw.Editor(document.body, settings);
+     *
+     * // Add a toolbar to the editor
+     * const toolbar = jsdraw.makeEdgeToolbar(editor);
+     *
+     * // Add the default tool items
+     * toolbar.addDefaults();
+     * ```
+     */
     iconProvider: IconProvider;
+    /**
+     * Additional messages to show in the "about" dialog.
+     */
+    notices: AboutDialogEntry[];
 }
 /**
  * The main entrypoint for the full editor.
@@ -178,8 +212,9 @@ export declare class Editor {
      * Creates a toolbar. If `defaultLayout` is true, default buttons are used.
      * @returns a reference to the toolbar.
      */
-    addToolbar(defaultLayout?: boolean): HTMLToolbar;
+    addToolbar(defaultLayout?: boolean): AbstractToolbar;
     private registerListeners;
+    private updateEditorSizeVariables;
     private pointers;
     private getPointerList;
     /**
@@ -193,6 +228,13 @@ export declare class Editor {
      * Forward pointer events from `elem` to this editor. Such that right-click/right-click drag
      * events are also forwarded, `elem`'s contextmenu is disabled.
      *
+     * `filter` is called once per pointer event, before doing any other processing. If `filter` returns `true` the event is
+     * forwarded to the editor.
+     *
+     * **Note**: `otherEventsFilter` is like `filter`, but is called for other pointer-related
+     * events that could also be forwarded to the editor. To forward just pointer events,
+     * for example, `otherEventsFilter` could be given as `()=>false`.
+     *
      * @example
      * ```ts
      * const overlay = document.createElement('div');
@@ -208,12 +250,30 @@ export declare class Editor {
      * });
      * ```
      */
-    handlePointerEventsFrom(elem: HTMLElement, filter?: HTMLPointerEventFilter): {
+    handlePointerEventsFrom(elem: HTMLElement, filter?: HTMLPointerEventFilter, otherEventsFilter?: (eventName: string, event: Event) => boolean): {
         /** Remove all event listeners registered by this function. */
         remove: () => void;
     };
-    /** Adds event listners for keypresses to `elem` and forwards those events to the editor. */
-    handleKeyEventsFrom(elem: HTMLElement): void;
+    /**
+     * Like {@link handlePointerEventsFrom} except ignores short input gestures like clicks.
+     *
+     * `filter` is called once per event, before doing any other processing. If `filter` returns `true` the event is
+     * forwarded to the editor.
+     *
+     * `otherEventsFilter` is passed unmodified to `handlePointerEventsFrom`.
+     */
+    handlePointerEventsExceptClicksFrom(elem: HTMLElement, filter?: HTMLPointerEventFilter, otherEventsFilter?: (eventName: string, event: Event) => boolean): {
+        /** Remove all event listeners registered by this function. */
+        remove: () => void;
+    };
+    /**
+     * Adds event listners for keypresses (and drop events) on `elem` and forwards those
+     * events to the editor.
+     *
+     * If the given `filter` returns `false` for an event, the event is ignored and not
+     * passed to the editor.
+     */
+    handleKeyEventsFrom(elem: HTMLElement, filter?: (event: KeyboardEvent) => boolean): void;
     /** `apply` a command. `command` will be announced for accessibility. */
     dispatch(command: Command, addToHistory?: boolean): void | Promise<void>;
     /**
@@ -287,7 +347,19 @@ export declare class Editor {
         remove: () => void;
     };
     addStyleSheet(content: string): HTMLStyleElement;
-    sendKeyboardEvent(eventType: InputEvtType.KeyPressEvent | InputEvtType.KeyUpEvent, key: string, ctrlKey?: boolean, altKey?: boolean): void;
+    /**
+     * Dispatch a keyboard event to the currently selected tool.
+     * Intended for unit testing.
+     *
+     * If `shiftKey` is undefined, it is guessed from `key`.
+     *
+     * At present, the **key code** dispatched is guessed from the given key and,
+     * while this works for ASCII alphanumeric characters, this does not work for
+     * most non-alphanumeric keys.
+     *
+     * Because guessing the key code from `key` is problematic, **only use this for testing**.
+     */
+    sendKeyboardEvent(eventType: InputEvtType.KeyPressEvent | InputEvtType.KeyUpEvent, key: string, ctrlKey?: boolean, altKey?: boolean, shiftKey?: boolean | undefined): void;
     /**
      * Dispatch a pen event to the currently selected tool.
      * Intended primarially for unit tests.
@@ -318,11 +390,18 @@ export declare class Editor {
     getImportExportRect(): Rect2;
     setImportExportRect(imageRect: Rect2): Command;
     /**
-     * Alias for loadFrom(SVGLoader.fromString).
+     * Alias for `loadFrom(SVGLoader.fromString)`.
      *
      * This is particularly useful when accessing a bundled version of the editor,
      * where `SVGLoader.fromString` is unavailable.
      */
     loadFromSVG(svgData: string, sanitize?: boolean): Promise<void>;
+    private closeAboutDialog;
+    /**
+     * Shows an information dialog with legal notices.
+     */
+    showAboutDialog(): void;
+    /** Removes and destroys the editor */
+    remove(): void;
 }
 export default Editor;