Add possibility to paint tilemap with a rectangle selection from the …

…tileset (#6977)

newIDE/app/src/InstancesEditor/CompactInstancePropertiesEditor/index.js

@@ -15,7 +15,7 @@ import IconButton from '../../UI/IconButton';
 import { Line, Column, Spacer, marginsSize } from '../../UI/Grid';
 import Text from '../../UI/Text';
 import { type UnsavedChanges } from '../../MainFrame/UnsavedChangesContext';
-import ScrollView from '../../UI/ScrollView';
+import ScrollView, { type ScrollViewInterface } from '../../UI/ScrollView';
 import EventsRootVariablesFinder from '../../Utils/EventsRootVariablesFinder';
 import VariablesList, {
   type HistoryHandler,
@@ -95,7 +95,7 @@ const CompactInstancePropertiesEditor = ({
   onSelectTileMapTile,
 }: Props) => {
   const forceUpdate = useForceUpdate();
-
+  const scrollViewRef = React.useRef<?ScrollViewInterface>(null);
   const instance = instances[0];
   /**
    * TODO: multiple instances support for variables list. Expected behavior should be:
@@ -105,6 +105,12 @@ const CompactInstancePropertiesEditor = ({
    */
   const shouldDisplayVariablesList = instances.length === 1;
 
+  const onScrollY = React.useCallback(deltaY => {
+    if (scrollViewRef.current) {
+      scrollViewRef.current.scrollBy(deltaY);
+    }
+  }, []);
+
   const { object, instanceSchema } = React.useMemo<{|
     object?: gdObject,
     instanceSchema?: Schema,
@@ -220,6 +226,7 @@ const CompactInstancePropertiesEditor = ({
       scope="scene-editor-instance-properties"
     >
       <ScrollView
+        ref={scrollViewRef}
         autoHideScrollbar
         style={styles.scrollView}
         key={instances
@@ -253,6 +260,8 @@ const CompactInstancePropertiesEditor = ({
                   onSelectTileMapTile={onSelectTileMapTile}
                   showPaintingToolbar
                   allowMultipleSelection={false}
+                  onScrollY={onScrollY}
+                  allowRectangleSelection
                   interactive
                 />
               </Column>