@likec4/diagram 1.7.2 → 1.7.4

package/src/xyflow/XYFlowEvents.tsx

@@ -3,7 +3,7 @@ import type { ReactFlowProps } from '@xyflow/react'
 import { useMemo, useRef } from 'react'
 import { isNonNullish, isTruthy } from 'remeda'
 import type { Simplify } from 'type-fest'
-import { useDiagramStoreApi } from '../state/useDiagramStore'
+import { useDiagramStoreApi } from '../hooks/useDiagramState'
 import type { XYFlowEdge, XYFlowNode } from './types'
 
 export type XYFlowEventHandlers = Simplify<
@@ -57,18 +57,21 @@ export function useXYFlowEvents() {
     return ({
       onDoubleClick: (event) => {
         const {
-          fitViewEnabled,
           onCanvasDblClick,
-          resetLastClicked,
-          fitDiagram
+          zoomable,
+          xystore,
+          viewportChanged,
+          fitDiagram,
+          resetLastClicked
         } = diagramApi.getState()
-        if (fitViewEnabled) {
+        resetLastClicked()
+        xystore.getState().resetSelectedElements()
+        if (!onCanvasDblClick) {
+          event.stopPropagation()
+        }
+        if (zoomable && viewportChanged) {
           fitDiagram()
-          if (!onCanvasDblClick) {
-            event.stopPropagation()
-          }
         }
-        resetLastClicked()
         onCanvasDblClick?.(event)
       },
       onPaneClick: (event) => {
@@ -80,6 +83,7 @@ export function useXYFlowEvents() {
           activeDynamicViewStep,
           fitDiagram,
           onCanvasClick,
+          xystore,
           resetLastClicked
         } = diagramApi.getState()
         if ((focusedNodeId ?? activeDynamicViewStep) !== null) {
@@ -89,6 +93,7 @@ export function useXYFlowEvents() {
           }
         }
         resetLastClicked()
+        xystore.getState().resetSelectedElements()
         onCanvasClick?.(event)
       },
       onNodeContextMenu: (event, xynode) => {
@@ -117,27 +122,42 @@ export function useXYFlowEvents() {
           fitDiagram,
           focusOnNode,
           onNodeClick,
+          xystore,
           enableFocusMode,
           lastClickedNodeId,
-          setLastClickedNode
+          nodesSelectable,
+          setLastClickedNode,
+          onOpenSourceElement
         } = diagramApi.getState()
         setLastClickedNode(xynode.id)
         // if we focused on a node, and clicked on another node - focus on the clicked node
         const shallChangeFocus = !!focusedNodeId && focusedNodeId !== xynode.id
         // if user clicked on the same node twice in a short time, focus on it
         const clickedRecently = lastClickedNodeId === xynode.id && lastClickWasRecent()
-        if (enableFocusMode) {
-          let stopPropagation = false
+
+        if (clickedRecently && !!onOpenSourceElement) {
+          onOpenSourceElement(xynode.data.element.id)
+        }
+
+        if (enableFocusMode || nodesSelectable) {
+          let stopPropagation = true
           switch (true) {
-            case !focusedNodeId && clickedRecently:
-            case shallChangeFocus:
-              stopPropagation = true
+            case enableFocusMode && !focusedNodeId && clickedRecently:
+            case enableFocusMode && shallChangeFocus: {
               focusOnNode(xynode.id)
               break
-            case focusedNodeId === xynode.id && clickedRecently:
-              stopPropagation = true
+            }
+            case enableFocusMode && focusedNodeId === xynode.id && clickedRecently: {
               fitDiagram()
               break
+            }
+            case nodesSelectable: {
+              xystore.getState().addSelectedNodes([xynode.id])
+              break
+            }
+            default: {
+              stopPropagation = false
+            }
           }
           if (!onNodeClick && stopPropagation) {
             // user did not provide a custom handler, stop propagation
@@ -179,6 +199,8 @@ export function useXYFlowEvents() {
           activateDynamicStep,
           activeDynamicViewStep,
           focusedNodeId,
+          xystore,
+          nodesSelectable,
           focusOnNode,
           onEdgeClick,
           setLastClickedEdge
@@ -204,7 +226,11 @@ export function useXYFlowEvents() {
         if (isEdgeOfFocusedNode) {
           focusOnNode(focusedNodeId === xyedge.source ? xyedge.target : xyedge.source)
           if (!onEdgeClick) {
-            // user did not provide a custom handler, stop propagation
+            event.stopPropagation()
+          }
+        } else if (nodesSelectable) {
+          xystore.getState().addSelectedEdges([xyedge.id])
+          if (!onEdgeClick) {
             event.stopPropagation()
           }
         }

package/src/xyflow/XYFlowInner.tsx

@@ -2,27 +2,25 @@ import { Controls } from '@xyflow/react'
 import { shallowEqual } from 'fast-equals'
 import { memo, type PropsWithChildren } from 'react'
 import { isNonNullish } from 'remeda'
+import { useDiagramState } from '../hooks/useDiagramState'
 import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
-import { useDiagramState } from '../state/useDiagramStore'
-import { BackwardForwardPanel } from '../ui/BackwardForwardPanel'
 import DiagramTitlePanel from '../ui/DiagramTitlePanel'
 import { DynamicViewWalkthrough } from '../ui/DynamicViewWalkthrough'
 import OptionsPanel from '../ui/OptionsPanel'
+import { TopLeftPanel } from '../ui/top-left/TopLeftPanel'
 import { XYFlowBackground } from './XYFlowBackground'
 
 type XYFlowInnerProps = PropsWithChildren<{
   background: NonNullable<LikeC4DiagramProperties['background']>
   controls: boolean
   showDiagramTitle: boolean
-  showNavigationButtons: boolean
 }>
 
 export const XYFlowInner = memo(function XYFlowInnerR({
   children,
   background,
   controls,
-  showDiagramTitle,
-  showNavigationButtons
+  showDiagramTitle
 }: XYFlowInnerProps) {
   const {
     isDynamicView,
@@ -44,10 +42,10 @@ export const XYFlowInner = memo(function XYFlowInnerR({
     <>
       {isBgWithPattern && <XYFlowBackground background={background} />}
       {controls && <Controls position={'bottom-right'} />}
-      {readonly === false && <OptionsPanel />}
+      <TopLeftPanel />
+      {readonly !== true && <OptionsPanel />}
       {isDiagramTitleVisible && <DiagramTitlePanel />}
       {isDynamicView && enableDynamicViewWalkthrough && <DynamicViewWalkthrough />}
-      {showNavigationButtons && <BackwardForwardPanel />}
       {children}
     </>
   )

package/src/xyflow/const.ts

@@ -5,3 +5,4 @@ export const ZIndexes = {
 } as const
 
 export const MinZoom = 0.1
+export const MaxZoom = 2

package/src/xyflow/edges/RelationshipEdge.tsx

@@ -16,10 +16,10 @@ import { curveCatmullRomOpen, line as d3line } from 'd3-shape'
 import { deepEqual, deepEqual as eq } from 'fast-equals'
 import { memo, type PointerEvent as ReactPointerEvent, useEffect, useRef, useState } from 'react'
 import { first, hasAtLeast, isArray, isTruthy, last } from 'remeda'
-import { useDiagramState, useDiagramStoreApi } from '../../state/useDiagramStore'
+import { useDiagramState, useDiagramStoreApi } from '../../hooks/useDiagramState'
+import { useXYStoreApi } from '../../hooks/useXYFlow'
 import { ZIndexes } from '../const'
 import { EdgeMarkers, type EdgeMarkerType } from '../EdgeMarkers'
-import { useXYStoreApi } from '../hooks/useXYFlow'
 import { type RelationshipData, type XYFlowEdge } from '../types'
 import { bezierControlPoints } from '../utils'
 import * as edgesCss from './edges.css'
@@ -97,9 +97,9 @@ function bezierPath(bezierSpline: NonEmptyArray<Point>) {
   return path
 }
 
-// If points are within 3px, consider them the same
+// If points are within 1px, consider them the same
 const isSame = (a: number, b: number) => {
-  return Math.abs(a - b) < 3.1
+  return Math.abs(a - b) < 2.5
 }
 
 const isSamePoint = (a: XYPosition | Point, b: XYPosition | Point) => {
@@ -150,12 +150,14 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
   const [isControlPointDragging, setIsControlPointDragging] = useState(false)
   const diagramStore = useDiagramStoreApi()
   const xyflowStore = useXYStoreApi()
-  const { isActive, isEdgePathEditable, isHovered, isDimmed } = useDiagramState(s => ({
-    isEdgePathEditable: s.readonly !== true && s.experimentalEdgeEditing === true,
+  const { isActive, isEdgePathEditable, isHovered, isDimmed, hasOpenSourceRelation } = useDiagramState(s => ({
+    isEdgePathEditable: s.readonly !== true && s.experimentalEdgeEditing === true && s.focusedNodeId === null
+      && s.activeDynamicViewStep === null,
     isActive: s.focusedNodeId === source || s.focusedNodeId === target
       || (s.activeDynamicViewStep !== null && s.activeDynamicViewStep === data.stepNum),
     isHovered: s.hoveredEdgeId === id,
-    isDimmed: s.dimmed.has(id)
+    isDimmed: s.dimmed.has(id),
+    hasOpenSourceRelation: !!s.onOpenSourceRelation
   }))
   const { nodeLookup, edgeLookup } = xyflowStore.getState()
   const sourceNode = nonNullable(nodeLookup.get(source)!, `source node ${source} not found`)
@@ -200,8 +202,6 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
   let edgePath: string
 
   if (isModified) {
-    labelX = labelPos.x
-    labelY = labelPos.y
     const sourceCenterPos = { x: sourceX, y: sourceY }
     const targetCenterPos = { x: targetX, y: targetY }
 
@@ -254,10 +254,15 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
       })
     },
     [labelPos],
-    100,
+    50,
     300
   )
 
+  if (isModified || isControlPointDragging) {
+    labelX = labelPos.x
+    labelY = labelPos.y
+  }
+
   const onControlPointerDown = (index: number, e: ReactPointerEvent<SVGCircleElement>) => {
     const { domNode } = xyflowStore.getState()
     if (!domNode || e.pointerType !== 'mouse') {
@@ -281,30 +286,47 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
     e.stopPropagation()
     let hasMoved = false
     let pointer = { x: e.clientX, y: e.clientY }
+
     const onPointerMove = (e: PointerEvent) => {
-      if (!isSamePoint(pointer, [e.clientX, e.clientY])) {
+      if (hasMoved || !isSamePoint(pointer, [e.clientX, e.clientY])) {
         setIsControlPointDragging(true)
         hasMoved = true
         pointer = { x: e.clientX, y: e.clientY }
         const { x, y } = xyflow.screenToFlowPosition(pointer, { snapToGrid: false })
-        const newControlPoints = controlPoints.slice()
-        newControlPoints[index] = {
-          x: Math.round(x),
-          y: Math.round(y)
-        }
-        xyflow.updateEdgeData(id, { controlPoints: newControlPoints })
+        xyflow.updateEdgeData(id, xyedge => {
+          const cp = (xyedge.data.controlPoints ?? controlPoints).slice()
+          cp[index] = {
+            x: Math.round(x),
+            y: Math.round(y)
+          }
+          return {
+            controlPoints: cp
+          }
+        })
       }
+      e.stopPropagation()
     }
-    const onPointerUp = () => {
-      domNode.removeEventListener('pointermove', onPointerMove)
-      domNode.removeEventListener('pointerup', onPointerUp)
+
+    const onPointerUp = (e: PointerEvent) => {
+      domNode.removeEventListener('pointermove', onPointerMove, {
+        capture: true
+      })
+      if (hasMoved) {
+        e.stopPropagation()
+      }
       if (hasMoved || wasCanceled) {
         diagramStore.getState().scheduleSaveManualLayout()
       }
       setIsControlPointDragging(false)
     }
-    domNode.addEventListener('pointermove', onPointerMove)
-    domNode.addEventListener('pointerup', onPointerUp, { once: true })
+
+    domNode.addEventListener('pointermove', onPointerMove, {
+      capture: true
+    })
+    domNode.addEventListener('pointerup', onPointerUp, {
+      once: true,
+      capture: true
+    })
   }
 
   let markerStartName = toMarker(diagramEdge.tail)
@@ -318,6 +340,9 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
 
   const labelZIndex = 1 + (isHovered ? ZIndexes.Element : (edgeLookup.get(id)!.zIndex ?? ZIndexes.Edge))
 
+  const relationId = first(data.edge.relations)
+  const showOpenSourceRelation = hasOpenSourceRelation && relationId !== undefined
+
   return (
     <g
       className={clsx(
@@ -393,7 +418,12 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
             isHovered,
             isActive,
             isStepEdge
-          })} />
+          })}
+          onClick={showOpenSourceRelation && ((e) => {
+            e.stopPropagation()
+            diagramStore.getState().onOpenSourceRelation?.(relationId)
+          })}
+        />
       )}
     </g>
   )
@@ -412,9 +442,10 @@ type EdgeLabelProps = {
   isHovered: boolean
   isActive: boolean
   zIndex: number
+  onClick: false | ((e: ReactPointerEvent<HTMLDivElement>) => void)
 }
 
-const EdgeLabel = memo<EdgeLabelProps>(({
+const EdgeLabel = ({
   isDimmed,
   color,
   isModified,
@@ -426,8 +457,9 @@ const EdgeLabel = memo<EdgeLabelProps>(({
   stepNum,
   isHovered,
   isActive,
-  zIndex
-}) => {
+  zIndex,
+  onClick
+}: EdgeLabelProps) => {
   return (
     <EdgeLabelRenderer>
       <Box
@@ -455,6 +487,7 @@ const EdgeLabel = memo<EdgeLabelProps>(({
           'data-edge-hovered': isHovered,
           'data-edge-active': isActive
         }}
+        onClick={onClick || undefined}
       >
         {stepNum !== null && (
           <Box className={edgesCss.stepEdgeNumber}>
@@ -469,4 +502,4 @@ const EdgeLabel = memo<EdgeLabelProps>(({
       </Box>
     </EdgeLabelRenderer>
   )
-}, deepEqual)
+}

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

@@ -10,7 +10,7 @@ export const container = style({
     [mixColor]: `black`,
     [xyvars.edge.stroke]: vars.relation.lineColor,
     [xyvars.edge.strokeSelected]: `color-mix(in srgb, ${vars.relation.lineColor}, ${mixColor} 35%)`,
-    [xyvars.edge.labelColor]: `color-mix(in srgb, ${vars.relation.labelColor}, rgba(255 255 255 / 0.85) 20%)`,
+    [xyvars.edge.labelColor]: `color-mix(in srgb, ${vars.relation.labelColor}, rgba(255 255 255 / 0.85) 40%)`,
     [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 40%)`,
     [xyvars.edge.strokeWidth]: '3'
   }
@@ -159,6 +159,24 @@ export const cssEdgePath = style({
   }
 })
 
+const labelBorderRadius = 2
+export const stepEdgeNumber = style({
+  flex: '0 0 auto',
+  fontWeight: 600,
+  fontSize: rem(14),
+  lineHeight: 1,
+  padding: '5px 5px',
+  textAlign: 'center',
+  minWidth: 22,
+  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%)`
+})
+
 export const varLabelX = createVar('label-x')
 export const varLabelY = createVar('label-y')
 
@@ -169,6 +187,7 @@ export const edgeLabel = style({
   left: 0,
   padding: '2px 4px 4px 4px',
   fontFamily: vars.likec4.font,
+  display: 'flex',
   position: 'absolute',
   pointerEvents: 'all',
   cursor: 'pointer',
@@ -177,7 +196,7 @@ export const edgeLabel = style({
   mixBlendMode: 'plus-lighter',
   color: xyvars.edge.labelColor,
   backgroundColor: xyvars.edge.labelBgColor,
-  borderRadius: 3,
+  borderRadius: labelBorderRadius,
   transform: varTranslate,
   vars: {
     [varTranslate]: `translate(${fallbackVar(varLabelX, '-50%')}, ${fallbackVar(varLabelY, '-50%')})`
@@ -187,6 +206,10 @@ export const edgeLabel = style({
       transition: 'all 140ms ease-in-out',
       transform: `${varTranslate} scale(1.12)`
     },
+    [`&:has(${stepEdgeNumber})`]: {
+      padding: 0,
+      gap: 2
+    },
     [`&:is(${dimmed})`]: {
       opacity: 0.3,
       transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
@@ -197,32 +220,13 @@ export const edgeLabel = style({
   }
 })
 
-export const stepEdgeNumber = style({
-  position: 'absolute',
-  top: -2,
-  left: -2,
-  fontWeight: 500,
-  fontSize: rem(16),
-  lineHeight: 0.9,
-  padding: '4px 6px',
-  borderRadius: 99999,
-  textAlign: 'center',
-  minWidth: 22,
-  backgroundColor: xyvars.edge.labelBgColor,
-  transition: 'all 120ms ease-out',
-  transform: 'translateX(-100%)',
-  fontVariantNumeric: 'tabular-nums',
-  selectors: {
-    ':where([data-edge-hovered="true"],[data-edge-active="true"]) &': {
-      fontWeight: 600,
-      backgroundColor: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 5%)`
-    }
-  }
-})
-
 export const edgeLabelText = style({
   textAlign: 'left',
   whiteSpaceCollapse: 'preserve-breaks',
   fontSize: rem(14),
   lineHeight: 1.185
 })
+
+globalStyle(`${edgeLabel}:has(${stepEdgeNumber}) ${edgeLabelText}`, {
+  padding: '2px 5px 4px 2px'
+})

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

@@ -5,7 +5,7 @@ import clsx from 'clsx'
 import { deepEqual as eq } from 'fast-equals'
 import { memo } from 'react'
 import { clamp } from 'remeda'
-import { useDiagramState } from '../../../state/useDiagramStore'
+import { useDiagramState } from '../../../hooks/useDiagramState'
 import type { CompoundXYFlowNode } from '../../types'
 import { NavigateToBtn } from '../shared/NavigateToBtn'
 import * as css from './CompoundNode.css'

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

@@ -7,7 +7,6 @@ import {
   Group,
   HoverCard,
   HoverCardDropdown,
-  type HoverCardProps,
   HoverCardTarget,
   Stack,
   UnstyledButton
@@ -16,8 +15,8 @@ import { IconLink } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { useId } from 'react'
 import { clamp } from 'remeda'
+import { useDiagramState } from '../../../hooks/useDiagramState'
 import { type DiagramState } from '../../../state/diagramStore'
-import { useDiagramState } from '../../../state/useDiagramStore'
 import type { XYFlowNode } from '../../types'
 import { elementLink, trigger } from './ElementLink.css'
 

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

@@ -1,12 +1,13 @@
 import type { DiagramNode } from '@likec4/core/types'
-import { Text as MantineText } from '@mantine/core'
-import { Handle, type NodeProps, Position } from '@xyflow/react'
+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 clsx from 'clsx'
 import { deepEqual as eq } from 'fast-equals'
 import { m, type Variants } from 'framer-motion'
 import { memo } from 'react'
 import { isNumber, isTruthy } from 'remeda'
-import { type DiagramStoreApi, useDiagramState, useDiagramStoreApi } from '../../../state/useDiagramStore'
+import { type DiagramStoreApi, useDiagramState, useDiagramStoreApi } from '../../../hooks/useDiagramState'
 import type { ElementXYFlowNode } from '../../types'
 import { toDomPrecision } from '../../utils'
 import { NavigateToBtn } from '../shared/NavigateToBtn'
@@ -89,12 +90,13 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
   height
 }) {
   const store = useDiagramStoreApi()
-  const { isHovered, isDimmed, hasOnNavigateTo, isHovercards, isInteractive } = useDiagramState(s => ({
+  const { isHovered, isDimmed, hasOnNavigateTo, isHovercards, isInteractive, hasGoToSource } = useDiagramState(s => ({
     isHovered: s.hoveredNodeId === id,
     isDimmed: s.dimmed.has(id),
     isInteractive: s.nodesDraggable || s.nodesSelectable || !!s.onNavigateTo,
     isHovercards: s.showElementLinks,
-    hasOnNavigateTo: !!s.onNavigateTo
+    hasOnNavigateTo: !!s.onNavigateTo,
+    hasGoToSource: !!s.onOpenSourceElement
   }))
   const isNavigable = hasOnNavigateTo && !!element.navigateTo
 

package/src/xyflow/nodes/shared/NavigateToBtn.tsx

@@ -1,7 +1,7 @@
 import { ActionIcon } from '@mantine/core'
 import { IconZoomScan } from '@tabler/icons-react'
 import clsx from 'clsx'
-import { useDiagramStoreApi } from '../../../state/useDiagramStore'
+import { useDiagramStoreApi } from '../../../hooks/useDiagramState'
 
 export type NavigateToBtnProps = {
   xynodeId: string

package/src/xyflow/{hooks/useLayoutConstraints.ts → useLayoutConstraints.ts}

@@ -4,9 +4,9 @@ import type { InternalNode, NodeChange, ReactFlowProps, XYPosition } from '@xyfl
 import { getNodeDimensions } from '@xyflow/system'
 import { useMemo, useRef } from 'react'
 import { isNullish } from 'remeda'
-import { useDiagramStoreApi } from '../../state/useDiagramStore'
-import type { XYFlowNode } from '../types'
-import { type XYStoreApi } from './useXYFlow'
+import { useDiagramStoreApi } from '../hooks'
+import { type XYStoreApi } from '../hooks/useXYFlow'
+import type { XYFlowNode } from './types'
 
 abstract class Rect {
   id!: string

package/src/xyflow/utils.ts

@@ -1,8 +1,9 @@
 import { hasAtLeast, invariant } from '@likec4/core'
 import type { DiagramEdge, Point } from '@likec4/core/types'
-import type { XYPosition } from '@xyflow/react'
+import type { Rect, XYPosition } from '@xyflow/react'
 import { Bezier } from 'bezier-js'
 import { isArray } from 'remeda'
+import type { InternalXYFlowNode } from './types'
 
 export function toDomPrecision(v: number | null) {
   if (v === null) {
@@ -15,6 +16,29 @@ export function distance(a: XYPosition, b: XYPosition) {
   return Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y, 2))
 }
 
+export const nodeToRect = (nd: InternalXYFlowNode): Rect => ({
+  x: nd.internals.positionAbsolute.x,
+  y: nd.internals.positionAbsolute.y,
+  width: nd.width ?? nd.data.element.width,
+  height: nd.height ?? nd.data.element.height
+})
+
+/**
+ * Checks if a rectangle is completely inside another rectangle.
+ *
+ * @param test - The rectangle to test.
+ * @param target - The target rectangle.
+ * @returns `true` if the `test` rectangle is completely inside the `target` rectangle, otherwise `false`.
+ */
+export const isInside = (test: Rect, target: Rect) => {
+  return (
+    test.x >= target.x
+    && test.y >= target.y
+    && test.x + test.width <= target.x + target.width
+    && test.y + test.height <= target.y + target.height
+  )
+}
+
 export function bezierControlPoints(diagramEdge: DiagramEdge) {
   let [start, ...bezierPoints] = diagramEdge.points
   invariant(start, 'start should be defined')

package/dist/state/hooks.d.ts

@@ -1,4 +0,0 @@
-export { useDiagramState, useDiagramStoreApi } from './useDiagramStore';
-export { useNavigationHistory } from './useNavigationHistory';
-export type * from './diagramStore';
-export type * from './useDiagramStore';

package/dist/state/index.d.ts

@@ -1,2 +0,0 @@
-export type * from './diagramStore';
-export type * from './useDiagramStore';

package/dist/state/useNavigationHistory.d.ts

@@ -1,5 +0,0 @@
-export declare function useNavigationHistory(): {
-    hasBack: boolean;
-    hasForward: boolean;
-    ops: import('@mantine/hooks').UseStateHistoryHandlers<import('@likec4/core').ViewID>;
-};

package/dist/types.d.ts

@@ -1,20 +0,0 @@
-import { Fqn, RelationID, ViewID } from '@likec4/core';
-import { Simplify } from 'type-fest';
-
-type TaggedUnion<TagKey extends string, UnionMembers extends Record<string, Record<string, unknown>>> = {
-    [Name in keyof UnionMembers]: Simplify<{
-        [Key in TagKey]: Name;
-    } & UnionMembers[Name]>;
-}[keyof UnionMembers];
-export type DiagramEditorCommand = TaggedUnion<'type', {
-    showElement: {
-        element: Fqn;
-    };
-    showRelation: {
-        relation: RelationID;
-    };
-    showView: {
-        view: ViewID;
-    };
-}>;
-export {};

package/dist/ui/BackwardForwardPanel.css.d.ts

@@ -1 +0,0 @@
-export declare const panel: string;

package/dist/ui/BackwardForwardPanel.d.ts

@@ -1 +0,0 @@
-export declare function BackwardForwardPanel(): import("react/jsx-runtime").JSX.Element;

package/dist/xyflow/hooks/index.d.ts

@@ -1,2 +0,0 @@
-export { useXYFlow, useXYNodesData, useXYStore, useXYStoreApi } from './useXYFlow';
-export type * from './useXYFlow';

package/src/state/hooks.ts

@@ -1,5 +0,0 @@
-export { useDiagramState, useDiagramStoreApi } from './useDiagramStore'
-export { useNavigationHistory } from './useNavigationHistory'
-
-export type * from './diagramStore'
-export type * from './useDiagramStore'

package/src/state/index.ts

@@ -1,2 +0,0 @@
-export type * from './diagramStore'
-export type * from './useDiagramStore'