@likec4/diagram 1.16.0 → 1.17.0

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

@@ -1,7 +1,7 @@
 import { type ThemeColor } from '@likec4/core'
 import { ActionIcon, Box, Text, 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 { assignInlineVars } from '@vanilla-extract/dynamic'
 import { Handle, type NodeProps, Position } from '@xyflow/react'
 import clsx from 'clsx'
@@ -12,6 +12,7 @@ import { clamp, isNumber } from 'remeda'
 import { useDiagramState } from '../../../hooks/useDiagramState'
 import type { CompoundXYFlowNode } from '../../types'
 import { stopPropagation } from '../../utils'
+import { ElementIcon } from '../shared/ElementIcon'
 import { CompoundToolbar } from '../shared/Toolbar'
 import { useFramerAnimateVariants } from '../use-animate-variants'
 import * as css from './CompoundNode.css'
@@ -29,30 +30,14 @@ const isEqualProps = (prev: CompoundNodeProps, next: CompoundNodeProps) => (
 )
 
 const VariantsRoot = {
-  idle: (_, { translateY }) => ({
-    translateX: 0,
-    translateY: 0,
-    transition: isNumber(translateY) && translateY < 0
-      ? {
-        delay: 0.09,
-        delayChildren: 0.1,
-        staggerChildren: 0.08,
-        staggerDirection: -1
-      }
-      : {}
-  }),
+  idle: {
+    transition: {
+      delayChildren: .1
+      // stagger
+    }
+  },
   selected: {},
-  hovered: (_, { translateY }) => ({
-    translateX: -1,
-    translateY: -1,
-    transition: !isNumber(translateY) || translateY === 0
-      ? {
-        delay: 0.08,
-        delayChildren: 0.09,
-        staggerChildren: 0.15
-      }
-      : {}
-  }),
+  hovered: {},
   tap: {}
 } satisfies Variants
 
@@ -61,76 +46,60 @@ const VariantsNavigate = {
     '--ai-bg': 'var(--ai-bg-idle)',
     scale: 1,
     opacity: 0.8,
+    originX: 1,
+    originY: 0.25,
     translateX: 0,
     translateY: 0
   },
+  selected: {},
   hovered: {
-    display: 'block',
     '--ai-bg': 'var(--ai-bg-hover)',
-    scale: 1.35,
+    scale: 1.25,
     opacity: 1,
-    translateX: -6,
-    translateY: 2
+    translateX: -1
   },
   'hovered:navigate': {
-    scale: 1.4
+    scale: 1.42
   },
   'hovered:relations': {},
   'tap:navigate': {
     scale: 1.15
   }
 } satisfies Variants
+VariantsNavigate['selected'] = VariantsNavigate['hovered']
 
-const VariantsRelationsBtn = {
+const VariantsDetailsBtn = {
   idle: {
     '--ai-bg': 'var(--ai-bg-idle)',
     scale: 1,
-    opacity: 0,
-    translateX: 2,
-    translateY: -8,
-    transitionEnd: {
-      display: 'none'
-    }
+    opacity: 0.3
   },
+  selected: {},
   hovered: {
-    display: 'block',
-    '--ai-bg': 'var(--ai-bg-hover)',
     scale: 1.2,
-    opacity: 1,
-    translateX: -5,
-    translateY: 2
+    opacity: 0.6
   },
-  'hovered:relations': {
-    scale: 1.42
+  'hovered:details': {
+    scale: 1.42,
+    opacity: 1
   },
-  'tap:relations': {
+  'tap:details': {
     scale: 1.15
   }
 } satisfies Variants
+VariantsDetailsBtn['selected'] = VariantsDetailsBtn['hovered']
 
-/**
- * Variants for the relationships button (when Navigate button is not visible)
- */
-const VariantsRelationsBtnSingle = {
-  ...VariantsNavigate,
-  idle: {
-    ...VariantsNavigate.idle,
-    opacity: 0,
-    transitionEnd: {
-      display: 'none'
+export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>((
+  {
+    id,
+    selected = false,
+    dragging = false,
+    data: {
+      isViewGroup,
+      element
     }
   }
-}
-
-export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function CompoundNode({
-  id,
-  selected = false,
-  dragging = false,
-  data: {
-    isViewGroup,
-    element
-  }
-}) {
+) => {
   const { depth, style, color } = element
   const isNotViewGroup = !isViewGroup
   const opacity = clamp((style.opacity ?? 100) / 100, {
@@ -143,29 +112,30 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
   })
 
   const {
+    viewId,
     triggerOnNavigateTo,
     openOverlay,
     isEditable,
     isHovered,
     isDimmed,
     isInteractive,
-    hasOnNavigateTo,
-    enableRelationshipsMode
+    isNavigable,
+    renderIcon,
+    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.enableRelationshipsBrowser
+    isInteractive: s.nodesDraggable || s.nodesSelectable || s.enableElementDetails
       || (!!s.onNavigateTo && !!element.navigateTo),
-    hasOnNavigateTo: !!s.onNavigateTo,
-    enableRelationshipsMode: s.enableRelationshipsBrowser
+    // 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
   }))
-  // If this is a view group, we don't want to show the navigate button
-  const isNavigable = isNotViewGroup && !!element.navigateTo && hasOnNavigateTo
-  const hasRelationshipsBrowser = isNotViewGroup && enableRelationshipsMode
-
   const _isToolbarVisible = isNotViewGroup && isEditable && (isHovered || (import.meta.env.DEV && selected))
   const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, _isToolbarVisible ? 500 : 300)
 
@@ -196,125 +166,139 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
     triggerOnNavigateTo(id, e)
   }, [triggerOnNavigateTo, id])
 
-  const onBrowseRelations = useCallback((e: React.MouseEvent) => {
+  const onOpenDetails = useCallback((e: React.MouseEvent) => {
     e.stopPropagation()
-    openOverlay({ relationshipsOf: element.id })
+    openOverlay({ elementDetails: element.id })
   }, [openOverlay, element.id])
 
+  const elementIcon = ElementIcon({
+    element,
+    viewId,
+    className: css.elementIcon,
+    renderIcon
+  })
+
   return (
     <>
       {isToolbarVisible && (
         <CompoundToolbar
-          isVisible={isToolbarVisible}
+          isVisible
           element={element}
           align="start"
           onColorPreview={setPreviewColor} />
       )}
       <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
-        )}
-        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
-            x={0}
-            y={0}
-            width={'100%'}
-            height={'100%'}
-            rx={6}
-          />
-        </svg>
-        <div
+        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.compoundBody,
-            opacity < 1 && css.transparent,
-            'likec4-compound'
+            css.container,
+            'likec4-compound-node',
+            opacity < 1 && 'likec4-compound-transparent',
+            isDimmed && css.dimmed
           )}
-          style={{
-            ...(opacity < 1 && {
-              ...assignInlineVars({
-                [css.varBorderTransparency]: `${borderTransparency}%`,
-                [css.varOpacity]: opacity.toFixed(2)
-              }),
-              borderStyle: style.border ?? 'dashed'
-            })
+          mod={{
+            'animate-target': '',
+            'compound-depth': depth,
+            'likec4-color': previewColor ?? color,
+            hovered: isHovered
           }}
+          tabIndex={-1}
+          {...(isInteractive && {
+            onTapStart: animateHandlers.onTapStart,
+            onTap: animateHandlers.onTap,
+            onTapCancel: animateHandlers.onTapCancel
+          })}
         >
-          <Text
-            component="div"
+          <svg className={css.indicator}>
+            <rect
+              x={0}
+              y={0}
+              width={'100%'}
+              height={'100%'}
+              rx={6}
+            />
+          </svg>
+          <Box
             className={clsx(
-              css.title,
-              (isNavigable || hasRelationshipsBrowser) && css.titleWithNavigation,
-              'likec4-compound-title'
-            )}>
-            {element.title}
-          </Text>
-        </div>
-        {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}
+              css.compoundBody,
+              opacity < 1 && css.transparent,
+              'likec4-compound'
+            )}
+            style={{
+              ...(opacity < 1 && {
+                ...assignInlineVars({
+                  [css.varBorderTransparency]: `${borderTransparency}%`,
+                  [css.varOpacity]: opacity.toFixed(2)
+                }),
+                borderStyle: style.border ?? 'dashed'
+              })
+            }}
           >
-            <IconZoomScan stroke={1.8} style={{ width: '75%' }} />
-          </ActionIcon>
-        )}
-        {hasRelationshipsBrowser && (
-          <Tooltip
-            fz="xs"
-            color="dark"
-            label="Browse relationships"
-            withinPortal={false}
-            openDelay={600}
-            position="right">
+            <Box
+              className={clsx(
+                css.compoundTitle,
+                isNavigable && css.withNavigation,
+                'likec4-compound-title'
+              )}>
+              {elementIcon}
+              <Text
+                component={m.div}
+                key={`${viewId}:element:title:${id}`}
+                layoutId={`${viewId}:element:title:${id}`}
+                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>
+              )}
+            </Box>
+          </Box>
+          {isNavigable && (
             <ActionIcon
+              key={'navigate'}
               component={m.div}
-              // Is is a second button, so we need to use a different variant
-              key={isNavigable ? 'relations' : 'relations-as-navigate'}
-              variants={isNavigable ? VariantsRelationsBtn : VariantsRelationsBtnSingle}
-              data-animate-target={isNavigable ? 'relations' : 'navigate'}
+              variants={VariantsNavigate}
+              data-animate-target="navigate"
               className={clsx('nodrag nopan', css.navigateBtn)}
               radius="md"
-              style={{
-                top: isNavigable ? 50 : undefined,
-                zIndex: 99
-              }}
+              style={{ zIndex: 100 }}
+              onClick={onNavigateTo}
               role="button"
-              onClick={onBrowseRelations}
               onDoubleClick={stopPropagation}
               {...isInteractive && animateHandlers}
             >
-              <IconTransform stroke={1.8} style={{ width: '66%' }} />
+              <IconZoomScan style={{ width: '75%' }} />
             </ActionIcon>
-          </Tooltip>
-        )}
+          )}
+        </Box>
       </Box>
       <Handle type="target" position={Position.Top} className={css.nodeHandlerInCenter} />
       <Handle type="source" position={Position.Top} className={css.nodeHandlerInCenter} />

package/src/xyflow/nodes/element/ElementDetails.css.ts

@@ -0,0 +1,101 @@
+import { createVar, globalStyle, style } from '@vanilla-extract/css'
+import { mantine, vars, whereDark, whereLight } from '../../../theme-vars'
+
+const bg = createVar('bg')
+
+export const container = style({
+  backgroundColor: mantine.colors.body,
+  pointerEvents: 'all',
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  zIndex: 100,
+  vars: {
+    [bg]: `linear-gradient(180deg, ${vars.element.fill}, ${vars.element.fill} 3px, transparent 3px)`
+  },
+  backgroundImage: bg,
+  selectors: {
+    [`${whereDark} &`]: {
+      backgroundColor: mantine.colors.dark[6],
+      vars: {
+        [bg]: `
+        linear-gradient(180deg, color-mix(in srgb, ${vars.element.fill} 10%, transparent), transparent 60px),
+        linear-gradient(180deg, ${vars.element.fill}, ${vars.element.fill} 3px, transparent 3px)
+      `
+      }
+    }
+  }
+})
+
+export const noPointerEvents = style({
+  pointerEvents: 'none'
+})
+
+export const fqn = style({
+  display: 'inline-block',
+  fontSize: mantine.fontSizes.xs,
+  fontWeight: 500,
+  whiteSpace: 'nowrap',
+  padding: '3px 5px',
+  borderRadius: 2,
+  background: `color-mix(in srgb , ${vars.element.fill},  transparent 25%)`,
+  lineHeight: 1.2,
+  color: vars.element.hiContrast,
+  selectors: {
+    [`${whereDark} &`]: {
+      // background: `color-mix(in srgb , ${vars.element.fill},  transparent 45%)`,
+      // color: vars.element.loContrast
+    }
+  }
+})
+
+export const edgeNum = style({
+  display: 'inline-block',
+  fontSize: mantine.fontSizes.sm,
+  fontWeight: 600,
+  padding: '1px 5px',
+  minWidth: 24,
+  textAlign: 'center',
+  borderRadius: mantine.radius.sm,
+  background: mantine.colors.dark[7],
+  color: mantine.colors.defaultColor,
+  selectors: {
+    [`${whereLight} &`]: {
+      background: mantine.colors.gray[4],
+      color: mantine.colors.dark[6]
+    },
+    [`&[data-zero]`]: {
+      color: mantine.colors.dimmed
+    },
+    [`${whereLight} &[data-zero]`]: {
+      background: mantine.colors.gray[3]
+    },
+    [`&[data-missing]`]: {
+      color: mantine.colors.orange[4],
+      background: `color-mix(in srgb, ${mantine.colors.orange[8]} 20%, transparent)`
+    },
+    [`${whereLight} &[data-missing]`]: {
+      color: mantine.colors.orange[8]
+    }
+  }
+})
+
+export const viewButton = style({
+  paddingLeft: 2,
+  height: 'auto'
+})
+
+globalStyle(`${viewButton} .mantine-Button-label`, {
+  color: mantine.colors.text,
+  fontWeight: 500,
+  flexDirection: 'column',
+  alignItems: 'flex-start'
+})
+globalStyle(`${viewButton} .tabler-icon`, {
+  width: '75%',
+  opacity: 0.75
+})
+
+globalStyle(`${whereLight} ${viewButton} .mantine-Button-label`, {
+  color: mantine.colors.dark[3]
+})