@likec4/diagram 1.27.0 → 1.27.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.27.0",
+  "version": "1.27.1",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -63,8 +63,8 @@
     "remeda": "^2.21.2",
     "type-fest": "^4.38.0",
     "xstate": "^5.19.2",
-    "@likec4/styles": "1.27.0",
-    "@likec4/core": "1.27.0"
+    "@likec4/styles": "1.27.1",
+    "@likec4/core": "1.27.1"
   },
   "devDependencies": {
     "@pandacss/dev": "^0.53.3",
@@ -73,7 +73,7 @@
     "@types/d3-shape": "^3.1.7",
     "@types/react": "^19.0.12",
     "@types/react-dom": "^19.0.4",
-    "@types/node": "^20.17.25",
+    "@types/node": "^20.17.27",
     "@vitejs/plugin-react": "^4.3.4",
     "postcss": "^8.5.3",
     "typescript": "^5.8.2",
@@ -81,7 +81,7 @@
     "vite-plugin-dts": "^4.5.3",
     "vitest": "^3.0.9",
     "wireit": "^0.14.11",
-    "@likec4/tsconfig": "1.27.0"
+    "@likec4/tsconfig": "1.27.1"
   },
   "scripts": {
     "generate": "panda codegen",

package/src/LikeC4Diagram.tsx

@@ -70,12 +70,6 @@ export function LikeC4Diagram({
     initialHeight: number
   }>(null)
 
-  const xyNodesEdges = useViewToNodesEdges({
-    view,
-    where,
-    nodesSelectable,
-  })
-
   const isDynamicView = view.__ === 'dynamic'
 
   if (initialRef.current == null) {
@@ -147,8 +141,8 @@ export function LikeC4Diagram({
                         view,
                         pannable,
                         zoomable,
+                        nodesSelectable,
                         fitViewPadding,
-                        ...xyNodesEdges,
                       }}>
                       <ControlsCustomLayoutProvider value={renderControls ?? null}>
                         <LikeC4DiagramXYFlow

package/src/base/primitives/compound/CompoundNodeContainer.tsx

@@ -79,7 +79,7 @@ export function CompoundNodeContainer({
         'data-compound-title-inverse': opacity < 0.5,
       }}
       {...isDimmed !== false && {
-        'likec4-dimmed': isDimmed,
+        'data-likec4-dimmed': isDimmed,
       }}
       style={{
         ...style,

package/src/base/primitives/edge/EdgeLabel.css.ts

@@ -50,7 +50,7 @@ export const edgeLabelContainer = css({
 
   _noReduceGraphics: {
     mixBlendMode: {
-      base: 'plus-lighter',
+      _dark: 'plus-lighter',
       _light: 'screen',
     },
   },
@@ -61,9 +61,6 @@ export const edgeLabelContainer = css({
   _reduceGraphicsOnPan: {
     display: 'none',
   },
-  _whenPanning: {
-    mixBlendMode: 'normal',
-  },
 })
 
 export const labelsva = sva({

package/src/base/primitives/edge/EdgeLabelContainer.tsx

@@ -32,7 +32,7 @@ type EdgeLabelContainerProps = HTMLAttributes<HTMLDivElement> & {
 
 const toCssVarValue = (value: number | string | undefined) => {
   if (value === undefined) return undefined
-  return isNumber(value) ? `${value}px` : value
+  return isNumber(value) ? `${Math.round(value)}px` : value
 }
 
 export function EdgeLabelContainer({

package/src/base/primitives/edge/EdgePath.tsx

@@ -92,9 +92,6 @@ export const EdgePath = forwardRef<SVGPathElement, EdgePathProps>(({
             'react-flow__edge-path',
             'react-flow__edge-interaction',
             cssEdgePath,
-            // css({
-            //   strokeDasharray: strokeDasharray,
-            // }),
           )}
           d={svgPath}
           style={style}

package/src/base/primitives/edge/edge.css.ts

@@ -44,6 +44,7 @@ const _hideOnReducedGraphics = css.raw({
 export const hideOnReducedGraphics = css(_hideOnReducedGraphics)
 
 export const edgePathBg = css(_hideOnReducedGraphics, {
+  fill: '[none]',
   strokeWidth: 'calc(var(--xy-edge-stroke-width) + 2)',
   strokeOpacity: 0.08,
   transitionProperty: 'stroke-width, stroke-opacity',
@@ -70,6 +71,7 @@ export const markerContext = css({
 })
 
 export const cssEdgePath = css({
+  fill: '[none]',
   strokeDashoffset: 10,
   _noReduceGraphics: {
     transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out',

package/src/base/primitives/element/ElementNodeContainer.css.ts

@@ -12,6 +12,7 @@ export const container = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
+  pointerEvents: 'none',
   _after: {
     content: '" "',
     position: 'absolute',

package/src/base/primitives/element/ElementShape.css.ts

@@ -7,7 +7,7 @@ export const indicator = css({
   stroke: 'likec4.palette.loContrast',
   fill: '[none]',
 
-  strokeWidth: 6,
+  strokeWidth: 8,
   strokeOpacity: 0.8,
   visibility: 'hidden',
   pointerEvents: 'none',
@@ -15,26 +15,15 @@ export const indicator = css({
     stroke: `[color-mix(in srgb, {colors.likec4.palette.fill} 50%,rgb(121, 121, 121))]`,
   },
   _whenFocused: {
-    strokeWidth: 12,
     visibility: 'visible',
   },
   _groupFocusVisible: {
-    strokeWidth: 12,
     visibility: 'visible',
   },
   _whenSelected: {
     animationStyle: 'indicator',
     visibility: 'visible',
   },
-  _shapeQueue: {
-    strokeWidth: 8,
-  },
-  _shapeCylinder: {
-    strokeWidth: 8,
-  },
-  _shapeStorage: {
-    strokeWidth: 8,
-  },
 })
 
 export const fillElementFill = css({

package/src/base/primitives/element/ElementTitle.css.ts

@@ -20,7 +20,7 @@ const description = css.raw({
     display: 'none',
   },
   _smallZoom: {
-    visibility: 'hidden',
+    display: 'none',
   },
 })
 
@@ -43,7 +43,7 @@ const technology = css.raw({
     display: 'none',
   },
   _smallZoom: {
-    visibility: 'hidden',
+    display: 'none',
   },
 })
 
@@ -97,6 +97,7 @@ export const elementTitle = sva({
       paddingLeft: 'calc(var(--likec4-spacing) + 8px)',
       paddingRight: 'calc(var(--likec4-spacing) + 8px)',
       overflow: 'hidden',
+      pointerEvents: 'none',
       gap: '12px',
       _shapeQueue: {
         paddingLeft: '46px',

package/src/base/types.ts

@@ -111,7 +111,7 @@ export namespace Base {
   type WithHovered = { data: { hovered?: boolean } }
 
   const _setDimmed = <T extends WithDimmed>(v: T, dimmed: Dimmed): T =>
-    v.data.dimmed === dimmed ? v : ({
+    (v.data.dimmed ?? false) === dimmed ? v : ({
       ...v,
       data: {
         ...v.data,
@@ -129,7 +129,7 @@ export namespace Base {
   }
 
   const _setHovered = <T extends WithHovered>(v: T, hovered: boolean): T =>
-    v.data.hovered === hovered ? v : ({
+    (v.data.hovered ?? false) === hovered ? v : ({
       ...v,
       data: {
         ...v.data,
@@ -167,8 +167,3 @@ export namespace Base {
     return (edge: E) => _setData(edge, arg1 as Partial<EdgeData>)
   }
 }
-
-// import type { ThemeColor } from '@likec4/core'
-// import type { ColorPalette as AllColorPalette } from '@likec4/styles/tokens'
-
-// export type ColorPalette = Extract<AllColorPalette, `likec4.${ThemeColor}` | `likec4.compound${number}.${ThemeColor}`>

package/src/components/Link.tsx

@@ -59,7 +59,9 @@ export function Link({
   value: LinkData
 }) {
   const isNormalSize = size === 'md'
-  const url = new URL(value.url, window.location.href).toString()
+  // If the url is already a full url, use it as is.
+  // Otherwise, it's a relative url and we need to make it absolute.
+  const url = value.url.includes('://') ? value.url : new window.URL(value.url, window.location.href).toString()
   return (
     <CopyButton value={url}>
       {({ copied, copy }) => (

package/src/likec4diagram/DiagramXYFlow.tsx

@@ -1,12 +1,12 @@
 import { type EdgeId, type NodeId, nonNullable } from '@likec4/core'
 import { cx } from '@likec4/styles/css'
-import { useCallbackRef, useTimeout } from '@mantine/hooks'
+import { useCallbackRef, useDebouncedCallback, useTimeout } from '@mantine/hooks'
 import type { OnMove, OnMoveEnd } from '@xyflow/system'
 import { deepEqual, shallowEqual } from 'fast-equals'
 import { type PropsWithChildren, memo } from 'react'
 import { BaseXYFlow } from '../base/BaseXYFlow'
 import { useDiagramEventHandlers } from '../context'
-import { usePanningAtom } from '../context/ReduceGraphics'
+import { useIsReducedGraphics, usePanningAtom } from '../context/ReduceGraphics'
 import { useDiagram, useDiagramContext } from '../hooks/useDiagram'
 import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
 import type { DiagramContext } from '../state/types'
@@ -16,7 +16,7 @@ import type { Types } from './types'
 import { useLayoutConstraints } from './useLayoutConstraints'
 
 const selectXYProps = (ctx: DiagramContext) => ({
-  initialized: ctx.initialized,
+  initialized: ctx.initialized.xydata && ctx.initialized.xyflow,
   nodes: ctx.xynodes,
   edges: ctx.xyedges,
   pannable: ctx.pannable,
@@ -87,12 +87,15 @@ export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({
   } = useDiagramEventHandlers()
 
   const notReadOnly = !enableReadOnly,
+    isReducedGraphics = useIsReducedGraphics(),
     layoutConstraints = useLayoutConstraints(),
     $isPanning = usePanningAtom(),
     isPanning = useTimeout(() => {
-      $isPanning.set(true)
-    }, 160),
-    notPanning = useTimeout(() => {
+      if (!$isPanning.get()) {
+        $isPanning.set(true)
+      }
+    }, isReducedGraphics ? 150 : 350),
+    notPanning = useDebouncedCallback(() => {
       isPanning.clear()
       if ($isPanning.get()) {
         $isPanning.set(false)
@@ -105,11 +108,10 @@ export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({
       if (!$isPanning.get()) {
         isPanning.start()
       }
-      notPanning.clear()
-      notPanning.start()
+      notPanning()
     }),
     onMoveEnd: OnMoveEnd = useCallbackRef((event, viewport) => {
-      notPanning.start()
+      notPanning.flush()
       diagram.send({ type: 'xyflow.viewportMoved', viewport, manually: !!event })
     }),
     onViewportResize = useCallbackRef(() => {

package/src/likec4diagram/custom/edges/RelationshipEdge.tsx

@@ -132,7 +132,7 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
         return
       }
       // This update stays only in internal xystate, not in diagram xstate
-      xyflow.updateEdgeData(id, {
+      diagram.updateEdgeData(id as EdgeId, {
         labelXY: {
           x: labelPos.x,
           y: labelPos.y,
@@ -169,15 +169,13 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
         hasMoved = true
         pointer = clientPoint
         const { x, y } = xyflow.screenToFlowPosition(pointer, { snapToGrid: false })
-        xyflow.updateEdgeData(id, xyedge => {
-          const cp = (xyedge.data.controlPoints ?? controlPoints).slice()
-          cp[index] = {
-            x: Math.round(x),
-            y: Math.round(y),
-          }
-          return {
-            controlPoints: cp,
-          }
+        const cp = controlPoints.slice()
+        cp[index] = {
+          x: Math.round(x),
+          y: Math.round(y),
+        }
+        diagram.updateEdgeData(id as EdgeId, {
+          controlPoints: cp,
         })
       }
       e.stopPropagation()
@@ -216,14 +214,9 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
       e.stopPropagation()
       // Defer the update to avoid conflict with the pointerup event
       setTimeout(() => {
-        xyflow.updateEdgeData(id as EdgeId, { controlPoints: newControlPoints })
+        diagram.updateEdgeData(id as EdgeId, { controlPoints: newControlPoints })
         diagram.scheduleSaveManualLayout()
       }, 10)
-
-      domNode.removeEventListener('pointerup', onPointerUp, {
-        capture: true,
-      })
-      e.stopPropagation()
     }
 
     domNode.addEventListener('pointerup', onPointerUp, {
@@ -259,42 +252,40 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
     if (e.button !== 2) {
       return
     }
+    const points: VectorImpl[] = [
+      new VectorImpl(sourceX, sourceY),
+      ...controlPoints.map(vector) || [],
+      new VectorImpl(targetX, targetY),
+    ]
 
-    xyflow.updateEdgeData(id, edge => {
-      const points: VectorImpl[] = [
-        new VectorImpl(sourceX, sourceY),
-        ...controlPoints.map(vector) || [],
-        new VectorImpl(targetX, targetY),
-      ]
-
-      let pointer = { x: e.clientX, y: e.clientY }
-      const newPoint = vector(xyflow.screenToFlowPosition(pointer, { snapToGrid: false }))
-
-      let insertionIndex = 0
-      let minDistance = Infinity
-      for (let i = 0; i < points.length - 1; i++) {
-        const a = points[i]!, b = points[i + 1]!
-        const fromCurrentToNext = b.sub(a)
-        const fromCurrentToNew = newPoint.sub(a)
-        const fromNextToNew = newPoint.sub(b)
-
-        // Is pointer above the current segment?
-        if (fromCurrentToNext.dot(fromCurrentToNew) * fromCurrentToNext.dot(fromNextToNew) < 0) {
-          // Calculate distance by approximating edge segment with a staight line
-          const distanceToEdge = Math.abs(fromCurrentToNext.cross(fromCurrentToNew).abs() / fromCurrentToNext.abs())
-
-          if (distanceToEdge < minDistance) {
-            minDistance = distanceToEdge
-            insertionIndex = i
-          }
+    let pointer = { x: e.clientX, y: e.clientY }
+    const newPoint = vector(xyflow.screenToFlowPosition(pointer, { snapToGrid: false }))
+
+    let insertionIndex = 0
+    let minDistance = Infinity
+    for (let i = 0; i < points.length - 1; i++) {
+      const a = points[i]!,
+        b = points[i + 1]!,
+        fromCurrentToNext = b.sub(a),
+        fromCurrentToNew = newPoint.sub(a),
+        fromNextToNew = newPoint.sub(b)
+
+      // Is pointer above the current segment?
+      if (fromCurrentToNext.dot(fromCurrentToNew) * fromCurrentToNext.dot(fromNextToNew) < 0) {
+        // Calculate distance by approximating edge segment with a staight line
+        const distanceToEdge = Math.abs(fromCurrentToNext.cross(fromCurrentToNew).abs() / fromCurrentToNext.abs())
+
+        if (distanceToEdge < minDistance) {
+          minDistance = distanceToEdge
+          insertionIndex = i
         }
       }
+    }
 
-      const newControlPoints = edge.data.controlPoints?.slice() || []
-      newControlPoints.splice(insertionIndex, 0, newPoint)
+    const newControlPoints = controlPoints.slice() || []
+    newControlPoints.splice(insertionIndex, 0, newPoint)
 
-      return { controlPoints: newControlPoints }
-    })
+    diagram.updateEdgeData(id as EdgeId, { controlPoints: newControlPoints })
 
     diagram.scheduleSaveManualLayout()
 
@@ -357,7 +348,7 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
         </EdgeLabelContainer>
       </EdgeContainer>
       {/* Render control points above edge label  */}
-      {enableEdgeEditing && controlPoints.length > 0 && (
+      {enableEdgeEditing && controlPoints.length > 0 && (selected || hovered || isControlPointDragging) && (
         <EdgeLabelRenderer>
           <EdgeContainer
             component="svg"

package/src/likec4diagram/custom/nodes/toolbar/Toolbar.tsx

@@ -1,4 +1,4 @@
-import { Box, Group, Paper, Stack, Text } from '@mantine/core'
+import { Box, Group, Paper, Stack, Text, Tooltip } from '@mantine/core'
 import { useDebouncedValue } from '@mantine/hooks'
 import { type NodeToolbarProps, NodeToolbar } from '@xyflow/react'
 import clsx from 'clsx'
@@ -69,7 +69,7 @@ export function Toolbar({ title, children, nodeProps, ...props }: ToolbarProps)
         withBorder>
         <Stack gap={'6px'}>
           <Box px={'4px'}>
-            <Text c="dimmed" className={styles.toolbarTitle}>{title}</Text>
+            <Text className={styles.toolbarTitle}>{title}</Text>
           </Box>
           <Group gap={4}>
             {children}

package/src/likec4diagram/custom/nodes/toolbar/styles.css.ts

@@ -1,8 +1,13 @@
 import { css } from '@likec4/styles/css'
 
 export const toolbarTitle = css({
+  color: 'mantine.colors.dimmed',
   fontSize: '10px',
   fontWeight: 600,
+  maxWidth: '220px',
   cursor: 'default',
   userSelect: 'all',
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
 })

package/src/likec4diagram/ui/controls/LayoutDriftNotification.tsx

@@ -5,14 +5,13 @@ import {
   HoverCardDropdown,
   HoverCardTarget,
   Notification,
-  Overlay,
   Text,
 } from '@mantine/core'
 import {
   IconAlertTriangle,
 } from '@tabler/icons-react'
 
-// import { mantine } from '../../../theme-vars'
+import { css } from '@likec4/styles/css'
 import { ActionIcon } from './_shared'
 
 export const LayoutDriftNotification = (props: PopoverProps) => (
@@ -22,8 +21,13 @@ export const LayoutDriftNotification = (props: PopoverProps) => (
     closeDelay={100}
     {...props}>
     <HoverCardTarget>
-      <ActionIcon c="orange">
-        <Overlay color={'orange.lightHover'} backgroundOpacity={1} />
+      <ActionIcon
+        color={'orange'}
+        c="orange"
+        className={css({
+          bg: 'mantine.colors.orange.light',
+        })}
+      >
         <IconAlertTriangle />
       </ActionIcon>
     </HoverCardTarget>