@likec4/diagram 1.17.1 → 1.19.0

package/src/xyflow/nodes/compound/CompoundNode.tsx

@@ -1,26 +1,25 @@
-import { type ThemeColor } from '@likec4/core'
-import { ActionIcon, Box, Text, Tooltip } from '@mantine/core'
+import { type ThemeColor, DiagramNode } from '@likec4/core'
+import { Box, Text } from '@mantine/core'
 import { useDebouncedValue } from '@mantine/hooks'
-import { IconId, IconTransform, IconZoomScan } from '@tabler/icons-react'
 import { assignInlineVars } from '@vanilla-extract/dynamic'
-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 { m, type Variants } from 'framer-motion'
-import { memo, useCallback, useState } from 'react'
-import { clamp, isNumber } from 'remeda'
+import { m } from 'framer-motion'
+import { memo, useState } from 'react'
+import { clamp } from 'remeda'
+import { ActionButtonBar } from '../../../controls/action-button-bar/ActionButtonBar'
+import { NavigateToButton, OpenDetailsButton } from '../../../controls/action-buttons/ActionButtons'
 import { useDiagramState } from '../../../hooks/useDiagramState'
-import type { CompoundXYFlowNode } from '../../types'
-import { stopPropagation } 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 { CompoundToolbar } from '../shared/Toolbar'
-import { useFramerAnimateVariants } from '../use-animate-variants'
 import * as css from './CompoundNode.css'
 
-type CompoundNodeProps = Pick<
-  NodeProps<CompoundXYFlowNode>,
-  'id' | 'data' | 'selected' | 'dragging'
->
+type CompoundNodeProps = NodeProps<DiagramFlowTypes.CompoundNode>
 
 const isEqualProps = (prev: CompoundNodeProps, next: CompoundNodeProps) => (
   prev.id === next.id
@@ -29,66 +28,6 @@ const isEqualProps = (prev: CompoundNodeProps, next: CompoundNodeProps) => (
   && eq(prev.data, next.data)
 )
 
-const VariantsRoot = {
-  idle: {
-    transition: {
-      delayChildren: .1
-      // stagger
-    }
-  },
-  selected: {},
-  hovered: {},
-  tap: {}
-} satisfies Variants
-
-const VariantsNavigate = {
-  idle: {
-    '--ai-bg': 'var(--ai-bg-idle)',
-    scale: 1,
-    opacity: 0.8,
-    originX: 1,
-    originY: 0.25,
-    translateX: 0,
-    translateY: 0
-  },
-  selected: {},
-  hovered: {
-    '--ai-bg': 'var(--ai-bg-hover)',
-    scale: 1.25,
-    opacity: 1,
-    translateX: -1
-  },
-  'hovered:navigate': {
-    scale: 1.42
-  },
-  'hovered:relations': {},
-  'tap:navigate': {
-    scale: 1.15
-  }
-} satisfies Variants
-VariantsNavigate['selected'] = VariantsNavigate['hovered']
-
-const VariantsDetailsBtn = {
-  idle: {
-    '--ai-bg': 'var(--ai-bg-idle)',
-    scale: 1,
-    opacity: 0.3
-  },
-  selected: {},
-  hovered: {
-    scale: 1.2,
-    opacity: 0.6
-  },
-  'hovered:details': {
-    scale: 1.42,
-    opacity: 1
-  },
-  'tap:details': {
-    scale: 1.15
-  }
-} satisfies Variants
-VariantsDetailsBtn['selected'] = VariantsDetailsBtn['hovered']
-
 export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>((
   {
     id,
@@ -96,125 +35,128 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>((
     dragging = false,
     data: {
       isViewGroup,
-      element
-    }
-  }
+      element,
+    },
+    width,
+    height,
+  },
 ) => {
+  const modelRef = DiagramNode.modelRef(element)
   const { depth, style, color } = element
   const isNotViewGroup = !isViewGroup
   const opacity = clamp((style.opacity ?? 100) / 100, {
     min: 0,
-    max: 1
+    max: 1,
   })
-  const borderTransparency = clamp(50 - opacity * 50, {
+  const MAX_TRANSPARENCY = 40
+  const borderTransparency = clamp(MAX_TRANSPARENCY - opacity * MAX_TRANSPARENCY, {
     min: 0,
-    max: 50
+    max: MAX_TRANSPARENCY,
   })
 
   const {
     viewId,
-    triggerOnNavigateTo,
-    openOverlay,
     isEditable,
-    isHovered,
     isDimmed,
     isInteractive,
     isNavigable,
     renderIcon,
-    enableElementDetails
+    isInActiveOverlay,
+    enableElementDetails,
   } = useDiagramState(s => ({
     viewId: s.view.id,
-    triggerOnNavigateTo: s.triggerOnNavigateTo,
-    openOverlay: s.openOverlay,
     isEditable: s.readonly !== true,
-    isHovered: s.hoveredNodeId === id,
     isDimmed: s.dimmed.has(id),
     isInteractive: s.nodesDraggable || s.nodesSelectable || s.enableElementDetails
       || (!!s.onNavigateTo && !!element.navigateTo),
     // If this is a view group, we don't want to show the navigate button
     isNavigable: isNotViewGroup && !!s.onNavigateTo && !!element.navigateTo,
     renderIcon: s.renderIcon,
-    enableElementDetails: isNotViewGroup && s.enableElementDetails
+    isInActiveOverlay: (s.activeOverlay?.elementDetails ?? s.activeOverlay?.relationshipsOf) === id,
+    enableElementDetails: isNotViewGroup && s.enableElementDetails,
   }))
-  const _isToolbarVisible = isNotViewGroup && isEditable && (isHovered || (import.meta.env.DEV && selected))
-  const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, _isToolbarVisible ? 500 : 300)
 
-  const [animateVariants, animateHandlers] = useFramerAnimateVariants()
+  const w = toDomPrecision(width ?? element.width)
+  const h = toDomPrecision(height ?? element.height)
 
-  let animate: keyof typeof VariantsRoot
+  let animateVariant: VariantKeys | string[]
   switch (true) {
+    case isInActiveOverlay:
+      animateVariant = 'idle'
+      break
     case dragging && selected:
-      animate = 'selected'
+      animateVariant = 'selected'
       break
     case dragging:
-      animate = 'idle'
+      animateVariant = 'idle'
       break
-    case isInteractive && isHovered:
-      animate = 'hovered'
+    case isDimmed:
+      animateVariant = 'dimmed'
       break
     case selected:
-      animate = 'selected'
+      animateVariant = 'selected'
       break
     default:
-      animate = 'idle'
+      animateVariant = 'idle'
   }
 
-  const [previewColor, setPreviewColor] = useState<ThemeColor | null>(null)
+  const [animateVariants, animateHandlers] = useFramerAnimateVariants()
+  if (!dragging && !isInActiveOverlay) {
+    animateVariant = animateVariants ?? animateVariant
+  }
+
+  const isHovered = Array.isArray(animateVariant) && animateVariant.includes('hovered')
+
+  const _isToolbarVisible = isNotViewGroup && ((selected && !dragging) || isHovered)
+  const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, _isToolbarVisible ? 500 : 300)
 
-  const onNavigateTo = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation()
-    triggerOnNavigateTo(id, e)
-  }, [triggerOnNavigateTo, id])
+  const nodeVariants = NodeVariants(w, h, {
+    selectedScaleBy: 0,
+    hoveredScaleBy: 0,
+    tapScaleBy: -10,
+  })
 
-  const onOpenDetails = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation()
-    openOverlay({ elementDetails: element.id })
-  }, [openOverlay, element.id])
+  const [previewColor, setPreviewColor] = useState<ThemeColor | null>(null)
 
   const elementIcon = ElementIcon({
     element,
     viewId,
     className: css.elementIcon,
-    renderIcon
+    renderIcon,
   })
 
   return (
     <>
-      {isToolbarVisible && (
+      {isEditable && (
         <CompoundToolbar
-          isVisible
+          isVisible={isToolbarVisible}
           element={element}
           align="start"
           onColorPreview={setPreviewColor} />
       )}
       <Box
         component={m.div}
+        variants={nodeVariants}
         key={`${viewId}:element:${id}`}
         layoutId={`${viewId}:element:${id}`}
         className={css.containerForFramer}>
         <Box
           component={m.div}
-          variants={VariantsRoot}
-          initial={false}
-          animate={(isHovered && !dragging) ? (animateVariants ?? animate) : animate}
           className={clsx(
             css.container,
             'likec4-compound-node',
             opacity < 1 && 'likec4-compound-transparent',
-            isDimmed && css.dimmed
           )}
+          initial={false}
+          variants={nodeVariants}
+          animate={animateVariant}
+          {...isInteractive && animateHandlers}
           mod={{
             'animate-target': '',
             'compound-depth': depth,
             'likec4-color': previewColor ?? color,
-            hovered: isHovered
           }}
           tabIndex={-1}
-          {...(isInteractive && {
-            onTapStart: animateHandlers.onTapStart,
-            onTap: animateHandlers.onTap,
-            onTapCancel: animateHandlers.onTapCancel
-          })}
         >
           <svg className={css.indicator}>
             <rect
@@ -229,23 +171,29 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>((
             className={clsx(
               css.compoundBody,
               opacity < 1 && css.transparent,
-              'likec4-compound'
+              'likec4-compound',
             )}
             style={{
               ...(opacity < 1 && {
                 ...assignInlineVars({
                   [css.varBorderTransparency]: `${borderTransparency}%`,
-                  [css.varOpacity]: opacity.toFixed(2)
+                  [css.varOpacity]: opacity.toFixed(2),
                 }),
-                borderStyle: style.border ?? 'dashed'
-              })
+                ...style.border === 'none'
+                  ? {
+                    borderColor: 'transparent',
+                  }
+                  : {
+                    borderStyle: style.border ?? 'dashed',
+                  },
+              }),
             }}
           >
             <Box
               className={clsx(
                 css.compoundTitle,
                 isNavigable && css.withNavigation,
-                'likec4-compound-title'
+                'likec4-compound-title',
               )}>
               {elementIcon}
               <Text
@@ -255,48 +203,19 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>((
                 className={css.title}>
                 {element.title}
               </Text>
-              {enableElementDetails && (
-                <Tooltip
-                  fz="xs"
-                  color="dark"
-                  label="Open details"
-                  withinPortal={false}
-                  offset={2}
-                  openDelay={600}>
-                  <ActionIcon
-                    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>
+              {enableElementDetails && !!modelRef && (
+                <Box className={clsx(nodeCss.topRightBtnContainer)}>
+                  <OpenDetailsButton fqn={modelRef} {...isInteractive && animateHandlers} />
+                </Box>
               )}
             </Box>
           </Box>
           {isNavigable && (
-            <ActionIcon
-              key={'navigate'}
-              component={m.div}
-              variants={VariantsNavigate}
-              data-animate-target="navigate"
-              className={clsx('nodrag nopan', css.navigateBtn)}
-              radius="md"
-              style={{ zIndex: 100 }}
-              onClick={onNavigateTo}
-              role="button"
-              onDoubleClick={stopPropagation}
-              {...isInteractive && animateHandlers}
-            >
-              <IconZoomScan style={{ width: '75%' }} />
-            </ActionIcon>
+            <Box className={clsx(nodeCss.topLeftBtnContainer)}>
+              <ActionButtonBar shiftX="left">
+                <NavigateToButton xynodeId={id} {...isInteractive && animateHandlers} />
+              </ActionButtonBar>
+            </Box>
           )}
         </Box>
       </Box>

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

@@ -16,12 +16,11 @@ import clsx from 'clsx'
 import { useId } from 'react'
 import { clamp } from 'remeda'
 import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps'
-import { type DiagramState } from '../../../state/diagramStore'
-import type { XYFlowNode } from '../../types'
 import { elementLink, trigger } from './ElementLink.css'
+import type { DiagramFlowTypes } from '../../types'
 
 type ElementLinkProps = {
-  element: XYFlowNode['data']['element']
+  element: DiagramFlowTypes.Node['data']['element']
 }
 
 const stopEventPropagation = (e: React.MouseEvent) => e.stopPropagation()