@likec4/diagram 1.26.1 → 1.27.0

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

@@ -0,0 +1,30 @@
+import { cva } from '@likec4/styles/css'
+
+export const compoundActionBtn = cva({
+  base: {
+    transitionDuration: 'normal',
+    '[data-compound-title-inverse] &': {
+      _dark: {
+        '--actionbtn-color': 'color-mix(in srgb, {colors.likec4.palette.loContrast} 60%, {colors.likec4.palette.fill})',
+      },
+      _light: {
+        '--actionbtn-color': '{colors.likec4.palette.stroke}',
+        '--actionbtn-color-hovered': '{colors.likec4.palette.stroke}',
+        '--actionbtn-color-hovered-btn': '{colors.likec4.palette.hiContrast}',
+        '--actionbtn-bg-hovered': `{colors.likec4.palette.fill/50}`,
+        '--actionbtn-bg-hovered-btn': `{colors.likec4.palette.fill}`,
+      },
+    },
+  },
+  variants: {
+    delay: {
+      true: {
+        // Debounce CSS transition
+        transitionDelay: {
+          base: '0.2s',
+          _hover: '0s',
+        },
+      },
+    },
+  },
+})

package/src/base/primitives/customEdge.ts

@@ -12,19 +12,18 @@ export const edgePropsEqual = <P extends Record<string, unknown> = Base.EdgeData
   next: EdgeProps<P>,
 ) => (
   prev.id === next.id
+  && eq(prev.selected ?? false, next.selected ?? false)
   && eq(prev.source, next.source)
   && eq(prev.sourceHandleId ?? null, next.sourceHandleId ?? null)
+  && eq(prev.sourcePosition, next.sourcePosition)
   && eq(prev.target, next.target)
   && eq(prev.targetHandleId ?? null, next.targetHandleId ?? null)
-  && eq(prev.selected ?? false, next.selected ?? false)
-  && eq(prev.sourcePosition, next.sourcePosition)
   && eq(prev.targetPosition, next.targetPosition)
   && isSame(prev.sourceX, next.sourceX)
   && isSame(prev.sourceY, next.sourceY)
   && isSame(prev.targetX, next.targetX)
   && isSame(prev.targetY, next.targetY)
   && eq(prev.data, next.data)
-  && eq(prev.style, next.style)
 )
 
 export function customEdge<P extends Record<string, unknown> = Base.NodeData>(

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

@@ -1,9 +1,9 @@
+import { cx } from '@likec4/styles/css'
 import { ActionIcon } from '@mantine/core'
 import { IconZoomScan } from '@tabler/icons-react'
-import clsx from 'clsx'
 import { stopPropagation } from '../../../utils/xyflow'
 import type { EdgeProps } from '../../types'
-import * as css from './EdgeLabel.css'
+import { actionBtn } from './edge.css'
 
 type EdgeActionBtnProps = EdgeProps & {
   icon?: React.ReactNode
@@ -13,9 +13,7 @@ type EdgeActionBtnProps = EdgeProps & {
 export function EdgeActionButton({ icon, onClick }: EdgeActionBtnProps) {
   return (
     <ActionIcon
-      className={clsx('nodrag nopan', css.actionBtn)}
-      size={'sm'}
-      radius="sm"
+      className={cx('nodrag nopan', actionBtn)}
       onPointerDownCapture={stopPropagation}
       onClick={onClick}
       role="button"

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

@@ -1,9 +1,9 @@
 import { type DiagramEdge, invariant } from '@likec4/core'
-import clsx from 'clsx'
+import { css, cx } from '@likec4/styles/css'
 import { type PropsWithChildren } from 'react'
 import type { UndefinedOnPartialDeep } from 'type-fest'
 import type { EdgeProps } from '../../types'
-import * as css from './edge.css'
+import * as styles from './edge.css'
 
 type Data = UndefinedOnPartialDeep<
   Pick<
@@ -20,34 +20,42 @@ type EdgeContainerProps = PropsWithChildren<
   }
 >
 
+// export
+//
 export function EdgeContainer({
   className,
   component = 'g',
   data: {
+    color = 'gray',
     hovered: isHovered = false,
     active: isActive = false,
     dimmed: isDimmed = false,
     ...data
   },
   children,
+  style,
 }: EdgeContainerProps) {
   const props = {
-    className: clsx(
-      css.edgeContainer,
+    className: cx(
+      css({
+        likec4RelationPalette: color,
+      }),
+      styles.edgeVars,
+      styles.edgeContainer,
       className,
     ),
-    'data-likec4-color': data.color ?? 'gray',
+    'data-likec4-color': color,
     'data-edge-dir': data.dir ?? 'forward',
     'data-edge-active': isActive,
     'data-edge-animated': isActive,
-    'data-edge-hovered': isHovered,
+    'data-likec4-hovered': isHovered,
     ...(isDimmed !== false && {
-      'data-edge-dimmed': isDimmed,
+      'data-likec4-dimmed': isDimmed,
     }),
   }
   if (component === 'svg') {
     return (
-      <svg {...props}>
+      <svg style={style} {...props}>
         {children}
       </svg>
     )
@@ -55,7 +63,7 @@ export function EdgeContainer({
   invariant(component === 'g', 'EdgeContainer: component must be "g" or "svg"')
 
   return (
-    <g {...props}>
+    <g style={style} {...props}>
       {children}
     </g>
   )

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

@@ -1,48 +1,31 @@
-import { rem } from '@mantine/core'
-import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-import {
-  easings,
-  mantine,
-  transitions,
-  vars,
-  whereDark,
-  whereLight,
-  whereNotReducedGraphics,
-  xyvars,
-} from '../../../theme-vars'
-import { edgeVars, mixColor } from './edge.css'
+import { css, sva } from '@likec4/styles/css'
 
-const labelBorderRadius = 4
-export const stepEdgeNumber = style({
-  alignSelf: 'stretch',
-  flex: '0 0 auto',
-  fontWeight: 600,
-  fontSize: rem(14),
-  lineHeight: 1,
-  padding: '5px 5px',
-  textAlign: 'center',
-  minWidth: 22,
-  borderTopLeftRadius: labelBorderRadius,
-  borderBottomLeftRadius: labelBorderRadius,
-  backgroundColor: `color-mix(in srgb, ${vars.relation.labelBgColor}, ${mixColor} 5%)`,
-  fontVariantNumeric: 'tabular-nums',
-  selectors: {
-    [`${whereDark} :where([data-likec4-color="gray"]) &`]: {
-      backgroundColor: `color-mix(in srgb, ${vars.relation.labelBgColor}, ${mixColor} 15%)`,
-    },
-    [`:where([data-edge-active='true'], [data-edge-hovered="true"]) &`]: {
-      transition: transitions.fast,
-      backgroundColor: 'transparent',
-    },
-  },
+const labelBorderRadius = '4px'
+
+export const edgeNoteCloseButton = css({
+  position: 'absolute',
+  top: 4,
+  right: 4,
 })
 
-export const varLabelX = createVar('label-x')
-export const varLabelY = createVar('label-y')
+export const edgeNoteText = css({
+  userSelect: 'all',
+  textAlign: 'left',
+  whiteSpaceCollapse: 'preserve-breaks',
+  textWrap: 'pretty',
+  lineHeight: '1.25',
+  '--text-fz': '{fontSizes.sm}',
+  md: {
+    '--text-fz': '{fontSizes.md}',
+  },
+})
 
-export const varTranslate = createVar('translate')
+export const translate = {
+  var: '--edge-translate',
+  ref: `var(--edge-translate)`,
+} as const
 
-export const edgeLabelContainer = style([edgeVars, {
+export const edgeLabelContainer = css({
   top: 0,
   left: 0,
   position: 'absolute',
@@ -50,157 +33,110 @@ export const edgeLabelContainer = style([edgeVars, {
   cursor: 'pointer',
   width: 'auto',
   height: 'auto',
-  backgroundColor: xyvars.edge.labelBgColor,
+  background: '[var(--xy-edge-label-background-color)]',
+  color: '[var(--xy-edge-label-color)]',
   border: '0px solid transparent',
-  selectors: {
-    [`&: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)')}`,
-    },
-    [`&: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',
-    },
+
+  borderRadius: labelBorderRadius,
+
+  transform: `${translate.ref}`,
+  transition: 'fast',
+
+  '&:is([data-likec4-hovered=\'true\'])': {
+    transition: `all 190ms {easings.inOut}`,
+    transform: `var(--edge-translate, translate(0px, 0px)) scale(1.12)`,
+    transitionDelay: '100ms',
   },
-}])
 
-export const edgeLabel = style({
-  fontFamily: vars.likec4.font,
-  padding: '3px 5px 5px 5px',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  width: 'max-content',
-  maxWidth: '100%',
-  gap: rem(4),
-  // position: 'absolute',
-  // pointerEvents: 'all',
-  // cursor: 'pointer',
-  // width: 'fit-content',
-  // // transformOrigin: '50% 50%',
-  // mixBlendMode: 'plus-lighter',
-  color: xyvars.edge.labelColor,
-  // // transform: varTranslate,
-  // transition: transitions.fast,
-  // vars: {
-  //   [varTranslate]: `translate(${fallbackVar(varLabelX, '-50%')}, ${fallbackVar(varLabelY, '-50%')})`,
-  // },
-  //
-  selectors: {
-    [`&:has(${stepEdgeNumber})`]: {
-      flexDirection: 'row',
-      padding: 0,
-      gap: 0,
+  _noReduceGraphics: {
+    mixBlendMode: {
+      base: 'plus-lighter',
+      _light: 'screen',
     },
   },
+
+  _smallZoom: {
+    display: 'none',
+  },
+  _reduceGraphicsOnPan: {
+    display: 'none',
+  },
+  _whenPanning: {
+    mixBlendMode: 'normal',
+  },
 })
 
-export const secondColumn = style({
-  display: 'contents',
-  selectors: {
-    [`${edgeLabel}:has(${stepEdgeNumber}) &`]: {
-      flex: 1,
+export const labelsva = sva({
+  slots: ['root', 'stepNumber', 'labelContents', 'labelText', 'labelTechnology'],
+  base: {
+    root: {
+      fontFamily: 'likec4.relation',
+      padding: '3px 5px 5px 5px',
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'center',
-      // width: 'max-content',
-      // maxWidth: '100%',
-      // gap: rem(4),
-      padding: '1px 5px 5px 5px',
+      width: 'max-content',
+      maxWidth: '100%',
+      gap: '4px',
     },
-  },
-  ':empty': {
-    display: 'none !important',
-  },
-})
-
-export const edgeLabelText = style({
-  whiteSpaceCollapse: 'preserve-breaks',
-  fontSize: rem(14),
-  lineHeight: 1.185,
-  color: xyvars.edge.labelColor,
-})
-
-export const edgeLabelTechnology = style({
-  color: xyvars.edge.labelColor,
-  textAlign: 'center',
-  whiteSpaceCollapse: 'preserve-breaks',
-  fontSize: rem(11),
-  lineHeight: 1,
-  opacity: 0.75,
-})
-
-globalStyle(`${edgeLabel}:has(${stepEdgeNumber}) ${edgeLabelText}`, {
-  padding: '2px 5px 4px 2px',
-})
-
-export const edgeNoteCloseButton = style({
-  position: 'absolute',
-  top: 4,
-  right: 4,
-  // zIndex: 9,
-})
-
-export const edgeNoteText = style({
-  userSelect: 'all',
-  textAlign: 'left',
-  whiteSpaceCollapse: 'preserve-breaks',
-  textWrap: 'pretty',
-  lineHeight: 1.25,
-  vars: {
-    '--text-fz': mantine.fontSizes.sm,
-  },
-  '@media': {
-    [mantine.largerThan('md')]: {
-      vars: {
-        '--text-fz': mantine.fontSizes.md,
+    stepNumber: {
+      alignSelf: 'stretch',
+      flex: '0 0 auto',
+      fontWeight: 600,
+      fontSize: '14px',
+      lineHeight: '1',
+      padding: '5px 5px',
+      textAlign: 'center',
+      minWidth: '22px',
+      borderTopLeftRadius: labelBorderRadius,
+      borderBottomLeftRadius: labelBorderRadius,
+      background: `[color-mix(in srgb, {colors.likec4.relation.label.bg}, {colors.likec4.mixColor} 10%)]`,
+      fontVariantNumeric: 'tabular-nums',
+      // _dark: {
+      [':where([data-likec4-color="gray"]) &']: {
+        _dark: {
+          background: `[color-mix(in srgb, {colors.likec4.relation.label.bg}, {colors.likec4.mixColor} 15%)]`,
+        },
       },
     },
+    labelContents: {
+      display: 'contents',
+      _empty: {
+        display: 'none !important',
+      },
+    },
+    labelText: {
+      whiteSpaceCollapse: 'preserve-breaks',
+      fontSize: '14px',
+      lineHeight: '1.185',
+    },
+    labelTechnology: {
+      textAlign: 'center',
+      whiteSpaceCollapse: 'preserve-breaks',
+      fontSize: '11px',
+      lineHeight: '1',
+      opacity: 0.75,
+    },
   },
-})
-
-export const actionBtn = style({
-  // zIndex: 'calc(var(--layer-overlays, 1) + 1)',
-  pointerEvents: 'all',
-  color: xyvars.edge.labelColor,
-  cursor: 'pointer',
-  opacity: 0.75,
-  transition: transitions.fast,
-  backgroundColor: 'var(--ai-bg)',
-  vars: {
-    '--ai-bg': vars.relation.labelBgColor,
-    '--ai-hover': `color-mix(in srgb , ${vars.relation.labelBgColor}, ${mixColor} 10%)`,
-  },
-  ':hover': {
-    transform: 'translateY(1px) scale(1.15)',
-  },
-  ':active': {
-    transform: 'translateY(-1px) scale(0.9)',
-  },
-  selectors: {
-    ':where([data-edge-hovered="true"]) &': {
-      opacity: 1,
+  variants: {
+    isStepEdge: {
+      false: {},
+      true: {
+        root: {
+          flexDirection: 'row',
+          gap: '4px',
+          padding: '0px',
+        },
+        labelContents: {
+          padding: '2px 5px 4px 0px',
+        },
+        labelText: {
+          padding: '2px 6px 4px 0px',
+        },
+      },
     },
   },
-})
-globalStyle(`${actionBtn} .tabler-icon`, {
-  width: '80%',
-  height: '80%',
-  strokeWidth: 2,
+  defaultVariants: {
+    isStepEdge: false,
+  },
 })

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

@@ -1,135 +1,64 @@
 import { type DiagramEdge, extractStep, isStepEdgeId } from '@likec4/core'
-import { type BoxProps, Box, createPolymorphicComponent, Text } from '@mantine/core'
-import { EdgeLabelRenderer } from '@xyflow/react'
-import clsx from 'clsx'
-import { type PropsWithChildren, forwardRef } from 'react'
-import { isNumber, isTruthy } from 'remeda'
+import { cx } from '@likec4/styles/css'
+import { type BoxProps, Box, Text } from '@mantine/core'
+import { type PropsWithChildren } from 'react'
+import { 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'
+import { labelsva } from './EdgeLabel.css'
 
 type Data = UndefinedOnPartialDeep<
   Pick<
     DiagramEdge,
     | 'label'
     | 'technology'
-    | 'labelBBox'
-    | 'color'
   >
 >
 
 type EdgeLabelProps = PropsWithChildren<
   BoxProps & {
-    /**
-     * label position with optional translate
-     */
-    labelPosition?: {
-      x?: number | undefined
-      y?: number | undefined
-      translate?: string | undefined
-    } | undefined
-
     edgeProps: EdgeProps<Data>
   }
 >
 
-const toCssVarValue = (value: number | string | undefined) => {
-  if (value === undefined) return undefined
-  return isNumber(value) ? `${value}px` : value
-}
-
-const varTranslate = getVarName(css.varTranslate)
-
-export const EdgeLabel = createPolymorphicComponent<'div', EdgeLabelProps>(
-  forwardRef<HTMLDivElement, EdgeLabelProps>(({
-    edgeProps: {
-      id,
-      data: {
-        technology,
-        hovered: isHovered = false,
-        active: isActive = false,
-        dimmed: isDimmed = false,
-        labelBBox,
-        ...data
-      },
+export function EdgeLabel({
+  edgeProps: {
+    id,
+    data: {
+      label,
+      technology,
     },
-    labelPosition: labelXY,
-    className,
-    style,
-    children,
-    ...rest
-  }, ref) => {
-    const isZoomTooSmall = useIsZoomTooSmall()
-    const stepNum = isStepEdgeId(id) ? extractStep(id) : null
+  },
+  className,
+  style,
+  children,
+  ...rest
+}: EdgeLabelProps) {
+  const stepNum = isStepEdgeId(id) ? extractStep(id) : null
+  const classes = labelsva({
+    isStepEdge: stepNum !== null,
+  })
 
-    let zIndex = ZIndexes.Edge
-    if (isHovered || isActive) {
-      // Move above the elements
-      zIndex = ZIndexes.Element + 1
-    }
-
-    let labelX = labelXY?.x ?? labelBBox?.x,
-      labelY = labelXY?.y ?? labelBBox?.y
-
-    if (labelX === undefined || labelY === undefined || isZoomTooSmall) {
-      return null
-    }
-    const translate = labelXY?.translate
-
-    return (
-      <EdgeLabelRenderer>
-        <Box
-          className={clsx(
-            'nodrag nopan',
-            css.edgeLabelContainer,
-            className,
-          )}
-          data-likec4-color={data.color ?? 'gray'}
-          data-edge-active={isActive}
-          data-edge-animated={isActive}
-          data-edge-hovered={isHovered}
-          {...isDimmed !== false && {
-            'data-edge-dimmed': isDimmed,
-          }}
-          style={{
-            top: toCssVarValue(labelY),
-            left: toCssVarValue(labelX),
-            ...(translate && {
-              [varTranslate]: translate,
-            }),
-            ...(labelBBox && {
-              maxWidth: labelBBox.width + 18,
-            }),
-            zIndex,
-            ...style,
-          }}
-        >
-          <Box ref={ref} className={css.edgeLabel} {...rest}>
-            {stepNum !== null && (
-              <Box className={css.stepEdgeNumber}>
-                {stepNum}
-              </Box>
-            )}
-            <Box className={css.secondColumn}>
-              {isTruthy(data.label) && (
-                <Text component="div" className={css.edgeLabelText} lineClamp={5}>
-                  {data.label}
-                </Text>
-              )}
-              {isTruthy(technology) && (
-                <Text component="div" className={css.edgeLabelTechnology}>
-                  {'[ ' + technology + ' ]'}
-                </Text>
-              )}
-              {children}
-            </Box>
-          </Box>
+  return (
+    <Box className={cx(classes.root!, className)} {...rest}>
+      {stepNum !== null && (
+        <Box className={classes.stepNumber!}>
+          {stepNum}
         </Box>
-      </EdgeLabelRenderer>
-    )
-  }),
-)
-EdgeLabel.displayName = 'EdgeLabel'
+      )}
+      <Box className={classes.labelContents!}>
+        {isTruthy(label) && (
+          <Text component="div" className={classes.labelText!} lineClamp={5}>
+            {label}
+          </Text>
+        )}
+        {isTruthy(technology) && (
+          <Text component="div" className={classes.labelTechnology!}>
+            {'[ ' + technology + ' ]'}
+          </Text>
+        )}
+        {children}
+      </Box>
+    </Box>
+  )
+}