@likec4/diagram 1.17.1 → 1.18.0

package/src/xyflow/edges/RelationshipsDropdownMenu.tsx

@@ -16,11 +16,12 @@ import {
   Tooltip as MantineTooltip,
   TooltipGroup
 } from '@mantine/core'
-import { IconArrowRight, IconArrowsMaximize, IconFileSymlink, IconInfoCircle, IconZoomScan } from '@tabler/icons-react'
+import { IconArrowRight, IconFileSymlink, IconInfoCircle, IconZoomScan } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { forwardRef, Fragment, type MouseEventHandler, type PropsWithChildren, useCallback } from 'react'
 import { filter, isTruthy, map, partition, pick, pipe } from 'remeda'
 import { useDiagramState, useDiagramStoreApi, useMantinePortalProps, useXYNodesData } from '../../hooks'
+import { Link } from '../../ui/Link'
 import type { RelationshipData } from '../types'
 import * as css from './RelationshipsDropdownMenu.css'
 
@@ -72,7 +73,7 @@ export function RelationshipsDropdownMenu({
       }
     }),
     filter(isTruthy),
-    partition(r => r.relationship.source === edge.source && r.relationship.target === edge.target)
+    partition(r => r.source.id === edge.source && r.target.id === edge.target)
   )
 
   const onClickOpenOverlay = useCallback((e: React.MouseEvent): void => {
@@ -84,7 +85,7 @@ export function RelationshipsDropdownMenu({
     }
   }, [edge.id, openOverlay, enableRelationshipBrowser])
 
-  const renderRelationship = (relationship: LikeC4Model.ViewModel.Relationship, index: number) => (
+  const renderRelationship = (relationship: LikeC4Model.AnyRelation, index: number) => (
     <Fragment key={relationship.id}>
       {index > 0 && <MenuDivider opacity={0.65} />}
       <MenuItem
@@ -155,7 +156,7 @@ export function RelationshipsDropdownMenu({
 const Relationship = forwardRef<
   HTMLDivElement,
   StackProps & {
-    relationship: LikeC4Model.ViewModel.Relationship
+    relationship: LikeC4Model.AnyRelation
     edge: RelationshipData['edge']
     sourceNode: DiagramNode
     targetNode: DiagramNode
@@ -175,12 +176,13 @@ const Relationship = forwardRef<
     hasOnNavigateTo
   } = useDiagramState(s => ({
     viewId: s.view.id,
-    hasOnOpenSourceRelation: !!s.onOpenSourceRelation,
+    hasOnOpenSourceRelation: !!s.onOpenSource,
     hasOnNavigateTo: !!s.onNavigateTo
   }))
   const sourceId = nameFromFqn(edge.source) + r.source.id.slice(edge.source.length)
   const targetId = nameFromFqn(edge.target) + r.target.id.slice(edge.target.length)
-  const navigateTo = hasOnNavigateTo && r.relationship.navigateTo !== viewId ? r.relationship.navigateTo : undefined
+  const navigateTo = hasOnNavigateTo && r.navigateTo?.id !== viewId ? r.navigateTo?.id : undefined
+  const links = r.links
 
   return (
     <Stack ref={ref} className={clsx(css.menuItemRelationship, className)} {...props}>
@@ -223,7 +225,9 @@ const Relationship = forwardRef<
                   onPointerDownCapture={stopPropagation}
                   onClick={event => {
                     event.stopPropagation()
-                    diagramApi.getState().onOpenSourceRelation?.(r.id)
+                    diagramApi.getState().onOpenSource?.({
+                      relation: r.id
+                    })
                   }}
                   role="button"
                 >
@@ -235,6 +239,15 @@ const Relationship = forwardRef<
         )}
       </Group>
       <Box className={css.title}>{r.title || 'untitled'}</Box>
+      {r.description && <Text size="xs" c="dimmed">{r.description}</Text>}
+      {links.length > 0 && (
+        <Stack
+          gap={3}
+          justify="stretch"
+          align="stretch">
+          {links.map((link) => <Link key={link.url} link={link} />)}
+        </Stack>
+      )}
     </Stack>
   )
 })

package/src/xyflow/nodes/compound/CompoundNode.css.ts

@@ -49,7 +49,20 @@ globalStyle(`.react-flow__node-compound:has(${dimmed})`, {
   willChange: 'opacity, filter'
 })
 
+globalStyle(`:where([data-mantine-color-scheme='dark'] .likec4-compound-transparent)`, {
+  vars: {
+    ['--_compound-border-color']: `color-mix(in srgb, ${vars.compound.titleColor} 25%, ${vars.element.stroke})`
+  }
+})
+globalStyle(`:where([data-mantine-color-scheme='light'] .likec4-compound-transparent)`, {
+  vars: {
+    ['--_compound-title-color']: vars.element.stroke
+  }
+})
+
 export const varOpacity = createVar('opacity')
+export const varBorderColor = createVar('border-color')
+export const varBorderRadius = createVar('border-transparency')
 export const varBorderTransparency = createVar('border-transparency')
 
 const outlineColor = fallbackVar(
@@ -62,14 +75,17 @@ export const compoundBody = style({
   width: '100%',
   height: '100%',
   position: 'relative',
-  borderRadius: 6,
+  borderRadius: varBorderRadius,
   boxShadow: '0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4)',
   padding: 0,
   margin: 0,
   transition: 'all 200ms ease-out',
-  backgroundClip: 'padding-box',
+  // backgroundClip: 'padding-box',
   // overflow: 'hidden',
   cursor: 'default',
+  vars: {
+    [varBorderRadius]: '6px'
+  },
   selectors: {
     [`:where(.react-flow__node.selected) &`]: {
       boxShadow: 'none'
@@ -88,8 +104,11 @@ export const compoundBody = style({
     width: '100%',
     height: '100%',
     pointerEvents: 'none',
+    border: '1px solid transparent',
+    borderRadius: varBorderRadius,
     transition: 'background 175ms ease-out, opacity 175ms ease-out',
-    background: vars.element.fill
+    background: vars.element.fill,
+    backgroundClip: 'border-box'
   }
 })
 export const compoundTitle = style({
@@ -97,19 +116,20 @@ export const compoundTitle = style({
   alignItems: 'center',
   gap: 6,
   paddingLeft: 14,
-  paddingTop: 9,
+  paddingTop: 6,
   minHeight: 30,
+  paddingRight: 2,
   selectors: {
     [`:where(.react-flow__node.draggable) &`]: {
       cursor: 'grab'
     },
     [`:where(.likec4-compound-transparent) &`]: {
-      paddingTop: 4
+      paddingTop: 3
     }
   }
 })
 export const withNavigation = style({
-  paddingLeft: 30
+  paddingLeft: 32
 })
 
 const opacityDeltaOnHover = createVar('opacityDeltaOnHover')
@@ -117,8 +137,9 @@ export const transparent = style({
   borderStyle: 'dashed',
   borderWidth: 3,
   boxShadow: 'none',
-  borderColor: `color-mix(in srgb , ${vars.element.stroke}, transparent ${fallbackVar(varBorderTransparency, '10%')})`,
+  borderColor: `color-mix(in srgb , ${varBorderColor}, transparent ${fallbackVar(varBorderTransparency, '5%')})`,
   vars: {
+    [varBorderColor]: `var(--_compound-border-color,${vars.element.stroke})`,
     [opacityDeltaOnHover]: '0'
   },
   ':before': {
@@ -156,12 +177,6 @@ export const title = style({
   mixBlendMode: 'screen'
 })
 
-globalStyle(`:where([data-mantine-color-scheme='light'] .likec4-compound-transparent)`, {
-  vars: {
-    ['--_compound-title-color']: vars.element.stroke
-  }
-})
-
 const indicatorKeyframes = keyframes({
   'from': {
     opacity: 0.6

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"