js-draw 1.11.0 → 1.11.1

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.1',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "1.11.0",
+  "version": "1.11.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.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": "695cfe01116839842668233a14fa858ad4ae0bac"
 }

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).