@likec4/diagram 1.17.1 → 1.19.0

package/src/overlays/edge-details/EdgeDetailsXYFlow.tsx

@@ -11,8 +11,10 @@ import {
   ViewportPortal
 } from '@xyflow/react'
 import { memo, useEffect } from 'react'
+import { only } from 'remeda'
 import { useDiagramStoreApi } from '../../hooks/useDiagramState'
-import type { XYFlowTypes } from './_types'
+import type { SharedFlowTypes } from '../shared/xyflow/_types'
+import type { EdgeDetailsFlowTypes } from './_types'
 import { SelectEdge } from './SelectEdge'
 import * as css from './SelectEdge.css'
 import { useLayoutedEdgeDetails, ZIndexes } from './use-layouted-edge-details'
@@ -28,7 +30,7 @@ const edgeTypes = {
   relation: RelationshipEdge
 }
 
-const resetDimmedAndHovered = (xyflow: ReactFlowInstance<XYFlowTypes.Node, XYFlowTypes.Edge>) => {
+const resetDimmedAndHovered = (xyflow: ReactFlowInstance<SharedFlowTypes.Node, EdgeDetailsFlowTypes.Edge>) => {
   xyflow.setEdges(edges =>
     edges.map(edge => ({
       ...edge,
@@ -49,12 +51,12 @@ const resetDimmedAndHovered = (xyflow: ReactFlowInstance<XYFlowTypes.Node, XYFlo
           dimmed: false,
           hovered: false
         }
-      }) as XYFlowTypes.Node
+      }) as SharedFlowTypes.Node
     )
   )
 }
 
-const animateEdge = (node: XYFlowTypes.Node, animated = true) => (edges: XYFlowTypes.Edge[]) => {
+const animateEdge = (node: SharedFlowTypes.Node, animated = true) => (edges: EdgeDetailsFlowTypes.Edge[]) => {
   return edges.map(edge => {
     const isConnected = edge.source === node.id || edge.target === node.id || isAncestor(node.id, edge.source)
       || isAncestor(node.id, edge.target)
@@ -78,8 +80,8 @@ export const EdgeDetailsXYFlow = memo<{ edgeId: EdgeId }>(function EdgeDetailsXY
 
   const boundsRef = useSyncedRef(bounds)
 
-  const xyflow = useReactFlow<XYFlowTypes.Node, XYFlowTypes.Edge>()
-  const xystore = useStoreApi<XYFlowTypes.Node, XYFlowTypes.Edge>()
+  const xyflow = useReactFlow<SharedFlowTypes.Node, EdgeDetailsFlowTypes.Edge>()
+  const xystore = useStoreApi<SharedFlowTypes.Node, EdgeDetailsFlowTypes.Edge>()
 
   const fitview = useDebouncedCallback(
     () => {
@@ -115,8 +117,8 @@ export const EdgeDetailsXYFlow = memo<{ edgeId: EdgeId }>(function EdgeDetailsXY
 
   return (
     <ReactFlow
-      defaultEdges={[] as XYFlowTypes.Edge[]}
-      defaultNodes={[] as XYFlowTypes.Node[]}
+      defaultEdges={[] as EdgeDetailsFlowTypes.Edge[]}
+      defaultNodes={[] as SharedFlowTypes.Node[]}
       nodeTypes={nodeTypes}
       edgeTypes={edgeTypes}
       defaultMarkerColor="var(--xy-edge-stroke)"
@@ -168,7 +170,7 @@ export const EdgeDetailsXYFlow = memo<{ edgeId: EdgeId }>(function EdgeDetailsXY
               ...n.data,
               dimmed: n.id !== edge.source && n.id !== edge.target
             }
-          } as XYFlowTypes.Node))
+          } as SharedFlowTypes.Node))
         )
       }}
       onEdgeMouseLeave={() => {
@@ -194,7 +196,13 @@ export const EdgeDetailsXYFlow = memo<{ edgeId: EdgeId }>(function EdgeDetailsXY
       // }}
       onEdgeClick={(e, edge) => {
         e.stopPropagation()
-        diagramStore.getState().onOpenSourceRelation?.(edge.data.relation.id)
+        // edge-details only ever deals with edges that represent only one relation
+        let relationId = only(edge.data.relations)?.id
+        if (relationId) {
+          diagramStore.getState().onOpenSource?.({
+            relation: relationId
+          })
+        }
       }}
       // onEdgeClick={(e, edge) => {
       //   e.stopPropagation()

package/src/overlays/edge-details/_types.ts

@@ -1,38 +1,18 @@
-import type { ComputedNode, Fqn, Relation, ViewID } from '@likec4/core'
-import type { Edge as ReactFlowEdge, Node as ReactFlowNode, ReactFlowInstance } from '@xyflow/react'
-import type { SetRequired } from 'type-fest'
+import type { AddEdgeData } from '../../utils/types'
+import type { SharedFlowTypes } from '../shared/xyflow/_types'
 
-export namespace XYFlowTypes {
-  type NodeProps = {
-    fqn: Fqn
-    element: Pick<ComputedNode, 'color' | 'title' | 'description' | 'shape' | 'kind'>
-    ports: {
-      in: string[]
-      out: string[]
-    }
-    navigateTo: ViewID | null
-    hovered?: boolean
-    /**
-     * Whether the node is dimmed
-     * 'immediate' means that the node is dimmed without delay
-     */
-    dimmed?: 'immediate' | boolean
-  }
-
-  export type ElementNode = SetRequired<ReactFlowNode<NodeProps, 'element'>, 'type'>
-
-  export type CompoundNode = SetRequired<ReactFlowNode<NodeProps, 'compound'>, 'type'>
+export namespace EdgeDetailsFlowTypes {
 
-  export type Node = ElementNode | CompoundNode
-
-  export type Edge = Omit<ReactFlowEdge, 'data' | 'type'> & {
-    data: {
-      relation: Relation
-      hovered?: boolean
-      dimmed?: boolean
-    }
-    type: 'relation'
+  /**
+   * Data that is exclusive to the edge-details overlay. It will be merged into the edge types
+   * provided by SharedFlowTypes.
+   */
+  type EdgeDetailsEdgeData = {
+    technology: string | null
+    description: string | null
   }
 
-  export type Instance = ReactFlowInstance<Node, Edge>
+  // Extend the edge types provided by SharedFlowTypes with EdgeDetailsEdgeData
+
+  export type Edge = AddEdgeData<SharedFlowTypes.Edge, EdgeDetailsEdgeData>
 }

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

@@ -1,5 +1,6 @@
 import dagre, { type GraphLabel, type Label } from '@dagrejs/dagre'
 import {
+  type AbstractRelation,
   compareFqnHierarchically,
   compareRelations,
   type DiagramEdge,
@@ -16,7 +17,8 @@ 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'
+import type { SharedFlowTypes } from '../shared/xyflow/_types'
+import type { EdgeDetailsFlowTypes } from './_types'
 
 /**
  * All constants related to the layout
@@ -67,16 +69,16 @@ function createGraph() {
 type Context = {
   g: dagre.graphlib.Graph
   diagramNodes: Map<Fqn, DiagramNode>
-  xynodes: Map<Fqn, XYFlowTypes.Node>
+  xynodes: Map<Fqn, SharedFlowTypes.NonEmptyNode>
   edge: DiagramEdge
-  edges: XYFlowTypes.Edge[]
+  edges: EdgeDetailsFlowTypes.Edge[]
 }
 const sized = (height: number = Sizes.hodeHeight) => ({
   width: Sizes.nodeWidth,
   height
 })
 
-const graphId = (node: XYFlowTypes.Node) => ({
+const graphId = (node: SharedFlowTypes.Node) => ({
   id: node.id,
   port: node.type === 'compound' ? `${node.id}::port` : node.id,
   body: `${node.id}`,
@@ -84,16 +86,16 @@ const graphId = (node: XYFlowTypes.Node) => ({
 })
 
 function nodeData(
-  element: LikeC4Model.ElementModel,
+  element: LikeC4Model.Element,
   ctx: Context
-): Omit<XYFlowTypes.Node['data'], 'column'> {
+): SharedFlowTypes.OverlayNodeData {
   // 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(),
+    element.ancestors().toArray(),
     map(ancestor => ctx.diagramNodes.get(ancestor.id)),
     filter(isTruthy),
     first()
@@ -104,11 +106,11 @@ function nodeData(
     element: {
       kind: element.kind,
       title: diagramNode?.title ?? element.title,
-      description: diagramNode?.description ?? element.element.description,
+      description: diagramNode?.description ?? element.description,
       color: diagramNode?.color ?? ancestor?.color ?? element.color,
       shape: diagramNode?.shape ?? element.shape
     },
-    navigateTo: diagramNode?.navigateTo ?? first(element.viewsOf())?.id ?? null,
+    navigateTo: diagramNode?.navigateTo ?? first(element.scopedViews().take(1).toArray())?.id ?? null,
     ports: {
       in: [],
       out: []
@@ -117,10 +119,10 @@ function nodeData(
 }
 
 function createNode(
-  nodeType: XYFlowTypes.Node['type'],
-  element: LikeC4Model.ElementModel,
+  nodeType: SharedFlowTypes.NonEmptyNode['type'],
+  element: LikeC4Model.Element,
   ctx: Context
-): XYFlowTypes.Node {
+): SharedFlowTypes.Node {
   let node = ctx.xynodes.get(element.id)
   if (node) {
     return node
@@ -129,13 +131,13 @@ function createNode(
 
   // Create parent node
   const parent = pipe(
-    element.ancestors(),
+    element.ancestors().toArray(),
     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 = {
+  const xynode: SharedFlowTypes.NonEmptyNode = {
     type: nodeType,
     id: element.id,
     position: { x: 0, y: 0 },
@@ -181,7 +183,7 @@ function createNode(
  * 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'>>
+  type NodeBounds = Required<Pick<SharedFlowTypes.Node, 'position' | 'width' | 'height'>>
   dagre.layout(g)
   return function nodeBounds(nodeId: string, relativeTo?: string): NodeBounds {
     const { x, y, width, height } = g.node(nodeId)
@@ -215,8 +217,8 @@ function layout(
 ): {
   view: DiagramView
   edge: DiagramEdge
-  nodes: XYFlowTypes.Node[]
-  edges: XYFlowTypes.Edge[]
+  nodes: SharedFlowTypes.Node[]
+  edges: EdgeDetailsFlowTypes.Edge[]
   bounds: { x: number; y: number; width: number; height: number }
 } {
   const edge = view.edges.find(e => e.id === edgeId)
@@ -225,10 +227,14 @@ function layout(
 
   const relations = edge.relations
     .map(r => {
-      const relation = likec4model.relationship(r).relationship
-      all.add(relation.source)
-      all.add(relation.target)
-      return relation
+      const relation = likec4model.relationship(r)
+      all.add(relation.source.id)
+      all.add(relation.target.id)
+      return {
+        source: relation.source.id,
+        target: relation.target.id,
+        relation: relation.$relationship as AbstractRelation
+      }
     })
     .sort(compareRelations)
     .reverse()
@@ -258,17 +264,17 @@ function layout(
     g.setDefaultEdgeLabel(() => ({ width: 250 }))
   }
 
-  for (const relation of relations) {
-    const source = ctx.xynodes.get(relation.source)
+  for (const { relation, ...points } of relations) {
+    const source = ctx.xynodes.get(points.source)
     invariant(source, 'source node not found')
-    const target = ctx.xynodes.get(relation.target)
+    const target = ctx.xynodes.get(points.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 = {
+    const edge: EdgeDetailsFlowTypes.Edge = {
       id: relation.id,
       type: 'relation',
       source: source.id,
@@ -276,7 +282,10 @@ function layout(
       sourceHandle: target.id,
       targetHandle: source.id,
       data: {
-        relation
+        relations: [relation],
+        navigateTo: relation.navigateTo ?? null,
+        technology: relation.technology ?? null,
+        description: relation.description ?? null
       },
       label: relation.title,
       zIndex: ZIndexes.edge,

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

@@ -1,15 +1,11 @@
-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 type { SharedFlowTypes } from '../../shared/xyflow/_types'
 import * as css from './styles.css'
+import { Text } from '../../../controls/Text'
 
-const Text = MantineText.withProps({
-  component: 'div'
-})
-
-type CompoundNodeProps = NodeProps<XYFlowTypes.CompoundNode>
+type CompoundNodeProps = NodeProps<SharedFlowTypes.CompoundNode>
 
 export function CompoundNode({
   data: {
@@ -71,10 +67,6 @@ export function CompoundNode({
             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

@@ -1,4 +1,4 @@
-import { ActionIcon, Box, Group, Text as MantineText } from '@mantine/core'
+import { ActionIcon, Box, Group } from '@mantine/core'
 import { IconFileSymlink, IconTransform, IconZoomScan } from '@tabler/icons-react'
 import { Handle, type NodeProps, Position } from '@xyflow/react'
 import clsx from 'clsx'
@@ -7,8 +7,9 @@ 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 type { SharedFlowTypes } from '../../shared/xyflow/_types'
 import * as css from './styles.css'
+import { Text } from '../../../controls/Text'
 
 const Action = ActionIcon.withProps({
   className: 'nodrag nopan ' + css.navigateBtn,
@@ -18,18 +19,14 @@ const Action = ActionIcon.withProps({
   onPointerDownCapture: stopPropagation
 })
 
-const Text = MantineText.withProps({
-  component: 'div'
-})
-
-type ElementNodeProps = NodeProps<XYFlowTypes.ElementNode>
+type ElementNodeProps = NodeProps<SharedFlowTypes.ElementNode>
 
 function selector(s: DiagramState) {
   return {
     currentViewId: s.view.id,
     enableRelationshipBrowser: s.enableRelationshipBrowser,
     onNavigateTo: s.onNavigateTo,
-    onOpenSource: s.onOpenSourceElement
+    onOpenSource: s.onOpenSource
   }
 }
 
@@ -119,7 +116,9 @@ export function ElementNode({
             <Action
               onClick={(event) => {
                 event.stopPropagation()
-                onOpenSource(data.fqn)
+                onOpenSource({
+                  element: data.fqn
+                })
               }}>
               <IconFileSymlink stroke={1.8} style={{ width: '72%' }} />
             </Action>
@@ -148,10 +147,6 @@ export function ElementNode({
             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

@@ -2,22 +2,22 @@ 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, useDiagramStoreApi } from '../../../hooks/useDiagramState'
+import { useDiagramState } from '../../../hooks/useDiagramState'
 import { stopPropagation } from '../../../xyflow/utils'
 import { useOverlayDialog } from '../../OverlayContext'
-import type { XYFlowTypes } from '../_types'
+import * as css from '../../shared/xyflow/RelationshipEdge.css'
+import type { EdgeDetailsFlowTypes } from '../_types'
 import { ZIndexes } from '../use-layouted-edge-details'
-import * as css from './styles.css'
 
 export function RelationshipEdge({
   data,
   label,
   ...props
-}: EdgeProps<XYFlowTypes.Edge>) {
+}: EdgeProps<EdgeDetailsFlowTypes.Edge>) {
   const overlay = useOverlayDialog()
   const onNavigateTo = useDiagramState(s => s.onNavigateTo)
   const [edgePath, labelX, labelY] = getBezierPath(props)
-  const navigateTo = data.relation.navigateTo
+  const navigateTo = data.navigateTo
   return (
     <>
       <g
@@ -51,10 +51,10 @@ export function RelationshipEdge({
               {label}
             </Text>
           )}
-          {data.relation.technology && (
+          {data.technology && (
             <Text component={'div'} className={css.edgeLabelTechnology}>
               {'[ '}
-              {data.relation.technology}
+              {data.technology}
               {' ]'}
             </Text>
           )}

package/src/overlays/edge-details/xyflow/styles.css.ts

@@ -1,6 +1,5 @@
 import { globalStyle, style } from '@vanilla-extract/css'
-import { mantine, transitions, vars, whereDark, xyvars } from '../../../theme-vars'
-import { mixColor } from '../../Overlays.css'
+import { mantine, vars } from '../../../theme-vars'
 
 export const elementNode = style({
   width: '100%',
@@ -84,63 +83,6 @@ export const cssShapeSvg = style({
   zIndex: -1
 })
 
-const DimmedTransitionDelay = '400ms'
-
-export const edgeContainer = style({
-  opacity: 1,
-  transition: transitions.fast,
-  vars: {
-    [xyvars.edge.stroke]: vars.relation.lineColor,
-    [xyvars.edge.strokeSelected]: `color-mix(in srgb, ${vars.relation.lineColor}, ${mixColor} 35%)`,
-    [xyvars.edge.labelColor]: `color-mix(in srgb, ${vars.relation.labelColor}, rgba(255 255 255 / 0.85) 50%)`,
-    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 20%)`
-  },
-  selectors: {
-    [`&[data-edge-dimmed='true']`]: {
-      opacity: 0.2,
-      transitionDelay: DimmedTransitionDelay
-    },
-    [`&[data-edge-dimmed='immediate']`]: {
-      opacity: 0.2
-    },
-    [`${whereDark} &`]: {
-      vars: {
-        [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 50%)`
-      }
-    }
-  }
-})
-
-export const edgeLabel = style([edgeContainer, {
-  padding: '2px 5px',
-  fontFamily: vars.likec4.font,
-  position: 'absolute',
-  cursor: 'pointer',
-  width: 'fit-content',
-  color: xyvars.edge.labelColor,
-  backgroundColor: xyvars.edge.labelBgColor,
-  borderRadius: 4,
-  // everything inside EdgeLabelRenderer has no pointer events by default
-  // if you have an interactive element, set pointer-events: all
-  pointerEvents: 'all',
-  textWrap: 'pretty',
-  whiteSpace: 'preserve-breaks'
-}])
-
-export const edgeLabelText = style({
-  textAlign: 'center',
-  whiteSpaceCollapse: 'preserve-breaks',
-  fontSize: mantine.fontSizes.md,
-  lineHeight: mantine.lineHeights.xs
-})
-
-export const edgeLabelTechnology = style({
-  textAlign: 'center',
-  whiteSpaceCollapse: 'preserve-breaks',
-  fontSize: mantine.fontSizes.sm,
-  lineHeight: 1
-})
-
 export const navigateBtnBox = style({
   zIndex: 100,
   position: 'absolute',