@likec4/diagram 1.18.0 → 1.19.0

package/src/xyflow/nodes/AnimateVariants.ts

@@ -0,0 +1,143 @@
+import { fallbackVar } from '@vanilla-extract/css'
+import type { Variants } from 'framer-motion'
+import { useMemo, useState } from 'react'
+import { isEmpty, isNumber, isString } from 'remeda'
+import { vars } from '../../theme-vars'
+
+const DEFAULT_SCALE_BY = 0
+const SELECTED_SCALE_BY = 16
+const HOVERED_SCALE_BY = 12
+const TAP_SCALE_BY = -16
+
+const DELAY_NODE = 0.1
+const DELAY_NODE_CHILDREN = 0.06
+
+const DIMMED_OPACITY = 0.15
+const DIMMED_DELAY = 0.2
+
+export type VariantKeys = 'dimmed' | 'hoverd' | 'idle' | 'selected' | 'tap'
+
+export const NodeVariants = (width: number, height: number, opts?: {
+  selectedScaleBy?: number
+  hoveredScaleBy?: number
+  tapScaleBy?: number
+}) => {
+  const {
+    selectedScaleBy = SELECTED_SCALE_BY,
+    hoveredScaleBy = HOVERED_SCALE_BY,
+    tapScaleBy = TAP_SCALE_BY,
+  } = opts ?? {}
+
+  // Same scale for X and Y
+  const maxwh = Math.max(width, height)
+  const scaleBy = (diffPx: number) => ({
+    scale: (maxwh + diffPx) / maxwh,
+    // scaleY: (maxwh + diffPx) / maxwh,
+  })
+
+  return {
+    dimmed: {
+      filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
+      opacity: DIMMED_OPACITY,
+      transition: {
+        delay: DIMMED_DELAY,
+        ease: 'easeInOut',
+      },
+      willChange: 'opacity, filter',
+    },
+    idle: {
+      ...scaleBy(DEFAULT_SCALE_BY),
+      transition: {
+        delay: DELAY_NODE,
+        delayChildren: DELAY_NODE_CHILDREN,
+      },
+      filter: `grayscale(0) ${fallbackVar(vars.safariAnimationHook, 'blur(0px)')}`,
+    },
+    selected: {
+      ...scaleBy(selectedScaleBy),
+    },
+    hovered: (_, { scale }) => ({
+      ...scaleBy(hoveredScaleBy),
+      transition: !isNumber(scale) || (scale === 1)
+        ? ({
+          delay: DELAY_NODE,
+          delayChildren: DELAY_NODE_CHILDREN,
+        })
+        : {},
+    }),
+    tap: {
+      ...scaleBy(tapScaleBy),
+    },
+  } satisfies Variants
+}
+
+export function useFramerAnimateVariants() {
+  const [variants, setVariants] = useState<string[] | null>(null)
+
+  const handlers = useMemo(() => {
+    const getTarget = (e: MouseEvent | undefined) => {
+      try {
+        // 🤔 Sometimes target is null
+        return (e?.target as HTMLElement | null)?.closest('[data-animate-target]')?.getAttribute('data-animate-target')
+          ?? null
+      } catch (_e) {
+        console.warn(`Failed to get animate target`, _e)
+        // noop
+        return null
+      }
+    }
+
+    const onHoverStart = (e: MouseEvent) => {
+      e?.stopPropagation()
+      const hoverTarget = getTarget(e)
+      if (!isString(hoverTarget)) {
+        setVariants(null)
+        return
+      }
+      if (isEmpty(hoverTarget)) {
+        setVariants(['hovered'])
+        return
+      }
+      setVariants(['hovered', `hovered:${hoverTarget}`])
+    }
+
+    const resetVariants = (e: MouseEvent) => {
+      e?.stopPropagation()
+      const hoverTarget = getTarget(e)
+      if (!isString(hoverTarget) || isEmpty(hoverTarget)) {
+        setVariants(null)
+        return
+      }
+      setVariants(v => v?.filter(v => !v.includes(hoverTarget)) ?? null)
+    }
+
+    return ({
+      onTapStart: (e: MouseEvent) => {
+        e?.stopPropagation()
+        const tapTarget = getTarget(e)
+        if (!isString(tapTarget)) {
+          setVariants(null)
+          return
+        }
+        if (isEmpty(tapTarget)) {
+          setVariants([
+            'hovered',
+            'tap',
+          ])
+        } else {
+          setVariants([
+            'hovered',
+            `hovered:${tapTarget}`,
+            `tap:${tapTarget}`,
+          ])
+        }
+      },
+      onHoverStart,
+      onHoverEnd: resetVariants,
+      onTapCancel: resetVariants,
+      onTap: onHoverStart,
+    })
+  }, [setVariants])
+
+  return [variants, handlers] as const
+}

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

@@ -0,0 +1,44 @@
+import { style } from "@vanilla-extract/css";
+
+export const topLeftBtnContainer = style({
+  position: 'absolute',
+  left: 3,
+  top: 6
+})
+
+export const topRightBtnContainer = style({
+  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
+    }
+  }
+})
+
+export const bottomBtnContainer = style({
+  zIndex: 100,
+  position: 'absolute',
+  left: 0,
+  width: '100%',
+  bottom: 2,
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'nowrap',
+  alignItems: 'center',
+  justifyContent: 'center',
+  pointerEvents: 'none',
+  selectors: {
+    [`:where([data-likec4-shape='browser']) &`]: {
+      bottom: 4
+    }
+  }
+})

package/src/xyflow/nodes/compound/CompoundNode.css.ts

@@ -1,7 +1,7 @@
 import { rem } from '@mantine/core'
 import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
 import { calc } from '@vanilla-extract/css-utils'
-import { mantine, vars, whereLight } from '../../../theme-vars'
+import { mantine, vars } from '../../../theme-vars'
 
 // For framer motion
 export const containerForFramer = style({
@@ -39,16 +39,6 @@ export const nodeHandlerInCenter = style({
   visibility: 'hidden'
 })
 
-export const dimmed = style({})
-
-globalStyle(`.react-flow__node-compound:has(${dimmed})`, {
-  opacity: 0.25,
-  transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
-  transitionDelay: '200ms',
-  filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
-  willChange: 'opacity, filter'
-})
-
 globalStyle(`:where([data-mantine-color-scheme='dark'] .likec4-compound-transparent)`, {
   vars: {
     ['--_compound-border-color']: `color-mix(in srgb, ${vars.compound.titleColor} 25%, ${vars.element.stroke})`
@@ -243,59 +233,6 @@ globalStyle(`:where([data-mantine-color-scheme='light'] .likec4-compound-transpa
   }
 })
 
-const btn = style({
-  pointerEvents: 'all',
-  cursor: 'pointer',
-  color: `var(--_compound-title-color,${navigateBtnColor})`,
-  opacity: 'var(--ai-opacity)',
-  backgroundColor: 'var(--ai-bg)',
-  vars: {
-    '--ai-opacity': '1',
-    '--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
-  },
-  selectors: {
-    [`${whereLight} .likec4-compound-transparent &`]: {
-      opacity: 0.85,
-      vars: {
-        '--ai-bg-hover': `color-mix(in srgb , ${vars.element.fill},  transparent 20%)`,
-        '--ai-hover': `color-mix(in srgb , ${vars.element.fill},  transparent 10%)`,
-        '--ai-bg': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`
-      }
-    }
-  }
-})
-
-export const navigateBtn = style([btn, {
-  position: 'absolute',
-  left: 3,
-  top: 6
-}])
-
-export const detailsBtn = style([btn, {
-  // position: 'absolute',
-  // top: 2,
-  // right: 2,
-  // selectors: {
-  //   [`:where([data-likec4-shape='browser']) &`]: {
-  //     top: 3,
-  //     right: 5
-  //   },
-  //   ':where([data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) &': {
-  //     top: 14
-  //   },
-  //   ':where([data-likec4-shape="queue"]) &': {
-  //     top: 1,
-  //     right: 12
-  //   }
-  // }
-}])
-
 export const elementIcon = style({
   flex: `0 0 ${iconSize}`,
   height: iconSize,

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

@@ -1,26 +1,25 @@
-import { DiagramNode, 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, 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 { 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,83 +28,6 @@ const isEqualProps = (prev: CompoundNodeProps, next: CompoundNodeProps) => (
   && eq(prev.data, next.data)
 )
 
-const VariantsRoot = {
-  idle: (_, { translateZ }) => ({
-    // Why? translateZ is used to determine state
-    ...translateZ !== 0 && {
-      transition: {
-        delayChildren: .08
-      }
-    },
-    transitionEnd: {
-      translateZ: 0
-    }
-  }),
-  selected: {},
-  hovered: (_, { translateZ }) => ({
-    ...translateZ !== 1 && {
-      transition: {
-        delayChildren: .08
-      }
-    },
-    transitionEnd: {
-      translateZ: 1
-    }
-  }),
-  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:details': {},
-  'tap:navigate': {
-    scale: 1.15
-  }
-} satisfies Variants
-VariantsNavigate['selected'] = VariantsNavigate.hovered
-VariantsNavigate['hovered:details'] = VariantsNavigate.idle
-
-const VariantsDetailsBtn = {
-  idle: {
-    '--ai-bg': 'var(--ai-bg-idle)',
-    scale: 1,
-    opacity: 0.3,
-    originX: 0.45,
-    originY: 0.55
-  },
-  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,
@@ -113,41 +35,37 @@ 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 MAX_TRANSPARENCY = 40
   const borderTransparency = clamp(MAX_TRANSPARENCY - opacity * MAX_TRANSPARENCY, {
     min: 0,
-    max: MAX_TRANSPARENCY
+    max: MAX_TRANSPARENCY,
   })
 
   const {
     viewId,
-    triggerOnNavigateTo,
-    openOverlay,
     isEditable,
-    isHovered,
     isDimmed,
     isInteractive,
     isNavigable,
     renderIcon,
     isInActiveOverlay,
-    enableElementDetails
+    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),
@@ -155,91 +73,90 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>((
     isNavigable: isNotViewGroup && !!s.onNavigateTo && !!element.navigateTo,
     renderIcon: s.renderIcon,
     isInActiveOverlay: (s.activeOverlay?.elementDetails ?? s.activeOverlay?.relationshipsOf) === id,
-    enableElementDetails: isNotViewGroup && s.enableElementDetails
+    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:
-      animate = 'idle'
+      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 onNavigateTo = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation()
-    triggerOnNavigateTo(id, e)
-  }, [triggerOnNavigateTo, id])
+  const _isToolbarVisible = isNotViewGroup && ((selected && !dragging) || isHovered)
+  const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, _isToolbarVisible ? 500 : 300)
 
-  const onOpenDetails = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation()
-    openOverlay({ elementDetails: element.id })
-  }, [openOverlay, element])
+  const nodeVariants = NodeVariants(w, h, {
+    selectedScaleBy: 0,
+    hoveredScaleBy: 0,
+    tapScaleBy: -10,
+  })
+
+  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={VariantsRoot}
+        variants={nodeVariants}
         key={`${viewId}:element:${id}`}
         layoutId={`${viewId}:element:${id}`}
         className={css.containerForFramer}>
         <Box
           component={m.div}
-          variants={VariantsRoot}
-          initial={false}
-          animate={(isHovered && !dragging && !isInActiveOverlay) ? (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
@@ -254,29 +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),
                 }),
                 ...style.border === 'none'
                   ? {
-                    borderColor: 'transparent'
+                    borderColor: 'transparent',
                   }
                   : {
-                    borderStyle: style.border ?? 'dashed'
-                  }
-              })
+                    borderStyle: style.border ?? 'dashed',
+                  },
+              }),
             }}
           >
             <Box
               className={clsx(
                 css.compoundTitle,
                 isNavigable && css.withNavigation,
-                'likec4-compound-title'
+                'likec4-compound-title',
               )}>
               {elementIcon}
               <Text
@@ -287,48 +204,18 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>((
                 {element.title}
               </Text>
               {enableElementDetails && !!modelRef && (
-                <Tooltip
-                  fz="xs"
-                  color="dark"
-                  label="Open details"
-                  withinPortal={false}
-                  offset={2}
-                  openDelay={600}>
-                  <ActionIcon
-                    key={`${id}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>
           </Box>
           {isNavigable && (
-            <ActionIcon
-              key={`${id}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()