@likec4/diagram 1.18.0 → 1.19.1

package/src/xyflow/nodes/element/ElementNode.tsx

@@ -1,130 +1,30 @@
-import { DiagramNode, type ThemeColor } from '@likec4/core'
-import { ActionIcon, type ActionIconProps, Box, Text as MantineText, Tooltip } from '@mantine/core'
+import { type ThemeColor, DiagramNode } from '@likec4/core'
+import { Box } from '@mantine/core'
 import { useDebouncedValue } from '@mantine/hooks'
-import { IconId, IconTransform, IconZoomScan } from '@tabler/icons-react'
-import { Handle, type NodeProps, Position } from '@xyflow/react'
+import { type NodeProps, Handle, Position } from '@xyflow/react'
 import clsx from 'clsx'
 import { deepEqual as eq } from 'fast-equals'
-import { type HTMLMotionProps, m, type Variants } from 'framer-motion'
-import React, { memo, type PropsWithoutRef, useCallback, useState } from 'react'
-import { isNumber, isTruthy } from 'remeda'
+import { m } from 'framer-motion'
+import { memo, useState } from 'react'
+import { isTruthy } from 'remeda'
+import { ActionButtonBar } from '../../../controls/action-button-bar/ActionButtonBar'
+import {
+  BrowseRelationshipsButton,
+  NavigateToButton,
+  OpenDetailsButton,
+} from '../../../controls/action-buttons/ActionButtons'
+import { Text } from '../../../controls/Text'
 import { useDiagramState } from '../../../hooks/useDiagramState'
-import type { ElementXYFlowNode } from '../../types'
-import { stopPropagation, toDomPrecision } from '../../utils'
+import type { DiagramFlowTypes } from '../../types'
+import { toDomPrecision } from '../../utils'
+import { type VariantKeys, NodeVariants, useFramerAnimateVariants } from '../AnimateVariants'
+import * as nodeCss from '../Node.css'
 import { ElementIcon } from '../shared/ElementIcon'
 import { ElementToolbar } from '../shared/Toolbar'
-import { useFramerAnimateVariants } from '../use-animate-variants'
 import * as css from './element.css'
 import { ElementShapeSvg, SelectedIndicator } from './ElementShapeSvg'
 
-const Text = MantineText.withProps({
-  component: 'div'
-})
-
-const selectedScale = 1.015
-
-// Frame-motion variants
-
-const VariantsRoot = {
-  idle: (_, { scale }) => ({
-    scale: 1,
-    transition: isNumber(scale) && scale > selectedScale
-      ? {
-        delay: 0.1,
-        delayChildren: 0.06
-        // staggerChildren: 0.07,
-        // staggerDirection: -1
-      }
-      : {}
-  }),
-  selected: {
-    scale: selectedScale
-  },
-  hovered: (_, { scale }) => ({
-    scale: 1.06,
-    transition: !isNumber(scale) || (scale >= 1 && scale < 1.06)
-      ? {
-        // delay: 0.09,
-        delayChildren: 0.08
-      }
-      : {}
-  }),
-  tap: {
-    scale: 0.975
-  }
-} satisfies Variants
-
-const variantsBottomButton = (target: 'navigate' | 'relationships', align: 'left' | 'right' | false) => {
-  const variants = {
-    idle: {
-      '--icon-scale': 'scale(1)',
-      '--ai-bg': 'var(--ai-bg-idle)',
-      scale: 1,
-      opacity: 0.5,
-      originX: 0.5,
-      originY: 0.35,
-      translateY: 0,
-      ...align === 'left' && {
-        originX: 0.75,
-        translateX: -1
-      },
-      ...align === 'right' && {
-        originX: 0.25,
-        translateX: 1
-      }
-    },
-    selected: {},
-    hovered: {
-      '--icon-scale': 'scale(1)',
-      '--ai-bg': 'var(--ai-bg-hover)',
-      translateY: 3,
-      scale: 1.32,
-      opacity: 1,
-      ...align === 'left' && {
-        translateX: -4
-      },
-      ...align === 'right' && {
-        translateX: 4
-      }
-    },
-    'hovered:details': {},
-    [`hovered:${target}`]: {
-      '--icon-scale': 'scale(1.08)',
-      scale: 1.45
-    },
-    [`tap:${target}`]: {
-      scale: 1.15
-    }
-  } satisfies Variants
-  variants['selected'] = variants['hovered']
-  variants['hovered:details'] = variants.idle
-  return variants
-}
-
-const VariantsDetailsBtn = {
-  idle: {
-    '--ai-bg': 'var(--ai-bg-idle)',
-    scale: 1,
-    opacity: 0.5,
-    originX: 0.45,
-    originY: 0.55
-  },
-  selected: {},
-  hovered: {
-    scale: 1.2,
-    opacity: 0.7
-  },
-  'hovered:details': {
-    scale: 1.44,
-    opacity: 1
-  },
-  'tap:details': {
-    scale: 1.15
-  }
-} satisfies Variants
-VariantsDetailsBtn['selected'] = VariantsDetailsBtn['hovered']
-
-type ElementNodeProps = NodeProps<ElementXYFlowNode>
+type ElementNodeProps = NodeProps<DiagramFlowTypes.ElementNode>
 const isEqualProps = (prev: ElementNodeProps, next: ElementNodeProps) => (
   prev.id === next.id
   && eq(prev.selected ?? false, next.selected ?? false)
@@ -137,52 +37,43 @@ const isEqualProps = (prev: ElementNodeProps, next: ElementNodeProps) => (
 export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
   id,
   data: {
-    element
+    element,
   },
   dragging,
   selected = false,
   width,
-  height
+  height,
 }) {
   const modelRef = DiagramNode.modelRef(element)
   // const deploymentRef = DiagramNode.deploymentRef(element)
   const {
     viewId,
     isEditable,
-    isHovered,
     isDimmed,
     isNavigable,
     isInteractive,
     enableElementDetails,
     enableRelationshipBrowser,
-    triggerOnNavigateTo,
-    openOverlay,
     isInActiveOverlay,
-    renderIcon
+    renderIcon,
   } = useDiagramState(s => ({
     viewId: s.view.id,
     isEditable: s.readonly !== true,
-    isHovered: s.hoveredNodeId === id,
     isDimmed: s.dimmed.has(id),
     isInteractive: s.nodesDraggable || s.nodesSelectable || s.enableElementDetails || s.enableRelationshipBrowser
       || (!!s.onNavigateTo && !!element.navigateTo),
     isNavigable: (!!s.onNavigateTo && !!element.navigateTo),
     enableElementDetails: s.enableElementDetails,
     enableRelationshipBrowser: s.enableRelationshipBrowser,
-    triggerOnNavigateTo: s.triggerOnNavigateTo,
     openOverlay: s.openOverlay,
     isInActiveOverlay: (s.activeOverlay?.elementDetails ?? s.activeOverlay?.relationshipsOf) === id,
-    renderIcon: s.renderIcon
+    renderIcon: s.renderIcon,
   }))
-  // For development purposes, show the toolbar when the element is selected
-  const isHoveredOrSelected = isHovered || (import.meta.env.DEV && selected)
-  const _isToolbarVisible = isEditable && isHoveredOrSelected
-  const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, _isToolbarVisible ? 500 : 300)
 
   const w = toDomPrecision(width ?? element.width)
   const h = toDomPrecision(height ?? element.height)
 
-  let animateVariant: keyof typeof VariantsRoot | string[]
+  let animateVariant: VariantKeys | string[]
   switch (true) {
     case isInActiveOverlay:
       animateVariant = 'idle'
@@ -193,8 +84,8 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
     case dragging:
       animateVariant = 'idle'
       break
-    case isInteractive && isHovered:
-      animateVariant = 'hovered'
+    case isDimmed:
+      animateVariant = 'dimmed'
       break
     case selected:
       animateVariant = 'selected'
@@ -202,53 +93,34 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
     default:
       animateVariant = 'idle'
   }
+
   const [animateVariants, animateHandlers] = useFramerAnimateVariants()
-  if (isHovered && !dragging && !isInActiveOverlay) {
+  if (!dragging && !isInActiveOverlay) {
     animateVariant = animateVariants ?? animateVariant
   }
 
+  const isHovered = !!animateVariants && animateVariants.includes('hovered')
+
+  const _isToolbarVisible = (selected && !dragging) || isHovered
+  const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, _isToolbarVisible ? 500 : 300)
+
   const elementIcon = ElementIcon({
     element,
     viewId,
     className: css.elementIcon,
-    renderIcon
+    renderIcon,
   })
 
   const [previewColor, setPreviewColor] = useState<ThemeColor | null>(null)
 
-  const onNavigateTo = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation()
-    triggerOnNavigateTo(id, e)
-  }, [triggerOnNavigateTo, id])
-
-  const onOpenDetails = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation()
-    openOverlay({ elementDetails: element.id })
-  }, [openOverlay, element.id])
-
-  const onOpenRelationships = useCallback((e: React.MouseEvent) => {
-    if (modelRef) {
-      e.stopPropagation()
-      openOverlay({ relationshipsOf: modelRef })
-    }
-  }, [openOverlay, modelRef])
-
   return (
     <>
-      {isToolbarVisible && (
-        <ElementToolbar
-          element={element}
-          isVisible={isToolbarVisible}
-          onColorPreview={setPreviewColor}
-        />
-      )}
       <Box
         component={m.div}
         className={clsx([
           css.container,
-          isDimmed && css.dimmed,
           animateVariant !== 'idle' && css.containerAnimated,
-          'likec4-element-node'
+          'likec4-element-node',
         ])}
         key={`${viewId}:element:${id}`}
         layoutId={`${viewId}:element:${id}`}
@@ -257,15 +129,19 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
         data-likec4-shape={element.shape}
         data-animate-target=""
         initial={false}
-        variants={VariantsRoot}
+        variants={NodeVariants(w, h)}
         animate={animateVariant}
+        {...isInteractive && animateHandlers}
         tabIndex={-1}
-        {...(isInteractive && {
-          onTapStart: animateHandlers.onTapStart,
-          onTap: animateHandlers.onTap,
-          onTapCancel: animateHandlers.onTapCancel
-        })}
       >
+        {isEditable && (
+          <ElementToolbar
+            element={element}
+            isVisible={isToolbarVisible}
+            align="start"
+            onColorPreview={setPreviewColor}
+          />
+        )}
         <svg
           className={clsx(css.shapeSvg)}
           viewBox={`0 0 ${w} ${h}`}>
@@ -278,7 +154,7 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
           className={clsx(
             css.elementDataContainer,
             isTruthy(elementIcon) && css.hasIcon,
-            'likec4-element'
+            'likec4-element',
           )}
         >
           {elementIcon}
@@ -303,37 +179,26 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
             )}
           </Box>
         </Box>
-        {/* {isHovercards && element.links && <ElementLink element={element} />} */}
-        <BottomButtons
-          keyPrefix={`${viewId}:element:${id}:`}
-          onNavigateTo={isNavigable && onNavigateTo}
-          onOpenRelationships={enableRelationshipBrowser && !!modelRef && onOpenRelationships}
-          {...isInteractive && animateHandlers}
-        />
+        <Box className={clsx(nodeCss.bottomBtnContainer)}>
+          <ActionButtonBar shiftY="bottom">
+            {isNavigable && (
+              <NavigateToButton
+                xynodeId={id}
+                {...isInteractive && animateHandlers}
+              />
+            )}
+            {enableRelationshipBrowser && !!modelRef && (
+              <BrowseRelationshipsButton
+                fqn={modelRef}
+                {...isInteractive && animateHandlers}
+              />
+            )}
+          </ActionButtonBar>
+        </Box>
         {enableElementDetails && !!modelRef && (
-          <Tooltip
-            fz="xs"
-            color="dark"
-            label="Open details"
-            withinPortal={false}
-            offset={2}
-            openDelay={600}>
-            <ActionIcon
-              key="details"
-              component={m.div}
-              variants={VariantsDetailsBtn}
-              data-animate-target="details"
-              className={clsx('nodrag nopan', css.detailsBtn)}
-              radius="md"
-              style={{ zIndex: 100 }}
-              role="button"
-              onClick={onOpenDetails}
-              onDoubleClick={stopPropagation}
-              {...isInteractive && animateHandlers}
-            >
-              <IconId stroke={1.8} style={{ width: '75%' }} />
-            </ActionIcon>
-          </Tooltip>
+          <Box className={clsx(nodeCss.topRightBtnContainer)}>
+            <OpenDetailsButton fqn={modelRef} {...isInteractive && animateHandlers} />
+          </Box>
         )}
       </Box>
       <Handle type="target" position={Position.Top} className={css.handleCenter} />
@@ -341,70 +206,3 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
     </>
   )
 }, isEqualProps)
-
-type BottomButtonsProps = PropsWithoutRef<
-  ActionIconProps & HTMLMotionProps<'div'> & {
-    keyPrefix: string
-    onNavigateTo: ((e: React.MouseEvent) => void) | false
-    onOpenRelationships: ((e: React.MouseEvent) => void) | false
-  }
->
-const BottomButtons = ({
-  keyPrefix,
-  onNavigateTo,
-  onOpenRelationships,
-  ...props
-}: BottomButtonsProps) => {
-  const enableRelationships = !!onOpenRelationships
-  const enableNavigate = !!onNavigateTo
-
-  if (!enableRelationships && !enableNavigate) {
-    return null
-  }
-
-  return (
-    <Box className={css.bottomButtonsContainer}>
-      {enableNavigate && (
-        <ActionIcon
-          {...props}
-          key={`${keyPrefix}navigate`}
-          data-animate-target="navigate"
-          component={m.div}
-          // Weird, but dts-bundle-generator fails on "enableRelationships && 'left'"
-          variants={variantsBottomButton('navigate', enableRelationships ? 'left' : false)}
-          className={clsx('nodrag nopan', css.navigateBtn)}
-          radius="md"
-          role="button"
-          onClick={onNavigateTo}
-          onDoubleClick={stopPropagation}
-        >
-          <IconZoomScan
-            style={{
-              width: '70%',
-              transform: 'var(--icon-scale)'
-            }} />
-        </ActionIcon>
-      )}
-      {enableRelationships && (
-        <ActionIcon
-          {...props}
-          key={`${keyPrefix}relationships`}
-          data-animate-target="relationships"
-          component={m.div}
-          variants={variantsBottomButton('relationships', enableNavigate ? 'right' : false)}
-          className={clsx('nodrag nopan', css.navigateBtn)}
-          radius="md"
-          role="button"
-          onClick={onOpenRelationships}
-          onDoubleClick={stopPropagation}
-        >
-          <IconTransform
-            style={{
-              width: '70%',
-              transform: 'var(--icon-scale)'
-            }} />
-        </ActionIcon>
-      )}
-    </Box>
-  )
-}

package/src/xyflow/nodes/element/element.css.ts

@@ -21,9 +21,6 @@ export const container = style({
   selectors: {
     ':where(.react-flow__node.selected) &': {
       willChange: 'transform'
-    },
-    '&[data-hovered="true"]': {
-      willChange: 'transform'
     }
   },
   // Catch pointer below the element
@@ -49,16 +46,6 @@ export const containerAnimated = style({
   willChange: 'transform'
 })
 
-export const dimmed = style({})
-
-globalStyle(`.react-flow__node-element:has(${dimmed})`, {
-  opacity: 0.25,
-  transition: 'opacity 400ms ease-in-out, filter 500ms ease-in-out',
-  transitionDelay: '50ms',
-  filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(2px)')}`,
-  willChange: 'opacity, filter'
-})
-
 const indicatorKeyframes = keyframes({
   'from': {
     strokeOpacity: 0.8
@@ -106,10 +93,6 @@ export const indicator = style({
       vars: {
         [indicatorStroke]: `color-mix(in srgb, ${vars.element.fill} 50%, #3c3c3c)`
       }
-    },
-    [`${dimmed} &`]: {
-      visibility: 'hidden',
-      display: 'none'
     }
   }
 })
@@ -302,10 +285,6 @@ export const shapeSvgMultiple = style({
     },
     ':where([data-likec4-shape="queue"]) &': {
       transform: 'translate(-10px,8px)'
-    },
-    ':where([data-hovered="true"]) &': {
-      transition: 'opacity 300ms ease-in',
-      opacity: 0.2
     }
   }
 })
@@ -388,39 +367,3 @@ export const bottomButtonsContainer = style({
 //   transitionDelay: '20ms',
 //   gap: 16
 // })
-
-const btn = style({
-  pointerEvents: 'all',
-  color: vars.element.loContrast,
-  cursor: 'pointer',
-  backgroundColor: 'var(--ai-bg)',
-  'vars': {
-    '--ai-bg-idle': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,
-    '--ai-bg': `var(--ai-bg-idle)`,
-    '--ai-bg-hover': `color-mix(in srgb , ${vars.element.fill} 65%, ${vars.element.stroke})`,
-    '--ai-hover': `color-mix(in srgb , ${vars.element.fill} 50%, ${vars.element.stroke})`
-  },
-  ':hover': {
-    boxShadow: mantine.shadows.md
-  }
-})
-
-export const navigateBtn = style([btn, {}])
-
-export const detailsBtn = style([btn, {
-  position: 'absolute',
-  top: 2,
-  right: 2,
-  selectors: {
-    [`:where([data-likec4-shape='browser']) &`]: {
-      right: 5
-    },
-    ':where([data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) &': {
-      top: 14
-    },
-    ':where([data-likec4-shape="queue"]) &': {
-      top: 1,
-      right: 12
-    }
-  }
-}])