@likec4/diagram 1.19.1 → 1.20.0

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

@@ -1,10 +1,10 @@
 import type { Fqn, LikeC4Model } from '@likec4/core'
 import { Alert, Box, Button, Group, Menu, rem, Text, ThemeIcon, Tree, useTree } from '@mantine/core'
 import { IconInfoCircle, IconTarget, IconZoomScan } from '@tabler/icons-react'
-import { memo, type ReactNode, useEffect, useMemo } from 'react'
-import { useCurrentViewId, useDiagramStoreApi } from '../../hooks'
-import { useLikeC4ElementModel } from '../../likec4model/useLikeC4Model'
-import { stopPropagation } from '../../xyflow/utils'
+import { type ReactNode, memo, useEffect, useMemo } from 'react'
+import { useCurrentViewId } from '../../hooks/useCurrentViewId'
+import { useLikeC4Model } from '../../likec4model/useLikeC4Model'
+import { stopPropagation } from '../../utils'
 import * as css from './TabPanelDeployments.css'
 
 interface TreeNodeData {
@@ -19,7 +19,7 @@ type TabPanelDeploymentsProps = {
 }
 
 const DeploymentNodeRenderer = ({
-  node
+  node,
 }: {
   node: LikeC4Model.DeploymentNode
 }) => (
@@ -31,13 +31,13 @@ const DeploymentNodeRenderer = ({
 
 const DeployedInstanceRenderer = (
   {
-    instance
+    instance,
   }: {
     instance: LikeC4Model.DeployedInstance
-  }
+  },
 ) => {
   const currentViewId = useCurrentViewId()
-  const diagramApi = useDiagramStoreApi()
+  // const diagramApi = useDiagramStoreApi()
   const views = [...instance.views()]
   return (
     (
@@ -86,12 +86,12 @@ const DeployedInstanceRenderer = (
                     }
                     styles={{
                       itemSection: {
-                        marginInlineEnd: rem(8)
-                      }
+                        marginInlineEnd: rem(8),
+                      },
                     }}
                     onClick={e => {
                       e.stopPropagation()
-                      diagramApi.getState().onNavigateTo?.(view.id)
+                      // diagramApi.getState().onNavigateTo?.(view.id)
                     }}>
                     {view.title}
                   </Menu.Item>
@@ -106,11 +106,11 @@ const DeployedInstanceRenderer = (
 }
 
 export const TabPanelDeployments = memo<TabPanelDeploymentsProps>(({ elementFqn }) => {
-  const element = useLikeC4ElementModel(elementFqn)
+  const element = useLikeC4Model(true).element(elementFqn)
   const deployments = [...element.deployments()]
 
   const tree = useTree({
-    multiple: false
+    multiple: false,
   })
 
   const data = useMemo(() => {
@@ -122,7 +122,7 @@ export const TabPanelDeployments = memo<TabPanelDeploymentsProps>(({ elementFqn
         label: <DeployedInstanceRenderer instance={instance} />,
         value: instance.id,
         type: 'instance' as const,
-        children: []
+        children: [],
       }
       treeItems.set(instance.id, instanceNode)
 
@@ -137,7 +137,7 @@ export const TabPanelDeployments = memo<TabPanelDeploymentsProps>(({ elementFqn
           label: <DeploymentNodeRenderer node={ancestor} />,
           value: ancestor.id,
           type: 'node' as const,
-          children: [instanceNode]
+          children: [instanceNode],
         }
         treeItems.set(ancestor.id, ancestorNode)
         instanceNode = ancestorNode
@@ -170,15 +170,15 @@ export const TabPanelDeployments = memo<TabPanelDeploymentsProps>(({ elementFqn
       allowRangeSelection={false}
       classNames={{
         node: css.treeNode,
-        label: css.treeNodeLabel
+        label: css.treeNodeLabel,
       }}
       styles={{
         root: {
           position: 'relative',
 
           width: 'min-content',
-          minWidth: 300
-        }
+          minWidth: 300,
+        },
       }}
       data={data}
       tree={tree}
@@ -187,8 +187,8 @@ export const TabPanelDeployments = memo<TabPanelDeploymentsProps>(({ elementFqn
           {...elementProps}
           style={{
             ...(!hasChildren && {
-              marginBottom: rem(4)
-            })
+              marginBottom: rem(4),
+            }),
           }}
         >
           {hasChildren
@@ -202,8 +202,8 @@ export const TabPanelDeployments = memo<TabPanelDeploymentsProps>(({ elementFqn
                 styles={{
                   root: {
                     position: 'unset',
-                    paddingInlineStart: rem(16)
-                  }
+                    paddingInlineStart: rem(16),
+                  },
                 }}
               >
                 {node.label}

package/src/overlays/element-details/TabPanelRelationships.css.ts

@@ -10,7 +10,7 @@ export const fqn = style({
   borderRadius: 3,
   background: `color-mix(in srgb , ${vars.element.fill},  transparent 25%)`,
   lineHeight: 1.2,
-  color: vars.element.hiContrast
+  color: vars.element.hiContrast,
   // selectors: {
   //   [`${whereDark} &`]: {
   //   }
@@ -20,7 +20,7 @@ export const fqn = style({
 export const relationshipStat = style({
   selectors: {
     [`${whereLight} &`]: {
-      background: mantine.colors.gray[1]
+      background: mantine.colors.gray[1],
     },
     // [`&[data-zero]`]: {
     //   color: mantine.colors.dimmed
@@ -31,12 +31,12 @@ export const relationshipStat = style({
     [`&[data-missing]`]: {
       color: mantine.colors.orange[4],
       background: `color-mix(in srgb, ${mantine.colors.orange[8]} 15%, transparent)`,
-      borderColor: `color-mix(in srgb, ${mantine.colors.orange[5]} 20%, transparent)`
+      borderColor: `color-mix(in srgb, ${mantine.colors.orange[5]} 20%, transparent)`,
     },
     [`${whereLight} &[data-missing]`]: {
-      color: mantine.colors.orange[8]
-    }
-  }
+      color: mantine.colors.orange[8],
+    },
+  },
 })
 
 export const xyflow = style({
@@ -50,9 +50,9 @@ export const xyflow = style({
   selectors: {
     [`${whereLight} &`]: {
       borderColor: mantine.colors.gray[3],
-      background: mantine.colors.gray[1]
-    }
-  }
+      background: mantine.colors.gray[1],
+    },
+  },
 })
 
 export const panelScope = style({
@@ -66,12 +66,12 @@ export const panelScope = style({
     lineHeight: 1,
     color: mantine.colors.dimmed,
     opacity: 0.85,
-    transform: 'translateY(-100%) translateY(-2px)'
-  }
+    transform: 'translateY(-100%) translateY(-2px)',
+  },
 })
 
 globalStyle(`${whereLight} ${panelScope} .mantine-SegmentedControl-root`, {
-  background: mantine.colors.gray[3]
+  background: mantine.colors.gray[3],
 })
 
 export const edgeNum = style({
@@ -87,20 +87,20 @@ export const edgeNum = style({
   selectors: {
     [`${whereLight} &`]: {
       background: mantine.colors.gray[4],
-      color: mantine.colors.dark[6]
+      color: mantine.colors.dark[6],
     },
     [`&[data-zero]`]: {
-      color: mantine.colors.dimmed
+      color: mantine.colors.dimmed,
     },
     [`${whereLight} &[data-zero]`]: {
-      background: mantine.colors.gray[3]
+      background: mantine.colors.gray[3],
     },
     [`&[data-missing]`]: {
       color: mantine.colors.orange[4],
-      background: `color-mix(in srgb, ${mantine.colors.orange[8]} 20%, transparent)`
+      background: `color-mix(in srgb, ${mantine.colors.orange[8]} 20%, transparent)`,
     },
     [`${whereLight} &[data-missing]`]: {
-      color: mantine.colors.orange[8]
-    }
-  }
+      color: mantine.colors.orange[8],
+    },
+  },
 })

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

@@ -1,15 +1,14 @@
-import { type DiagramView, type LikeC4Model, nameFromFqn } from '@likec4/core'
-import { Box, Button, Group, Paper, SegmentedControl, Stack, Text, ThemeIcon } from '@mantine/core'
+import { type DiagramView, type Fqn, type LikeC4Model, nameFromFqn } from '@likec4/core'
+import { Box, Group, Paper, Stack, Text, ThemeIcon } from '@mantine/core'
 import { useId } from '@mantine/hooks'
-import { IconArrowRight, IconExternalLink, IconInfoCircle } from '@tabler/icons-react'
-import { Panel } from '@xyflow/react'
+import { IconArrowRight, IconInfoCircle } from '@tabler/icons-react'
+import { useActorRef } from '@xstate/react'
 import { LayoutGroup } from 'framer-motion'
-import { useState } from 'react'
+import { memo, useState } from 'react'
 import { unique } from 'remeda'
-import { useDiagramState } from '../../hooks'
-import { useOverlayDialog } from '../OverlayContext'
-import { RelationshipsXYFlow } from '../relationships-of/RelationshipsXYFlow'
-import { useLayoutedRelationships } from '../relationships-of/use-layouted-relationships'
+import { DiagramFeatures, useEnabledFeature } from '../../context'
+import { relationshipsBrowserActor } from '../relationships-browser/actor'
+import { RelationshipsBrowser } from '../relationships-browser/RelationshipsBrowser'
 import * as css from './TabPanelRelationships.css'
 
 type RelationshipsTabPanelProps = {
@@ -21,30 +20,21 @@ type RelationshipsTabPanelProps = {
 export function TabPanelRelationships({
   currentView,
   node,
-  element
+  element,
 }: RelationshipsTabPanelProps) {
   const layoutId = useId()
-  const enableRelationshipBrowser = useDiagramState(s => s.enableRelationshipBrowser)
-  const overlay = useOverlayDialog()
   const [scope, setScope] = useState<'global' | 'view'>('view')
 
-  const incoming = element.incoming().map(r => r.id).toArray()
-  const outgoing = element.outgoing().map(r => r.id).toArray()
+  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).toArray())
   const outgoingInView = unique(node.outgoing().flatMap(e => e.$edge.relations).toArray())
 
   const notIncludedRelations = [
     ...incoming,
-    ...outgoing
+    ...outgoing,
   ].filter(r => !incomingInView.includes(r) && !outgoingInView.includes(r)).length
-
-  const {
-    edges,
-    nodes,
-    bounds
-  } = useLayoutedRelationships(element.id, currentView, scope)
-
   return (
     <Stack gap={'xs'} pos={'relative'} w={'100%'} h={'100%'}>
       {(incoming.length + outgoing.length) > 0 && (
@@ -87,7 +77,9 @@ export function TabPanelRelationships({
 
       <Box className={css.xyflow}>
         <LayoutGroup id={layoutId}>
-          <RelationshipsXYFlow
+          <EmbeddedRelationshipsBrowser subjectId={element.id} currentView={currentView} />
+          {
+            /* <RelationshipsXYFlow
             subjectId={element.id}
             bounds={bounds}
             nodes={nodes}
@@ -103,7 +95,7 @@ export function TabPanelRelationships({
                 onChange={setScope as any}
                 data={[
                   { label: 'Global', value: 'global' },
-                  { label: 'View', value: 'view' }
+                  { label: 'View', value: 'view' },
                 ]}
               />
             </Panel>
@@ -119,7 +111,7 @@ export function TabPanelRelationships({
                     e.stopPropagation()
                     overlay.close(() => {
                       overlay.openOverlay({
-                        relationshipsOf: element.id
+                        relationshipsOf: element.id,
                       })
                     })
                   }}
@@ -128,7 +120,8 @@ export function TabPanelRelationships({
                 </Button>
               </Panel>
             )}
-          </RelationshipsXYFlow>
+          </RelationshipsXYFlow> */
+          }
         </LayoutGroup>
       </Box>
     </Stack>
@@ -138,7 +131,7 @@ export function TabPanelRelationships({
 function RelationshipsStat({
   title,
   total,
-  included
+  included,
 }: {
   title: string
   total: number
@@ -154,7 +147,7 @@ function RelationshipsStat({
       radius="md"
       mod={{
         zero: total === 0,
-        missing: total !== included
+        missing: total !== included,
       }}>
       <Stack gap={4} align="flex-end">
         <Text component="div" c={total !== included ? 'orange' : 'dimmed'} tt="uppercase" fw={600} fz={10} lh={1}>
@@ -198,3 +191,27 @@ function RelationshipsStat({
     </Paper>
   )
 }
+
+const EmbeddedRelationshipsBrowser = memo<{ subjectId: Fqn; currentView: DiagramView }>(
+  ({ subjectId, currentView }) => {
+    const actor = useActorRef(relationshipsBrowserActor, {
+      input: {
+        subject: subjectId,
+        scope: currentView,
+        closeable: false,
+        enableNavigationMenu: false,
+      },
+    })
+
+    return (
+      <DiagramFeatures
+        overrides={{
+          enableRelationshipBrowser: false,
+          enableNavigateTo: false,
+        }}>
+        <RelationshipsBrowser actorRef={actor} />
+      </DiagramFeatures>
+    )
+  },
+  (prev, next) => prev.subjectId === next.subjectId,
+)

package/src/overlays/element-details/TabPanelStructure.css.ts

@@ -3,7 +3,7 @@ import { easings, mantine, transitions, whereDark } from '../../theme-vars'
 
 export const treeNodeLabel = style({
   marginTop: mantine.spacing.sm,
-  marginBottom: mantine.spacing.sm
+  marginBottom: mantine.spacing.sm,
 })
 
 export const elementLabel = style({
@@ -19,18 +19,18 @@ export const elementLabel = style({
     transitionTimingFunction: easings.out,
     borderStyle: 'solid',
     color: mantine.colors.defaultColor,
-    background: mantine.colors.defaultHover
+    background: mantine.colors.defaultHover,
   },
   selectors: {
     [`${whereDark} &`]: {
-      color: mantine.colors.dark[1]
-    }
-  }
+      color: mantine.colors.dark[1],
+    },
+  },
 })
 globalStyle(`${elementLabel} > *`, {
-  transition: transitions.fast
+  transition: transitions.fast,
 })
 globalStyle(`${elementLabel}:hover > *`, {
   transitionTimingFunction: easings.out,
-  transform: 'translateX(1px)'
+  transform: 'translateX(1px)',
 })

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

@@ -26,7 +26,7 @@ type TabPanelStructureProps = {
 }
 
 export const ElementLabel = ({
-  element
+  element,
 }: { element: LikeC4Model.Element; type: 'ancestor' | 'current' | 'descedant' }) => (
   <Box className={css.elementLabel}>
     <Text component="div" fz={'sm'} fw={'500'}>{element.title}</Text>
@@ -39,10 +39,10 @@ export const ElementLabel = ({
 // }
 
 export function TabPanelStructure({
-  element
+  element,
 }: TabPanelStructureProps) {
   const tree = useTree({
-    multiple: false
+    multiple: false,
   })
 
   const data = useMemo(() => {
@@ -52,7 +52,7 @@ export function TabPanelStructure({
       label,
       value: `msg${seq++}`,
       type: 'message',
-      children: []
+      children: [],
     })
 
     const current: TreeNodeData = {
@@ -65,24 +65,24 @@ export function TabPanelStructure({
         value: child.id,
         element: child,
         type: 'descedant',
-        children: []
-      }))
+        children: [],
+      })),
     }
     if (current.children.length === 0) {
       current.children.push(
-        messageNode(<Pill radius={'sm'}>no nested</Pill>)
+        messageNode(<Pill radius={'sm'}>no nested</Pill>),
       )
     }
-    let ancestor = element.ancestors().reduce((acc, parent) => ({
+    let ancestor = [...element.ancestors()].reduce((acc, parent) => ({
       label: <ElementLabel type="ancestor" element={parent} />,
       value: parent.id,
       element: parent,
       type: 'ancestor' as const,
-      children: [acc]
+      children: [acc],
     }), current)
 
     return [
-      ancestor
+      ancestor,
     ]
   }, [element])
 
@@ -110,7 +110,7 @@ export function TabPanelStructure({
         expandOnClick={false}
         expandOnSpace={false}
         classNames={{
-          label: css.treeNodeLabel
+          label: css.treeNodeLabel,
         }}
         data={data}
         tree={tree}

package/src/overlays/overlay/Overlay.css.ts

@@ -0,0 +1,73 @@
+import { createVar, style } from '@vanilla-extract/css'
+import { calc } from '@vanilla-extract/css-utils'
+import { mantine, whereLight } from '../../theme-vars'
+
+const borderRadius = createVar('border-radius')
+export const dialog = style({
+  containerName: 'overlay-dialog',
+  containerType: 'size',
+  boxSizing: 'border-box',
+  margin: 0,
+  position: 'fixed',
+  inset: '5rem 4rem 4rem 4rem',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'stretch',
+  width: 'auto',
+  height: 'auto',
+  maxWidth: '100%',
+  maxHeight: '100%',
+  background: `color-mix(in srgb, ${mantine.colors.defaultBorder}, transparent 50%)`,
+  boxShadow: mantine.shadows.xl,
+  border: `0 solid transparent`,
+  outline: 'none',
+  borderRadius: borderRadius,
+  padding: 6,
+  vars: {
+    [borderRadius]: '8px',
+    '--backdrop-color': '34 34 34',
+    '--backdrop-opacity': '0%',
+    '--backdrop-blur': '0px',
+  },
+  selectors: {
+    [`&::backdrop`]: {
+      cursor: 'zoom-out',
+      WebkitBackdropFilter: 'blur(var(--backdrop-blur))',
+      backdropFilter: 'blur(var(--backdrop-blur))',
+      backgroundColor: `rgb(var(--backdrop-color) / var(--backdrop-opacity))`,
+    },
+    [`${whereLight} &`]: {
+      vars: {
+        '--backdrop-color': '15 15 15',
+      },
+    },
+  },
+  '@media': {
+    [mantine.smallerThan('md')]: {
+      borderRadius: mantine.radius.sm,
+      inset: '2rem',
+    },
+    [mantine.smallerThan('sm')]: {
+      border: 'none',
+      inset: '0px',
+    },
+  },
+})
+
+export const body = style({
+  border: `0 solid transparent`,
+  borderRadius: calc(borderRadius).subtract('2px').toString(),
+  // borderRadius: borderRadius,
+  backgroundColor: mantine.colors.body,
+  overflow: 'hidden',
+  flex: 1,
+  width: '100%',
+  height: '100%',
+  // visibility: 'hidden',
+  // selectors: {
+  //   [`${dialog}[open] &`]: {
+  //     visibility: 'visible',
+  //   },
+  // },
+  // backgroundColor: 'red',
+})

package/src/overlays/overlay/Overlay.tsx

@@ -0,0 +1,99 @@
+import {
+  Box,
+  RemoveScroll,
+} from '@mantine/core'
+import { useMergedRef } from '@mantine/hooks'
+import { useDebouncedCallback, useSyncedRef } from '@react-hookz/web'
+import clsx from 'clsx'
+import { type HTMLMotionProps, m } from 'framer-motion'
+import { type PropsWithChildren, forwardRef, useLayoutEffect, useRef, useState } from 'react'
+import * as css from './Overlay.css'
+
+type OverlayProps = PropsWithChildren<
+  HTMLMotionProps<'dialog'> & {
+    onClose: () => void
+    onClick?: never
+  }
+>
+
+export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(({ children, onClose, className, ...rest }, ref) => {
+  const [opened, setOpened] = useState(false)
+  const dialogRef = useRef<HTMLDialogElement>(null)
+
+  // Move dialog to the top of the DOM
+  // useLayoutEffect(() => dialogRef.current?.showModal(), [])
+
+  const onCloseRef = useSyncedRef(onClose)
+  const close = useDebouncedCallback(
+    () => {
+      onCloseRef.current()
+    },
+    [],
+    50,
+  )
+
+  useLayoutEffect(() => {
+    const cancel = (e: Event) => {
+      e.preventDefault()
+      close()
+    }
+    dialogRef.current?.addEventListener('cancel', cancel, { capture: true })
+    return () => {
+      dialogRef.current?.removeEventListener('cancel', cancel, { capture: true })
+    }
+  }, [])
+
+  return (
+    <m.dialog
+      ref={useMergedRef(ref, dialogRef)}
+      className={clsx(css.dialog, className)}
+      initial={{
+        '--backdrop-blur': '0px',
+        '--backdrop-opacity': '5%',
+        opacity: 0.85,
+        translateY: 12,
+        // opacity: 02.8,
+      }}
+      animate={{
+        '--backdrop-blur': '6px',
+        '--backdrop-opacity': '60%',
+        translateY: 0,
+        opacity: 1,
+        // transition: {
+        //   delay: 0.25,
+        // }
+      }}
+      onAnimationStart={() => {
+        dialogRef.current?.showModal()
+        setOpened(true)
+      }}
+      exit={{
+        opacity: 0.1,
+        translateY: -10,
+        '--backdrop-blur': '0px',
+        '--backdrop-opacity': '0%',
+        transition: {
+          duration: 0.1,
+        },
+      }}
+      onClick={e => {
+        if ((e.target as any)?.nodeName?.toUpperCase() === 'DIALOG') {
+          e.stopPropagation()
+          close()
+        }
+      }}
+      onClose={e => {
+        e.preventDefault()
+        e.stopPropagation()
+        close()
+      }}
+      {...rest}
+    >
+      <RemoveScroll forwardProps>
+        <Box className={css.body}>
+          {opened && <>{children}</>}
+        </Box>
+      </RemoveScroll>
+    </m.dialog>
+  )
+})