@likec4/diagram 1.19.1 → 1.20.0

package/src/overlays/Overlays.tsx

@@ -1,41 +1,39 @@
-import { ActionIcon, Box, Button, FocusTrap, Group, Notification, RemoveScroll, Text } from '@mantine/core'
-import { useHotkeys } from '@mantine/hooks'
+import { Box, Button, Code, Group, Notification } from '@mantine/core'
 import { IconX } from '@tabler/icons-react'
-import { ReactFlowProvider as XYFlowProvider } from '@xyflow/react'
-import { AnimatePresence, m } from 'framer-motion'
-import { memo, type PropsWithChildren, useEffect, useMemo, useRef } from 'react'
-import { ErrorBoundary, type FallbackProps } from 'react-error-boundary'
-import { isNullish } from 'remeda'
-import { type DiagramState, useDiagramState, useDiagramStoreApi } from '../hooks/useDiagramState'
-import { EdgeDetailsXYFlow } from './edge-details/EdgeDetailsXYFlow'
+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'
+import { DiagramFeatures } from '../context'
+import { useXYStore } from '../hooks'
+import { useDiagramActor, useDiagramActorState } from '../hooks/useDiagramActor'
 import { ElementDetailsCard } from './element-details/ElementDetailsCard'
-import { OverlayContext, useOverlayDialog } from './OverlayContext'
-import * as css from './Overlays.css'
-import { RelationshipsOverlay } from './relationships-of/RelationshipsOverlay'
+import { Overlay } from './overlay/Overlay'
+import { RelationshipDetails } from './relationship-details/RelationshipDetails'
+import { RelationshipsBrowser } from './relationships-browser/RelationshipsBrowser'
+// import { EdgeDetailsXYFlow } from './edge-details/EdgeDetailsXYFlow'
+// import { ElementDetailsCard } from './element-details/ElementDetailsCard'
+// import { OverlayContext, useOverlayDialog } from './OverlayContext'
+// import * as css from './Overlays.css'
+// import { RelationshipsOverlay } from './relationships-of/RelationshipsOverlay'
 
 function Fallback({ error, resetErrorBoundary }: FallbackProps) {
-  // Call resetErrorBoundary() to reset the error boundary and retry the render.
   const errorString = error instanceof Error ? error.message : 'Unknown error'
   return (
-    <Box className={css.container} p={'lg'}>
+    <Box pos={'fixed'} top={0} left={0} w={'100%'} p={0} style={{ zIndex: 1000 }}>
       <Notification
         icon={<IconX style={{ width: 16, height: 16 }} />}
         styles={{
           icon: {
-            alignSelf: 'flex-start'
-          }
+            alignSelf: 'flex-start',
+          },
         }}
         color={'red'}
         title={'Oops, something went wrong'}
-        py={'lg'}
+        p={'xl'}
         withCloseButton={false}>
-        <Text
-          style={{
-            whiteSpace: 'preserve-breaks'
-          }}>
-          {errorString}
-        </Text>
-        <Group gap={'xs'} mt="sm">
+        <Code block>{errorString}</Code>
+        <Group gap={'xs'} mt="xl">
           <Button color="gray" size="xs" variant="light" onClick={() => resetErrorBoundary()}>Reset</Button>
         </Group>
       </Notification>
@@ -44,111 +42,167 @@ function Fallback({ error, resetErrorBoundary }: FallbackProps) {
 }
 
 export const Overlays = memo(() => {
-  const diagramStore = useDiagramStoreApi()
+  const xyflowDomNode = useXYStore(s => s.domNode)
+  const xyflowRendererDom = useMemo(() => xyflowDomNode?.querySelector('.react-flow__renderer') ?? null, [
+    xyflowDomNode,
+  ])
+  const { send } = useDiagramActor()
   const {
-    activeOverlay,
-    viewId
-  } = useDiagramState(s => ({
-    activeOverlay: s.activeOverlay,
-    viewId: s.view.id
+    relationshipsBrowserActor,
+    relationshipDetailsActor,
+    activeElementDetailsOf,
+  } = useDiagramActorState(s => ({
+    relationshipsBrowserActor: s.children.relationshipsBrowser,
+    relationshipDetailsActor: s.children.relationshipDetails,
+    activeElementDetailsOf: s.context.activeElementDetails?.fqn ?? null,
   }))
 
-  const onCloseCbRef = useRef<(() => void)>()
+  const isMotionReduced = useReducedMotion() ?? false
 
-  const ctxValue = useMemo(() => ({
-    openOverlay: ((overlay) => {
-      diagramStore.getState().openOverlay(overlay)
-    }) as DiagramState['openOverlay'],
-    close: (cb?: () => void) => {
-      onCloseCbRef.current = cb
-      diagramStore.getState().closeOverlay()
-    }
-  }), [diagramStore])
+  const isActiveOverlay = !!activeElementDetailsOf
 
-  const onExitComplete = () => {
-    onCloseCbRef.current?.()
-    onCloseCbRef.current = undefined
-  }
+  useEffect(() => {
+    if (!xyflowRendererDom || isMotionReduced) return
+    animate(xyflowRendererDom, {
+      opacity: isActiveOverlay ? 0.7 : 1,
+      filter: isActiveOverlay ? 'grayscale(1)' : 'grayscale(0)',
+      transform: isActiveOverlay ? `perspective(400px) translateZ(-12px) translateY(3px)` : `translateY(0)`,
+    }, {
+      duration: isActiveOverlay ? 0.35 : 0.17,
+    })
+  }, [isActiveOverlay, xyflowRendererDom])
 
-  const isActive = !!activeOverlay
-  useHotkeys(
-    isActive
-      ? [
-        ['Escape', (e) => {
-          e.stopPropagation()
-          ctxValue.close()
-        }, { preventDefault: true }]
-      ]
-      : []
-  )
+  // )
+  // const diagramStore = useDiagramStoreApi()
+  // const {
+  //   activeOverlay,
+  //   viewId,
+  // } = useDiagramState(s => ({
+  //   activeOverlay: s.activeOverlay,
+  //   viewId: s.view.id,
+  // }))
+
+  // const onCloseCbRef = useRef<(() => void)>(undefined)
+
+  // const ctxValue = useMemo(() => ({
+  //   openOverlay: ((overlay) => {
+  //     diagramStore.getState().openOverlay(overlay)
+  //   }) as DiagramState['openOverlay'],
+  //   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.stopPropagation()
+  //         ctxValue.close()
+  //       }, { preventDefault: true }],
+  //     ]
+  //     : [],
+  // )
 
   return (
-    <OverlayContext.Provider value={ctxValue}>
-      <ErrorBoundary FallbackComponent={Fallback} onReset={() => ctxValue.close()}>
-        <AnimatePresence initial={false} key={viewId} onExitComplete={onExitComplete}>
-          {activeOverlay?.elementDetails && (
-            <ElementDetailsCard key={'details card'} fqn={activeOverlay.elementDetails} />
+    <DiagramFeatures.Overlays>
+      <ErrorBoundary FallbackComponent={Fallback} onReset={() => send({ type: 'close.overlay' })}>
+        <AnimatePresence>
+          {relationshipsBrowserActor && (
+            <Overlay
+              key={'relationships-browser'}
+              onClose={() => {
+                relationshipsBrowserActor.send({ type: 'close' })
+              }}>
+              <RelationshipsBrowser actorRef={relationshipsBrowserActor} />
+            </Overlay>
           )}
-        </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>
+          {relationshipDetailsActor && (
+            <Overlay
+              key={'relationship-details'}
+              onClose={() => {
+                relationshipDetailsActor.send({ type: 'close' })
+              }}>
+              <RelationshipDetails actorRef={relationshipDetailsActor} />
+            </Overlay>
           )}
+          {activeElementDetailsOf && <ElementDetailsCard fqn={activeElementDetailsOf} />}
         </AnimatePresence>
       </ErrorBoundary>
-    </OverlayContext.Provider>
+    </DiagramFeatures.Overlays>
+    // <OverlayContext.Provider value={ctxValue}>
+    //   <ErrorBoundary FallbackComponent={Fallback} onReset={() => ctxValue.close()}>
+    //     <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>
+    //   </ErrorBoundary>
+    // </OverlayContext.Provider>
   )
 })
 
@@ -263,33 +317,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>
-  )
-}
+// 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/element-details/ElementDetailsCard.css.ts

@@ -19,15 +19,15 @@ export const dialog = style({
   border: '0 solid transparent',
   vars: {
     '--backdrop-opacity': '0%',
-    '--backdrop-blur': '0px'
+    '--backdrop-blur': '0px',
   },
   selectors: {
     [`&::backdrop`]: {
       WebkitBackdropFilter: 'blur(var(--backdrop-blur))',
       backdropFilter: 'blur(var(--backdrop-blur))',
-      backgroundColor: `rgb(36 36 36 / var(--backdrop-opacity))`
-    }
-  }
+      backgroundColor: `rgb(36 36 36 / var(--backdrop-opacity))`,
+    },
+  },
 })
 export const card = style({
   position: 'absolute',
@@ -36,7 +36,7 @@ export const card = style({
   justifyContent: 'stretch',
   vars: {
     [cardBg]: mantine.colors.body,
-    [cardBgImage]: `linear-gradient(180deg, ${vars.element.fill}, ${vars.element.fill} 4px, transparent 4px)`
+    [cardBgImage]: `linear-gradient(180deg, ${vars.element.fill}, ${vars.element.fill} 4px, transparent 4px)`,
   },
   backgroundColor: cardBg,
   backgroundImage: cardBgImage,
@@ -48,19 +48,19 @@ export const card = style({
         [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'
+  cursor: 'move',
 })
 
 globalStyle(`:where(${card}) .react-flow__attribution`, {
-  display: 'none'
+  display: 'none',
 })
 
 export const title = style({
@@ -71,7 +71,7 @@ export const title = style({
   fontWeight: 600,
   fontSize: 24,
   // lineHeight: 1.15,
-  lineHeight: mantine.lineHeights.xs
+  lineHeight: mantine.lineHeights.xs,
   // color: vars.element.hiContrast
 })
 
@@ -87,9 +87,9 @@ export const elementIcon = style({
   cursor: 'move',
   selectors: {
     [`${whereDark} &`]: {
-      mixBlendMode: 'hard-light'
-    }
-  }
+      mixBlendMode: 'hard-light',
+    },
+  },
 })
 globalStyle(`${elementIcon} svg, ${elementIcon} img`, {
   width: '100%',
@@ -100,10 +100,10 @@ globalStyle(`${elementIcon} svg, ${elementIcon} img`, {
     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'
+  objectFit: 'contain',
 })
 
 const viewTitleColor = createVar('view-title-color')
@@ -119,51 +119,51 @@ export const viewButton = style({
   transition: transitions.fast,
   border: `1px solid ${mantine.colors.defaultBorder}`,
   vars: {
-    [viewTitleColor]: mantine.colors.dark[1]
+    [viewTitleColor]: mantine.colors.dark[1],
   },
   ':hover': {
     background: mantine.colors.defaultHover,
     vars: {
       [iconColor]: mantine.colors.dark[1],
-      [viewTitleColor]: mantine.colors.defaultColor
-    }
+      [viewTitleColor]: mantine.colors.defaultColor,
+    },
   },
   selectors: {
     [`${whereDark} &`]: {
-      background: mantine.colors.dark[6]
+      background: mantine.colors.dark[6],
     },
     [`${whereLight} &`]: {
       vars: {
         [iconColor]: mantine.colors.gray[6],
-        [viewTitleColor]: mantine.colors.gray[7]
-      }
+        [viewTitleColor]: mantine.colors.gray[7],
+      },
     },
     [`${whereLight} &:hover`]: {
       vars: {
-        [iconColor]: mantine.colors.gray[7]
-      }
-    }
-  }
+        [iconColor]: mantine.colors.gray[7],
+      },
+    },
+  },
 })
 
 globalStyle(`${viewButton} .mantine-ThemeIcon-root`, {
   transition: transitions.fast,
   color: fallbackVar(iconColor, mantine.colors.dark[2]),
   vars: {
-    '--ti-size': '22px'
-  }
+    '--ti-size': '22px',
+  },
 })
 
 globalStyle(`${viewButton} .mantine-ThemeIcon-root:hover`, {
-  color: mantine.colors.defaultColor
+  color: mantine.colors.defaultColor,
 })
 
 globalStyle(`${viewButton} > *`, {
-  transition: `all 130ms ${easings.inOut}`
+  transition: `all 130ms ${easings.inOut}`,
 })
 globalStyle(`${viewButton}:hover > *`, {
   transitionTimingFunction: easings.out,
-  transform: 'translateX(1.6px)'
+  transform: 'translateX(1.6px)',
 })
 
 export const viewButtonTitle = style({
@@ -171,7 +171,7 @@ export const viewButtonTitle = style({
   color: fallbackVar(viewTitleColor, mantine.colors.gray[7]),
   fontSize: 15,
   fontWeight: 500,
-  lineHeight: 1.4
+  lineHeight: 1.4,
 })
 // globalStyle(`${viewButton} .tabler-icon`, {
 //   width: '85%',
@@ -191,7 +191,7 @@ export const tabsRoot = style({
   flexDirection: 'column',
   justifyContent: 'stretch',
   overflow: 'hidden',
-  gap: mantine.spacing.sm
+  gap: mantine.spacing.sm,
 })
 
 export const tabsList = style({
@@ -203,9 +203,9 @@ export const tabsList = style({
   padding: 4,
   selectors: {
     [`${whereDark} &`]: {
-      background: mantine.colors.dark[7]
-    }
-  }
+      background: mantine.colors.dark[7],
+    },
+  },
 })
 
 export const tabsTab = style({
@@ -219,46 +219,46 @@ export const tabsTab = style({
   ':hover': {
     transitionTimingFunction: easings.out,
     color: mantine.colors.defaultColor,
-    background: mantine.colors.gray[3]
+    background: mantine.colors.gray[3],
   },
   selectors: {
     ['&[data-active]']: {
       transition: 'none',
       background: mantine.colors.white,
       boxShadow: mantine.shadows.xs,
-      color: mantine.colors.defaultColor
+      color: mantine.colors.defaultColor,
     },
     [`${whereDark} &`]: {
-      color: mantine.colors.dark[1]
+      color: mantine.colors.dark[1],
     },
     [`${whereDark} &:hover`]: {
       color: mantine.colors.white,
-      background: mantine.colors.dark[6]
+      background: mantine.colors.dark[6],
     },
     [`${whereDark} &:is([data-active])`]: {
       color: mantine.colors.white,
-      background: mantine.colors.dark[5]
-    }
-  }
+      background: mantine.colors.dark[5],
+    },
+  },
 })
 
 export const tabsPanel = style({
   flex: 1,
   overflow: 'hidden',
-  position: 'relative'
+  position: 'relative',
 })
 
 globalStyle(`${tabsPanel}:not(:has(.mantine-ScrollArea-root))`, {
   paddingLeft: 4,
-  paddingRight: 4
+  paddingRight: 4,
 })
 globalStyle(`${tabsPanel} .mantine-ScrollArea-root`, {
   width: '100%',
-  height: '100%'
+  height: '100%',
 })
 globalStyle(`${tabsPanel} .mantine-ScrollArea-viewport > div`, {
   paddingLeft: 4,
-  paddingRight: 4
+  paddingRight: 4,
 })
 
 export const propertiesGrid = style({
@@ -268,11 +268,11 @@ export const propertiesGrid = style({
   gridAutoRows: 'min-content max-content',
   gap: `${rem(20)} ${rem(16)}`,
   alignItems: 'baseline',
-  justifyItems: 'stretch'
+  justifyItems: 'stretch',
 })
 
 export const propertyLabel = style({
-  justifySelf: 'end'
+  justifySelf: 'end',
 })
 
 export const elementLink = style({
@@ -287,20 +287,20 @@ export const elementLink = 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(`${elementLink} > *`, {
-  transition: transitions.fast
+  transition: transitions.fast,
 })
 globalStyle(`${elementLink}:hover > *`, {
   transitionTimingFunction: easings.out,
-  transform: 'translateX(1px)'
+  transform: 'translateX(1px)',
 })
 
 export const resizeHandle = style({
@@ -317,6 +317,6 @@ export const resizeHandle = style({
   cursor: 'se-resize',
   ':hover': {
     borderWidth: 4,
-    borderColor: mantine.colors.dark[1]
-  }
+    borderColor: mantine.colors.dark[1],
+  },
 })