Improve Clone (#1897)

* refactor(rundown): optimise copy-paste performance * chore: configure opt-in compiler * refactor(rundown): stabilise frequently accessed data * feat(clone): allow cloning any element * remove paste above and cue increment from test --------- Co-authored-by: arc-alex <ac@omnivox.dk>
2026-08-14 11:53:49 +00:00 · 2025-11-28 16:20:52 +01:00
parent a78586d2fa
commit 3f1f06f7c5
21 changed files with 321 additions and 250 deletions
@@ -75,7 +75,10 @@ export async function postAddEntry(
 /**
 * HTTP request to edit an entry
 */
-export async function putEditEntry(rundownId: RundownId, data: Partial<OntimeEntry>): Promise<AxiosResponse<OntimeEntry>> {
+export async function putEditEntry(
+  rundownId: RundownId,
+  data: Partial<OntimeEntry>,
+): Promise<AxiosResponse<OntimeEntry>> {
  return axios.put(`${rundownPath}/${rundownId}/entry`, data);
 }

@@ -107,7 +110,11 @@ export async function patchReorderEntry(rundownId: RundownId, data: ReorderEntry
 /**
 * HTTP request to swap two events
 */
-export async function requestEventSwap(rundownId: RundownId, from: EntryId, to: EntryId): Promise<AxiosResponse<Rundown>> {
+export async function requestEventSwap(
+  rundownId: RundownId,
+  from: EntryId,
+  to: EntryId,
+): Promise<AxiosResponse<Rundown>> {
  return axios.patch(`${rundownPath}/${rundownId}/swap`, { from, to });
 }

@@ -121,8 +128,12 @@ export async function requestApplyDelay(rundownId: RundownId, delayId: EntryId):
 /**
 * HTTP request for cloning an entry
 */
-export async function postCloneEntry(rundownId: RundownId, entryId: EntryId): Promise<AxiosResponse<Rundown>> {
-  return axios.post(`${rundownPath}/${rundownId}/clone/${entryId}`);
+export async function postCloneEntry(
+  rundownId: RundownId,
+  entryId: EntryId,
+  options?: { before?: EntryId; after?: EntryId },
+): Promise<AxiosResponse<Rundown>> {
+  return axios.post(`${rundownPath}/${rundownId}/clone/${entryId}`, options);
 }

 /**
@@ -2,6 +2,7 @@ import { useCallback } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import {
  EntryId,
+  InsertOptions,
  isOntimeEvent,
  isOntimeGroup,
  MaybeString,
@@ -173,7 +174,8 @@ export const useEntryActions = () => {
   * @private
   */
  const { mutateAsync: cloneEntryMutation } = useMutation({
-    mutationFn: ([rundownId, entryId]: Parameters<typeof postCloneEntry>) => postCloneEntry(rundownId, entryId),
+    mutationFn: ([rundownId, entryId, options]: Parameters<typeof postCloneEntry>) =>
+      postCloneEntry(rundownId, entryId, options),
    onMutate: () => queryClient.cancelQueries({ queryKey: RUNDOWN }),
    onSettled: () => queryClient.invalidateQueries({ queryKey: RUNDOWN }),
  });
@@ -182,14 +184,14 @@ export const useEntryActions = () => {
   * Clone an entry
   */
  const clone = useCallback(
-    async (entryId: EntryId) => {
+    async (entryId: EntryId, options?: InsertOptions) => {
      try {
        const rundownId = getCurrentRundownData()?.id;
        if (!rundownId) {
          throw new Error('Rundown not initialised');
        }

-        await cloneEntryMutation([rundownId, entryId]);
+        await cloneEntryMutation([rundownId, entryId, options]);
      } catch (error) {
        logAxiosError('Error cloning entry', error);
      }
@@ -1,68 +0,0 @@
-import { EndAction, EntryCustomFields, OntimeEvent, SupportedEntry, TimerType, TimeStrategy } from 'ontime-types';
-
-import { cloneEvent } from '../clone';
-
-describe('cloneEvent()', () => {
-  it('creates a stem from a given event', () => {
-    const original: OntimeEvent = {
-      id: 'unique',
-      type: SupportedEntry.Event,
-      flag: false,
-      title: 'title',
-      cue: 'cue',
-      note: 'note',
-      timeStart: 0,
-      duration: 10,
-      timeEnd: 10,
-      timerType: TimerType.CountDown,
-      timeStrategy: TimeStrategy.LockEnd,
-      parent: 'test',
-      linkStart: false,
-      countToEnd: false,
-      endAction: EndAction.None,
-      skip: false,
-      colour: 'F00',
-      revision: 10,
-      timeWarning: 120000,
-      timeDanger: 60000,
-      delay: 0,
-      dayOffset: 0,
-      gap: 0,
-      triggers: [],
-      custom: {
-        lighting: '3',
-      } as EntryCustomFields,
-    };
-
-    const cloned = cloneEvent(original);
-    expect(cloned).not.toBe(original);
-    expect(cloned.custom).not.toBe(original.custom);
-    expect(cloned.triggers).not.toBe(original.triggers);
-
-    expect(cloned).toMatchObject({
-      type: SupportedEntry.Event,
-      flag: original.flag,
-      title: original.title,
-      note: original.note,
-      timeStart: original.timeStart,
-      duration: original.duration,
-      timeEnd: original.timeEnd,
-      timerType: original.timerType,
-      timeStrategy: original.timeStrategy,
-      parent: 'test',
-      countToEnd: original.countToEnd,
-      linkStart: original.linkStart,
-      endAction: original.endAction,
-      skip: original.skip,
-      colour: original.colour,
-      revision: 0,
-      delay: original.delay,
-      dayOffset: original.dayOffset,
-      gap: 0,
-      timeWarning: original.timeWarning,
-      timeDanger: original.timeDanger,
-      triggers: original.triggers,
-      custom: original.custom,
-    });
-  });
-});
@@ -1,36 +0,0 @@
-import { OntimeEvent, SupportedEntry } from 'ontime-types';
-
-/**
- * @description Creates a safe duplicate of an event
- * @param {OntimeEvent} event
- * @param {string} [after]
- * @return {OntimeEvent} clean event
- */
-type ClonedEvent = Omit<OntimeEvent, 'id' | 'cue'>;
-export const cloneEvent = (event: OntimeEvent): ClonedEvent => {
-  return {
-    type: SupportedEntry.Event,
-    flag: event.flag,
-    title: event.title,
-    note: event.note,
-    timeStart: event.timeStart,
-    duration: event.duration,
-    timeEnd: event.timeEnd,
-    timerType: event.timerType,
-    timeStrategy: event.timeStrategy,
-    countToEnd: event.countToEnd,
-    linkStart: event.linkStart,
-    endAction: event.endAction,
-    skip: event.skip,
-    colour: event.colour,
-    parent: event.parent,
-    revision: 0,
-    delay: event.delay, // the events will be collocated, so having the same metadata is a good start
-    dayOffset: event.dayOffset,
-    gap: 0,
-    timeWarning: event.timeWarning,
-    timeDanger: event.timeDanger,
-    triggers: structuredClone(event.triggers),
-    custom: structuredClone(event.custom),
-  };
-};
@@ -1,4 +1,4 @@
-import { Fragment, lazy, useCallback, useEffect, useRef, useState } from 'react';
+import { Fragment, lazy, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { TbFlagFilled } from 'react-icons/tb';
 import {
  closestCenter,
@@ -36,7 +36,6 @@ import { useEntryActions } from '../../common/hooks/useEntryAction';
 import useFollowComponent from '../../common/hooks/useFollowComponent';
 import { useRundownEditor } from '../../common/hooks/useSocket';
 import { useEntryCopy } from '../../common/stores/entryCopyStore';
-import { cloneEvent } from '../../common/utils/clone';
 import { lastMetadataKey, RundownMetadataObject } from '../../common/utils/rundownMetadata';
 import { AppMode, sessionKeys } from '../../ontimeConfig';

@@ -58,6 +57,8 @@ interface RundownProps {
 }

 export default function Rundown({ data, rundownMetadata }: RundownProps) {
+  'use memo';
+
  const { order, entries, id } = data;
  // we create a copy of the rundown with a data structured aligned with what dnd-kit needs
  const featureData = useRundownEditor();
@@ -68,17 +69,20 @@ export default function Rundown({ data, rundownMetadata }: RundownProps) {
    key: `rundown.${id}-editor-collapsed-groups`,
    defaultValue: [],
  });
+  const collapsedGroupSet = useMemo(() => new Set(collapsedGroups), [collapsedGroups]);

-  const { addEntry, deleteEntry, move, reorderEntry } = useEntryActions();
-
-  const { entryCopyId, setEntryCopyId } = useEntryCopy();
+  const { addEntry, clone, deleteEntry, move, reorderEntry } = useEntryActions();
+  const setEntryCopyId = useEntryCopy((state) => state.setEntryCopyId);

  // cursor
  const [editorMode] = useSessionStorage<AppMode>({
    key: sessionKeys.editorMode,
    defaultValue: AppMode.Edit,
  });
-  const { clearSelectedEvents, setSelectedEvents, cursor } = useEventSelection();
+
+  const clearSelectedEvents = useEventSelection((state) => state.clearSelectedEvents);
+  const setSelectedEvents = useEventSelection((state) => state.setSelectedEvents);
+  const cursor = useEventSelection((state) => state.cursor);

  const cursorRef = useRef<HTMLDivElement | null>(null);
  const scrollRef = useRef<HTMLDivElement | null>(null);
@@ -105,20 +109,30 @@ export default function Rundown({ data, rundownMetadata }: RundownProps) {
  );

  const insertCopyAtId = useCallback(
-    (atId: string | null, copyId: string | null, above = false) => {
-      const adjustedCursor = above ? getPreviousNormal(entries, order, atId ?? '').entry?.id ?? null : atId;
-      if (copyId === null) {
+    (atId: string | null, above = false) => {
+      // lazily get the value from the store
+      const { entryCopyId } = useEntryCopy.getState();
+      if (entryCopyId === null || !entries[entryCopyId]) {
        // we cant clone without selection
        return;
      }
-      const cloneEntry = entries[copyId];
-      if (cloneEntry?.type === SupportedEntry.Event) {
-        //if we don't have a cursor add the new event on top
-        const newEvent = cloneEvent(cloneEntry);
-        addEntry(newEvent, { after: adjustedCursor ?? undefined });
+
+      let normalisedAtId = atId;
+
+      const elementToCopy = entries[entryCopyId];
+      const refElement = atId ? entries[atId] : undefined;
+
+      if (refElement && 'parent' in refElement && refElement.parent && elementToCopy.type === SupportedEntry.Group) {
+        normalisedAtId = refElement.parent;
      }
+
+      clone(entryCopyId, {
+        after: above ? undefined : normalisedAtId ?? undefined,
+        // if we don't have a cursor add the new event on top
+        before: above ? normalisedAtId ?? undefined : undefined,
+      });
    },
-    [addEntry, order, entries],
+    [entries, clone],
  );

  /**
@@ -200,9 +214,9 @@ export default function Rundown({ data, rundownMetadata }: RundownProps) {
   */
  const getIsCollapsed = useCallback(
    (groupId: EntryId): boolean => {
-      return Boolean(collapsedGroups.find((id) => id === groupId));
+      return collapsedGroupSet.has(groupId);
    },
-    [collapsedGroups],
+    [collapsedGroupSet],
  );

  /**
@@ -300,12 +314,8 @@ export default function Rundown({ data, rundownMetadata }: RundownProps) {
    ],

    ['mod + C', () => setEntryCopyId(cursor)],
-    ['mod + V', () => insertCopyAtId(cursor, entryCopyId)],
-    [
-      'mod + shift + V',
-      () => insertCopyAtId(cursor, entryCopyId, true),
-      { preventDefault: true, usePhysicalKeys: true },
-    ],
+    ['mod + V', () => insertCopyAtId(cursor)],
+    ['mod + shift + V', () => insertCopyAtId(cursor, true), { preventDefault: true, usePhysicalKeys: true }],

    ['alt + backspace', () => deleteAtCursor(cursor), { preventDefault: true, usePhysicalKeys: true }],
  ]);
@@ -395,7 +405,7 @@ export default function Rundown({ data, rundownMetadata }: RundownProps) {
    }

    // keep copy of the current state in case we need to revert
-    const currentEntries = structuredClone(sortableData);
+    const currentEntries = [...sortableData];
    // we keep a copy of the state as a hack to handle inconsistencies between dnd-kit and async store updates
    setSortableData((currentEntries) => {
      return reorderArray(currentEntries, fromIndex, toIndex);
@@ -438,9 +448,12 @@ export default function Rundown({ data, rundownMetadata }: RundownProps) {
    return <RundownEmpty handleAddNew={(type: SupportedEntry) => addEntry({ type })} />;
  }

-  // 1. gather presentation options
+  // gather presentation options
  const isEditMode = editorMode === AppMode.Edit;

+  // gather rundown wide data
+  const lastEntryId = order.at(-1);
+
  return (
    <div className={style.rundownContainer} ref={scrollRef} data-testid='rundown'>
      <DndContext
@@ -509,7 +522,7 @@ export default function Rundown({ data, rundownMetadata }: RundownProps) {
              const groupColour = entryMetadata.groupColour === '' ? '#9d9d9d' : entryMetadata.groupColour;

              const isFirst = index === 0;
-              const isLast = entryId === order.at(-1);
+              const isLast = entryId === lastEntryId;

              /**
               * We need to provide the parent ID for the QuickAdd components
@@ -1,16 +1,4 @@
-import {
-  isOntimeDelay,
-  isOntimeEvent,
-  isOntimeMilestone,
-  OntimeEntry,
-  OntimeEvent,
-  Playback,
-  SupportedEntry,
-} from 'ontime-types';
-
-import { useEntryActions } from '../../common/hooks/useEntryAction';
-import useMemoisedFn from '../../common/hooks/useMemoisedFn';
-import { cloneEvent } from '../../common/utils/clone';
+import { isOntimeDelay, isOntimeEvent, isOntimeMilestone, OntimeEntry, Playback, SupportedEntry } from 'ontime-types';

 import RundownDelay from './rundown-delay/RundownDelay';
 import RundownEvent from './rundown-event/RundownEvent';
@@ -44,13 +32,6 @@ export default function RundownEntry({
  totalGap,
  isLinkedToLoaded,
 }: RundownEntryProps) {
-  const { addEntry } = useEntryActions();
-
-  const createCloneEvent = useMemoisedFn(() => {
-    const newEvent = cloneEvent(data as OntimeEvent);
-    addEntry(newEvent, { after: data.id });
-  });
-
  if (isOntimeEvent(data)) {
    return (
      <RundownEvent
@@ -83,7 +64,6 @@ export default function RundownEntry({
        dayOffset={data.dayOffset}
        totalGap={totalGap}
        isLinkedToLoaded={isLinkedToLoaded}
-        createCloneEvent={createCloneEvent}
        hasTriggers={data.triggers.length > 0}
      />
    );
@@ -56,7 +56,6 @@ interface RundownEventProps {
  dayOffset: number;
  totalGap: number;
  isLinkedToLoaded: boolean;
-  createCloneEvent: () => void;
  hasTriggers: boolean;
 }

@@ -91,10 +90,9 @@ export default function RundownEvent({
  totalGap,
  isLinkedToLoaded,
  hasTriggers,
-  createCloneEvent,
 }: RundownEventProps) {
  const { selectedEventId, setSelectedEventId, clearSelectedEventId } = useEventIdSwapping();
-  const { updateEntry, batchUpdateEvents, deleteEntry, groupEntries, swapEvents } = useEntryActions();
+  const { updateEntry, batchUpdateEvents, clone, deleteEntry, groupEntries, swapEvents } = useEntryActions();

  const { selectedEvents, unselect, setSelectedEvents, clearSelectedEvents } = useEventSelection();
  const handleRef = useRef<null | HTMLSpanElement>(null);
@@ -172,7 +170,7 @@ export default function RundownEvent({
            type: 'item',
            label: 'Clone',
            icon: IoDuplicateOutline,
-            onClick: createCloneEvent,
+            onClick: () => clone(eventId, { after: eventId }),
          },
          { type: 'divider' },
          {