WIP

components/canvas/Canvas.tsx

@@ -3,6 +3,7 @@ import { ManageLabelBox } from "components/Labels/ManageLabelBox";
 import { ResetProcessButton } from "components/ResetProcessButton";
 import { useLayoutEffect, useState } from "react";
 import ReactFlow, {
+  BaseEdge,
   Controls,
   Edge,
   Node,
@@ -34,6 +35,8 @@ import { useWebSocket } from "./hooks/useWebSocket";
 import { getQIPRContainerWidth } from "./utils/getQIPRContainerWidth";
 import { useProjectId } from "@/hooks/useProjectId";
 import { MiniMapCustom } from "@/components/canvas/MiniMapCustom";
+import { EdgeDataApi } from "@/types/EdgeDataApi";
+import { ChoiceEdge } from "@/components/canvas/ChoiceEdge";
 
 type CanvasProps = {
   graph: Graph;
@@ -56,10 +59,23 @@ const Canvas = ({
     new Date("2024-04-24T00:08:00.000000Z").getTime();
 
   let tempNodes: Node<NodeDataFull>[] = [];
-  let tempEdges: Edge[] = apiEdges;
+  let tempEdges: Edge[] = [];
+  apiEdges.map((edge: EdgeDataApi) => {
+    const nodeSource = apiNodes.filter((node) => node.id === edge.source);
+    if (nodeSource[0] && nodeSource[0].type === NodeTypes.choice) {
+      tempEdges.push({ ...edge, label: "test", type: "choice" });
+    } else {
+      tempEdges.push({ ...edge });
+    }
+  });
+
   const [nodes, setNodes, onNodesChange] = useNodesState<NodeDataFull>([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
 
+  const edgeTypes = {
+    choice: ChoiceEdge,
+  };
+
   const [visibleDeleteScrim, setVisibleDeleteScrim] = useState(false);
   const [visibleLabelScrim, setVisibleLabelScrim] = useState(false);
 
@@ -199,12 +215,14 @@ const Canvas = ({
                 id: `${tempParentNodeId}=>${id}`,
                 source: tempParentNodeId,
                 target: id,
+                labelShowBg: true,
               });
               tempEdges.push({
                 id: `${id}=>${id}`,
                 source: id,
                 target: id,
                 type: "straight",
+                labelShowBg: true,
               });
               tempParentNodeId = id;
             }
@@ -213,6 +231,7 @@ const Canvas = ({
               id: `${tempParentNodeId}=>${node.id}`,
               source: tempParentNodeId,
               target: node.id,
+              labelShowBg: true,
             });
           }
         });
@@ -341,6 +360,7 @@ const Canvas = ({
         nodes={nodes}
         edges={edges}
         nodeTypes={nodeElementTypes}
+        edgeTypes={edgeTypes}
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onPaneClick={() => setSelectedNode(undefined)}

components/canvas/ChoiceEdge.tsx

@@ -0,0 +1,58 @@
+import {
+  BaseEdge,
+  EdgeLabelRenderer,
+  EdgeProps,
+  getBezierPath,
+  useReactFlow,
+} from "reactflow";
+import colors from "../../theme/colors";
+import { Input } from "@equinor/eds-core-react";
+import { useState } from "react";
+import { EdgeLabel } from "@/components/canvas/ChoiceEdgeLabel";
+
+export function ChoiceEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style = {},
+  markerEnd,
+  label,
+}: EdgeProps) {
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+
+  return (
+    <>
+      <BaseEdge
+        path={edgePath}
+        markerEnd={markerEnd}
+        style={{ ...style, color: colors.EQUINOR_PROMINENT }}
+      />
+      <EdgeLabelRenderer>
+        <div
+          style={{
+            position: "absolute",
+            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+            fontSize: 12,
+            // everything inside EdgeLabelRenderer has no pointer events by default
+            // if you have an interactive element, set pointer-events: all
+            pointerEvents: "all",
+          }}
+          className="nodrag nopan"
+        >
+          <EdgeLabel id={id} labelText={label?.toString()} />
+        </div>
+      </EdgeLabelRenderer>
+    </>
+  );
+}

components/canvas/ChoiceEdgeLabel.tsx

@@ -0,0 +1,34 @@
+import { useReactFlow } from "reactflow";
+import { useState } from "react";
+
+type EdgeLabelProps = {
+  id: string;
+  labelText?: string;
+};
+export function EdgeLabel({ id, labelText }: EdgeLabelProps) {
+  const { setEdges } = useReactFlow();
+  const [value, setValue] = useState(labelText);
+
+  const updateLabel = () => {
+    setEdges((edges) =>
+      edges.map((edge) => (edge.id === id ? { ...edge, label: value } : edge))
+    );
+  };
+
+  return (
+    <input
+      id={id}
+      style={{
+        display: "inline-block",
+        background: "transparent",
+        border: "none",
+        width: Math.max(value?.length ?? 0, 2) + "ch",
+        height: "auto",
+        maxWidth: 96,
+      }}
+      value={value}
+      onChange={(e: { target: { value: string } }) => setValue(e.target.value)}
+      onBlur={updateLabel}
+    />
+  );
+}

types/EdgeDataApi.ts

@@ -3,4 +3,6 @@ export type EdgeDataApi = {
   projectId: string;
   source: string; // Source node ID
   target: string; // Target node ID
+  label?: string;
+  type?: string;
 };