js-draw 1.9.0 → 1.10.0

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

@@ -3,10 +3,10 @@ import { ToolbarLocalization } from '../localization';
 import BaseWidget from './BaseWidget';
 export default class InsertImageWidget extends BaseWidget {
     private imagePreview;
+    private image;
     private selectedFiles;
     private imageAltTextInput;
     private statusView;
-    private imageBase64URL;
     private submitButton;
     constructor(editor: Editor, localization?: ToolbarLocalization);
     protected getTitle(): string;
@@ -15,6 +15,7 @@ export default class InsertImageWidget extends BaseWidget {
     protected handleClick(): void;
     private static nextInputId;
     protected fillDropdown(dropdown: HTMLElement): boolean;
+    private onImageDataUpdate;
     private hideDialog;
     private updateImageSizeDisplay;
     private updateInputs;

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

@@ -14,10 +14,48 @@ const BaseWidget_1 = __importDefault(require("./BaseWidget"));
 const types_1 = require("../../types");
 const constants_1 = require("../constants");
 const makeFileInput_1 = __importDefault(require("./components/makeFileInput"));
+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;
+    }
+    getBase64Url() {
+        return this.imageBase64Url;
+    }
+    static fromSrcAndPreview(initialBase64Src, preview, onUrlUpdate) {
+        return new ImageWrapper(initialBase64Src, preview, onUrlUpdate);
+    }
+}
 class InsertImageWidget extends BaseWidget_1.default {
     constructor(editor, localization) {
         localization ??= editor.localization;
         super(editor, 'insert-image-widget', localization);
+        this.image = null;
         // Make the dropdown showable
         this.container.classList.add('dropdownShowable');
         editor.notifier.on(types_1.EditorEventType.SelectionUpdated, event => {
@@ -51,6 +89,7 @@ class InsertImageWidget extends BaseWidget_1.default {
         this.statusView = document.createElement('div');
         const actionButtonRow = document.createElement('div');
         actionButtonRow.classList.add('action-button-row');
+        this.statusView.classList.add('insert-image-image-status-view');
         this.submitButton = document.createElement('button');
         this.selectedFiles = selectedFiles;
         this.imageAltTextInput = document.createElement('input');
@@ -65,9 +104,8 @@ class InsertImageWidget extends BaseWidget_1.default {
         this.submitButton.innerText = this.localizationTable.submit;
         this.selectedFiles.onUpdateAndNow(async (files) => {
             if (files.length === 0) {
-                this.imagePreview.style.display = 'none';
-                this.submitButton.disabled = true;
-                this.submitButton.style.display = 'none';
+                this.image = null;
+                this.onImageDataUpdate();
                 return;
             }
             this.imagePreview.style.display = 'block';
@@ -79,18 +117,13 @@ class InsertImageWidget extends BaseWidget_1.default {
             catch (e) {
                 this.statusView.innerText = this.localizationTable.imageLoadError(e);
             }
-            this.imageBase64URL = data;
             if (data) {
-                this.imagePreview.src = data;
-                this.submitButton.disabled = false;
-                this.submitButton.style.display = '';
-                this.updateImageSizeDisplay();
+                this.image = ImageWrapper.fromSrcAndPreview(data, this.imagePreview, () => this.onImageDataUpdate());
             }
             else {
-                this.submitButton.disabled = true;
-                this.submitButton.style.display = 'none';
-                this.statusView.innerText = '';
+                this.image = null;
             }
+            this.onImageDataUpdate();
         });
         altTextRow.replaceChildren(imageAltTextLabel, this.imageAltTextInput);
         actionButtonRow.replaceChildren(this.submitButton);
@@ -98,11 +131,27 @@ class InsertImageWidget extends BaseWidget_1.default {
         dropdown.replaceChildren(container);
         return true;
     }
+    onImageDataUpdate() {
+        const base64Data = this.image?.getBase64Url();
+        if (base64Data) {
+            this.submitButton.disabled = false;
+            this.submitButton.style.display = '';
+            this.imagePreview.style.display = '';
+            this.updateImageSizeDisplay();
+        }
+        else {
+            this.submitButton.disabled = true;
+            this.submitButton.style.display = 'none';
+            this.statusView.innerText = '';
+            this.imagePreview.style.display = 'none';
+            this.submitButton.disabled = true;
+        }
+    }
     hideDialog() {
         this.setDropdownVisible(false);
     }
     updateImageSizeDisplay() {
-        const imageData = this.imageBase64URL ?? '';
+        const imageData = this.image?.getBase64Url() ?? '';
         const sizeInKiB = imageData.length / 1024;
         const sizeInMiB = sizeInKiB / 1024;
         let units = 'KiB';
@@ -111,7 +160,27 @@ class InsertImageWidget extends BaseWidget_1.default {
             size = sizeInMiB;
             units = 'MiB';
         }
-        this.statusView.innerText = this.localizationTable.imageSize(Math.round(size), units);
+        const sizeText = document.createElement('span');
+        sizeText.innerText = this.localizationTable.imageSize(Math.round(size), units);
+        // Add a button to allow decreasing the size of large images.
+        const decreaseSizeButton = document.createElement('button');
+        decreaseSizeButton.innerText = this.localizationTable.decreaseImageSize;
+        decreaseSizeButton.onclick = () => {
+            this.image?.decreaseSize();
+        };
+        const resetSizeButton = document.createElement('button');
+        resetSizeButton.innerText = this.localizationTable.resetImage;
+        resetSizeButton.onclick = () => {
+            this.image?.reset();
+        };
+        this.statusView.replaceChildren(sizeText);
+        const largeImageThreshold = 0.25; // MiB
+        if (sizeInMiB > largeImageThreshold) {
+            this.statusView.appendChild(decreaseSizeButton);
+        }
+        else if (this.image?.isChanged()) {
+            this.statusView.appendChild(resetSizeButton);
+        }
     }
     updateInputs() {
         const resetInputs = () => {
@@ -131,11 +200,8 @@ class InsertImageWidget extends BaseWidget_1.default {
         if (selectedObjects.length === 1 && selectedObjects[0] instanceof ImageComponent_1.default) {
             editingImage = selectedObjects[0];
             this.imageAltTextInput.value = editingImage.getAltText() ?? '';
-            this.imagePreview.style.display = 'block';
-            this.submitButton.disabled = false;
-            this.imageBase64URL = editingImage.getURL();
-            this.imagePreview.src = this.imageBase64URL;
-            this.updateImageSizeDisplay();
+            this.image = ImageWrapper.fromSrcAndPreview(editingImage.getURL(), this.imagePreview, () => this.onImageDataUpdate());
+            this.onImageDataUpdate();
         }
         else if (selectedObjects.length > 0) {
             // If not, clear the selection.
@@ -149,13 +215,21 @@ class InsertImageWidget extends BaseWidget_1.default {
             }
         };
         this.submitButton.onclick = async () => {
-            if (!this.imageBase64URL) {
+            if (!this.image) {
                 return;
             }
             const image = new Image();
-            image.src = this.imageBase64URL;
+            image.src = this.image.getBase64Url();
             image.setAttribute('alt', this.imageAltTextInput.value);
-            const component = await ImageComponent_1.default.fromImage(image, math_1.Mat33.identity);
+            let component;
+            try {
+                component = await ImageComponent_1.default.fromImage(image, math_1.Mat33.identity);
+            }
+            catch (error) {
+                console.error('Error loading image', error);
+                this.statusView.innerText = this.localizationTable.imageLoadError(error);
+                return;
+            }
             if (component.getBBox().area === 0) {
                 this.statusView.innerText = this.localizationTable.errorImageHasZeroSize;
                 return;
@@ -163,9 +237,15 @@ class InsertImageWidget extends BaseWidget_1.default {
             this.hideDialog();
             if (editingImage) {
                 const eraseCommand = new Erase_1.default([editingImage]);
+                // Try to preserve the original width
+                const originalTransform = editingImage.getTransformation();
+                // || 1: Prevent division by zero
+                const originalWidth = editingImage.getBBox().width || 1;
+                const newWidth = component.getBBox().transformedBoundingBox(originalTransform).width || 1;
+                const widthAdjustTransform = math_1.Mat33.scaling2D(originalWidth / newWidth);
                 await this.editor.dispatch((0, uniteCommands_1.default)([
                     EditorImage_1.default.addElement(component),
-                    component.transformBy(editingImage.getTransformation()),
+                    component.transformBy(originalTransform.rightMul(widthAdjustTransform)),
                     component.setZIndex(editingImage.getZIndex()),
                     eraseCommand,
                 ]));

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

@@ -24,8 +24,7 @@ export default class PenToolWidget extends BaseToolWidget {
     private createIconForRecord;
     protected createIcon(): Element;
     private createPenTypeSelector;
-    private setInputStabilizationEnabled;
-    protected createStabilizationOption(): {
+    protected createStrokeCorrectionOptions(): {
         update: () => void;
         addTo: (parent: HTMLElement) => void;
     };

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

@@ -152,27 +152,51 @@ class PenToolWidget extends BaseToolWidget_1.default {
             },
         };
     }
-    setInputStabilizationEnabled(enabled) {
-        this.tool.setHasStabilization(enabled);
-    }
-    createStabilizationOption() {
-        const stabilizationOption = document.createElement('div');
-        const stabilizationCheckbox = document.createElement('input');
-        const stabilizationLabel = document.createElement('label');
-        stabilizationLabel.innerText = this.localizationTable.inputStabilization;
-        stabilizationCheckbox.type = 'checkbox';
-        stabilizationCheckbox.id = `${constants_1.toolbarCSSPrefix}-penInputStabilizationCheckbox-${PenToolWidget.idCounter++}`;
-        stabilizationLabel.htmlFor = stabilizationCheckbox.id;
-        stabilizationOption.replaceChildren(stabilizationLabel, stabilizationCheckbox);
-        stabilizationCheckbox.oninput = () => {
-            this.setInputStabilizationEnabled(stabilizationCheckbox.checked);
+    createStrokeCorrectionOptions() {
+        const container = document.createElement('div');
+        container.classList.add('action-button-row', `${constants_1.toolbarCSSPrefix}-pen-tool-toggle-buttons`);
+        const addToggleButton = (labelText, icon) => {
+            const button = document.createElement('button');
+            button.classList.add(`${constants_1.toolbarCSSPrefix}-toggle-button`);
+            const iconElement = icon.cloneNode(true);
+            iconElement.classList.add('icon');
+            const label = document.createElement('span');
+            label.innerText = labelText;
+            button.replaceChildren(iconElement, label);
+            button.setAttribute('role', 'switch');
+            container.appendChild(button);
+            let checked = false;
+            let onChangeListener = (_checked) => { };
+            const result = {
+                setChecked(newChecked) {
+                    checked = newChecked;
+                    button.setAttribute('aria-checked', `${checked}`);
+                    onChangeListener(checked);
+                },
+                setOnInputListener(listener) {
+                    onChangeListener = listener;
+                },
+            };
+            button.onclick = () => {
+                result.setChecked(!checked);
+            };
+            return result;
         };
+        const stabilizationOption = addToggleButton(this.localizationTable.inputStabilization, this.editor.icons.makeStrokeSmoothingIcon());
+        stabilizationOption.setOnInputListener(enabled => {
+            this.tool.setHasStabilization(enabled);
+        });
+        const autocorrectOption = addToggleButton(this.localizationTable.strokeAutocorrect, this.editor.icons.makeShapeAutocorrectIcon());
+        autocorrectOption.setOnInputListener(enabled => {
+            this.tool.setStrokeAutocorrectEnabled(enabled);
+        });
         return {
             update: () => {
-                stabilizationCheckbox.checked = !!this.tool.getInputMapper();
+                stabilizationOption.setChecked(!!this.tool.getInputMapper());
+                autocorrectOption.setChecked(this.tool.getStrokeAutocorrectionEnabled());
             },
             addTo: (parent) => {
-                parent.appendChild(stabilizationOption);
+                parent.appendChild(container);
             }
         };
     }
@@ -194,20 +218,22 @@ class PenToolWidget extends BaseToolWidget_1.default {
         colorLabel.setAttribute('for', colorInput.id);
         colorRow.appendChild(colorLabel);
         colorRow.appendChild(colorInputContainer);
-        const stabilizationOption = this.createStabilizationOption();
+        const toggleButtonRow = this.createStrokeCorrectionOptions();
         this.updateInputs = () => {
             setColorInputValue(this.tool.getColor());
             setThickness(this.tool.getThickness());
             penTypeSelect.updateIcons();
             // Update the selected stroke factory.
             penTypeSelect.setValue(this.getCurrentPenTypeIdx());
-            stabilizationOption.update();
+            toggleButtonRow.update();
         };
         this.updateInputs();
         container.replaceChildren(colorRow, thicknessRow);
         penTypeSelect.addTo(container);
-        stabilizationOption.addTo(container);
         dropdown.replaceChildren(container);
+        // Add the toggle button row *outside* of the main content (use different
+        // spacing with respect to the sides of the container).
+        toggleButtonRow.addTo(dropdown);
         return true;
     }
     onKeyPress(event) {
@@ -237,6 +263,7 @@ class PenToolWidget extends BaseToolWidget_1.default {
             thickness: this.tool.getThickness(),
             strokeFactoryId: this.getCurrentPenType()?.id,
             inputStabilization: !!this.tool.getInputMapper(),
+            strokeAutocorrect: this.tool.getStrokeAutocorrectionEnabled(),
         };
     }
     deserializeFrom(state) {
@@ -267,7 +294,10 @@ class PenToolWidget extends BaseToolWidget_1.default {
             }
         }
         if (state.inputStabilization !== undefined) {
-            this.setInputStabilizationEnabled(!!state.inputStabilization);
+            this.tool.setHasStabilization(!!state.inputStabilization);
+        }
+        if (state.strokeAutocorrect !== undefined) {
+            this.tool.setStrokeAutocorrectEnabled(!!state.strokeAutocorrect);
         }
     }
 }

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

@@ -19,6 +19,11 @@ export default class Pen extends BaseTool {
     private currentDeviceType;
     private styleValue;
     private style;
+    private shapeAutocompletionEnabled;
+    private autocorrectedShape;
+    private lastAutocorrectedShape;
+    private removedAutocorrectedShapeTime;
+    private stationaryDetector;
     constructor(editor: Editor, description: string, style: Partial<PenStyle>);
     private getPressureMultiplier;
     protected toStrokePoint(pointer: Pointer): StrokeDataPoint;
@@ -30,12 +35,16 @@ export default class Pen extends BaseTool {
     onPointerMove({ current }: PointerEvt): void;
     onPointerUp({ current }: PointerEvt): boolean;
     onGestureCancel(): void;
+    private removedAutocorrectedShapeRecently;
+    private autocorrectShape;
     private finalizeStroke;
     private noteUpdated;
     setColor(color: Color4): void;
     setThickness(thickness: number): void;
     setStrokeFactory(factory: ComponentBuilderFactory): void;
     setHasStabilization(hasStabilization: boolean): void;
+    setStrokeAutocorrectEnabled(enabled: boolean): void;
+    getStrokeAutocorrectionEnabled(): boolean;
     getThickness(): number;
     getColor(): Color4;
     getStrokeFactory(): ComponentBuilderFactory;

package/dist/cjs/tools/Pen.js

@@ -13,6 +13,7 @@ const keybindings_1 = require("./keybindings");
 const keybindings_2 = require("./keybindings");
 const InputStabilizer_1 = __importDefault(require("./InputFilter/InputStabilizer"));
 const ReactiveValue_1 = require("../util/ReactiveValue");
+const StationaryPenDetector_1 = __importDefault(require("./util/StationaryPenDetector"));
 class Pen extends BaseTool_1.default {
     constructor(editor, description, style) {
         super(editor.notifier, description);
@@ -21,6 +22,11 @@ class Pen extends BaseTool_1.default {
         this.lastPoint = null;
         this.startPoint = null;
         this.currentDeviceType = null;
+        this.shapeAutocompletionEnabled = false;
+        this.autocorrectedShape = null;
+        this.lastAutocorrectedShape = null;
+        this.removedAutocorrectedShapeTime = 0;
+        this.stationaryDetector = null;
         this.styleValue = ReactiveValue_1.ReactiveValue.fromInitialValue({
             factory: FreehandLineBuilder_1.makeFreehandLineBuilder,
             color: math_1.Color4.blue,
@@ -58,7 +64,14 @@ class Pen extends BaseTool_1.default {
     // Displays the stroke that is currently being built with the display's `wetInkRenderer`.
     previewStroke() {
         this.editor.clearWetInk();
-        this.builder?.preview(this.editor.display.getWetInkRenderer());
+        const wetInkRenderer = this.editor.display.getWetInkRenderer();
+        if (this.autocorrectedShape) {
+            const visibleRect = this.editor.viewport.visibleRect;
+            this.autocorrectedShape.render(wetInkRenderer, visibleRect);
+        }
+        else {
+            this.builder?.preview(wetInkRenderer);
+        }
     }
     // Throws if no stroke builder exists.
     addPointToStroke(point) {
@@ -87,6 +100,19 @@ class Pen extends BaseTool_1.default {
             this.startPoint = this.toStrokePoint(current);
             this.builder = this.style.factory(this.startPoint, this.editor.viewport);
             this.currentDeviceType = current.device;
+            if (this.shapeAutocompletionEnabled) {
+                const stationaryDetectionConfig = {
+                    maxSpeed: 5,
+                    maxRadius: 10,
+                    minTimeSeconds: 0.5, // s
+                };
+                this.stationaryDetector = new StationaryPenDetector_1.default(current, stationaryDetectionConfig, pointer => this.autocorrectShape(pointer));
+            }
+            else {
+                this.stationaryDetector = null;
+            }
+            this.lastAutocorrectedShape = null;
+            this.removedAutocorrectedShapeTime = 0;
             return true;
         }
         return false;
@@ -114,7 +140,14 @@ class Pen extends BaseTool_1.default {
             return;
         if (current.device !== this.currentDeviceType)
             return;
-        this.addPointToStroke(this.toStrokePoint(current));
+        const isStationary = this.stationaryDetector?.onPointerMove(current);
+        if (!isStationary) {
+            this.addPointToStroke(this.toStrokePoint(current));
+            if (this.autocorrectedShape) {
+                this.removedAutocorrectedShapeTime = performance.now();
+                this.autocorrectedShape = null;
+            }
+        }
     }
     onPointerUp({ current }) {
         if (!this.builder)
@@ -124,6 +157,7 @@ class Pen extends BaseTool_1.default {
             // device type.
             return true;
         }
+        this.stationaryDetector?.onPointerUp(current);
         // onPointerUp events can have zero pressure. Use the last pressure instead.
         const currentPoint = this.toStrokePoint(current);
         const strokePoint = {
@@ -139,10 +173,37 @@ class Pen extends BaseTool_1.default {
     onGestureCancel() {
         this.builder = null;
         this.editor.clearWetInk();
+        this.stationaryDetector?.destroy();
+        this.stationaryDetector = null;
+    }
+    removedAutocorrectedShapeRecently() {
+        return this.removedAutocorrectedShapeTime > performance.now() - 320;
+    }
+    async autocorrectShape(_lastPointer) {
+        if (!this.builder || !this.builder.autocorrectShape)
+            return;
+        if (!this.shapeAutocompletionEnabled)
+            return;
+        // If already corrected, do nothing
+        if (this.autocorrectedShape)
+            return;
+        // Activate stroke fitting
+        const correctedShape = await this.builder.autocorrectShape();
+        if (!this.builder || !correctedShape) {
+            return;
+        }
+        this.autocorrectedShape = correctedShape;
+        this.lastAutocorrectedShape = correctedShape;
+        this.previewStroke();
     }
     finalizeStroke() {
         if (this.builder) {
-            const stroke = this.builder.build();
+            // If autocorrectedShape was cleared recently enough, it was
+            // probably by mistake. Reset it.
+            if (this.lastAutocorrectedShape && this.removedAutocorrectedShapeRecently()) {
+                this.autocorrectedShape = this.lastAutocorrectedShape;
+            }
+            const stroke = this.autocorrectedShape ?? this.builder.build();
             this.previewStroke();
             if (stroke.getBBox().area > 0) {
                 const canFlatten = true;
@@ -155,7 +216,11 @@ class Pen extends BaseTool_1.default {
         }
         this.builder = null;
         this.lastPoint = null;
+        this.autocorrectedShape = null;
+        this.lastAutocorrectedShape = null;
         this.editor.clearWetInk();
+        this.stationaryDetector?.destroy();
+        this.stationaryDetector = null;
     }
     noteUpdated() {
         this.editor.notifier.dispatch(types_1.EditorEventType.ToolUpdated, {
@@ -201,6 +266,15 @@ class Pen extends BaseTool_1.default {
         }
         this.noteUpdated();
     }
+    setStrokeAutocorrectEnabled(enabled) {
+        if (enabled !== this.shapeAutocompletionEnabled) {
+            this.shapeAutocompletionEnabled = enabled;
+            this.noteUpdated();
+        }
+    }
+    getStrokeAutocorrectionEnabled() {
+        return this.shapeAutocompletionEnabled;
+    }
     getThickness() { return this.style.thickness; }
     getColor() { return this.style.color; }
     getStrokeFactory() { return this.style.factory; }

package/dist/cjs/tools/TextTool.js

@@ -44,6 +44,10 @@ class TextTool extends BaseTool_1.default {
 			.${overlayCSSClass} {
 				height: 0;
 				overflow: visible;
+
+				/* Allows absolutely-positioned textareas to scroll with
+				   the containing overlay. */
+				position: relative;
 			}
 
 			.${overlayCSSClass} textarea {
@@ -126,7 +130,7 @@ class TextTool extends BaseTool_1.default {
         this.textInputElem.style.fontWeight = this.textStyle.fontWeight ?? '';
         this.textInputElem.style.fontSize = `${this.textStyle.size}px`;
         this.textInputElem.style.color = this.textStyle.renderingStyle.fill.toHexString();
-        this.textInputElem.style.position = 'relative';
+        this.textInputElem.style.position = 'absolute';
         this.textInputElem.style.left = `${textScreenPos.x}px`;
         this.textInputElem.style.top = `${textScreenPos.y}px`;
         this.textInputElem.style.margin = '0';

package/dist/cjs/tools/util/StationaryPenDetector.d.ts

@@ -0,0 +1,22 @@
+import Pointer from '../../Pointer';
+interface Config {
+    maxSpeed: number;
+    minTimeSeconds: number;
+    maxRadius: number;
+}
+type OnStationaryCallback = (lastPointer: Pointer) => void;
+export default class StationaryPenDetector {
+    private config;
+    private onStationary;
+    private stationaryStartPointer;
+    private lastPointer;
+    private averageVelocity;
+    private timeout;
+    constructor(startPointer: Pointer, config: Config, onStationary: OnStationaryCallback);
+    onPointerMove(currentPointer: Pointer): boolean | undefined;
+    onPointerUp(pointer: Pointer): void;
+    destroy(): void;
+    private cancelStationaryTimeout;
+    private setStationaryTimeout;
+}
+export {};

package/dist/cjs/tools/util/StationaryPenDetector.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const math_1 = require("@js-draw/math");
+class StationaryPenDetector {
+    // Only handles one pen. As such, `startPointer` should be the same device/finger
+    // as `updatedPointer` in `onPointerMove`.
+    //
+    // A new `StationaryPenDetector` should be created for each gesture.
+    constructor(startPointer, config, onStationary) {
+        this.config = config;
+        this.onStationary = onStationary;
+        this.timeout = null;
+        this.stationaryStartPointer = startPointer;
+        this.lastPointer = startPointer;
+        this.averageVelocity = math_1.Vec2.zero;
+    }
+    // Returns true if stationary
+    onPointerMove(currentPointer) {
+        if (!this.stationaryStartPointer) {
+            // Destoroyed
+            return;
+        }
+        if (currentPointer.id !== this.stationaryStartPointer.id) {
+            return false;
+        }
+        // dx: "Δx" Displacement from last.
+        const dxFromLast = currentPointer.screenPos.minus(this.lastPointer.screenPos);
+        const dxFromStationaryStart = currentPointer.screenPos.minus(this.stationaryStartPointer.screenPos);
+        // dt: Delta time:
+        // /1000: Convert to s.
+        let dtFromLast = (currentPointer.timeStamp - this.lastPointer.timeStamp) / 1000; // s
+        // Don't divide by zero
+        if (dtFromLast === 0) {
+            dtFromLast = 1;
+        }
+        const currentVelocity = dxFromLast.times(1 / dtFromLast); // px/s
+        // Slight smoothing of the velocity to prevent input jitter from affecting the
+        // velocity too significantly.
+        this.averageVelocity = this.averageVelocity.lerp(currentVelocity, 0.5); // px/s
+        const dtFromStart = currentPointer.timeStamp - this.stationaryStartPointer.timeStamp; // ms
+        // If not stationary
+        if (dxFromStationaryStart.length() > this.config.maxRadius
+            || this.averageVelocity.length() > this.config.maxSpeed
+            || dtFromStart < this.config.minTimeSeconds) {
+            this.stationaryStartPointer = currentPointer;
+            this.lastPointer = currentPointer;
+            this.setStationaryTimeout(this.config.minTimeSeconds * 1000);
+            return false;
+        }
+        const stationaryTimeoutMs = this.config.minTimeSeconds * 1000 - dtFromStart;
+        this.lastPointer = currentPointer;
+        return stationaryTimeoutMs <= 0;
+    }
+    onPointerUp(pointer) {
+        if (pointer.id !== this.stationaryStartPointer?.id) {
+            this.cancelStationaryTimeout();
+        }
+    }
+    destroy() {
+        this.cancelStationaryTimeout();
+        this.stationaryStartPointer = null;
+    }
+    cancelStationaryTimeout() {
+        if (this.timeout !== null) {
+            clearTimeout(this.timeout);
+            this.timeout = null;
+        }
+    }
+    setStationaryTimeout(timeoutMs) {
+        if (this.timeout !== null) {
+            return;
+        }
+        if (timeoutMs <= 0) {
+            this.onStationary(this.lastPointer);
+        }
+        else {
+            this.timeout = setTimeout(() => {
+                this.timeout = null;
+                if (!this.stationaryStartPointer) {
+                    // Destroyed
+                    return;
+                }
+                const timeSinceStationaryStart = performance.now() - this.stationaryStartPointer.timeStamp;
+                const timeRemaining = this.config.minTimeSeconds * 1000 - timeSinceStationaryStart;
+                if (timeRemaining <= 0) {
+                    this.onStationary(this.lastPointer);
+                }
+                else {
+                    this.setStationaryTimeout(timeRemaining);
+                }
+            }, timeoutMs);
+        }
+    }
+}
+exports.default = StationaryPenDetector;

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

@@ -13,6 +13,8 @@ type UpdateCallback<T> = (value: T) => void;
  *
  * Static methods in the `ReactiveValue` and `MutableReactiveValue` classes are
  * constructors (e.g. `fromImmutable`).
+ *
+ * Avoid extending this class from an external library, as that may not be stable.
  */
 export declare abstract class ReactiveValue<T> {
     /**