@likec4/diagram 1.16.0 → 1.17.1

package/src/overlays/Overlays.tsx

@@ -1,96 +1,118 @@
-import { ActionIcon, Box, FocusTrap } from '@mantine/core'
+import { ActionIcon, Box, FocusTrap, RemoveScroll } from '@mantine/core'
 import { useHotkeys } from '@mantine/hooks'
 import { IconX } from '@tabler/icons-react'
 import { ReactFlowProvider as XYFlowProvider } from '@xyflow/react'
 import { AnimatePresence, m } from 'framer-motion'
-import { memo, useMemo } from 'react'
+import { memo, type PropsWithChildren, useEffect, useMemo, useRef } from 'react'
+import { isNullish } from 'remeda'
 import { type DiagramState, useDiagramState, useDiagramStoreApi } from '../hooks/useDiagramState'
 import { EdgeDetailsXYFlow } from './edge-details/EdgeDetailsXYFlow'
-import { OverlayContext } from './OverlayContext'
+import { ElementDetailsCard } from './element-details/ElementDetailsCard'
+import { OverlayContext, useOverlayDialog } from './OverlayContext'
 import * as css from './Overlays.css'
-import { RelationshipsXYFlow } from './relationships-of/RelationshipsXYFlow'
+import { RelationshipsOverlay } from './relationships-of/RelationshipsOverlay'
+
 export const Overlays = memo(() => {
   const diagramStore = useDiagramStoreApi()
-  const activeOverlay = useDiagramState(s => s.activeOverlay)
+  const {
+    activeOverlay,
+    viewId
+  } = useDiagramState(s => ({
+    activeOverlay: s.activeOverlay,
+    viewId: s.view.id
+  }))
+
+  const onCloseCbRef = useRef<(() => void)>()
 
   const ctxValue = useMemo(() => ({
     openOverlay: ((overlay) => {
       diagramStore.getState().openOverlay(overlay)
     }) as DiagramState['openOverlay'],
-    close: () => {
+    close: (cb?: () => void) => {
+      onCloseCbRef.current = cb
       diagramStore.getState().closeOverlay()
     }
   }), [diagramStore])
 
+  const onExitComplete = () => {
+    onCloseCbRef.current?.()
+    onCloseCbRef.current = undefined
+  }
+
   const isActive = !!activeOverlay
   useHotkeys(
     isActive
       ? [
         ['Escape', (e) => {
-          e.stopImmediatePropagation()
-          diagramStore.getState().closeOverlay()
+          e.stopPropagation()
+          ctxValue.close()
         }, { preventDefault: true }]
       ]
       : []
   )
+
   return (
     <OverlayContext.Provider value={ctxValue}>
-      <AnimatePresence>
-        {activeOverlay && (
-          <Box
-            component={m.div}
-            className={css.container}
-            data-likec4-color="gray"
-            initial={{
-              '--backdrop-blur': '0px',
-              '--backdrop-opacity': '60%',
-              opacity: 0,
-              translateY: -15
-            }}
-            animate={{
-              '--backdrop-blur': '10px',
-              '--backdrop-opacity': '25%',
-              opacity: 1,
-              translateY: 0
-            }}
-            exit={{
-              '--backdrop-blur': '1px',
-              '--backdrop-opacity': '90%',
-              translateY: -5,
-              opacity: 0
-            }}
-          >
-            <FocusTrap>
-              {activeOverlay.relationshipsOf && (
-                <XYFlowProvider
-                  defaultNodes={[]}
-                  defaultEdges={[]}>
-                  <RelationshipsXYFlow subjectId={activeOverlay.relationshipsOf} />
-                </XYFlowProvider>
-              )}
-              {activeOverlay.edgeDetails && (
-                <XYFlowProvider
-                  defaultNodes={[]}
-                  defaultEdges={[]}>
-                  <EdgeDetailsXYFlow edgeId={activeOverlay.edgeDetails} />
-                </XYFlowProvider>
-              )}
-              <Box pos={'absolute'} top={'1rem'} right={'1rem'}>
-                <ActionIcon
-                  variant="default"
-                  // color="gray"
-                  size={'lg'}
-                  data-autofocus
-                  autoFocus
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    ctxValue.close()
-                  }}>
-                  <IconX />
-                </ActionIcon>
-              </Box>
-            </FocusTrap>
-          </Box>
+      <AnimatePresence initial={false} key={viewId} onExitComplete={onExitComplete}>
+        {activeOverlay?.elementDetails && (
+          <ElementDetailsCard key={'details card'} fqn={activeOverlay.elementDetails} />
+        )}
+      </AnimatePresence>
+      <AnimatePresence initial={false} onExitComplete={onExitComplete}>
+        {activeOverlay && isNullish(activeOverlay.elementDetails) && (
+          <RemoveScroll forwardProps>
+            <Box
+              component={m.div}
+              className={css.container}
+              data-likec4-color="gray"
+              initial={{
+                '--backdrop-blur': '0px',
+                '--backdrop-opacity': '0%',
+                opacity: 0,
+                translateY: -15
+              }}
+              animate={{
+                '--backdrop-blur': '10px',
+                '--backdrop-opacity': '70%',
+                opacity: 1,
+                translateY: 0
+              }}
+              exit={{
+                '--backdrop-blur': '1px',
+                '--backdrop-opacity': '0%',
+                translateY: -5,
+                opacity: 0,
+                transition: {
+                  duration: .2
+                }
+              }}
+            >
+              <FocusTrap>
+                {activeOverlay.relationshipsOf && <RelationshipsOverlay subjectId={activeOverlay.relationshipsOf} />}
+                {activeOverlay.edgeDetails && (
+                  <XYFlowProvider
+                    defaultNodes={[]}
+                    defaultEdges={[]}>
+                    <EdgeDetailsXYFlow edgeId={activeOverlay.edgeDetails} />
+                  </XYFlowProvider>
+                )}
+                <Box pos={'absolute'} top={'1rem'} right={'1rem'}>
+                  <ActionIcon
+                    variant="default"
+                    // color="gray"
+                    size={'lg'}
+                    // data-autofocus
+                    // autoFocus
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      ctxValue.close()
+                    }}>
+                    <IconX />
+                  </ActionIcon>
+                </Box>
+              </FocusTrap>
+            </Box>
+          </RemoveScroll>
         )}
       </AnimatePresence>
     </OverlayContext.Provider>
@@ -208,3 +230,33 @@ export const Overlays = memo(() => {
 //     </Box>
 //   )
 // }
+const OverlayDialog = ({ children }: PropsWithChildren) => {
+  const overlay = useOverlayDialog()
+  const ref = useRef<HTMLDialogElement>(null)
+  useEffect(() => {
+    ref.current?.showModal()
+  }, [])
+  return (
+    <m.dialog
+      ref={ref}
+      exit={{
+        opacity: 0,
+        transition: {
+          duration: .15
+        }
+      }}
+      onClick={e => {
+        if ((e.target as any)?.nodeName?.toUpperCase() === 'DIALOG') {
+          e.stopPropagation()
+          ref.current?.close()
+        }
+      }}
+      onClose={e => {
+        e.stopPropagation()
+        overlay.close()
+      }}
+    >
+      {children}
+    </m.dialog>
+  )
+}

package/src/overlays/edge-details/xyflow/ElementNode.tsx

@@ -27,6 +27,7 @@ type ElementNodeProps = NodeProps<XYFlowTypes.ElementNode>
 function selector(s: DiagramState) {
   return {
     currentViewId: s.view.id,
+    enableRelationshipBrowser: s.enableRelationshipBrowser,
     onNavigateTo: s.onNavigateTo,
     onOpenSource: s.onOpenSourceElement
   }
@@ -47,7 +48,8 @@ export function ElementNode({
   const {
     currentViewId,
     onNavigateTo,
-    onOpenSource
+    onOpenSource,
+    enableRelationshipBrowser
   } = useDiagramState(selector)
   return (
     <>
@@ -97,21 +99,22 @@ export function ElementNode({
             <Action
               onClick={(event) => {
                 event.stopPropagation()
-                setTimeout(() => onNavigateTo(navigateTo), 100)
-                overlay.close()
+                overlay.close(() => onNavigateTo(navigateTo))
               }}>
               <IconZoomScan stroke={1.8} style={{ width: '75%' }} />
             </Action>
           )}
-          <Action
-            onClick={(event) => {
-              event.stopPropagation()
-              overlay.openOverlay({
-                relationshipsOf: data.fqn
-              })
-            }}>
-            <IconTransform stroke={1.8} style={{ width: '72%' }} />
-          </Action>
+          {enableRelationshipBrowser && (
+            <Action
+              onClick={(event) => {
+                event.stopPropagation()
+                overlay.openOverlay({
+                  relationshipsOf: data.fqn
+                })
+              }}>
+              <IconTransform stroke={1.8} style={{ width: '72%' }} />
+            </Action>
+          )}
           {onOpenSource && (
             <Action
               onClick={(event) => {

package/src/overlays/edge-details/xyflow/RelationshipEdge.tsx

@@ -2,8 +2,9 @@ import { ActionIcon, Box, Stack, Text } from '@mantine/core'
 import { IconZoomScan } from '@tabler/icons-react'
 import { BaseEdge, EdgeLabelRenderer, type EdgeProps, getBezierPath } from '@xyflow/react'
 import clsx from 'clsx'
-import { useDiagramState } from '../../../hooks/useDiagramState'
+import { useDiagramState, useDiagramStoreApi } from '../../../hooks/useDiagramState'
 import { stopPropagation } from '../../../xyflow/utils'
+import { useOverlayDialog } from '../../OverlayContext'
 import type { XYFlowTypes } from '../_types'
 import { ZIndexes } from '../use-layouted-edge-details'
 import * as css from './styles.css'
@@ -13,13 +14,14 @@ export function RelationshipEdge({
   label,
   ...props
 }: EdgeProps<XYFlowTypes.Edge>) {
+  const overlay = useOverlayDialog()
   const onNavigateTo = useDiagramState(s => s.onNavigateTo)
   const [edgePath, labelX, labelY] = getBezierPath(props)
   const navigateTo = data.relation.navigateTo
   return (
     <>
       <g
-        className={css.edgePath}
+        className={css.edgeContainer}
         data-edge-dimmed={data.dimmed}
         data-edge-hovered={data.hovered}
       >
@@ -65,7 +67,9 @@ export function RelationshipEdge({
                 onPointerDownCapture={stopPropagation}
                 onClick={event => {
                   event.stopPropagation()
-                  onNavigateTo(navigateTo, event)
+                  overlay.close(() => {
+                    onNavigateTo(navigateTo)
+                  })
                 }}
                 role="button"
                 onDoubleClick={stopPropagation}

package/src/overlays/edge-details/xyflow/styles.css.ts

@@ -1,5 +1,6 @@
 import { globalStyle, style } from '@vanilla-extract/css'
-import { mantine, vars, whereLight, xyvars } from '../../../theme-vars'
+import { mantine, transitions, vars, whereDark, xyvars } from '../../../theme-vars'
+import { mixColor } from '../../Overlays.css'
 
 export const elementNode = style({
   width: '100%',
@@ -85,19 +86,32 @@ export const cssShapeSvg = style({
 
 const DimmedTransitionDelay = '400ms'
 
-export const edgePath = style({
+export const edgeContainer = style({
   opacity: 1,
-  transition: 'all 0.2s ease-in-out',
-
+  transition: transitions.fast,
+  vars: {
+    [xyvars.edge.stroke]: vars.relation.lineColor,
+    [xyvars.edge.strokeSelected]: `color-mix(in srgb, ${vars.relation.lineColor}, ${mixColor} 35%)`,
+    [xyvars.edge.labelColor]: `color-mix(in srgb, ${vars.relation.labelColor}, rgba(255 255 255 / 0.85) 50%)`,
+    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 20%)`
+  },
   selectors: {
     [`&[data-edge-dimmed='true']`]: {
-      opacity: 0.1,
+      opacity: 0.2,
       transitionDelay: DimmedTransitionDelay
+    },
+    [`&[data-edge-dimmed='immediate']`]: {
+      opacity: 0.2
+    },
+    [`${whereDark} &`]: {
+      vars: {
+        [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 50%)`
+      }
     }
   }
 })
 
-export const edgeLabel = style({
+export const edgeLabel = style([edgeContainer, {
   padding: '2px 5px',
   fontFamily: vars.likec4.font,
   position: 'absolute',
@@ -110,16 +124,8 @@ export const edgeLabel = style({
   // if you have an interactive element, set pointer-events: all
   pointerEvents: 'all',
   textWrap: 'pretty',
-  whiteSpace: 'preserve-breaks',
-  opacity: 1,
-  transition: 'all 0.2s ease-in-out',
-  selectors: {
-    [`&[data-edge-dimmed='true']`]: {
-      opacity: 0.1,
-      transitionDelay: DimmedTransitionDelay
-    }
-  }
-})
+  whiteSpace: 'preserve-breaks'
+}])
 
 export const edgeLabelText = style({
   textAlign: 'center',

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

@@ -0,0 +1,322 @@
+import { rem } from '@mantine/core'
+import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
+import { easings, mantine, transitions, vars, whereDark, whereLight } from '../../theme-vars'
+
+export const cardBg = createVar('card-bg')
+const cardBgImage = createVar('card-bg-top')
+
+export const dialog = style({
+  boxSizing: 'border-box',
+  margin: 0,
+  padding: 0,
+  position: 'fixed',
+  inset: 0,
+  width: '100%',
+  height: '100%',
+  maxWidth: '100%',
+  maxHeight: '100%',
+  background: 'transparent',
+  border: '0 solid transparent',
+  vars: {
+    '--backdrop-opacity': '0%',
+    '--backdrop-blur': '0px'
+  },
+  selectors: {
+    [`&::backdrop`]: {
+      WebkitBackdropFilter: 'blur(var(--backdrop-blur))',
+      backdropFilter: 'blur(var(--backdrop-blur))',
+      backgroundColor: `rgb(36 36 36 / var(--backdrop-opacity))`
+    }
+  }
+})
+export const card = style({
+  position: 'absolute',
+  pointerEvents: 'all',
+  gap: mantine.spacing.lg,
+  justifyContent: 'stretch',
+  vars: {
+    [cardBg]: mantine.colors.body,
+    [cardBgImage]: `linear-gradient(180deg, ${vars.element.fill}, ${vars.element.fill} 4px, transparent 4px)`
+  },
+  backgroundColor: cardBg,
+  backgroundImage: cardBgImage,
+  borderTopColor: vars.element.fill,
+  selectors: {
+    [`${whereDark} &`]: {
+      vars: {
+        [cardBg]: mantine.colors.dark[6],
+        [cardBgImage]: `
+          linear-gradient(180deg, color-mix(in srgb, ${vars.element.fill} 15%, transparent), transparent 80px),
+          linear-gradient(180deg, ${vars.element.fill}, ${vars.element.fill} 4px, transparent 4px)
+        `
+      }
+    }
+  }
+})
+
+export const cardHeader = style({
+  flex: 0,
+  cursor: 'move'
+})
+
+globalStyle(`:where(${card}) .react-flow__attribution`, {
+  display: 'none'
+})
+
+export const title = style({
+  display: 'block',
+  fontFamily: vars.element.font,
+  fontOpticalSizing: 'auto',
+  fontStyle: 'normal',
+  fontWeight: 600,
+  fontSize: 24,
+  // lineHeight: 1.15,
+  lineHeight: mantine.lineHeights.xs
+  // color: vars.element.hiContrast
+})
+
+const iconSize = '40px'
+export const elementIcon = style({
+  flex: `0 0 ${iconSize}`,
+  height: iconSize,
+  width: iconSize,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  alignSelf: 'flex-start',
+  cursor: 'move',
+  selectors: {
+    [`${whereDark} &`]: {
+      mixBlendMode: 'hard-light'
+    }
+  }
+})
+globalStyle(`${elementIcon} svg, ${elementIcon} img`, {
+  width: '100%',
+  height: 'auto',
+  maxHeight: '100%',
+  pointerEvents: 'none',
+  filter: `
+    drop-shadow(0 0 3px rgb(0 0 0 / 10%))
+    drop-shadow(0 1px 8px rgb(0 0 0 / 5%))
+    drop-shadow(1px 1px 16px rgb(0 0 0 / 2%))
+  `
+})
+globalStyle(`${elementIcon} img`, {
+  objectFit: 'contain'
+})
+
+const viewTitleColor = createVar('view-title-color')
+const iconColor = createVar('icon-color')
+export const viewButton = style({
+  // display: 'flex',
+  width: '100%',
+  background: mantine.colors.body,
+  borderRadius: mantine.radius.sm,
+  padding: `10px 8px`,
+  // gap: 6,
+  // alignItems: 'flex-start',
+  transition: transitions.fast,
+  border: `1px solid ${mantine.colors.defaultBorder}`,
+  vars: {
+    [viewTitleColor]: mantine.colors.dark[1]
+  },
+  ':hover': {
+    background: mantine.colors.defaultHover,
+    vars: {
+      [iconColor]: mantine.colors.dark[1],
+      [viewTitleColor]: mantine.colors.defaultColor
+    }
+  },
+  selectors: {
+    [`${whereDark} &`]: {
+      background: mantine.colors.dark[6]
+    },
+    [`${whereLight} &`]: {
+      vars: {
+        [iconColor]: mantine.colors.gray[6],
+        [viewTitleColor]: mantine.colors.gray[7]
+      }
+    },
+    [`${whereLight} &:hover`]: {
+      vars: {
+        [iconColor]: mantine.colors.gray[7]
+      }
+    }
+  }
+})
+
+globalStyle(`${viewButton} .mantine-ThemeIcon-root`, {
+  transition: transitions.fast,
+  color: fallbackVar(iconColor, mantine.colors.dark[2]),
+  vars: {
+    '--ti-size': '22px'
+  }
+})
+
+globalStyle(`${viewButton} .mantine-ThemeIcon-root:hover`, {
+  color: mantine.colors.defaultColor
+})
+
+globalStyle(`${viewButton} > *`, {
+  transition: `all 130ms ${easings.inOut}`
+})
+globalStyle(`${viewButton}:hover > *`, {
+  transitionTimingFunction: easings.out,
+  transform: 'translateX(1.6px)'
+})
+
+export const viewButtonTitle = style({
+  transition: transitions.fast,
+  color: fallbackVar(viewTitleColor, mantine.colors.gray[7]),
+  fontSize: 15,
+  fontWeight: 500,
+  lineHeight: 1.4
+})
+// globalStyle(`${viewButton} .tabler-icon`, {
+//   width: '85%',
+// })
+// globalStyle(`${viewButton} .tabler-icon`, {
+//   width: '85%',
+//   opacity: 0.75
+// })
+
+// globalStyle(`${whereLight} ${viewButton} .mantine-Button-label`, {
+//   color: mantine.colors.dark[3]
+// })
+
+export const tabsRoot = style({
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'stretch',
+  overflow: 'hidden',
+  gap: mantine.spacing.sm
+})
+
+export const tabsList = style({
+  // flex: '0',
+  background: mantine.colors.gray[1],
+  borderRadius: mantine.radius.sm,
+  flexWrap: 'nowrap',
+  gap: 6,
+  padding: 4,
+  selectors: {
+    [`${whereDark} &`]: {
+      background: mantine.colors.dark[7]
+    }
+  }
+})
+
+export const tabsTab = style({
+  fontSize: mantine.fontSizes.xs,
+  fontWeight: 500,
+  flexGrow: 1,
+  padding: '6px 8px',
+  transition: transitions.fast,
+  borderRadius: mantine.radius.sm,
+  color: mantine.colors.gray[7],
+  ':hover': {
+    transitionTimingFunction: easings.out,
+    color: mantine.colors.defaultColor,
+    background: mantine.colors.gray[3]
+  },
+  selectors: {
+    ['&[data-active]']: {
+      transition: 'none',
+      background: mantine.colors.white,
+      boxShadow: mantine.shadows.xs,
+      color: mantine.colors.defaultColor
+    },
+    [`${whereDark} &`]: {
+      color: mantine.colors.dark[1]
+    },
+    [`${whereDark} &:hover`]: {
+      color: mantine.colors.white,
+      background: mantine.colors.dark[6]
+    },
+    [`${whereDark} &:is([data-active])`]: {
+      color: mantine.colors.white,
+      background: mantine.colors.dark[5]
+    }
+  }
+})
+
+export const tabsPanel = style({
+  flex: 1,
+  overflow: 'hidden',
+  position: 'relative'
+})
+
+globalStyle(`${tabsPanel}:not(:has(.mantine-ScrollArea-root))`, {
+  paddingLeft: 4,
+  paddingRight: 4
+})
+globalStyle(`${tabsPanel} .mantine-ScrollArea-root`, {
+  width: '100%',
+  height: '100%'
+})
+globalStyle(`${tabsPanel} .mantine-ScrollArea-viewport > div`, {
+  paddingLeft: 4,
+  paddingRight: 4
+})
+
+export const propertiesGrid = style({
+  flex: 1,
+  display: 'grid',
+  gridTemplateColumns: 'min-content 1fr',
+  gridAutoRows: 'min-content max-content',
+  gap: `${rem(20)} ${rem(16)}`,
+  alignItems: 'baseline',
+  justifyItems: 'stretch'
+})
+
+export const propertyLabel = style({
+  justifySelf: 'end'
+})
+
+export const elementLink = style({
+  transition: transitions.fast,
+  border: `1px dashed ${mantine.colors.defaultBorder}`,
+  borderRadius: mantine.radius.sm,
+  minHeight: 30,
+  padding: '3px 16px 3px 3px',
+  cursor: 'pointer',
+  color: mantine.colors.gray[7],
+  ':hover': {
+    transitionTimingFunction: easings.out,
+    borderStyle: 'solid',
+    color: mantine.colors.defaultColor,
+    background: mantine.colors.defaultHover
+  },
+  selectors: {
+    [`${whereDark} &`]: {
+      color: mantine.colors.dark[1]
+    }
+  }
+})
+globalStyle(`${elementLink} > *`, {
+  transition: transitions.fast
+})
+globalStyle(`${elementLink}:hover > *`, {
+  transitionTimingFunction: easings.out,
+  transform: 'translateX(1px)'
+})
+
+export const resizeHandle = style({
+  position: 'absolute',
+  width: 14,
+  height: 14,
+  border: `3.5px solid ${mantine.colors.dark[3]}`,
+  borderTop: 'none',
+  borderLeft: 'none',
+  borderRadius: 2,
+  bottom: 2,
+  right: 2,
+  transition: transitions.fast,
+  cursor: 'se-resize',
+  ':hover': {
+    borderWidth: 4,
+    borderColor: mantine.colors.dark[1]
+  }
+})