@likec4/diagram 1.13.0 → 1.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.13.0",
+  "version": "1.15.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -23,7 +23,7 @@
   "exports": {
     ".": "./src/index.ts"
   },
-  "packageManager": "yarn@4.5.0",
+  "packageManager": "yarn@4.5.1",
   "scripts": {
     "typecheck": "tsc --noEmit",
     "lint": "run -T eslint src/ --fix",
@@ -31,8 +31,8 @@
   },
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
-    "@likec4/core": "1.13.0",
-    "@mantine/vanilla-extract": "7.13.2",
+    "@likec4/core": "1.15.0",
+    "@mantine/vanilla-extract": "7.13.4",
     "@react-hookz/web": "^24.0.4",
     "@tabler/icons-react": "3.17.0",
     "@vanilla-extract/css": "^1.16.0",
@@ -45,9 +45,9 @@
     "d3-shape": "^3.2.0",
     "esm-env": "^1.0.0",
     "fast-equals": "^5.0.1",
-    "framer-motion": "^11.11.1",
+    "framer-motion": "^11.11.9",
     "khroma": "^2.1.0",
-    "remeda": "^2.14.0",
+    "remeda": "^2.15.0",
     "type-fest": "4.26.1",
     "zustand": "^4.5.5"
   },
@@ -58,9 +58,9 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@likec4/tsconfig": "1.13.0",
-    "@mantine/core": "7.13.2",
-    "@mantine/hooks": "7.13.2",
+    "@likec4/tsconfig": "1.15.0",
+    "@mantine/core": "7.13.4",
+    "@mantine/hooks": "7.13.4",
     "@types/bezier-js": "^4.1.3",
     "@types/d3-shape": "^3.1.6",
     "@types/react": "^18.3.11",

package/src/LikeC4CustomColors.tsx

@@ -1,12 +1,14 @@
 import { type ThemeColorValues } from '@likec4/core'
 import { useMantineStyleNonce } from '@mantine/core'
+import { deepEqual } from 'fast-equals'
+import { memo } from 'react'
 import { entries } from 'remeda'
 import type { LikeC4CustomColorsProperties } from './LikeC4CustomColors.props'
 import { vars } from './theme-vars'
 
 type CSSVarFunction = `var(--${string})` | `var(--${string}, ${string | number} )`
 
-export function LikeC4CustomColors({ customColors }: LikeC4CustomColorsProperties) {
+export const LikeC4CustomColors = memo<LikeC4CustomColorsProperties>(({ customColors }) => {
   function toStyle(name: String, colorValues: ThemeColorValues): String {
     const rules = new Array<String>(
       ...entries(colorValues.elements).map(([key, value]) => `${stripCssVarReference(vars.element[key])}: ${value};`),
@@ -34,7 +36,8 @@ export function LikeC4CustomColors({ customColors }: LikeC4CustomColorsPropertie
 
   return (
     <>
-      <style type="text/css" dangerouslySetInnerHTML={{ __html: styles }} {...(nonce && { nonce })} />
+      <style type="text/css" dangerouslySetInnerHTML={{ __html: styles }} nonce={nonce} />
     </>
   )
-}
+}, deepEqual)
+LikeC4CustomColors.displayName = 'LikeC4CustomColors'

package/src/LikeC4Diagram.css.ts

@@ -13,6 +13,10 @@ export const cssReactFlow = style({
   }
 })
 
+export const notInitialized = style({
+  opacity: 0
+})
+
 globalStyle(`.react-flow${cssReactFlow}`, {
   vars: {
     [xyvars.background.color]: vars.likec4.background.color,

package/src/LikeC4Diagram.tsx

@@ -67,10 +67,10 @@ export function LikeC4Diagram({
     initialWidth: initialWidth ?? view.bounds.width,
     initialHeight: initialHeight ?? view.bounds.height
   })
-  if (readonly !== true && !!where) {
-    console.warn('where filter is only supported in readonly mode')
-  }
   useEffect(() => {
+    if (readonly !== true && where != null) {
+      console.warn('Ignore filter, supported in readonly mode only\n', { where })
+    }
     if (hasLikec4model) {
       return
     }
@@ -80,7 +80,7 @@ export function LikeC4Diagram({
     if (enableRelationshipsBrowser) {
       console.warn('Invalid enableRelationshipsBrowser=true, requires LikeC4ModelProvider')
     }
-  }, [])
+  })
 
   return (
     <EnsureMantine>
@@ -111,7 +111,8 @@ export function LikeC4Diagram({
             enableDynamicViewWalkthrough={enableDynamicViewWalkthrough}
             enableFocusMode={enableFocusMode}
             enableRelationshipsBrowser={enableRelationshipsBrowser && hasLikec4model}
-            whereFilter={readonly !== true ? (where ?? null) : null}
+            // Apply where filter only in readonly mode
+            whereFilter={readonly ? (where ?? null) : null}
             renderIcon={renderIcon ?? null}
             onCanvasClick={onCanvasClick ?? null}
             onCanvasContextMenu={onCanvasContextMenu ?? null}
@@ -158,7 +159,7 @@ const LikeC4DiagramInnerMemo = /* @__PURE__ */ memo<LikeC4DiagramInnerProps>(fun
     pannable: s.pannable,
     fitView: s.fitViewEnabled,
     enableFocusMode: s.enableFocusMode,
-    enableOverlays: s.enableRelationshipsBrowser
+    enableOverlays: s.hasLikeC4Model && (s.enableRelationshipsBrowser || s.showRelationshipDetails)
   }))
 
   return (
@@ -169,7 +170,8 @@ const LikeC4DiagramInnerMemo = /* @__PURE__ */ memo<LikeC4DiagramInnerProps>(fun
           css.cssReactFlow,
           css.cssNoControls,
           pannable !== true && css.cssDisablePan,
-          background === 'transparent' && css.cssTransparentBg
+          background === 'transparent' && css.cssTransparentBg,
+          isInitialized ? 'initialized' : css.notInitialized
         )}
       >
         <XYFlowInner

package/src/overlays/Overlays.css.ts

@@ -0,0 +1,124 @@
+import { createVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
+import { mantine, vars, whereDark, xyvars } from '../theme-vars'
+
+const mixColor = createVar('mix-color')
+export const container = style({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  padding: 0,
+  margin: 0,
+  boxSizing: 'border-box',
+  border: '0 solid transparent',
+  width: '100%',
+  height: '100%',
+  zIndex: 1000,
+  isolation: 'isolate',
+  WebkitBackdropFilter: 'blur(var(--backdrop-blur))',
+  backdropFilter: 'blur(var(--backdrop-blur))',
+  backgroundColor: `color-mix(in srgb, ${mantine.colors.body}, transparent var(--backdrop-opacity))`,
+  vars: {
+    '--backdrop-blur': '3px',
+    '--backdrop-opacity': '50%',
+    [mixColor]: `black`,
+    [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 30%)`
+  },
+  selectors: {
+    [`${whereDark} &`]: {
+      vars: {
+        [mixColor]: `white`,
+        [xyvars.edge.labelColor]: vars.relation.labelColor,
+        [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 50%)`
+      }
+    }
+  }
+})
+
+globalStyle(`:where(${container}) .react-flow__attribution`, {
+  display: 'none'
+})
+globalStyle(`:where(${container}) .react-flow__edge-text`, {
+  fontSize: 14
+})
+globalStyle(`:where(${container}) .react-flow__node-compound`, {
+  mixBlendMode: 'hard-light'
+})
+
+// const dialogFadeIn = keyframes({
+//   '0%': {
+//     opacity: 0,
+//     display: 'none'
+//   },
+//   '100%': {
+//     opacity: 1,
+//     display: 'block'
+//   }
+// })
+
+// const dialogFadeOut = keyframes({
+//   '0%': {
+//     opacity: 1,
+//     transform: 'scale(1)',
+//     display: 'block'
+//   },
+//   '100%': {
+//     opacity: 0,
+//     transform: 'scale(0.98)',
+//     display: 'none'
+//   }
+// })
+
+// const backdropRgb = createVar('backdrop-rgb')
+
+// const dialogBackdropFadeIn = keyframes({
+//   '0%': {
+//     WebkitBackdropFilter: 'blur(1px)',
+//     backdropFilter: 'blur(1px)',
+//     backgroundColor: `rgb(${backdropRgb} / 30%)`
+//   },
+//   '100%': {
+//     WebkitBackdropFilter: 'blur(8px)',
+//     backdropFilter: 'blur(8px)',
+//     backgroundColor: `rgb(${backdropRgb} / 85%)`
+//   }
+// })
+
+// export const dialog = style({
+//   top: 0,
+//   left: 0,
+//   padding: 0,
+//   margin: 0,
+//   boxSizing: 'border-box',
+//   border: '0 solid transparent',
+//   width: '100%',
+//   maxWidth: '100dvw',
+//   height: '100%',
+//   maxHeight: '100dvh',
+//   background: 'transparent',
+//   animation: `${dialogFadeOut} 130ms cubic-bezier(0.50, 0, 1, 1)`,
+//   transformOrigin: '50% 20%',
+//   vars: {
+//     [backdropRgb]: '255 255 255'
+//   },
+//   selectors: {
+//     [`${whereDark} &`]: {
+//       vars: {
+//         [backdropRgb]: '36 36 36'
+//       }
+//     },
+//     '&[open]': {
+//       animation: `${dialogFadeIn} 200ms cubic-bezier(0, 0, 0.40, 1) forwards`
+//     },
+//     '&::backdrop': {
+//       WebkitBackdropFilter: 'blur(1px)',
+//       backdropFilter: 'blur(1px)',
+//       backgroundColor: `rgb(${backdropRgb} / 30%)`
+//     },
+//     '&[open]::backdrop': {
+//       animation: `${dialogBackdropFadeIn} 350ms cubic-bezier(0, 0, 0.40, 1) forwards`
+//     }
+//   }
+// })

package/src/overlays/Overlays.tsx

@@ -0,0 +1,210 @@
+import { ActionIcon, Box, FocusTrap } 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 { type DiagramState, useDiagramState, useDiagramStoreApi } from '../hooks/useDiagramState'
+import { EdgeDetailsXYFlow } from './edge-details/EdgeDetailsXYFlow'
+import { OverlayContext } from './OverlayContext'
+import * as css from './Overlays.css'
+import { RelationshipsXYFlow } from './relationships-of/RelationshipsXYFlow'
+export const Overlays = memo(() => {
+  const diagramStore = useDiagramStoreApi()
+  const activeOverlay = useDiagramState(s => s.activeOverlay)
+
+  const ctxValue = useMemo(() => ({
+    openOverlay: ((overlay) => {
+      diagramStore.getState().openOverlay(overlay)
+    }) as DiagramState['openOverlay'],
+    close: () => {
+      diagramStore.getState().closeOverlay()
+    }
+  }), [diagramStore])
+
+  const isActive = !!activeOverlay
+  useHotkeys(
+    isActive
+      ? [
+        ['Escape', (e) => {
+          e.stopImmediatePropagation()
+          diagramStore.getState().closeOverlay()
+        }, { 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>
+    </OverlayContext.Provider>
+  )
+})
+
+// const OverlayDialogCloseButton = () => {
+//   const { close } = useOverlayDialog()
+//   return (
+//     <Box pos={'absolute'} top={'1rem'} right={'1rem'}>
+//       <ActionIcon
+//         variant="default"
+//         // color="gray"
+//         size={'lg'}
+//         autoFocus
+//         onClick={(e) => {
+//           e.stopPropagation()
+//           close()
+//         }}>
+//         <IconX />
+//       </ActionIcon>
+//     </Box>
+//   )
+// }
+
+// type OverlayDialogProps = Pick<HTMLAttributes<HTMLDialogElement>, 'style' | 'className'> & {
+//   onClose?: (() => void) | undefined
+//   children: (renderProps: {
+//     opened: boolean
+//     close: () => void
+//   }) => ReactNode
+// }
+
+// const OverlayDialog = forwardRef<HTMLDialogElement, OverlayDialogProps>(({
+//   className,
+//   children,
+//   onClose,
+//   ...props
+// }, forwardedRef) => {
+//   const onCloseRef = useSyncedRef(onClose)
+//   const api = useDiagramStoreApi()
+//   const [opened, setOpened] = useState(false)
+//   const dialogRef = useRef<HTMLDialogElement>(null)
+//   const ref = useMergedRef(dialogRef, forwardedRef)
+
+//   // useDebouncedEffect(
+//   //   () => {
+//   //     dialogRef.current?.showModal()
+//   //   },
+//   //   [],
+//   //   30
+//   // )
+
+//   useDebouncedEffect(
+//     () => {
+//       setOpened(true)
+//     },
+//     [],
+//     80
+//   )
+
+//   const { start: triggerOnClose } = useTimeout(() => {
+//     onCloseRef.current?.()
+//   }, 300)
+
+//   const ctxValue = useMemo(() => ({
+//     openOverlay: api.getState().openOverlay,
+//     close: () => {
+//       dialogRef.current?.close()
+//     }
+//   }), [api])
+
+//   return (
+//     <OverlayContext.Provider value={ctxValue}>
+//       <div
+//         aria-modal="true"
+//         ref={ref}
+//         className={clsx(css.dialog, className)}
+//         onClick={e => {
+//           if ((e.target as any)?.nodeName?.toUpperCase() === 'DIALOG') {
+//             e.stopPropagation()
+//             dialogRef.current?.close()
+//           }
+//         }}
+//         onClose={e => {
+//           e.stopPropagation()
+//           triggerOnClose()
+//         }}
+//         {...props}
+//       >
+//         {children({
+//           opened,
+//           ...ctxValue
+//         })}
+//       </div>
+//     </OverlayContext.Provider>
+//   )
+// })
+
+// const OverlayDialogCloseButton = () => {
+//   const { close } = useOverlayDialog()
+//   return (
+//     <Box pos={'absolute'} top={'1rem'} right={'1rem'}>
+//       <ActionIcon
+//         variant="default"
+//         // color="gray"
+//         size={'lg'}
+//         autoFocus
+//         onClick={(e) => {
+//           e.stopPropagation()
+//           close()
+//         }}>
+//         <IconX />
+//       </ActionIcon>
+//     </Box>
+//   )
+// }