Feat: Centered resize (elastic#909)

* Feat: brush up centeredResizeManipulation

(cherry picked from commit de3490f)

* Feat: activate centeredResizeManipulation on Alt key

(cherry picked from commit 845b81f)

public/lib/aeroelastic/gestures.js

@@ -61,6 +61,21 @@ const metaHeld = selectReduce((prev, next) => {
   }
 }, false)(keyboardEvent);
 
+// DRY these up
+const optionHeld = selectReduce((prev, next) => {
+  // first is for web standard, other is for React key code detection
+  if (!next || !next.code || (next.code.slice(0, 3) !== 'Alt' && next.code !== 'KeyALT'))
+    return prev;
+  switch (next && next.event) {
+    case 'keyDown':
+      return true;
+    case 'keyUp':
+      return false;
+    default:
+      return prev;
+  }
+}, false)(keyboardEvent);
+
 const cursorPosition = selectReduce((previous, position) => position || previous, { x: 0, y: 0 })(
   rawCursorPosition
 );
@@ -165,5 +180,6 @@ module.exports = {
   mouseButton,
   mouseDowned,
   mouseIsDown,
+  optionHeld,
   pressedKeys,
 };

public/lib/aeroelastic/layout.js

@@ -9,6 +9,7 @@ const {
   mouseButton,
   mouseDowned,
   mouseIsDown,
+  optionHeld,
   pressedKeys,
 } = require('./gestures');
 
@@ -334,8 +335,7 @@ const resizeMultiplierVertical = { top: -1, center: 0, bottom: 1 };
 const xNames = { '-1': 'left', '0': 'center', '1': 'right' };
 const yNames = { '-1': 'top', '0': 'center', '1': 'bottom' };
 
-/* upcoming functionality
-const centeredResizeManipulation = ({ gesture, shape, directShape, cursorPosition: { x, y } }) => {
+const centeredResizeManipulation = ({ gesture, shape, directShape }) => {
   const transform = gesture.transform;
   // scaling such that the center remains in place (ie. the other side of the shape can grow/shrink)
   if (!shape || !directShape) return { transforms: [], shapes: [] };
@@ -352,15 +352,18 @@ const centeredResizeManipulation = ({ gesture, shape, directShape, cursorPositio
     resizeMultiplierVertical[directShape.verticalPosition],
     0,
   ];
+  const orientedVector = matrix2d.componentProduct(vector, orientationMask);
+
+  // correct for possible negative size
+  // const newAB = matrix2d.mvMultiply(sizeMatrix, [shape.a, shape.b, 1])
+  orientedVector[0] += -Math.min(shape.a, 0); // correct for negative size
+  orientedVector[1] += -Math.min(shape.b, 0); // correct for negative size
   return {
     transforms: [],
-    sizes: [
-      gesture.sizes || matrix2d.translate(...matrix2d.componentProduct(vector, orientationMask)),
-    ],
+    sizes: [gesture.sizes || matrix2d.translate(...orientedVector)],
     shapes: [shape.id],
   };
 };
-*/
 
 const asymmetricResizeManipulation = ({ gesture, shape, directShape }) => {
   const transform = gesture.transform;
@@ -449,7 +452,7 @@ const rotationAnnotationManipulation = (
   return tuples.map(rotationManipulation);
 };
 
-const resizeAnnotationManipulation = (transformGestures, directShapes, allShapes) => {
+const resizeAnnotationManipulation = (transformGestures, directShapes, allShapes, manipulator) => {
   const shapeIds = directShapes.map(
     shape =>
       shape.type === 'annotation' && shape.subtype === config.resizeHandleName && shape.parent
@@ -460,11 +463,15 @@ const resizeAnnotationManipulation = (transformGestures, directShapes, allShapes
       transformGestures.map(gesture => ({ gesture, shape, directShape: directShapes[i] }))
     )
   );
-  return tuples.map(asymmetricResizeManipulation);
+  return tuples.map(manipulator);
 };
 
+const resizeManipulator = select(
+  toggle => (toggle ? centeredResizeManipulation : asymmetricResizeManipulation)
+)(optionHeld);
+
 const transformIntents = select(
-  (transformGestures, directShapes, shapes, cursorPosition, alterSnapGesture) => [
+  (transformGestures, directShapes, shapes, cursorPosition, alterSnapGesture, manipulator) => [
     ...directShapeTranslateManipulation(transformGestures.map(g => g.transform), directShapes),
     ...rotationAnnotationManipulation(
       transformGestures.map(g => g.transform),
@@ -473,9 +480,9 @@ const transformIntents = select(
       cursorPosition,
       alterSnapGesture
     ),
-    ...resizeAnnotationManipulation(transformGestures, directShapes, shapes),
+    ...resizeAnnotationManipulation(transformGestures, directShapes, shapes, manipulator),
   ]
-)(transformGestures, selectedShapes, shapes, cursorPosition, alterSnapGesture);
+)(transformGestures, selectedShapes, shapes, cursorPosition, alterSnapGesture, resizeManipulator);
 
 const fromScreen = currentTransform => transform => {
   const isTranslate = transform[12] !== 0 || transform[13] !== 0;