@likec4/diagram 1.36.1 → 1.38.0

package/src/StaticLikeC4Diagram.tsx

@@ -1,4 +1,5 @@
 import type { Any, UnknownLayouted } from '@likec4/core/types'
+import { cx } from '@likec4/styles/css'
 import { LikeC4Diagram } from './LikeC4Diagram'
 import type { LikeC4DiagramProperties } from './LikeC4Diagram.props'
 
@@ -28,12 +29,14 @@ export function StaticLikeC4Diagram<A extends Any = UnknownLayouted>({
   enableRelationshipDetails = false,
   enableRelationshipBrowser = enableRelationshipDetails,
   background = 'transparent',
+  className,
   ...rest
 }: StaticLikeC4DiagramProps<A>) {
   return (
     <LikeC4Diagram
       view={view}
       readonly
+      className={cx(className, 'likec4-static-view')}
       fitView={fitView}
       fitViewPadding={fitViewPadding}
       pannable={false}

package/src/base/BaseXYFlow.tsx

@@ -1,4 +1,4 @@
-import { css, cva, cx } from '@likec4/styles/css'
+import { cx } from '@likec4/styles/css'
 import { useCallbackRef } from '@mantine/hooks'
 import {
   type ReactFlowProps,
@@ -11,6 +11,7 @@ import type { SetRequired, Simplify } from 'type-fest'
 import { useUpdateEffect } from '../hooks/useUpdateEffect'
 import { useIsZoomTooSmall, useXYStoreApi } from '../hooks/useXYFlow'
 import type { ViewPadding } from '../LikeC4Diagram.props'
+import { roundDpr } from '../utils/roundDpr'
 import { stopPropagation } from '../utils/xyflow'
 import { type XYBackground, Background } from './Background'
 import { MaxZoom, MinZoom } from './const'
@@ -44,29 +45,6 @@ export type BaseXYFlowProps<NodeType extends Base.Node, EdgeType extends Base.Ed
   >
 >
 
-const cssReactFlow = cva({
-  base: {
-    '& .react-flow__pane': {
-      WebkitUserSelect: 'none',
-    },
-    '& .react-flow__attribution': {
-      display: 'none',
-    },
-  },
-  variants: {
-    transparent: {
-      true: {
-        background: 'transparent !important',
-        ['--xy-background-color']: 'transparent !important',
-      },
-      false: {
-        ['--xy-background-color']: '{colors.likec4.background}',
-        ['--xy-background-pattern-color']: '{colors.likec4.background.pattern}',
-      },
-    },
-  },
-})
-
 export const BaseXYFlow = <
   NodeType extends Base.Node,
   EdgeType extends Base.Edge,
@@ -88,6 +66,10 @@ export const BaseXYFlow = <
   zoomOnDoubleClick = false,
   onViewportResize,
   onMoveEnd,
+  onNodeMouseEnter,
+  onNodeMouseLeave,
+  onEdgeMouseEnter,
+  onEdgeMouseLeave,
   ...props
 }: BaseXYFlowProps<NodeType, EdgeType>) => {
   const isBgWithPattern = background !== 'transparent' && background !== 'solid'
@@ -100,9 +82,7 @@ export const BaseXYFlow = <
       nodes={nodes}
       edges={edges}
       className={cx(
-        cssReactFlow({
-          transparent: background === 'transparent',
-        }),
+        background === 'transparent' && 'bg-transparent',
         className,
       )}
       {...isZoomTooSmall && {
@@ -127,6 +107,7 @@ export const BaseXYFlow = <
       defaultMarkerColor="var(--xy-edge-stroke)"
       noDragClassName="nodrag"
       noPanClassName="nopan"
+      noWheelClassName="nowheel"
       panOnScroll={pannable}
       panOnDrag={pannable}
       {...(!pannable && {
@@ -151,14 +132,18 @@ export const BaseXYFlow = <
          * https://github.com/xyflow/xyflow/issues/3282
          * https://github.com/likec4/likec4/issues/734
          */
-        const roundedX = Math.round(x),
-          roundedY = Math.round(y)
+        const roundedX = roundDpr(x),
+          roundedY = roundDpr(y)
         if (x !== roundedX || y !== roundedY) {
           xystore.setState({ transform: [roundedX, roundedY, zoom] })
         }
         onMoveEnd?.(event, { x: roundedX, y: roundedY, zoom })
       })}
       onNodeMouseEnter={useCallbackRef((_event, node) => {
+        if (onNodeMouseEnter) {
+          onNodeMouseEnter(_event, node)
+          return
+        }
         if (!node.data.hovered) {
           onNodesChange([{
             id: node.id,
@@ -168,6 +153,10 @@ export const BaseXYFlow = <
         }
       })}
       onNodeMouseLeave={useCallbackRef((_event, node) => {
+        if (onNodeMouseLeave) {
+          onNodeMouseLeave(_event, node)
+          return
+        }
         if (node.data.hovered) {
           onNodesChange([{
             id: node.id,
@@ -177,6 +166,10 @@ export const BaseXYFlow = <
         }
       })}
       onEdgeMouseEnter={useCallbackRef((_event, edge) => {
+        if (onEdgeMouseEnter) {
+          onEdgeMouseEnter(_event, edge)
+          return
+        }
         if (!edge.data.hovered) {
           onEdgesChange([{
             id: edge.id,
@@ -186,6 +179,10 @@ export const BaseXYFlow = <
         }
       })}
       onEdgeMouseLeave={useCallbackRef((_event, edge) => {
+        if (onEdgeMouseLeave) {
+          onEdgeMouseLeave(_event, edge)
+          return
+        }
         if (edge.data.hovered) {
           onEdgesChange([{
             id: edge.id,

package/src/base/const.ts

@@ -1,8 +1,9 @@
 export const ZIndexes = {
-  Compound: 0,
-  Edge: 2,
-  Element: 2,
-  Max: 8,
+  Compound: 1,
+  // XYFlow increments zIndexes of compounds
+  Edge: 20,
+  Element: 20,
+  Max: 30,
 } as const
 
 export const MinZoom = 0.05

package/src/base/primitives/MarkdownBlock.tsx

@@ -51,7 +51,9 @@ export const MarkdownBlock = forwardRef<HTMLDivElement, MarkdownBlockProps>(({
     return null
   }
   const content = value.nonEmpty
-    ? { dangerouslySetInnerHTML: { __html: value.html } }
+    ? value.isMarkdown
+      ? { dangerouslySetInnerHTML: { __html: value.html } }
+      : { children: <p>{value.text}</p> }
     : { children: <Text component="span" fz={'xs'} c="dimmed" style={{ userSelect: 'none' }}>{emptyText}</Text> }
   return (
     <Box
@@ -64,6 +66,9 @@ export const MarkdownBlock = forwardRef<HTMLDivElement, MarkdownBlockProps>(({
         className,
       )}
       style={{
+        ...props.fontSize && {
+          '--text-fz': `var(--font-sizes-${props.fontSize}, var(--font-sizes-md))`,
+        },
         // @ts-expect-error
         ['--mantine-scale']: textScale,
       }}

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

@@ -1,5 +1,4 @@
-import { css, cx } from '@likec4/styles/css'
-import { Box } from '@likec4/styles/jsx'
+import { cx } from '@likec4/styles/css'
 import { actionBtn } from '@likec4/styles/recipes'
 import { ActionIcon } from '@mantine/core'
 import { useDebouncedValue } from '@mantine/hooks'
@@ -28,47 +27,36 @@ export function CompoundActionButton({
   const debounced = useDebouncedValue(isHovered, isHovered ? 130 : 0)
   const isHoverDebounced = debounced[0] && isHovered
   return (
-    <Box
-      className={cx(
-        css({
-          position: 'absolute',
-          top: '[5px]',
-          left: '[4px]',
-          _smallZoom: {
-            display: 'none',
-          },
-        }),
-        'compound-action',
-      )}>
-      <m.div
-        initial={false}
-        animate={{
-          scale: isHoverDebounced ? 1.2 : 1,
-          x: isHoverDebounced ? -1 : 0,
-          y: isHoverDebounced ? -1 : 0,
-        }}
-        whileHover={{
-          scale: 1.4,
-          x: -2,
-          y: -2,
-        }}
-        whileTap={{ scale: 1 }}
+    <m.div
+      initial={false}
+      animate={{
+        scale: isHoverDebounced ? 1.2 : 1,
+        x: isHoverDebounced ? -1 : 0,
+        y: isHoverDebounced ? -1 : 0,
+      }}
+      whileHover={{
+        scale: 1.4,
+        x: -3,
+        y: -1,
+      }}
+      className="likec4-compound-navigation compound-action"
+      whileTap={{ scale: 1 }}
+      onClick={stopPropagation}
+    >
+      <ActionIcon
+        className={cx(
+          'nodrag nopan',
+          compoundActionBtn({
+            delay: isHovered && !isHoverDebounced,
+          }),
+          actionBtn({ variant: 'transparent' }),
+        )}
+        // Otherwise node receives click event and is selected
+        onClick={onClick}
+        onDoubleClick={stopPropagation}
       >
-        <ActionIcon
-          className={cx(
-            'nodrag nopan',
-            compoundActionBtn({
-              delay: isHovered && !isHoverDebounced,
-            }),
-            actionBtn(),
-          )}
-          // Otherwise node receives click event and is selected
-          onClick={onClick}
-          onDoubleClick={stopPropagation}
-        >
-          {icon ?? <IconZoomScan stroke={2} />}
-        </ActionIcon>
-      </m.div>
-    </Box>
+        {icon ?? <IconZoomScan stroke={2} />}
+      </ActionIcon>
+    </m.div>
   )
 }

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

@@ -1,5 +1,4 @@
-import { css, cx } from '@likec4/styles/css'
-import { Box } from '@likec4/styles/jsx'
+import { cx } from '@likec4/styles/css'
 import { actionBtn } from '@likec4/styles/recipes'
 import { ActionIcon } from '@mantine/core'
 import { useDebouncedValue } from '@mantine/hooks'
@@ -28,51 +27,30 @@ export function CompoundDetailsButton({
   const debounced = useDebouncedValue(isHovered, isHovered ? 130 : 0)
   const isHoverDebounced = debounced[0] && isHovered
   return (
-    <Box
-      className={cx(
-        css({
-          position: 'absolute',
-          top: '0.5',
-          right: '0.5',
-          _smallZoom: {
-            display: 'none',
-          },
-        }),
-        'details-button',
-      )}
-      onClick={stopPropagation}>
-      <m.div
-        initial={false}
-        animate={{
-          scale: isHoverDebounced ? 1.2 : 1,
-          opacity: isHoverDebounced ? 1 : 0.6,
-        }}
-        whileHover={{
-          scale: 1.4,
-        }}
-        whileTap={{ scale: 1 }}
-      >
-        <ActionIcon
-          className={cx(
-            'nodrag nopan',
-            compoundActionBtn({
-              delay: isHovered && !isHoverDebounced,
-            }),
-            css({
-              _whenHovered: {
-                opacity: .75,
-              },
-              _hover: {
-                opacity: 1,
-              },
-            }),
-            actionBtn({ variant: 'transparent' }),
-          )}
-          onClick={onClick}
-          onDoubleClick={stopPropagation}>
-          {icon ?? <IconId stroke={1.8} style={{ width: '75%' }} />}
-        </ActionIcon>
-      </m.div>
-    </Box>
+    <m.div
+      initial={false}
+      animate={{
+        scale: isHoverDebounced ? 1.2 : 1,
+        // opacity: isHoverDebounced ? 1 : 0.6,
+      }}
+      whileHover={{
+        scale: 1.4,
+      }}
+      whileTap={{ scale: 1 }}
+      className="likec4-compound-details details-button"
+    >
+      <ActionIcon
+        className={cx(
+          'nodrag nopan',
+          compoundActionBtn({
+            delay: isHovered && !isHoverDebounced,
+          }),
+          actionBtn({ variant: 'transparent' }),
+        )}
+        onClick={onClick}
+        onDoubleClick={stopPropagation}>
+        {icon ?? <IconId stroke={1.8} style={{ width: '75%' }} />}
+      </ActionIcon>
+    </m.div>
   )
 }

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

@@ -1,11 +1,11 @@
 import type { Color, ElementStyle } from '@likec4/core/types'
-import { css, cx } from '@likec4/styles/css'
+import { cx } from '@likec4/styles/css'
+import { compoundNode } from '@likec4/styles/recipes'
 import { type HTMLMotionProps, m } from 'motion/react'
 import { type PropsWithChildren } from 'react'
-import { clamp, isNumber } from 'remeda'
-import { useIsReducedGraphics } from '../../../hooks/useReducedGraphics'
+import { clamp } from 'remeda'
 import type { NodeProps } from '../../types'
-import * as styles from './CompoundNodeContainer.css'
+// import * as styles from './CompoundNodeContainer.css'
 
 export type RequiredData = {
   color: Color
@@ -33,27 +33,24 @@ export function CompoundNodeContainer({
   style,
   ...rest
 }: CompoundNodeContainerProps) {
-  const isReducedGraphics = useIsReducedGraphics()
-  const isTransparent = isNumber(data.style.opacity) && data.style.opacity < 99
-  let opacity = clamp((data.style.opacity ?? 100) / 100, {
+  let opacity = clamp(data.style.opacity ?? 100, {
     min: 0,
-    max: 1,
+    max: 100,
   })
-  if (isTransparent && isHovered && !isReducedGraphics) {
-    opacity = Math.min(opacity + 0.08, 1)
-  }
-
-  // const [opacity] = useDebouncedValue(Math.round(_opacity * 100) / 100, isHovered ? 200 : 50)
+  const isTransparent = opacity < 99
 
   const MIN_OPACITY = 65
-  const borderOpacity = MIN_OPACITY + clamp((100 - MIN_OPACITY) * opacity, {
+  const borderOpacity = MIN_OPACITY + clamp((100 - MIN_OPACITY) * (opacity / 100), {
     min: 0,
     max: 100 - MIN_OPACITY,
   })
 
-  const classes = styles.compound({
+  const compoundClass = compoundNode({
     isTransparent,
+    inverseColor: opacity < 60,
+    borderStyle: data.style.border ?? (isTransparent ? 'dashed' : 'none'),
   })
+
   const depth = clamp(data.depth ?? 1, {
     min: 1,
     max: 5,
@@ -62,49 +59,24 @@ export function CompoundNodeContainer({
   return (
     <m.div
       className={cx(
-        classes.root,
-        'likec4-compound-node',
+        compoundClass,
         className,
       )}
       initial={false}
       data-likec4-hovered={isHovered}
       data-likec4-color={data.color}
       data-compound-depth={depth}
-      {...isTransparent && {
-        'data-compound-transparent': true,
-        'data-compound-title-inverse': opacity < 0.5,
-      }}
       {...isDimmed !== false && {
         'data-likec4-dimmed': isDimmed,
       }}
       style={{
         ...style,
         // @ts-expect-error
-        [styles.compoundOpacity.var]: opacity,
-        [styles.borderWidth.var]: `3px`,
-        [styles.borderRadius.var]: `6px`,
-        [styles.borderOpacityPercent.var]: `${borderOpacity}%`,
+        ['--_border-transparency']: `${borderOpacity}%`,
+        ['--_compound-transparency']: `${opacity}%`,
       }}
       {...rest}
     >
-      {isTransparent && data.style.border !== 'none' && (
-        <div
-          className={classes.compoundBorder}
-          style={{
-            borderStyle: data.style.border ?? 'dashed',
-          }}
-        />
-      )}
-      <svg className={classes.indicatorSvg}>
-        <rect
-          className={classes.indicatorRect}
-          x={0}
-          y={0}
-          width={'100%'}
-          height={'100%'}
-          rx={6}
-        />
-      </svg>
       {children}
     </m.div>
   )

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

@@ -1,6 +1,4 @@
 import type { DiagramNode } from '@likec4/core/types'
-import { css, cx } from '@likec4/styles/css'
-import { Box } from '@likec4/styles/jsx'
 import { Text } from '@mantine/core'
 import { IconRenderer } from '../../../context'
 import type { NodeProps } from '../../types'
@@ -15,72 +13,6 @@ type Data = Pick<
 
 type CompoundTitleProps = NodeProps<Data>
 
-const titleContainer = css({
-  position: 'absolute',
-  display: 'flex',
-  alignItems: 'center',
-  gap: '1.5', // 6px
-  left: '[14px]',
-  top: '[4px]',
-  right: '[30px]',
-  width: 'auto',
-  minHeight: '30px',
-  [`:where(.react-flow__node.draggable) &`]: {
-    pointerEvents: 'all',
-    cursor: 'grab',
-  },
-  [`.likec4-compound-node:has(.compound-action) &`]: {
-    paddingLeft: '[22px]',
-  },
-})
-
-const titleText = css({
-  flex: '1',
-  fontFamily: 'likec4.compound',
-  fontWeight: 600,
-  fontSize: '15px',
-  textTransform: 'uppercase',
-  letterSpacing: '0.2px',
-  color: 'var(--likec4-palette-loContrast)',
-  '[data-compound-title-inverse] &': {
-    color: {
-      base: '[color-mix(in srgb, var(--likec4-palette-loContrast) 60%, var(--likec4-palette-fill))]',
-      _light: 'var(--likec4-palette-stroke)',
-    },
-  },
-})
-
-const iconSize = '20px'
-const cssIcon = css({
-  flex: `0 0 ${iconSize}`,
-  height: `${iconSize}`,
-  width: `${iconSize}`,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  mixBlendMode: {
-    base: 'hard-light',
-    _reduceGraphicsOnPan: 'normal',
-  },
-  [`& svg, & img`]: {
-    width: '100%',
-    height: 'auto',
-    maxHeight: '100%',
-    pointerEvents: 'none',
-    filter: {
-      base: [
-        'drop-shadow(0 0 3px rgb(0 0 0 / 12%))',
-        'drop-shadow(0 1px 8px rgb(0 0 0 / 8%))',
-        'drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))',
-      ],
-      _reduceGraphicsOnPan: 'none',
-    },
-  },
-  [`& img`]: {
-    objectFit: 'contain',
-  },
-})
-
 export function CompoundTitle({ id, data }: CompoundTitleProps) {
   const elementIcon = IconRenderer({
     element: {
@@ -88,19 +20,15 @@ export function CompoundTitle({ id, data }: CompoundTitleProps) {
       title: data.title,
       icon: data.icon,
     },
-    className: cssIcon,
+    className: 'likec4-compound-icon',
   })
 
   return (
-    <Box
-      className={cx(
-        titleContainer,
-        'likec4-compound-title',
-      )}>
+    <div className={'likec4-compound-title-container'}>
       {elementIcon}
-      <Text className={titleText} truncate="end">
+      <Text component="h3" className={'likec4-compound-title'} truncate="end">
         {data.title}
       </Text>
-    </Box>
+    </div>
   )
 }

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

@@ -3,18 +3,6 @@ import { cva } from '@likec4/styles/css'
 export const compoundActionBtn = cva({
   base: {
     transitionDuration: 'normal',
-    '[data-compound-title-inverse] &': {
-      _dark: {
-        '--actionbtn-color': 'color-mix(in srgb, var(--likec4-palette-loContrast) 60%, var(--likec4-palette-fill))',
-      },
-      _light: {
-        '--actionbtn-color': 'var(--likec4-palette-stroke)',
-        '--actionbtn-color-hovered': 'var(--likec4-palette-stroke)',
-        '--actionbtn-color-hovered-btn': 'var(--likec4-palette-hiContrast)',
-        '--actionbtn-bg-hovered': `var(--likec4-palette-fill)/50`,
-        '--actionbtn-bg-hovered-btn': `var(--likec4-palette-fill)`,
-      },
-    },
   },
   variants: {
     delay: {

package/src/base/primitives/customEdge.ts

@@ -27,7 +27,7 @@ export const edgePropsEqual = <P extends Record<string, unknown> = Base.EdgeData
   && eq(prev.data, next.data)
 )
 
-export function customEdge<P extends Record<string, unknown> = Base.NodeData>(
+export function customEdge<P extends Record<string, unknown> = Base.EdgeData>(
   Edge: FunctionComponent<EdgeProps<P>>,
 ): FunctionComponent<EdgeProps<P>> {
   return memo(Edge, edgePropsEqual)

package/src/base/primitives/customNode.tsx

@@ -1,33 +1,29 @@
 import { deepEqual as eq } from 'fast-equals'
 import { type FunctionComponent, memo } from 'react'
-import type { Base, NodeProps } from '../types'
-import { DefaultHandles } from './NodeHandles'
+import type { NodeProps } from '../types'
 
-export const nodePropsEqual = <P extends Record<string, unknown> = Base.NodeData>(
-  prev: NodeProps<P>,
-  next: NodeProps<P>,
-) => (
-  prev.id === next.id
-  && eq(prev.selected ?? false, next.selected ?? false)
-  && eq(prev.dragging ?? false, next.dragging ?? false)
-  && eq(prev.width ?? 0, next.width ?? 0)
-  && eq(prev.height ?? 0, next.height ?? 0)
-  && eq(prev.zIndex ?? 0, next.zIndex ?? 0)
-  // we can ignore position, as custom nodes positioned relative to it's NodeRenderer
-  // && eq(prev.positionAbsoluteX, next.positionAbsoluteX)
-  // && eq(prev.positionAbsoluteY, next.positionAbsoluteY)
-  && eq(prev.data, next.data)
-)
+export function nodePropsEqual<P extends NodeProps<any, any>>(prev: P, next: P) {
+  return (
+    prev.id === next.id
+    && eq(prev.selected ?? false, next.selected ?? false)
+    && eq(prev.dragging ?? false, next.dragging ?? false)
+    && eq(prev.width ?? 0, next.width ?? 0)
+    && eq(prev.height ?? 0, next.height ?? 0)
+    && eq(prev.zIndex ?? 0, next.zIndex ?? 0)
+    // we can ignore position, as custom nodes positioned relative to it's NodeRenderer
+    // && eq(prev.positionAbsoluteX, next.positionAbsoluteX)
+    // && eq(prev.positionAbsoluteY, next.positionAbsoluteY)
+    && eq(prev.data, next.data)
+  )
+}
 
 export function customNode<P extends Record<string, unknown> = {}, NodeType extends string = string>(
   Node: FunctionComponent<NodeProps<P, NodeType>>,
-) {
-  const NodeComponent = memo((props: NodeProps<P, NodeType>) => (
-    <>
-      <Node {...props} />
-      <DefaultHandles />
-    </>
-  ), nodePropsEqual)
+): FunctionComponent<NodeProps<P, NodeType>> {
+  const NodeComponent = memo(
+    Node,
+    (prev, next) => nodePropsEqual(prev as NodeProps, next as NodeProps),
+  )
   NodeComponent.displayName = 'Node'
   return NodeComponent
 }