@likec4/diagram 1.26.2 → 1.27.1

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

@@ -0,0 +1,118 @@
+import { type DiagramEdge } from '@likec4/core'
+import { css, cx } from '@likec4/styles/css'
+import { EdgeLabelRenderer } from '@xyflow/react'
+import { type HTMLAttributes } from 'react'
+import { isNumber } from 'remeda'
+import type { UndefinedOnPartialDeep } from 'type-fest'
+import { ZIndexes } from '../../const'
+import type { EdgeProps } from '../../types'
+import { edgeVars } from './edge.css'
+import { edgeLabelContainer, translate as _translate } from './EdgeLabel.css'
+
+type Data = UndefinedOnPartialDeep<
+  Pick<
+    DiagramEdge,
+    | 'labelBBox'
+    | 'color'
+  >
+>
+
+type EdgeLabelContainerProps = HTMLAttributes<HTMLDivElement> & {
+  /**
+   * 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) ? `${Math.round(value)}px` : value
+}
+
+export function EdgeLabelContainer({
+  edgeProps: {
+    id,
+    data: {
+      hovered: isHovered = false,
+      active: isActive = false,
+      dimmed: isDimmed = false,
+      labelBBox,
+      color = 'gray',
+    },
+  },
+  labelPosition: labelXY,
+  className,
+  style,
+  children,
+  ...rest
+}: EdgeLabelContainerProps) {
+  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) {
+    return null
+  }
+  const translate = labelXY?.translate
+
+  return (
+    <EdgeLabelRenderer key={id}>
+      <div
+        key={id}
+        className={cx(
+          css({
+            likec4RelationPalette: color,
+          }),
+          edgeVars,
+          edgeLabelContainer,
+          'nodrag nopan',
+          'likec4-edge-label-container',
+          className,
+        )}
+        data-likec4-hovered={isHovered}
+        data-likec4-color={color}
+        data-edge-active={isActive}
+        data-edge-animated={isActive}
+        {...isDimmed !== false && {
+          'data-likec4-dimmed': isDimmed,
+        }}
+        style={{
+          top: toCssVarValue(labelY),
+          left: toCssVarValue(labelX),
+          ...(translate && {
+            [_translate.var]: translate,
+          }),
+          ...(labelBBox && {
+            maxWidth: labelBBox.width + 18,
+          }),
+          zIndex,
+          ...style,
+        }}
+        {...rest}
+      >
+        {/* Work around to keep same global selector data-likec4-dimmed */}
+        <div
+          className={css({
+            display: 'contents',
+          })}
+          {...isDimmed !== false && {
+            'data-likec4-dimmed': isDimmed,
+          }}
+        >
+          {children}
+        </div>
+      </div>
+    </EdgeLabelRenderer>
+  )
+}

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

@@ -1,10 +1,9 @@
 import type { DiagramEdge } from '@likec4/core'
-import clsx from 'clsx'
+import { cx } from '@likec4/styles/css'
 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 { cssEdgePath, edgePathBg, hideOnReducedGraphics, markerContext } from './edge.css'
 import { arrowTypeToMarker, EdgeMarkers } from './EdgeMarkers'
 
 type Data = UndefinedOnPartialDeep<
@@ -30,17 +29,13 @@ 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') {
@@ -59,48 +54,44 @@ export const EdgePath = forwardRef<SVGPathElement, EdgePathProps>(({
   } else if (isDashed) {
     strokeDasharray = '8,10'
   }
-  if (isLooseReduce) {
-    strokeDasharray = undefined
-  }
+  // if (isLooseReduce) {
+  //   strokeDasharray = undefined
+  // }
 
-  const isAnimated = (animated || data.hovered || data.active) && !data.dimmed
-  if (isLooseReduce && isAnimated) {
-    style = {
-      ...style,
-      animationName: 'none',
-    }
-  }
+  // const isAnimated = (animated || data.hovered || data.active) && !data.dimmed
+  // if (isLooseReduce && isAnimated) {
+  //   style = {
+  //     ...style,
+  //     animationName: 'none',
+  //   }
+  // }
 
   return (
     <>
-      {!isLooseReduce && (
-        <path
-          className={clsx('react-flow__edge-interaction')}
-          d={svgPath}
-          fill="none"
-          stroke={'transparent'}
-          strokeWidth={interactionWidth ?? 10}
-        />
-      )}
-      <g className={css.markerContext} onPointerDown={onEdgePointerDown}>
+      <path
+        className={cx('react-flow__edge-interaction', hideOnReducedGraphics)}
+        d={svgPath}
+        fill="none"
+        stroke={'transparent'}
+        strokeWidth={interactionWidth ?? 10}
+      />
+      <g className={markerContext} onPointerDown={onEdgePointerDown}>
         <defs>
           {MarkerStart && <MarkerStart id={'start' + id} />}
           {MarkerEnd && <MarkerEnd id={'end' + id} />}
         </defs>
-        {!isReducedGraphics && (
-          <path
-            className={clsx('react-flow__edge-path', css.edgePathBg)}
-            d={svgPath}
-            style={style}
-            strokeLinecap={'round'}
-          />
-        )}
+        <path
+          className={cx('react-flow__edge-path', edgePathBg)}
+          d={svgPath}
+          style={style}
+          strokeLinecap={'round'}
+        />
         <path
           ref={svgPathRef}
-          className={clsx(
+          className={cx(
             'react-flow__edge-path',
             'react-flow__edge-interaction',
-            css.cssEdgePath,
+            cssEdgePath,
           )}
           d={svgPath}
           style={style}

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

@@ -1,160 +1,135 @@
-import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
-import {
-  reactFlow,
-} from '../../../LikeC4Diagram.css'
-import {
-  vars,
-  whereDark,
-  whereLight,
-  whereNotReducedGraphics,
-  whereReducedGraphics,
-  whereSmallZoom,
-  xyvars,
-} from '../../../theme-vars'
+import { css } from '@likec4/styles/css'
 
-export const mixColor = createVar('mix-color')
+const isSelected = '.react-flow__edge.selected'
 
-export const edgeVars = style({
-  vars: {
-    [mixColor]: `black`,
-    [xyvars.edge.stroke]: vars.relation.lineColor,
-    [xyvars.edge.strokeSelected]: `color-mix(in srgb, ${vars.relation.lineColor}, ${mixColor} 35%)`,
-    [xyvars.edge.labelColor]: vars.relation.labelColor,
-    [xyvars.edge.labelBgColor]: vars.relation.labelBgColor,
-    [xyvars.edge.strokeWidth]: '3',
-  },
-  selectors: {
-    [`${whereDark} &`]: {
-      vars: {
-        [mixColor]: `white`,
-      },
-    },
-    [`${whereLight} ${whereNotReducedGraphics} &`]: {
-      vars: {
-        [xyvars.edge.labelColor]: `color-mix(in srgb, ${vars.relation.labelColor}, rgba(255 255 255 / 0.85) 40%)`,
-        [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 40%)`,
-      },
-    },
-    [`${whereDark} ${whereNotReducedGraphics} &`]: {
-      vars: {
-        [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 50%)`,
-      },
-    },
-  },
-})
+const edgeStroke = '--xy-edge-stroke'
+const edgeStrokeSelected = '--xy-edge-stroke-selected'
+const labelColor = '--xy-edge-label-color'
+const labelBg = '--xy-edge-label-background-color'
 
-export const edgeContainer = style([edgeVars, {
-  selectors: {
-    [`&:is([data-edge-dimmed="true"])`]: {
-      opacity: 0.6,
-      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.25,
-      transition: 'opacity 100ms ease-in-out, filter 100ms ease-in-out',
-      filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
-    },
-    [`${whereReducedGraphics} &`]: {
-      transition: 'none',
-    },
+export const edgeVars = css({
+  [edgeStroke]: '{colors.likec4.relation.stroke}',
+  [edgeStrokeSelected]: '{colors.likec4.relation.stroke.selected}',
+  [labelColor]: {
+    base: '{colors.likec4.relation.label}',
+    _light: `color-mix(in srgb, {colors.likec4.relation.label}, rgba(255 255 255 / 0.85) 40%)`,
   },
-}])
-const isSelected = '.react-flow__edge.selected'
-
-globalStyle(`:where(${isSelected}) ${edgeVars}`, {
-  vars: {
-    [xyvars.edge.stroke]: xyvars.edge.strokeSelected,
-    [xyvars.edge.strokeWidth]: '3',
+  [labelBg]: {
+    _light: `{colors.likec4.relation.label.bg/60}`,
+    _dark: `{colors.likec4.relation.label.bg/50}`,
   },
-})
-
-globalStyle(`${edgeVars}:is([data-edge-hovered='true'],[data-edge-active='true'])`, {
-  vars: {
-    // [xyvars.edge.stroke]: `color-mix(in srgb, ${vars.relation.lineColor}, ${mixColor} 35%)`,
-    [xyvars.edge.stroke]: xyvars.edge.strokeSelected,
-    [xyvars.edge.strokeWidth]: '3',
+  ['--xy-edge-stroke-width']: '3',
+  '&:is([data-likec4-hovered=\'true\'],[data-edge-active=\'true\'])': {
+    [edgeStroke]: '{colors.likec4.relation.stroke.selected}',
+    _whenSelected: {
+      ['--xy-edge-stroke-width']: '4',
+    },
   },
 })
 
-globalStyle(`:where(${isSelected}) ${edgeVars}[data-edge-hovered='true']`, {
-  vars: {
-    [xyvars.edge.strokeWidth]: '4',
+export const edgeContainer = css({
+  _reduceGraphics: {
+    transition: 'none',
   },
 })
 
-globalStyle(`${reactFlow} :where(.react-flow__edges, .react-flow__edgelabel-renderer) > svg`, {
-  mixBlendMode: 'plus-lighter',
-})
-globalStyle(`${whereLight} ${reactFlow} :where(.react-flow__edges, .react-flow__edgelabel-renderer) > svg`, {
-  mixBlendMode: 'screen',
+const _hideOnReducedGraphics = css.raw({
+  _reduceGraphicsOnPan: {
+    display: 'none',
+  },
+  _smallZoom: {
+    display: 'none',
+  },
 })
+export const hideOnReducedGraphics = css(_hideOnReducedGraphics)
 
-export const edgePathBg = style({
-  // strokeWidth: xyvars.edge.strokeWidth,
+export const edgePathBg = css(_hideOnReducedGraphics, {
+  fill: '[none]',
+  strokeWidth: 'calc(var(--xy-edge-stroke-width) + 2)',
   strokeOpacity: 0.08,
-  // transition: 'stroke-width 175ms ease-in-out',
-  // transition: 'stroke-width 175ms ease-in-out, stroke-opacity 150ms ease-out',
   transitionProperty: 'stroke-width, stroke-opacity',
-  transitionDuration: '155ms',
-  transitionTimingFunction: 'ease-out',
-  selectors: {
-    [`:where([data-likec4-zoom-small="true"]) &`]: {
-      display: 'none',
-    },
-    [`:where(${isSelected}, [data-edge-active='true'], [data-edge-hovered='true']) &`]: {
-      strokeWidth: `calc(${xyvars.edge.strokeWidth} + 8)`,
-      strokeOpacity: 0.15,
+  transitionDuration: 'fast',
+  transitionTimingFunction: 'inOut',
+  _whenHovered: {
+    transitionTimingFunction: 'out',
+    strokeWidth: 'calc(var(--xy-edge-stroke-width) + 4)',
+    strokeOpacity: 0.2,
+  },
+  _whenSelected: {
+    strokeWidth: 'calc(var(--xy-edge-stroke-width) + 6)',
+    strokeOpacity: 0.25,
+    _whenHovered: {
+      strokeOpacity: 0.4,
     },
   },
 })
 
 // To fix issue with marker not inheriting color from path - we need to create container
-export const markerContext = style({
-  fill: xyvars.edge.stroke,
-  stroke: xyvars.edge.stroke,
+export const markerContext = css({
+  fill: '[var(--xy-edge-stroke)]' as const,
+  stroke: '[var(--xy-edge-stroke)]' as const,
 })
 
-const strokeKeyframes = keyframes({
-  'from': {
-    strokeDashoffset: 18 * 2 + 10,
+export const cssEdgePath = css({
+  fill: '[none]',
+  strokeDashoffset: 10,
+  _noReduceGraphics: {
+    transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out',
   },
-  'to': {
-    strokeDashoffset: 10,
+  _whenHovered: {
+    animationStyle: 'xyedgeAnimated',
+    animationDelay: '450ms',
   },
-})
-
-export const cssEdgePath = style({
-  animationDuration: '800ms',
-  animationIterationCount: 'infinite',
-  animationTimingFunction: 'linear',
-  animationFillMode: 'both',
-  strokeDashoffset: 10,
-  selectors: {
-    [`${whereNotReducedGraphics} &`]: {
-      transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out',
-    },
-    [`:where([data-edge-hovered='true']) &`]: {
-      animationName: strokeKeyframes,
-      animationDelay: '450ms',
-    },
-    [`:where(${isSelected}, [data-edge-active='true'], [data-edge-animated='true']) &`]: {
-      animationName: strokeKeyframes,
-      animationDelay: '0ms',
-    },
-    [`:where([data-edge-dir='back']) &`]: {
-      animationDirection: 'reverse',
-    },
-    [`:where([data-edge-dimmed]) &`]: {
-      animationPlayState: 'paused',
-    },
-    [`${whereSmallZoom} &`]: {
-      animationName: 'none',
-    },
+  [`:where(${isSelected}, [data-edge-active='true'], [data-edge-animated='true']) &`]: {
+    animationStyle: 'xyedgeAnimated',
+    animationDelay: '0ms',
+  },
+  [`:where([data-edge-dir='back']) &`]: {
+    animationDirection: 'reverse',
+  },
+  _whenDimmed: {
+    animationPlayState: 'paused',
+  },
+  _smallZoom: {
+    animationName: 'none',
+  },
+  _whenPanning: {
+    strokeDasharray: 'none !important',
+    animationName: 'none',
   },
 })
 
-export const looseReduce = style({
-  animationName: 'none',
+const aiBg = {
+  var: '--ai-bg',
+  ref: 'var(--ai-bg)',
+} as const
+
+export const actionBtn = css({
+  // zIndex: 'calc(var(--layer-overlays, 1) + 1)',
+  pointerEvents: 'all',
+  // color: `xyedge.label`,
+  cursor: 'pointer',
+  opacity: 0.75,
+  transition: 'fast',
+  // backgroundColor: aiBg.ref,
+  [aiBg.var]: 'var(--xy-edge-label-background-color)',
+  '--ai-hover': `color-mix(in srgb , var(--xy-edge-label-background-color), {colors.likec4.mixColor} 10%)`,
+  '--ai-size': `var(--ai-size-sm)`,
+  '--ai-radius': `var(--mantine-radius-sm)`,
+  _hover: {
+    translateY: '1px',
+    scale: 1.15,
+  },
+  _active: {
+    translateY: '-1px',
+    scale: '0.9',
+  },
+  _whenHovered: {
+    opacity: 1,
+  },
+  '& .tabler-icon': {
+    width: '80%',
+    height: '80%',
+    strokeWidth: '2',
+  },
 })

package/src/base/primitives/edge/xyvars.ts

@@ -0,0 +1,31 @@
+export const xyvars = {
+  edge: {
+    stroke: {
+      var: '--xy-edge-stroke',
+      ref: 'var(--xy-edge-stroke)',
+    },
+    strokeSelected: {
+      var: '--xy-edge-stroke-selected',
+      ref: 'var(--xy-edge-stroke-selected)',
+    },
+    labelColor: {
+      var: '--xy-edge-label-color',
+      ref: 'var(--xy-edge-label-color)',
+    },
+    labelBgColor: {
+      var: '--xy-edge-label-background-color',
+      ref: 'var(--xy-edge-label-background-color)',
+    },
+    strokeWidth: {
+      var: '--xy-edge-stroke-width',
+      ref: 'var(--xy-edge-stroke-width)',
+    },
+  },
+  // edge: cssVar.scope('xy-edge', [
+  //   'stroke',
+  //   ['strokeSelected', 'stroke-selected'],
+  //   ['labelColor', 'label-color'],
+  //   ['labelBgColor', 'label-background-color'],
+  //   ['strokeWidth', 'stroke-width'],
+  // ]),
+} as const

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

@@ -1,15 +1,37 @@
+import { css, cx } from '@likec4/styles/css'
+import { actionBtn } from '@likec4/styles/recipes'
 import { ActionIcon, Box } from '@mantine/core'
-import clsx from 'clsx'
 import { m } from 'framer-motion'
 import { useIsZoomTooSmall } from '../../../hooks/useXYFlow'
 import { stopPropagation } from '../../../utils/xyflow'
 import type { NodeProps } from '../../types'
-import * as css from './ElementActionButtons.css'
 
 type ElementActionButtonsProps = NodeProps & {
   buttons: ElementActionButtons.Item[]
 }
 
+const container = css({
+  position: 'absolute',
+  top: `calc(100% - 28px)`,
+  // transform: 'translateY(-100%)',
+  left: 0,
+  width: '100%',
+  minHeight: '28px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  _smallZoom: {
+    display: 'none',
+  },
+  // zIndex: 10,
+})
+
+const actionButtons = css({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+})
+
 export function ElementActionButtons({
   id,
   selected = false,
@@ -23,22 +45,22 @@ export function ElementActionButtons({
     return null
   }
   return (
-    <Box className={clsx(css.container)}>
+    <Box className={container}>
       <Box
         component={m.div}
         layoutRoot
         initial={false}
         style={{
           originY: 0,
-          gap: '6px',
+          gap: '8px',
         }}
         animate={{
           opacity: (isHovered || selected) ? 1 : 0.75,
           scale: isHovered ? 1.1 : (selected ? 0.9 : 0.8),
           y: (isHovered || selected) ? 6 : 0,
         }}
-        data-hovered={isHovered}
-        className={clsx('nodrag nopan', css.actionButtons)}
+        data-likec4-hovered={isHovered}
+        className={cx('nodrag nopan', actionButtons)}
       >
         {buttons.map((button, index) => (
           <m.div
@@ -50,11 +72,9 @@ export function ElementActionButtons({
             }}
           >
             <ActionIcon
-              className={css.actionIcon}
-              size={'md'}
-              radius="md"
-              // Otherwise node receives click event and is selected
+              className={actionBtn({})}
               onClick={button.onClick}
+              // Otherwise node receives click event and is selected
               onDoubleClick={stopPropagation}
             >
               {button.icon}

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

@@ -1,17 +1,38 @@
+import { css, cx } from '@likec4/styles/css'
+import { actionBtn } from '@likec4/styles/recipes'
 import { ActionIcon, Box } from '@mantine/core'
 import { IconId } from '@tabler/icons-react'
-import clsx from 'clsx'
 import { m } from 'framer-motion'
-import { hiddenIfZoomTooSmall } from '../../../LikeC4Diagram.css'
 import { stopPropagation } from '../../../utils/xyflow'
 import type { NodeProps } from '../../types'
-import * as css from './ElementDetailsButton.css'
 
 type ElementDetailsButtonProps = NodeProps & {
   icon?: React.ReactNode
   onClick: (e: React.MouseEvent) => void
 }
 
+const container = css({
+  position: 'absolute',
+  top: 2,
+  right: 2,
+  _shapeBrowser: {
+    right: '5px',
+  },
+  _shapeCylinder: {
+    top: '14px',
+  },
+  _shapeStorage: {
+    top: '14px',
+  },
+  _shapeQueue: {
+    top: '1px',
+    right: '12px',
+  },
+  _smallZoom: {
+    display: 'none',
+  },
+})
+
 export function ElementDetailsButton({
   selected = false,
   data: {
@@ -21,9 +42,9 @@ export function ElementDetailsButton({
   onClick,
 }: ElementDetailsButtonProps) {
   return (
-    <Box className={clsx(css.container, hiddenIfZoomTooSmall, 'details-button')}>
+    <Box className={cx(container, 'details-button')}>
       <ActionIcon
-        className={clsx('nodrag nopan', css.actionIcon)}
+        className={cx('nodrag nopan', actionBtn({ variant: 'transparent' }))}
         component={m.button}
         initial={false}
         style={{
@@ -33,7 +54,7 @@ export function ElementDetailsButton({
         animate={(isHovered || selected)
           ? {
             scale: 1.2,
-            opacity: 0.7,
+            opacity: 0.8,
           }
           : {
             scale: 1,
@@ -44,8 +65,6 @@ export function ElementDetailsButton({
           opacity: 1,
         }}
         whileTap={{ scale: 1.15 }}
-        size={'md'}
-        radius="md"
         onClick={onClick}
         onDoubleClick={stopPropagation}
       >