@likec4/diagram 1.18.0 → 1.19.0

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

@@ -1,15 +1,16 @@
 import {
   type BorderStyle,
-  defaultTheme,
-  DiagramNode,
   type Element,
-  ElementShapes,
   type Fqn,
   type NonEmptyArray,
   type ThemeColor,
-  type ViewChange
+  type ViewChange,
+  defaultTheme,
+  DiagramNode,
+  ElementShapes,
 } from '@likec4/core'
 import {
+  type PopoverProps,
   ActionIcon,
   Box,
   Button,
@@ -26,7 +27,6 @@ import {
   Paper,
   Popover,
   PopoverDropdown,
-  type PopoverProps,
   PopoverTarget,
   rem,
   SegmentedControl,
@@ -35,10 +35,10 @@ import {
   Stack,
   Text,
   Tooltip as MantineTooltip,
-  TooltipGroup
+  TooltipGroup,
 } from '@mantine/core'
 import { IconCheck, IconFileSymlink, IconSelector, IconTransform } from '@tabler/icons-react'
-import { NodeToolbar, type NodeToolbarProps } from '@xyflow/react'
+import { type NodeToolbarProps, NodeToolbar } from '@xyflow/react'
 import clsx from 'clsx'
 import { useEffect, useState } from 'react'
 import type { MergeExclusive } from 'type-fest'
@@ -55,12 +55,12 @@ const {
 const themedColors = [
   { key: 'primary', value: primary.fill },
   { key: 'secondary', value: secondary.fill },
-  { key: 'muted', value: muted.fill }
+  { key: 'muted', value: muted.fill },
 ] satisfies Array<{ key: ThemeColor; value: string }>
 
 const colors = keys(otherColors).map(key => ({
   key,
-  value: defaultTheme.elements[key].fill
+  value: defaultTheme.elements[key].fill,
 }))
 
 type ThemeColorKey = typeof themedColors[0]['key']
@@ -73,7 +73,7 @@ const Tooltip = MantineTooltip.withProps({
   closeDelay: 150,
   label: '',
   children: null,
-  offset: 4
+  offset: 4,
 })
 
 type ToolbarProps = NodeToolbarProps & {
@@ -94,17 +94,17 @@ export function CompoundToolbar({
   const diagramApi = useDiagramStoreApi()
   const {
     hasGoToSource,
-    enableRelationshipBrowser
+    enableRelationshipBrowser,
   } = useDiagramState(s => ({
     hasGoToSource: !!s.onOpenSource,
-    enableRelationshipBrowser: s.enableRelationshipBrowser
+    enableRelationshipBrowser: s.enableRelationshipBrowser,
   }))
 
   const onChange: OnStyleChange = (style) => {
     diagramApi.getState().triggerChangeElementStyle({
       op: 'change-element-style',
       style,
-      targets
+      targets,
     })
   }
 
@@ -123,7 +123,7 @@ export function CompoundToolbar({
       />
       {hasGoToSource && modelRef && <GoToSourceButton elementId={modelRef} />}
       {hasGoToSource && !modelRef && deploymentRef && <GoToSourceButton deploymentId={deploymentRef} />}
-      {enableRelationshipBrowser && <BrowseRelationshipsButton elementId={element.id} />}
+      {enableRelationshipBrowser && !!modelRef && <BrowseRelationshipsButton elementId={modelRef} />}
     </Toolbar>
   )
 }
@@ -167,10 +167,10 @@ export function ElementToolbar({
   const diagramApi = useDiagramStoreApi()
   const {
     hasGoToSource,
-    enableRelationshipBrowser
+    enableRelationshipBrowser,
   } = useDiagramState(s => ({
     hasGoToSource: !!s.onOpenSource,
-    enableRelationshipBrowser: s.enableRelationshipBrowser
+    enableRelationshipBrowser: s.enableRelationshipBrowser,
   }))
   const portalProps = useMantinePortalProps()
 
@@ -178,7 +178,7 @@ export function ElementToolbar({
     diagramApi.getState().triggerChangeElementStyle({
       op: 'change-element-style',
       style,
-      targets
+      targets,
     })
   }
 
@@ -196,8 +196,8 @@ export function ElementToolbar({
         offset={2}
         styles={{
           item: {
-            padding: 'calc(var(--mantine-spacing-xs) / 1.5) var(--mantine-spacing-xs)'
-          }
+            padding: 'calc(var(--mantine-spacing-xs) / 1.5) var(--mantine-spacing-xs)',
+          },
         }}
         {...portalProps}
       >
@@ -243,7 +243,7 @@ export function ElementToolbar({
       />
       {hasGoToSource && modelRef && <GoToSourceButton elementId={modelRef} />}
       {hasGoToSource && !modelRef && deploymentRef && <GoToSourceButton deploymentId={deploymentRef} />}
-      {enableRelationshipBrowser && <BrowseRelationshipsButton elementId={element.id} />}
+      {enableRelationshipBrowser && !!modelRef && <BrowseRelationshipsButton elementId={modelRef} />}
     </Toolbar>
   )
 }
@@ -268,11 +268,11 @@ function GoToSourceButton(props: MergeExclusive<{ elementId: Fqn }, { deployment
           e.stopPropagation()
           if (props.elementId) {
             diagramApi.getState().onOpenSource?.({
-              element: props.elementId
+              element: props.elementId,
             })
           } else if (props.deploymentId) {
             diagramApi.getState().onOpenSource?.({
-              deployment: props.deploymentId
+              deployment: props.deploymentId,
             })
           }
         }}>
@@ -333,7 +333,7 @@ function ColorButton({
 function ColorSwatches({
   elementColor,
   onColorPreview,
-  onChange
+  onChange,
 }: {
   elementColor: ThemeColor
   onColorPreview: (color: ThemeColor | null) => void
@@ -408,7 +408,7 @@ function ColorSwatches({
 
 function BorderStyleOption({
   elementBorderStyle = 'dashed',
-  onChange
+  onChange,
 }: {
   elementBorderStyle: BorderStyle | undefined
   onChange: OnStyleChange
@@ -433,14 +433,14 @@ function BorderStyleOption({
         styles={{
           label: {
             paddingTop: 2,
-            paddingBottom: 2
-          }
+            paddingBottom: 2,
+          },
         }}
         data={[
           { label: 'Solid', value: 'solid' },
           { label: 'Dashed', value: 'dashed' },
           { label: 'Dotted', value: 'dotted' },
-          { label: 'None', value: 'none' }
+          { label: 'None', value: 'none' },
         ]}
       />
     </Box>
@@ -449,7 +449,7 @@ function BorderStyleOption({
 
 function OpacityOption({
   elementOpacity = 100,
-  onOpacityChange
+  onOpacityChange,
 }: {
   elementOpacity: number | undefined
   onOpacityChange: (opacity: number) => void
@@ -481,14 +481,14 @@ function BrowseRelationshipsButton({ elementId }: { elementId: Fqn }) {
         onClick={e => {
           e.stopPropagation()
           diagramApi.getState().openOverlay({
-            relationshipsOf: elementId
+            relationshipsOf: elementId,
           })
         }}>
         <IconTransform
           stroke={2}
           style={{
             width: '72%',
-            height: '72%'
+            height: '72%',
           }} />
       </ActionIcon>
     </Tooltip>

package/src/xyflow/types.ts

@@ -1,60 +1,57 @@
-import type { BBox, DiagramEdge, DiagramNode, Fqn, XYPoint } from '@likec4/core'
-import type { Edge, InternalNode, Node, ReactFlowInstance, ReactFlowState } from '@xyflow/react'
-import { isNode } from '@xyflow/react'
-import { isTruthy } from 'remeda'
-import type { Simplify } from 'type-fest'
-
-export type ElementXYFlowNode = Node<{
-  fqn: Fqn
-  element: DiagramNode
-}, 'element'>
-
-export type CompoundXYFlowNode = Node<{
-  fqn: Fqn
-  isViewGroup: boolean
-  element: DiagramNode
-}, 'compound'>
-
-export type XYFlowNode = ElementXYFlowNode | CompoundXYFlowNode
-
-export type InternalXYFlowNode = InternalNode<XYFlowNode>
-
-export namespace XYFlowNode {
-  export function isCompound(node: unknown): node is CompoundXYFlowNode {
-    return isNode(node) && node.type === 'compound'
+import type { BBox, DiagramEdge, DiagramNode, XYPoint } from '@likec4/core'
+import type { Edge as ReactFlowEdge, InternalNode as ReactFlowInternalNode, Node as ReactFlowNode, ReactFlowInstance, ReactFlowState } from '@xyflow/react'
+import type { SetRequired, Simplify } from 'type-fest'
+import type { SharedFlowTypes } from '../overlays/shared/xyflow/_types'
+
+export namespace DiagramFlowTypes {
+
+  export type NodeData = {
+    /**
+     * The DiagramNode backing this node.
+     */
+    element: DiagramNode
   }
-  export function isElement(node: Node): node is ElementXYFlowNode {
-    return isNode(node) && node.type === 'element'
+
+  export type CompoundNodeData = NodeData & {
+    /**
+     * Whether this node is a view group.
+     */
+    isViewGroup: boolean
   }
 
-  export const is = (node: Node): node is XYFlowNode => isCompound(node) || isElement(node)
-}
+  export type ElementNode = SetRequired<ReactFlowNode<
+      SharedFlowTypes.NonEmptyNodeData & NodeData,
+      'element'>,
+    'type'>
 
-export type RelationshipData = {
-  edge: DiagramEdge
-  // if set - edge was changed by user
-  controlPoints: XYPoint[] | null
-  label: null | {
-    bbox: BBox
-    text: string
-  }
-}
+  export type CompoundNode = SetRequired<ReactFlowNode<
+      SharedFlowTypes.NonEmptyNodeData & CompoundNodeData,
+      'compound'>,
+    'type'>
 
-export type RelationshipEdge = Simplify<
-  Edge<RelationshipData, 'relationship'> & {
-    type: 'relationship'
-    // Make field required
-    data: RelationshipData
-  }
->
+  export type Node = ElementNode | CompoundNode
 
-export type XYFlowEdge = RelationshipEdge
+  export type InternalNode = ReactFlowInternalNode<Node>
 
-export namespace XYFlowEdge {
-  export type Data = RelationshipData
+  export type XYFlowInstance = ReactFlowInstance<Node, Edge>
 
-  export const isRelationship = (e: Edge): e is RelationshipEdge => e.type === 'relationship' && isTruthy(e.data)
-}
+  export type XYFlowState = ReactFlowState<Node, Edge>
+
+  export type DiagramEdgeData = {
+    edge: DiagramEdge
+    // if set - edge was changed by user
+    controlPoints: XYPoint[] | null
+    label: null | {
+      bbox: BBox
+      text: string
+    }
+  }
 
-export type XYFlowInstance = ReactFlowInstance<XYFlowNode, XYFlowEdge>
-export type XYFlowState = ReactFlowState<XYFlowNode, XYFlowEdge>
+  export type Edge = Simplify<
+    ReactFlowEdge<DiagramEdgeData, 'relationship'> & {
+      type: 'relationship'
+      // Make field required
+      data: DiagramEdgeData
+    }
+  >
+}

package/src/xyflow/useLayoutConstraints.ts

@@ -1,11 +1,11 @@
 import { type NodeId, type NonEmptyArray, nonNullable } from '@likec4/core'
-import type { InternalNode, NodeChange, ReactFlowProps, XYPosition } from '@xyflow/react'
+import type { NodeChange, ReactFlowProps, XYPosition } from '@xyflow/react'
 import { getNodeDimensions } from '@xyflow/system'
 import { useMemo, useRef } from 'react'
 import { filter, hasAtLeast, isNullish, map, pipe } from 'remeda'
 import { useDiagramStoreApi } from '../hooks'
 import { type XYStoreApi } from '../hooks/useXYFlow'
-import type { XYFlowNode } from './types'
+import type { DiagramFlowTypes } from './types'
 
 abstract class Rect {
   static readonly LeftPadding = 40
@@ -60,7 +60,7 @@ class Compound extends Rect {
   public readonly children = [] as Rect[]
 
   constructor(
-    xynode: InternalNode<XYFlowNode>,
+    xynode: DiagramFlowTypes.InternalNode,
     protected readonly parent: Compound | null = null
   ) {
     super()
@@ -74,7 +74,7 @@ class Compound extends Rect {
 
 class Leaf extends Rect {
   constructor(
-    xynode: InternalNode<XYFlowNode>,
+    xynode: DiagramFlowTypes.InternalNode,
     public readonly parent: Compound | null = null
   ) {
     super()
@@ -94,7 +94,7 @@ class Leaf extends Rect {
 }
 
 type NodePositionUpdater = (
-  nodes: Array<{ rect: Rect | Compound; node: InternalNode<XYFlowNode> }>
+  nodes: Array<{ rect: Rect | Compound; node: DiagramFlowTypes.InternalNode }>
 ) => void
 
 export function createLayoutConstraints(
@@ -108,7 +108,7 @@ export function createLayoutConstraints(
     const ancestors = [] as string[]
     const xynode = nodeLookup.get(nodeId)
     let parent = xynode?.parentId
-    let parentNode: InternalNode<XYFlowNode> | undefined
+    let parentNode: DiagramFlowTypes.InternalNode | undefined
     while (parent && (parentNode = nodeLookup.get(parent))) {
       ancestors.push(parentNode.id as NodeId)
       parent = parentNode.parentId
@@ -120,7 +120,7 @@ export function createLayoutConstraints(
     editingNodeIds.flatMap(ancestorsOf)
   )
 
-  const traverse = new Array<{ xynode: InternalNode<XYFlowNode>; parent: Compound | null }>()
+  const traverse = new Array<{ xynode: DiagramFlowTypes.InternalNode; parent: Compound | null }>()
 
   for (const [, xynode] of nodeLookup) {
     if (isNullish(xynode.parentId)) {
@@ -200,7 +200,7 @@ export function createLayoutConstraints(
           })
         }
         return acc
-      }, [] as NodeChange<XYFlowNode>[])
+      }, [] as NodeChange<DiagramFlowTypes.Node>[])
     )
   }
 
@@ -234,7 +234,7 @@ export function createLayoutConstraints(
   }
 }
 
-type LayoutConstraints = Required<Pick<ReactFlowProps<XYFlowNode>, 'onNodeDragStart' | 'onNodeDrag' | 'onNodeDragStop'>>
+type LayoutConstraints = Required<Pick<ReactFlowProps<DiagramFlowTypes.Node>, 'onNodeDragStart' | 'onNodeDrag' | 'onNodeDragStop'>>
 /**
  * Keeps the layout constraints (parent nodes and children) when dragging a node
  */

package/src/xyflow/useXYFlowEvents.ts

@@ -1,15 +1,15 @@
 import { DiagramNode } from '@likec4/core'
 import type { ReactFlowProps } from '@xyflow/react'
 import { useMemo, useRef } from 'react'
-import { isNonNullish, isTruthy } from 'remeda'
+import { first, isNonNullish, isTruthy } from 'remeda'
 import type { Simplify } from 'type-fest'
 import { useDiagramStoreApi } from '../hooks/useDiagramState'
-import type { XYFlowEdge, XYFlowNode } from './types'
+import type { DiagramFlowTypes } from './types'
 
 export type XYFlowEventHandlers = Simplify<
   Required<
     Pick<
-      ReactFlowProps<XYFlowNode, XYFlowEdge>,
+      ReactFlowProps<DiagramFlowTypes.Node, DiagramFlowTypes.Edge>,
       | 'onDoubleClick'
       | 'onPaneClick'
       | 'onNodeClick'
@@ -20,8 +20,6 @@ export type XYFlowEventHandlers = Simplify<
       | 'onNodeContextMenu'
       | 'onEdgeContextMenu'
       | 'onPaneContextMenu'
-      | 'onNodeMouseEnter'
-      | 'onNodeMouseLeave'
       | 'onEdgeMouseEnter'
       | 'onEdgeMouseLeave'
     >
@@ -35,10 +33,6 @@ export function useXYFlowEvents() {
 
   const dblclickTimeout = useRef<number>()
 
-  // If we are in focused mode, on edge enter we want to "highlight" the other node
-  // This ref contains the id of this node
-  const hoveredNodeFromOnEdgeEnterRef = useRef('')
-
   return useMemo(() => {
     const dbclickLock = () => {
       if (dblclickTimeout.current !== undefined) {
@@ -211,6 +205,7 @@ export function useXYFlowEvents() {
           focusedNodeId,
           xystore,
           nodesSelectable,
+          onOpenSource,
           focusOnNode,
           onEdgeClick,
           setLastClickedEdge
@@ -244,6 +239,12 @@ export function useXYFlowEvents() {
             event.stopPropagation()
             return
           }
+        } else if (onOpenSource && !onEdgeClick) {
+          onOpenSource({
+            relation: first(xyedge.data.edge.relations)!
+          })
+          event.stopPropagation()
+          return
         } else if (nodesSelectable) {
           xystore.getState().addSelectedEdges([xyedge.id])
           if (!onEdgeClick) {
@@ -299,33 +300,15 @@ export function useXYFlowEvents() {
           diagramApi.setState({ viewportChanged }, false, `viewport-changed: ${viewportChanged}`)
         }
       },
-      onNodeMouseEnter: (_event, xynode) => {
-        hoveredNodeFromOnEdgeEnterRef.current = ''
-        diagramApi.getState().setHoveredNode(xynode.id)
-      },
-      onNodeMouseLeave: (_event, xynode) => {
-        const { hoveredNodeId, setHoveredNode } = diagramApi.getState()
-        if (hoveredNodeId === xynode.id) {
-          setHoveredNode(null)
-        }
-      },
-      onEdgeMouseEnter: (_event, { id, source, target }) => {
-        const { hoveredNodeId, focusedNodeId, setHoveredEdge, setHoveredNode } = diagramApi.getState()
+      onEdgeMouseEnter: (_event, { id }) => {
+        const { setHoveredEdge } = diagramApi.getState()
         setHoveredEdge(id)
-        if ((focusedNodeId === source || focusedNodeId === target) && focusedNodeId !== hoveredNodeId) {
-          const next = hoveredNodeFromOnEdgeEnterRef.current = source === focusedNodeId ? target : source
-          setHoveredNode(next)
-        }
       },
       onEdgeMouseLeave: (_event, xyedge) => {
-        const { hoveredEdgeId, setHoveredEdge, hoveredNodeId, setHoveredNode } = diagramApi.getState()
+        const { hoveredEdgeId, setHoveredEdge } = diagramApi.getState()
         if (hoveredEdgeId === xyedge.id) {
           setHoveredEdge(null)
         }
-        if (hoveredNodeId === hoveredNodeFromOnEdgeEnterRef.current) {
-          setHoveredNode(null)
-        }
-        hoveredNodeFromOnEdgeEnterRef.current = ''
       }
     }) satisfies XYFlowEventHandlers
   }, [diagramApi])

package/src/xyflow/utils.ts

@@ -4,7 +4,7 @@ import type { InternalNode, Rect, XYPosition } from '@xyflow/react'
 import { getNodeDimensions } from '@xyflow/system'
 import { Bezier } from 'bezier-js'
 import { isArray } from 'remeda'
-import type { InternalXYFlowNode } from './types'
+import type { DiagramFlowTypes } from './types'
 
 export function toDomPrecision(v: number | null) {
   if (v === null) {
@@ -17,7 +17,7 @@ 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 => ({
+export const nodeToRect = (nd: DiagramFlowTypes.InternalNode): Rect => ({
   x: nd.internals.positionAbsolute.x,
   y: nd.internals.positionAbsolute.y,
   width: nd.measured.width ?? nd.width ?? nd.data.element.width,

package/src/xyflow/nodes/use-animate-variants.tsx

@@ -1,64 +0,0 @@
-import { useMemo, useState } from 'react'
-import { isEmpty, isString } from 'remeda'
-
-export function useFramerAnimateVariants() {
-  const [variants, setVariants] = useState<string[] | null>(null)
-
-  const handlers = useMemo(() => {
-    const getTarget = (e: MouseEvent | undefined) => {
-      try {
-        // 🤔 Sometimes target is null
-        return (e?.target as HTMLElement | null)?.closest('[data-animate-target]')?.getAttribute('data-animate-target')
-          ?? null
-      } catch (_e) {
-        console.warn(`Failed to get animate target`, _e)
-        // noop
-        return null
-      }
-    }
-
-    const onHoverStart = (e: MouseEvent) => {
-      e?.stopPropagation()
-      const hoverTarget = getTarget(e)
-      if (!isString(hoverTarget) || isEmpty(hoverTarget)) {
-        setVariants(null)
-        return
-      }
-      setVariants(['hovered', `hovered:${hoverTarget}`])
-    }
-
-    const resetVariants = (e: MouseEvent) => {
-      e?.stopPropagation()
-      setVariants(null)
-    }
-
-    return ({
-      onTapStart: (e: MouseEvent) => {
-        e?.stopPropagation()
-        const tapTarget = getTarget(e)
-        if (!isString(tapTarget)) {
-          setVariants(null)
-          return
-        }
-        if (isEmpty(tapTarget)) {
-          setVariants([
-            'hovered',
-            'tap'
-          ])
-        } else {
-          setVariants([
-            'hovered',
-            `hovered:${tapTarget}`,
-            `tap:${tapTarget}`
-          ])
-        }
-      },
-      onHoverStart,
-      onHoverEnd: resetVariants,
-      onTapCancel: resetVariants,
-      onTap: onHoverStart
-    })
-  }, [setVariants])
-
-  return [variants, handlers] as const
-}