@likec4/diagram 1.17.0 → 1.18.0

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

@@ -1,14 +1,14 @@
-import { type ThemeColor } from '@likec4/core'
+import { DiagramNode, type ThemeColor } from '@likec4/core'
 import { ActionIcon, Box, Text, Tooltip } from '@mantine/core'
 import { useDebouncedValue } from '@mantine/hooks'
-import { IconId, IconTransform, IconZoomScan } from '@tabler/icons-react'
+import { IconId, IconZoomScan } from '@tabler/icons-react'
 import { assignInlineVars } from '@vanilla-extract/dynamic'
 import { Handle, type NodeProps, 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 { clamp } from 'remeda'
 import { useDiagramState } from '../../../hooks/useDiagramState'
 import type { CompoundXYFlowNode } from '../../types'
 import { stopPropagation } from '../../utils'
@@ -30,14 +30,28 @@ const isEqualProps = (prev: CompoundNodeProps, next: CompoundNodeProps) => (
 )
 
 const VariantsRoot = {
-  idle: {
-    transition: {
-      delayChildren: .1
-      // stagger
+  idle: (_, { translateZ }) => ({
+    // Why? translateZ is used to determine state
+    ...translateZ !== 0 && {
+      transition: {
+        delayChildren: .08
+      }
+    },
+    transitionEnd: {
+      translateZ: 0
     }
-  },
+  }),
   selected: {},
-  hovered: {},
+  hovered: (_, { translateZ }) => ({
+    ...translateZ !== 1 && {
+      transition: {
+        delayChildren: .08
+      }
+    },
+    transitionEnd: {
+      translateZ: 1
+    }
+  }),
   tap: {}
 } satisfies Variants
 
@@ -61,18 +75,21 @@ const VariantsNavigate = {
   'hovered:navigate': {
     scale: 1.42
   },
-  'hovered:relations': {},
+  'hovered:details': {},
   'tap:navigate': {
     scale: 1.15
   }
 } satisfies Variants
-VariantsNavigate['selected'] = VariantsNavigate['hovered']
+VariantsNavigate['selected'] = VariantsNavigate.hovered
+VariantsNavigate['hovered:details'] = VariantsNavigate.idle
 
 const VariantsDetailsBtn = {
   idle: {
     '--ai-bg': 'var(--ai-bg-idle)',
     scale: 1,
-    opacity: 0.3
+    opacity: 0.3,
+    originX: 0.45,
+    originY: 0.55
   },
   selected: {},
   hovered: {
@@ -100,15 +117,17 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>((
     }
   }
 ) => {
+  const modelRef = DiagramNode.modelRef(element)
   const { depth, style, color } = element
   const isNotViewGroup = !isViewGroup
   const opacity = clamp((style.opacity ?? 100) / 100, {
     min: 0,
     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 {
@@ -121,6 +140,7 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>((
     isInteractive,
     isNavigable,
     renderIcon,
+    isInActiveOverlay,
     enableElementDetails
   } = useDiagramState(s => ({
     viewId: s.view.id,
@@ -134,6 +154,7 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>((
     // If this is a view group, we don't want to show the navigate button
     isNavigable: isNotViewGroup && !!s.onNavigateTo && !!element.navigateTo,
     renderIcon: s.renderIcon,
+    isInActiveOverlay: (s.activeOverlay?.elementDetails ?? s.activeOverlay?.relationshipsOf) === id,
     enableElementDetails: isNotViewGroup && s.enableElementDetails
   }))
   const _isToolbarVisible = isNotViewGroup && isEditable && (isHovered || (import.meta.env.DEV && selected))
@@ -143,6 +164,9 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>((
 
   let animate: keyof typeof VariantsRoot
   switch (true) {
+    case isInActiveOverlay:
+      animate = 'idle'
+      break
     case dragging && selected:
       animate = 'selected'
       break
@@ -169,7 +193,7 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>((
   const onOpenDetails = useCallback((e: React.MouseEvent) => {
     e.stopPropagation()
     openOverlay({ elementDetails: element.id })
-  }, [openOverlay, element.id])
+  }, [openOverlay, element])
 
   const elementIcon = ElementIcon({
     element,
@@ -189,6 +213,7 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>((
       )}
       <Box
         component={m.div}
+        variants={VariantsRoot}
         key={`${viewId}:element:${id}`}
         layoutId={`${viewId}:element:${id}`}
         className={css.containerForFramer}>
@@ -196,7 +221,7 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>((
           component={m.div}
           variants={VariantsRoot}
           initial={false}
-          animate={(isHovered && !dragging) ? (animateVariants ?? animate) : animate}
+          animate={(isHovered && !dragging && !isInActiveOverlay) ? (animateVariants ?? animate) : animate}
           className={clsx(
             css.container,
             'likec4-compound-node',
@@ -237,7 +262,13 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>((
                   [css.varBorderTransparency]: `${borderTransparency}%`,
                   [css.varOpacity]: opacity.toFixed(2)
                 }),
-                borderStyle: style.border ?? 'dashed'
+                ...style.border === 'none'
+                  ? {
+                    borderColor: 'transparent'
+                  }
+                  : {
+                    borderStyle: style.border ?? 'dashed'
+                  }
               })
             }}
           >
@@ -255,7 +286,7 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>((
                 className={css.title}>
                 {element.title}
               </Text>
-              {enableElementDetails && (
+              {enableElementDetails && !!modelRef && (
                 <Tooltip
                   fz="xs"
                   color="dark"
@@ -264,6 +295,7 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>((
                   offset={2}
                   openDelay={600}>
                   <ActionIcon
+                    key={`${id}details`}
                     component={m.div}
                     variants={VariantsDetailsBtn}
                     data-animate-target="details"
@@ -283,7 +315,7 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>((
           </Box>
           {isNavigable && (
             <ActionIcon
-              key={'navigate'}
+              key={`${id}navigate`}
               component={m.div}
               variants={VariantsNavigate}
               data-animate-target="navigate"

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

@@ -1,12 +1,12 @@
-import { type ThemeColor } from '@likec4/core'
-import { ActionIcon, Box, Text as MantineText, Tooltip } from '@mantine/core'
+import { DiagramNode, type ThemeColor } from '@likec4/core'
+import { ActionIcon, type ActionIconProps, Box, Text as MantineText, Tooltip } from '@mantine/core'
 import { useDebouncedValue } from '@mantine/hooks'
-import { IconId, IconZoomScan } from '@tabler/icons-react'
+import { IconId, IconTransform, IconZoomScan } from '@tabler/icons-react'
 import { Handle, type NodeProps, 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 { type HTMLMotionProps, m, type Variants } from 'framer-motion'
+import React, { memo, type PropsWithoutRef, useCallback, useState } from 'react'
 import { isNumber, isTruthy } from 'remeda'
 import { useDiagramState } from '../../../hooks/useDiagramState'
 import type { ElementXYFlowNode } from '../../types'
@@ -54,35 +54,60 @@ const VariantsRoot = {
   }
 } satisfies Variants
 
-const VariantsNavigate = {
-  idle: {
-    '--ai-bg': 'var(--ai-bg-idle)',
-    scale: 1,
-    opacity: 0.5,
-    translateX: '-50%',
-    originY: 0.2
-  },
-  selected: {},
-  hovered: {
-    '--ai-bg': 'var(--ai-bg-hover)',
-    translateX: '-50%',
-    scale: 1.35,
-    opacity: 1
-  },
-  'hovered:navigate': {
-    scale: 1.42
-  },
-  'tap:navigate': {
-    scale: 1.15
-  }
-} satisfies Variants
-VariantsNavigate['selected'] = VariantsNavigate['hovered']
+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
+    opacity: 0.5,
+    originX: 0.45,
+    originY: 0.55
   },
   selected: {},
   hovered: {
@@ -90,7 +115,7 @@ const VariantsDetailsBtn = {
     opacity: 0.7
   },
   'hovered:details': {
-    scale: 1.42,
+    scale: 1.44,
     opacity: 1
   },
   'tap:details': {
@@ -119,6 +144,8 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
   width,
   height
 }) {
+  const modelRef = DiagramNode.modelRef(element)
+  // const deploymentRef = DiagramNode.deploymentRef(element)
   const {
     viewId,
     isEditable,
@@ -127,6 +154,7 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
     isNavigable,
     isInteractive,
     enableElementDetails,
+    enableRelationshipBrowser,
     triggerOnNavigateTo,
     openOverlay,
     isInActiveOverlay,
@@ -136,10 +164,11 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
     isEditable: s.readonly !== true,
     isHovered: s.hoveredNodeId === id,
     isDimmed: s.dimmed.has(id),
-    isInteractive: s.nodesDraggable || s.nodesSelectable || s.enableElementDetails
+    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,
@@ -153,27 +182,29 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
   const w = toDomPrecision(width ?? element.width)
   const h = toDomPrecision(height ?? element.height)
 
-  const [animateVariants, animateHandlers] = useFramerAnimateVariants()
-
-  let animate: keyof typeof VariantsRoot
+  let animateVariant: keyof typeof VariantsRoot | 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'
+      animateVariant = 'hovered'
       break
     case selected:
-      animate = 'selected'
+      animateVariant = 'selected'
       break
     default:
-      animate = 'idle'
+      animateVariant = 'idle'
+  }
+  const [animateVariants, animateHandlers] = useFramerAnimateVariants()
+  if (isHovered && !dragging && !isInActiveOverlay) {
+    animateVariant = animateVariants ?? animateVariant
   }
 
   const elementIcon = ElementIcon({
@@ -195,6 +226,13 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
     openOverlay({ elementDetails: element.id })
   }, [openOverlay, element.id])
 
+  const onOpenRelationships = useCallback((e: React.MouseEvent) => {
+    if (modelRef) {
+      e.stopPropagation()
+      openOverlay({ relationshipsOf: modelRef })
+    }
+  }, [openOverlay, modelRef])
+
   return (
     <>
       {isToolbarVisible && (
@@ -209,7 +247,7 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
         className={clsx([
           css.container,
           isDimmed && css.dimmed,
-          animate !== 'idle' && css.containerAnimated,
+          animateVariant !== 'idle' && css.containerAnimated,
           'likec4-element-node'
         ])}
         key={`${viewId}:element:${id}`}
@@ -220,7 +258,7 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
         data-animate-target=""
         initial={false}
         variants={VariantsRoot}
-        animate={(isHovered && !dragging && !isInActiveOverlay) ? (animateVariants ?? animate) : animate}
+        animate={animateVariant}
         tabIndex={-1}
         {...(isInteractive && {
           onTapStart: animateHandlers.onTapStart,
@@ -266,23 +304,13 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
           </Box>
         </Box>
         {/* {isHovercards && element.links && <ElementLink element={element} />} */}
-        {isNavigable && (
-          <ActionIcon
-            component={m.div}
-            variants={VariantsNavigate}
-            data-animate-target="navigate"
-            className={clsx('nodrag nopan', css.navigateBtn)}
-            radius="md"
-            style={{ zIndex: 100 }}
-            role="button"
-            onClick={onNavigateTo}
-            onDoubleClick={stopPropagation}
-            {...isInteractive && animateHandlers}
-          >
-            <IconZoomScan style={{ width: '75%' }} />
-          </ActionIcon>
-        )}
-        {enableElementDetails && (
+        <BottomButtons
+          keyPrefix={`${viewId}:element:${id}:`}
+          onNavigateTo={isNavigable && onNavigateTo}
+          onOpenRelationships={enableRelationshipBrowser && !!modelRef && onOpenRelationships}
+          {...isInteractive && animateHandlers}
+        />
+        {enableElementDetails && !!modelRef && (
           <Tooltip
             fz="xs"
             color="dark"
@@ -291,6 +319,7 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
             offset={2}
             openDelay={600}>
             <ActionIcon
+              key="details"
               component={m.div}
               variants={VariantsDetailsBtn}
               data-animate-target="details"
@@ -313,37 +342,69 @@ 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} />
-//   }
+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
+  }
 
-//   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>
-//   )
-// }
+  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

@@ -141,7 +141,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({
@@ -338,6 +339,56 @@ export const shapeSvg = style({
   }
 })
 
+export const bottomButtonsContainer = style({
+  zIndex: 100,
+  position: 'absolute',
+  left: 0,
+  width: '100%',
+  bottom: 2,
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'nowrap',
+  alignItems: 'center',
+  gap: 2,
+  justifyContent: 'center',
+  pointerEvents: 'none',
+  selectors: {
+    [`:where([data-likec4-shape='browser']) &`]: {
+      bottom: 4
+    }
+  }
+})
+
+//   --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%);
+// }
+
+// <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
+// })
+
 const btn = style({
   pointerEvents: 'all',
   color: vars.element.loContrast,
@@ -354,16 +405,7 @@ const btn = style({
   }
 })
 
-export const navigateBtn = style([btn, {
-  position: 'absolute',
-  left: '50%',
-  bottom: 0,
-  selectors: {
-    [`:where([data-likec4-shape='browser']) &`]: {
-      bottom: 4
-    }
-  }
-}])
+export const navigateBtn = style([btn, {}])
 
 export const detailsBtn = style([btn, {
   position: 'absolute',

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