Rework spritesList for an animation so mobile can scroll

newIDE/app/flow-typed/npm/react-dnd_v2.x.x.js

@@ -207,6 +207,7 @@ declare module "react-dnd" {
 
   declare type DragDropMonitor = {
     isDragging(): boolean,
+    getClientOffset(): ClientOffset | null,
     ...
   };
 

newIDE/app/package.json

@@ -49,10 +49,12 @@
   "dependencies": {
     "@blueprintjs/core": "file:src/Utils/BlueprintJsPlaceholder",
     "@blueprintjs/icons": "file:src/Utils/BlueprintJsPlaceholder",
+    "@esotericsoftware/spine-pixi-v7": "~4.2.116",
     "@lingui/react": "github:4ian/lingui-react#master",
     "@material-ui/core": "4.11.0",
     "@material-ui/icons": "4.9.1",
     "@material-ui/lab": "4.0.0-alpha.56",
+    "@material-ui/styles": "4.11.5",
     "@supercharge/promise-pool": "^1.6.0",
     "axios": "^0.18.1",
     "blueimp-md5": "^2.10.0",
@@ -67,7 +69,6 @@
     "lodash": "4.17.4",
     "node-require-function": "^1.2.0",
     "path-browserify": "^1.0.1",
-    "@esotericsoftware/spine-pixi-v7": "~4.2.116",
     "pixi.js-legacy": "7.4.2",
     "posthog-js": "1.275.2",
     "prop-types": "^15.5.10",
@@ -85,7 +86,6 @@
     "react-monaco-editor": "^0.18.0",
     "react-mosaic-component": "5.3.0",
     "react-share": "^4.4.0",
-    "react-sortable-hoc": "1.5.0",
     "react-test-renderer": "18.2.0",
     "react-virtualized": "9.21.1",
     "react-window": "1.8.9",
@@ -99,8 +99,7 @@
     "url-search-params": "^1.0.2",
     "wavesurfer.js": "7.12.6",
     "xxhashjs": "^0.2.2",
-    "yaml": "^2.8.2",
-    "@material-ui/styles": "4.11.5"
+    "yaml": "^2.8.2"
   },
   "overrides": {
     "@esotericsoftware/spine-pixi-v7": {

newIDE/app/src/MainFrame/EditorContainers/HomePage/TeamSection/TeamMemberRow.js

@@ -10,7 +10,7 @@ import ListItemText from '@material-ui/core/ListItemText';
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 import { LineStackLayout } from '../../../../UI/Layout';
 import Text from '../../../../UI/Text';
-import DragHandle from '../../../../UI/DragHandle';
+import { DragHandleIcon } from '../../../../UI/DragHandle';
 import FlatButton from '../../../../UI/FlatButton';
 import { makeDragSourceAndDropTarget } from '../../../../UI/DragAndDrop/DragSourceAndDropTarget';
 import { useResponsiveWindowSize } from '../../../../UI/Responsive/ResponsiveWindowMeasurer';
@@ -94,7 +94,7 @@ const TeamMemberRow = ({
               <LineStackLayout noMargin alignItems="center">
                 {connectDragSource(
                   <div>
-                    <DragHandle />
+                    <DragHandleIcon />
                   </div>
                 )}
                 {connectDragPreview(

newIDE/app/src/MainFrame/MainFrame.css

@@ -116,11 +116,3 @@ a[href^="ftp://"] {
     -webkit-user-drag: auto;
     user-drag: auto; /* Technically not supported in Electron yet */
 }
-
-/* Used for react-sortable-hoc SortableContainer, to make sure the
- * dragged element is visible (and not hidden behind a drawer or dialog)
- */
-.sortable-helper {
-  font-family: -apple-system, BlinkMacSystemFont, sans-serif; /* Font from the theme*/
-  z-index: 9999;
-}

newIDE/app/src/ObjectEditor/Editors/SpriteEditor/AnimationList.js

@@ -19,6 +19,7 @@ import { EmptyPlaceholder } from '../../../UI/EmptyPlaceholder';
 import { useResponsiveWindowSize } from '../../../UI/Responsive/ResponsiveWindowMeasurer';
 import Trash from '../../../UI/CustomSvgIcons/Trash';
 import { makeDragSourceAndDropTarget } from '../../../UI/DragAndDrop/DragSourceAndDropTarget';
+import { useAutoScrollDuringDrag } from '../../../UI/DragAndDrop/UseAutoScrollDuringDrag';
 import { DragHandleIcon } from '../../../UI/DragHandle';
 import DropIndicator from '../../../UI/SortableVirtualizedItemList/DropIndicator';
 import GDevelopThemeContext from '../../../UI/Theme/GDevelopThemeContext';
@@ -95,6 +96,8 @@ type AnimationItemRowProps = {|
   objectName: string,
   resourceManagementProps: ResourceManagementProps,
   draggedAnimationIndex: { current: number | null },
+  startAutoScroll: () => void,
+  stopAutoScroll: () => void,
   moveAnimation: (targetIndex: number) => void,
   moveAnimationToIndex: (sourceIndex: number, targetIndex: number) => void,
   changeAnimationName: (animationIndex: number, newName: string) => void,
@@ -131,6 +134,8 @@ const AnimationItemRow = React.memo<AnimationItemRowProps>(
     objectName,
     resourceManagementProps,
     draggedAnimationIndex,
+    startAutoScroll,
+    stopAutoScroll,
     moveAnimation,
     moveAnimationToIndex,
     changeAnimationName,
@@ -150,8 +155,10 @@ const AnimationItemRow = React.memo<AnimationItemRowProps>(
           <DragSourceAndDropTarget
             beginDrag={() => {
               draggedAnimationIndex.current = animationIndex;
+              startAutoScroll();
               return {};
             }}
+            endDrag={stopAutoScroll}
             canDrag={() => true}
             canDrop={() => true}
             drop={() => {
@@ -403,6 +410,13 @@ const AnimationList: React.ComponentType<{
     const { showDeleteConfirmation } = useAlertDialog();
 
     const draggedAnimationIndex = React.useRef<number | null>(null);
+    const getScrollViewElement = React.useCallback(
+      () => (scrollView.current ? scrollView.current.getDomElement() : null),
+      [scrollView]
+    );
+    const { startAutoScroll, stopAutoScroll } = useAutoScrollDuringDrag(
+      getScrollViewElement
+    );
 
     const [nameErrors, setNameErrors] = React.useState<{
       [number]: React.Node,
@@ -975,6 +989,8 @@ const AnimationList: React.ComponentType<{
                       objectName={objectName}
                       resourceManagementProps={resourceManagementProps}
                       draggedAnimationIndex={draggedAnimationIndex}
+                      startAutoScroll={startAutoScroll}
+                      stopAutoScroll={stopAutoScroll}
                       moveAnimation={moveAnimation}
                       moveAnimationToIndex={moveAnimationToIndex}
                       changeAnimationName={changeAnimationName}