@likec4/diagram 1.22.1 → 1.23.1

package/src/overlays/overlaysActor.ts

@@ -0,0 +1,278 @@
+import type { Fqn } from '@likec4/core'
+import { getHotkeyHandler } from '@mantine/hooks'
+import { isString, last, reverse } from 'remeda'
+import {
+  type ActorLogicFrom,
+  type ActorRefFrom,
+  type SnapshotFrom,
+  assertEvent,
+  assign,
+  enqueueActions,
+  fromCallback,
+  setup,
+  spawnChild,
+  stopChild,
+} from 'xstate'
+import { elementDetailsLogic } from './element-details/actor'
+import { relationshipDetailsLogic } from './relationship-details/actor'
+import { relationshipsBrowserLogic } from './relationships-browser/actor'
+import type { Overlays } from './types'
+
+export type OverlayActorEvent =
+  | { type: 'open.elementDetails' } & Overlays.ElementDetails.Input
+  | { type: 'open.relationshipDetails' } & Overlays.RelationshipDetails.Input
+  | { type: 'open.relationshipsBrowser' } & Overlays.RelationshipsBrowser.Input
+  | { type: 'close'; actorId?: string | undefined } // Close last overlay if actorId is not provided
+  | { type: 'close.all' }
+
+export interface OverlaysContext {
+  seq: number
+  overlays: Array<
+    | { type: 'elementDetails'; id: `elementDetails-${number}`; subject: Fqn }
+    | { type: 'relationshipDetails'; id: `relationshipDetails-${number}` }
+    | { type: 'relationshipsBrowser'; id: `relationshipsBrowser-${number}`; subject: Fqn }
+  >
+}
+
+export type OverlayActorEmitedEvent =
+  | { type: 'opened'; overlay: 'elementDetails' | 'relationshipsBrowser' | 'relationshipDetails' }
+  | { type: 'closed'; overlay: 'elementDetails' | 'relationshipsBrowser' | 'relationshipDetails' }
+  | { type: 'idle' }
+
+type HotKeyEvent = { type: 'close' }
+// TODO: naming convention for actors
+const hotkeyLogic = fromCallback(({ sendBack }: {
+  sendBack: (event: HotKeyEvent) => void
+}) => {
+  const handler = getHotkeyHandler([
+    ['Escape', () => sendBack({ type: 'close' }), {
+      preventDefault: true,
+    }],
+  ])
+  document.body.addEventListener('keydown', handler, { capture: true })
+  return () => {
+    document.body.removeEventListener('keydown', handler, { capture: true })
+  }
+})
+
+export const overlaysActorLogic = setup({
+  types: {
+    context: {} as OverlaysContext,
+    events: {} as OverlayActorEvent,
+    emitted: {} as OverlayActorEmitedEvent,
+    children: {} as {
+      hotkey: 'hotkey'
+      [key: `elementDetails-${number}`]: 'elementDetails'
+      [key: `relationshipDetails-${number}`]: 'relationshipDetails'
+      [key: `relationshipsBrowser-${number}`]: 'relationshipsBrowser'
+    },
+  },
+  actors: {
+    relationshipDetails: relationshipDetailsLogic as Overlays.RelationshipDetails.Logic,
+    elementDetails: elementDetailsLogic as Overlays.ElementDetails.Logic,
+    relationshipsBrowser: relationshipsBrowserLogic as Overlays.RelationshipsBrowser.Logic,
+    hotkey: hotkeyLogic,
+  },
+  actions: {
+    'closeLastOverlay': enqueueActions(({ context, enqueue }) => {
+      if (context.overlays.length === 0) {
+        return
+      }
+      const lastOverlay = last(context.overlays)?.id
+      if (!lastOverlay) {
+        return
+      }
+      enqueue.sendTo(lastOverlay, { type: 'close' })
+      enqueue.stopChild(lastOverlay)
+      enqueue.assign({
+        overlays: context.overlays.filter(o => o.id !== lastOverlay),
+      })
+    }),
+    'closeSpecificOverlay': enqueueActions(({ context, enqueue }, params: { actorId: string }) => {
+      const toClose = context.overlays.find(o => o.id === params.actorId)?.id
+      if (toClose) {
+        enqueue.sendTo(toClose, { type: 'close' })
+        enqueue.stopChild(toClose)
+        enqueue.assign({
+          overlays: context.overlays.filter(o => o.id !== toClose),
+        })
+      }
+    }),
+    'closeAllOverlays': enqueueActions(({ context, enqueue }) => {
+      for (const { id } of reverse(context.overlays)) {
+        enqueue.sendTo(id, { type: 'close' })
+        enqueue.stopChild(id)
+      }
+
+      enqueue.assign({ overlays: [] })
+    }),
+    'openElementDetails': enqueueActions(({ context, enqueue, event }) => {
+      assertEvent(event, 'open.elementDetails')
+      if (context.overlays.some(o => o.type === 'elementDetails' && o.subject === event.subject)) {
+        return
+      }
+      const id = `elementDetails-${context.seq}` as const
+      enqueue.spawnChild('elementDetails', {
+        id,
+        input: event,
+      })
+      enqueue.assign({
+        seq: context.seq + 1,
+        overlays: [
+          ...context.overlays,
+          {
+            type: 'elementDetails' as const,
+            id,
+            subject: event.subject,
+          },
+        ],
+      })
+    }),
+    'openRelationshipDetails': enqueueActions(({ context, enqueue, event }) => {
+      assertEvent(event, 'open.relationshipDetails')
+      const currentOverlay = last(context.overlays)
+      if (currentOverlay?.type === 'relationshipDetails') {
+        enqueue.sendTo(currentOverlay.id, {
+          type: 'navigate.to',
+          edgeId: event.edgeId,
+        })
+        return
+      }
+      const id = `relationshipDetails-${context.seq}` as const
+      enqueue.spawnChild('relationshipDetails', {
+        id,
+        input: event,
+      })
+      enqueue.assign({
+        seq: context.seq + 1,
+        overlays: [
+          ...context.overlays,
+          {
+            type: 'relationshipDetails' as const,
+            id,
+          },
+        ],
+      })
+    }),
+    'openRelationshipsBrowser': enqueueActions(({ context, enqueue, event }) => {
+      assertEvent(event, 'open.relationshipsBrowser')
+      const currentOverlay = last(context.overlays)
+      if (currentOverlay?.type === 'relationshipsBrowser') {
+        enqueue.sendTo(currentOverlay.id, {
+          type: 'navigate.to',
+          subject: event.subject,
+        })
+        return
+      }
+      const id = `relationshipsBrowser-${context.seq}` as const
+      enqueue.spawnChild('relationshipsBrowser', {
+        id,
+        input: event,
+      })
+      enqueue.assign({
+        seq: context.seq + 1,
+        overlays: [
+          ...context.overlays,
+          {
+            type: 'relationshipsBrowser' as const,
+            id,
+            subject: event.subject,
+          },
+        ],
+      })
+    }),
+    'listenToEsc': spawnChild('hotkey', {
+      id: 'hotkey',
+    }),
+    'stopListeningToEsc': stopChild('hotkey'),
+  },
+  guards: {
+    'has overlays?': ({ context }) => context.overlays.length > 0,
+    'close specific overlay?': ({ context, event }) => {
+      assertEvent(event, 'close')
+      return isString(event.actorId) && context.overlays.some(o => o.id === event.actorId)
+    },
+    'last: is relationshipDetails?': ({ context }) => {
+      const lastOverlay = last(context.overlays)
+      return lastOverlay?.type === 'relationshipDetails'
+    },
+    'last: is relationshipsBrowser?': ({ context }) => {
+      const lastOverlay = last(context.overlays)
+      return lastOverlay?.type === 'relationshipsBrowser'
+    },
+  },
+}).createMachine({
+  id: 'overlays',
+  context: () => ({
+    seq: 1,
+    overlays: [],
+  }),
+  initial: 'idle',
+  on: {
+    'open.elementDetails': {
+      actions: 'openElementDetails',
+      target: '.active',
+      reenter: false,
+    },
+    'open.relationshipDetails': {
+      actions: 'openRelationshipDetails',
+      target: '.active',
+      reenter: false,
+    },
+    'open.relationshipsBrowser': {
+      actions: 'openRelationshipsBrowser',
+      target: '.active',
+      reenter: false,
+    },
+  },
+  states: {
+    idle: {},
+    active: {
+      entry: 'listenToEsc',
+      exit: 'stopListeningToEsc',
+      on: {
+        'close': [
+          {
+            guard: 'close specific overlay?',
+            actions: {
+              type: 'closeSpecificOverlay',
+              params: ({ event }) => ({ actorId: event.actorId! }),
+            },
+            target: 'closing',
+          },
+          {
+            actions: 'closeLastOverlay',
+            target: 'closing',
+          },
+        ],
+        'close.all': {
+          actions: [
+            'closeAllOverlays',
+            'stopListeningToEsc',
+          ],
+          target: 'idle',
+        },
+      },
+    },
+    closing: {
+      always: [
+        {
+          guard: 'has overlays?',
+          target: 'active',
+        },
+        {
+          actions: 'stopListeningToEsc',
+          target: 'idle',
+        },
+      ],
+    },
+  },
+  exit: [
+    'stopListeningToEsc',
+    'closeAllOverlays',
+  ],
+})
+
+export interface OverlaysActorLogic extends ActorLogicFrom<typeof overlaysActorLogic> {}
+export type OverlaysActorSnapshot = SnapshotFrom<OverlaysActorLogic>
+export interface OverlaysActorRef extends ActorRefFrom<OverlaysActorLogic> {}

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

@@ -5,6 +5,7 @@ import {
 import { prop } from 'remeda'
 import {
   type ActorLogic,
+  type ActorLogicFrom,
   type ActorRefFromLogic,
   type MachineSnapshot,
   type SnapshotFrom,
@@ -21,7 +22,7 @@ type XYFLowInstance = ReactFlowInstance<RelationshipDetailsTypes.Node, Relations
 export type Input = {
   edgeId: EdgeId
   view: DiagramView
-  // scope?: DiagramView | null
+  // view: DiagramView | null
   // parentRef?: AnyActorRef| null
 }
 
@@ -45,7 +46,7 @@ export type Events =
   | { type: 'navigate.to'; edgeId: EdgeId }
   | { type: 'close' }
 
-export const relationshipDetailsActor = setup({
+export const relationshipDetailsLogic = setup({
   types: {
     context: {} as Context,
     input: {} as Input,
@@ -149,14 +150,10 @@ export const relationshipDetailsActor = setup({
       ],
     },
   },
-}) as unknown as ActorLogic<
-  MachineSnapshot<Context, Events, any, 'opening' | 'active' | 'closed', any, any, any, any>,
-  Events,
-  Input,
-  any,
-  any
-> // TODO reduce type inference by forcing the types
+})
 
-export type RelationshipDetailsLogic = typeof relationshipDetailsActor
-export type RelationshipDetailsActorRef = ActorRefFromLogic<typeof relationshipDetailsActor>
+export interface RelationshipDetailsLogic extends ActorLogicFrom<typeof relationshipDetailsLogic> {
+}
+export interface RelationshipDetailsActorRef extends ActorRefFromLogic<RelationshipDetailsLogic> {
+}
 export type RelationshipDetailsSnapshot = SnapshotFrom<RelationshipDetailsActorRef>

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

@@ -2,6 +2,7 @@ import {
   CompoundNodeContainer,
   CompoundTitle,
   customNode,
+  ElementDetailsButton,
   ElementNodeContainer,
   ElementShape,
   ElementTitle,
@@ -11,14 +12,30 @@ import { ElementActions } from './ElementActions'
 import { Handle } from '@xyflow/react'
 import { Position } from '@xyflow/system'
 import type { NodeProps } from '../../../base'
+import { useDiagram } from '../../../hooks/useDiagram'
 import type { RelationshipDetailsTypes } from '../_types'
 
+const ElementDetailsButtonWithHandler = (props: NodeProps<RelationshipDetailsTypes.NodeData>) => {
+  const diagram = useDiagram()
+
+  return (
+    <ElementDetailsButton
+      {...props}
+      onClick={e => {
+        e.stopPropagation()
+        diagram.openElementDetails(props.data.fqn)
+      }}
+    />
+  )
+}
+
 export const nodeTypes = {
   element: customNode<RelationshipDetailsTypes.ElementNodeData>((props) => {
     return (
       <ElementNodeContainer nodeProps={props}>
         <ElementShape {...props} />
         <ElementTitle {...props} iconSize={40} />
+        <ElementDetailsButtonWithHandler {...props} />
         <ElementActions {...props} />
         <ElementPorts {...props} />
       </ElementNodeContainer>
@@ -28,6 +45,7 @@ export const nodeTypes = {
   compound: customNode<RelationshipDetailsTypes.CompoundNodeData>((props) => {
     return (
       <CompoundNodeContainer nodeProps={props}>
+        <ElementDetailsButtonWithHandler {...props} />
         <CompoundTitle {...props} />
         <CompoundPorts {...props} />
       </CompoundNodeContainer>

package/src/overlays/relationships-browser/RelationshipsBrowser.tsx

@@ -2,10 +2,10 @@ import type { Fqn } from '@likec4/core'
 import { ActionIcon, Box, Group } from '@mantine/core'
 import { useCallbackRef, useStateHistory } from '@mantine/hooks'
 import { IconChevronLeft, IconChevronRight, IconX } from '@tabler/icons-react'
-import { Panel, ReactFlowProvider, useStoreApi } from '@xyflow/react'
+import { Panel, ReactFlowProvider, useReactFlow, useStoreApi } from '@xyflow/react'
 import clsx from 'clsx'
 import { shallowEqual } from 'fast-equals'
-import { AnimatePresence, LayoutGroup, m } from 'framer-motion'
+import { AnimatePresence, LayoutGroup, m, useUnmountEffect } from 'framer-motion'
 import { memo, useEffect, useId, useRef } from 'react'
 import type { SnapshotFrom } from 'xstate'
 import { BaseXYFlow } from '../../base/BaseXYFlow'
@@ -18,6 +18,7 @@ import { nodeTypes } from './custom/nodeTypes'
 import {
   RelationshipsBrowserActorContext,
   useRelationshipsBrowser,
+  useRelationshipsBrowserActor,
   useRelationshipsBrowserState,
 } from './hooks'
 import { SelectElement } from './SelectElement'
@@ -26,53 +27,48 @@ export type RelationshipsBrowserProps = {
   actorRef: RelationshipsBrowserActorRef
 }
 export function RelationshipsBrowser({ actorRef }: RelationshipsBrowserProps) {
-  const id = useId()
   // const actorRef = useDiagramActorState(s => s.children.relationshipsBrowser)
   // if (actorRef == null) {
   //   return null
   // }
   const initialRef = useRef<{
-    initialNodes: Types.Node[]
-    initialEdges: Types.Edge[]
+    defaultNodes: Types.Node[]
+    defaultEdges: Types.Edge[]
   }>(null)
 
   if (initialRef.current == null) {
     initialRef.current = {
-      initialNodes: [],
-      initialEdges: [],
+      defaultNodes: [],
+      defaultEdges: [],
     }
   }
 
   return (
     <RelationshipsBrowserActorContext.Provider value={actorRef}>
       <ReactFlowProvider {...initialRef.current}>
-        <AnimatePresence>
-          <LayoutGroup id={id}>
+        <LayoutGroup id={actorRef.sessionId} inherit={false}>
+          <AnimatePresence>
             <RelationshipsBrowserXYFlow />
-          </LayoutGroup>
-        </AnimatePresence>
+          </AnimatePresence>
+        </LayoutGroup>
       </ReactFlowProvider>
     </RelationshipsBrowserActorContext.Provider>
   )
 }
 
 const selector = (state: SnapshotFrom<RelationshipsBrowserActorRef>) => ({
-  initialized: state.context.initialized,
   isActive: state.hasTag('active'),
   nodes: state.context.xynodes,
   edges: state.context.xyedges,
 })
 const selectorEq = (a: ReturnType<typeof selector>, b: ReturnType<typeof selector>) =>
-  a.initialized === b.initialized &&
   a.isActive === b.isActive &&
   shallowEqual(a.nodes, b.nodes) &&
   shallowEqual(a.edges, b.edges)
 
 const RelationshipsBrowserXYFlow = memo(() => {
-  const xystore = useStoreApi<RelationshipsBrowserTypes.Node, RelationshipsBrowserTypes.Edge>()
   const browser = useRelationshipsBrowser()
   const {
-    initialized,
     isActive,
     nodes,
     edges,
@@ -81,24 +77,15 @@ const RelationshipsBrowserXYFlow = memo(() => {
     selectorEq,
   )
 
-  // useLifecycleLogger('RelationshipsBrowserXYFlow.browser', [browser])
-  // useLifecycleLogger('RelationshipsBrowserXYFlow.xystore', [xystore])
-  // useLifecycleLogger('RelationshipsBrowserXYFlow.initialized, isActive', [initialized, isActive])
-  // useLifecycleLogger('RelationshipsBrowserXYFlow.nodes', [nodes])
-  // useLifecycleLogger('RelationshipsBrowserXYFlow.edges', [edges])
-
   return (
     <BaseXYFlow<Types.Node, Types.Edge>
-      id="relationships-browser"
+      id={`relationships-browser-${browser.actor.sessionId}`}
       nodes={nodes}
       edges={edges}
-      className={clsx(initialized && isActive ? 'initialized' : 'not-initialized')}
+      className={clsx(isActive ? 'initialized' : 'not-initialized')}
       nodeTypes={nodeTypes}
       edgeTypes={edgeTypes}
       fitViewPadding={ViewPadding}
-      onInit={useCallbackRef((instance) => {
-        browser.send({ type: 'xyflow.init', instance, store: xystore })
-      })}
       onNodeClick={useCallbackRef((e, node) => {
         e.stopPropagation()
         browser.send({ type: 'xyflow.nodeClick', node })
@@ -129,7 +116,7 @@ const RelationshipsBrowserXYFlow = memo(() => {
       pannable
       zoomable
     >
-      {initialized && <RelationshipsBrowserInner />}
+      <RelationshipsBrowserInner />
     </BaseXYFlow>
   )
 })
@@ -148,6 +135,13 @@ const RelationshipsBrowserInner = memo(() => {
     enableNavigationMenu,
   } = useRelationshipsBrowserState(selector2)
 
+  const store = useStoreApi<RelationshipsBrowserTypes.Node, RelationshipsBrowserTypes.Edge>()
+  const instance = useReactFlow<RelationshipsBrowserTypes.Node, RelationshipsBrowserTypes.Edge>()
+
+  useEffect(() => {
+    browser.send({ type: 'xyflow.init', instance, store })
+  }, [store, instance, browser])
+
   const layouted = useRelationshipsView(subjectId)
   const [historySubjectId, historyOps, { history, current }] = useStateHistory(subjectId)
 
@@ -161,11 +155,11 @@ const RelationshipsBrowserInner = memo(() => {
     if (historySubjectId !== subjectId) {
       browser.navigateTo(historySubjectId)
     }
-  }, [historySubjectId])
+  }, [historySubjectId, browser])
 
   useEffect(() => {
     browser.send({ type: 'update.view', layouted })
-  }, [layouted])
+  }, [layouted, browser])
 
   const hasStepBack = current > 0
   const hasStepForward = current + 1 < history.length