@likec4/diagram 1.14.0 → 1.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -23,7 +23,7 @@
   "exports": {
     ".": "./src/index.ts"
   },
-  "packageManager": "yarn@4.5.0",
+  "packageManager": "yarn@4.5.1",
   "scripts": {
     "typecheck": "tsc --noEmit",
     "lint": "run -T eslint src/ --fix",
@@ -31,8 +31,8 @@
   },
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
-    "@likec4/core": "1.14.0",
-    "@mantine/vanilla-extract": "7.13.2",
+    "@likec4/core": "1.15.0",
+    "@mantine/vanilla-extract": "7.13.4",
     "@react-hookz/web": "^24.0.4",
     "@tabler/icons-react": "3.17.0",
     "@vanilla-extract/css": "^1.16.0",
@@ -58,9 +58,9 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@likec4/tsconfig": "1.14.0",
-    "@mantine/core": "7.13.2",
-    "@mantine/hooks": "7.13.2",
+    "@likec4/tsconfig": "1.15.0",
+    "@mantine/core": "7.13.4",
+    "@mantine/hooks": "7.13.4",
     "@types/bezier-js": "^4.1.3",
     "@types/d3-shape": "^3.1.6",
     "@types/react": "^18.3.11",

package/src/LikeC4CustomColors.tsx

@@ -1,12 +1,14 @@
 import { type ThemeColorValues } from '@likec4/core'
 import { useMantineStyleNonce } from '@mantine/core'
+import { deepEqual } from 'fast-equals'
+import { memo } from 'react'
 import { entries } from 'remeda'
 import type { LikeC4CustomColorsProperties } from './LikeC4CustomColors.props'
 import { vars } from './theme-vars'
 
 type CSSVarFunction = `var(--${string})` | `var(--${string}, ${string | number} )`
 
-export function LikeC4CustomColors({ customColors }: LikeC4CustomColorsProperties) {
+export const LikeC4CustomColors = memo<LikeC4CustomColorsProperties>(({ customColors }) => {
   function toStyle(name: String, colorValues: ThemeColorValues): String {
     const rules = new Array<String>(
       ...entries(colorValues.elements).map(([key, value]) => `${stripCssVarReference(vars.element[key])}: ${value};`),
@@ -34,7 +36,8 @@ export function LikeC4CustomColors({ customColors }: LikeC4CustomColorsPropertie
 
   return (
     <>
-      <style type="text/css" dangerouslySetInnerHTML={{ __html: styles }} {...(nonce && { nonce })} />
+      <style type="text/css" dangerouslySetInnerHTML={{ __html: styles }} nonce={nonce} />
     </>
   )
-}
+}, deepEqual)
+LikeC4CustomColors.displayName = 'LikeC4CustomColors'

package/src/LikeC4Diagram.tsx

@@ -67,10 +67,10 @@ export function LikeC4Diagram({
     initialWidth: initialWidth ?? view.bounds.width,
     initialHeight: initialHeight ?? view.bounds.height
   })
-  if (readonly !== true && !!where) {
-    console.warn('where filter is only supported in readonly mode')
-  }
   useEffect(() => {
+    if (readonly !== true && where != null) {
+      console.warn('Ignore filter, supported in readonly mode only\n', { where })
+    }
     if (hasLikec4model) {
       return
     }
@@ -80,7 +80,7 @@ export function LikeC4Diagram({
     if (enableRelationshipsBrowser) {
       console.warn('Invalid enableRelationshipsBrowser=true, requires LikeC4ModelProvider')
     }
-  }, [])
+  })
 
   return (
     <EnsureMantine>
@@ -111,7 +111,8 @@ export function LikeC4Diagram({
             enableDynamicViewWalkthrough={enableDynamicViewWalkthrough}
             enableFocusMode={enableFocusMode}
             enableRelationshipsBrowser={enableRelationshipsBrowser && hasLikec4model}
-            whereFilter={readonly !== true ? (where ?? null) : null}
+            // Apply where filter only in readonly mode
+            whereFilter={readonly ? (where ?? null) : null}
             renderIcon={renderIcon ?? null}
             onCanvasClick={onCanvasClick ?? null}
             onCanvasContextMenu={onCanvasContextMenu ?? null}

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

@@ -346,7 +346,7 @@ export const RelationshipsXYFlow = memo<{ subjectId: Fqn }>(function Relationshi
           </Button>
           <Space w={2} />
           <Group gap={'xs'} pos={'relative'} wrap="nowrap" flex={'1 0 auto'}>
-            <Box fz={'sm'} fw={'400'} style={{ whiteSpace: 'nowrap' }}>Relationships of</Box>
+            <Box fz={'sm'} fw={'400'} style={{ whiteSpace: 'nowrap', userSelect: 'none' }}>Relationships of</Box>
             <Box flex={'1 0 auto'}>
               <SelectElement
                 scope={scope}

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

@@ -63,7 +63,7 @@ const Sizes = {
   // 0 means no spacer
   spacerHeight: 0,
 
-  compoundLabelHeight: 5
+  compoundLabelHeight: 1
 }
 
 export const ZIndexes = {
@@ -91,12 +91,11 @@ function createGraph() {
   columns.reduce((prev, column) => {
     const c = graphColumn(column)
     g.setNode(c.id, {})
-    g.setNode(c.anchor, { width: 40, height: 5 })
+    g.setNode(c.anchor, { width: 40, height: 2 })
     g.setParent(c.anchor, c.id)
     if (prev) {
       g.setEdge(prev, c.anchor, {
-        width: 0,
-        weight: 10
+        width: 0
       })
     }
     return c.anchor
@@ -258,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

package/src/state/DiagramContext.tsx

@@ -3,6 +3,7 @@ import { useMergedRef } from '@mantine/hooks'
 import { deepEqual, shallowEqual } from 'fast-equals'
 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'
@@ -39,7 +40,7 @@ export function DiagramContextProvider({
       xyflow,
       view,
       getContainer,
-      whereFilter: structuredClone(whereFilter),
+      whereFilter: clone(whereFilter),
       ...props
     })
   }
@@ -59,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)
     },

package/src/state/diagram-to-xyflow.ts

@@ -1,6 +1,7 @@
-import type { DiagramEdge, DiagramNode, DiagramView, Fqn } from '@likec4/core'
+import { type DiagramEdge, DiagramNode, type DiagramView, ElementKind, type Fqn } from '@likec4/core'
 import { nonNullable, whereOperatorAsPredicate } from '@likec4/core'
 import { hasAtLeast } from 'remeda'
+import type { UnionToIntersection } from 'type-fest'
 import type { WhereOperator } from '../LikeC4Diagram.props'
 import { ZIndexes } from '../xyflow/const'
 import type { XYFlowEdge, XYFlowNode } from '../xyflow/types'
@@ -55,7 +56,7 @@ export function diagramViewToXYFlowData(
   let next: typeof traverse[0] | undefined
   while ((next = traverse.shift())) {
     const { node, parent } = next
-    const isCompound = hasAtLeast(node.children, 1)
+    const isCompound = hasAtLeast(node.children, 1) || node.kind == ElementKind.Group
     if (isCompound) {
       traverse.push(...node.children.map(child => ({ node: nodeById(child), parent: node })))
     }
@@ -69,35 +70,45 @@ export function diagramViewToXYFlowData(
       position.y -= parent.position[1]
     }
 
-    // const outEdges = node.outEdges.map(e => view.edges.find(edge => edge.id === e)).filter(Boolean)
-    // const inEdges = node.inEdges.map(e => view.edges.find(edge => edge.id === e)).filter(Boolean)
-
     const id = ns + node.id
-    const draggable = opts.draggable
-    xynodes.push({
+
+    const base: Omit<UnionToIntersection<XYFlowNode>, 'data'> = {
       id,
-      type: isCompound ? 'compound' : 'element',
-      data: {
-        fqn: node.id,
-        element: node
-      },
-      draggable,
-      selectable: opts.selectable,
+      draggable: opts.draggable,
+      selectable: opts.selectable && node.kind !== ElementKind.Group,
       focusable: opts.selectable && !isCompound,
       deletable: false,
       position,
       zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
       width: node.width,
       height: node.height,
-      hidden: !visiblePredicate(node),
-      // parentId: parent ? ns + parent.id : null,
+      hidden: node.kind !== ElementKind.Group && !visiblePredicate(node),
       ...(parent && {
         parentId: ns + parent.id
-      }),
-      ...(isCompound && {
-        dragHandle: '.likec4-compound-title'
       })
-    })
+    }
+
+    xynodes.push(
+      isCompound
+        ? {
+          ...base,
+          type: 'compound',
+          data: {
+            fqn: node.id,
+            isViewGroup: node.kind === ElementKind.Group,
+            element: node
+          },
+          dragHandle: '.likec4-compound-title'
+        }
+        : {
+          ...base,
+          type: 'element',
+          data: {
+            fqn: node.id,
+            element: node
+          }
+        }
+    )
   }
 
   for (const edge of view.edges) {

package/src/state/diagramStore.ts

@@ -395,7 +395,7 @@ export function createDiagramStore(props: DiagramInitialState) {
               selectable: nodesSelectable
             })
 
-            update.xynodes = update.xynodes.map(update => {
+            update.xynodes = update.xynodes.map((update) => {
               const existing = xynodes.find(n => n.id === update.id)
               if (
                 existing
@@ -403,18 +403,18 @@ export function createDiagramStore(props: DiagramInitialState) {
                 && eq(existing.parentId ?? null, update.parentId ?? null)
               ) {
                 if (
-                  existing.hidden === update.hidden
-                  && existing.width === update.width
+                  existing.width === update.width
                   && existing.height === update.height
+                  && eq(existing.hidden ?? false, update.hidden ?? false)
                   && eq(existing.position, update.position)
-                  && eq(existing.data.element, update.data.element)
+                  && eq(existing.data, update.data)
                 ) {
                   return existing
                 }
                 return {
                   ...existing,
                   ...update
-                }
+                } as XYFlowNode
               }
               return update
             })
@@ -425,7 +425,7 @@ export function createDiagramStore(props: DiagramInitialState) {
                 const existing = xyedges.find(n => n.id === update.id)
                 if (existing) {
                   if (
-                    existing.hidden === update.hidden
+                    eq(existing.hidden ?? false, update.hidden ?? false)
                     && eq(existing.data.label, update.data.label)
                     && eq(existing.data.controlPoints, update.data.controlPoints)
                     && eq(existing.data.edge, update.data.edge)
@@ -1065,7 +1065,12 @@ export function createDiagramStore(props: DiagramInitialState) {
             const { nodeLookup, parentLookup } = xystore.getState()
 
             const selectedNodes = new Set(nodeLookup.values().filter(n => n.selected).map(n => n.id))
-            const nodesToAlign = new Set(selectedNodes.difference(new Set(parentLookup.keys())))
+            const nodesToAlign = [...selectedNodes.difference(new Set(parentLookup.keys()))]
+
+            if (!hasAtLeast(nodesToAlign, 2)) {
+              console.warn('At least 2 nodes must be selected to align')
+              return
+            }
             const constraints = createLayoutConstraints(xystore, nodesToAlign)
 
             let getEdgePosition: (nodes: InternalNode<XYFlowNode>[]) => number

package/src/xyflow/edges/RelationshipEdge.tsx

@@ -137,7 +137,6 @@ const curve = d3line<XYPosition>()
 export const RelationshipEdge = memo<EdgeProps<XYFlowEdge>>(function RelationshipEdgeR({
   id,
   data,
-  selected,
   sourceX,
   sourceY,
   targetX,
@@ -438,10 +437,17 @@ export const RelationshipEdge = memo<EdgeProps<XYFlowEdge>>(function Relationshi
   const MarkerStart = markerStartName ? EdgeMarkers[markerStartName] : null
   const MarkerEnd = markerEndName ? EdgeMarkers[markerEndName] : null
 
-  let labelZIndex = 1 + (isHovered ? ZIndexes.Element : (edgeLookup.get(id)!.zIndex ?? ZIndexes.Edge))
-  if (isEdgePathEditable && selected) {
+  const edgeZIndex = edgeLookup.get(id)!.zIndex ?? ZIndexes.Edge
+  let labelZIndex
+  if (isEdgePathEditable) {
     // Move label below ControlPoints, otherwise they don't capture events
-    labelZIndex = (edgeLookup.get(id)!.zIndex ?? ZIndexes.Edge) - 1
+    labelZIndex = edgeZIndex - 1
+  }
+  else if (isHovered) {
+    // Move above the elements
+    labelZIndex = ZIndexes.Element + 1
+  } else {
+    labelZIndex = edgeZIndex + 1
   }
 
   return (

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

@@ -122,6 +122,7 @@ export const title = style({
   paddingLeft: 14,
   paddingTop: 13,
   paddingBottom: 6,
+  minHeight: 30,
   mixBlendMode: 'screen',
   selectors: {
     [`:where(.react-flow__node.draggable) &`]: {

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

@@ -1,4 +1,4 @@
-import type { ThemeColor } from '@likec4/core'
+import { type ThemeColor } from '@likec4/core'
 import { ActionIcon, Box, Text, Tooltip } from '@mantine/core'
 import { useDebouncedValue } from '@mantine/hooks'
 import { IconTransform, IconZoomScan } from '@tabler/icons-react'
@@ -127,14 +127,12 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
   selected = false,
   dragging = false,
   data: {
-    element: {
-      color,
-      style,
-      depth = 1,
-      ...element
-    }
+    isViewGroup,
+    element
   }
 }) {
+  const { depth, style, color } = element
+  const isNotViewGroup = !isViewGroup
   const opacity = clamp((style.opacity ?? 100) / 100, {
     min: 0,
     max: 1
@@ -164,9 +162,11 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
     hasOnNavigateTo: !!s.onNavigateTo,
     enableRelationshipsMode: s.enableRelationshipsBrowser
   }))
-  const isNavigable = !!element.navigateTo && hasOnNavigateTo
+  // If this is a view group, we don't want to show the navigate button
+  const isNavigable = isNotViewGroup && !!element.navigateTo && hasOnNavigateTo
+  const hasRelationshipsBrowser = isNotViewGroup && enableRelationshipsMode
 
-  const _isToolbarVisible = isEditable && (isHovered || (import.meta.env.DEV && selected))
+  const _isToolbarVisible = isNotViewGroup && isEditable && (isHovered || (import.meta.env.DEV && selected))
   const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, _isToolbarVisible ? 500 : 300)
 
   const [animateVariants, animateHandlers] = useFramerAnimateVariants()
@@ -263,7 +263,7 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
             component="div"
             className={clsx(
               css.title,
-              (isNavigable || enableRelationshipsMode) && css.titleWithNavigation,
+              (isNavigable || hasRelationshipsBrowser) && css.titleWithNavigation,
               'likec4-compound-title'
             )}>
             {element.title}
@@ -286,7 +286,7 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
             <IconZoomScan stroke={1.8} style={{ width: '75%' }} />
           </ActionIcon>
         )}
-        {enableRelationshipsMode && (
+        {hasRelationshipsBrowser && (
           <Tooltip
             fz="xs"
             color="dark"

package/src/xyflow/types.ts

@@ -11,6 +11,7 @@ export type ElementXYFlowNode = Node<{
 
 export type CompoundXYFlowNode = Node<{
   fqn: Fqn
+  isViewGroup: boolean
   element: DiagramNode
 }, 'compound'>
 

package/src/xyflow/useLayoutConstraints.ts

@@ -1,8 +1,8 @@
-import { invariant, isAncestor, nonNullable } from '@likec4/core'
+import { invariant, isAncestor, type NodeId, type NonEmptyArray, nonNullable } from '@likec4/core'
 import type { InternalNode, NodeChange, ReactFlowProps, XYPosition } from '@xyflow/react'
 import { getNodeDimensions } from '@xyflow/system'
 import { useMemo, useRef } from 'react'
-import { isNullish } from 'remeda'
+import { filter, hasAtLeast, isNullish, map, pipe } from 'remeda'
 import { useDiagramStoreApi } from '../hooks'
 import { type XYStoreApi } from '../hooks/useXYFlow'
 import type { XYFlowNode } from './types'
@@ -99,11 +99,27 @@ type NodePositionUpdater = (
 
 export function createLayoutConstraints(
   xyflowApi: XYStoreApi,
-  editingNodeIds: Set<string>
+  editingNodeIds: NonEmptyArray<string>
 ) {
   const { parentLookup, nodeLookup } = xyflowApi.getState()
   const rects = new Map<string, Leaf | Compound>()
 
+  const ancestorsOf = (nodeId: string) => {
+    const ancestors = [] as string[]
+    const xynode = nodeLookup.get(nodeId)
+    let parent = xynode?.parentId
+    let parentNode: InternalNode<XYFlowNode> | undefined
+    while (parent && (parentNode = nodeLookup.get(parent))) {
+      ancestors.push(parentNode.id as NodeId)
+      parent = parentNode.parentId
+    }
+    return ancestors
+  }
+
+  const ancestorsOfDraggingNodes = new Set(
+    editingNodeIds.flatMap(ancestorsOf)
+  )
+
   const traverse = new Array<{ xynode: InternalNode<XYFlowNode>; parent: Compound | null }>()
 
   for (const [, xynode] of nodeLookup) {
@@ -117,11 +133,11 @@ export function createLayoutConstraints(
 
   while (traverse.length > 0) {
     const { xynode, parent } = traverse.shift()!
-    const isEditing = editingNodeIds.has(xynode.id)
+    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'
-      && editingNodeIds.values().some(x => isAncestor(xynode.id, x))
+      && ancestorsOfDraggingNodes.has(xynode.id)
 
     const rect = shouldTraverse ? new Compound(xynode, parent) : new Leaf(xynode, parent)
     rects.set(xynode.id, rect)
@@ -157,7 +173,6 @@ export function createLayoutConstraints(
           maxY: -Infinity
         })
 
-
         r.minX = childrenBB.minX - Rect.LeftPadding
         r.minY = childrenBB.minY - Rect.TopPadding
         r.maxX = childrenBB.maxX + Rect.RightPadding
@@ -200,11 +215,14 @@ export function createLayoutConstraints(
     animationFrameId ??= requestAnimationFrame(() => {
       animationFrameId = null
       updater(
-        [
-          ...editingNodeIds.values()
-            .filter(id => rects.has(id) && nodeLookup.has(id))
-            .map(id => ({ rect: nonNullable(rects.get(id)), node: nodeLookup.get(id)! }))
-        ]
+        pipe(
+          editingNodeIds,
+          filter(id => rects.has(id) && nodeLookup.has(id)),
+          map(id => ({
+            rect: nonNullable(rects.get(id)),
+            node: nonNullable(nodeLookup.get(id))
+          }))
+        )
       )
       updateXYFlowNodes()
     })
@@ -229,17 +247,18 @@ export function useLayoutConstraints(): LayoutConstraints {
       const { nodeLookup } = xystore.getState()
       cancelSaveManualLayout()
 
-      const draggingNodes = new Set(
-        nodeLookup.values()
-          .filter(x => x.dragging === true || x.id === xynode.id || x.selected)
-          .filter(x => x.draggable === true)
-          .map(x => x.id)
+      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)
       )
-      solverRef.current = createLayoutConstraints(xystore, draggingNodes)
+      if (hasAtLeast(draggingNodes, 1)) {
+        solverRef.current = createLayoutConstraints(xystore, draggingNodes)
+      }
     },
     onNodeDrag: () => {
-      invariant(solverRef.current, 'solverRef.current should be defined')
-      solverRef.current.onMove((nodes) => {
+      solverRef.current?.onMove((nodes) => {
         nodes.forEach(({ rect, node }) => {
           rect.positionAbsolute = node.internals.positionAbsolute
         })