@likec4/diagram 1.36.0 → 1.37.0

package/src/likec4diagram/relationship-popover/actor.ts

@@ -0,0 +1,192 @@
+import { type EdgeId } from '@likec4/core/types'
+import {
+  type ActorLogicFrom,
+  type ActorRefFrom,
+  type SnapshotFrom,
+  assertEvent,
+  assign,
+  setup,
+} from 'xstate'
+
+export type RelationshipPopoverActorEvent =
+  // Events from the UI
+  | { type: 'xyedge.mouseEnter'; edgeId: EdgeId }
+  | { type: 'xyedge.mouseLeave' }
+  | { type: 'xyedge.select'; edgeId: EdgeId }
+  | { type: 'xyedge.unselect' }
+  | { type: 'close' }
+  // - From dropdown
+  | { type: 'dropdown.mouseEnter' }
+  | { type: 'dropdown.mouseLeave' }
+
+export interface RelationshipPopoverActorContext {
+  edgeId: EdgeId | null
+  /**
+   * True if the edge was selected
+   */
+  edgeSelected: boolean
+
+  /**
+   * The timeout for opening the popover
+   * If it was closed recently (<1.5s), it will be 300ms
+   * Otherwise, it will be 800ms
+   */
+  openTimeout: number
+}
+
+const _actorLogic = setup({
+  types: {
+    context: {} as RelationshipPopoverActorContext,
+    events: {} as RelationshipPopoverActorEvent,
+    tags: 'opened',
+  },
+  delays: {
+    'open timeout': ({ context }) => context.openTimeout,
+    'close timeout': 600,
+    'long idle': 1500,
+  },
+  actions: {
+    'update edgeId': assign(({ context, event }) => {
+      assertEvent(event, ['xyedge.select', 'xyedge.mouseEnter'])
+      return {
+        edgeId: event.edgeId,
+        edgeSelected: context.edgeSelected || event.type === 'xyedge.select',
+      }
+    }),
+    'increase open timeout': assign(() => ({
+      openTimeout: 800,
+    })),
+    'decrease open timeout': assign(() => ({
+      openTimeout: 300,
+    })),
+    'reset edgeId': assign({
+      edgeId: null,
+      edgeSelected: false,
+    }),
+  },
+  guards: {
+    'edge was selected': ({ context }) => context.edgeSelected,
+    'edge was hovered': ({ context }) => !context.edgeSelected,
+  },
+}).createMachine({
+  id: 'breadcrumbs',
+  context: () => ({
+    edgeId: null,
+    edgeSelected: false,
+    openTimeout: 800,
+  }),
+  initial: 'idle',
+  on: {
+    'close': {
+      target: '#idle',
+      actions: [
+        'reset edgeId',
+        'increase open timeout',
+      ],
+    },
+  },
+  states: {
+    idle: {
+      id: 'idle',
+      on: {
+        'xyedge.mouseEnter': {
+          target: 'opening',
+          actions: 'update edgeId',
+        },
+        'xyedge.select': {
+          target: 'active',
+          actions: 'update edgeId',
+        },
+      },
+      after: {
+        'long idle': {
+          actions: 'increase open timeout',
+        },
+      },
+    },
+    opening: {
+      on: {
+        'xyedge.mouseLeave': {
+          target: 'idle',
+        },
+        'xyedge.select': {
+          target: 'active',
+          actions: 'update edgeId',
+        },
+      },
+      after: {
+        'open timeout': {
+          actions: 'decrease open timeout',
+          target: 'active',
+        },
+      },
+    },
+    active: {
+      tags: ['opened'],
+      initial: 'opened',
+      exit: 'reset edgeId',
+      on: {
+        'xyedge.unselect': {
+          target: 'idle',
+          actions: 'increase open timeout',
+        },
+        'xyedge.select': {
+          actions: 'update edgeId',
+        },
+      },
+      states: {
+        opened: {
+          on: {
+            'dropdown.mouseEnter': {
+              target: 'hovered',
+            },
+            'xyedge.mouseLeave': {
+              guard: 'edge was hovered',
+              target: 'closing',
+            },
+          },
+        },
+        hovered: {
+          on: {
+            'dropdown.mouseLeave': [
+              {
+                guard: 'edge was selected',
+                target: 'opened',
+              },
+              {
+                target: 'closing',
+              },
+            ],
+          },
+        },
+        closing: {
+          on: {
+            'xyedge.mouseEnter': {
+              guard: 'edge was hovered',
+              target: 'opened',
+              actions: 'update edgeId',
+            },
+            'xyedge.select': {
+              target: 'opened',
+              actions: 'update edgeId',
+            },
+            'dropdown.mouseEnter': {
+              target: 'hovered',
+            },
+          },
+          after: {
+            'close timeout': {
+              target: '#idle',
+            },
+          },
+        },
+      },
+    },
+  },
+})
+
+export interface RelationshipPopoverActorLogic extends ActorLogicFrom<typeof _actorLogic> {}
+export const RelationshipPopoverActorLogic: RelationshipPopoverActorLogic = _actorLogic
+
+export type RelationshipPopoverActorSnapshot = SnapshotFrom<RelationshipPopoverActorLogic>
+export interface RelationshipPopoverActorRef extends ActorRefFrom<RelationshipPopoverActorLogic> {}

package/src/likec4diagram/{custom/edges/RelationshipsDropdownMenu.css.ts → relationship-popover/styles.css.ts}

@@ -1,15 +1,5 @@
 import { css } from '@likec4/styles/css'
 
-export const menuDropdown = css({
-  overflowY: 'scroll',
-  minWidth: '250px',
-  maxWidth: 'min(90vw, 500px)',
-})
-
-export const menuItemRelationship = css({
-  gap: '1',
-})
-
 export const endpoint = css({
   display: 'block',
   fontSize: 'xxs',
@@ -24,17 +14,11 @@ export const endpoint = css({
     _light: `[color-mix(in srgb, var(--likec4-palette-stroke), {colors.likec4.mixColor} 60%)]`,
     _dark: 'var(--likec4-palette-loContrast)',
   },
-  // _dark: {
-  //   background: `var(--likec4-palette-fill)/60`,
-  // },
 })
 
 export const title = css({
   whiteSpaceCollapse: 'preserve-breaks',
-  fontSize: 'xs',
-})
-
-export const arrowFromTo = css({
-  whiteSpaceCollapse: 'preserve-breaks',
-  fontSize: 'xs',
+  fontSize: 'sm',
+  lineHeight: 'sm',
+  userSelect: 'all',
 })

package/src/likec4diagram/ui/diagram-title/DiagramTitlePanel.tsx

@@ -1,4 +1,3 @@
-import { RichText } from '@likec4/core/types'
 import { cx as clsx } from '@likec4/styles/css'
 import { Button, Card, CardSection, Group, Spoiler, Stack, Text } from '@mantine/core'
 import { useLocalStorage } from '@mantine/hooks'
@@ -7,7 +6,7 @@ import { AnimatePresence, m } from 'motion/react'
 import { MarkdownBlock } from '../../../base/primitives'
 import { Link } from '../../../components/Link'
 import { useDiagramContext } from '../../../hooks/useDiagram'
-import { useCurrentViewModel } from '../../../likec4model'
+import { useOptionalCurrentViewModel } from '../../../likec4model/useCurrentViewModel'
 import type { DiagramContext } from '../../../state/types'
 import * as styles from './DiagramTitlePanel.css'
 
@@ -22,13 +21,13 @@ function selector(context: DiagramContext) {
 }
 
 export function DiagramTitlePanel() {
-  const view = useCurrentViewModel()
+  const view = useOptionalCurrentViewModel()
   const { isNotActiveWalkthrough } = useDiagramContext(selector)
   const [isCollapsed, setCollapsed] = useLocalStorage({
     key: 'diagram-title-webview-collapsed',
     defaultValue: false,
   })
-  const title = view.title ?? 'untitled'
+  const title = view?.title ?? 'untitled'
   const toggle = () => setCollapsed(v => !v)
 
   return (
@@ -49,7 +48,7 @@ export function DiagramTitlePanel() {
         </div>
       </ViewportPortal> */
       }
-      {isNotActiveWalkthrough && (
+      {view && isNotActiveWalkthrough && (
         <m.div
           initial={{ opacity: 0.05, scale: 0.7 }}
           animate={{ opacity: 1, scale: 1 }}

package/src/likec4diagram/useLayoutConstraints.ts

@@ -271,7 +271,6 @@ export function useLayoutConstraints(): LayoutConstraints {
       },
       onNodeDragStop: (_event) => {
         moved = Math.abs(_event.clientX - initial.x) > 4 || Math.abs(_event.clientY - initial.y) > 4
-        console.log('moved', moved)
         if (wasPending || moved) {
           diagram.scheduleSaveManualLayout()
         }

package/src/likec4model/{LikeC4ModelContext.ts → LikeC4ModelContext.tsx}

@@ -1,8 +1,16 @@
 import type { LikeC4Model, LikeC4ViewModel } from '@likec4/core/model'
 import type { aux, DiagramView } from '@likec4/core/types'
-import { createContext } from 'react'
+import { type PropsWithChildren, createContext, useContext } from 'react'
 
 export const LikeC4ModelContext = createContext<LikeC4Model<any> | null>(null)
 
 export type CurrentViewModel = LikeC4ViewModel<aux.UnknownLayouted, DiagramView<aux.UnknownLayouted>>
 export const CurrentViewModelContext = createContext<CurrentViewModel | null>(null)
+
+export function EnsureCurrentViewModel({ children }: PropsWithChildren) {
+  const viewmodel = useContext(CurrentViewModelContext)
+  if (!viewmodel) {
+    return null
+  }
+  return <>{children}</>
+}

package/src/likec4model/useCurrentViewModel.ts

@@ -1,6 +1,10 @@
 import { useContext } from 'react'
 import { type CurrentViewModel, CurrentViewModelContext } from './LikeC4ModelContext'
 
+export function useOptionalCurrentViewModel(): CurrentViewModel | null {
+  return useContext(CurrentViewModelContext)
+}
+
 export function useCurrentViewModel(): CurrentViewModel {
   const vm = useContext(CurrentViewModelContext)
   if (!vm) {

package/src/likec4model/useLikeC4ElementsTree.ts

@@ -1,6 +1,6 @@
+import { compareNatural } from '@likec4/core'
 import { type LikeC4Model } from '@likec4/core/model'
 import { type Fqn, type ViewId } from '@likec4/core/types'
-import { compareNatural } from '@likec4/core/utils'
 import { useMemo } from 'react'
 import { useLikeC4Model } from './useLikeC4Model'
 

package/src/navigationpanel/NavigationPanelDropdown.tsx

@@ -1,6 +1,6 @@
+import { compareNaturalHierarchically, ifilter, ifirst, nonexhaustive, toArray } from '@likec4/core'
 import { type LikeC4ViewsFolder, LikeC4ViewModel, normalizeViewPath, VIEW_FOLDERS_SEPARATOR } from '@likec4/core/model'
 import type { ViewId } from '@likec4/core/types'
-import { compareNaturalHierarchically, ifilter, ifirst, nonexhaustive, toArray } from '@likec4/core/utils'
 import { css, cx } from '@likec4/styles/css'
 import { Box, HStack, VStack } from '@likec4/styles/jsx'
 import { hstack, vstack } from '@likec4/styles/patterns'
@@ -155,7 +155,6 @@ function SearchResults({ searchQuery }: { searchQuery: string }) {
             view={v}
             highlight={highlight}
             onClick={e => {
-              console.log('click')
               e.stopPropagation()
               actor.selectView(v.id)
             }}

package/src/navigationpanel/actor.ts

@@ -1,4 +1,4 @@
-import { ViewId } from '@likec4/core/types'
+import type { ViewId } from '@likec4/core/types'
 import { isEmpty } from 'remeda'
 import {
   type ActorLogicFrom,
@@ -143,7 +143,7 @@ const _actorLogic = setup({
       assertEvent(event, 'select.view')
       return {
         type: 'navigateTo' as const,
-        viewId: ViewId(event.viewId),
+        viewId: event.viewId,
       }
     }),
   },

package/src/navigationpanel/controls/NavigationButtons.tsx

@@ -17,11 +17,7 @@ export const NavigationButtons = () => {
     <m.div
       layout="position"
       className={hstack({
-        gap: '[1px]',
-        display: {
-          base: 'none',
-          '@likec4-root/sm': 'flex',
-        },
+        gap: '0.5',
       })}>
       <PanelActionIcon
         disabled={!hasStepBack}

package/src/navigationpanel/controls/OpenSource.tsx

@@ -21,7 +21,7 @@ export const OpenSource = () => {
           e.stopPropagation()
           onOpenSource?.({ view: viewId })
         }}
-        children={<IconFileSymlink stroke={1.5} style={{ width: '65%' }} />}
+        children={<IconFileSymlink style={{ width: '60%', height: '60%' }} />}
       />
     </Tooltip>
   )

package/src/navigationpanel/controls/ViewDetailsCard.tsx

@@ -137,6 +137,8 @@ const ViewDetailsCardDropdown = ({
           maxHeight: 'calc(100cqh - 100px)',
           width: 'max-content',
           cursor: 'default',
+          overflow: 'auto',
+          overscrollBehavior: 'contain',
           '@/sm': {
             minWidth: 400,
             maxWidth: 550,

package/src/overlays/relationship-details/layout-to-xyflow.ts

@@ -150,7 +150,6 @@ export function layoutResultToXYFlow(
       target: ns + target,
       sourceHandle: edge.sourceHandle,
       targetHandle: edge.targetHandle,
-      zIndex: ZIndexes.Edge,
       // selectable: selectable,
       // hidden: !visiblePredicate(edge),
       deletable: false,

package/src/overlays/relationship-details/layout.ts

@@ -16,12 +16,13 @@ import type {
 } from '@likec4/core/types'
 
 import dagre, { type EdgeConfig, type GraphLabel } from '@dagrejs/dagre'
-import { invariant, RichText } from '@likec4/core'
-import type { AnyAux, ElementModel, LikeC4ViewModel, RelationshipModel } from '@likec4/core/model'
 import {
   DefaultMap,
   ifind,
-} from '@likec4/core/utils'
+  invariant,
+  RichText,
+} from '@likec4/core'
+import type { AnyAux, ElementModel, LikeC4ViewModel, RelationshipModel } from '@likec4/core/model'
 import {
   filter,
   find,

package/src/overlays/relationships-browser/custom/nodeTypes.tsx

@@ -1,10 +1,11 @@
 import { Handle } from '@xyflow/react'
 import { Position } from '@xyflow/system'
+import type { FC } from 'react'
 import type { NodeProps } from '../../../base'
 import {
+  CompoundDetailsButton,
   CompoundNodeContainer,
   CompoundTitle,
-  customNode,
   ElementDetailsButton,
   ElementNodeContainer,
   ElementShape,
@@ -17,6 +18,12 @@ import type { RelationshipsBrowserTypes } from '../_types'
 import { ElementActions } from './ElementActions'
 import { EmptyNode as EmptyNodeRender } from './EmptyNode'
 
+type NodeTypes = {
+  element: FC<NodeProps<RelationshipsBrowserTypes.ElementNodeData>>
+  compound: FC<NodeProps<RelationshipsBrowserTypes.CompoundNodeData>>
+  empty: FC<NodeProps<RelationshipsBrowserTypes.EmptyNodeData>>
+}
+
 const ElementDetailsButtonWithHandler = (
   props: NodeProps<RelationshipsBrowserTypes.ElementNodeData | RelationshipsBrowserTypes.CompoundNodeData>,
 ) => {
@@ -33,7 +40,7 @@ const ElementDetailsButtonWithHandler = (
   )
 }
 
-export const ElementNode = customNode<RelationshipsBrowserTypes.ElementNodeData>((props) => {
+export const ElementNode: NodeTypes['element'] = (props) => {
   const { enableElementTags } = useEnabledFeatures()
   return (
     <ElementNodeContainer key={props.id} layoutId={props.id} nodeProps={props}>
@@ -45,21 +52,28 @@ export const ElementNode = customNode<RelationshipsBrowserTypes.ElementNodeData>
       <ElementPorts {...props} />
     </ElementNodeContainer>
   )
-})
+}
 
-export const CompoundNode = customNode<RelationshipsBrowserTypes.CompoundNodeData>((props) => {
+export const CompoundNode: NodeTypes['compound'] = (props) => {
+  const diagram = useDiagram()
   return (
     <CompoundNodeContainer key={props.id} layoutId={props.id} nodeProps={props}>
-      <ElementDetailsButtonWithHandler {...props} />
       <CompoundTitle {...props} />
+      <CompoundDetailsButton
+        {...props}
+        onClick={e => {
+          e.stopPropagation()
+          diagram.openElementDetails(props.data.fqn)
+        }}
+      />
       <CompoundPorts {...props} />
     </CompoundNodeContainer>
   )
-})
+}
 
-export const EmptyNode = customNode<RelationshipsBrowserTypes.EmptyNodeData>((props) => {
+export const EmptyNode: NodeTypes['empty'] = (props) => {
   return <EmptyNodeRender {...props} />
-})
+}
 
 type ElementPortsProps = NodeProps<
   Pick<

package/src/overlays/relationships-browser/useViewToNodesEdges.ts

@@ -177,7 +177,6 @@ export function viewToNodesEdge(
       target: ns + target,
       sourceHandle: edge.sourceHandle,
       targetHandle: edge.targetHandle,
-      zIndex: ZIndexes.Edge,
       // selectable: selectable,
       // hidden: !visiblePredicate(edge),
       // deletable: false,

package/src/state/DiagramActorProvider.tsx

@@ -1,14 +1,13 @@
-import type { DiagramView, WhereOperator } from '@likec4/core/types'
+import type { DiagramView, ViewId, WhereOperator } from '@likec4/core/types'
 import { useCustomCompareEffect } from '@react-hookz/web'
 import { useActorRef, useSelector } from '@xstate/react'
 import { useStoreApi } from '@xyflow/react'
 import { deepEqual, shallowEqual } from 'fast-equals'
-import { type PropsWithChildren, useEffect, useRef, useState } from 'react'
+import { type PropsWithChildren, useEffect, useRef } from 'react'
 import { ErrorBoundary } from '../components/ErrorFallback'
 import { useDiagramEventHandlers } from '../context/DiagramEventHandlers'
 import { DiagramFeatures, useEnabledFeatures } from '../context/DiagramFeatures'
 import { DiagramActorContextProvider } from '../hooks/safeContext'
-import { useCurrentViewId } from '../hooks/useCurrentViewId'
 import type { ViewPadding } from '../LikeC4Diagram.props'
 import type { Types } from '../likec4diagram/types'
 import { useViewToNodesEdges } from '../likec4diagram/useViewToNodesEdges'
@@ -114,7 +113,7 @@ export function DiagramActorProvider({
     <DiagramActorContextProvider value={actorRef}>
       <DiagramFeatures overrides={toggledFeatures}>
         <ErrorBoundary>
-          <CurrentViewModelProvider>
+          <CurrentViewModelProvider viewId={view.id}>
             {children}
           </CurrentViewModelProvider>
         </ErrorBoundary>
@@ -125,28 +124,12 @@ export function DiagramActorProvider({
 
 function CurrentViewModelProvider({
   children,
-}: PropsWithChildren) {
-  const viewId = useCurrentViewId()
+  viewId,
+}: PropsWithChildren<{
+  viewId: ViewId
+}>) {
   const likec4model = useLikeC4Model()
-  const [viewmodel, setViewmodel] = useState(() => likec4model.view(viewId))
-
-  useEffect(() => {
-    setViewmodel(current => {
-      const nextviewmodel = likec4model.findView(viewId)
-      if (!nextviewmodel) {
-        console.error(`View "${viewId}" not found in likec4model, current viewmodel: ${current.id}`, {
-          currentViewModel: current,
-          likec4model,
-        })
-        return current
-      }
-      return nextviewmodel
-    })
-  }, [likec4model, viewId])
-
-  if (!viewmodel.isDiagram()) {
-    console.warn(`View "${viewId}" is not diagram.\nMake sure you have LikeC4ModelProvider with layouted model.`)
-  }
+  const viewmodel = likec4model.findView(viewId)
   return (
     <CurrentViewModelContext.Provider value={viewmodel}>
       {children}

package/src/state/assign.ts

@@ -277,23 +277,37 @@ export function navigateForward({ context }: ActionArg): Partial<DiagramContext>
 
 export function updateNodeData({ context, event }: ActionArg): Partial<DiagramContext> {
   assertEvent(event, 'update.nodeData')
-  const xynodes = context.xynodes.map((node): Types.Node =>
-    node.id !== event.nodeId ? node : (({
+  const xynodes = context.xynodes.map((node): Types.Node => {
+    if (node.id !== event.nodeId) {
+      return node
+    }
+    const data = mergeDeep(node.data as any, event.data as any)
+    if (eq(data, node.data)) {
+      return node
+    }
+    return {
       ...node,
-      data: mergeDeep(node.data as any, event.data as any),
-    }) as Types.Node)
-  )
+      data,
+    } as Types.Node
+  })
   return { xynodes }
 }
 
 export function updateEdgeData({ context, event }: ActionArg): Partial<DiagramContext> {
   assertEvent(event, 'update.edgeData')
-  const xyedges = context.xyedges.map((edge): Types.Edge =>
-    edge.id !== event.edgeId ? edge : (({
+  const xyedges = context.xyedges.map((edge): Types.Edge => {
+    if (edge.id !== event.edgeId) {
+      return edge
+    }
+    const data = mergeDeep(edge.data as any, event.data as any)
+    if (eq(data, edge.data)) {
+      return edge
+    }
+    return {
       ...edge,
-      data: mergeDeep(edge.data as any, event.data as any),
-    }) as Types.Edge)
-  )
+      data,
+    } as Types.Edge
+  })
   return { xyedges }
 }