@likec4/diagram 1.13.0 → 1.15.0

package/src/overlays/edge-details/use-layouted-edge-details.ts

@@ -0,0 +1,356 @@
+import dagre, { type GraphLabel, type Label } from '@dagrejs/dagre'
+import {
+  compareFqnHierarchically,
+  compareRelations,
+  type DiagramEdge,
+  type DiagramNode,
+  type DiagramView,
+  type EdgeId,
+  type Fqn,
+  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 { XYFlowTypes } from './_types'
+
+/**
+ * All constants related to the layout
+ */
+const Sizes = {
+  dagre: {
+    ranksep: 40,
+    nodesep: 25,
+    edgesep: 15
+  } satisfies GraphLabel,
+  edgeLabel: {
+    width: 120
+  } satisfies Label,
+
+  nodeWidth: 270,
+  hodeHeight: 160,
+
+  // Spacer between elements in a compound node
+  // 0 means no spacer
+  spacerHeight: 0,
+
+  compoundLabelHeight: 5
+}
+
+export const ZIndexes = {
+  compound: 2,
+  edge: 3,
+  element: 4,
+
+  max: 5
+}
+
+function createGraph() {
+  const g = new dagre.graphlib.Graph({
+    directed: true,
+    compound: true
+  })
+  g.setGraph({
+    ...Sizes.dagre,
+    rankdir: 'LR'
+  })
+  g.setDefaultEdgeLabel(() => ({ ...Sizes.edgeLabel }))
+  g.setDefaultNodeLabel(() => ({}))
+
+  return g
+}
+
+type Context = {
+  g: dagre.graphlib.Graph
+  diagramNodes: Map<Fqn, DiagramNode>
+  xynodes: Map<Fqn, XYFlowTypes.Node>
+  edge: DiagramEdge
+  edges: XYFlowTypes.Edge[]
+}
+const sized = (height: number = Sizes.hodeHeight) => ({
+  width: Sizes.nodeWidth,
+  height
+})
+
+const graphId = (node: XYFlowTypes.Node) => ({
+  id: node.id,
+  port: node.type === 'compound' ? `${node.id}::port` : node.id,
+  body: `${node.id}`,
+  spacer: `${node.id}:spacer`
+})
+
+function nodeData(
+  element: LikeC4Model.ElementModel,
+  ctx: Context
+): Omit<XYFlowTypes.Node['data'], 'column'> {
+  // We try to inherit style from existing diagram node
+  let diagramNode = ctx.diagramNodes.get(element.id)
+
+  // Ansector separetely, because we want to inherit
+  // color from it if there is no diagram node
+  const ancestor = diagramNode ?? pipe(
+    element.ancestors(),
+    map(ancestor => ctx.diagramNodes.get(ancestor.id)),
+    filter(isTruthy),
+    first()
+  )
+
+  return {
+    fqn: element.id,
+    element: {
+      kind: element.kind,
+      title: diagramNode?.title ?? element.title,
+      description: diagramNode?.description ?? element.element.description,
+      color: diagramNode?.color ?? ancestor?.color ?? element.color,
+      shape: diagramNode?.shape ?? element.shape
+    },
+    navigateTo: diagramNode?.navigateTo ?? first(element.viewsOf())?.id ?? null,
+    ports: {
+      in: [],
+      out: []
+    }
+  }
+}
+
+function createNode(
+  nodeType: XYFlowTypes.Node['type'],
+  element: LikeC4Model.ElementModel,
+  ctx: Context
+): XYFlowTypes.Node {
+  let node = ctx.xynodes.get(element.id)
+  if (node) {
+    return node
+  }
+  const g = ctx.g
+
+  // Create parent node
+  const parent = pipe(
+    element.ancestors(),
+    takeWhile(ancestor => !isAncestor(ancestor.id, ctx.edge.source) && !isAncestor(ancestor.id, ctx.edge.target)),
+    first(),
+    found => found ? createNode('compound', found, ctx) : null
+  )
+
+  const xynode: XYFlowTypes.Node = {
+    type: nodeType,
+    id: element.id,
+    position: { x: 0, y: 0 },
+    data: {
+      ...nodeData(element, ctx)
+    },
+    zIndex: ZIndexes[nodeType],
+    ...(!!parent && { parentId: parent.id })
+  }
+  ctx.xynodes.set(element.id, xynode)
+  const k = graphId(xynode)
+  g.setNode(k.id, sized())
+
+  // There is one-to-one mapping between XYFlow node and dagre node
+  // Compound node has two nodes: body and port (for edges)
+  if (xynode.type === 'compound') {
+    g.setNode(k.port, {
+      width: Sizes.nodeWidth - Sizes.dagre.ranksep,
+      height: Sizes.compoundLabelHeight
+    })
+    g.setParent(k.port, k.id)
+  }
+
+  if (parent) {
+    const parentGraphId = graphId(parent).body
+    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
+}
+
+/**
+ * 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<XYFlowTypes.Node, 'position' | 'width' | 'height'>>
+  dagre.layout(g)
+  return function nodeBounds(nodeId: string, relativeTo?: string): NodeBounds {
+    const { x, y, width, height } = g.node(nodeId)
+    const pos = {
+      position: {
+        x: x - Math.round(width / 2),
+        y: y - Math.round(height / 2)
+      },
+      width,
+      height
+    }
+    if (!relativeTo) {
+      return pos
+    }
+    const offset = nodeBounds(relativeTo).position
+    return {
+      position: {
+        x: pos.position.x - offset.x,
+        y: pos.position.y - offset.y
+      },
+      width: pos.width,
+      height: pos.height
+    }
+  }
+}
+
+function layout(
+  edgeId: EdgeId,
+  view: DiagramView,
+  likec4model: LikeC4Model
+): {
+  view: DiagramView
+  edge: DiagramEdge
+  nodes: XYFlowTypes.Node[]
+  edges: XYFlowTypes.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
+    .map(r => {
+      const relation = likec4model.relationship(r).relationship
+      all.add(relation.source)
+      all.add(relation.target)
+      return relation
+    })
+    .sort(compareRelations)
+    .reverse()
+
+  const diagramNodes = new Map(view.nodes.map(n => [n.id, n]))
+  const g = createGraph()
+
+  const ctx: Context = {
+    g,
+    xynodes: new Map(),
+    edge,
+    diagramNodes,
+    edges: []
+  }
+
+  pipe(
+    [...all],
+    sort(compareFqnHierarchically),
+    reverse(),
+    forEach(id => {
+      const element = likec4model.element(id)
+      createNode('element', element, ctx)
+    })
+  )
+
+  if (relations.length === 1 && all.size < 4) {
+    g.setDefaultEdgeLabel(() => ({ width: 250 }))
+  }
+
+  for (const relation of relations) {
+    const source = ctx.xynodes.get(relation.source)
+    invariant(source, 'source node not found')
+    const target = ctx.xynodes.get(relation.target)
+    invariant(target, 'target node not found')
+
+    source.data.ports.out.push(target.id)
+    target.data.ports.in.push(source.id)
+
+    g.setEdge(graphId(source).port, graphId(target).port)
+    const edge: XYFlowTypes.Edge = {
+      id: relation.id,
+      type: 'relation',
+      source: source.id,
+      target: target.id,
+      sourceHandle: target.id,
+      targetHandle: source.id,
+      data: {
+        relation
+      },
+      label: relation.title,
+      zIndex: ZIndexes.edge,
+      markerEnd: {
+        type: MarkerType.ArrowClosed,
+        width: 10
+      },
+      style: {
+        strokeWidth: 2.2,
+        strokeDasharray: '5, 5'
+      }
+    }
+    ctx.edges.push(edge)
+  }
+
+  const nodebounds = applyDagreLayout(ctx.g)
+
+  // Sort ports
+  const sortedPorts = (ports: string[]) => {
+    if (ports.length < 2) {
+      return ports
+    }
+    return pipe(
+      ports,
+      map(port => {
+        return {
+          port,
+          topY: nodebounds(port).position.y
+        }
+      }),
+      sortBy(prop('topY')),
+      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)
+    }
+    if (node.data.ports.out.length > 1) {
+      node.data.ports.out = sortedPorts(node.data.ports.out)
+    }
+    return {
+      ...node,
+      ...nodebounds(node.id, node.parentId)
+    }
+  })
+
+  return {
+    view,
+    edge,
+    edges: ctx.edges,
+    nodes: xynodes,
+    bounds: {
+      x: 0,
+      y: 0,
+      width: g.graph().width ?? 0,
+      height: g.graph().height ?? 0
+    }
+  }
+}
+
+export function useLayoutedEdgeDetails(edgeId: EdgeId) {
+  const view = useDiagramState(s => s.view)
+  const likec4model = useLikeC4Model(true)
+  return useMemo(() =>
+    layout(
+      edgeId,
+      view,
+      likec4model
+    ), [
+    edgeId,
+    view,
+    likec4model,
+    layout
+  ])
+}

package/src/overlays/edge-details/xyflow/CompoundNode.tsx

@@ -0,0 +1,80 @@
+import { Text as MantineText } from '@mantine/core'
+import { Handle, type NodeProps, Position } from '@xyflow/react'
+import clsx from 'clsx'
+import { m } from 'framer-motion'
+import type { XYFlowTypes } from '../_types'
+import * as css from './styles.css'
+
+const Text = MantineText.withProps({
+  component: 'div'
+})
+
+type CompoundNodeProps = NodeProps<XYFlowTypes.CompoundNode>
+
+export function CompoundNode({
+  data: {
+    element,
+    ports,
+    ...data
+  },
+  width = 200,
+  selectable = true
+}: CompoundNodeProps) {
+  return (
+    <>
+      <m.div
+        className={clsx([
+          css.compoundNodeBody,
+          'likec4-compound-node'
+        ])}
+        data-compound-depth={3}
+        data-likec4-color={element.color}
+        animate={{
+          opacity: data.dimmed ? 0.15 : 1,
+          transition: {
+            delay: data.dimmed === true ? .4 : 0
+          }
+        }}
+        {...(selectable && {
+          whileHover: {
+            scale: 1.04,
+            transition: {
+              delay: 0.15
+            }
+          },
+          whileTap: {
+            scale: 1
+          }
+        })}
+      >
+        <Text className={css.compoundNodeTitle} maw={width - 20}>{element.title}</Text>
+      </m.div>
+      {ports.out.map((id, i) => (
+        <Handle
+          key={id}
+          id={id}
+          type={'source'}
+          position={Position.Right}
+          style={{
+            visibility: 'hidden',
+            top: `${16 + 20 * i}px`
+          }} />
+      ))}
+      {ports.in.map((id, i) => (
+        <Handle
+          key={id}
+          id={id}
+          type={'target'}
+          position={Position.Left}
+          style={{
+            visibility: 'hidden',
+            top: `${16 + 20 * i}px`
+          }} />
+      ))}
+      {
+        /* <Handle type="target" position={Position.Left}/>
+      <Handle type="source" position={Position.Right}/> */
+      }
+    </>
+  )
+}

package/src/overlays/edge-details/xyflow/ElementNode.tsx

@@ -0,0 +1,154 @@
+import { ActionIcon, Box, Group, Text as MantineText } from '@mantine/core'
+import { IconFileSymlink, IconTransform, IconZoomScan } from '@tabler/icons-react'
+import { Handle, type NodeProps, Position } from '@xyflow/react'
+import clsx from 'clsx'
+import { m } from 'framer-motion'
+import { type DiagramState, useDiagramState } from '../../../hooks'
+import { ElementShapeSvg } from '../../../xyflow/nodes/element/ElementShapeSvg'
+import { stopPropagation } from '../../../xyflow/utils'
+import { useOverlayDialog } from '../../OverlayContext'
+import type { XYFlowTypes } from '../_types'
+import * as css from './styles.css'
+
+const Action = ActionIcon.withProps({
+  className: 'nodrag nopan ' + css.navigateBtn,
+  radius: 'md',
+  role: 'button',
+  onDoubleClick: stopPropagation,
+  onPointerDownCapture: stopPropagation
+})
+
+const Text = MantineText.withProps({
+  component: 'div'
+})
+
+type ElementNodeProps = NodeProps<XYFlowTypes.ElementNode>
+
+function selector(s: DiagramState) {
+  return {
+    currentViewId: s.view.id,
+    onNavigateTo: s.onNavigateTo,
+    onOpenSource: s.onOpenSourceElement
+  }
+}
+
+export function ElementNode({
+  data: {
+    element,
+    ports,
+    navigateTo,
+    ...data
+  },
+  selectable = true,
+  width: w = 100,
+  height: h = 100
+}: ElementNodeProps) {
+  const overlay = useOverlayDialog()
+  const {
+    currentViewId,
+    onNavigateTo,
+    onOpenSource
+  } = useDiagramState(selector)
+  return (
+    <>
+      <m.div
+        className={clsx([
+          css.elementNode,
+          'likec4-element-node'
+        ])}
+        data-likec4-color={element.color}
+        data-likec4-shape={element.shape}
+        animate={{
+          opacity: data.dimmed ? 0.15 : 1,
+          transition: {
+            delay: data.dimmed === true ? .4 : 0
+          }
+        }}
+        {...(selectable && {
+          whileHover: {
+            scale: 1.045,
+            transition: {
+              delay: 0.15
+            }
+          },
+          whileTap: {
+            scale: 0.97
+          }
+        })}
+      >
+        <svg
+          className={clsx(
+            css.cssShapeSvg
+          )}
+          viewBox={`0 0 ${w} ${h}`}
+          width={w}
+          height={h}
+        >
+          <ElementShapeSvg shape={element.shape} w={w} h={h} />
+        </svg>
+        <Box className={css.elementNodeContent}>
+          <Text className={css.elementNodeTitle} lineClamp={2}>{element.title}</Text>
+          {element.description && (
+            <Text className={css.elementNodeDescription} lineClamp={4}>{element.description}</Text>
+          )}
+        </Box>
+        <Group className={css.navigateBtnBox}>
+          {navigateTo && onNavigateTo && navigateTo !== currentViewId && (
+            <Action
+              onClick={(event) => {
+                event.stopPropagation()
+                setTimeout(() => onNavigateTo(navigateTo), 100)
+                overlay.close()
+              }}>
+              <IconZoomScan stroke={1.8} style={{ width: '75%' }} />
+            </Action>
+          )}
+          <Action
+            onClick={(event) => {
+              event.stopPropagation()
+              overlay.openOverlay({
+                relationshipsOf: data.fqn
+              })
+            }}>
+            <IconTransform stroke={1.8} style={{ width: '72%' }} />
+          </Action>
+          {onOpenSource && (
+            <Action
+              onClick={(event) => {
+                event.stopPropagation()
+                onOpenSource(data.fqn)
+              }}>
+              <IconFileSymlink stroke={1.8} style={{ width: '72%' }} />
+            </Action>
+          )}
+        </Group>
+      </m.div>
+      {ports.out.map((id, i) => (
+        <Handle
+          key={id}
+          id={id}
+          type="source"
+          position={Position.Right}
+          style={{
+            visibility: 'hidden',
+            top: `${15 + (i + 1) * ((h - 30) / (ports.out.length + 1))}px`
+          }} />
+      ))}
+      {ports.in.map((id, i) => (
+        <Handle
+          key={id}
+          id={id}
+          type="target"
+          position={Position.Left}
+          style={{
+            visibility: 'hidden',
+            top: `${15 + (i + 1) * ((h - 30) / (ports.in.length + 1))}px`
+          }} />
+      ))}
+      {
+        /* <Handle type="target" position={Position.Left} />
+      <Handle type="source" position={Position.Right} /> */
+      }
+    </>
+  )
+}

package/src/overlays/edge-details/xyflow/RelationshipEdge.tsx

@@ -0,0 +1,81 @@
+import { ActionIcon, Box, Stack, Text } from '@mantine/core'
+import { IconZoomScan } from '@tabler/icons-react'
+import { BaseEdge, EdgeLabelRenderer, type EdgeProps, getBezierPath } from '@xyflow/react'
+import clsx from 'clsx'
+import { useDiagramState } from '../../../hooks/useDiagramState'
+import { stopPropagation } from '../../../xyflow/utils'
+import type { XYFlowTypes } from '../_types'
+import { ZIndexes } from '../use-layouted-edge-details'
+import * as css from './styles.css'
+
+export function RelationshipEdge({
+  data,
+  label,
+  ...props
+}: EdgeProps<XYFlowTypes.Edge>) {
+  const onNavigateTo = useDiagramState(s => s.onNavigateTo)
+  const [edgePath, labelX, labelY] = getBezierPath(props)
+  const navigateTo = data.relation.navigateTo
+  return (
+    <>
+      <g
+        className={css.edgePath}
+        data-edge-dimmed={data.dimmed}
+        data-edge-hovered={data.hovered}
+      >
+        <BaseEdge
+          path={edgePath}
+          {...props}
+        />
+      </g>
+      <EdgeLabelRenderer>
+        <Stack
+          gap={2}
+          style={{
+            position: 'absolute',
+            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+            maxWidth: Math.abs(props.targetX - props.sourceX - 40),
+            zIndex: ZIndexes.max
+          }}
+          className={clsx([
+            css.edgeLabel,
+            'nodrag nopan'
+          ])}
+          data-edge-dimmed={data.dimmed}
+          data-edge-hovered={data.hovered}
+        >
+          {label && (
+            <Text component={'div'} className={css.edgeLabelText} lineClamp={3}>
+              {label}
+            </Text>
+          )}
+          {data.relation.technology && (
+            <Text component={'div'} className={css.edgeLabelTechnology}>
+              {'[ '}
+              {data.relation.technology}
+              {' ]'}
+            </Text>
+          )}
+          {navigateTo && onNavigateTo && (
+            <Box ta={'center'} mt={4}>
+              <ActionIcon
+                variant="default"
+                size={'sm'}
+                radius="sm"
+                onPointerDownCapture={stopPropagation}
+                onClick={event => {
+                  event.stopPropagation()
+                  onNavigateTo(navigateTo, event)
+                }}
+                role="button"
+                onDoubleClick={stopPropagation}
+              >
+                <IconZoomScan />
+              </ActionIcon>
+            </Box>
+          )}
+        </Stack>
+      </EdgeLabelRenderer>
+    </>
+  )
+}