chore: Add custom edge to fix arrow alignment in Logic view (#3871)

* add custom edge end marker

app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/logic/components/flow/EndMarker.tsx

@@ -0,0 +1,18 @@
+export const EndMarker = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" style={{ position: "absolute", top: 0, left: 0 }}>
+      <defs>
+        <marker
+          id="1__type=1__type=gc-arrow-closed"
+          refX="1"
+          refY="4.5"
+          markerHeight={7}
+          markerWidth={9}
+          viewBox="0 0 7 9"
+        >
+          <path d="M7 4.5L0.25 8.39711L0.25 0.602885L7 4.5Z" fill="#4338CA" />
+        </marker>
+      </defs>
+    </svg>
+  );
+};

app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/logic/components/flow/FlowWithProvider.tsx

@@ -33,6 +33,7 @@ import { useRehydrate } from "@lib/store/useTemplateStore";
 import { Language } from "@lib/types/form-builder-types";
 
 const nodeTypes = { groupNode: GroupNode };
+import { Edge } from "reactflow";
 
 import { Loader } from "@clientComponents/globals/Loader";
 
@@ -51,7 +52,7 @@ export interface FlowProps {
 const Flow: ForwardRefRenderFunction<unknown, FlowProps> = ({ children, lang }, ref) => {
   const { nodes: flowNodes, edges: flowEdges, getData } = useFlowData(lang);
   const [nodes, , onNodesChange] = useNodesState(flowNodes);
-  const [, setEdges, onEdgesChange] = useEdgesState(flowEdges);
+  const [, setEdges, onEdgesChange] = useEdgesState(flowEdges as Edge[]);
   const { fitView } = useReactFlow();
   const reset = useRef(false);
   const [redrawing, setRedrawing] = useState(false);
@@ -90,12 +91,12 @@ const Flow: ForwardRefRenderFunction<unknown, FlowProps> = ({ children, lang },
   useImperativeHandle(ref, () => ({
     updateEdges: () => {
       const { edges } = getData();
-      setEdges(edges);
+      setEdges(edges as Edge[]);
     },
     redraw: () => {
       reset.current = true;
       const { edges } = getData();
-      setEdges(edges);
+      setEdges(edges as Edge[]);
       setRedrawing(true);
       const reLayout = async () => {
         await runLayout();
@@ -128,7 +129,7 @@ const Flow: ForwardRefRenderFunction<unknown, FlowProps> = ({ children, lang },
         nodes={nodes}
         nodeTypes={nodeTypes}
         onNodesChange={onNodesChange}
-        edges={flowEdges}
+        edges={flowEdges as Edge[]}
         onEdgesChange={onEdgesChange}
         defaultEdgeOptions={edgeOptions}
         onInit={(instance) => {

app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/logic/components/flow/useAutoLayout.ts

@@ -48,13 +48,13 @@ function useAutoLayout(options: LayoutOptions) {
       // Mutating the nodes and edges directly here is fine because we expect our
       // layouting algorithms to return a new array of nodes/edges.
       for (const node of nextNodes) {
-        node.style = { ...node.style, opacity: 1 };
+        node.style = { ...node.style, opacity: 1, marginLeft: "10px" };
         node.sourcePosition = getSourceHandlePosition(options.direction);
         node.targetPosition = getTargetHandlePosition(options.direction);
       }
 
       for (const edge of edges) {
-        edge.style = { ...edge.style, opacity: 1 };
+        edge.style = { ...edge.style, opacity: 1, zIndex: 200 };
       }
 
       setNodes(nextNodes);

app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/logic/components/flow/useFlowData.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from "react";
-import { Edge, MarkerType } from "reactflow";
+import { MarkerType } from "reactflow";
 import { TreeItem, TreeItemIndex } from "react-complex-tree";
 
 import { useGroupStore } from "@formBuilder/components/shared/right-panel/treeview/store/useGroupStore";
@@ -8,6 +8,23 @@ import { Group, GroupsType, NextActionRule } from "@lib/formContext";
 import { Language } from "@lib/types/form-builder-types";
 import { getReviewNode, getStartElements, getEndNode } from "@lib/utils/form-builder/i18nHelpers";
 
+interface CustomEdge {
+  id: string;
+  source: string;
+  target: string;
+  style: {
+    strokeWidth: number;
+    stroke: string;
+  };
+  markerEnd: {
+    type: string | MarkerType;
+    width?: number | undefined;
+    height?: number | undefined;
+    color?: string | undefined;
+  };
+  ariaLabel: string;
+}
+
 const defaultEdges = {
   start: "start",
   end: "end",
@@ -18,19 +35,25 @@ const lineStyle = {
   stroke: "#6366F1",
 };
 
+/*
 const arrowStyle = {
   type: MarkerType.ArrowClosed,
   width: 18,
   height: 18,
   color: "#6366F1",
 };
+*/
+
+const arrowStyle = {
+  type: "1__type=gc-arrow-closed",
+};
 
 const getEdges = (
   nodeId: string,
   prevNodeId: string,
   group: Group | undefined,
   groups: GroupsType | undefined
-): Edge[] => {
+): CustomEdge[] => {
   // Connect to end node as we don't have a next action
   if (prevNodeId && group && typeof group.nextAction === "undefined") {
     const fromGroup = group?.[nodeId as keyof typeof group];
@@ -103,7 +126,7 @@ export const useFlowData = (lang: Language = "en") => {
   const endNode = getEndNode(lang);
 
   const getData = useCallback(() => {
-    const edges: Edge[] = [];
+    const edges: CustomEdge[] = [];
     const treeIndexes = treeItems.root.children;
 
     const x_pos = 0;
@@ -145,7 +168,7 @@ export const useFlowData = (lang: Language = "en") => {
         type: "groupNode",
       };
 
-      edges.push(...(newEdges as Edge[]));
+      edges.push(...(newEdges as CustomEdge[]));
       prevNodeId = key as string;
 
       if (key === "review" || key === "end") {

app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/logic/page.tsx

@@ -8,6 +8,7 @@ import { LogicNavigation } from "./components/LogicNavigation";
 import { SkipLinkReusable } from "@clientComponents/globals/SkipLinkReusable";
 import { Legend } from "./components/flow/Legend";
 import { Language } from "@lib/types/form-builder-types";
+import { EndMarker } from "./components/flow/EndMarker";
 
 export async function generateMetadata({
   params: { locale },
@@ -48,7 +49,10 @@ export default async function Page({
       <LogicNavigation />
       <div className="flow-container my-4 w-full border-1">
         <Suspense fallback={<Loading />}>
-          <FlowWithProvider lang={locale as Language} />
+          <>
+            <EndMarker />
+            <FlowWithProvider lang={locale as Language} />
+          </>
         </Suspense>
       </div>
       <SkipLinkReusable anchor="#rightPanelTitle">{t("skipLink.logicSetup")}</SkipLinkReusable>