diff --git a/newIDE/app/src/InstancesEditor/TileSetVisualizer.js b/newIDE/app/src/InstancesEditor/TileSetVisualizer.js index 758837c7acc1..fd44972b61e6 100644 --- 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 index cddd2c974669..51a8665bddeb 100644 --- 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(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 ( - + {!!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 index 6334c2beeee4..6224baea0631 100644 --- 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( () => {