diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte index aa8e1af950..d9111d4943 100644 --- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte +++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte @@ -16,6 +16,7 @@ makeStateBinding, } from "builderStore/dataBinding" import { currentAsset, store } from "builderStore" + import { cloneDeep } from "lodash/fp" const flipDurationMs = 150 const EVENT_TYPE_KEY = "##eventHandlerType" @@ -29,6 +30,26 @@ let actionQuery let selectedAction = actions?.length ? actions[0] : null + const setUpdateActions = actions => { + return actions + ? cloneDeep(actions) + .filter(action => { + return ( + action[EVENT_TYPE_KEY] === "Update State" && + action.parameters?.type === "set" && + action.parameters.key + ) + }) + .reduce((acc, action) => { + acc[action.id] = action + return acc + }, {}) + : [] + } + + // Snapshot original action state + let updateStateActions = setUpdateActions(actions) + $: { // Ensure parameters object is never null if (selectedAction && !selectedAction.parameters) { @@ -125,8 +146,9 @@ actions = e.detail.items } - const getAllBindings = (bindings, eventContextBindings, actions) => { + const getAllBindings = (actionBindings, eventContextBindings, actions) => { let allBindings = [] + let cloneActionBindings = cloneDeep(actionBindings) if (!actions) { return [] } @@ -144,11 +166,19 @@ .forEach(action => { // Check we have a binding for this action, and generate one if not const stateBinding = makeStateBinding(action.parameters.key) - const hasKey = bindings.some(binding => { + const hasKey = actionBindings.some(binding => { return binding.runtimeBinding === stateBinding.runtimeBinding }) if (!hasKey) { - bindings.push(stateBinding) + let existing = updateStateActions[action.id] + if (existing) { + const existingBinding = makeStateBinding(existing.parameters.key) + cloneActionBindings = cloneActionBindings.filter( + binding => + binding.runtimeBinding !== existingBinding.runtimeBinding + ) + } + allBindings.push(stateBinding) } }) // Get which indexes are asynchronous automations as we want to filter them out from the bindings @@ -164,15 +194,16 @@ .filter(index => index !== undefined) // Based on the above, filter out the asynchronous automations from the bindings - if (asynchronousAutomationIndexes) { - allBindings = eventContextBindings - .filter((binding, index) => { + let contextBindings = asynchronousAutomationIndexes + ? eventContextBindings.filter((binding, index) => { return !asynchronousAutomationIndexes.includes(index) }) - .concat(bindings) - } else { - allBindings = eventContextBindings.concat(bindings) - } + : eventContextBindings + + allBindings = contextBindings + .concat(cloneActionBindings) + .concat(allBindings) + return allBindings }