@likec4/diagram 1.17.1 → 1.18.0

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

@@ -1,12 +1,12 @@
-import { type ThemeColor } from '@likec4/core'
-import { ActionIcon, Box, Group, Text as MantineText, Tooltip } from '@mantine/core'
+import { DiagramNode, type ThemeColor } from '@likec4/core'
+import { ActionIcon, type ActionIconProps, Box, Text as MantineText, Tooltip } from '@mantine/core'
 import { useDebouncedValue } from '@mantine/hooks'
 import { IconId, 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 React, { memo, useCallback, useState } from 'react'
+import { type HTMLMotionProps, m, type Variants } from 'framer-motion'
+import React, { memo, type PropsWithoutRef, useCallback, useState } from 'react'
 import { isNumber, isTruthy } from 'remeda'
 import { useDiagramState } from '../../../hooks/useDiagramState'
 import type { ElementXYFlowNode } from '../../types'
@@ -54,47 +54,60 @@ const VariantsRoot = {
   }
 } satisfies Variants
 
-const VariantsNavigateBtn = {
-  idle: {
-    '--ai-bg': 'var(--ai-bg-idle)',
-    scale: 1,
-    opacity: 0.5,
-    originY: 0.5
-  },
-  selected: {},
-  hovered: {
-    '--ai-bg': 'var(--ai-bg-hover)',
-    scale: 1.35,
-    opacity: 1
-  }
-} satisfies Variants
-VariantsNavigateBtn['selected'] = VariantsNavigateBtn['hovered']
-
-const VariantsNavigate = {
-  ...VariantsNavigateBtn,
-  'hovered:navigate': {
-    scale: 1.42
-  },
-  'tap:navigate': {
-    scale: 1.15
-  }
-} satisfies Variants
-
-const VariantRealationships = {
-  ...VariantsNavigateBtn,
-  'hovered:relationships': {
-    scale: 1.42
-  },
-  'tap:relationships': {
-    scale: 1.15
-  }
-} satisfies Variants
+const variantsBottomButton = (target: 'navigate' | 'relationships', align: 'left' | 'right' | false) => {
+  const variants = {
+    idle: {
+      '--icon-scale': 'scale(1)',
+      '--ai-bg': 'var(--ai-bg-idle)',
+      scale: 1,
+      opacity: 0.5,
+      originX: 0.5,
+      originY: 0.35,
+      translateY: 0,
+      ...align === 'left' && {
+        originX: 0.75,
+        translateX: -1
+      },
+      ...align === 'right' && {
+        originX: 0.25,
+        translateX: 1
+      }
+    },
+    selected: {},
+    hovered: {
+      '--icon-scale': 'scale(1)',
+      '--ai-bg': 'var(--ai-bg-hover)',
+      translateY: 3,
+      scale: 1.32,
+      opacity: 1,
+      ...align === 'left' && {
+        translateX: -4
+      },
+      ...align === 'right' && {
+        translateX: 4
+      }
+    },
+    'hovered:details': {},
+    [`hovered:${target}`]: {
+      '--icon-scale': 'scale(1.08)',
+      scale: 1.45
+    },
+    [`tap:${target}`]: {
+      scale: 1.15
+    }
+  } satisfies Variants
+  variants['selected'] = variants['hovered']
+  variants['hovered:details'] = variants.idle
+  return variants
+}
 
 const VariantsDetailsBtn = {
   idle: {
     '--ai-bg': 'var(--ai-bg-idle)',
     scale: 1,
-    opacity: 0.5
+    opacity: 0.5,
+    originX: 0.45,
+    originY: 0.55
   },
   selected: {},
   hovered: {
@@ -102,7 +115,7 @@ const VariantsDetailsBtn = {
     opacity: 0.7
   },
   'hovered:details': {
-    scale: 1.42,
+    scale: 1.44,
     opacity: 1
   },
   'tap:details': {
@@ -131,6 +144,8 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
   width,
   height
 }) {
+  const modelRef = DiagramNode.modelRef(element)
+  // const deploymentRef = DiagramNode.deploymentRef(element)
   const {
     viewId,
     isEditable,
@@ -167,27 +182,29 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
   const w = toDomPrecision(width ?? element.width)
   const h = toDomPrecision(height ?? element.height)
 
-  const [animateVariants, animateHandlers] = useFramerAnimateVariants()
-
-  let animate: keyof typeof VariantsRoot
+  let animateVariant: keyof typeof VariantsRoot | string[]
   switch (true) {
     case isInActiveOverlay:
-      animate = 'idle'
+      animateVariant = 'idle'
       break
     case dragging && selected:
-      animate = 'selected'
+      animateVariant = 'selected'
       break
     case dragging:
-      animate = 'idle'
+      animateVariant = 'idle'
       break
     case isInteractive && isHovered:
-      animate = 'hovered'
+      animateVariant = 'hovered'
       break
     case selected:
-      animate = 'selected'
+      animateVariant = 'selected'
       break
     default:
-      animate = 'idle'
+      animateVariant = 'idle'
+  }
+  const [animateVariants, animateHandlers] = useFramerAnimateVariants()
+  if (isHovered && !dragging && !isInActiveOverlay) {
+    animateVariant = animateVariants ?? animateVariant
   }
 
   const elementIcon = ElementIcon({
@@ -210,9 +227,11 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
   }, [openOverlay, element.id])
 
   const onOpenRelationships = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation()
-    openOverlay({ relationshipsOf: element.id })
-  }, [openOverlay, element.id])
+    if (modelRef) {
+      e.stopPropagation()
+      openOverlay({ relationshipsOf: modelRef })
+    }
+  }, [openOverlay, modelRef])
 
   return (
     <>
@@ -228,7 +247,7 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
         className={clsx([
           css.container,
           isDimmed && css.dimmed,
-          animate !== 'idle' && css.containerAnimated,
+          animateVariant !== 'idle' && css.containerAnimated,
           'likec4-element-node'
         ])}
         key={`${viewId}:element:${id}`}
@@ -239,7 +258,7 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
         data-animate-target=""
         initial={false}
         variants={VariantsRoot}
-        animate={(isHovered && !dragging && !isInActiveOverlay) ? (animateVariants ?? animate) : animate}
+        animate={animateVariant}
         tabIndex={-1}
         {...(isInteractive && {
           onTapStart: animateHandlers.onTapStart,
@@ -285,42 +304,13 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
           </Box>
         </Box>
         {/* {isHovercards && element.links && <ElementLink element={element} />} */}
-
-        {(enableRelationshipBrowser || isNavigable) && (
-          <Group className={css.navigateBtnBox} align="center">
-            {enableRelationshipBrowser && (
-              <ActionIcon
-                component={m.div}
-                variants={VariantRealationships}
-                data-animate-target="relationships"
-                className={clsx('nodrag nopan', css.navigateBtn)}
-                radius="md"
-                role="button"
-                onClick={onOpenRelationships}
-                onDoubleClick={stopPropagation}
-                {...isInteractive && animateHandlers}
-              >
-                <IconTransform style={{ width: '75%' }} />
-              </ActionIcon>
-            )}
-            {isNavigable && (
-              <ActionIcon
-                component={m.div}
-                variants={VariantsNavigate}
-                data-animate-target="navigate"
-                className={clsx('nodrag nopan', css.navigateBtn)}
-                radius="md"
-                role="button"
-                onClick={onNavigateTo}
-                onDoubleClick={stopPropagation}
-                {...isInteractive && animateHandlers}
-              >
-                <IconZoomScan style={{ width: '75%' }} />
-              </ActionIcon>
-            )}
-          </Group>
-        )}
-        {enableElementDetails && (
+        <BottomButtons
+          keyPrefix={`${viewId}:element:${id}:`}
+          onNavigateTo={isNavigable && onNavigateTo}
+          onOpenRelationships={enableRelationshipBrowser && !!modelRef && onOpenRelationships}
+          {...isInteractive && animateHandlers}
+        />
+        {enableElementDetails && !!modelRef && (
           <Tooltip
             fz="xs"
             color="dark"
@@ -329,6 +319,7 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
             offset={2}
             openDelay={600}>
             <ActionIcon
+              key="details"
               component={m.div}
               variants={VariantsDetailsBtn}
               data-animate-target="details"
@@ -351,37 +342,69 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
   )
 }, isEqualProps)
 
-// const ElementIcon = (
-//   { element, viewId, renderIcon: RenderIcon }: {
-//     element: DiagramNode
-//     viewId: string
-//     renderIcon: ElementIconRenderer | null
-//   }
-// ) => {
-//   if (!element.icon) {
-//     return null
-//   }
-//   let icon = null as React.ReactNode
-//   if (element.icon.startsWith('http://') || element.icon.startsWith('https://')) {
-//     icon = <img src={element.icon} alt={element.title} />
-//   } else if (RenderIcon) {
-//     icon = <RenderIcon node={element} />
-//   }
+type BottomButtonsProps = PropsWithoutRef<
+  ActionIconProps & HTMLMotionProps<'div'> & {
+    keyPrefix: string
+    onNavigateTo: ((e: React.MouseEvent) => void) | false
+    onOpenRelationships: ((e: React.MouseEvent) => void) | false
+  }
+>
+const BottomButtons = ({
+  keyPrefix,
+  onNavigateTo,
+  onOpenRelationships,
+  ...props
+}: BottomButtonsProps) => {
+  const enableRelationships = !!onOpenRelationships
+  const enableNavigate = !!onNavigateTo
 
-//   if (!icon) {
-//     return null
-//   }
-//   return (
-//     <m.div
-//       // key={`${viewId}:element:icon:${element.id}`}
-//       layoutId={`${viewId}:element:icon:${element.id}`}
-//       className={clsx(
-//         css.elementIcon,
-//         'likec4-element-icon'
-//       )}
-//       data-likec4-icon={element.icon}
-//     >
-//       {icon}
-//     </m.div>
-//   )
-// }
+  if (!enableRelationships && !enableNavigate) {
+    return null
+  }
+
+  return (
+    <Box className={css.bottomButtonsContainer}>
+      {enableNavigate && (
+        <ActionIcon
+          {...props}
+          key={`${keyPrefix}navigate`}
+          data-animate-target="navigate"
+          component={m.div}
+          // Weird, but dts-bundle-generator fails on "enableRelationships && 'left'"
+          variants={variantsBottomButton('navigate', enableRelationships ? 'left' : false)}
+          className={clsx('nodrag nopan', css.navigateBtn)}
+          radius="md"
+          role="button"
+          onClick={onNavigateTo}
+          onDoubleClick={stopPropagation}
+        >
+          <IconZoomScan
+            style={{
+              width: '70%',
+              transform: 'var(--icon-scale)'
+            }} />
+        </ActionIcon>
+      )}
+      {enableRelationships && (
+        <ActionIcon
+          {...props}
+          key={`${keyPrefix}relationships`}
+          data-animate-target="relationships"
+          component={m.div}
+          variants={variantsBottomButton('relationships', enableNavigate ? 'right' : false)}
+          className={clsx('nodrag nopan', css.navigateBtn)}
+          radius="md"
+          role="button"
+          onClick={onOpenRelationships}
+          onDoubleClick={stopPropagation}
+        >
+          <IconTransform
+            style={{
+              width: '70%',
+              transform: 'var(--icon-scale)'
+            }} />
+        </ActionIcon>
+      )}
+    </Box>
+  )
+}

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

@@ -141,7 +141,8 @@ export const title = style({
   fontSize: 19,
   lineHeight: 1.15,
   textWrap: 'balance',
-  color: vars.element.hiContrast
+  color: vars.element.hiContrast,
+  whiteSpaceCollapse: 'preserve-breaks'
 })
 
 export const description = style({
@@ -338,6 +339,56 @@ export const shapeSvg = style({
   }
 })
 
+export const bottomButtonsContainer = style({
+  zIndex: 100,
+  position: 'absolute',
+  left: 0,
+  width: '100%',
+  bottom: 2,
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'nowrap',
+  alignItems: 'center',
+  gap: 2,
+  justifyContent: 'center',
+  pointerEvents: 'none',
+  selectors: {
+    [`:where([data-likec4-shape='browser']) &`]: {
+      bottom: 4
+    }
+  }
+})
+
+//   --group-gap: var(--mantine-spacing-md);
+//   --group-align: center;
+//   --group-justify: flex-start;
+//   --group-wrap: wrap;
+//   gap: 0px;
+// }
+// <style>
+// .element_bottomButtonsContainer__14yllojn {
+//   z-index: 100;
+//   position: absolute;
+//   left: 50%;
+//   bottom: 2px;
+//   transform: translate(-50%, 0%);
+// }
+
+// <style>
+// .m_4081bf90 {
+//   display: flex
+// ;
+//   flex-direction: row;
+//   flex-wrap: var(--group-wrap, wrap);
+//   justify-content: var(--group-justify, flex-start);
+//   align-items: var(--group-align, center);
+//   gap: var(--group-gap, var(--mantine-spacing-md));
+// }
+// globalStyle(`:where(.react-flow__node:hover) ${bottomButtonsContainer}`, {
+//   transitionDelay: '20ms',
+//   gap: 16
+// })
+
 const btn = style({
   pointerEvents: 'all',
   color: vars.element.loContrast,
@@ -354,24 +405,6 @@ const btn = style({
   }
 })
 
-export const navigateBtnBox = style({
-  zIndex: 100,
-  position: 'absolute',
-  left: '50%',
-  bottom: 2,
-  transform: 'translate(-50%, 0%)',
-  gap: 0,
-  selectors: {
-    [`:where([data-likec4-shape='browser']) &`]: {
-      bottom: 4
-    }
-  }
-})
-globalStyle(`:where(.react-flow__node:hover) ${navigateBtnBox}`, {
-  transitionDelay: '20ms',
-  gap: 16
-})
-
 export const navigateBtn = style([btn, {}])
 
 export const detailsBtn = style([btn, {

package/src/xyflow/nodes/shared/ElementIcon.tsx

@@ -14,7 +14,7 @@ export const ElementIcon = ({
   className: string
   renderIcon: ElementIconRenderer | null
 }) => {
-  if (!element.icon) {
+  if (!element.icon || element.icon === 'none') {
     return null
   }
   let icon = null as React.ReactNode

package/src/xyflow/nodes/shared/Toolbar.tsx

@@ -1,6 +1,7 @@
 import {
   type BorderStyle,
   defaultTheme,
+  DiagramNode,
   type Element,
   ElementShapes,
   type Fqn,
@@ -40,6 +41,7 @@ import { IconCheck, IconFileSymlink, IconSelector, IconTransform } from '@tabler
 import { NodeToolbar, type NodeToolbarProps } from '@xyflow/react'
 import clsx from 'clsx'
 import { useEffect, useState } from 'react'
+import type { MergeExclusive } from 'type-fest'
 import { useDiagramState, useDiagramStoreApi, useMantinePortalProps, useUpdateEffect } from '../../../hooks'
 import { stopPropagation } from '../../utils'
 
@@ -75,7 +77,7 @@ const Tooltip = MantineTooltip.withProps({
 })
 
 type ToolbarProps = NodeToolbarProps & {
-  element: Element
+  element: DiagramNode
   onColorPreview: (color: ThemeColor | null) => void
 }
 
@@ -86,13 +88,15 @@ export function CompoundToolbar({
   onColorPreview,
   ...props
 }: ToolbarProps) {
+  const modelRef = DiagramNode.modelRef(element)
+  const deploymentRef = DiagramNode.deploymentRef(element)
   const targets = [element.id] as NonEmptyArray<Fqn>
   const diagramApi = useDiagramStoreApi()
   const {
     hasGoToSource,
     enableRelationshipBrowser
   } = useDiagramState(s => ({
-    hasGoToSource: !!s.onOpenSourceElement,
+    hasGoToSource: !!s.onOpenSource,
     enableRelationshipBrowser: s.enableRelationshipBrowser
   }))
 
@@ -117,7 +121,8 @@ export function CompoundToolbar({
         elementBorderStyle={element.style?.border}
         onChange={onChange}
       />
-      {hasGoToSource && <GoToSourceButton elementId={element.id} />}
+      {hasGoToSource && modelRef && <GoToSourceButton elementId={modelRef} />}
+      {hasGoToSource && !modelRef && deploymentRef && <GoToSourceButton deploymentId={deploymentRef} />}
       {enableRelationshipBrowser && <BrowseRelationshipsButton elementId={element.id} />}
     </Toolbar>
   )
@@ -156,13 +161,15 @@ export function ElementToolbar({
   onColorPreview,
   ...props
 }: ToolbarProps) {
+  const modelRef = DiagramNode.modelRef(element)
+  const deploymentRef = DiagramNode.deploymentRef(element)
   const targets = [element.id] as NonEmptyArray<Fqn>
   const diagramApi = useDiagramStoreApi()
   const {
     hasGoToSource,
     enableRelationshipBrowser
   } = useDiagramState(s => ({
-    hasGoToSource: !!s.onOpenSourceElement,
+    hasGoToSource: !!s.onOpenSource,
     enableRelationshipBrowser: s.enableRelationshipBrowser
   }))
   const portalProps = useMantinePortalProps()
@@ -234,20 +241,21 @@ export function ElementToolbar({
         onChange={onChange}
         position="right-end"
       />
-      {hasGoToSource && <GoToSourceButton elementId={element.id} />}
+      {hasGoToSource && modelRef && <GoToSourceButton elementId={modelRef} />}
+      {hasGoToSource && !modelRef && deploymentRef && <GoToSourceButton deploymentId={deploymentRef} />}
       {enableRelationshipBrowser && <BrowseRelationshipsButton elementId={element.id} />}
     </Toolbar>
   )
 }
 
 type ColorButtonProps = Omit<PopoverProps, 'onChange'> & {
-  element: Element
+  element: DiagramNode
   isOpacityEditable?: boolean
   onColorPreview: (color: ThemeColor | null) => void
   onChange: OnStyleChange
 }
 
-function GoToSourceButton({ elementId }: { elementId: Fqn }) {
+function GoToSourceButton(props: MergeExclusive<{ elementId: Fqn }, { deploymentId: Fqn }>) {
   const diagramApi = useDiagramStoreApi()
   const portalProps = useMantinePortalProps()
   return (
@@ -258,7 +266,15 @@ function GoToSourceButton({ elementId }: { elementId: Fqn }) {
         color="gray"
         onClick={e => {
           e.stopPropagation()
-          diagramApi.getState().onOpenSourceElement?.(elementId)
+          if (props.elementId) {
+            diagramApi.getState().onOpenSource?.({
+              element: props.elementId
+            })
+          } else if (props.deploymentId) {
+            diagramApi.getState().onOpenSource?.({
+              deployment: props.deploymentId
+            })
+          }
         }}>
         <IconFileSymlink stroke={1.8} style={{ width: '70%' }} />
       </ActionIcon>

package/src/xyflow/useLayoutConstraints.ts

@@ -1,4 +1,4 @@
-import { invariant, isAncestor, type NodeId, type NonEmptyArray, nonNullable } from '@likec4/core'
+import { type NodeId, type NonEmptyArray, nonNullable } from '@likec4/core'
 import type { InternalNode, NodeChange, ReactFlowProps, XYPosition } from '@xyflow/react'
 import { getNodeDimensions } from '@xyflow/system'
 import { useMemo, useRef } from 'react'

package/src/xyflow/useXYFlowEvents.ts

@@ -1,3 +1,4 @@
+import { DiagramNode } from '@likec4/core'
 import type { ReactFlowProps } from '@xyflow/react'
 import { useMemo, useRef } from 'react'
 import { isNonNullish, isTruthy } from 'remeda'
@@ -123,9 +124,11 @@ export function useXYFlowEvents() {
           nodesSelectable,
           enableElementDetails,
           setLastClickedNode,
-          onOpenSourceElement,
+          onOpenSource,
           openOverlay
         } = diagramApi.getState()
+        const modelRef = DiagramNode.modelRef(xynode.data.element)
+        const deploymentRef = DiagramNode.deploymentRef(xynode.data.element)
         setLastClickedNode(xynode.id)
         // if we focused on a node, and clicked on another node - focus on the clicked node
         const shallChangeFocus = !!focusedNodeId && focusedNodeId !== xynode.id
@@ -134,8 +137,16 @@ export function useXYFlowEvents() {
 
         let stopPropagation = false
 
-        if (clickedRecently && !!onOpenSourceElement) {
-          onOpenSourceElement(xynode.data.element.id)
+        if (clickedRecently && !!onOpenSource && (modelRef || deploymentRef)) {
+          if (modelRef) {
+            onOpenSource({
+              element: modelRef
+            })
+          } else if (deploymentRef) {
+            onOpenSource({
+              deployment: deploymentRef
+            })
+          }
           stopPropagation = true
         }
 
@@ -152,7 +163,7 @@ export function useXYFlowEvents() {
               stopPropagation = true
               break
             }
-            case !clickedRecently && focusedNodeId === xynode.id && enableElementDetails: {
+            case !clickedRecently && modelRef && focusedNodeId === xynode.id && enableElementDetails: {
               openOverlay({
                 elementDetails: xynode.data.element.id
               })
@@ -160,7 +171,9 @@ export function useXYFlowEvents() {
               break
             }
           }
-        } else if (enableElementDetails && (clickedRecently || focusedNodeId === xynode.id) && !onNodeClick) {
+        } else if (
+          enableElementDetails && modelRef && (clickedRecently || focusedNodeId === xynode.id) && !onNodeClick
+        ) {
           openOverlay({
             elementDetails: xynode.data.element.id
           })

package/src/ui/OptionsPanel.css.ts

@@ -1,9 +0,0 @@
-import { fallbackVar, style } from '@vanilla-extract/css'
-import { mantine, vars } from '../theme-vars'
-
-export const panel = style({
-  top: fallbackVar(vars.optionsPanel.top, '1rem'),
-  right: fallbackVar(vars.optionsPanel.right, '1rem'),
-  margin: 0,
-  boxShadow: mantine.shadows.xl
-})