Make tileset visualizer work in Tilemap object editor

4ian · Sep 23, 2024 · 2de5844 · 2de5844
1 parent 59a1185
commit 2de5844
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 25 deletions.
diff --git a/newIDE/app/src/InstancesEditor/TileSetVisualizer.js b/newIDE/app/src/InstancesEditor/TileSetVisualizer.js
@@ -349,7 +349,9 @@ const TileSetVisualizer = ({
     [displayTileIdTooltip]
   );
 
-  const longTouchProps = useLongTouch(handleLongTouch, {doNotCancelOnScroll: true});
+  const longTouchProps = useLongTouch(handleLongTouch, {
+    doNotCancelOnScroll: true,
+  });
 
   React.useEffect(
     () => {
@@ -501,11 +503,7 @@ const TileSetVisualizer = ({
             tileMapTileSelection && tileMapTileSelection.kind === 'multiple'
               ? { ...tileMapTileSelection }
               : { kind: 'multiple', coordinates: [] };
-          if (
-            (startX === x && startY === y) ||
-            // Do not allow rectangular select on touch device as it conflicts with basic scrolling gestures.
-            isTouchDevice
-          ) {
+          if (startX === x && startY === y) {
             if (
               tileMapTileSelection &&
               tileMapTileSelection.kind === 'multiple'
@@ -537,22 +535,35 @@ const TileSetVisualizer = ({
           }
           onSelectTileMapTile(newSelection);
         } else if (allowRectangleSelection) {
-          const topLeftCorner = {
-            x: Math.min(startX, x),
-            y: Math.min(startY, y),
-          };
-          const bottomRightCorner = {
-            x: Math.max(startX, x),
-            y: Math.max(startY, y),
-          };
-          // TODO: Add possibility to unselect tile.
-          const newSelection = {
-            kind: 'rectangle',
-            coordinates: [topLeftCorner, bottomRightCorner],
-            flipHorizontally: shouldFlipHorizontally,
-            flipVertically: shouldFlipVertically,
-          };
-          onSelectTileMapTile(newSelection);
+          const shouldRemoveSelection =
+            tileMapTileSelection &&
+            tileMapTileSelection.kind === 'rectangle' &&
+            startX === x &&
+            startY === y &&
+            x <= tileMapTileSelection.coordinates[1].x &&
+            x >= tileMapTileSelection.coordinates[0].x &&
+            y <= tileMapTileSelection.coordinates[1].y &&
+            y >= tileMapTileSelection.coordinates[0].y;
+          if (shouldRemoveSelection) {
+            // Remove selection when user selects a single tile in the current tile selection.
+            onSelectTileMapTile(null);
+          } else {
+            const topLeftCorner = {
+              x: Math.min(startX, x),
+              y: Math.min(startY, y),
+            };
+            const bottomRightCorner = {
+              x: Math.max(startX, x),
+              y: Math.max(startY, y),
+            };
+            const newSelection = {
+              kind: 'rectangle',
+              coordinates: [topLeftCorner, bottomRightCorner],
+              flipHorizontally: shouldFlipHorizontally,
+              flipVertically: shouldFlipVertically,
+            };
+            onSelectTileMapTile(newSelection);
+          }
         }
       } finally {
         setClickStartCoordinates(null);

diff --git a/newIDE/app/src/ObjectEditor/Editors/SimpleTileMapEditor.js b/newIDE/app/src/ObjectEditor/Editors/SimpleTileMapEditor.js
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import type { EditorProps } from './EditorProps.flow';
-import ScrollView from '../../UI/ScrollView';
+import ScrollView, { type ScrollViewInterface } from '../../UI/ScrollView';
 import { ColumnStackLayout } from '../../UI/Layout';
 import SemiControlledTextField from '../../UI/SemiControlledTextField';
 import { Trans } from '@lingui/macro';
@@ -27,6 +27,7 @@ const SimpleTileMapEditor = ({
   resourceManagementProps,
   renderObjectNameField,
 }: EditorProps) => {
+  const scrollViewRef = React.useRef<?ScrollViewInterface>(null);
   const forceUpdate = useForceUpdate();
   const objectProperties = objectConfiguration.getProperties();
   const tileSize = parseFloat(objectProperties.get('tileSize').getValue());
@@ -128,6 +129,12 @@ const SimpleTileMapEditor = ({
     [columnCount, objectConfiguration, forceUpdate, onObjectUpdated]
   );
 
+  const onScrollY = React.useCallback(deltaY => {
+    if (scrollViewRef.current) {
+      scrollViewRef.current.scrollBy(deltaY);
+    }
+  }, []);
+
   const onChangeAtlasImage = React.useCallback(
     () => {
       if (onObjectUpdated) onObjectUpdated();
@@ -168,7 +175,7 @@ const SimpleTileMapEditor = ({
   );
 
   return (
-    <ScrollView>
+    <ScrollView ref={scrollViewRef}>
       <ColumnStackLayout noMargin>
         {!!renderObjectNameField && renderObjectNameField()}
         {/* TODO: Should this be a Select field with all possible values given the atlas image size? */}
@@ -211,6 +218,7 @@ const SimpleTileMapEditor = ({
               allowRectangleSelection={false}
               onAtlasImageLoaded={onAtlasImageLoaded}
               interactive={true}
+              onScrollY={onScrollY}
             />
           </>
         )}

diff --git a/newIDE/app/src/Utils/UseLongTouch.js b/newIDE/app/src/Utils/UseLongTouch.js
@@ -62,7 +62,7 @@ export const useLongTouch = (
     [context]
   );
 
-  const cancelOnScroll = !options || !options.doNotCancelOnScroll
+  const cancelOnScroll = !options || !options.doNotCancelOnScroll;
 
   React.useEffect(
     () => {