nodes can now be placed and removed from the diagram!

steveRoll-git · steveRoll-git · commit ff658733e3b7 · 2025-11-13T02:18:10.000+02:00
closes #11
diff --git a/src/assets/shift.svg b/src/assets/shift.svg
diff --git a/src/components/DebugUI.tsx b/src/components/DebugUI.tsx
@@ -26,6 +26,8 @@ import { ToggleGroup, ToggleGroupItem } from "./ui/toggle-group"
 import { makeShifter, type ShiftKind } from "@/logic/nodeTypes/shift"
 import { neg } from "@/logic/nodeTypes/neg"
 import type { NodeType } from "@/logic/simulation"
+import { PopoverClose } from "@radix-ui/react-popover"
+import { not } from "@/logic/nodeTypes/not"
 
 type NodeInfo = {
   name: string
@@ -55,6 +57,7 @@ const placeableNodes: NodeInfo[] = [
 ]
 
 function AddNodePopup(props: { trigger: ReactNode }) {
+  const { setPlacingNode } = useSimulationContext()
   const [selectedNode, setSelectedNode] = useState<NodeInfo | undefined>()
   const [shiftKind, setShiftKind] = useState<ShiftKind>("left")
   const [shiftBits, setShiftBits] = useState("1")
@@ -64,7 +67,7 @@ function AddNodePopup(props: { trigger: ReactNode }) {
       <PopoverTrigger asChild>{props.trigger}</PopoverTrigger>
       <PopoverContent
         onCloseAutoFocus={(e) => e.preventDefault()} // https://github.com/radix-ui/primitives/issues/2248#issuecomment-2037290498
-        className="w-80"
+        className="w-[24em]"
       >
         <div className="grid gap-4">
           <div className="space-y-2">
@@ -80,7 +83,9 @@ function AddNodePopup(props: { trigger: ReactNode }) {
                 key={n.name}
                 className={
                   "h-fit w-fit p-3 rounded-full outline-solid outline-black text-lg cursor-pointer box-content " +
-                  (selectedNode == n ? "outline-4 font-bold" : "outline-2")
+                  (selectedNode == n
+                    ? "bg-gray-200 outline-4 font-bold"
+                    : "outline-2")
                 }
                 onClick={() => setSelectedNode(n)}
               >
@@ -90,12 +95,10 @@ function AddNodePopup(props: { trigger: ReactNode }) {
           </div>
 
           {selectedNode && selectedNode.params && (
-            <form>
-              <h3 className="font-bold">Params:</h3>
-              <div className="flex mb-2 items-baseline gap-2">
+            <>
+              <div className="flex items-baseline gap-2">
                 Shift direction:
                 <ToggleGroup
-                  id="shift-direction"
                   type="single"
                   variant="outline"
                   value={shiftKind}
@@ -112,7 +115,6 @@ function AddNodePopup(props: { trigger: ReactNode }) {
               <div className="flex items-baseline gap-2">
                 Shift amount:
                 <Input
-                  id="shift-num-bits"
                   type="number"
                   max={31}
                   min={1}
@@ -122,10 +124,26 @@ function AddNodePopup(props: { trigger: ReactNode }) {
                   onBlur={() => setShiftBits(Number(shiftBits).toString())}
                 />
               </div>
-            </form>
+            </>
           )}
 
-          <Button disabled={!selectedNode}>Add</Button>
+          <PopoverClose asChild>
+            <Button
+              disabled={!selectedNode}
+              onClick={() => {
+                if (selectedNode) {
+                  setPlacingNode(
+                    selectedNode.node({
+                      kind: shiftKind,
+                      bits: Number(shiftBits),
+                    }),
+                  )
+                }
+              }}
+            >
+              Add
+            </Button>
+          </PopoverClose>
         </div>
       </PopoverContent>
     </Popover>
diff --git a/src/components/Diagram.tsx b/src/components/Diagram.tsx
@@ -1,13 +1,12 @@
 /// <reference types="vite-plugin-svgr/client" />
 
-import { makeIID, placedNodeId } from "@/logic/simulation"
-import { useContext, useEffect, useRef, useState } from "react"
+import { makeIID, placedNodeId, type NodeType } from "@/logic/simulation"
+import { useContext, useEffect, useRef, useState, type ReactNode } from "react"
 import { MouseTooltip } from "./MouseTooltip"
-import { int2hex } from "@/lib/utils"
-import ShiftComponent from "@/assets/shift.svg?react"
+import { cn, int2hex } from "@/lib/utils"
 import { MousePositionContext } from "@/context/MousePositionContext"
 import { useSimulationContext } from "@/context/SimulationContext"
-import { makeShifter } from "@/logic/nodeTypes/shift"
+import { X } from "lucide-react"
 
 /**
  * The stroke width of the duplicate wires for interaction, in pixels.
@@ -16,19 +15,38 @@ const INTERACTION_STROKE_WIDTH = 6
 
 const strokeCSSVariable = (node: string, input: string) => `--${node}-${input}`
 
-function MouseNode(props: {
-  svg: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
-  placeable: boolean
+function PlacedNode(props: {
+  type: NodeType
+  className?: string
+  style: React.CSSProperties
+  children?: ReactNode
 }) {
+  return (
+    <div
+      className={cn(
+        "absolute p-2 font-bold bg-white border-[2px] border-black rounded-t-[50%_50%] rounded-b-[50%_50%] pointer-events-none select-none whitespace-pre-line",
+        props.className,
+      )}
+      style={{
+        translate: "-50% -50%",
+        ...props.style,
+      }}
+    >
+      {props.type.label}
+      {props.children}
+    </div>
+  )
+}
+
+function MouseNode(props: { type: NodeType; placeable: boolean }) {
   const mousePos = useContext(MousePositionContext)
 
   return (
-    <props.svg
-      className="absolute pointer-events-none"
+    <PlacedNode
+      type={props.type}
       style={{
         left: mousePos.x,
         top: mousePos.y,
-        translate: "-50% -50%",
         opacity: props.placeable ? 1 : 0.4,
       }}
     />
@@ -38,12 +56,17 @@ function MouseNode(props: {
 export function Diagram(props: {
   svg: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
 }) {
-  const { placedNodes, setPlacedNodes, simulation } = useSimulationContext()
+  const {
+    placedNodes,
+    setPlacedNodes,
+    simulation,
+    placingNode,
+    setPlacingNode,
+  } = useSimulationContext()
   const svgRef = useRef<SVGSVGElement | null>(null)
   const [hoveredWire, setHoveredWire] = useState<
     { nodeId: string; inputId: string; bits: number } | undefined
   >(undefined)
-  const [isPlacingNode, setIsPlacingNode] = useState(false)
 
   useEffect(() => {
     if (!svgRef.current) {
@@ -89,7 +112,7 @@ export function Diagram(props: {
   }, [])
 
   const onDiagramClick: React.MouseEventHandler<SVGSVGElement> = (e) => {
-    if (hoveredWire && isPlacingNode && svgRef.current) {
+    if (hoveredWire && placingNode && svgRef.current) {
       const { left, top } = svgRef.current.getBoundingClientRect()
       setPlacedNodes(
         new Map([
@@ -99,12 +122,12 @@ export function Diagram(props: {
             {
               x: e.clientX - left,
               y: e.clientY - top,
-              nodeType: makeShifter("left", 2),
+              nodeType: placingNode,
             },
           ],
         ]),
       )
-      setIsPlacingNode(false)
+      setPlacingNode(undefined)
     }
   }
 
@@ -143,7 +166,7 @@ export function Diagram(props: {
         <props.svg
           ref={svgRef}
           style={
-            hoveredWire && ((simulation && tooltipContent) || isPlacingNode)
+            hoveredWire && ((simulation && tooltipContent) || placingNode)
               ? {
                   [strokeCSSVariable(hoveredWire.nodeId, hoveredWire.inputId)]:
                     "2px",
@@ -153,15 +176,28 @@ export function Diagram(props: {
           onClick={onDiagramClick}
         />
         {[...placedNodes.entries()].map(([id, n]) => (
-          <ShiftComponent
+          <PlacedNode
             key={id}
-            className="absolute pointer-events-none"
+            className={"group " + (simulation ? "" : "pointer-events-auto")}
+            type={n.nodeType}
             style={{ left: n.x, top: n.y, translate: "-50% -50%" }}
-          />
+          >
+            {!simulation && (
+              <X
+                size={16}
+                className="invisible group-hover:visible absolute bg-red-400 p-0.5 rounded-full text-white right-0 top-0 cursor-pointer"
+                onClick={() => {
+                  const newNodes = new Map(placedNodes)
+                  newNodes.delete(id)
+                  setPlacedNodes(newNodes)
+                }}
+              />
+            )}
+          </PlacedNode>
         ))}
       </div>
-      {isPlacingNode && (
-        <MouseNode svg={ShiftComponent} placeable={!!hoveredWire} />
+      {placingNode && (
+        <MouseNode type={placingNode} placeable={!!hoveredWire} />
       )}
       {tooltipContent && <MouseTooltip>{tooltipContent}</MouseTooltip>}
     </>
diff --git a/src/context/SimulationContext.tsx b/src/context/SimulationContext.tsx
@@ -87,7 +87,13 @@ type Context = {
   setPlacedNodes: (nodes: Map<InputID, PlacedNode>) => void
 
   /**
-   * Right Tab value for Editor\Execution.
+   * The node type currently being placed by the user.
+   */
+  placingNode: NodeType | undefined
+  setPlacingNode: React.Dispatch<React.SetStateAction<NodeType | undefined>>
+
+  /**
+   * Right Tab value for Editor/Execution.
    */
   rightTabValue: "IDE" | "debugger"
   /**
@@ -141,6 +147,7 @@ export function SimulationContextProvider({ children }: Props) {
   const [placedNodes, setPlacedNodes] = useState<Map<InputID, PlacedNode>>(
     new Map(),
   )
+  const [placingNode, setPlacingNode] = useState<NodeType | undefined>()
   const editorRef = useRef<EditorInterface | undefined>(undefined)
 
   const startSimulation = () => {
@@ -280,6 +287,8 @@ export function SimulationContextProvider({ children }: Props) {
         setError,
         placedNodes,
         setPlacedNodes,
+        placingNode,
+        setPlacingNode,
       }}
     >
       {children}
