js-draw 0.13.0 → 0.13.1

package/dist/src/toolbar/makeColorInput.js

@@ -9,7 +9,7 @@ export const makeColorInput = (editor, onColorChange) => {
     colorInput.classList.add('coloris_input');
     colorInputContainer.classList.add('color-input-container');
     colorInputContainer.appendChild(colorInput);
-    addPipetteTool(editor, colorInputContainer, (color) => {
+    const pipetteController = addPipetteTool(editor, colorInputContainer, (color) => {
         colorInput.value = color.toHexString();
         onInputEnd();
         // Update the color preview, if it exists (may be managed by Coloris).
@@ -41,6 +41,7 @@ export const makeColorInput = (editor, onColorChange) => {
             kind: EditorEventType.ColorPickerToggled,
             open: true,
         });
+        pipetteController.cancel();
     });
     colorInput.addEventListener('close', () => {
         editor.notifier.dispatch(EditorEventType.ColorPickerToggled, {
@@ -102,5 +103,11 @@ const addPipetteTool = (editor, container, onColorChange) => {
         }
     };
     container.appendChild(pipetteButton);
+    return {
+        // Cancel a pipette color selection if one is in progress.
+        cancel: () => {
+            endColorSelectMode();
+        },
+    };
 };
 export default makeColorInput;

package/dist/src/tools/PanZoom.d.ts

@@ -21,11 +21,12 @@ export default class PanZoom extends BaseTool {
     private editor;
     private mode;
     private transform;
-    private lastAngle;
     private lastDist;
     private lastScreenCenter;
     private lastTimestamp;
     private lastPointerDownTimestamp;
+    private initialTouchAngle;
+    private initialViewportRotation;
     private inertialScroller;
     private velocity;
     constructor(editor: Editor, mode: PanZoomMode, description: string);
@@ -34,6 +35,7 @@ export default class PanZoom extends BaseTool {
     onPointerDown({ allPointers: pointers, current: currentPointer }: PointerEvt): boolean;
     private updateVelocity;
     private getCenterDelta;
+    private toSnappedRotationDelta;
     private handleTwoFingerMove;
     private handleOneFingerMove;
     onPointerMove({ allPointers }: PointerEvt): void;

package/dist/src/tools/PanZoom.js

@@ -78,6 +78,8 @@ export default class PanZoom extends BaseTool {
         this.mode = mode;
         this.transform = null;
         this.lastPointerDownTimestamp = 0;
+        this.initialTouchAngle = 0;
+        this.initialViewportRotation = 0;
         this.inertialScroller = null;
         this.velocity = null;
     }
@@ -104,9 +106,10 @@ 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.lastAngle = angle;
             this.lastDist = dist;
             this.lastScreenCenter = screenCenter;
+            this.initialTouchAngle = angle;
+            this.initialViewportRotation = this.editor.viewport.getRotationAngle();
             handlingGesture = true;
         }
         else if (pointers.length === 1 && ((this.mode & PanZoomMode.OneFingerTouchGestures && allAreTouch)
@@ -149,20 +152,42 @@ export default class PanZoom extends BaseTool {
         const delta = this.editor.viewport.screenToCanvasTransform.transformVec3(screenCenter.minus(this.lastScreenCenter));
         return delta;
     }
+    //  Snaps `angle` to common desired rotations. For example, if `touchAngle` corresponds
+    // to a viewport rotation of 90.1 degrees, this function returns a rotation delta that,
+    // when applied to the viewport, rotates the viewport to 90.0 degrees.
+    //
+    // Returns a snapped rotation delta that, when applied to the viewport, rotates the viewport,
+    // from its position on the last touchDown event, by `touchAngle - initialTouchAngle`.
+    toSnappedRotationDelta(touchAngle) {
+        const deltaAngle = touchAngle - this.initialTouchAngle;
+        let fullRotation = deltaAngle + this.initialViewportRotation;
+        const snapToMultipleOf = Math.PI / 2;
+        const roundedFullRotation = Math.round(fullRotation / snapToMultipleOf) * snapToMultipleOf;
+        // The maximum angle for which we snap the given angle to a multiple of
+        // `snapToMultipleOf`.
+        const maxSnapAngle = 0.07;
+        // Snap the rotation
+        if (Math.abs(fullRotation - roundedFullRotation) < maxSnapAngle) {
+            fullRotation = roundedFullRotation;
+        }
+        return fullRotation - this.editor.viewport.getRotationAngle();
+    }
     handleTwoFingerMove(allPointers) {
         const { screenCenter, canvasCenter, angle, dist } = this.computePinchData(allPointers[0], allPointers[1]);
         const delta = this.getCenterDelta(screenCenter);
-        let rotation = angle - this.lastAngle;
+        let deltaRotation;
         if (this.isRotationLocked()) {
-            rotation = 0;
+            deltaRotation = 0;
+        }
+        else {
+            deltaRotation = this.toSnappedRotationDelta(angle);
         }
         this.updateVelocity(screenCenter);
         const transformUpdate = Mat33.translation(delta)
             .rightMul(Mat33.scaling2D(dist / this.lastDist, canvasCenter))
-            .rightMul(Mat33.zRotation(rotation, canvasCenter));
+            .rightMul(Mat33.zRotation(deltaRotation, canvasCenter));
         this.lastScreenCenter = screenCenter;
         this.lastDist = dist;
-        this.lastAngle = angle;
         this.transform = Viewport.transformBy(this.transform.transform.rightMul(transformUpdate));
     }
     handleOneFingerMove(pointer) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.13.0",
+	"version": "0.13.1",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"main": "./dist/src/lib.d.ts",
 	"types": "./dist/src/lib.js",

package/src/toolbar/makeColorInput.ts

@@ -19,7 +19,7 @@ export const makeColorInput = (
 	colorInputContainer.classList.add('color-input-container');
 
 	colorInputContainer.appendChild(colorInput);
-	addPipetteTool(editor, colorInputContainer, (color: Color4) => {
+	const pipetteController = addPipetteTool(editor, colorInputContainer, (color: Color4) => {
 		colorInput.value = color.toHexString();
 		onInputEnd();
 
@@ -58,6 +58,7 @@ export const makeColorInput = (
 			kind: EditorEventType.ColorPickerToggled,
 			open: true,
 		});
+		pipetteController.cancel();
 	});
 	colorInput.addEventListener('close', () => {
 		editor.notifier.dispatch(EditorEventType.ColorPickerToggled, {
@@ -132,6 +133,13 @@ const addPipetteTool = (editor: Editor, container: HTMLElement, onColorChange: O
 	};
 
 	container.appendChild(pipetteButton);
+
+	return {
+		// Cancel a pipette color selection if one is in progress.
+		cancel: () => {
+			endColorSelectMode();
+		},
+	};
 };
 
 export default makeColorInput;

package/src/tools/PanZoom.ts

@@ -90,11 +90,12 @@ class InertialScroller {
 export default class PanZoom extends BaseTool {
 	private transform: ViewportTransform|null = null;
 
-	private lastAngle: number;
 	private lastDist: number;
 	private lastScreenCenter: Point2;
 	private lastTimestamp: number;
 	private lastPointerDownTimestamp: number = 0;
+	private initialTouchAngle: number = 0;
+	private initialViewportRotation: number = 0;
 
 	private inertialScroller: InertialScroller|null = null;
 	private velocity: Vec2|null = null;
@@ -132,9 +133,11 @@ export default class PanZoom extends BaseTool {
 
 		if (allAreTouch && pointers.length === 2 && this.mode & PanZoomMode.TwoFingerTouchGestures) {
 			const { screenCenter, angle, dist } = this.computePinchData(pointers[0], pointers[1]);
-			this.lastAngle = angle;
 			this.lastDist = dist;
 			this.lastScreenCenter = screenCenter;
+			this.initialTouchAngle = angle;
+			this.initialViewportRotation = this.editor.viewport.getRotationAngle();
+
 			handlingGesture = true;
 		} else if (pointers.length === 1 && (
 			(this.mode & PanZoomMode.OneFingerTouchGestures && allAreTouch)
@@ -188,24 +191,51 @@ export default class PanZoom extends BaseTool {
 		return delta;
 	}
 
+	//  Snaps `angle` to common desired rotations. For example, if `touchAngle` corresponds
+	// to a viewport rotation of 90.1 degrees, this function returns a rotation delta that,
+	// when applied to the viewport, rotates the viewport to 90.0 degrees.
+	//
+	// Returns a snapped rotation delta that, when applied to the viewport, rotates the viewport,
+	// from its position on the last touchDown event, by `touchAngle - initialTouchAngle`.
+	private toSnappedRotationDelta(touchAngle: number) {
+		const deltaAngle = touchAngle - this.initialTouchAngle;
+		let fullRotation = deltaAngle + this.initialViewportRotation;
+
+		const snapToMultipleOf = Math.PI / 2;
+		const roundedFullRotation = Math.round(fullRotation / snapToMultipleOf) * snapToMultipleOf;
+
+		// The maximum angle for which we snap the given angle to a multiple of
+		// `snapToMultipleOf`.
+		const maxSnapAngle = 0.07;
+
+		// Snap the rotation
+		if (Math.abs(fullRotation - roundedFullRotation) < maxSnapAngle) {
+			fullRotation = roundedFullRotation;
+		}
+
+		return fullRotation - this.editor.viewport.getRotationAngle();
+	}
+
 	private handleTwoFingerMove(allPointers: Pointer[]) {
 		const { screenCenter, canvasCenter, angle, dist } = this.computePinchData(allPointers[0], allPointers[1]);
 
 		const delta = this.getCenterDelta(screenCenter);
-		let rotation = angle - this.lastAngle;
+		let deltaRotation;
 
 		if (this.isRotationLocked()) {
-			rotation = 0;
+			deltaRotation = 0;
+		} else {
+			deltaRotation = this.toSnappedRotationDelta(angle); 
 		}
 
+
 		this.updateVelocity(screenCenter);
 
 		const transformUpdate = Mat33.translation(delta)
 			.rightMul(Mat33.scaling2D(dist / this.lastDist, canvasCenter))
-			.rightMul(Mat33.zRotation(rotation, canvasCenter));
+			.rightMul(Mat33.zRotation(deltaRotation, canvasCenter));
 		this.lastScreenCenter = screenCenter;
 		this.lastDist = dist;
-		this.lastAngle = angle;
 		this.transform = Viewport.transformBy(
 			this.transform!.transform.rightMul(transformUpdate)
 		);