Merge pull request #27 from fxhash/feature/send-params-update-for-syn…

…c-params-on-randomistation-and-undo-redo fix params:update event not send on random/history
fxhash · Aug 23, 2023 · 3c42925 · 3c42925
2 parents dac9226 + 1630b8f
commit 3c42925
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 25 deletions.
diff --git 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
@@ -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<string[]>([])
   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,