@likec4/diagram 1.22.1 → 1.23.0

package/src/overlays/relationships-browser/actor.ts

@@ -10,18 +10,17 @@ import {
 import { type InternalNodeUpdate, getNodeDimensions, getViewportForBounds } from '@xyflow/system'
 import { isNullish, omit, prop } from 'remeda'
 import {
-  type ActorLogic,
+  type ActorLogicFrom,
   type ActorRefFromLogic,
   type BaseActorRef,
-  type MachineSnapshot,
   type SnapshotFrom,
+  assertEvent,
   assign,
   cancel,
   enqueueActions,
   fromPromise,
   raise,
   setup,
-  stopChild,
 } from 'xstate'
 import { Base } from '../../base'
 import { MinZoom, ZIndexes } from '../../base/const'
@@ -60,7 +59,6 @@ export type Context = Readonly<
     // parentRef: AnyActorRef | null
     xyflow: XYFLowInstance | null
     xystore: XYStoreApi | null
-    initialized: boolean
     layouted: LayoutRelationshipsViewResult | null
     navigateFromNode: string | null
     xynodes: RelationshipsBrowserTypes.Node[]
@@ -80,6 +78,7 @@ export type Events =
   | { type: 'xyflow.edgeMouseEnter'; edge: RelationshipsBrowserTypes.Edge }
   | { type: 'xyflow.edgeMouseLeave'; edge: RelationshipsBrowserTypes.Edge }
   | { type: 'xyflow.updateNodeInternals' }
+  | { type: 'xyflow.unmount' }
   | { type: 'fitDiagram'; duration?: number; bounds?: BBox }
   | { type: 'navigate.to'; subject: Fqn; fromNode?: string | undefined }
   | {
@@ -90,14 +89,173 @@ export type Events =
   | { type: 'update.view'; layouted: LayoutRelationshipsViewResult }
   | { type: 'close' }
 
-export const relationshipsBrowserActor = setup({
+export const layouter = fromPromise<{
+  xyedges: RelationshipsBrowserTypes.Edge[]
+  xynodes: RelationshipsBrowserTypes.Node[]
+}, {
+  subjectId: Fqn
+  navigateFromNode: string | null
+  xyflow: XYFLowInstance
+  xystore: XYStoreApi
+  update: LayoutRelationshipsViewResult
+}>(async ({ input, self, signal }) => {
+  const {
+    subjectId,
+    navigateFromNode,
+    xyflow,
+    xystore,
+    update,
+  } = input
+  let {
+    nodes: currentNodes,
+    width,
+    height,
+  } = xystore.getState()
+  const next = viewToNodesEdge(update)
+
+  const updateXYData = () => {
+    const { nodes, edges } = xystore.getState()
+    return {
+      xynodes: updateNodes(nodes, next.xynodes),
+      xyedges: updateEdges(edges, next.xyedges),
+    }
+  }
+  const parent = nonNullable(self._parent) as BaseActorRef<Events>
+
+  let zoom = xyflow.getZoom()
+  const maxZoom = Math.max(zoom, 1)
+  const nextviewport = getViewportForBounds(update.bounds, width, height, MinZoom, maxZoom, ViewPadding)
+
+  const nextSubjectNode = next.xynodes.find(n =>
+    n.type !== 'empty' && n.data.column === 'subjects' && n.data.fqn === subjectId
+  ) ?? findRootSubject(next.xynodes)
+  const currentSubjectNode = findRootSubject(currentNodes)
+
+  const existingNode = navigateFromNode
+    ? currentNodes.find(n => n.id === navigateFromNode)
+    : currentNodes.find(n => n.type !== 'empty' && n.data.column !== 'subjects' && n.data.fqn === subjectId)
+
+  if (
+    !nextSubjectNode || !existingNode || nextSubjectNode.type === 'empty' || !currentSubjectNode ||
+    nextSubjectNode.data.fqn === currentSubjectNode.data.fqn
+  ) {
+    await xyflow.setViewport(nextviewport)
+    return updateXYData()
+  }
+
+  const nextSubjectCenter = {
+    x: nextSubjectNode.position.x + (nextSubjectNode.initialWidth ?? 0) / 2,
+    y: nextSubjectNode.position.y + (nextSubjectNode.initialHeight ?? 0) / 2,
+  }
+
+  // Center of current subject
+  const currentSubjectInternalNode = xyflow.getInternalNode(currentSubjectNode.id)!
+  const currentSubjectCenter = centerXYInternalNode(currentSubjectInternalNode)
+
+  // Move to center of existing node
+  const existingInternalNode = xyflow.getInternalNode(existingNode.id)!
+  const existingDimensions = getNodeDimensions(existingInternalNode)
+
+  // Dim all nodes except the existing node
+  // Hide nested nodes
+  const nested = new Set<string>()
+  currentNodes.forEach(n => {
+    if (n.id === existingNode.id) {
+      return
+    }
+    if (n.data.column === 'subjects') {
+      nested.add(n.id)
+      return
+    }
+    if (n.parentId && (n.parentId === existingNode.id || nested.has(n.parentId))) {
+      nested.add(n.id)
+    }
+  })
+  currentNodes = updateNodes(
+    currentNodes,
+    currentNodes.flatMap(n => {
+      if (nested.has(n.id)) {
+        return []
+      }
+      if (n.id !== existingNode.id) {
+        return {
+          ...n,
+          data: {
+            ...n.data,
+            dimmed: n.data.column === 'subjects' ? 'immediate' : true,
+          },
+        } as RelationshipsBrowserTypes.Node
+      }
+      // Move existing node
+      return {
+        ...omit(n, ['parentId']),
+        position: {
+          x: currentSubjectCenter.x - existingDimensions.width / 2,
+          y: currentSubjectCenter.y - existingDimensions.height / 2,
+        },
+        zIndex: ZIndexes.Max,
+        hidden: false,
+        data: {
+          ...n.data,
+          dimmed: false,
+        },
+      } as RelationshipsBrowserTypes.Node
+    }),
+  )
+  parent.send({
+    type: 'update.xydata',
+    xynodes: currentNodes,
+    xyedges: [],
+  })
+
+  // Pick the smaller zoom level
+  zoom = Math.min(
+    zoom,
+    nextviewport.zoom,
+  )
+  // allow framer to render
+  await delay(175)
+  next.xynodes = next.xynodes.map(Base.setDimmed(false))
+
+  if (signal.aborted) {
+    return updateXYData()
+  }
+  await xyflow.setCenter(currentSubjectCenter.x, currentSubjectCenter.y, { zoom, duration: 350 })
+  await xyflow.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom })
+  return updateXYData()
+})
+
+export const relationshipsBrowserLogic = setup({
   types: {
     context: {} as Context,
     tags: '' as 'active',
+    children: {} as {
+      layouter: 'layouter'
+    },
     input: {} as Input,
     events: {} as Events,
   },
+  actors: {
+    layouter,
+  },
+  guards: {
+    isReady: ({ context }) => context.xyflow !== null && context.xystore !== null && context.layouted !== null,
+  },
   actions: {
+    'xyflow.init': assign(({ event }) => {
+      assertEvent(event, 'xyflow.init')
+      return {
+        xyflow: event.instance,
+        xystore: event.store,
+      }
+    }),
+    'update.view': assign(({ event }) => {
+      assertEvent(event, 'update.view')
+      return {
+        layouted: event.layouted,
+        ...viewToNodesEdge(event.layouted),
+      }
+    }),
     'xyflow:updateNodeInternals': ({ context }) => {
       invariant(context.xystore, 'xystore is not initialized')
       const { domNode, updateNodeInternals } = context.xystore.getState()
@@ -144,153 +302,12 @@ export const relationshipsBrowserActor = setup({
       }
     },
   },
-  guards: {
-    'enable: navigate.to': () => true,
-  },
-  actors: {
-    layouter: fromPromise<{
-      xyedges: RelationshipsBrowserTypes.Edge[]
-      xynodes: RelationshipsBrowserTypes.Node[]
-    }, {
-      subjectId: Fqn
-      navigateFromNode: string | null
-      xyflow: XYFLowInstance
-      xystore: XYStoreApi
-      update: LayoutRelationshipsViewResult
-    }>(async ({ input, self, signal }) => {
-      const {
-        subjectId,
-        navigateFromNode,
-        xyflow,
-        xystore,
-        update,
-      } = input
-      let {
-        nodes: currentNodes,
-        width,
-        height,
-      } = xystore.getState()
-      const next = viewToNodesEdge(update)
-
-      const updateXYData = () => {
-        const { nodes, edges } = xystore.getState()
-        return {
-          xynodes: updateNodes(nodes, next.xynodes),
-          xyedges: updateEdges(edges, next.xyedges),
-        }
-      }
-      const parent = nonNullable(self._parent) as BaseActorRef<Events>
-
-      let zoom = xyflow.getZoom()
-      const maxZoom = Math.max(zoom, 1)
-      const nextviewport = getViewportForBounds(update.bounds, width, height, MinZoom, maxZoom, ViewPadding)
-
-      const nextSubjectNode = next.xynodes.find(n =>
-        n.type !== 'empty' && n.data.column === 'subjects' && n.data.fqn === subjectId
-      ) ?? findRootSubject(next.xynodes)
-      const currentSubjectNode = findRootSubject(currentNodes)
-
-      const existingNode = navigateFromNode
-        ? currentNodes.find(n => n.id === navigateFromNode)
-        : currentNodes.find(n => n.type !== 'empty' && n.data.column !== 'subjects' && n.data.fqn === subjectId)
-
-      if (
-        !nextSubjectNode || !existingNode || nextSubjectNode.type === 'empty' || !currentSubjectNode ||
-        nextSubjectNode.data.fqn === currentSubjectNode.data.fqn
-      ) {
-        await xyflow.setViewport(nextviewport)
-        return updateXYData()
-      }
-
-      const nextSubjectCenter = {
-        x: nextSubjectNode.position.x + (nextSubjectNode.initialWidth ?? 0) / 2,
-        y: nextSubjectNode.position.y + (nextSubjectNode.initialHeight ?? 0) / 2,
-      }
-
-      // Center of current subject
-      const currentSubjectInternalNode = xyflow.getInternalNode(currentSubjectNode.id)!
-      const currentSubjectCenter = centerXYInternalNode(currentSubjectInternalNode)
-
-      // Move to center of existing node
-      const existingInternalNode = xyflow.getInternalNode(existingNode.id)!
-      const existingDimensions = getNodeDimensions(existingInternalNode)
-
-      // Dim all nodes except the existing node
-      // Hide nested nodes
-      const nested = new Set<string>()
-      currentNodes.forEach(n => {
-        if (n.id === existingNode.id) {
-          return
-        }
-        if (n.data.column === 'subjects') {
-          nested.add(n.id)
-          return
-        }
-        if (n.parentId && (n.parentId === existingNode.id || nested.has(n.parentId))) {
-          nested.add(n.id)
-        }
-      })
-      currentNodes = updateNodes(
-        currentNodes,
-        currentNodes.flatMap(n => {
-          if (nested.has(n.id)) {
-            return []
-          }
-          if (n.id !== existingNode.id) {
-            return {
-              ...n,
-              data: {
-                ...n.data,
-                dimmed: n.data.column === 'subjects' ? 'immediate' : true,
-              },
-            } as RelationshipsBrowserTypes.Node
-          }
-          // Move existing node
-          return {
-            ...omit(n, ['parentId']),
-            position: {
-              x: currentSubjectCenter.x - existingDimensions.width / 2,
-              y: currentSubjectCenter.y - existingDimensions.height / 2,
-            },
-            zIndex: ZIndexes.Max,
-            hidden: false,
-            data: {
-              ...n.data,
-              dimmed: false,
-            },
-          } as RelationshipsBrowserTypes.Node
-        }),
-      )
-      parent.send({
-        type: 'update.xydata',
-        xynodes: currentNodes,
-        xyedges: [],
-      })
-
-      // Pick the smaller zoom level
-      zoom = Math.min(
-        zoom,
-        nextviewport.zoom,
-      )
-      // allow framer to render
-      await delay(175)
-      next.xynodes = next.xynodes.map(Base.setDimmed(false))
-
-      if (signal.aborted) {
-        return updateXYData()
-      }
-      await xyflow.setCenter(currentSubjectCenter.x, currentSubjectCenter.y, { zoom, duration: 350 })
-      await xyflow.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom })
-      return updateXYData()
-    }),
-  },
 }).createMachine({
-  initial: 'initializing',
+  id: 'relationships-browser',
   context: ({ input }) => ({
     ...input,
     closeable: input.closeable ?? true,
     enableNavigationMenu: input.enableNavigationMenu ?? true,
-    initialized: false,
     xyflow: null,
     xystore: null,
     layouted: null,
@@ -298,40 +315,47 @@ export const relationshipsBrowserActor = setup({
     xynodes: [],
     xyedges: [],
   }),
-  states: {
-    'initializing': {
-      on: {
-        'xyflow.init': {
-          actions: [
-            assign({
-              initialized: true,
-              xyflow: ({ event }) => event.instance,
-              xystore: ({ event }) => event.store,
-            }),
-          ],
-          target: 'waiting-data',
+  initial: 'initializing',
+  on: {
+    'xyflow.applyNodeChanges': {
+      actions: assign({
+        xynodes: ({ context, event }) => {
+          return applyNodeChanges(event.changes, context.xynodes)
         },
-        'close': {
-          target: 'closed',
+      }),
+    },
+    'xyflow.applyEdgeChanges': {
+      actions: assign({
+        xyedges: ({ context, event }) => {
+          return applyEdgeChanges(event.changes, context.xyedges)
         },
-      },
+      }),
     },
-    'waiting-data': {
+  },
+  states: {
+    initializing: {
       on: {
+        'xyflow.init': {
+          actions: 'xyflow.init',
+          target: 'isReady',
+        },
         'update.view': {
-          actions: [
-            assign(({ event }) => {
-              return {
-                layouted: event.layouted,
-                ...viewToNodesEdge(event.layouted),
-              }
-            }),
-            raise({ type: 'fitDiagram', duration: 0 }),
-          ],
-          target: 'active',
+          actions: 'update.view',
+          target: 'isReady',
         },
+        'stop': 'closed',
+        'close': 'closed',
       },
     },
+    'isReady': {
+      always: [{
+        guard: 'isReady',
+        actions: raise({ type: 'fitDiagram', duration: 0 }),
+        target: 'active',
+      }, {
+        target: 'initializing',
+      }],
+    },
     'active': {
       initial: 'idle',
       tags: ['active'],
@@ -383,7 +407,6 @@ export const relationshipsBrowserActor = setup({
       },
       on: {
         'xyflow.nodeClick': {
-          guard: 'enable: navigate.to',
           actions: enqueueActions(({ event, enqueue }) => {
             if ('fqn' in event.node.data) {
               const fqn = event.node.data.fqn
@@ -396,7 +419,6 @@ export const relationshipsBrowserActor = setup({
           }),
         },
         'navigate.to': {
-          guard: 'enable: navigate.to',
           actions: [
             assign({
               subject: ({ event }) => event.subject,
@@ -428,57 +450,31 @@ export const relationshipsBrowserActor = setup({
             raise({ type: 'fitDiagram' }, { id: 'fitDiagram', delay: 300 }),
           ],
         },
-        'close': {
-          target: 'closed',
+        'xyflow.init': {
+          actions: 'xyflow.init',
+        },
+        'xyflow.unmount': {
+          target: 'initializing',
         },
+        'close': 'closed',
       },
     },
-    'closed': {
+    closed: {
       id: 'closed',
       type: 'final',
-      entry: [
-        stopChild('layouter'),
-        assign({
-          initialized: false,
-          xyflow: null,
-          xystore: null,
-        }),
-      ],
-    },
-  },
-  on: {
-    '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)
-        },
-      }),
     },
   },
-}) as unknown as ActorLogic<
-  MachineSnapshot<
-    Context,
-    Events,
-    any,
-    'initializing' | 'waiting-data' | 'closed' | { active: 'idle' | 'layouting' },
-    'active',
-    any,
-    any,
-    any
-  >,
-  Events,
-  Input,
-  any,
-  any
-> // TODO reduce type inference by forcing the types
+  exit: assign({
+    xyflow: null,
+    layouted: null,
+    xystore: null,
+    xyedges: [],
+    xynodes: [],
+  }),
+})
 
-export type RelationshipsBrowserLogic = typeof relationshipsBrowserActor
-export type RelationshipsBrowserActorRef = ActorRefFromLogic<typeof relationshipsBrowserActor>
+export interface RelationshipsBrowserLogic extends ActorLogicFrom<typeof relationshipsBrowserLogic> {
+}
+export interface RelationshipsBrowserActorRef extends ActorRefFromLogic<RelationshipsBrowserLogic> {
+}
 export type RelationshipsBrowserSnapshot = SnapshotFrom<RelationshipsBrowserActorRef>

package/src/overlays/relationships-browser/custom/ElementActions.tsx

@@ -4,13 +4,14 @@ import type { NodeProps } from '../../../base/types'
 import { useEnabledFeature } from '../../../context/DiagramFeatures'
 import { useDiagram } from '../../../hooks/useDiagram'
 import type { RelationshipsBrowserTypes as Types } from '../_types'
-import { useRelationshipsBrowser } from '../hooks'
+import { useRelationshipsBrowser, useRelationshipsBrowserState } from '../hooks'
 
 type ElementActionsProps = NodeProps<Types.ElementNodeData>
 export const ElementActions = (props: ElementActionsProps) => {
   const { enableNavigateTo, enableVscode } = useEnabledFeature('NavigateTo', 'Vscode')
   const diagram = useDiagram()
   const browser = useRelationshipsBrowser()
+  const subject = useRelationshipsBrowserState(s => s.context.subject)
 
   const buttons = [] as ElementActionButtons.Item[]
 
@@ -25,7 +26,7 @@ export const ElementActions = (props: ElementActionsProps) => {
       },
     })
   }
-  if (fqn !== browser.getState().subject) {
+  if (fqn !== subject) {
     buttons.push({
       key: 'relationships',
       icon: <IconTransform />,

package/src/overlays/relationships-browser/custom/nodeTypes.tsx

@@ -6,20 +6,39 @@ import {
   CompoundNodeContainer,
   CompoundTitle,
   customNode,
+  ElementDetailsButton,
   ElementNodeContainer,
   ElementShape,
   ElementTitle,
 } from '../../../base/primitives'
+import { useDiagram } from '../../../hooks/useDiagram'
 import type { RelationshipsBrowserTypes } from '../_types'
 import { ElementActions } from './ElementActions'
 import { EmptyNode } from './EmptyNode'
 
+const ElementDetailsButtonWithHandler = (
+  props: NodeProps<RelationshipsBrowserTypes.ElementNodeData | RelationshipsBrowserTypes.CompoundNodeData>,
+) => {
+  const diagram = useDiagram()
+
+  return (
+    <ElementDetailsButton
+      {...props}
+      onClick={e => {
+        e.stopPropagation()
+        diagram.openElementDetails(props.data.fqn)
+      }}
+    />
+  )
+}
+
 export const nodeTypes = {
   element: customNode<RelationshipsBrowserTypes.ElementNodeData>((props) => {
     return (
       <ElementNodeContainer key={props.id} component={m.div} layoutId={props.id} nodeProps={props}>
         <ElementShape {...props} />
         <ElementTitle {...props} iconSize={40} />
+        <ElementDetailsButtonWithHandler {...props} />
         <ElementActions {...props} />
         <ElementPorts {...props} />
       </ElementNodeContainer>
@@ -29,6 +48,7 @@ export const nodeTypes = {
   compound: customNode<RelationshipsBrowserTypes.CompoundNodeData>((props) => {
     return (
       <CompoundNodeContainer key={props.id} component={m.div} layoutId={props.id} nodeProps={props}>
+        <ElementDetailsButtonWithHandler {...props} />
         <CompoundTitle {...props} />
         <CompoundPorts {...props} />
       </CompoundNodeContainer>

package/src/overlays/relationships-browser/hooks.ts

@@ -1,9 +1,9 @@
 import { type Fqn, nonNullable } from '@likec4/core'
 import { useCallbackRef } from '@mantine/hooks'
 import { useSelector } from '@xstate/react'
-import { useStoreApi } from '@xyflow/react'
 import { shallowEqual } from 'fast-equals'
 import { createContext, useContext, useMemo, useTransition } from 'react'
+import type { OverlaysActorRef } from '../overlaysActor'
 import type { RelationshipsBrowserActorRef, RelationshipsBrowserSnapshot } from './actor'
 
 export const RelationshipsBrowserActorContext = createContext<RelationshipsBrowserActorRef | null>(null)
@@ -16,15 +16,15 @@ export function useRelationshipsBrowserState<T>(
   selector: (state: RelationshipsBrowserSnapshot) => T,
   compare: (a: T, b: T) => boolean = shallowEqual,
 ) {
-  const select = useCallbackRef(selector)
   const actor = useRelationshipsBrowserActor()
-  return useSelector(actor, select, compare)
+  return useSelector(actor, useCallbackRef(selector), compare)
 }
 
 export function useRelationshipsBrowser() {
   const actor = useRelationshipsBrowserActor()
   const [, startTransition] = useTransition()
   return useMemo(() => ({
+    actor,
     getState: () => actor.getSnapshot().context,
     send: actor.send,
     navigateTo: (subject: Fqn, fromNode?: string) => {
@@ -42,9 +42,11 @@ export function useRelationshipsBrowser() {
       })
     },
     close: () => {
-      startTransition(() => {
+      if (actor._parent) {
+        ;(actor._parent as OverlaysActorRef)?.send({ type: 'close', actorId: actor.id })
+      } else {
         actor.send({ type: 'close' })
-      })
+      }
     },
   }), [actor])
 }

package/src/overlays/types.ts

@@ -0,0 +1,39 @@
+import type { ActorRefFrom } from 'xstate'
+import type {
+  ElementDetailsLogic,
+  Events as ElementDetailsEvents,
+  Input as ElementDetailsInput,
+} from './element-details/actor'
+import type {
+  Events as RelationshipDetailsEvents,
+  Input as RelationshipDetailsInput,
+  RelationshipDetailsLogic,
+} from './relationship-details/actor'
+import type {
+  Events as RelationshipsBrowserEvents,
+  Input as RelationshipsBrowserInput,
+  RelationshipsBrowserLogic,
+} from './relationships-browser/actor'
+
+export namespace Overlays {
+  export namespace ElementDetails {
+    export type Events = ElementDetailsEvents
+    export type Input = ElementDetailsInput
+    export type Logic = ElementDetailsLogic
+    export interface ActorRef extends ActorRefFrom<ElementDetailsLogic> {}
+  }
+
+  export namespace RelationshipDetails {
+    export type Events = RelationshipDetailsEvents
+    export type Input = RelationshipDetailsInput
+    export interface Logic extends RelationshipDetailsLogic {}
+    export interface ActorRef extends ActorRefFrom<RelationshipDetailsLogic> {}
+  }
+
+  export namespace RelationshipsBrowser {
+    export type Events = RelationshipsBrowserEvents
+    export type Input = RelationshipsBrowserInput
+    export interface Logic extends RelationshipsBrowserLogic {}
+    export interface ActorRef extends ActorRefFrom<RelationshipsBrowserLogic> {}
+  }
+}