feat: update value viewer

canvas/src/blocks/machine/components/MemoryViewer.tsx

@@ -17,6 +17,7 @@ interface Props {
   config?: ViewerConfig
 
   onHover?: (address: number | null) => void
+  onConfirm?: (start: number, end: number) => void
 }
 
 const HOLD_MS = 100
@@ -57,6 +58,14 @@ export const MemoryViewer = memo((props: Props) => {
 
   const show = (n: number) => n.toString(base).padStart(pad, "0").toUpperCase()
 
+  function confirm() {
+    setSelecting(false)
+
+    if (props.onConfirm && start !== null && end !== null) {
+      props.onConfirm(start, end)
+    }
+  }
+
   return (
     <div className="flex text-[10px]">
       {showAddress && (
@@ -76,7 +85,7 @@ export const MemoryViewer = memo((props: Props) => {
         className={cn("px-1 grid nodrag", full && "w-full")}
         style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}
         onMouseLeave={() => {
-          if (selecting) setSelecting(false)
+          if (selecting) confirm()
           if (props.onHover) props.onHover(null)
         }}
       >
@@ -102,7 +111,7 @@ export const MemoryViewer = memo((props: Props) => {
                 }
               }}
               onMouseUp={() => {
-                setSelecting(false)
+                confirm()
                 aborted.current = true
               }}
               className={cn(

canvas/src/blocks/machine/components/PaginatedMemoryViewer.tsx

@@ -2,8 +2,10 @@ import { Icon } from "@iconify/react"
 import { useStore } from "@nanostores/react"
 import cn from "classnames"
 import { useState } from "react"
+import { useReactFlow } from "reactflow"
 
 import { MemoryViewer } from "@/blocks/machine/components/MemoryViewer"
+import { engine } from "@/engine"
 import {
   $memoryPageConfig,
   $memoryPages,
@@ -14,6 +16,9 @@ import {
   prevMemPage,
   setMemPage,
 } from "@/store/memory"
+import { $nodes } from "@/store/nodes"
+import { updateValueViewers } from "@/store/remote-values"
+import { updateMemoryViewer } from "@/store/results"
 
 interface Props {
   id: number
@@ -44,11 +49,33 @@ export const PaginatedMemoryViewer = (props: Props) => {
   const show = (n: number) =>
     `${hex ? "0x" : ""}${n.toString(base).padStart(pad, "0").toUpperCase()}`
 
+  function onConfirm(start: number, end: number) {
+    const viewer = $nodes
+      .get()
+      .find((n) => n.selected && n.type === "ValueView")
+
+    // Update remote value viewer if it is selected
+    if (viewer) {
+      engine.updateBlockData(viewer.data.id, "ValueView", {
+        target: id,
+        size: end - start + 1,
+        offset: start,
+      })
+
+      updateValueViewers()
+    }
+  }
+
   if (!memory || memory.length === 0) return null
 
   return (
     <div className="flex flex-col gap-y-1 w-fit">
-      <MemoryViewer memory={memory} begin={memStart} onHover={highlightAddr} />
+      <MemoryViewer
+        memory={memory}
+        begin={memStart}
+        onHover={highlightAddr}
+        onConfirm={onConfirm}
+      />
 
       <div className="flex text-1 justify-between px-2 items-center">
         <button

canvas/src/blocks/value-view/index.tsx

@@ -18,17 +18,11 @@ export const ValueViewBlock = memo((props: Props) => {
   const valueMap = useStore($remoteValues)
   const values = valueMap[id] ?? []
 
-  const update = (config: Partial<Data>) => {
-    const data = { ...props.data, ...config }
-
-    engine.ctx.update_block(id, { type: "ValueView", ...data })
-    updateNodeData(id, data)
-  }
+  const update = (config: Partial<Data>) =>
+    engine.updateBlockData(id, "ValueView", config)
 
   const Settings = () => <div className="text-1 font-mono">foo</div>
 
-  window.vvUpdater = update
-
   const hx = (n: number) => n.toString(16).padStart(4, "0").toUpperCase()
 
   const display = () => {

canvas/src/engine/index.ts

@@ -1,5 +1,6 @@
 import setup, {
   Action,
+  BlockData,
   CanvasError,
   Controller,
   Effect,
@@ -8,7 +9,7 @@ import setup, {
 
 import { isBlock as is, isBlock } from "@/blocks"
 import { midiManager } from "@/services/midi"
-import { syncBlockData } from "@/store/blocks"
+import { syncBlockData, updateNodeData } from "@/store/blocks"
 import { $clock } from "@/store/clock"
 import { $nodes } from "@/store/nodes"
 import {
@@ -19,6 +20,7 @@ import {
 } from "@/store/results"
 import { $status } from "@/store/status"
 import { InspectionState } from "@/types/MachineEvent"
+import { BaseBlockFieldOf, BlockFieldOf, BlockTypes } from "@/types/Node"
 
 import { processEffects } from "./effects"
 import { getSourceHighlightMap } from "./highlight/getHighlightedSourceLine"
@@ -391,6 +393,22 @@ export class CanvasEngine {
   public send(id: number, action: Action) {
     this.ctx.send_message_to_block(id, action)
   }
+
+  public updateBlockData<T extends BlockTypes>(
+    id: number,
+    type: T,
+    config: Partial<BaseBlockFieldOf<T>>,
+  ) {
+    const node = this.nodes.find((n) => n.data.id === id)
+    if (!node) return
+
+    const data = { ...node.data, ...config } as BaseBlockFieldOf<T>
+
+    updateNodeData(id, data)
+
+    engine.ctx.update_block(id, { ...data, type } as BlockData)
+    engine.ctx.force_tick_block(id)
+  }
 }
 
 export const engine = new CanvasEngine()