@likec4/diagram 1.15.1 → 1.17.0

package/src/overlays/relationships-of/xyflow/CompoundNode.tsx

@@ -1,7 +1,9 @@
 import { Text as MantineText } from '@mantine/core'
-import { Handle, type NodeProps, Position } from '@xyflow/react'
+import { Handle, type NodeProps, Position, useStore } from '@xyflow/react'
 import clsx from 'clsx'
+import { deepEqual, shallowEqual } from 'fast-equals'
 import { m } from 'framer-motion'
+import { memo, useCallback } from 'react'
 import type { XYFlowTypes } from '../_types'
 import * as css from './styles.css'
 
@@ -11,15 +13,44 @@ const Text = MantineText.withProps({
 
 type CompoundNodeProps = NodeProps<XYFlowTypes.CompoundNode>
 
-export function CompoundNode({
+export const CompoundNode = memo<CompoundNodeProps>(({
+  id,
   data: {
     element,
     ports,
+    layoutId = id,
+    leaving = false,
+    initialAnimation = true,
     ...data
   },
   width = 200,
-  selectable = true
-}: CompoundNodeProps) {
+  height = 100,
+  ...props
+}) => {
+  const scale = (diff: number) => ({
+    scaleX: (width + diff) / width,
+    scaleY: (height + diff) / height
+  })
+
+  let opacity = 1
+  if (data.dimmed) {
+    opacity = data.dimmed === 'immediate' ? 0.05 : 0.15
+  }
+  if (leaving) {
+    opacity = 0
+  }
+
+  const {
+    elementsSelectable
+  } = useStore(
+    useCallback((s) => ({
+      elementsSelectable: s.elementsSelectable
+    }), []),
+    shallowEqual
+  )
+
+  const selectable = props.selectable ?? elementsSelectable
+
   return (
     <>
       <m.div
@@ -27,27 +58,48 @@ export function CompoundNode({
           css.compoundNodeBody,
           'likec4-compound-node'
         ])}
-        data-compound-depth={3}
+        layoutId={layoutId}
+        data-compound-depth={data.depth ?? 1}
         data-likec4-color={element.color}
+        initial={(layoutId === id && initialAnimation)
+          ? {
+            ...scale(-20),
+            opacity: 0,
+            width,
+            height
+          }
+          : false}
         animate={{
-          opacity: data.dimmed ? 0.15 : 1,
+          ...scale(0),
+          opacity,
+          width,
+          height,
           transition: {
-            delay: data.dimmed === true ? .4 : 0
+            opacity: {
+              delay: !leaving && data.dimmed === true ? .4 : 0,
+              ...((leaving || data.dimmed === 'immediate') && {
+                duration: 0.09
+              })
+            }
           }
         }}
         {...(selectable && {
           whileHover: {
-            scale: 1.04,
+            ...scale(12),
+            scaleX: (width + 12) / width,
+            scaleY: (height + 12) / height,
             transition: {
-              delay: 0.15
+              delay: 0.1
             }
           },
           whileTap: {
-            scale: 1
+            ...scale(-12)
           }
         })}
       >
-        <Text className={css.compoundNodeTitle} maw={width - 20}>{element.title}</Text>
+        <Text className={css.compoundNodeTitle} maw={width - 20}>
+          {element.title}
+        </Text>
       </m.div>
       {ports.left.map(({ id, type }, i) => (
         <Handle
@@ -57,7 +109,7 @@ export function CompoundNode({
           position={Position.Left}
           style={{
             visibility: 'hidden',
-            top: `${16 + 20 * i}px`
+            top: `${20 * (i + 1)}px`
           }} />
       ))}
       {ports.right.map(({ id, type }, i) => (
@@ -68,9 +120,11 @@ export function CompoundNode({
           position={Position.Right}
           style={{
             visibility: 'hidden',
-            top: `${16 + 20 * i}px`
+            top: `${20 * (i + 1)}px`
           }} />
       ))}
     </>
   )
-}
+}, (prev, next) => {
+  return deepEqual(prev.data, next.data)
+})

package/src/overlays/relationships-of/xyflow/ElementNode.tsx

@@ -2,7 +2,9 @@ import { ActionIcon, Box, Group, Text as MantineText } from '@mantine/core'
 import { IconFileSymlink, IconTransform, IconZoomScan } from '@tabler/icons-react'
 import { Handle, type NodeProps, Position } from '@xyflow/react'
 import clsx from 'clsx'
+import { deepEqual } from 'fast-equals'
 import { m } from 'framer-motion'
+import { memo } from 'react'
 import { type DiagramState, useDiagramState } from '../../../hooks'
 import { ElementShapeSvg } from '../../../xyflow/nodes/element/ElementShapeSvg'
 import { stopPropagation } from '../../../xyflow/utils'
@@ -32,23 +34,41 @@ function selector(s: DiagramState) {
   }
 }
 
-export function ElementNode({
+export const ElementNode = memo<ElementNodeProps>(({
+  id,
   data: {
     element,
     ports,
     navigateTo,
+    layoutId = id,
+    leaving = false,
+    initialAnimation = true,
     ...data
   },
   selectable = true,
   width: w = 100,
   height: h = 100
-}: ElementNodeProps) {
+}) => {
   const overlay = useOverlayDialog()
   const {
     currentViewId,
     onNavigateTo,
     onOpenSource
   } = useDiagramState(selector)
+
+  const scale = (diff: number) => ({
+    scaleX: (w + diff) / w,
+    scaleY: (h + diff) / h
+  })
+
+  let opacity = 1
+  if (data.dimmed) {
+    opacity = data.dimmed === 'immediate' ? 0.05 : 0.15
+  }
+  if (leaving) {
+    opacity = 0
+  }
+
   return (
     <>
       <m.div
@@ -56,22 +76,39 @@ export function ElementNode({
           css.elementNode,
           'likec4-element-node'
         ])}
+        layoutId={layoutId}
         data-likec4-color={element.color}
+        initial={(layoutId === id && initialAnimation)
+          ? {
+            ...scale(-20),
+            opacity: 0,
+            width: w,
+            height: h
+          }
+          : false}
         animate={{
-          opacity: data.dimmed ? 0.15 : 1,
+          ...scale(0),
+          opacity,
+          width: w,
+          height: h,
           transition: {
-            delay: data.dimmed === true ? .4 : 0
+            opacity: {
+              delay: !leaving && data.dimmed === true ? .4 : 0,
+              ...((leaving || data.dimmed === 'immediate') && {
+                duration: 0.09
+              })
+            }
           }
         }}
         {...(selectable && {
           whileHover: {
-            scale: 1.045,
-            transition: {
-              delay: 0.15
-            }
+            ...scale(16)
+            // transition: {
+            //   delay: 0.1
+            // }
           },
           whileTap: {
-            scale: 0.97
+            ...scale(-8)
           }
         })}
       >
@@ -86,7 +123,9 @@ export function ElementNode({
           <ElementShapeSvg shape={element.shape} w={w} h={h} />
         </svg>
         <Box className={css.elementNodeContent}>
-          <Text className={css.elementNodeTitle} lineClamp={2}>{element.title}</Text>
+          <Text className={css.elementNodeTitle} lineClamp={2}>
+            {element.title}
+          </Text>
           {element.description && (
             <Text className={css.elementNodeDescription} lineClamp={4}>{element.description}</Text>
           )}
@@ -96,13 +135,12 @@ export function ElementNode({
             <Action
               onClick={(event) => {
                 event.stopPropagation()
-                setTimeout(() => onNavigateTo(navigateTo), 100)
-                overlay.close()
+                overlay.close(() => onNavigateTo(navigateTo))
               }}>
               <IconZoomScan stroke={1.8} style={{ width: '75%' }} />
             </Action>
           )}
-          {data.column !== 'subject' && (
+          {data.column !== 'subjects' && (
             <Action
               onClick={(event) => {
                 event.stopPropagation()
@@ -148,4 +186,6 @@ export function ElementNode({
       ))}
     </>
   )
-}
+}, (prev, next) => {
+  return deepEqual(prev.data, next.data)
+})

package/src/overlays/relationships-of/xyflow/EmptyNode.tsx

@@ -16,7 +16,7 @@ export function EmptyNode({
 }: EmptyNodeProps) {
   return (
     <Box className={css.emptyNode}>
-      <Text c={'dimmed'} fw={500}>No {column === 'incomers' ? 'incoming' : 'outgoing'}</Text>
+      <Text c={'dimmed'} fz={'lg'} fw={500}>No {column === 'incomers' ? 'incoming' : 'outgoing'}</Text>
     </Box>
   )
 }

package/src/overlays/relationships-of/xyflow/RelationshipEdge.tsx

@@ -1,30 +1,52 @@
-import { ActionIcon, Box, Group, Stack, Text, ThemeIcon } from '@mantine/core'
+import { ActionIcon, Box, Group, Stack, Text, ThemeIcon, Tooltip as MantineTooltip } from '@mantine/core'
 import { IconBoxMultipleFilled, IconZoomScan } from '@tabler/icons-react'
 import { BaseEdge, EdgeLabelRenderer, type EdgeProps, getBezierPath } from '@xyflow/react'
 import clsx from 'clsx'
+import { useEffect, useRef } from 'react'
 import { only } from 'remeda'
 import { useDiagramState } from '../../../hooks/useDiagramState'
 import { stopPropagation } from '../../../xyflow/utils'
+import { useOverlayDialog } from '../../OverlayContext'
 import type { XYFlowTypes } from '../_types'
 import { ZIndexes } from '../use-layouted-relationships'
 import * as css from './styles.css'
 
+const Tooltip = MantineTooltip.withProps({
+  color: 'dark',
+  fz: 'sm',
+  openDelay: 400,
+  closeDelay: 150,
+  withinPortal: false,
+  label: '',
+  children: null,
+  offset: 4
+})
+
 export function RelationshipEdge({
   data,
   label,
   ...props
 }: EdgeProps<XYFlowTypes.Edge>) {
-  const onNavigateTo = useDiagramState(s => s.onNavigateTo)
+  const {
+    viewId,
+    onNavigateTo
+  } = useDiagramState(s => ({
+    viewId: s.view.id,
+    onNavigateTo: s.onNavigateTo
+  }))
+  const overlay = useOverlayDialog()
   const [edgePath, labelX, labelY] = getBezierPath(props)
   const navigateTo = onNavigateTo ? only(data.relations)?.navigateTo : undefined
   const isMultiRelation = data.relations.length > 1
   const technology = only(data.relations)?.technology
+
   return (
     <>
       <g
-        className={css.edgePath}
+        className={css.edgeContainer}
         data-edge-dimmed={data.dimmed}
         data-edge-hovered={data.hovered}
+        data-likec4-color={data.includedInCurrentView ? 'gray' : 'amber'}
       >
         <BaseEdge
           path={edgePath}
@@ -37,7 +59,7 @@ export function RelationshipEdge({
           style={{
             position: 'absolute',
             transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
-            maxWidth: Math.abs(props.targetX - props.sourceX - 40),
+            maxWidth: Math.abs(props.targetX - props.sourceX - 70),
             zIndex: ZIndexes.max
           }}
           className={clsx([
@@ -46,25 +68,29 @@ export function RelationshipEdge({
           ])}
           data-edge-dimmed={data.dimmed}
           data-edge-hovered={data.hovered}
+          data-likec4-color={data.includedInCurrentView ? 'gray' : 'amber'}
+          // {...data.includedInCurrentView === false && { 'data-likec4-color': 'amber' }}
         >
           {label && (
-            <Group gap={6} wrap="nowrap">
-              {isMultiRelation && (
-                <ThemeIcon size={'sm'} variant="transparent" color="orange">
-                  <IconBoxMultipleFilled style={{ width: '80%' }} />
-                </ThemeIcon>
-              )}
-              <Text
-                fw={isMultiRelation ? '500' : '400'}
-                style={{
-                  whiteSpace: isMultiRelation ? 'nowrap' : undefined
-                }}
-                component={'div'}
-                className={css.edgeLabelText}
-                lineClamp={3}>
-                {label}
-              </Text>
-            </Group>
+            <Tooltip label="Not included in current view" disabled={data.includedInCurrentView} color={'orange'}>
+              <Group gap={6} wrap="nowrap">
+                {isMultiRelation && (
+                  <ThemeIcon size={'sm'} variant="transparent" color="orange">
+                    <IconBoxMultipleFilled style={{ width: '80%' }} />
+                  </ThemeIcon>
+                )}
+                <Text
+                  fw={isMultiRelation ? '500' : '400'}
+                  style={{
+                    whiteSpace: isMultiRelation ? 'nowrap' : undefined
+                  }}
+                  component={'div'}
+                  className={css.edgeLabelText}
+                  lineClamp={3}>
+                  {label}
+                </Text>
+              </Group>
+            </Tooltip>
           )}
           {technology && (
             <Text component={'div'} className={css.edgeLabelTechnology}>
@@ -73,7 +99,7 @@ export function RelationshipEdge({
               {' ]'}
             </Text>
           )}
-          {navigateTo && (
+          {navigateTo && viewId !== navigateTo && (
             <Box ta={'center'} mt={4}>
               <ActionIcon
                 variant="default"
@@ -82,7 +108,9 @@ export function RelationshipEdge({
                 onPointerDownCapture={stopPropagation}
                 onClick={event => {
                   event.stopPropagation()
-                  onNavigateTo?.(navigateTo, event)
+                  overlay.close(() => {
+                    onNavigateTo?.(navigateTo, event)
+                  })
                 }}
                 role="button"
                 onDoubleClick={stopPropagation}

package/src/overlays/relationships-of/xyflow/styles.css.ts

@@ -1,8 +1,10 @@
 import { rem } from '@mantine/core'
 import { globalStyle, style } from '@vanilla-extract/css'
-import { mantine, vars, whereLight, xyvars } from '../../../theme-vars'
+import { mantine, transitions, vars, whereDark, xyvars } from '../../../theme-vars'
+import { mixColor } from '../../Overlays.css'
 
 export const elementNode = style({
+  position: 'relative',
   width: '100%',
   height: '100%'
 })
@@ -27,7 +29,7 @@ export const elementNodeTitle = style({
   fontOpticalSizing: 'auto',
   fontStyle: 'normal',
   fontWeight: 500,
-  fontSize: 17,
+  fontSize: 18,
   lineHeight: 1.25,
   textWrap: 'balance',
   color: vars.element.hiContrast
@@ -40,30 +42,30 @@ export const elementNodeDescription = style({
   fontFamily: vars.element.font,
   fontOpticalSizing: 'auto',
   fontStyle: 'normal',
-  fontSize: mantine.fontSizes.xs,
+  fontSize: mantine.fontSizes.sm,
   lineHeight: 1.25,
   textWrap: 'balance',
   color: vars.element.loContrast
 })
 
 export const compoundNodeBody = style({
+  position: 'relative',
   width: '100%',
   height: '100%',
-  boxShadow: '0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4)',
-  background: `color-mix(in srgb , ${vars.element.fill},  transparent 10%)`,
-  borderRadius: 4
+  boxShadow: '0 4px 10px 0.5px rgba(0,0,0,0.1) , 1px 1px 4px -1px rgba(0,0,0,0.3)',
+  // background: `color-mix(in srgb , ${vars.element.fill},  transparent 10%)`,
+  background: vars.element.fill,
+  borderRadius: 6
 })
 
 export const compoundNodeTitle = style({
   fontFamily: vars.compound.font,
-  fontOpticalSizing: 'auto',
-  fontStyle: 'normal',
   fontWeight: 600,
-  fontSize: 14,
+  fontSize: 15,
   lineHeight: 1,
   textTransform: 'uppercase',
-  paddingTop: 12,
-  paddingLeft: 10,
+  paddingTop: 14,
+  paddingLeft: 12,
   mixBlendMode: 'screen',
   color: vars.compound.titleColor
 })
@@ -86,19 +88,32 @@ export const cssShapeSvg = style({
 
 const DimmedTransitionDelay = '400ms'
 
-export const edgePath = style({
+export const edgeContainer = style({
   opacity: 1,
-  transition: 'all 0.2s ease-in-out',
-
+  transition: transitions.fast,
+  vars: {
+    [xyvars.edge.stroke]: vars.relation.lineColor,
+    [xyvars.edge.strokeSelected]: `color-mix(in srgb, ${vars.relation.lineColor}, ${mixColor} 35%)`,
+    [xyvars.edge.labelColor]: `color-mix(in srgb, ${vars.relation.labelColor}, rgba(255 255 255 / 0.85) 50%)`,
+    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 20%)`
+  },
   selectors: {
     [`&[data-edge-dimmed='true']`]: {
-      opacity: 0.1,
+      opacity: 0.2,
       transitionDelay: DimmedTransitionDelay
+    },
+    [`&[data-edge-dimmed='immediate']`]: {
+      opacity: 0.2
+    },
+    [`${whereDark} &`]: {
+      vars: {
+        [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 50%)`
+      }
     }
   }
 })
 
-export const edgeLabel = style({
+export const edgeLabel = style([edgeContainer, {
   padding: '2px 5px',
   fontFamily: vars.likec4.font,
   position: 'absolute',
@@ -111,21 +126,13 @@ export const edgeLabel = style({
   // if you have an interactive element, set pointer-events: all
   pointerEvents: 'all',
   textWrap: 'pretty',
-  whiteSpace: 'preserve-breaks',
-  opacity: 1,
-  transition: 'all 0.2s ease-in-out',
-  selectors: {
-    [`&[data-edge-dimmed='true']`]: {
-      opacity: 0.1,
-      transitionDelay: DimmedTransitionDelay
-    }
-  }
-})
+  whiteSpace: 'preserve-breaks'
+}])
 
 export const edgeLabelText = style({
   textAlign: 'center',
   whiteSpaceCollapse: 'preserve-breaks',
-  fontSize: rem(15),
+  fontSize: mantine.fontSizes.md,
   lineHeight: mantine.lineHeights.xs
 })
 

package/src/state/DiagramContext.tsx

@@ -1,5 +1,6 @@
 import { invariant } from '@likec4/core'
-import { useMergedRef } from '@mantine/hooks'
+import { Box } from '@mantine/core'
+import { useMergedRef, useReducedMotion } from '@mantine/hooks'
 import { deepEqual, shallowEqual } from 'fast-equals'
 import { useAnimate } from 'framer-motion'
 import { createContext, type PropsWithChildren, useCallback, useEffect, useRef } from 'react'
@@ -25,6 +26,7 @@ export function DiagramContextProvider({
   whereFilter,
   ...props
 }: DiagramContextProviderProps) {
+  const isMotionReduced = useReducedMotion() ?? false
   const [scope, animate] = useAnimate()
   const containerRef = useRef<HTMLDivElement>(null)
   const ref = useMergedRef(scope, containerRef)
@@ -70,19 +72,24 @@ export function DiagramContextProvider({
 
   const api = store.current
   useEffect(() => {
+    if (isMotionReduced) {
+      return
+    }
     return api.subscribe(s => !!s.activeOverlay, (isActiveOverlay) => {
       animate('.likec4-diagram .react-flow__renderer', {
-        filter: isActiveOverlay ? 'grayscale(0.85) brightness(0.5)' : 'grayscale(0) brightness()',
-        scale: isActiveOverlay ? 0.97 : 1,
-        transform: isActiveOverlay ? `translateY(8px)` : `translateY(0)`
+        opacity: isActiveOverlay ? 0.7 : 1,
+        filter: isActiveOverlay ? 'grayscale(1)' : 'grayscale(0)',
+        transform: isActiveOverlay ? `perspective(300px) translateZ(-10px) translateY(2px)` : `translateY(0)`
       }, {
-        duration: isActiveOverlay ? 0.5 : 0.16
+        duration: isActiveOverlay ? 0.4 : 0.2
       })
+    }, {
+      fireImmediately: true
     })
-  }, [api])
+  }, [api, isMotionReduced])
 
   return (
-    <div
+    <Box
       ref={ref}
       className={className}
       {...(keepAspectRatio && {
@@ -94,7 +101,7 @@ export function DiagramContextProvider({
       <DiagramContext.Provider value={api}>
         {children}
       </DiagramContext.Provider>
-    </div>
+    </Box>
   )
 }
 DiagramContextProvider.displayName = 'DiagramContextProvider'

package/src/state/diagramStore.ts

@@ -60,10 +60,8 @@ export type DiagramInitialState = {
   // If LikeC4Model provided
   hasLikeC4Model: boolean
   controls: boolean
-  showElementLinks: boolean
   showNavigationButtons: boolean
   showNotations: boolean
-  showRelationshipDetails: boolean
   fitViewEnabled: boolean
   fitViewPadding: number
   zoomable: boolean
@@ -72,7 +70,9 @@ export type DiagramInitialState = {
   nodesSelectable: boolean
   experimentalEdgeEditing: boolean
   enableFocusMode: boolean
-  enableRelationshipsBrowser: boolean
+  enableElementDetails: boolean
+  enableRelationshipBrowser: boolean
+  enableRelationshipDetails: boolean
   renderIcon: ElementIconRenderer | null
   whereFilter: WhereOperator<string, string> | null
   // If Dynamic View
@@ -104,6 +104,7 @@ export type DiagramState = Simplify<
     activeOverlay:
       | null
       | RequireExactlyOne<{
+        elementDetails: Fqn
         relationshipsOf: Fqn
         edgeDetails: EdgeId
       }>
@@ -776,7 +777,7 @@ export function createDiagramStore(props: DiagramInitialState) {
             }
             const xynode = xynodes.find(({ id }) => id === xynodeId)
             invariant(xynode, `xynode not found: ${xynodeId}`)
-            const element = view.nodes.find(({ id }) => id === xynodeId)
+            const element = xynode.data.element
             invariant(element?.navigateTo, `node is not navigable: ${xynodeId}`)
             cancelSaveManualLayout()
             set(
@@ -853,7 +854,14 @@ export function createDiagramStore(props: DiagramInitialState) {
             if (eq(overlay, get().activeOverlay)) {
               return
             }
-            set({ activeOverlay: overlay }, noReplace, 'openOverlay')
+            set(
+              {
+                activeWalkthrough: null,
+                activeOverlay: overlay
+              },
+              noReplace,
+              'openOverlay'
+            )
           },
           closeOverlay: () => {
             if (get().activeOverlay !== null) {
@@ -862,7 +870,7 @@ export function createDiagramStore(props: DiagramInitialState) {
                   activeOverlay: null
                 },
                 noReplace,
-                'openOverlay'
+                'closeOverlay'
               )
             }
           },

package/src/theme-vars.ts

@@ -72,5 +72,14 @@ export const xyvars = createGlobalThemeContract({
 export const whereLight = ':where([data-mantine-color-scheme="light"])'
 export const whereDark = ':where([data-mantine-color-scheme="dark"])'
 
+export const easings = {
+  out: 'cubic-bezier(0, 0, 0.40, 1)',
+  inOut: 'cubic-bezier(0.50, 0, 0.2, 1)'
+}
+
+export const transitions = {
+  fast: `all 130ms ${easings.inOut}`
+}
+
 // we need only variables names
 export const mantine = themeToVars({})

package/src/ui/FramerMotionConfig.tsx

@@ -0,0 +1,18 @@
+import { useMantineStyleNonce } from '@mantine/core'
+import { useId } from '@mantine/hooks'
+import { domMax, LayoutGroup, LazyMotion, MotionConfig } from 'framer-motion'
+import { type PropsWithChildren } from 'react'
+
+export const FramerMotionConfig = ({ children }: PropsWithChildren) => {
+  const layoutId = useId()
+  const nonce = useMantineStyleNonce()?.()
+  return (
+    <LazyMotion features={domMax} strict>
+      <MotionConfig reducedMotion="user" {...nonce && { nonce }}>
+        <LayoutGroup id={layoutId}>
+          {children}
+        </LayoutGroup>
+      </MotionConfig>
+    </LazyMotion>
+  )
+}