Center on node button

src/lib/components/ComfyJourneyView.svelte

@@ -14,7 +14,7 @@
  import uiState from '$lib/stores/uiState';
  import { resolvePatch, type JourneyPatchNode, type WritableJourneyStateStore, diffParams, type JourneyNode } from '$lib/stores/journeyStates';
  import JourneyRenderer, { type JourneyNodeEvent } from './JourneyRenderer.svelte';
- import { Trash, ClockHistory, Diagram3  } from "svelte-bootstrap-icons";
+ import { Trash, ClockHistory, Diagram3, GeoAlt } from "svelte-bootstrap-icons";
  import { getWorkflowRestoreParamsFromWorkflow } from '$lib/restoreParameters';
  import notify from '$lib/notify';
  import selectionState from '$lib/stores/selectionState';
@@ -32,6 +32,7 @@
  let journey: WritableJourneyStateStore | null = null;
  let activeNode: JourneyNode | null = null;
  let mode: JourneyMode = "linear";
+ let cyto: cytoscape.Core | null = null;
 
  const MODES: [JourneyMode, typeof SvelteComponent][] = [
      ["linear", ClockHistory],
@@ -62,6 +63,21 @@
      notify("History cleared.", { type: "info" })
  }
 
+ function doCenter() {
+     if (cyto == null)
+         return;
+
+     const activeNode = journey.getActiveNode();
+     if (activeNode == null)
+         return;
+
+     const node = cyto.$(`#${activeNode.id}`);
+     if (node.isNode()) {
+         cyto.zoom(1.25);
+         cyto.center(node)
+     }
+ }
+
  function onSelectNode(e: CustomEvent<JourneyNodeEvent>) {
      const { node } = e.detail;
 
@@ -141,7 +157,13 @@
 <div class="journey-view">
     <div class="top">
         <button class="mode-button ternary"
-                title={"Add new"}
+                title="Center Active"
+                disabled={$journey.root == null || $journey.activeNodeID == null}
+                on:click={doCenter}>
+            <GeoAlt width="100%" height="100%" />
+        </button>
+        <button class="mode-button ternary"
+                title="Clear"
                 disabled={$journey.root == null}
                 on:click={doClearHistory}>
             <Trash width="100%" height="100%" />
@@ -149,6 +171,7 @@
     </div>
     {#key $journey.version}
         <JourneyRenderer {workflow} {journey} {mode}
+                         bind:cyto
                          on:select_node={onSelectNode}
                          on:right_click_node={onRightClickNode}
                          on:hover_node={onHoverNode}
@@ -180,12 +203,7 @@
      height: calc(100% - $button-height * 3);
  }
 
- .top {
-     height: $button-height;
-     color: var(--comfy-accent-soft);
- }
-
- .bottom {
+ .top, .bottom {
      height: $button-height;
      display: flex;
      flex-direction: row;

src/lib/components/JourneyRenderer.svelte

@@ -23,6 +23,7 @@
  export let workflow: ComfyBoxWorkflow | null = null
  export let journey: WritableJourneyStateStore | null = null
  export let mode: JourneyMode = "linear";
+ export let cyto: cytoscape.Core | null = null;
 
  const dispatch = createEventDispatcher<{
      select_node: JourneyNodeEvent;
@@ -42,7 +43,7 @@
      lastMode = mode;
  }
 
- function makePatchText(patch: RestoreParamWorkflowNodeTargets, prev: RestoreParamWorkflowNodeTargets): string {
+ function makePatchText(patch: RestoreParamWorkflowNodeTargets): string {
      const lines = []
 
      let sorted = Array.from(Object.entries(patch))
@@ -61,11 +62,7 @@
                  line = `${source.name}: (changed)`
                  break;
              default:
-                 const prevValue = prev[nodeID];
-                 let prevValueStr = "???"
-                 if (prevValue)
-                     prevValueStr = prevValue.finalValue
-                 line = `${source.name}: ${prevValueStr} → ${source.finalValue}`
+                 line = `${source.name}: ${source.prevValue} → ${source.finalValue}`
                  break;
          }
          lines.push(line)
@@ -132,8 +129,7 @@
 
              if (showPatches) {
                  // show a node with the changes between gens
-                 const prev = resolvePatch(patchNode.parent, memoize);
-                 const patchText = makePatchText(patchNode.patch, prev);
+                 const patchText = makePatchText(patchNode.patch);
                  const patchNodeHeight = countNewLines(patchText) * 11 + 22;
 
                  nodes.push({
@@ -256,7 +252,7 @@
 </script>
 
 {#if workflow && journey}
-    <Graph {nodes} {edges}
+    <Graph {nodes} {edges} bind:cyInstance={cyto}
            style="background: var(--neutral-900)"
            on:rebuilt={onRebuilt}
     />

src/lib/components/graph/Graph.svelte

@@ -18,6 +18,9 @@
 
  export let style: string = ""
 
+ let refElement = null
+ export let cyInstance: cytoscape.Core | null = null
+
  const dispatch = createEventDispatcher<{
      rebuilt: { cyto: cytoscape.Core };
  }>();
@@ -75,9 +78,6 @@
 
      dispatch("rebuilt", { cyto: cyInstance })
  }
-
- let refElement = null
- let cyInstance: cytoscape.Core = null
 </script>
 
 <div class="cy-graph" {style} bind:this={refElement} />

src/lib/restoreParameters.ts

@@ -39,6 +39,8 @@ export interface RestoreParamSource<T extends RestoreParamType = any> {
  */
 export interface RestoreParamSourceWorkflowNode extends RestoreParamSource<"workflow"> {
     type: "workflow",
+
+    prevValue?: any
 }
 
 export type RestoreParamWorkflowNodeTargets = Record<NodeID, RestoreParamSourceWorkflowNode>
@@ -233,6 +235,7 @@ export function getWorkflowRestoreParams(serGraph: SerializedLGraph, workflow?:
                 type: "workflow",
                 nodeType: node.type,
                 name,
+                prevValue: finalValue,
                 finalValue,
             }
             result[node.id] = source;

src/lib/stores/journeyStates.ts

@@ -81,6 +81,7 @@ export function diffParams(base: RestoreParamWorkflowNodeTargets, updated: Resto
     for (const [k, v] of Object.entries(updated)) {
         if (!(k in base) || !deepEqual(base[k].finalValue, v.finalValue, { strict: true })) {
             result[k] = v
+            v.prevValue = base[k].finalValue
         }
     }