@likec4/diagram 1.13.0 → 1.15.0

package/src/overlays/relationships-of/use-layouted-relationships.ts

@@ -28,7 +28,8 @@ import {
   reverse,
   sort,
   sortBy,
-  takeWhile
+  takeWhile,
+  tap
 } from 'remeda'
 import { useDiagramState } from '../../hooks/useDiagramState'
 import { useLikeC4Model } from '../../likec4model'
@@ -50,10 +51,10 @@ const Sizes = {
     edgesep: 20
   } satisfies GraphLabel,
   edgeLabel: {
-    width: 50
+    width: 60
   } satisfies Label,
 
-  emptyNodeOffset: 100,
+  emptyNodeOffset: 150,
 
   nodeWidth: 270,
   hodeHeight: 160,
@@ -62,7 +63,7 @@ const Sizes = {
   // 0 means no spacer
   spacerHeight: 0,
 
-  compoundLabelHeight: 5
+  compoundLabelHeight: 1
 }
 
 export const ZIndexes = {
@@ -90,10 +91,12 @@ function createGraph() {
   columns.reduce((prev, column) => {
     const c = graphColumn(column)
     g.setNode(c.id, {})
-    g.setNode(c.anchor, { width: 50, height: 5 })
+    g.setNode(c.anchor, { width: 40, height: 2 })
     g.setParent(c.anchor, c.id)
     if (prev) {
-      g.setEdge(prev, c.anchor)
+      g.setEdge(prev, c.anchor, {
+        width: 0
+      })
     }
     return c.anchor
   }, null as string | null)
@@ -254,9 +257,6 @@ function createNode(
 
   g.setNode(k.id, sized())
   if (xynode.type === 'compound') {
-    g.setNode(k.id, {
-      padding: 40
-    })
     g.setNode(k.port, {
       width: Sizes.nodeWidth - Sizes.dagre.ranksep,
       height: Sizes.compoundLabelHeight
@@ -397,6 +397,12 @@ function layout(
   subject: LikeC4ModelElement
   nodes: XYFlowTypes.Node[]
   edges: XYFlowTypes.Edge[]
+  bounds: {
+    x: number
+    y: number
+    width: number
+    height: number
+  }
 } {
   const diagramNodes = new Map(view.nodes.map(n => [n.id, n]))
   const subjectElement = likec4model.element(subjectId)
@@ -459,13 +465,11 @@ function layout(
 
     forEachIncoming(sourceId, relations) {
       const source = createNode('incomers', 'element', likec4model.element(sourceId), ctx)
-      g.setEdge(graphId(source).port, subject.id, {
-        weight: source.type === 'compound' ? 0 : 1
-      })
+      g.setEdge(graphId(source).port, subject.id)
 
-      const op = source.type === 'compound' ? 'unshift' : 'push'
+      // const op = source.type === 'compound' ? 'unshift' : 'push'
 
-      subject.data.ports.left[op]({
+      subject.data.ports.left.push({
         id: source.id,
         type: 'in'
       })
@@ -482,12 +486,10 @@ function layout(
 
     forEachOutgoing(targetId, relations) {
       const target = createNode('outgoers', 'element', likec4model.element(targetId), ctx)
-      g.setEdge(subjectElement.id, graphId(target).port, {
-        weight: target.type === 'compound' ? 2 : 1
-      })
+      g.setEdge(subjectElement.id, graphId(target).port)
 
-      const op = target.type === 'compound' ? 'unshift' : 'push'
-      subject.data.ports.right[op]({
+      // const op = target.type === 'compound' ? 'unshift' : 'push'
+      subject.data.ports.right.push({
         id: target.id,
         type: 'out'
       })
@@ -548,24 +550,25 @@ function layout(
     )
   }
 
-  // Sort ports by their position
   for (const node of xynodes) {
+    // Grow empty nodes to fill the space
     if (node.type === 'empty') {
       const subjectPosition = nodebounds(subject.id)
       node.position.y = subjectPosition.position.y + subjectPosition.height / 2 - node.height / 2
       if (node.data.column === 'incomers') {
-        // Place on the left
-        node.position.x = subjectPosition.position.x - node.width - Sizes.emptyNodeOffset
+        node.width = subjectPosition.position.x - Sizes.emptyNodeOffset - node.position.x
       } else {
-        // Place on the right
+        const rightX = node.position.x + node.width
         node.position.x = subjectPosition.position.x + subjectPosition.width + Sizes.emptyNodeOffset
+        node.width = rightX - node.position.x
       }
       continue
     }
-    if (node.data.ports.left.length > 0) {
+    // Sort ports by their position
+    if (node.data.ports.left.length > 1) {
       node.data.ports.left = sortedPorts(node.data.ports.left)
     }
-    if (node.data.ports.right.length > 0) {
+    if (node.data.ports.right.length > 1) {
       node.data.ports.right = sortedPorts(node.data.ports.right)
     }
   }
@@ -575,21 +578,18 @@ function layout(
     viewIncludesSubject: diagramNodes.has(subjectId),
     subject: subjectElement,
     edges: ctx.edges,
-    nodes: xynodes
+    nodes: xynodes,
+    bounds: {
+      x: 0,
+      y: 0,
+      width: g.graph().width ?? 0,
+      height: g.graph().height ?? 0
+    }
   }
 }
 
-export function useLayoutedRelationships(scope: 'global' | 'view') {
-  const {
-    subjectId,
-    view
-  } = useDiagramState(s => {
-    return {
-      subjectId: s.activeOverlay?.relationshipsOf,
-      view: s.view
-    }
-  })
-  invariant(subjectId, 'subject not found')
+export function useLayoutedRelationships(subjectId: Fqn, scope: 'global' | 'view') {
+  const view = useDiagramState(s => s.view)
   const likec4model = useLikeC4Model(true)
   return useMemo(() =>
     layout(

package/src/overlays/relationships-of/xyflow/CompoundNode.tsx

@@ -27,12 +27,12 @@ export function CompoundNode({
           css.compoundNodeBody,
           'likec4-compound-node'
         ])}
-        data-compound-depth={2}
+        data-compound-depth={3}
         data-likec4-color={element.color}
         animate={{
           opacity: data.dimmed ? 0.15 : 1,
           transition: {
-            delay: data.dimmed ? .8 : 0
+            delay: data.dimmed === true ? .4 : 0
           }
         }}
         {...(selectable && {

package/src/overlays/relationships-of/xyflow/ElementNode.tsx

@@ -1,15 +1,23 @@
-import { ActionIcon, Box, Text as MantineText } from '@mantine/core'
-import { IconZoomScan } from '@tabler/icons-react'
+import { ActionIcon, Box, Group, Text as MantineText } from '@mantine/core'
+import { IconFileSymlink, IconTransform, IconZoomScan } from '@tabler/icons-react'
 import { Handle, type NodeProps, Position } from '@xyflow/react'
 import clsx from 'clsx'
 import { m } from 'framer-motion'
-import { useOverlayDialog } from '../../../components'
 import { type DiagramState, useDiagramState } from '../../../hooks'
 import { ElementShapeSvg } from '../../../xyflow/nodes/element/ElementShapeSvg'
 import { stopPropagation } from '../../../xyflow/utils'
+import { useOverlayDialog } from '../../OverlayContext'
 import type { XYFlowTypes } from '../_types'
 import * as css from './styles.css'
 
+const Action = ActionIcon.withProps({
+  className: 'nodrag nopan ' + css.navigateBtn,
+  radius: 'md',
+  role: 'button',
+  onDoubleClick: stopPropagation,
+  onPointerDownCapture: stopPropagation
+})
+
 const Text = MantineText.withProps({
   component: 'div'
 })
@@ -18,8 +26,9 @@ type ElementNodeProps = NodeProps<XYFlowTypes.ElementNode>
 
 function selector(s: DiagramState) {
   return {
-    viewId: s.view.id,
-    onNavigateTo: s.onNavigateTo
+    currentViewId: s.view.id,
+    onNavigateTo: s.onNavigateTo,
+    onOpenSource: s.onOpenSourceElement
   }
 }
 
@@ -36,8 +45,9 @@ export function ElementNode({
 }: ElementNodeProps) {
   const overlay = useOverlayDialog()
   const {
-    viewId,
-    onNavigateTo
+    currentViewId,
+    onNavigateTo,
+    onOpenSource
   } = useDiagramState(selector)
   return (
     <>
@@ -50,7 +60,7 @@ export function ElementNode({
         animate={{
           opacity: data.dimmed ? 0.15 : 1,
           transition: {
-            delay: data.dimmed ? .8 : 0
+            delay: data.dimmed === true ? .4 : 0
           }
         }}
         {...(selectable && {
@@ -73,10 +83,7 @@ export function ElementNode({
           width={w}
           height={h}
         >
-          <ElementShapeSvg
-            shape={element.shape}
-            w={w}
-            h={h} />
+          <ElementShapeSvg shape={element.shape} w={w} h={h} />
         </svg>
         <Box className={css.elementNodeContent}>
           <Text className={css.elementNodeTitle} lineClamp={2}>{element.title}</Text>
@@ -84,24 +91,38 @@ export function ElementNode({
             <Text className={css.elementNodeDescription} lineClamp={4}>{element.description}</Text>
           )}
         </Box>
-        {navigateTo && onNavigateTo && navigateTo !== viewId && (
-          <Box className={css.navigateBtnBox}>
-            <ActionIcon
-              className={clsx('nodrag nopan', css.navigateBtn)}
-              radius="md"
+        <Group className={css.navigateBtnBox}>
+          {navigateTo && onNavigateTo && navigateTo !== currentViewId && (
+            <Action
               onClick={(event) => {
                 event.stopPropagation()
-                setTimeout(() => onNavigateTo(navigateTo), 200)
+                setTimeout(() => onNavigateTo(navigateTo), 100)
                 overlay.close()
-              }}
-              role="button"
-              onDoubleClick={stopPropagation}
-              onPointerDownCapture={stopPropagation}
-            >
+              }}>
               <IconZoomScan stroke={1.8} style={{ width: '75%' }} />
-            </ActionIcon>
-          </Box>
-        )}
+            </Action>
+          )}
+          {data.column !== 'subject' && (
+            <Action
+              onClick={(event) => {
+                event.stopPropagation()
+                overlay.openOverlay({
+                  relationshipsOf: data.fqn
+                })
+              }}>
+              <IconTransform stroke={1.8} style={{ width: '72%' }} />
+            </Action>
+          )}
+          {onOpenSource && (
+            <Action
+              onClick={(event) => {
+                event.stopPropagation()
+                onOpenSource(data.fqn)
+              }}>
+              <IconFileSymlink stroke={1.8} style={{ width: '72%' }} />
+            </Action>
+          )}
+        </Group>
       </m.div>
       {ports.left.map(({ id, type }, i) => (
         <Handle

package/src/overlays/relationships-of/xyflow/RelationshipEdge.tsx

@@ -1,7 +1,10 @@
-import { Group, Text, ThemeIcon } from '@mantine/core'
-import { IconBoxMultipleFilled } from '@tabler/icons-react'
+import { ActionIcon, Box, Group, Stack, Text, ThemeIcon } from '@mantine/core'
+import { IconBoxMultipleFilled, IconZoomScan } from '@tabler/icons-react'
 import { BaseEdge, EdgeLabelRenderer, type EdgeProps, getBezierPath } from '@xyflow/react'
 import clsx from 'clsx'
+import { only } from 'remeda'
+import { useDiagramState } from '../../../hooks/useDiagramState'
+import { stopPropagation } from '../../../xyflow/utils'
 import type { XYFlowTypes } from '../_types'
 import { ZIndexes } from '../use-layouted-relationships'
 import * as css from './styles.css'
@@ -11,8 +14,11 @@ export function RelationshipEdge({
   label,
   ...props
 }: EdgeProps<XYFlowTypes.Edge>) {
+  const onNavigateTo = useDiagramState(s => s.onNavigateTo)
   const [edgePath, labelX, labelY] = getBezierPath(props)
+  const navigateTo = onNavigateTo ? only(data.relations)?.navigateTo : undefined
   const isMultiRelation = data.relations.length > 1
+  const technology = only(data.relations)?.technology
   return (
     <>
       <g
@@ -25,35 +31,65 @@ export function RelationshipEdge({
           {...props}
         />
       </g>
-      {label && (
-        <EdgeLabelRenderer>
-          <div
-            style={{
-              position: 'absolute',
-              transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
-              maxWidth: Math.abs(props.targetX - props.sourceX - 40),
-              zIndex: ZIndexes.max
-            }}
-            className={clsx([
-              css.edgeLabel,
-              'nodrag nopan'
-            ])}
-            data-edge-dimmed={data.dimmed}
-            data-edge-hovered={data.hovered}
-          >
+      <EdgeLabelRenderer>
+        <Stack
+          gap={2}
+          style={{
+            position: 'absolute',
+            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+            maxWidth: Math.abs(props.targetX - props.sourceX - 40),
+            zIndex: ZIndexes.max
+          }}
+          className={clsx([
+            css.edgeLabel,
+            'nodrag nopan'
+          ])}
+          data-edge-dimmed={data.dimmed}
+          data-edge-hovered={data.hovered}
+        >
+          {label && (
             <Group gap={6} wrap="nowrap">
               {isMultiRelation && (
                 <ThemeIcon size={'sm'} variant="transparent" color="orange">
                   <IconBoxMultipleFilled style={{ width: '80%' }} />
                 </ThemeIcon>
               )}
-              <Text fw={isMultiRelation ? '500' : '400'} component={'div'} className={css.edgeLabelText} lineClamp={3}>
+              <Text
+                fw={isMultiRelation ? '500' : '400'}
+                component={'div'}
+                className={css.edgeLabelText}
+                lineClamp={3}>
                 {label}
               </Text>
             </Group>
-          </div>
-        </EdgeLabelRenderer>
-      )}
+          )}
+          {technology && (
+            <Text component={'div'} className={css.edgeLabelTechnology}>
+              {'[ '}
+              {technology}
+              {' ]'}
+            </Text>
+          )}
+          {navigateTo && (
+            <Box ta={'center'} mt={4}>
+              <ActionIcon
+                variant="default"
+                size={'sm'}
+                radius="sm"
+                onPointerDownCapture={stopPropagation}
+                onClick={event => {
+                  event.stopPropagation()
+                  onNavigateTo?.(navigateTo, event)
+                }}
+                role="button"
+                onDoubleClick={stopPropagation}
+              >
+                <IconZoomScan />
+              </ActionIcon>
+            </Box>
+          )}
+        </Stack>
+      </EdgeLabelRenderer>
     </>
   )
 }

package/src/overlays/relationships-of/xyflow/styles.css.ts

@@ -1,4 +1,5 @@
-import { style } from '@vanilla-extract/css'
+import { rem } from '@mantine/core'
+import { globalStyle, style } from '@vanilla-extract/css'
 import { mantine, vars, whereLight, xyvars } from '../../../theme-vars'
 
 export const elementNode = style({
@@ -13,6 +14,7 @@ export const elementNodeContent = style({
   flexDirection: 'column',
   justifyContent: 'center',
   alignItems: 'center',
+  overflow: 'hidden',
   gap: 6,
   padding: 16
 })
@@ -48,7 +50,7 @@ export const compoundNodeBody = style({
   width: '100%',
   height: '100%',
   boxShadow: '0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4)',
-  background: `color-mix(in srgb , ${vars.element.fill},  transparent 45%)`,
+  background: `color-mix(in srgb , ${vars.element.fill},  transparent 10%)`,
   borderRadius: 4
 })
 
@@ -63,13 +65,7 @@ export const compoundNodeTitle = style({
   paddingTop: 12,
   paddingLeft: 10,
   mixBlendMode: 'screen',
-  color: vars.compound.titleColor,
-  selectors: {
-    [`${whereLight} &`]: {
-      mixBlendMode: 'darken',
-      color: vars.element.stroke
-    }
-  }
+  color: vars.compound.titleColor
 })
 
 export const cssShapeSvg = style({
@@ -88,6 +84,8 @@ export const cssShapeSvg = style({
   zIndex: -1
 })
 
+const DimmedTransitionDelay = '400ms'
+
 export const edgePath = style({
   opacity: 1,
   transition: 'all 0.2s ease-in-out',
@@ -95,7 +93,7 @@ export const edgePath = style({
   selectors: {
     [`&[data-edge-dimmed='true']`]: {
       opacity: 0.1,
-      transitionDelay: '800ms'
+      transitionDelay: DimmedTransitionDelay
     }
   }
 })
@@ -119,8 +117,7 @@ export const edgeLabel = style({
   selectors: {
     [`&[data-edge-dimmed='true']`]: {
       opacity: 0.1,
-      // transitionDuration: '400ms',
-      transitionDelay: '800ms'
+      transitionDelay: DimmedTransitionDelay
     }
   }
 })
@@ -128,10 +125,17 @@ export const edgeLabel = style({
 export const edgeLabelText = style({
   textAlign: 'center',
   whiteSpaceCollapse: 'preserve-breaks',
-  fontSize: mantine.fontSizes.sm,
+  fontSize: rem(15),
   lineHeight: mantine.lineHeights.xs
 })
 
+export const edgeLabelTechnology = style({
+  textAlign: 'center',
+  whiteSpaceCollapse: 'preserve-breaks',
+  fontSize: mantine.fontSizes.sm,
+  lineHeight: 1
+})
+
 export const emptyNode = style({
   width: '100%',
   height: '100%',
@@ -148,23 +152,56 @@ export const navigateBtnBox = style({
   left: '50%',
   bottom: 2,
   transform: 'translate(-50%, 0%)',
+  gap: 0,
+  transition: 'all 190ms cubic-bezier(0.5, 0, 0.4, 1)',
   selectors: {
     [`:where([data-likec4-shape='browser']) &`]: {
       bottom: 4
     }
   }
 })
+globalStyle(`:where(${elementNode}:hover) ${navigateBtnBox}`, {
+  transitionDelay: '20ms',
+  gap: 8,
+  transform: 'translate(-50%, 5px)'
+})
+
 export const navigateBtn = style({
+  opacity: 0.7,
   pointerEvents: 'all',
-  color: vars.element.loContrast,
   cursor: 'pointer',
-  backgroundColor: 'var(--ai-bg)',
+  transform: 'scale(0.9)',
+  transition: 'all 190ms cubic-bezier(0.5, 0, 0.4, 1)',
   'vars': {
     '--ai-bg': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,
     '--ai-bg-hover': `color-mix(in srgb , ${vars.element.fill} 65%, ${vars.element.stroke})`,
     '--ai-hover': `color-mix(in srgb , ${vars.element.fill} 50%, ${vars.element.stroke})`
   },
   ':hover': {
-    boxShadow: mantine.shadows.md
+    transitionDelay: '0ms',
+    transform: 'scale(1.25)',
+    boxShadow: mantine.shadows.lg
+  },
+  ':active': {
+    transform: 'scale(0.975)'
+  }
+})
+
+globalStyle(`:where(${elementNode}:hover) ${navigateBtn}`, {
+  transitionDelay: '40ms',
+  transitionTimingFunction: 'cubic-bezier(0, 0, 0.40, 1)',
+  opacity: 1,
+  transform: 'scale(1.07)',
+  boxShadow: mantine.shadows.md,
+  vars: {
+    '--ai-bg': `var(--ai-bg-hover)`
   }
 })
+// globalStyle(`${elementNode}:hover ${navigateBtn}`, {
+//   opacity: 1,
+//   transform: 'scale(1.05)',
+//   boxShadow: mantine.shadows.md,
+//   vars: {
+//     '--ai-bg': `var(--ai-bg-hover)`
+//   }
+// })

package/src/state/DiagramContext.tsx

@@ -1,6 +1,9 @@
 import { invariant } from '@likec4/core'
+import { useMergedRef } from '@mantine/hooks'
 import { deepEqual, shallowEqual } from 'fast-equals'
-import { createContext, type PropsWithChildren, useCallback, useRef } from 'react'
+import { useAnimate } from 'framer-motion'
+import { createContext, type PropsWithChildren, useCallback, useEffect, useRef } from 'react'
+import { clone } from 'remeda'
 import { useUpdateEffect } from '../hooks/useUpdateEffect'
 import { useXYFlow, useXYStoreApi } from '../hooks/useXYFlow'
 import { createDiagramStore, type DiagramInitialState, type DiagramZustandStore } from './diagramStore'
@@ -22,7 +25,9 @@ export function DiagramContextProvider({
   whereFilter,
   ...props
 }: DiagramContextProviderProps) {
+  const [scope, animate] = useAnimate()
   const containerRef = useRef<HTMLDivElement>(null)
+  const ref = useMergedRef(scope, containerRef)
   const xystore = useXYStoreApi()
   const xyflow = useXYFlow()
   const store = useRef<DiagramZustandStore>()
@@ -35,7 +40,7 @@ export function DiagramContextProvider({
       xyflow,
       view,
       getContainer,
-      whereFilter: structuredClone(whereFilter),
+      whereFilter: clone(whereFilter),
       ...props
     })
   }
@@ -55,7 +60,7 @@ export function DiagramContextProvider({
       const current = store.current
       invariant(current, 'DiagramContext.store.current is not defined')
       if (!deepEqual(whereFilter, current.getState().whereFilter)) {
-        current.setState({ whereFilter: structuredClone(whereFilter) }, false, 'update where filter')
+        current.setState({ whereFilter: clone(whereFilter) }, false, 'update where filter')
       }
       current.getState().updateView(view)
     },
@@ -63,9 +68,22 @@ export function DiagramContextProvider({
     (a, b) => shallowEqual(a[0], b[0]) && deepEqual(a[1], b[1])
   )
 
+  const api = store.current
+  useEffect(() => {
+    return api.subscribe(s => !!s.activeOverlay, (isActiveOverlay) => {
+      animate('.likec4-diagram .react-flow__renderer', {
+        filter: isActiveOverlay ? 'grayscale(0.85) brightness(0.5)' : 'grayscale(0) brightness()',
+        scale: isActiveOverlay ? 0.97 : 1,
+        transform: isActiveOverlay ? `translateY(8px)` : `translateY(0)`
+      }, {
+        duration: isActiveOverlay ? 0.5 : 0.16
+      })
+    })
+  }, [api])
+
   return (
     <div
-      ref={containerRef}
+      ref={ref}
       className={className}
       {...(keepAspectRatio && {
         style: {
@@ -73,7 +91,7 @@ export function DiagramContextProvider({
           maxHeight: Math.ceil(view.bounds.height)
         }
       })}>
-      <DiagramContext.Provider value={store.current}>
+      <DiagramContext.Provider value={api}>
         {children}
       </DiagramContext.Provider>
     </div>