@likec4/diagram 1.9.0 → 1.12.1

package/src/xyflow/edges/RelationshipsDropdownMenu.tsx

@@ -0,0 +1,214 @@
+import { type DiagramNode, LikeC4Model, nameFromFqn } from '@likec4/core'
+import {
+  ActionIcon,
+  Box,
+  Group,
+  Menu,
+  MenuDivider,
+  MenuDropdown,
+  MenuItem,
+  MenuLabel,
+  MenuTarget,
+  Space,
+  Stack,
+  type StackProps,
+  Text,
+  Tooltip as MantineTooltip,
+  TooltipGroup
+} from '@mantine/core'
+import { IconArrowRight, IconFileSymlink, IconZoomScan } from '@tabler/icons-react'
+import clsx from 'clsx'
+import { forwardRef, Fragment, type MouseEventHandler, type PropsWithChildren } from 'react'
+import { filter, isTruthy, map, partition, pipe } from 'remeda'
+import { useDiagramState, useDiagramStoreApi, useMantinePortalProps, useXYNodesData } from '../../hooks'
+import type { RelationshipData } from '../types'
+import * as css from './RelationshipsDropdownMenu.css'
+
+const stopPropagation: MouseEventHandler = (e) => e.stopPropagation()
+
+export const Tooltip = MantineTooltip.withProps({
+  color: 'gray',
+  fz: 'xs',
+  openDelay: 300,
+  closeDelay: 150,
+  label: '',
+  children: null,
+  offset: 8,
+  withinPortal: false
+})
+
+export function RelationshipsDropdownMenu({
+  edge,
+  disabled = false,
+  likec4model,
+  children
+}: PropsWithChildren<{
+  edge: RelationshipData['edge']
+  disabled?: boolean | undefined
+  likec4model: LikeC4Model
+}>) {
+  const portalProps = useMantinePortalProps()
+  const [sourceXYNode, targetXYNode] = useXYNodesData([edge.source, edge.target])
+
+  if (!sourceXYNode || !targetXYNode) return children
+
+  const [direct, nested] = pipe(
+    edge.relations,
+    map(id => {
+      try {
+        return likec4model.relationship(id)
+      } catch (e) {
+        // View was cached, but likec4model based on new data
+        console.error(
+          `View is cached and likec4model missing relationship ${id} from ${edge.source} -> ${edge.target}`,
+          e
+        )
+        return null
+      }
+    }),
+    filter(isTruthy),
+    partition(r => r.relationship.source === edge.source && r.relationship.target === edge.target)
+  )
+
+  if (direct.length + nested.length === 0) {
+    return <>{children}</>
+  }
+
+  const renderRelationship = (relationship: LikeC4Model.ViewModel.Relationship, index: number) => (
+    <Fragment key={relationship.id}>
+      {index > 0 && <MenuDivider opacity={0.65} />}
+      <MenuItem
+        component={Relationship}
+        relationship={relationship}
+        sourceNode={sourceXYNode.data.element}
+        targetNode={targetXYNode.data.element}
+        edge={edge} />
+    </Fragment>
+  )
+
+  return (
+    <Menu
+      trigger={'click-hover'}
+      openDelay={300}
+      closeDelay={450}
+      floatingStrategy={'fixed'}
+      closeOnClickOutside
+      clickOutsideEvents={['pointerdown', 'mousedown', 'click']}
+      closeOnEscape
+      closeOnItemClick={false}
+      disabled={disabled}
+      {...portalProps}
+    >
+      <MenuTarget>
+        {children}
+      </MenuTarget>
+      <MenuDropdown
+        className={css.menuDropdown}
+        onPointerDownCapture={stopPropagation}
+        onPointerDown={stopPropagation}
+        onClick={stopPropagation}
+        onDoubleClick={stopPropagation}
+      >
+        {direct.length > 0 && (
+          <>
+            <MenuLabel>direct relationships</MenuLabel>
+            {direct.map(renderRelationship)}
+          </>
+        )}
+        {nested.length > 0 && (
+          <>
+            {direct.length > 0 && <MenuDivider />}
+            <MenuLabel>resolved from nested</MenuLabel>
+            {nested.map(renderRelationship)}
+          </>
+        )}
+      </MenuDropdown>
+    </Menu>
+  )
+}
+
+const Relationship = forwardRef<
+  HTMLDivElement,
+  StackProps & {
+    relationship: LikeC4Model.ViewModel.Relationship
+    edge: RelationshipData['edge']
+    sourceNode: DiagramNode
+    targetNode: DiagramNode
+  }
+>(({
+  className,
+  relationship: r,
+  edge,
+  sourceNode,
+  targetNode,
+  ...props
+}, ref) => {
+  const diagramApi = useDiagramStoreApi()
+  const {
+    viewId,
+    hasOnOpenSourceRelation,
+    hasOnNavigateTo
+  } = useDiagramState(s => ({
+    viewId: s.view.id,
+    hasOnOpenSourceRelation: !!s.onOpenSourceRelation,
+    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
+
+  return (
+    <Stack ref={ref} className={clsx(css.menuItemRelationship, className)} {...props}>
+      <Group gap={4}>
+        <Text component="div" className={css.endpoint} data-likec4-color={sourceNode.color}>
+          {sourceId}
+        </Text>
+        <IconArrowRight stroke={2.5} size={11} />
+        <Text component="div" className={css.endpoint} data-likec4-color={targetNode.color}>
+          {targetId}
+        </Text>
+        {(navigateTo || hasOnOpenSourceRelation) && (
+          <TooltipGroup openDelay={100}>
+            <Space w={'xs'} />
+            {navigateTo && (
+              <Tooltip label={'Open dynamic view'}>
+                <ActionIcon
+                  className={clsx('nodrag nopan')}
+                  size={'sm'}
+                  radius="sm"
+                  variant="default"
+                  onPointerDownCapture={stopPropagation}
+                  onClick={event => {
+                    diagramApi.getState().onNavigateTo?.(navigateTo, event)
+                  }}
+                  role="button"
+                >
+                  <IconZoomScan size="80%" stroke={2} />
+                </ActionIcon>
+              </Tooltip>
+            )}
+            {hasOnOpenSourceRelation && (
+              <Tooltip label={'Open source'}>
+                <ActionIcon
+                  className={clsx('nodrag nopan')}
+                  size={'sm'}
+                  radius="sm"
+                  variant="default"
+                  onPointerDownCapture={stopPropagation}
+                  onClick={event => {
+                    event.stopPropagation()
+                    diagramApi.getState().onOpenSourceRelation?.(r.id)
+                  }}
+                  role="button"
+                >
+                  <IconFileSymlink size="80%" stroke={2} />
+                </ActionIcon>
+              </Tooltip>
+            )}
+          </TooltipGroup>
+        )}
+      </Group>
+      <Box className={css.title}>{r.title || 'untitled'}</Box>
+    </Stack>
+  )
+})

package/src/xyflow/edges/edges.css.ts

@@ -1,7 +1,6 @@
 import { rem } from '@mantine/core'
 import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
-import { mantine } from '../../mantine.css'
-import { vars, xyvars } from '../../theme.css'
+import { mantine, vars, xyvars } from '../../theme-vars'
 
 const mixColor = createVar('mix-color')
 
@@ -145,7 +144,7 @@ export const cssEdgePath = style({
       animationDelay: '450ms',
       transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out'
     },
-    [`:where(${isSelected}, [data-edge-active='true']) &`]: {
+    [`:where(${isSelected}, [data-edge-active='true'], [data-edge-animated='true']) &`]: {
       animationName: strokeKeyframes,
       animationDelay: '0ms',
       transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out'
@@ -171,10 +170,15 @@ export const stepEdgeNumber = style({
   borderTopLeftRadius: labelBorderRadius,
   borderBottomLeftRadius: labelBorderRadius,
   backgroundColor: `color-mix(in srgb, ${vars.relation.labelBgColor}, ${mixColor} 5%)`,
-  fontVariantNumeric: 'tabular-nums'
-})
-globalStyle(`:where([data-mantine-color-scheme="dark"]) :where([data-likec4-color="gray"]) ${stepEdgeNumber}`, {
-  backgroundColor: `color-mix(in srgb, ${vars.relation.labelBgColor}, ${mixColor} 15%)`
+  fontVariantNumeric: 'tabular-nums',
+  selectors: {
+    [`:where([data-mantine-color-scheme="dark"]) :where([data-likec4-color="gray"]) &`]: {
+      backgroundColor: `color-mix(in srgb, ${vars.relation.labelBgColor}, ${mixColor} 15%)`
+    },
+    [`:where([data-edge-active='true']) &`]: {
+      backgroundColor: 'transparent'
+    }
+  }
 })
 
 export const varLabelX = createVar('label-x')
@@ -230,3 +234,67 @@ export const edgeLabelText = style({
 globalStyle(`${edgeLabel}:has(${stepEdgeNumber}) ${edgeLabelText}`, {
   padding: '2px 5px 4px 2px'
 })
+
+export const edgeNoteCloseButton = style({
+  position: 'absolute',
+  top: 4,
+  right: 4,
+  zIndex: 9
+})
+
+export const edgeNoteText = style({
+  userSelect: 'all',
+  textAlign: 'left',
+  whiteSpaceCollapse: 'preserve-breaks',
+  textWrap: 'pretty',
+  lineHeight: 1.25,
+  vars: {
+    '--text-fz': mantine.fontSizes.sm
+  },
+  '@media': {
+    [mantine.largerThan('md')]: {
+      vars: {
+        '--text-fz': mantine.fontSizes.md
+      }
+    }
+  }
+})
+
+export const cssNavigateBtn = style({
+  zIndex: 'calc(var(--layer-overlays, 1) + 1)',
+  position: 'absolute',
+  pointerEvents: 'all',
+  left: '50%',
+  top: 'calc(100% + 1px)',
+  color: xyvars.edge.labelColor,
+  cursor: 'pointer',
+  transformOrigin: 'top center',
+  opacity: 0.8,
+  transition: 'all 150ms ease-in-out',
+  transform: 'translate(-50%, 0)',
+  transitionDelay: '0ms',
+  backgroundColor: 'var(--ai-bg)',
+  vars: {
+    '--ai-bg': vars.relation.labelBgColor,
+    '--ai-hover': `color-mix(in srgb , ${vars.relation.labelBgColor}, ${mixColor} 10%)`
+  },
+  selectors: {
+    [`:is(${dimmed}) &`]: {
+      display: 'none'
+    }
+  },
+  ':hover': {
+    boxShadow: mantine.shadows.lg,
+    transform: 'translate(-50%, 0) scale(1.3)',
+    opacity: 1
+  },
+  ':active': {
+    transform: 'translate(-50%, 0) scale(1.02)'
+  }
+})
+globalStyle(`${cssNavigateBtn} .tabler-icon`, {
+  width: '75%',
+  height: '75%',
+  strokeWidth: 2
+})
+export const cssNavigateBtnIcon = style({})

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

@@ -1,8 +1,7 @@
 import { rem } from '@mantine/core'
 import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
 import { calc } from '@vanilla-extract/css-utils'
-import { mantine } from '../../../mantine.css'
-import { vars } from '../../../theme.css'
+import { mantine, vars } from '../../../theme-vars'
 
 export const container = style({
   width: '100%',

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

@@ -1,13 +1,16 @@
+import type { ThemeColor } from '@likec4/core'
 import { Box, Text } from '@mantine/core'
+import { useDebouncedValue } from '@mantine/hooks'
 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 { memo } from 'react'
+import { memo, useState } from 'react'
 import { clamp } from 'remeda'
 import { useDiagramState } from '../../../hooks/useDiagramState'
 import type { CompoundXYFlowNode } from '../../types'
 import { NavigateToBtn } from '../shared/NavigateToBtn'
+import { CompoundToolbar } from '../shared/Toolbar'
 import * as css from './CompoundNode.css'
 
 type CompoundNodeProps = Pick<
@@ -17,7 +20,7 @@ type CompoundNodeProps = Pick<
 
 const isEqualProps = (prev: CompoundNodeProps, next: CompoundNodeProps) => (
   prev.id === next.id
-  // && prev.selected === next.selected
+  && eq(prev.selected ?? false, next.selected ?? false)
   // && eq(prev.width, next.width)
   // && eq(prev.height, next.height)
   && eq(prev.data.element, next.data.element)
@@ -25,6 +28,7 @@ const isEqualProps = (prev: CompoundNodeProps, next: CompoundNodeProps) => (
 
 export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function CompoundNode({
   id,
+  selected = false,
   data: {
     element
   }
@@ -41,15 +45,28 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
     max: 50
   })
 
-  const { isHovered, isDimmed, hasOnNavigateTo } = useDiagramState(s => ({
+  const { isEditable, isHovered, isDimmed, hasOnNavigateTo } = useDiagramState(s => ({
+    isEditable: s.readonly !== true,
     isHovered: s.hoveredNodeId === id,
     isDimmed: s.dimmed.has(id),
     hasOnNavigateTo: !!s.onNavigateTo
   }))
   const isnavigable = !!compound.navigateTo && hasOnNavigateTo
 
+  const _isToolbarVisible = isEditable && (isHovered || (import.meta.env.DEV && selected))
+  const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, _isToolbarVisible ? 500 : 300)
+
+  const [previewColor, setPreviewColor] = useState<ThemeColor | null>(null)
+
   return (
     <>
+      {isToolbarVisible && (
+        <CompoundToolbar
+          isVisible={isToolbarVisible}
+          element={element}
+          align="start"
+          onColorPreview={setPreviewColor} />
+      )}
       <Handle
         type="target"
         position={Position.Top}
@@ -64,7 +81,7 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
         )}
         mod={{
           'compound-depth': depth,
-          'likec4-color': color,
+          'likec4-color': previewColor ?? color,
           hovered: isHovered
         }}
       >
@@ -83,15 +100,15 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
             opacity < 1 && css.transparent,
             'likec4-compound'
           )}
-          style={opacity < 1
-            ? {
+          style={{
+            ...(opacity < 1 && {
               ...assignInlineVars({
                 [css.varBorderTransparency]: `${borderTransparency}%`,
                 [css.varOpacity]: opacity.toFixed(2)
               }),
               borderStyle: style.border ?? 'dashed'
-            }
-            : undefined}
+            })
+          }}
         >
           <Text
             component="div"

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

@@ -1,5 +1,5 @@
 import { globalStyle, style } from '@vanilla-extract/css'
-import { vars } from '../../../theme.css'
+import { vars } from '../../../theme-vars'
 
 export const elementLink = style({
   position: 'absolute',

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

@@ -15,7 +15,7 @@ import { IconLink } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { useId } from 'react'
 import { clamp } from 'remeda'
-import { useDiagramState } from '../../../hooks/useDiagramState'
+import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps'
 import { type DiagramState } from '../../../state/diagramStore'
 import type { XYFlowNode } from '../../types'
 import { elementLink, trigger } from './ElementLink.css'
@@ -24,17 +24,12 @@ type ElementLinkProps = {
   element: XYFlowNode['data']['element']
 }
 
-const selector = (s: DiagramState) => {
-  const target = s.getContainer()
-  return target ? { target } : null
-}
-
 export function ElementLink({
   element
 }: ElementLinkProps) {
   invariant(element.links, 'ElementLink: links are required')
   const id = useId()
-  const portalProps = useDiagramState(selector)
+  const portalProps = useMantinePortalProps()
   return (
     <div className={elementLink} data-likec4-linkid={id}>
       <HoverCard
@@ -47,7 +42,7 @@ export function ElementLink({
         transitionProps={{
           transition: 'pop'
         }}
-        {...(portalProps ? { portalProps } : { withinPortal: false })}
+        {...portalProps}
         floatingStrategy={'fixed'}
         openDelay={350}
         closeDelay={800}
@@ -57,6 +52,7 @@ export function ElementLink({
         }}>
         <HoverCardTarget>
           <UnstyledButton
+            tabIndex={-1}
             className={clsx('nodrag nopan', trigger)}
             autoFocus={false}>
             <IconLink size={12} />

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

@@ -1,19 +1,42 @@
-import type { DiagramNode } from '@likec4/core'
+import { defaultTheme, type DiagramNode, type ThemeColor } from '@likec4/core'
 import { Text as MantineText } from '@mantine/core'
+import { useDebouncedValue } from '@mantine/hooks'
 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 } from 'react'
-import { isNumber, isTruthy } from 'remeda'
+import { memo, useState } from 'react'
+import { isNumber, isTruthy, keys } from 'remeda'
 import { type DiagramStoreApi, useDiagramState, useDiagramStoreApi } from '../../../hooks/useDiagramState'
 import type { ElementXYFlowNode } from '../../types'
 import { toDomPrecision } from '../../utils'
 import { NavigateToBtn } from '../shared/NavigateToBtn'
+import { ElementToolbar } from '../shared/Toolbar'
 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'
 })
@@ -89,15 +112,21 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
   height
 }) {
   const store = useDiagramStoreApi()
-  const { isHovered, isDimmed, hasOnNavigateTo, isHovercards, isInteractive, hasGoToSource } = useDiagramState(s => ({
+  const { isEditable, isHovered, isDimmed, hasOnNavigateTo, isHovercards, isInteractive } = useDiagramState(s => ({
+    isEditable: s.readonly !== true,
     isHovered: s.hoveredNodeId === id,
     isDimmed: s.dimmed.has(id),
-    isInteractive: s.nodesDraggable || s.nodesSelectable || !!s.onNavigateTo,
+    isInteractive: s.nodesDraggable || s.nodesSelectable || (!!s.onNavigateTo && !!element.navigateTo),
     isHovercards: s.showElementLinks,
-    hasOnNavigateTo: !!s.onNavigateTo,
-    hasGoToSource: !!s.onOpenSourceElement
+    hasOnNavigateTo: !!s.onNavigateTo
+    // hasGoToSource: !!s.onOpenSourceElement
   }))
   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] = useDebouncedValue(_isToolbarVisible, _isToolbarVisible ? 500 : 300)
 
   const w = toDomPrecision(width ?? element.width)
   const h = toDomPrecision(height ?? element.height)
@@ -120,8 +149,17 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
 
   const elementIcon = ElementIcon({ node: element, store })
 
+  const [previewColor, setPreviewColor] = useState<ThemeColor | null>(null)
+
   return (
     <>
+      {isToolbarVisible && (
+        <ElementToolbar
+          element={element}
+          isVisible={isToolbarVisible}
+          onColorPreview={setPreviewColor}
+        />
+      )}
       <Handle
         type="target"
         position={Position.Top}
@@ -136,11 +174,12 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
           'likec4-element-node'
         ])}
         data-hovered={!dragging && isHovered}
-        data-likec4-color={element.color}
+        data-likec4-color={previewColor ?? element.color}
         data-likec4-shape={element.shape}
         variants={variants}
         initial={false}
         animate={animate}
+        tabIndex={-1}
         {...(isInteractive && {
           whileTap: dragging ? animate : 'tap'
         })}

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

@@ -1,7 +1,6 @@
 import { rem } from '@mantine/core'
 import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
-import { mantine } from '../../../mantine.css'
-import { vars } from '../../../theme.css'
+import { mantine, vars } from '../../../theme-vars'
 
 export const stokeFillMix = createVar('stroke-fill-mix')