js-draw 1.11.0 → 1.11.2

package/dist/mjs/Editor.mjs

@@ -327,6 +327,17 @@ export class Editor {
         }
         return res;
     }
+    /**
+     * A protected method that can override setPointerCapture in environments where it may fail
+     * (e.g. with synthetic events). @internal
+     */
+    setPointerCapture(target, pointerId) {
+        target.setPointerCapture(pointerId);
+    }
+    /** Can be overridden in a testing environment to handle synthetic events. @internal */
+    releasePointerCapture(target, pointerId) {
+        target.releasePointerCapture(pointerId);
+    }
     /**
      * Dispatches a `PointerEvent` to the editor. The target element for `evt` must have the same top left
      * as the content of the editor.
@@ -337,7 +348,7 @@ export class Editor {
         if (eventType === 'pointerdown') {
             const pointer = Pointer.ofEvent(evt, true, this.viewport, eventsRelativeTo);
             this.pointers[pointer.id] = pointer;
-            eventTarget.setPointerCapture(pointer.id);
+            this.setPointerCapture(eventTarget, pointer.id);
             const event = {
                 kind: InputEvtType.PointerDownEvt,
                 current: pointer,
@@ -374,7 +385,7 @@ export class Editor {
                 return false;
             }
             this.pointers[pointer.id] = pointer;
-            eventTarget.releasePointerCapture(pointer.id);
+            this.releasePointerCapture(eventTarget, pointer.id);
             if (this.toolController.dispatchInputEvent({
                 kind: InputEvtType.PointerUpEvt,
                 current: pointer,
@@ -551,7 +562,8 @@ export class Editor {
                 return false;
             }
             // Position of the current event.
-            const currentPos = Vec2.of(event.pageX, event.pageY);
+            // jsdom doesn't seem to support pageX/pageY -- use clientX/clientY if unavailable
+            const currentPos = Vec2.of(event.pageX ?? event.clientX, event.pageY ?? event.clientY);
             const pointerId = event.pointerId ?? 0;
             // Whether to send the current event to the editor
             let sendToEditor = true;
@@ -561,9 +573,10 @@ export class Editor {
                 gestureData[pointerId] = {
                     eventBuffer: [[eventName, event]],
                     startPoint: currentPos,
+                    hasMovedSignificantly: false,
                 };
                 // Capture the pointer so we receive future events even if the overlay is hidden.
-                elem.setPointerCapture(event.pointerId);
+                this.setPointerCapture(elem, event.pointerId);
                 // Don't send to the editor.
                 sendToEditor = false;
             }
@@ -573,7 +586,7 @@ export class Editor {
                 // Skip if the pointer hasn't moved enough to not be a "click".
                 const strokeStartThreshold = 10;
                 const isWithinClickThreshold = gestureStartPos && currentPos.minus(gestureStartPos).magnitude() < strokeStartThreshold;
-                if (isWithinClickThreshold) {
+                if (isWithinClickThreshold && !gestureData[pointerId].hasMovedSignificantly) {
                     eventBuffer.push([eventName, event]);
                     sendToEditor = false;
                 }
@@ -583,6 +596,7 @@ export class Editor {
                         this.handleHTMLPointerEvent(eventName, event);
                     }
                     gestureData[pointerId].eventBuffer = [];
+                    gestureData[pointerId].hasMovedSignificantly = true;
                     sendToEditor = true;
                 }
             }
@@ -595,7 +609,7 @@ export class Editor {
             // pointercancel event.
             else if ((eventName === 'pointerup' || eventName === 'pointercancel')
                 && gestureData[pointerId] && gestureData[pointerId].eventBuffer.length > 0) {
-                elem.releasePointerCapture(event.pointerId);
+                this.releasePointerCapture(elem, event.pointerId);
                 // Don't send to the editor.
                 sendToEditor = false;
                 delete gestureData[pointerId];
@@ -643,6 +657,9 @@ export class Editor {
             handleKeyUp: (htmlEvent) => {
                 this.handleHTMLKeyUpEvent(htmlEvent);
             },
+            getHandlesKeyEventsFrom: (element) => {
+                return this.eventListenerTargets.includes(element);
+            },
         });
         // Allow drop.
         elem.ondragover = evt => {

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

@@ -64,5 +64,5 @@ export default class BackgroundComponent extends AbstractComponent implements Re
     protected applyTransformation(_affineTransfm: Mat33): void;
     description(localizationTable: ImageComponentLocalization): string;
     protected createClone(): AbstractComponent;
-    static deserializeFromJSON(json: any): BackgroundComponent;
+    static deserializeFromJSON(this: void, json: any): BackgroundComponent;
 }

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

@@ -37,5 +37,5 @@ export default class ImageComponent extends AbstractComponent {
         height: number;
         transform: Mat33Array;
     };
-    static deserializeFromJSON(data: any): ImageComponent;
+    static deserializeFromJSON(this: void, data: any): ImageComponent;
 }

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

@@ -15,6 +15,6 @@ export default class SVGGlobalAttributesObject extends AbstractComponent {
     protected createClone(): SVGGlobalAttributesObject;
     description(localization: ImageComponentLocalization): string;
     protected serializeToJSON(): string | null;
-    static deserializeFromString(_data: string): AbstractComponent;
+    static deserializeFromString(this: void, _data: string): AbstractComponent;
 }
 export {};

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

@@ -88,5 +88,5 @@ export default class Stroke extends AbstractComponent implements RestyleableComp
         path: string;
     }[];
     /** @internal */
-    static deserializeFromJSON(json: any): Stroke;
+    static deserializeFromJSON(this: void, json: any): Stroke;
 }

package/dist/mjs/rendering/Display.mjs

@@ -70,7 +70,9 @@ export default class Display {
             },
             blockResolution: cacheBlockResolution,
             cacheSize: 600 * 600 * 4 * 90,
-            maxScale: 1.3,
+            // On higher resolution displays, don't scale cache blocks as much to decrease blurriness.
+            // TODO: Decrease the minimum cache scale as well.
+            maxScale: Math.max(1, 1.3 / window.devicePixelRatio),
             // Require about 20 strokes with 4 parts each to cache an image in one of the
             // parts of the cache grid.
             minProportionalRenderTimePerCache: 20 * 4,

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

@@ -29,4 +29,5 @@ export default class DummyRenderer extends AbstractRenderer {
     isTooSmallToRender(_rect: Rect2): boolean;
     canRenderFromWithoutDataLoss(other: AbstractRenderer): boolean;
     renderFromOtherOfSameType(transform: Mat33, other: AbstractRenderer): void;
+    toString(): string;
 }

package/dist/mjs/rendering/renderers/DummyRenderer.mjs

@@ -103,4 +103,7 @@ export default class DummyRenderer extends AbstractRenderer {
             return transform.transformVec2(point);
         }));
     }
+    toString() {
+        return '[DummyRenderer]';
+    }
 }

package/dist/mjs/tools/FindTool.mjs

@@ -34,7 +34,7 @@ export default class FindTool extends BaseTool {
         }
         if (matchIdx < matches.length) {
             const undoable = false;
-            this.editor.dispatch(this.editor.viewport.zoomTo(matches[matchIdx], true, true), undoable);
+            void this.editor.dispatch(this.editor.viewport.zoomTo(matches[matchIdx], true, true), undoable);
             this.editor.announceForAccessibility(this.editor.localization.focusedFoundText(matchIdx + 1, matches.length));
         }
     }

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: 5,
-                    maxRadius: 10,
+                    maxSpeed: 8.5,
+                    maxRadius: 11,
                     minTimeSeconds: 0.5, // s
                 };
                 this.stationaryDetector = new StationaryPenDetector(current, stationaryDetectionConfig, pointer => this.autocorrectShape(pointer));
@@ -141,6 +141,7 @@ export default class Pen extends BaseTool {
             if (this.autocorrectedShape) {
                 this.removedAutocorrectedShapeTime = performance.now();
                 this.autocorrectedShape = null;
+                this.editor.announceForAccessibility(this.editor.localization.autocorrectionCanceled);
             }
         }
     }
@@ -192,6 +193,8 @@ export default class Pen extends BaseTool {
         if (bboxArea === 0 || !isFinite(bboxArea)) {
             return;
         }
+        const shapeDescription = correctedShape.description(this.editor.localization);
+        this.editor.announceForAccessibility(this.editor.localization.autocorrectedTo(shapeDescription));
         this.autocorrectedShape = correctedShape;
         this.lastAutocorrectedShape = correctedShape;
         this.previewStroke();
@@ -206,6 +209,9 @@ export default class Pen extends BaseTool {
             const stroke = this.autocorrectedShape ?? this.builder.build();
             this.previewStroke();
             if (stroke.getBBox().area > 0) {
+                if (stroke === this.autocorrectedShape) {
+                    this.editor.announceForAccessibility(this.editor.localization.autocorrectedTo(stroke.description(this.editor.localization)));
+                }
                 const canFlatten = true;
                 const action = EditorImage.addElement(stroke, canFlatten);
                 this.editor.dispatch(action);

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

@@ -231,9 +231,11 @@ class SelectionTool extends BaseTool {
             // Pass it to another tool, if apliccable.
             return false;
         }
-        else if (event.key === 'Shift') {
+        else if (event.shiftKey || event.key === 'Shift') {
             this.shiftKeyPressed = true;
-            return true;
+            if (event.key === 'Shift') {
+                return true;
+            }
         }
         let rotationSteps = 0;
         let xTranslateSteps = 0;
@@ -335,6 +337,14 @@ class SelectionTool extends BaseTool {
             }
             return true;
         }
+        // Here, we check if shiftKey === false because, as of this writing,
+        // evt.shiftKey is an optional property. Being falsey could just mean
+        // that it wasn't set.
+        if (evt.shiftKey === false) {
+            this.shiftKeyPressed = false;
+            // Don't return immediately -- event may be otherwise handled
+        }
+        // Also check for key === 'Shift' (for the case where shiftKey is undefined)
         if (evt.key === 'Shift') {
             this.shiftKeyPressed = false;
             return true;
@@ -379,7 +389,11 @@ class SelectionTool extends BaseTool {
         return true;
     }
     setEnabled(enabled) {
+        const wasEnabled = this.isEnabled();
         super.setEnabled(enabled);
+        if (wasEnabled === enabled) {
+            return;
+        }
         // Clear the selection
         this.selectionBox?.cancelSelection();
         this.onSelectionUpdated();

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

@@ -9,6 +9,8 @@ export interface ToolLocalization {
     undoRedoTool: string;
     pipetteTool: string;
     rightClickDragPanTool: string;
+    autocorrectedTo: (description: string) => string;
+    autocorrectionCanceled: string;
     textTool: string;
     enterTextToInsert: string;
     changeTool: string;

package/dist/mjs/tools/localization.mjs

@@ -9,6 +9,8 @@ export const defaultToolLocalization = {
     rightClickDragPanTool: 'Right-click drag',
     pipetteTool: 'Pick color from screen',
     keyboardPanZoom: 'Keyboard pan/zoom shortcuts',
+    autocorrectedTo: (strokeDescription) => `Autocorrected to ${strokeDescription}`,
+    autocorrectionCanceled: 'Autocorrect cancelled',
     textTool: 'Text',
     enterTextToInsert: 'Text to insert',
     changeTool: 'Change tool',

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

@@ -2,6 +2,11 @@ interface Callbacks {
     filter(event: KeyboardEvent): boolean;
     handleKeyDown(event: KeyboardEvent): void;
     handleKeyUp(event: KeyboardEvent): void;
+    /**
+     * Should return `true` iff `source` is also registered as an event listener source.
+     * If `false` and focus leaves the original source, keyup events are fired.
+     */
+    getHandlesKeyEventsFrom(source: Node): boolean;
 }
 /**
  * Calls `callbacks` when different keys are known to be pressed.

package/dist/mjs/util/listenForKeyboardEventsFrom.mjs

@@ -65,7 +65,11 @@ const listenForKeyboardEventsFrom = (elem, callbacks) => {
         handleKeyEvent(htmlEvent);
     });
     elem.addEventListener('focusout', (focusEvent) => {
-        const stillHasFocus = focusEvent.relatedTarget && elem.contains(focusEvent.relatedTarget);
+        let stillHasFocus = false;
+        if (focusEvent.relatedTarget) {
+            const relatedTarget = focusEvent.relatedTarget;
+            stillHasFocus = elem.contains(relatedTarget) || callbacks.getHandlesKeyEventsFrom(relatedTarget);
+        }
         if (!stillHasFocus) {
             for (const event of keysDown) {
                 callbacks.handleKeyUp(new KeyboardEvent('keyup', {

package/dist/mjs/version.mjs

@@ -1,3 +1,3 @@
 export default {
-    number: '1.11.0',
+    number: '1.11.2',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "1.11.0",
+  "version": "1.11.2",
   "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.10.0",
-    "@melloware/coloris": "0.21.0"
+    "@js-draw/math": "^1.11.1",
+    "@melloware/coloris": "0.22.0"
   },
   "devDependencies": {
-    "@js-draw/build-tool": "^1.7.0",
+    "@js-draw/build-tool": "^1.11.1",
     "@types/jest": "29.5.5",
     "@types/jsdom": "21.1.3"
   },
@@ -86,5 +86,5 @@
     "freehand",
     "svg"
   ],
-  "gitHead": "01fc3dc7bdbc9f456705bf08d9c30b4549122d97"
+  "gitHead": "e1d593def957ec85633ff89166f9af25ae03f862"
 }

package/src/toolbar/AbstractToolbar.scss

@@ -45,7 +45,8 @@
 }
 
 .toolbar-button.disabled {
-	filter: opacity(0.5) sepia(0.2);
+	filter: sepia(0.2);
+	opacity: 0.45;
 	cursor: unset;
 }
 
@@ -103,7 +104,7 @@
 
 .toolbar-root button:disabled {
 	cursor: inherit;
-	filter: opacity(0.5);
+	opacity: 0.5;
 }
 
 .toolbar-root .toolbar-icon {

package/src/toolbar/widgets/components/makeColorInput.scss

@@ -29,6 +29,14 @@
 	display: inline-flex;
 	flex-direction: row;
 
+	.coloris_input {
+		// Ensure that the region that can be clicked to open the input is roughly
+		// the full height of the container.
+		// Because the color picker is always shown below or above the input, 5px is
+		// subtracted to make the picker better align with the input's container.
+		height: calc(100% - 6px);
+	}
+
 	&.picker-open .clr-field {
 		// Work around what seems to be a Coloris bug -- clicking on the input button
 		// keeps the color picker open (while clicking anywhere else closes the picker).