@likec4/diagram 1.3.0 → 1.5.0

package/src/xyflow/edges/edges.css.ts

@@ -1,5 +1,5 @@
 import { rem } from '@mantine/core'
-import { createVar, fallbackVar, generateIdentifier, globalKeyframes, globalStyle, style } from '@vanilla-extract/css'
+import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
 import { mantine } from '../../mantine.css'
 import { vars, xyvars } from '../../theme.css'
 
@@ -11,8 +11,8 @@ export const container = style({
     [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) 20%)`,
-    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 35%)`,
-    [xyvars.edge.strokeWidth]: '2.2px'
+    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 40%)`,
+    [xyvars.edge.strokeWidth]: '3'
   }
 })
 
@@ -20,7 +20,7 @@ globalStyle(`:where([data-mantine-color-scheme="dark"]) ${container}`, {
   vars: {
     [mixColor]: `white`,
     [xyvars.edge.labelColor]: vars.relation.labelColor,
-    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 55%)`
+    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 50%)`
   }
 })
 
@@ -29,7 +29,7 @@ const isSelected = '.react-flow__edge.selected'
 globalStyle(`:where(${isSelected}) ${container}`, {
   vars: {
     [xyvars.edge.stroke]: xyvars.edge.strokeSelected,
-    [xyvars.edge.strokeWidth]: '3px'
+    [xyvars.edge.strokeWidth]: '3'
   }
 })
 
@@ -37,13 +37,13 @@ globalStyle(`${container}:is([data-edge-hovered='true'],[data-edge-active='true'
   vars: {
     // [xyvars.edge.stroke]: `color-mix(in srgb, ${vars.relation.lineColor}, ${mixColor} 35%)`,
     [xyvars.edge.stroke]: xyvars.edge.strokeSelected,
-    [xyvars.edge.strokeWidth]: '3px'
+    [xyvars.edge.strokeWidth]: '3'
   }
 })
 
 globalStyle(`:where(${isSelected}) ${container}[data-edge-hovered='true']`, {
   vars: {
-    [xyvars.edge.strokeWidth]: '3.6px'
+    [xyvars.edge.strokeWidth]: '4'
   }
 })
 // globalStyle(`${container}[data-edge-hovered='true']`, {
@@ -56,18 +56,22 @@ globalStyle(`.react-flow__edges > svg`, {
   mixBlendMode: 'screen'
 })
 
+// globalStyle(`:where([data-mantine-color-scheme="light"]) .react-flow__edges > svg`, {
+//   mixBlendMode: 'screen'
+// })
+
 export const dimmed = style({})
 
 globalStyle(`.react-flow__edges > svg:has(${dimmed})`, {
   opacity: 0.8,
   transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
   transitionDelay: '200ms',
-  filter: 'grayscale(0.85) blur(1px)',
+  filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
   willChange: 'opacity, filter'
 })
 
 export const edgePathBg = style({
-  strokeWidth: xyvars.edge.strokeWidth,
+  // strokeWidth: xyvars.edge.strokeWidth,
   strokeOpacity: 0.08,
   // transition: 'stroke-width 175ms ease-in-out',
   // transition: 'stroke-width 175ms ease-in-out, stroke-opacity 150ms ease-out',
@@ -76,7 +80,7 @@ export const edgePathBg = style({
   transitionTimingFunction: 'ease-out',
   selectors: {
     [`:where(${isSelected}, [data-edge-active='true'], [data-edge-hovered='true']) &`]: {
-      strokeWidth: `calc(${xyvars.edge.strokeWidth} + 8px)`,
+      strokeWidth: `calc(${xyvars.edge.strokeWidth} + 8)`,
       strokeOpacity: 0.15
     }
   }
@@ -93,7 +97,7 @@ export const controlPoint = style({
   stroke: xyvars.edge.stroke,
   fillOpacity: 0.75,
   strokeWidth: 1,
-  cursor: 'grab',
+  cursor: 'default',
   pointerEvents: 'auto',
   visibility: 'hidden',
   ':hover': {
@@ -112,13 +116,20 @@ export const controlPoint = style({
   }
 })
 
-const strokeKeyframes = generateIdentifier('strokeKeyframes')
-globalKeyframes(strokeKeyframes, {
+export const controlDragging = style({
+  cursor: 'grabbing'
+})
+
+globalStyle(`${controlDragging} *`, {
+  cursor: 'grabbing'
+})
+
+const strokeKeyframes = keyframes({
   'from': {
-    strokeDashoffset: 18 * 2
+    strokeDashoffset: 18 * 2 + 10
   },
   'to': {
-    strokeDashoffset: 1
+    strokeDashoffset: 10
   }
 })
 
@@ -126,19 +137,24 @@ export const cssEdgePath = style({
   animationDuration: '800ms',
   animationIterationCount: 'infinite',
   animationTimingFunction: 'linear',
+  animationFillMode: 'both',
+  strokeDashoffset: 10,
   selectors: {
     [`:where([data-edge-hovered='true']) &`]: {
       animationName: strokeKeyframes,
-      animationDelay: '350ms',
-      transition: 'stroke,stroke-width 130ms ease-out'
+      animationDelay: '450ms',
+      transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out'
     },
     [`:where(${isSelected}, [data-edge-active='true']) &`]: {
       animationName: strokeKeyframes,
       animationDelay: '0ms',
-      transition: 'stroke,stroke-width 130ms ease-out'
+      transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out'
     },
     [`:where([data-edge-dir='back']) &`]: {
       animationDirection: 'reverse'
+    },
+    [`${dimmed} &`]: {
+      animationPlayState: 'paused'
     }
   }
 })
@@ -151,29 +167,31 @@ const varTranslate = createVar('translate')
 export const edgeLabel = style({
   top: 0,
   left: 0,
+  padding: '2px 4px 4px 4px',
   fontFamily: vars.likec4.font,
   position: 'absolute',
   pointerEvents: 'all',
   cursor: 'pointer',
+  width: 'fit-content',
   transformOrigin: '50% 50%',
   mixBlendMode: 'screen',
   color: xyvars.edge.labelColor,
   backgroundColor: xyvars.edge.labelBgColor,
-  borderRadius: '3px',
+  borderRadius: 3,
   transform: varTranslate,
   vars: {
     [varTranslate]: `translate(${fallbackVar(varLabelX, '-50%')}, ${fallbackVar(varLabelY, '-50%')})`
   },
   selectors: {
     '&[data-edge-hovered="true"]': {
-      transition: 'all 140ms ease-out',
-      transform: `${varTranslate} scale(1.1)`
+      transition: 'all 140ms ease-in-out',
+      transform: `${varTranslate} scale(1.12)`
     },
     [`&:is(${dimmed})`]: {
-      opacity: 0.8,
+      opacity: 0.6,
       transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
       transitionDelay: '200ms',
-      filter: 'grayscale(0.85) blur(2px)',
+      filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
       willChange: 'opacity, filter'
     }
   }
@@ -203,8 +221,8 @@ export const stepEdgeNumber = style({
 })
 
 export const edgeLabelText = style({
-  padding: '2px 6px 4px 6px',
   textAlign: 'left',
-  fontSize: rem(12.5),
-  lineHeight: 1.2
+  whiteSpaceCollapse: 'preserve-breaks',
+  fontSize: rem(14),
+  lineHeight: 1.185
 })

package/src/xyflow/edges/utils.ts

@@ -3,6 +3,16 @@ import { Position, type XYPosition } from '@xyflow/react'
 import { getNodeDimensions } from '@xyflow/system'
 import type { InternalXYFlowNode } from '../types'
 
+export function getNodeCenter(node: InternalXYFlowNode): XYPosition {
+  const { width, height } = getNodeDimensions(node)
+  const { x, y } = node.internals.positionAbsolute
+
+  return {
+    x: x + width / 2,
+    y: y + height / 2
+  }
+}
+
 // this helper function returns the intersection point
 // of the line between the center of the intersectionNode and the target node
 export function getNodeIntersectionFromCenterToPoint(

package/src/xyflow/hooks/index.ts

@@ -1,2 +1,4 @@
-export * from './useLayoutConstraints'
-export * from './useXYFlow'
+export { useLayoutConstraints } from './useLayoutConstraints'
+export { useXYFlow, useXYNodesData, useXYStore, useXYStoreApi } from './useXYFlow'
+
+export type * from './useXYFlow'

package/src/xyflow/hooks/useLayoutConstraints.ts

@@ -1,12 +1,11 @@
 import { invariant, isAncestor, nonNullable } from '@likec4/core'
 import { Expression, Expression as Expr, Operator, Solver, Strength, Variable } from '@lume/kiwi'
-import { useDebouncedCallback } from '@react-hookz/web'
 import type { InternalNode, ReactFlowProps, XYPosition } from '@xyflow/react'
 import { getNodeDimensions } from '@xyflow/system'
 import { useMemo, useRef } from 'react'
 import { isNullish } from 'remeda'
-import { useDiagramStoreApi } from '../../state'
-import { type XYFlowInstance, XYFlowNode } from '../types'
+import { useDiagramStoreApi } from '../../state/hooks'
+import type { XYFlowInstance, XYFlowNode } from '../types'
 import { isSamePoint } from '../utils'
 import { useXYStoreApi, type XYStoreApi } from './useXYFlow'
 
@@ -286,7 +285,8 @@ export function useLayoutConstraints(): LayoutConstraints {
         x: event.clientX,
         y: event.clientY
       }
-      const { xyflow } = diagramApi.getState()
+      const { xyflow, cancelSaveManualLayout } = diagramApi.getState()
+      cancelSaveManualLayout()
       solverRef.current = createLayoutConstraints(xyflow, xyflowApi, xynode.id)
     },
     onNodeDrag: (_event, xynode) => {
@@ -295,7 +295,7 @@ export function useLayoutConstraints(): LayoutConstraints {
     },
     onNodeDragStop: (event, _xynode) => {
       if (!isSamePoint(dragStartedAt.current, { x: event.clientX, y: event.clientY })) {
-        diagramApi.getState().triggerSaveManualLayout(xyflowApi)
+        diagramApi.getState().triggerSaveManualLayout()
       }
       solverRef.current = undefined
     }

package/src/xyflow/hooks/useXYFlow.ts

@@ -1,5 +1,6 @@
 import { useNodesData, useReactFlow, useStore, useStoreApi } from '@xyflow/react'
-import { shallowEqual } from 'fast-equals'
+import { deepEqual, shallowEqual } from 'fast-equals'
+import { useCallback } from 'react'
 import type { XYFlowEdge, XYFlowNode, XYFlowState } from '../types'
 
 export const useXYFlow = useReactFlow<XYFlowNode, XYFlowEdge>
@@ -18,3 +19,29 @@ export function useXYStore<StateSlice = unknown>(
 }
 export const useXYStoreApi = useStoreApi<XYFlowNode, XYFlowEdge>
 export type XYStoreApi = ReturnType<typeof useXYStoreApi>
+
+export function useXYEdgesData(edgeIds: string[]): Pick<XYFlowEdge, 'id' | 'data'>[] {
+  const ids = edgeIds.join(',')
+  const edgesData = useXYStore(
+    useCallback(
+      (s) => {
+        const data = [] as Pick<XYFlowEdge, 'id' | 'data'>[]
+        for (const id of edgeIds) {
+          const edge = s.edgeLookup.get(id)
+          if (edge) {
+            data.push({
+              id: edge.id,
+              data: edge.data
+            })
+          }
+        }
+
+        return data
+      },
+      [ids]
+    ),
+    deepEqual
+  )
+
+  return edgesData
+}

package/src/xyflow/nodes/compound/CompoundNode.css.ts

@@ -12,13 +12,19 @@ export const container = style({
   margin: 0
 })
 
+export const nodeHandlerInCenter = style({
+  top: '50%',
+  left: '50%',
+  visibility: 'hidden'
+})
+
 export const dimmed = style({})
 
 globalStyle(`.react-flow__node-compound:has(${dimmed})`, {
   opacity: 0.25,
   transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
   transitionDelay: '200ms',
-  filter: 'grayscale(0.85) blur(1px)',
+  filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
   willChange: 'opacity, filter'
 })
 
@@ -37,8 +43,12 @@ export const compoundBody = style({
   position: 'relative',
   borderRadius: 6,
   boxShadow: '0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4)',
-  padding: 8,
+  padding: 0,
+  margin: 0,
   transition: 'all 200ms ease-out',
+  backgroundClip: 'padding-box',
+  overflow: 'hidden',
+  cursor: 'default',
   selectors: {
     [`:where(.react-flow__node.selected) &`]: {
       boxShadow: 'none'
@@ -56,11 +66,9 @@ export const compoundBody = style({
     left: 0,
     width: '100%',
     height: '100%',
-    borderRadius: 6,
     pointerEvents: 'none',
     transition: 'background 175ms ease-out, opacity 175ms ease-out',
-    background: vars.element.fill,
-    backgroundClip: 'padding-box'
+    background: vars.element.fill
   }
 })
 
@@ -68,27 +76,26 @@ const opacityDeltaOnHover = createVar('opacityDeltaOnHover')
 export const transparent = style({
   borderStyle: 'dashed',
   borderWidth: 3,
-  padding: 6,
   boxShadow: 'none',
   borderColor: `color-mix(in srgb , ${vars.element.stroke}, transparent ${fallbackVar(varBorderTransparency, '10%')})`,
-  backgroundClip: 'padding-box',
   vars: {
     [opacityDeltaOnHover]: '0',
     '--ai-bg': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`
   },
   ':before': {
-    transitionDelay: '200ms',
+    borderRadius: 'unset',
+    transitionDelay: '100ms',
     opacity: calc.add(fallbackVar(varOpacity, '1'), opacityDeltaOnHover)
   },
   selectors: {
-    [`:where(.react-flow__node.selected) &`]: {
-      vars: {
-        [opacityDeltaOnHover]: '.05'
-      }
-    },
+    // [`:where(.react-flow__node.selected) &`]: {
+    //   vars: {
+    //     [opacityDeltaOnHover]: '.05'
+    //   }
+    // },
     [`:where([data-hovered]) &`]: {
       vars: {
-        [opacityDeltaOnHover]: '.1'
+        [opacityDeltaOnHover]: '.08'
       }
     }
   }
@@ -96,21 +103,28 @@ export const transparent = style({
 
 export const title = style({
   fontFamily: vars.compound.font,
-  fontOpticalSizing: 'auto',
-  fontStyle: 'normal',
   textAlign: 'left',
-  display: 'inline-block',
   fontWeight: 600,
-  fontSize: '14px',
+  fontSize: rem(15),
   textTransform: 'uppercase',
   letterSpacing: '0.2px',
   lineHeight: 1,
-  opacity: 0.75,
   color: `var(--_compound-title-color,${vars.compound.titleColor})`,
-  paddingLeft: 12
+  paddingLeft: 14,
+  paddingTop: 13,
+  paddingBottom: 6,
+  mixBlendMode: 'screen',
+  selectors: {
+    [`:where(.react-flow__node.draggable) &`]: {
+      cursor: 'grab'
+    },
+    [`:where(.likec4-compound-transparent) &`]: {
+      paddingTop: 10
+    }
+  }
 })
 export const titleWithNavigation = style({
-  paddingLeft: 26
+  paddingLeft: 32
 })
 
 globalStyle(`:where([data-mantine-color-scheme='light'] .likec4-compound-transparent)`, {
@@ -119,10 +133,6 @@ globalStyle(`:where([data-mantine-color-scheme='light'] .likec4-compound-transpa
   }
 })
 
-globalStyle(`:where([data-mantine-color-scheme='light'] .likec4-compound-transparent) ${title}`, {
-  opacity: 1
-})
-
 const indicatorKeyframes = keyframes({
   'from': {
     opacity: 0.6
@@ -197,10 +207,10 @@ export const navigateBtn = style({
   position: 'absolute',
   pointerEvents: 'all',
   left: 3,
-  top: 7,
+  top: 6,
   cursor: 'pointer',
   color: `var(--_compound-title-color,${navigateBtnColor})`,
-  transformOrigin: '90% 70%',
+  transformOrigin: '90% 50%',
   opacity: 0.75,
   transition: 'all 150ms ease-out',
   transitionDelay: '0ms',
@@ -212,7 +222,7 @@ export const navigateBtn = style({
   },
   ':hover': {
     boxShadow: mantine.shadows.lg,
-    transform: 'scale(1.466)',
+    transform: 'scale(1.42)',
     opacity: 1,
     transitionDelay: '0'
   },
@@ -225,7 +235,7 @@ export const navigateBtn = style({
     [`:where([data-mantine-color-scheme='light'] .likec4-compound-transparent) &`]: {
       opacity: 0.85,
       vars: {
-        '--ai-bg-hover': `color-mix(in srgb , ${vars.element.fill},  transparent 50%)`,
+        '--ai-bg-hover': `color-mix(in srgb , ${vars.element.fill},  transparent 60%)`,
         '--ai-hover': `color-mix(in srgb , ${vars.element.fill},  transparent 20%)`
       }
     },
@@ -241,8 +251,8 @@ export const navigateBtn = style({
   }
 })
 globalStyle(`${navigateBtn} svg.icon`, {
-  width: '70%',
-  height: '70%',
+  width: '75%',
+  height: '75%',
   strokeWidth: 1.5
 })
 

package/src/xyflow/nodes/compound/CompoundNode.tsx

@@ -2,12 +2,10 @@ import { Box, Text } from '@mantine/core'
 import { assignInlineVars } from '@vanilla-extract/dynamic'
 import { Handle, type NodeProps, Position } from '@xyflow/react'
 import clsx from 'clsx'
-import { DEV } from 'esm-env'
 import { deepEqual as eq } from 'fast-equals'
 import { memo } from 'react'
 import { clamp } from 'remeda'
-import useTilg from 'tilg'
-import { useDiagramState } from '../../../state'
+import { useDiagramState } from '../../../state/hooks'
 import type { CompoundXYFlowNode } from '../../types'
 import { NavigateToBtn } from '../shared/NavigateToBtn'
 import * as css from './CompoundNode.css'
@@ -31,7 +29,6 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
     element
   }
 }) {
-  DEV && useTilg()
   const { color, style, depth = 1, ...compound } = element
   // const w = toDomPrecision(width ?? compound.width)
   // const h = toDomPrecision(height ?? compound.height)
@@ -52,65 +49,67 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
   const isnavigable = !!compound.navigateTo && hasOnNavigateTo
 
   return (
-    <Box
-      className={clsx(
-        css.container,
-        'likec4-compound-node',
-        opacity < 1 && 'likec4-compound-transparent',
-        isDimmed && css.dimmed
-      )}
-      mod={{
-        'compound-depth': depth,
-        'likec4-color': color,
-        hovered: isHovered
-      }}
-    >
+    <>
       <Handle
         type="target"
         position={Position.Top}
-        style={{ visibility: 'hidden' }}
+        className={css.nodeHandlerInCenter}
       />
-      <svg className={css.indicator}>
-        <rect
-          x={0}
-          y={0}
-          width={'100%'}
-          height={'100%'}
-          rx={6}
-        />
-      </svg>
-      <div
+      <Box
         className={clsx(
-          css.compoundBody,
-          opacity < 1 && css.transparent,
-          'likec4-compound'
+          css.container,
+          'likec4-compound-node',
+          opacity < 1 && 'likec4-compound-transparent',
+          isDimmed && css.dimmed
         )}
-        style={opacity < 1
-          ? {
-            ...assignInlineVars({
-              [css.varBorderTransparency]: `${borderTransparency}%`,
-              [css.varOpacity]: opacity.toFixed(2)
-            }),
-            borderStyle: style.border ?? 'dashed'
-          }
-          : undefined}
+        mod={{
+          'compound-depth': depth,
+          'likec4-color': color,
+          hovered: isHovered
+        }}
       >
-        <Text
-          component="div"
+        <svg className={css.indicator}>
+          <rect
+            x={0}
+            y={0}
+            width={'100%'}
+            height={'100%'}
+            rx={6}
+          />
+        </svg>
+        <div
           className={clsx(
-            css.title,
-            isnavigable && css.titleWithNavigation,
-            'likec4-compound-title'
-          )}>
-          {compound.title}
-        </Text>
-      </div>
-      {isnavigable && <NavigateToBtn xynodeId={id} className={css.navigateBtn} />}
+            css.compoundBody,
+            opacity < 1 && css.transparent,
+            'likec4-compound'
+          )}
+          style={opacity < 1
+            ? {
+              ...assignInlineVars({
+                [css.varBorderTransparency]: `${borderTransparency}%`,
+                [css.varOpacity]: opacity.toFixed(2)
+              }),
+              borderStyle: style.border ?? 'dashed'
+            }
+            : undefined}
+        >
+          <Text
+            component="div"
+            className={clsx(
+              css.title,
+              isnavigable && css.titleWithNavigation,
+              'likec4-compound-title'
+            )}>
+            {compound.title}
+          </Text>
+        </div>
+        {isnavigable && <NavigateToBtn xynodeId={id} className={css.navigateBtn} />}
+      </Box>
       <Handle
         type="source"
-        position={Position.Bottom}
-        style={{ visibility: 'hidden' }}
+        position={Position.Top}
+        className={css.nodeHandlerInCenter}
       />
-    </Box>
+    </>
   )
 }, isEqualProps)

package/src/xyflow/nodes/element/ElementIcon.tsx

@@ -1,43 +1,32 @@
 import { assignInlineVars } from '@vanilla-extract/dynamic'
 import clsx from 'clsx'
 import type { XYFlowNode } from '../../types'
-import { elementIcon, iconMaxH } from './element.css'
+import { elementIcon, iconOffsetY } from './element.css'
 
 type ElementIconProps = {
   node: XYFlowNode['data']['element']
-  maxWidth?: number | undefined
-  paddingX?: number | undefined
-  paddingY?: number | undefined
 }
 
 export function ElementIcon({
-  node,
-  paddingY = 32
-}: ElementIconProps) {
-  if (!node.icon) {
-    return null
+  node: {
+    icon,
+    title,
+    labelBBox
   }
-  const firstLabel = node.labels[0]
-  if (!firstLabel) {
+}: ElementIconProps) {
+  if (!icon) {
     return null
   }
 
-  const firstLabelY = Math.floor(firstLabel.pt[1] - firstLabel.fontSize * 1.25)
-  const maxIconHeight = Math.floor(firstLabelY - paddingY - 16)
-  // const maxIconWidth = maxWidth ?? node.width - paddingX * 2
-
-  // const centerY = paddingY + Math.floor(maxIconHeight / 2)
-  // const centerX = Math.floor(node.width / 2)
-
   return (
     <div
       className={clsx(elementIcon, 'likec4-element-icon')}
-      style={assignInlineVars({ iconMaxH }, {
-        iconMaxH: maxIconHeight + 'px'
+      style={assignInlineVars({ iconOffsetY }, {
+        iconOffsetY: labelBBox.y + 'px'
       })}>
       <img
-        src={node.icon!}
-        alt={node.title}
+        src={icon}
+        alt={title}
       />
     </div>
   )