js-draw 0.13.0 → 0.14.0

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

package/src/tools/SelectionTool/Selection.ts

@@ -121,6 +121,21 @@ export default class Selection {
 		return this.originalRegion.transformedBoundingBox(scaleAndTranslateMat);
 	}
 
+	/**
+	 * Computes and returns the bounding box of the selection without
+	 * any additional padding. Computes directly from the elements that are selected.
+	 * @internal
+	 */
+	public computeTightBoundingBox() {
+		const bbox = this.selectedElems.reduce((
+			accumulator: Rect2|null, elem: AbstractComponent
+		): Rect2 => {
+			return (accumulator ?? elem.getBBox()).union(elem.getBBox());
+		}, null);
+
+		return bbox ?? Rect2.empty;
+	}
+
 	public get regionRotation(): number {
 		return this.transform.transformVec3(Vec2.unitX).angle();
 	}
@@ -328,11 +343,7 @@ export default class Selection {
 	// Recompute this' region from the selected elements.
 	// Returns false if the selection is empty.
 	public recomputeRegion(): boolean {
-		const newRegion = this.selectedElems.reduce((
-			accumulator: Rect2|null, elem: AbstractComponent
-		): Rect2 => {
-			return (accumulator ?? elem.getBBox()).union(elem.getBBox());
-		}, null);
+		const newRegion = this.computeTightBoundingBox();
 
 		if (!newRegion) {
 			this.cancelSelection();

package/src/tools/SelectionTool/SelectionTool.ts

@@ -62,12 +62,13 @@ export default class SelectionTool extends BaseTool {
 	private snapSelectionToGrid() {
 		if (!this.selectionBox) throw new Error('No selection to snap!');
 
-		const topLeftOfBBox = this.selectionBox.region.topLeft;
-		const snapDistance =
-				this.editor.viewport.snapToGrid(topLeftOfBBox).minus(topLeftOfBBox);
+		// Snap the top left corner of what we have selected.
+		const topLeftOfBBox = this.selectionBox.computeTightBoundingBox().topLeft;
+		const snappedTopLeft = this.editor.viewport.snapToGrid(topLeftOfBBox);
+		const snapDelta = snappedTopLeft.minus(topLeftOfBBox);
 		
 		const oldTransform = this.selectionBox.getTransform();
-		this.selectionBox.setTransform(oldTransform.rightMul(Mat33.translation(snapDistance)));
+		this.selectionBox.setTransform(oldTransform.rightMul(Mat33.translation(snapDelta)));
 		this.selectionBox.finalizeTransform();
 	}
 

package/src/tools/SelectionTool/TransformMode.ts

@@ -62,7 +62,7 @@ export class ResizeTransformer {
 		//    long decimal representations => large file sizes.
 		scale = scale.map(component => Viewport.roundScaleRatio(component, 2));
 
-		if (scale.x > 0 && scale.y > 0) {
+		if (scale.x !== 0 && scale.y !== 0) {
 			const origin = this.editor.viewport.roundPoint(this.selection.preTransformRegion.topLeft);
 			this.selection.setTransform(Mat33.scaling2D(scale, origin));
 		}