draw: constrain object move with Shift

- Added src/layer/vector/Path.Constraint.ts

Issue #7933

Signed-off-by: Hubert Figuière <[email protected]>
Change-Id: Ie39c15a8552276bc5919ffbbd5dd859695048b9c

browser/Makefile.am

@@ -285,6 +285,7 @@ COOL_JS_LST =\
 	src/layer/vector/Path.Transform.SVG.VML.js \
 	src/layer/vector/Canvas.js \
 	src/layer/vector/Path.Transform.Canvas.js \
+	src/layer/vector/Path.Constraint.ts \
 	src/layer/FormFieldButtonLayer.js \
 	src/dom/DomEvent.js \
 	src/dom/Draggable.js \

browser/src/geometry/Point.ts

@@ -120,6 +120,24 @@ export class Point {
 		return Math.sqrt(x * x + y * y);
 	}
 
+	/**
+	* Return the angle of the vector / point in rad.
+	*/
+	public angleOf(): number {
+		var angle;
+		if (this.x != 0) {
+			angle = Math.atan(this.y / Math.abs(this.x));
+		} else if (this.y > 0) {
+			angle = Math.PI / 2;
+		} else {
+			angle = - Math.PI / 2;
+		}
+		if (this.x < 0) {
+			angle = Math.PI - angle;
+		}
+		return angle;
+	}
+
 	public equals(point: Point): boolean {
 		point = Point.toPoint(point);
 

browser/src/layer/tile/CanvasTileLayer.js

@@ -4146,6 +4146,9 @@ L.CanvasTileLayer = L.Layer.extend({
 				}
 			}
 			else {
+				if (e.target.dragging.shiftConstraint) {
+					deltaPos = L.Constraint.shiftConstraint(deltaPos);
+				}
 				var newPos = new L.Point(
 					// Choose the logical left of the shape.
 					this._graphicSelectionTwips.min.x + deltaPos.x,

browser/src/layer/vector/Path.Constraint.ts

@@ -0,0 +1,44 @@
+declare var L: any;
+
+namespace cool {
+
+export class Constraint {
+	/**
+	* Near means within +/- PI / 8 since we do diagonals
+	*/
+	public static angleNear (angle: number, near: number): boolean {
+		return Math.abs(near - angle) < (Math.PI / 8);
+	}
+
+	/**
+	* Will recalculate delta based on a shift constraint
+	*/
+	public static shiftConstraint (delta: Point): Point {
+		var angle = delta.angleOf();
+
+		if (Constraint.angleNear(angle, 0) || Constraint.angleNear(angle, Math.PI)) {
+			// Snap back the y to 0
+			return new Point(delta.x, 0);
+		} else if (Constraint.angleNear(angle, Math.PI / 2) ||
+			Constraint.angleNear(angle, -Math.PI / 2)) {
+
+			// Snap back the x to 0
+			return new Point(0, delta.y);
+		} else {
+			var deltaD = (Math.abs(delta.x) + Math.abs(delta.y)) / 2;
+			if (Constraint.angleNear(angle, Math.PI / 4)) {
+				return new Point(deltaD, deltaD);
+			} else if (Constraint.angleNear(angle, -Math.PI / 4)) {
+				return new Point(deltaD, -deltaD);
+			} else if (Constraint.angleNear(angle, Math.PI * 0.75)) {
+				return new Point(-deltaD, deltaD);
+			} else {
+				return new Point(-deltaD, -deltaD);
+			}
+		}
+	}
+}
+
+}
+
+L.Constraint = cool.Constraint;

browser/src/layer/vector/Path.Drag.js

@@ -55,6 +55,12 @@ L.Handler.PathDrag = L.Handler.extend(/** @lends  L.Path.Drag.prototype */ {
 		*/
 		this._dragStartPoint = null;
 
+		/**
+		* Whether the drag is constrained (Shift key pressed)
+		* @type {Boolean}
+		*/
+		this.shiftConstraint = false;
+
 		/**
 		* @type {Boolean}
 		*/
@@ -177,6 +183,8 @@ L.Handler.PathDrag = L.Handler.extend(/** @lends  L.Path.Drag.prototype */ {
 		if (isNaN(dx) || isNaN(dy))
 			return;
 
+		this.shiftConstraint = evt.shiftKey;
+
 		if (this.constraint) {
 			if (this.constraint.dragMethod === 'PieSegmentDragging') {
 				var initialOffset = this.constraint.initialOffset;
@@ -198,6 +206,30 @@ L.Handler.PathDrag = L.Handler.extend(/** @lends  L.Path.Drag.prototype */ {
 				x = this._startPoint.x + dx;
 				y = this._startPoint.y + dy;
 			}
+		} else if (this.shiftConstraint) {
+			var ds = containerPoint.subtract(this._dragStartPoint);
+
+			var delta = L.Constraint.shiftConstraint(ds);
+
+			var angle = ds.angleOf();
+			if (L.Constraint.angleNear(angle, 0) || L.Constraint.angleNear(angle, Math.PI)) {
+				// Snap back the y to 0
+				delta.x = dx;
+				delta.y = -this._matrix[5];
+				y = this._startPoint.y;
+			} else if (L.Constraint.angleNear(angle, Math.PI / 2) || L.Constraint.angleNear(angle, -Math.PI / 2)) {
+				// Snap back the x to 0
+				delta.x = -this._matrix[4];
+				delta.y = dy;
+				x = this._startPoint.x;
+			} else {
+				delta.x -= this._matrix[4];
+				delta.y -= this._matrix[5];
+				x = this._startPoint.x + delta.x;
+				y = this._startPoint.y + delta.y;
+			}
+			dx = delta.x;
+			dy = delta.y;
 		}
 
 		// Send events only if point was moved