[WIP] Improve multiselection and add proportional resize & move following axis to newIDE

newIDE/app/src/InstancesEditor/InstancesEditorContainer.js

@@ -215,26 +215,14 @@ export default class InstancesEditorContainer extends Component {
 
   _onEndSelectionRectangle = () => {
     const instancesSelected = this.selectionRectangle.endSelectionRectangle();
-    instancesSelected.forEach(
-      instance => this.props.instancesSelection.selectInstance(instance)
+    this.props.instancesSelection.selectInstances(
+      instancesSelected,
+      this.keyboardShortcuts.shouldMultiSelect()
     );
     this.props.onInstancesSelected(instancesSelected);
   };
 
-  _onInstanceClicked = instance => {
-    if (!this.keyboardShortcuts.shouldMultiSelect())
-      this.props.instancesSelection.clearSelection();
-    this.props.instancesSelection.selectInstance(
-      instance,
-      !this.keyboardShortcuts.shouldMultiSelect()
-    );
-
-    if (this.props.onInstancesSelected) {
-      this.props.onInstancesSelected(
-        this.props.instancesSelection.getSelectedInstances()
-      );
-    }
-  };
+  _onInstanceClicked = instance => {};
 
   _onOverInstance = instance => {
     this.highlightedInstance.setInstance(instance);
@@ -247,6 +235,17 @@ export default class InstancesEditorContainer extends Component {
         const instance = selectedInstances[i];
         this.props.initialInstances.insertInitialInstance(instance);
       }
+    } else {
+      this.props.instancesSelection.selectInstance(
+        instance,
+        this.keyboardShortcuts.shouldMultiSelect()
+      );
+
+      if (this.props.onInstancesSelected) {
+        this.props.onInstancesSelected(
+          this.props.instancesSelection.getSelectedInstances()
+        );
+      }
     }
   };
 
@@ -264,7 +263,12 @@ export default class InstancesEditorContainer extends Component {
     }
 
     const selectedInstances = this.props.instancesSelection.getSelectedInstances();
-    this.instancesMover.moveBy(selectedInstances, sceneDeltaX, sceneDeltaY);
+    this.instancesMover.moveBy(
+      selectedInstances,
+      sceneDeltaX,
+      sceneDeltaY,
+      this.keyboardShortcuts.shouldFollowAxis()
+    );
   };
 
   _onMoveInstanceEnd = () => {
@@ -287,7 +291,12 @@ export default class InstancesEditorContainer extends Component {
     const sceneDeltaY = deltaY / this.viewPosition.getZoomFactor();
 
     const selectedInstances = this.props.instancesSelection.getSelectedInstances();
-    this.instancesResizer.resizeBy(selectedInstances, sceneDeltaX, sceneDeltaY);
+    this.instancesResizer.resizeBy(
+      selectedInstances,
+      sceneDeltaX,
+      sceneDeltaY,
+      this.keyboardShortcuts.shouldResizeProportionally()
+    );
   };
 
   _onResizeEnd = () => {

newIDE/app/src/InstancesEditor/InstancesMover.js

@@ -23,7 +23,21 @@ export default class InstancesResizer {
     return Math.round(y / this.options.gridHeight) * this.options.gridHeight;
   }
 
-  moveBy(instances, deltaX, deltaY) {
+  _getMoveDeltaX(followAxis) {
+    if (followAxis && Math.abs(this.totalDeltaX) < Math.abs(this.totalDeltaY))
+      return 0;
+
+    return this.totalDeltaX;
+  }
+
+  _getMoveDeltaY(followAxis) {
+    if (followAxis && Math.abs(this.totalDeltaY) < Math.abs(this.totalDeltaX))
+      return 0;
+
+    return this.totalDeltaY;
+  }
+
+  moveBy(instances, deltaX, deltaY, followAxis) {
     this.totalDeltaX += deltaX;
     this.totalDeltaY += deltaY;
 
@@ -39,10 +53,14 @@ export default class InstancesResizer {
       }
 
       selectedInstance.setX(
-        this._roundXPosition(initialPosition.x + this.totalDeltaX)
+        this._roundXPosition(
+          initialPosition.x + this._getMoveDeltaX(followAxis)
+        )
       );
       selectedInstance.setY(
-        this._roundYPosition(initialPosition.y + this.totalDeltaY)
+        this._roundYPosition(
+          initialPosition.y + this._getMoveDeltaY(followAxis)
+        )
       );
     }
   }

newIDE/app/src/InstancesEditor/InstancesResizer.js

@@ -24,7 +24,21 @@ export default class InstancesResizer {
       this.options.gridHeight;
   }
 
-  resizeBy(instances, deltaX, deltaY) {
+  _getSizeDeltaX(proportional, initialSize) {
+    if (proportional && Math.abs(this.totalDeltaX) < Math.abs(this.totalDeltaY))
+      return initialSize.width / initialSize.height * this.totalDeltaY;
+
+    return this.totalDeltaX;
+  }
+
+  _getSizeDeltaY(proportional, initialSize) {
+    if (proportional && Math.abs(this.totalDeltaY) < Math.abs(this.totalDeltaX))
+      return initialSize.height / initialSize.width * this.totalDeltaX;
+
+    return this.totalDeltaY;
+  }
+
+  resizeBy(instances, deltaX, deltaY, proportional) {
     this.totalDeltaX += deltaX;
     this.totalDeltaY += deltaY;
 
@@ -50,10 +64,10 @@ export default class InstancesResizer {
 
       selectedInstance.setHasCustomSize(true);
       selectedInstance.setCustomWidth(
-        this._roundWidth(initialSize.width + this.totalDeltaX)
+        this._roundWidth(initialSize.width + this._getSizeDeltaX(proportional, initialSize))
       );
       selectedInstance.setCustomHeight(
-        this._roundHeight(initialSize.height + this.totalDeltaY)
+        this._roundHeight(initialSize.height + this._getSizeDeltaY(proportional, initialSize))
       );
     }
   }

newIDE/app/src/InstancesEditor/KeyboardShortcuts.js

@@ -24,6 +24,14 @@ export default class KeyboardShortcuts {
     return this.shiftPressed;
   }
 
+  shouldFollowAxis() {
+    return this.shiftPressed;
+  }
+
+  shouldResizeProportionally() {
+    return this.shiftPressed;
+  }
+
   shouldScrollHorizontally() {
     return this.altPressed;
   }

newIDE/app/src/SceneEditor/InstancesFullEditor/InstancesSelection.js

@@ -21,10 +21,21 @@ export default class InstancesSelection {
     this.selection.length = 0;
   }
 
-  selectInstance(instance) {
-    if (!this.isInstanceSelected(instance)) {
-      this.selection.push(instance);
+  selectInstance(instance, multiselect) {
+    if (this.isInstanceSelected(instance)) {
+      if (multiselect) this.unselectInstance(instance);
+
+      return;
     }
+
+    if (!multiselect) this.clearSelection();
+    this.selection.push(instance);
+  }
+
+  selectInstances(instances, multiselect) {
+    if (!multiselect) this.clearSelection();
+
+    instances.forEach(instance => this.selectInstance(instance, true));
   }
 
   unselectInstance(instance) {