feat: implement conditional region selection mode

heypoom · Dec 19, 2023 · df3ebe2 · df3ebe2
1 parent a416840
commit df3ebe2
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 18 deletions.
diff --git a/canvas/src/blocks/components/Settings.tsx b/canvas/src/blocks/components/Settings.tsx
@@ -12,6 +12,7 @@ export interface SettingsConfig {
   className?: string
   onUpdate?: () => void
   children?: ReactNode
+  footer?: () => ReactNode
 }
 
 type Props<T extends BlockTypes, F extends Field<T, BlockKeys<T>>> = {
@@ -27,7 +28,7 @@ export const Settings = <
 >(
   props: Props<T, F>,
 ) => {
-  const { node, schema, className } = props
+  const { node, schema, className, footer: Footer } = props
   const { id } = node.data
 
   const [inputs, setInputs] = useState<Inputs>({})
@@ -159,6 +160,8 @@ export const Settings = <
       })}
 
       {props.children}
+
+      {Footer && <Footer />}
     </div>
   )
 }

diff --git a/canvas/src/blocks/machine/components/PaginatedMemoryViewer.tsx b/canvas/src/blocks/machine/components/PaginatedMemoryViewer.tsx
@@ -17,7 +17,11 @@ import {
   setMemPage,
 } from "@/store/memory"
 import { $nodes } from "@/store/nodes"
-import { $memoryRegions, updateValueViewers } from "@/store/remote-values"
+import {
+  $memoryRegions,
+  $selectingRegionViewerId,
+  updateValueViewers,
+} from "@/store/remote-values"
 import { createDragAction } from "@/types/drag-action"
 
 interface Props {
@@ -66,20 +70,18 @@ export const PaginatedMemoryViewer = (props: Props) => {
   }, [isEditOffset, memStart, show])
 
   function onConfirm(start: number, end: number) {
-    const viewer = $nodes
-      .get()
-      .find((n) => n.selected && n.type === "ValueView")
+    const viewerId = $selectingRegionViewerId.get()
 
     // Update remote value viewer if it is selected
     // TODO: re-implement this by adding selection states (similar to Google Sheets)
-    if (viewer) {
-      // engine.setBlock(viewer.data.id, "ValueView", {
-      //   target: id,
-      //   size: end - start + 1,
-      //   offset: memStart + start,
-      // })
-      //
-      // updateValueViewers()
+    if (viewerId !== null) {
+      engine.setBlock(viewerId, "ValueView", {
+        target: id,
+        size: end - start + 1,
+        offset: memStart + start,
+      })
+
+      updateValueViewers()
     }
   }
 

diff --git a/canvas/src/blocks/osc.tsx b/canvas/src/blocks/osc.tsx
@@ -65,7 +65,7 @@ export const OscBlock = (props: OscProps) => {
       targets={1}
       sources={1}
       schema={schema}
-      settingsConfig={{ children: settings() }}
+      settingsConfig={{ footer: settings }}
       className="px-4 py-2 font-mono text-center"
     >
       {getOscLog()}

diff --git a/canvas/src/blocks/value-view/index.tsx b/canvas/src/blocks/value-view/index.tsx
@@ -1,9 +1,16 @@
+import { Icon } from "@iconify/react"
 import { useStore } from "@nanostores/react"
+import { Tooltip } from "@radix-ui/themes"
+import cn from "classnames"
 import { memo } from "react"
 
 import { BaseBlock, createSchema } from "@/blocks"
 import { ValueRenderer } from "@/blocks/value-view/components/ValueRenderer"
-import { $remoteValues, updateValueViewers } from "@/store/remote-values"
+import {
+  $remoteValues,
+  $selectingRegionViewerId,
+  updateValueViewers,
+} from "@/store/remote-values"
 import { BlockPropsOf } from "@/types/Node"
 
 type Props = BlockPropsOf<"ValueView">
@@ -16,12 +23,40 @@ export const ValueViewBlock = memo((props: Props) => {
   const valueMap = useStore($remoteValues)
   const values = valueMap[id] ?? []
 
+  const selectingViewerId = useStore($selectingRegionViewerId)
+
+  const footer = () => {
+    return (
+      <div className="flex items-center justify-end w-full">
+        <Tooltip content="select row regions">
+          <Icon
+            icon="material-symbols:select-all"
+            className={cn(
+              "text-2 text-white cursor-pointer hover:text-pink-9",
+              selectingViewerId === id && "text-pink-11",
+            )}
+            onClick={() => {
+              $selectingRegionViewerId.set(selectingViewerId === id ? null : id)
+            }}
+          />
+        </Tooltip>
+      </div>
+    )
+  }
+
   return (
     <BaseBlock
       node={props}
-      className="relative font-mono"
+      className={cn(
+        "relative font-mono",
+        id === selectingViewerId && "!border-pink-10",
+      )}
       schema={schema}
-      settingsConfig={{ onUpdate: updateValueViewers, className: "px-3 pb-2" }}
+      settingsConfig={{
+        onUpdate: updateValueViewers,
+        className: "px-3 pb-2",
+        footer,
+      }}
     >
       <ValueRenderer {...{ values, visual, target, offset }} />
 

diff --git a/canvas/src/store/remote-values.ts b/canvas/src/store/remote-values.ts
@@ -1,4 +1,4 @@
-import { computed, map } from "nanostores"
+import { atom, computed, map } from "nanostores"
 
 import { isBlock } from "@/blocks"
 import { engine } from "@/engine"
@@ -37,3 +37,6 @@ export const $memoryRegions = computed($nodes, (nodes) => {
 
   return viewers
 })
+
+// Which memory viewer block is in the region selection mode?
+export const $selectingRegionViewerId = atom<number | null>(null)