js-draw 1.2.1 → 1.3.0

package/dist/cjs/components/Stroke.js

@@ -127,6 +127,50 @@ class Stroke extends AbstractComponent_1.default {
         }
         return false;
     }
+    intersectsRect(rect) {
+        // AbstractComponent::intersectsRect can be inexact for strokes with non-zero
+        // stroke radius (has many false negatives). As such, additional checks are
+        // done here, before passing to the superclass.
+        if (!rect.intersects(this.getBBox())) {
+            return false;
+        }
+        // The following check only checks for the positive case:
+        // Sample a set of points that are known to be within each part of this
+        // stroke. For example, the points marked with an "x" below:
+        //   ___________________
+        //  /                   \
+        //  | x              x  |
+        //  \_____________      |
+        //                |  x  |
+        //                \_____/
+        //
+        // Because we don't want the following case to result in selection,
+        //   __________________
+        //  /.___.             \
+        //  || x |          x  |    <-  /* The
+        //  |·---·             |            .___.
+        //  \____________      |            |   |
+        //               |  x  |            ·---·
+        //               \_____/           denotes the input rectangle */
+        //
+        // we need to ensure that the rectangle intersects each point **and** the
+        // edge of the rectangle.
+        for (const part of this.parts) {
+            // As such, we need to shrink the input rectangle to verify that the original,
+            // unshrunken rectangle would have intersected the edge of the stroke if it
+            // intersects a point within the stroke.
+            const interiorRect = rect.grownBy(-(part.style.stroke?.width ?? 0));
+            if (interiorRect.area === 0) {
+                continue;
+            }
+            for (const point of part.path.startEndPoints()) {
+                if (interiorRect.containsPoint(point)) {
+                    return true;
+                }
+            }
+        }
+        return super.intersectsRect(rect);
+    }
     render(canvas, visibleRect) {
         canvas.startObject(this.getBBox());
         for (const part of this.parts) {

package/dist/cjs/components/UnknownSVGObject.d.ts

@@ -1,6 +1,6 @@
 import { LineSegment2, Mat33, Rect2 } from '@js-draw/math';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
-import AbstractComponent from './AbstractComponent';
+import AbstractComponent, { ComponentSizingMode } from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 export default class UnknownSVGObject extends AbstractComponent {
     private svgObject;
@@ -10,6 +10,7 @@ export default class UnknownSVGObject extends AbstractComponent {
     intersects(lineSegment: LineSegment2): boolean;
     protected applyTransformation(_affineTransfm: Mat33): void;
     isSelectable(): boolean;
+    getSizingMode(): ComponentSizingMode;
     protected createClone(): AbstractComponent;
     description(localization: ImageComponentLocalization): string;
     protected serializeToJSON(): string | null;

package/dist/cjs/components/UnknownSVGObject.js

@@ -4,13 +4,36 @@
 // @internal
 // @packageDocumentation
 //
+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 math_1 = require("@js-draw/math");
 const SVGRenderer_1 = __importDefault(require("../rendering/renderers/SVGRenderer"));
-const AbstractComponent_1 = __importDefault(require("./AbstractComponent"));
+const AbstractComponent_1 = __importStar(require("./AbstractComponent"));
 const componentId = 'unknown-svg-object';
 class UnknownSVGObject extends AbstractComponent_1.default {
     constructor(svgObject) {
@@ -35,6 +58,12 @@ class UnknownSVGObject extends AbstractComponent_1.default {
     isSelectable() {
         return false;
     }
+    getSizingMode() {
+        // This component can be shown anywhere (it won't be
+        // visible to the user, it just needs to be saved with
+        // the image).
+        return AbstractComponent_1.ComponentSizingMode.Anywhere;
+    }
     createClone() {
         return new UnknownSVGObject(this.svgObject.cloneNode(true));
     }

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

@@ -10,7 +10,7 @@ import TextComponent from './TextComponent';
 import ImageComponent from './ImageComponent';
 import RestyleableComponent from './RestylableComponent';
 import { createRestyleComponentCommand, isRestylableComponent, ComponentStyle as RestyleableComponentStyle } from './RestylableComponent';
-import BackgroundComponent from './BackgroundComponent';
+import BackgroundComponent, { BackgroundType } from './BackgroundComponent';
 export { Stroke, RestyleableComponent, createRestyleComponentCommand, isRestylableComponent, RestyleableComponentStyle, TextComponent, 
 /** @deprecated use {@link TextComponent} */
-TextComponent as Text, Stroke as StrokeComponent, BackgroundComponent, ImageComponent, };
+TextComponent as Text, Stroke as StrokeComponent, BackgroundComponent, BackgroundType as BackgroundComponentBackgroundType, ImageComponent, };

package/dist/cjs/components/lib.js

@@ -10,14 +10,26 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     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 __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
+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 });
-exports.ImageComponent = exports.BackgroundComponent = exports.StrokeComponent = exports.Text = exports.TextComponent = exports.isRestylableComponent = exports.createRestyleComponentCommand = exports.Stroke = exports.AbstractComponent = exports.StrokeSmoother = exports.makeOutlinedCircleBuilder = exports.makePressureSensitiveFreehandLineBuilder = exports.makeFreehandLineBuilder = void 0;
+exports.ImageComponent = exports.BackgroundComponentBackgroundType = exports.BackgroundComponent = exports.StrokeComponent = exports.Text = exports.TextComponent = exports.isRestylableComponent = exports.createRestyleComponentCommand = exports.Stroke = exports.AbstractComponent = exports.StrokeSmoother = exports.makeOutlinedCircleBuilder = exports.makePressureSensitiveFreehandLineBuilder = exports.makeFreehandLineBuilder = void 0;
 __exportStar(require("./builders/types"), exports);
 var FreehandLineBuilder_1 = require("./builders/FreehandLineBuilder");
 Object.defineProperty(exports, "makeFreehandLineBuilder", { enumerable: true, get: function () { return FreehandLineBuilder_1.makeFreehandLineBuilder; } });
@@ -41,5 +53,6 @@ exports.ImageComponent = ImageComponent_1.default;
 const RestylableComponent_1 = require("./RestylableComponent");
 Object.defineProperty(exports, "createRestyleComponentCommand", { enumerable: true, get: function () { return RestylableComponent_1.createRestyleComponentCommand; } });
 Object.defineProperty(exports, "isRestylableComponent", { enumerable: true, get: function () { return RestylableComponent_1.isRestylableComponent; } });
-const BackgroundComponent_1 = __importDefault(require("./BackgroundComponent"));
+const BackgroundComponent_1 = __importStar(require("./BackgroundComponent"));
 exports.BackgroundComponent = BackgroundComponent_1.default;
+Object.defineProperty(exports, "BackgroundComponentBackgroundType", { enumerable: true, get: function () { return BackgroundComponent_1.BackgroundType; } });

package/dist/cjs/lib.d.ts

@@ -2,52 +2,9 @@
  * The main entrypoint for the NPM package. Everything exported by this file
  * is available through the [`js-draw` package](https://www.npmjs.com/package/js-draw).
  *
- * @example
- * ```ts,runnable
- * import { Editor, Vec3, Mat33, ToolbarWidgetTag } from 'js-draw';
+ * ## Example
  *
- * // Use the Material Icon pack.
- * import { MaterialIconProvider } from '@js-draw/material-icons';
- *
- * // Apply js-draw CSS
- * import 'js-draw/styles';
- * // If your bundler doesn't support the above, try
- * // import 'js-draw/bundledStyles';
- *
- * (async () => {
- *   const editor = new Editor(document.body, {
- *     iconProvider: new MaterialIconProvider(),
- *   });
- *   const toolbar = editor.addToolbar();
- *
- *   // Increases the minimum height of the editor
- *   editor.getRootElement().style.height = '600px';
- *
- *   // Loads from SVG data
- *   await editor.loadFromSVG(`
- *       <svg viewBox="0 0 500 500" width="500" height="500" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
- *           <style id="js-draw-style-sheet">path{stroke-linecap:round;stroke-linejoin:round;}text{white-space:pre;}</style>
- *           <path d="M500,500L500,0L0,0L0,500L500,500" fill="#aaa" class="js-draw-image-background"></path>
- *           <text style="transform: matrix(1, 0, 0, 1, 57, 192); font-family: serif; font-size: 32px; fill: #111;">Testing...</text>
- *       </svg>
- *   `);
- *
- *   // Adding tags to a toolbar button allows different styles to be applied.
- *   // Also see addActionButton.
- *   const buttonLabels = [ ToolbarWidgetTag.Save ];
- *
- *   toolbar.addSaveButton(() => {
- *     const saveData = editor.toSVG().outerHTML;
- *
- *     // Do something with saveData
- *   });
- *
- *   toolbar.addExitButton(() => {
- *     // Save/confirm exiting here?
- *     editor.remove();
- *   });
- * })();
- * ```
+ * [[include:doc-pages/inline-examples/main-js-draw-example.md]]
  *
  * @see
  * - {@link Editor}

package/dist/cjs/lib.js

@@ -3,52 +3,9 @@
  * The main entrypoint for the NPM package. Everything exported by this file
  * is available through the [`js-draw` package](https://www.npmjs.com/package/js-draw).
  *
- * @example
- * ```ts,runnable
- * import { Editor, Vec3, Mat33, ToolbarWidgetTag } from 'js-draw';
+ * ## Example
  *
- * // Use the Material Icon pack.
- * import { MaterialIconProvider } from '@js-draw/material-icons';
- *
- * // Apply js-draw CSS
- * import 'js-draw/styles';
- * // If your bundler doesn't support the above, try
- * // import 'js-draw/bundledStyles';
- *
- * (async () => {
- *   const editor = new Editor(document.body, {
- *     iconProvider: new MaterialIconProvider(),
- *   });
- *   const toolbar = editor.addToolbar();
- *
- *   // Increases the minimum height of the editor
- *   editor.getRootElement().style.height = '600px';
- *
- *   // Loads from SVG data
- *   await editor.loadFromSVG(`
- *       <svg viewBox="0 0 500 500" width="500" height="500" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
- *           <style id="js-draw-style-sheet">path{stroke-linecap:round;stroke-linejoin:round;}text{white-space:pre;}</style>
- *           <path d="M500,500L500,0L0,0L0,500L500,500" fill="#aaa" class="js-draw-image-background"></path>
- *           <text style="transform: matrix(1, 0, 0, 1, 57, 192); font-family: serif; font-size: 32px; fill: #111;">Testing...</text>
- *       </svg>
- *   `);
- *
- *   // Adding tags to a toolbar button allows different styles to be applied.
- *   // Also see addActionButton.
- *   const buttonLabels = [ ToolbarWidgetTag.Save ];
- *
- *   toolbar.addSaveButton(() => {
- *     const saveData = editor.toSVG().outerHTML;
- *
- *     // Do something with saveData
- *   });
- *
- *   toolbar.addExitButton(() => {
- *     // Save/confirm exiting here?
- *     editor.remove();
- *   });
- * })();
- * ```
+ * [[include:doc-pages/inline-examples/main-js-draw-example.md]]
  *
  * @see
  * - {@link Editor}

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

@@ -6,6 +6,7 @@ interface RenderablePathSpec {
     style: RenderingStyle;
     path?: Path;
 }
+/** Converts a renderable path (a path with a `startPoint`, `commands`, and `style`). */
 export declare const pathFromRenderable: (renderable: RenderablePathSpec) => Path;
 export declare const pathToRenderable: (path: Path, style: RenderingStyle) => RenderablePathSpec;
 /**

package/dist/cjs/rendering/RenderablePathSpec.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.visualEquivalent = exports.pathToRenderable = exports.pathFromRenderable = void 0;
 const math_1 = require("@js-draw/math");
+/** Converts a renderable path (a path with a `startPoint`, `commands`, and `style`). */
 const pathFromRenderable = (renderable) => {
     if (renderable.path) {
         return renderable.path;

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

@@ -3,6 +3,7 @@ interface RenderingStyle {
     readonly fill: Color4;
     readonly stroke?: {
         readonly color: Color4;
+        /** Note: The stroke `width` is twice the stroke radius. */
         readonly width: number;
     };
 }

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

@@ -5,3 +5,4 @@ export { default as CanvasRenderer } from './renderers/CanvasRenderer';
 export { default as Display, RenderingMode } from './Display';
 export { default as TextRenderingStyle } from './TextRenderingStyle';
 export { default as RenderingStyle } from './RenderingStyle';
+export { pathToRenderable, pathFromRenderable, visualEquivalent as pathVisualEquivalent, default as RenderablePathSpec, } from './RenderablePathSpec';

package/dist/cjs/rendering/lib.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RenderingMode = exports.Display = exports.CanvasRenderer = exports.SVGRenderer = exports.DummyRenderer = exports.AbstractRenderer = void 0;
+exports.pathVisualEquivalent = exports.pathFromRenderable = exports.pathToRenderable = exports.RenderingMode = exports.Display = exports.CanvasRenderer = exports.SVGRenderer = exports.DummyRenderer = exports.AbstractRenderer = void 0;
 var AbstractRenderer_1 = require("./renderers/AbstractRenderer");
 Object.defineProperty(exports, "AbstractRenderer", { enumerable: true, get: function () { return __importDefault(AbstractRenderer_1).default; } });
 var DummyRenderer_1 = require("./renderers/DummyRenderer");
@@ -15,3 +15,7 @@ Object.defineProperty(exports, "CanvasRenderer", { enumerable: true, get: functi
 var Display_1 = require("./Display");
 Object.defineProperty(exports, "Display", { enumerable: true, get: function () { return __importDefault(Display_1).default; } });
 Object.defineProperty(exports, "RenderingMode", { enumerable: true, get: function () { return Display_1.RenderingMode; } });
+var RenderablePathSpec_1 = require("./RenderablePathSpec");
+Object.defineProperty(exports, "pathToRenderable", { enumerable: true, get: function () { return RenderablePathSpec_1.pathToRenderable; } });
+Object.defineProperty(exports, "pathFromRenderable", { enumerable: true, get: function () { return RenderablePathSpec_1.pathFromRenderable; } });
+Object.defineProperty(exports, "pathVisualEquivalent", { enumerable: true, get: function () { return RenderablePathSpec_1.visualEquivalent; } });

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

@@ -65,7 +65,7 @@ class AbstractRenderer {
     drawPath(path) {
         // If we're being called outside of an object,
         // we can't delay rendering
-        if (this.objectLevel === 0) {
+        if (this.objectLevel === 0 || this.currentPaths === null) {
             this.currentPaths = [path];
             this.flushPath();
             this.currentPaths = null;

package/dist/cjs/shortcuts/KeyboardShortcutManager.d.ts

@@ -33,8 +33,8 @@ export default class KeyboardShortcutManager {
      * const shortcutId = 'io.github.personalizedrefrigerator.js-draw.select-all';
      *
      * // Associate two shortcuts with the same ID
-     * const shortcut1 = KeyboardShortcutManager.keyboardShortcutFromString('ctrlOrMeta+a');
-     * const shortcut2 = KeyboardShortcutManager.keyboardShortcutFromString('ctrlOrMeta+shift+a');
+     * const shortcut1 = KeyBinding.fromString('ctrlOrMeta+a');
+     * const shortcut2 = KeyBinding.fromString('ctrlOrMeta+shift+a');
      * KeyboardShortcutManager.registerDefaultKeyboardShortcut(
      * 	shortcutId,
      * 	[ shortcut1, shortcut2 ],

package/dist/cjs/shortcuts/KeyboardShortcutManager.js

@@ -59,8 +59,8 @@ class KeyboardShortcutManager {
      * const shortcutId = 'io.github.personalizedrefrigerator.js-draw.select-all';
      *
      * // Associate two shortcuts with the same ID
-     * const shortcut1 = KeyboardShortcutManager.keyboardShortcutFromString('ctrlOrMeta+a');
-     * const shortcut2 = KeyboardShortcutManager.keyboardShortcutFromString('ctrlOrMeta+shift+a');
+     * const shortcut1 = KeyBinding.fromString('ctrlOrMeta+a');
+     * const shortcut2 = KeyBinding.fromString('ctrlOrMeta+shift+a');
      * KeyboardShortcutManager.registerDefaultKeyboardShortcut(
      * 	shortcutId,
      * 	[ shortcut1, shortcut2 ],

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

@@ -44,6 +44,7 @@ export interface ToolbarLocalization {
     imageWidthOption: string;
     imageHeightOption: string;
     useGridOption: string;
+    enableAutoresizeOption: string;
     toggleOverflow: string;
     about: string;
     inputStabilization: string;

package/dist/cjs/toolbar/localization.js

@@ -37,6 +37,7 @@ exports.defaultToolbarLocalization = {
     imageWidthOption: 'Width',
     imageHeightOption: 'Height',
     useGridOption: 'Grid',
+    enableAutoresizeOption: 'Auto-resize',
     toggleOverflow: 'More',
     about: 'About',
     inputStabilization: 'Input stabilization',

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

@@ -56,6 +56,11 @@ class BaseWidget {
         this.label = document.createElement('label');
         this.button.setAttribute('role', 'button');
         this.button.tabIndex = 0;
+        // Disable the context menu. This allows long-press gestures to trigger the button's
+        // tooltip instead.
+        this.button.oncontextmenu = event => {
+            event.preventDefault();
+        };
         const toolbarShortcutHandlers = this.editor.toolController.getMatchingTools(ToolbarShortcutHandler_1.default);
         // If the onKeyPress function has been extended and the editor is configured to send keypress events to
         // toolbar widgets,

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

@@ -122,39 +122,49 @@ class DocumentPropertiesWidget extends BaseWidget_1.default {
         const container = document.createElement('div');
         container.classList.add(`${constants_1.toolbarCSSPrefix}spacedList`, `${constants_1.toolbarCSSPrefix}nonbutton-controls-main-list`, `${constants_1.toolbarCSSPrefix}document-properties-widget`);
         // Background color input
-        const backgroundColorRow = document.createElement('div');
-        const backgroundColorLabel = document.createElement('label');
-        backgroundColorLabel.innerText = this.localizationTable.backgroundColor;
-        const { input: colorInput, container: backgroundColorInputContainer, setValue: setBgColorInputValue } = (0, makeColorInput_1.default)(this.editor, color => {
-            if (!color.eq(this.getBackgroundColor())) {
-                this.setBackgroundColor(color);
-            }
-        });
-        colorInput.id = `${constants_1.toolbarCSSPrefix}docPropertiesColorInput-${DocumentPropertiesWidget.idCounter++}`;
-        backgroundColorLabel.htmlFor = colorInput.id;
-        backgroundColorRow.replaceChildren(backgroundColorLabel, backgroundColorInputContainer);
+        const makeBackgroundColorInput = () => {
+            const backgroundColorRow = document.createElement('div');
+            const backgroundColorLabel = document.createElement('label');
+            backgroundColorLabel.innerText = this.localizationTable.backgroundColor;
+            const { input: colorInput, container: backgroundColorInputContainer, setValue: setBgColorInputValue } = (0, makeColorInput_1.default)(this.editor, color => {
+                if (!color.eq(this.getBackgroundColor())) {
+                    this.setBackgroundColor(color);
+                }
+            });
+            colorInput.id = `${constants_1.toolbarCSSPrefix}docPropertiesColorInput-${DocumentPropertiesWidget.idCounter++}`;
+            backgroundColorLabel.htmlFor = colorInput.id;
+            backgroundColorRow.replaceChildren(backgroundColorLabel, backgroundColorInputContainer);
+            return { setBgColorInputValue, backgroundColorRow };
+        };
+        const { backgroundColorRow, setBgColorInputValue } = makeBackgroundColorInput();
+        const makeCheckboxRow = (labelText, onChange) => {
+            const rowContainer = document.createElement('div');
+            const labelElement = document.createElement('label');
+            const checkboxElement = document.createElement('input');
+            checkboxElement.id = `${constants_1.toolbarCSSPrefix}docPropertiesCheckbox-${DocumentPropertiesWidget.idCounter++}`;
+            labelElement.htmlFor = checkboxElement.id;
+            checkboxElement.type = 'checkbox';
+            labelElement.innerText = labelText;
+            checkboxElement.oninput = () => {
+                onChange(checkboxElement.checked);
+            };
+            rowContainer.replaceChildren(labelElement, checkboxElement);
+            return { container: rowContainer, checkbox: checkboxElement };
+        };
         // Background style selector
-        const useGridRow = document.createElement('div');
-        const useGridLabel = document.createElement('label');
-        const useGridCheckbox = document.createElement('input');
-        useGridCheckbox.id = `${constants_1.toolbarCSSPrefix}docPropertiesUseGridCheckbox-${DocumentPropertiesWidget.idCounter++}`;
-        useGridLabel.htmlFor = useGridCheckbox.id;
-        useGridCheckbox.type = 'checkbox';
-        useGridLabel.innerText = this.localizationTable.useGridOption;
-        useGridCheckbox.oninput = () => {
+        const { container: useGridRow, checkbox: useGridCheckbox } = makeCheckboxRow(this.localizationTable.useGridOption, (checked) => {
             const prevBackgroundType = this.getBackgroundType();
             const wasGrid = prevBackgroundType === BackgroundComponent_1.BackgroundType.Grid;
-            if (wasGrid === useGridCheckbox.checked) {
+            if (wasGrid === checked) {
                 // Already the requested background type.
                 return;
             }
             let newBackgroundType = BackgroundComponent_1.BackgroundType.SolidColor;
-            if (useGridCheckbox.checked) {
+            if (checked) {
                 newBackgroundType = BackgroundComponent_1.BackgroundType.Grid;
             }
             this.editor.dispatch(this.setBackgroundType(newBackgroundType));
-        };
-        useGridRow.replaceChildren(useGridLabel, useGridCheckbox);
+        });
         // Adds a width/height input
         const addDimensionRow = (labelContent, onChange) => {
             const row = document.createElement('div');
@@ -167,15 +177,25 @@ class DocumentPropertiesWidget extends BaseWidget_1.default {
             label.htmlFor = input.id;
             input.style.flexGrow = '2';
             input.style.width = '25px';
-            row.style.display = 'flex';
             input.oninput = () => {
                 onChange(parseFloat(input.value));
             };
+            row.classList.add('js-draw-size-input-row');
             row.replaceChildren(label, input);
             return {
                 setValue: (value) => {
                     input.value = value.toString();
                 },
+                setIsAutomaticSize: (automatic) => {
+                    input.disabled = automatic;
+                    const automaticSizeClass = 'size-input-row--automatic-size';
+                    if (automatic) {
+                        row.classList.add(automaticSizeClass);
+                    }
+                    else {
+                        row.classList.remove(automaticSizeClass);
+                    }
+                },
                 element: row,
             };
         };
@@ -185,6 +205,11 @@ class DocumentPropertiesWidget extends BaseWidget_1.default {
         const imageHeightRow = addDimensionRow(this.localizationTable.imageHeightOption, (value) => {
             this.updateImportExportRectSize({ height: value });
         });
+        // The autoresize checkbox
+        const { container: auroresizeRow, checkbox: autoresizeCheckbox } = makeCheckboxRow(this.localizationTable.enableAutoresizeOption, (checked) => {
+            const image = this.editor.image;
+            this.editor.dispatch(image.setAutoresizeEnabled(checked));
+        });
         // The "About..." button
         const aboutButton = document.createElement('button');
         aboutButton.classList.add('about-button');
@@ -194,13 +219,17 @@ class DocumentPropertiesWidget extends BaseWidget_1.default {
         };
         this.updateDropdownContent = () => {
             setBgColorInputValue(this.getBackgroundColor());
+            const autoresize = this.editor.image.getAutoresizeEnabled();
             const importExportRect = this.editor.getImportExportRect();
             imageWidthRow.setValue(importExportRect.width);
             imageHeightRow.setValue(importExportRect.height);
+            autoresizeCheckbox.checked = autoresize;
+            imageWidthRow.setIsAutomaticSize(autoresize);
+            imageHeightRow.setIsAutomaticSize(autoresize);
             useGridCheckbox.checked = this.getBackgroundType() === BackgroundComponent_1.BackgroundType.Grid;
         };
         this.updateDropdownContent();
-        container.replaceChildren(backgroundColorRow, useGridRow, imageWidthRow.element, imageHeightRow.element, aboutButton);
+        container.replaceChildren(backgroundColorRow, useGridRow, imageWidthRow.element, imageHeightRow.element, auroresizeRow, aboutButton);
         dropdown.replaceChildren(container);
         return true;
     }

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

@@ -73,6 +73,14 @@ labelText, defaultId, choices) => {
             }
             updateButtonCSS();
         };
+        button.onfocus = () => {
+            if (buttonContainer.querySelector(':focus-visible')) {
+                buttonContainer.classList.add('focus-visible');
+            }
+        };
+        button.onblur = () => {
+            buttonContainer.classList.remove('focus-visible');
+        };
         buttonContainer.replaceChildren(button, labelContainer);
         menuContainer.appendChild(buttonContainer);
         // Set whether the current button is checked

package/dist/cjs/tools/PanZoom.js

@@ -212,24 +212,26 @@ class PanZoom extends BaseTool_1.default {
         this.lastScreenCenter = screenCenter;
         this.lastDist = dist;
         this.transform = Viewport_1.Viewport.transformBy(this.transform.transform.rightMul(transformUpdate));
+        return transformUpdate;
     }
     handleOneFingerMove(pointer) {
         const delta = this.getCenterDelta(pointer.screenPos);
-        this.transform = Viewport_1.Viewport.transformBy(this.transform.transform.rightMul(math_1.Mat33.translation(delta)));
+        const transformUpdate = math_1.Mat33.translation(delta);
+        this.transform = Viewport_1.Viewport.transformBy(this.transform.transform.rightMul(transformUpdate));
         this.updateVelocity(pointer.screenPos);
         this.lastScreenCenter = pointer.screenPos;
+        return transformUpdate;
     }
     onPointerMove({ allPointers }) {
         this.transform ??= Viewport_1.Viewport.transformBy(math_1.Mat33.identity);
-        const lastTransform = this.transform;
+        let transformUpdate = math_1.Mat33.identity;
         if (allPointers.length === 2) {
-            this.handleTwoFingerMove(allPointers);
+            transformUpdate = this.handleTwoFingerMove(allPointers);
         }
         else if (allPointers.length === 1) {
-            this.handleOneFingerMove(allPointers[0]);
+            transformUpdate = this.handleOneFingerMove(allPointers[0]);
         }
-        lastTransform.unapply(this.editor);
-        this.transform.apply(this.editor);
+        Viewport_1.Viewport.transformBy(transformUpdate).apply(this.editor);
         this.lastTimestamp = performance.now();
     }
     onPointerUp(event) {
@@ -309,8 +311,11 @@ class PanZoom extends BaseTool_1.default {
         const toCanvas = this.editor.viewport.screenToCanvasTransform;
         // Transform without including translation
         const translation = toCanvas.transformVec3(math_1.Vec3.of(-delta.x, -delta.y, 0));
-        const pinchZoomScaleFactor = 1.03;
-        const transformUpdate = math_1.Mat33.scaling2D(Math.max(0.25, Math.min(Math.pow(pinchZoomScaleFactor, -delta.z), 4)), canvasPos).rightMul(math_1.Mat33.translation(translation));
+        let pinchAmount = delta.z;
+        // Clamp the magnitude of pinchAmount
+        pinchAmount = Math.atan(pinchAmount / 2) * 2;
+        const pinchZoomScaleFactor = 1.04;
+        const transformUpdate = math_1.Mat33.scaling2D(Math.max(0.4, Math.min(Math.pow(pinchZoomScaleFactor, -pinchAmount), 4)), canvasPos).rightMul(math_1.Mat33.translation(translation));
         this.updateTransform(transformUpdate, true);
         return true;
     }

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

@@ -0,0 +1,18 @@
+import Editor from '../Editor';
+import BaseTool from './BaseTool';
+/**
+ * This tool, when enabled, renders scrollbars reflecting the current position
+ * of the view relative to the import/export area of the image.
+ *
+ * **Note**: These scrollbars are currently not draggable. This may change in
+ * a future release.
+ */
+export default class ScrollbarTool extends BaseTool {
+    private editor;
+    private scrollbarOverlay;
+    private verticalScrollbar;
+    private horizontalScrollbar;
+    constructor(editor: Editor);
+    private fadeOutTimeout;
+    private updateScrollbars;
+}