Feat: better rotation snapping (elastic#849)

w33ble · Jul 27, 2018 · ce5e1cb · ce5e1cb
1 parent 7dad37a
commit ce5e1cb
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/public/lib/aeroelastic/config.js b/public/lib/aeroelastic/config.js
@@ -16,8 +16,7 @@ const rotateAnnotationOffset = 12;
 const rotationHandleName = 'rotationHandle';
 const rotationHandleSize = 14;
 const resizeHandleName = 'resizeHandle';
-const rotateSnapInDeg = 5;
-const rotateSnapInRad = rotateSnapInDeg / 180 * Math.PI;
+const rotateSnapInPixels = 10;
 const shortcuts = false;
 const singleSelect = true;
 const snapConstraint = false;
@@ -35,7 +34,7 @@ module.exports = {
   resizeConnectorName,
   resizeHandleName,
   rotateAnnotationOffset,
-  rotateSnapInRad,
+  rotateSnapInPixels,
   rotationHandleName,
   rotationHandleSize,
   shortcuts,

diff --git a/public/lib/aeroelastic/layout.js b/public/lib/aeroelastic/layout.js
@@ -276,8 +276,13 @@ const rotationManipulation = ({ shape, directShape, cursorPosition: { x, y } })
   const oldAngle = Math.atan2(centerPosition[1] - vector[1], centerPosition[0] - vector[0]);
   const newAngle = Math.atan2(centerPosition[1] - y, centerPosition[0] - x);
   const closest45deg = Math.round(newAngle / (Math.PI / 4)) * Math.PI / 4;
-  const absDiff = Math.abs(closest45deg - newAngle);
-  const newSnappedAngle = absDiff < config.rotateSnapInRad ? closest45deg : newAngle;
+  const radius = Math.sqrt(Math.pow(centerPosition[0] - x, 2) + Math.pow(centerPosition[1] - y, 2));
+  const closest34degPosition = [Math.cos(closest45deg) * radius, Math.sin(closest45deg) * radius];
+  const pixelDifference = Math.sqrt(
+    Math.pow(closest34degPosition[0] - (centerPosition[0] - x), 2) +
+      Math.pow(closest34degPosition[1] - (centerPosition[1] - y), 2)
+  );
+  const newSnappedAngle = pixelDifference < config.rotateSnapInPixels ? closest45deg : newAngle;
   const result = matrix.rotateZ(oldAngle - newSnappedAngle);
   return { transforms: [result], shapes: [shape.id] };
 };