js-draw 1.18.0 → 1.20.0

package/dist/cjs/image/EditorImage.js

@@ -344,7 +344,7 @@ class EditorImage {
      *
      * @internal
      */
-    setDebugMode(newDebugMode) {
+    static setDebugMode(newDebugMode) {
         debugMode = newDebugMode;
     }
 }
@@ -617,8 +617,8 @@ class ImageNode {
                 const nodeForChildren = new ImageNode(this);
                 nodeForChildren.children = this.children;
                 this.children = [nodeForNewLeaf, nodeForChildren];
-                nodeForChildren.recomputeBBox(true);
                 nodeForChildren.updateParents();
+                nodeForChildren.recomputeBBox(true);
             }
             return nodeForNewLeaf.addLeaf(leaf);
         }
@@ -635,6 +635,9 @@ class ImageNode {
         const newNode = ImageNode.createLeafNode(this, leaf);
         this.children.push(newNode);
         newNode.recomputeBBox(true);
+        if (this.children.length >= this.targetChildCount) {
+            this.rebalance();
+        }
         return newNode;
     }
     // Creates a new leaf node with the given content.
@@ -667,6 +670,7 @@ class ImageNode {
                 this.parent?.recomputeBBox(true);
             }
         }
+        this.checkRep();
     }
     // Grows this' bounding box to also include `other`.
     // Always bubbles up.
@@ -690,10 +694,12 @@ class ImageNode {
             // Remove this' parent, if this' parent isn't the root.
             const oldParent = this.parent;
             if (oldParent.parent !== null) {
-                oldParent.children = [];
-                this.parent = oldParent.parent;
-                this.parent.children.push(this);
+                const newParent = oldParent.parent;
+                newParent.children = newParent.children.filter(c => c !== oldParent);
                 oldParent.parent = null;
+                oldParent.children = [];
+                this.parent = newParent;
+                newParent.children.push(this);
                 this.parent.recomputeBBox(false);
             }
             else if (this.content === null) {
@@ -703,10 +709,63 @@ class ImageNode {
                 this.parent = null;
             }
         }
+        // Create virtual containers for children. Handles the case where there
+        // are many small, often non-overlapping children that we still want to be grouped.
+        if (this.children.length > this.targetChildCount * 10) {
+            const grid = this.getBBox().divideIntoGrid(4, 4);
+            const indexToCount = [];
+            while (indexToCount.length < grid.length) {
+                indexToCount.push(0);
+            }
+            for (const child of this.children) {
+                for (let i = 0; i < grid.length; i++) {
+                    if (grid[i].containsRect(child.getBBox())) {
+                        indexToCount[i]++;
+                    }
+                }
+            }
+            let indexWithGreatest = 0;
+            let greatestCount = indexToCount[0];
+            for (let i = 1; i < indexToCount.length; i++) {
+                if (indexToCount[i] > greatestCount) {
+                    indexWithGreatest = i;
+                    greatestCount = indexToCount[i];
+                }
+            }
+            const targetGridSquare = grid[indexWithGreatest];
+            // Avoid clustering if just a few children would be grouped.
+            // Unnecessary clustering can lead to unnecessarily nested nodes.
+            if (greatestCount > 4) {
+                const newChildren = [];
+                const childNodeChildren = [];
+                for (const child of this.children) {
+                    if (targetGridSquare.containsRect(child.getBBox())) {
+                        childNodeChildren.push(child);
+                    }
+                    else {
+                        newChildren.push(child);
+                    }
+                }
+                if (childNodeChildren.length < this.children.length) {
+                    this.children = newChildren;
+                    const child = new ImageNode(this);
+                    this.children.push(child);
+                    child.children = childNodeChildren;
+                    child.updateParents(false);
+                    child.recomputeBBox(false);
+                    child.rebalance();
+                }
+            }
+        }
+        // Empty?
+        if (this.parent && this.children.length === 0 && this.content === null) {
+            this.remove();
+        }
     }
     // Removes the parent-to-child link.
     // Called internally by `.remove`
     removeChild(child) {
+        this.checkRep();
         const oldChildCount = this.children.length;
         this.children = this.children.filter(node => {
             return node !== child;
@@ -716,6 +775,8 @@ class ImageNode {
             child.rebalance();
         });
         this.recomputeBBox(true);
+        this.rebalance();
+        this.checkRep();
     }
     // Remove this node and all of its children
     remove() {
@@ -730,6 +791,7 @@ class ImageNode {
         this.parent = null;
         this.content = null;
         this.children = [];
+        this.checkRep();
     }
     // Creates a (potentially incomplete) async rendering of this image.
     // Returns false if stopped early
@@ -796,11 +858,45 @@ class ImageNode {
         const lineWidth = isLeaf ? 1 * pixelSize : 2 * pixelSize;
         renderer.drawRect(bbox.intersection(visibleRect), lineWidth, { fill });
         renderer.endObject();
+        if (bbox.maxDimension > visibleRect.maxDimension / 3) {
+            const textStyle = {
+                fontFamily: 'monospace',
+                size: bbox.minDimension / 20,
+                renderingStyle: { fill: math_1.Color4.red },
+            };
+            renderer.drawText(`Depth: ${depth}`, math_1.Mat33.translation(bbox.bottomLeft), textStyle);
+        }
         // Render debug information for children
         for (const child of this.children) {
             child.renderDebugBoundingBoxes(renderer, visibleRect, depth + 1);
         }
     }
+    checkRep(depth = 0) {
+        // Slow -- disabld by default
+        if (debugMode) {
+            if (this.parent && !this.parent.children.includes(this)) {
+                throw new Error(`Parent does not have this node as a child. (depth: ${depth})`);
+            }
+            let expectedBBox = null;
+            const seenChildren = new Set();
+            for (const child of this.children) {
+                expectedBBox ??= child.getBBox();
+                expectedBBox = expectedBBox.union(child.getBBox());
+                if (child.parent !== this) {
+                    throw new Error(`Child with bbox ${child.getBBox()} and ${child.children.length} has wrong parent (was ${child.parent}).`);
+                }
+                // Children should only be present once
+                if (seenChildren.has(child)) {
+                    throw new Error(`Child ${child} is present twice or more in its parent's child list`);
+                }
+                seenChildren.add(child);
+            }
+            const tolerance = this.bbox.minDimension / 100;
+            if (expectedBBox && !this.bbox.eq(expectedBBox, tolerance)) {
+                throw new Error(`Wrong bounding box ${expectedBBox} \\neq ${this.bbox} (depth: ${depth})`);
+            }
+        }
+    }
 }
 exports.ImageNode = ImageNode;
 ImageNode.idCounter = 0;

package/dist/cjs/rendering/caching/RenderingCacheNode.js

@@ -141,24 +141,29 @@ class RenderingCacheNode {
             || items.length === 0) {
             return;
         }
-        const newItems = [];
-        // Divide [items] until nodes are leaves or smaller than this
-        for (const item of items) {
-            const bbox = item.getBBox();
-            if (!bbox.intersects(this.region)) {
-                continue;
-            }
-            if (bbox.maxDimension >= this.region.maxDimension) {
-                newItems.push(...item.getChildrenOrSelfIntersectingRegion(this.region));
-            }
-            else {
-                newItems.push(item);
+        // Divide [items] until nodes are smaller than this, or are leaves.
+        const divideUntilSmallerThanThis = (itemsToDivide) => {
+            const newItems = [];
+            for (const item of itemsToDivide) {
+                const bbox = item.getBBox();
+                if (!bbox.intersects(this.region)) {
+                    continue;
+                }
+                if (bbox.maxDimension >= this.region.maxDimension) {
+                    newItems.push(...item.getChildrenOrSelfIntersectingRegion(this.region));
+                }
+                else {
+                    newItems.push(item);
+                }
             }
-        }
-        items = newItems;
+            return newItems;
+        };
+        items = divideUntilSmallerThanThis(items);
         // Can we cache at all?
         if (!this.cacheState.props.isOfCorrectType(screenRenderer)) {
-            items.forEach(item => item.render(screenRenderer, viewport.visibleRect));
+            for (const item of items) {
+                item.render(screenRenderer, viewport.visibleRect);
+            }
             return;
         }
         if (this.cacheState.debugMode) {

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

@@ -69,12 +69,12 @@ class CanvasRenderer extends AbstractRenderer_1.default {
     setDraftMode(draftMode) {
         if (draftMode) {
             this.minSquareCurveApproxDist = 9;
-            this.minRenderSizeBothDimens = 2;
-            this.minRenderSizeAnyDimen = 0.5;
+            this.minRenderSizeBothDimens = 1;
+            this.minRenderSizeAnyDimen = 0.1;
         }
         else {
             this.minSquareCurveApproxDist = 0.5;
-            this.minRenderSizeBothDimens = 0.2;
+            this.minRenderSizeBothDimens = 0.1;
             this.minRenderSizeAnyDimen = 1e-6;
         }
     }
@@ -243,7 +243,7 @@ class CanvasRenderer extends AbstractRenderer_1.default {
     // @internal
     isTooSmallToRender(rect) {
         // Should we ignore all objects within this object's bbox?
-        const diagonal = rect.size.times(this.getCanvasToScreenTransform().getScaleFactor());
+        const diagonal = rect.size.times(this.getSizeOfCanvasPixelOnScreen());
         const bothDimenMinSize = this.minRenderSizeBothDimens;
         const bothTooSmall = Math.abs(diagonal.x) < bothDimenMinSize && Math.abs(diagonal.y) < bothDimenMinSize;
         const anyDimenMinSize = this.minRenderSizeAnyDimen;

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

@@ -0,0 +1,3 @@
+/** Returns the first node or element with `textContent` matching `expectedText`. */
+declare const findNodeWithText: (expectedText: string, parent: Node) => Node | null;
+export default findNodeWithText;

package/dist/cjs/testing/findNodeWithText.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/** Returns the first node or element with `textContent` matching `expectedText`. */
+const findNodeWithText = (expectedText, parent) => {
+    if (parent.textContent === expectedText) {
+        return parent;
+    }
+    for (const child of parent.childNodes) {
+        const results = findNodeWithText(expectedText, child);
+        if (results) {
+            return results;
+        }
+    }
+    return null;
+};
+exports.default = findNodeWithText;

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

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

package/dist/cjs/testing/firstElementAncestorOfNode.js

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

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

@@ -0,0 +1,3 @@
+import type Editor from '../Editor';
+declare const sendKeyPressRelease: (editor: Editor, key: string) => void;
+export default sendKeyPressRelease;

package/dist/cjs/testing/sendKeyPressRelease.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const inputEvents_1 = require("../inputEvents");
+const sendKeyPressRelease = (editor, key) => {
+    editor.sendKeyboardEvent(inputEvents_1.InputEvtType.KeyPressEvent, key);
+    editor.sendKeyboardEvent(inputEvents_1.InputEvtType.KeyUpEvent, key);
+};
+exports.default = sendKeyPressRelease;

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

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

package/dist/cjs/testing/sendPenEvent.js

@@ -1,9 +1,32 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const Pointer_1 = __importDefault(require("../Pointer"));
+const Pointer_1 = __importStar(require("../Pointer"));
 const inputEvents_1 = require("../inputEvents");
 const getUniquePointerId_1 = __importDefault(require("./getUniquePointerId"));
 /**
@@ -12,9 +35,9 @@ const getUniquePointerId_1 = __importDefault(require("./getUniquePointerId"));
  *
  * @see {@link sendTouchEvent}
  */
-const sendPenEvent = (editor, eventType, point, allPointers) => {
+const sendPenEvent = (editor, eventType, point, allPointers, deviceType = Pointer_1.PointerDevice.Pen) => {
     const id = (0, getUniquePointerId_1.default)(allPointers ?? []);
-    const mainPointer = Pointer_1.default.ofCanvasPoint(point, eventType !== inputEvents_1.InputEvtType.PointerUpEvt, editor.viewport, id);
+    const mainPointer = Pointer_1.default.ofCanvasPoint(point, eventType !== inputEvents_1.InputEvtType.PointerUpEvt, editor.viewport, id, deviceType);
     editor.toolController.dispatchInputEvent({
         kind: eventType,
         allPointers: allPointers ?? [

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

@@ -17,6 +17,7 @@ export interface ToolbarLocalization extends ToolbarUtilsLocalization {
     dragAndDropHereOrBrowse: string;
     cancel: string;
     submit: string;
+    addAll: string;
     roundedTipPen: string;
     roundedTipPen2: string;
     flatTipPen: string;
@@ -56,6 +57,8 @@ export interface ToolbarLocalization extends ToolbarUtilsLocalization {
     strokeAutocorrect: string;
     errorImageHasZeroSize: string;
     describeTheImage: string;
+    fileInput__loading: string;
+    fileInput__andNMoreFiles: (count: number) => string;
     penDropdown__baseHelpText: string;
     penDropdown__colorHelpText: string;
     penDropdown__thicknessHelpText: string;

package/dist/cjs/toolbar/localization.js

@@ -17,6 +17,7 @@ exports.defaultToolbarLocalization = {
     chooseFile: 'Choose file',
     dragAndDropHereOrBrowse: 'Drag and drop here\nor\n{{browse}}',
     submit: 'Submit',
+    addAll: 'Add all',
     cancel: 'Cancel',
     resetView: 'Reset view',
     thicknessLabel: 'Thickness',
@@ -60,6 +61,8 @@ exports.defaultToolbarLocalization = {
     paste: 'Paste',
     errorImageHasZeroSize: 'Error: Image has zero size',
     describeTheImage: 'Image description',
+    fileInput__loading: 'Loading...',
+    fileInput__andNMoreFiles: (n) => `(...${n} more)`,
     // Help text
     penDropdown__baseHelpText: 'This tool draws shapes or freehand lines.',
     penDropdown__colorHelpText: 'Changes the pen\'s color',

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

@@ -126,6 +126,7 @@ export default abstract class BaseWidget {
     setHidden(hidden: boolean): void;
     /** Set whether the widget is contained within another. @internal */
     setIsToplevel(toplevel: boolean): void;
+    /** Returns true if the menu for this widget is open. */
     protected isDropdownVisible(): boolean;
     protected isSelected(): boolean;
     private createDropdownIcon;

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

@@ -405,6 +405,7 @@ class BaseWidget {
     setIsToplevel(toplevel) {
         this.toplevel = toplevel;
     }
+    /** Returns true if the menu for this widget is open. */
     isDropdownVisible() {
         return this.dropdown?.visible?.get() ?? false;
     }

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

@@ -0,0 +1,23 @@
+import { RenderableImage } from 'js-draw/src/rendering/renderers/AbstractRenderer';
+/** Handles filtering and other operations on an image. */
+export declare class ImageWrapper {
+    private imageBase64Url;
+    private preview;
+    private onUrlUpdate;
+    private readonly originalSrc;
+    private altText;
+    private constructor();
+    private updateImageData;
+    decreaseSize(resizeFactor?: number): void;
+    reset(): void;
+    isChanged(): boolean;
+    isLarge(): boolean;
+    getBase64Url(): string;
+    getAltText(): string;
+    setAltText(text: string): void;
+    static fromSrcAndPreview(initialBase64Src: string, preview: HTMLImageElement, onUrlUpdate: () => void): ImageWrapper;
+    static fromRenderable(renderable: RenderableImage, onUrlUpdate: () => void): {
+        wrapper: ImageWrapper;
+        preview: HTMLImageElement;
+    };
+}

package/dist/cjs/toolbar/widgets/InsertImageWidget/ImageWrapper.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageWrapper = void 0;
+/** Handles filtering and other operations on an image. */
+class ImageWrapper {
+    constructor(imageBase64Url, preview, onUrlUpdate) {
+        this.imageBase64Url = imageBase64Url;
+        this.preview = preview;
+        this.onUrlUpdate = onUrlUpdate;
+        this.originalSrc = imageBase64Url;
+        preview.src = imageBase64Url;
+    }
+    updateImageData(base64DataUrl) {
+        this.preview.src = base64DataUrl;
+        this.imageBase64Url = base64DataUrl;
+        this.onUrlUpdate();
+    }
+    decreaseSize(resizeFactor = 3 / 4) {
+        const canvas = document.createElement('canvas');
+        canvas.width = this.preview.naturalWidth * resizeFactor;
+        canvas.height = this.preview.naturalHeight * resizeFactor;
+        const ctx = canvas.getContext('2d');
+        ctx?.drawImage(this.preview, 0, 0, canvas.width, canvas.height);
+        // JPEG can be much smaller than PNG for the same image size. Prefer it if
+        // the image is already a JPEG.
+        const format = this.originalSrc?.startsWith('data:image/jpeg;') ? 'image/jpeg' : 'image/png';
+        this.updateImageData(canvas.toDataURL(format));
+    }
+    reset() {
+        this.updateImageData(this.originalSrc);
+    }
+    isChanged() {
+        return this.imageBase64Url !== this.originalSrc;
+    }
+    // Returns true if the current image is large enough to display a "decrease size"
+    // option.
+    isLarge() {
+        const largeImageThreshold = 0.12 * 1024 * 1024; // 0.12 MiB
+        return this.getBase64Url().length > largeImageThreshold;
+    }
+    getBase64Url() {
+        return this.imageBase64Url;
+    }
+    getAltText() {
+        return this.altText;
+    }
+    setAltText(text) {
+        this.altText = text;
+        this.preview.alt = text;
+    }
+    static fromSrcAndPreview(initialBase64Src, preview, onUrlUpdate) {
+        return new ImageWrapper(initialBase64Src, preview, onUrlUpdate);
+    }
+    static fromRenderable(renderable, onUrlUpdate) {
+        const preview = new Image();
+        preview.src = renderable.base64Url;
+        const result = new ImageWrapper(renderable.base64Url, preview, onUrlUpdate);
+        const altText = renderable.label ?? renderable.image.getAttribute('alt');
+        if (altText) {
+            result.setAltText(altText);
+        }
+        return { wrapper: result, preview };
+    }
+}
+exports.ImageWrapper = ImageWrapper;

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

@@ -0,0 +1,3 @@
+import type { RenderableImage } from '../../../rendering/renderers/AbstractRenderer';
+declare const fileToImages: (imageFile: File) => Promise<RenderableImage[]>;
+export default fileToImages;

package/dist/cjs/toolbar/widgets/InsertImageWidget/fileToImages.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fileToBase64Url_1 = __importDefault(require("../../../util/fileToBase64Url"));
+const math_1 = require("@js-draw/math");
+const fileToImages = async (imageFile) => {
+    const result = [];
+    const imageElement = new Image();
+    const base64Url = await (0, fileToBase64Url_1.default)(imageFile);
+    if (base64Url) {
+        result.push({
+            image: imageElement,
+            base64Url: base64Url,
+            transform: math_1.Mat33.identity,
+        });
+    }
+    return result;
+};
+exports.default = fileToImages;

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

@@ -0,0 +1,37 @@
+import Editor from '../../../Editor';
+import { ToolbarLocalization } from '../../localization';
+import BaseWidget from '../BaseWidget';
+/**
+ * Provides a widget that allows inserting or modifying raster images.
+ *
+ * It's possible to customize the file picker used by this widget through {@link EditorSettings.image}.
+ *
+ * @example
+ * ```ts,runnable
+ * import { Editor, makeEdgeToolbar, InsertImageWidget } from 'js-draw';
+ *
+ * const editor = new Editor(document.body);
+ * const toolbar = makeEdgeToolbar(editor);
+ *
+ * toolbar.addWidget(new InsertImageWidget(editor));
+ * ```
+ */
+export default class InsertImageWidget extends BaseWidget {
+    private images;
+    private imagesPreview;
+    private selectedFiles;
+    private imageAltTextInput;
+    private statusView;
+    private submitButton;
+    constructor(editor: Editor, localization?: ToolbarLocalization);
+    protected getTitle(): string;
+    protected createIcon(): Element | null;
+    protected setDropdownVisible(visible: boolean): void;
+    protected handleClick(): void;
+    private static nextInputId;
+    protected fillDropdown(dropdown: HTMLElement): boolean;
+    private onImageDataUpdate;
+    private hideDialog;
+    private updateImageSizeDisplay;
+    private updateInputs;
+}