feat: add region highlight color

heypoom · Dec 19, 2023 · 509d5e6 · 509d5e6
1 parent 097ea67
commit 509d5e6
Show file tree

Hide file tree

Showing 11 changed files with 71 additions and 14 deletions.
diff --git a/canvas/src/blocks/machine/components/MemoryViewer.tsx b/canvas/src/blocks/machine/components/MemoryViewer.tsx
@@ -2,6  2,7 @@ import cn from "classnames"
 import { memo, useEffect, useMemo, useRef, useState } from "react"
 import { useKeyPressEvent } from "react-use"
 
 import { getRegionClassName } from "@/blocks/value-view/utils/region-colors"
 import { MemoryRegion } from "@/store/remote-values"
 
 export interface ViewerConfig {
@@ -102,7  103,8 @@ export const MemoryViewer = memo((props: Props) => {
   const glowStyle = () => {
     if (regions.length > 0) {
       if (!hasSelection) {
-        return { filter: "drop-shadow(0 0 8px rgba(0, 69, 88, 0.7))" }
         return {}
         // return { filter: "drop-shadow(0 0 8px rgba(0, 69, 88, 0.7))" }
       }
 
       return {}
@@ -204,14  206,15 @@ export const MemoryViewer = memo((props: Props) => {
                   selected &&
                   "bg-yellow-5 text-yellow-11 hover:text-yellow-12",
                 !canDragOut && !selected && "hover:text-crimson-12",
-                full && "text-center",
-                canDragOut && !selected && "opacity-0 bg-transparent",
                 canDragOut &&
                   selected &&
                   "bg-crimson-4 text-crimson-10 hover:text-crimson-10",
                 full && "text-center",
                 canDragOut && !selected && "opacity-0 bg-transparent",
 
                 !selected &&
                   highlighted &&
-                  "bg-cyan-5 text-cyan-11 hover:text-cyan-12",
                   getRegionClassName(highlighted.color ?? highlighted.id),
               )}
             >
               {value}

diff --git a/canvas/src/blocks/machine/components/PaginatedMemoryViewer.tsx b/canvas/src/blocks/machine/components/PaginatedMemoryViewer.tsx
@@ -16,7  16,6 @@ import {
   prevMemPage,
   setMemPage,
 } from "@/store/memory"
-import { $nodes } from "@/store/nodes"
 import {
   $memoryRegions,
   $selectingRegionViewerId,

diff --git a/canvas/src/blocks/utils/defaults.ts b/canvas/src/blocks/utils/defaults.ts
@@ -1,3  1,5 @@
 import { isBlockPropsType } from "@/blocks"
 import { getRandomRegionColor } from "@/blocks/value-view/utils/region-colors"
 import { BaseBlockFieldOf, BlockTypes } from "@/types/Node"
 
 export const DEFAULT_SOURCE = "push 0xAA\n\n\n\n"
@@ -23,5  25,16 @@ export const defaultProps: DefaultPropsMap = {
     size: 0,
     offset: 0,
     visual: { type: "Int" },
     color: 0,
   },
 }
 
 export const getDefaultProps = <T extends BlockTypes>(type: T) => {
   const props = defaultProps[type]
 
   if (isBlockPropsType(type, "ValueView", props)) {
     props.color = getRandomRegionColor()
   }
 
   return props
 }
diff --git a/canvas/src/blocks/utils/is.ts b/canvas/src/blocks/utils/is.ts
@@ -1,4  1,4 @@
-import { BlockNode, BlockTypes, TNode } from "@/types/Node"
 import { BaseBlockFieldOf, BlockNode, BlockTypes, TNode } from "@/types/Node"
 
 export const isBlockType =
   <T extends BlockTypes>(key: T) =>
@@ -20,3  20,11 @@ export const isBlock = {
   producer: (n: BlockNode) =>
     isBlock.clock(n) || isBlock.midiIn(n) || isBlock.tap(n),
 }
 
 export const isBlockPropsType = <T extends BlockTypes>(
   src: BlockTypes,
   dst: T,
   _props: BaseBlockFieldOf<BlockTypes>,
 ): _props is BaseBlockFieldOf<T> => {
   return src === dst
 }
diff --git a/canvas/src/blocks/value-view/index.tsx b/canvas/src/blocks/value-view/index.tsx
@@ -6,6  6,7 @@ import { memo } from "react"
 
 import { BaseBlock, createSchema } from "@/blocks"
 import { ValueRenderer } from "@/blocks/value-view/components/ValueRenderer"
 import { regionPalettes } from "@/blocks/value-view/utils/region-colors"
 import {
   $remoteValues,
   $selectingRegionViewerId,
@@ -85,5  86,6 @@ const schema = createSchema({
     { key: "size", type: "number", min: 1 },
     { key: "offset", type: "number", min: 0 },
     { key: "target", type: "number", min: 0 },
     { key: "color", type: "number", min: 0, max: regionPalettes.length },
   ],
 })
diff --git a/canvas/src/blocks/value-view/utils/region-colors.ts b/canvas/src/blocks/value-view/utils/region-colors.ts
@@ -0,0  1,19 @@
 import { random } from "lodash"
 
 export const regionPalettes: string[] = [
   "bg-cyan-7 text-cyan-11 hover:text-cyan-12",
   "bg-violet-7 text-violet-11 hover:text-violet-12",
   "bg-tomato-7 text-tomato-11 hover:text-tomato-12",
   "bg-jade-7 text-jade-11 hover:text-jade-12",
   "bg-orange-6 text-orange-11 hover:text-orange-12",
   "bg-grass-7 text-grass-11 hover:text-grass-12",
   "bg-purple-7 text-purple-11 hover:text-purple-12",
   "bg-blue-7 text-blue-10 hover:text-blue-12",
   "bg-teal-7 text-teal-11 hover:text-teal-12",
 ]
 
 // Get a consistent region color.
 export const getRegionClassName = (id: number): string =>
   regionPalettes[id % regionPalettes.length]
 
 export const getRandomRegionColor = () => random(0, regionPalettes.length)
diff --git a/canvas/src/canvas/Canvas.tsx b/canvas/src/canvas/Canvas.tsx
@@ -5,6  5,7 @@ import { DragEvent, useRef } from "react"
 import ReactFlow, { ReactFlowInstance } from "reactflow"
 
 import { nodeTypes } from "@/blocks"
 import { getRandomRegionColor } from "@/blocks/value-view/utils/region-colors"
 import { addBlock } from "@/canvas/utils/addBlock"
 import {
   onConnect,
@@ -35,10  36,11 @@ export const Canvas = () => {
       })
 
       const { size, offset, target } = action
       const color = getRandomRegionColor()
 
       addBlock("ValueView", {
         position,
-        data: { visual: { type: "Int" }, size, offset, target },
         data: { visual: { type: "Int" }, size, offset, target, color },
       })
 
       updateValueViewers()

diff --git a/canvas/src/canvas/utils/addBlock.tsx b/canvas/src/canvas/utils/addBlock.tsx
@@ -1,6  1,6 @@
 import { BlockData } from "machine-wasm"
 
-import { defaultProps } from "@/blocks"
 import { getDefaultProps } from "@/blocks"
 import { setupBlock } from "@/blocks"
 import { addCanvasNode } from "@/canvas"
 import { engine } from "@/engine"
@@ -12,7  12,10 @@ interface Options<T extends BlockTypes> {
 }
 
 export function addBlock<T extends BlockTypes>(type: T, options?: Options<T>) {
-  const props: BaseBlockFieldOf<T> = { ...defaultProps[type], ...options?.data }
   const props: BaseBlockFieldOf<T> = {
     ...getDefaultProps(type),
     ...options?.data,
   }
 
   let id: number | undefined
 

diff --git a/canvas/src/persist/hooks/useSaveState.ts b/canvas/src/persist/hooks/useSaveState.ts
@@ -1,7  1,7 @@
 import { BlockData } from "machine-wasm"
 import { useReactFlow } from "reactflow"
 
-import { defaultProps } from "@/blocks"
 import { getDefaultProps } from "@/blocks"
 import { setupBlock } from "@/blocks"
 import { engine } from "@/engine"
 import { port } from "@/store/actions/changes"
@@ -64,7  64,7 @@ export function useSaveState(): SaveStateContext {
         if (type === "Machine") {
           engine.ctx?.add_machine_with_id(id)
         } else {
-          const props = { ...defaultProps[type], ...nodeProps }
           const props = { ...getDefaultProps(type), ...nodeProps }
           const data = { type, ...props } as BlockData
 
           engine.ctx?.add_block_with_id(id, data)

diff --git a/canvas/src/store/remote-values.ts b/canvas/src/store/remote-values.ts
@@ -1,3  1,4 @@
 import { BlockData } from "machine-wasm"
 import { atom, computed, map } from "nanostores"
 
 import { isBlock } from "@/blocks"
@@ -20,7  21,11 @@ export function updateValueViewers() {
   }
 }
 
-export type MemoryRegion = { id: number; offset: number; size: number }
 export type MemoryRegion = Pick<
   BlockData.ValueView,
   "offset" | "size" | "color"
 > & { id: number }
 
 type RegionMap = Record<number, MemoryRegion[]>
 
 export const $memoryRegions = computed($nodes, (nodes) => {
@@ -29,10  34,10 @@ export const $memoryRegions = computed($nodes, (nodes) => {
   for (const node of nodes) {
     if (!isBlock.valueView(node)) continue
 
-    const { id, target, size, offset } = node.data
     const { id, target, size, offset, color } = node.data
 
     if (!viewers[target]) viewers[target] = []
-    viewers[target].push({ id, size, offset })
     viewers[target].push({ id, size, offset, color })
   }
 
   return viewers

diff --git a/machine/src/blocks/block.rs b/machine/src/blocks/block.rs
@@ -109,6  109,9 @@ pub enum BlockData {
 
         /// How should we visualize this value?
         visual: ValueVisualType,
 
         /// Color of the memory region.
         color: u16,
     }
 }