js-draw 1.16.1 → 1.17.0

package/dist/mjs/components/builders/PolylineBuilder.mjs

@@ -0,0 +1,108 @@
+import { Rect2, Color4, PathCommandType } from '@js-draw/math';
+import  Stroke  from '../Stroke.mjs';
+import  Viewport  from '../../Viewport.mjs';
+import  makeShapeFitAutocorrect  from './autocorrect/makeShapeFitAutocorrect.mjs';
+/**
+ * Creates strokes from line segments rather than Bézier curves.
+ *
+ * @beta Output behavior may change significantly between versions. For now, intended for debugging.
+ */
+export const makePolylineBuilder = makeShapeFitAutocorrect((initialPoint, viewport) => {
+    const minFit = viewport.getSizeOfPixelOnCanvas();
+    return new PolylineBuilder(initialPoint, minFit, viewport);
+});
+export default class PolylineBuilder {
+    constructor(startPoint, minFitAllowed, viewport) {
+        this.minFitAllowed = minFitAllowed;
+        this.viewport = viewport;
+        this.parts = [];
+        this.widthAverageNumSamples = 1;
+        this.averageWidth = startPoint.width;
+        this.startPoint = {
+            ...startPoint,
+            pos: this.roundPoint(startPoint.pos),
+        };
+        this.lastPoint = this.startPoint.pos;
+        this.bbox = new Rect2(this.startPoint.pos.x, this.startPoint.pos.y, 0, 0);
+        this.parts = [
+            {
+                kind: PathCommandType.MoveTo,
+                point: this.startPoint.pos,
+            },
+        ];
+    }
+    getBBox() {
+        return this.bbox.grownBy(this.averageWidth);
+    }
+    getRenderingStyle() {
+        return {
+            fill: Color4.transparent,
+            stroke: {
+                color: this.startPoint.color,
+                width: this.roundDistance(this.averageWidth),
+            }
+        };
+    }
+    previewCurrentPath() {
+        const startPoint = this.startPoint.pos;
+        const commands = [...this.parts];
+        // TODO: For now, this is necesary for the path to be visible.
+        if (commands.length <= 1) {
+            commands.push({
+                kind: PathCommandType.LineTo,
+                point: startPoint,
+            });
+        }
+        return {
+            startPoint,
+            commands,
+            style: this.getRenderingStyle(),
+        };
+    }
+    previewFullPath() {
+        return [this.previewCurrentPath()];
+    }
+    preview(renderer) {
+        const paths = this.previewFullPath();
+        if (paths) {
+            const approxBBox = this.viewport.visibleRect;
+            renderer.startObject(approxBBox);
+            for (const path of paths) {
+                renderer.drawPath(path);
+            }
+            renderer.endObject();
+        }
+    }
+    build() {
+        return new Stroke(this.previewFullPath());
+    }
+    getMinFit() {
+        let minFit = Math.min(this.minFitAllowed, this.averageWidth / 3);
+        if (minFit < 1e-10) {
+            minFit = this.minFitAllowed;
+        }
+        return minFit;
+    }
+    roundPoint(point) {
+        const minFit = this.getMinFit();
+        return Viewport.roundPoint(point, minFit);
+    }
+    roundDistance(dist) {
+        const minFit = this.getMinFit();
+        return Viewport.roundPoint(dist, minFit);
+    }
+    addPoint(newPoint) {
+        this.widthAverageNumSamples++;
+        this.averageWidth =
+            this.averageWidth * (this.widthAverageNumSamples - 1) / this.widthAverageNumSamples
+                + newPoint.width / this.widthAverageNumSamples;
+        const roundedPoint = this.roundPoint(newPoint.pos);
+        if (!roundedPoint.eq(this.lastPoint)) {
+            this.parts.push({
+                kind: PathCommandType.LineTo,
+                point: this.roundPoint(newPoint.pos),
+            });
+            this.bbox = this.bbox.grownToPoint(roundedPoint);
+        }
+    }
+}

package/dist/mjs/components/builders/PressureSensitiveFreehandLineBuilder.mjs

@@ -285,7 +285,7 @@ export default class PressureSensitiveFreehandLineBuilder {
         // Approximate the normal at the location of the control point
         let projectionT = bezier.project(controlPoint.xy).t;
         if (!projectionT) {
-            if (startPt.minus(controlPoint).magnitudeSquared() < endPt.minus(controlPoint).magnitudeSquared()) {
+            if (startPt.squareDistanceTo(controlPoint) < endPt.squareDistanceTo(controlPoint)) {
                 projectionT = 0.1;
             }
             else {

package/dist/mjs/components/builders/autocorrect/makeShapeFitAutocorrect.mjs

@@ -83,7 +83,7 @@ class ShapeFitBuilder {
                 // Find the closest point to the startPoint
                 for (let i = 0; i < templatePoints.length; i++) {
                     const current = templatePoints[i];
-                    const currentSqrDist = current.minus(startPoint).magnitudeSquared();
+                    const currentSqrDist = current.squareDistanceTo(startPoint);
                     if (!closestToFirst || currentSqrDist < closestToFirstSqrDist) {
                         closestToFirstSqrDist = currentSqrDist;
                         closestToFirst = current;

package/dist/mjs/components/lib.d.ts

@@ -1,5 +1,6 @@
 export * from './builders/types';
 export { makeFreehandLineBuilder } from './builders/FreehandLineBuilder';
+export { makePolylineBuilder } from './builders/PolylineBuilder';
 export { makePressureSensitiveFreehandLineBuilder } from './builders/PressureSensitiveFreehandLineBuilder';
 export { makeOutlinedCircleBuilder } from './builders/CircleBuilder';
 export { default as StrokeSmoother, Curve as StrokeSmootherCurve } from './util/StrokeSmoother';

package/dist/mjs/components/lib.mjs

@@ -1,5 +1,6 @@
 export  *  from './builders/types.mjs';
 export  { makeFreehandLineBuilder }  from './builders/FreehandLineBuilder.mjs';
+export  { makePolylineBuilder }  from './builders/PolylineBuilder.mjs';
 export  { makePressureSensitiveFreehandLineBuilder }  from './builders/PressureSensitiveFreehandLineBuilder.mjs';
 export  { makeOutlinedCircleBuilder }  from './builders/CircleBuilder.mjs';
 export  { default as StrokeSmoother }  from './util/StrokeSmoother.mjs';

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

@@ -38,8 +38,8 @@ export class StrokeSmoother {
         const startPt = this.currentCurve.p0;
         const controlPt = this.currentCurve.p1;
         const endPt = this.currentCurve.p2;
-        const toControlDist = startPt.minus(controlPt).length();
-        const toEndDist = endPt.minus(controlPt).length();
+        const toControlDist = startPt.distanceTo(controlPt);
+        const toEndDist = endPt.distanceTo(controlPt);
         return toControlDist + toEndDist;
     }
     finalizeCurrentCurve() {
@@ -96,7 +96,7 @@ export class StrokeSmoother {
                 return;
             }
             const threshold = Math.min(this.lastPoint.width, newPoint.width) / 3;
-            const shouldSnapToInitial = this.startPoint.pos.minus(newPoint.pos).magnitude() < threshold
+            const shouldSnapToInitial = this.startPoint.pos.distanceTo(newPoint.pos) < threshold
                 && this.isFirstSegment;
             // Snap to the starting point if the stroke is contained within a small ball centered
             // at the starting point.
@@ -147,7 +147,7 @@ export class StrokeSmoother {
         const maxRelativeLength = 1.7;
         const segmentStart = this.buffer[0];
         const segmentEnd = newPoint.pos;
-        const startEndDist = segmentEnd.minus(segmentStart).magnitude();
+        const startEndDist = segmentEnd.distanceTo(segmentStart);
         const maxControlPointDist = maxRelativeLength * startEndDist;
         // Exit in cases where we would divide by zero
         if (maxControlPointDist === 0 || exitingVec.magnitude() === 0 || !isFinite(exitingVec.magnitude())) {

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

@@ -105,7 +105,10 @@ export default class EditorImage {
     getImportExportRect(): Rect2;
     /**
      * Sets the import/export rectangle to the given `imageRect`. Disables
-     * autoresize (if it was previously enabled).
+     * autoresize if it was previously enabled.
+     *
+     * **Note**: The import/export rectangle is the same as the size of any
+     * {@link BackgroundComponent}s (and other components that auto-resize).
      */
     setImportExportRect(imageRect: Rect2): SerializableCommand;
     /** @see {@link setAutoresizeEnabled} */

package/dist/mjs/image/EditorImage.mjs

@@ -205,7 +205,10 @@ class EditorImage {
     }
     /**
      * Sets the import/export rectangle to the given `imageRect`. Disables
-     * autoresize (if it was previously enabled).
+     * autoresize if it was previously enabled.
+     *
+     * **Note**: The import/export rectangle is the same as the size of any
+     * {@link BackgroundComponent}s (and other components that auto-resize).
      */
     setImportExportRect(imageRect) {
         return _a.SetImportExportRectCommand.of(this, imageRect, false);

package/dist/mjs/inputEvents.d.ts

@@ -53,7 +53,7 @@ export interface KeyUpEvent extends BaseKeyEvent {
 }
 export interface CopyEvent {
     readonly kind: InputEvtType.CopyEvent;
-    setData(mime: string, data: string): void;
+    setData(mime: string, data: string | Promise<Blob>): void;
 }
 export interface PasteEvent {
     readonly kind: InputEvtType.PasteEvent;
@@ -76,7 +76,17 @@ export interface PointerMoveEvt extends PointerEvtBase {
 export interface PointerUpEvt extends PointerEvtBase {
     readonly kind: InputEvtType.PointerUpEvt;
 }
+/**
+ * An internal `js-draw` pointer event type.
+ *
+ * This **is not** the same as a DOM pointer event.
+ */
 export type PointerEvt = PointerDownEvt | PointerMoveEvt | PointerUpEvt;
+/**
+ * An internal `js-draw` input event type.
+ *
+ * These are not DOM events.
+ */
 export type InputEvt = KeyPressEvent | KeyUpEvent | WheelEvt | GestureCancelEvt | PointerEvt | CopyEvent | PasteEvent;
 export declare const keyUpEventFromHTMLEvent: (event: KeyboardEvent) => KeyUpEvent;
 export declare const keyPressEventFromHTMLEvent: (event: KeyboardEvent) => KeyPressEvent;

package/dist/mjs/localizations/comments.d.ts

@@ -1,6 +1,9 @@
 import { EditorLocalization } from '../localization';
 /**
  * Comments to help translators create translations.
+ *
+ * The key for each comment should be the same as is used in the
+ * translation and original source records.
  */
 declare const comments: Partial<Record<keyof EditorLocalization, string>>;
 export default comments;

package/dist/mjs/localizations/comments.mjs

@@ -1,5 +1,8 @@
 /**
  * Comments to help translators create translations.
+ *
+ * The key for each comment should be the same as is used in the
+ * translation and original source records.
  */
 const comments = {
     pen: 'Likely unused',

package/dist/mjs/localizations/de.mjs

@@ -109,8 +109,6 @@ const localization = {
     soundExplorer: 'Klangbasierte Bilderkundung',
     disableAccessibilityExploreTool: 'Deaktiviere klangbasierte Erkundung',
     enableAccessibilityExploreTool: 'Aktiviere klangbasierte Erkundung',
-    copied: (count, description) => `${count} ${description} kopiert`,
-    pasted: (count, description) => `${count} ${description} eingefügt`,
     unionOf: (actionDescription, actionCount) => `Vereinigung: ${actionCount} ${actionDescription}`,
     emptyBackground: 'Leerer Hintergrund',
     filledBackgroundWithColor: (color) => `Gefüllter Hintergrund (${color})`,

package/dist/mjs/localizations/es.mjs

@@ -61,8 +61,8 @@ const localization = {
     toNextMatch: 'Próxima',
     closeDialog: 'Cerrar',
     anyDevicePanning: 'Mover la pantalla con todo dispotivo',
-    copied: (count, description) => `Copied ${count} ${description}`,
-    pasted: (count, description) => `Pasted ${count} ${description}`,
+    copied: (count) => `${count} cosas fueron copiados`,
+    pasted: (count) => count === 1 ? 'Pegado' : `${count} cosas fueron pegados`,
     toolEnabledAnnouncement: (toolName) => `${toolName} fue activado`,
     toolDisabledAnnouncement: (toolName) => `${toolName} fue desactivado`,
     resizeOutputCommand: (newSize) => `Tamaño de imagen fue cambiado a ${newSize.w}x${newSize.h}`,

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

@@ -58,4 +58,11 @@ export default class CanvasRenderer extends AbstractRenderer {
     endObject(): void;
     drawPoints(...points: Point2[]): void;
     isTooSmallToRender(rect: Rect2): boolean;
+    static fromViewport(exportViewport: Viewport, options?: {
+        canvasSize?: Vec2;
+        maxCanvasDimen?: number;
+    }): {
+        renderer: CanvasRenderer;
+        element: HTMLCanvasElement;
+    };
 }

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

@@ -245,4 +245,20 @@ export default class CanvasRenderer extends AbstractRenderer {
         const anyTooSmall = Math.abs(diagonal.x) < anyDimenMinSize || Math.abs(diagonal.y) < anyDimenMinSize;
         return bothTooSmall || anyTooSmall;
     }
+    // @internal
+    static fromViewport(exportViewport, options = {}) {
+        const canvas = document.createElement('canvas');
+        const exportRectSize = exportViewport.getScreenRectSize();
+        let canvasSize = options.canvasSize ?? exportRectSize;
+        if (options.maxCanvasDimen && canvasSize.maximumEntryMagnitude() > options.maxCanvasDimen) {
+            canvasSize = canvasSize.times(options.maxCanvasDimen / canvasSize.maximumEntryMagnitude());
+        }
+        canvas.width = canvasSize.x;
+        canvas.height = canvasSize.y;
+        const ctx = canvas.getContext('2d');
+        // Scale to ensure that the entire output is visible.
+        const scaleFactor = Math.min(canvasSize.x / exportRectSize.x, canvasSize.y / exportRectSize.y);
+        ctx.scale(scaleFactor, scaleFactor);
+        return { renderer: new CanvasRenderer(ctx, exportViewport), element: canvas };
+    }
 }

package/dist/mjs/rendering/renderers/SVGRenderer.mjs

@@ -110,7 +110,7 @@ export default class SVGRenderer extends AbstractRenderer {
         }
         if (style.stroke) {
             pathElem.setAttribute('stroke', style.stroke.color.toHexString());
-            pathElem.setAttribute('stroke-width', toRoundedString(style.stroke.width));
+            pathElem.setAttribute('stroke-width', toRoundedString(style.stroke.width * this.getSizeOfCanvasPixelOnScreen()));
         }
         this.elem.appendChild(pathElem);
         this.objectElems?.push(pathElem);

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

@@ -3,8 +3,9 @@ import TextRenderingStyle from '../rendering/TextRenderingStyle';
 import { PenStyle } from '../tools/Pen';
 export type IconElemType = HTMLImageElement | SVGElement;
 /**
- * Provides icons that can be used in the toolbar, etc.
- * Extend this class and override methods to customize icons.
+ * Provides icons that can be used in the toolbar and other locations.
+ *
+ * To customize the icons used by the editor, extend this class and override methods.
  *
  * @example
  * ```ts,runnable
@@ -12,7 +13,7 @@ export type IconElemType = HTMLImageElement | SVGElement;
  *
  * class CustomIconProvider extends jsdraw.IconProvider {
  *     // Use '☺' instead of the default dropdown symbol.
- *     public makeDropdownIcon() {
+ *     public override makeDropdownIcon() {
  *         const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  *         icon.innerHTML = `
  *             <text x='5' y='55' style='fill: var(--icon-color); font-size: 50pt;'>☺</text>
@@ -24,6 +25,8 @@ export type IconElemType = HTMLImageElement | SVGElement;
  *
  * const icons = new CustomIconProvider();
  * const editor = new jsdraw.Editor(document.body, {
+ *     // The icon pack to use is specified through the editor's initial
+ *     // configuration object:
  *     iconProvider: icons,
  * });
  *

package/dist/mjs/toolbar/IconProvider.mjs

@@ -57,8 +57,9 @@ const makeRedoIcon = (mirror) => {
     return icon;
 };
 /**
- * Provides icons that can be used in the toolbar, etc.
- * Extend this class and override methods to customize icons.
+ * Provides icons that can be used in the toolbar and other locations.
+ *
+ * To customize the icons used by the editor, extend this class and override methods.
  *
  * @example
  * ```ts,runnable
@@ -66,7 +67,7 @@ const makeRedoIcon = (mirror) => {
  *
  * class CustomIconProvider extends jsdraw.IconProvider {
  *     // Use '☺' instead of the default dropdown symbol.
- *     public makeDropdownIcon() {
+ *     public override makeDropdownIcon() {
  *         const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  *         icon.innerHTML = `
  *             <text x='5' y='55' style='fill: var(--icon-color); font-size: 50pt;'>☺</text>
@@ -78,6 +79,8 @@ const makeRedoIcon = (mirror) => {
  *
  * const icons = new CustomIconProvider();
  * const editor = new jsdraw.Editor(document.body, {
+ *     // The icon pack to use is specified through the editor's initial
+ *     // configuration object:
  *     iconProvider: icons,
  * });
  *
@@ -92,7 +95,6 @@ class IconProvider {
     makeUndoIcon() {
         return makeRedoIcon(true);
     }
-    // @param mirror - reflect across the x-axis. This parameter is internal.
     // @returns a redo icon.
     makeRedoIcon() {
         return makeRedoIcon(false);

package/dist/mjs/toolbar/widgets/DocumentPropertiesWidget.mjs

@@ -166,7 +166,30 @@ class DocumentPropertiesWidget extends BaseWidget {
             row.replaceChildren(label, input);
             return {
                 setValue: (value) => {
-                    input.value = value.toString();
+                    // Slightly improve the case where the user tries to change the
+                    // first digit of a dimension like 600.
+                    //
+                    // As changing the value also gives the image zero size (which is unsupported,
+                    // .setValue is called immediately). We work around this by trying to select
+                    // the added/changed digits.
+                    //
+                    // See https://github.com/personalizedrefrigerator/js-draw/issues/58.
+                    if (document.activeElement === input && input.value.match(/^0*$/)) {
+                        // We need to switch to type="text" and back to type="number" because
+                        // number inputs don't support selection.
+                        //
+                        // See https://stackoverflow.com/q/22381837
+                        const originalValue = input.value;
+                        input.type = 'text';
+                        input.value = value.toString();
+                        // Select the added digits
+                        const lengthToSelect = Math.max(1, input.value.length - originalValue.length);
+                        input.setSelectionRange(0, lengthToSelect);
+                        input.type = 'number';
+                    }
+                    else {
+                        input.value = value.toString();
+                    }
                 },
                 setIsAutomaticSize: (automatic) => {
                     input.disabled = automatic;

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

@@ -15,7 +15,7 @@ export interface PenTypeRecord {
 export default class PenToolWidget extends BaseToolWidget {
     private tool;
     private updateInputs;
-    protected penTypes: PenTypeRecord[];
+    protected penTypes: Readonly<PenTypeRecord>[];
     protected shapelikeIDs: string[];
     private static idCounter;
     constructor(editor: Editor, tool: Pen, localization?: ToolbarLocalization);

package/dist/mjs/toolbar/widgets/PenToolWidget.mjs

@@ -19,8 +19,11 @@ class PenToolWidget extends BaseToolWidget {
         this.updateInputs = () => { };
         // Pen types that correspond to
         this.shapelikeIDs = ['pressure-sensitive-pen', 'freehand-pen'];
+        // Additional client-specified pens.
+        const additionalPens = editor.getCurrentSettings().pens?.additionalPenTypes ?? [];
         // Default pen types
         this.penTypes = [
+            // Non-shape pens
             {
                 name: this.localizationTable.flatTipPen,
                 id: 'pressure-sensitive-pen',
@@ -31,6 +34,8 @@ class PenToolWidget extends BaseToolWidget {
                 id: 'freehand-pen',
                 factory: makeFreehandLineBuilder,
             },
+            ...(additionalPens.filter(pen => !pen.isShapeBuilder)),
+            // Shape pens
             {
                 name: this.localizationTable.arrowPen,
                 id: 'arrow',
@@ -60,7 +65,8 @@ class PenToolWidget extends BaseToolWidget {
                 id: 'outlined-circle',
                 isShapeBuilder: true,
                 factory: makeOutlinedCircleBuilder,
-            }
+            },
+            ...(additionalPens.filter(pen => pen.isShapeBuilder)),
         ];
         this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
             if (toolEvt.kind !== EditorEventType.ToolUpdated) {

package/dist/mjs/tools/Eraser.mjs

@@ -45,7 +45,7 @@ export default class Eraser extends BaseTool {
         return Rect2.fromCorners(centerPoint.minus(halfSize), centerPoint.plus(halfSize));
     }
     eraseTo(currentPoint) {
-        if (!this.isFirstEraseEvt && currentPoint.minus(this.lastPoint).magnitude() === 0) {
+        if (!this.isFirstEraseEvt && currentPoint.distanceTo(this.lastPoint) === 0) {
             return;
         }
         this.isFirstEraseEvt = false;

package/dist/mjs/tools/InputFilter/InputStabilizer.mjs

@@ -8,10 +8,10 @@ var StabilizerType;
 })(StabilizerType || (StabilizerType = {}));
 const defaultOptions = {
     kind: StabilizerType.IntertialStabilizer,
-    mass: 0.4,
-    springConstant: 100.0,
+    mass: 0.4, // kg
+    springConstant: 100.0, // N/m
     frictionCoefficient: 0.28,
-    maxPointDist: 10,
+    maxPointDist: 10, // screen units
     inertiaFraction: 0.75,
     minSimilarityToFinalize: 0.0,
     velocityDecayFactor: 0.1,

package/dist/mjs/tools/PasteHandler.mjs

@@ -23,8 +23,29 @@ export default class PasteHandler extends BaseTool {
     // @internal
     onPaste(event) {
         const mime = event.mime.toLowerCase();
-        if (mime === 'image/svg+xml') {
-            void this.doSVGPaste(event.data);
+        const svgData = (() => {
+            if (mime === 'image/svg+xml') {
+                return event.data;
+            }
+            if (mime !== 'text/html') {
+                return false;
+            }
+            // text/html is sometimes handlable SVG data. Use a hueristic
+            // to determine if this is the case:
+            // We use [^] and not . so that newlines are included.
+            const match = event.data.match(/^[^]{0,200}<svg.*/i); // [^]{0,200} <- Allow for metadata near start
+            if (!match) {
+                return false;
+            }
+            // Extract the SVG element from the pasted data
+            let svgEnd = event.data.toLowerCase().lastIndexOf('</svg>');
+            if (svgEnd === -1)
+                svgEnd = event.data.length;
+            return event.data.substring(event.data.search(/<svg/i), svgEnd);
+        })();
+        if (svgData) {
+            console.log('svgpaste', svgData);
+            void this.doSVGPaste(svgData);
             return true;
         }
         else if (mime === 'text/plain') {
@@ -38,16 +59,21 @@ export default class PasteHandler extends BaseTool {
         return false;
     }
     async addComponentsFromPaste(components) {
-        await this.editor.addAndCenterComponents(components);
+        await this.editor.addAndCenterComponents(components, true, this.editor.localization.pasted(components.length));
     }
     async doSVGPaste(data) {
-        const sanitize = true;
-        const loader = SVGLoader.fromString(data, sanitize);
-        const components = [];
-        await loader.start((component) => {
-            components.push(component);
-        }, (_countProcessed, _totalToProcess) => null);
-        await this.addComponentsFromPaste(components);
+        this.editor.showLoadingWarning(0);
+        try {
+            const loader = SVGLoader.fromString(data, true);
+            const components = [];
+            await loader.start((component) => {
+                components.push(component);
+            }, (_countProcessed, _totalToProcess) => null);
+            await this.addComponentsFromPaste(components);
+        }
+        finally {
+            this.editor.hideLoadingWarning();
+        }
     }
     async doTextPaste(text) {
         const textTools = this.editor.toolController.getMatchingTools(TextTool);

package/dist/mjs/tools/Pen.mjs

@@ -97,8 +97,8 @@ export default class Pen extends BaseTool {
             this.currentDeviceType = current.device;
             if (this.shapeAutocompletionEnabled) {
                 const stationaryDetectionConfig = {
-                    maxSpeed: 8.5,
-                    maxRadius: 11,
+                    maxSpeed: 8.5, // screenPx/s
+                    maxRadius: 11, // screenPx
                     minTimeSeconds: 0.5, // s
                 };
                 this.stationaryDetector = new StationaryPenDetector(current, stationaryDetectionConfig, pointer => this.autocorrectShape(pointer));

package/dist/mjs/tools/SelectionTool/SelectionTool.mjs

@@ -2,6 +2,7 @@ import { Mat33, Vec2 } from '@js-draw/math';
 import  { EditorEventType }  from '../../types.mjs';
 import  Viewport  from '../../Viewport.mjs';
 import  BaseTool  from '../BaseTool.mjs';
+import  CanvasRenderer  from '../../rendering/renderers/CanvasRenderer.mjs';
 import  SVGRenderer  from '../../rendering/renderers/SVGRenderer.mjs';
 import  Selection  from './Selection.mjs';
 import  TextComponent  from '../../components/TextComponent.mjs';
@@ -370,19 +371,37 @@ class SelectionTool extends BaseTool {
             return false;
         }
         const exportViewport = new Viewport(() => { });
-        exportViewport.updateScreenSize(Vec2.of(bbox.w, bbox.h));
-        exportViewport.resetTransform(Mat33.translation(bbox.topLeft.times(-1)));
-        const sanitize = true;
-        const { element: svgExportElem, renderer: svgRenderer } = SVGRenderer.fromViewport(exportViewport, sanitize);
+        const selectionScreenSize = this.selectionBox.getScreenRegion().size.times(this.editor.display.getDevicePixelRatio());
+        // Update the viewport to have screen size roughly equal to the size of the selection box
+        let scaleFactor = selectionScreenSize.maximumEntryMagnitude() / (bbox.size.maximumEntryMagnitude() || 1);
+        // Round to a nearby power of two
+        scaleFactor = Math.pow(2, Math.ceil(Math.log2(scaleFactor)));
+        exportViewport.updateScreenSize(bbox.size.times(scaleFactor));
+        exportViewport.resetTransform(Mat33.scaling2D(scaleFactor)
+            // Move the selection onto the screen
+            .rightMul(Mat33.translation(bbox.topLeft.times(-1))));
+        const { element: svgExportElem, renderer: svgRenderer } = SVGRenderer.fromViewport(exportViewport, { sanitize: true, useViewBoxForPositioning: true });
+        const { element: canvas, renderer: canvasRenderer } = CanvasRenderer.fromViewport(exportViewport, { maxCanvasDimen: 4096 });
         const text = [];
         for (const elem of selectedElems) {
             elem.render(svgRenderer);
+            elem.render(canvasRenderer);
             if (elem instanceof TextComponent) {
                 text.push(elem.getText());
             }
         }
         event.setData('image/svg+xml', svgExportElem.outerHTML);
         event.setData('text/html', svgExportElem.outerHTML);
+        event.setData('image/png', new Promise((resolve, reject) => {
+            canvas.toBlob((blob) => {
+                if (blob) {
+                    resolve(blob);
+                }
+                else {
+                    reject('Failed to convert canvas to blob.');
+                }
+            }, 'image/png');
+        }));
         if (text.length > 0) {
             event.setData('text/plain', text.join('\n'));
         }

package/dist/mjs/tools/SelectionTool/ToPointerAutoscroller.mjs

@@ -23,7 +23,7 @@ export default class ToPointerAutoscroller {
             return Vec2.zero;
         }
         const closestEdgePoint = autoscrollBoundary.getClosestPointOnBoundaryTo(screenPoint);
-        const distToEdge = closestEdgePoint.minus(screenPoint).magnitude();
+        const distToEdge = closestEdgePoint.distanceTo(screenPoint);
         const toEdge = closestEdgePoint.minus(screenPoint);
         // Go faster for points further away from the boundary.
         const maximumScaleFactor = 1.25;