@likec4/diagram 1.27.0 → 1.27.2

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>

package/src/likec4diagram/ui/notation/NotationPanel.css.ts

@@ -98,6 +98,6 @@ export const shapeBadge = css({
   ['--badge-padding-x']: '3px',
   ['--badge-height']: '13.5px',
   ['--badge-lh']: '1',
-  // ['--badge-bg']: vars.element.fill,
-  // ['--badge-color']: vars.element.hiContrast
+  ['--badge-bg']: '{colors.likec4.palette.fill}',
+  ['--badge-color']: '{colors.likec4.palette.hiContrast}',
 })

package/src/likec4diagram/ui/notation/NotationPanel.tsx

@@ -54,13 +54,14 @@ const ElementNotation = ({ value }: { value: ElementNotationData }) => {
           likec4Palette: color,
         }),
       )}
+      data-likec4-color={color}
       onMouseEnter={() => {
         setOnlyKind(null)
-        // diagramStore.getState().highlightByElementNotation(value)
+        diagram.highlightNotation(value)
       }}
       onMouseLeave={() => {
         setOnlyKind(null)
-        // diagramStore.setState({ dimmed: new Set() })
+        diagram.unhighlightNotation()
       }}
     >
       <Group
@@ -88,17 +89,18 @@ const ElementNotation = ({ value }: { value: ElementNotationData }) => {
             {value.kinds.map((kind) => (
               <Badge
                 key={kind}
-                className={styles.shapeBadge}
+                className={cx(
+                  styles.shapeBadge,
+                )}
                 onMouseEnter={() => {
                   setOnlyKind(kind)
-                  // diagramStore.getState().highlightByElementNotation(value, kind)
+                  diagram.highlightNotation(value, kind)
                 }}
                 onMouseLeave={() => {
                   setOnlyKind(null)
-                  // diagramStore.getState().highlightByElementNotation(value)
+                  diagram.highlightNotation(value)
                 }}
                 opacity={isNonNullish(onlyKind) && onlyKind !== kind ? 0.25 : 1}
-                color={isNonNullish(onlyKind) && onlyKind !== kind ? 'gray' : token('colors.likec4.palette.fill')}
               >
                 {kind}
               </Badge>

package/src/likec4diagram/useLayoutConstraints.ts

@@ -58,11 +58,11 @@ abstract class Rect {
       y: positionAbsolute.y - parentPosition.y,
     }
   }
-  protected abstract parent: Compound | null
+  protected abstract parent: CompoundRect | null
 
   constructor(
     xynode: InternalNode,
-    parent: Compound | null = null,
+    parent: CompoundRect | null = null,
   ) {
     this.id = xynode.id
 
@@ -82,12 +82,12 @@ abstract class Rect {
   }
 }
 
-class Compound extends Rect {
+class CompoundRect extends Rect {
   public readonly children = [] as Rect[]
 
   constructor(
     xynode: InternalNode,
-    public readonly parent: Compound | null = null,
+    public readonly parent: CompoundRect | null = null,
   ) {
     super(xynode, parent)
   }
@@ -96,22 +96,18 @@ class Compound extends Rect {
 class Leaf extends Rect {
   constructor(
     xynode: InternalNode,
-    public readonly parent: Compound | null = null,
+    public readonly parent: CompoundRect | null = null,
   ) {
     super(xynode, parent)
   }
 }
 
-type NodePositionUpdater = (
-  nodes: Array<{ rect: Rect | Compound; node: InternalNode }>,
-) => void
-
 export function createLayoutConstraints(
   xyflowApi: XYStoreApi,
   editingNodeIds: NonEmptyArray<string>,
 ) {
   const { parentLookup, nodeLookup } = xyflowApi.getState()
-  const rects = new Map<string, Leaf | Compound>()
+  const rects = new Map<string, Leaf | CompoundRect>()
 
   const ancestorsOf = (nodeId: string) => {
     const ancestors = [] as string[]
@@ -129,36 +125,31 @@ export function createLayoutConstraints(
     editingNodeIds.flatMap(ancestorsOf),
   )
 
-  const traverse = new Array<{ xynode: InternalNode; parent: Compound | null }>()
-
-  for (const [, xynode] of nodeLookup) {
-    if (isNullish(xynode.parentId)) {
-      traverse.push({
-        xynode,
-        parent: null,
-      })
-    }
-  }
+  const traverse: Array<{ xynode: InternalNode; parent: CompoundRect | null }> = [...nodeLookup.values()].flatMap(x =>
+    !x.parentId ? { xynode: x, parent: null } : []
+  )
 
   while (traverse.length > 0) {
     const { xynode, parent } = traverse.shift()!
     const isEditing = editingNodeIds.includes(xynode.id)
 
     // Traverse children if the node is a compound, not dragging, and is an ancestor of the dragging node
-    const shouldTraverse = !isEditing &&
-      (xynode.type === 'compound-element' || xynode.type === 'compound-deployment' || xynode.type === 'view-group')
+    const shouldTraverse = !isEditing
+      && xynode.type !== 'element'
+      && xynode.type !== 'deployment'
       && ancestorsOfDraggingNodes.has(xynode.id)
 
-    const rect = shouldTraverse ? new Compound(xynode, parent) : new Leaf(xynode, parent)
-    rects.set(xynode.id, rect)
-
     if (shouldTraverse) {
+      const rect = new CompoundRect(xynode, parent)
+      rects.set(xynode.id, rect)
       parentLookup.get(xynode.id)?.forEach(child => {
         traverse.push({
           xynode: child,
-          parent: rect as Compound,
+          parent: rect as CompoundRect,
         })
       })
+    } else {
+      rects.set(xynode.id, new Leaf(xynode, parent))
     }
   }
 
@@ -166,28 +157,32 @@ export function createLayoutConstraints(
   applyConstraints(rectsToUpdate)
 
   function applyConstraints(targets: Rect[]) {
-    targets
-      .filter(x => x instanceof Compound)
-      .forEach((r) => {
-        applyConstraints(r.children)
-
-        const childrenBB = r.children.reduce((acc, r) => ({
-          minX: Math.min(acc.minX, r.minX),
-          minY: Math.min(acc.minY, r.minY),
-          maxX: Math.max(acc.maxX, r.maxX),
-          maxY: Math.max(acc.maxY, r.maxY),
-        }), {
-          minX: Infinity,
-          minY: Infinity,
-          maxX: -Infinity,
-          maxY: -Infinity,
-        })
+    for (const r of targets) {
+      if (!(r instanceof CompoundRect)) {
+        continue
+      }
 
-        r.minX = childrenBB.minX - Rect.LeftPadding
-        r.minY = childrenBB.minY - Rect.TopPadding
-        r.maxX = childrenBB.maxX + Rect.RightPadding
-        r.maxY = childrenBB.maxY + Rect.BottomPadding
-      })
+      applyConstraints(r.children)
+
+      const childrenBB = {
+        minX: Infinity,
+        minY: Infinity,
+        maxX: -Infinity,
+        maxY: -Infinity,
+      }
+
+      for (const child of r.children) {
+        childrenBB.minX = Math.min(childrenBB.minX, child.minX)
+        childrenBB.minY = Math.min(childrenBB.minY, child.minY)
+        childrenBB.maxX = Math.max(childrenBB.maxX, child.maxX)
+        childrenBB.maxY = Math.max(childrenBB.maxY, child.maxY)
+      }
+
+      r.minX = childrenBB.minX - Rect.LeftPadding
+      r.minY = childrenBB.minY - Rect.TopPadding
+      r.maxX = childrenBB.maxX + Rect.RightPadding
+      r.maxY = childrenBB.maxY + Rect.BottomPadding
+    }
   }
 
   function updateXYFlowNodes() {
@@ -201,7 +196,7 @@ export function createLayoutConstraints(
           position: r.position,
           positionAbsolute: r.positionAbsolute,
         })
-        if (r instanceof Compound) {
+        if (r instanceof CompoundRect) {
           acc.push({
             id: r.id,
             type: 'dimensions',
@@ -216,29 +211,24 @@ export function createLayoutConstraints(
 
   let animationFrameId: number | null = null
 
-  function onMove(
-    updater: NodePositionUpdater,
-  ) {
+  function onMove() {
     if (rectsToUpdate.length === 0) {
       return
     }
     animationFrameId ??= requestAnimationFrame(() => {
       animationFrameId = null
-      updater(
-        pipe(
-          editingNodeIds,
-          filter(id => rects.has(id) && nodeLookup.has(id)),
-          map(id => ({
-            rect: nonNullable(rects.get(id)),
-            node: nonNullable(nodeLookup.get(id)),
-          })),
-        ),
-      )
+      const { nodeLookup } = xyflowApi.getState()
+      for (const id of editingNodeIds) {
+        const rect = nonNullable(rects.get(id))
+        const node = nonNullable(nodeLookup.get(id))
+        rect.positionAbsolute = node.internals.positionAbsolute
+      }
       updateXYFlowNodes()
     })
   }
 
   return {
+    rects: rects as ReadonlyMap<string, Leaf | CompoundRect>,
     updateXYFlowNodes,
     onMove,
   }
@@ -256,32 +246,37 @@ export function useLayoutConstraints(): LayoutConstraints {
   const xystore = useXYStoreApi()
   const diagram = useDiagram()
   const solverRef = useRef<ReturnType<typeof createLayoutConstraints>>(undefined)
-  return useMemo((): LayoutConstraints => ({
-    onNodeDragStart: (_event, xynode) => {
-      diagram.cancelSaveManualLayout()
-      const { nodeLookup } = xystore.getState()
-      const draggingNodes = pipe(
-        Array.from(nodeLookup.values()),
-        filter(n => n.dragging === true || n.id === xynode.id || n.selected === true),
-        filter(n => n.draggable !== false),
-        map(x => x.id),
-      )
-      if (hasAtLeast(draggingNodes, 1)) {
-        solverRef.current = createLayoutConstraints(xystore, draggingNodes)
-      }
-    },
-    onNodeDrag: () => {
-      solverRef.current?.onMove((nodes) => {
-        nodes.forEach(({ rect, node }) => {
-          rect.positionAbsolute = node.internals.positionAbsolute
-        })
-      })
-    },
-    onNodeDragStop: () => {
-      solverRef.current?.updateXYFlowNodes()
-      diagram.scheduleSaveManualLayout()
-      // diagramApi.getState().scheduleSaveManualLayout()
-      solverRef.current = undefined
-    },
-  }), [xystore, diagram])
+  return useMemo((): LayoutConstraints => {
+    let wasPending = false
+    const initial = { x: 0, y: 0 }
+    let moved = false
+    return ({
+      onNodeDragStart: (_event, xynode) => {
+        wasPending = diagram.cancelSaveManualLayout()
+        const { nodeLookup } = xystore.getState()
+        const draggingNodes = pipe(
+          Array.from(nodeLookup.values()),
+          filter(n => n.draggable !== false && (n.dragging === true || n.id === xynode.id || n.selected === true)),
+        )
+        if (hasAtLeast(draggingNodes, 1)) {
+          solverRef.current = createLayoutConstraints(xystore, map(draggingNodes, x => x.id))
+        }
+        initial.x = _event.clientX
+        initial.y = _event.clientY
+        moved = false
+      },
+      onNodeDrag: (_event) => {
+        moved = Math.abs(_event.clientX - initial.x) > 4 || Math.abs(_event.clientY - initial.y) > 4
+        solverRef.current?.onMove()
+      },
+      onNodeDragStop: (_event) => {
+        moved = Math.abs(_event.clientX - initial.x) > 4 || Math.abs(_event.clientY - initial.y) > 4
+        console.log('moved', moved)
+        if (wasPending || moved) {
+          diagram.scheduleSaveManualLayout()
+        }
+        solverRef.current = undefined
+      },
+    })
+  }, [xystore, diagram])
 }

package/src/overlays/Overlays.tsx

@@ -2,7 +2,7 @@ import { nonexhaustive } from '@likec4/core'
 import { Box, Button, Code, Group, Notification, ScrollAreaAutosize } from '@mantine/core'
 import { IconX } from '@tabler/icons-react'
 import { useSelector } from '@xstate/react'
-import { AnimatePresence, LayoutGroup, useReducedMotion } from 'framer-motion'
+import { AnimatePresence, LayoutGroup, useReducedMotion, useReducedMotionConfig } from 'framer-motion'
 import { animate } from 'framer-motion/dom'
 import { memo, useEffect, useMemo } from 'react'
 import { type FallbackProps, ErrorBoundary } from 'react-error-boundary'
@@ -83,7 +83,7 @@ export const Overlays = memo(({ overlaysActorRef }: { overlaysActorRef: Overlays
     xyflowDomNode,
   ])
   const overlays = useSelector(overlaysActorRef, selectOverlays, compareSelectOverlays)
-  const isMotionReduced = useReducedMotion() ?? false
+  const isMotionReduced = useReducedMotionConfig() ?? false
 
   const isActiveOverlay = overlays.length > 0
 
@@ -102,12 +102,13 @@ export const Overlays = memo(({ overlaysActorRef }: { overlaysActorRef: Overlays
     overlaysActorRef.send({ type: 'close', actorId: actorRef.id })
   }
 
-  const overlaysReact = overlays.map((overlay) => {
+  const overlaysReact = overlays.map((overlay, index) => {
     switch (overlay.type) {
       case 'relationshipsBrowser':
         return (
           <Overlay
             key={overlay.actorRef.sessionId}
+            overlayLevel={Math.min(index, 3) as 0 | 1 | 2 | 3}
             onClose={() => close(overlay.actorRef)}>
             <RelationshipsBrowser actorRef={overlay.actorRef} />
           </Overlay>
@@ -115,6 +116,7 @@ export const Overlays = memo(({ overlaysActorRef }: { overlaysActorRef: Overlays
       case 'relationshipDetails':
         return (
           <Overlay
+            overlayLevel={Math.min(index, 3) as 0 | 1 | 2 | 3}
             key={overlay.actorRef.sessionId}
             onClose={() => close(overlay.actorRef)}>
             <RelationshipDetails actorRef={overlay.actorRef} />