@likec4/diagram 1.19.1 → 1.20.0

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

@@ -1,17 +1,16 @@
 import {
-  ComputedNode,
-  ComputedView,
   type DiagramView,
   type Element,
   type Fqn,
-  invariant,
-  isDeploymentView,
-  isScopedElementView,
   type LikeC4View,
   type Link,
-  type ViewId
+  ComputedNode,
+  ComputedView,
+  isDeploymentView,
+  isScopedElementView,
 } from '@likec4/core'
 import {
+  type TextProps,
   ActionIcon,
   ActionIconGroup,
   Anchor,
@@ -34,21 +33,22 @@ import {
   TabsPanel,
   TabsTab,
   Text,
-  type TextProps,
   ThemeIcon,
   Tooltip as MantineTooltip,
-  UnstyledButton
+  UnstyledButton,
 } from '@mantine/core'
-import { useSessionStorage, useViewportSize } from '@mantine/hooks'
+import { useDebouncedCallback, useSessionStorage, useViewportSize } from '@mantine/hooks'
 import { IconCheck, IconCopy, IconExternalLink, IconFileSymlink, IconStack2, IconZoomScan } from '@tabler/icons-react'
 import clsx from 'clsx'
-import { m, type PanInfo, useDragControls, useMotionValue } from 'framer-motion'
-import { memo, type PropsWithChildren, useCallback, useEffect, useRef } from 'react'
-import { clamp, find, isNullish, map, only, partition, pick, pipe } from 'remeda'
-import { useDiagramState, useDiagramStoreApi, useXYFlow, useXYInternalNode } from '../../hooks'
+import { type PanInfo, m, useDragControls, useMotionValue } from 'framer-motion'
+import { type PropsWithChildren, memo, useCallback, useLayoutEffect, useRef } from 'react'
+import { clamp, isNullish, map, only, partition, pipe } from 'remeda'
+import { IconRenderer, IfEnabled } from '../../context'
+import { useUpdateEffect } from '../../hooks'
+import { useDiagram } from '../../hooks/useDiagram'
+import { useDiagramContext } from '../../hooks/useDiagramContext'
 import type { ElementIconRenderer, OnNavigateTo } from '../../LikeC4Diagram.props'
-import { useLikeC4CurrentViewModel } from '../../likec4model'
-import { useOverlayDialog } from '../OverlayContext'
+import { useLikeC4Model } from '../../likec4model'
 import * as css from './ElementDetailsCard.css'
 import { TabPanelDeployments } from './TabPanelDeployments'
 import { TabPanelRelationships } from './TabPanelRelationships'
@@ -57,7 +57,7 @@ import { TabPanelStructure } from './TabPanelStructure'
 const Divider = MantineDivider.withProps({
   mb: 8,
   labelPosition: 'left',
-  variant: 'dashed'
+  variant: 'dashed',
 })
 const Tooltip = MantineTooltip.withProps({
   color: 'dark',
@@ -66,7 +66,7 @@ const Tooltip = MantineTooltip.withProps({
   closeDelay: 150,
   label: '',
   children: null,
-  offset: 4
+  offset: 4,
 })
 
 const SmallLabel = Text.withProps({
@@ -74,14 +74,14 @@ const SmallLabel = Text.withProps({
   fz: 11,
   fw: 500,
   c: 'dimmed',
-  lh: 1
+  lh: 1,
 })
 
 const PropertyLabel = Text.withProps({
   component: 'div',
   fz: 'xs',
   c: 'dimmed',
-  className: css.propertyLabel
+  className: css.propertyLabel,
 })
 
 type ElementDetailsCardProps = {
@@ -94,37 +94,33 @@ const TABS = ['Properties', 'Relationships', 'Views', 'Structure', 'Deployments'
 type TabName = typeof TABS[number]
 
 export const ElementDetailsCard = memo(({ fqn }: ElementDetailsCardProps) => {
+  const {
+    viewId,
+    fromNode,
+    rectFromNode,
+  } = useDiagramContext(s => ({
+    viewId: s.view.id,
+    fromNode: s.activeElementDetails?.fromNode ?? null,
+    rectFromNode: s.activeElementDetails?.nodeRectScreen ?? null,
+  }))
   const windowSize = useViewportSize()
   const windowWidth = windowSize.width || window.innerWidth || 1200,
     windowHeight = windowSize.height || window.innerHeight || 800
-  const xyflow = useXYFlow()
-  const xynode = useXYInternalNode(fqn)
-  invariant(xynode, `XYNode with id ${fqn} not found`)
 
-  const overlay = useOverlayDialog()
   const [activeTab, setActiveTab] = useSessionStorage<TabName>({
     key: `likec4:element-details:active-tab`,
-    defaultValue: 'Properties'
-  })
-  const diagramApi = useDiagramStoreApi()
-  const viewModel = useLikeC4CurrentViewModel()
-  const {
-    view: currentView,
-    renderIcon,
-    onOpenSource
-  } = useDiagramState(pick(['view', 'renderIcon', 'onNavigateTo', 'onOpenSource']))
-  const diagramNode = currentView.nodes.find(n => n.id === fqn)
-  invariant(diagramNode, `DiagramNode with fqn ${fqn} not found`)
-  const nodeModel = viewModel.findNode(fqn)
-  invariant(nodeModel && nodeModel.hasElement(), `NodeModel with fqn ${fqn} not found`)
-  const elementModel = nodeModel.element
-  const viewId = viewModel.id
-
-  const elementIcon = ElementIcon({
-    element: nodeModel.$node,
-    viewId,
-    renderIcon
+    defaultValue: 'Properties',
   })
+  const diagram = useDiagram()
+  const likec4model = useLikeC4Model(true)
+  const viewModel = likec4model.view(viewId)
+  // const currentView = diagram.currentView()
+
+  // const diagramNode = currentView.nodes.find(n => n.id === fqn)
+  // invariant(diagramNode, `DiagramNode with fqn ${fqn} not found`)
+  const nodeModel = fromNode ? viewModel.findNode(fromNode) : viewModel.findNodeWithElement(fqn)
+  // invariant(nodeModel && nodeModel.hasElement(), `NodeModel with fqn ${fqn} not found`)
+  const elementModel = viewModel.$model.element(fqn)
 
   // const incoming = elementModel.incoming().map(r => r.id).toArray()
   // const outgoing = elementModel.outgoing().map(r => r.id).toArray()
@@ -143,94 +139,121 @@ export const ElementDetailsCard = memo(({ fqn }: ElementDetailsCardProps) => {
     partition(view => {
       const v = view as LikeC4View
       return isScopedElementView(v) && v.viewOf === fqn
-    })
+    }),
   )
 
-  const defaultView = nodeModel.navigateTo?.$view
-    ?? find(viewsOf, v => v.id !== viewModel.id) ?? null
-
-  const defaultLink = only(nodeModel.links)
+  let defaultView = nodeModel?.navigateTo?.$view ?? elementModel.defaultView?.$view ?? null
+  if (defaultView?.id === viewId) {
+    defaultView = null
+  }
 
-  const onNavigateToCb = useCallback((toView: ViewId, e?: React.MouseEvent): void => {
-    e?.stopPropagation()
-    const { onNavigateTo } = diagramApi.getState()
-    if (!onNavigateTo) {
-      return
-    }
-    overlay.close(() => {
-      diagramApi.setState({
-        lastOnNavigate: {
-          fromView: viewModel.id,
-          toView,
-          fromNode: fqn
-        }
-      })
-      onNavigateTo(toView)
-    })
-  }, [fqn, viewModel.id])
+  const defaultLink = only(elementModel.links)
   const controls = useDragControls()
 
-  const isCompound = nodeModel.children.length > 0
-
-  const fromPositon = xyflow.flowToScreenPosition({
-    x: xynode.internals.positionAbsolute.x + diagramNode.width / 2,
-    y: xynode.internals.positionAbsolute.y + (isCompound ? 0 : diagramNode.height / 2)
-  })
-
+  const isCompound = (nodeModel?.$node.children?.length ?? 0) > 0
   const _width = Math.min(700, windowWidth - MIN_PADDING * 2)
   const _height = Math.min(650, windowHeight - MIN_PADDING * 2)
 
+  const fromPositon = rectFromNode
+    ? {
+      x: rectFromNode.x + (isCompound ? (rectFromNode.width - _width / 2) : rectFromNode.width / 2),
+      y: rectFromNode.y + (isCompound ? 0 : rectFromNode.height / 2),
+    }
+    : {
+      x: windowWidth / 2,
+      y: windowHeight / 2,
+    }
+
+  const fromScale = rectFromNode ? Math.min(rectFromNode.width / _width, rectFromNode.height / _height, 0.9) : 1
+
   const left = Math.round(
     clamp(fromPositon.x - _width / 2, {
       min: MIN_PADDING,
-      max: windowWidth - _width - MIN_PADDING
-    })
+      max: windowWidth - _width - MIN_PADDING,
+    }),
   )
   const top = Math.round(
     clamp(fromPositon.y - (isCompound ? 0 : 60), {
       min: MIN_PADDING,
-      max: windowHeight - _height - MIN_PADDING
-    })
+      max: windowHeight - _height - MIN_PADDING,
+    }),
   )
 
+  const originX = clamp((fromPositon.x - left) / _width, {
+    min: 0.1,
+    max: 0.9,
+  })
+  const originY = clamp((fromPositon.y - top) / _height, {
+    min: 0.1,
+    max: 0.9,
+  })
+
   const width = useMotionValue(_width)
   const height = useMotionValue(_height)
 
+  useUpdateEffect(() => {
+    width.set(_width)
+    height.set(_height)
+  }, [_width, _height])
+
   const handleDrag = useCallback((_: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
     width.set(Math.max(width.get() + info.delta.x, 320))
     height.set(Math.max(height.get() + info.delta.y, 300))
   }, [])
 
   const ref = useRef<HTMLDialogElement>(null)
-  useEffect(() => {
+  useLayoutEffect(() => {
     ref.current?.showModal()
   }, [])
 
+  const diagramApi = useDiagram()
+  const close = useDebouncedCallback(
+    () => {
+      diagramApi.closeOverlay()
+    },
+    50,
+  )
+
+  const notation = nodeModel?.$node.notation ?? null
+
+  const elementIcon = IconRenderer({
+    element: {
+      id: fqn,
+      title: elementModel.title,
+      icon: nodeModel?.icon ?? elementModel.icon,
+    },
+    className: css.elementIcon,
+  })
+
   return (
     <m.dialog
       ref={ref}
       className={css.dialog}
+      layoutRoot
       initial={{
         '--backdrop-blur': '0px',
-        '--backdrop-opacity': '0%'
+        '--backdrop-opacity': '10%',
       }}
       animate={{
-        '--backdrop-blur': '1px',
-        '--backdrop-opacity': '50%'
+        '--backdrop-blur': '3px',
+        '--backdrop-opacity': '60%',
       }}
       exit={{
         '--backdrop-blur': '0px',
-        '--backdrop-opacity': '0%'
+        '--backdrop-opacity': '0%',
+        transition: {
+          duration: 0.1,
+        },
       }}
       onClick={e => {
         if ((e.target as any)?.nodeName?.toUpperCase() === 'DIALOG') {
           e.stopPropagation()
-          overlay.close()
+          close()
         }
       }}
       onClose={e => {
         e.stopPropagation()
-        overlay.close()
+        close()
       }}
     >
       <RemoveScroll forwardProps>
@@ -244,43 +267,35 @@ export const ElementDetailsCard = memo(({ fqn }: ElementDetailsCardProps) => {
           shadow="md"
           component={m.div}
           className={css.card}
-          layoutId={`${viewId}:element:${fqn}`}
-          // initial={{
-          //   opacity: 1,
-          //   top,
-          //   left,
-          //   // transform: `translate(${left}px, ${top}px)`,
-          //   // translateX: left,
-          //   // translateY: top,
-          //   // width: _width,
-          //   // height: _height
-          // }}
+          layoutId={fqn}
           initial={{
             top,
             left,
             width: _width,
             height: _height,
-            opacity: 0
+            opacity: 0,
+            originX,
+            originY,
+            scale: Math.max(fromScale, 0.7),
           }}
           animate={{
-            opacity: 1
+            opacity: 1,
+            scale: 1,
           }}
           exit={{
-            opacity: 0
+            opacity: 0,
+            scale: 0.9,
+            translateY: -10,
+            transition: {
+              duration: 0.1,
+            },
           }}
           style={{
             // `style` prop in Mantine doesn't accept motion values
             width: width as any,
-            height: height as any
+            height: height as any,
           }}
-          onKeyDown={e => {
-            if (e.key === 'Escape') {
-              e.preventDefault()
-              e.stopPropagation()
-              overlay.close()
-            }
-          }}
-          data-likec4-color={nodeModel.color}>
+          data-likec4-color={nodeModel?.color ?? elementModel.color}>
           <FocusTrap>
             <FocusTrapInitialFocus />
             <Box
@@ -297,9 +312,9 @@ export const ElementDetailsCard = memo(({ fqn }: ElementDetailsCardProps) => {
                       className={css.title}>
                       {elementModel.title}
                     </Text>
-                    {nodeModel.$node.notation && (
+                    {notation && (
                       <Text component="div" c={'dimmed'} fz={'sm'} fw={500} lh={1.3} lineClamp={1}>
-                        {nodeModel.$node.notation}
+                        {notation}
                       </Text>
                     )}
                   </Box>
@@ -308,7 +323,7 @@ export const ElementDetailsCard = memo(({ fqn }: ElementDetailsCardProps) => {
                   size={'lg'}
                   onClick={e => {
                     e.stopPropagation()
-                    overlay.close()
+                    close()
                   }}
                 />
               </Group>
@@ -328,7 +343,7 @@ export const ElementDetailsCard = memo(({ fqn }: ElementDetailsCardProps) => {
                 </Box>
                 <ActionIconGroup
                   style={{
-                    alignSelf: 'flex-end'
+                    alignSelf: 'flex-end',
                   }}>
                   {defaultLink && (
                     <ActionIcon
@@ -342,7 +357,7 @@ export const ElementDetailsCard = memo(({ fqn }: ElementDetailsCardProps) => {
                       <IconExternalLink stroke={1.6} style={{ width: '65%' }} />
                     </ActionIcon>
                   )}
-                  {onOpenSource && (
+                  <IfEnabled feature="Vscode">
                     <Tooltip label="Open source">
                       <ActionIcon
                         size="lg"
@@ -350,15 +365,14 @@ export const ElementDetailsCard = memo(({ fqn }: ElementDetailsCardProps) => {
                         radius="sm"
                         onClick={e => {
                           e.stopPropagation()
-                          diagramApi.getState().onOpenSource?.({
-                            element: elementModel.id
+                          diagram.openSource({
+                            element: elementModel.id,
                           })
-                        }}
-                      >
+                        }}>
                         <IconFileSymlink stroke={1.8} style={{ width: '62%' }} />
                       </ActionIcon>
                     </Tooltip>
-                  )}
+                  </IfEnabled>
                   {defaultView && (
                     <Tooltip label="Open default view">
                       <ActionIcon
@@ -366,7 +380,8 @@ export const ElementDetailsCard = memo(({ fqn }: ElementDetailsCardProps) => {
                         variant="default"
                         radius="sm"
                         onClick={e => {
-                          onNavigateToCb(defaultView.id, e)
+                          e.stopPropagation()
+                          diagram.navigateTo(defaultView.id, fromNode ?? undefined)
                         }}>
                         <IconZoomScan style={{ width: '70%' }} />
                       </ActionIcon>
@@ -384,7 +399,7 @@ export const ElementDetailsCard = memo(({ fqn }: ElementDetailsCardProps) => {
                 root: css.tabsRoot,
                 list: css.tabsList,
                 tab: css.tabsTab,
-                panel: css.tabsPanel
+                panel: css.tabsPanel,
               }}>
               <TabsList>
                 {TABS.map(tab => (
@@ -419,11 +434,11 @@ export const ElementDetailsCard = memo(({ fqn }: ElementDetailsCardProps) => {
               </TabsPanel>
 
               <TabsPanel value="Relationships">
-                {activeTab === 'Relationships' && (
+                {nodeModel && activeTab === 'Relationships' && (
                   <TabPanelRelationships
                     element={elementModel}
                     node={nodeModel}
-                    currentView={currentView} />
+                    currentView={diagram.currentView()} />
                 )}
               </TabsPanel>
 
@@ -438,7 +453,7 @@ export const ElementDetailsCard = memo(({ fqn }: ElementDetailsCardProps) => {
                             <ViewButton
                               key={view.id}
                               view={view}
-                              onNavigateTo={onNavigateToCb}
+                              onNavigateTo={to => diagram.navigateTo(to, fromNode ?? undefined)}
                             />
                           ))}
                         </Stack>
@@ -452,7 +467,7 @@ export const ElementDetailsCard = memo(({ fqn }: ElementDetailsCardProps) => {
                             <ViewButton
                               key={view.id}
                               view={view}
-                              onNavigateTo={onNavigateToCb}
+                              onNavigateTo={to => diagram.navigateTo(to, fromNode ?? undefined)}
                             />
                           ))}
                         </Stack>
@@ -495,7 +510,7 @@ const ElementIcon = (
     element: ComputedNode
     viewId: string
     renderIcon: ElementIconRenderer | null
-  }
+  },
 ) => {
   if (!element.icon || element.icon === 'none') {
     return null
@@ -516,7 +531,7 @@ const ElementIcon = (
       layoutId={`${viewId}:element:icon:${element.id}`}
       className={clsx(
         css.elementIcon,
-        'likec4-element-icon'
+        'likec4-element-icon',
       )}
       data-likec4-icon={element.icon}
     >
@@ -527,7 +542,7 @@ const ElementIcon = (
 
 const ViewButton = ({
   view,
-  onNavigateTo
+  onNavigateTo,
 }: {
   view: ComputedView | DiagramView
   onNavigateTo: OnNavigateTo
@@ -576,7 +591,7 @@ function ElementProperty({
         fz={'md'}
         style={{
           whiteSpace: 'preserve-breaks',
-          ...style
+          ...style,
         }}
         {...props}
       >
@@ -587,7 +602,7 @@ function ElementProperty({
 }
 
 function ElementLink({
-  value
+  value,
 }: {
   value: Link
 }) {
@@ -635,7 +650,7 @@ function ElementLink({
 }
 
 function ElementMetata({
-  value
+  value,
 }: {
   value: NonNullable<Element['metadata']>
 }) {

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

@@ -4,37 +4,37 @@ import { easings, mantine, transitions, whereDark } from '../../theme-vars'
 
 export const treeNode = style({})
 globalStyle(`${treeNode}[data-level='1']`, {
-  marginBottom: rem(16)
+  marginBottom: rem(16),
 })
 
 export const treeNodeLabel = style({
   cursor: 'default',
   marginTop: 0,
-  marginBottom: 0
+  marginBottom: 0,
 })
 
 const label = style({
   transition: transitions.fast,
   color: mantine.colors.gray[7],
   ':hover': {
-    transitionTimingFunction: easings.out
+    transitionTimingFunction: easings.out,
   },
   selectors: {
     [`${whereDark} &`]: {
-      color: mantine.colors.dark[1]
-    }
-  }
+      color: mantine.colors.dark[1],
+    },
+  },
 })
 globalStyle(`${label} > *`, {
-  transition: transitions.fast
+  transition: transitions.fast,
 })
 globalStyle(`${label}:hover > :not([data-no-transform])`, {
   transitionTimingFunction: easings.out,
-  transform: 'translateX(1px)'
+  transform: 'translateX(1px)',
 })
 globalStyle(`.mantine-Button-root:hover ${label} > :not([data-no-transform])`, {
   transitionTimingFunction: easings.out,
-  transform: 'translateX(1px)'
+  transform: 'translateX(1px)',
 })
 
 export const nodeLabel = style([label, {}])
@@ -52,17 +52,17 @@ export const instanceLabel = style([label, {
   color: mantine.colors.gray[7],
   selectors: {
     [`${whereDark} &`]: {
-      color: mantine.colors.gray.lightColor
-    }
+      color: mantine.colors.gray.lightColor,
+    },
   },
   ':hover': {
-    background: mantine.colors.gray.lightHover
-  }
+    background: mantine.colors.gray.lightHover,
+  },
 }])
 globalStyle(`${instanceLabel} .tabler-icon`, {
   transition: transitions.fast,
   width: '90%',
-  opacity: 0.65
+  opacity: 0.65,
 })
 // globalStyle(`.mantine-Button-root:hover ${instanceLabel} .tabler-icon`, {
 //   opacity: 0.8