@likec4/diagram 1.16.0 → 1.17.1

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

@@ -1,21 +1,20 @@
-import { type DiagramNode, type ThemeColor } from '@likec4/core'
-import { ActionIcon, Text as MantineText, Tooltip } from '@mantine/core'
+import { type ThemeColor } from '@likec4/core'
+import { ActionIcon, Box, Group, Text as MantineText, Tooltip } from '@mantine/core'
 import { useDebouncedValue } from '@mantine/hooks'
-import { IconTransform, 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 { memo, useCallback, useState } from 'react'
+import React, { memo, useCallback, useState } from 'react'
 import { isNumber, isTruthy } from 'remeda'
 import { useDiagramState } from '../../../hooks/useDiagramState'
-import type { ElementIconRenderer } from '../../../LikeC4Diagram.props'
 import type { ElementXYFlowNode } from '../../types'
 import { stopPropagation, toDomPrecision } from '../../utils'
+import { ElementIcon } from '../shared/ElementIcon'
 import { ElementToolbar } from '../shared/Toolbar'
 import { useFramerAnimateVariants } from '../use-animate-variants'
 import * as css from './element.css'
-import { ElementLink } from './ElementLink'
 import { ElementShapeSvg, SelectedIndicator } from './ElementShapeSvg'
 
 const Text = MantineText.withProps({
@@ -32,9 +31,9 @@ const VariantsRoot = {
     transition: isNumber(scale) && scale > selectedScale
       ? {
         delay: 0.1,
-        delayChildren: 0.06,
-        staggerChildren: 0.07,
-        staggerDirection: -1
+        delayChildren: 0.06
+        // staggerChildren: 0.07,
+        // staggerDirection: -1
       }
       : {}
   }),
@@ -46,8 +45,7 @@ const VariantsRoot = {
     transition: !isNumber(scale) || (scale >= 1 && scale < 1.06)
       ? {
         // delay: 0.09,
-        delayChildren: 0.07,
-        staggerChildren: 0.1
+        delayChildren: 0.08
       }
       : {}
   }),
@@ -56,21 +54,24 @@ const VariantsRoot = {
   }
 } satisfies Variants
 
-const VariantsNavigate = {
+const VariantsNavigateBtn = {
   idle: {
     '--ai-bg': 'var(--ai-bg-idle)',
     scale: 1,
-    opacity: 0.75,
-    translateX: '-50%',
-    originY: 0.1
+    opacity: 0.5,
+    originY: 0.5
   },
   selected: {},
   hovered: {
-    display: 'block',
     '--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
   },
@@ -78,54 +79,37 @@ const VariantsNavigate = {
     scale: 1.15
   }
 } satisfies Variants
-VariantsNavigate['selected'] = VariantsNavigate['hovered']
 
-/**
- * Variants for the relationships button (when Navigate button is visible)
- */
-const VariantsRelationsBtn = {
+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,
-    originX: 0.25,
-    originY: 0.1,
-    translateX: -8,
-    transitionEnd: {
-      display: 'none'
-    }
+    opacity: 0.5
   },
   selected: {},
   hovered: {
-    display: 'block',
-    '--ai-bg': 'var(--ai-bg-hover)',
-    scale: 1.25,
-    opacity: 1,
-    translateX: 0
+    scale: 1.2,
+    opacity: 0.7
   },
-  'hovered:navigate': {},
-  'hovered:relations': {
-    scale: 1.42
+  'hovered:details': {
+    scale: 1.42,
+    opacity: 1
   },
-  'tap:relations': {
+  'tap:details': {
     scale: 1.15
   }
 } satisfies Variants
-VariantsRelationsBtn['selected'] = VariantsRelationsBtn['hovered']
-
-/**
- * Variants for the relationships button (when Navigate button is not visible)
- */
-const VariantsRelationsBtnSingle = {
-  ...VariantsNavigate,
-  idle: {
-    ...VariantsNavigate.idle,
-    opacity: 0,
-    transitionEnd: {
-      display: 'none'
-    }
-  }
-}
+VariantsDetailsBtn['selected'] = VariantsDetailsBtn['hovered']
 
 type ElementNodeProps = NodeProps<ElementXYFlowNode>
 const isEqualProps = (prev: ElementNodeProps, next: ElementNodeProps) => (
@@ -148,33 +132,36 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
   height
 }) {
   const {
+    viewId,
     isEditable,
     isHovered,
     isDimmed,
-    hasOnNavigateTo,
-    isHovercards,
+    isNavigable,
     isInteractive,
-    enableRelationshipsMode,
+    enableElementDetails,
+    enableRelationshipBrowser,
     triggerOnNavigateTo,
     openOverlay,
+    isInActiveOverlay,
     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.enableRelationshipsBrowser
+    isInteractive: s.nodesDraggable || s.nodesSelectable || s.enableElementDetails || s.enableRelationshipBrowser
       || (!!s.onNavigateTo && !!element.navigateTo),
-    isHovercards: s.showElementLinks,
-    hasOnNavigateTo: !!s.onNavigateTo,
-    enableRelationshipsMode: s.enableRelationshipsBrowser,
+    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
   }))
-
-  const isNavigable = hasOnNavigateTo && !!element.navigateTo
-
-  const _isToolbarVisible = isEditable && (isHovered || (import.meta.env.DEV && selected))
+  // 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)
@@ -184,6 +171,9 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
 
   let animate: keyof typeof VariantsRoot
   switch (true) {
+    case isInActiveOverlay:
+      animate = 'idle'
+      break
     case dragging && selected:
       animate = 'selected'
       break
@@ -202,6 +192,8 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
 
   const elementIcon = ElementIcon({
     element,
+    viewId,
+    className: css.elementIcon,
     renderIcon
   })
 
@@ -212,7 +204,12 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
     triggerOnNavigateTo(id, e)
   }, [triggerOnNavigateTo, id])
 
-  const onBrowseRelations = useCallback((e: React.MouseEvent) => {
+  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])
@@ -226,21 +223,23 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
           onColorPreview={setPreviewColor}
         />
       )}
-      <m.div
-        id={id}
+      <Box
+        component={m.div}
         className={clsx([
           css.container,
           isDimmed && css.dimmed,
           animate !== 'idle' && css.containerAnimated,
           'likec4-element-node'
         ])}
+        key={`${viewId}:element:${id}`}
+        layoutId={`${viewId}:element:${id}`}
         data-hovered={!dragging && isHovered}
         data-likec4-color={previewColor ?? element.color}
         data-likec4-shape={element.shape}
         data-animate-target=""
-        variants={VariantsRoot}
         initial={false}
-        animate={(isHovered && !dragging) ? (animateVariants ?? animate) : animate}
+        variants={VariantsRoot}
+        animate={(isHovered && !dragging && !isInActiveOverlay) ? (animateVariants ?? animate) : animate}
         tabIndex={-1}
         {...(isInteractive && {
           onTapStart: animateHandlers.onTapStart,
@@ -248,13 +247,15 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
           onTapCancel: animateHandlers.onTapCancel
         })}
       >
-        <svg className={clsx(css.cssShapeSvg)} viewBox={`0 0 ${w} ${h}`} width={w} height={h}>
+        <svg
+          className={clsx(css.shapeSvg)}
+          viewBox={`0 0 ${w} ${h}`}>
           <g className={css.indicator}>
             <SelectedIndicator shape={element.shape} w={w} h={h} />
           </g>
           <ElementShapeSvg shape={element.shape} w={w} h={h} />
         </svg>
-        <div
+        <Box
           className={clsx(
             css.elementDataContainer,
             isTruthy(elementIcon) && css.hasIcon,
@@ -262,10 +263,15 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
           )}
         >
           {elementIcon}
-          <div className={clsx(css.elementTextData, 'likec4-element-main-props')}>
-            <Text className={clsx(css.title, 'likec4-element-title')} lineClamp={3}>
+          <Box className={clsx(css.elementTextData, 'likec4-element-main-props')}>
+            <Text
+              component={m.div}
+              key={`${viewId}:element:title:${id}`}
+              layoutId={`${viewId}:element:title:${id}`}
+              className={clsx(css.title, 'likec4-element-title')}>
               {element.title}
             </Text>
+
             {element.technology && (
               <Text className={clsx(css.technology, 'likec4-element-technology')}>
                 {element.technology}
@@ -276,80 +282,106 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
                 {element.description}
               </Text>
             )}
-          </div>
-        </div>
-        {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 stroke={1.8} style={{ width: '75%' }} />
-          </ActionIcon>
+          </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}
+                {...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}
+                {...isInteractive && animateHandlers}
+              >
+                <IconZoomScan style={{ width: '75%' }} />
+              </ActionIcon>
+            )}
+          </Group>
         )}
-        {enableRelationshipsMode && (
-          <Tooltip fz="xs" color="dark" label="Browse relationships" withinPortal={false} openDelay={600}>
+        {enableElementDetails && (
+          <Tooltip
+            fz="xs"
+            color="dark"
+            label="Open details"
+            withinPortal={false}
+            offset={2}
+            openDelay={600}>
             <ActionIcon
               component={m.div}
-              // Is is a second button, so we need to use a different variant
-              variants={isNavigable ? VariantsRelationsBtn : VariantsRelationsBtnSingle}
-              data-animate-target={isNavigable ? 'relations' : 'navigate'}
-              className={clsx('nodrag nopan', css.navigateBtn)}
+              variants={VariantsDetailsBtn}
+              data-animate-target="details"
+              className={clsx('nodrag nopan', css.detailsBtn)}
               radius="md"
-              style={{
-                left: isNavigable ? 'calc(50% + 28px)' : '50%',
-                zIndex: 99
-              }}
+              style={{ zIndex: 100 }}
               role="button"
-              onClick={onBrowseRelations}
+              onClick={onOpenDetails}
               onDoubleClick={stopPropagation}
               {...isInteractive && animateHandlers}
             >
-              <IconTransform stroke={1.8} style={{ width: '67%' }} />
+              <IconId stroke={1.8} style={{ width: '75%' }} />
             </ActionIcon>
           </Tooltip>
         )}
-      </m.div>
+      </Box>
       <Handle type="target" position={Position.Top} className={css.handleCenter} />
       <Handle type="source" position={Position.Top} className={css.handleCenter} />
     </>
   )
 }, isEqualProps)
 
-const ElementIcon = (
-  { element, renderIcon: RenderIcon }: { element: DiagramNode; renderIcon: ElementIconRenderer | null }
-) => {
-  if (!element.icon) {
-    return null
-  }
-  if (element.icon.startsWith('http://') || element.icon.startsWith('https://')) {
-    return (
-      <div className={clsx(css.elementIcon, 'likec4-element-icon')}>
-        <img src={element.icon} alt={element.title} />
-      </div>
-    )
-  }
-  const icon = RenderIcon ? <RenderIcon node={element} /> : null
-  if (!icon) {
-    return null
-  }
-  return (
-    <div
-      className={clsx(
-        css.elementIcon,
-        'likec4-element-icon'
-      )}
-      data-likec4-icon={element.icon}
-    >
-      {icon}
-    </div>
-  )
-}
+// 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

@@ -5,11 +5,13 @@ import { mantine, vars } from '../../../theme-vars'
 export const stokeFillMix = createVar('stroke-fill-mix')
 
 export const container = style({
+  position: 'absolute',
+  top: 0,
+  left: 0,
   width: '100%',
   height: '100%',
   padding: 0,
   margin: 0,
-  flex: '1',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -24,6 +26,7 @@ export const container = style({
       willChange: 'transform'
     }
   },
+  // Catch pointer below the element
   ':after': {
     content: ' ',
     position: 'absolute',
@@ -258,12 +261,7 @@ export const elementIcon = style({
   alignItems: 'center',
   justifyContent: 'center',
   mixBlendMode: 'hard-light',
-  alignSelf: 'flex-start',
-  selectors: {
-    '&[data-likec4-icon^="azure:"]': {
-      mixBlendMode: 'normal'
-    }
-  }
+  alignSelf: 'flex-start'
 })
 globalStyle(`${elementIcon} svg, ${elementIcon} img`, {
   width: '100%',
@@ -282,7 +280,7 @@ globalStyle(`${elementIcon} img`, {
 
 const filterShadow = createVar('filter-shadow')
 
-export const cssShapeSvgMultiple = style({
+export const shapeSvgMultiple = style({
   top: 0,
   left: 0,
   position: 'absolute',
@@ -310,10 +308,12 @@ export const cssShapeSvgMultiple = style({
     }
   }
 })
-export const cssShapeSvg = style({
+export const shapeSvg = style({
   top: 0,
   left: 0,
   position: 'absolute',
+  width: '100%',
+  height: '100%',
   pointerEvents: 'none',
   fill: vars.element.fill,
   stroke: vars.element.stroke,
@@ -338,12 +338,8 @@ export const cssShapeSvg = style({
   }
 })
 
-export const navigateBtn = style({
-  zIndex: 'calc(var(--layer-overlays, 1) + 1)',
-  position: 'absolute',
+const btn = style({
   pointerEvents: 'all',
-  left: '50%',
-  bottom: 0,
   color: vars.element.loContrast,
   cursor: 'pointer',
   backgroundColor: 'var(--ai-bg)',
@@ -353,12 +349,45 @@ export const navigateBtn = style({
     '--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({
+  zIndex: 100,
+  position: 'absolute',
+  left: '50%',
+  bottom: 2,
+  transform: 'translate(-50%, 0%)',
+  gap: 0,
   selectors: {
     [`:where([data-likec4-shape='browser']) &`]: {
       bottom: 4
     }
-  },
-  ':hover': {
-    boxShadow: mantine.shadows.md
   }
 })
+globalStyle(`:where(.react-flow__node:hover) ${navigateBtnBox}`, {
+  transitionDelay: '20ms',
+  gap: 16
+})
+
+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
+    }
+  }
+}])

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

@@ -0,0 +1,43 @@
+import type { DiagramNode } from '@likec4/core'
+import clsx from 'clsx'
+import { m } from 'framer-motion'
+import type { ElementIconRenderer } from '../../../LikeC4Diagram.props'
+
+export const ElementIcon = ({
+  element,
+  viewId,
+  className,
+  renderIcon: RenderIcon
+}: {
+  element: DiagramNode
+  viewId: string
+  className: 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(
+        className,
+        'likec4-element-icon'
+      )}
+      data-likec4-icon={element.icon}
+    >
+      {icon}
+    </m.div>
+  )
+}

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

@@ -90,10 +90,10 @@ export function CompoundToolbar({
   const diagramApi = useDiagramStoreApi()
   const {
     hasGoToSource,
-    enableRelationshipsBrowser
+    enableRelationshipBrowser
   } = useDiagramState(s => ({
     hasGoToSource: !!s.onOpenSourceElement,
-    enableRelationshipsBrowser: s.enableRelationshipsBrowser
+    enableRelationshipBrowser: s.enableRelationshipBrowser
   }))
 
   const onChange: OnStyleChange = (style) => {
@@ -118,7 +118,7 @@ export function CompoundToolbar({
         onChange={onChange}
       />
       {hasGoToSource && <GoToSourceButton elementId={element.id} />}
-      {enableRelationshipsBrowser && <BrowseRelationshipsButton elementId={element.id} />}
+      {enableRelationshipBrowser && <BrowseRelationshipsButton elementId={element.id} />}
     </Toolbar>
   )
 }
@@ -160,10 +160,10 @@ export function ElementToolbar({
   const diagramApi = useDiagramStoreApi()
   const {
     hasGoToSource,
-    enableRelationshipsBrowser
+    enableRelationshipBrowser
   } = useDiagramState(s => ({
     hasGoToSource: !!s.onOpenSourceElement,
-    enableRelationshipsBrowser: s.enableRelationshipsBrowser
+    enableRelationshipBrowser: s.enableRelationshipBrowser
   }))
   const portalProps = useMantinePortalProps()
 
@@ -235,7 +235,7 @@ export function ElementToolbar({
         position="right-end"
       />
       {hasGoToSource && <GoToSourceButton elementId={element.id} />}
-      {enableRelationshipsBrowser && <BrowseRelationshipsButton elementId={element.id} />}
+      {enableRelationshipBrowser && <BrowseRelationshipsButton elementId={element.id} />}
     </Toolbar>
   )
 }