diff --git a/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/logic/components/flow/EndMarker.tsx b/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/logic/components/flow/EndMarker.tsx
new file mode 100644
index 0000000000..88c8d219bb
--- /dev/null
+++ b/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/logic/components/flow/EndMarker.tsx
@@ -0,0 +1,18 @@
+export const EndMarker = () => {
+ return (
+
+ );
+};
diff --git a/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/logic/components/flow/FlowWithProvider.tsx b/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/logic/components/flow/FlowWithProvider.tsx
index 2ee4458b70..6fef712c95 100644
--- a/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/logic/components/flow/FlowWithProvider.tsx
+++ b/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 = ({ 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 = ({ 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 = ({ children, lang },
nodes={nodes}
nodeTypes={nodeTypes}
onNodesChange={onNodesChange}
- edges={flowEdges}
+ edges={flowEdges as Edge[]}
onEdgesChange={onEdgesChange}
defaultEdgeOptions={edgeOptions}
onInit={(instance) => {
diff --git a/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/logic/components/flow/useAutoLayout.ts b/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/logic/components/flow/useAutoLayout.ts
index 7fb4e79022..45b3e00312 100644
--- a/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/logic/components/flow/useAutoLayout.ts
+++ b/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);
diff --git a/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/logic/components/flow/useFlowData.tsx b/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/logic/components/flow/useFlowData.tsx
index 98c23c8a42..3d4c4d95b5 100644
--- a/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/logic/components/flow/useFlowData.tsx
+++ b/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") {
diff --git a/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/logic/page.tsx b/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/logic/page.tsx
index 8a52cf4523..6b90f3bc3d 100644
--- a/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/logic/page.tsx
+++ b/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({
}>
-
+ <>
+
+
+ >
{t("skipLink.logicSetup")}