js-draw 1.20.3 → 1.21.2

package/dist/cjs/dialogs/makeMessageDialog.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const waitForTimeout_1 = __importDefault(require("../util/waitForTimeout"));
+const makeAboutDialog = (editor, options) => {
+    const overlay = document.createElement('div');
+    const { remove: removeOverlay } = editor.createHTMLOverlay(overlay);
+    overlay.classList.add('dialog-container', 'message-dialog-container', ...(options.classNames ?? []));
+    const dialog = document.createElement('dialog');
+    const contentWrapper = document.createElement('div');
+    contentWrapper.classList.add('message-dialog-content', ...(options.contentClassNames ?? []));
+    const heading = document.createElement('h1');
+    heading.textContent = options.title;
+    heading.setAttribute('autofocus', 'true');
+    const closeButton = document.createElement('button');
+    closeButton.innerText = editor.localization.closeDialog;
+    closeButton.classList.add('close');
+    const scrollRegion = document.createElement('div');
+    scrollRegion.classList.add('scroll');
+    // Allow scrolling in the scrollable container -- don't forward wheel events.
+    scrollRegion.onwheel = evt => evt.stopPropagation();
+    contentWrapper.replaceChildren(heading, scrollRegion, closeButton);
+    dialog.replaceChildren(contentWrapper);
+    overlay.replaceChildren(dialog);
+    const closeTimeout = 300;
+    dialog.style.setProperty('--close-delay', `${closeTimeout}ms`);
+    const closeDialog = async () => {
+        dialog.classList.add('-closing');
+        await (0, waitForTimeout_1.default)(closeTimeout);
+        dialog.close();
+    };
+    const addCloseListeners = () => {
+        dialog.addEventListener('pointerdown', event => {
+            if (event.target === dialog) {
+                void closeDialog();
+            }
+        });
+        dialog.onclose = () => {
+            removeOverlay();
+        };
+        closeButton.onclick = () => closeDialog();
+    };
+    addCloseListeners();
+    dialog.showModal();
+    return {
+        close: () => {
+            return closeDialog();
+        },
+        appendChild: (child) => {
+            scrollRegion.appendChild(child);
+        },
+    };
+};
+exports.default = makeAboutDialog;

package/dist/cjs/image/EditorImage.d.ts

@@ -21,6 +21,9 @@ export type EditorImageNotifier = EventDispatcher<EditorImageEventType, {
  * 3. stop the render process early by returning `false`.
  */
 export type PreRenderComponentCallback = (component: AbstractComponent, componentsProcessed: number, totalComponents: number) => Promise<boolean>;
+/**
+ * Handles lookup/storage of elements in the image.
+ */
 export default class EditorImage {
     private root;
     private background;
@@ -88,7 +91,8 @@ export default class EditorImage {
      *
      * @see {@link Display.flatten}
      *
-     * @example
+     * **Example**:
+     *
      * [[include:doc-pages/inline-examples/adding-a-stroke.md]]
      */
     static addElement(elem: AbstractComponent, applyByFlattening?: boolean): SerializableCommand;
@@ -199,6 +203,16 @@ export declare class ImageNode {
     getParent(): ImageNode | null;
     protected getChildrenIntersectingRegion(region: Rect2, isTooSmallFilter?: TooSmallToRenderCheck): ImageNode[];
     getChildrenOrSelfIntersectingRegion(region: Rect2): ImageNode[];
+    /**
+     * Returns a list of `ImageNode`s with content (and thus no children).
+     * Override getChildrenIntersectingRegion to customize how this method
+     * determines whether/which children are in `region`.
+     *
+     * @paran region - All resultant `ImageNode`s must intersect `region`.
+     * @param isTooSmall - If `isTooSmall` returns true for an image node, that node
+     *                     is excluded from the output.
+     *
+     */
     getLeavesIntersectingRegion(region: Rect2, isTooSmall?: TooSmallToRenderCheck): ImageNode[];
     getChildWithContent(target: AbstractComponent): ImageNode | null;
     getLeaves(): ImageNode[];

package/dist/cjs/image/EditorImage.js

@@ -50,7 +50,9 @@ var EditorImageEventType;
     EditorImageEventType[EditorImageEventType["AutoresizeModeChanged"] = 1] = "AutoresizeModeChanged";
 })(EditorImageEventType || (exports.EditorImageEventType = EditorImageEventType = {}));
 let debugMode = false;
-// Handles lookup/storage of elements in the image
+/**
+ * Handles lookup/storage of elements in the image.
+ */
 class EditorImage {
     // @internal
     constructor() {
@@ -211,7 +213,8 @@ class EditorImage {
      *
      * @see {@link Display.flatten}
      *
-     * @example
+     * **Example**:
+     *
      * [[include:doc-pages/inline-examples/adding-a-stroke.md]]
      */
     static addElement(elem, applyByFlattening = false) {
@@ -549,9 +552,16 @@ class ImageNode {
         }
         return this.getChildrenIntersectingRegion(region);
     }
-    // Returns a list of `ImageNode`s with content (and thus no children).
-    // Override getChildrenIntersectingRegion to customize how this method
-    // determines whether/which children are in `region`.
+    /**
+     * Returns a list of `ImageNode`s with content (and thus no children).
+     * Override getChildrenIntersectingRegion to customize how this method
+     * determines whether/which children are in `region`.
+     *
+     * @paran region - All resultant `ImageNode`s must intersect `region`.
+     * @param isTooSmall - If `isTooSmall` returns true for an image node, that node
+     *                     is excluded from the output.
+     *
+     */
     getLeavesIntersectingRegion(region, isTooSmall) {
         const result = [];
         const workList = [];

package/dist/cjs/inputEvents.d.ts

@@ -17,7 +17,8 @@ export declare enum InputEvtType {
     KeyPressEvent = 5,
     KeyUpEvent = 6,
     CopyEvent = 7,
-    PasteEvent = 8
+    PasteEvent = 8,
+    ContextMenu = 9
 }
 export interface WheelEvt {
     readonly kind: InputEvtType.WheelEvt;
@@ -76,18 +77,25 @@ export interface PointerMoveEvt extends PointerEvtBase {
 export interface PointerUpEvt extends PointerEvtBase {
     readonly kind: InputEvtType.PointerUpEvt;
 }
+export interface ContextMenuEvt {
+    readonly kind: InputEvtType.ContextMenu;
+    readonly screenPos: Point2;
+    readonly canvasPos: Point2;
+}
 /**
  * An internal `js-draw` pointer event type.
  *
  * This **is not** the same as a DOM pointer event.
  */
 export type PointerEvt = PointerDownEvt | PointerMoveEvt | PointerUpEvt;
+/** The type of any internal {@link PointerEvt} record. */
+export type PointerEvtType = InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt;
 /**
  * An internal `js-draw` input event type.
  *
  * These are not DOM events.
  */
-export type InputEvt = KeyPressEvent | KeyUpEvent | WheelEvt | GestureCancelEvt | PointerEvt | CopyEvent | PasteEvent;
+export type InputEvt = KeyPressEvent | KeyUpEvent | WheelEvt | GestureCancelEvt | PointerEvt | CopyEvent | PasteEvent | ContextMenuEvt;
 export declare const keyUpEventFromHTMLEvent: (event: KeyboardEvent) => KeyUpEvent;
 export declare const keyPressEventFromHTMLEvent: (event: KeyboardEvent) => KeyPressEvent;
 export declare const isPointerEvt: (event: InputEvt) => event is PointerEvt;

package/dist/cjs/inputEvents.js

@@ -12,6 +12,7 @@ var InputEvtType;
     InputEvtType[InputEvtType["KeyUpEvent"] = 6] = "KeyUpEvent";
     InputEvtType[InputEvtType["CopyEvent"] = 7] = "CopyEvent";
     InputEvtType[InputEvtType["PasteEvent"] = 8] = "PasteEvent";
+    InputEvtType[InputEvtType["ContextMenu"] = 9] = "ContextMenu";
 })(InputEvtType || (exports.InputEvtType = InputEvtType = {}));
 // Constructor
 const keyEventFromHTMLEvent = (kind, event) => {

package/dist/cjs/localizations/es.js

@@ -43,6 +43,9 @@ const localization = {
     filledRectanglePen: 'Rectángulo sin borde',
     lockRotation: 'Bloquea rotación',
     paste: 'Pegar',
+    selectionMenu__paste: 'Pegar',
+    selectionMenu__delete: 'Eliminar',
+    selectionMenu__duplicate: 'Duplicar',
     closeSidebar: (toolName) => `Close sidebar for ${toolName}`,
     dropdownShown: (toolName) => `Menú por ${toolName} es visible`,
     dropdownHidden: (toolName) => { return `Menú por ${toolName} fue ocultado`; },

package/dist/cjs/rendering/Display.d.ts

@@ -37,6 +37,7 @@ export default class Display {
      * in the DOM).
      */
     get width(): number;
+    /** @returns the visible height of the display. See {@link width}. */
     get height(): number;
     /** @internal */
     getCache(): RenderingCache;

package/dist/cjs/rendering/Display.js

@@ -100,6 +100,7 @@ class Display {
     get width() {
         return this.dryInkRenderer.displaySize().x;
     }
+    /** @returns the visible height of the display. See {@link width}. */
     get height() {
         return this.dryInkRenderer.displaySize().y;
     }

package/dist/cjs/rendering/TextRenderingStyle.d.ts

@@ -22,10 +22,11 @@ export declare const cloneTextStyle: (style: TextRenderingStyle) => {
     };
     size: number;
     fontFamily: string;
-    fontWeight?: string | undefined;
-    fontStyle?: string | undefined;
-    fontVariant?: string | undefined;
+    fontWeight?: string;
+    fontStyle?: string;
+    fontVariant?: string;
 };
+/** `json` can either be a `string` or an `object`. */
 export declare const textStyleFromJSON: (json: any) => TextRenderingStyle;
 export declare const textStyleToJSON: (style: TextRenderingStyle) => {
     renderingStyle: {
@@ -37,7 +38,7 @@ export declare const textStyleToJSON: (style: TextRenderingStyle) => {
     };
     size: number;
     fontFamily: string;
-    fontWeight?: string | undefined;
-    fontStyle?: string | undefined;
-    fontVariant?: string | undefined;
+    fontWeight?: string;
+    fontStyle?: string;
+    fontVariant?: string;
 };

package/dist/cjs/rendering/TextRenderingStyle.js

@@ -9,6 +9,7 @@ const cloneTextStyle = (style) => {
     };
 };
 exports.cloneTextStyle = cloneTextStyle;
+/** `json` can either be a `string` or an `object`. */
 const textStyleFromJSON = (json) => {
     if (typeof json === 'string') {
         json = JSON.parse(json);

package/dist/cjs/rendering/renderers/CanvasRenderer.d.ts

@@ -8,9 +8,15 @@ import RenderablePathSpec from '../RenderablePathSpec';
  * Renders onto a `CanvasRenderingContext2D`.
  *
  * @example
- * ```ts
- * const editor = new Editor(document.body);
+ * ```ts,runnable
+ * import {Editor,CanvasRenderer} from 'js-draw';
  *
+ * // Create an editor and load initial data -- don't add to the body (hidden editor).
+ * const editor = new Editor(document.createElement('div'));
+ * await editor.loadFromSVG('<svg><path d="m0,0 l100,5 l-50,60 l30,20 z" fill="green"/></svg>');
+ * ---visible---
+ * // Given some editor.
+ * // Set up the canvas to be drawn onto.
  * const canvas = document.createElement('canvas');
  * const ctx = canvas.getContext('2d');
  *
@@ -22,6 +28,9 @@ import RenderablePathSpec from '../RenderablePathSpec';
  * // Render editor.image onto the renderer
  * const renderer = new CanvasRenderer(ctx, viewport);
  * editor.image.render(renderer, viewport);
+ *
+ * // Add the rendered canvas to the document.
+ * document.body.appendChild(canvas);
  * ```
  */
 export default class CanvasRenderer extends AbstractRenderer {
@@ -39,7 +48,7 @@ export default class CanvasRenderer extends AbstractRenderer {
      */
     constructor(ctx: CanvasRenderingContext2D, viewport: Viewport);
     private transformBy;
-    canRenderFromWithoutDataLoss(other: AbstractRenderer): boolean;
+    canRenderFromWithoutDataLoss(other: AbstractRenderer): other is CanvasRenderer;
     renderFromOtherOfSameType(transformBy: Mat33, other: AbstractRenderer): void;
     setDraftMode(draftMode: boolean): void;
     displaySize(): Vec2;

package/dist/cjs/rendering/renderers/CanvasRenderer.js

@@ -11,9 +11,15 @@ const RenderablePathSpec_1 = require("../RenderablePathSpec");
  * Renders onto a `CanvasRenderingContext2D`.
  *
  * @example
- * ```ts
- * const editor = new Editor(document.body);
+ * ```ts,runnable
+ * import {Editor,CanvasRenderer} from 'js-draw';
  *
+ * // Create an editor and load initial data -- don't add to the body (hidden editor).
+ * const editor = new Editor(document.createElement('div'));
+ * await editor.loadFromSVG('<svg><path d="m0,0 l100,5 l-50,60 l30,20 z" fill="green"/></svg>');
+ * ---visible---
+ * // Given some editor.
+ * // Set up the canvas to be drawn onto.
  * const canvas = document.createElement('canvas');
  * const ctx = canvas.getContext('2d');
  *
@@ -25,6 +31,9 @@ const RenderablePathSpec_1 = require("../RenderablePathSpec");
  * // Render editor.image onto the renderer
  * const renderer = new CanvasRenderer(ctx, viewport);
  * editor.image.render(renderer, viewport);
+ *
+ * // Add the rendered canvas to the document.
+ * document.body.appendChild(canvas);
  * ```
  */
 class CanvasRenderer extends AbstractRenderer_1.default {
@@ -176,6 +185,10 @@ class CanvasRenderer extends AbstractRenderer_1.default {
         this.ctx.restore();
     }
     drawImage(image) {
+        // .drawImage can fail for zero-size images.
+        if (image.image.width === 0 || image.image.height === 0) {
+            return;
+        }
         this.ctx.save();
         const transform = this.getCanvasToScreenTransform().rightMul(image.transform);
         this.transformBy(transform);

package/dist/cjs/rendering/renderers/DummyRenderer.d.ts

@@ -27,7 +27,7 @@ export default class DummyRenderer extends AbstractRenderer {
     startObject(boundingBox: Rect2, _clip: boolean): void;
     endObject(): void;
     isTooSmallToRender(_rect: Rect2): boolean;
-    canRenderFromWithoutDataLoss(other: AbstractRenderer): boolean;
+    canRenderFromWithoutDataLoss(other: AbstractRenderer): other is DummyRenderer;
     renderFromOtherOfSameType(transform: Mat33, other: AbstractRenderer): void;
     toString(): string;
 }

package/dist/cjs/testing/firstElementAncestorOfNode.d.ts

@@ -1,3 +1,3 @@
-/** Returns the first ancestor of the given node that is an HTMLElement */
+/** Returns the first ancestor of the given node (or the node itself) that is an HTMLElement */
 declare const firstElementAncestorOfNode: (node: Node | null) => HTMLElement | null;
 export default firstElementAncestorOfNode;

package/dist/cjs/testing/firstElementAncestorOfNode.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-/** Returns the first ancestor of the given node that is an HTMLElement */
+/** Returns the first ancestor of the given node (or the node itself) that is an HTMLElement */
 const firstElementAncestorOfNode = (node) => {
     if (node instanceof HTMLElement) {
         return node;

package/dist/cjs/testing/sendPenEvent.d.ts

@@ -1,12 +1,12 @@
 import Editor from '../Editor';
 import { Point2 } from '@js-draw/math';
 import Pointer, { PointerDevice } from '../Pointer';
-import { InputEvtType } from '../inputEvents';
+import { PointerEvtType } from '../inputEvents';
 /**
  * Dispatch a pen event to the currently selected tool.
  * Intended for unit tests.
  *
  * @see {@link sendTouchEvent}
  */
-declare const sendPenEvent: (editor: Editor, eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, point: Point2, allPointers?: Pointer[], deviceType?: PointerDevice) => Pointer;
+declare const sendPenEvent: (editor: Editor, eventType: PointerEvtType, point: Point2, allPointers?: Pointer[], deviceType?: PointerDevice) => Pointer;
 export default sendPenEvent;

package/dist/cjs/testing/sendTouchEvent.d.ts

@@ -1,7 +1,7 @@
 import Editor from '../Editor';
 import { Vec2 } from '@js-draw/math';
 import Pointer from '../Pointer';
-import { InputEvtType } from '../inputEvents';
+import { PointerEvtType } from '../inputEvents';
 /**
  * Dispatch a touch event to the currently selected tool. Intended for unit tests.
  *
@@ -38,5 +38,5 @@ import { InputEvtType } from '../inputEvents';
  * }
  * ```
  */
-declare const sendTouchEvent: (editor: Editor, eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, screenPos: Vec2, allOtherPointers?: Pointer[]) => Pointer;
+declare const sendTouchEvent: (editor: Editor, eventType: PointerEvtType, screenPos: Vec2, allOtherPointers?: Pointer[]) => Pointer;
 export default sendTouchEvent;

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

@@ -13,6 +13,11 @@ export type ToolbarActionButtonOptions = {
     mustBeToplevel?: boolean;
     autoDisableInReadOnlyEditors?: boolean;
 };
+/**
+ * Abstract base class for js-draw editor toolbars.
+ *
+ * See {@link Editor.addToolbar}, {@link makeDropdownToolbar}, and {@link makeEdgeToolbar}.
+ */
 export default abstract class AbstractToolbar {
     #private;
     protected editor: Editor;
@@ -82,7 +87,7 @@ export default abstract class AbstractToolbar {
      * Called by `serializeState` to attach any additional JSONifyable data
      * to the serialized result.
      *
-     * @reutrns an object that can be converted to JSON with `JSON.stringify`.
+     * @returns an object that can be converted to JSON with `JSON.stringify`.
      */
     protected serializeInternal(): any;
     /**

package/dist/cjs/toolbar/AbstractToolbar.js

@@ -36,6 +36,11 @@ const math_1 = require("@js-draw/math");
 const constants_1 = require("./constants");
 const SaveActionWidget_1 = __importDefault(require("./widgets/SaveActionWidget"));
 const ExitActionWidget_1 = __importDefault(require("./widgets/ExitActionWidget"));
+/**
+ * Abstract base class for js-draw editor toolbars.
+ *
+ * See {@link Editor.addToolbar}, {@link makeDropdownToolbar}, and {@link makeEdgeToolbar}.
+ */
 class AbstractToolbar {
     /** @internal */
     constructor(editor, localizationTable = localization_1.defaultToolbarLocalization) {
@@ -222,7 +227,7 @@ class AbstractToolbar {
      * Called by `serializeState` to attach any additional JSONifyable data
      * to the serialized result.
      *
-     * @reutrns an object that can be converted to JSON with `JSON.stringify`.
+     * @returns an object that can be converted to JSON with `JSON.stringify`.
      */
     serializeInternal() { }
     /**

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

@@ -63,7 +63,7 @@ export default class IconProvider {
     /** Renamed to {@link makeResizeImageToSelectionIcon} @deprecated */
     makeResizeViewportIcon(): IconElemType;
     makeDuplicateSelectionIcon(): IconElemType;
-    /** Unused. @deprecated */
+    makeCopyIcon(): IconElemType;
     makePasteIcon(): IconElemType;
     makeDeleteSelectionIcon(): IconElemType;
     makeCloseIcon(): IconElemType;

package/dist/cjs/toolbar/IconProvider.js

@@ -710,7 +710,12 @@ class IconProvider {
 			M 10,25 10,90 70,90 70,60 40,60 40,25 10,25 z 
 		`);
     }
-    /** Unused. @deprecated */
+    makeCopyIcon() {
+        return this.makeIconFromPath(`
+			M 45,10 45,55 90,55 90,10 45,10 z
+			M 10,25 10,90 70,90 70,60 40,60 40,25 10,25 z 
+		`);
+    }
     makePasteIcon() {
         const icon = this.makeIconFromPath(`
 			M 50 0 L 50 5 L 35 5 L 40 24.75 L 20 25 L 20 100 L 85 100 L 100 90 L 100 24 L 75.1 24.3 L 80 5 L 65 5 L 65 0 L 50 0 z

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

@@ -13,6 +13,14 @@ export declare enum ToolbarWidgetTag {
     Undo = "undo",
     Redo = "redo"
 }
+/**
+ * The `abstract` base class for items that can be shown in a `js-draw` toolbar. See also {@link AbstractToolbar.addWidget}.
+ *
+ * See [the custom tool example](https://github.com/personalizedrefrigerator/js-draw/blob/main/docs/examples/example-custom-tools/example.ts)
+ * for how to create a custom toolbar widget for a tool.
+ *
+ * For custom action buttons, {@link AbstractToolbar.addActionButton} may be sufficient for most use cases.
+ */
 export default abstract class BaseWidget {
     #private;
     protected editor: Editor;

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

@@ -32,6 +32,14 @@ var ToolbarWidgetTag;
     ToolbarWidgetTag["Undo"] = "undo";
     ToolbarWidgetTag["Redo"] = "redo";
 })(ToolbarWidgetTag || (exports.ToolbarWidgetTag = ToolbarWidgetTag = {}));
+/**
+ * The `abstract` base class for items that can be shown in a `js-draw` toolbar. See also {@link AbstractToolbar.addWidget}.
+ *
+ * See [the custom tool example](https://github.com/personalizedrefrigerator/js-draw/blob/main/docs/examples/example-custom-tools/example.ts)
+ * for how to create a custom toolbar widget for a tool.
+ *
+ * For custom action buttons, {@link AbstractToolbar.addActionButton} may be sufficient for most use cases.
+ */
 class BaseWidget {
     constructor(editor, id, localizationTable) {
         _BaseWidget_instances.add(this);

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

@@ -4,6 +4,7 @@ import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
 import { SavedToolbuttonState } from './BaseWidget';
 import HelpDisplay from '../utils/HelpDisplay';
+/** This toolbar widget allows controlling the editor's {@link PanZoom} tool(s). */
 export default class HandToolWidget extends BaseToolWidget {
     private allowTogglingBaseTool;
     protected overridePanZoomTool: PanZoom;

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

@@ -130,6 +130,7 @@ class HandModeWidget extends BaseWidget_1.default {
         return this.helpText;
     }
 }
+/** This toolbar widget allows controlling the editor's {@link PanZoom} tool(s). */
 class HandToolWidget extends BaseToolWidget_1.default {
     constructor(editor, 
     // Can either be the primary pan/zoom tool (in the primary tools list) or

package/dist/cjs/toolbar/widgets/InsertImageWidget/ImageWrapper.d.ts

@@ -1,4 +1,4 @@
-import { RenderableImage } from 'js-draw/src/rendering/renderers/AbstractRenderer';
+import { RenderableImage } from '../../../rendering/renderers/AbstractRenderer';
 /** Handles filtering and other operations on an image. */
 export declare class ImageWrapper {
     private imageBase64Url;

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

@@ -6,12 +6,18 @@ import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
 import { SavedToolbuttonState } from './BaseWidget';
 import HelpDisplay from '../utils/HelpDisplay';
+/** Represents a style that can be applied to a pen tool. */
 export interface PenTypeRecord {
     name: string;
     id: string;
     isShapeBuilder?: boolean;
     factory: ComponentBuilderFactory;
 }
+/**
+ * This toolbar widget allows a user to control a single {@link Pen} tool.
+ *
+ * See also {@link AbstractToolbar.addDefaultToolWidgets}.
+ */
 export default class PenToolWidget extends BaseToolWidget {
     private tool;
     private updateInputs;

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

@@ -18,6 +18,11 @@ const constants_1 = require("../constants");
 const makeThicknessSlider_1 = __importDefault(require("./components/makeThicknessSlider"));
 const makeGridSelector_1 = __importDefault(require("./components/makeGridSelector"));
 const PolylineBuilder_1 = require("../../components/builders/PolylineBuilder");
+/**
+ * This toolbar widget allows a user to control a single {@link Pen} tool.
+ *
+ * See also {@link AbstractToolbar.addDefaultToolWidgets}.
+ */
 class PenToolWidget extends BaseToolWidget_1.default {
     constructor(editor, tool, localization) {
         super(editor, tool, 'pen', localization);

package/dist/cjs/types.d.ts

@@ -4,7 +4,12 @@ import type BaseTool from './tools/BaseTool';
 import type AbstractComponent from './components/AbstractComponent';
 import type Command from './commands/Command';
 import type { WidgetContentLayoutManager } from './toolbar/widgets/layout/types';
+/**
+ * The type of the {@link Editor.notifier}, which provides notifications for
+ * various editor-related events.
+ */
 export type EditorNotifier = EventDispatcher<EditorEventType, EditorEventDataType>;
+/** @see {@link EditorNotifier} */
 export declare enum EditorEventType {
     ToolEnabled = 0,
     ToolDisabled = 1,

package/dist/cjs/types.js

@@ -2,6 +2,7 @@
 // Types related to the image editor
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UndoEventType = exports.EditorEventType = void 0;
+/** @see {@link EditorNotifier} */
 var EditorEventType;
 (function (EditorEventType) {
     EditorEventType[EditorEventType["ToolEnabled"] = 0] = "ToolEnabled";

package/dist/cjs/util/ClipboardHandler.d.ts

@@ -1,4 +1,8 @@
 import { Editor } from '../Editor';
+interface Callbacks {
+    onPasteError(error: Error | unknown): void;
+    onCopyError(error: Error | unknown): void;
+}
 /**
  * Handles conversion between the browser clipboard APIs and internal
  * js-draw clipboard events.
@@ -6,7 +10,8 @@ import { Editor } from '../Editor';
 export default class ClipboardHandler {
     #private;
     private editor;
-    constructor(editor: Editor);
+    private callbacks?;
+    constructor(editor: Editor, callbacks?: Callbacks | undefined);
     /**
      * Pastes data from the clipboard into the editor associated with
      * this handler.
@@ -16,6 +21,7 @@ export default class ClipboardHandler {
      * @returns true if the paste event was handled by the editor.
      */
     paste(event?: DragEvent | ClipboardEvent): Promise<boolean>;
+    private pasteInternal;
     /**
      * Copies text from the editor associated with this.
      *
@@ -24,4 +30,6 @@ export default class ClipboardHandler {
      * images.
      */
     copy(event?: ClipboardEvent): Promise<void>;
+    private copyInternal;
 }
+export {};