Keep event sheet scroll location when switching functions

newIDE/app/src/EventsFunctionsExtensionEditor/index.js

@@ -145,6 +145,7 @@ export default class EventsFunctionsExtensionEditor extends React.Component<
     onAddEventsBasedObjectCb: null,
   };
   editor: ?EventsSheetInterface;
+  _editorScrollPositions = new Map<number, number>();
   eventsFunctionList: ?EventsFunctionsListInterface;
   _editorMosaic: ?EditorMosaicInterface;
   _editorNavigator: ?EditorNavigatorInterface;
@@ -588,6 +589,14 @@ export default class EventsFunctionsExtensionEditor extends React.Component<
     selectedEventsBasedBehavior: ?gdEventsBasedBehavior,
     selectedEventsBasedObject: ?gdEventsBasedObject
   ) => {
+    const previousEditor = this.editor;
+    const previousFunction = this.state.selectedEventsFunction;
+    if (previousEditor && previousFunction) {
+      this._editorScrollPositions.set(
+        previousFunction.ptr,
+        previousEditor.getScrollPosition()
+      );
+    }
     this._editBehavior(selectedEventsBasedBehavior);
     this._editObject(selectedEventsBasedObject);
   };
@@ -1427,6 +1436,9 @@ export default class EventsFunctionsExtensionEditor extends React.Component<
                 hotReloadPreviewButtonProps={
                   this.props.hotReloadPreviewButtonProps
                 }
+                initialScrollPosition={this._editorScrollPositions.get(
+                  selectedEventsFunction.ptr
+                )}
               />
             </Background>
           ) : selectedEventsBasedBehavior &&

newIDE/app/src/EventsSheet/EventsTree/index.js

@@ -333,6 +333,7 @@ type EventsTreeProps = {|
   onEventMoved: (previousRowIndex: number, nextRowIndex: number) => void,
   onEndEditingEvent: (event: gdBaseEvent) => void,
   onScroll?: () => void,
+  initialScrollPosition?: number,
 
   screenType: ScreenType,
   windowSize: WindowSizeType,
@@ -399,6 +400,7 @@ export default class ThemableEventsTree extends Component<
   DropTarget = makeDropTarget<SortableTreeNode>(eventsSheetEventsDnDType);
   temporaryUnfoldedNodes: Array<SortableTreeNode>;
   _hoverTimerId: ?TimeoutID;
+  _isForcedToInitialScroll: boolean;
 
   constructor(props: EventsTreeProps) {
     super(props);
@@ -413,6 +415,7 @@ export default class ThemableEventsTree extends Component<
       isScrolledTop: true,
       isScrolledBottom: false,
     };
+    this._isForcedToInitialScroll = !!this.props.initialScrollPosition;
   }
 
   componentDidMount() {
@@ -448,8 +451,12 @@ export default class ThemableEventsTree extends Component<
    */
   onHeightsChanged(cb: ?() => void) {
     this.forceUpdate(() => {
-      if (this._list && this._list.wrappedInstance.current) {
-        this._list.wrappedInstance.current.recomputeRowHeights();
+      const currentList = this._list;
+      if (currentList) {
+        const listWrapper = currentList.wrappedInstance.current;
+        if (listWrapper) {
+          listWrapper.recomputeRowHeights();
+        }
       }
       if (cb) cb();
     });
@@ -484,6 +491,15 @@ export default class ThemableEventsTree extends Component<
     }
   }
 
+  getScrollPosition(): number {
+    const currentList = this._list;
+    if (!currentList) {
+      return 0;
+    }
+    const listWrapper = currentList.wrappedInstance.current;
+    return listWrapper ? listWrapper.Grid.state.scrollTop : 0;
+  }
+
   /**
    * Unfold events so that the given one is visible
    */
@@ -999,6 +1015,22 @@ export default class ThemableEventsTree extends Component<
     const treeData = this.state.treeData ? [...this.state.treeData] : null;
     const zoomLevel = this.props.fontSize || 14;
 
+    if (this._isForcedToInitialScroll) {
+      if (this.props.searchResults) {
+        this._isForcedToInitialScroll = false;
+      }
+      else {
+        const currentList = this._list;
+        if (currentList) {
+          const listWrapper = currentList.wrappedInstance.current;
+          if (listWrapper && listWrapper.Grid.state.scrollTop !== this.props.initialScrollPosition) {
+            // For some reason the List scroll is reset to 0 twice when the component is mounted.
+            listWrapper.scrollToPosition(this.props.initialScrollPosition);
+          }
+        }
+      }
+    }
+
     return (
       <div
         style={{
@@ -1053,6 +1085,12 @@ export default class ThemableEventsTree extends Component<
           reactVirtualizedListProps={{
             ref: list => (this._list = list),
             onScroll: event => {
+              if (
+                event.scrollTop !== 0 &&
+                event.scrollTop !== this.props.initialScrollPosition
+              ) {
+                this._isForcedToInitialScroll = false;
+              }
               this.props.onScroll && this.props.onScroll();
               this.setState({
                 isScrolledTop: event.scrollTop === 0,

newIDE/app/src/EventsSheet/index.js

@@ -151,6 +151,7 @@ type Props = {|
   unsavedChanges?: ?UnsavedChanges,
   isActive: boolean,
   hotReloadPreviewButtonProps: HotReloadPreviewButtonProps,
+  initialScrollPosition?: number,
 |};
 
 type ComponentProps = {|
@@ -351,6 +352,10 @@ export class EventsSheetComponentWithoutHandle extends React.Component<
     if (this._eventsTree) this._eventsTree.forceEventsUpdate();
   };
 
+  getScrollPosition = (): number => {
+    return this._eventsTree ? this._eventsTree.getScrollPosition() : 0;
+  };
+
   updateToolbar() {
     if (!this.props.setToolbar) return;
 
@@ -1921,6 +1926,7 @@ export class EventsSheetComponentWithoutHandle extends React.Component<
                     key={events.ptr}
                     indentScale={preferences.values.eventsSheetIndentScale}
                     onScroll={this._ensureFocused}
+                    initialScrollPosition={this.props.initialScrollPosition}
                     events={events}
                     project={project}
                     scope={scope}
@@ -2184,6 +2190,7 @@ export class EventsSheetComponentWithoutHandle extends React.Component<
 export type EventsSheetInterface = {|
   updateToolbar: () => void,
   onResourceExternallyChanged: ({| identifier: string |}) => void,
+  getScrollPosition: () => number,
 |};
 
 // EventsSheet is a wrapper so that the component can use multiple
@@ -2192,6 +2199,7 @@ const EventsSheet = (props, ref) => {
   React.useImperativeHandle(ref, () => ({
     updateToolbar,
     onResourceExternallyChanged,
+    getScrollPosition,
   }));
 
   const component = React.useRef<?EventsSheetComponentWithoutHandle>(null);
@@ -2202,6 +2210,9 @@ const EventsSheet = (props, ref) => {
     if (component.current)
       component.current.onResourceExternallyChanged(resourceInfo);
   };
+  const getScrollPosition = (): number => {
+    return component.current ? component.current.getScrollPosition() : 0;
+  };
 
   const authenticatedUser = React.useContext(AuthenticatedUserContext);
   const preferences = React.useContext(PreferencesContext);