@likec4/diagram 1.24.0 → 1.25.0

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

@@ -1,7 +1,6 @@
-import { rem } from '@mantine/core'
 import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
 import { calc } from '@vanilla-extract/css-utils'
-import { easings, mantine, vars, whereLight } from '../../../theme-vars'
+import { easings, vars, whereLight, whereNotReducedGraphics } from '../../../theme-vars'
 
 export const varCompoundOpacity = createVar('opacity')
 export const varBorderRadius = createVar('borderRadius')
@@ -10,75 +9,57 @@ export const varBorderColor = createVar('border-color')
 const varBorderWidth = createVar('border-width')
 
 export const container = style({
+  vars: {
+    [varBorderRadius]: '6px',
+    [varBorderWidth]: '3px',
+  },
   position: 'relative',
   width: '100%',
   height: '100%',
   padding: 0,
   margin: 0,
   border: '0px solid transparent',
-  vars: {
-    [varBorderRadius]: '6px',
-    [varBorderWidth]: '3px',
+  ':before': {
+    borderRadius: varBorderRadius,
+    content: ' ',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    border: '0px solid transparent',
+    background: vars.element.fill,
+    backgroundClip: 'padding-box',
   },
-})
-
-globalStyle(`.react-flow__node:has(${container}[data-likec4-dimmed="true"])`, {
-  opacity: 0.25,
-  transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
-  transitionDelay: '200ms',
-  filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
-  willChange: 'opacity, filter',
-})
-
-globalStyle(`.react-flow__node:has(${container}[data-likec4-dimmed="immediate"])`, {
-  opacity: 0.25,
-  transition: 'opacity 100ms ease-in-out, filter 100ms ease-in-out',
-  filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
-  willChange: 'opacity, filter',
-})
-
-const outlineColor = fallbackVar(
-  mantine.colors.primaryColors.outline,
-  mantine.colors.primaryColors.filled,
-  vars.element.stroke,
-)
-
-export const compoundBg = style({
-  borderRadius: varBorderRadius,
-  boxShadow: '0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4)',
-  padding: 0,
-  margin: 0,
-  transition: `all 250ms ${easings.inOut}`,
-  // backgroundClip: 'padding-box',
-  // overflow: 'hidden',
-  cursor: 'default',
   selectors: {
-    [`:where(.react-flow__node.dragging) &`]: {
+    [`&:is([data-compound-transparent="true"])`]: {
       boxShadow: 'none',
     },
-    ':where(.react-flow__node:focus-visible) &': {
-      transitionDuration: '0ms',
-      outline: `3px solid ${outlineColor}`,
-      outlineOffset: rem(1.5),
-    },
-    [`:where([data-compound-transparent="true"]) &`]: {
+    [`&:is([data-compound-transparent="true"]):before`]: {
       opacity: varCompoundOpacity,
       borderWidth: calc(varBorderWidth).subtract('1px').toString(),
     },
-    [`:where([data-compound-transparent="true"]:is([data-hovered="true"])) &`]: {
-      transitionDelay: '0.15s',
-      transitionDuration: '0.4s',
+    [`${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}`,
+    },
+    [`:where(.react-flow__node.dragging) &`]: {
+      boxShadow: 'none',
+    },
+    [`&:is([data-likec4-dimmed="true"])`]: {
+      opacity: 0.25,
+      transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
+      transitionDelay: '200ms',
+      filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
+    },
+    [`&:is([data-likec4-dimmed="immediate"])`]: {
+      opacity: 0.25,
+      transition: 'opacity 100ms ease-in-out, filter 100ms ease-in-out',
+      filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
     },
   },
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  width: '100%',
-  height: '100%',
-  pointerEvents: 'none',
-  border: '0px solid transparent',
-  background: vars.element.fill,
-  backgroundClip: 'padding-box',
 })
 
 globalStyle(`:where([data-mantine-color-scheme='dark'] [data-compound-transparent="true"])`, {
@@ -157,11 +138,13 @@ export const indicator = style({
 
 globalStyle(`${indicator} rect`, {
   stroke: indicatorStroke,
-  transformOrigin: 'center center',
   strokeWidth: indicatorStrokeWidth,
+  fill: 'none',
+})
+globalStyle(`${whereNotReducedGraphics}  ${indicator} rect`, {
+  transformOrigin: 'center center',
   animationDuration: '800ms',
-  animationName: indicatorKeyframes,
   animationIterationCount: 'infinite',
   animationDirection: 'alternate',
-  fill: 'none',
+  animationName: indicatorKeyframes,
 })

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

@@ -1,10 +1,11 @@
 import type { DiagramNode } from '@likec4/core'
 import { type BoxProps, Box, createPolymorphicComponent } from '@mantine/core'
-import { assignInlineVars } from '@vanilla-extract/dynamic'
+import { useDebouncedValue } from '@mantine/hooks'
 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 type { NodeProps } from '../../types'
 import * as css from './CompoundNodeContainer.css'
 
@@ -22,32 +23,49 @@ type CompoundNodeContainerProps =
     nodeProps: NodeProps<RequiredData>
   }>
 
+function getVarName(variable: string): string {
+  var matches = variable.match(/^var\((.*)\)$/)
+  if (matches) {
+    return matches[1]!
+  }
+  return variable
+}
+
+const opacityVar = getVarName(css.varCompoundOpacity)
+const borderTransparencyVar = getVarName(css.varBorderTransparency)
+
 export const CompoundNodeContainer = createPolymorphicComponent<'div', CompoundNodeContainerProps>(
   forwardRef<HTMLDivElement, CompoundNodeContainerProps>(({
     nodeProps: {
+      selected: isSelected = false,
       data: {
         hovered: isHovered = false,
         dimmed: isDimmed = false,
-        style,
         ...data
       },
     },
     children,
+    style,
     ...rest
   }, ref) => {
-    const isTransparent = isNumber(style.opacity) && style.opacity < 100
-    let opacity = clamp((style.opacity ?? 100) / 100, {
+    const isReducedGraphics = useIsReducedGraphics()
+    const isTransparent = isNumber(data.style.opacity) && data.style.opacity < 100
+    let _opacity = clamp((data.style.opacity ?? 100) / 100, {
       min: 0,
       max: 1,
     })
-    if (isTransparent && isHovered) {
-      opacity = Math.min(opacity + 0.11, 1)
+    if (isTransparent && isHovered && !isReducedGraphics) {
+      _opacity = Math.min(_opacity + 0.11, 1)
     }
-    const MAX_TRANSPARENCY = 40
-    const borderTransparency = clamp(MAX_TRANSPARENCY - opacity * MAX_TRANSPARENCY, {
+
+    const [opacity] = useDebouncedValue(Math.round(_opacity * 100) / 100, isHovered ? 200 : 50)
+
+    const MAX_TRANSPARENCY = 65
+    const borderTransparency = clamp(MAX_TRANSPARENCY - 0.8 * opacity * MAX_TRANSPARENCY, {
       min: 0,
       max: MAX_TRANSPARENCY,
     })
+
     return (
       <Box
         ref={ref}
@@ -63,30 +81,32 @@ export const CompoundNodeContainer = createPolymorphicComponent<'div', CompoundN
         data-compound-transparent={isTransparent}
         data-likec4-dimmed={isDimmed}
         data-likec4-shape={data.shape}
-        style={assignInlineVars({
-          [css.varCompoundOpacity]: opacity.toFixed(2),
-          [css.varBorderTransparency]: `${borderTransparency}%`,
-        })}
+        style={{
+          ...style,
+          [opacityVar]: opacity,
+          [borderTransparencyVar]: `${borderTransparency}%`,
+        }}
         {...rest}
       >
-        <svg className={css.indicator}>
-          <rect
-            x={0}
-            y={0}
-            width={'100%'}
-            height={'100%'}
-            rx={6}
-          />
-        </svg>
-        <div className={css.compoundBg} />
-        {isTransparent && style.border !== 'none' && (
+        {isTransparent && !isSelected && data.style.border !== 'none' && (
           <div
             className={css.compoundBorder}
             style={{
-              borderStyle: style.border ?? 'dashed',
+              borderStyle: data.style.border ?? 'dashed',
             }}
           />
         )}
+        {isSelected && (
+          <svg className={css.indicator}>
+            <rect
+              x={0}
+              y={0}
+              width={'100%'}
+              height={'100%'}
+              rx={6}
+            />
+          </svg>
+        )}
         {children}
       </Box>
     )

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

@@ -1,15 +1,18 @@
 import { rem } from '@mantine/core'
 import { globalStyle, style } from '@vanilla-extract/css'
-import { vars, whereLight } from '../../../theme-vars'
+import { hiddenIfZoomTooSmall } from '../../../LikeC4Diagram.css'
+import { vars, whereNotReducedGraphics } from '../../../theme-vars'
 
-export const compoundTitle = style({
+export const compoundTitle = style([hiddenIfZoomTooSmall, {
+  position: 'absolute',
   display: 'flex',
   alignItems: 'center',
   gap: 6,
-  paddingLeft: 14,
-  paddingTop: 6,
+  left: 14,
+  top: 6,
+  right: 30,
+  width: 'auto',
   minHeight: 30,
-  paddingRight: 2,
   selectors: {
     [`:where(.react-flow__node.draggable) &`]: {
       cursor: 'grab',
@@ -18,7 +21,7 @@ export const compoundTitle = style({
       paddingLeft: 30,
     },
   },
-})
+}])
 
 export const title = style({
   flex: 1,
@@ -27,14 +30,12 @@ export const title = style({
   fontSize: rem(15),
   textTransform: 'uppercase',
   letterSpacing: '0.2px',
-  // lineHeight: 1,
-  //
   color: `var(--_compound-title-color,${vars.compound.titleColor})`,
-  // paddingLeft: 0,
-  // paddingTop: 13,
-  // paddingBottom: 6,
-  // minHeight: 20,
-  mixBlendMode: 'screen',
+  selectors: {
+    [`${whereNotReducedGraphics} &`]: {
+      mixBlendMode: 'screen',
+    },
+  },
 })
 
 const iconSize = '20px'

package/src/base/primitives/customNode.ts

@@ -11,9 +11,10 @@ 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.positionAbsoluteX, next.positionAbsoluteX)
-  && eq(prev.positionAbsoluteY, next.positionAbsoluteY)
+  && 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)
 )
 

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,19 +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.edgeVars,
-        isDimmed && css.dimmed,
-        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}
-      data-edge-dimmed={isDimmed}>
+    <g {...props}>
       {children}
     </g>
   )

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

@@ -1,9 +1,16 @@
 import { rem } from '@mantine/core'
 import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-import { easings, mantine, transitions, vars, whereDark, whereLight, xyvars } from '../../../theme-vars'
-import { mixColor } from './edge.css'
-
-export { dimmed, edgeVars } from './edge.css'
+import {
+  easings,
+  mantine,
+  transitions,
+  vars,
+  whereDark,
+  whereLight,
+  whereNotReducedGraphics,
+  xyvars,
+} from '../../../theme-vars'
+import { edgeVars, mixColor } from './edge.css'
 
 const labelBorderRadius = 4
 export const stepEdgeNumber = style({
@@ -24,6 +31,7 @@ export const stepEdgeNumber = style({
       backgroundColor: `color-mix(in srgb, ${vars.relation.labelBgColor}, ${mixColor} 15%)`,
     },
     [`:where([data-edge-active='true'], [data-edge-hovered="true"]) &`]: {
+      transition: transitions.fast,
       backgroundColor: 'transparent',
     },
   },
@@ -34,7 +42,7 @@ export const varLabelY = createVar('label-y')
 
 export const varTranslate = createVar('translate')
 
-export const edgeLabelContainer = style({
+export const edgeLabelContainer = style([edgeVars, {
   top: 0,
   left: 0,
   position: 'absolute',
@@ -43,32 +51,34 @@ export const edgeLabelContainer = style({
   width: 'auto',
   height: 'auto',
   backgroundColor: xyvars.edge.labelBgColor,
-  borderRadius: labelBorderRadius,
   border: '0px solid transparent',
-  mixBlendMode: 'plus-lighter',
-  transform: varTranslate,
-  transition: transitions.fast,
-  vars: {
-    [varTranslate]: `translate(0,0)`,
-  },
   selectors: {
-    '&[data-edge-hovered="true"]': {
-      mixBlendMode: 'normal',
-      transition: `all 140ms ${easings.inOut}`,
-      transform: `${varTranslate} scale(1.12)`,
-    },
-    '&:is([data-edge-dimmed="true"])': {
-      opacity: 0.3,
+    [`&:is([data-edge-dimmed="true"])`]: {
+      opacity: 0.2,
       transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
       transitionDelay: '200ms',
       filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
-      willChange: 'opacity, filter',
     },
-    [`${whereLight} &`]: {
+    [`&:is([data-edge-dimmed="immediate"])`]: {
+      opacity: 0.1,
+      transition: 'opacity 75ms ease-in-out, filter 100ms ease-in-out',
+      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',
     },
   },
-})
+}])
 
 export const edgeLabel = style({
   fontFamily: vars.likec4.font,
@@ -144,7 +154,7 @@ export const edgeNoteCloseButton = style({
   position: 'absolute',
   top: 4,
   right: 4,
-  zIndex: 9,
+  // zIndex: 9,
 })
 
 export const edgeNoteText = style({
@@ -166,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: {
@@ -49,7 +51,7 @@ export const EdgeLabel = createPolymorphicComponent<'div', EdgeLabelProps>(
         technology,
         hovered: isHovered = false,
         active: isActive = false,
-        dimmed = false,
+        dimmed: isDimmed = false,
         labelBBox,
         ...data
       },
@@ -75,7 +77,6 @@ export const EdgeLabel = createPolymorphicComponent<'div', EdgeLabelProps>(
     if (labelX === undefined || labelY === undefined || isZoomTooSmall) {
       return null
     }
-
     const translate = labelXY?.translate
 
     return (
@@ -83,26 +84,22 @@ export const EdgeLabel = createPolymorphicComponent<'div', EdgeLabelProps>(
         <Box
           className={clsx(
             'nodrag nopan',
-            css.edgeVars,
             css.edgeLabelContainer,
-            !!dimmed && css.dimmed,
             className,
           )}
           data-likec4-color={data.color ?? 'gray'}
           data-edge-active={isActive}
           data-edge-animated={isActive}
           data-edge-hovered={isHovered}
-          data-edge-dimmed={dimmed}
+          {...isDimmed !== false && {
+            'data-edge-dimmed': isDimmed,
+          }}
           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 } from '../../../hooks/useIsReducedGraphics'
 import type { EdgeProps } from '../../types'
 import * as css from './edge.css'
 import { arrowTypeToMarker, EdgeMarkers } from './EdgeMarkers'
@@ -36,6 +37,7 @@ export const EdgePath = forwardRef<SVGPathElement, EdgePathProps>(({
   interactionWidth,
   onEdgePointerDown,
 }, svgPathRef) => {
+  const isReducedGraphicsMode = useIsReducedGraphics()
   let markerStartName = arrowTypeToMarker(tail)
   let markerEndName = arrowTypeToMarker(head ?? 'normal')
   if (dir === 'back') {
@@ -57,32 +59,42 @@ export const EdgePath = forwardRef<SVGPathElement, EdgePathProps>(({
 
   return (
     <>
-      <path
-        className={clsx('react-flow__edge-interaction')}
-        d={svgPath}
-        fill="none"
-        stroke={'transparent'}
-        strokeWidth={interactionWidth ?? 10}
-      />
+      {!isReducedGraphicsMode && (
+        <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'}
-        />
+        {!isReducedGraphicsMode && (
+          <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',
+            isReducedGraphicsMode && 'react-flow__edge-interaction',
+            css.cssEdgePath,
+          )}
           d={svgPath}
           style={style}
           strokeWidth={strokeWidth}
-          strokeLinecap={'round'}
-          strokeDasharray={strokeDasharray}
+          {...!isReducedGraphicsMode && {
+            strokeLinecap: 'round',
+            strokeDasharray: strokeDasharray,
+          }}
           markerStart={MarkerStart ? `url(#start${id})` : undefined}
           markerEnd={MarkerEnd ? `url(#end${id})` : undefined}
         />