js-draw 1.6.1 → 1.7.0

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

@@ -15,7 +15,7 @@ export class DragTransformer {
         this.selection.setTransform(Mat33.translation(delta));
     }
     onDragEnd() {
-        this.selection.finalizeTransform();
+        return this.selection.finalizeTransform();
     }
 }
 export class ResizeTransformer {
@@ -28,6 +28,32 @@ export class ResizeTransformer {
         this.selection.setTransform(Mat33.identity);
         this.mode = mode;
         this.dragStartPoint = startPoint;
+        this.computeOriginAndScaleRate();
+    }
+    computeOriginAndScaleRate() {
+        // Store the index of the furthest corner from startPoint. We'll use that
+        // to determine where the transform considers (0, 0) (where we scale from).
+        const selectionRect = this.selection.preTransformRegion;
+        const selectionBoxCorners = selectionRect.corners;
+        let largestDistSquared = 0;
+        for (let i = 0; i < selectionBoxCorners.length; i++) {
+            const currentCorner = selectionBoxCorners[i];
+            const distSquaredToCurrent = this.dragStartPoint.minus(currentCorner).magnitudeSquared();
+            if (distSquaredToCurrent > largestDistSquared) {
+                largestDistSquared = distSquaredToCurrent;
+                this.transformOrigin = currentCorner;
+            }
+        }
+        // Determine whether moving the mouse to the right increases or decreases the width.
+        let widthScaleRate = 1;
+        let heightScaleRate = 1;
+        if (this.transformOrigin.x > selectionRect.center.x) {
+            widthScaleRate = -1;
+        }
+        if (this.transformOrigin.y > selectionRect.center.y) {
+            heightScaleRate = -1;
+        }
+        this.scaleRate = Vec2.of(widthScaleRate, heightScaleRate);
     }
     onDragUpdate(canvasPos) {
         const canvasDelta = canvasPos.minus(this.dragStartPoint);
@@ -35,11 +61,11 @@ export class ResizeTransformer {
         const origHeight = this.selection.preTransformRegion.height;
         let scale = Vec2.of(1, 1);
         if (this.mode === ResizeMode.HorizontalOnly) {
-            const newWidth = origWidth + canvasDelta.x;
+            const newWidth = origWidth + canvasDelta.x * this.scaleRate.x;
             scale = Vec2.of(newWidth / origWidth, scale.y);
         }
         if (this.mode === ResizeMode.VerticalOnly) {
-            const newHeight = origHeight + canvasDelta.y;
+            const newHeight = origHeight + canvasDelta.y * this.scaleRate.y;
             scale = Vec2.of(scale.x, newHeight / origHeight);
         }
         if (this.mode === ResizeMode.Both) {
@@ -51,12 +77,12 @@ export class ResizeTransformer {
         //    long decimal representations => large file sizes.
         scale = scale.map(component => Viewport.roundScaleRatio(component, 2));
         if (scale.x !== 0 && scale.y !== 0) {
-            const origin = this.editor.viewport.roundPoint(this.selection.preTransformRegion.topLeft);
+            const origin = this.editor.viewport.roundPoint(this.transformOrigin);
             this.selection.setTransform(Mat33.scaling2D(scale, origin));
         }
     }
     onDragEnd() {
-        this.selection.finalizeTransform();
+        return this.selection.finalizeTransform();
     }
 }
 export class RotateTransformer {
@@ -64,6 +90,8 @@ export class RotateTransformer {
         this.editor = editor;
         this.selection = selection;
         this.startAngle = 0;
+        this.targetRotation = 0;
+        this.maximumDistFromStart = 0;
     }
     getAngle(canvasPoint) {
         const selectionCenter = this.selection.preTransformRegion.center;
@@ -76,14 +104,16 @@ export class RotateTransformer {
         return Math.round(angle * roundingFactor) / roundingFactor;
     }
     onDragStart(startPoint) {
+        this.startPoint = startPoint;
         this.selection.setTransform(Mat33.identity);
         this.startAngle = this.getAngle(startPoint);
+        this.maximumDistFromStart = 0;
+        this.targetRotation = 0;
     }
-    onDragUpdate(canvasPos) {
-        const targetRotation = this.roundAngle(this.getAngle(canvasPos) - this.startAngle);
+    setRotationTo(angle) {
         // Transform in canvas space
         const canvasSelCenter = this.editor.viewport.roundPoint(this.selection.preTransformRegion.center);
-        const unrounded = Mat33.zRotation(targetRotation);
+        const unrounded = Mat33.zRotation(angle);
         const roundedRotationTransform = unrounded.mapEntries(entry => Viewport.roundScaleRatio(entry));
         const fullRoundedTransform = Mat33
             .translation(canvasSelCenter)
@@ -91,7 +121,20 @@ export class RotateTransformer {
             .rightMul(Mat33.translation(canvasSelCenter.times(-1)));
         this.selection.setTransform(fullRoundedTransform);
     }
+    onDragUpdate(canvasPos) {
+        this.targetRotation = this.roundAngle(this.getAngle(canvasPos) - this.startAngle);
+        this.setRotationTo(this.targetRotation);
+        const distFromStart = canvasPos.minus(this.startPoint).magnitude();
+        if (distFromStart > this.maximumDistFromStart) {
+            this.maximumDistFromStart = distFromStart;
+        }
+    }
     onDragEnd() {
-        this.selection.finalizeTransform();
+        // Anything less than this is considered a click
+        const clickThreshold = 15;
+        if (this.maximumDistFromStart < clickThreshold && this.targetRotation === 0) {
+            this.setRotationTo(-Math.PI / 2);
+        }
+        return this.selection.finalizeTransform();
     }
 }

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

@@ -0,0 +1,16 @@
+interface Callbacks {
+    filter(event: KeyboardEvent): boolean;
+    handleKeyDown(event: KeyboardEvent): void;
+    handleKeyUp(event: KeyboardEvent): void;
+}
+/**
+ * Calls `callbacks` when different keys are known to be pressed.
+ *
+ * `filter` can be used to ignore events.
+ *
+ * This includes keys that didn't trigger a keydown or keyup event, but did cause
+ * shiftKey/altKey/metaKey/etc. properties to change on other events (e.g. mousemove
+ * events). Artifical events are created for these changes and sent to `callbacks`.
+ */
+declare const listenForKeyboardEventsFrom: (elem: HTMLElement, callbacks: Callbacks) => void;
+export default listenForKeyboardEventsFrom;

package/dist/mjs/util/listenForKeyboardEventsFrom.mjs

@@ -0,0 +1,140 @@
+/**
+ * Calls `callbacks` when different keys are known to be pressed.
+ *
+ * `filter` can be used to ignore events.
+ *
+ * This includes keys that didn't trigger a keydown or keyup event, but did cause
+ * shiftKey/altKey/metaKey/etc. properties to change on other events (e.g. mousemove
+ * events). Artifical events are created for these changes and sent to `callbacks`.
+ */
+const listenForKeyboardEventsFrom = (elem, callbacks) => {
+    // Track which keys are down so we can release them when the element
+    // loses focus. This is particularly important for keys like Control
+    // that can trigger shortcuts that cause the editor to lose focus before
+    // the keyup event is triggered.
+    let keysDown = [];
+    // Return whether two objects that are similar to keyboard events represent the
+    // same key.
+    const keyEventsMatch = (a, b) => {
+        return a.key === b.key && a.code === b.code;
+    };
+    const isKeyDown = (keyEvent) => {
+        return keysDown.some(other => keyEventsMatch(other, keyEvent));
+    };
+    const keyEventToRecord = (event) => {
+        return {
+            code: event.code,
+            key: event.key,
+            ctrlKey: event.ctrlKey,
+            altKey: event.altKey,
+            shiftKey: event.shiftKey,
+            metaKey: event.metaKey,
+        };
+    };
+    const handleKeyEvent = (htmlEvent) => {
+        if (htmlEvent.type === 'keydown') {
+            // Add event to the list of keys that are down (so long as it
+            // isn't a duplicate).
+            if (!isKeyDown(htmlEvent)) {
+                // Destructructring, then pushing seems to cause
+                // data loss. Copy properties individually:
+                keysDown.push(keyEventToRecord(htmlEvent));
+            }
+            if (!callbacks.filter(htmlEvent)) {
+                return;
+            }
+            callbacks.handleKeyDown(htmlEvent);
+        }
+        else { // keyup
+            console.assert(htmlEvent.type === 'keyup');
+            // Remove the key from keysDown -- it's no longer down.
+            keysDown = keysDown.filter(event => {
+                const matches = keyEventsMatch(event, htmlEvent);
+                return !matches;
+            });
+            if (!callbacks.filter(htmlEvent)) {
+                return;
+            }
+            callbacks.handleKeyUp(htmlEvent);
+        }
+    };
+    elem.addEventListener('keydown', htmlEvent => {
+        handleKeyEvent(htmlEvent);
+    });
+    elem.addEventListener('keyup', htmlEvent => {
+        handleKeyEvent(htmlEvent);
+    });
+    elem.addEventListener('focusout', (focusEvent) => {
+        const stillHasFocus = focusEvent.relatedTarget && elem.contains(focusEvent.relatedTarget);
+        if (!stillHasFocus) {
+            for (const event of keysDown) {
+                callbacks.handleKeyUp(new KeyboardEvent('keyup', {
+                    ...event,
+                }));
+            }
+            keysDown = [];
+        }
+    });
+    const fireArtificalEventsBasedOn = (htmlEvent) => {
+        let wasShiftDown = false;
+        let wasCtrlDown = false;
+        let wasAltDown = false;
+        let wasMetaDown = false;
+        for (const otherEvent of keysDown) {
+            const code = otherEvent.code;
+            wasShiftDown ||= !!code.match(/^Shift(Left|Right)$/);
+            wasCtrlDown ||= !!code.match(/^Control(Left|Right)$/);
+            wasAltDown ||= !!code.match(/^Alt(Left|Right)$/);
+            wasMetaDown ||= !!code.match(/^Meta(Left|Right)$/);
+        }
+        const eventName = (isDown) => {
+            if (isDown) {
+                return 'keydown';
+            }
+            else {
+                return 'keyup';
+            }
+        };
+        const eventInitDefaults = {
+            shiftKey: htmlEvent.shiftKey,
+            altKey: htmlEvent.altKey,
+            metaKey: htmlEvent.metaKey,
+            ctrlKey: htmlEvent.ctrlKey,
+        };
+        if (htmlEvent.shiftKey !== wasShiftDown) {
+            handleKeyEvent(new KeyboardEvent(eventName(htmlEvent.shiftKey), {
+                ...eventInitDefaults,
+                key: 'Shift',
+                code: 'ShiftLeft',
+            }));
+        }
+        if (htmlEvent.altKey !== wasAltDown) {
+            handleKeyEvent(new KeyboardEvent(eventName(htmlEvent.altKey), {
+                ...eventInitDefaults,
+                key: 'Alt',
+                code: 'AltLeft',
+            }));
+        }
+        if (htmlEvent.ctrlKey !== wasCtrlDown) {
+            handleKeyEvent(new KeyboardEvent(eventName(htmlEvent.ctrlKey), {
+                ...eventInitDefaults,
+                key: 'Control',
+                code: 'ControlLeft',
+            }));
+        }
+        if (htmlEvent.metaKey !== wasMetaDown) {
+            handleKeyEvent(new KeyboardEvent(eventName(htmlEvent.metaKey), {
+                ...eventInitDefaults,
+                key: 'Meta',
+                code: 'MetaLeft',
+            }));
+        }
+    };
+    elem.addEventListener('mousedown', (htmlEvent) => {
+        fireArtificalEventsBasedOn(htmlEvent);
+    });
+    elem.addEventListener('mousemove', (htmlEvent) => {
+        fireArtificalEventsBasedOn(htmlEvent);
+    });
+};
+export default listenForKeyboardEventsFrom;

package/dist/mjs/version.mjs

@@ -1,3 +1,3 @@
 export default {
-    number: '1.6.1',
+    number: '1.7.0',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "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.6.1",
+    "@js-draw/math": "^1.7.0",
     "@melloware/coloris": "0.21.0"
   },
   "devDependencies": {
-    "@js-draw/build-tool": "^1.6.1",
+    "@js-draw/build-tool": "^1.7.0",
     "@types/jest": "29.5.5",
     "@types/jsdom": "21.1.3"
   },
@@ -86,5 +86,5 @@
     "freehand",
     "svg"
   ],
-  "gitHead": "00f1a0ab34de40bec100d5c18657f947895bfaed"
+  "gitHead": "e7d8a68e6a5ae3063de9c1f033ed8f08c567b393"
 }

package/src/tools/SelectionTool/SelectionTool.scss

@@ -3,27 +3,51 @@
 	background-color: var(--selection-background-color);
 	opacity: 0.5;
 	overflow: visible;
-	position: absolute;
 }
 
 .selection-tool-handle {
-	border: 1px solid var(--foreground-color-1);
-	background: var(--background-color-1);
 	position: absolute;
-
 	box-sizing: border-box;
-	padding: 3px;
 
-	& .icon {
+	// Center content
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	// Maximum size of the visible region (make the handle slightly larger
+	// so that the resize cursor is visible everywhere in the actual selection
+	// box).
+	--max-size: 17px;
+
+	.selection-tool-content {
+		border: 1px solid var(--foreground-color-1);
+		background: var(--background-color-1);
+		box-sizing: border-box;
+
+		max-width: var(--max-size);
+		max-height: var(--max-size);
 		width: 100%;
 		height: 100%;
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		padding: 3px;
+		.icon {
+			width: 100%;
+			height: 100%;
+		}
 	}
 
-	&.selection-tool-circle {
+	&.selection-tool-circle .selection-tool-content {
 		border-radius: 100%;
 	}
 
 	&.selection-tool-rotate {
+		// Shrink less if a rotation handle
+		--max-size: 28px;
+
 		cursor: grab;
 	}
 }
@@ -57,8 +81,37 @@
 }
 
 .overlay.handleOverlay {
-	height: 0;
-	overflow: visible;
+	touch-action: none;
+
+	// When expanding a selection with shift+click&drag, multiple selection boxes
+	// can be present in the same handleOverlay. As such, so that other overlayed
+	// selection boxes are in the correct place, the outer container needs to have
+	// zero height.
+	//
+	// This is in addition to the overlay container, which needs zero height to prevent
+	// other overlay containers from being affected by its size.
+	&, .selection-tool-selection-outer-container {
+		height: 0;
+		overflow: visible;
+	}
+
+	.selection-tool-selection-inner-container {
+		width: var(--editor-current-display-width-px);
+		height: var(--editor-current-display-height-px);
+		overflow: hidden;
+
+		// Disable pointer events: If the parent (or the container) has
+		// captured pointers and the container is removed, this prevents
+		// us from receiving the following events (e.g. in Firefox).
+		pointer-events: none;
+
+		& > * {
+			// We *do* want pointer events for handles and the background. This
+			// allows the mouse cursor to change shape when hovering over resize
+			// handles.
+			pointer-events: all;
+		}
+	}
 }
 
 @keyframes selection-duplicated-animation {