@likec4/diagram 1.17.1 → 1.19.0

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

@@ -1,117 +1,30 @@
-import { type ThemeColor } from '@likec4/core'
-import { ActionIcon, Box, Group, 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 { m, type Variants } from 'framer-motion'
-import React, { memo, 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 VariantsNavigateBtn = {
-  idle: {
-    '--ai-bg': 'var(--ai-bg-idle)',
-    scale: 1,
-    opacity: 0.5,
-    originY: 0.5
-  },
-  selected: {},
-  hovered: {
-    '--ai-bg': 'var(--ai-bg-hover)',
-    scale: 1.35,
-    opacity: 1
-  }
-} satisfies Variants
-VariantsNavigateBtn['selected'] = VariantsNavigateBtn['hovered']
-
-const VariantsNavigate = {
-  ...VariantsNavigateBtn,
-  'hovered:navigate': {
-    scale: 1.42
-  },
-  'tap:navigate': {
-    scale: 1.15
-  }
-} satisfies Variants
-
-const VariantRealationships = {
-  ...VariantsNavigateBtn,
-  'hovered:relationships': {
-    scale: 1.42
-  },
-  'tap:relationships': {
-    scale: 1.15
-  }
-} satisfies Variants
-
-const VariantsDetailsBtn = {
-  idle: {
-    '--ai-bg': 'var(--ai-bg-idle)',
-    scale: 1,
-    opacity: 0.5
-  },
-  selected: {},
-  hovered: {
-    scale: 1.2,
-    opacity: 0.7
-  },
-  'hovered:details': {
-    scale: 1.42,
-    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)
@@ -124,112 +37,90 @@ 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)
 
-  const [animateVariants, animateHandlers] = useFramerAnimateVariants()
-
-  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 [animateVariants, animateHandlers] = useFramerAnimateVariants()
+  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) => {
-    e.stopPropagation()
-    openOverlay({ relationshipsOf: element.id })
-  }, [openOverlay, element.id])
-
   return (
     <>
-      {isToolbarVisible && (
-        <ElementToolbar
-          element={element}
-          isVisible={isToolbarVisible}
-          onColorPreview={setPreviewColor}
-        />
-      )}
       <Box
         component={m.div}
         className={clsx([
           css.container,
-          isDimmed && css.dimmed,
-          animate !== 'idle' && css.containerAnimated,
-          'likec4-element-node'
+          animateVariant !== 'idle' && css.containerAnimated,
+          'likec4-element-node',
         ])}
         key={`${viewId}:element:${id}`}
         layoutId={`${viewId}:element:${id}`}
@@ -238,15 +129,19 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
         data-likec4-shape={element.shape}
         data-animate-target=""
         initial={false}
-        variants={VariantsRoot}
-        animate={(isHovered && !dragging && !isInActiveOverlay) ? (animateVariants ?? animate) : animate}
+        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}`}>
@@ -259,7 +154,7 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
           className={clsx(
             css.elementDataContainer,
             isTruthy(elementIcon) && css.hasIcon,
-            'likec4-element'
+            'likec4-element',
           )}
         >
           {elementIcon}
@@ -284,65 +179,26 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
             )}
           </Box>
         </Box>
-        {/* {isHovercards && element.links && <ElementLink element={element} />} */}
-
-        {(enableRelationshipBrowser || isNavigable) && (
-          <Group className={css.navigateBtnBox} align="center">
-            {enableRelationshipBrowser && (
-              <ActionIcon
-                component={m.div}
-                variants={VariantRealationships}
-                data-animate-target="relationships"
-                className={clsx('nodrag nopan', css.navigateBtn)}
-                radius="md"
-                role="button"
-                onClick={onOpenRelationships}
-                onDoubleClick={stopPropagation}
+        <Box className={clsx(nodeCss.bottomBtnContainer)}>
+          <ActionButtonBar shiftY="bottom">
+            {isNavigable && (
+              <NavigateToButton
+                xynodeId={id}
                 {...isInteractive && animateHandlers}
-              >
-                <IconTransform style={{ width: '75%' }} />
-              </ActionIcon>
+              />
             )}
-            {isNavigable && (
-              <ActionIcon
-                component={m.div}
-                variants={VariantsNavigate}
-                data-animate-target="navigate"
-                className={clsx('nodrag nopan', css.navigateBtn)}
-                radius="md"
-                role="button"
-                onClick={onNavigateTo}
-                onDoubleClick={stopPropagation}
+            {enableRelationshipBrowser && !!modelRef && (
+              <BrowseRelationshipsButton
+                fqn={modelRef}
                 {...isInteractive && animateHandlers}
-              >
-                <IconZoomScan style={{ width: '75%' }} />
-              </ActionIcon>
+              />
             )}
-          </Group>
-        )}
-        {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>
+          </ActionButtonBar>
+        </Box>
+        {enableElementDetails && !!modelRef && (
+          <Box className={clsx(nodeCss.topRightBtnContainer)}>
+            <OpenDetailsButton fqn={modelRef} {...isInteractive && animateHandlers} />
+          </Box>
         )}
       </Box>
       <Handle type="target" position={Position.Top} className={css.handleCenter} />
@@ -350,38 +206,3 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
     </>
   )
 }, isEqualProps)
-
-// const ElementIcon = (
-//   { element, viewId, renderIcon: RenderIcon }: {
-//     element: DiagramNode
-//     viewId: string
-//     renderIcon: ElementIconRenderer | null
-//   }
-// ) => {
-//   if (!element.icon) {
-//     return null
-//   }
-//   let icon = null as React.ReactNode
-//   if (element.icon.startsWith('http://') || element.icon.startsWith('https://')) {
-//     icon = <img src={element.icon} alt={element.title} />
-//   } else if (RenderIcon) {
-//     icon = <RenderIcon node={element} />
-//   }
-
-//   if (!icon) {
-//     return null
-//   }
-//   return (
-//     <m.div
-//       // key={`${viewId}:element:icon:${element.id}`}
-//       layoutId={`${viewId}:element:icon:${element.id}`}
-//       className={clsx(
-//         css.elementIcon,
-//         'likec4-element-icon'
-//       )}
-//       data-likec4-icon={element.icon}
-//     >
-//       {icon}
-//     </m.div>
-//   )
-// }

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'
     }
   }
 })
@@ -141,7 +124,8 @@ export const title = style({
   fontSize: 19,
   lineHeight: 1.15,
   textWrap: 'balance',
-  color: vars.element.hiContrast
+  color: vars.element.hiContrast,
+  whiteSpaceCollapse: 'preserve-breaks'
 })
 
 export const description = style({
@@ -301,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
     }
   }
 })
@@ -338,56 +318,52 @@ export const shapeSvg = style({
   }
 })
 
-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 navigateBtnBox = style({
+export const bottomButtonsContainer = style({
   zIndex: 100,
   position: 'absolute',
-  left: '50%',
+  left: 0,
+  width: '100%',
   bottom: 2,
-  transform: 'translate(-50%, 0%)',
-  gap: 0,
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'nowrap',
+  alignItems: 'center',
+  gap: 2,
+  justifyContent: 'center',
+  pointerEvents: 'none',
   selectors: {
     [`:where([data-likec4-shape='browser']) &`]: {
       bottom: 4
     }
   }
 })
-globalStyle(`:where(.react-flow__node:hover) ${navigateBtnBox}`, {
-  transitionDelay: '20ms',
-  gap: 16
-})
 
-export const navigateBtn = style([btn, {}])
+//   --group-gap: var(--mantine-spacing-md);
+//   --group-align: center;
+//   --group-justify: flex-start;
+//   --group-wrap: wrap;
+//   gap: 0px;
+// }
+// <style>
+// .element_bottomButtonsContainer__14yllojn {
+//   z-index: 100;
+//   position: absolute;
+//   left: 50%;
+//   bottom: 2px;
+//   transform: translate(-50%, 0%);
+// }
 
-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
-    }
-  }
-}])
+// <style>
+// .m_4081bf90 {
+//   display: flex
+// ;
+//   flex-direction: row;
+//   flex-wrap: var(--group-wrap, wrap);
+//   justify-content: var(--group-justify, flex-start);
+//   align-items: var(--group-align, center);
+//   gap: var(--group-gap, var(--mantine-spacing-md));
+// }
+// globalStyle(`:where(.react-flow__node:hover) ${bottomButtonsContainer}`, {
+//   transitionDelay: '20ms',
+//   gap: 16
+// })

package/src/xyflow/nodes/shared/ElementIcon.tsx

@@ -14,7 +14,7 @@ export const ElementIcon = ({
   className: string
   renderIcon: ElementIconRenderer | null
 }) => {
-  if (!element.icon) {
+  if (!element.icon || element.icon === 'none') {
     return null
   }
   let icon = null as React.ReactNode