Update RBAC editor to use a grid and make all dimensions consistent with grid

packages/builder/src/components/backend/RoleEditor/RoleEditor.svelte

@@ -8,7 +8,7 @@
   import { rolesToNodes, autoLayout } from "./layout"
   import { onMount, setContext } from "svelte"
   import Controls from "./Controls.svelte"
-  import { MaxAutoZoom } from "./constants"
+  import { GridResolution, MaxAutoZoom } from "./constants"
 
   const nodes = writable([])
   const edges = writable([])
@@ -34,7 +34,7 @@
     fitView
     {nodes}
     {edges}
-    snapGrid={[25, 25]}
+    snapGrid={[GridResolution, GridResolution]}
     nodeTypes={{ role: RoleNode }}
     edgeTypes={{ role: RoleEdge }}
     proOptions={{ hideAttribution: true }}
@@ -76,7 +76,6 @@
   .flow :global(.svelte-flow) {
     /* Panel */
     --xy-background-color: var(--background-color);
-    --xy-background-pattern-color-props: transparent;
 
     /* Controls */
     --xy-controls-button-background-color: var(--node-background);

packages/builder/src/components/backend/RoleEditor/RoleNode.svelte

@@ -156,28 +156,30 @@
     width: var(--width);
     height: var(--height);
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    box-sizing: border-box;
   }
   .node.selected {
     background: var(--spectrum-global-color-blue-100);
   }
   .color {
     border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    height: 8px;
-    width: 100%;
+    border-bottom-left-radius: 4px;
+    height: 100%;
+    width: 10px;
+    flex: 0 0 10px;
     background: var(--color);
   }
   .content {
     flex: 1 1 auto;
-    padding: 0 14px 0 14px;
+    padding: 0 12px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: stretch;
     gap: 2px;
     border: 1px solid var(--border-color);
-    border-bottom-left-radius: 4px;
+    border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
   }
   .node.selected .content {
@@ -199,8 +201,7 @@
   .title :global(.spectrum-Icon) {
     color: var(--spectrum-global-color-gray-600);
   }
-  .name,
-  .description {
+  .name {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -208,6 +209,12 @@
   .description {
     color: var(--spectrum-global-color-gray-600);
     font-size: 12px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    line-clamp: 1;
+    -webkit-box-orient: vertical;
   }
   .node:hover .buttons {
     display: flex;

packages/builder/src/components/backend/RoleEditor/constants.js

@@ -1,4 +1,5 @@
-export const NodeWidth = 220
-export const NodeHeight = 66
 export const ZoomDuration = 300
 export const MaxAutoZoom = 1.2
+export const GridResolution = 20
+export const NodeHeight = GridResolution * 3
+export const NodeWidth = GridResolution * 12

packages/builder/src/components/backend/RoleEditor/layout.js

@@ -1,5 +1,5 @@
 import dagre from "@dagrejs/dagre"
-import { NodeWidth, NodeHeight } from "./constants"
+import { NodeWidth, NodeHeight, GridResolution } from "./constants"
 import { Position } from "@xyflow/svelte"
 import { roles } from "stores/builder"
 import { Roles } from "constants/backend"
@@ -78,8 +78,8 @@ const dagreLayout = ({ nodes, edges }) => {
   dagreGraph.setDefaultEdgeLabel(() => ({}))
   dagreGraph.setGraph({
     rankdir: "LR",
-    ranksep: 200,
-    nodesep: 50,
+    ranksep: GridResolution * 6,
+    nodesep: GridResolution * 2,
   })
   nodes.forEach(node => {
     dagreGraph.setNode(node.id, { width: NodeWidth, height: NodeHeight })
@@ -89,12 +89,12 @@ const dagreLayout = ({ nodes, edges }) => {
   })
   dagre.layout(dagreGraph)
   nodes.forEach(node => {
-    const nodeWithPosition = dagreGraph.node(node.id)
+    const pos = dagreGraph.node(node.id)
     node.targetPosition = Position.Left
     node.sourcePosition = Position.Right
     node.position = {
-      x: nodeWithPosition.x - NodeWidth / 2,
-      y: nodeWithPosition.y - NodeHeight / 2,
+      x: Math.round((pos.x - NodeWidth / 2) / GridResolution) * GridResolution,
+      y: Math.round((pos.y - NodeHeight / 2) / GridResolution) * GridResolution,
     }
   })
   return { nodes, edges }