From 229b68baf02fe8507c98d5ddac3ca69f8b173b8a Mon Sep 17 00:00:00 2001 From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com> Date: Wed, 2 Oct 2024 20:35:36 +0200 Subject: [PATCH] TransientActions: making elementsToRerender mandatory (#6428) **Problem:** TransientActions is the inspector's way of creating a continuous interaction. This properly collates all undo events into a single undo step representing the entire series of dispatched transient actions, and it _optionally_ lets you set an array of ElementPaths that will make the editor and the canvas switch to fast rerender mode. The problem is that this elementsToRerender path is optional, which means some inspector interactions will be slow! **Fix:** Make elementsToRerender mandatory and fill it in all places. --- editor/src/components/editor/action-types.ts | 2 +- .../src/components/editor/actions/action-creators.ts | 2 +- editor/src/components/editor/store/dispatch.tsx | 2 +- .../inspector/common/longhand-shorthand-hooks.ts | 12 ++++++++++-- editor/src/components/inspector/flex-section.tsx | 2 +- .../split-chained-number-input.tsx | 2 +- editor/src/templates/editor.tsx | 4 +--- 7 files changed, 16 insertions(+), 10 deletions(-) diff --git a/editor/src/components/editor/action-types.ts b/editor/src/components/editor/action-types.ts index ca9ef5a0290c..f841a7836ecd 100644 --- a/editor/src/components/editor/action-types.ts +++ b/editor/src/components/editor/action-types.ts @@ -295,7 +295,7 @@ export type SetZIndex = { export type TransientActions = { action: 'TRANSIENT_ACTIONS' transientActions: Array - elementsToRerender: Array | null + elementsToRerender: Array } // This is a wrapper action which changes the undo behavior for the included actions. diff --git a/editor/src/components/editor/actions/action-creators.ts b/editor/src/components/editor/actions/action-creators.ts index f78aa83dba6b..5061e880e8aa 100644 --- a/editor/src/components/editor/actions/action-creators.ts +++ b/editor/src/components/editor/actions/action-creators.ts @@ -375,7 +375,7 @@ export function toggleDataCanCondense(targets: Array): ToggleDataCa export function transientActions( actions: Array, - elementsToRerender: Array | null = null, + elementsToRerender: Array, ): TransientActions { return { action: 'TRANSIENT_ACTIONS', diff --git a/editor/src/components/editor/store/dispatch.tsx b/editor/src/components/editor/store/dispatch.tsx index c0e1a99e29a6..e65af702d272 100644 --- a/editor/src/components/editor/store/dispatch.tsx +++ b/editor/src/components/editor/store/dispatch.tsx @@ -424,7 +424,7 @@ function reducerToSplitToActionGroups( [[]], ) const wrappedTransientActionGroups = transientActionGroups.map((actionGroup) => [ - EditorActions.transientActions(actionGroup), + EditorActions.transientActions(actionGroup, currentAction.elementsToRerender), ]) return [...actionGroups, ...wrappedTransientActionGroups] } else if (i > 0 && actions[i - 1].action === 'CLEAR_INTERACTION_SESSION') { diff --git a/editor/src/components/inspector/common/longhand-shorthand-hooks.ts b/editor/src/components/inspector/common/longhand-shorthand-hooks.ts index de417fa225a2..1bf8322004e9 100644 --- a/editor/src/components/inspector/common/longhand-shorthand-hooks.ts +++ b/editor/src/components/inspector/common/longhand-shorthand-hooks.ts @@ -190,7 +190,11 @@ export function useInspectorInfoLonghandShorthand< setProp_UNSAFE(selectedView, shorthandPropertyPath, printedValue), ] }, selectedViewsRef.current) - dispatch(transient ? [transientActions(actionsToDispatch)] : actionsToDispatch) + dispatch( + transient + ? [transientActions(actionsToDispatch, selectedViewsRef.current)] + : actionsToDispatch, + ) } else { // we either have a dominant longhand key, or we need to append a new one const propertyPath = pathMappingFn(longhand, inspectorTargetPath) @@ -203,7 +207,11 @@ export function useInspectorInfoLonghandShorthand< setProp_UNSAFE(selectedView, propertyPath, printedValue), ] }, selectedViewsRef.current) - dispatch(transient ? [transientActions(actionsToDispatch)] : actionsToDispatch) + dispatch( + transient + ? [transientActions(actionsToDispatch, selectedViewsRef.current)] + : actionsToDispatch, + ) } } diff --git a/editor/src/components/inspector/flex-section.tsx b/editor/src/components/inspector/flex-section.tsx index b32f4da14128..80473de131fa 100644 --- a/editor/src/components/inspector/flex-section.tsx +++ b/editor/src/components/inspector/flex-section.tsx @@ -834,7 +834,7 @@ const GapRowColumnControl = React.memo(() => { } const transientWrapper = (actions: EditorAction[]) => - transient ? [transientActions(actions)] : actions + transient ? [transientActions(actions, [grid.elementPath])] : actions dispatch( transientWrapper([ diff --git a/editor/src/components/inspector/sections/layout-section/layout-system-subsection/split-chained-number-input.tsx b/editor/src/components/inspector/sections/layout-section/layout-system-subsection/split-chained-number-input.tsx index 19d4859c27f8..a17f0dfbe444 100644 --- a/editor/src/components/inspector/sections/layout-section/layout-system-subsection/split-chained-number-input.tsx +++ b/editor/src/components/inspector/sections/layout-section/layout-system-subsection/split-chained-number-input.tsx @@ -443,7 +443,7 @@ export const longhandShorthandEventHandler = ( } if (isTransient) { - dispatch([transientActions(actions)]) + dispatch([transientActions(actions, selectedViewsRef.current)]) } else { dispatch(actions) } diff --git a/editor/src/templates/editor.tsx b/editor/src/templates/editor.tsx index 07ede0693cff..140ba5beb5a0 100644 --- a/editor/src/templates/editor.tsx +++ b/editor/src/templates/editor.tsx @@ -151,9 +151,7 @@ function collectElementsToRerenderForTransientActions( action: EditorAction, ): Array { if (action.action === 'TRANSIENT_ACTIONS') { - if (action.elementsToRerender != null) { - working.push(...action.elementsToRerender) - } + working.push(...action.elementsToRerender) working.push( ...action.transientActions.reduce(collectElementsToRerenderForTransientActions, working), )