chore: styling updates for logic view (#3833)

update logic stypes
cds-snc · Jun 14, 2024 · 745f222 · 745f222
1 parent 258300c
commit 745f222
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 12 deletions.
diff --git a/...[locale]/(form administration)/form-builder/[id]/edit/logic/components/flow/GroupNode.tsx b/...[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 (
     <div>
@@ -89,7 +89,7 @@ export const GroupNode = (node: NodeProps) => {
             <QuestionRuleSvg title={t("groups.editSection", { name: node.data.label.name })} />
           </button>
         )}
-        {!node.data.children.length && <div className="min-h-[50px] min-w-[150px]"></div>}
+        {!node.data.children.length && <div className="min-h-[50px] min-w-[200px]"></div>}
         {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 (
               <div key={child.index} className={cn(nodeClassName)}>
-                <div className="line-clamp-2 truncate text-wrap">
+                <div className="truncate">
                   {getTitle(child.data as ElementProperties).substring(0, 300)}
                 </div>
               </div>
@@ -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"
               )}
             >
-              <div className="line-clamp-2 truncate text-wrap">
+              <div className="w-full truncate pr-8">
                 {getTitle(child.data as ElementProperties).substring(0, 300)}
               </div>
-              <div className="absolute right-[10px] top-[10px] cursor-pointer hover:scale-125">
+              <div className="absolute right-[10px] top-[6px] cursor-pointer hover:scale-125">
                 <OptionRuleSvg title={t("groups.editRules", { name: node.data.label.name })} />
               </div>
             </button>

diff --git a/...m administration)/form-builder/[id]/edit/logic/components/flow/algorithms/d3-hierarchy.ts b/...m 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/...s)/[locale]/(form administration)/form-builder/[id]/edit/logic/components/flow/options.ts b/...s)/[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/...ocale]/(form administration)/form-builder/[id]/edit/logic/components/flow/useFlowData.tsx b/...ocale]/(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]);