@likec4/diagram 1.21.0 → 1.22.0

package/src/overlays/Overlays.tsx

@@ -2,7 +2,7 @@ import { Box, Button, Code, Group, Notification } from '@mantine/core'
 import { useCallbackRef } from '@mantine/hooks'
 import { IconX } from '@tabler/icons-react'
 import { deepEqual } from 'fast-equals'
-import { useReducedMotion } from 'framer-motion'
+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'
@@ -73,7 +73,7 @@ export const Overlays = memo(() => {
 
   const isMotionReduced = useReducedMotion() ?? false
 
-  const isActiveOverlay = !!activeElementDetailsOf
+  const isActiveOverlay = !!activeElementDetailsOf || !!relationshipsBrowserActor || !!relationshipDetailsActor
 
   useEffect(() => {
     if (!xyflowRendererDom || isMotionReduced) return
@@ -96,32 +96,38 @@ export const Overlays = memo(() => {
   return (
     <DiagramFeatures.Overlays>
       <ErrorBoundary FallbackComponent={Fallback} onReset={onClose}>
-        {relationshipsBrowserActor && (
-          <Overlay
-            key={'relationships-browser'}
-            onClose={onClose}>
-            <RelationshipsBrowser actorRef={relationshipsBrowserActor} />
-          </Overlay>
-        )}
-        {relationshipDetailsActor && (
-          <Overlay
-            key={'relationship-details'}
-            onClose={onClose}>
-            <RelationshipDetails actorRef={relationshipDetailsActor} />
-          </Overlay>
-        )}
+        <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} */}
-        {!!activeElementDetailsOf && (
-          <ElementDetailsCard
-            key={'element-details'}
-            fqn={activeElementDetailsOf}
-            viewId={viewId}
-            fromNode={fromNode}
-            rectFromNode={rectFromNode}
-            onClose={onClose}
-          />
-        )}
+        <AnimatePresence>
+          {!!activeElementDetailsOf && (
+            <ElementDetailsCard
+              key={'element-details'}
+              fqn={activeElementDetailsOf}
+              viewId={viewId}
+              fromNode={fromNode}
+              rectFromNode={rectFromNode}
+              onClose={onClose}
+            />
+          )}
+        </AnimatePresence>
       </ErrorBoundary>
     </DiagramFeatures.Overlays>
   )

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

@@ -11,10 +11,10 @@ export const dialog = style({
   padding: 0,
   position: 'fixed',
   inset: 0,
-  width: '100%',
-  height: '100%',
-  maxWidth: '100%',
-  maxHeight: '100%',
+  width: '100vw',
+  height: '100vh',
+  maxWidth: '100vw',
+  maxHeight: '100vh',
   background: 'transparent',
   border: '0 solid transparent',
   vars: {

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

@@ -21,7 +21,6 @@ import {
   Divider as MantineDivider,
   Flex,
   Group,
-  RemoveScroll,
   ScrollArea,
   Stack,
   Tabs,
@@ -34,13 +33,13 @@ import {
   UnstyledButton,
 } from '@mantine/core'
 import { useSessionStorage, useViewportSize } from '@mantine/hooks'
-import { useDebouncedCallback, useSyncedRef } from '@react-hookz/web'
+import { useDebouncedCallback, useSyncedRef, useTimeoutEffect } 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, useCallback, useRef } from 'react'
+import { type PropsWithChildren, useCallback, useRef, useState } from 'react'
 import { clamp, isNullish, map, only, partition, pipe } from 'remeda'
-import { Link } from '../../base'
+import { Link } from '../../components/Link'
 import { DiagramFeatures, IconRenderer, IfEnabled } from '../../context'
 import { useUpdateEffect } from '../../hooks'
 import { useDiagram } from '../../hooks/useDiagram'
@@ -101,6 +100,7 @@ export function ElementDetailsCard({
   fqn,
   onClose,
 }: ElementDetailsCardProps) {
+  const [opened, setOpened] = useState(false)
   const windowSize = useViewportSize()
   const windowWidth = windowSize.width || window.innerWidth || 1200,
     windowHeight = windowSize.height || window.innerHeight || 800
@@ -112,11 +112,8 @@ export function ElementDetailsCard({
   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()
@@ -217,10 +214,21 @@ export function ElementDetailsCard({
     className: css.elementIcon,
   })
 
+  useTimeoutEffect(() => {
+    if (!ref.current?.open) {
+      ref.current?.showModal()
+    }
+  }, 30)
+
+  useTimeoutEffect(() => {
+    setOpened(true)
+  }, 120)
+
   return (
     <m.dialog
       ref={ref}
       className={css.dialog}
+      layout
       initial={{
         '--backdrop-blur': '0px',
         '--backdrop-opacity': '10%',
@@ -236,13 +244,10 @@ export function ElementDetailsCard({
           duration: 0.1,
         },
       }}
-      onAnimationStart={() => {
-        ref.current?.showModal()
-      }}
       onClick={e => {
         if ((e.target as any)?.nodeName?.toUpperCase() === 'DIALOG') {
           e.stopPropagation()
-          close()
+          ref.current?.close()
         }
       }}
       onClose={e => {
@@ -250,248 +255,245 @@ export function ElementDetailsCard({
         close()
       }}
     >
-      <RemoveScroll forwardProps>
-        <Card
-          drag
-          dragElastic={0}
-          dragMomentum={false}
-          dragListener={false}
-          dragControls={controls}
-          withBorder
-          shadow="md"
-          component={m.div}
-          className={css.card}
-          initial={{
-            top,
-            left,
-            width: _width,
-            height: _height,
-            opacity: 0,
-            originX,
-            originY,
-            scale: Math.max(fromScale, 0.7),
-          }}
-          animate={{
-            opacity: 1,
-            scale: 1,
-          }}
-          exit={{
-            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,
-          }}
-          data-likec4-color={nodeModel?.color ?? elementModel.color}>
-          <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">
+      <Card
+        drag
+        dragElastic={0}
+        dragMomentum={false}
+        dragListener={false}
+        dragControls={controls}
+        withBorder
+        shadow="md"
+        component={m.div}
+        className={css.card}
+        initial={{
+          top,
+          left,
+          width: _width,
+          height: _height,
+          opacity: 0,
+          originX,
+          originY,
+          scale: Math.max(fromScale, 0.7),
+        }}
+        animate={{
+          opacity: 1,
+          scale: 1,
+        }}
+        exit={{
+          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,
+        }}
+        data-likec4-color={nodeModel?.color ?? elementModel.color}>
+        <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
+                    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
-                    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.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">
-              <DiagramFeatures
-                overrides={{
-                  enableRelationshipBrowser: false,
-                  enableNavigateTo: false,
-                }}>
-                {!!nodeModel && activeTab === 'Relationships' && (
-                  <TabPanelRelationships
-                    element={elementModel}
-                    node={nodeModel}
-                    currentView={diagram.currentView()} />
+                {elementModel.$element.metadata && <ElementMetata value={elementModel.$element.metadata} />}
+              </Box>
+            </ScrollArea>
+          </TabsPanel>
+
+          <TabsPanel value="Relationships">
+            <DiagramFeatures
+              overrides={{
+                enableRelationshipBrowser: false,
+                enableNavigateTo: false,
+              }}>
+              {opened && !!nodeModel && activeTab === 'Relationships' && (
+                <TabPanelRelationships
+                  element={elementModel}
+                  node={nodeModel}
+                  currentView={diagram.currentView()} />
+              )}
+            </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>
                 )}
-              </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>
+                {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>
     </m.dialog>
   )
 }