diff --git a/src/components/FxParams/ParamsHistory.tsx b/src/components/FxParams/ParamsHistory.tsx index 8cf391b..86a8ce5 100644 --- a/src/components/FxParams/ParamsHistory.tsx +++ b/src/components/FxParams/ParamsHistory.tsx @@ -14,22 +14,22 @@ import { RuntimeContext } from "context/RuntimeContext" const isEqual = (a: any, b: any) => stringifyParamsData(a) === stringifyParamsData(b) -type ParamsHistoryActionType = "params-update" +export type ParamsHistoryActionType = "params-update" -interface IParamsHistoryEntry { +export interface IParamsHistoryEntry { type: ParamsHistoryActionType data: any } -type ParamsHistoryAction = (entry: IParamsHistoryEntry) => void +export type ParamsHistoryAction = (entry: IParamsHistoryEntry) => void export interface IParamsHistoryContext { history: IParamsHistoryEntry[] pushHistory: (entry: IParamsHistoryEntry) => void offset: number setOffset: (o: number) => void - undo: () => void - redo: () => void + undo: (callback?: (entry?: IParamsHistoryEntry) => void) => void + redo: (callback?: (entry?: IParamsHistoryEntry) => void) => void } const defaultParamsHistoryContext: IParamsHistoryContext = { @@ -66,14 +66,16 @@ export function ParamsHistoryProvider({ children }: Props) { [] ) - const undo = () => { + const undo = (callback?: (entry?: IParamsHistoryEntry) => void) => { if (offset >= history.length) return setOffset(offset + 1) + callback?.(history?.[offset + 1]) } - const redo = () => { + const redo = (callback?: (entry?: IParamsHistoryEntry) => void) => { if (offset <= 0) return setOffset(offset - 1) + callback?.(history?.[offset - 1]) } // when offset change apply action based on history entry diff --git a/src/containers/Panel/PanelParams.tsx b/src/containers/Panel/PanelParams.tsx index 2918fa4..bbdbfb0 100644 --- a/src/containers/Panel/PanelParams.tsx +++ b/src/containers/Panel/PanelParams.tsx @@ -10,8 +10,15 @@ import classes from "./PanelParams.module.scss" import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" import { faRotateLeft, faRotateRight } from "@fortawesome/free-solid-svg-icons" import { getRandomParamValues } from "components/FxParams/utils" -import { FxParamDefinition, FxParamType } from "components/FxParams/types" -import { ParamsHistoryContext } from "components/FxParams/ParamsHistory" +import { + FxParamDefinition, + FxParamsData, + FxParamType, +} from "components/FxParams/types" +import { + IParamsHistoryEntry, + ParamsHistoryContext, +} from "components/FxParams/ParamsHistory" import { LockButton } from "components/FxParams/LockButton/LockButton" import cx from "classnames" import { useState } from "react" @@ -25,6 +32,30 @@ export function PanelParams() { const { iframe } = useContext(MainContext) const runtime = useContext(RuntimeContext) + const sendSyncParameters = (syncParams: FxParamsData) => { + iframe?.contentWindow?.postMessage( + { + id: "fxhash_params:update", + data: { + params: syncParams, + }, + }, + "*" + ) + } + + const findSyncParams = (params: FxParamsData) => { + return Object.keys(params).reduce((acc: FxParamsData, paramId) => { + if ( + runtime?.definition?.params?.find((p) => p.id === paramId)?.update === + "sync" + ) { + acc[paramId] = params[paramId] + } + return acc + }, {}) + } + const [lockedParamIds, setLockedParamIds] = useState([]) const { history, offset, undo, redo } = useContext(ParamsHistoryContext) @@ -36,21 +67,14 @@ export function PanelParams() { changedParam ) => { runtime.state.update({ params: newData }) - const realtimeSync = - runtime.definition.params?.find((d) => d.id === changedParam?.id) + const isSyncParam = + changedParam && + runtime.definition.params?.find((d) => d.id === changedParam.id) ?.update === "sync" - if (realtimeSync && changedParam) { - iframe?.contentWindow?.postMessage( - { - id: "fxhash_params:update", - data: { - params: { - [changedParam.id]: changedParam.value, - }, - }, - }, - "*" - ) + if (isSyncParam) { + sendSyncParameters({ + [changedParam.id]: changedParam.value, + }) } } @@ -77,6 +101,8 @@ export function PanelParams() { runtime.state.update({ params: { ...runtime.state.params, ...randomValues }, }) + const syncParams = findSyncParams(randomValues) + sendSyncParameters(syncParams) } const handleToggleLockAllParams = () => { if (lockedParamIds.length > 0) { @@ -97,11 +123,18 @@ export function PanelParams() { setLockedParamIds(updatedIds) } } + const handleUndo = () => { - undo() + undo((entry?: IParamsHistoryEntry) => { + const syncParams = findSyncParams(entry?.data as FxParamsData) + sendSyncParameters(syncParams) + }) } const handleRedo = () => { - redo() + redo((entry?: IParamsHistoryEntry) => { + const syncParams = findSyncParams(entry?.data as FxParamsData) + sendSyncParameters(syncParams) + }) } const allLocked = useMemo( () => lockedParamIds?.length === runtime.definition.params?.length,