js-draw 1.29.2 → 1.30.1

package/dist/mjs/rendering/renderers/AcceleratedInkingCanvasRenderer.mjs

@@ -0,0 +1,44 @@
+import  CanvasRenderer  from './CanvasRenderer.mjs';
+class CanvasInkPresenter {
+    constructor(canvas, viewport) {
+        this.viewport = viewport;
+        this.enabled = new Map();
+        this.presenter = null;
+        this.style = { color: 'black', diameter: 2 };
+        if ('ink' in navigator && navigator.ink) {
+            const ink = navigator.ink;
+            ink.requestPresenter({ presentationArea: canvas }).then((presenter) => {
+                this.presenter = presenter;
+            });
+        }
+    }
+    setEnabled(pointerId, enabled) {
+        this.enabled.set(pointerId, enabled);
+    }
+    updateStyle(style) {
+        const colorString = style.color.toString();
+        // style.diameter must be a postive integer.
+        this.style = {
+            color: colorString,
+            diameter: Math.ceil(style.width / this.viewport.getSizeOfPixelOnCanvas()),
+        };
+    }
+    onEvent(event) {
+        if (this.presenter && this.enabled.get(event.pointerId) && event.isTrusted) {
+            this.presenter.updateInkTrailStartPoint(event, this.style);
+        }
+    }
+}
+/** A canvas that uses the web ink API for accelerated inking. */
+export default class AcceleratedInkingCanvasRenderer extends CanvasRenderer {
+    constructor(ctx, viewport) {
+        super(ctx, viewport);
+        this.inkPresenter = new CanvasInkPresenter(ctx.canvas, viewport);
+    }
+    getDraftInkPresenter() {
+        return this.inkPresenter;
+    }
+    onEvent(event) {
+        this.inkPresenter.onEvent(event);
+    }
+}

package/dist/mjs/toolbar/EdgeToolbar.mjs

@@ -3,8 +3,9 @@ import  { toolbarCSSPrefix }  from './constants.mjs';
 import  EdgeToolbarLayoutManager  from './widgets/layout/EdgeToolbarLayoutManager.mjs';
 import  { MutableReactiveValue, ReactiveValue }  from '../util/ReactiveValue.mjs';
 import  AbstractToolbar  from './AbstractToolbar.mjs';
-import  stopPropagationOfScrollingWheelEvents  from '../util/stopPropagationOfScrollingWheelEvents.mjs';
+import  stopPropagationOfScrollingWheelEvents  from '../util/dom/stopPropagationOfScrollingWheelEvents.mjs';
 import  makeDraggable  from './utils/makeDraggable.mjs';
+import  createButton  from '../util/dom/createButton.mjs';
 /**
  * Creates an `EdgeToolbar`.
  *
@@ -85,7 +86,7 @@ export default class EdgeToolbar extends AbstractToolbar {
                 this.menuContainer.classList.remove(belowEdgeClassName);
             }
         });
-        this.closeButton = document.createElement('button');
+        this.closeButton = createButton();
         this.closeButton.classList.add('drag-elem');
         // The close button has default focus -- forward its events to the main editor so that keyboard
         // shortcuts still work.

package/dist/mjs/toolbar/IconProvider.mjs

@@ -10,7 +10,7 @@ import  Viewport  from '../Viewport.mjs';
 import  { makeFreehandLineBuilder }  from '../components/builders/FreehandLineBuilder.mjs';
 import  { makePolylineBuilder }  from '../components/builders/PolylineBuilder.mjs';
 import  { EraserMode }  from '../tools/Eraser.mjs';
-import  { createSvgElement, createSvgElements, createSvgPaths }  from '../util/createElement.mjs';
+import  { createSvgElement, createSvgElements, createSvgPaths }  from '../util/dom/createElement.mjs';
 import  { SelectionMode }  from '../tools/SelectionTool/types.mjs';
 const svgNamespace = 'http://www.w3.org/2000/svg';
 let checkerboardIdCounter = 0;

package/dist/mjs/toolbar/utils/HelpDisplay.mjs

@@ -7,8 +7,9 @@ var _HelpDisplay_helpData;
 import { Rect2 } from '@js-draw/math';
 import  makeDraggable  from './makeDraggable.mjs';
 import  { MutableReactiveValue }  from '../../util/ReactiveValue.mjs';
-import  cloneElementWithStyles  from '../../util/cloneElementWithStyles.mjs';
-import  addLongPressOrHoverCssClasses  from '../../util/addLongPressOrHoverCssClasses.mjs';
+import  cloneElementWithStyles  from '../../util/dom/cloneElementWithStyles.mjs';
+import  addLongPressOrHoverCssClasses  from '../../util/dom/addLongPressOrHoverCssClasses.mjs';
+import  createButton  from '../../util/dom/createButton.mjs';
 /**
  * Creates the main content of the help overlay.
  *
@@ -214,7 +215,7 @@ class HelpDisplay {
             }
         };
         const makeCloseButton = () => {
-            const closeButton = document.createElement('button');
+            const closeButton = createButton();
             closeButton.classList.add('close-button');
             closeButton.appendChild(this.context.icons.makeCloseIcon());
             const label = this.context.localization.close;
@@ -273,8 +274,8 @@ class HelpDisplay {
         const makeNavigationButtons = (navigation) => {
             const navigationButtonContainer = document.createElement('div');
             navigationButtonContainer.classList.add('navigation-buttons');
-            const nextButton = document.createElement('button');
-            const previousButton = document.createElement('button');
+            const nextButton = createButton();
+            const previousButton = createButton();
             nextButton.textContent = this.context.localization.next;
             previousButton.textContent = this.context.localization.previous;
             nextButton.classList.add('next');
@@ -424,7 +425,7 @@ class HelpDisplay {
     createToggleButton() {
         const buttonContainer = document.createElement('div');
         buttonContainer.classList.add('toolbar-help-overlay-button');
-        const helpButton = document.createElement('button');
+        const helpButton = createButton();
         helpButton.classList.add('button');
         const icon = this.context.icons.makeHelpIcon();
         icon.classList.add('icon');

package/dist/mjs/toolbar/widgets/BaseWidget.mjs

@@ -14,7 +14,7 @@ import  ToolbarShortcutHandler  from '../../tools/ToolbarShortcutHandler.mjs';
 import  { keyPressEventFromHTMLEvent, keyUpEventFromHTMLEvent, }  from '../../inputEvents.mjs';
 import  { toolbarCSSPrefix }  from '../constants.mjs';
 import  DropdownLayoutManager  from './layout/DropdownLayoutManager.mjs';
-import  addLongPressOrHoverCssClasses  from '../../util/addLongPressOrHoverCssClasses.mjs';
+import  addLongPressOrHoverCssClasses  from '../../util/dom/addLongPressOrHoverCssClasses.mjs';
 import  HelpDisplay  from '../utils/HelpDisplay.mjs';
 import  { assertIsObject }  from '../../util/assertions.mjs';
 /**

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

@@ -7,6 +7,7 @@ import  { EditorEventType }  from '../../types.mjs';
 import  { toolbarCSSPrefix }  from '../constants.mjs';
 import  makeColorInput  from './components/makeColorInput.mjs';
 import  BaseWidget  from './BaseWidget.mjs';
+import  createButton  from '../../util/dom/createButton.mjs';
 class DocumentPropertiesWidget extends BaseWidget {
     constructor(editor, localizationTable) {
         super(editor, 'document-properties-widget', localizationTable);
@@ -216,9 +217,10 @@ class DocumentPropertiesWidget extends BaseWidget {
             this.editor.dispatch(image.setAutoresizeEnabled(checked));
         });
         // The "About..." button
-        const aboutButton = document.createElement('button');
-        aboutButton.classList.add('about-button');
-        aboutButton.innerText = this.localizationTable.about;
+        const aboutButton = createButton({
+            classList: ['about-button'],
+            text: this.localizationTable.about,
+        });
         aboutButton.onclick = () => {
             this.editor.showAboutDialog();
         };

package/dist/mjs/toolbar/widgets/HandToolWidget.mjs

@@ -6,11 +6,12 @@ import  { toolbarCSSPrefix }  from '../constants.mjs';
 import  BaseToolWidget  from './BaseToolWidget.mjs';
 import  BaseWidget  from './BaseWidget.mjs';
 import  makeSeparator  from './components/makeSeparator.mjs';
+import  createButton  from '../../util/dom/createButton.mjs';
 const makeZoomControl = (localizationTable, editor, helpDisplay) => {
     const zoomLevelRow = document.createElement('div');
-    const increaseButton = document.createElement('button');
-    const decreaseButton = document.createElement('button');
-    const resetViewButton = document.createElement('button');
+    const increaseButton = createButton();
+    const decreaseButton = createButton();
+    const resetViewButton = createButton();
     const zoomLevelDisplay = document.createElement('span');
     increaseButton.innerText = '+';
     decreaseButton.innerText = '-';

package/dist/mjs/toolbar/widgets/InsertImageWidget/InsertImageWidget.mjs

@@ -13,6 +13,7 @@ import  bytesToSizeString  from '../../../util/bytesToSizeString.mjs';
 import  { ImageWrapper }  from './ImageWrapper.mjs';
 import  makeSnappedList  from '../components/makeSnappedList.mjs';
 import  fileToImages  from './fileToImages.mjs';
+import  createButton  from '../../../util/dom/createButton.mjs';
 /**
  * Provides a widget that allows inserting or modifying raster images.
  *
@@ -78,7 +79,7 @@ class InsertImageWidget extends BaseWidget {
         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.submitButton = createButton();
         this.selectedFiles = selectedFiles;
         this.imageAltTextInput = document.createElement('input');
         // Label the alt text input
@@ -165,16 +166,18 @@ class InsertImageWidget extends BaseWidget {
         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 = () => {
-            currentImage?.decreaseSize();
-        };
-        const resetSizeButton = document.createElement('button');
-        resetSizeButton.innerText = this.localizationTable.resetImage;
-        resetSizeButton.onclick = () => {
-            currentImage?.reset();
-        };
+        const decreaseSizeButton = createButton({
+            text: this.localizationTable.decreaseImageSize,
+            onClick: () => {
+                currentImage?.decreaseSize();
+            },
+        });
+        const resetSizeButton = createButton({
+            text: this.localizationTable.resetImage,
+            onClick: () => {
+                currentImage?.reset();
+            },
+        });
         this.statusView.replaceChildren(sizeText);
         if (currentImage?.isLarge()) {
             this.statusView.appendChild(decreaseSizeButton);

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

@@ -13,6 +13,7 @@ import  { toolbarCSSPrefix }  from '../constants.mjs';
 import  makeThicknessSlider  from './components/makeThicknessSlider.mjs';
 import  makeGridSelector  from './components/makeGridSelector.mjs';
 import  { makePolylineBuilder }  from '../../components/builders/PolylineBuilder.mjs';
+import  createElement  from '../../util/dom/createElement.mjs';
 /**
  * This toolbar widget allows a user to control a single {@link Pen} tool.
  *
@@ -179,7 +180,7 @@ class PenToolWidget extends BaseToolWidget {
         const container = document.createElement('div');
         container.classList.add('action-button-row', `${toolbarCSSPrefix}-pen-tool-toggle-buttons`);
         const addToggleButton = (labelText, icon) => {
-            const button = document.createElement('button');
+            const button = createElement('button', { type: 'button' });
             button.classList.add(`${toolbarCSSPrefix}-toggle-button`);
             const iconElement = icon.cloneNode(true);
             iconElement.classList.add('icon');

package/dist/mjs/toolbar/widgets/components/makeButtonGrid.mjs

@@ -1,4 +1,5 @@
-import  addLongPressOrHoverCssClasses  from '../../../util/addLongPressOrHoverCssClasses.mjs';
+import  addLongPressOrHoverCssClasses  from '../../../util/dom/addLongPressOrHoverCssClasses.mjs';
+import  createButton  from '../../../util/dom/createButton.mjs';
 /**
  * Creates HTML `button` elements from `buttonSpecs` and displays them in a
  * grid with `columnCount` columns.
@@ -8,7 +9,7 @@ const makeButtonGrid = (buttonSpecs, columnCount) => {
     container.classList.add('toolbar-button-grid');
     container.style.setProperty('--column-count', `${columnCount}`);
     const makeButton = (buttonSpec) => {
-        const buttonElement = document.createElement('button');
+        const buttonElement = createButton();
         buttonElement.classList.add('button');
         const iconElement = buttonSpec.icon();
         iconElement.classList.add('icon');

package/dist/mjs/toolbar/widgets/components/makeColorInput.mjs

@@ -1,6 +1,7 @@
 import { Color4 } from '@js-draw/math';
 import  PipetteTool  from '../../../tools/PipetteTool.mjs';
 import  { EditorEventType }  from '../../../types.mjs';
+import  createButton  from '../../../util/dom/createButton.mjs';
 // Returns [ color input, input container, callback to change the color value ].
 export const makeColorInput = (editor, onColorChange) => {
     const container = document.createElement('span');
@@ -93,7 +94,7 @@ export const makeColorInput = (editor, onColorChange) => {
     };
 };
 const addPipetteTool = (editor, container, onColorChange) => {
-    const pipetteButton = document.createElement('button');
+    const pipetteButton = createButton();
     pipetteButton.classList.add('pipetteButton');
     pipetteButton.title = editor.localization.pickColorFromScreen;
     pipetteButton.setAttribute('alt', pipetteButton.title);

package/dist/mjs/toolbar/widgets/components/makeGridSelector.mjs

@@ -1,6 +1,6 @@
 import  { MutableReactiveValue }  from '../../../util/ReactiveValue.mjs';
-import  stopPropagationOfScrollingWheelEvents  from '../../../util/stopPropagationOfScrollingWheelEvents.mjs';
-import  addLongPressOrHoverCssClasses  from '../../../util/addLongPressOrHoverCssClasses.mjs';
+import  stopPropagationOfScrollingWheelEvents  from '../../../util/dom/stopPropagationOfScrollingWheelEvents.mjs';
+import  addLongPressOrHoverCssClasses  from '../../../util/dom/addLongPressOrHoverCssClasses.mjs';
 import  { toolbarCSSPrefix }  from '../../constants.mjs';
 let idCounter = 0;
 /**

package/dist/mjs/toolbar/widgets/components/makeSnappedList.mjs

@@ -1,4 +1,4 @@
-import  stopPropagationOfScrollingWheelEvents  from '../../../util/stopPropagationOfScrollingWheelEvents.mjs';
+import  stopPropagationOfScrollingWheelEvents  from '../../../util/dom/stopPropagationOfScrollingWheelEvents.mjs';
 import  { MutableReactiveValue, ReactiveValue }  from '../../../util/ReactiveValue.mjs';
 /**
  * Creates a list that snaps to each item and reports the selected item.

package/dist/mjs/tools/FindTool.mjs

@@ -5,6 +5,7 @@ import  TextComponent  from '../components/TextComponent.mjs';
 import  ImageComponent  from '../components/ImageComponent.mjs';
 import  BaseTool  from './BaseTool.mjs';
 import  { toggleFindVisibleShortcutId }  from './keybindings.mjs';
+import  createButton  from '../util/dom/createButton.mjs';
 const cssPrefix = 'find-tool';
 export default class FindTool extends BaseTool {
     constructor(editor) {
@@ -62,8 +63,8 @@ export default class FindTool extends BaseTool {
     fillOverlay() {
         const label = document.createElement('label');
         this.searchInput = document.createElement('input');
-        const nextBtn = document.createElement('button');
-        const closeBtn = document.createElement('button');
+        const nextBtn = createButton();
+        const closeBtn = createButton();
         // Math.random() ensures that the ID is unique (to allow us to refer to it
         // with an htmlFor).
         this.searchInput.setAttribute('id', `${cssPrefix}-searchInput-${Math.random()}`);

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

@@ -25,6 +25,7 @@ export default class Pen extends BaseTool {
     private currentDeviceType;
     private currentPointerId;
     private styleValue;
+    private wetInkRenderer;
     private style;
     private shapeAutocompletionEnabled;
     private pressureSensitivityEnabled;
@@ -42,6 +43,7 @@ export default class Pen extends BaseTool {
     eventCanBeDeliveredToNonActiveTool(event: PointerEvt): boolean;
     onPointerMove({ current }: PointerEvt): void;
     onPointerUp({ current }: PointerEvt): boolean;
+    private postGestureCleanup;
     onGestureCancel(): void;
     private removedAutocorrectedShapeRecently;
     private autocorrectShape;

package/dist/mjs/tools/Pen.mjs

@@ -40,6 +40,7 @@ export default class Pen extends BaseTool {
             this.style = newValue;
             this.noteUpdated();
         });
+        this.wetInkRenderer = this.editor.display.getWetInkRenderer();
     }
     getPressureMultiplier() {
         const thickness = this.style.thickness;
@@ -71,13 +72,17 @@ export default class Pen extends BaseTool {
     // Displays the stroke that is currently being built with the display's `wetInkRenderer`.
     previewStroke() {
         this.editor.clearWetInk();
-        const wetInkRenderer = this.editor.display.getWetInkRenderer();
         if (this.autocorrectedShape) {
             const visibleRect = this.editor.viewport.visibleRect;
-            this.autocorrectedShape.render(wetInkRenderer, visibleRect);
+            this.autocorrectedShape.render(this.wetInkRenderer, visibleRect);
         }
-        else {
-            this.builder?.preview(wetInkRenderer);
+        else if (this.builder) {
+            this.builder.preview(this.wetInkRenderer);
+            if (this.builder.inkTrailStyle) {
+                const trailStyle = this.builder.inkTrailStyle();
+                const draftInkPresenter = this.wetInkRenderer.getDraftInkPresenter();
+                draftInkPresenter.updateStyle(trailStyle);
+            }
         }
     }
     // Throws if no stroke builder exists.
@@ -113,6 +118,10 @@ export default class Pen extends BaseTool {
             }
             this.lastAutocorrectedShape = null;
             this.removedAutocorrectedShapeTime = 0;
+            if (this.builder.inkTrailStyle) {
+                // Accelerate inking
+                this.wetInkRenderer.getDraftInkPresenter().setEnabled(current.id, true);
+            }
             return true;
         }
         return false;
@@ -171,12 +180,21 @@ export default class Pen extends BaseTool {
         this.finalizeStroke();
         return false;
     }
-    onGestureCancel() {
+    postGestureCleanup() {
+        if (this.currentPointerId !== null) {
+            this.wetInkRenderer.getDraftInkPresenter().setEnabled(this.currentPointerId, false);
+        }
         this.builder = null;
+        this.lastPoint = null;
+        this.autocorrectedShape = null;
+        this.lastAutocorrectedShape = null;
         this.editor.clearWetInk();
         this.stationaryDetector?.destroy();
         this.stationaryDetector = null;
     }
+    onGestureCancel() {
+        this.postGestureCleanup();
+    }
     removedAutocorrectedShapeRecently() {
         return this.removedAutocorrectedShapeTime > performance.now() - 320;
     }
@@ -225,13 +243,7 @@ export default class Pen extends BaseTool {
                 console.warn('Pen: Not adding empty stroke', stroke, 'to the canvas.');
             }
         }
-        this.builder = null;
-        this.lastPoint = null;
-        this.autocorrectedShape = null;
-        this.lastAutocorrectedShape = null;
-        this.editor.clearWetInk();
-        this.stationaryDetector?.destroy();
-        this.stationaryDetector = null;
+        this.postGestureCleanup();
     }
     noteUpdated() {
         this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {

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

@@ -1,5 +1,6 @@
 import { Rect2, Vec2 } from '@js-draw/math';
 import  { cssPrefix }  from './SelectionTool.mjs';
+import  createButton  from '../../util/dom/createButton.mjs';
 const verticalOffset = 40;
 export default class SelectionMenuShortcut {
     constructor(parent, viewport, icon, showContextMenu, localization) {
@@ -20,8 +21,9 @@ export default class SelectionMenuShortcut {
         this.updatePosition();
     }
     initUI() {
-        const button = document.createElement('button');
-        this.icon.classList.add('icon');
+        const button = createButton({
+            classList: ['icon'],
+        });
         button.replaceChildren(this.icon);
         button.ariaLabel = this.localization.selectionMenu__show;
         button.title = button.ariaLabel;

package/dist/mjs/tools/SoundUITool.mjs

@@ -1,5 +1,6 @@
 import { LineSegment2, Color4 } from '@js-draw/math';
 import  BaseTool  from './BaseTool.mjs';
+import  createButton  from '../util/dom/createButton.mjs';
 class SoundFeedback {
     constructor() {
         this.closed = false;
@@ -92,10 +93,11 @@ export default class SoundUITool extends BaseTool {
         // Create a screen-reader-usable method of toggling the tool:
         this.toggleButtonContainer = document.createElement('div');
         this.toggleButtonContainer.classList.add('js-draw-sound-ui-toggle');
-        this.toggleButton = document.createElement('button');
-        this.toggleButton.onclick = () => {
-            this.setEnabled(!this.isEnabled());
-        };
+        this.toggleButton = createButton({
+            onClick: () => {
+                this.setEnabled(!this.isEnabled());
+            },
+        });
         this.toggleButtonContainer.appendChild(this.toggleButton);
         this.updateToggleButtonText();
         editor.createHTMLOverlay(this.toggleButtonContainer);

package/dist/mjs/tools/util/createMenuOverlay.mjs

@@ -1,5 +1,6 @@
 import  waitForTimeout  from '../../util/waitForTimeout.mjs';
 import  { EditorEventType }  from '../../types.mjs';
+import  createButton  from '../../util/dom/createButton.mjs';
 let idCounter = 0;
 const createMenuOverlay = async (editor, canvasAnchor, options) => {
     const overlay = document.createElement('div');
@@ -96,16 +97,17 @@ const createMenuOverlay = async (editor, canvasAnchor, options) => {
             }
         });
         for (const option of options) {
-            const optionElement = document.createElement('button');
+            const optionElement = createButton({
+                classList: ['option', 'editor-popup-menu-option'],
+                onClick: (event) => {
+                    if (event.defaultPrevented)
+                        return;
+                    onOptionSelected(option.key);
+                },
+            });
             optionElement.id = `menu-overlay-option-${idCounter++}`;
             optionElement.role = 'menuitem';
-            optionElement.classList.add('option', 'editor-popup-menu-option');
             optionElement.replaceChildren(option.icon(), document.createTextNode(option.text));
-            optionElement.onclick = (event) => {
-                if (event.defaultPrevented)
-                    return;
-                onOptionSelected(option.key);
-            };
             contentElement.appendChild(optionElement);
             if (optionElements.length === 0) {
                 optionElement.autofocus = true;

package/dist/mjs/util/dom/createButton.d.ts

@@ -0,0 +1,7 @@
+interface Options {
+    onClick?: (event: MouseEvent) => void;
+    text?: string;
+    classList?: string[];
+}
+declare const createButton: ({ onClick, text, classList }?: Options) => HTMLButtonElement;
+export default createButton;

package/dist/mjs/util/dom/createButton.mjs

@@ -0,0 +1,15 @@
+import  createElement  from './createElement.mjs';
+const createButton = ({ onClick, text, classList = [] } = {}) => {
+    const button = createElement('button', { type: 'button' });
+    if (onClick) {
+        button.onclick = onClick;
+    }
+    if (text) {
+        button.textContent = text;
+    }
+    for (const className of classList) {
+        button.classList.add(className);
+    }
+    return button;
+};
+export default createButton;

package/dist/mjs/util/{createElement.d.ts → dom/createElement.d.ts}

@@ -11,6 +11,9 @@ interface ElementToPropertiesMap {
         'stroke-width': string;
         transform: string;
     };
+    button: {
+        type: 'button';
+    };
     rect: {
         stroke: string;
         fill: string;

package/dist/mjs/version.mjs

@@ -5,5 +5,5 @@
  */
 export default {
     // Note: Auto-updated by prebuild.js:
-    number: '1.29.2',
+    number: '1.30.1',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "1.29.2",
+	"version": "1.30.1",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"types": "./dist/mjs/lib.d.ts",
 	"main": "./dist/cjs/lib.js",
@@ -64,11 +64,11 @@
 		"postpack": "ts-node tools/copyREADME.ts revert"
 	},
 	"dependencies": {
-		"@js-draw/math": "^1.29.2",
+		"@js-draw/math": "^1.30.1",
 		"@melloware/coloris": "0.22.0"
 	},
 	"devDependencies": {
-		"@js-draw/build-tool": "^1.29.2",
+		"@js-draw/build-tool": "^1.30.1",
 		"@types/jest": "29.5.5",
 		"@types/jsdom": "21.1.3"
 	},
@@ -86,5 +86,5 @@
 		"freehand",
 		"svg"
 	],
-	"gitHead": "9b11e725d30911b2a843df315be5b5de5bda1d78"
+	"gitHead": "a416de226b49ee0c9244ec7f7b9522515a49bcb7"
 }