@likec4/diagram 1.8.1 → 1.12.0

package/src/xyflow/edges/RelationshipsDropdownMenu.tsx

@@ -0,0 +1,214 @@
+import { type DiagramNode, LikeC4Model, nameFromFqn } from '@likec4/core'
+import {
+  ActionIcon,
+  Box,
+  Group,
+  Menu,
+  MenuDivider,
+  MenuDropdown,
+  MenuItem,
+  MenuLabel,
+  MenuTarget,
+  Space,
+  Stack,
+  type StackProps,
+  Text,
+  Tooltip as MantineTooltip,
+  TooltipGroup
+} from '@mantine/core'
+import { IconArrowRight, IconFileSymlink, IconZoomScan } from '@tabler/icons-react'
+import clsx from 'clsx'
+import { forwardRef, Fragment, type MouseEventHandler, type PropsWithChildren } from 'react'
+import { filter, isTruthy, map, partition, pipe } from 'remeda'
+import { useDiagramState, useDiagramStoreApi, useMantinePortalProps, useXYNodesData } from '../../hooks'
+import type { RelationshipData } from '../types'
+import * as css from './RelationshipsDropdownMenu.css'
+
+const stopPropagation: MouseEventHandler = (e) => e.stopPropagation()
+
+export const Tooltip = MantineTooltip.withProps({
+  color: 'gray',
+  fz: 'xs',
+  openDelay: 300,
+  closeDelay: 150,
+  label: '',
+  children: null,
+  offset: 8,
+  withinPortal: false
+})
+
+export function RelationshipsDropdownMenu({
+  edge,
+  disabled = false,
+  likec4model,
+  children
+}: PropsWithChildren<{
+  edge: RelationshipData['edge']
+  disabled?: boolean | undefined
+  likec4model: LikeC4Model
+}>) {
+  const portalProps = useMantinePortalProps()
+  const [sourceXYNode, targetXYNode] = useXYNodesData([edge.source, edge.target])
+
+  if (!sourceXYNode || !targetXYNode) return children
+
+  const [direct, nested] = pipe(
+    edge.relations,
+    map(id => {
+      try {
+        return likec4model.relationship(id)
+      } catch (e) {
+        // View was cached, but likec4model based on new data
+        console.error(
+          `View is cached and likec4model missing relationship ${id} from ${edge.source} -> ${edge.target}`,
+          e
+        )
+        return null
+      }
+    }),
+    filter(isTruthy),
+    partition(r => r.relationship.source === edge.source && r.relationship.target === edge.target)
+  )
+
+  if (direct.length + nested.length === 0) {
+    return <>{children}</>
+  }
+
+  const renderRelationship = (relationship: LikeC4Model.ViewModel.Relationship, index: number) => (
+    <Fragment key={relationship.id}>
+      {index > 0 && <MenuDivider opacity={0.65} />}
+      <MenuItem
+        component={Relationship}
+        relationship={relationship}
+        sourceNode={sourceXYNode.data.element}
+        targetNode={targetXYNode.data.element}
+        edge={edge} />
+    </Fragment>
+  )
+
+  return (
+    <Menu
+      trigger={'click-hover'}
+      openDelay={300}
+      closeDelay={450}
+      floatingStrategy={'fixed'}
+      closeOnClickOutside
+      clickOutsideEvents={['pointerdown', 'mousedown', 'click']}
+      closeOnEscape
+      closeOnItemClick={false}
+      disabled={disabled}
+      {...portalProps}
+    >
+      <MenuTarget>
+        {children}
+      </MenuTarget>
+      <MenuDropdown
+        className={css.menuDropdown}
+        onPointerDownCapture={stopPropagation}
+        onPointerDown={stopPropagation}
+        onClick={stopPropagation}
+        onDoubleClick={stopPropagation}
+      >
+        {direct.length > 0 && (
+          <>
+            <MenuLabel>direct relationships</MenuLabel>
+            {direct.map(renderRelationship)}
+          </>
+        )}
+        {nested.length > 0 && (
+          <>
+            {direct.length > 0 && <MenuDivider />}
+            <MenuLabel>resolved from nested</MenuLabel>
+            {nested.map(renderRelationship)}
+          </>
+        )}
+      </MenuDropdown>
+    </Menu>
+  )
+}
+
+const Relationship = forwardRef<
+  HTMLDivElement,
+  StackProps & {
+    relationship: LikeC4Model.ViewModel.Relationship
+    edge: RelationshipData['edge']
+    sourceNode: DiagramNode
+    targetNode: DiagramNode
+  }
+>(({
+  className,
+  relationship: r,
+  edge,
+  sourceNode,
+  targetNode,
+  ...props
+}, ref) => {
+  const diagramApi = useDiagramStoreApi()
+  const {
+    viewId,
+    hasOnOpenSourceRelation,
+    hasOnNavigateTo
+  } = useDiagramState(s => ({
+    viewId: s.view.id,
+    hasOnOpenSourceRelation: !!s.onOpenSourceRelation,
+    hasOnNavigateTo: !!s.onNavigateTo
+  }))
+  const sourceId = nameFromFqn(edge.source) + r.source.id.slice(edge.source.length)
+  const targetId = nameFromFqn(edge.target) + r.target.id.slice(edge.target.length)
+  const navigateTo = hasOnNavigateTo && r.relationship.navigateTo !== viewId ? r.relationship.navigateTo : undefined
+
+  return (
+    <Stack ref={ref} className={clsx(css.menuItemRelationship, className)} {...props}>
+      <Group gap={4}>
+        <Text component="div" className={css.endpoint} data-likec4-color={sourceNode.color}>
+          {sourceId}
+        </Text>
+        <IconArrowRight stroke={2.5} size={11} />
+        <Text component="div" className={css.endpoint} data-likec4-color={targetNode.color}>
+          {targetId}
+        </Text>
+        {(navigateTo || hasOnOpenSourceRelation) && (
+          <TooltipGroup openDelay={100}>
+            <Space w={'xs'} />
+            {navigateTo && (
+              <Tooltip label={'Open dynamic view'}>
+                <ActionIcon
+                  className={clsx('nodrag nopan')}
+                  size={'sm'}
+                  radius="sm"
+                  variant="default"
+                  onPointerDownCapture={stopPropagation}
+                  onClick={event => {
+                    diagramApi.getState().onNavigateTo?.(navigateTo, event)
+                  }}
+                  role="button"
+                >
+                  <IconZoomScan size="80%" stroke={2} />
+                </ActionIcon>
+              </Tooltip>
+            )}
+            {hasOnOpenSourceRelation && (
+              <Tooltip label={'Open source'}>
+                <ActionIcon
+                  className={clsx('nodrag nopan')}
+                  size={'sm'}
+                  radius="sm"
+                  variant="default"
+                  onPointerDownCapture={stopPropagation}
+                  onClick={event => {
+                    event.stopPropagation()
+                    diagramApi.getState().onOpenSourceRelation?.(r.id)
+                  }}
+                  role="button"
+                >
+                  <IconFileSymlink size="80%" stroke={2} />
+                </ActionIcon>
+              </Tooltip>
+            )}
+          </TooltipGroup>
+        )}
+      </Group>
+      <Box className={css.title}>{r.title || 'untitled'}</Box>
+    </Stack>
+  )
+})

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

@@ -1,7 +1,6 @@
 import { rem } from '@mantine/core'
 import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
-import { mantine } from '../../mantine.css'
-import { vars, xyvars } from '../../theme.css'
+import { mantine, vars, xyvars } from '../../theme-vars'
 
 const mixColor = createVar('mix-color')
 
@@ -145,7 +144,7 @@ export const cssEdgePath = style({
       animationDelay: '450ms',
       transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out'
     },
-    [`:where(${isSelected}, [data-edge-active='true']) &`]: {
+    [`:where(${isSelected}, [data-edge-active='true'], [data-edge-animated='true']) &`]: {
       animationName: strokeKeyframes,
       animationDelay: '0ms',
       transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out'
@@ -171,10 +170,15 @@ export const stepEdgeNumber = style({
   borderTopLeftRadius: labelBorderRadius,
   borderBottomLeftRadius: labelBorderRadius,
   backgroundColor: `color-mix(in srgb, ${vars.relation.labelBgColor}, ${mixColor} 5%)`,
-  fontVariantNumeric: 'tabular-nums'
-})
-globalStyle(`:where([data-mantine-color-scheme="dark"]) :where([data-likec4-color="gray"]) ${stepEdgeNumber}`, {
-  backgroundColor: `color-mix(in srgb, ${vars.relation.labelBgColor}, ${mixColor} 15%)`
+  fontVariantNumeric: 'tabular-nums',
+  selectors: {
+    [`:where([data-mantine-color-scheme="dark"]) :where([data-likec4-color="gray"]) &`]: {
+      backgroundColor: `color-mix(in srgb, ${vars.relation.labelBgColor}, ${mixColor} 15%)`
+    },
+    [`:where([data-edge-active='true']) &`]: {
+      backgroundColor: 'transparent'
+    }
+  }
 })
 
 export const varLabelX = createVar('label-x')
@@ -230,3 +234,67 @@ export const edgeLabelText = style({
 globalStyle(`${edgeLabel}:has(${stepEdgeNumber}) ${edgeLabelText}`, {
   padding: '2px 5px 4px 2px'
 })
+
+export const edgeNoteCloseButton = style({
+  position: 'absolute',
+  top: 4,
+  right: 4,
+  zIndex: 9
+})
+
+export const edgeNoteText = style({
+  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
+      }
+    }
+  }
+})
+
+export const cssNavigateBtn = style({
+  zIndex: 'calc(var(--layer-overlays, 1) + 1)',
+  position: 'absolute',
+  pointerEvents: 'all',
+  left: '50%',
+  top: 'calc(100% + 1px)',
+  color: xyvars.edge.labelColor,
+  cursor: 'pointer',
+  transformOrigin: 'top center',
+  opacity: 0.8,
+  transition: 'all 150ms ease-in-out',
+  transform: 'translate(-50%, 0)',
+  transitionDelay: '0ms',
+  backgroundColor: 'var(--ai-bg)',
+  vars: {
+    '--ai-bg': vars.relation.labelBgColor,
+    '--ai-hover': `color-mix(in srgb , ${vars.relation.labelBgColor}, ${mixColor} 10%)`
+  },
+  selectors: {
+    [`:is(${dimmed}) &`]: {
+      display: 'none'
+    }
+  },
+  ':hover': {
+    boxShadow: mantine.shadows.lg,
+    transform: 'translate(-50%, 0) scale(1.3)',
+    opacity: 1
+  },
+  ':active': {
+    transform: 'translate(-50%, 0) scale(1.02)'
+  }
+})
+globalStyle(`${cssNavigateBtn} .tabler-icon`, {
+  width: '75%',
+  height: '75%',
+  strokeWidth: 2
+})
+export const cssNavigateBtnIcon = style({})

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

@@ -1,8 +1,7 @@
 import { rem } from '@mantine/core'
 import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
 import { calc } from '@vanilla-extract/css-utils'
-import { mantine } from '../../../mantine.css'
-import { vars } from '../../../theme.css'
+import { mantine, vars } from '../../../theme-vars'
 
 export const container = style({
   width: '100%',

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

@@ -83,15 +83,15 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
             opacity < 1 && css.transparent,
             'likec4-compound'
           )}
-          style={opacity < 1
-            ? {
+          style={{
+            ...(opacity < 1 && {
               ...assignInlineVars({
                 [css.varBorderTransparency]: `${borderTransparency}%`,
                 [css.varOpacity]: opacity.toFixed(2)
               }),
               borderStyle: style.border ?? 'dashed'
-            }
-            : undefined}
+            })
+          }}
         >
           <Text
             component="div"

package/src/xyflow/nodes/element/ElementLink.css.ts

@@ -1,5 +1,5 @@
 import { globalStyle, style } from '@vanilla-extract/css'
-import { vars } from '../../../theme.css'
+import { vars } from '../../../theme-vars'
 
 export const elementLink = style({
   position: 'absolute',

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

@@ -15,7 +15,7 @@ import { IconLink } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { useId } from 'react'
 import { clamp } from 'remeda'
-import { useDiagramState } from '../../../hooks/useDiagramState'
+import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps'
 import { type DiagramState } from '../../../state/diagramStore'
 import type { XYFlowNode } from '../../types'
 import { elementLink, trigger } from './ElementLink.css'
@@ -24,17 +24,12 @@ type ElementLinkProps = {
   element: XYFlowNode['data']['element']
 }
 
-const selector = (s: DiagramState) => {
-  const target = s.getContainer()
-  return target ? { target } : null
-}
-
 export function ElementLink({
   element
 }: ElementLinkProps) {
   invariant(element.links, 'ElementLink: links are required')
   const id = useId()
-  const portalProps = useDiagramState(selector)
+  const portalProps = useMantinePortalProps()
   return (
     <div className={elementLink} data-likec4-linkid={id}>
       <HoverCard
@@ -47,7 +42,7 @@ export function ElementLink({
         transitionProps={{
           transition: 'pop'
         }}
-        {...(portalProps ? { portalProps } : { withinPortal: false })}
+        {...portalProps}
         floatingStrategy={'fixed'}
         openDelay={350}
         closeDelay={800}

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

@@ -1,7 +1,6 @@
-import type { DiagramNode } from '@likec4/core/types'
-import { ActionIcon, Text as MantineText, Tooltip } from '@mantine/core'
-import { IconFileSymlink } from '@tabler/icons-react'
-import { Handle, type NodeProps, NodeToolbar, Position } from '@xyflow/react'
+import type { DiagramNode } from '@likec4/core'
+import { Text as MantineText } from '@mantine/core'
+import { Handle, type NodeProps, Position } from '@xyflow/react'
 import clsx from 'clsx'
 import { deepEqual as eq } from 'fast-equals'
 import { m, type Variants } from 'framer-motion'
@@ -123,6 +122,50 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
 
   return (
     <>
+      {
+        /* <NodeToolbar isVisible={isTollbarVisible} offset={0}>
+        <ActionIconGroup>
+          <ActionIcon
+            size={'md'}
+            variant="default"
+            color="dark"
+            onClick={e => {
+              e.stopPropagation()
+              store.getState().onOpenSourceElement?.(element.id)
+            }}>
+            <IconFileSymlink
+              // stroke={1.2}
+              style={{
+                width: '70%',
+                height: '70%'
+              }} />
+          </ActionIcon>
+          <ActionIcon
+          size={'md'}
+            variant="default"
+            color="dark"
+          >
+              <ColorSwatch
+                color={defaultTheme.elements[element.color as ThemeColor]?.fill}
+                size={16}
+                withShadow
+                style={{ color: '#fff', cursor: 'pointer' }}
+              />
+            </ActionIcon>
+            <ActionIcon
+          size={'md'}
+            variant="default"
+            color="dark"
+            w={'fit-content'}
+            fz={'xs'}
+          >
+              {element.shape}
+            </ActionIcon>
+
+        </ActionIconGroup>
+      </NodeToolbar> */
+      }
+
       <Handle
         type="target"
         position={Position.Top}

package/src/xyflow/nodes/element/element.css.ts

@@ -1,7 +1,6 @@
 import { rem } from '@mantine/core'
 import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
-import { mantine } from '../../../mantine.css'
-import { vars } from '../../../theme.css'
+import { mantine, vars } from '../../../theme-vars'
 
 export const stokeFillMix = createVar('stroke-fill-mix')
 

package/src/xyflow/types.ts

@@ -1,17 +1,6 @@
 import type { BBox, DiagramEdge, DiagramNode, Fqn, XYPoint } from '@likec4/core'
-import type {
-  Edge,
-  EdgeMouseHandler,
-  InternalNode,
-  Node,
-  NodeMouseHandler,
-  OnMoveEnd,
-  OnMoveStart,
-  ReactFlowInstance,
-  ReactFlowState
-} from '@xyflow/react'
+import type { Edge, InternalNode, Node, ReactFlowInstance, ReactFlowState } from '@xyflow/react'
 import { isNode } from '@xyflow/react'
-import type { MouseEvent as ReactMouseEvent } from 'react'
 import { isTruthy } from 'remeda'
 import type { Simplify } from 'type-fest'
 
@@ -44,7 +33,6 @@ export type RelationshipData = {
   edge: DiagramEdge
   // if set - edge was changed by user
   controlPoints: XYPoint[] | null
-  stepNum: number | null
   label: null | {
     bbox: BBox
     text: string
@@ -69,14 +57,3 @@ export namespace XYFlowEdge {
 
 export type XYFlowInstance = ReactFlowInstance<XYFlowNode, XYFlowEdge>
 export type XYFlowState = ReactFlowState<XYFlowNode, XYFlowEdge>
-
-export type XYFlowEventHandlers = {
-  onPanelClick: (event: ReactMouseEvent) => void
-  onNodeContextMenu: NodeMouseHandler<XYFlowNode>
-  onEdgeContextMenu: EdgeMouseHandler<XYFlowEdge>
-  onPaneContextMenu: (event: ReactMouseEvent | MouseEvent) => void
-  onNodeClick: NodeMouseHandler<XYFlowNode>
-  onEdgeClick: EdgeMouseHandler<XYFlowEdge>
-  onMoveStart: OnMoveStart
-  onMoveEnd: OnMoveEnd
-}

package/src/xyflow/useLayoutConstraints.ts

@@ -181,12 +181,16 @@ function createLayoutConstraints(
     }
   }
 
+  const draggingNodes = new Set(nodeLookup.values()
+    .filter(x => x.dragging === true || x.id === draggingNodeId || x.selected)
+    .map(x => x.id))
+
   while (traverse.length > 0) {
     const { xynode, parent } = traverse.shift()!
-    const isDragging = xynode.dragging === true || xynode.id === draggingNodeId
+    const isDragging = draggingNodes.has(xynode.id)
 
     // Traverse children if the node is a compound, not dragging, and is an ancestor of the dragging node
-    const shouldTraverse = !isDragging && xynode.type === 'compound' && isAncestor(xynode.id, draggingNodeId)
+    const shouldTraverse = !isDragging && xynode.type === 'compound' && draggingNodes.values().some(x => isAncestor(xynode.id, x))
 
     const rect = shouldTraverse ? new Compound(solver, xynode, parent) : new Leaf(solver, xynode, parent, isDragging)
     rects.set(xynode.id, rect)
@@ -203,8 +207,7 @@ function createLayoutConstraints(
 
   solver.updateVariables()
   solver.maxIterations = 1000
-
-  const rectsToUpdate = [...rects.values()].filter(r => r.id !== draggingNodeId)
+  const rectsToUpdate = [...rects.values()].filter(r => !draggingNodes.has(r.id))  
 
   function updateXYFlowNodes() {
     solver.updateVariables()
@@ -243,8 +246,8 @@ function createLayoutConstraints(
       animationFrameId = null
       const pos = nodeLookup.get(xynode.id)!.internals.positionAbsolute
       const rect = nonNullable(rects.get(xynode.id))
-      solver.suggestValue(rect.minX, Math.ceil(pos.x))
-      solver.suggestValue(rect.minY, Math.ceil(pos.y))
+      solver.suggestValue(rect.minX, Math.floor(pos.x))
+      solver.suggestValue(rect.minY, Math.floor(pos.y))
       updateXYFlowNodes()
     })
   }
@@ -273,6 +276,7 @@ export function useLayoutConstraints(): LayoutConstraints {
       solverRef.current?.onNodeDrag(xynode)
     },
     onNodeDragStop: (_event, _xynode) => {
+      solverRef.current?.updateXYFlowNodes()
       diagramApi.getState().scheduleSaveManualLayout()
       solverRef.current = undefined
     }

package/src/xyflow/utils.ts

@@ -1,5 +1,5 @@
 import { hasAtLeast, invariant } from '@likec4/core'
-import type { DiagramEdge, Point } from '@likec4/core/types'
+import type { DiagramEdge, Point } from '@likec4/core'
 import type { Rect, XYPosition } from '@xyflow/react'
 import { Bezier } from 'bezier-js'
 import { isArray } from 'remeda'

package/dist/LikeC4Diagram.css.d.ts

@@ -1,4 +0,0 @@
-export declare const cssReactFlow: string;
-export declare const cssDisablePan: string;
-export declare const cssTransparentBg: string;
-export declare const cssNoControls: string;

package/dist/LikeC4Diagram.d.ts

@@ -1,4 +0,0 @@
-import { LikeC4DiagramEventHandlers, LikeC4DiagramProperties } from './LikeC4Diagram.props';
-
-export type LikeC4DiagramProps = LikeC4DiagramProperties & LikeC4DiagramEventHandlers;
-export declare function LikeC4Diagram({ view, className, fitView, fitViewPadding, readonly, pannable, zoomable, nodesSelectable, nodesDraggable, background, controls, showElementLinks, showDiagramTitle, showNotations, enableDynamicViewWalkthrough, enableFocusMode, initialWidth, initialHeight, keepAspectRatio, experimentalEdgeEditing, onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onChange, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSourceElement, onOpenSourceView, onOpenSourceRelation, onBurgerMenuClick, renderIcon, where, showNavigationButtons }: LikeC4DiagramProps): import("react/jsx-runtime").JSX.Element;