@likec4/diagram 1.26.2 → 1.27.1

package/src/likec4diagram/DiagramXYFlow.tsx

@@ -1,12 +1,12 @@
 import { type EdgeId, type NodeId, nonNullable } from '@likec4/core'
-import { useCallbackRef } from '@mantine/hooks'
-import clsx from 'clsx'
-import { shallowEqual } from 'fast-equals'
+import { cx } from '@likec4/styles/css'
+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 type { EnforceOptional } from 'type-fest/source/enforce-optional'
 import { BaseXYFlow } from '../base/BaseXYFlow'
 import { useDiagramEventHandlers } from '../context'
-import { ReduceGraphicsViewportListener } 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,
@@ -41,22 +41,29 @@ const equalsXYProps = (a: ReturnType<typeof selectXYProps>, b: ReturnType<typeof
   a.enableReadOnly === b.enableReadOnly &&
   shallowEqual(a.nodes, b.nodes) &&
   shallowEqual(a.edges, b.edges) &&
-  shallowEqual(a.viewport, b.viewport)
+  shallowEqual(a.viewport ?? null, b.viewport ?? null)
 
-type Picked = EnforceOptional<
+export type LikeC4DiagramXYFlowProps = PropsWithChildren<
   Pick<
     LikeC4DiagramProperties,
     | 'background'
     | 'nodesDraggable'
     | 'nodesSelectable'
+    | 'reactFlowProps'
   >
 >
-export type LikeC4DiagramXYFlowProps = PropsWithChildren<Required<Picked>>
+
+const compareProps = <T extends LikeC4DiagramXYFlowProps>(a: T, b: T): boolean =>
+  a.nodesDraggable === b.nodesDraggable &&
+  a.nodesSelectable === b.nodesSelectable &&
+  deepEqual(a.background, b.background) &&
+  deepEqual(a.reactFlowProps ?? {}, b.reactFlowProps ?? {})
 
 export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({
-  background,
-  nodesDraggable,
-  nodesSelectable,
+  background = 'dots',
+  nodesDraggable = false,
+  nodesSelectable = false,
+  reactFlowProps = {},
   children,
 }) => {
   const diagram = useDiagram()
@@ -79,19 +86,43 @@ export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({
     onCanvasDblClick,
   } = useDiagramEventHandlers()
 
-  const notReadOnly = !enableReadOnly
-
-  const layoutConstraints = useLayoutConstraints()
-
-  const onViewportResize = useCallbackRef(() => {
-    diagram.send({ type: 'xyflow.resized' })
-  })
+  const notReadOnly = !enableReadOnly,
+    isReducedGraphics = useIsReducedGraphics(),
+    layoutConstraints = useLayoutConstraints(),
+    $isPanning = usePanningAtom(),
+    isPanning = useTimeout(() => {
+      if (!$isPanning.get()) {
+        $isPanning.set(true)
+      }
+    }, isReducedGraphics ? 150 : 350),
+    notPanning = useDebouncedCallback(() => {
+      isPanning.clear()
+      if ($isPanning.get()) {
+        $isPanning.set(false)
+      }
+    }, 120),
+    onMove: OnMove = useCallbackRef((event) => {
+      if (!event) {
+        return
+      }
+      if (!$isPanning.get()) {
+        isPanning.start()
+      }
+      notPanning()
+    }),
+    onMoveEnd: OnMoveEnd = useCallbackRef((event, viewport) => {
+      notPanning.flush()
+      diagram.send({ type: 'xyflow.viewportMoved', viewport, manually: !!event })
+    }),
+    onViewportResize = useCallbackRef(() => {
+      diagram.send({ type: 'xyflow.resized' })
+    })
 
   return (
     <BaseXYFlow<Types.Node, Types.Edge>
       nodes={nodes}
       edges={edges}
-      className={clsx(initialized ? 'initialized' : 'not-initialized')}
+      className={cx(initialized ? 'initialized' : 'not-initialized')}
       nodeTypes={nodeTypes}
       edgeTypes={edgeTypes}
       onNodesChange={useCallbackRef((changes) => {
@@ -124,10 +155,34 @@ export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({
         diagram.send({ type: 'xyflow.paneDblClick' })
         onCanvasDblClick?.(e as any)
       })}
-      onMoveEnd={useCallbackRef((event, viewport) => {
-        // if event is present, the move was triggered by user
-        diagram.send({ type: 'xyflow.viewportMoved', viewport, manually: !!event })
+      onNodeMouseEnter={useCallbackRef((_event, node) => {
+        _event.stopPropagation()
+        if (!node.data.hovered) {
+          diagram.send({ type: 'xyflow.nodeMouseEnter', node })
+        }
+      })}
+      onNodeMouseLeave={useCallbackRef((_event, node) => {
+        _event.stopPropagation()
+        if (node.data.hovered) {
+          diagram.send({ type: 'xyflow.nodeMouseLeave', node })
+        }
       })}
+      onEdgeMouseEnter={useCallbackRef((_event, edge) => {
+        _event.stopPropagation()
+        if (!edge.data.hovered) {
+          diagram.send({ type: 'xyflow.edgeMouseEnter', edge })
+        }
+      })}
+      onEdgeMouseLeave={useCallbackRef((_event, edge) => {
+        _event.stopPropagation()
+        if (edge.data.hovered) {
+          diagram.send({ type: 'xyflow.edgeMouseLeave', edge })
+        }
+      })}
+      {...props.pannable && {
+        onMove,
+      }}
+      onMoveEnd={onMoveEnd}
       onInit={useCallbackRef((instance) => {
         diagram.send({ type: 'xyflow.init', instance })
       })}
@@ -154,10 +209,11 @@ export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({
       nodesDraggable={notReadOnly && nodesDraggable}
       nodesSelectable={nodesSelectable}
       {...(notReadOnly && nodesDraggable && layoutConstraints)}
-      {...props}>
-      <ReduceGraphicsViewportListener />
-      <DiagramUI />
+      {...props}
+      {...reactFlowProps}>
+      <DiagramUI key={'DiagramUI'} />
       {children}
     </BaseXYFlow>
   )
-}, shallowEqual)
+}, compareProps)
+LikeC4DiagramXYFlow.displayName = 'LikeC4DiagramXYFlow'

package/src/likec4diagram/custom/edges/NotePopover.css.ts

@@ -1,27 +1,21 @@
-import { style } from '@vanilla-extract/css'
-import { mantine } from '../../../theme-vars'
+import { css } from '@likec4/styles/css'
+// import { mantine } from '../../../theme-vars'
 
-export const edgeNoteCloseButton = style({
+export const edgeNoteCloseButton = css({
   position: 'absolute',
   top: 1,
   right: 1,
   zIndex: 9,
 })
 
-export const edgeNoteText = style({
+export const edgeNoteText = css({
   userSelect: 'all',
   textAlign: 'left',
   whiteSpaceCollapse: 'preserve-breaks',
   textWrap: 'pretty',
   lineHeight: 1.25,
-  vars: {
-    '--text-fz': mantine.fontSizes.sm,
-  },
-  '@media': {
-    [mantine.largerThan('md')]: {
-      vars: {
-        '--text-fz': mantine.fontSizes.md,
-      },
-    },
+  '--text-fz': '{fontSizes.sm}',
+  md: {
+    '--text-fz': '{fontSizes.md}',
   },
 })

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

@@ -1,6 +1,5 @@
 import {
   type EdgeId,
-  isStepEdgeId,
   nonNullable,
 } from '@likec4/core'
 import { useDebouncedEffect } from '@react-hookz/web'
@@ -10,11 +9,20 @@ import clsx from 'clsx'
 import { curveCatmullRomOpen, line as d3line } from 'd3-shape'
 import { type PointerEvent as ReactPointerEvent, useEffect, useRef, useState } from 'react'
 import { first, isTruthy, last } from 'remeda'
-import { customEdge, EdgeActionButton, EdgeContainer, EdgeLabel, EdgePath } from '../../../base/primitives'
-import { useEnabledFeature } from '../../../context'
-import { useXYFlow, useXYInternalNode, useXYStoreApi } from '../../../hooks'
-import { useDiagram } from '../../../hooks/useDiagram'
-import { useLooseReducedGraphics } from '../../../hooks/useReducedGraphics'
+import { ZIndexes } from '../../../base/const'
+import {
+  customEdge,
+  EdgeActionButton,
+  EdgeContainer,
+  EdgeLabel,
+  EdgeLabelContainer,
+  EdgePath,
+} from '../../../base/primitives'
+import { useEnabledFeatures } from '../../../context/DiagramFeatures'
+import { useDiagram, useDiagramActorSnapshot } from '../../../hooks/useDiagram'
+import { useIsPanning } from '../../../hooks/useReducedGraphics'
+import { useXYFlow, useXYInternalNode, useXYStoreApi } from '../../../hooks/useXYFlow'
+import type { DiagramActorSnapshot } from '../../../state/types'
 import { vector, VectorImpl } from '../../../utils/vector'
 import { bezierControlPoints, bezierPath, isSamePoint } from '../../../utils/xyflow'
 import type { Types } from '../../types'
@@ -28,17 +36,15 @@ const curve = d3line<XYPosition>()
   .x(d => d.x)
   .y(d => d.y)
 
+const selectActiveStepId = (s: DiagramActorSnapshot) => s.context.activeWalkthrough?.stepId ?? null
 export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) => {
-  const isReducedGraphicsMode = useLooseReducedGraphics()
+  const isPanning = useIsPanning()
   const [isControlPointDragging, setIsControlPointDragging] = useState(false)
   const xyflowStore = useXYStoreApi()
   const xyflow = useXYFlow()
   const diagram = useDiagram()
-  const { enableNavigateTo, enableEdgeEditing, enableRelationshipDetails } = useEnabledFeature(
-    'NavigateTo',
-    'EdgeEditing',
-    'RelationshipDetails',
-  )
+  const activeWalkthroughStep = useDiagramActorSnapshot(selectActiveStepId)
+  const { enableNavigateTo, enableEdgeEditing, enableRelationshipDetails } = useEnabledFeatures()
   const {
     id,
     source,
@@ -58,6 +64,7 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
       labelXY,
       ...data
     },
+    style = {},
   } = props
 
   const navigateTo = enableNavigateTo ? data.navigateTo : undefined
@@ -125,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,
@@ -162,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()
@@ -209,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, {
@@ -252,95 +252,113 @@ 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()
 
     e.stopPropagation()
   }
 
-  let renderLabel: undefined | ((props: any) => any)
-  if (!isControlPointDragging) {
+  let zIndex = ZIndexes.Edge
+  if (hovered || active) {
+    // Move above the elements
+    zIndex = ZIndexes.Element + 1
+  }
+
+  let edgeLabel = (
+    <EdgeLabel edgeProps={props}>
+      {!isControlPointDragging && navigateTo && (
+        <EdgeActionButton
+          {...props}
+          onClick={e => {
+            e.stopPropagation()
+            diagram.navigateTo(navigateTo)
+          }} />
+      )}
+    </EdgeLabel>
+  )
+
+  if (!isControlPointDragging && !isPanning) {
     const notes = props.data.notes
-    if (notes && isStepEdgeId(props.id) && diagram.getContext().activeWalkthrough?.stepId === props.id) {
-      renderLabel = (props: any) => (
+    if (notes && activeWalkthroughStep === props.id) {
+      edgeLabel = (
         <NotePopover notes={notes}>
-          <div {...props} />
+          {edgeLabel}
         </NotePopover>
       )
-    } else if (enableRelationshipDetails && (!isReducedGraphicsMode || hovered || selected || active)) {
-      renderLabel = (props: any) => (
+    } else if (enableRelationshipDetails) {
+      edgeLabel = (
         <RelationshipsDropdownMenu
           disabled={!!dimmed}
           source={source}
           target={target}
           edgeId={edgeId}>
-          <div {...props} />
+          {edgeLabel}
         </RelationshipsDropdownMenu>
       )
     }
   }
 
   return (
-    <EdgeContainer {...props} className={clsx(isControlPointDragging && edgesCss.controlDragging)}>
-      <EdgePath {...props} svgPath={edgePath} ref={svgPathRef} onEdgePointerDown={onEdgePointerDown} />
-      <EdgeLabel
-        edgeProps={props}
-        labelPosition={{
-          x: labelX,
-          y: labelY,
-          translate: isModified ? 'translate(-50%, 0)' : undefined,
-        }}
-        {...renderLabel && { renderRoot: renderLabel }}
-      >
-        {!isControlPointDragging && navigateTo && (
-          <EdgeActionButton
-            {...props}
-            onClick={e => {
-              e.stopPropagation()
-              diagram.navigateTo(navigateTo)
-            }} />
-        )}
-      </EdgeLabel>
+    <>
+      <EdgeContainer {...props} className={clsx(isControlPointDragging && edgesCss.controlDragging)}>
+        <EdgePath {...props} svgPath={edgePath} ref={svgPathRef} onEdgePointerDown={onEdgePointerDown} />
+        <EdgeLabelContainer
+          edgeProps={props}
+          labelPosition={{
+            x: labelX,
+            y: labelY,
+            translate: isModified ? 'translate(-50%, 0)' : undefined,
+          }}
+        >
+          {edgeLabel}
+        </EdgeLabelContainer>
+      </EdgeContainer>
       {/* Render control points above edge label  */}
-      {enableEdgeEditing && controlPoints.length > 0 && (
+      {enableEdgeEditing && controlPoints.length > 0 && (selected || hovered || isControlPointDragging) && (
         <EdgeLabelRenderer>
-          <EdgeContainer component="svg" className={edgesCss.controlPointsContainer} {...props}>
+          <EdgeContainer
+            component="svg"
+            className={edgesCss.controlPointsContainer}
+            {...props}
+            style={{
+              ...style,
+              zIndex,
+            }}
+          >
             <g
               onContextMenu={e => {
                 e.preventDefault()
@@ -360,6 +378,6 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
           </EdgeContainer>
         </EdgeLabelRenderer>
       )}
-    </EdgeContainer>
+    </>
   )
 })

package/src/likec4diagram/custom/edges/RelationshipsDropdownMenu.css.ts

@@ -1,61 +1,40 @@
-import { style } from '@vanilla-extract/css'
-import { mantine, vars } from '../../../theme-vars'
+import { css } from '@likec4/styles/css'
 
-export const menuDropdown = style({
+export const menuDropdown = css({
   overflowY: 'scroll',
-  minWidth: 250,
+  minWidth: '250px',
   maxWidth: 'min(90vw, 500px)',
 })
 
-export const menuItemRelationship = style({
-  // padding: mantine.spacing.sm,
-  // paddingTop: mantine.spacing.xs,
-  // borderRadius: mantine.radius.sm,
-  // paddingTop: mantine.spacing.xs,
-  // paddingBottom: mantine.spacing.xs,
+export const menuItemRelationship = css({
   gap: 4,
-  // cursor: 'pointer',
-  // ':hover': {
-  // borderColor: mantine.colors.gray.light,
-  // background: mantine.colors.gray[2]
-  // },
-
-  // selectors: {
-  //   [`:where([data-mantine-color-scheme="dark"]) &`]: {
-  //     // borderColor: mantine.colors.dark[6]
-  //   },
-  //   [`:where([data-mantine-color-scheme="dark"]) &:hover`]: {
-  //     // background: mantine.colors.dark[5]
-  //   }
-  // }
 })
 
-export const endpoint = style({
+export const endpoint = css({
   display: 'block',
-  fontSize: 10,
+  fontSize: 'xxs',
   fontWeight: 500,
   whiteSpace: 'nowrap',
-  padding: '2px 5px',
+  padding: '2px 4px',
   borderRadius: 2,
-  background: `color-mix(in srgb , ${vars.element.fill},  transparent 45%)`,
-  lineHeight: 1.1,
-  selectors: {
-    [`:where([data-mantine-color-scheme="dark"]) &`]: {
-      color: vars.element.loContrast,
-    },
+  background: `likec4.palette.fill/30`,
+  lineHeight: '[1.11]',
+  mixBlendMode: 'hard-light',
+  color: {
+    _light: `[color-mix(in srgb, {colors.likec4.palette.stroke}, {colors.likec4.mixColor} 60%)]`,
+    _dark: 'likec4.palette.loContrast',
   },
+  // _dark: {
+  //   background: `likec4.palette.fill/60`,
+  // },
+})
+
+export const title = css({
+  whiteSpaceCollapse: 'preserve-breaks',
+  fontSize: 'xs',
 })
 
-export const title = style({
+export const arrowFromTo = css({
   whiteSpaceCollapse: 'preserve-breaks',
-  fontSize: mantine.fontSizes.sm,
+  fontSize: 'xs',
 })
-//
-// export const sourceId = style({
-//
-// })
-//
-// export const targetId = style({
-//   fontSize: 11,
-//   whiteSpace: 'nowrap'
-// })