@likec4/diagram 1.22.1 → 1.23.0

package/src/overlays/Overlays.tsx

@@ -1,18 +1,18 @@
-import { Box, Button, Code, Group, Notification } from '@mantine/core'
-import { useCallbackRef } from '@mantine/hooks'
+import { nonexhaustive } from '@likec4/core'
+import { Box, Button, Code, Group, Notification, ScrollAreaAutosize } from '@mantine/core'
 import { IconX } from '@tabler/icons-react'
-import { deepEqual } from 'fast-equals'
+import { useSelector } from '@xstate/react'
 import { AnimatePresence, useReducedMotion } from 'framer-motion'
 import { animate } from 'framer-motion/dom'
 import { memo, useEffect, useMemo } from 'react'
 import { type FallbackProps, ErrorBoundary } from 'react-error-boundary'
+import { isNonNullish } from 'remeda'
+import type { AnyActorRef } from 'xstate'
 import { DiagramFeatures } from '../context'
 import { useXYStore } from '../hooks'
-import { useDiagram } from '../hooks/useDiagram'
-import { useDiagramActorState } from '../hooks/useDiagramActor'
-import type { MachineSnapshot } from '../likec4diagram/state/machine'
-import { ElementDetailsCard } from './element-details/ElementDetailsCard'
+import { ElementDetails } from './element-details/ElementDetails'
 import { Overlay } from './overlay/Overlay'
+import { type OverlaysActorRef, type OverlaysActorSnapshot } from './overlaysActor'
 import { RelationshipDetails } from './relationship-details/RelationshipDetails'
 import { RelationshipsBrowser } from './relationships-browser/RelationshipsBrowser'
 
@@ -31,7 +31,9 @@ function Fallback({ error, resetErrorBoundary }: FallbackProps) {
         title={'Oops, something went wrong'}
         p={'xl'}
         withCloseButton={false}>
-        <Code block>{errorString}</Code>
+        <ScrollAreaAutosize maw={'100%'} mah={400}>
+          <Code block>{errorString}</Code>
+        </ScrollAreaAutosize>
         <Group gap={'xs'} mt="xl">
           <Button color="gray" size="xs" variant="light" onClick={() => resetErrorBoundary()}>Reset</Button>
         </Group>
@@ -40,40 +42,50 @@ function Fallback({ error, resetErrorBoundary }: FallbackProps) {
   )
 }
 
-const selector = (s: MachineSnapshot) => ({
-  relationshipsBrowserActor: s.children.relationshipsBrowser,
-  relationshipDetailsActor: s.children.relationshipDetails,
-  viewId: s.context.view.id,
-  activeElementDetailsOf: s.context.activeElementDetails?.fqn ?? null,
-  fromNode: s.context.activeElementDetails?.fromNode ?? null,
-  rectFromNode: s.context.activeElementDetails?.nodeRectScreen ?? null,
-})
-const equals = (a: ReturnType<typeof selector>, b: ReturnType<typeof selector>) =>
-  a.relationshipDetailsActor == b.relationshipDetailsActor &&
-  a.relationshipsBrowserActor == b.relationshipsBrowserActor &&
-  a.activeElementDetailsOf === b.activeElementDetailsOf &&
-  a.viewId === b.viewId &&
-  a.fromNode === b.fromNode &&
-  deepEqual(a.rectFromNode, b.rectFromNode)
+const selectOverlays = (s: OverlaysActorSnapshot) => {
+  return s.context.overlays.map((overlay) => {
+    switch (overlay.type) {
+      case 'relationshipsBrowser':
+        return s.children[overlay.id]
+          ? {
+            type: overlay.type,
+            actorRef: s.children[overlay.id]!,
+          }
+          : null
+      case 'relationshipDetails':
+        return s.children[overlay.id]
+          ? {
+            type: overlay.type,
+            actorRef: s.children[overlay.id]!,
+          }
+          : null
+      case 'elementDetails':
+        return s.children[overlay.id]
+          ? {
+            type: overlay.type,
+            actorRef: s.children[overlay.id]!,
+          }
+          : null
+      default:
+        nonexhaustive(overlay)
+    }
+  }).filter(isNonNullish)
+}
+const compareSelectOverlays = <T extends ReturnType<typeof selectOverlays>>(a: T, b: T) => {
+  return a.length === b.length && a.every((overlay, i) => {
+    return overlay.actorRef === b[i]!.actorRef
+  })
+}
 
-export const Overlays = memo(() => {
+export const Overlays = memo(({ overlaysActorRef }: { overlaysActorRef: OverlaysActorRef }) => {
   const xyflowDomNode = useXYStore(s => s.domNode)
   const xyflowRendererDom = useMemo(() => xyflowDomNode?.querySelector('.react-flow__renderer') ?? null, [
     xyflowDomNode,
   ])
-  const diagram = useDiagram()
-  const {
-    relationshipsBrowserActor,
-    relationshipDetailsActor,
-    activeElementDetailsOf,
-    viewId,
-    fromNode,
-    rectFromNode,
-  } = useDiagramActorState(selector, equals)
-
+  const overlays = useSelector(overlaysActorRef, selectOverlays, compareSelectOverlays)
   const isMotionReduced = useReducedMotion() ?? false
 
-  const isActiveOverlay = !!activeElementDetailsOf || !!relationshipsBrowserActor || !!relationshipDetailsActor
+  const isActiveOverlay = overlays.length > 0
 
   useEffect(() => {
     if (!xyflowRendererDom || isMotionReduced) return
@@ -86,47 +98,45 @@ export const Overlays = memo(() => {
     })
   }, [isActiveOverlay, xyflowRendererDom])
 
-  const onClose = useCallbackRef(() => {
-    diagram.closeOverlay()
-    // relationshipsBrowserActor?.send({ type: 'close' })
-    // relationshipDetailsActor?.send({ type: 'close' })
-    // send({ type: 'close.overlay' })
+  const close = (actorRef: AnyActorRef) => {
+    overlaysActorRef.send({ type: 'close', actorId: actorRef.id })
+  }
+
+  const overlaysReact = overlays.map((overlay) => {
+    switch (overlay.type) {
+      case 'relationshipsBrowser':
+        return (
+          <Overlay
+            key={overlay.actorRef.sessionId}
+            onClose={() => close(overlay.actorRef)}>
+            <RelationshipsBrowser actorRef={overlay.actorRef} />
+          </Overlay>
+        )
+      case 'relationshipDetails':
+        return (
+          <Overlay
+            key={overlay.actorRef.sessionId}
+            onClose={() => close(overlay.actorRef)}>
+            <RelationshipDetails actorRef={overlay.actorRef} />
+          </Overlay>
+        )
+      case 'elementDetails':
+        return (
+          <ElementDetails
+            key={overlay.actorRef.sessionId}
+            actorRef={overlay.actorRef}
+            onClose={() => close(overlay.actorRef)} />
+        )
+      default:
+        nonexhaustive(overlay)
+    }
   })
 
   return (
     <DiagramFeatures.Overlays>
-      <ErrorBoundary FallbackComponent={Fallback} onReset={onClose}>
-        <AnimatePresence onExitComplete={onClose}>
-          {relationshipsBrowserActor && (
-            <Overlay
-              key={'relationships-browser'}
-              onClose={() => relationshipsBrowserActor.send({ type: 'close' })}>
-              <RelationshipsBrowser actorRef={relationshipsBrowserActor} />
-            </Overlay>
-          )}
-        </AnimatePresence>
-        <AnimatePresence onExitComplete={onClose}>
-          {relationshipDetailsActor && (
-            <Overlay
-              key={'relationship-details'}
-              onClose={() => relationshipDetailsActor.send({ type: 'close' })}>
-              <RelationshipDetails actorRef={relationshipDetailsActor} />
-            </Overlay>
-          )}
-        </AnimatePresence>
-
-        {/* TODO: Somehow ElementDetailsCard does not work properly inside AnimatePresence} */}
+      <ErrorBoundary FallbackComponent={Fallback} onReset={() => overlaysActorRef.send({ type: 'close.all' })}>
         <AnimatePresence>
-          {!!activeElementDetailsOf && (
-            <ElementDetailsCard
-              key={'element-details'}
-              fqn={activeElementDetailsOf}
-              viewId={viewId}
-              fromNode={fromNode}
-              rectFromNode={rectFromNode}
-              onClose={onClose}
-            />
-          )}
+          {overlaysReact}
         </AnimatePresence>
       </ErrorBoundary>
     </DiagramFeatures.Overlays>

package/src/overlays/element-details/ElementDetails.tsx

@@ -0,0 +1,33 @@
+import { useCallbackRef } from '@mantine/hooks'
+import { useSelector } from '@xstate/react'
+import { shallowEqual } from 'fast-equals'
+import type { ElementDetailsActorRef } from './actor'
+import { ElementDetailsActorContext } from './actorContext'
+import { ElementDetailsCard } from './ElementDetailsCard'
+
+export type ElementDetailsProps = {
+  actorRef: ElementDetailsActorRef
+  onClose: () => void
+}
+export function ElementDetails({
+  actorRef,
+  onClose,
+}: ElementDetailsProps) {
+  const props = useSelector(
+    actorRef,
+    useCallbackRef((s) => ({
+      viewId: s.context.currentView.id,
+      fromNode: s.context.initiatedFrom.node,
+      rectFromNode: s.context.initiatedFrom.clientRect,
+      fqn: s.context.subject,
+    })),
+    shallowEqual,
+  )
+  return (
+    <ElementDetailsActorContext value={actorRef}>
+      <ElementDetailsCard
+        onClose={onClose}
+        {...props} />
+    </ElementDetailsActorContext>
+  )
+}

package/src/overlays/element-details/ElementDetailsCard.tsx

@@ -42,7 +42,7 @@ import { clamp, isNullish, map, only, partition, pipe } from 'remeda'
 import { Link } from '../../components/Link'
 import { DiagramFeatures, IconRenderer, IfEnabled } from '../../context'
 import { useUpdateEffect } from '../../hooks'
-import { useDiagram } from '../../hooks/useDiagram'
+import { useDiagram, useDiagramContext } from '../../hooks/useDiagram'
 import type { OnNavigateTo } from '../../LikeC4Diagram.props'
 import { useLikeC4Model } from '../../likec4model'
 import * as css from './ElementDetailsCard.css'
@@ -116,14 +116,6 @@ export function ElementDetailsCard({
 
   const elementModel = viewModel.$model.element(fqn)
 
-  // const incoming = elementModel.incoming().map(r => r.id).toArray()
-  // const outgoing = elementModel.outgoing().map(r => r.id).toArray()
-  // const incomingInView = unique(nodeModel.incoming().flatMap(e => e.$edge.relations).toArray())
-  // const outgoingInView = unique(nodeModel.outgoing().flatMap(e => e.$edge.relations).toArray())
-  // const notIncludedRelations = [
-  //   ...incoming,
-  //   ...outgoing
-  // ].filter(r => !incomingInView.includes(r) && !outgoingInView.includes(r)).length
   const [viewsOf, otherViews] = pipe(
     [...elementModel.views()],
     map(v => v.$view),
@@ -229,6 +221,7 @@ export function ElementDetailsCard({
       ref={ref}
       className={css.dialog}
       layout
+      layoutRoot
       initial={{
         '--backdrop-blur': '0px',
         '--backdrop-opacity': '10%',
@@ -301,9 +294,7 @@ export function ElementDetailsCard({
               {elementIcon}
               <Box>
                 <Text
-                  component={m.div}
-                  layout="position"
-                  layoutId={`${viewId}:element:title:${fqn}`}
+                  component={'div'}
                   className={css.title}>
                   {elementModel.title}
                 </Text>
@@ -359,9 +350,9 @@ export function ElementDetailsCard({
                     radius="sm"
                     onClick={e => {
                       e.stopPropagation()
-                      diagram.openSource({
-                        element: elementModel.id,
-                      })
+                      // diagram.openSource({
+                      //   element: elementModel.id,
+                      // })
                     }}>
                     <IconFileSymlink stroke={1.8} style={{ width: '62%' }} />
                   </ActionIcon>
@@ -432,11 +423,10 @@ export function ElementDetailsCard({
                 enableRelationshipBrowser: false,
                 enableNavigateTo: false,
               }}>
-              {opened && !!nodeModel && activeTab === 'Relationships' && (
+              {opened && activeTab === 'Relationships' && (
                 <TabPanelRelationships
                   element={elementModel}
-                  node={nodeModel}
-                  currentView={diagram.currentView()} />
+                  node={nodeModel ?? null} />
               )}
             </DiagramFeatures>
           </TabsPanel>

package/src/overlays/element-details/TabPanelDeployments.tsx

@@ -37,7 +37,7 @@ const DeployedInstanceRenderer = (
   },
 ) => {
   const diagram = useDiagram()
-  const currentViewId = diagram.currentView().id
+  const currentViewId = diagram.currentView.id
   const views = [...instance.views()]
   return (
     (

package/src/overlays/element-details/TabPanelRelationships.tsx

@@ -1,31 +1,42 @@
-import { type DiagramView, type Fqn, type LikeC4Model, nameFromFqn } from '@likec4/core'
-import { Box, Group, Paper, Stack, Text, ThemeIcon } from '@mantine/core'
+import { type LikeC4Model, nameFromFqn } from '@likec4/core'
+import { Box, Group, Paper, Stack, Text, ThemeIcon, Tooltip as MantineTooltip } from '@mantine/core'
 import { IconArrowRight, IconInfoCircle } from '@tabler/icons-react'
-import { useActorRef } from '@xstate/react'
+import { useSelector } from '@xstate/react'
 import { useState } from 'react'
 import { unique } from 'remeda'
-import { relationshipsBrowserActor } from '../relationships-browser/actor'
 import { RelationshipsBrowser } from '../relationships-browser/RelationshipsBrowser'
+import { useElementDetailsActorRef } from './actorContext'
 import * as css from './TabPanelRelationships.css'
 
 type RelationshipsTabPanelProps = {
-  currentView: DiagramView
-  node: LikeC4Model.Node
+  node: LikeC4Model.Node | null
   element: LikeC4Model.Element
 }
 
+const Tooltip = MantineTooltip.withProps({
+  color: 'dark',
+  fz: 'xs',
+  openDelay: 600,
+  closeDelay: 120,
+  label: '',
+  children: null,
+  offset: 8,
+  withinPortal: false,
+})
+
 export function TabPanelRelationships({
-  currentView,
   node,
   element,
 }: RelationshipsTabPanelProps) {
+  const delailsActor = useElementDetailsActorRef()
+  const relationshipsBrowserActor = useSelector(delailsActor, s => s.children[`${delailsActor.id}-relationships`])
   const [scope, setScope] = useState<'global' | 'view'>('view')
 
   const incoming = [...element.incoming()].map(r => r.id)
   const outgoing = [...element.outgoing()].map(r => r.id)
 
-  const incomingInView = unique([...node.incoming()].flatMap(e => e.$edge.relations))
-  const outgoingInView = unique([...node.outgoing()].flatMap(e => e.$edge.relations))
+  const incomingInView = node ? unique([...node.incoming()].flatMap(e => e.$edge.relations)) : []
+  const outgoingInView = node ? unique([...node.outgoing()].flatMap(e => e.$edge.relations)) : []
 
   const notIncludedRelations = [
     ...incoming,
@@ -57,22 +68,24 @@ export function TabPanelRelationships({
             </Group>
           </Box>
           {notIncludedRelations > 0 && (
-            <Group
-              mt={'xs'}
-              gap={6}
-              c="orange"
-              style={{ cursor: 'pointer' }}>
-              <IconInfoCircle style={{ width: 14 }} />
-              <Text fz="sm">
-                {notIncludedRelations} relationship{notIncludedRelations > 1 ? 's are' : ' is'} hidden
-              </Text>
-            </Group>
+            <Tooltip label="Current view does not include some relationships">
+              <Group
+                mt={'xs'}
+                gap={6}
+                c="orange"
+                style={{ cursor: 'pointer' }}>
+                <IconInfoCircle style={{ width: 14 }} />
+                <Text fz="sm">
+                  {notIncludedRelations} relationship{notIncludedRelations > 1 ? 's are' : ' is'} hidden
+                </Text>
+              </Group>
+            </Tooltip>
           )}
         </Group>
       )}
 
       <Box className={css.xyflow}>
-        <EmbeddedRelationshipsBrowser subjectId={element.id} currentView={currentView} />
+        {relationshipsBrowserActor && <RelationshipsBrowser actorRef={relationshipsBrowserActor} />}
       </Box>
     </Stack>
   )
@@ -141,15 +154,3 @@ function RelationshipsStat({
     </Paper>
   )
 }
-
-const EmbeddedRelationshipsBrowser = ({ subjectId, currentView }: { subjectId: Fqn; currentView: DiagramView }) => {
-  const actor = useActorRef(relationshipsBrowserActor, {
-    input: {
-      subject: subjectId,
-      scope: currentView,
-      closeable: false,
-      enableNavigationMenu: false,
-    },
-  })
-  return <RelationshipsBrowser actorRef={actor} />
-}

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

@@ -0,0 +1,102 @@
+import { type DiagramView, type Fqn, type NodeId } from '@likec4/core'
+import { type Rect } from '@xyflow/system'
+import {
+  type ActorLogicFrom,
+  type ActorRefFromLogic,
+  type SnapshotFrom,
+  assign,
+  sendTo,
+  setup,
+  spawnChild,
+  stopChild,
+} from 'xstate'
+import { relationshipsBrowserLogic } from '../relationships-browser/actor'
+
+export type Input = {
+  subject: Fqn
+  currentView: DiagramView
+  initiatedFrom?: {
+    node?: NodeId
+    clientRect?: Rect
+  }
+}
+
+export type Context = {
+  subject: Fqn
+  currentView: DiagramView
+  initiatedFrom: {
+    node: NodeId | null
+    clientRect: Rect | null
+  }
+}
+
+export type Events =
+  | { type: 'change.subject'; subject: Fqn }
+  | { type: 'close' }
+
+export const elementDetailsLogic = setup({
+  types: {
+    context: {} as Context,
+    input: {} as Input,
+    events: {} as Events,
+    children: {} as {
+      [key: `${string}-relationships`]: 'relationshipsBrowserLogic'
+    },
+  },
+  actors: {
+    relationshipsBrowserLogic,
+  },
+}).createMachine({
+  id: 'element-details',
+  context: ({ input }) => ({
+    ...input,
+    initiatedFrom: {
+      node: input.initiatedFrom?.node ?? null,
+      clientRect: input.initiatedFrom?.clientRect ?? null,
+    },
+  }),
+  initial: 'active',
+  states: {
+    'active': {
+      entry: spawnChild('relationshipsBrowserLogic', {
+        id: ({ self }) => `${self.id}-relationships`,
+        input: ({ context }) => ({
+          subject: context.subject,
+          scope: context.currentView,
+          enableNavigationMenu: false,
+          closeable: false,
+        }),
+      }),
+      exit: [
+        sendTo(({ self }) => `${self.id}-relationships`, { type: 'close' }),
+        stopChild(({ self }) => `${self.id}-relationships`),
+      ],
+      on: {
+        'change.subject': {
+          actions: assign({
+            subject: ({ event }) => event.subject,
+          }),
+        },
+        'close': 'closed',
+      },
+    },
+    closed: {
+      id: 'closed',
+      type: 'final',
+    },
+  },
+  // exit: assign({
+  //   initialized: false,
+  //   xyflow: null,
+  //   layouted: null,
+  //   xystore: null,
+  //   xyedges: [],
+  //   xynodes: [],
+  // }),
+})
+
+export interface ElementDetailsLogic extends ActorLogicFrom<typeof elementDetailsLogic> {
+}
+export interface ElementDetailsActorRef extends ActorRefFromLogic<ElementDetailsLogic> {
+}
+export type ElementDetailsSnapshot = SnapshotFrom<ElementDetailsLogic>

package/src/overlays/element-details/actorContext.tsx

@@ -0,0 +1,16 @@
+import { createContext, useContext } from 'react'
+import type { ElementDetailsActorRef } from './actor'
+
+/**
+ * To improve experience with HMR, we use `createSafeContext` as a boundary for hoooks
+ */
+export const ElementDetailsActorContext = createContext<ElementDetailsActorRef>(null as any)
+ElementDetailsActorContext.displayName = 'ElementDetailsActorContext'
+
+export const useElementDetailsActorRef = () => {
+  const ctx = useContext(ElementDetailsActorContext)
+  if (ctx === null) {
+    throw new Error('ElementDetailsActorRef is not provided')
+  }
+  return ctx
+}

package/src/overlays/overlay/Overlay.tsx

@@ -5,7 +5,7 @@ import {
 import { useDebouncedCallback, useSyncedRef, useTimeoutEffect } from '@react-hookz/web'
 import clsx from 'clsx'
 import { type HTMLMotionProps, m } from 'framer-motion'
-import { type PropsWithChildren, useRef, useState } from 'react'
+import { type PropsWithChildren, useLayoutEffect, useRef, useState } from 'react'
 import * as css from './Overlay.css'
 
 type OverlayProps = PropsWithChildren<
@@ -22,11 +22,14 @@ type OverlayProps = PropsWithChildren<
 export function Overlay({ children, onClose, className, classes, ...rest }: OverlayProps) {
   const [opened, setOpened] = useState(false)
   const dialogRef = useRef<HTMLDialogElement>(null)
+  const isClosingRef = useRef(false)
 
   // Move dialog to the top of the DOM
   const onCloseRef = useSyncedRef(onClose)
   const close = useDebouncedCallback(
     () => {
+      if (isClosingRef.current) return
+      isClosingRef.current = true
       onCloseRef.current()
     },
     [],
@@ -41,16 +44,16 @@ export function Overlay({ children, onClose, className, classes, ...rest }: Over
   //   }
   // })
 
-  // useLayoutEffect(() => {
-  //   const cancel = (e: Event) => {
-  //     e.preventDefault()
-  //     close()
-  //   }
-  //   dialogRef.current?.addEventListener('cancel', cancel, { capture: true })
-  //   return () => {
-  //     dialogRef.current?.removeEventListener('cancel', cancel, { capture: true })
-  //   }
-  // }, [])
+  useLayoutEffect(() => {
+    const cancel = (e: Event) => {
+      e.preventDefault()
+      close()
+    }
+    dialogRef.current?.addEventListener('cancel', cancel, { capture: true })
+    return () => {
+      dialogRef.current?.removeEventListener('cancel', cancel, { capture: true })
+    }
+  }, [])
 
   useTimeoutEffect(() => {
     if (!dialogRef.current?.open) {