@likec4/diagram 1.24.1 → 1.25.1

package/src/base/BaseXYFlow.tsx

@@ -3,17 +3,14 @@ import {
   type ReactFlowProps,
   type ReactFlowState,
   ReactFlow,
-  useOnViewportChange,
   useStore,
-  useStoreApi,
 } from '@xyflow/react'
 import clsx from 'clsx'
-import { shallowEqual } from 'fast-equals'
 import { useMemo } from 'react'
 import type { SetRequired, Simplify } from 'type-fest'
-import { useIsReducedGraphics } from '../hooks/useIsReducedGraphics'
+import { useIsReducedGraphics } from '../hooks/useReducedGraphics'
 import { useUpdateEffect } from '../hooks/useUpdateEffect'
-import { useIsZoomTooSmall } from '../hooks/useXYFlow'
+import { useIsZoomTooSmall, useXYStoreApi } from '../hooks/useXYFlow'
 import * as css from '../LikeC4Diagram.css'
 import { stopPropagation } from '../utils/xyflow'
 import { type XYBackground, Background } from './Background'
@@ -75,11 +72,15 @@ export const BaseXYFlow = <
   fitView = true,
   zoomOnDoubleClick = false,
   onViewportResize,
+  onMoveEnd,
   ...props
 }: BaseXYFlowProps<NodeType, EdgeType>) => {
   const isBgWithPattern = background !== 'transparent' && background !== 'solid'
   const isZoomTooSmall = useIsZoomTooSmall()
   const reduceGraphics = useIsReducedGraphics()
+
+  const xystore = useXYStoreApi()
+
   return (
     <ReactFlow<NodeType, EdgeType>
       colorMode={colorMode}
@@ -118,10 +119,10 @@ export const BaseXYFlow = <
       noPanClassName="nopan"
       panOnScroll={pannable}
       panOnDrag={pannable}
+      panActivationKeyCode={null}
       {...(!pannable && {
         selectionKeyCode: null,
       })}
-      onlyRenderVisibleElements={reduceGraphics}
       elementsSelectable={nodesSelectable}
       nodesFocusable={nodesDraggable || nodesSelectable}
       edgesFocusable={false}
@@ -133,6 +134,20 @@ export const BaseXYFlow = <
       selectNodesOnDrag={false}
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
+      onMoveEnd={useCallbackRef((event, { x, y, zoom }) => {
+        /**
+         * WORKAROUND
+         * 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
+         */
+        const roundedX = Math.round(x),
+          roundedY = Math.round(y)
+        if (x !== roundedX || y !== roundedY) {
+          xystore.setState({ transform: [roundedX, roundedY, zoom] })
+        }
+        onMoveEnd?.(event, { x: roundedX, y: roundedY, zoom })
+      })}
       onNodeMouseEnter={useCallbackRef((_event, node) => {
         onNodesChange([{
           id: node.id,
@@ -166,49 +181,21 @@ export const BaseXYFlow = <
       {...props}
     >
       {isBgWithPattern && <Background background={background} />}
-      <BaseXYFlowInner onViewportResize={onViewportResize} />
+      {onViewportResize && <ViewportResizeHanlder 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] })
-      }
-    },
-  })
-
-  return (
-    <>
-      {onViewportResize && <ViewportResizeHanlder onViewportResize={onViewportResize} />}
-    </>
-  )
-}
-
-const selectDimensions = ({ width, height }: ReactFlowState) => ({ width, height })
+const selectDimensions = ({ width, height }: ReactFlowState) => (width || 1) * (height || 1)
 
 const ViewportResizeHanlder = ({
   onViewportResize,
 }: {
   onViewportResize: () => void
 }) => {
-  const { width, height } = useStore(selectDimensions, shallowEqual)
-  useUpdateEffect(onViewportResize, [width, height])
+  const square = useStore(selectDimensions)
+  useUpdateEffect(onViewportResize, [square])
 
-  return <></>
+  return null
 }

package/src/base/const.ts

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

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

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css'
 import { reactFlowReducedGraphics } from '../../../LikeC4Diagram.css'
-import { transitions, vars } from '../../../theme-vars'
+import { vars } from '../../../theme-vars'
 
 export const container = style({
   position: 'absolute',
@@ -11,21 +11,12 @@ export const container = style({
   // 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,
+  // transition: transitions.fast,
   'vars': {
     '--ai-color-hover': vars.element.hiContrast,
     '--ai-bg-idle': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,
@@ -33,7 +24,7 @@ export const actionIcon = style({
     '--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)`,
+  // background: `var(--ai-bg)`,
   boxShadow: '1px 1px 3px 0px transparent',
   selectors: {
     [`:where([data-mantine-color-scheme='light'] [data-compound-transparent="true"]) &`]: {
@@ -46,8 +37,8 @@ export const actionIcon = style({
     },
     [`:where([data-hovered='true']) &`]: {
       opacity: 1,
-      transitionDelay: '100ms',
-      transitionDuration: '300ms',
+      // transitionDelay: '100ms',
+      // transitionDuration: '300ms',
       // boxShadow: '1px 1px 3px 0px rgba(0, 0, 0, 0.15)',
       // color: `var(--ai-color-hover)`,
       // vars: {

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

@@ -21,9 +21,9 @@ export function CompoundActionButton({
 }: CompoundActionButtonProps) {
   return (
     <Box className={clsx(css.container, hiddenIfZoomTooSmall, 'compound-action')}>
-      <Box
-        className={clsx('nodrag nopan', css.actionButton)}
-        component={m.div}
+      <ActionIcon
+        className={clsx('nodrag nopan', css.actionIcon)}
+        component={m.button}
         initial={false}
         animate={{
           scale: isHovered ? 1.2 : 1,
@@ -36,18 +36,14 @@ export function CompoundActionButton({
           // y: 1,
         }}
         whileTap={{ scale: 1 }}
+        size={'md'}
+        radius="md"
+        // Otherwise node receives click event and is selected
+        onClick={onClick}
+        onDoubleClick={stopPropagation}
       >
-        <ActionIcon
-          className={css.actionIcon}
-          size={'md'}
-          radius="md"
-          // Otherwise node receives click event and is selected
-          onClick={onClick}
-          onDoubleClick={stopPropagation}
-        >
-          {icon ?? <IconZoomScan stroke={2} />}
-        </ActionIcon>
-      </Box>
+        {icon ?? <IconZoomScan stroke={2} />}
+      </ActionIcon>
     </Box>
   )
 }

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

@@ -6,7 +6,6 @@ export const container = style({
   position: 'absolute',
   top: 2,
   right: 2,
-  zIndex: 10,
 })
 
 const btnColor = createVar('navigateBtnColor')
@@ -26,7 +25,6 @@ export const actionIcon = style({
   pointerEvents: 'all',
   cursor: 'pointer',
   color: `var(--_compound-title-color,${btnColor})`,
-  backgroundColor: 'var(--ai-bg)',
   'vars': {
     '--ai-color-hover': vars.element.hiContrast,
     '--ai-bg-idle': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,

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

@@ -21,9 +21,9 @@ export function CompoundDetailsButton({
 }: CompoundDetailsButtonProps) {
   return (
     <Box className={clsx(css.container, hiddenIfZoomTooSmall, 'details-button')} onClick={stopPropagation}>
-      <Box
+      <ActionIcon
         component={m.div}
-        className={clsx('nodrag nopan', css.actionIconWrapper)}
+        className={clsx('nodrag nopan', css.actionIcon)}
         initial={false}
         style={{
           originX: 0.45,
@@ -40,16 +40,12 @@ export function CompoundDetailsButton({
           scale: 1.42,
         }}
         whileTap={{ scale: 1.15 }}
-      >
-        <ActionIcon
-          className={css.actionIcon}
-          size={'md'}
-          radius="md"
-          onClick={onClick}
-          onDoubleClick={stopPropagation}>
-          {icon ?? <IconId stroke={1.8} style={{ width: '75%' }} />}
-        </ActionIcon>
-      </Box>
+        size={'md'}
+        radius="md"
+        onClick={onClick}
+        onDoubleClick={stopPropagation}>
+        {icon ?? <IconId stroke={1.8} style={{ width: '75%' }} />}
+      </ActionIcon>
     </Box>
   )
 }

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

@@ -1,7 +1,6 @@
 import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
 import { calc } from '@vanilla-extract/css-utils'
-import { whereNotReducedGraphics } from '../../../LikeC4Diagram.css'
-import { easings, vars, whereLight } from '../../../theme-vars'
+import { easings, vars, whereLight, whereNotReducedGraphics } from '../../../theme-vars'
 
 export const varCompoundOpacity = createVar('opacity')
 export const varBorderRadius = createVar('borderRadius')
@@ -20,7 +19,6 @@ export const container = style({
   padding: 0,
   margin: 0,
   border: '0px solid transparent',
-  boxShadow: '0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4)',
   ':before': {
     borderRadius: varBorderRadius,
     content: ' ',
@@ -41,6 +39,9 @@ export const container = style({
       opacity: varCompoundOpacity,
       borderWidth: calc(varBorderWidth).subtract('1px').toString(),
     },
+    [`${whereNotReducedGraphics} &`]: {
+      boxShadow: '0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4)',
+    },
     [`${whereNotReducedGraphics} &:is([data-compound-transparent="true"]):before`]: {
       transition: `all 200ms ${easings.inOut}`,
     },

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

@@ -5,7 +5,7 @@ import clsx from 'clsx'
 import { m } from 'framer-motion'
 import { type PropsWithChildren, forwardRef } from 'react'
 import { clamp, isNumber } from 'remeda'
-import { useIsReducedGraphics } from '../../../hooks/useIsReducedGraphics'
+import { useIsReducedGraphics } from '../../../hooks/useReducedGraphics'
 import type { NodeProps } from '../../types'
 import * as css from './CompoundNodeContainer.css'
 
@@ -60,8 +60,8 @@ export const CompoundNodeContainer = createPolymorphicComponent<'div', CompoundN
 
     const [opacity] = useDebouncedValue(Math.round(_opacity * 100) / 100, isHovered ? 200 : 50)
 
-    const MAX_TRANSPARENCY = 40
-    const borderTransparency = clamp(MAX_TRANSPARENCY - opacity * MAX_TRANSPARENCY, {
+    const MAX_TRANSPARENCY = 65
+    const borderTransparency = clamp(MAX_TRANSPARENCY - 0.8 * opacity * MAX_TRANSPARENCY, {
       min: 0,
       max: MAX_TRANSPARENCY,
     })

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

@@ -1,7 +1,7 @@
 import { rem } from '@mantine/core'
 import { globalStyle, style } from '@vanilla-extract/css'
-import { hiddenIfZoomTooSmall, whereNotReducedGraphics } from '../../../LikeC4Diagram.css'
-import { vars } from '../../../theme-vars'
+import { hiddenIfZoomTooSmall } from '../../../LikeC4Diagram.css'
+import { vars, whereNotReducedGraphics } from '../../../theme-vars'
 
 export const compoundTitle = style([hiddenIfZoomTooSmall, {
   position: 'absolute',

package/src/base/primitives/customNode.ts

@@ -11,7 +11,7 @@ export const nodePropsEqual = <P extends Record<string, unknown> = Base.NodeData
   && eq(prev.dragging ?? false, next.dragging ?? false)
   && eq(prev.width ?? 0, next.width ?? 0)
   && eq(prev.height ?? 0, next.height ?? 0)
-  && eq(prev.zIndex, next.zIndex)
+  && 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)

package/src/base/primitives/edge/EdgeContainer.tsx

@@ -1,4 +1,4 @@
-import type { DiagramEdge } from '@likec4/core'
+import { type DiagramEdge, invariant } from '@likec4/core'
 import clsx from 'clsx'
 import { type PropsWithChildren } from 'react'
 import type { UndefinedOnPartialDeep } from 'type-fest'
@@ -15,12 +15,14 @@ type Data = UndefinedOnPartialDeep<
 
 type EdgeContainerProps = PropsWithChildren<
   EdgeProps<Data> & {
+    component?: 'g' | 'svg' | undefined
     className?: string | undefined
   }
 >
 
 export function EdgeContainer({
   className,
+  component = 'g',
   data: {
     hovered: isHovered = false,
     active: isActive = false,
@@ -29,20 +31,31 @@ export function EdgeContainer({
   },
   children,
 }: EdgeContainerProps) {
+  const props = {
+    className: clsx(
+      css.edgeContainer,
+      className,
+    ),
+    'data-likec4-color': data.color ?? 'gray',
+    'data-edge-dir': data.dir ?? 'forward',
+    'data-edge-active': isActive,
+    'data-edge-animated': isActive,
+    'data-edge-hovered': isHovered,
+    ...(isDimmed !== false && {
+      'data-edge-dimmed': isDimmed,
+    }),
+  }
+  if (component === 'svg') {
+    return (
+      <svg {...props}>
+        {children}
+      </svg>
+    )
+  }
+  invariant(component === 'g', 'EdgeContainer: component must be "g" or "svg"')
+
   return (
-    <g
-      className={clsx(
-        css.edgeContainer,
-        className,
-      )}
-      data-likec4-color={data.color ?? 'gray'}
-      data-edge-dir={data.dir ?? 'forward'}
-      data-edge-active={isActive}
-      data-edge-animated={isActive}
-      data-edge-hovered={isHovered}
-      {...isDimmed !== false && {
-        'data-edge-dimmed': isDimmed,
-      }}>
+    <g {...props}>
       {children}
     </g>
   )

package/src/base/primitives/edge/EdgeLabel.css.ts

@@ -1,7 +1,15 @@
 import { rem } from '@mantine/core'
 import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-import { whereNotReducedGraphics } from '../../../LikeC4Diagram.css'
-import { easings, mantine, transitions, vars, whereDark, whereLight, xyvars } from '../../../theme-vars'
+import {
+  easings,
+  mantine,
+  transitions,
+  vars,
+  whereDark,
+  whereLight,
+  whereNotReducedGraphics,
+  xyvars,
+} from '../../../theme-vars'
 import { edgeVars, mixColor } from './edge.css'
 
 const labelBorderRadius = 4
@@ -43,19 +51,8 @@ export const edgeLabelContainer = style([edgeVars, {
   width: 'auto',
   height: 'auto',
   backgroundColor: xyvars.edge.labelBgColor,
-  borderRadius: labelBorderRadius,
   border: '0px solid transparent',
-  transform: varTranslate,
-  transition: transitions.fast,
-  vars: {
-    [varTranslate]: `translate(0,0)`,
-  },
   selectors: {
-    '&[data-edge-hovered="true"]': {
-      mixBlendMode: 'normal',
-      transition: `all 190ms ${easings.inOut}`,
-      transform: `${varTranslate} scale(1.12)`,
-    },
     [`&:is([data-edge-dimmed="true"])`]: {
       opacity: 0.2,
       transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
@@ -68,7 +65,14 @@ export const edgeLabelContainer = style([edgeVars, {
       filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
     },
     [`${whereNotReducedGraphics} &`]: {
+      borderRadius: labelBorderRadius,
       mixBlendMode: 'plus-lighter',
+      transform: varTranslate,
+      transition: transitions.fast,
+    },
+    [`${whereNotReducedGraphics} &[data-edge-hovered="true"]`]: {
+      transition: `all 190ms ${easings.inOut}`,
+      transform: `${varTranslate} scale(1.12)`,
     },
     [`${whereLight} ${whereNotReducedGraphics} &`]: {
       mixBlendMode: 'screen',
@@ -150,7 +154,7 @@ export const edgeNoteCloseButton = style({
   position: 'absolute',
   top: 4,
   right: 4,
-  zIndex: 9,
+  // zIndex: 9,
 })
 
 export const edgeNoteText = style({
@@ -172,7 +176,7 @@ export const edgeNoteText = style({
 })
 
 export const actionBtn = style({
-  zIndex: 'calc(var(--layer-overlays, 1) + 1)',
+  // zIndex: 'calc(var(--layer-overlays, 1) + 1)',
   pointerEvents: 'all',
   color: xyvars.edge.labelColor,
   cursor: 'pointer',

package/src/base/primitives/edge/EdgeLabel.tsx

@@ -1,12 +1,12 @@
 import { type DiagramEdge, extractStep, isStepEdgeId } from '@likec4/core'
 import { type BoxProps, Box, createPolymorphicComponent, Text } from '@mantine/core'
-import { assignInlineVars } from '@vanilla-extract/dynamic'
 import { EdgeLabelRenderer } from '@xyflow/react'
 import clsx from 'clsx'
 import { type PropsWithChildren, forwardRef } from 'react'
 import { isNumber, isTruthy } from 'remeda'
 import type { UndefinedOnPartialDeep } from 'type-fest'
 import { useIsZoomTooSmall } from '../../../hooks/useXYFlow'
+import { getVarName } from '../../../utils/css'
 import { ZIndexes } from '../../const'
 import type { EdgeProps } from '../../types'
 import * as css from './EdgeLabel.css'
@@ -41,6 +41,8 @@ const toCssVarValue = (value: number | string | undefined) => {
   return isNumber(value) ? `${value}px` : value
 }
 
+const varTranslate = getVarName(css.varTranslate)
+
 export const EdgeLabel = createPolymorphicComponent<'div', EdgeLabelProps>(
   forwardRef<HTMLDivElement, EdgeLabelProps>(({
     edgeProps: {
@@ -75,7 +77,6 @@ export const EdgeLabel = createPolymorphicComponent<'div', EdgeLabelProps>(
     if (labelX === undefined || labelY === undefined || isZoomTooSmall) {
       return null
     }
-
     const translate = labelXY?.translate
 
     return (
@@ -96,13 +97,9 @@ export const EdgeLabel = createPolymorphicComponent<'div', EdgeLabelProps>(
           style={{
             top: toCssVarValue(labelY),
             left: toCssVarValue(labelX),
-            // ...assignInlineVars({
-            //   [css.varLabelX]: toCssVarValue(labelX),
-            //   [css.varLabelY]: toCssVarValue(labelY),
-            // }),
-            ...(translate && assignInlineVars({
-              [css.varTranslate]: translate,
-            })),
+            ...(translate && {
+              [varTranslate]: translate,
+            }),
             ...(labelBBox && {
               maxWidth: labelBBox.width + 18,
             }),

package/src/base/primitives/edge/EdgePath.tsx

@@ -2,6 +2,7 @@ import type { DiagramEdge } from '@likec4/core'
 import clsx from 'clsx'
 import { type PointerEventHandler, forwardRef } from 'react'
 import type { UndefinedOnPartialDeep } from 'type-fest'
+import { useIsReducedGraphics, useLooseReducedGraphics } from '../../../hooks/useReducedGraphics'
 import type { EdgeProps } from '../../types'
 import * as css from './edge.css'
 import { arrowTypeToMarker, EdgeMarkers } from './EdgeMarkers'
@@ -29,13 +30,17 @@ export const EdgePath = forwardRef<SVGPathElement, EdgePathProps>(({
     dir,
     tail,
     head,
+    ...data
   },
   strokeWidth,
   svgPath,
   style,
+  animated = false,
   interactionWidth,
   onEdgePointerDown,
 }, svgPathRef) => {
+  const isReducedGraphics = useIsReducedGraphics()
+  const isLooseReduce = useLooseReducedGraphics()
   let markerStartName = arrowTypeToMarker(tail)
   let markerEndName = arrowTypeToMarker(head ?? 'normal')
   if (dir === 'back') {
@@ -54,30 +59,49 @@ export const EdgePath = forwardRef<SVGPathElement, EdgePathProps>(({
   } else if (isDashed) {
     strokeDasharray = '8,10'
   }
+  if (isLooseReduce) {
+    strokeDasharray = undefined
+  }
+
+  const isAnimated = (animated || data.hovered || data.active) && !data.dimmed
+  if (isLooseReduce && isAnimated) {
+    style = {
+      ...style,
+      animationName: 'none',
+    }
+  }
 
   return (
     <>
-      <path
-        className={clsx('react-flow__edge-interaction')}
-        d={svgPath}
-        fill="none"
-        stroke={'transparent'}
-        strokeWidth={interactionWidth ?? 10}
-      />
+      {!isLooseReduce && (
+        <path
+          className={clsx('react-flow__edge-interaction')}
+          d={svgPath}
+          fill="none"
+          stroke={'transparent'}
+          strokeWidth={interactionWidth ?? 10}
+        />
+      )}
       <g className={css.markerContext} onPointerDown={onEdgePointerDown}>
         <defs>
           {MarkerStart && <MarkerStart id={'start' + id} />}
           {MarkerEnd && <MarkerEnd id={'end' + id} />}
         </defs>
-        <path
-          className={clsx('react-flow__edge-path', css.edgePathBg)}
-          d={svgPath}
-          style={style}
-          strokeLinecap={'round'}
-        />
+        {!isReducedGraphics && (
+          <path
+            className={clsx('react-flow__edge-path', css.edgePathBg)}
+            d={svgPath}
+            style={style}
+            strokeLinecap={'round'}
+          />
+        )}
         <path
           ref={svgPathRef}
-          className={clsx('react-flow__edge-path', css.cssEdgePath)}
+          className={clsx(
+            'react-flow__edge-path',
+            'react-flow__edge-interaction',
+            css.cssEdgePath,
+          )}
           d={svgPath}
           style={style}
           strokeWidth={strokeWidth}