@likec4/diagram 1.26.2 → 1.27.1

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

@@ -1,4 +1,4 @@
-import { type BBox, type DiagramView, type Fqn, delay, invariant, nonNullable } from '@likec4/core'
+import { type BBox, type Fqn, type ViewId, delay, invariant, nonNullable } from '@likec4/core'
 import {
   type EdgeChange,
   type NodeChange,
@@ -44,54 +44,6 @@ const findRootSubject = (nodes: RelationshipsBrowserTypes.Node[]) =>
 
 export type XYStoreApi = ReturnType<typeof useStoreApi<RelationshipsBrowserTypes.Node, RelationshipsBrowserTypes.Edge>>
 
-export type Input = {
-  subject: Fqn
-  scope?: DiagramView | null
-  closeable?: boolean
-  enableNavigationMenu?: boolean
-  // parentRef?: AnyActorRef| null
-}
-
-export type Context = Readonly<
-  Input & {
-    closeable: boolean
-    enableNavigationMenu: boolean
-    // parentRef: AnyActorRef | null
-    xyflow: XYFLowInstance | null
-    xystore: XYStoreApi | null
-    layouted: LayoutRelationshipsViewResult | null
-    navigateFromNode: string | null
-    xynodes: RelationshipsBrowserTypes.Node[]
-    xyedges: RelationshipsBrowserTypes.Edge[]
-  }
->
-
-export type Events =
-  | { type: 'xyflow.init'; instance: XYFLowInstance; store: XYStoreApi }
-  | { type: 'xyflow.nodeClick'; node: RelationshipsBrowserTypes.Node }
-  | { type: 'xyflow.edgeClick'; edge: RelationshipsBrowserTypes.Edge }
-  | { type: 'xyflow.applyNodeChanges'; changes: NodeChange<RelationshipsBrowserTypes.Node>[] }
-  | { type: 'xyflow.applyEdgeChanges'; changes: EdgeChange<RelationshipsBrowserTypes.Edge>[] }
-  | { type: 'xyflow.paneClick' }
-  | { type: 'xyflow.paneDblClick' }
-  | { type: 'xyflow.resized' }
-  | { type: 'xyflow.edgeMouseEnter'; edge: RelationshipsBrowserTypes.Edge }
-  | { type: 'xyflow.edgeMouseLeave'; edge: RelationshipsBrowserTypes.Edge }
-  | { type: 'xyflow.selectionChange'; nodes: RelationshipsBrowserTypes.Node[]; edges: RelationshipsBrowserTypes.Edge[] }
-  | { type: 'dim.nonhovered.edges' }
-  | { type: 'undim.edges' }
-  | { type: 'xyflow.updateNodeInternals' }
-  | { type: 'xyflow.unmount' }
-  | { type: 'fitDiagram'; duration?: number; bounds?: BBox }
-  | { type: 'navigate.to'; subject: Fqn; fromNode?: string | undefined }
-  | {
-    type: 'update.xydata'
-    xynodes: RelationshipsBrowserTypes.Node[]
-    xyedges: RelationshipsBrowserTypes.Edge[]
-  }
-  | { type: 'update.view'; layouted: LayoutRelationshipsViewResult }
-  | { type: 'close' }
-
 export const layouter = fromPromise<{
   xyedges: RelationshipsBrowserTypes.Edge[]
   xynodes: RelationshipsBrowserTypes.Node[]
@@ -228,6 +180,59 @@ export const layouter = fromPromise<{
   return updateXYData()
 })
 
+export type Input = {
+  subject: Fqn
+  viewId: ViewId | null
+  scope: 'global' | 'view'
+  closeable?: boolean
+  enableSelectSubject?: boolean
+  enableChangeScope?: boolean
+  // parentRef?: AnyActorRef| null
+}
+
+export type Context = Readonly<{
+  subject: Fqn
+  viewId: ViewId | null
+  scope: 'global' | 'view'
+  closeable: boolean
+  enableSelectSubject: boolean
+  enableChangeScope: boolean
+  // parentRef: AnyActorRef | null
+  xyflow: XYFLowInstance | null
+  xystore: XYStoreApi | null
+  layouted: LayoutRelationshipsViewResult | null
+  navigateFromNode: string | null
+  xynodes: RelationshipsBrowserTypes.Node[]
+  xyedges: RelationshipsBrowserTypes.Edge[]
+}>
+
+export type Events =
+  | { type: 'xyflow.init'; instance: XYFLowInstance; store: XYStoreApi }
+  | { type: 'xyflow.nodeClick'; node: RelationshipsBrowserTypes.Node }
+  | { type: 'xyflow.edgeClick'; edge: RelationshipsBrowserTypes.Edge }
+  | { type: 'xyflow.applyNodeChanges'; changes: NodeChange<RelationshipsBrowserTypes.Node>[] }
+  | { type: 'xyflow.applyEdgeChanges'; changes: EdgeChange<RelationshipsBrowserTypes.Edge>[] }
+  | { type: 'xyflow.paneClick' }
+  | { type: 'xyflow.paneDblClick' }
+  | { type: 'xyflow.resized' }
+  | { type: 'xyflow.edgeMouseEnter'; edge: RelationshipsBrowserTypes.Edge }
+  | { type: 'xyflow.edgeMouseLeave'; edge: RelationshipsBrowserTypes.Edge }
+  | { type: 'xyflow.selectionChange'; nodes: RelationshipsBrowserTypes.Node[]; edges: RelationshipsBrowserTypes.Edge[] }
+  | { type: 'dim.nonhovered.edges' }
+  | { type: 'undim.edges' }
+  | { type: 'xyflow.updateNodeInternals' }
+  | { type: 'xyflow.unmount' }
+  | { type: 'fitDiagram'; duration?: number; bounds?: BBox }
+  | { type: 'navigate.to'; subject: Fqn; fromNode?: string | undefined; viewId?: ViewId | undefined }
+  | {
+    type: 'update.xydata'
+    xynodes: RelationshipsBrowserTypes.Node[]
+    xyedges: RelationshipsBrowserTypes.Edge[]
+  }
+  | { type: 'change.scope'; scope: 'global' | 'view' }
+  | { type: 'update.view'; layouted: LayoutRelationshipsViewResult }
+  | { type: 'close' }
+
 export const relationshipsBrowserLogic = setup({
   types: {
     context: {} as Context,
@@ -243,6 +248,13 @@ export const relationshipsBrowserLogic = setup({
   },
   guards: {
     isReady: ({ context }) => context.xyflow !== null && context.xystore !== null && context.layouted !== null,
+    anotherSubject: ({ context, event }) => {
+      if (event.type === 'update.view') {
+        const subject = context.layouted?.subject
+        return subject !== event.layouted.subject
+      }
+      return false
+    },
   },
   actions: {
     'xyflow.init': assign(({ event }) => {
@@ -280,10 +292,8 @@ export const relationshipsBrowserLogic = setup({
       updateNodeInternals(updates, { triggerFitView: false })
     },
     'xyflow:fitDiagram': ({ context }, params?: { duration?: number; bounds?: BBox }) => {
-      let {
-        duration = 450,
-        bounds,
-      } = params ?? {}
+      let { duration, bounds } = params ?? {}
+      duration ??= 450
       const { xyflow, xystore } = context
       invariant(xyflow, 'xyflow is not initialized')
       invariant(xystore, 'xystore is not initialized')
@@ -302,13 +312,28 @@ export const relationshipsBrowserLogic = setup({
         })
       }
     },
+    'xyflow.applyNodeChanges': assign(({ context, event }) => {
+      assertEvent(event, 'xyflow.applyNodeChanges')
+      return {
+        xynodes: applyNodeChanges(event.changes, context.xynodes),
+      }
+    }),
+    'xyflow.applyEdgeChanges': assign(({ context, event }) => {
+      assertEvent(event, 'xyflow.applyEdgeChanges')
+      return {
+        xyedges: applyEdgeChanges(event.changes, context.xyedges),
+      }
+    }),
   },
 }).createMachine({
   id: 'relationships-browser',
   context: ({ input }) => ({
-    ...input,
+    subject: input.subject,
+    viewId: input.viewId,
+    scope: input.viewId ? input.scope : 'global',
     closeable: input.closeable ?? true,
-    enableNavigationMenu: input.enableNavigationMenu ?? true,
+    enableSelectSubject: input.enableSelectSubject ?? true,
+    enableChangeScope: input.enableChangeScope ?? true,
     xyflow: null,
     xystore: null,
     layouted: null,
@@ -319,18 +344,10 @@ export const relationshipsBrowserLogic = setup({
   initial: 'initializing',
   on: {
     'xyflow.applyNodeChanges': {
-      actions: assign({
-        xynodes: ({ context, event }) => {
-          return applyNodeChanges(event.changes, context.xynodes)
-        },
-      }),
+      actions: 'xyflow.applyNodeChanges',
     },
     'xyflow.applyEdgeChanges': {
-      actions: assign({
-        xyedges: ({ context, event }) => {
-          return applyEdgeChanges(event.changes, context.xyedges)
-        },
-      }),
+      actions: 'xyflow.applyEdgeChanges',
     },
   },
   states: {
@@ -352,8 +369,8 @@ export const relationshipsBrowserLogic = setup({
       always: [{
         guard: 'isReady',
         actions: [
-          raise({ type: 'fitDiagram', duration: 0 }),
-          raise({ type: 'xyflow.updateNodeInternals' }, { delay: 100 }),
+          { type: 'xyflow:fitDiagram', params: { duration: 0 } },
+          raise({ type: 'xyflow.updateNodeInternals' }, { delay: 150 }),
         ],
         target: 'active',
       }, {
@@ -363,6 +380,62 @@ export const relationshipsBrowserLogic = setup({
     'active': {
       initial: 'idle',
       tags: ['active'],
+      on: {
+        'xyflow.nodeClick': {
+          actions: enqueueActions(({ event, enqueue }) => {
+            if ('fqn' in event.node.data) {
+              const fqn = event.node.data.fqn
+              enqueue.raise({
+                type: 'navigate.to',
+                subject: fqn,
+                fromNode: event.node.id,
+              })
+            }
+          }),
+        },
+        'navigate.to': {
+          actions: [
+            assign({
+              subject: ({ event }) => event.subject,
+              navigateFromNode: ({ event }) => event.fromNode ?? null,
+            }),
+          ],
+        },
+        'xyflow.paneDblClick': {
+          actions: 'xyflow:fitDiagram',
+        },
+        'update.view': {
+          actions: 'update.view',
+          target: '.layouting',
+        },
+        'change.scope': {
+          actions: assign({
+            scope: ({ event }) => event.scope,
+          }),
+        },
+        'xyflow.updateNodeInternals': {
+          actions: 'xyflow:updateNodeInternals',
+        },
+        'fitDiagram': {
+          actions: {
+            type: 'xyflow:fitDiagram',
+            params: prop('event'),
+          },
+        },
+        'xyflow.resized': {
+          actions: [
+            cancel('fitDiagram'),
+            raise({ type: 'fitDiagram' }, { id: 'fitDiagram', delay: 300 }),
+          ],
+        },
+        'xyflow.init': {
+          actions: 'xyflow.init',
+        },
+        'xyflow.unmount': {
+          target: 'initializing',
+        },
+        'close': 'closed',
+      },
       states: {
         'idle': {
           on: {
@@ -452,9 +525,10 @@ export const relationshipsBrowserLogic = setup({
                   xynodes: event.output.xynodes,
                   xyedges: event.output.xyedges,
                   navigateFromNode: null,
-                }), enqueue.raise({ type: 'fitDiagram' }, { id: 'fitDiagram', delay: 50 })
-                for (let i = 0; i <= 10; i++) {
-                  enqueue.raise({ type: 'xyflow.updateNodeInternals' }, { delay: 100 + i * 50 })
+                })
+                enqueue.raise({ type: 'fitDiagram' }, { id: 'fitDiagram', delay: 50 })
+                for (let i = 0; i < 6; i++) {
+                  enqueue.raise({ type: 'xyflow.updateNodeInternals' }, { delay: 100 + i * 100 })
                 }
               }),
             },
@@ -475,59 +549,6 @@ export const relationshipsBrowserLogic = setup({
           },
         },
       },
-      on: {
-        'xyflow.nodeClick': {
-          actions: enqueueActions(({ event, enqueue }) => {
-            if ('fqn' in event.node.data) {
-              const fqn = event.node.data.fqn
-              enqueue.raise({
-                type: 'navigate.to',
-                subject: fqn,
-                fromNode: event.node.id,
-              })
-            }
-          }),
-        },
-        'navigate.to': {
-          actions: [
-            assign({
-              subject: ({ event }) => event.subject,
-              navigateFromNode: ({ event }) => event.fromNode ?? null,
-            }),
-          ],
-        },
-        'xyflow.paneDblClick': {
-          actions: 'xyflow:fitDiagram',
-        },
-        'update.view': {
-          actions: assign({
-            layouted: ({ event }) => event.layouted,
-          }),
-          target: '.layouting',
-        },
-        'xyflow.updateNodeInternals': {
-          actions: 'xyflow:updateNodeInternals',
-        },
-        'fitDiagram': {
-          actions: {
-            type: 'xyflow:fitDiagram',
-            params: prop('event'),
-          },
-        },
-        'xyflow.resized': {
-          actions: [
-            cancel('fitDiagram'),
-            raise({ type: 'fitDiagram' }, { id: 'fitDiagram', delay: 300 }),
-          ],
-        },
-        'xyflow.init': {
-          actions: 'xyflow.init',
-        },
-        'xyflow.unmount': {
-          target: 'initializing',
-        },
-        'close': 'closed',
-      },
     },
     closed: {
       id: 'closed',

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

@@ -1 +1 @@
-export const ViewPadding = 0.08
+export const ViewPadding = 0.1

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

@@ -1,7 +1,7 @@
 import { Box, Text } from '@mantine/core'
 import type { NodeProps } from '../../../base'
 import type { RelationshipsBrowserTypes } from '../_types'
-import * as css from './styles.css'
+import { emptyNode } from './styles.css'
 
 type EmptyNodeProps = NodeProps<Pick<RelationshipsBrowserTypes.EmptyNodeData, 'column'>>
 
@@ -11,7 +11,7 @@ export function EmptyNode({
   },
 }: EmptyNodeProps) {
   return (
-    <Box className={css.emptyNode}>
+    <Box className={emptyNode}>
       <Text c={'dimmed'} fz={'lg'} fw={500}>No {column === 'incomers' ? 'incoming' : 'outgoing'}</Text>
     </Box>
   )

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

@@ -1,68 +1,104 @@
+import { css } from '@likec4/styles/css'
+import { Tooltip } from '@mantine/core'
 import { getBezierPath } from '@xyflow/system'
-import { customEdge, EdgeActionButton, EdgeContainer, EdgeLabel, EdgePath } from '../../../base/primitives'
+import {
+  customEdge,
+  EdgeActionButton,
+  EdgeContainer,
+  EdgeLabel,
+  EdgeLabelContainer,
+  EdgePath,
+} from '../../../base/primitives'
 import { useEnabledFeature } from '../../../context'
 import { useDiagram } from '../../../hooks/useDiagram'
 import type { RelationshipsBrowserTypes } from '../_types'
+import { useRelationshipsBrowser } from '../hooks'
 
-export const edgeTypes = {
-  relationships: customEdge<RelationshipsBrowserTypes.EdgeData>((props) => {
-    const { enableNavigateTo } = useEnabledFeature('NavigateTo')
-    const {
-      data: {
-        navigateTo,
-        relations,
-      },
-    } = props
-    const [svgPath, labelX, labelY] = getBezierPath(props)
-    const diagram = useDiagram()
+export const RelationshipEdge = customEdge<RelationshipsBrowserTypes.EdgeData>((props) => {
+  const browser = useRelationshipsBrowser()
+  const { enableNavigateTo } = useEnabledFeature('NavigateTo')
+  const {
+    id,
+    data: {
+      navigateTo,
+      relations,
+      existsInCurrentView,
+    },
+  } = props
+  const [svgPath, labelX, labelY] = getBezierPath(props)
+  const diagram = useDiagram()
+
+  const markOrange = relations.length > 1 || !existsInCurrentView
 
-    const edgeProps = relations.length > 1
-      ? {
-        ...props,
-        data: {
-          ...props.data,
-          line: 'solid',
-          color: 'amber',
-        } satisfies RelationshipsBrowserTypes.EdgeData,
-      }
-      : props
+  const edgeProps = markOrange
+    ? {
+      ...props,
+      data: {
+        ...props.data,
+        line: 'solid',
+        color: 'amber',
+      } satisfies RelationshipsBrowserTypes.EdgeData,
+    }
+    : props
 
-    return (
-      <EdgeContainer {...edgeProps}>
-        <EdgePath
-          {...edgeProps}
-          svgPath={svgPath}
-          {...relations.length > 1 && {
-            strokeWidth: 5,
-          }}
-        />
-        <EdgeLabel
-          edgeProps={edgeProps}
-          labelPosition={{
-            x: labelX,
-            y: labelY,
-            translate: 'translate(-50%, 0)',
-          }}
-          style={{
-            maxWidth: Math.min(Math.abs(props.targetX - props.sourceX - 70), 250),
-          }}>
-          {enableNavigateTo && navigateTo && (
-            <EdgeActionButton
-              {...props}
-              onClick={e => {
-                e.stopPropagation()
-                diagram.navigateTo(navigateTo)
-              }} />
-          )}
-        </EdgeLabel>
-        {
-          /* <EdgeLabel {...props}>
+  let label = (
+    <EdgeLabel
+      edgeProps={edgeProps}
+      className={css({
+        transition: 'fast',
+      })}
+    >
+      {enableNavigateTo && navigateTo && (
+        <EdgeActionButton
+          {...props}
+          onClick={e => {
+            e.stopPropagation()
+            diagram.navigateTo(navigateTo)
+          }} />
+      )}
+    </EdgeLabel>
+  )
 
-        </EdgeLabel> */
-        }
-      </EdgeContainer>
+  if (!existsInCurrentView) {
+    label = (
+      <Tooltip
+        color="orange"
+        c={'black'}
+        label="This relationship is not included in the current view"
+        // withinPortal={false}
+        portalProps={{
+          target: `#${browser.rootElementId.replaceAll(':', '\\:')}`,
+        }}
+        openDelay={800}
+      >
+        {label}
+      </Tooltip>
     )
-  }),
-} satisfies {
-  [key in RelationshipsBrowserTypes.Edge['type']]: any
-}
+  }
+
+  return (
+    <EdgeContainer key={id} {...edgeProps}>
+      <EdgePath
+        key={id}
+        {...edgeProps}
+        svgPath={svgPath}
+        {...markOrange && {
+          strokeWidth: 5,
+        }}
+      />
+      <EdgeLabelContainer
+        edgeProps={edgeProps}
+        labelPosition={{
+          x: labelX,
+          y: labelY,
+          translate: 'translate(-50%, 0)',
+        }}
+        style={{
+          maxWidth: Math.min(Math.abs(props.targetX - props.sourceX - 70), 250),
+        }}
+      >
+        {label}
+      </EdgeLabelContainer>
+    </EdgeContainer>
+  )
+})

package/src/overlays/relationships-browser/custom/index.ts

@@ -0,0 +1,2 @@
+export { RelationshipEdge } from './edgeTypes'
+export { CompoundNode, ElementNode, EmptyNode } from './nodeTypes'

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

@@ -14,7 +14,7 @@ import {
 import { useDiagram } from '../../../hooks/useDiagram'
 import type { RelationshipsBrowserTypes } from '../_types'
 import { ElementActions } from './ElementActions'
-import { EmptyNode } from './EmptyNode'
+import { EmptyNode as EmptyNodeRender } from './EmptyNode'
 
 const ElementDetailsButtonWithHandler = (
   props: NodeProps<RelationshipsBrowserTypes.ElementNodeData | RelationshipsBrowserTypes.CompoundNodeData>,
@@ -32,32 +32,31 @@ const ElementDetailsButtonWithHandler = (
   )
 }
 
-export const nodeTypes = {
-  element: customNode<RelationshipsBrowserTypes.ElementNodeData>((props) => {
-    return (
-      <ElementNodeContainer key={props.id} component={m.div} layoutId={props.id} nodeProps={props}>
-        <ElementShape {...props} />
-        <ElementTitle {...props} iconSize={40} />
-        <ElementDetailsButtonWithHandler {...props} />
-        <ElementActions {...props} />
-        <ElementPorts {...props} />
-      </ElementNodeContainer>
-    )
-  }),
+export const ElementNode = customNode<RelationshipsBrowserTypes.ElementNodeData>((props) => {
+  return (
+    <ElementNodeContainer key={props.id} component={m.div} layoutId={props.id} nodeProps={props}>
+      <ElementShape {...props} />
+      <ElementTitle {...props} iconSize={40} />
+      <ElementDetailsButtonWithHandler {...props} />
+      <ElementActions {...props} />
+      <ElementPorts {...props} />
+    </ElementNodeContainer>
+  )
+})
+
+export const CompoundNode = customNode<RelationshipsBrowserTypes.CompoundNodeData>((props) => {
+  return (
+    <CompoundNodeContainer key={props.id} layoutId={props.id} nodeProps={props}>
+      <ElementDetailsButtonWithHandler {...props} />
+      <CompoundTitle {...props} />
+      <CompoundPorts {...props} />
+    </CompoundNodeContainer>
+  )
+})
 
-  compound: customNode<RelationshipsBrowserTypes.CompoundNodeData>((props) => {
-    return (
-      <CompoundNodeContainer key={props.id} component={m.div} layoutId={props.id} nodeProps={props}>
-        <ElementDetailsButtonWithHandler {...props} />
-        <CompoundTitle {...props} />
-        <CompoundPorts {...props} />
-      </CompoundNodeContainer>
-    )
-  }),
-  empty: customNode<RelationshipsBrowserTypes.EmptyNodeData>((props) => {
-    return <EmptyNode {...props} />
-  }),
-} satisfies { [key in RelationshipsBrowserTypes.Node['type']]: any }
+export const EmptyNode = customNode<RelationshipsBrowserTypes.EmptyNodeData>((props) => {
+  return <EmptyNodeRender {...props} />
+})
 
 type ElementPortsProps = NodeProps<
   Pick<

package/src/overlays/relationships-browser/custom/styles.css.ts

@@ -1,12 +1,11 @@
-import { rem } from '@mantine/core'
-import { globalStyle, style } from '@vanilla-extract/css'
-import { mantine, transitions, vars, whereDark, xyvars } from '../../../theme-vars'
+import { css } from '@likec4/styles/css'
 
-export const emptyNode = style({
+export const emptyNode = css({
   width: '100%',
   height: '100%',
-  border: `3px dashed ${mantine.colors.defaultBorder}`,
-  borderRadius: mantine.radius.md,
+  border: `3px dashed`,
+  borderColor: `mantine.colors.defaultBorder`,
+  borderRadius: 'md',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',

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

@@ -4,6 +4,7 @@ import { useSelector } from '@xstate/react'
 import { shallowEqual } from 'fast-equals'
 import { createContext, useContext, useMemo, useTransition } from 'react'
 import type { OverlaysActorRef } from '../overlaysActor'
+import type { LayoutRelationshipsViewResult } from './-useRelationshipsView'
 import type { RelationshipsBrowserActorRef, RelationshipsBrowserSnapshot } from './actor'
 
 export const RelationshipsBrowserActorContext = createContext<RelationshipsBrowserActorRef | null>(null)
@@ -25,8 +26,23 @@ export function useRelationshipsBrowser() {
   const [, startTransition] = useTransition()
   return useMemo(() => ({
     actor,
+    get rootElementId(): string {
+      return `relationships-browser-${actor.sessionId}`
+    },
     getState: () => actor.getSnapshot().context,
     send: actor.send,
+    updateView: (layouted: LayoutRelationshipsViewResult) => {
+      actor.send({
+        type: 'update.view',
+        layouted,
+      })
+    },
+    changeScope: (scope: 'global' | 'view') => {
+      actor.send({
+        type: 'change.scope',
+        scope,
+      })
+    },
     navigateTo: (subject: Fqn, fromNode?: string) => {
       startTransition(() => {
         actor.send({
@@ -37,9 +53,7 @@ export function useRelationshipsBrowser() {
       })
     },
     fitDiagram: () => {
-      startTransition(() => {
-        actor.send({ type: 'fitDiagram' })
-      })
+      actor.send({ type: 'fitDiagram' })
     },
     close: () => {
       if (actor._parent) {