Fix proportional resize on the scene editor on touchscreens

newIDE/app/src/InstancesEditor/SelectedInstances.js

@@ -8,7 +8,7 @@ import InstancesSelection from './InstancesSelection';
 type Props = {|
   instancesSelection: InstancesSelection,
   instanceMeasurer: Object, // To be typed in InstancesRenderer
-  onResize: (number, number) => void,
+  onResize: (deltaX: number | null, deltaY: number | null) => void,
   onResizeEnd: () => void,
   onRotate: (number, number) => void,
   onRotateEnd: () => void,
@@ -19,10 +19,10 @@ type Props = {|
 const getButtonSizes = (screenType: ScreenType) => {
   if (screenType === 'touch') {
     return {
-      buttonSize: 16,
-      smallButtonSize: 14,
+      buttonSize: 14,
+      smallButtonSize: 12,
       buttonPadding: 5,
-      hitAreaPadding: 20,
+      hitAreaPadding: 12,
     };
   }
 
@@ -43,7 +43,7 @@ const CIRCLE_BUTTON_SHAPE = 1;
 export default class SelectedInstances {
   instancesSelection: InstancesSelection;
   instanceMeasurer: Object; // To be typed in InstancesRenderer
-  onResize: (number, number) => void;
+  onResize: (deltaX: number | null, deltaY: number | null) => void;
   onResizeEnd: () => void;
   onRotate: (number, number) => void;
   onRotateEnd: () => void;
@@ -93,7 +93,7 @@ export default class SelectedInstances {
     this._makeButton(
       this.rightResizeButton,
       event => {
-        this.onResize(event.deltaX, 0);
+        this.onResize(event.deltaX, null);
       },
       () => {
         this.onResizeEnd();
@@ -103,7 +103,7 @@ export default class SelectedInstances {
     this._makeButton(
       this.bottomResizeButton,
       event => {
-        this.onResize(0, event.deltaY);
+        this.onResize(null, event.deltaY);
       },
       () => {
         this.onResizeEnd();

newIDE/app/src/InstancesEditor/index.js

@@ -636,14 +636,15 @@ export default class InstancesEditor extends Component<Props> {
     this.props.onInstancesMoved(selectedInstances);
   };
 
-  _onResize = (deltaX: number, deltaY: number) => {
-    const sceneDeltaX = deltaX / this.getZoomFactor();
-    const sceneDeltaY = deltaY / this.getZoomFactor();
+  _onResize = (deltaX: number | null, deltaY: number | null) => {
+    const sceneDeltaX = deltaX !== null ? deltaX / this.getZoomFactor() : 0;
+    const sceneDeltaY = deltaY !== null ? deltaY / this.getZoomFactor() : 0;
 
     const selectedInstances = this.props.instancesSelection.getSelectedInstances();
+    const forceProportional =
+      this.props.screenType === 'touch' && deltaX !== null && deltaY !== null;
     const proportional =
-      this.keyboardShortcuts.shouldResizeProportionally() ||
-      this.props.screenType === 'touch';
+      forceProportional || this.keyboardShortcuts.shouldResizeProportionally();
     this.instancesResizer.resizeBy(
       selectedInstances,
       sceneDeltaX,