fix: Grid - cursor moving duration not matched

src/components/timeline/Timeline.tsx

@@ -9,7 +9,6 @@ import { TimeLineTrack } from '../../model/timeline/timeline';
 import styles from './Timeline.module.scss';
 import { useAppDispatch, useAppSelector } from 'store/hooks';
 import { SettingsActions } from 'store/settings';
-import { EffectSelectors } from 'store/effect';
 import { memo, useCallback, useMemo } from 'react';
 import { store } from 'store';
 import { isEqual } from 'lodash';
@@ -79,17 +78,11 @@ export const Timeline = memo((props: TimelineProps) => {
   });
   const dispatch = useAppDispatch();
   const queueIndex = useAppSelector(SettingSelectors.queueIndex);
-  const queuePosition = useAppSelector(SettingSelectors.queuePosition);
   const queueStart = useAppSelector(SettingSelectors.queueStart);
-
   const queueIndexString = useMemo(() => queueIndex.toString(), [queueIndex]);
-  const maxDurationByIndex = useAppSelector(EffectSelectors.maxDurationByIndex);
-
-  const duration = useMemo(() => {
-    return queuePosition === 'forward'
-      ? maxDurationByIndex[queueIndex] || 0
-      : maxDurationByIndex[queueIndex + 1] || 0;
-  }, [maxDurationByIndex, queueIndex, queuePosition]);
+  const duration = useAppSelector(
+    SettingSelectors.currentPageNextQueueIndexMaxDuration,
+  );
 
   const columnDefs: GridColumnDef<TimeLineTrack>[] = useMemo(() => {
     return [

src/store/settings/selectors.ts

@@ -1,5 +1,5 @@
 import { RootState } from 'store';
-import { createSelector, EntityId } from '@reduxjs/toolkit';
+import { createSelector } from '@reduxjs/toolkit';
 import { ObjectSelectors } from 'store/object/selectors';
 import { QueueDocumentSettings } from './model';
 import { EffectSelectors } from 'store/effect/selectors';
@@ -322,7 +322,7 @@ const currentPageQueueIndexEffectsByObjectId = createSelector(
 );
 
 const currentPageQueueIndexMaxDuration = createSelector(
-  [currentPageQueueIndexEffects],
+  [currentPageQueueIndexEffects, queuePosition],
   (effects) => {
     return effects.reduce((acc, effect) => {
       if (acc < effect.duration + effect.delay) {
@@ -333,6 +333,32 @@ const currentPageQueueIndexMaxDuration = createSelector(
   },
 );
 
+const currentPageNextQueueIndexMaxDuration = createSelector(
+  [currentPageEffects, queueIndex, queuePosition],
+  (effects, queueIndex, queuePosition) => {
+    const effectsMap = effects.reduce<Record<string, QueueEffectType[]>>(
+      (result, effect) => {
+        if (!result[effect.index]) {
+          result[effect.index] = [];
+        }
+        result[effect.index].push(effect);
+        return result;
+      },
+      {},
+    );
+
+    const targetIndex =
+      queuePosition === 'forward' ? queueIndex : queueIndex + 1;
+
+    return (effectsMap[targetIndex] || []).reduce((acc, effect) => {
+      if (acc < effect.duration + effect.delay) {
+        acc = effect.duration + effect.delay;
+      }
+      return acc;
+    }, 0);
+  },
+);
+
 export const SettingSelectors = {
   pageId,
   queueIndex,
@@ -366,5 +392,6 @@ export const SettingSelectors = {
   currentPageEffects,
   currentPageQueueIndexEffects,
   currentPageQueueIndexEffectsByObjectId,
+  currentPageNextQueueIndexMaxDuration,
   currentPageQueueIndexMaxDuration,
 };