@likec4/diagram 1.29.1 → 1.31.0

package/src/LikeC4Diagram.props.ts

@@ -11,8 +11,9 @@ import type {
 import type { ReactFlowProps as XYFlowProps } from '@xyflow/react'
 import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react'
 import type { ControlsCustomLayout } from './context/ControlsCustomLayout'
+import type { CustomNodes } from './custom/customNodes'
 
-export type { WhereOperator }
+export type { CustomNodes, WhereOperator }
 
 export type DiagramNodeWithNavigate<ID = ViewId> = Omit<DiagramNode, 'navigateTo'> & {
   navigateTo: ID
@@ -222,6 +223,11 @@ export interface LikeC4DiagramProperties {
    */
   renderControls?: ControlsCustomLayout | undefined
 
+  /**
+   * Override node renderers
+   */
+  renderNodes?: CustomNodes | undefined
+
   /**
    * Dynamic filter, applies both to nodes and edges
    */

package/src/LikeC4Diagram.tsx

@@ -59,6 +59,7 @@ export function LikeC4Diagram({
   renderControls,
   where,
   reactFlowProps = {},
+  renderNodes,
   children,
 }: LikeC4DiagramProps) {
   const hasLikec4model = !!useLikeC4Model()
@@ -149,6 +150,7 @@ export function LikeC4Diagram({
                           nodesSelectable={nodesSelectable}
                           background={background}
                           reactFlowProps={reactFlowProps}
+                          renderNodes={renderNodes}
                         >
                           {children}
                         </LikeC4DiagramXYFlow>

package/src/LikeC4ModelProvider.tsx

@@ -1,9 +1,9 @@
-import type { LikeC4Model } from '@likec4/core'
+import type { AnyAux, LikeC4Model } from '@likec4/core/model'
 import { type PropsWithChildren } from 'react'
 import { LikeC4ModelContext } from './likec4model/LikeC4ModelContext'
 
 export type LikeC4ModelProviderProps = PropsWithChildren<{
-  likec4model: LikeC4Model
+  likec4model: LikeC4Model<AnyAux>
 }>
 
 /**
@@ -11,7 +11,7 @@ export type LikeC4ModelProviderProps = PropsWithChildren<{
  */
 export function LikeC4ModelProvider({
   children,
-  likec4model
+  likec4model,
 }: LikeC4ModelProviderProps) {
   return (
     <LikeC4ModelContext.Provider value={likec4model}>

package/src/StaticLikeC4Diagram.tsx

@@ -15,6 +15,7 @@ export type StaticLikeC4DiagramProps = Pick<
   | 'initialWidth'
   | 'initialHeight'
   | 'renderIcon'
+  | 'renderNodes'
   | 'where'
 >
 

package/src/base/Background.tsx

@@ -1,14 +1,10 @@
 import { nonexhaustive } from '@likec4/core'
 import { type BackgroundProps, Background as XYFlowBackground, BackgroundVariant } from '@xyflow/react'
-import type { OverrideProperties } from 'type-fest'
 
 export type XYBackgroundVariant = 'dots' | 'lines' | 'cross'
 export type XYBackground =
   | XYBackgroundVariant
   | BackgroundProps
-// | OverrideProperties<BackgroundProps, {
-//   variant: XYBackgroundVariant
-// }>
 
 export type XYBackgroundProps = {
   background: XYBackground

package/src/base/primitives/compound/CompoundActionButton.tsx

@@ -4,14 +4,17 @@ import { ActionIcon, Box } from '@mantine/core'
 import { useDebouncedValue } from '@mantine/hooks'
 import { IconZoomScan } from '@tabler/icons-react'
 import * as m from 'motion/react-m'
+import type { Simplify } from 'type-fest'
 import { stopPropagation } from '../../../utils/xyflow'
 import type { NodeProps } from '../../types'
 import { compoundActionBtn } from './actionbtns.css'
 
-type CompoundActionButtonProps = NodeProps & {
-  icon?: React.ReactNode
-  onClick: (e: React.MouseEvent) => void
-}
+type CompoundActionButtonProps = Simplify<
+  NodeProps<{}> & {
+    icon?: React.ReactNode
+    onClick: (e: React.MouseEvent) => void
+  }
+>
 
 export function CompoundActionButton({
   data: {

package/src/base/primitives/compound/CompoundDetailsButton.tsx

@@ -4,14 +4,17 @@ import { ActionIcon, Box } from '@mantine/core'
 import { useDebouncedValue } from '@mantine/hooks'
 import { IconId } from '@tabler/icons-react'
 import * as m from 'motion/react-m'
+import type { Simplify } from 'type-fest'
 import { stopPropagation } from '../../../utils/xyflow'
 import type { NodeProps } from '../../types'
 import { compoundActionBtn } from './actionbtns.css'
 
-type CompoundDetailsButtonProps = NodeProps & {
-  icon?: React.ReactNode
-  onClick: (e: React.MouseEvent) => void
-}
+type CompoundDetailsButtonProps = Simplify<
+  NodeProps<{}> & {
+    icon?: React.ReactNode
+    onClick: (e: React.MouseEvent) => void
+  }
+>
 
 export function CompoundDetailsButton({
   data: {

package/src/base/primitives/compound/CompoundNodeContainer.tsx

@@ -1,4 +1,4 @@
-import type { DiagramNode } from '@likec4/core'
+import type { Color, ElementStyle } from '@likec4/core/types'
 import { css, cx } from '@likec4/styles/css'
 import { type HTMLMotionProps, m } from 'motion/react'
 import { type PropsWithChildren } from 'react'
@@ -7,12 +7,11 @@ import { useIsReducedGraphics } from '../../../hooks/useReducedGraphics'
 import type { NodeProps } from '../../types'
 import * as styles from './CompoundNodeContainer.css'
 
-type RequiredData = Pick<
-  DiagramNode,
-  | 'color'
-  | 'depth'
-  | 'style'
->
+export type RequiredData = {
+  color: Color
+  depth: number
+  style: ElementStyle
+}
 
 type CompoundNodeContainerProps =
   & Omit<HTMLMotionProps<'div'>, 'children'>
@@ -29,6 +28,7 @@ export function CompoundNodeContainer({
       ...data
     },
   },
+  className,
   children,
   style,
   ...rest
@@ -67,6 +67,7 @@ export function CompoundNodeContainer({
         }),
         classes.root,
         'likec4-compound-node',
+        className,
       )}
       initial={false}
       data-likec4-hovered={isHovered}

package/src/base/primitives/customEdge.ts

@@ -29,6 +29,6 @@ export const edgePropsEqual = <P extends Record<string, unknown> = Base.EdgeData
 
 export function customEdge<P extends Record<string, unknown> = Base.NodeData>(
   Edge: FunctionComponent<EdgeProps<P>>,
-) {
+): FunctionComponent<EdgeProps<P>> {
   return memo(Edge, edgePropsEqual)
 }

package/src/base/primitives/{customNode.ts → customNode.tsx}

@@ -1,6 +1,7 @@
 import { deepEqual as eq } from 'fast-equals'
 import { type FunctionComponent, memo } from 'react'
 import type { Base, NodeProps } from '../types'
+import { DefaultHandles } from './NodeHandles'
 
 export const nodePropsEqual = <P extends Record<string, unknown> = Base.NodeData>(
   prev: NodeProps<P>,
@@ -18,8 +19,15 @@ export const nodePropsEqual = <P extends Record<string, unknown> = Base.NodeData
   && eq(prev.data, next.data)
 )
 
-export function customNode<P extends Record<string, unknown> = Base.NodeData>(
-  Node: FunctionComponent<NodeProps<P>>,
+export function customNode<P extends Record<string, unknown> = {}, NodeType extends string = string>(
+  Node: FunctionComponent<NodeProps<P, NodeType>>,
 ) {
-  return memo(Node, nodePropsEqual)
+  const NodeComponent = memo((props: NodeProps<P, NodeType>) => (
+    <>
+      <Node {...props} />
+      <DefaultHandles />
+    </>
+  ), nodePropsEqual)
+  NodeComponent.displayName = 'Node'
+  return NodeComponent
 }

package/src/base/primitives/element/ElementNodeContainer.tsx

@@ -1,29 +1,33 @@
 import {
-  type DiagramNode,
+  type Color,
+  type ElementShape,
   type ElementStyle,
   DefaultPaddingSize,
   DefaultShapeSize,
   DefaultTextSize,
-} from '@likec4/core'
+} from '@likec4/core/types'
 import { css, cx } from '@likec4/styles/css'
-import { type BoxProps, Box, createPolymorphicComponent } from '@mantine/core'
+import type { LayoutProps } from 'motion/react'
 import * as m from 'motion/react-m'
-import { type PropsWithChildren, forwardRef } from 'react'
+import { type CSSProperties, type ReactNode, forwardRef } from 'react'
 import type { NodeProps } from '../../types'
 import * as styles from './ElementNodeContainer.css'
 
-type RequiredData = Pick<
-  DiagramNode,
-  | 'color'
-  | 'shape'
-  | 'style'
->
+export type RequiredData = {
+  color: Color
+  shape: ElementShape
+  style?: ElementStyle
+}
 
-type ElementNodeContainerProps =
-  & BoxProps
-  & PropsWithChildren<{
+export type ElementNodeContainerProps =
+  & {
     nodeProps: NodeProps<RequiredData>
-  }>
+    children?: ReactNode | undefined
+    className?: string | undefined
+    style?: CSSProperties | undefined
+    [key: `data-${string}`]: string | undefined
+  }
+  & LayoutProps
 
 export function nodeSizes({
   size,
@@ -49,73 +53,76 @@ export function nodeSizes({
   }
 }
 
-export const ElementNodeContainer = createPolymorphicComponent<'div', ElementNodeContainerProps>(
-  forwardRef<HTMLDivElement, ElementNodeContainerProps>(({
-    nodeProps: {
-      selected = false,
-      selectable = false,
-      data: {
-        hovered: isHovered = false,
-        dimmed: isDimmed = false,
-        ...data
-      },
+/**
+ * Top-level primitive to compose leaf nodes renderers.
+ * This container provides the state via data-* attributes
+ */
+export const ElementNodeContainer = forwardRef<HTMLDivElement, ElementNodeContainerProps>(({
+  nodeProps: {
+    selected = false,
+    selectable = false,
+    data: {
+      hovered: isHovered = false,
+      dimmed: isDimmed = false,
+      ...data
     },
-    style,
-    children,
-    ...rest
-  }, ref) => {
-    let scale = 1
-    switch (true) {
-      case isHovered:
-        scale = 1.05
-        break
-      case selected:
-        scale = 1.02
-        break
-    }
+  },
+  className,
+  style,
+  children,
+  ...rest
+}, ref) => {
+  let scale = 1
+  switch (true) {
+    case isHovered:
+      scale = 1.05
+      break
+    case selected:
+      scale = 1.02
+      break
+  }
 
-    const {
-      size,
-      padding,
-      textSize,
-    } = nodeSizes(data.style)
+  const {
+    size,
+    padding,
+    textSize,
+  } = nodeSizes(data.style ?? {})
 
-    return (
-      <Box
-        component={m.div}
-        ref={ref}
-        className={cx(
-          css({
-            likec4Palette: data.color,
-          }),
-          styles.container,
-          'group',
-          'likec4-element-node',
-        )}
-        initial={false}
-        {...selectable && {
-          animate: {
-            scale,
-          },
-          whileTap: { scale: 0.98 },
-        }}
-        data-likec4-hovered={isHovered}
-        data-likec4-color={data.color}
-        data-likec4-shape={data.shape}
-        data-likec4-shape-size={size}
-        data-likec4-spacing={padding}
-        data-likec4-text-size={textSize}
-        {...(isDimmed !== false && {
-          'data-likec4-dimmed': isDimmed,
-        })}
-        style={{
-          ...style,
-        }}
-        {...rest}
-      >
-        {children}
-      </Box>
-    )
-  }),
-)
+  return (
+    <m.div
+      ref={ref}
+      className={cx(
+        css({
+          likec4Palette: data.color,
+        }),
+        styles.container,
+        'group',
+        'likec4-element-node',
+        className,
+      )}
+      initial={false}
+      {...selectable && {
+        animate: {
+          scale,
+        },
+        whileTap: { scale: 0.98 },
+      }}
+      data-likec4-hovered={isHovered}
+      data-likec4-color={data.color}
+      data-likec4-shape={data.shape}
+      data-likec4-shape-size={size}
+      data-likec4-spacing={padding}
+      data-likec4-text-size={textSize}
+      {...(isDimmed !== false && {
+        'data-likec4-dimmed': isDimmed,
+      })}
+      style={{
+        ...style as any,
+      }}
+      {...rest}
+    >
+      {children}
+    </m.div>
+  )
+})
 ElementNodeContainer.displayName = 'ElementNodeContainer'

package/src/base/primitives/element/ElementShape.tsx

@@ -1,5 +1,5 @@
-import { type DiagramNode, type ElementShape, nonexhaustive } from '@likec4/core'
-import clsx from 'clsx'
+import { type ElementShape, type ElementStyle, nonexhaustive } from '@likec4/core'
+import { cx as clsx } from '@likec4/styles/css'
 import { toDomPrecision } from '../../../utils/xyflow'
 import * as css from './ElementShape.css'
 
@@ -157,19 +157,19 @@ function ElementShapeSvg({ shape, w, h }: ElementShapeProps) {
   }
 }
 
-type Data = Pick<
-  DiagramNode,
-  | 'shape'
-  | 'width'
-  | 'height'
->
+type Data = {
+  shape: ElementShape
+  width: number
+  height: number
+  style?: ElementStyle
+}
 
 // type ElementShapePrimitiveProps = NodeProps<Data> & {
 type ElementShapePrimitiveProps = {
   data: Data
   width?: number
   height?: number
-  isMultiple?: boolean | undefined
+  // isMultiple?: boolean | undefined
   /**
    * @default true
    */
@@ -177,10 +177,11 @@ type ElementShapePrimitiveProps = {
 }
 
 export function ElementShape(
-  { data, width, height, isMultiple = false, withSelectedIndicator = true }: ElementShapePrimitiveProps,
+  { data, width, height, withSelectedIndicator = true }: ElementShapePrimitiveProps,
 ) {
   let w = !!width && width > 10 ? width : data.width
   let h = !!height && height > 10 ? height : data.height
+  const isMultiple = data.style?.multiple ?? false
   return (
     <>
       {isMultiple && (

package/src/base/types.ts

@@ -40,8 +40,8 @@ export type NonOptional<T extends object, Keys extends OptionalKeysOf<T> = Optio
 /**
  * ReactFlow Custom Node properties with BaseNodeData at least
  */
-export type NodeProps<T extends Record<string, unknown> = {}> = ReactFlowNodeProps<
-  RFNode<Base.NodeData & T, any>
+export type NodeProps<T extends Record<string, unknown> = {}, NodeType extends string = string> = ReactFlowNodeProps<
+  RFNode<Base.NodeData & T, NodeType>
 >
 
 /**
@@ -68,41 +68,36 @@ export namespace Base {
   // 'immediate' means that the node is dimmed without delay
   export type Dimmed = 'immediate' | boolean
 
-  export type NodeData<Data extends Record<string, unknown> = {}> = Simplify<
-    Data & {
-      /**
-       * 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?: Dimmed
-    }
-  >
-
+  export type NodeData = {
+    /**
+     * 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?: Dimmed
+  }
   export type Node = RFNode<NodeData>
 
   export type NodeProps = ReactFlowNodeProps<RFNode<Base.NodeData, any>>
 
-  export type EdgeData<Data extends Record<string, unknown> = {}> = Simplify<
-    Data & {
-      /**
-       * Whether the cursor is hovering over the edge
-       */
-      hovered?: boolean
-      /**
-       * Whether the edge is active (animated and highlighted)
-       */
-      active?: boolean
-      /**
-       * Whether the edge is dimmed
-       * 'immediate' means that the edge is dimmed without delay
-       */
-      dimmed?: Dimmed
-    }
-  >
+  export type EdgeData = {
+    /**
+     * Whether the cursor is hovering over the edge
+     */
+    hovered?: boolean
+    /**
+     * Whether the edge is active (animated and highlighted)
+     */
+    active?: boolean
+    /**
+     * Whether the edge is dimmed
+     * 'immediate' means that the edge is dimmed without delay
+     */
+    dimmed?: Dimmed
+  }
 
   // export type Edge = SetRequired<ReactFlowEdge<EdgeData, 'relation'>, 'data' | 'type'>
   export type Edge = SetRequired<RFEdge<EdgeData>, 'data'>

package/src/bundle/LikeC4View.props.ts

@@ -1,6 +1,6 @@
 import type { WhereOperator } from '@likec4/core'
 import type { CSSProperties } from 'react'
-import type { ElementIconRenderer, OverrideReactFlowProps, PaddingWithUnit } from '../LikeC4Diagram.props'
+import type { CustomNodes, ElementIconRenderer, OverrideReactFlowProps, PaddingWithUnit } from '../LikeC4Diagram.props'
 
 export interface LikeC4ViewProps<ViewId = string, Tag = string, Kind = string> {
   /**
@@ -148,6 +148,11 @@ export interface LikeC4ViewProps<ViewId = string, Tag = string, Kind = string> {
   /** Function to generate nonce attribute added to all generated `<style />` tags */
   styleNonce?: string | (() => string) | undefined
 
+  /**
+   * Override node renderers
+   */
+  renderNodes?: CustomNodes | undefined
+
   /**
    * Render custom icon for a node
    * By default, if icon is http:// or https://, it will be rendered as an image

package/src/bundle/LikeC4View.tsx

@@ -77,6 +77,7 @@ const LikeC4ViewInner = memo<LikeC4ViewInnerProps>(({
   styleNonce,
   style,
   reactFlowProps = {},
+  renderNodes,
   ...props
 }) => {
   const likec4model = useLikeC4Model(true, 'layouted')
@@ -152,6 +153,7 @@ const LikeC4ViewInner = memo<LikeC4ViewInnerProps>(({
               onNodeClick: () => onNavigateTo(view.id),
             }}
             reactFlowProps={reactFlowProps}
+            renderNodes={renderNodes}
             {...props}
           />
           {browserView && (
@@ -170,6 +172,7 @@ const LikeC4ViewInner = memo<LikeC4ViewInnerProps>(({
                 readonly
                 fitView
                 fitViewPadding={'16px'}
+                renderNodes={renderNodes}
                 {...props}
                 {...browserProps}
                 showNotations={(browserProps.showNotations ?? true) &&

package/src/bundle/ReactLikeC4.tsx

@@ -145,4 +145,4 @@ function ReactLikeC4Inner({
     </>
   )
 }
-ReactLikeC4.displayName = 'GenericReactLikeC4'
+ReactLikeC4.displayName = 'ReactLikeC4'

package/src/bundle/custom.ts

@@ -0,0 +1 @@
+export * from '../custom'

package/src/bundle/index.ts

@@ -1,7 +1,26 @@
+export type {
+  ChangeEvent,
+  CustomNodes,
+  DiagramNodeWithNavigate,
+  ElementIconRenderer,
+  LikeC4ColorScheme,
+  LikeC4DiagramEventHandlers,
+  OnCanvasClick,
+  OnChange,
+  OnEdgeClick,
+  OnNavigateTo,
+  OnNodeClick,
+  OpenSourceParams,
+  PaddingUnit,
+  PaddingWithUnit,
+  WhereOperator,
+} from '../LikeC4Diagram.props'
 export { LikeC4View } from './LikeC4View'
-export type { LikeC4ViewProps } from './LikeC4View.props'
+export type { LikeC4BrowserProps, LikeC4ViewProps } from './LikeC4View.props'
 export { ReactLikeC4, type ReactLikeC4Props } from './ReactLikeC4'
 
 export { LikeC4ModelProvider } from './LikeC4ModelProvider'
 
 export { ViewNotFound } from './ViewNotFound'
+
+export * from '../custom/hooks'

package/src/bundle/styles.css.ts

@@ -10,8 +10,8 @@ import {
 import { useIsomorphicLayoutEffect } from '@react-hookz/web'
 import { useState } from 'react'
 import { first, isFunction, isString } from 'remeda'
+import fontsCss from '../styles-font.css?inline'
 import inlinedStyles from '../styles.css?inline'
-import fontsCss from './font.css?inline'
 
 export const DefaultTheme = createTheme({
   autoContrast: true,

package/src/components/SearchControl.tsx

@@ -1,3 +1,4 @@
+import { cx } from '@likec4/styles/css'
 import {
   type ElementProps,
   type UnstyledButtonProps,
@@ -7,7 +8,6 @@ import {
 } from '@mantine/core'
 import { IconSearch } from '@tabler/icons-react'
 import { isMacOs } from '@xyflow/system'
-import cx from 'clsx'
 import * as classes from './SearchControl.css'
 
 interface SearchControlProps extends UnstyledButtonProps, ElementProps<'button'> {}