@likec4/diagram 1.20.2 → 1.21.0

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

@@ -3,7 +3,8 @@ import {
   type Element,
   type Fqn,
   type LikeC4View,
-  ComputedNode,
+  type NodeId,
+  type ViewId,
   ComputedView,
   isDeploymentView,
   isScopedElementView,
@@ -12,17 +13,13 @@ import {
   type TextProps,
   ActionIcon,
   ActionIconGroup,
-  Anchor,
   Badge,
   Box,
   Card,
   CloseButton,
   Code,
-  CopyButton,
   Divider as MantineDivider,
   Flex,
-  FocusTrap,
-  FocusTrapInitialFocus,
   Group,
   RemoveScroll,
   ScrollArea,
@@ -36,18 +33,18 @@ import {
   Tooltip as MantineTooltip,
   UnstyledButton,
 } from '@mantine/core'
-import { useDebouncedCallback, useSessionStorage, useViewportSize } from '@mantine/hooks'
-import { IconCheck, IconCopy, IconExternalLink, IconFileSymlink, IconStack2, IconZoomScan } from '@tabler/icons-react'
-import clsx from 'clsx'
+import { useSessionStorage, useViewportSize } from '@mantine/hooks'
+import { useDebouncedCallback, useSyncedRef } from '@react-hookz/web'
+import { IconExternalLink, IconFileSymlink, IconStack2, IconZoomScan } from '@tabler/icons-react'
+import type { Rect } from '@xyflow/system'
 import { type PanInfo, m, useDragControls, useMotionValue } from 'framer-motion'
-import { type PropsWithChildren, memo, useCallback, useLayoutEffect, useRef } from 'react'
+import { type PropsWithChildren, useCallback, useRef } from 'react'
 import { clamp, isNullish, map, only, partition, pipe } from 'remeda'
 import { Link } from '../../base'
-import { IconRenderer, IfEnabled } from '../../context'
+import { DiagramFeatures, 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 type { OnNavigateTo } from '../../LikeC4Diagram.props'
 import { useLikeC4Model } from '../../likec4model'
 import * as css from './ElementDetailsCard.css'
 import { TabPanelDeployments } from './TabPanelDeployments'
@@ -85,6 +82,10 @@ const PropertyLabel = Text.withProps({
 })
 
 type ElementDetailsCardProps = {
+  viewId: ViewId
+  fromNode: NodeId | null
+  rectFromNode: Rect | null
+  onClose: () => void
   fqn: Fqn
 }
 
@@ -93,16 +94,13 @@ const MIN_PADDING = 24
 const TABS = ['Properties', 'Relationships', 'Views', 'Structure', 'Deployments'] as const
 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,
-  }))
+export function ElementDetailsCard({
+  viewId,
+  fromNode,
+  rectFromNode,
+  fqn,
+  onClose,
+}: ElementDetailsCardProps) {
   const windowSize = useViewportSize()
   const windowWidth = windowSize.width || window.innerWidth || 1200,
     windowHeight = windowSize.height || window.innerHeight || 800
@@ -115,7 +113,6 @@ export const ElementDetailsCard = memo(({ fqn }: ElementDetailsCardProps) => {
   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)
@@ -124,15 +121,12 @@ export const ElementDetailsCard = memo(({ fqn }: ElementDetailsCardProps) => {
 
   // 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),
@@ -202,15 +196,13 @@ export const ElementDetailsCard = memo(({ fqn }: ElementDetailsCardProps) => {
   }, [])
 
   const ref = useRef<HTMLDialogElement>(null)
-  useLayoutEffect(() => {
-    ref.current?.showModal()
-  }, [])
 
-  const diagramApi = useDiagram()
+  const onCloseRef = useSyncedRef(onClose)
   const close = useDebouncedCallback(
     () => {
-      diagramApi.closeOverlay()
+      onCloseRef.current()
     },
+    [],
     50,
   )
 
@@ -229,7 +221,6 @@ export const ElementDetailsCard = memo(({ fqn }: ElementDetailsCardProps) => {
     <m.dialog
       ref={ref}
       className={css.dialog}
-      layoutRoot
       initial={{
         '--backdrop-blur': '0px',
         '--backdrop-opacity': '10%',
@@ -245,6 +236,9 @@ export const ElementDetailsCard = memo(({ fqn }: ElementDetailsCardProps) => {
           duration: 0.1,
         },
       }}
+      onAnimationStart={() => {
+        ref.current?.showModal()
+      }}
       onClick={e => {
         if ((e.target as any)?.nodeName?.toUpperCase() === 'DIALOG') {
           e.stopPropagation()
@@ -267,7 +261,6 @@ export const ElementDetailsCard = memo(({ fqn }: ElementDetailsCardProps) => {
           shadow="md"
           component={m.div}
           className={css.card}
-          layoutId={fqn}
           initial={{
             top,
             left,
@@ -296,248 +289,211 @@ export const ElementDetailsCard = memo(({ fqn }: ElementDetailsCardProps) => {
             height: height as any,
           }}
           data-likec4-color={nodeModel?.color ?? elementModel.color}>
-          <FocusTrap>
-            <FocusTrapInitialFocus />
-            <Box
-              className={css.cardHeader}
-              onPointerDown={e => controls.start(e)}>
-              <Group align="start" justify="space-between" gap={'sm'} mb={'sm'} wrap="nowrap">
-                <Group align="start" gap={'sm'} style={{ cursor: 'default' }} wrap="nowrap">
-                  {elementIcon}
-                  <Box>
-                    <Text
-                      component={m.div}
-                      layout="position"
-                      layoutId={`${viewId}:element:title:${fqn}`}
-                      className={css.title}>
-                      {elementModel.title}
-                    </Text>
-                    {notation && (
-                      <Text component="div" c={'dimmed'} fz={'sm'} fw={500} lh={1.3} lineClamp={1}>
-                        {notation}
-                      </Text>
-                    )}
-                  </Box>
-                </Group>
-                <CloseButton
-                  size={'lg'}
-                  onClick={e => {
-                    e.stopPropagation()
-                    close()
-                  }}
-                />
-              </Group>
-              <Group align="baseline" gap={'sm'} wrap="nowrap">
+          <Box
+            className={css.cardHeader}
+            onPointerDown={e => controls.start(e)}>
+            <Group align="start" justify="space-between" gap={'sm'} mb={'sm'} wrap="nowrap">
+              <Group align="start" gap={'sm'} style={{ cursor: 'default' }} wrap="nowrap">
+                {elementIcon}
                 <Box>
-                  <SmallLabel>kind</SmallLabel>
-                  <Badge radius={'sm'} size="sm" fw={600} color="gray">{elementModel.kind}</Badge>
-                </Box>
-                <Box flex={1}>
-                  <SmallLabel>tags</SmallLabel>
-                  <Flex gap={4} flex={1} mt={6}>
-                    {elementModel.tags.map((tag) => (
-                      <Badge key={tag} radius={'sm'} size="sm" fw={600} variant="gradient">#{tag}</Badge>
-                    ))}
-                    {elementModel.tags.length === 0 && <Badge radius={'sm'} size="sm" fw={600} color="gray">—</Badge>}
-                  </Flex>
+                  <Text
+                    component={m.div}
+                    layout="position"
+                    layoutId={`${viewId}:element:title:${fqn}`}
+                    className={css.title}>
+                    {elementModel.title}
+                  </Text>
+                  {notation && (
+                    <Text component="div" c={'dimmed'} fz={'sm'} fw={500} lh={1.3} lineClamp={1}>
+                      {notation}
+                    </Text>
+                  )}
                 </Box>
-                <ActionIconGroup
-                  style={{
-                    alignSelf: 'flex-end',
-                  }}>
-                  {defaultLink && (
+              </Group>
+              <CloseButton
+                size={'lg'}
+                onClick={e => {
+                  e.stopPropagation()
+                  close()
+                }} />
+            </Group>
+            <Group align="baseline" gap={'sm'} wrap="nowrap">
+              <Box>
+                <SmallLabel>kind</SmallLabel>
+                <Badge radius={'sm'} size="sm" fw={600} color="gray">{elementModel.kind}</Badge>
+              </Box>
+              <Box flex={1}>
+                <SmallLabel>tags</SmallLabel>
+                <Flex gap={4} flex={1} mt={6}>
+                  {elementModel.tags.map((tag) => (
+                    <Badge key={tag} radius={'sm'} size="sm" fw={600} variant="gradient">#{tag}</Badge>
+                  ))}
+                  {elementModel.tags.length === 0 && <Badge radius={'sm'} size="sm" fw={600} color="gray">—</Badge>}
+                </Flex>
+              </Box>
+              <ActionIconGroup
+                style={{
+                  alignSelf: 'flex-end',
+                }}>
+                {defaultLink && (
+                  <ActionIcon
+                    component="a"
+                    href={defaultLink.url}
+                    target="_blank"
+                    size="lg"
+                    variant="default"
+                    radius="sm"
+                  >
+                    <IconExternalLink stroke={1.6} style={{ width: '65%' }} />
+                  </ActionIcon>
+                )}
+                <IfEnabled feature="Vscode">
+                  <Tooltip label="Open source">
                     <ActionIcon
-                      component="a"
-                      href={defaultLink.url}
-                      target="_blank"
                       size="lg"
                       variant="default"
                       radius="sm"
-                    >
-                      <IconExternalLink stroke={1.6} style={{ width: '65%' }} />
+                      onClick={e => {
+                        e.stopPropagation()
+                        diagram.openSource({
+                          element: elementModel.id,
+                        })
+                      }}>
+                      <IconFileSymlink stroke={1.8} style={{ width: '62%' }} />
                     </ActionIcon>
+                  </Tooltip>
+                </IfEnabled>
+                {defaultView && (
+                  <Tooltip label="Open default view">
+                    <ActionIcon
+                      size="lg"
+                      variant="default"
+                      radius="sm"
+                      onClick={e => {
+                        e.stopPropagation()
+                        diagram.navigateTo(defaultView.id, fromNode ?? undefined)
+                      }}>
+                      <IconZoomScan style={{ width: '70%' }} />
+                    </ActionIcon>
+                  </Tooltip>
+                )}
+              </ActionIconGroup>
+            </Group>
+          </Box>
+
+          <Tabs
+            value={activeTab}
+            onChange={v => setActiveTab(v as any)}
+            variant="none"
+            classNames={{
+              root: css.tabsRoot,
+              list: css.tabsList,
+              tab: css.tabsTab,
+              panel: css.tabsPanel,
+            }}>
+            <TabsList>
+              {TABS.map(tab => (
+                <TabsTab key={tab} value={tab}>
+                  {tab}
+                </TabsTab>
+              ))}
+            </TabsList>
+
+            <TabsPanel value="Properties">
+              <ScrollArea scrollbars="y" type="auto">
+                <Box className={css.propertiesGrid} pt={'xs'}>
+                  <ElementProperty title="description" emptyValue="no description">
+                    {elementModel.description}
+                  </ElementProperty>
+                  {elementModel.technology && (
+                    <ElementProperty title="technology">
+                      {elementModel.technology}
+                    </ElementProperty>
                   )}
-                  <IfEnabled feature="Vscode">
-                    <Tooltip label="Open source">
-                      <ActionIcon
-                        size="lg"
-                        variant="default"
-                        radius="sm"
-                        onClick={e => {
-                          e.stopPropagation()
-                          diagram.openSource({
-                            element: elementModel.id,
-                          })
-                        }}>
-                        <IconFileSymlink stroke={1.8} style={{ width: '62%' }} />
-                      </ActionIcon>
-                    </Tooltip>
-                  </IfEnabled>
-                  {defaultView && (
-                    <Tooltip label="Open default view">
-                      <ActionIcon
-                        size="lg"
-                        variant="default"
-                        radius="sm"
-                        onClick={e => {
-                          e.stopPropagation()
-                          diagram.navigateTo(defaultView.id, fromNode ?? undefined)
-                        }}>
-                        <IconZoomScan style={{ width: '70%' }} />
-                      </ActionIcon>
-                    </Tooltip>
+                  {elementModel.links.length > 0 && (
+                    <>
+                      <PropertyLabel>links</PropertyLabel>
+                      <Stack gap={'xs'} align="flex-start">
+                        {elementModel.links.map((link, i) => <Link key={i} value={link} />)}
+                      </Stack>
+                    </>
                   )}
-                </ActionIconGroup>
-              </Group>
-            </Box>
-
-            <Tabs
-              value={activeTab}
-              onChange={v => setActiveTab(v as any)}
-              variant="none"
-              classNames={{
-                root: css.tabsRoot,
-                list: css.tabsList,
-                tab: css.tabsTab,
-                panel: css.tabsPanel,
-              }}>
-              <TabsList>
-                {TABS.map(tab => (
-                  <TabsTab key={tab} value={tab}>
-                    {tab}
-                  </TabsTab>
-                ))}
-              </TabsList>
-
-              <TabsPanel value="Properties">
-                <ScrollArea scrollbars="y" type="auto">
-                  <Box className={css.propertiesGrid} pt={'xs'}>
-                    <ElementProperty title="description" emptyValue="no description">
-                      {elementModel.description}
-                    </ElementProperty>
-                    {elementModel.technology && (
-                      <ElementProperty title="technology">
-                        {elementModel.technology}
-                      </ElementProperty>
-                    )}
-                    {elementModel.links.length > 0 && (
-                      <>
-                        <PropertyLabel>links</PropertyLabel>
-                        <Stack gap={'xs'} align="flex-start">
-                          {elementModel.links.map((link, i) => <Link key={i} value={link} />)}
-                        </Stack>
-                      </>
-                    )}
-                    {elementModel.$element.metadata && <ElementMetata value={elementModel.$element.metadata} />}
-                  </Box>
-                </ScrollArea>
-              </TabsPanel>
-
-              <TabsPanel value="Relationships">
-                {nodeModel && activeTab === 'Relationships' && (
+                  {elementModel.$element.metadata && <ElementMetata value={elementModel.$element.metadata} />}
+                </Box>
+              </ScrollArea>
+            </TabsPanel>
+
+            <TabsPanel value="Relationships">
+              <DiagramFeatures
+                overrides={{
+                  enableRelationshipBrowser: false,
+                  enableNavigateTo: false,
+                }}>
+                {!!nodeModel && activeTab === 'Relationships' && (
                   <TabPanelRelationships
                     element={elementModel}
                     node={nodeModel}
                     currentView={diagram.currentView()} />
                 )}
-              </TabsPanel>
-
-              <TabsPanel value="Views">
-                <ScrollArea scrollbars="y" type="auto">
-                  <Stack gap={'lg'}>
-                    {viewsOf.length > 0 && (
-                      <Box>
-                        <Divider label="views of the element (scoped)" />
-                        <Stack gap={'sm'}>
-                          {viewsOf.map((view) => (
-                            <ViewButton
-                              key={view.id}
-                              view={view}
-                              onNavigateTo={to => diagram.navigateTo(to, fromNode ?? undefined)}
-                            />
-                          ))}
-                        </Stack>
-                      </Box>
-                    )}
-                    {otherViews.length > 0 && (
-                      <Box>
-                        <Divider label="views including this element" />
-                        <Stack gap={'sm'}>
-                          {otherViews.map((view) => (
-                            <ViewButton
-                              key={view.id}
-                              view={view}
-                              onNavigateTo={to => diagram.navigateTo(to, fromNode ?? undefined)}
-                            />
-                          ))}
-                        </Stack>
-                      </Box>
-                    )}
-                  </Stack>
-                </ScrollArea>
-              </TabsPanel>
-
-              <TabsPanel value="Structure">
-                <ScrollArea scrollbars="y" type="auto">
-                  <TabPanelStructure element={elementModel} />
-                </ScrollArea>
-              </TabsPanel>
-
-              <TabsPanel value="Deployments">
-                <ScrollArea scrollbars="y" type="auto">
-                  <TabPanelDeployments elementFqn={elementModel.id} />
-                </ScrollArea>
-              </TabsPanel>
-            </Tabs>
-            <m.div
-              className={css.resizeHandle}
-              drag
-              dragElastic={0}
-              dragMomentum={false}
-              onDrag={handleDrag}
-              dragConstraints={{ top: 0, left: 0, right: 0, bottom: 0 }}
-            />
-          </FocusTrap>
+              </DiagramFeatures>
+            </TabsPanel>
+
+            <TabsPanel value="Views">
+              <ScrollArea scrollbars="y" type="auto">
+                <Stack gap={'lg'}>
+                  {viewsOf.length > 0 && (
+                    <Box>
+                      <Divider label="views of the element (scoped)" />
+                      <Stack gap={'sm'}>
+                        {viewsOf.map((view) => (
+                          <ViewButton
+                            key={view.id}
+                            view={view}
+                            onNavigateTo={to => diagram.navigateTo(to, fromNode ?? undefined)} />
+                        ))}
+                      </Stack>
+                    </Box>
+                  )}
+                  {otherViews.length > 0 && (
+                    <Box>
+                      <Divider label="views including this element" />
+                      <Stack gap={'sm'}>
+                        {otherViews.map((view) => (
+                          <ViewButton
+                            key={view.id}
+                            view={view}
+                            onNavigateTo={to => diagram.navigateTo(to, fromNode ?? undefined)} />
+                        ))}
+                      </Stack>
+                    </Box>
+                  )}
+                </Stack>
+              </ScrollArea>
+            </TabsPanel>
+
+            <TabsPanel value="Structure">
+              <ScrollArea scrollbars="y" type="auto">
+                <TabPanelStructure element={elementModel} />
+              </ScrollArea>
+            </TabsPanel>
+
+            <TabsPanel value="Deployments">
+              <ScrollArea scrollbars="y" type="auto">
+                <TabPanelDeployments elementFqn={elementModel.id} />
+              </ScrollArea>
+            </TabsPanel>
+          </Tabs>
+          <m.div
+            className={css.resizeHandle}
+            drag
+            dragElastic={0}
+            dragMomentum={false}
+            onDrag={handleDrag}
+            dragConstraints={{ top: 0, left: 0, right: 0, bottom: 0 }} />
         </Card>
       </RemoveScroll>
     </m.dialog>
   )
-})
-ElementDetailsCard.displayName = 'ElementDetailsCard'
-
-const ElementIcon = (
-  { element, viewId, renderIcon: RenderIcon }: {
-    element: ComputedNode
-    viewId: string
-    renderIcon: ElementIconRenderer | null
-  },
-) => {
-  if (!element.icon || element.icon === 'none') {
-    return null
-  }
-  let icon = null as React.ReactNode
-  if (element.icon.startsWith('http://') || element.icon.startsWith('https://')) {
-    icon = <img src={element.icon} alt={element.title} />
-  } else if (RenderIcon) {
-    icon = <RenderIcon node={element} />
-  }
-
-  if (!icon) {
-    return null
-  }
-  return (
-    <m.div
-      // layout="position"
-      layoutId={`${viewId}:element:icon:${element.id}`}
-      className={clsx(
-        css.elementIcon,
-        'likec4-element-icon',
-      )}
-      data-likec4-icon={element.icon}
-    >
-      {icon}
-    </m.div>
-  )
 }
 
 const ViewButton = ({