js-draw 1.28.0 → 1.29.1

package/dist/mjs/Viewport.d.ts

@@ -28,7 +28,19 @@ export declare class Viewport {
     screenToCanvas(screenPoint: Point2): Point2;
     /** @returns the given point transformed into screen coordinates. */
     canvasToScreen(canvasPoint: Point2): Point2;
-    /** @returns a command that transforms the canvas by `transform`. */
+    /**
+     * @returns a command that transforms the canvas by `transform`.
+     *
+     * For example, `Viewport.transformBy(moveRight).apply(editor)` would move the canvas to the right
+     * (and thus the viewport to the left):
+     * ```ts,runnable
+     * import { Editor, Viewport, Mat33, Vec2 } from 'js-draw';
+     * const editor = new Editor(document.body);
+     * const moveRight = Mat33.translation(Vec2.unitX.times(500));
+     * // Move the **canvas** right by 500 units:
+     * Viewport.transformBy(moveRight).apply(editor);
+     * ```
+     */
     static transformBy(transform: Mat33): ViewportTransform;
     /**
      * Updates the transformation directly. Using `transformBy` is preferred.

package/dist/mjs/Viewport.mjs

@@ -49,7 +49,19 @@ export class Viewport {
     canvasToScreen(canvasPoint) {
         return this.transform.transformVec2(canvasPoint);
     }
-    /** @returns a command that transforms the canvas by `transform`. */
+    /**
+     * @returns a command that transforms the canvas by `transform`.
+     *
+     * For example, `Viewport.transformBy(moveRight).apply(editor)` would move the canvas to the right
+     * (and thus the viewport to the left):
+     * ```ts,runnable
+     * import { Editor, Viewport, Mat33, Vec2 } from 'js-draw';
+     * const editor = new Editor(document.body);
+     * const moveRight = Mat33.translation(Vec2.unitX.times(500));
+     * // Move the **canvas** right by 500 units:
+     * Viewport.transformBy(moveRight).apply(editor);
+     * ```
+     */
     static transformBy(transform) {
         return new Viewport.ViewportTransform(transform);
     }
@@ -206,9 +218,11 @@ export class Viewport {
         }
         return transform;
     }
-    // Returns a Command that transforms the view such that [rect] is visible, and perhaps
+    // Returns a Command that transforms the view such that `toMakeVisible` is visible, and perhaps
     // centered in the viewport.
-    // Returns null if no transformation is necessary
+    //
+    // If the content is already roughly centered in the screen and at a reasonable zoom level,
+    // the resultant command does nothing.
     //
     // @see {@link computeZoomToTransform}
     zoomTo(toMakeVisible, allowZoomIn = true, allowZoomOut = true) {

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

@@ -9,11 +9,21 @@ import Command from '../commands/Command';
 export declare const sortLeavesByZIndex: (leaves: Array<ImageNode>) => void;
 export declare enum EditorImageEventType {
     ExportViewportChanged = 0,
-    AutoresizeModeChanged = 1
+    AutoresizeModeChanged = 1,
+    ComponentAdded = 2,
+    ComponentRemoved = 3
 }
-export type EditorImageNotifier = EventDispatcher<EditorImageEventType, {
+interface StateChangeEvent {
+    kind: EditorImageEventType.ExportViewportChanged | EditorImageEventType.AutoresizeModeChanged;
     image: EditorImage;
-}>;
+}
+interface ComponentAddRemoveEvent {
+    kind: EditorImageEventType.ComponentAdded | EditorImageEventType.ComponentRemoved;
+    image: EditorImage;
+    componentId: string;
+}
+export type EditorImageEvent = StateChangeEvent | ComponentAddRemoveEvent;
+export type EditorImageNotifier = EventDispatcher<EditorImageEventType, EditorImageEvent>;
 /**
  * A callback used to
  * 1. pause the render process

package/dist/mjs/image/EditorImage.mjs

@@ -16,8 +16,14 @@ export const sortLeavesByZIndex = (leaves) => {
 };
 export var EditorImageEventType;
 (function (EditorImageEventType) {
+    // @internal
     EditorImageEventType[EditorImageEventType["ExportViewportChanged"] = 0] = "ExportViewportChanged";
+    // @internal
     EditorImageEventType[EditorImageEventType["AutoresizeModeChanged"] = 1] = "AutoresizeModeChanged";
+    // Type for events fired whenever components are added to the image
+    EditorImageEventType[EditorImageEventType["ComponentAdded"] = 2] = "ComponentAdded";
+    // Type for events fired whenever components are removed from the image
+    EditorImageEventType[EditorImageEventType["ComponentRemoved"] = 3] = "ComponentRemoved";
 })(EditorImageEventType || (EditorImageEventType = {}));
 let debugMode = false;
 /**
@@ -43,7 +49,7 @@ class EditorImage {
         this.settingExportRect = false;
         this.root = new RootImageNode();
         this.background = new RootImageNode();
-        this.componentsById = Object.create(null);
+        this.componentsById = new Map();
         this.notifier = new EventDispatcher();
         this.importExportViewport = new Viewport(() => {
             this.onExportViewportChanged();
@@ -170,13 +176,25 @@ class EditorImage {
     /** Called whenever (just after) an element is completely removed. @internal */
     onDestroyElement(elem) {
         this.componentCount--;
-        delete this.componentsById[elem.getId()];
+        const componentId = elem.getId();
+        this.componentsById.delete(componentId);
+        this.notifier.dispatch(EditorImageEventType.ComponentRemoved, {
+            kind: EditorImageEventType.ComponentRemoved,
+            image: this,
+            componentId: componentId,
+        });
         this.autoresizeExportViewport();
     }
     /** Called just after an element is added. @internal */
     onElementAdded(elem) {
         this.componentCount++;
-        this.componentsById[elem.getId()] = elem;
+        const elementId = elem.getId();
+        this.componentsById.set(elem.getId(), elem);
+        this.notifier.dispatch(EditorImageEventType.ComponentAdded, {
+            kind: EditorImageEventType.ComponentAdded,
+            image: this,
+            componentId: elementId,
+        });
         this.autoresizeExportViewport();
     }
     /**
@@ -185,7 +203,7 @@ class EditorImage {
      * @see {@link AbstractComponent.getId}
      */
     lookupElement(id) {
-        return this.componentsById[id] ?? null;
+        return this.componentsById.get(id) ?? null;
     }
     addComponentDirectly(elem) {
         // Because onAddToImage can affect the element's bounding box,
@@ -298,6 +316,7 @@ class EditorImage {
         if (shouldAutoresize !== this.shouldAutoresizeExportViewport) {
             this.shouldAutoresizeExportViewport = shouldAutoresize;
             this.notifier.dispatch(EditorImageEventType.AutoresizeModeChanged, {
+                kind: EditorImageEventType.AutoresizeModeChanged,
                 image: this,
             });
         }
@@ -343,6 +362,7 @@ class EditorImage {
         // called.
         if (!this.settingExportRect) {
             this.notifier.dispatch(EditorImageEventType.ExportViewportChanged, {
+                kind: EditorImageEventType.ExportViewportChanged,
                 image: this,
             });
         }

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

@@ -58,6 +58,7 @@ export default class IconProvider {
     makePipetteIcon(color?: Color4): IconElemType;
     makeShapeAutocorrectIcon(): IconElemType;
     makeStrokeSmoothingIcon(): IconElemType;
+    makePressureSensitivityIcon(): IconElemType;
     /** Unused. @deprecated */
     makeFormatSelectionIcon(): IconElemType;
     makeResizeImageToSelectionIcon(): IconElemType;

package/dist/mjs/toolbar/IconProvider.mjs

@@ -645,6 +645,27 @@ class IconProvider {
 			M 75,17.3 40,59.7 38.2,77.6 55.5,72.4 90.5,30 Z
 		`, fill, strokeColor, '7px');
     }
+    makePressureSensitivityIcon() {
+        const icon = document.createElementNS(svgNamespace, 'svg');
+        icon.setAttribute('viewBox', '4 -10 100 100');
+        icon.replaceChildren(...createSvgPaths({
+            d: `
+					M 39.7,77.7
+					C 39.7,77.7 3.4,78.1 4.2,60 4.7,45.2 33.2,30.5 40,25 55.9,12.1 7.4,4.8 7.4,4.8
+					c 0,0 40.2,5.5 40.2,15.4
+					C 47.6,29.1 21.2,35.1 23.9,60 25,70 39.7,77.7 39.7,77.7
+					Z`,
+            fill: 'var(--icon-color)',
+            stroke: 'var(--icon-color)',
+            'stroke-width': '2px',
+        }, {
+            d: 'M 86.4,15.6 101.4,28.8 65,70 47.5,74.6 50,56.7Z',
+            fill: 'transparent',
+            stroke: 'var(--icon-color)',
+            'stroke-width': '6px',
+        }));
+        return icon;
+    }
     /** Unused. @deprecated */
     makeFormatSelectionIcon() {
         return this.makeIconFromPath(`

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

@@ -57,6 +57,7 @@ export interface ToolbarLocalization extends ToolbarUtilsLocalization {
     about: string;
     inputStabilization: string;
     strokeAutocorrect: string;
+    pressureSensitivity: string;
     errorImageHasZeroSize: string;
     describeTheImage: string;
     fileInput__loading: string;
@@ -67,6 +68,7 @@ export interface ToolbarLocalization extends ToolbarUtilsLocalization {
     penDropdown__penTypeHelpText: string;
     penDropdown__autocorrectHelpText: string;
     penDropdown__stabilizationHelpText: string;
+    penDropdown__pressureSensitivityHelpText: string;
     handDropdown__baseHelpText: string;
     handDropdown__zoomDisplayHelpText: string;
     handDropdown__zoomInHelpText: string;

package/dist/mjs/toolbar/localization.mjs

@@ -47,6 +47,7 @@ export const defaultToolbarLocalization = {
     about: 'About',
     inputStabilization: 'Stabilization',
     strokeAutocorrect: 'Autocorrect',
+    pressureSensitivity: 'Pressure',
     touchPanning: 'Scroll with touch',
     roundedTipPen: 'Round',
     roundedTipPen2: 'Polyline',
@@ -69,6 +70,7 @@ export const defaultToolbarLocalization = {
     penDropdown__penTypeHelpText: 'Changes the pen style.\n\nEither a “pen” style or “shape” can be chosen. Choosing a “pen” style draws freehand lines. Choosing a “shape” draws shapes.',
     penDropdown__autocorrectHelpText: 'Converts approximate freehand lines and rectangles to perfect ones.\n\nThe pen must be held stationary at the end of a stroke to trigger a correction.',
     penDropdown__stabilizationHelpText: 'Draws smoother strokes.\n\nThis also adds a short delay between the mouse/stylus and the stroke.',
+    penDropdown__pressureSensitivityHelpText: 'Changes the thickness of strokes according to how hard you press, when using a compatible device like a stylus.',
     handDropdown__baseHelpText: 'This tool is responsible for scrolling, rotating, and zooming the editor.',
     handDropdown__zoomInHelpText: 'Zooms in.',
     handDropdown__zoomOutHelpText: 'Zooms out.',

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

@@ -216,13 +216,19 @@ class PenToolWidget extends BaseToolWidget {
         autocorrectOption.setOnInputListener((enabled) => {
             this.tool.setStrokeAutocorrectEnabled(enabled);
         });
+        const pressureSensitivityOption = addToggleButton(this.localizationTable.pressureSensitivity, this.editor.icons.makePressureSensitivityIcon());
+        pressureSensitivityOption.setOnInputListener((enabled) => {
+            this.tool.setPressureSensitivityEnabled(enabled);
+        });
         // Help text
         autocorrectOption.addHelpText(this.localizationTable.penDropdown__autocorrectHelpText);
         stabilizationOption.addHelpText(this.localizationTable.penDropdown__stabilizationHelpText);
+        pressureSensitivityOption.addHelpText(this.localizationTable.penDropdown__pressureSensitivityHelpText);
         return {
             update: () => {
                 stabilizationOption.setChecked(!!this.tool.getInputMapper());
                 autocorrectOption.setChecked(this.tool.getStrokeAutocorrectionEnabled());
+                pressureSensitivityOption.setChecked(this.tool.getPressureSensitivityEnabled());
             },
             addTo: (parent) => {
                 parent.appendChild(container);
@@ -305,6 +311,7 @@ class PenToolWidget extends BaseToolWidget {
             strokeFactoryId: this.getCurrentPenType()?.id,
             inputStabilization: !!this.tool.getInputMapper(),
             strokeAutocorrect: this.tool.getStrokeAutocorrectionEnabled(),
+            pressureSensitivity: this.tool.getPressureSensitivityEnabled(),
         };
     }
     deserializeFrom(state) {
@@ -340,6 +347,9 @@ class PenToolWidget extends BaseToolWidget {
         if (state.strokeAutocorrect !== undefined) {
             this.tool.setStrokeAutocorrectEnabled(!!state.strokeAutocorrect);
         }
+        if (state.pressureSensitivity !== undefined) {
+            this.tool.setPressureSensitivityEnabled(!!state.pressureSensitivity);
+        }
     }
 }
 // A counter variable that ensures different HTML elements are given unique names/ids.

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

@@ -157,14 +157,16 @@ export default class InputStabilizer extends InputMapper {
     onEvent(event) {
         if (isPointerEvt(event) || event.kind === InputEvtType.GestureCancelEvt) {
             if (event.kind === InputEvtType.PointerDownEvt) {
-                if (this.stabilizer === null) {
-                    this.stabilizer = new StylusInputStabilizer(event.current.screenPos, (screenPoint, timeStamp) => this.emitPointerMove(screenPoint, timeStamp), this.options);
-                }
-                else if (event.allPointers.length > 1) {
+                if (event.allPointers.length > 1) {
                     // Do not attempt to stabilize multiple pointers.
-                    this.stabilizer.cancel();
+                    this.stabilizer?.cancel();
                     this.stabilizer = null;
                 }
+                else {
+                    // Create a new stabilizer for the new stroke.
+                    this.stabilizer?.cancel();
+                    this.stabilizer = new StylusInputStabilizer(event.current.screenPos, (screenPoint, timeStamp) => this.emitPointerMove(screenPoint, timeStamp), this.options);
+                }
             }
             const handled = this.mapPointerEvent(event);
             if (event.kind === InputEvtType.PointerUpEvt ||

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

@@ -27,6 +27,7 @@ export default class Pen extends BaseTool {
     private styleValue;
     private style;
     private shapeAutocompletionEnabled;
+    private pressureSensitivityEnabled;
     private autocorrectedShape;
     private lastAutocorrectedShape;
     private removedAutocorrectedShapeTime;
@@ -59,6 +60,8 @@ export default class Pen extends BaseTool {
     setHasStabilization(hasStabilization: boolean): void;
     setStrokeAutocorrectEnabled(enabled: boolean): void;
     getStrokeAutocorrectionEnabled(): boolean;
+    setPressureSensitivityEnabled(enabled: boolean): void;
+    getPressureSensitivityEnabled(): boolean;
     getThickness(): number;
     getColor(): Color4;
     getStrokeFactory(): ComponentBuilderFactory;

package/dist/mjs/tools/Pen.mjs

@@ -25,6 +25,7 @@ export default class Pen extends BaseTool {
         this.currentDeviceType = null;
         this.currentPointerId = null;
         this.shapeAutocompletionEnabled = false;
+        this.pressureSensitivityEnabled = true;
         this.autocorrectedShape = null;
         this.lastAutocorrectedShape = null;
         this.removedAutocorrectedShapeTime = 0;
@@ -47,6 +48,7 @@ export default class Pen extends BaseTool {
     // Converts a `pointer` to a `StrokeDataPoint`.
     toStrokePoint(pointer) {
         const minPressure = 0.3;
+        const defaultPressure = 0.5; // https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure#value
         let pressure = Math.max(pointer.pressure ?? 1.0, minPressure);
         if (!isFinite(pressure)) {
             console.warn('Non-finite pressure!', pointer);
@@ -56,6 +58,9 @@ export default class Pen extends BaseTool {
         console.assert(isFinite(pointer.screenPos.length()), 'Non-finite screen position!');
         console.assert(isFinite(pointer.timeStamp), 'Non-finite timeStamp on pointer!');
         const pos = pointer.canvasPos;
+        if (!this.getPressureSensitivityEnabled()) {
+            pressure = defaultPressure;
+        }
         return {
             pos,
             width: pressure * this.getPressureMultiplier(),
@@ -288,6 +293,15 @@ export default class Pen extends BaseTool {
     getStrokeAutocorrectionEnabled() {
         return this.shapeAutocompletionEnabled;
     }
+    setPressureSensitivityEnabled(enabled) {
+        if (enabled !== this.pressureSensitivityEnabled) {
+            this.pressureSensitivityEnabled = enabled;
+            this.noteUpdated();
+        }
+    }
+    getPressureSensitivityEnabled() {
+        return this.pressureSensitivityEnabled;
+    }
     getThickness() {
         return this.style.thickness;
     }

package/dist/mjs/util/createElement.d.ts

@@ -8,6 +8,7 @@ interface ElementToPropertiesMap {
         d: string;
         fill: string;
         stroke: string;
+        'stroke-width': string;
         transform: string;
     };
     rect: {

package/dist/mjs/version.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "1.28.0",
+	"version": "1.29.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.28.0",
+		"@js-draw/math": "^1.29.1",
 		"@melloware/coloris": "0.22.0"
 	},
 	"devDependencies": {
-		"@js-draw/build-tool": "^1.28.0",
+		"@js-draw/build-tool": "^1.29.1",
 		"@types/jest": "29.5.5",
 		"@types/jsdom": "21.1.3"
 	},
@@ -86,5 +86,5 @@
 		"freehand",
 		"svg"
 	],
-	"gitHead": "03242acbf2250f5a41aa86a84146bb08583cf955"
+	"gitHead": "c82d0fc2a1c0d6257a54fde9cf40d5a05cb51213"
 }

package/src/toolbar/widgets/PenToolWidget.scss

@@ -1,9 +1,11 @@
 // Repeat selector for extra specificity
 :root .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons {
 	display: flex;
+	flex-wrap: wrap;
 	justify-content: stretch;
 	padding-top: 0;
 	padding-bottom: 5px;
+	gap: 5px;
 
 	// Some styles rely on left being start.
 	direction: ltr;
@@ -11,21 +13,19 @@
 	& > * {
 		flex-grow: 1;
 		text-align: start;
-		margin-inline-end: 5px;
+		width: min-content;
 
-		.icon {
-			margin: 0;
-			margin-inline-start: 4px;
+		> .icon {
+			margin-inline-start: 6px;
 			margin-inline-end: 10px;
 		}
 	}
 
-	& > :nth-child(1) {
-		direction: ltr;
+	& > :nth-child(2) {
+		text-align: center;
 	}
 
-	& > :last-child {
-		// Reverse the last (show icon on the right)
+	& > :nth-child(3) {
 		direction: rtl;
 	}
 }