@likec4/diagram 1.27.0 → 1.27.2

package/src/overlays/relationship-details/actor.ts

@@ -1,16 +1,29 @@
-import { type BBox, type DiagramView, type EdgeId, invariant } from '@likec4/core'
+import {
+  type BBox,
+  type DiagramView,
+  type EdgeId,
+  type ExclusiveUnion,
+  type Fqn,
+  type ViewId,
+  invariant,
+} from '@likec4/core'
 import {
   type EdgeChange,
   type NodeChange,
   type ReactFlowInstance,
+  type useStoreApi,
   applyEdgeChanges,
   applyNodeChanges,
+  getViewportForBounds,
 } from '@xyflow/react'
-import { prop } from 'remeda'
+import type { InternalNodeUpdate } from '@xyflow/system'
+import { shallowEqual } from 'fast-equals'
+import { isString, prop } from 'remeda'
 import {
   type ActorLogicFrom,
   type ActorRefFromLogic,
   type SnapshotFrom,
+  assertEvent,
   assign,
   cancel,
   enqueueActions,
@@ -19,30 +32,68 @@ import {
 } from 'xstate'
 import { Base } from '../../base'
 import { MinZoom } from '../../base/const'
+import { updateEdges } from '../../base/updateEdges'
+import { updateNodes } from '../../base/updateNodes'
 import type { RelationshipDetailsTypes } from './_types'
+import type { LayoutResult } from './layout'
+import { layoutResultToXYFlow } from './layout-to-xyflow'
 
 type XYFLowInstance = ReactFlowInstance<RelationshipDetailsTypes.Node, RelationshipDetailsTypes.Edge>
+type XYStoreApi = ReturnType<typeof useStoreApi<RelationshipDetailsTypes.Node, RelationshipDetailsTypes.Edge>>
+
+export type Input = ExclusiveUnion<{
+  Edge: {
+    edgeId: EdgeId
+    viewId: ViewId
+  }
+  Between: {
+    source: Fqn
+    target: Fqn
+    viewId: ViewId
+  }
+}>
 
-export type Input = {
+type Subject = {
   edgeId: EdgeId
-  view: DiagramView
-  // view: DiagramView | null
-  // parentRef?: AnyActorRef| null
+  // relationships: null
+} | {
+  source: Fqn
+  target: Fqn
+  edgeId?: never
+  // relationships: null
 }
 
-export type Context = Readonly<
-  Input & {
-    // parentRef: AnyActorRef | null
-    xyflow: XYFLowInstance | null
-    initialized: boolean
-    xynodes: RelationshipDetailsTypes.Node[]
-    xyedges: RelationshipDetailsTypes.Edge[]
-    // bounds: BBox | null
+export type Context = Readonly<{
+  // parentRef: AnyActorRef | null
+  subject: Subject
+  // Scope
+  viewId: ViewId
+  xyflow: XYFLowInstance | null
+  xystore: XYStoreApi | null
+  initialized: {
+    xydata: boolean
+    xyflow: boolean
+  }
+  xynodes: RelationshipDetailsTypes.Node[]
+  xyedges: RelationshipDetailsTypes.Edge[]
+  bounds: BBox
+}>
+
+function inputToSubject(input: { edgeId: EdgeId } | { source: Fqn; target: Fqn }): Context['subject'] {
+  if ('edgeId' in input) {
+    invariant(isString(input.edgeId), 'edgeId is required')
+    return {
+      edgeId: input.edgeId,
+    }
+  }
+  return {
+    source: input.source,
+    target: input.target,
   }
->
+}
 
 export type Events =
-  | { type: 'xyflow.init'; instance: XYFLowInstance }
+  | { type: 'xyflow.init'; instance: XYFLowInstance; store: XYStoreApi }
   | { type: 'xyflow.nodeClick'; node: RelationshipDetailsTypes.Node }
   | { type: 'xyflow.edgeClick'; edge: RelationshipDetailsTypes.Edge }
   | { type: 'xyflow.edgeMouseEnter'; edge: RelationshipDetailsTypes.Edge }
@@ -53,15 +104,16 @@ export type Events =
   | { type: 'xyflow.applyNodeChanges'; changes: NodeChange<RelationshipDetailsTypes.Node>[] }
   | { type: 'xyflow.applyEdgeChanges'; changes: EdgeChange<RelationshipDetailsTypes.Edge>[] }
   | { type: 'xyflow.paneClick' }
+  | { type: 'xyflow.paneDblClick' }
   | { type: 'xyflow.resized' }
+  | { type: 'xyflow.updateNodeInternals' }
   | {
-    type: 'update.xydata'
-    xynodes: RelationshipDetailsTypes.Node[]
-    xyedges: RelationshipDetailsTypes.Edge[]
+    type: 'update.layoutData'
+    data: LayoutResult
   }
   // | { type: 'update.bounds'; bounds: BBox }
   | { type: 'fitDiagram'; duration?: number; bounds?: BBox }
-  | { type: 'navigate.to'; edgeId: EdgeId }
+  | { type: 'navigate.to'; params: { edgeId: EdgeId; viewId?: ViewId } | { source: Fqn; target: Fqn; viewId?: ViewId } }
   | { type: 'close' }
 
 export const relationshipDetailsLogic = setup({
@@ -72,16 +124,18 @@ export const relationshipDetailsLogic = setup({
   },
   actions: {
     'xyflow:fitDiagram': ({ context }, params?: { duration?: number; bounds?: BBox }) => {
-      const {
-        duration = 450,
-        bounds,
-      } = params ?? {}
-      const { xyflow } = context
+      let { duration, bounds } = params ?? {}
+      duration ??= 450
+      const { xyflow, xystore } = context
       invariant(xyflow, 'xyflow is not initialized')
+      invariant(xystore, 'xystore is not initialized')
+      bounds ??= context.bounds
+      const maxZoom = Math.max(xyflow.getZoom(), 1)
       if (bounds) {
-        xyflow.fitBounds(bounds, duration > 0 ? { duration } : undefined)
+        const { width, height } = xystore.getState()
+        const viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, 0.1)
+        xyflow.setViewport(viewport, duration > 0 ? { duration } : undefined)
       } else {
-        const maxZoom = Math.max(xyflow.getZoom(), 1)
         xyflow.fitView({
           minZoom: MinZoom,
           maxZoom,
@@ -90,45 +144,120 @@ export const relationshipDetailsLogic = setup({
         })
       }
     },
+    'xyflow:updateNodeInternals': ({ context }) => {
+      invariant(context.xystore, 'xystore is not initialized')
+      const { domNode, updateNodeInternals } = context.xystore.getState()
+      const nodeIds = new Set(context.xyedges.flatMap((e) => [e.source, e.target]))
+
+      if (nodeIds.size === 0 || !domNode) {
+        return
+      }
+
+      const updates = new Map<string, InternalNodeUpdate>()
+
+      for (const updateId of nodeIds) {
+        const nodeElement = domNode.querySelector(`.react-flow__node[data-id="${updateId}"]`) as HTMLDivElement
+        if (nodeElement) {
+          updates.set(updateId, { id: updateId, nodeElement, force: true })
+        }
+      }
+
+      updateNodeInternals(updates, { triggerFitView: false })
+    },
+    'updateXYFlow': assign(({ context, event }) => {
+      assertEvent(event, 'xyflow.init')
+      let initialized = context.initialized
+      if (!initialized.xyflow) {
+        initialized = {
+          ...initialized,
+          xyflow: true,
+        }
+      }
+      return {
+        initialized,
+        xyflow: event.instance,
+        xystore: event.store,
+      }
+    }),
+    'updateLayoutData': assign(({ context, event }) => {
+      assertEvent(event, 'update.layoutData')
+      const { xynodes, xyedges, bounds } = layoutResultToXYFlow(event.data)
+      let initialized = context.initialized
+      if (!initialized.xydata) {
+        initialized = {
+          ...initialized,
+          xydata: true,
+        }
+      }
+      return {
+        initialized,
+        xynodes: updateNodes(context.xynodes, xynodes),
+        xyedges: updateEdges(context.xyedges, xyedges),
+        bounds: shallowEqual(context.bounds, bounds) ? context.bounds : bounds,
+      }
+    }),
   },
   guards: {
+    'isReady': ({ context }) => context.initialized.xydata && context.initialized.xyflow,
     'enable: navigate.to': () => true,
   },
 }).createMachine({
-  initial: 'opening',
+  initial: 'initializing',
   context: ({ input }) => ({
-    ...input,
-    initialized: false,
+    subject: inputToSubject(input),
+    viewId: input.viewId,
+    bounds: {
+      x: 0,
+      y: 0,
+      width: 200,
+      height: 200,
+    },
+    initialized: {
+      xydata: false,
+      xyflow: false,
+    },
     xyflow: null,
+    xystore: null,
     xynodes: [],
     xyedges: [],
   }),
   states: {
-    'opening': {
+    'initializing': {
       on: {
         'xyflow.init': {
-          actions: assign({
-            initialized: true,
-            xyflow: ({ event }) => event.instance,
-          }),
-          target: 'active',
+          actions: 'updateXYFlow',
+          target: 'isReady',
+        },
+        'update.layoutData': {
+          actions: 'updateLayoutData',
+          target: 'isReady',
         },
         'close': {
           target: 'closed',
         },
       },
     },
-    'active': {
-      entry: {
-        type: 'xyflow:fitDiagram',
-        params: { duration: 0 },
-      },
+    'isReady': {
+      always: [{
+        guard: 'isReady',
+        actions: [
+          { type: 'xyflow:fitDiagram', params: { duration: 0 } },
+          raise({ type: 'xyflow.updateNodeInternals' }, { delay: 50 }),
+        ],
+        target: 'ready',
+      }, {
+        target: 'initializing',
+      }],
+    },
+    'ready': {
       on: {
         'xyflow.edgeMouseEnter': {
           actions: [
             assign({
               xyedges: ({ context, event }) => {
-                const hasDimmed = context.xyedges.some(edge => edge.data.dimmed === true)
+                const hasDimmed = context.xyedges.some(edge =>
+                  edge.data.dimmed === true || edge.data.dimmed === 'immediate'
+                )
                 return context.xyedges.map(edge => {
                   if (edge.id === event.edge.id) {
                     return Base.setData(edge, {
@@ -136,7 +265,7 @@ export const relationshipDetailsLogic = setup({
                       dimmed: false,
                     })
                   }
-                  return hasDimmed && !edge.data.dimmed && !edge.selected ? Base.setDimmed(edge, 'immediate') : edge
+                  return hasDimmed && !edge.selected ? Base.setDimmed(edge, 'immediate') : edge
                 })
               },
             }),
@@ -188,21 +317,58 @@ export const relationshipDetailsLogic = setup({
             }
           }),
         },
-        'navigate.to': {
+        'update.layoutData': {
           actions: [
-            assign({
-              edgeId: ({ event }) => event.edgeId,
-            }),
-            raise({ type: 'fitDiagram' }, { delay: 50 }),
+            'updateLayoutData',
+            cancel('fitDiagram'),
+            {
+              type: 'xyflow:fitDiagram',
+              params: {
+                duration: 0,
+              },
+            },
+            raise({ type: 'xyflow.updateNodeInternals' }, { delay: 75 }),
           ],
         },
+        'xyflow.init': {
+          actions: 'updateXYFlow',
+        },
+        'xyflow.applyNodeChanges': {
+          actions: assign({
+            xynodes: ({ context, event }) => {
+              return applyNodeChanges(event.changes, context.xynodes)
+            },
+          }),
+        },
+        'xyflow.applyEdgeChanges': {
+          actions: assign({
+            xyedges: ({ context, event }) => {
+              return applyEdgeChanges(event.changes, context.xyedges)
+            },
+          }),
+        },
+        'xyflow.paneDblClick': {
+          actions: 'xyflow:fitDiagram',
+        },
+        'navigate.to': {
+          actions: assign({
+            subject: ({ event }) => inputToSubject(event.params),
+            viewId: ({ context, event }) => event.params.viewId ?? context.viewId,
+          }),
+        },
         'close': {
           target: 'closed',
         },
       },
       exit: assign({
-        initialized: false,
+        xyedges: [],
+        xynodes: [],
+        initialized: {
+          xydata: false,
+          xyflow: false,
+        },
         xyflow: null,
+        xystore: null,
       }),
     },
     'closed': {
@@ -222,25 +388,8 @@ export const relationshipDetailsLogic = setup({
         raise({ type: 'fitDiagram' }, { id: 'fitDiagram', delay: 200 }),
       ],
     },
-    'update.xydata': {
-      actions: assign({
-        xynodes: ({ event }) => event.xynodes,
-        xyedges: ({ event }) => event.xyedges,
-      }),
-    },
-    'xyflow.applyNodeChanges': {
-      actions: assign({
-        xynodes: ({ context, event }) => {
-          return applyNodeChanges(event.changes, context.xynodes)
-        },
-      }),
-    },
-    'xyflow.applyEdgeChanges': {
-      actions: assign({
-        xyedges: ({ context, event }) => {
-          return applyEdgeChanges(event.changes, context.xyedges)
-        },
-      }),
+    'xyflow.updateNodeInternals': {
+      actions: 'xyflow:updateNodeInternals',
     },
   },
 })

package/src/overlays/relationship-details/compute.ts

@@ -0,0 +1,186 @@
+import {
+  type EdgeId,
+  type Fqn,
+  type NonEmptyReadonlyArray,
+  type RelationId,
+  hasAtLeast,
+  invariant,
+  isAncestor,
+  sortParentsFirst,
+} from '@likec4/core'
+import { treeFromElements } from '@likec4/core/compute-view/relationships'
+import {
+  type AnyAux,
+  type DeploymentRelationModel,
+  type ElementModel,
+  type LikeC4Model,
+  type LikeC4ViewModel,
+  type RelationshipModel,
+  modelConnection,
+} from '@likec4/core/model'
+
+export interface RelationshipDetailsViewData {
+  sources: ReadonlySet<ElementModel>
+  relationships: ReadonlySet<RelationshipModel>
+  targets: ReadonlySet<ElementModel>
+}
+
+const finalize = <M extends AnyAux>(
+  elements: Set<ElementModel<M>>,
+  explicits: Set<ElementModel<M>>,
+): Set<ElementModel<M>> => {
+  if (elements.size > 2 && explicits.size !== elements.size) {
+    return new Set(sortParentsFirst([
+      ...treeFromElements(elements).flatten(),
+      ...explicits,
+    ]))
+  }
+  if (elements.size > 1) {
+    return new Set(sortParentsFirst([...elements]))
+  }
+  return elements
+}
+
+export function computeEdgeDetailsViewData(
+  edges: NonEmptyReadonlyArray<EdgeId>,
+  view: LikeC4ViewModel<AnyAux>,
+): RelationshipDetailsViewData {
+  const sources = new Set<ElementModel>()
+  const relationships = new Set<RelationshipModel>()
+  const targets = new Set<ElementModel>()
+
+  const explicit = {
+    sources: new Set<ElementModel>(),
+    targets: new Set<ElementModel>(),
+  }
+
+  const addExplicit = (el: ElementModel, type: 'source' | 'target') => {
+    if (type === 'source') {
+      sources.add(el)
+      explicit.sources.add(el)
+    } else {
+      targets.add(el)
+      explicit.targets.add(el)
+    }
+  }
+
+  for (const edgeId of edges) {
+    const edge = view.findEdge(edgeId)
+    const _relationships = edge ? [...edge.relationships('model')] : []
+    if (!edge || !hasAtLeast(_relationships, 1) || !edge.source.hasElement() || !edge.target.hasElement()) {
+      continue
+    }
+    const source = edge.source.element
+    const target = edge.target.element
+    addExplicit(source, 'source')
+    addExplicit(target, 'target')
+
+    for (const relationship of _relationships) {
+      relationships.add(relationship)
+
+      if (relationship.source !== source) {
+        addExplicit(relationship.source, 'source')
+        for (const parent of relationship.source.ancestors()) {
+          if (parent === source) {
+            break
+          }
+          sources.add(parent)
+        }
+      }
+
+      if (relationship.target !== target) {
+        addExplicit(relationship.target, 'target')
+        for (const parent of relationship.target.ancestors()) {
+          if (parent === target) {
+            break
+          }
+          targets.add(parent)
+        }
+      }
+    }
+  }
+
+  return {
+    sources: finalize(sources, explicit.sources),
+    targets: finalize(targets, explicit.targets),
+    relationships,
+  }
+}
+
+export function computeRelationshipDetailsViewData({
+  // relationships: _relationships,
+  source,
+  target,
+}: {
+  source: ElementModel
+  target: ElementModel
+  // relationships: NonEmptyReadonlyArray<RelationId>
+}): RelationshipDetailsViewData {
+  const sources = new Set<ElementModel>()
+  const relationships = new Set<RelationshipModel>()
+  const targets = new Set<ElementModel>()
+
+  const explicit = {
+    sources: new Set<ElementModel>(),
+    targets: new Set<ElementModel>(),
+  }
+
+  const addExplicit = (el: ElementModel, type: 'source' | 'target') => {
+    if (type === 'source') {
+      sources.add(el)
+      explicit.sources.add(el)
+    } else {
+      targets.add(el)
+      explicit.targets.add(el)
+    }
+  }
+
+  if (source) {
+    addExplicit(source, 'source')
+  }
+  if (target) {
+    addExplicit(target, 'target')
+  }
+  const [connection] = modelConnection.findConnection(source, target, 'directed')
+  if (!connection) {
+    return {
+      sources,
+      targets,
+      relationships,
+    }
+  }
+
+  for (const relationship of connection.relations) {
+    const relationSource = relationship.source
+    const relationTarget = relationship.target
+    addExplicit(relationSource, 'source')
+    addExplicit(relationTarget, 'target')
+    relationships.add(relationship)
+
+    if (source !== relationSource) {
+      invariant(isAncestor(source, relationSource), `${source.id} is not an ancestor of ${relationSource.id}`)
+      for (const parent of relationSource.ancestors()) {
+        if (parent === source) {
+          break
+        }
+        sources.add(parent)
+      }
+    }
+
+    if (target !== relationTarget) {
+      invariant(isAncestor(target, relationTarget), `${target.id} is not an ancestor of ${relationTarget.id}`)
+      for (const parent of relationTarget.ancestors()) {
+        if (parent === target) {
+          break
+        }
+        targets.add(parent)
+      }
+    }
+  }
+
+  return {
+    sources: finalize(sources, explicit.sources),
+    targets: finalize(targets, explicit.targets),
+    relationships,
+  }
+}

package/src/overlays/relationship-details/custom/ElementActions.tsx

@@ -1,21 +1,20 @@
-import { IconZoomScan } from '@tabler/icons-react'
+import { IconFileSymlink, IconTransform, IconZoomScan } from '@tabler/icons-react'
 import { ElementActionButtons } from '../../../base/primitives'
 import type { NodeProps } from '../../../base/types'
-import { useEnabledFeature } from '../../../context/DiagramFeatures'
+import { useEnabledFeatures } from '../../../context/DiagramFeatures'
+import { useCurrentViewId } from '../../../hooks/useCurrentViewId'
 import { useDiagram } from '../../../hooks/useDiagram'
 import type { RelationshipDetailsTypes as Types } from '../_types'
-import { useRelationshipDetails } from '../hooks'
-// import { useRelationshipsBrowser } from '../hooks'
 
 type ElementActionsProps = NodeProps<Types.ElementNodeData>
 export const ElementActions = (props: ElementActionsProps) => {
-  const { enableNavigateTo } = useEnabledFeature('NavigateTo')
+  const { enableNavigateTo, enableVscode } = useEnabledFeatures()
   const diagram = useDiagram()
-
+  const currentViewId = useCurrentViewId()
   const buttons = [] as ElementActionButtons.Item[]
 
-  const { navigateTo } = props.data
-  if (navigateTo && enableNavigateTo) {
+  const { navigateTo, fqn } = props.data
+  if (navigateTo && enableNavigateTo && currentViewId !== navigateTo) {
     buttons.push({
       key: 'navigate',
       icon: <IconZoomScan />,
@@ -25,16 +24,26 @@ export const ElementActions = (props: ElementActionsProps) => {
       },
     })
   }
-  // if (fqn !== browser.getState().subject) {
-  //   buttons.push({
-  //     key: 'relationships',
-  //     icon: <IconTransform />,
-  //     onClick: (e) => {
-  //       e.stopPropagation()
-  //       browser.navigateTo(fqn)
-  //     },
-  //   })
-  // }
+  if (fqn) {
+    buttons.push({
+      key: 'relationships',
+      icon: <IconTransform />,
+      onClick: (e) => {
+        e.stopPropagation()
+        diagram.openRelationshipsBrowser(fqn)
+      },
+    })
+  }
+  if (fqn && enableVscode) {
+    buttons.push({
+      key: 'goToSource',
+      icon: <IconFileSymlink />,
+      onClick: (e) => {
+        e.stopPropagation()
+        diagram.openSource({ element: fqn })
+      },
+    })
+  }
   return (
     <ElementActionButtons
       buttons={buttons}

package/src/overlays/relationship-details/custom/edgeTypes.tsx

@@ -31,7 +31,7 @@ export const RelationshipEdge = customEdge<RelationshipDetailsTypes.EdgeData>((p
           translate: 'translate(-50%, 0)',
         }}
         style={{
-          maxWidth: Math.abs(props.targetX - props.sourceX - 70),
+          maxWidth: Math.abs(props.targetX - props.sourceX - 100),
         }}>
         <EdgeLabel edgeProps={props}>
           {enableNavigateTo && navigateTo && (

package/src/overlays/relationship-details/hooks.ts

@@ -1,4 +1,4 @@
-import { type EdgeId, nonNullable } from '@likec4/core'
+import { type EdgeId, type Fqn, nonNullable } from '@likec4/core'
 import { useCallbackRef } from '@mantine/hooks'
 import { useSelector } from '@xstate/react'
 import { shallowEqual } from 'fast-equals'
@@ -26,15 +26,17 @@ export function useRelationshipDetails() {
   const [, startTransition] = useTransition()
   return useMemo(() => ({
     actor,
+    get rootElementId(): string {
+      return `relationship-details-${actor.sessionId.replaceAll(':', '_')}`
+    },
     getState: () => actor.getSnapshot().context,
     send: actor.send,
-    navigateTo: (edgeId: EdgeId) => {
-      startTransition(() => {
-        actor.send({
-          type: 'navigate.to',
-          edgeId,
-        })
-      })
+    navigateTo: (...params: [edgeId: EdgeId] | [source: Fqn, target: Fqn]) => {
+      if (params.length === 1) {
+        actor.send({ type: 'navigate.to', params: { edgeId: params[0] } })
+      } else {
+        actor.send({ type: 'navigate.to', params: { source: params[0], target: params[1] } })
+      }
     },
     fitDiagram: () => {
       startTransition(() => {