@likec4/diagram 1.22.1 → 1.23.0

package/src/state/DiagramActorProvider.tsx

@@ -0,0 +1,97 @@
+import type { ViewId } from '@likec4/core'
+import { useCallbackRef } from '@mantine/hooks'
+import { useActorRef, useSelector } from '@xstate/react'
+import { useStoreApi } from '@xyflow/react'
+import { shallowEqual } from 'fast-equals'
+import { type PropsWithChildren, useEffect } from 'react'
+import { useDiagramEventHandlersRef } from '../context/DiagramEventHandlers'
+import { DiagramFeatures, useEnabledFeatures } from '../context/DiagramFeatures'
+import { DiagramActorSafeContext } from '../hooks/safeContext'
+import { useUpdateEffect } from '../hooks/useUpdateEffect'
+import type { Types } from '../likec4diagram/types'
+import { type Input, diagramMachine } from './diagram-machine'
+// import { inspector } from './inspector'
+import { syncManualLayoutActorLogic } from './syncManualLayoutActor'
+import type { DiagramActorRef } from './types'
+
+type ActorContextInput = Omit<Input, 'xystore' | 'features'>
+
+export function DiagramActorProvider({ input, children }: PropsWithChildren<{ input: ActorContextInput }>) {
+  const handlersRef = useDiagramEventHandlersRef()
+  const xystore = useStoreApi<Types.Node, Types.Edge>()
+
+  const actorRef = useActorRef(
+    diagramMachine.provide({
+      actions: {
+        'trigger:NavigateTo': ((_, { viewId }) => {
+          handlersRef.current.onNavigateTo?.(viewId as ViewId)
+        }),
+
+        'trigger:OnChange': ((_, params) => {
+          handlersRef.current.onChange?.(params)
+        }),
+
+        'trigger:OpenSource': ((_, params) => {
+          handlersRef.current.onOpenSource?.(params)
+        }),
+      },
+      actors: {
+        syncManualLayoutActorLogic: syncManualLayoutActorLogic.provide({
+          actions: {
+            'trigger:OnChange': ((_, params) => {
+              handlersRef.current.onChange?.(params)
+            }),
+          },
+        }),
+      },
+    }),
+    {
+      id: `diagram:${input.view.id}`,
+      systemId: 'diagram',
+      // ...inspector,
+      input: {
+        xystore,
+        ...input,
+      },
+    },
+  )
+
+  return (
+    (
+      <DiagramActorSafeContext value={actorRef}>
+        <SyncStore input={input} actorRef={actorRef} />
+        <DiagramActorToggledFeatures actorRef={actorRef}>
+          {children}
+        </DiagramActorToggledFeatures>
+      </DiagramActorSafeContext>
+    )
+  )
+}
+
+const SyncStore = (
+  { input: { view, xyedges, xynodes, ...inputs }, actorRef }: { input: ActorContextInput; actorRef: DiagramActorRef },
+) => {
+  const features = useEnabledFeatures()
+  useUpdateEffect(() => {
+    actorRef.send({ type: 'update.inputs', inputs })
+  }, [actorRef, inputs])
+
+  useEffect(() => {
+    actorRef.send({ type: 'update.features', features })
+  }, [actorRef, features])
+
+  useUpdateEffect(() => {
+    actorRef.send({ type: 'update.view', view, xyedges, xynodes })
+  }, [actorRef, view, xyedges, xynodes])
+
+  return null
+}
+
+function DiagramActorToggledFeatures({ children, actorRef }: PropsWithChildren<{ actorRef: DiagramActorRef }>) {
+  const toggledFeatures = useSelector(actorRef, useCallbackRef(s => s.context.toggledFeatures), shallowEqual)
+  return (
+    <DiagramFeatures overrides={toggledFeatures}>
+      {children}
+    </DiagramFeatures>
+  )
+}

package/src/{likec4diagram/state → state}/assign.ts

@@ -3,10 +3,10 @@ import { getNodeDimensions } from '@xyflow/system'
 import { deepEqual as eq } from 'fast-equals'
 import { isEmpty, mergeDeep, omit } from 'remeda'
 import { assertEvent } from 'xstate'
-import { Base } from '../../base'
-import { type Vector, vector, VectorImpl } from '../../utils/vector'
-import type { Types } from '../types'
-import type { ActionArg, DiagramContext } from './machine'
+import { Base } from '../base/types'
+import type { Types } from '../likec4diagram/types'
+import { type Vector, vector, VectorImpl } from '../utils/vector'
+import type { ActionArg, Context as DiagramContext } from './diagram-machine'
 
 export function lastClickedNode(
   params: { context: DiagramContext; event: { node: Types.Node } },

package/src/{likec4diagram/state/machine.ts → state/diagram-machine.ts}

@@ -25,8 +25,10 @@ import {
 import { type EdgeChange, type NodeChange, type Rect, type Viewport, nodeToRect } from '@xyflow/system'
 import { clamp, first, hasAtLeast, prop } from 'remeda'
 import {
-  type ActorRefFromLogic,
-  type SnapshotFrom,
+  type ActorLogicFrom,
+  type ActorRef,
+  type AnyEventObject,
+  type Snapshot,
   and,
   assertEvent,
   assign,
@@ -39,14 +41,12 @@ import {
   spawnChild,
   stopChild,
 } from 'xstate'
-import { MinZoom } from '../../base/const'
-import type { EnabledFeatures } from '../../context'
-import { type FeatureName, AllDisabled } from '../../context/DiagramFeatures'
-import type { OpenSourceParams } from '../../LikeC4Diagram.props'
-import { relationshipDetailsActor } from '../../overlays/relationship-details/actor'
-import { relationshipsBrowserActor } from '../../overlays/relationships-browser/actor'
-import type { Types } from '../types'
-import { createLayoutConstraints } from '../useLayoutConstraints'
+import { MinZoom } from '../base/const'
+import { type EnabledFeatures, type FeatureName, AllDisabled } from '../context/DiagramFeatures'
+import type { OpenSourceParams } from '../LikeC4Diagram.props'
+import type { Types } from '../likec4diagram/types'
+import { createLayoutConstraints } from '../likec4diagram/useLayoutConstraints'
+import { overlaysActorLogic } from '../overlays/overlaysActor'
 import { type AlignmentMode, getAligner, toNodeRect } from './aligners'
 import {
   focusNodesEdges,
@@ -61,9 +61,9 @@ import {
   updateNavigationHistory,
   updateNodeData,
 } from './assign'
-import { type HotKeyEvent, hotkeyActor } from './hotkeyActor'
-import { syncManualLayoutActor } from './syncManualLayoutActor'
-import { focusedBounds } from './utils'
+import { type HotKeyEvent, hotkeyActorLogic } from './hotkeyActor'
+import { type Events as SyncLayoutEvents, syncManualLayoutActorLogic } from './syncManualLayoutActor'
+import { focusedBounds, typedSystem } from './utils'
 
 type XYStoreApi = ReturnType<typeof useStoreApi<Types.Node, Types.Edge>>
 
@@ -88,7 +88,7 @@ export interface Input {
 
 type ToggledFeatures = Partial<EnabledFeatures>
 
-export interface DiagramContext extends Input {
+export interface Context extends Input {
   features: EnabledFeatures
   // This is used to override features from props
   toggledFeatures: ToggledFeatures
@@ -117,7 +117,8 @@ export interface DiagramContext extends Input {
   }
   viewportBeforeFocus: null | Viewport
   xyflow: ReactFlowInstance<Types.Node, Types.Edge> | null
-  syncLayoutActorRef: ActorRefFromLogic<typeof syncManualLayoutActor>
+
+  syncLayoutActorRef: ActorRef<Snapshot<unknown>, SyncLayoutEvents, AnyEventObject>
 
   // If Dynamic View
   activeWalkthrough: null | {
@@ -126,16 +127,6 @@ export interface DiagramContext extends Input {
   }
 }
 
-export namespace DiagramContext {
-  export function findDiagramNode(ctx: DiagramContext, xynodeId: string) {
-    return ctx.view.nodes.find(n => n.id === xynodeId) ?? null
-  }
-
-  export function findDiagramEdge(ctx: DiagramContext, xyedgeId: string) {
-    return ctx.view.edges.find(e => e.id === xyedgeId) ?? null
-  }
-}
-
 export type Events =
   | HotKeyEvent
   | { type: 'xyflow.init'; instance: ReactFlowInstance<Types.Node, Types.Edge> }
@@ -157,7 +148,7 @@ export type Events =
   | { type: 'open.elementDetails'; fqn: Fqn; fromNode?: NodeId | undefined }
   | { type: 'open.relationshipDetails'; edgeId: EdgeId }
   | { type: 'open.relationshipsBrowser'; fqn: Fqn }
-  | { type: 'close.overlay' }
+  // | { type: 'close.overlay' }
   | { type: 'navigate.to'; viewId: ViewId; fromNode?: NodeId | undefined }
   | { type: 'navigate.back' }
   | { type: 'navigate.forward' }
@@ -171,26 +162,24 @@ export type Events =
   | { type: 'walkthrough.end' }
   | { type: 'toggle.feature'; feature: FeatureName; forceValue?: boolean }
 
-export type ActionArg = { context: DiagramContext; event: Events }
+export type ActionArg = { context: Context; event: Events }
 
 // TODO: naming convention for actors
 export const diagramMachine = setup({
   types: {
-    context: {} as DiagramContext,
+    context: {} as Context,
     input: {} as Input,
     children: {} as {
-      hotkey: 'hotkeyActor'
-      syncLayout: 'syncManualLayoutActor'
-      relationshipDetails: 'relationshipDetailsActor'
-      relationshipsBrowser: 'relationshipsBrowserActor'
+      syncLayout: 'syncManualLayoutActorLogic'
+      hotkey: 'hotkeyActorLogic'
+      overlays: 'overlaysActorLogic'
     },
     events: {} as Events,
   },
   actors: {
-    hotkeyActor,
-    syncManualLayoutActor,
-    relationshipsBrowserActor,
-    relationshipDetailsActor,
+    syncManualLayoutActorLogic,
+    hotkeyActorLogic,
+    overlaysActorLogic,
   },
   guards: {
     'enabled: FitView': ({ context }) => context.features.enableFitView,
@@ -312,14 +301,39 @@ export const diagramMachine = setup({
       })
     },
 
-    'updateFeatures': assign(({ event }) => {
+    'updateFeatures': enqueueActions(({ enqueue, system, event }) => {
       assertEvent(event, 'update.features')
-      return {
-        features: {
-          ...event.features,
-        },
+      const { features } = event
+      enqueue.assign({
+        features: { ...features },
+      })
+
+      const enableOverlays = features.enableElementDetails || features.enableRelationshipDetails ||
+        features.enableRelationshipBrowser
+      const hasRunning = typedSystem(system).overlaysActorRef
+      if (enableOverlays && !hasRunning) {
+        enqueue.spawnChild('overlaysActorLogic', { id: 'overlays', systemId: 'overlays' })
+        return
+      }
+      if (!enableOverlays && hasRunning) {
+        enqueue.stopChild('overlays')
       }
     }),
+
+    'closeAllOverlays': enqueueActions(({ system, enqueue }) => {
+      const overlays = typedSystem(system).overlaysActorRef
+      if (overlays) {
+        enqueue.sendTo(overlays, { type: 'close.all' })
+      }
+    }),
+
+    'stopSyncLayout': enqueueActions(({ context, enqueue }) => {
+      enqueue.sendTo(context.syncLayoutActorRef, { type: 'stop' })
+      enqueue.stopChild(context.syncLayoutActorRef)
+      enqueue.assign({
+        syncLayoutActorRef: null as any,
+      })
+    }),
   },
 }).createMachine({
   initial: 'initializing',
@@ -342,7 +356,7 @@ export const diagramMachine = setup({
     },
     viewport: { x: 0, y: 0, zoom: 1 },
     xyflow: null,
-    syncLayoutActorRef: spawn('syncManualLayoutActor', {
+    syncLayoutActorRef: spawn('syncManualLayoutActorLogic', {
       id: 'syncLayout',
       input: { parent: self, viewId: input.view.id },
     }),
@@ -444,12 +458,25 @@ export const diagramMachine = setup({
           ...focusNodesEdges(s),
           viewportBeforeFocus: { ...s.context.viewport },
         })),
-        spawnChild('hotkeyActor', { id: 'hotkey' }),
+        spawnChild('hotkeyActorLogic', { id: 'hotkey' }),
         {
           type: 'xyflow:fitDiagram',
           params: focusedBounds,
         },
       ],
+      exit: enqueueActions(({ enqueue, context }) => {
+        enqueue.stopChild('hotkey')
+        if (context.viewportBeforeFocus) {
+          enqueue({ type: 'xyflow:setViewport', params: { viewport: context.viewportBeforeFocus } })
+        } else {
+          enqueue({ type: 'xyflow:fitDiagram' })
+        }
+        enqueue.assign((s) => ({
+          ...unfocusNodesEdges(s),
+          viewportBeforeFocus: null,
+          focusedNode: null,
+        }))
+      }),
       on: {
         'xyflow.nodeClick': [
           {
@@ -504,143 +531,6 @@ export const diagramMachine = setup({
           }),
         },
       },
-      exit: [
-        stopChild('hotkey'),
-        enqueueActions(({ enqueue, context }) => {
-          if (context.viewportBeforeFocus) {
-            enqueue({ type: 'xyflow:setViewport', params: { viewport: context.viewportBeforeFocus } })
-          } else {
-            enqueue({ type: 'xyflow:fitDiagram' })
-          }
-          enqueue.assign((s) => ({
-            ...unfocusNodesEdges(s),
-            viewportBeforeFocus: null,
-            focusedNode: null,
-          }))
-        }),
-      ],
-    },
-    overlay: {
-      entry: spawnChild('hotkeyActor', { id: 'hotkey' }),
-      initial: 'hole',
-      states: {
-        hole: {
-          target: '#idle',
-        },
-        elementDetails: {
-          guard: ({ context }: { context: DiagramContext }) => context.activeElementDetails !== null,
-          entry: assign({
-            activeElementDetails: ({ context }) => {
-              const fqn = context.activeElementDetails!.fqn
-              const fromNode = context.activeElementDetails!.fromNode
-              if (fromNode) {
-                const internalNode = nonNullable(
-                  context.xystore.getState().nodeLookup.get(fromNode),
-                  'XY Internal Node not found',
-                )
-                const nodeRect = nodeToRect(internalNode)
-                const zoom = context.xyflow!.getZoom()
-
-                const nodeRectScreen = {
-                  ...context.xyflow!.flowToScreenPosition(nodeRect),
-                  width: nodeRect.width * zoom,
-                  height: nodeRect.height * zoom,
-                }
-
-                return { fqn, fromNode, nodeRect, nodeRectScreen }
-              } else {
-                return { fqn, fromNode }
-              }
-            },
-          }),
-          on: {
-            // Catch event and do nothing
-            'open.elementDetails': {
-              actions: assign({
-                activeElementDetails: ({ event, context }) => ({
-                  ...context.activeElementDetails,
-                  fqn: event.fqn,
-                  fromNode: context.activeElementDetails?.fromNode ?? null,
-                }),
-              }),
-            },
-            'close.overlay': {
-              target: '#idle',
-            },
-            'key.esc': {
-              target: '#idle',
-            },
-          },
-          exit: assign({
-            activeElementDetails: null,
-          }),
-        },
-        relationshipsBrowser: {
-          invoke: {
-            id: 'relationshipsBrowser',
-            src: 'relationshipsBrowserActor',
-            input: ({ context, event }) => {
-              assertEvent(event, 'open.relationshipsBrowser')
-              return {
-                subject: event.fqn,
-                scope: context.view,
-              }
-            },
-            onDone: {
-              target: '#idle',
-            },
-          },
-          on: {
-            'open.relationshipsBrowser': {
-              actions: sendTo('relationshipsBrowser', ({ event }) => ({
-                type: 'navigate.to',
-                subject: event.fqn,
-              })),
-            },
-            'close.overlay': {
-              actions: sendTo('relationshipsBrowser', { type: 'close' }),
-            },
-            'key.esc': {
-              actions: sendTo('relationshipsBrowser', { type: 'close' }),
-            },
-          },
-        },
-        relationshipDetails: {
-          invoke: {
-            id: 'relationshipDetails',
-            src: 'relationshipDetailsActor',
-            input: ({ event, context }) => {
-              assertEvent(event, 'open.relationshipDetails')
-              return {
-                edgeId: event.edgeId,
-                view: context.view,
-              }
-            },
-            onDone: {
-              target: '#idle',
-            },
-          },
-          on: {
-            'close.overlay': {
-              actions: sendTo('relationshipDetails', { type: 'close' }),
-            },
-            'key.esc': {
-              actions: sendTo('relationshipDetails', { type: 'close' }),
-            },
-          },
-        },
-      },
-      on: {
-        // We received another view, close overlay and process event again
-        'update.view': {
-          guard: 'is another view',
-          actions: raise(({ event }) => event, { delay: 50 }),
-          target: '#idle',
-        },
-      },
-      exit: [
-        stopChild('hotkey'),
-      ],
     },
     // Navigating to another view (after `navigateTo` event)
     navigating: {
@@ -649,8 +539,8 @@ export const diagramMachine = setup({
       states: {
         pending: {
           entry: enqueueActions(({ enqueue }) => {
-            enqueue.sendTo(c => c.context.syncLayoutActorRef, { type: 'stop' })
-            enqueue.stopChild('syncLayout')
+            enqueue('closeAllOverlays')
+            enqueue('stopSyncLayout')
             enqueue({
               type: 'trigger:NavigateTo',
               params: ({ context }) => ({
@@ -697,13 +587,17 @@ export const diagramMachine = setup({
       },
       exit: assign({
         syncLayoutActorRef: ({ self, context, spawn }) =>
-          spawn('syncManualLayoutActor', { id: 'syncLayout', input: { parent: self, viewId: context.view.id } }),
+          spawn('syncManualLayoutActorLogic', {
+            id: 'syncLayout',
+            systemId: 'syncLayout',
+            input: { parent: self, viewId: context.view.id },
+          }),
         lastOnNavigate: null,
       }),
     },
     walkthrough: {
       entry: [
-        spawnChild('hotkeyActor', { id: 'hotkey' }),
+        // spawnChild('hotkeyActor', { id: 'hotkey' }),
         assign({
           viewportBeforeFocus: ({ context }) => context.viewport,
           activeWalkthrough: ({ context, event }) => {
@@ -836,12 +730,16 @@ export const diagramMachine = setup({
           const isAnotherView = check('is another view')
           if (isAnotherView) {
             const viewId = event.view.id
-            enqueue.sendTo(c => c.context.syncLayoutActorRef, { type: 'stop' })
-            enqueue.stopChild('layout')
+
+            enqueue('closeAllOverlays')
+            enqueue('stopSyncLayout')
             enqueue.assign({
               focusedNode: null,
               syncLayoutActorRef: ({ self, spawn }) =>
-                spawn('syncManualLayoutActor', { id: 'syncLayout', input: { parent: self, viewId } }),
+                spawn('syncManualLayoutActorLogic', {
+                  id: 'syncLayout',
+                  input: { parent: self, viewId },
+                }),
             })
             const { fromNode, toNode } = findCorrespondingNode(context, event)
             if (fromNode && toNode) {
@@ -903,28 +801,55 @@ export const diagramMachine = setup({
       ],
     },
     'xyflow.resized': {
-      guard: ({ context }: { context: DiagramContext }) =>
-        context.features.enableFitView && !context.viewportChangedManually,
+      guard: ({ context }: { context: Context }) => context.features.enableFitView && !context.viewportChangedManually,
       actions: [
         cancel('fitDiagram'),
         raise({ type: 'fitDiagram' }, { id: 'fitDiagram', delay: 200 }),
       ],
     },
     'open.elementDetails': {
-      actions: assign({
-        activeElementDetails: ({ event, context }) => ({
-          fqn: event.fqn,
-          fromNode: event.fromNode ?? context.lastClickedNode?.id ?? null,
-          fromNodeScreenPosition: null,
-        }),
+      actions: enqueueActions(({ context, enqueue, system, event }) => {
+        let initiatedFrom = null as null | {
+          node: NodeId
+          clientRect: Rect
+        }
+        const fromNodeId = event.fromNode ?? context.view.nodes.find(n => DiagramNode.modelRef(n) === event.fqn)?.id
+        const internalNode = fromNodeId ? context.xystore.getState().nodeLookup.get(fromNodeId) : null
+        if (fromNodeId && internalNode) {
+          const nodeRect = nodeToRect(internalNode)
+          const zoom = context.xyflow!.getZoom()
+
+          const clientRect = {
+            ...context.xyflow!.flowToScreenPosition(nodeRect),
+            width: nodeRect.width * zoom,
+            height: nodeRect.height * zoom,
+          }
+          initiatedFrom = {
+            node: fromNodeId,
+            clientRect,
+          }
+        }
+        enqueue.sendTo(typedSystem(system).overlaysActorRef!, {
+          type: 'open.elementDetails' as const,
+          subject: event.fqn,
+          currentView: context.view,
+          ...(initiatedFrom && { initiatedFrom }),
+        })
       }),
-      target: '.overlay.elementDetails',
-    },
-    'open.relationshipDetails': {
-      target: '.overlay.relationshipDetails',
     },
     'open.relationshipsBrowser': {
-      target: '.overlay.relationshipsBrowser',
+      actions: sendTo(({ system }) => typedSystem(system).overlaysActorRef!, ({ context, event }) => ({
+        type: 'open.relationshipsBrowser',
+        subject: event.fqn,
+        scope: context.view,
+      })),
+    },
+    'open.relationshipDetails': {
+      actions: sendTo(({ system }) => typedSystem(system).overlaysActorRef!, ({ context, event }) => ({
+        type: 'open.relationshipDetails',
+        view: context.view,
+        edgeId: event.edgeId,
+      })),
     },
     'open.source': {
       actions: {
@@ -947,7 +872,7 @@ export const diagramMachine = setup({
     },
   },
   exit: [
-    stopChild('layout'),
+    'stopSyncLayout',
     stopChild('hotkey'),
     assign({
       xyflow: null,
@@ -959,7 +884,7 @@ export const diagramMachine = setup({
 })
 
 const nodeRef = (node: DiagramNode) => DiagramNode.modelRef(node) ?? DiagramNode.deploymentRef(node)
-function findCorrespondingNode(context: DiagramContext, event: { view: DiagramView }) {
+function findCorrespondingNode(context: Context, event: { view: DiagramView }) {
   const fromNodeId = context.lastOnNavigate?.fromNode
   const fromNode = fromNodeId && context.view.nodes.find(n => n.id === fromNodeId)
   const fromRef = fromNode && nodeRef(fromNode)
@@ -967,6 +892,6 @@ function findCorrespondingNode(context: DiagramContext, event: { view: DiagramVi
   return { fromNode, toNode }
 }
 
-export type Machine = typeof diagramMachine
-export type MachineSnapshot = SnapshotFrom<Machine>
-export type LikeC4ViewActorRef = ActorRefFromLogic<Machine>
+export type DiagramMachineLogic = ActorLogicFrom<typeof diagramMachine>
+// export type MachineSnapshot = SnapshotFrom<Machine>
+// export type LikeC4ViewActorRef = ActorRefFromLogic<Machine>

package/src/state/hotkeyActor.ts

@@ -0,0 +1,29 @@
+import { getHotkeyHandler } from '@mantine/hooks'
+import { type AnyEventObject, type NonReducibleUnknown, fromCallback } from 'xstate'
+
+export type HotKeyEvent = { type: 'key.esc' | `key.arrow.${'left' | 'right'}` }
+
+export const hotkeyActorLogic = fromCallback<AnyEventObject, NonReducibleUnknown, HotKeyEvent>(({ sendBack }: {
+  sendBack: (event: HotKeyEvent) => void
+}) => {
+  const escHandler = getHotkeyHandler([
+    ['Escape', () => sendBack({ type: 'key.esc' }), {
+      preventDefault: true,
+    }],
+  ])
+
+  const arrowshandler = getHotkeyHandler([
+    ['ArrowLeft', () => sendBack({ type: 'key.arrow.left' }), {
+      preventDefault: true,
+    }],
+    ['ArrowRight', () => sendBack({ type: 'key.arrow.right' }), {
+      preventDefault: true,
+    }],
+  ])
+  document.body.addEventListener('keydown', escHandler)
+  document.body.addEventListener('keydown', arrowshandler, { capture: true })
+  return () => {
+    document.body.removeEventListener('keydown', escHandler)
+    document.body.removeEventListener('keydown', arrowshandler, { capture: true })
+  }
+})

package/src/state/inspector.ts

@@ -0,0 +1,5 @@
+import { createBrowserInspector } from '@statelyai/inspect'
+
+export const inspector = {
+  inspect: /* @PURE */ createBrowserInspector().inspect,
+}