@likec4/diagram 1.26.2 → 1.27.0

package/src/likec4diagram/DiagramXYFlow.tsx

@@ -1,12 +1,12 @@
 import { type EdgeId, type NodeId, nonNullable } from '@likec4/core'
-import { useCallbackRef } from '@mantine/hooks'
-import clsx from 'clsx'
-import { shallowEqual } from 'fast-equals'
+import { cx } from '@likec4/styles/css'
+import { useCallbackRef, useTimeout } from '@mantine/hooks'
+import type { OnMove, OnMoveEnd } from '@xyflow/system'
+import { deepEqual, shallowEqual } from 'fast-equals'
 import { type PropsWithChildren, memo } from 'react'
-import type { EnforceOptional } from 'type-fest/source/enforce-optional'
 import { BaseXYFlow } from '../base/BaseXYFlow'
 import { useDiagramEventHandlers } from '../context'
-import { ReduceGraphicsViewportListener } from '../context/ReduceGraphics'
+import { usePanningAtom } from '../context/ReduceGraphics'
 import { useDiagram, useDiagramContext } from '../hooks/useDiagram'
 import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
 import type { DiagramContext } from '../state/types'
@@ -41,22 +41,29 @@ const equalsXYProps = (a: ReturnType<typeof selectXYProps>, b: ReturnType<typeof
   a.enableReadOnly === b.enableReadOnly &&
   shallowEqual(a.nodes, b.nodes) &&
   shallowEqual(a.edges, b.edges) &&
-  shallowEqual(a.viewport, b.viewport)
+  shallowEqual(a.viewport ?? null, b.viewport ?? null)
 
-type Picked = EnforceOptional<
+export type LikeC4DiagramXYFlowProps = PropsWithChildren<
   Pick<
     LikeC4DiagramProperties,
     | 'background'
     | 'nodesDraggable'
     | 'nodesSelectable'
+    | 'reactFlowProps'
   >
 >
-export type LikeC4DiagramXYFlowProps = PropsWithChildren<Required<Picked>>
+
+const compareProps = <T extends LikeC4DiagramXYFlowProps>(a: T, b: T): boolean =>
+  a.nodesDraggable === b.nodesDraggable &&
+  a.nodesSelectable === b.nodesSelectable &&
+  deepEqual(a.background, b.background) &&
+  deepEqual(a.reactFlowProps ?? {}, b.reactFlowProps ?? {})
 
 export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({
-  background,
-  nodesDraggable,
-  nodesSelectable,
+  background = 'dots',
+  nodesDraggable = false,
+  nodesSelectable = false,
+  reactFlowProps = {},
   children,
 }) => {
   const diagram = useDiagram()
@@ -79,19 +86,41 @@ export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({
     onCanvasDblClick,
   } = useDiagramEventHandlers()
 
-  const notReadOnly = !enableReadOnly
-
-  const layoutConstraints = useLayoutConstraints()
-
-  const onViewportResize = useCallbackRef(() => {
-    diagram.send({ type: 'xyflow.resized' })
-  })
+  const notReadOnly = !enableReadOnly,
+    layoutConstraints = useLayoutConstraints(),
+    $isPanning = usePanningAtom(),
+    isPanning = useTimeout(() => {
+      $isPanning.set(true)
+    }, 160),
+    notPanning = useTimeout(() => {
+      isPanning.clear()
+      if ($isPanning.get()) {
+        $isPanning.set(false)
+      }
+    }, 120),
+    onMove: OnMove = useCallbackRef((event) => {
+      if (!event) {
+        return
+      }
+      if (!$isPanning.get()) {
+        isPanning.start()
+      }
+      notPanning.clear()
+      notPanning.start()
+    }),
+    onMoveEnd: OnMoveEnd = useCallbackRef((event, viewport) => {
+      notPanning.start()
+      diagram.send({ type: 'xyflow.viewportMoved', viewport, manually: !!event })
+    }),
+    onViewportResize = useCallbackRef(() => {
+      diagram.send({ type: 'xyflow.resized' })
+    })
 
   return (
     <BaseXYFlow<Types.Node, Types.Edge>
       nodes={nodes}
       edges={edges}
-      className={clsx(initialized ? 'initialized' : 'not-initialized')}
+      className={cx(initialized ? 'initialized' : 'not-initialized')}
       nodeTypes={nodeTypes}
       edgeTypes={edgeTypes}
       onNodesChange={useCallbackRef((changes) => {
@@ -124,10 +153,34 @@ export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({
         diagram.send({ type: 'xyflow.paneDblClick' })
         onCanvasDblClick?.(e as any)
       })}
-      onMoveEnd={useCallbackRef((event, viewport) => {
-        // if event is present, the move was triggered by user
-        diagram.send({ type: 'xyflow.viewportMoved', viewport, manually: !!event })
+      onNodeMouseEnter={useCallbackRef((_event, node) => {
+        _event.stopPropagation()
+        if (!node.data.hovered) {
+          diagram.send({ type: 'xyflow.nodeMouseEnter', node })
+        }
+      })}
+      onNodeMouseLeave={useCallbackRef((_event, node) => {
+        _event.stopPropagation()
+        if (node.data.hovered) {
+          diagram.send({ type: 'xyflow.nodeMouseLeave', node })
+        }
       })}
+      onEdgeMouseEnter={useCallbackRef((_event, edge) => {
+        _event.stopPropagation()
+        if (!edge.data.hovered) {
+          diagram.send({ type: 'xyflow.edgeMouseEnter', edge })
+        }
+      })}
+      onEdgeMouseLeave={useCallbackRef((_event, edge) => {
+        _event.stopPropagation()
+        if (edge.data.hovered) {
+          diagram.send({ type: 'xyflow.edgeMouseLeave', edge })
+        }
+      })}
+      {...props.pannable && {
+        onMove,
+      }}
+      onMoveEnd={onMoveEnd}
       onInit={useCallbackRef((instance) => {
         diagram.send({ type: 'xyflow.init', instance })
       })}
@@ -154,10 +207,11 @@ export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({
       nodesDraggable={notReadOnly && nodesDraggable}
       nodesSelectable={nodesSelectable}
       {...(notReadOnly && nodesDraggable && layoutConstraints)}
-      {...props}>
-      <ReduceGraphicsViewportListener />
-      <DiagramUI />
+      {...props}
+      {...reactFlowProps}>
+      <DiagramUI key={'DiagramUI'} />
       {children}
     </BaseXYFlow>
   )
-}, shallowEqual)
+}, compareProps)
+LikeC4DiagramXYFlow.displayName = 'LikeC4DiagramXYFlow'

package/src/likec4diagram/custom/edges/NotePopover.css.ts

@@ -1,27 +1,21 @@
-import { style } from '@vanilla-extract/css'
-import { mantine } from '../../../theme-vars'
+import { css } from '@likec4/styles/css'
+// import { mantine } from '../../../theme-vars'
 
-export const edgeNoteCloseButton = style({
+export const edgeNoteCloseButton = css({
   position: 'absolute',
   top: 1,
   right: 1,
   zIndex: 9,
 })
 
-export const edgeNoteText = style({
+export const edgeNoteText = css({
   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,
-      },
-    },
+  '--text-fz': '{fontSizes.sm}',
+  md: {
+    '--text-fz': '{fontSizes.md}',
   },
 })

package/src/likec4diagram/custom/edges/RelationshipEdge.tsx

@@ -1,6 +1,5 @@
 import {
   type EdgeId,
-  isStepEdgeId,
   nonNullable,
 } from '@likec4/core'
 import { useDebouncedEffect } from '@react-hookz/web'
@@ -10,11 +9,20 @@ import clsx from 'clsx'
 import { curveCatmullRomOpen, line as d3line } from 'd3-shape'
 import { type PointerEvent as ReactPointerEvent, useEffect, useRef, useState } from 'react'
 import { first, isTruthy, last } from 'remeda'
-import { customEdge, EdgeActionButton, EdgeContainer, EdgeLabel, EdgePath } from '../../../base/primitives'
-import { useEnabledFeature } from '../../../context'
-import { useXYFlow, useXYInternalNode, useXYStoreApi } from '../../../hooks'
-import { useDiagram } from '../../../hooks/useDiagram'
-import { useLooseReducedGraphics } from '../../../hooks/useReducedGraphics'
+import { ZIndexes } from '../../../base/const'
+import {
+  customEdge,
+  EdgeActionButton,
+  EdgeContainer,
+  EdgeLabel,
+  EdgeLabelContainer,
+  EdgePath,
+} from '../../../base/primitives'
+import { useEnabledFeatures } from '../../../context/DiagramFeatures'
+import { useDiagram, useDiagramActorSnapshot } from '../../../hooks/useDiagram'
+import { useIsPanning } from '../../../hooks/useReducedGraphics'
+import { useXYFlow, useXYInternalNode, useXYStoreApi } from '../../../hooks/useXYFlow'
+import type { DiagramActorSnapshot } from '../../../state/types'
 import { vector, VectorImpl } from '../../../utils/vector'
 import { bezierControlPoints, bezierPath, isSamePoint } from '../../../utils/xyflow'
 import type { Types } from '../../types'
@@ -28,17 +36,15 @@ const curve = d3line<XYPosition>()
   .x(d => d.x)
   .y(d => d.y)
 
+const selectActiveStepId = (s: DiagramActorSnapshot) => s.context.activeWalkthrough?.stepId ?? null
 export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) => {
-  const isReducedGraphicsMode = useLooseReducedGraphics()
+  const isPanning = useIsPanning()
   const [isControlPointDragging, setIsControlPointDragging] = useState(false)
   const xyflowStore = useXYStoreApi()
   const xyflow = useXYFlow()
   const diagram = useDiagram()
-  const { enableNavigateTo, enableEdgeEditing, enableRelationshipDetails } = useEnabledFeature(
-    'NavigateTo',
-    'EdgeEditing',
-    'RelationshipDetails',
-  )
+  const activeWalkthroughStep = useDiagramActorSnapshot(selectActiveStepId)
+  const { enableNavigateTo, enableEdgeEditing, enableRelationshipDetails } = useEnabledFeatures()
   const {
     id,
     source,
@@ -58,6 +64,7 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
       labelXY,
       ...data
     },
+    style = {},
   } = props
 
   const navigateTo = enableNavigateTo ? data.navigateTo : undefined
@@ -294,53 +301,73 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
     e.stopPropagation()
   }
 
-  let renderLabel: undefined | ((props: any) => any)
-  if (!isControlPointDragging) {
+  let zIndex = ZIndexes.Edge
+  if (hovered || active) {
+    // Move above the elements
+    zIndex = ZIndexes.Element + 1
+  }
+
+  let edgeLabel = (
+    <EdgeLabel edgeProps={props}>
+      {!isControlPointDragging && navigateTo && (
+        <EdgeActionButton
+          {...props}
+          onClick={e => {
+            e.stopPropagation()
+            diagram.navigateTo(navigateTo)
+          }} />
+      )}
+    </EdgeLabel>
+  )
+
+  if (!isControlPointDragging && !isPanning) {
     const notes = props.data.notes
-    if (notes && isStepEdgeId(props.id) && diagram.getContext().activeWalkthrough?.stepId === props.id) {
-      renderLabel = (props: any) => (
+    if (notes && activeWalkthroughStep === props.id) {
+      edgeLabel = (
         <NotePopover notes={notes}>
-          <div {...props} />
+          {edgeLabel}
         </NotePopover>
       )
-    } else if (enableRelationshipDetails && (!isReducedGraphicsMode || hovered || selected || active)) {
-      renderLabel = (props: any) => (
+    } else if (enableRelationshipDetails) {
+      edgeLabel = (
         <RelationshipsDropdownMenu
           disabled={!!dimmed}
           source={source}
           target={target}
           edgeId={edgeId}>
-          <div {...props} />
+          {edgeLabel}
         </RelationshipsDropdownMenu>
       )
     }
   }
 
   return (
-    <EdgeContainer {...props} className={clsx(isControlPointDragging && edgesCss.controlDragging)}>
-      <EdgePath {...props} svgPath={edgePath} ref={svgPathRef} onEdgePointerDown={onEdgePointerDown} />
-      <EdgeLabel
-        edgeProps={props}
-        labelPosition={{
-          x: labelX,
-          y: labelY,
-          translate: isModified ? 'translate(-50%, 0)' : undefined,
-        }}
-        {...renderLabel && { renderRoot: renderLabel }}
-      >
-        {!isControlPointDragging && navigateTo && (
-          <EdgeActionButton
-            {...props}
-            onClick={e => {
-              e.stopPropagation()
-              diagram.navigateTo(navigateTo)
-            }} />
-        )}
-      </EdgeLabel>
+    <>
+      <EdgeContainer {...props} className={clsx(isControlPointDragging && edgesCss.controlDragging)}>
+        <EdgePath {...props} svgPath={edgePath} ref={svgPathRef} onEdgePointerDown={onEdgePointerDown} />
+        <EdgeLabelContainer
+          edgeProps={props}
+          labelPosition={{
+            x: labelX,
+            y: labelY,
+            translate: isModified ? 'translate(-50%, 0)' : undefined,
+          }}
+        >
+          {edgeLabel}
+        </EdgeLabelContainer>
+      </EdgeContainer>
       {/* Render control points above edge label  */}
       {enableEdgeEditing && controlPoints.length > 0 && (
         <EdgeLabelRenderer>
-          <EdgeContainer component="svg" className={edgesCss.controlPointsContainer} {...props}>
+          <EdgeContainer
+            component="svg"
+            className={edgesCss.controlPointsContainer}
+            {...props}
+            style={{
+              ...style,
+              zIndex,
+            }}
+          >
             <g
               onContextMenu={e => {
                 e.preventDefault()
@@ -360,6 +387,6 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
           </EdgeContainer>
         </EdgeLabelRenderer>
       )}
-    </EdgeContainer>
+    </>
   )
 })

package/src/likec4diagram/custom/edges/RelationshipsDropdownMenu.css.ts

@@ -1,61 +1,40 @@
-import { style } from '@vanilla-extract/css'
-import { mantine, vars } from '../../../theme-vars'
+import { css } from '@likec4/styles/css'
 
-export const menuDropdown = style({
+export const menuDropdown = css({
   overflowY: 'scroll',
-  minWidth: 250,
+  minWidth: '250px',
   maxWidth: 'min(90vw, 500px)',
 })
 
-export const menuItemRelationship = style({
-  // padding: mantine.spacing.sm,
-  // paddingTop: mantine.spacing.xs,
-  // borderRadius: mantine.radius.sm,
-  // paddingTop: mantine.spacing.xs,
-  // paddingBottom: mantine.spacing.xs,
+export const menuItemRelationship = css({
   gap: 4,
-  // cursor: 'pointer',
-  // ':hover': {
-  // borderColor: mantine.colors.gray.light,
-  // background: mantine.colors.gray[2]
-  // },
-
-  // selectors: {
-  //   [`:where([data-mantine-color-scheme="dark"]) &`]: {
-  //     // borderColor: mantine.colors.dark[6]
-  //   },
-  //   [`:where([data-mantine-color-scheme="dark"]) &:hover`]: {
-  //     // background: mantine.colors.dark[5]
-  //   }
-  // }
 })
 
-export const endpoint = style({
+export const endpoint = css({
   display: 'block',
-  fontSize: 10,
+  fontSize: 'xxs',
   fontWeight: 500,
   whiteSpace: 'nowrap',
-  padding: '2px 5px',
+  padding: '2px 4px',
   borderRadius: 2,
-  background: `color-mix(in srgb , ${vars.element.fill},  transparent 45%)`,
-  lineHeight: 1.1,
-  selectors: {
-    [`:where([data-mantine-color-scheme="dark"]) &`]: {
-      color: vars.element.loContrast,
-    },
+  background: `likec4.palette.fill/30`,
+  lineHeight: '[1.11]',
+  mixBlendMode: 'hard-light',
+  color: {
+    _light: `[color-mix(in srgb, {colors.likec4.palette.stroke}, {colors.likec4.mixColor} 60%)]`,
+    _dark: 'likec4.palette.loContrast',
   },
+  // _dark: {
+  //   background: `likec4.palette.fill/60`,
+  // },
+})
+
+export const title = css({
+  whiteSpaceCollapse: 'preserve-breaks',
+  fontSize: 'xs',
 })
 
-export const title = style({
+export const arrowFromTo = css({
   whiteSpaceCollapse: 'preserve-breaks',
-  fontSize: mantine.fontSizes.sm,
+  fontSize: 'xs',
 })
-//
-// export const sourceId = style({
-//
-// })
-//
-// export const targetId = style({
-//   fontSize: 11,
-//   whiteSpace: 'nowrap'
-// })

package/src/likec4diagram/custom/edges/RelationshipsDropdownMenu.tsx

@@ -6,6 +6,7 @@ import {
   DiagramNode,
   nameFromFqn,
 } from '@likec4/core'
+import { css, cx } from '@likec4/styles/css'
 import {
   type StackProps,
   ActionIcon,
@@ -24,8 +25,7 @@ import {
   TooltipGroup,
 } from '@mantine/core'
 import { IconArrowRight, IconFileSymlink, IconInfoCircle, IconZoomScan } from '@tabler/icons-react'
-import clsx from 'clsx'
-import { type MouseEventHandler, type PropsWithChildren, forwardRef, Fragment, useCallback } from 'react'
+import { type MouseEventHandler, type PropsWithChildren, forwardRef, Fragment, memo, useCallback } from 'react'
 import { filter, isTruthy, map, partition, pipe } from 'remeda'
 import { Link } from '../../../components/Link'
 import { IfEnabled, useDiagramEventHandlers, useEnabledFeature } from '../../../context'
@@ -33,7 +33,7 @@ import { useMantinePortalProps } from '../../../hooks'
 import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram'
 import { useLikeC4Model } from '../../../likec4model'
 import { findDiagramEdge, findDiagramNode } from '../../../state/utils'
-import * as css from './RelationshipsDropdownMenu.css'
+import * as styles from './RelationshipsDropdownMenu.css'
 
 const stopPropagation: MouseEventHandler = (e) => e.stopPropagation()
 
@@ -48,18 +48,20 @@ export const Tooltip = MantineTooltip.withProps({
   withinPortal: false,
 })
 
-export function RelationshipsDropdownMenu({
-  edgeId,
-  source,
-  target,
-  disabled = false,
-  children,
-}: PropsWithChildren<{
-  edgeId: EdgeId
-  source: string
-  target: string
-  disabled?: boolean | undefined
-}>) {
+export const RelationshipsDropdownMenu = memo((
+  {
+    edgeId,
+    source,
+    target,
+    disabled = false,
+    children,
+  }: PropsWithChildren<{
+    edgeId: EdgeId
+    source: string
+    target: string
+    disabled?: boolean | undefined
+  }>,
+) => {
   const { diagramEdge, sourceNode, targetNode } = useDiagramContext(ctx => ({
     diagramEdge: findDiagramEdge(ctx, edgeId),
     sourceNode: findDiagramNode(ctx, source),
@@ -137,7 +139,7 @@ export function RelationshipsDropdownMenu({
         {children}
       </MenuTarget>
       <MenuDropdown
-        className={css.menuDropdown}
+        className={styles.menuDropdown}
         onPointerDownCapture={stopPropagation}
         onPointerDown={stopPropagation}
         onClick={stopPropagation}
@@ -167,7 +169,7 @@ export function RelationshipsDropdownMenu({
       </MenuDropdown>
     </Menu>
   )
-}
+})
 
 const Relationship = forwardRef<
   HTMLDivElement,
@@ -196,13 +198,13 @@ const Relationship = forwardRef<
   const links = r.links
 
   return (
-    <Stack ref={ref} className={clsx(css.menuItemRelationship, className)} {...props}>
+    <Stack ref={ref} className={cx(styles.menuItemRelationship, className)} {...props}>
       <Group gap={4}>
-        <Text component="div" className={css.endpoint} data-likec4-color={sourceNode.color}>
+        <Text component="div" className={cx(css({ likec4Palette: sourceNode.color }), styles.endpoint)}>
           {sourceId}
         </Text>
-        <IconArrowRight stroke={2.5} size={11} />
-        <Text component="div" className={css.endpoint} data-likec4-color={targetNode.color}>
+        <IconArrowRight stroke={2.5} size={'11px'} opacity={0.65} />
+        <Text component="div" className={cx(css({ likec4Palette: targetNode.color }), styles.endpoint)}>
           {targetId}
         </Text>
         {(navigateTo || !!onOpenSource) && (
@@ -211,7 +213,7 @@ const Relationship = forwardRef<
             {navigateTo && (
               <Tooltip label={'Open dynamic view'}>
                 <ActionIcon
-                  className={clsx('nodrag nopan')}
+                  className={cx('nodrag nopan')}
                   size={'sm'}
                   radius="sm"
                   variant="default"
@@ -229,7 +231,7 @@ const Relationship = forwardRef<
             <IfEnabled feature="Vscode">
               <Tooltip label={'Open source'}>
                 <ActionIcon
-                  className={clsx('nodrag nopan')}
+                  className={cx('nodrag nopan')}
                   size={'sm'}
                   radius="sm"
                   variant="default"
@@ -247,7 +249,7 @@ const Relationship = forwardRef<
           </TooltipGroup>
         )}
       </Group>
-      <Box className={css.title}>{r.title || 'untitled'}</Box>
+      <Box className={styles.title}>{r.title || 'untitled'}</Box>
       {r.description && <Text size="xs" c="dimmed">{r.description}</Text>}
       {links.length > 0 && (
         <Stack

package/src/likec4diagram/custom/edges/edges.css.ts

@@ -1,54 +1,47 @@
-import { globalStyle, style } from '@vanilla-extract/css'
-import { ZIndexes } from '../../../base/const'
-import { mantine, xyvars } from '../../../theme-vars'
+import { css } from '@likec4/styles/css'
+// import { globalStyle, style } from '@vanilla-extract/css'
+// import { mantine, xyvars } from '../../../theme-vars'
 
 const isSelected = '.react-flow__edge.selected'
 
-export const controlPointsContainer = style({
+export const controlPointsContainer = css({
   overflow: 'visible',
   position: 'absolute',
   pointerEvents: 'none',
   top: 0,
   left: 0,
-  zIndex: ZIndexes.Edge,
-  selectors: {
-    [`&:is([data-edge-hovered='true'])`]: {
-      zIndex: ZIndexes.Edge + 1,
-    },
-  },
+  mixBlendMode: 'normal',
 })
 
-export const controlPoint = style({
-  fill: xyvars.edge.stroke,
-  stroke: xyvars.edge.stroke,
+export const controlPoint = css({
+  fill: `likec4.relation.stroke`,
+  stroke: `likec4.relation.stroke`,
   fillOpacity: 0.75,
   strokeWidth: 1,
   cursor: 'grab',
   pointerEvents: 'auto',
   visibility: 'hidden',
-  ':hover': {
-    stroke: mantine.colors.primaryColors.filledHover,
-    strokeWidth: 9,
+  _hover: {
+    fillOpacity: 1,
+    stroke: 'mantine.colors.primary.filledHover',
+    strokeWidth: 10,
     transition: 'stroke 100ms ease-out, stroke-width 100ms ease-out',
   },
-  selectors: {
-    [`:where(${isSelected}, [data-edge-hovered='true']) &`]: {
-      visibility: 'visible',
-      transition: 'fill-opacity 150ms ease-out, stroke 150ms ease-out, stroke-width 150ms ease-out',
-      transitionDelay: '50ms',
-      fillOpacity: 1,
-      strokeWidth: 5,
-    },
+  [`:where(${isSelected}, [data-likec4-hovered='true']) &`]: {
+    visibility: 'visible',
+    transition: 'fill-opacity 150ms ease-out, stroke 150ms ease-out, stroke-width 150ms ease-out',
+    transitionDelay: '50ms',
+    fillOpacity: 1,
+    strokeWidth: 5,
   },
 })
 
-export const controlDragging = style({
+export const controlDragging = css({
   cursor: 'grabbing',
-})
-
-globalStyle(`${controlDragging} *`, {
-  cursor: 'grabbing !important',
-})
-globalStyle(`${controlDragging} .react-flow__edge-interaction`, {
-  cursor: 'grabbing !important',
+  '& *': {
+    cursor: 'grabbing !important',
+  },
+  '& .react-flow__edge-interaction': {
+    cursor: 'grabbing !important',
+  },
 })

package/src/likec4diagram/custom/nodes/nodeTypes.tsx

@@ -38,7 +38,7 @@ const ElementDetailsButtonWithHandler = ({ fqn, ...props }: NodeProps<Types.Node
 
 export const ElementNode = customNode<Types.ElementNodeData>((props) => (
   <ElementNodeContainer nodeProps={props}>
-    <ElementShape {...props} isMultiple={props.data.isMultiple} withSelectedIndicator={props.selected} />
+    <ElementShape {...props} isMultiple={props.data.isMultiple} />
     <ElementTitle {...props} />
     <ElementActions {...props} />
     <ElementDetailsButtonWithHandler
@@ -53,7 +53,7 @@ export const ElementNode = customNode<Types.ElementNodeData>((props) => (
 
 export const DeploymentNode = customNode<Types.DeploymentElementNodeData>((props) => (
   <ElementNodeContainer nodeProps={props}>
-    <ElementShape {...props} isMultiple={props.data.isMultiple} withSelectedIndicator={props.selected} />
+    <ElementShape {...props} isMultiple={props.data.isMultiple} />
     <ElementTitle {...props} />
     <DeploymentElementActions {...props} />
     {!!props.data.modelFqn && (