@likec4/diagram 1.12.2 → 1.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.12.2",
+  "version": "1.13.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -30,15 +30,15 @@
     "clean": "rm -r -f -g 'dist/*' .tsbuildinfo"
   },
   "dependencies": {
-    "@likec4/core": "1.12.2",
-    "@lume/kiwi": "^0.4.4",
+    "@dagrejs/dagre": "^1.1.4",
+    "@likec4/core": "1.13.0",
     "@mantine/vanilla-extract": "7.13.2",
     "@react-hookz/web": "^24.0.4",
     "@tabler/icons-react": "3.17.0",
     "@vanilla-extract/css": "^1.16.0",
     "@vanilla-extract/css-utils": "^0.1.4",
     "@vanilla-extract/dynamic": "^2.1.2",
-    "@xyflow/react": "12.3.1",
+    "@xyflow/react": "12.3.2",
     "@xyflow/system": "0.0.43",
     "bezier-js": "^6.1.4",
     "clsx": "^2.1.1",
@@ -58,16 +58,16 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@likec4/tsconfig": "1.12.2",
+    "@likec4/tsconfig": "1.13.0",
     "@mantine/core": "7.13.2",
     "@mantine/hooks": "7.13.2",
     "@types/bezier-js": "^4.1.3",
     "@types/d3-shape": "^3.1.6",
-    "@types/react": "^18.3.4",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
     "execa": "^9.3.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "typescript": "^5.6.2"
+    "typescript": "^5.6.3"
   }
 }

package/src/LikeC4CustomColors.tsx

@@ -1,8 +1,8 @@
 import { type ThemeColorValues } from '@likec4/core'
+import { useMantineStyleNonce } from '@mantine/core'
 import { entries } from 'remeda'
 import type { LikeC4CustomColorsProperties } from './LikeC4CustomColors.props'
 import { vars } from './theme-vars'
-import { useMantineStyleNonce } from '@mantine/core'
 
 type CSSVarFunction = `var(--${string})` | `var(--${string}, ${string | number} )`
 
@@ -29,7 +29,7 @@ export function LikeC4CustomColors({ customColors }: LikeC4CustomColorsPropertie
   const styles = entries(customColors)
     .map(([name, color]) => toStyle(name, color))
     .join('\n')
-  
+
   const nonce = useMantineStyleNonce()?.()
 
   return (

package/src/LikeC4Diagram.props.ts

@@ -61,11 +61,6 @@ export interface LikeC4DiagramProperties {
 
   className?: string | undefined
 
-  /**
-   * Show/hide ReactFlow controls menu
-   * @default false
-   */
-  controls?: boolean | undefined
   /**
    * Enable/disable panning
    * @default true
@@ -81,6 +76,12 @@ export interface LikeC4DiagramProperties {
    * @default true
    */
   readonly?: boolean | undefined
+  /**
+   * Show/hide panel with top left controls,
+   *
+   * @default true if not readonly
+   */
+  controls?: boolean | undefined
   /**
    * If set, initial viewport will show all nodes & edges
    * @default true
@@ -130,7 +131,7 @@ export interface LikeC4DiagramProperties {
   showDiagramTitle?: boolean | undefined
 
   /**
-   * Show back/forward navigation buttons
+   * Show back/forward history navigation buttons
    * @default true if `onNavigateTo` is set
    */
   showNavigationButtons?: undefined | boolean
@@ -149,10 +150,17 @@ export interface LikeC4DiagramProperties {
 
   /**
    * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
-   * @default true
+   * @default false
    */
   enableFocusMode?: boolean | undefined
 
+  /**
+   * Experimental feature to browse relationships
+   *
+   * @default false
+   */
+  enableRelationshipsBrowser?: boolean | undefined
+
   /**
    * If Walkthrough for dynamic views should be enabled
    * @default false

package/src/LikeC4Diagram.tsx

@@ -11,6 +11,7 @@ import * as css from './LikeC4Diagram.css'
 import { type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties } from './LikeC4Diagram.props'
 import { useLikeC4Model } from './likec4model'
 import { EnsureMantine } from './mantine/EnsureMantine'
+import { Overlays } from './overlays'
 import { DiagramContextProvider } from './state/DiagramContext'
 import { FitViewOnDiagramChange } from './xyflow/FitviewOnDiagramChange'
 import { SelectEdgesOnNodeFocus } from './xyflow/SelectEdgesOnNodeFocus'
@@ -30,13 +31,14 @@ export function LikeC4Diagram({
   nodesSelectable = !readonly,
   nodesDraggable = !readonly,
   background = 'dots',
-  controls = false,
+  controls = !readonly,
   showElementLinks = true,
   showDiagramTitle = true,
   showNotations = true,
   showRelationshipDetails = true,
   enableDynamicViewWalkthrough = false,
   enableFocusMode = false,
+  enableRelationshipsBrowser = false,
   initialWidth,
   initialHeight,
   keepAspectRatio = false,
@@ -69,10 +71,16 @@ export function LikeC4Diagram({
     console.warn('where filter is only supported in readonly mode')
   }
   useEffect(() => {
-    if (showRelationshipDetails && !hasLikec4model) {
-      console.warn('Relationship details require LikeC4ModelProvider')
+    if (hasLikec4model) {
+      return
     }
-  }, [showRelationshipDetails, hasLikec4model])
+    if (showRelationshipDetails) {
+      console.warn('Invalid showRelationshipDetails=true, requires LikeC4ModelProvider')
+    }
+    if (enableRelationshipsBrowser) {
+      console.warn('Invalid enableRelationshipsBrowser=true, requires LikeC4ModelProvider')
+    }
+  }, [])
 
   return (
     <EnsureMantine>
@@ -89,10 +97,12 @@ export function LikeC4Diagram({
             readonly={readonly}
             pannable={pannable}
             zoomable={zoomable}
+            hasLikeC4Model={hasLikec4model}
             fitViewEnabled={fitView}
             fitViewPadding={fitViewPadding}
+            controls={controls}
             showElementLinks={showElementLinks}
-            showNavigationButtons={showNavigationButtons}
+            showNavigationButtons={showNavigationButtons && !!onNavigateTo}
             showNotations={showNotations}
             showRelationshipDetails={showRelationshipDetails && hasLikec4model}
             nodesDraggable={nodesDraggable}
@@ -100,7 +110,8 @@ export function LikeC4Diagram({
             experimentalEdgeEditing={experimentalEdgeEditing}
             enableDynamicViewWalkthrough={enableDynamicViewWalkthrough}
             enableFocusMode={enableFocusMode}
-            whereFilter={where ?? null}
+            enableRelationshipsBrowser={enableRelationshipsBrowser && hasLikec4model}
+            whereFilter={readonly !== true ? (where ?? null) : null}
             renderIcon={renderIcon ?? null}
             onCanvasClick={onCanvasClick ?? null}
             onCanvasContextMenu={onCanvasContextMenu ?? null}
@@ -117,7 +128,6 @@ export function LikeC4Diagram({
             onBurgerMenuClick={onBurgerMenuClick ?? null}
           >
             <LikeC4DiagramInnerMemo
-              controls={controls}
               background={background}
               showDiagramTitle={showDiagramTitle}
             />
@@ -131,25 +141,24 @@ LikeC4Diagram.displayName = 'LikeC4Diagram'
 
 type LikeC4DiagramInnerProps = {
   background: NonNullable<LikeC4DiagramProperties['background']>
-  controls: boolean
   showDiagramTitle: boolean
 }
 const LikeC4DiagramInnerMemo = /* @__PURE__ */ memo<LikeC4DiagramInnerProps>(function LikeC4DiagramInner({
   background,
-  controls,
   showDiagramTitle
 }) {
   const {
     isInitialized,
     pannable,
     fitView,
-    enableFocusMode
+    enableFocusMode,
+    enableOverlays
   } = useDiagramState(s => ({
     isInitialized: s.initialized,
-    zoomable: s.zoomable,
     pannable: s.pannable,
     fitView: s.fitViewEnabled,
-    enableFocusMode: s.enableFocusMode
+    enableFocusMode: s.enableFocusMode,
+    enableOverlays: s.enableRelationshipsBrowser
   }))
 
   return (
@@ -158,7 +167,7 @@ const LikeC4DiagramInnerMemo = /* @__PURE__ */ memo<LikeC4DiagramInnerProps>(fun
         className={clsx(
           'likec4-diagram',
           css.cssReactFlow,
-          controls === false && css.cssNoControls,
+          css.cssNoControls,
           pannable !== true && css.cssDisablePan,
           background === 'transparent' && css.cssTransparentBg
         )}
@@ -166,9 +175,9 @@ const LikeC4DiagramInnerMemo = /* @__PURE__ */ memo<LikeC4DiagramInnerProps>(fun
         <XYFlowInner
           showDiagramTitle={showDiagramTitle}
           background={background}
-          controls={controls}
         />
       </XYFlow>
+      {enableOverlays && <Overlays />}
       {isInitialized && (
         <>
           {fitView && <FitViewOnDiagramChange />}

package/src/StaticLikeC4Diagram.tsx

@@ -37,6 +37,8 @@ export function StaticLikeC4Diagram({
       showNotations={false}
       showRelationshipDetails={false}
       enableDynamicViewWalkthrough={false}
+      enableRelationshipsBrowser={false}
+      experimentalEdgeEditing={false}
       enableFocusMode={false}
       nodesSelectable={false}
       nodesDraggable={false}

package/src/components/Overlay.css.ts

@@ -0,0 +1,78 @@
+import { createVar, keyframes, style } from '@vanilla-extract/css'
+import { whereDark } from '../theme-vars'
+
+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/components/Overlay.tsx

@@ -0,0 +1,102 @@
+import { ActionIcon, Box } from '@mantine/core'
+import { useMergedRef, useTimeout } from '@mantine/hooks'
+import { useDebouncedEffect, useSyncedRef } from '@react-hookz/web'
+import { IconX } from '@tabler/icons-react'
+import clsx from 'clsx'
+import { forwardRef, type HTMLAttributes, type ReactNode, useMemo, useRef, useState } from 'react'
+import { useDiagramStoreApi } from '../hooks/useDiagramState'
+import * as css from './Overlay.css'
+import { OverlayContext, useOverlayDialog } from './OverlayContext'
+
+type OverlayDialogProps = Pick<HTMLAttributes<HTMLDialogElement>, 'style' | 'className'> & {
+  onClose?: (() => void) | undefined
+  children: (renderProps: {
+    opened: boolean
+    close: () => void
+  }) => ReactNode
+}
+
+export 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}>
+      <dialog
+        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
+        })}
+      </dialog>
+    </OverlayContext.Provider>
+  )
+})
+
+export 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>
+  )
+}

package/src/components/OverlayContext.tsx

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react'
+import type { DiagramState } from '../hooks'
+
+export const OverlayContext = createContext({} as {
+  openOverlay: DiagramState['openOverlay']
+  close: () => void
+})
+
+export function useOverlayDialog() {
+  return useContext(OverlayContext)
+}

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export { OverlayDialog, OverlayDialogCloseButton } from './Overlay'
+export { useOverlayDialog } from './OverlayContext'

package/src/likec4model/index.ts

@@ -1 +1,2 @@
+export * from './useLikeC4ElementsTree'
 export * from './useLikeC4Model'

package/src/likec4model/useLikeC4ElementsTree.ts

@@ -0,0 +1,44 @@
+import {
+  compareNatural,
+  type Fqn,
+  type LikeC4DiagramModel,
+  type LikeC4Model,
+  type LikeC4ViewModel,
+  type ViewID
+} from '@likec4/core'
+import { useMemo } from 'react'
+import { useLikeC4Model } from './useLikeC4Model'
+
+interface LikeC4ModelTreeNodeData {
+  label: string
+  value: Fqn
+  children: LikeC4ModelTreeNodeData[]
+}
+
+const sortByLabel = (a: LikeC4ModelTreeNodeData, b: LikeC4ModelTreeNodeData) => compareNatural(a.label, b.label)
+
+function buildNode(
+  element: LikeC4Model.ElementModel | LikeC4DiagramModel.Element | LikeC4ViewModel.Element
+): LikeC4ModelTreeNodeData {
+  return {
+    label: element.title,
+    value: element.id,
+    children: element.children().map(buildNode).sort(sortByLabel)
+  }
+}
+
+/**
+ * Returns a tree of elements in the model.
+ * If `viewId` is provided, returns the tree of elements in the view.
+ */
+export function useLikeC4ElementsTree(viewId?: ViewID): LikeC4ModelTreeNodeData[] {
+  const model = useLikeC4Model(true)
+  return useMemo(() => {
+    if (viewId) {
+      const view = model.view(viewId)
+      return view.roots().map(buildNode).sort(sortByLabel)
+    } else {
+      return model.roots().map(buildNode).sort(sortByLabel)
+    }
+  }, [model, viewId ?? null])
+}

package/src/overlays/edge-details/EdgeDetailsOverlay.css.ts

@@ -0,0 +1,13 @@
+import { style } from '@vanilla-extract/css'
+
+//
+export const dependencyViewContainer = style({
+  width: '100%',
+  height: '100%'
+  // position: 'absolute',
+  // top: 20,
+  // left: 20,
+  // width: 'calc(100% - 40px)',
+  // height: 'calc(100% - 40px)',
+  // overflow: 'hidden',
+})

package/src/overlays/edge-details/EdgeDetailsOverlay.tsx

@@ -0,0 +1,37 @@
+import { type EdgeId, invariant } from '@likec4/core'
+import { ActionIcon, Code, Paper } from '@mantine/core'
+import { IconX } from '@tabler/icons-react'
+import { OverlayDialog } from '../../components'
+import { useDiagramState, useDiagramStoreApi } from '../../hooks'
+import * as css from './EdgeDetailsOverlay.css'
+
+export function EdgeDetailsOverlay({ edgeId }: { edgeId: EdgeId }) {
+  const diagramApi = useDiagramStoreApi()
+  const edge = useDiagramState(s => s.xyedges.find(e => e.id === edgeId))
+  invariant(edge, `Edge with id ${edgeId} not found`)
+  return (
+    <OverlayDialog
+      onClose={() => {
+        diagramApi.getState().closeOverlay()
+      }}
+      data-likec4-color="gray"
+    >
+      {({ close }) => (
+        <Paper className={css.dependencyViewContainer}>
+          <div>edge</div>
+          <Code block>{JSON.stringify(edge, null, 2)}</Code>
+          <ActionIcon
+            variant="default"
+            color="gray"
+            autoFocus
+            onClick={(e) => {
+              e.stopPropagation()
+              close()
+            }}>
+            <IconX />
+          </ActionIcon>
+        </Paper>
+      )}
+    </OverlayDialog>
+  )
+}

package/src/overlays/index.tsx

@@ -0,0 +1,33 @@
+import { memo } from 'react'
+import { useDiagramState } from '../hooks/useDiagramState'
+import { EdgeDetailsOverlay } from './edge-details/EdgeDetailsOverlay'
+import { RelationshipsOfOverlay } from './relationships-of/RelationshipsOverlay'
+
+export const Overlays = memo(() => {
+  const {
+    hasLikeC4Model,
+    activeOverlay
+  } = useDiagramState(s => ({
+    hasLikeC4Model: s.hasLikeC4Model,
+    activeOverlay: s.activeOverlay
+  }))
+
+  if (!activeOverlay) {
+    return null
+  }
+
+  if (!hasLikeC4Model) {
+    console.warn('LikeC4Model is not available, but overlays are active')
+    return null
+  }
+
+  if (activeOverlay.relationshipsOf) {
+    return <RelationshipsOfOverlay />
+  }
+
+  if (activeOverlay.edgeDetails) {
+    return <EdgeDetailsOverlay edgeId={activeOverlay.edgeDetails} />
+  }
+
+  return null
+})

package/src/overlays/relationships-of/RelationshipsOverlay.tsx

@@ -0,0 +1,33 @@
+import { ReactFlowProvider as XYFlowProvider } from '@xyflow/react'
+import { memo } from 'react'
+import { OverlayDialog, OverlayDialogCloseButton } from '../../components'
+import { useDiagramStoreApi } from '../../hooks'
+import { RelationshipsXYFlow } from './RelationshipsXYFlow'
+import * as css from './styles.css'
+
+export const RelationshipsOfOverlay = memo(() => {
+  const diagramApi = useDiagramStoreApi()
+
+  return (
+    <OverlayDialog
+      className={css.overlay}
+      onClose={() => {
+        diagramApi.getState().closeOverlay()
+      }}
+      data-likec4-color="gray"
+    >
+      {({ opened }) => (
+        <>
+          {opened && (
+            <XYFlowProvider
+              defaultNodes={[]}
+              defaultEdges={[]}>
+              <RelationshipsXYFlow />
+            </XYFlowProvider>
+          )}
+          <OverlayDialogCloseButton />
+        </>
+      )}
+    </OverlayDialog>
+  )
+})