@likec4/diagram 1.19.1 → 1.20.0

package/src/overlays/{edge-details/use-layouted-edge-details.ts → relationship-details/useLayoutedDetails.ts}

@@ -1,46 +1,46 @@
 import dagre, { type GraphLabel, type Label } from '@dagrejs/dagre'
 import {
   type AbstractRelation,
-  compareFqnHierarchically,
-  compareRelations,
   type DiagramEdge,
   type DiagramNode,
   type DiagramView,
   type EdgeId,
   type Fqn,
+  type LikeC4Model,
+  type XYPoint,
+  compareFqnHierarchically,
+  compareRelations,
   invariant,
   isAncestor,
-  type LikeC4Model
 } from '@likec4/core'
-import { MarkerType } from '@xyflow/system'
 import { useMemo } from 'react'
 import { filter, first, forEach, isTruthy, map, pipe, prop, reverse, sort, sortBy, takeWhile } from 'remeda'
-import { useDiagramState } from '../../hooks/useDiagramState'
 import { useLikeC4Model } from '../../likec4model'
-import type { SharedFlowTypes } from '../shared/xyflow/_types'
-import type { EdgeDetailsFlowTypes } from './_types'
+import type { RelationshipDetailsTypes } from './_types'
 
 /**
  * All constants related to the layout
  */
 const Sizes = {
   dagre: {
-    ranksep: 40,
-    nodesep: 25,
-    edgesep: 15
+    ranksep: 60,
+    nodesep: 35,
+    edgesep: 25,
   } satisfies GraphLabel,
   edgeLabel: {
-    width: 120
+    width: 120,
+    height: 10,
+    minlen: 1,
   } satisfies Label,
 
-  nodeWidth: 270,
-  hodeHeight: 160,
+  nodeWidth: 330,
+  hodeHeight: 180,
 
   // Spacer between elements in a compound node
   // 0 means no spacer
   spacerHeight: 0,
 
-  compoundLabelHeight: 5
+  compoundLabelHeight: 5,
 }
 
 export const ZIndexes = {
@@ -48,47 +48,54 @@ export const ZIndexes = {
   edge: 3,
   element: 4,
 
-  max: 5
+  max: 5,
 }
 
+// type DagreNodeData = {
+//   portId: string
+//   element: LikeC4Model.Element
+//   isCompound: boolean
+//   inPorts: string[]
+//   outPorts: string[]
+// }
+
 function createGraph() {
   const g = new dagre.graphlib.Graph({
     directed: true,
-    compound: true
+    compound: true,
   })
   g.setGraph({
     ...Sizes.dagre,
-    rankdir: 'LR'
+    rankdir: 'LR',
   })
   g.setDefaultEdgeLabel(() => ({ ...Sizes.edgeLabel }))
   g.setDefaultNodeLabel(() => ({}))
 
   return g
 }
+type G = ReturnType<typeof createGraph>
 
 type Context = {
-  g: dagre.graphlib.Graph
+  g: ReturnType<typeof createGraph>
   diagramNodes: Map<Fqn, DiagramNode>
-  xynodes: Map<Fqn, SharedFlowTypes.NonEmptyNode>
+  xynodes: Map<Fqn, RelationshipDetailsTypes.Node>
   edge: DiagramEdge
-  edges: EdgeDetailsFlowTypes.Edge[]
+  xyedges: RelationshipDetailsTypes.Edge[]
 }
 const sized = (height: number = Sizes.hodeHeight) => ({
   width: Sizes.nodeWidth,
-  height
+  height,
 })
 
-const graphId = (node: SharedFlowTypes.Node) => ({
+const graphId = (node: RelationshipDetailsTypes.Node) => ({
   id: node.id,
   port: node.type === 'compound' ? `${node.id}::port` : node.id,
-  body: `${node.id}`,
-  spacer: `${node.id}:spacer`
 })
 
 function nodeData(
   element: LikeC4Model.Element,
-  ctx: Context
-): SharedFlowTypes.OverlayNodeData {
+  ctx: Context,
+): RelationshipDetailsTypes.ElementNodeData & RelationshipDetailsTypes.CompoundNodeData {
   // We try to inherit style from existing diagram node
   let diagramNode = ctx.diagramNodes.get(element.id)
 
@@ -98,31 +105,34 @@ function nodeData(
     element.ancestors().toArray(),
     map(ancestor => ctx.diagramNodes.get(ancestor.id)),
     filter(isTruthy),
-    first()
+    first(),
   )
 
   return {
     fqn: element.id,
-    element: {
-      kind: element.kind,
-      title: diagramNode?.title ?? element.title,
-      description: diagramNode?.description ?? element.description,
-      color: diagramNode?.color ?? ancestor?.color ?? element.color,
-      shape: diagramNode?.shape ?? element.shape
-    },
+    title: diagramNode?.title ?? element.title,
+    technology: diagramNode?.technology ?? element.technology,
+    description: diagramNode?.description ?? element.description,
+    color: diagramNode?.color ?? ancestor?.color ?? element.color,
+    shape: diagramNode?.shape ?? element.shape,
+    icon: diagramNode?.icon ?? element.icon,
+    style: diagramNode?.style ?? element.$element.style ?? {},
     navigateTo: diagramNode?.navigateTo ?? first(element.scopedViews().take(1).toArray())?.id ?? null,
+    width: 0,
+    height: 0,
+    depth: 1,
     ports: {
       in: [],
-      out: []
-    }
+      out: [],
+    },
   }
 }
 
-function createNode(
-  nodeType: SharedFlowTypes.NonEmptyNode['type'],
+function createXYNode(
+  nodeType: RelationshipDetailsTypes.Node['type'],
   element: LikeC4Model.Element,
-  ctx: Context
-): SharedFlowTypes.Node {
+  ctx: Context,
+): RelationshipDetailsTypes.Node {
   let node = ctx.xynodes.get(element.id)
   if (node) {
     return node
@@ -131,21 +141,31 @@ function createNode(
 
   // Create parent node
   const parent = pipe(
-    element.ancestors().toArray(),
+    [...element.ancestors()],
     takeWhile(ancestor => !isAncestor(ancestor.id, ctx.edge.source) && !isAncestor(ancestor.id, ctx.edge.target)),
     first(),
-    found => found ? createNode('compound', found, ctx) : null
+    found => found ? createXYNode('compound', found, ctx) : null,
   )
 
-  const xynode: SharedFlowTypes.NonEmptyNode = {
-    type: nodeType,
+  const isCompound = nodeType === 'compound'
+
+  const base = {
     id: element.id,
+    draggable: false,
+    selectable: true,
+    focusable: true,
+    deletable: false,
     position: { x: 0, y: 0 },
-    data: {
-      ...nodeData(element, ctx)
-    },
     zIndex: ZIndexes[nodeType],
-    ...(!!parent && { parentId: parent.id })
+    initialWidth: 0,
+    initialHeight: 0,
+    ...(!!parent && { parentId: parent.id }),
+  } satisfies Omit<RelationshipDetailsTypes.Node, 'data' | 'type'>
+
+  const xynode: RelationshipDetailsTypes.Node = {
+    ...base,
+    type: nodeType,
+    data: nodeData(element, ctx),
   }
   ctx.xynodes.set(element.id, xynode)
   const k = graphId(xynode)
@@ -156,23 +176,14 @@ function createNode(
   if (xynode.type === 'compound') {
     g.setNode(k.port, {
       width: Sizes.nodeWidth - Sizes.dagre.ranksep,
-      height: Sizes.compoundLabelHeight
+      height: Sizes.compoundLabelHeight,
     })
     g.setParent(k.port, k.id)
   }
 
   if (parent) {
-    const parentGraphId = graphId(parent).body
+    const parentGraphId = graphId(parent).id
     g.setParent(k.id, parentGraphId)
-
-    // Add spacer after the last element
-    if (Sizes.spacerHeight > 0) {
-      g.setNode(k.spacer, {
-        width: Sizes.nodeWidth - Sizes.dagre.ranksep,
-        height: Sizes.compoundLabelHeight
-      })
-      g.setParent(k.spacer, parentGraphId)
-    }
   }
 
   return xynode
@@ -182,18 +193,21 @@ function createNode(
  * Apply dagre layout to the graph
  * And return a function to get node bounds for xyflow
  */
-function applyDagreLayout(g: dagre.graphlib.Graph) {
-  type NodeBounds = Required<Pick<SharedFlowTypes.Node, 'position' | 'width' | 'height'>>
+function applyDagreLayout(g: G) {
   dagre.layout(g)
-  return function nodeBounds(nodeId: string, relativeTo?: string): NodeBounds {
+  return function nodeBounds(nodeId: string, relativeTo?: string): {
+    position: XYPoint
+    width: number
+    height: number
+  } {
     const { x, y, width, height } = g.node(nodeId)
     const pos = {
       position: {
         x: x - Math.round(width / 2),
-        y: y - Math.round(height / 2)
+        y: y - Math.round(height / 2),
       },
       width,
-      height
+      height,
     }
     if (!relativeTo) {
       return pos
@@ -202,27 +216,24 @@ function applyDagreLayout(g: dagre.graphlib.Graph) {
     return {
       position: {
         x: pos.position.x - offset.x,
-        y: pos.position.y - offset.y
+        y: pos.position.y - offset.y,
       },
       width: pos.width,
-      height: pos.height
+      height: pos.height,
     }
   }
 }
 
 function layout(
-  edgeId: EdgeId,
+  edge: DiagramEdge,
   view: DiagramView,
-  likec4model: LikeC4Model
+  likec4model: LikeC4Model,
 ): {
-  view: DiagramView
   edge: DiagramEdge
-  nodes: SharedFlowTypes.Node[]
-  edges: EdgeDetailsFlowTypes.Edge[]
+  xynodes: RelationshipDetailsTypes.Node[]
+  xyedges: RelationshipDetailsTypes.Edge[]
   bounds: { x: number; y: number; width: number; height: number }
 } {
-  const edge = view.edges.find(e => e.id === edgeId)
-  invariant(edge, 'edge not found')
   const all = new Set([edge.source, edge.target])
 
   const relations = edge.relations
@@ -233,7 +244,7 @@ function layout(
       return {
         source: relation.source.id,
         target: relation.target.id,
-        relation: relation.$relationship as AbstractRelation
+        relation: relation.$relationship as AbstractRelation,
       }
     })
     .sort(compareRelations)
@@ -247,7 +258,7 @@ function layout(
     xynodes: new Map(),
     edge,
     diagramNodes,
-    edges: []
+    xyedges: [],
   }
 
   pipe(
@@ -256,8 +267,8 @@ function layout(
     reverse(),
     forEach(id => {
       const element = likec4model.element(id)
-      createNode('element', element, ctx)
-    })
+      createXYNode('element', element, ctx)
+    }),
   )
 
   if (relations.length === 1 && all.size < 4) {
@@ -274,31 +285,25 @@ function layout(
     target.data.ports.in.push(source.id)
 
     g.setEdge(graphId(source).port, graphId(target).port)
-    const edge: EdgeDetailsFlowTypes.Edge = {
+    const edge: RelationshipDetailsTypes.Edge = {
       id: relation.id,
-      type: 'relation',
+      type: 'relationship',
       source: source.id,
       target: target.id,
       sourceHandle: target.id,
       targetHandle: source.id,
       data: {
-        relations: [relation],
+        relationId: relation.id,
+        color: relation.color,
+        label: relation.title ?? null,
+        technology: relation.technology,
+        description: relation.description,
         navigateTo: relation.navigateTo ?? null,
-        technology: relation.technology ?? null,
-        description: relation.description ?? null
+        line: relation.line ?? 'dashed',
       },
-      label: relation.title,
       zIndex: ZIndexes.edge,
-      markerEnd: {
-        type: MarkerType.ArrowClosed,
-        width: 10
-      },
-      style: {
-        strokeWidth: 2.2,
-        strokeDasharray: '5, 5'
-      }
     }
-    ctx.edges.push(edge)
+    ctx.xyedges.push(edge)
   }
 
   const nodebounds = applyDagreLayout(ctx.g)
@@ -313,53 +318,62 @@ function layout(
       map(port => {
         return {
           port,
-          topY: nodebounds(port).position.y
+          topY: nodebounds(port).position.y,
         }
       }),
       sortBy(prop('topY')),
-      map(prop('port'))
+      map(prop('port')),
     )
   }
 
   const xynodes = [...ctx.xynodes.values()].map((node) => {
-    if (node.data.ports.in.length > 1) {
-      node.data.ports.in = sortedPorts(node.data.ports.in)
+    const { position, width, height } = nodebounds(node.id, node.parentId)
+    node.data.ports.in = sortedPorts(node.data.ports.in)
+    node.data.ports.out = sortedPorts(node.data.ports.out)
+    if (node.type === 'element') {
+      node.data.width = width
+      node.data.height = height
     }
-    if (node.data.ports.out.length > 1) {
-      node.data.ports.out = sortedPorts(node.data.ports.out)
-    }
-    return {
-      ...node,
-      ...nodebounds(node.id, node.parentId)
+    node.position = position
+    node.initialHeight = height
+    node.initialWidth = width
+    node.style = {
+      width,
+      height,
     }
+    return node
   })
 
   return {
-    view,
     edge,
-    edges: ctx.edges,
-    nodes: xynodes,
+    xyedges: ctx.xyedges,
+    xynodes,
     bounds: {
       x: 0,
       y: 0,
       width: g.graph().width ?? 0,
-      height: g.graph().height ?? 0
-    }
+      height: g.graph().height ?? 0,
+    },
   }
 }
 
-export function useLayoutedEdgeDetails(edgeId: EdgeId) {
-  const view = useDiagramState(s => s.view)
+export function useLayoutedDetails(edgeId: EdgeId, view: DiagramView): {
+  edge: DiagramEdge
+  xynodes: RelationshipDetailsTypes.Node[]
+  xyedges: RelationshipDetailsTypes.Edge[]
+  bounds: { x: number; y: number; width: number; height: number }
+} {
+  const edge = view.edges.find(e => e.id === edgeId)
+  invariant(edge, `edge ${edgeId} not found in ${view.id}`)
   const likec4model = useLikeC4Model(true)
   return useMemo(() =>
     layout(
-      edgeId,
+      edge,
       view,
-      likec4model
+      likec4model,
     ), [
-    edgeId,
+    edge,
     view,
-    likec4model,
-    layout
+    layout,
   ])
 }