From 745f222dbb623cdcea37bddfb1417ff1083c29f1 Mon Sep 17 00:00:00 2001 From: Tim Arney Date: Fri, 14 Jun 2024 14:05:32 -0400 Subject: [PATCH] chore: styling updates for logic view (#3833) update logic stypes --- .../edit/logic/components/flow/GroupNode.tsx | 12 ++++++------ .../flow/algorithms/d3-hierarchy.ts | 19 +++++++++++++++++++ .../edit/logic/components/flow/options.ts | 7 +++++-- .../logic/components/flow/useFlowData.tsx | 16 ++++++++++++---- 4 files changed, 42 insertions(+), 12 deletions(-) diff --git a/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/logic/components/flow/GroupNode.tsx b/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/logic/components/flow/GroupNode.tsx index cae214c96e..deef1e04e2 100644 --- a/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/logic/components/flow/GroupNode.tsx +++ b/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/logic/components/flow/GroupNode.tsx @@ -56,7 +56,7 @@ export const GroupNode = (node: NodeProps) => { }; const nodeClassName = - "relative flex w-[100%] min-w-[200px] max-w-[250px] rounded-sm bg-slate-50 p-4 text-sm text-slate-600 pr-12"; + "relative flex w-[100%] min-w-[200px] max-w-[450px] rounded-sm bg-slate-50 p-2 py-3 text-sm text-slate-600 border-red"; return (
@@ -89,7 +89,7 @@ export const GroupNode = (node: NodeProps) => { )} - {!node.data.children.length &&
} + {!node.data.children.length &&
} {node.data.children.map((child: TreeItem) => { const selected = selectedElementId === Number(child.index) @@ -124,7 +124,7 @@ export const GroupNode = (node: NodeProps) => { if (!typesWithOptions.includes(item.type)) { return (
-
+
{getTitle(child.data as ElementProperties).substring(0, 300)}
@@ -145,13 +145,13 @@ export const GroupNode = (node: NodeProps) => { className={cn( nodeClassName, selected, - "focus:border-violet-800 outline-offset-8 outline-slate-800 hover:scale-125 rounded-full" + "focus:border-violet-800 outline-offset-8 outline-slate-800" )} > -
+
{getTitle(child.data as ElementProperties).substring(0, 300)}
-
+
diff --git a/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/logic/components/flow/algorithms/d3-hierarchy.ts b/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/logic/components/flow/algorithms/d3-hierarchy.ts index 563f977ace..ad7da2f94d 100644 --- a/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/logic/components/flow/algorithms/d3-hierarchy.ts +++ b/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/logic/components/flow/algorithms/d3-hierarchy.ts @@ -102,9 +102,28 @@ const d3HierarchyLayout: LayoutAlgorithm = async (nodes, edges, options) => { y: position.y - (node.height ?? 0) / 2, }; + if (node.id === "end" || node.id === "review") { + return { ...node }; + } + return { ...node, position: offsetPosition }; }); + // Get the last node's position without the review and end nodes + const gap = 40; + + const lastNode = nextNodes[nextNodes.length - 3]; + const lastNodeWidth = lastNode?.width ?? 0; + + const reviewNode = nextNodes[nextNodes.length - 2]; + const reviewNodeWidth = reviewNode?.width ?? 0; + + const endNode = nextNodes[nextNodes.length - 1]; + + // Update the position of the review and end nodes + reviewNode.position = { x: lastNode.position.x + lastNodeWidth + gap, y: lastNode.position.y }; + endNode.position = { x: reviewNode.position.x + reviewNodeWidth + gap, y: lastNode.position.y }; + return { nodes: nextNodes, edges }; }; diff --git a/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/logic/components/flow/options.ts b/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/logic/components/flow/options.ts index 5f7ef88d28..c2f66a5c6c 100644 --- a/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/logic/components/flow/options.ts +++ b/app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/logic/components/flow/options.ts @@ -2,9 +2,12 @@ import { type LayoutOptions } from "./useAutoLayout"; import { MarkerType } from "reactflow"; export const edgeOptions = { - type: "smoothstep", + type: "simplebezier", + selectable: false, + focusable: false, + animated: true, markerEnd: { type: MarkerType.ArrowClosed }, - pathOptions: { offset: 5 }, + pathOptions: { offset: 20, type: "straight" }, }; export const layoutOptions: LayoutOptions = { 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 0ad815a66a..1167f68f67 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 @@ -29,6 +29,7 @@ const endNode = { ], }, type: "groupNode", + position: { x: 0, y: 0 }, }; const reviewNode = { @@ -43,6 +44,7 @@ const reviewNode = { ], }, type: "groupNode", + position: { x: 0, y: 0 }, }; const defaultEdges = { @@ -148,7 +150,9 @@ export const useFlowData = () => { return { edges, nodes: [] }; } - const nodes = treeIndexes.map((key: TreeItemIndex) => { + const nodes = []; + + treeIndexes.forEach((key: TreeItemIndex) => { const treeItem: TreeItem = treeItems[key]; const group: Group | undefined = formGroups && formGroups[key] ? formGroups[key] : undefined; let elements: TreeItem[] = []; @@ -177,15 +181,19 @@ export const useFlowData = () => { edges.push(...(newEdges as Edge[])); prevNodeId = key as string; - return flowNode; + + if (key === "review" || key === "end") { + return; + } + nodes.push(flowNode); }); // Add review node - nodes.push({ ...reviewNode, position: { x: x_pos, y: y_pos } }); + nodes.push({ ...reviewNode }); // Push "end" node to the end // And add confirmation element - nodes.push({ ...endNode, position: { x: x_pos, y: y_pos } }); + nodes.push({ ...endNode }); return { edges, nodes }; }, [treeItems, formGroups]);