@likec4/diagram 1.0.2 → 1.1.1

package/src/xyflow/XYFlowEvents.tsx

@@ -1,20 +1,34 @@
-import type { EdgeMouseHandler, NodeMouseHandler, OnMoveEnd } from '@xyflow/react'
-import type { MouseEvent as ReactMouseEvent } from 'react'
-import { useMemo, useRef } from 'react'
+import type { ReactFlowProps } from '@xyflow/react'
+import { useEffect, useMemo, useRef } from 'react'
+import type { Simplify } from 'type-fest'
 import { useDiagramStoreApi } from '../state'
 import { useXYStoreApi } from './hooks'
-import type { XYFlowEdge, XYFlowNode } from './types'
+import type { XYFlowEdge, XYFlowNode, XYFlowState } from './types'
 
-type XYFlowEventHandlers = {
-  onPaneClick: (event: ReactMouseEvent) => void
-  onNodeContextMenu: NodeMouseHandler<XYFlowNode>
-  onEdgeContextMenu: EdgeMouseHandler<XYFlowEdge>
-  onPaneContextMenu: (event: ReactMouseEvent | MouseEvent) => void
-  onNodeClick: NodeMouseHandler<XYFlowNode>
-  onEdgeClick: EdgeMouseHandler<XYFlowEdge>
-  // onMoveStart: OnMoveStart
-  onMoveEnd: OnMoveEnd
-}
+type XYFlowEventHandlers = Simplify<
+  Required<
+    Pick<
+      ReactFlowProps<XYFlowNode, XYFlowEdge>,
+      | 'onDoubleClick'
+      | 'onPaneClick'
+      | 'onNodeClick'
+      | 'onNodeDoubleClick'
+      | 'onEdgeClick'
+      | 'onMoveEnd'
+      | 'onNodeContextMenu'
+      | 'onEdgeContextMenu'
+      | 'onPaneContextMenu'
+      | 'onNodeMouseEnter'
+      | 'onNodeMouseLeave'
+      | 'onEdgeMouseEnter'
+      | 'onEdgeMouseLeave'
+      | 'onViewportChange'
+    >
+  >
+>
+
+const viewportDomNode = (state: XYFlowState) =>
+  state.domNode?.querySelector<HTMLDivElement>('.react-flow__viewport') ?? null
 
 export function useXYFlowEvents() {
   const diagramApi = useDiagramStoreApi()
@@ -22,79 +36,159 @@ export function useXYFlowEvents() {
 
   const dblclickTimeout = useRef<number>()
 
-  return useMemo<XYFlowEventHandlers>(() => ({
-    onPaneClick: (event) => {
-      diagramApi.setState(
-        {
-          lastClickedNodeId: null,
-          lastClickedEdgeId: null
-        },
-        false,
-        'onPaneClick'
-      )
-      const diagramState = diagramApi.getState()
+  const viewportRef = useRef(viewportDomNode(xyflowApi.getState()))
+
+  const dbclickGuarg = () => {
+    if (dblclickTimeout.current !== undefined) {
+      return true
+    }
+    dblclickTimeout.current = window.setTimeout(() => {
+      dblclickTimeout.current = undefined
+    }, 250)
+    return false
+  }
+
+  const transformRef = useRef('')
+  const cbRef = useRef<number>()
+
+  useEffect(() =>
+    xyflowApi.subscribe((state, prev) => {
+      if (state.domNode !== prev.domNode || (state.domNode && !viewportRef.current)) {
+        viewportRef.current = viewportDomNode(state)
+      }
+    }), [xyflowApi])
 
-      if (dblclickTimeout.current) {
-        window.clearTimeout(dblclickTimeout.current)
-        dblclickTimeout.current = undefined
+  return useMemo(() =>
+    ({
+      onDoubleClick: (event) => {
+        diagramApi.getState().resetLastClicked()
+        const diagramState = diagramApi.getState()
         if (diagramState.onCanvasDblClick) {
           diagramState.onCanvasDblClick(event)
           return
         }
-        diagramState.onCanvasClick?.(event)
-        if (diagramState.fitViewEnabled && diagramState.viewportChanged) {
+        if (diagramState.fitViewEnabled && diagramState.zoomable) {
           diagramState.fitDiagram()
+          event.stopPropagation()
+          return
         }
-        return
-      }
-
-      dblclickTimeout.current = window.setTimeout(() => {
-        dblclickTimeout.current = undefined
-        diagramApi.getState().onCanvasClick?.(event)
-      }, 300)
-    },
-    onNodeContextMenu: (event, xynode) => {
-      diagramApi.getState().setLastClickedNode(xynode.id)
-      diagramApi.getState().onNodeContextMenu?.({
-        element: xynode.data.element,
-        xynode,
-        event
-      })
-    },
-    onPaneContextMenu: (event) => {
-      diagramApi.getState().setLastClickedNode(null)
-      diagramApi.getState().setLastClickedEdge(null)
-      diagramApi.getState().onCanvasContextMenu?.(event as any)
-    },
-    onEdgeContextMenu: (event, xyedge) => {
-      diagramApi.getState().setLastClickedEdge(xyedge.id)
-      diagramApi.getState().onEdgeContextMenu?.({
-        relation: xyedge.data.edge,
-        xyedge,
-        event
-      })
-    },
-    onNodeClick: (event, xynode) => {
-      diagramApi.getState().setLastClickedNode(xynode.id)
-      diagramApi.getState().onNodeClick?.({
-        element: xynode.data.element,
-        xynode,
-        event
-      })
-    },
-    onEdgeClick: (event, xyedge) => {
-      diagramApi.getState().setLastClickedEdge(xyedge.id)
-      diagramApi.getState().onEdgeClick?.({
-        relation: xyedge.data.edge,
-        xyedge,
-        event
-      })
-    },
-    onMoveEnd: (event, _viewport) => {
-      const viewportChanged = !!event
-      if (viewportChanged !== diagramApi.getState().viewportChanged) {
-        diagramApi.setState({ viewportChanged }, false, `viewport-changed: ${viewportChanged}`)
+      },
+      onPaneClick: (event) => {
+        if (dbclickGuarg()) {
+          return
+        }
+        const { focusedNodeId, fitDiagram, onCanvasClick, resetLastClicked } = diagramApi.getState()
+        resetLastClicked()
+        if (onCanvasClick) {
+          onCanvasClick(event)
+          return
+        }
+        // reset focus if clicked on empty space
+        if (focusedNodeId) {
+          fitDiagram()
+          event.stopPropagation()
+        }
+      },
+      onNodeContextMenu: (event, xynode) => {
+        diagramApi.getState().setLastClickedNode(xynode.id)
+        diagramApi.getState().onNodeContextMenu?.({
+          element: xynode.data.element,
+          xynode,
+          event
+        })
+      },
+      onPaneContextMenu: (event) => {
+        diagramApi.getState().resetLastClicked()
+        diagramApi.getState().onCanvasContextMenu?.(event as any)
+      },
+      onEdgeContextMenu: (event, xyedge) => {
+        diagramApi.getState().setLastClickedEdge(xyedge.id)
+        diagramApi.getState().onEdgeContextMenu?.({
+          relation: xyedge.data.edge,
+          xyedge,
+          event
+        })
+      },
+      onNodeClick: (event, xynode) => {
+        diagramApi.getState().setLastClickedNode(xynode.id)
+        const { focusedNodeId, fitDiagram, onNodeClick } = diagramApi.getState()
+        if (onNodeClick) {
+          onNodeClick({
+            element: xynode.data.element,
+            xynode,
+            event
+          })
+          return
+        }
+        // if we clicked on a node that is not focused, fit the diagram
+        if (!!focusedNodeId && focusedNodeId !== xynode.id) {
+          fitDiagram(xynode)
+          event.stopPropagation()
+        }
+      },
+      onNodeDoubleClick: (event, xynode) => {
+        diagramApi.getState().setLastClickedNode(xynode.id)
+        const { zoomable, fitViewEnabled, fitDiagram, onNodeClick } = diagramApi.getState()
+        if (onNodeClick) {
+          return
+        }
+        if (zoomable && fitViewEnabled) {
+          fitDiagram(xynode)
+          event.stopPropagation()
+        }
+      },
+      onEdgeClick: (event, xyedge) => {
+        diagramApi.getState().setLastClickedEdge(xyedge.id)
+        const { focusedNodeId, fitDiagram, onEdgeClick, xyflow } = diagramApi.getState()
+        if (onEdgeClick) {
+          onEdgeClick({
+            relation: xyedge.data.edge,
+            xyedge,
+            event
+          })
+          return
+        }
+        if (focusedNodeId && (focusedNodeId === xyedge.source || focusedNodeId === xyedge.target)) {
+          const nextFocus = focusedNodeId === xyedge.source ? xyedge.target : xyedge.source
+          fitDiagram(xyflow.getNode(nextFocus))
+          event.stopPropagation()
+        }
+      },
+      onMoveEnd: (event, _viewport) => {
+        // if event is present, the move was triggered by user
+        const viewportChanged = !!event
+        if (viewportChanged !== diagramApi.getState().viewportChanged) {
+          diagramApi.setState({ viewportChanged }, false, `viewport-changed: ${viewportChanged}`)
+        }
+      },
+      onNodeMouseEnter: (event, xynode) => {
+        diagramApi.getState().setHoveredNode(xynode.id)
+      },
+      onNodeMouseLeave: (event, xynode) => {
+        diagramApi.getState().setHoveredNode(null)
+      },
+      onEdgeMouseEnter: (event, xyedge) => {
+        diagramApi.getState().setHoveredEdge(xyedge.id)
+      },
+      onEdgeMouseLeave: (event, xyedge) => {
+        diagramApi.getState().setHoveredEdge(null)
+      },
+      /**
+       * WOKAROUND:
+       * Viewport transform is not rounded to integers which results in blurry nodes on some resolution
+       * https://github.com/xyflow/xyflow/issues/3282
+       */
+      onViewportChange: ({ x, y, zoom }) => {
+        const scale = zoom != 1 ? zoom.toFixed(6) : '1'
+        transformRef.current = `translate(${Math.round(x)}px, ${Math.round(y)}px) scale(${scale})`
+        cbRef.current ??= requestIdleCallback(() => {
+          cbRef.current = undefined
+          if (viewportRef.current && viewportRef.current.style.transform !== transformRef.current) {
+            viewportRef.current.style.transform = transformRef.current
+          }
+        }, {
+          timeout: 1000
+        })
       }
-    }
-  }), [diagramApi, xyflowApi])
+    }) satisfies XYFlowEventHandlers, [diagramApi, xyflowApi])
 }

package/src/xyflow/diagram-to-xyflow.ts

@@ -118,10 +118,10 @@ export function diagramViewToXYFlowData(
       initialHeight: node.height, */
       width: node.width,
       height: node.height,
-      measured: {
-        width: node.width,
-        height: node.height
-      },
+      // measured: {
+      //   width: node.width,
+      //   height: node.height
+      // },
       ...(parent && {
         parentId: ns + parent.id
       })

package/src/xyflow/edges/RelationshipEdge.tsx

@@ -3,7 +3,9 @@ import { Box } from '@mantine/core'
 import { assignInlineVars } from '@vanilla-extract/dynamic'
 import type { EdgeProps, XYPosition } from '@xyflow/react'
 import { EdgeLabelRenderer, getBezierPath } from '@xyflow/react'
+import { getNodePositionWithOrigin } from '@xyflow/system'
 import clsx from 'clsx'
+import { curveCatmullRomOpen, line as d3line } from 'd3-shape'
 import { deepEqual as eq } from 'fast-equals'
 import { type CSSProperties, memo } from 'react'
 import { hasAtLeast } from 'remeda'
@@ -12,16 +14,7 @@ import { ZIndexes } from '../const'
 import { useXYStoreApi } from '../hooks'
 import { type XYFlowEdge } from '../types'
 import { toDomPrecision } from '../utils'
-import {
-  container,
-  cssEdgePath,
-  edgeLabel,
-  edgeLabelBody,
-  edgePathBg,
-  fillStrokeCtx,
-  varLabelX,
-  varLabelY
-} from './edges.css'
+import * as edgesCss from './edges.css'
 import { getEdgeParams } from './utils'
 // import { getEdgeParams } from './utils'
 
@@ -83,6 +76,7 @@ const isEqualProps = (prev: EdgeProps<XYFlowEdge>, next: EdgeProps<XYFlowEdge>)
   prev.id === next.id
   && prev.source === next.source
   && prev.target === next.target
+  && eq(prev.selected ?? false, next.selected ?? false)
   && isSamePoint(prev.sourceX, next.sourceX)
   && isSamePoint(prev.sourceY, next.sourceY)
   && isSamePoint(prev.targetX, next.targetX)
@@ -90,11 +84,12 @@ const isEqualProps = (prev: EdgeProps<XYFlowEdge>, next: EdgeProps<XYFlowEdge>)
   && eq(prev.data, next.data)
 )
 
+const curve = d3line<Point>().curve(curveCatmullRomOpen.alpha(1))
+
 export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(function RelationshipEdgeR({
   id,
   data,
   selected: _selected,
-  markerEnd: _markerEnd,
   style,
   source,
   target,
@@ -107,16 +102,13 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
   const isNotModified = isSamePosition(sourceNode.internals.positionAbsolute, sourceNode.data.element.position)
     && isSamePosition(targetNode.internals.positionAbsolute, targetNode.data.element.position)
 
-  invariant(data, 'data is required')
-  const {
-    edge
-  } = data
+  const { edge: diagramEdge, controlPoints } = data
   // const edgePath = bezierPath(edge.points)
 
-  const color = edge.color ?? 'gray'
+  const color = diagramEdge.color ?? 'gray'
   const isHovered = useDiagramState(s => s.hoveredEdgeId === id)
 
-  const line = edge.line ?? 'dashed'
+  const line = diagramEdge.line ?? 'dashed'
   const isDotted = line === 'dotted'
   const isDashed = isDotted || line === 'dashed'
 
@@ -132,7 +124,7 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
   let edgePath: string, labelX: number, labelY: number
 
   if (isNotModified) {
-    edgePath = bezierPath(edge.points)
+    edgePath = bezierPath(diagramEdge.points)
     labelX = data.label?.bbox.x ?? 0
     labelY = data.label?.bbox.y ?? 0
   } else {
@@ -149,17 +141,22 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
     edgePath = _edgePath
     labelX = _labelX
     labelY = _labelY
+
+    const sourceCenterPos = getNodePositionWithOrigin(sourceNode, [-0.5, -0.5])
+    const targetCenterPos = getNodePositionWithOrigin(targetNode, [-0.5, -0.5])
+
+    edgePath = curve([
+      [sourceCenterPos.positionAbsolute.x, sourceCenterPos.positionAbsolute.y],
+      [sx, sy],
+      ...controlPoints,
+      [tx, ty],
+      [targetCenterPos.positionAbsolute.x, targetCenterPos.positionAbsolute.y]
+    ])!
   }
-  // const deferredEdgePath = edgePath
-  //   useTilg()`
-  //   ${id}
-  //   path=${edgePath}
-  //   isModified=${isModified}
-  // `
 
   return (
-    <g className={clsx(container)} data-likec4-color={color} data-edge-hovered={isHovered}>
-      <g className={clsx(fillStrokeCtx)}>
+    <g className={clsx(edgesCss.container)} data-likec4-color={color} data-edge-hovered={isHovered}>
+      <g className={clsx(edgesCss.fillStrokeCtx)}>
         <defs>
           <marker
             id={`arrow-${id}`}
@@ -179,30 +176,29 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
         edgePath={edgePath}
         interactionWidth={interactionWidth ?? 10}
         strokeDasharray={strokeDasharray}
-        markerStart={edge.tailArrow ? marker : undefined}
-        markerEnd={edge.headArrow ? marker : undefined}
+        markerStart={diagramEdge.tailArrow ? marker : undefined}
+        markerEnd={diagramEdge.headArrow ? marker : undefined}
         style={style} />
       {
-        /*
-      {controlPoints.map((p, i) => (
+        /* controlPoints.map((p, i) => (
         <circle
-          className={styles.controlPoint}
+          className={edgesCss.controlPoint}
           key={i}
           cx={p[0]}
           cy={p[1]}
           r={5}
         />
-      ))} */
+      )) */
       }
       {data.label && (
         <EdgeLabelRenderer>
           <Box
-            className={clsx(container, edgeLabel)}
+            className={clsx(edgesCss.container, edgesCss.edgeLabel)}
             data-likec4-color={color}
             style={{
               ...assignInlineVars({
-                [varLabelX]: toDomPrecision(labelX) + 'px',
-                [varLabelY]: toDomPrecision(labelY) + 'px'
+                [edgesCss.varLabelX]: toDomPrecision(labelX) + 'px',
+                [edgesCss.varLabelY]: toDomPrecision(labelY) + 'px'
               }),
               maxWidth: data.label.bbox.width + 10,
               zIndex: edgeLookup.get(id)?.zIndex ?? ZIndexes.Edge
@@ -211,7 +207,7 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
               'data-edge-hovered': isHovered
             }}
           >
-            <Box className={edgeLabelBody}>
+            <Box className={edgesCss.edgeLabelBody}>
               {data.label.text}
             </Box>
             {
@@ -246,30 +242,30 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
   )
 }, isEqualProps)
 
-const RelationshipPath = memo<{
-  edgePath: string
-  interactionWidth: number
-  strokeDasharray: string | undefined
-  markerStart: string | undefined
-  markerEnd: string | undefined
-  style: CSSProperties | undefined
-}>(({
+const RelationshipPath = ({
   edgePath,
   interactionWidth,
   strokeDasharray,
   markerStart,
   markerEnd,
   style
+}: {
+  edgePath: string
+  interactionWidth: number
+  strokeDasharray: string | undefined
+  markerStart: string | undefined
+  markerEnd: string | undefined
+  style: CSSProperties | undefined
 }) => (
   <>
     <path
-      className={clsx('react-flow__edge-path', edgePathBg)}
+      className={clsx('react-flow__edge-path', edgesCss.edgePathBg)}
       d={edgePath}
       style={style}
       strokeLinecap={'round'}
     />
     <path
-      className={clsx('react-flow__edge-path', cssEdgePath)}
+      className={clsx('react-flow__edge-path', edgesCss.cssEdgePath)}
       d={edgePath}
       style={style}
       strokeLinecap={'round'}
@@ -285,4 +281,4 @@ const RelationshipPath = memo<{
       strokeWidth={interactionWidth}
     />
   </>
-))
+)

package/src/xyflow/edges/edges.css.ts

@@ -1,50 +1,56 @@
 import { rem } from '@mantine/core'
-import { createVar, globalStyle, style } from '@vanilla-extract/css'
-import { mantine } from '../../mantine.css'
+import { createVar, generateIdentifier, globalKeyframes, globalStyle, style } from '@vanilla-extract/css'
 import { vars, xyvars } from '../../theme.css'
 
+const mixColor = createVar('mix-color')
+
 export const container = style({
   vars: {
+    [mixColor]: `black`,
     [xyvars.edge.stroke]: vars.relation.lineColor,
-    [xyvars.edge.strokeSelected]: `color-mix(in srgb, ${vars.relation.lineColor}, white 30%)`,
+    [xyvars.edge.strokeSelected]: `color-mix(in srgb, ${vars.relation.lineColor}, ${mixColor} 35%)`,
     [xyvars.edge.labelColor]: `color-mix(in srgb, ${vars.relation.labelColor}, rgba(255 255 255 / 0.85) 20%)`,
     [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 35%)`,
-    [xyvars.edge.strokeWidth]: '2.5px'
-  },
-  selectors: {
-    [mantine.darkSelector]: {
-      vars: {
-        [xyvars.edge.labelColor]: vars.relation.labelColor,
-        [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 55%)`
-      }
-    }
-    // [mantine.lightSelector]: {
-    //   // mixBlendMode: 'luminosity',
-    //   vars: {
-    //     // [xyvars.edge.labelColor]: `color-mix(in srgb, ${vars.relation.labelColor}, #000 85%)`
-    //   }
-    // }
+    [xyvars.edge.strokeWidth]: '2.2px'
+  }
+})
+
+globalStyle(`:where([data-mantine-color-scheme="dark"]) ${container}`, {
+  vars: {
+    [mixColor]: `white`,
+    [xyvars.edge.labelColor]: vars.relation.labelColor,
+    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 55%)`
+  }
+})
+
+const isSelected = '.react-flow__edge.selected'
+
+globalStyle(`:where(${isSelected}) ${container}`, {
+  vars: {
+    [xyvars.edge.stroke]: xyvars.edge.strokeSelected,
+    [xyvars.edge.strokeWidth]: '3px'
   }
 })
 
 globalStyle(`${container}[data-edge-hovered='true']`, {
   vars: {
-    [xyvars.edge.stroke]: `color-mix(in srgb, ${vars.relation.lineColor}, white 30%)`,
+    // [xyvars.edge.stroke]: `color-mix(in srgb, ${vars.relation.lineColor}, ${mixColor} 35%)`,
+    [xyvars.edge.stroke]: xyvars.edge.strokeSelected,
     [xyvars.edge.strokeWidth]: '3px'
   }
 })
+
+globalStyle(`:where(${isSelected}) ${container}[data-edge-hovered='true']`, {
+  vars: {
+    [xyvars.edge.strokeWidth]: '3.6px'
+  }
+})
 // globalStyle(`${container}[data-edge-hovered='true']`, {
 //   vars: {
 //     [xyvars.edge.stroke]: `color-mix(in srgb, ${vars.relation.lineColor}, white 35%)`
 //   },
 // })
 
-globalStyle(`.react-flow__edge.selected ${container}`, {
-  vars: {
-    [xyvars.edge.strokeWidth]: '2.5'
-  }
-})
-
 globalStyle(`.react-flow__edges > svg`, {
   mixBlendMode: 'screen'
 })
@@ -53,25 +59,60 @@ globalStyle(`:where([data-mantine-color-scheme="dark"]) .react-flow__edges > svg
 })
 
 export const edgePathBg = style({
-  strokeWidth: `calc(${xyvars.edge.strokeWidth} + 8)`,
-  strokeOpacity: 0.1
+  strokeWidth: xyvars.edge.strokeWidth,
+  strokeOpacity: 0.05,
+  // 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(${isSelected}, [data-edge-hovered='true']) &`]: {
+      strokeWidth: `calc(${xyvars.edge.strokeWidth} + 8px)`,
+      strokeOpacity: 0.11
+    }
+  }
 })
 
 export const fillStrokeCtx = style({
   fill: xyvars.edge.stroke,
-  stroke: xyvars.edge.stroke,
-  selectors: {
-    '.react-flow__edge.selected &': {
-      vars: {
-        [xyvars.edge.stroke]: xyvars.edge.strokeSelected
-      }
-    }
+  stroke: xyvars.edge.stroke
+})
+
+export const controlPoint = style({
+  fill: xyvars.edge.stroke,
+  stroke: xyvars.edge.stroke
+})
+
+globalStyle(`:where(${isSelected}) ${fillStrokeCtx}`, {
+  vars: {
+    [xyvars.edge.stroke]: xyvars.edge.strokeSelected
+  }
+})
+
+const strokeKeyframes = generateIdentifier('strokeKeyframes')
+globalKeyframes(strokeKeyframes, {
+  'from': {
+    strokeDashoffset: 18 * 2
+  },
+  'to': {
+    strokeDashoffset: 1
   }
 })
 
 export const cssEdgePath = style({
+  animationDuration: '800ms',
+  animationIterationCount: 'infinite',
+  animationTimingFunction: 'linear',
   selectors: {
-    [`${container}[data-edge-hovered='true'] &`]: {
+    [`:where([data-edge-hovered='true']) &`]: {
+      animationName: strokeKeyframes,
+      animationDelay: '500ms',
+      transition: 'all 130ms ease-out'
+    },
+    [`:where(${isSelected}) &`]: {
+      animationName: strokeKeyframes,
+      animationDelay: '0ms',
       transition: 'all 130ms ease-out'
     }
   }
@@ -97,7 +138,7 @@ export const edgeLabel = style({
   backgroundColor: xyvars.edge.labelBgColor,
   borderRadius: '3px',
   transform: varTranslate,
-  willChange: 'transform',
+  backfaceVisibility: 'hidden',
   vars: {
     // [varTranslate]: `translate(calc(${varLabelX} - 50%), calc(${varLabelY} - 50%))`,
     [varTranslate]: `translate(${varLabelX}, ${varLabelY})`,