@likec4/diagram 1.17.1 → 1.19.0

package/src/overlays/relationships-of/xyflow/CompoundNode.tsx

@@ -1,17 +1,13 @@
-import { Text as MantineText } from '@mantine/core'
 import { Handle, type NodeProps, Position, useStore } from '@xyflow/react'
 import clsx from 'clsx'
 import { deepEqual, shallowEqual } from 'fast-equals'
 import { m } from 'framer-motion'
 import { memo, useCallback } from 'react'
-import type { XYFlowTypes } from '../_types'
+import type { RelationshipsOfFlowTypes } from '../_types'
 import * as css from './styles.css'
+import { Text } from '../../../controls/Text'
 
-const Text = MantineText.withProps({
-  component: 'div'
-})
-
-type CompoundNodeProps = NodeProps<XYFlowTypes.CompoundNode>
+type CompoundNodeProps = NodeProps<RelationshipsOfFlowTypes.CompoundNode>
 
 export const CompoundNode = memo<CompoundNodeProps>(({
   id,
@@ -20,7 +16,7 @@ export const CompoundNode = memo<CompoundNodeProps>(({
     ports,
     layoutId = id,
     leaving = false,
-    initialAnimation = true,
+    entering = true,
     ...data
   },
   width = 200,
@@ -61,7 +57,7 @@ export const CompoundNode = memo<CompoundNodeProps>(({
         layoutId={layoutId}
         data-compound-depth={data.depth ?? 1}
         data-likec4-color={element.color}
-        initial={(layoutId === id && initialAnimation)
+        initial={(layoutId === id && entering)
           ? {
             ...scale(-20),
             opacity: 0,
@@ -86,14 +82,12 @@ export const CompoundNode = memo<CompoundNodeProps>(({
         {...(selectable && {
           whileHover: {
             ...scale(12),
-            scaleX: (width + 12) / width,
-            scaleY: (height + 12) / height,
             transition: {
               delay: 0.1
             }
           },
           whileTap: {
-            ...scale(-12)
+            ...scale(-8)
           }
         })}
       >
@@ -101,22 +95,22 @@ export const CompoundNode = memo<CompoundNodeProps>(({
           {element.title}
         </Text>
       </m.div>
-      {ports.left.map(({ id, type }, i) => (
+      {ports.in.map((id, i) => (
         <Handle
           key={id}
           id={id}
-          type={type === 'in' ? 'target' : 'source'}
+          type="target"
           position={Position.Left}
           style={{
             visibility: 'hidden',
             top: `${20 * (i + 1)}px`
           }} />
       ))}
-      {ports.right.map(({ id, type }, i) => (
+      {ports.out.map((id, i) => (
         <Handle
           key={id}
           id={id}
-          type={type === 'in' ? 'target' : 'source'}
+          type="source"
           position={Position.Right}
           style={{
             visibility: 'hidden',

package/src/overlays/relationships-of/xyflow/ElementNode.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Box, Group, Text as MantineText } from '@mantine/core'
+import { ActionIcon, Box, Group } from '@mantine/core'
 import { IconFileSymlink, IconTransform, IconZoomScan } from '@tabler/icons-react'
 import { Handle, type NodeProps, Position } from '@xyflow/react'
 import clsx from 'clsx'
@@ -9,8 +9,9 @@ import { type DiagramState, useDiagramState } from '../../../hooks'
 import { ElementShapeSvg } from '../../../xyflow/nodes/element/ElementShapeSvg'
 import { stopPropagation } from '../../../xyflow/utils'
 import { useOverlayDialog } from '../../OverlayContext'
-import type { XYFlowTypes } from '../_types'
+import type { RelationshipsOfFlowTypes } from '../_types'
 import * as css from './styles.css'
+import { Text } from '../../../controls/Text'
 
 const Action = ActionIcon.withProps({
   className: 'nodrag nopan ' + css.navigateBtn,
@@ -20,17 +21,13 @@ const Action = ActionIcon.withProps({
   onPointerDownCapture: stopPropagation
 })
 
-const Text = MantineText.withProps({
-  component: 'div'
-})
-
-type ElementNodeProps = NodeProps<XYFlowTypes.ElementNode>
+type ElementNodeProps = NodeProps<RelationshipsOfFlowTypes.ElementNode>
 
 function selector(s: DiagramState) {
   return {
     currentViewId: s.view.id,
     onNavigateTo: s.onNavigateTo,
-    onOpenSource: s.onOpenSourceElement
+    onOpenSource: s.onOpenSource
   }
 }
 
@@ -42,7 +39,7 @@ export const ElementNode = memo<ElementNodeProps>(({
     navigateTo,
     layoutId = id,
     leaving = false,
-    initialAnimation = true,
+    entering = true,
     ...data
   },
   selectable = true,
@@ -56,10 +53,14 @@ export const ElementNode = memo<ElementNodeProps>(({
     onOpenSource
   } = useDiagramState(selector)
 
-  const scale = (diff: number) => ({
-    scaleX: (w + diff) / w,
-    scaleY: (h + diff) / h
-  })
+  const maxWH = Math.max(w, h)
+  const scale = (diff: number) => {
+    const s = (maxWH + diff) / maxWH
+    return ({
+      scaleX: s,
+      scaleY: s
+    })
+  }
 
   let opacity = 1
   if (data.dimmed) {
@@ -78,7 +79,7 @@ export const ElementNode = memo<ElementNodeProps>(({
         ])}
         layoutId={layoutId}
         data-likec4-color={element.color}
-        initial={(layoutId === id && initialAnimation)
+        initial={(layoutId === id && entering)
           ? {
             ...scale(-20),
             opacity: 0,
@@ -155,33 +156,35 @@ export const ElementNode = memo<ElementNodeProps>(({
             <Action
               onClick={(event) => {
                 event.stopPropagation()
-                onOpenSource(data.fqn)
+                onOpenSource?.({
+                  element: data.fqn
+                })
               }}>
               <IconFileSymlink stroke={1.8} style={{ width: '72%' }} />
             </Action>
           )}
         </Group>
       </m.div>
-      {ports.left.map(({ id, type }, i) => (
+      {ports.in.map((id, i) => (
         <Handle
           key={id}
           id={id}
-          type={type === 'in' ? 'target' : 'source'}
+          type="target"
           position={Position.Left}
           style={{
             visibility: 'hidden',
-            top: `${15 + (i + 1) * ((h - 30) / (ports.left.length + 1))}px`
+            top: `${15 + (i + 1) * ((h - 30) / (ports.in.length + 1))}px`
           }} />
       ))}
-      {ports.right.map(({ id, type }, i) => (
+      {ports.out.map((id, i) => (
         <Handle
           key={id}
           id={id}
-          type={type === 'in' ? 'target' : 'source'}
+          type="source"
           position={Position.Right}
           style={{
             visibility: 'hidden',
-            top: `${15 + (i + 1) * ((h - 30) / (ports.right.length + 1))}px`
+            top: `${15 + (i + 1) * ((h - 30) / (ports.out.length + 1))}px`
           }} />
       ))}
     </>

package/src/overlays/relationships-of/xyflow/EmptyNode.tsx

@@ -1,13 +1,10 @@
-import { Box, Text as MantineText } from '@mantine/core'
+import { Box } from '@mantine/core'
 import { type NodeProps } from '@xyflow/react'
-import type { XYFlowTypes } from '../_types'
+import type { RelationshipsOfFlowTypes } from '../_types'
 import * as css from './styles.css'
+import { Text } from '../../../controls/Text'
 
-const Text = MantineText.withProps({
-  component: 'div'
-})
-
-type EmptyNodeProps = NodeProps<XYFlowTypes.EmptyNode>
+type EmptyNodeProps = NodeProps<RelationshipsOfFlowTypes.EmptyNode>
 
 export function EmptyNode({
   data: {

package/src/overlays/relationships-of/xyflow/RelationshipEdge.tsx

@@ -1,15 +1,14 @@
 import { ActionIcon, Box, Group, Stack, Text, ThemeIcon, Tooltip as MantineTooltip } from '@mantine/core'
 import { IconBoxMultipleFilled, IconZoomScan } from '@tabler/icons-react'
-import { BaseEdge, EdgeLabelRenderer, type EdgeProps, getBezierPath } from '@xyflow/react'
+import { type EdgeProps, BaseEdge, EdgeLabelRenderer, getBezierPath } from '@xyflow/react'
 import clsx from 'clsx'
-import { useEffect, useRef } from 'react'
 import { only } from 'remeda'
 import { useDiagramState } from '../../../hooks/useDiagramState'
 import { stopPropagation } from '../../../xyflow/utils'
 import { useOverlayDialog } from '../../OverlayContext'
-import type { XYFlowTypes } from '../_types'
+import * as css from '../../shared/xyflow/RelationshipEdge.css'
+import type { RelationshipsOfFlowTypes } from '../_types'
 import { ZIndexes } from '../use-layouted-relationships'
-import * as css from './styles.css'
 
 const Tooltip = MantineTooltip.withProps({
   color: 'dark',
@@ -19,20 +18,22 @@ const Tooltip = MantineTooltip.withProps({
   withinPortal: false,
   label: '',
   children: null,
-  offset: 4
+  offset: 4,
 })
 
 export function RelationshipEdge({
   data,
   label,
+  // Exclude the following props from the rest
+  animated: _animated,
   ...props
-}: EdgeProps<XYFlowTypes.Edge>) {
+}: EdgeProps<RelationshipsOfFlowTypes.Edge>) {
   const {
     viewId,
-    onNavigateTo
+    onNavigateTo,
   } = useDiagramState(s => ({
     viewId: s.view.id,
-    onNavigateTo: s.onNavigateTo
+    onNavigateTo: s.onNavigateTo,
   }))
   const overlay = useOverlayDialog()
   const [edgePath, labelX, labelY] = getBezierPath(props)
@@ -46,7 +47,7 @@ export function RelationshipEdge({
         className={css.edgeContainer}
         data-edge-dimmed={data.dimmed}
         data-edge-hovered={data.hovered}
-        data-likec4-color={data.includedInCurrentView ? 'gray' : 'amber'}
+        data-likec4-color={data.existsInCurrentView ? 'gray' : 'amber'}
       >
         <BaseEdge
           path={edgePath}
@@ -60,19 +61,19 @@ export function RelationshipEdge({
             position: 'absolute',
             transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
             maxWidth: Math.abs(props.targetX - props.sourceX - 70),
-            zIndex: ZIndexes.max
+            zIndex: ZIndexes.max,
           }}
           className={clsx([
             css.edgeLabel,
-            'nodrag nopan'
+            'nodrag nopan',
           ])}
           data-edge-dimmed={data.dimmed}
           data-edge-hovered={data.hovered}
-          data-likec4-color={data.includedInCurrentView ? 'gray' : 'amber'}
-          // {...data.includedInCurrentView === false && { 'data-likec4-color': 'amber' }}
+          data-likec4-color={data.existsInCurrentView ? 'gray' : 'amber'}
+          // {...data.existsInCurrentView === false && { 'data-likec4-color': 'amber' }}
         >
           {label && (
-            <Tooltip label="Not included in current view" disabled={data.includedInCurrentView} color={'orange'}>
+            <Tooltip label="Not included in current view" disabled={data.existsInCurrentView} color={'orange'}>
               <Group gap={6} wrap="nowrap">
                 {isMultiRelation && (
                   <ThemeIcon size={'sm'} variant="transparent" color="orange">
@@ -82,7 +83,7 @@ export function RelationshipEdge({
                 <Text
                   fw={isMultiRelation ? '500' : '400'}
                   style={{
-                    whiteSpace: isMultiRelation ? 'nowrap' : undefined
+                    whiteSpace: isMultiRelation ? 'nowrap' : undefined,
                   }}
                   component={'div'}
                   className={css.edgeLabelText}

package/src/overlays/shared/xyflow/RelationshipEdge.css.ts

@@ -0,0 +1,60 @@
+import { style } from '@vanilla-extract/css'
+import { mantine, transitions, vars, whereDark, xyvars } from '../../../theme-vars'
+import { mixColor } from '../../Overlays.css'
+
+const DimmedTransitionDelay = '400ms'
+
+export const edgeContainer = style({
+  opacity: 1,
+  transition: transitions.fast,
+  vars: {
+    [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) 50%)`,
+    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 20%)`
+  },
+  selectors: {
+    [`&[data-edge-dimmed='true']`]: {
+      opacity: 0.2,
+      transitionDelay: DimmedTransitionDelay
+    },
+    [`&[data-edge-dimmed='immediate']`]: {
+      opacity: 0.2
+    },
+    [`${whereDark} &`]: {
+      vars: {
+        [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 50%)`
+      }
+    }
+  }
+})
+
+export const edgeLabel = style([edgeContainer, {
+  padding: '2px 5px',
+  fontFamily: vars.likec4.font,
+  position: 'absolute',
+  cursor: 'pointer',
+  width: 'fit-content',
+  color: xyvars.edge.labelColor,
+  backgroundColor: xyvars.edge.labelBgColor,
+  borderRadius: 4,
+  // everything inside EdgeLabelRenderer has no pointer events by default
+  // if you have an interactive element, set pointer-events: all
+  pointerEvents: 'all',
+  textWrap: 'pretty',
+  whiteSpace: 'preserve-breaks'
+}])
+
+export const edgeLabelText = style({
+  textAlign: 'center',
+  whiteSpaceCollapse: 'preserve-breaks',
+  fontSize: mantine.fontSizes.md,
+  lineHeight: mantine.lineHeights.xs
+})
+
+export const edgeLabelTechnology = style({
+  textAlign: 'center',
+  whiteSpaceCollapse: 'preserve-breaks',
+  fontSize: mantine.fontSizes.sm,
+  lineHeight: 1
+})

package/src/overlays/shared/xyflow/_types.ts

@@ -0,0 +1,87 @@
+import type { AbstractRelation, ComputedNode, Fqn, ViewId } from '@likec4/core'
+import type { Edge as ReactFlowEdge, Node as ReactFlowNode } from '@xyflow/react'
+import type { SetRequired } from 'type-fest'
+
+export namespace SharedFlowTypes {
+  export type EmptyNodeData = {
+    /**
+     * Whether the cursor is hovering over the node
+     */
+    hovered?: boolean
+    /**
+     * Whether the node is currently leaving the overlay
+     */
+    leaving?: boolean
+    /**
+     * Whether the node is currently entering the overlay
+     * @default true
+     */
+    entering?: boolean
+    /**
+     * Whether the node is dimmed
+     * 'immediate' means that the node is dimmed without delay
+     */
+    dimmed?: 'immediate' | boolean
+  }
+
+  export type NonEmptyNodeData = EmptyNodeData & {
+    /**
+     * The node's fully qualified name
+     */
+    fqn: Fqn
+  }
+
+  export type OverlayNodeData = NonEmptyNodeData & {
+    /**
+     * The ComputedNode backing this node
+     */
+    element: Pick<ComputedNode, 'color' | 'title' | 'description' | 'shape' | 'kind'>
+    /**
+     * The node's incoming and outgoing ports
+     */
+    ports: {
+      in: string[]
+      out: string[]
+    }
+    /**
+     * The id of the view that should be navigated to when clicking the navigate button
+     */
+    navigateTo: ViewId | null
+    /**
+     * The node's visual depth on the screen, 1 being the highest
+     */
+    depth?: number
+  }
+
+  export type ElementNode = SetRequired<ReactFlowNode<OverlayNodeData, 'element'>, 'type'>
+
+  export type CompoundNode = SetRequired<ReactFlowNode<OverlayNodeData, 'compound'>, 'type'>
+
+  export type NonEmptyNode = ElementNode | CompoundNode
+
+  export type EmptyNode = SetRequired<ReactFlowNode<EmptyNodeData, 'empty'>, 'type'>
+
+  export type Node = NonEmptyNode | EmptyNode
+
+  export type EdgeData = {
+    /**
+     * The model's relations represented by this edge
+     */
+    relations: [AbstractRelation, ...AbstractRelation[]]
+    /**
+     * Whether the cursor is hovering over the node
+     */
+    hovered?: boolean
+    /**
+     * Whether the node is dimmed
+     * 'immediate' means that the node is dimmed without delay
+     */
+    dimmed?: 'immediate' | boolean
+    /**
+     * The id of the view that should be navigated to when clicking the edge
+     */
+    navigateTo?: ViewId | null
+  }
+
+  export type Edge = SetRequired<ReactFlowEdge<EdgeData, 'relation'>, 'data' | 'type'>
+}

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

@@ -1,10 +1,9 @@
 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'
+import type { DiagramFlowTypes } from '../xyflow/types'
 
 // const nodeZIndex = (node: DiagramNode) => node.level - (node.children.length > 0 ? 1 : 0)
 
@@ -16,12 +15,12 @@ export function diagramViewToXYFlowData(
     selectable: boolean
   }
 ): {
-  xynodes: XYFlowNode[]
-  xyedges: XYFlowEdge[]
+  xynodes: DiagramFlowTypes.Node[]
+  xyedges: DiagramFlowTypes.Edge[]
 } {
   const isDynamicView = view.__ === 'dynamic',
-    xynodes = [] as XYFlowNode[],
-    xyedges = [] as XYFlowEdge[],
+    xynodes = [] as DiagramFlowTypes.Node[],
+    xyedges = [] as DiagramFlowTypes.Edge[],
     nodeLookup = new Map<Fqn, DiagramNode>()
 
   const traverse = view.nodes.reduce(
@@ -72,7 +71,7 @@ export function diagramViewToXYFlowData(
 
     const id = ns + node.id
 
-    const base: Omit<UnionToIntersection<XYFlowNode>, 'data'> = {
+    const base: Omit<DiagramFlowTypes.Node, 'data' | 'type'> = {
       id,
       draggable: opts.draggable,
       selectable: opts.selectable && node.kind !== ElementKind.Group,

package/src/state/diagramStore.layout.ts

@@ -1,11 +1,10 @@
 import { nonexhaustive } from '@likec4/core'
-import type { InternalNode } from '@xyflow/react'
 import { getNodeDimensions } from '@xyflow/system'
 import { hasAtLeast } from 'remeda'
 import type { DiagramState } from '../hooks'
-import type { XYFlowNode } from '../xyflow/types'
 import { createLayoutConstraints } from '../xyflow/useLayoutConstraints'
 import { type Aligner, getLinearAligner, GridAligner, type GridAlignmentMode, type LinearAlignmentMode, type NodeRect } from './aligners'
+import type { DiagramFlowTypes } from '../xyflow/types'
 
 export type AlignmentMode = LinearAlignmentMode | GridAlignmentMode
 
@@ -40,7 +39,7 @@ export function align(get: () => DiagramState) {
   }
 }
 
-function toNodeRect(node: InternalNode<XYFlowNode>): NodeRect {
+function toNodeRect(node: DiagramFlowTypes.InternalNode): NodeRect {
   return {
     ...node.internals.positionAbsolute,
     id: node.id,
@@ -64,4 +63,4 @@ function getAligner(mode: AlignmentMode): Aligner {
     default:
       nonexhaustive(mode)
   }
-}
+}