js-draw 1.15.0 → 1.16.1

package/dist/mjs/tools/PanZoom.mjs

@@ -71,9 +71,11 @@ export default class PanZoom extends BaseTool {
         this.initialRotationSnapAngle = 0.22; // radians
         this.afterRotationStartSnapAngle = 0.07; // radians
         this.pinchZoomStartThreshold = 1.08; // scale factor
+        // Last timestamp at which a pointerdown event was received
         this.lastPointerDownTimestamp = 0;
         this.initialTouchAngle = 0;
         this.initialViewportRotation = 0;
+        this.initialViewportScale = 0;
         // Set to `true` only when scaling has started (if two fingers are down and have moved
         // far enough).
         this.isScaling = false;
@@ -113,11 +115,12 @@ export default class PanZoom extends BaseTool {
         const isRightClick = this.allPointersAreOfType(pointers, PointerDevice.RightButtonMouse);
         if (allAreTouch && pointers.length === 2 && this.mode & PanZoomMode.TwoFingerTouchGestures) {
             const { screenCenter, angle, dist } = this.computePinchData(pointers[0], pointers[1]);
-            this.lastDist = dist;
-            this.startDist = dist;
+            this.lastTouchDist = dist;
+            this.startTouchDist = dist;
             this.lastScreenCenter = screenCenter;
             this.initialTouchAngle = angle;
             this.initialViewportRotation = this.editor.viewport.getRotationAngle();
+            this.initialViewportScale = this.editor.viewport.getScaleFactor();
             this.isScaling = false;
             // We're initially rotated if `initialViewportRotation` isn't near a multiple of pi/2.
             // In other words, if sin(2 initialViewportRotation) is near zero.
@@ -193,6 +196,22 @@ export default class PanZoom extends BaseTool {
         }
         return fullRotation - this.editor.viewport.getRotationAngle();
     }
+    /**
+     * Given a scale update, `scaleFactor`, returns a new scale factor snapped
+     * to a power of two (if within some tolerance of that scale).
+     */
+    toSnappedScaleFactor(touchDist) {
+        // scaleFactor is applied to the current transformation of the viewport.
+        const newScale = this.initialViewportScale * touchDist / this.startTouchDist;
+        const currentScale = this.editor.viewport.getScaleFactor();
+        const logNewScale = Math.log(newScale) / Math.log(10);
+        const roundedLogNewScale = Math.round(logNewScale);
+        const logTolerance = 0.04;
+        if (Math.abs(roundedLogNewScale - logNewScale) < logTolerance) {
+            return Math.pow(10, roundedLogNewScale) / currentScale;
+        }
+        return touchDist / this.lastTouchDist;
+    }
     handleTwoFingerMove(allPointers) {
         const { screenCenter, canvasCenter, angle, dist } = this.computePinchData(allPointers[0], allPointers[1]);
         const delta = this.getCenterDelta(screenCenter);
@@ -209,25 +228,25 @@ export default class PanZoom extends BaseTool {
             this.isRotating = true;
         }
         this.updateVelocity(screenCenter);
-        let scaleFactor = 1;
-        if (this.isScaling) {
-            scaleFactor = dist / this.lastDist;
-        }
-        else {
-            const initialScaleFactor = dist / this.startDist;
+        if (!this.isScaling) {
+            const initialScaleFactor = dist / this.startTouchDist;
             // Only start scaling if scaling done so far exceeds some threshold.
             const upperBound = this.pinchZoomStartThreshold;
             const lowerBound = 1 / this.pinchZoomStartThreshold;
             if (initialScaleFactor > upperBound || initialScaleFactor < lowerBound) {
-                scaleFactor = initialScaleFactor;
                 this.isScaling = true;
             }
         }
+        let scaleFactor = 1;
+        if (this.isScaling) {
+            scaleFactor = this.toSnappedScaleFactor(dist);
+            // Don't set lastDist until we start scaling --
+            this.lastTouchDist = dist;
+        }
         const transformUpdate = Mat33.translation(delta)
             .rightMul(Mat33.scaling2D(scaleFactor, canvasCenter))
             .rightMul(Mat33.zRotation(deltaRotation, canvasCenter));
         this.lastScreenCenter = screenCenter;
-        this.lastDist = dist;
         this.transform = Viewport.transformBy(this.transform.transform.rightMul(transformUpdate));
         return transformUpdate;
     }

package/dist/mjs/tools/PasteHandler.mjs

@@ -62,6 +62,10 @@ export default class PasteHandler extends BaseTool {
         });
         const defaultTextStyle = { size: 12, fontFamily: 'sans', renderingStyle: { fill: Color4.red } };
         const pastedTextStyle = textTools[0]?.getTextStyle() ?? defaultTextStyle;
+        // Don't paste text that would be invisible.
+        if (text.trim() === '') {
+            return;
+        }
         const lines = text.split('\n');
         await this.addComponentsFromPaste([TextComponent.fromLines(lines, Mat33.identity, pastedTextStyle)]);
     }

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

@@ -80,6 +80,7 @@ class Selection {
         for (const handle of this.handles) {
             handle.addTo(this.backgroundElem);
         }
+        this.updateUI();
     }
     // @internal Intended for unit tests
     getBackgroundElem() {
@@ -285,6 +286,13 @@ class Selection {
         else {
             this.innerContainer.classList.remove(perpendicularClassName);
         }
+        // Hide handles when empty
+        if (screenRegion.width === 0 && screenRegion.height === 0) {
+            this.innerContainer.classList.add('-empty');
+        }
+        else {
+            this.innerContainer.classList.remove('-empty');
+        }
         for (const handle of this.handles) {
             handle.updatePosition();
         }
@@ -533,7 +541,11 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand {
         this.transformCommands = this.selectedElemIds.map(id => {
             const elem = editor.image.lookupElement(id);
             if (!elem) {
-                throw new Error(`Unable to find element with ID, ${id}.`);
+                // There may be valid reasons for an element lookup to fail:
+                // For example, if the element was deleted remotely and the remote deletion
+                // hasn't been undone.
+                console.warn(`Unable to find element with ID, ${id}.`);
+                return null;
             }
             let originalZIndex = elem.getZIndex();
             let targetZIndex = elem.getZIndex() + this.deltaZIndex;
@@ -544,7 +556,9 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand {
                 originalZIndex = elem.getZIndex() - this.deltaZIndex;
             }
             return elem.setZIndexAndTransformBy(this.fullTransform, targetZIndex, originalZIndex);
-        });
+        }).filter(// Remove all null commands
+        // Remove all null commands
+        command => command !== null);
     }
     async apply(editor) {
         this.resolveToElems(editor, false);

package/dist/mjs/version.mjs

@@ -1,3 +1,3 @@
 export default {
-    number: '1.15.0',
+    number: '1.16.1',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "1.15.0",
+  "version": "1.16.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,7 +64,7 @@
     "postpack": "ts-node tools/copyREADME.ts revert"
   },
   "dependencies": {
-    "@js-draw/math": "^1.11.1",
+    "@js-draw/math": "^1.16.0",
     "@melloware/coloris": "0.22.0"
   },
   "devDependencies": {
@@ -86,5 +86,5 @@
     "freehand",
     "svg"
   ],
-  "gitHead": "d723c028faa43c7661df54606064f6237a8a767b"
+  "gitHead": "7a1d4ea8bae0a2549494fce672b9d43ce97a68a8"
 }

package/src/Editor.scss

@@ -118,6 +118,10 @@
 	max-width: inherit;
 	min-height: 0px;
 	max-height: inherit;
+
+	user-select: none;
+	-webkit-user-select: none;
+	-webkit-user-drag: none;
 }
 
 .imageEditorContainer .loadingMessage {
@@ -137,7 +141,10 @@
 	width: 0;
 	height: 0;
 	overflow: hidden;
+
 	pointer-events: none;
+	user-select: none;
+	-webkit-user-select: none;
 }
 
 .imageEditorContainer .textRendererOutputContainer {
@@ -146,6 +153,9 @@
 	width: 0.001px;
 	height: 0.001px;
 	overflow: hidden;
+
+	-webkit-user-select: none;
+	user-select: none;
 }
 
 .imageEditorContainer .textRendererOutputContainer:focus-within {

package/src/toolbar/EdgeToolbar.scss

@@ -335,6 +335,7 @@
 
 	touch-action: none;
 	user-select: none;
+	-webkit-user-select: none;
 
 	background-color: var(--background-color-2);
 	color: var(--foreground-color-2);
@@ -356,6 +357,7 @@
 
 	input, textarea {
 		user-select: auto;
+		-webkit-user-select: auto;
 	}
 
 	.toolbar-toolContainer {

package/src/tools/SelectionTool/SelectionTool.scss

@@ -117,6 +117,10 @@
 			// handles.
 			pointer-events: all;
 		}
+
+		&.-empty {
+			opacity: 0;
+		}
 	}
 }
 

package/src/tools/SoundUITool.scss

@@ -2,7 +2,10 @@
 .js-draw-sound-ui-toggle {
 	width: 0px;
 	height: 0px;
-	overflow: hidden;    
+	overflow: hidden;  
+
+	user-select: none;
+	-webkit-user-select: none;  
 }
 
 .js-draw-sound-ui-toggle button {