@likec4/diagram 1.27.1 → 1.27.3

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

@@ -26,10 +26,11 @@ import { Base } from '../../base'
 import { MinZoom, ZIndexes } from '../../base/const'
 import { updateEdges } from '../../base/updateEdges'
 import { updateNodes } from '../../base/updateNodes'
+import { typedSystem } from '../../state/utils'
 import { centerXYInternalNode } from '../../utils'
-import type { LayoutRelationshipsViewResult } from './-useRelationshipsView'
 import type { RelationshipsBrowserTypes } from './_types'
 import { ViewPadding } from './const'
+import type { LayoutRelationshipsViewResult } from './layout'
 import { viewToNodesEdge } from './useViewToNodesEdges'
 
 type XYFLowInstance = ReactFlowInstance<RelationshipsBrowserTypes.Node, RelationshipsBrowserTypes.Edge>
@@ -247,6 +248,7 @@ export const relationshipsBrowserLogic = setup({
     layouter,
   },
   guards: {
+    hasViewId: ({ context }) => context.viewId !== null,
     isReady: ({ context }) => context.xyflow !== null && context.xystore !== null && context.layouted !== null,
     anotherSubject: ({ context, event }) => {
       if (event.type === 'update.view') {
@@ -393,10 +395,27 @@ export const relationshipsBrowserLogic = setup({
             }
           }),
         },
+        'xyflow.edgeClick': {
+          guard: 'hasViewId',
+          actions: enqueueActions(({ event, context, system, enqueue }) => {
+            if (
+              event.edge.selected || event.edge.data.relations.length > 1
+              // (context.xyedges.some(e => e.data.dimmed === true || e.data.dimmed === 'immediate') && !event.edge.data.dimmed)
+            ) {
+              enqueue.sendTo(typedSystem(system).overlaysActorRef!, {
+                type: 'open.relationshipDetails',
+                viewId: context.viewId!,
+                source: event.edge.data.sourceFqn,
+                target: event.edge.data.targetFqn,
+              })
+            }
+          }),
+        },
         'navigate.to': {
           actions: [
             assign({
               subject: ({ event }) => event.subject,
+              viewId: ({ event, context }) => event.viewId ?? context.viewId ?? null,
               navigateFromNode: ({ event }) => event.fromNode ?? null,
             }),
           ],
@@ -443,7 +462,7 @@ export const relationshipsBrowserLogic = setup({
               actions: [
                 assign({
                   xyedges: ({ context, event }) => {
-                    const hasDimmed = context.xyedges.some(edge => edge.data.dimmed === true)
+                    const hasDimmed = context.xyedges.some(edge => edge.data.dimmed !== false || edge.selected)
                     return context.xyedges.map(edge => {
                       if (edge.id === event.edge.id) {
                         return Base.setData(edge, {
@@ -451,25 +470,26 @@ export const relationshipsBrowserLogic = setup({
                           dimmed: false,
                         })
                       }
-                      return hasDimmed && !edge.data.dimmed && !edge.selected ? Base.setDimmed(edge, 'immediate') : edge
+                      return hasDimmed && !edge.selected ? Base.setDimmed(edge, 'immediate') : edge
                     })
                   },
                 }),
                 cancel('undim.edges'),
                 cancel('dim.nonhovered.edges'),
-                raise({ type: 'dim.nonhovered.edges' }, { id: 'dim.nonhovered.edges', delay: 100 }),
+                raise({ type: 'dim.nonhovered.edges' }, { id: 'dim.nonhovered.edges', delay: 200 }),
               ],
             },
             'xyflow.edgeMouseLeave': {
               actions: [
                 assign({
-                  xyedges: ({ context, event }) =>
-                    context.xyedges.map(edge => {
+                  xyedges: ({ context, event }) => {
+                    return context.xyedges.map(edge => {
                       if (edge.id === event.edge.id) {
                         return Base.setHovered(edge, false)
                       }
                       return edge
-                    }),
+                    })
+                  },
                 }),
                 cancel('dim.nonhovered.edges'),
                 raise({ type: 'undim.edges' }, { id: 'undim.edges', delay: 400 }),
@@ -477,18 +497,23 @@ export const relationshipsBrowserLogic = setup({
             },
             'dim.nonhovered.edges': {
               actions: assign({
-                xyedges: ({ context }) => context.xyedges.map(edge => Base.setDimmed(edge, edge.data.hovered !== true)),
+                xyedges: ({ context }) =>
+                  context.xyedges.map(edge =>
+                    edge.data.hovered
+                      ? edge
+                      : Base.setDimmed(edge, edge.data.dimmed === 'immediate' ? 'immediate' : true)
+                  ),
               }),
             },
             'undim.edges': {
               actions: assign({
                 xyedges: ({ context }) => {
-                  const hasSelected = context.xyedges.some(edge => edge.selected === true)
-                  if (hasSelected) {
-                    return context.xyedges.map(edge =>
-                      Base.setDimmed(edge, edge.selected !== true ? edge.data.dimmed || 'immediate' : false)
-                    )
-                  }
+                  // const hasSelected = context.xyedges.some(edge => edge.selected === true)
+                  // if (hasSelected) {
+                  //   return context.xyedges.map(edge =>
+                  //     Base.setDimmed(edge, edge.selected !== true ? 'immediate' : false)
+                  //   )
+                  // }
                   return context.xyedges.map(Base.setDimmed(false))
                 },
               }),

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

@@ -1,22 +1,24 @@
 import { IconFileSymlink, IconTransform, IconZoomScan } from '@tabler/icons-react'
 import { ElementActionButtons } from '../../../base/primitives'
 import type { NodeProps } from '../../../base/types'
-import { useEnabledFeature } from '../../../context/DiagramFeatures'
+import { useEnabledFeatures } from '../../../context/DiagramFeatures'
+import { useCurrentViewId } from '../../../hooks/useCurrentViewId'
 import { useDiagram } from '../../../hooks/useDiagram'
 import type { RelationshipsBrowserTypes as Types } from '../_types'
 import { useRelationshipsBrowser, useRelationshipsBrowserState } from '../hooks'
 
 type ElementActionsProps = NodeProps<Types.ElementNodeData>
 export const ElementActions = (props: ElementActionsProps) => {
-  const { enableNavigateTo, enableVscode } = useEnabledFeature('NavigateTo', 'Vscode')
+  const { enableNavigateTo, enableVscode } = useEnabledFeatures()
   const diagram = useDiagram()
+  const currentViewId = useCurrentViewId()
   const browser = useRelationshipsBrowser()
   const subject = useRelationshipsBrowserState(s => s.context.subject)
 
   const buttons = [] as ElementActionButtons.Item[]
 
   const { navigateTo, fqn } = props.data
-  if (navigateTo && enableNavigateTo) {
+  if (navigateTo && enableNavigateTo && currentViewId !== navigateTo) {
     buttons.push({
       key: 'navigate',
       icon: <IconZoomScan />,

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

@@ -67,7 +67,7 @@ export const RelationshipEdge = customEdge<RelationshipsBrowserTypes.EdgeData>((
         label="This relationship is not included in the current view"
         // withinPortal={false}
         portalProps={{
-          target: `#${browser.rootElementId.replaceAll(':', '\\:')}`,
+          target: `#${browser.rootElementId}`,
         }}
         openDelay={800}
       >

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

@@ -2,10 +2,10 @@ import { type Fqn, nonNullable } from '@likec4/core'
 import { useCallbackRef } from '@mantine/hooks'
 import { useSelector } from '@xstate/react'
 import { shallowEqual } from 'fast-equals'
-import { createContext, useContext, useMemo, useTransition } from 'react'
+import { createContext, useContext, useMemo } from 'react'
 import type { OverlaysActorRef } from '../overlaysActor'
-import type { LayoutRelationshipsViewResult } from './-useRelationshipsView'
 import type { RelationshipsBrowserActorRef, RelationshipsBrowserSnapshot } from './actor'
+import type { LayoutRelationshipsViewResult } from './layout'
 
 export const RelationshipsBrowserActorContext = createContext<RelationshipsBrowserActorRef | null>(null)
 
@@ -23,11 +23,10 @@ export function useRelationshipsBrowserState<T>(
 
 export function useRelationshipsBrowser() {
   const actor = useRelationshipsBrowserActor()
-  const [, startTransition] = useTransition()
   return useMemo(() => ({
     actor,
     get rootElementId(): string {
-      return `relationships-browser-${actor.sessionId}`
+      return `relationships-browser-${actor.sessionId.replaceAll(':', '_')}`
     },
     getState: () => actor.getSnapshot().context,
     send: actor.send,
@@ -44,12 +43,10 @@ export function useRelationshipsBrowser() {
       })
     },
     navigateTo: (subject: Fqn, fromNode?: string) => {
-      startTransition(() => {
-        actor.send({
-          type: 'navigate.to',
-          subject,
-          fromNode,
-        })
+      actor.send({
+        type: 'navigate.to',
+        subject,
+        fromNode,
       })
     },
     fitDiagram: () => {

package/src/overlays/relationships-browser/{-useRelationshipsView.ts → layout.ts}

@@ -55,7 +55,7 @@ const Sizes = {
     edgesep: 25,
   } satisfies GraphLabel,
   edgeLabel: {
-    width: 120,
+    width: 140,
     height: 10,
     minlen: 1,
     weight: 1,
@@ -97,19 +97,6 @@ function createGraph() {
   g.setDefaultEdgeLabel(() => ({ ...Sizes.edgeLabel }))
   g.setDefaultNodeLabel(() => ({}))
 
-  // columns.reduce((prev, column) => {
-  //   const c = graphColumn(column)
-  //   g.setNode(c.id, {})
-  //   g.setNode(c.anchor, { width: 40, height: 2 })
-  //   g.setParent(c.anchor, c.id)
-  //   if (prev) {
-  //     g.setEdge(prev, c.anchor, {
-  //       width: 0
-  //     })
-  //   }
-  //   return c.anchor
-  // }, null as string | null)
-
   return g
 }
 type G = ReturnType<typeof createGraph>
@@ -212,12 +199,14 @@ export type LayoutRelationshipsViewResult = {
 export namespace LayoutRelationshipsViewResult {
   export const Empty = '@empty' as ElementKind
 
-  export type Node = DiagramNode & {
+  export type Node = Omit<DiagramNode, 'deploymentRef' | 'inEdges' | 'outEdges'> & {
     column: RelationshipsBrowserTypes.Column
     ports: RelationshipsBrowserTypes.Ports
     existsInCurrentView: boolean
   }
   export type Edge = DiagramEdge & {
+    sourceFqn: Fqn
+    targetFqn: Fqn
     sourceHandle: string
     targetHandle: string
     existsInCurrentView: boolean
@@ -239,6 +228,8 @@ export function layoutRelationshipsView(
     name: string
     source: string // node id
     target: string // node id
+    sourceFqn: Fqn
+    targetFqn: Fqn
     sourceHandle: string
     targetHandle: string
     relations: RelationshipModel[]
@@ -250,6 +241,8 @@ export function layoutRelationshipsView(
         toArray(data.incoming),
         map(r => ({
           id: r.source.id,
+          sourceFqn: r.source.id,
+          targetFqn: r.target.id,
           source: incomers.byId(r.source.id).graph,
           target: subjects.byId(r.target.id).graph,
           relation: r,
@@ -259,6 +252,8 @@ export function layoutRelationshipsView(
         toArray(data.outgoing),
         map(r => ({
           id: r.target.id,
+          sourceFqn: r.source.id,
+          targetFqn: r.target.id,
           source: subjects.byId(r.source.id).graph,
           target: outgoers.byId(r.target.id).graph,
           relation: r,
@@ -284,6 +279,8 @@ export function layoutRelationshipsView(
       }, name)
       edges.push({
         name,
+        sourceFqn: grouped[0].sourceFqn,
+        targetFqn: grouped[0].targetFqn,
         source: source.id,
         sourceHandle: source.id + '_out' + (g.node(source.id).outPorts.length - 1),
         target: target.id,
@@ -358,7 +355,7 @@ export function layoutRelationshipsView(
     for (const edge of g.edges()) {
       g.setEdge(edge, {
         ...Sizes.edgeLabel,
-        width: edgeCount > 30 ? 800 : 400,
+        width: edgeCount > 25 ? 800 : 400,
       })
     }
   }
@@ -444,17 +441,6 @@ export function layoutRelationshipsView(
   const [subject] = [...subjects.root]
   invariant(subject, 'Subjects should not be empty')
   let subjectBounds = nodeBounds(subjects.graphNodes.get(subject.id).id)
-  // let subjectBounds = rest.reduce((bounds, el) => {
-  //   const elBounds = nodeBounds(subjects.graphNodes.get(el.id).id)
-  //   return {
-  //     position: {
-  //       x: Math.min(bounds.position.x, elBounds.position.x),
-  //       y: Math.min(bounds.position.y, elBounds.position.y),
-  //     },
-  //     width: Math.max(bounds.width, elBounds.width),
-  //     height: Math.max(bounds.height, elBounds.height),
-  //   }
-  // }, nodeBounds(subjects.graphNodes.get(subject.id).id))
 
   const nodes = nodeIds.map(({ id }): LayoutRelationshipsViewResult.Node => {
     const { element, inPorts, outPorts, column } = g.node(id)
@@ -493,8 +479,6 @@ export function layoutRelationshipsView(
           width: width,
           height: height,
         },
-        inEdges: [],
-        outEdges: [],
         children: [],
         width,
         height,
@@ -513,7 +497,7 @@ export function layoutRelationshipsView(
     minX = Math.min(minX, position.x)
     minY = Math.min(minY, position.y)
 
-    const navigateTo = element.defaultView?.id ?? null
+    const navigateTo = scope ? ifind(element.scopedViews(), v => v.id !== scope.id)?.id ?? null : null
 
     const inheritFromNode = scope?.findNodeWithElement(element.id)
     const scopedAncestor = scope && !inheritFromNode
@@ -547,8 +531,6 @@ export function layoutRelationshipsView(
         ...element.$element.style,
       },
       navigateTo,
-      inEdges: [],
-      outEdges: [],
       ...(children.length > 0 && { depth: nodeDepth(id) }),
       children,
       width,
@@ -577,7 +559,16 @@ export function layoutRelationshipsView(
       if (!ename) {
         return acc
       }
-      const { name, source, target, relations, sourceHandle, targetHandle } = find(edges, e => e.name === ename)!
+      const {
+        name,
+        source,
+        sourceFqn,
+        target,
+        targetFqn,
+        relations,
+        sourceHandle,
+        targetHandle,
+      } = find(edges, e => e.name === ename)!
       const onlyRelation = only(relations)
       const label = onlyRelation?.title ?? 'untitled'
       const isMultiple = relations.length > 1
@@ -587,8 +578,10 @@ export function layoutRelationshipsView(
       // const edge = g.edge(name)
       acc.push({
         id: name as EdgeId,
+        sourceFqn,
         source: source as NodeId,
         sourceHandle,
+        targetFqn,
         target: target as NodeId,
         targetHandle,
         label: isMultiple ? `${relations.length} relationships` : label,

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

@@ -9,8 +9,8 @@ import {
 import { useDeepCompareMemo } from '@react-hookz/web'
 import { hasAtLeast } from 'remeda'
 import { ZIndexes } from '../../base/const'
-import { LayoutRelationshipsViewResult } from './-useRelationshipsView'
 import type { RelationshipsBrowserTypes } from './_types'
+import { LayoutRelationshipsViewResult } from './layout'
 
 // const nodeZIndex = (node: DiagramNode) => node.level - (node.children.length > 0 ? 1 : 0)
 export function viewToNodesEdge(
@@ -183,6 +183,8 @@ export function viewToNodesEdge(
       // hidden: !visiblePredicate(edge),
       deletable: false,
       data: {
+        sourceFqn: edge.sourceFqn,
+        targetFqn: edge.targetFqn,
         relations: edge.relations,
         color: edge.color ?? 'gray',
         label: edge.label,

package/src/state/diagram-machine.ts

@@ -2,6 +2,7 @@ import {
   type BBox,
   type DiagramView,
   type EdgeId,
+  type ElementNotation,
   type Fqn,
   type NodeId,
   type StepEdgeId,
@@ -23,7 +24,7 @@ import {
   useStoreApi,
 } from '@xyflow/react'
 import { type EdgeChange, type NodeChange, type Rect, type Viewport, nodeToRect } from '@xyflow/system'
-import { clamp, first, hasAtLeast, prop } from 'remeda'
+import { clamp, first, hasAtLeast, prop, reduce } from 'remeda'
 import {
   type ActorLogicFrom,
   type ActorRef,
@@ -44,7 +45,7 @@ import {
 import { MinZoom } from '../base/const'
 import { Base } from '../base/types'
 import { type EnabledFeatures, type FeatureName, AllDisabled } from '../context/DiagramFeatures'
-import type { OpenSourceParams } from '../LikeC4Diagram.props'
+import type { OpenSourceParams, PaddingWithUnit } from '../LikeC4Diagram.props'
 import type { Types } from '../likec4diagram/types'
 import { createLayoutConstraints } from '../likec4diagram/useLayoutConstraints'
 import { overlaysActorLogic } from '../overlays/overlaysActor'
@@ -83,7 +84,7 @@ export interface Input {
   xystore: XYStoreApi
   zoomable: boolean
   pannable: boolean
-  fitViewPadding: number
+  fitViewPadding: PaddingWithUnit
   nodesSelectable: boolean
 }
 
@@ -156,7 +157,7 @@ export type Events =
   | { type: 'fitDiagram'; duration?: number; bounds?: BBox }
   | ({ type: 'open.source' } & OpenSourceParams)
   | { type: 'open.elementDetails'; fqn: Fqn; fromNode?: NodeId | undefined }
-  | { type: 'open.relationshipDetails'; edgeId: EdgeId }
+  | { type: 'open.relationshipDetails'; params: { edgeId: EdgeId } | { source: Fqn; target: Fqn } }
   | { type: 'open.relationshipsBrowser'; fqn: Fqn }
   // | { type: 'close.overlay' }
   | { type: 'navigate.to'; viewId: ViewId; fromNode?: NodeId | undefined }
@@ -170,6 +171,8 @@ export type Events =
   | { type: 'walkthrough.start'; stepId?: StepEdgeId }
   | { type: 'walkthrough.step'; direction: 'next' | 'previous' }
   | { type: 'walkthrough.end' }
+  | { type: 'notations.highlight'; notation: ElementNotation; kind?: string }
+  | { type: 'notations.unhighlight' }
   | { type: 'toggle.feature'; feature: FeatureName; forceValue?: boolean }
 
 export type ActionArg = { context: Context; event: Events }
@@ -440,6 +443,26 @@ export const diagramMachine = setup({
         }),
       }
     }),
+    'notations.highlight': assign(({ context }, params: { notation: ElementNotation; kind?: string }) => {
+      const kinds = params.kind ? [params.kind] : params.notation.kinds
+      const xynodes = context.xynodes.map((n) => {
+        const node = findDiagramNode(context, n.id)
+        if (
+          node &&
+          node.notation === params.notation.title &&
+          node.shape === params.notation.shape &&
+          node.color === params.notation.color &&
+          kinds.includes(node.kind)
+        ) {
+          return Base.setDimmed(n, false)
+        }
+        return Base.setDimmed(n, 'immediate')
+      })
+      return {
+        xynodes,
+        xyedges: context.xyedges.map(Base.setDimmed('immediate')),
+      }
+    }),
   },
 }).createMachine({
   initial: 'initializing',
@@ -617,8 +640,8 @@ export const diagramMachine = setup({
         'open.relationshipDetails': {
           actions: sendTo(({ system }) => typedSystem(system).overlaysActorRef!, ({ context, event }) => ({
             type: 'open.relationshipDetails',
-            view: context.view,
-            edgeId: event.edgeId,
+            viewId: context.view.id,
+            ...event.params,
           })),
         },
         'open.source': {
@@ -666,6 +689,18 @@ export const diagramMachine = setup({
             params: prop('event'),
           },
         },
+        'notations.highlight': {
+          actions: {
+            type: 'notations.highlight',
+            params: prop('event'),
+          },
+        },
+        'notations.unhighlight': {
+          actions: assign(({ context }) => ({
+            xynodes: context.xynodes.map(Base.setDimmed(false)),
+            xyedges: context.xyedges.map(Base.setDimmed(false)),
+          })),
+        },
         'saveManualLayout.*': {
           guard: 'not readonly',
           actions: sendTo((c) => c.context.syncLayoutActorRef!, ({ event }) => {
@@ -794,6 +829,11 @@ export const diagramMachine = setup({
               }),
               target: 'idle',
             },
+            'notations.unhighlight': {
+              actions: assign(s => ({
+                ...focusNodesEdges(s),
+              })),
+            },
           },
         },
         walkthrough: {
@@ -845,6 +885,11 @@ export const diagramMachine = setup({
                 enqueue('xyflow:fitFocusedBounds')
               }),
             },
+            'notations.unhighlight': {
+              actions: assign(s => ({
+                ...updateActiveWalkthrough(s),
+              })),
+            },
             'walkthrough.end': {
               target: 'idle',
             },

package/src/utils/index.ts

@@ -1,4 +1,3 @@
-export type { AddEdgeData, AddNodeData } from './types'
 export { vector, VectorImpl } from './vector'
 export type { Vector } from './vector'
 export {

package/dist/overlays/relationship-details/useLayoutedDetails.d.ts

@@ -1,19 +0,0 @@
-import { DiagramEdge, DiagramView, EdgeId } from '@likec4/core';
-import { RelationshipDetailsTypes } from './_types';
-export declare const ZIndexes: {
-    compound: number;
-    edge: number;
-    element: number;
-    max: number;
-};
-export declare function useLayoutedDetails(edgeId: EdgeId, view: DiagramView): {
-    edge: DiagramEdge;
-    xynodes: RelationshipDetailsTypes.Node[];
-    xyedges: RelationshipDetailsTypes.Edge[];
-    bounds: {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    };
-};