@likec4/diagram 1.12.1 → 1.13.0

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

@@ -1,103 +1,140 @@
-import { defaultTheme, type DiagramNode, type ThemeColor } from '@likec4/core'
-import { Text as MantineText } from '@mantine/core'
+import { type DiagramNode, type ThemeColor } from '@likec4/core'
+import { ActionIcon, Text as MantineText, Tooltip } from '@mantine/core'
 import { useDebouncedValue } from '@mantine/hooks'
+import { 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, useState } from 'react'
-import { isNumber, isTruthy, keys } from 'remeda'
-import { type DiagramStoreApi, useDiagramState, useDiagramStoreApi } from '../../../hooks/useDiagramState'
+import { 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 { toDomPrecision } from '../../utils'
-import { NavigateToBtn } from '../shared/NavigateToBtn'
+import { stopPropagation, toDomPrecision } from '../../utils'
 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 {
-  primary,
-  secondary,
-  muted,
-  ...otherColors
-} = defaultTheme.elements
-
-export const themedColors = [
-  { key: 'primary', value: primary.fill },
-  { key: 'secondary', value: secondary.fill },
-  { key: 'muted', value: muted.fill }
-] satisfies Array<{ key: ThemeColor; value: string }>
-
-export const colors = keys(otherColors).map(key => ({
-  key,
-  value: defaultTheme.elements[key].fill
-}))
-
-export type ThemeColorKey = typeof themedColors[0]['key']
-export type ColorKey = typeof colors[0]['key']
-
 const Text = MantineText.withProps({
   component: 'div'
 })
 
-type ElementNodeProps = NodeProps<ElementXYFlowNode>
-
 const selectedScale = 1.015
+
 // Frame-motion variants
-const variants = {
+
+const VariantsRoot = {
   idle: (_, { scale }) => ({
     scale: 1,
-    transition: {
-      delay: isNumber(scale) && scale > selectedScale ? 0.09 : 0
-    }
-  }),
-  selected: (_, { scale }) => ({
-    scale: selectedScale,
-    transition: {
-      delay: isNumber(scale) && scale > selectedScale ? 0.09 : 0
-    }
+    transition: isNumber(scale) && scale > selectedScale
+      ? {
+        delay: 0.1,
+        delayChildren: 0.06,
+        staggerChildren: 0.07,
+        staggerDirection: -1
+      }
+      : {}
   }),
-  // dimmed: {
-  //   filter: 'brightness(0.5)',
-  //   transition: {
-  //     duration: 0.8,
-  //     ease: 'easeInOut',
-  //   }
-  // },
-  // dragging: {
-  //   scale: selectedScale
-  // },
-  // hovered: {
-  //   scale: 1.08
-  // },
-  // hover: (_, {scale}) => isNumber(scale) && scale < 1.02 ? ({
-  //   scale: 1.08,
-  // }) : ({
-  //   scale: 1.08,
-  //   transition: {
-  //     delay: 1
-  //   }
-  // }),
-  hovered: {
-    scale: 1.06
+  selected: {
+    scale: selectedScale
   },
+  hovered: (_, { scale }) => ({
+    scale: 1.06,
+    transition: !isNumber(scale) || (scale >= 1 && scale < 1.06)
+      ? {
+        // delay: 0.09,
+        delayChildren: 0.07,
+        staggerChildren: 0.1
+      }
+      : {}
+  }),
   tap: {
     scale: 0.975
   }
-  // tap: {
-  //   scale: 0.9
-  // }
 } satisfies Variants
 
+const VariantsNavigate = {
+  idle: {
+    '--ai-bg': 'var(--ai-bg-idle)',
+    scale: 1,
+    opacity: 0.75,
+    translateX: '-50%',
+    originY: 0.1
+  },
+  selected: {},
+  hovered: {
+    display: 'block',
+    '--ai-bg': 'var(--ai-bg-hover)',
+    scale: 1.35,
+    opacity: 1
+  },
+  'hovered:navigate': {
+    scale: 1.42
+  },
+  'tap:navigate': {
+    scale: 1.15
+  }
+} satisfies Variants
+VariantsNavigate['selected'] = VariantsNavigate['hovered']
+
+/**
+ * Variants for the relationships button (when Navigate button is visible)
+ */
+const VariantsRelationsBtn = {
+  idle: {
+    '--ai-bg': 'var(--ai-bg-idle)',
+    scale: 1,
+    opacity: 0,
+    originX: 0.25,
+    originY: 0.1,
+    translateX: -8,
+    transitionEnd: {
+      display: 'none'
+    }
+  },
+  selected: {},
+  hovered: {
+    display: 'block',
+    '--ai-bg': 'var(--ai-bg-hover)',
+    scale: 1.25,
+    opacity: 1,
+    translateX: 0
+  },
+  'hovered:navigate': {},
+  'hovered:relations': {
+    scale: 1.42
+  },
+  'tap:relations': {
+    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'
+    }
+  }
+}
+
+type ElementNodeProps = NodeProps<ElementXYFlowNode>
 const isEqualProps = (prev: ElementNodeProps, next: ElementNodeProps) => (
   prev.id === next.id
   && eq(prev.selected ?? false, next.selected ?? false)
   && eq(prev.dragging ?? false, next.dragging ?? false)
-  // && eq(prev.draggable ?? false, next.draggable ?? false)
   && eq(prev.width ?? 0, next.width ?? 0)
   && eq(prev.height ?? 0, next.height ?? 0)
-  && eq(prev.data.element, next.data.element)
+  && eq(prev.data, next.data)
 )
 
 export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
@@ -106,32 +143,46 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
     element
   },
   dragging,
-  // draggable = false,
   selected = false,
   width,
   height
 }) {
-  const store = useDiagramStoreApi()
-  const { isEditable, isHovered, isDimmed, hasOnNavigateTo, isHovercards, isInteractive } = useDiagramState(s => ({
+  const {
+    isEditable,
+    isHovered,
+    isDimmed,
+    hasOnNavigateTo,
+    isHovercards,
+    isInteractive,
+    enableRelationshipsMode,
+    triggerOnNavigateTo,
+    openOverlay,
+    renderIcon
+  } = useDiagramState(s => ({
     isEditable: s.readonly !== true,
     isHovered: s.hoveredNodeId === id,
     isDimmed: s.dimmed.has(id),
-    isInteractive: s.nodesDraggable || s.nodesSelectable || (!!s.onNavigateTo && !!element.navigateTo),
+    isInteractive: s.nodesDraggable || s.nodesSelectable || s.enableRelationshipsBrowser
+      || (!!s.onNavigateTo && !!element.navigateTo),
     isHovercards: s.showElementLinks,
-    hasOnNavigateTo: !!s.onNavigateTo
-    // hasGoToSource: !!s.onOpenSourceElement
+    hasOnNavigateTo: !!s.onNavigateTo,
+    enableRelationshipsMode: s.enableRelationshipsBrowser,
+    triggerOnNavigateTo: s.triggerOnNavigateTo,
+    openOverlay: s.openOverlay,
+    renderIcon: s.renderIcon
   }))
+
   const isNavigable = hasOnNavigateTo && !!element.navigateTo
-  // const isIdle = useIdle(300)
-  // const [isToolbarVisible] = useDebouncedValue(isEditable && (isHovered || (import.meta.env.DEV && selected)), isIdle ? 50 : 350)
-  const _isToolbarVisible = isEditable && (isHovered || (import.meta.env.DEV && selected))
 
+  const _isToolbarVisible = isEditable && (isHovered || (import.meta.env.DEV && selected))
   const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, _isToolbarVisible ? 500 : 300)
 
   const w = toDomPrecision(width ?? element.width)
   const h = toDomPrecision(height ?? element.height)
 
-  let animate: keyof typeof variants = 'idle'
+  const [animateVariants, animateHandlers] = useFramerAnimateVariants()
+
+  let animate: keyof typeof VariantsRoot
   switch (true) {
     case dragging && selected:
       animate = 'selected'
@@ -145,12 +196,27 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
     case selected:
       animate = 'selected'
       break
+    default:
+      animate = 'idle'
   }
 
-  const elementIcon = ElementIcon({ node: element, store })
+  const elementIcon = ElementIcon({
+    element,
+    renderIcon
+  })
 
   const [previewColor, setPreviewColor] = useState<ThemeColor | null>(null)
 
+  const onNavigateTo = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation()
+    triggerOnNavigateTo(id, e)
+  }, [triggerOnNavigateTo, id])
+
+  const onBrowseRelations = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation()
+    openOverlay({ relationshipsOf: element.id })
+  }, [openOverlay, element.id])
+
   return (
     <>
       {isToolbarVisible && (
@@ -160,11 +226,6 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
           onColorPreview={setPreviewColor}
         />
       )}
-      <Handle
-        type="target"
-        position={Position.Top}
-        className={css.handleCenter}
-      />
       <m.div
         id={id}
         className={clsx([
@@ -176,50 +237,22 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
         data-hovered={!dragging && isHovered}
         data-likec4-color={previewColor ?? element.color}
         data-likec4-shape={element.shape}
-        variants={variants}
+        data-animate-target=""
+        variants={VariantsRoot}
         initial={false}
-        animate={animate}
+        animate={(isHovered && !dragging) ? (animateVariants ?? animate) : animate}
         tabIndex={-1}
         {...(isInteractive && {
-          whileTap: dragging ? animate : 'tap'
+          onTapStart: animateHandlers.onTapStart,
+          onTap: animateHandlers.onTap,
+          onTapCancel: animateHandlers.onTapCancel
         })}
       >
-        {
-          /* <svg
-          className={clsx(
-            css.cssShapeSvgMultiple
-          )}
-          viewBox={`0 0 ${w} ${h}`}
-          width={w}
-          height={h}
-        >
-          <ElementShapeSvg
-            shape={element.shape}
-            w={w}
-            h={h}
-          />
-        </svg> */
-        }
-        <svg
-          className={clsx(
-            css.cssShapeSvg
-          )}
-          viewBox={`0 0 ${w} ${h}`}
-          width={w}
-          height={h}
-        >
+        <svg className={clsx(css.cssShapeSvg)} viewBox={`0 0 ${w} ${h}`} width={w} height={h}>
           <g className={css.indicator}>
-            <SelectedIndicator
-              shape={element.shape}
-              w={w}
-              h={h}
-            />
+            <SelectedIndicator shape={element.shape} w={w} h={h} />
           </g>
-          <ElementShapeSvg
-            shape={element.shape}
-            w={w}
-            h={h}
-          />
+          <ElementShapeSvg shape={element.shape} w={w} h={h} />
         </svg>
         <div
           className={clsx(
@@ -230,54 +263,92 @@ 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')}>
+            <Text className={clsx(css.title, 'likec4-element-title')} lineClamp={3}>
               {element.title}
             </Text>
             {element.technology && (
-              <Text
-                className={clsx(css.technology, 'likec4-element-technology')}>
+              <Text className={clsx(css.technology, 'likec4-element-technology')}>
                 {element.technology}
               </Text>
             )}
             {element.description && (
-              <Text
-                className={clsx(css.description, 'likec4-element-description')}>
+              <Text className={clsx(css.description, 'likec4-element-description')} lineClamp={5}>
                 {element.description}
               </Text>
             )}
           </div>
         </div>
         {isHovercards && element.links && <ElementLink element={element} />}
-        {isNavigable && <NavigateToBtn xynodeId={id} className={css.cssNavigateBtn} />}
+        {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>
+        )}
+        {enableRelationshipsMode && (
+          <Tooltip fz="xs" color="dark" label="Browse relationships" withinPortal={false} 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)}
+              radius="md"
+              style={{
+                left: isNavigable ? 'calc(50% + 28px)' : '50%',
+                zIndex: 99
+              }}
+              role="button"
+              onClick={onBrowseRelations}
+              onDoubleClick={stopPropagation}
+              {...isInteractive && animateHandlers}
+            >
+              <IconTransform stroke={1.8} style={{ width: '67%' }} />
+            </ActionIcon>
+          </Tooltip>
+        )}
       </m.div>
-      <Handle
-        type="source"
-        position={Position.Top}
-        className={css.handleCenter}
-      />
+      <Handle type="target" position={Position.Top} className={css.handleCenter} />
+      <Handle type="source" position={Position.Top} className={css.handleCenter} />
     </>
   )
 }, isEqualProps)
 
-const ElementIcon = ({ node, store }: { node: DiagramNode; store: DiagramStoreApi }) => {
-  if (!node.icon) {
+const ElementIcon = (
+  { element, renderIcon: RenderIcon }: { element: DiagramNode; renderIcon: ElementIconRenderer | null }
+) => {
+  if (!element.icon) {
     return null
   }
-  if (node.icon.startsWith('http://') || node.icon.startsWith('https://')) {
+  if (element.icon.startsWith('http://') || element.icon.startsWith('https://')) {
     return (
       <div className={clsx(css.elementIcon, 'likec4-element-icon')}>
-        <img src={node.icon} alt={node.title} />
+        <img src={element.icon} alt={element.title} />
       </div>
     )
   }
-  const RenderIcon = store.getState().renderIcon
-  const icon = RenderIcon ? <RenderIcon node={node} /> : null
+  const icon = RenderIcon ? <RenderIcon node={element} /> : null
   if (!icon) {
     return null
   }
   return (
-    <div className={clsx(css.elementIcon, 'likec4-element-icon')}>
+    <div
+      className={clsx(
+        css.elementIcon,
+        'likec4-element-icon'
+      )}
+      data-likec4-icon={element.icon}
+    >
       {icon}
     </div>
   )

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

@@ -23,6 +23,16 @@ export const container = style({
     '&[data-hovered="true"]': {
       willChange: 'transform'
     }
+  },
+  ':after': {
+    content: ' ',
+    position: 'absolute',
+    top: '100%',
+    left: 0,
+    right: 0,
+    height: 16,
+    background: 'transparent',
+    pointerEvents: 'all'
   }
 })
 
@@ -110,7 +120,7 @@ export const fillElementStroke = style({
 })
 
 export const fillMixStroke = style({
-  fill: stokeFillMix
+  fill: fallbackVar(stokeFillMix, `color-mix(in srgb, ${vars.element.stroke} 90%, ${vars.element.fill})`)
 })
 
 export const hasIcon = style({})
@@ -248,7 +258,12 @@ export const elementIcon = style({
   alignItems: 'center',
   justifyContent: 'center',
   mixBlendMode: 'hard-light',
-  alignSelf: 'flex-start'
+  alignSelf: 'flex-start',
+  selectors: {
+    '&[data-likec4-icon^="azure:"]': {
+      mixBlendMode: 'normal'
+    }
+  }
 })
 globalStyle(`${elementIcon} svg, ${elementIcon} img`, {
   width: '100%',
@@ -323,7 +338,7 @@ export const cssShapeSvg = style({
   }
 })
 
-export const cssNavigateBtn = style({
+export const navigateBtn = style({
   zIndex: 'calc(var(--layer-overlays, 1) + 1)',
   position: 'absolute',
   pointerEvents: 'all',
@@ -331,45 +346,19 @@ export const cssNavigateBtn = style({
   bottom: 0,
   color: vars.element.loContrast,
   cursor: 'pointer',
-  transformOrigin: '50% 65%',
-  opacity: 0.75,
-  transition: 'all 150ms ease-out',
-  transform: 'translate(-50%, 0)',
-  transitionDelay: '0ms',
   backgroundColor: 'var(--ai-bg)',
   'vars': {
-    '--ai-bg': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,
+    '--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})`
   },
   selectors: {
     [`:where([data-likec4-shape='browser']) &`]: {
-      bottom: 3
-    },
-    [`:where(.react-flow__node:not(.dragging) ${container}:hover) &:not(:hover)`]: {
-      boxShadow: mantine.shadows.lg,
-      transform: 'translate(-50%, 0) scale(1.185)',
-      opacity: 1,
-      transitionDelay: '250ms',
-      vars: {
-        '--ai-bg': 'var(--ai-bg-hover)'
-      }
+      bottom: 4
     }
   },
   ':hover': {
-    boxShadow: mantine.shadows.lg,
-    transform: 'translate(-50%, 0) scale(1.35)',
-    opacity: 1,
-    transitionDelay: '0'
-  },
-  ':active': {
-    transform: 'translate(-50%, 0) scale(1.02)',
-    opacity: 1,
-    transitionDelay: '0'
+    boxShadow: mantine.shadows.md
   }
 })
-globalStyle(`${cssNavigateBtn} svg.icon`, {
-  width: '65%',
-  height: '65%',
-  strokeWidth: '1.5'
-})