Add "No Grid snap" keyboard Shortcut (#640)

When alt is pressed, objects can be moved without snapping to the grid.

newIDE/app/src/InstancesEditor/InstancesMover.js

@@ -1,4 +1,4 @@
-export default class InstancesResizer {
+export default class InstancesMover {
   constructor({ instanceMeasurer, options }) {
     this.instanceMeasurer = instanceMeasurer;
     this.options = options;
@@ -11,8 +11,13 @@ export default class InstancesResizer {
     this.options = options;
   }
 
-  _roundXPosition(x) {
-    if (!this.options.snap || !this.options.grid || this.options.gridWidth <= 0)
+  _roundXPosition(x, noGridSnap) {
+    if (
+      !this.options.snap ||
+      !this.options.grid ||
+      this.options.gridWidth <= 0 ||
+      noGridSnap
+    )
       return Math.round(x);
 
     return (
@@ -22,11 +27,12 @@ export default class InstancesResizer {
     );
   }
 
-  _roundYPosition(y) {
+  _roundYPosition(y, noGridSnap) {
     if (
       !this.options.snap ||
       !this.options.grid ||
-      this.options.gridHeight <= 0
+      this.options.gridHeight <= 0 ||
+      noGridSnap
     )
       return Math.round(y);
 
@@ -51,7 +57,7 @@ export default class InstancesResizer {
     return this.totalDeltaY;
   }
 
-  moveBy(instances, deltaX, deltaY, followAxis) {
+  moveBy(instances, deltaX, deltaY, followAxis, noGridSnap) {
     this.totalDeltaX += deltaX;
     this.totalDeltaY += deltaY;
 
@@ -68,12 +74,14 @@ export default class InstancesResizer {
 
       selectedInstance.setX(
         this._roundXPosition(
-          initialPosition.x + this._getMoveDeltaX(followAxis)
+          initialPosition.x + this._getMoveDeltaX(followAxis),
+          noGridSnap
         )
       );
       selectedInstance.setY(
         this._roundYPosition(
-          initialPosition.y + this._getMoveDeltaY(followAxis)
+          initialPosition.y + this._getMoveDeltaY(followAxis),
+          noGridSnap
         )
       );
     }

newIDE/app/src/InstancesEditor/index.js

@@ -301,7 +301,8 @@ export default class InstancesEditorContainer extends Component {
    * @param {string} objectName The name of the object for which instance must be re-rendered.
    */
   resetRenderersFor(objectName) {
-    if (this.instancesRenderer) this.instancesRenderer.resetRenderersFor(objectName);
+    if (this.instancesRenderer)
+      this.instancesRenderer.resetRenderersFor(objectName);
   }
 
   zoomBy(value) {
@@ -414,7 +415,8 @@ export default class InstancesEditorContainer extends Component {
       selectedInstances,
       sceneDeltaX,
       sceneDeltaY,
-      this.keyboardShortcuts.shouldFollowAxis()
+      this.keyboardShortcuts.shouldFollowAxis(),
+      this.keyboardShortcuts.shouldNotSnapToGrid()
     );
   };
 
@@ -545,8 +547,12 @@ export default class InstancesEditorContainer extends Component {
       <SimpleDropTarget>
         <div
           ref={canvasArea => (this.canvasArea = canvasArea)}
-          style={{ flex: 1, position: 'absolute', overflow: 'hidden' }}
-        />
+          style={{
+            flex: 1,
+            position: 'absolute',
+            overflow: 'hidden',
+          }}
+        />{' '}
       </SimpleDropTarget>
     );
   }

newIDE/app/src/UI/KeyboardShortcuts/index.js

@@ -65,6 +65,10 @@ export default class KeyboardShortcuts {
     return this.shiftPressed;
   }
 
+  shouldNotSnapToGrid() {
+    return this.altPressed;
+  }
+
   shouldResizeProportionally() {
     return this.shiftPressed;
   }
@@ -175,9 +179,11 @@ export default class KeyboardShortcuts {
     if (!this.isFocused) return;
 
     if (!isMacLike()) {
-      if (evt.button === MID_MOUSE_BUTTON){
-        this.mouseMidButtonPressed = true
-      } else {this.mouseMidButtonPressed = false}
+      if (evt.button === MID_MOUSE_BUTTON) {
+        this.mouseMidButtonPressed = true;
+      } else {
+        this.mouseMidButtonPressed = false;
+      }
     }
   };