@likec4/diagram 1.19.1 → 1.20.0

package/src/base/BaseXYFlow.tsx

@@ -0,0 +1,200 @@
+import { useCallbackRef } from '@mantine/hooks'
+import {
+  type ReactFlowProps,
+  ReactFlow,
+  useOnViewportChange,
+  useStoreApi,
+} from '@xyflow/react'
+import clsx from 'clsx'
+import { useEffect, useMemo } from 'react'
+import type { SetRequired, Simplify } from 'type-fest'
+import * as css from '../LikeC4Diagram.css'
+import { stopPropagation } from '../utils/xyflow'
+import { type XYBackground, Background } from './Background'
+import { MaxZoom, MinZoom } from './const'
+import { Base } from './types'
+
+export type BaseXYFlowProps<NodeType extends Base.Node, EdgeType extends Base.Edge> = Simplify<
+  & {
+    pannable?: boolean
+    zoomable?: boolean
+    nodesSelectable?: boolean
+    nodesDraggable?: boolean
+    background?: 'transparent' | 'solid' | XYBackground
+    fitViewPadding?: number
+    onViewportResize?: undefined | (() => void)
+  }
+  & SetRequired<
+    Omit<
+      ReactFlowProps<NodeType, EdgeType>,
+      // Omited props
+      | 'defaultNodes'
+      | 'defaultEdges'
+      | 'panOnScroll'
+      | 'panOnDrag'
+      | 'preventScrolling'
+      | 'zoomOnPinch'
+      | 'zoomActivationKeyCode'
+      | 'zoomOnScroll'
+      | 'elementsSelectable'
+      | 'onNodeMouseEnter'
+      | 'onNodeMouseLeave'
+      | 'onEdgeMouseEnter'
+      | 'onEdgeMouseLeave'
+      | 'fitViewOptions'
+    >,
+    // Required props
+    | 'nodes'
+    | 'edges'
+    | 'onNodesChange'
+    | 'onEdgesChange'
+  >
+>
+
+export const BaseXYFlow = <
+  NodeType extends Base.Node,
+  EdgeType extends Base.Edge,
+>({
+  nodes,
+  edges,
+  onEdgesChange,
+  onNodesChange,
+  className,
+  pannable = true,
+  zoomable = true,
+  nodesSelectable = true,
+  nodesDraggable = false,
+  background = 'dots',
+  children,
+  colorMode = 'system',
+  fitViewPadding = 0,
+  fitView = true,
+  zoomOnDoubleClick = false,
+  onViewportResize,
+  ...props
+}: BaseXYFlowProps<NodeType, EdgeType>) => {
+  const isBgWithPattern = background !== 'transparent' && background !== 'solid'
+
+  return (
+    <ReactFlow<NodeType, EdgeType>
+      colorMode={colorMode}
+      nodes={nodes}
+      edges={edges}
+      className={clsx(
+        'likec4-diagram',
+        css.cssReactFlow,
+        pannable !== true && css.cssDisablePan,
+        background === 'transparent' && css.cssTransparentBg,
+        className,
+      )}
+      zoomOnPinch={zoomable}
+      zoomOnScroll={!pannable && zoomable}
+      {...(!zoomable && {
+        zoomActivationKeyCode: null,
+      })}
+      zoomOnDoubleClick={zoomOnDoubleClick}
+      maxZoom={zoomable ? MaxZoom : 1}
+      minZoom={zoomable ? MinZoom : 1}
+      fitView={fitView}
+      fitViewOptions={useMemo(() => ({
+        minZoom: MinZoom,
+        maxZoom: 1,
+        padding: fitViewPadding,
+        includeHiddenNodes: false,
+      }), [fitViewPadding])}
+      preventScrolling={zoomable || pannable}
+      defaultMarkerColor="var(--xy-edge-stroke)"
+      noDragClassName="nodrag"
+      noPanClassName="nopan"
+      panOnScroll={pannable}
+      panOnDrag={pannable}
+      {...(!pannable && {
+        selectionKeyCode: null,
+      })}
+      elementsSelectable={nodesSelectable}
+      nodesFocusable={nodesDraggable || nodesSelectable}
+      edgesFocusable={false}
+      nodesDraggable={nodesDraggable}
+      nodeDragThreshold={4}
+      nodeClickDistance={1.9}
+      paneClickDistance={1.9}
+      elevateNodesOnSelect={false} // or edges are not visible after select\
+      selectNodesOnDrag={false}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onNodeMouseEnter={useCallbackRef((_event, node) => {
+        onNodesChange([{
+          id: node.id,
+          type: 'replace',
+          item: Base.setHovered(node, true),
+        }])
+      })}
+      onNodeMouseLeave={useCallbackRef((_event, node) => {
+        onNodesChange([{
+          id: node.id,
+          type: 'replace',
+          item: Base.setHovered(node, false),
+        }])
+      })}
+      onEdgeMouseEnter={useCallbackRef((_event, edge) => {
+        onEdgesChange([{
+          id: edge.id,
+          type: 'replace',
+          item: Base.setHovered(edge, true),
+        }])
+      })}
+      onEdgeMouseLeave={useCallbackRef((_event, edge) => {
+        onEdgesChange([{
+          id: edge.id,
+          type: 'replace',
+          item: Base.setHovered(edge, false),
+        }])
+      })}
+      onNodeDoubleClick={stopPropagation}
+      onEdgeDoubleClick={stopPropagation}
+      {...props}
+    >
+      {isBgWithPattern && <Background background={background} />}
+      <BaseXYFlowInner onViewportResize={onViewportResize} />
+      {children}
+    </ReactFlow>
+  )
+}
+
+const BaseXYFlowInner = ({
+  onViewportResize,
+}: Pick<BaseXYFlowProps<any, any>, 'onViewportResize'>) => {
+  const xyflowApi = useStoreApi()
+
+  /**
+   * WORKAROUND - Called on viewport change
+   * Viewport transform is not rounded to integers which results in blurry nodes on some resolution
+   * https://github.com/xyflow/xyflow/issues/3282
+   * https://github.com/likec4/likec4/issues/734
+   */
+  useOnViewportChange({
+    onEnd: ({ x, y, zoom }) => {
+      const roundedX = Math.round(x),
+        roundedY = Math.round(y)
+      if (x !== roundedX || y !== roundedY) {
+        xyflowApi.setState({ transform: [roundedX, roundedY, zoom] })
+      }
+    },
+  })
+
+  const listenToViewportResize = !!onViewportResize
+  const onViewportResizeCb = useCallbackRef(onViewportResize)
+
+  useEffect(() => {
+    if (!listenToViewportResize) {
+      return
+    }
+    return xyflowApi.subscribe((state, prevState) => {
+      if (state.width !== prevState.width || state.height !== prevState.height) {
+        onViewportResizeCb()
+      }
+    })
+  }, [listenToViewportResize])
+
+  return <></>
+}

package/src/{xyflow → base}/const.ts

@@ -1,7 +1,7 @@
 export const ZIndexes = {
   Compound: 2,
   Edge: 4,
-  Element: 6
+  Element: 6,
 } as const
 
 export const MinZoom = 0.1

package/src/base/example/RelationshipsBrowser.tsx

@@ -0,0 +1,62 @@
+import type { DiagramView } from '@likec4/core'
+import { useEdgesState, useNodesState } from '@xyflow/react'
+import { useRef } from 'react'
+import { BaseXYFlow } from '../../base/BaseXYFlow'
+import { updateEdges } from '../../base/updateEdges'
+import { updateNodes } from '../../base/updateNodes'
+import { DiagramFeatures } from '../../context'
+import { useUpdateEffect } from '../../hooks'
+import type { ExampleTypes as Types } from './_types'
+import { edgeTypes, nodeTypes } from './custom'
+import { useViewToNodesEdges } from './useViewToNodesEdges'
+
+type ExampleProps = {
+  view: DiagramView
+}
+
+export function Example({ view }: ExampleProps) {
+  const initialRef = useRef<{
+    defaultNodes: Types.Node[]
+    defaultEdges: Types.Edge[]
+    initialWidth: number
+    initialHeight: number
+  }>(null)
+
+  const {
+    xynodes,
+    xyedges,
+  } = useViewToNodesEdges(view)
+
+  if (initialRef.current == null) {
+    initialRef.current = {
+      defaultNodes: xynodes,
+      defaultEdges: xyedges,
+      initialWidth: view.bounds.width,
+      initialHeight: view.bounds.height,
+    }
+  }
+
+  const [nodes, setNodes, onNodesChange] = useNodesState(xynodes)
+  const [edges, setEdges, onEdgesChange] = useEdgesState(xyedges)
+
+  useUpdateEffect(() => {
+    setNodes(updateNodes(xynodes))
+    setEdges(updateEdges(xyedges))
+  }, [xynodes, xyedges])
+
+  return (
+    <DiagramFeatures.Overlays>
+      <BaseXYFlow<Types.Node, Types.Edge>
+        id="example"
+        nodes={nodes}
+        edges={edges}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        onEdgesChange={onEdgesChange}
+        onNodesChange={onNodesChange}
+        pannable
+        zoomable
+      />
+    </DiagramFeatures.Overlays>
+  )
+}

package/src/base/example/_types.ts

@@ -0,0 +1,71 @@
+import type { Color, DiagramNode, Fqn } from '@likec4/core'
+import type { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../types'
+
+export namespace ExampleTypes {
+  // type Column = 'incomers' | 'subjects' | 'outgoers'
+
+  export type ElementNodeData = Base.NodeData<
+    & NonOptional<
+      Pick<
+        DiagramNode,
+        | 'title'
+        | 'technology'
+        | 'description'
+        | 'color'
+        | 'shape'
+        | 'width'
+        | 'height'
+        | 'navigateTo'
+      >
+    >
+    & {
+      // column: Column
+      fqn: Fqn
+      icon: string | null
+    }
+  >
+
+  export type CompoundNodeData = Base.NodeData<
+    & NonOptional<
+      Pick<
+        DiagramNode,
+        | 'title'
+        | 'color'
+        | 'shape'
+        | 'style'
+      >
+    >
+    & {
+      // column: Column
+      fqn: Fqn
+      depth: number
+      icon: string | null
+    }
+  >
+
+  export type ElementNode = ReactFlowNode<ElementNodeData, 'element'>
+
+  export type CompoundNode = ReactFlowNode<CompoundNodeData, 'compound'>
+
+  // export type NonEmptyNode = ElementNode | CompoundNode
+
+  // export type EmptyNode = AddNodeData<SharedFlowTypes.EmptyNode, RelationshipsOfNodeData>
+
+  export type Node = ElementNode | CompoundNode
+
+  /**
+   * Data that is exclusive to the relationships-of overlay. It will be merged into the edge types
+   * provided by SharedFlowTypes.
+   */
+  type RelationshipsOfEdgeData = {
+    existsInCurrentView: boolean
+  }
+
+  // Extend the edge types provided by SharedFlowTypes with RelationshipsOfEdgeData
+
+  export type EdgeData = Base.EdgeData<{
+    color: Color | undefined
+  }>
+
+  export type Edge = ReactFlowEdge<EdgeData, 'relationships'>
+}

package/src/base/example/custom.tsx

@@ -0,0 +1,58 @@
+import { getBezierPath } from '@xyflow/system'
+import {
+  CompoundNodeContainer,
+  CompoundTitle,
+  customEdge,
+  customNode,
+  DefaultHandles,
+  EdgeContainer,
+  EdgePath,
+  ElementNodeContainer,
+  ElementShape,
+  ElementTitle,
+} from '../primitives'
+import type { ExampleTypes } from './_types'
+
+export const nodeTypes = {
+  element: customNode<ExampleTypes.ElementNodeData>((props) => {
+    return (
+      <ElementNodeContainer nodeProps={props}>
+        <ElementShape {...props} />
+        <ElementTitle {...props} />
+        <DefaultHandles />
+      </ElementNodeContainer>
+    )
+  }),
+
+  compound: customNode<ExampleTypes.CompoundNodeData>((props) => {
+    return (
+      <CompoundNodeContainer nodeProps={props}>
+        <CompoundTitle {...props} />
+        <DefaultHandles />
+      </CompoundNodeContainer>
+    )
+  }),
+} satisfies { [key in ExampleTypes.Node['type']]: any }
+
+export const edgeTypes = {
+  relationships: customEdge<ExampleTypes.EdgeData>((props) => {
+    const [svgPath, labelX, labelY] = getBezierPath(props)
+    return (
+      <EdgeContainer {...props}>
+        <EdgePath {...props} svgPath={svgPath} />
+        {
+          /* <EdgeLabel {...props}>
+          {enableNavigateTo && navigateTo && (
+            <EdgeActionButton
+              {...props}
+              onClick={e => {
+                e.stopPropagation()
+                diagram.navigateTo(navigateTo)
+              }} />
+          )}
+        </EdgeLabel> */
+        }
+      </EdgeContainer>
+    )
+  }),
+} satisfies { [key in ExampleTypes.Edge['type']]: any }

package/src/base/example/useViewToNodesEdges.ts

@@ -0,0 +1,193 @@
+import {
+  type DiagramView,
+  type Fqn,
+  DiagramNode,
+  ElementKind,
+  nonNullable,
+  Queue,
+} from '@likec4/core'
+import { useDeepCompareMemo } from '@react-hookz/web'
+import { hasAtLeast } from 'remeda'
+import { ZIndexes } from '../../base/const'
+import type { ExampleTypes } from './_types'
+
+// const nodeZIndex = (node: DiagramNode) => node.level - (node.children.length > 0 ? 1 : 0)
+function viewToNodesEdge(
+  view: Pick<DiagramView, 'id' | 'nodes' | 'edges'>,
+): {
+  xynodes: ExampleTypes.Node[]
+  xyedges: ExampleTypes.Edge[]
+} {
+  const xynodes = [] as ExampleTypes.Node[],
+    xyedges = [] as ExampleTypes.Edge[],
+    nodeLookup = new Map<Fqn, DiagramNode>()
+
+  type TraverseItem = {
+    node: DiagramNode
+    parent: DiagramNode | null
+  }
+  const queue = Queue.from(view.nodes.reduce(
+    (acc, node) => {
+      nodeLookup.set(node.id, node)
+      if (!node.parent) {
+        acc.push({ node, parent: null })
+      }
+      return acc
+    },
+    [] as TraverseItem[],
+  ))
+
+  // const visiblePredicate = opts.where ? whereOperatorAsPredicate(opts.where) : () => true
+
+  // namespace to force unique ids
+  const ns = ''
+  const nodeById = (id: Fqn) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`)
+
+  let next: TraverseItem | undefined
+  while ((next = queue.dequeue())) {
+    const { node, parent } = next
+    const isCompound = hasAtLeast(node.children, 1) || node.kind == ElementKind.Group
+    if (isCompound) {
+      for (const child of node.children) {
+        queue.enqueue({ node: nodeById(child), parent: node })
+      }
+    }
+
+    const position = {
+      x: node.position[0],
+      y: node.position[1],
+    }
+    if (parent) {
+      position.x -= parent.position[0]
+      position.y -= parent.position[1]
+    }
+
+    const id = ns + node.id
+
+    const base = {
+      id,
+      draggable: false,
+      selectable: true,
+      focusable: true,
+      deletable: false,
+      position,
+      zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
+      style: {
+        width: node.width,
+        height: node.height,
+      },
+      initialWidth: node.width,
+      initialHeight: node.height,
+      ...(parent && {
+        parentId: ns + parent.id,
+      }),
+    } satisfies Omit<ExampleTypes.Node, 'data' | 'type'>
+
+    const fqn = DiagramNode.modelRef(node)
+    // const deploymentRef = DiagramNode.deploymentRef(node)
+    if (!fqn) {
+      console.error('Invalid node', node)
+      throw new Error('Element should have either modelRef or deploymentRef')
+    }
+
+    const navigateTo = { navigateTo: node.navigateTo ?? null }
+
+    switch (true) {
+      case isCompound: {
+        xynodes.push(
+          {
+            ...base,
+            type: 'compound',
+            data: {
+              title: node.title,
+              color: node.color,
+              shape: node.shape,
+              style: node.style,
+              depth: node.depth ?? 0,
+              icon: node.icon ?? null,
+              fqn,
+              ...navigateTo,
+            },
+          },
+        )
+        break
+      }
+      default: {
+        xynodes.push(
+          {
+            ...base,
+            type: 'element' as const,
+            data: {
+              fqn,
+              title: node.title,
+              technology: node.technology,
+              description: node.description,
+              height: node.height,
+              width: node.width,
+              color: node.color,
+              shape: node.shape,
+              icon: node.icon ?? null,
+              ...navigateTo,
+            },
+          },
+        )
+      }
+    }
+  }
+  for (const edge of view.edges) {
+    const source = edge.source
+    const target = edge.target
+    const id = ns + edge.id
+
+    if (!hasAtLeast(edge.points, 2)) {
+      console.error('edge should have at least 2 points', edge)
+      continue
+    }
+
+    xyedges.push({
+      id,
+      type: 'relationships',
+      source: ns + source,
+      target: ns + target,
+      zIndex: ZIndexes.Edge,
+      // selectable: selectable,
+      // hidden: !visiblePredicate(edge),
+      deletable: false,
+      data: {
+        color: edge.color ?? 'gray',
+        // label: edge.label,
+        // technology: edge.technology,
+        // navigateTo: edge.navigateTo,
+        // labelBBox: edge.labelBBox ?? null,
+        // points: edge.points,
+        // color: edge.color ?? 'gray',
+        // line: edge.line ?? 'dashed',
+        // dir: edge.dir ?? 'forward',
+        // head: edge.head ?? 'normal',
+        // tail: edge.tail ?? 'none',
+      },
+      interactionWidth: 20,
+    })
+  }
+
+  return {
+    xynodes,
+    xyedges,
+  }
+}
+
+export function useViewToNodesEdges(
+  {
+    id,
+    nodes,
+    edges,
+  }: Pick<DiagramView, 'id' | 'nodes' | 'edges'>,
+) {
+  return useDeepCompareMemo(() => {
+    return viewToNodesEdge({
+      id,
+      nodes,
+      edges,
+    })
+  }, [id, nodes, edges])
+}

package/src/base/index.ts

@@ -0,0 +1,10 @@
+export { BaseXYFlow, type BaseXYFlowProps } from './BaseXYFlow'
+
+export {
+  Base,
+  type EdgeProps,
+  type NodeProps,
+  type NonOptional,
+  type ReactFlowEdge,
+  type ReactFlowNode,
+} from './types'

package/src/base/primitives/NodeHandles.tsx

@@ -0,0 +1,18 @@
+import { Handle, Position } from '@xyflow/react'
+import type { CSSProperties } from 'react'
+
+const style: CSSProperties = {
+  top: '50%',
+  left: '50%',
+  visibility: 'hidden',
+}
+
+/**
+ * XYFlow requires handles to be defined on nodes.
+ */
+export const DefaultHandles = () => (
+  <>
+    <Handle type="target" position={Position.Top} style={style} />
+    <Handle type="source" position={Position.Bottom} style={style} />
+  </>
+)

package/src/base/primitives/compound/CompoundActionButton.css.ts

@@ -0,0 +1,55 @@
+import { style } from '@vanilla-extract/css'
+import { transitions, vars } from '../../../theme-vars'
+
+export const container = style({
+  position: 'absolute',
+  top: 4,
+  // transform: 'translateY(-100%)',
+  left: 2,
+  // minHeight: 28,
+  // display: 'flex',
+  // justifyContent: 'center',
+  // alignItems: 'center',
+  zIndex: 10,
+})
+
+export const actionButton = style({
+  width: 'min-content',
+  height: 'min-content',
+  // display: 'flex',
+  // justifyContent: 'center',
+  // alignItems: 'center',
+})
+
+export const actionIcon = style({
+  opacity: 0.45,
+  color: `var(--_compound-title-color,${vars.element.loContrast})`,
+  transition: transitions.fast,
+  'vars': {
+    '--ai-color-hover': vars.element.hiContrast,
+    '--ai-bg-idle': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,
+    '--ai-bg': `var(--ai-bg-idle)`,
+    '--ai-bg-hover': `color-mix(in srgb , ${vars.element.fill} 65%, ${vars.element.stroke})`,
+    '--ai-hover': `color-mix(in srgb , ${vars.element.fill} 50%, ${vars.element.stroke})`,
+  },
+  background: `var(--ai-bg)`,
+  boxShadow: '1px 1px 3px 0px transparent',
+  selectors: {
+    [`:where([data-mantine-color-scheme='light'] [data-compound-transparent="true"]) &`]: {
+      opacity: 0.85,
+      vars: {
+        '--ai-bg-hover': `color-mix(in srgb , ${vars.element.fill},  transparent 20%)`,
+        '--ai-hover': `color-mix(in srgb , ${vars.element.fill},  transparent 10%)`,
+        '--ai-bg': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,
+      },
+    },
+    [`:where([data-hovered='true']) &`]: {
+      opacity: 1,
+      // boxShadow: '1px 1px 3px 0px rgba(0, 0, 0, 0.15)',
+      // color: `var(--ai-color-hover)`,
+      // vars: {
+      //   '--ai-bg': `var(--ai-bg-hover)`,
+      // },
+    },
+  },
+})