js-draw 1.14.0 → 1.16.0

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

@@ -18,7 +18,7 @@ const makeFormatMenu = (editor, selectionTool, localizationTable) => {
     container.classList.add('selection-format-menu', `${constants_1.toolbarCSSPrefix}spacedList`, `${constants_1.toolbarCSSPrefix}indentedList`);
     const colorRow = document.createElement('div');
     const colorLabel = document.createElement('label');
-    const { input: colorInput, container: colorInputContainer, setValue: setColorInputValue } = (0, makeColorInput_1.default)(editor, color => {
+    const colorInputControl = (0, makeColorInput_1.default)(editor, color => {
         const selection = selectionTool.getSelection();
         if (selection) {
             const updateStyleCommands = [];
@@ -31,6 +31,7 @@ const makeFormatMenu = (editor, selectionTool, localizationTable) => {
             editor.dispatch(unitedCommand);
         }
     });
+    const { input: colorInput, container: colorInputContainer } = colorInputControl;
     colorLabel.innerText = localizationTable.colorLabel;
     const update = () => {
         const selection = selectionTool.getSelection();
@@ -46,12 +47,12 @@ const makeFormatMenu = (editor, selectionTool, localizationTable) => {
                     }
                 }
             }
-            setColorInputValue(math_1.Color4.average(colors));
+            colorInputControl.setValue(math_1.Color4.average(colors));
         }
         else {
             colorInput.disabled = true;
             container.classList.add('disabled');
-            setColorInputValue(math_1.Color4.transparent);
+            colorInputControl.setValue(math_1.Color4.transparent);
         }
     };
     colorRow.replaceChildren(colorLabel, colorInputContainer);
@@ -61,6 +62,10 @@ const makeFormatMenu = (editor, selectionTool, localizationTable) => {
             parent.appendChild(container);
         },
         update,
+        registerHelpText: (helpDisplay) => {
+            helpDisplay.registerTextHelpForElement(colorRow, localizationTable.selectionDropdown__changeColorHelpText);
+            colorInputControl.registerWithHelpTextDisplay(helpDisplay);
+        },
     };
 };
 class SelectionToolWidget extends BaseToolWidget_1.default {
@@ -71,16 +76,19 @@ class SelectionToolWidget extends BaseToolWidget_1.default {
         const resizeButton = new ActionButtonWidget_1.default(editor, 'resize-btn', () => editor.icons.makeResizeImageToSelectionIcon(), this.localizationTable.resizeImageToSelection, () => {
             this.resizeImageToSelection();
         }, localization);
+        resizeButton.setHelpText(this.localizationTable.selectionDropdown__resizeToHelpText);
         const deleteButton = new ActionButtonWidget_1.default(editor, 'delete-btn', () => editor.icons.makeDeleteSelectionIcon(), this.localizationTable.deleteSelection, () => {
             const selection = this.tool.getSelection();
             this.editor.dispatch(selection.deleteSelectedObjects());
             this.tool.clearSelection();
         }, localization);
+        deleteButton.setHelpText(this.localizationTable.selectionDropdown__deleteHelpText);
         const duplicateButton = new ActionButtonWidget_1.default(editor, 'duplicate-btn', () => editor.icons.makeDuplicateSelectionIcon(), this.localizationTable.duplicateSelection, async () => {
             const selection = this.tool.getSelection();
             this.editor.dispatch(await selection.duplicateSelectedObjects());
             this.setDropdownVisible(false);
         }, localization);
+        duplicateButton.setHelpText(this.localizationTable.selectionDropdown__duplicateHelpText);
         this.addSubWidget(resizeButton);
         this.addSubWidget(deleteButton);
         this.addSubWidget(duplicateButton);
@@ -129,8 +137,11 @@ class SelectionToolWidget extends BaseToolWidget_1.default {
     createIcon() {
         return this.editor.icons.makeSelectionIcon();
     }
-    fillDropdown(dropdown) {
-        super.fillDropdown(dropdown);
+    getHelpText() {
+        return this.localizationTable.selectionDropdown__baseHelpText;
+    }
+    fillDropdown(dropdown, helpDisplay) {
+        super.fillDropdown(dropdown, helpDisplay);
         const controlsContainer = document.createElement('div');
         controlsContainer.classList.add(`${constants_1.toolbarCSSPrefix}nonbutton-controls-main-list`);
         dropdown.appendChild(controlsContainer);
@@ -138,6 +149,9 @@ class SelectionToolWidget extends BaseToolWidget_1.default {
         const formatMenu = makeFormatMenu(this.editor, this.tool, this.localizationTable);
         formatMenu.addTo(controlsContainer);
         this.updateFormatMenu = () => formatMenu.update();
+        if (helpDisplay) {
+            formatMenu.registerHelpText(helpDisplay);
+        }
         formatMenu.update();
         return true;
     }

package/dist/cjs/toolbar/widgets/components/makeColorInput.d.ts

@@ -1,10 +1,12 @@
 import { Color4 } from '@js-draw/math';
 import Editor from '../../../Editor';
+import type HelpDisplay from '../../utils/HelpDisplay';
 type OnColorChangeListener = (color: Color4) => void;
 export declare const makeColorInput: (editor: Editor, onColorChange: OnColorChangeListener) => {
     input: HTMLInputElement;
     container: HTMLSpanElement;
     setValue: (color: Color4 | string) => void;
     closePicker: () => void;
+    registerWithHelpTextDisplay: (helpDisplay: HelpDisplay) => void;
 };
 export default makeColorInput;

package/dist/cjs/toolbar/widgets/components/makeColorInput.js

@@ -9,13 +9,16 @@ 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 container = document.createElement('span');
+    const inputWrapper = 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) => {
+    container.classList.add('color-input-container');
+    inputWrapper.classList.add('color-input-wrapper');
+    inputWrapper.appendChild(colorInput);
+    container.appendChild(inputWrapper);
+    const pipetteController = addPipetteTool(editor, container, (color) => {
         colorInput.value = color.toHexString();
         onInputEnd();
         // Update the color preview, if it exists (may be managed by Coloris).
@@ -50,7 +53,7 @@ const makeColorInput = (editor, onColorChange) => {
             open: true,
         });
         pipetteController.cancel();
-        colorInputContainer.classList.add('picker-open');
+        container.classList.add('picker-open');
         // Focus the Coloris color picker, if it exists.
         // Don't focus the text input within the color picker, however,
         // as this displays a keyboard on mobile devices.
@@ -66,7 +69,7 @@ const makeColorInput = (editor, onColorChange) => {
         onInputEnd();
         // Restore focus to the input that opened the color picker
         colorInput.focus();
-        colorInputContainer.classList.remove('picker-open');
+        container.classList.remove('picker-open');
     };
     colorInput.addEventListener('close', () => {
         onClose();
@@ -82,13 +85,17 @@ const makeColorInput = (editor, onColorChange) => {
     };
     return {
         input: colorInput,
-        container: colorInputContainer,
+        container,
         setValue: setColorInputValue,
         closePicker: () => {
             if (isOpen) {
                 onInputEnd();
             }
         },
+        registerWithHelpTextDisplay: (helpDisplay) => {
+            helpDisplay.registerTextHelpForElement(inputWrapper, editor.localization.colorPickerToggleHelpText);
+            pipetteController.registerWithHelpTextDisplay(helpDisplay);
+        },
     };
 };
 exports.makeColorInput = makeColorInput;
@@ -143,6 +150,9 @@ const addPipetteTool = (editor, container, onColorChange) => {
         cancel: () => {
             endColorSelectMode();
         },
+        registerWithHelpTextDisplay: (helpDisplay) => {
+            helpDisplay.registerTextHelpForElement(pipetteButton, editor.localization.colorPickerPipetteHelpText);
+        },
     };
 };
 exports.default = exports.makeColorInput;

package/dist/cjs/toolbar/widgets/components/makeGridSelector.d.ts

@@ -7,8 +7,14 @@ interface GridSelectChoice<ChoiceIdType> {
 }
 interface GridSelector<ChoiceIdType> {
     value: MutableReactiveValue<ChoiceIdType>;
+    /**
+     * Connects this grid selector with `other` such that only one item in
+     * either this or `other` can be selected at a time.
+     */
     linkWith: (other: GridSelector<ChoiceIdType>) => void;
+    /** Re-builds the icons shown in the grid selector. */
     updateIcons: () => void;
+    getRootElement: () => HTMLElement;
     addTo: (parent: HTMLElement) => void;
     /** Used internally @internal */
     _radiogroupName: string;

package/dist/cjs/toolbar/widgets/components/makeGridSelector.js

@@ -136,6 +136,9 @@ labelText, defaultId, choices) => {
         updateIcons: () => {
             buttons.forEach(button => button.updateIcon());
         },
+        getRootElement() {
+            return outerContainer;
+        },
         addTo: (parent) => {
             parent.appendChild(outerContainer);
         },

package/dist/cjs/tools/FindTool.js

@@ -7,6 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const TextComponent_1 = __importDefault(require("../components/TextComponent"));
+const ImageComponent_1 = __importDefault(require("../components/ImageComponent"));
 const BaseTool_1 = __importDefault(require("./BaseTool"));
 const keybindings_1 = require("./keybindings");
 const cssPrefix = 'find-tool';
@@ -25,11 +26,23 @@ class FindTool extends BaseTool_1.default {
         return true;
     }
     getMatches(searchFor) {
-        searchFor = searchFor.toLocaleLowerCase();
-        const allTextComponents = this.editor.image.getAllElements()
-            .filter(elem => elem instanceof TextComponent_1.default);
-        const matches = allTextComponents.filter(text => text.getText().toLocaleLowerCase().indexOf(searchFor) !== -1);
-        return matches.map(match => match.getBBox());
+        const lowerSearchFor = searchFor.toLocaleLowerCase();
+        const matchingComponents = this.editor.image.getAllElements().filter(component => {
+            let text = '';
+            if (component instanceof TextComponent_1.default) {
+                text = component.getText();
+            }
+            else if (component instanceof ImageComponent_1.default) {
+                text = component.getAltText() ?? '';
+            }
+            else {
+                return false;
+            }
+            const hasLowercaseMatch = text.toLocaleLowerCase().indexOf(lowerSearchFor) !== -1;
+            const hasSameCaseMatch = text.indexOf(searchFor) !== -1;
+            return hasLowercaseMatch || hasSameCaseMatch;
+        });
+        return matchingComponents.map(match => match.getBBox());
     }
     focusCurrentMatch() {
         const matches = this.getMatches(this.searchInput.value);

package/dist/cjs/tools/PanZoom.d.ts

@@ -24,13 +24,14 @@ export default class PanZoom extends BaseTool {
     private readonly initialRotationSnapAngle;
     private readonly afterRotationStartSnapAngle;
     private readonly pinchZoomStartThreshold;
-    private startDist;
-    private lastDist;
+    private startTouchDist;
+    private lastTouchDist;
     private lastScreenCenter;
     private lastTimestamp;
     private lastPointerDownTimestamp;
     private initialTouchAngle;
     private initialViewportRotation;
+    private initialViewportScale;
     private isScaling;
     private isRotating;
     private inertialScroller;
@@ -43,6 +44,11 @@ export default class PanZoom extends BaseTool {
     private updateVelocity;
     private getCenterDelta;
     private toSnappedRotationDelta;
+    /**
+     * Given a scale update, `scaleFactor`, returns a new scale factor snapped
+     * to a power of two (if within some tolerance of that scale).
+     */
+    private toSnappedScaleFactor;
     private handleTwoFingerMove;
     private handleOneFingerMove;
     onPointerMove({ allPointers }: PointerEvt): void;

package/dist/cjs/tools/PanZoom.js

@@ -77,9 +77,11 @@ class PanZoom extends BaseTool_1.default {
         this.initialRotationSnapAngle = 0.22; // radians
         this.afterRotationStartSnapAngle = 0.07; // radians
         this.pinchZoomStartThreshold = 1.08; // scale factor
+        // Last timestamp at which a pointerdown event was received
         this.lastPointerDownTimestamp = 0;
         this.initialTouchAngle = 0;
         this.initialViewportRotation = 0;
+        this.initialViewportScale = 0;
         // Set to `true` only when scaling has started (if two fingers are down and have moved
         // far enough).
         this.isScaling = false;
@@ -119,11 +121,12 @@ class PanZoom extends BaseTool_1.default {
         const isRightClick = this.allPointersAreOfType(pointers, Pointer_1.PointerDevice.RightButtonMouse);
         if (allAreTouch && pointers.length === 2 && this.mode & PanZoomMode.TwoFingerTouchGestures) {
             const { screenCenter, angle, dist } = this.computePinchData(pointers[0], pointers[1]);
-            this.lastDist = dist;
-            this.startDist = dist;
+            this.lastTouchDist = dist;
+            this.startTouchDist = dist;
             this.lastScreenCenter = screenCenter;
             this.initialTouchAngle = angle;
             this.initialViewportRotation = this.editor.viewport.getRotationAngle();
+            this.initialViewportScale = this.editor.viewport.getScaleFactor();
             this.isScaling = false;
             // We're initially rotated if `initialViewportRotation` isn't near a multiple of pi/2.
             // In other words, if sin(2 initialViewportRotation) is near zero.
@@ -199,6 +202,22 @@ class PanZoom extends BaseTool_1.default {
         }
         return fullRotation - this.editor.viewport.getRotationAngle();
     }
+    /**
+     * Given a scale update, `scaleFactor`, returns a new scale factor snapped
+     * to a power of two (if within some tolerance of that scale).
+     */
+    toSnappedScaleFactor(touchDist) {
+        // scaleFactor is applied to the current transformation of the viewport.
+        const newScale = this.initialViewportScale * touchDist / this.startTouchDist;
+        const currentScale = this.editor.viewport.getScaleFactor();
+        const logNewScale = Math.log(newScale) / Math.log(10);
+        const roundedLogNewScale = Math.round(logNewScale);
+        const logTolerance = 0.04;
+        if (Math.abs(roundedLogNewScale - logNewScale) < logTolerance) {
+            return Math.pow(10, roundedLogNewScale) / currentScale;
+        }
+        return touchDist / this.lastTouchDist;
+    }
     handleTwoFingerMove(allPointers) {
         const { screenCenter, canvasCenter, angle, dist } = this.computePinchData(allPointers[0], allPointers[1]);
         const delta = this.getCenterDelta(screenCenter);
@@ -215,25 +234,25 @@ class PanZoom extends BaseTool_1.default {
             this.isRotating = true;
         }
         this.updateVelocity(screenCenter);
-        let scaleFactor = 1;
-        if (this.isScaling) {
-            scaleFactor = dist / this.lastDist;
-        }
-        else {
-            const initialScaleFactor = dist / this.startDist;
+        if (!this.isScaling) {
+            const initialScaleFactor = dist / this.startTouchDist;
             // Only start scaling if scaling done so far exceeds some threshold.
             const upperBound = this.pinchZoomStartThreshold;
             const lowerBound = 1 / this.pinchZoomStartThreshold;
             if (initialScaleFactor > upperBound || initialScaleFactor < lowerBound) {
-                scaleFactor = initialScaleFactor;
                 this.isScaling = true;
             }
         }
+        let scaleFactor = 1;
+        if (this.isScaling) {
+            scaleFactor = this.toSnappedScaleFactor(dist);
+            // Don't set lastDist until we start scaling --
+            this.lastTouchDist = dist;
+        }
         const transformUpdate = math_1.Mat33.translation(delta)
             .rightMul(math_1.Mat33.scaling2D(scaleFactor, canvasCenter))
             .rightMul(math_1.Mat33.zRotation(deltaRotation, canvasCenter));
         this.lastScreenCenter = screenCenter;
-        this.lastDist = dist;
         this.transform = Viewport_1.Viewport.transformBy(this.transform.transform.rightMul(transformUpdate));
         return transformUpdate;
     }

package/dist/cjs/tools/SelectionTool/Selection.js

@@ -108,6 +108,7 @@ class Selection {
         for (const handle of this.handles) {
             handle.addTo(this.backgroundElem);
         }
+        this.updateUI();
     }
     // @internal Intended for unit tests
     getBackgroundElem() {
@@ -313,6 +314,13 @@ class Selection {
         else {
             this.innerContainer.classList.remove(perpendicularClassName);
         }
+        // Hide handles when empty
+        if (screenRegion.width === 0 && screenRegion.height === 0) {
+            this.innerContainer.classList.add('-empty');
+        }
+        else {
+            this.innerContainer.classList.remove('-empty');
+        }
         for (const handle of this.handles) {
             handle.updatePosition();
         }
@@ -561,7 +569,11 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand_1.defau
         this.transformCommands = this.selectedElemIds.map(id => {
             const elem = editor.image.lookupElement(id);
             if (!elem) {
-                throw new Error(`Unable to find element with ID, ${id}.`);
+                // There may be valid reasons for an element lookup to fail:
+                // For example, if the element was deleted remotely and the remote deletion
+                // hasn't been undone.
+                console.warn(`Unable to find element with ID, ${id}.`);
+                return null;
             }
             let originalZIndex = elem.getZIndex();
             let targetZIndex = elem.getZIndex() + this.deltaZIndex;
@@ -572,7 +584,9 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand_1.defau
                 originalZIndex = elem.getZIndex() - this.deltaZIndex;
             }
             return elem.setZIndexAndTransformBy(this.fullTransform, targetZIndex, originalZIndex);
-        });
+        }).filter(// Remove all null commands
+        // Remove all null commands
+        command => command !== null);
     }
     async apply(editor) {
         this.resolveToElems(editor, false);

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

@@ -4,7 +4,9 @@
  *
  * When no pointers are inside `element`, adds the CSS class `no-long-press-or-hover`.
  */
-declare const addLongPressOrHoverCssClasses: (element: HTMLElement) => {
+declare const addLongPressOrHoverCssClasses: (element: HTMLElement, options?: {
+    timeout: number;
+}) => {
     removeEventListeners: () => void;
 };
 export default addLongPressOrHoverCssClasses;

package/dist/cjs/util/addLongPressOrHoverCssClasses.js

@@ -10,7 +10,7 @@ const listenForLongPressOrHover_1 = __importDefault(require("./listenForLongPres
  *
  * When no pointers are inside `element`, adds the CSS class `no-long-press-or-hover`.
  */
-const addLongPressOrHoverCssClasses = (element) => {
+const addLongPressOrHoverCssClasses = (element, options) => {
     const hasLongPressClass = 'has-long-press-or-hover';
     const noLongPressClass = 'no-long-press-or-hover';
     element.classList.add('no-long-press-or-hover');
@@ -23,6 +23,7 @@ const addLongPressOrHoverCssClasses = (element) => {
             element.classList.add(noLongPressClass);
             element.classList.remove(hasLongPressClass);
         },
+        longPressTimeout: options?.timeout,
     });
     return {
         removeEventListeners: () => {

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

@@ -0,0 +1,6 @@
+/**
+ * Makes a clone of `element` and recursively applies styles from the original to the
+ * clone's children.
+ */
+declare const cloneElementWithStyles: (element: HTMLElement) => HTMLElement;
+export default cloneElementWithStyles;

package/dist/cjs/util/cloneElementWithStyles.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Makes a clone of `element` and recursively applies styles from the original to the
+ * clone's children.
+ */
+const cloneElementWithStyles = (element) => {
+    const restyle = (originalElement, clonedElement) => {
+        const originalComputedStyle = getComputedStyle(originalElement);
+        // jsdom doesn't support iterators in CSSStyleDeclarations. Iterate with
+        // an index.
+        for (let index = 0; index < originalComputedStyle.length; index++) {
+            const propertyName = originalComputedStyle.item(index);
+            const propertyValue = originalComputedStyle.getPropertyValue(propertyName);
+            clonedElement.style.setProperty(propertyName, propertyValue);
+        }
+        for (let i = 0; i < originalElement.children.length; i++) {
+            const originalChild = originalElement.children.item(i);
+            const clonedChild = clonedElement.children.item(i);
+            if (originalChild && clonedChild) {
+                restyle(originalChild, clonedChild);
+            }
+            else {
+                console.warn('CloneElement: Missing child');
+            }
+        }
+    };
+    const elementClone = element.cloneNode(true);
+    restyle(element, elementClone);
+    return elementClone;
+};
+exports.default = cloneElementWithStyles;

package/dist/cjs/version.js

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

package/dist/mjs/Editor.mjs

@@ -1198,6 +1198,11 @@ export class Editor {
                 '',
                 '== Bezier.js ==',
                 mitLicenseAttribution('2023 Mike "Pomax" Kamermans'),
+                '',
+                '',
+                '== js-draw ==',
+                mitLicenseAttribution('2023 Henry Heino'),
+                '',
             ].join('\n'),
             minimized: true,
         });

package/dist/mjs/components/util/StrokeSmoother.mjs

@@ -144,7 +144,7 @@ export class StrokeSmoother {
         }
         let exitingVec = this.computeExitingVec();
         // Find the intersection between the entering vector and the exiting vector
-        const maxRelativeLength = 2.4;
+        const maxRelativeLength = 1.7;
         const segmentStart = this.buffer[0];
         const segmentEnd = newPoint.pos;
         const startEndDist = segmentEnd.minus(segmentStart).magnitude();
@@ -165,11 +165,18 @@ export class StrokeSmoother {
         if (intersection) {
             controlPoint = intersection.point;
         }
-        // No intersection or the intersection is one of the end points?
-        if (!controlPoint || segmentStart.eq(controlPoint) || segmentEnd.eq(controlPoint)) {
+        // No intersection?
+        if (!controlPoint) {
+            // Estimate the control point position based on the entering tangent line
+            controlPoint = segmentStart
+                .lerp(segmentEnd, 0.5)
+                .lerp(segmentStart.plus(enteringVec.times(startEndDist)), 0.1);
+        }
+        // Equal to an endpoint?
+        if (segmentStart.eq(controlPoint) || segmentEnd.eq(controlPoint)) {
             // Position the control point closer to the first -- the connecting
             // segment will be roughly a line.
-            controlPoint = segmentStart.plus(enteringVec.times(startEndDist / 4));
+            controlPoint = segmentStart.plus(enteringVec.times(startEndDist / 5));
         }
         console.assert(!segmentStart.eq(controlPoint, 1e-11), 'Start and control points are equal!');
         console.assert(!controlPoint.eq(segmentEnd, 1e-11), 'Control and end points are equal!');

package/dist/mjs/rendering/caching/CacheRecordManager.mjs

@@ -49,7 +49,7 @@ export class CacheRecordManager {
                 numberAllocd++;
             }
         }
-        averageReassignedCount /= Math.max(this.cacheRecords.length, 0);
+        averageReassignedCount /= Math.max(this.cacheRecords.length, 1);
         const debugInfo = [
             `${this.cacheRecords.length} cache records (max ${this.maxCanvases})`,
             `${numberAllocd} assigned to screen regions`,

package/dist/mjs/rendering/renderers/CanvasRenderer.mjs

@@ -238,7 +238,7 @@ export default class CanvasRenderer extends AbstractRenderer {
     // @internal
     isTooSmallToRender(rect) {
         // Should we ignore all objects within this object's bbox?
-        const diagonal = this.getCanvasToScreenTransform().transformVec3(rect.size);
+        const diagonal = rect.size.times(this.getCanvasToScreenTransform().getScaleFactor());
         const bothDimenMinSize = this.minRenderSizeBothDimens;
         const bothTooSmall = Math.abs(diagonal.x) < bothDimenMinSize && Math.abs(diagonal.y) < bothDimenMinSize;
         const anyDimenMinSize = this.minRenderSizeAnyDimen;

package/dist/mjs/testing/sendHtmlSwipe.d.ts

@@ -0,0 +1,4 @@
+import { Point2 } from '@js-draw/math';
+/** Swipes `element` using HTML pointer events. */
+declare const sendHtmlSwipe: (element: HTMLElement, start: Point2, end: Point2, timeMs?: number) => Promise<void>;
+export default sendHtmlSwipe;

package/dist/mjs/testing/sendHtmlSwipe.mjs

@@ -0,0 +1,12 @@
+/** Swipes `element` using HTML pointer events. */
+const sendHtmlSwipe = async (element, start, end, timeMs = 300) => {
+    element.dispatchEvent(new PointerEvent('pointerdown', { isPrimary: true, clientX: start.x, clientY: start.y, }));
+    const step = 0.1;
+    for (let i = 0; i < 1; i += step) {
+        await jest.advanceTimersByTimeAsync(timeMs * step);
+        const currentPoint = start.lerp(end, i);
+        element.dispatchEvent(new PointerEvent('pointermove', { isPrimary: true, clientX: currentPoint.x, clientY: currentPoint.y, }));
+    }
+    element.dispatchEvent(new PointerEvent('pointerup', { isPrimary: true, clientX: end.x, clientY: end.y, }));
+};
+export default sendHtmlSwipe;

package/dist/mjs/toolbar/EdgeToolbar.d.ts

@@ -44,6 +44,7 @@ export default class EdgeToolbar extends AbstractToolbar {
     private sidebarVisible;
     private sidebarY;
     private sidebarTitle;
+    private clearDragListeners;
     /** @internal */
     constructor(editor: Editor, parent: HTMLElement, localizationTable: ToolbarLocalization);
     private listenForVisibilityChanges;