Show grab cursor when space is pressed on scene editor

newIDE/app/src/InstancesEditor/CanvasCursor.js

@@ -0,0 +1,34 @@
+// @flow
+
+type Props = {|
+  canvas: HTMLDivElement,
+  shouldMoveView: () => boolean,
+|};
+
+/**
+ * Change the cursor displayed when hovering the canvas.
+ *
+ * Some elements on the canvas (for example, resize buttons)
+ * can also set their own cursor - this class is only for the canvas.
+ */
+export default class CanvasCursor {
+  canvas: HTMLDivElement;
+  shouldMoveView: () => boolean;
+
+  constructor({ canvas, shouldMoveView }: Props) {
+    this.canvas = canvas;
+    this.shouldMoveView = shouldMoveView;
+  }
+
+  render() {
+    if (this.shouldMoveView()) {
+      this.canvas.style.cursor = 'grab';
+      if (this.canvas.style.cursor !== 'grab') {
+        this.canvas.style.cursor = '-webkit-grab';
+      }
+      return;
+    }
+
+    this.canvas.style.cursor = 'default';
+  }
+}

newIDE/app/src/InstancesEditor/index.js

@@ -19,6 +19,7 @@ import * as PIXI from 'pixi.js';
 import FpsLimiter from './FpsLimiter';
 import { startPIXITicker, stopPIXITicker } from '../Utils/PIXITicker';
 import StatusBar from './StatusBar';
+import CanvasCursor from './CanvasCursor';
 
 const styles = {
   canvasArea: { flex: 1, position: 'absolute', overflow: 'hidden' },
@@ -174,6 +175,11 @@ export default class InstancesEditorContainer extends Component {
       onDrop: this._onDrop,
     });
 
+    this.canvasCursor = new CanvasCursor({
+      canvas: this.canvasArea,
+      shouldMoveView: () => this.keyboardShortcuts.shouldMoveView(),
+    });
+
     this._mountEditorComponents(this.props);
     this._renderScene();
   }
@@ -608,6 +614,7 @@ export default class InstancesEditorContainer extends Component {
     if (this.fpsLimiter.shouldUpdate()) {
       this.backgroundColor.render();
       this.viewPosition.render();
+      this.canvasCursor.render();
       this.grid.render();
       this.instancesRenderer.render();
       this.highlightedInstance.render();