@likec4/diagram 1.27.0 → 1.27.2

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'
@@ -80,21 +81,25 @@ export interface NavigationHistory {
 
 export interface Input {
   view: DiagramView
-  xynodes: Types.Node[]
-  xyedges: Types.Edge[]
   xystore: XYStoreApi
   zoomable: boolean
   pannable: boolean
-  fitViewPadding: number
+  fitViewPadding: PaddingWithUnit
+  nodesSelectable: boolean
 }
 
 type ToggledFeatures = Partial<EnabledFeatures>
 
 export interface Context extends Input {
+  xynodes: Types.Node[]
+  xyedges: Types.Edge[]
   features: EnabledFeatures
   // This is used to override features from props
   toggledFeatures: ToggledFeatures
-  initialized: boolean
+  initialized: {
+    xydata: boolean
+    xyflow: boolean
+  }
   viewport: Viewport
   viewportChangedManually: boolean
   lastOnNavigate: null | {
@@ -120,7 +125,7 @@ export interface Context extends Input {
   viewportBeforeFocus: null | Viewport
   xyflow: ReactFlowInstance<Types.Node, Types.Edge> | null
 
-  syncLayoutActorRef: ActorRef<Snapshot<unknown>, SyncLayoutEvents, AnyEventObject>
+  syncLayoutActorRef: null | ActorRef<Snapshot<unknown>, SyncLayoutEvents, AnyEventObject>
 
   // If Dynamic View
   activeWalkthrough: null | {
@@ -147,12 +152,12 @@ export type Events =
   | { type: 'update.nodeData'; nodeId: NodeId; data: Partial<Types.NodeData> }
   | { type: 'update.edgeData'; edgeId: EdgeId; data: Partial<Types.Edge['data']> }
   | { type: 'update.view'; view: DiagramView; xynodes: Types.Node[]; xyedges: Types.Edge[] }
-  | { type: 'update.inputs'; inputs: Partial<Omit<Input, 'view'>> }
+  | { type: 'update.inputs'; inputs: Partial<Omit<Input, 'view' | 'xystore'>> }
   | { type: 'update.features'; features: EnabledFeatures }
   | { 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 }
@@ -166,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 }
@@ -188,6 +195,7 @@ export const diagramMachine = setup({
     overlaysActorLogic,
   },
   guards: {
+    'isReady': ({ context }) => context.initialized.xydata && context.initialized.xyflow,
     'enabled: FitView': ({ context }) => context.features.enableFitView,
     'enabled: FocusMode': ({ context }) => context.features.enableFocusMode,
     'enabled: Readonly': ({ context }) => context.features.enableReadOnly,
@@ -334,19 +342,21 @@ export const diagramMachine = setup({
         return
       }
       const constraints = createLayoutConstraints(xystore, nodesToAlign)
-
       const aligner = getAligner(mode)
 
-      constraints.onMove(nodes => {
-        aligner.computeLayout(nodes.map(({ node }) => toNodeRect(node)))
+      const nodes = nodesToAlign.map(id => ({
+        node: nonNullable(nodeLookup.get(id)),
+        rect: nonNullable(constraints.rects.get(id)),
+      }))
+      aligner.computeLayout(nodes.map(({ node }) => toNodeRect(node)))
 
-        nodes.forEach(({ rect, node }) => {
-          rect.positionAbsolute = {
-            ...rect.positionAbsolute,
-            ...aligner.applyPosition(toNodeRect(node)),
-          }
-        })
-      })
+      for (const { rect, node } of nodes) {
+        rect.positionAbsolute = {
+          ...rect.positionAbsolute,
+          ...aligner.applyPosition(toNodeRect(node)),
+        }
+      }
+      constraints.updateXYFlowNodes()
     },
 
     'updateFeatures': enqueueActions(({ enqueue, system, event }) => {
@@ -378,9 +388,16 @@ export const diagramMachine = setup({
       },
     ),
 
+    'startSyncLayout': assign(({ context, spawn, self }) => ({
+      syncLayoutActorRef: spawn('syncManualLayoutActorLogic', {
+        id: 'syncLayout',
+        input: { parent: self, viewId: context.view.id },
+      }),
+    })),
+
     'stopSyncLayout': enqueueActions(({ context, enqueue }) => {
-      enqueue.sendTo(context.syncLayoutActorRef, { type: 'stop' })
-      enqueue.stopChild(context.syncLayoutActorRef)
+      enqueue.sendTo(context.syncLayoutActorRef!, { type: 'stop' })
+      enqueue.stopChild(context.syncLayoutActorRef!)
       enqueue.assign({
         syncLayoutActorRef: null as any,
       })
@@ -426,16 +443,41 @@ 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',
   context: ({ input, self, spawn }) => ({
     ...input,
+    xyedges: [],
+    xynodes: [],
     features: { ...AllDisabled },
     toggledFeatures: DiagramToggledFeaturesPersistence.read() ?? {
       enableReadOnly: true,
     },
-    initialized: false,
+    initialized: {
+      xydata: false,
+      xyflow: false,
+    },
     viewportChangedManually: false,
     lastOnNavigate: null,
     lastClickedNode: null,
@@ -448,10 +490,7 @@ export const diagramMachine = setup({
     },
     viewport: { x: 0, y: 0, zoom: 1 },
     xyflow: null,
-    syncLayoutActorRef: spawn('syncManualLayoutActorLogic', {
-      id: 'syncLayout',
-      input: { parent: self, viewId: input.view.id },
-    }),
+    syncLayoutActorRef: null,
     activeWalkthrough: null,
   }),
   // entry: ({ spawn }) => spawn(layoutActor, { id: 'layout', input: { parent: self } }),
@@ -459,32 +498,54 @@ export const diagramMachine = setup({
     initializing: {
       on: {
         'xyflow.init': {
-          actions: [
-            assign(({ context, event }) => ({
-              initialized: true,
-              xyflow: event.instance,
-              navigationHistory: {
-                currentIndex: 0,
-                history: [{
-                  viewId: context.view.id,
-                  fromNode: null,
-                  viewport: { ...event.instance.getViewport() },
-                }],
-              },
-            })),
-            enqueueActions(({ enqueue, check }) => {
-              if (check('enabled: FitView')) {
-                enqueue({
-                  type: 'xyflow:fitDiagram',
-                  params: { duration: 0 },
-                })
-              }
-            }),
-          ],
-          target: 'ready',
+          actions: assign(({ context, event }) => ({
+            initialized: {
+              ...context.initialized,
+              xyflow: true,
+            },
+            xyflow: event.instance,
+          })),
+          target: 'isReady',
+        },
+        'update.view': {
+          actions: assign(({ context, event, spawn, self }) => ({
+            initialized: {
+              ...context.initialized,
+              xydata: true,
+            },
+            view: event.view,
+            xynodes: event.xynodes,
+            xyedges: event.xyedges,
+          })),
+          target: 'isReady',
         },
       },
     },
+    'isReady': {
+      always: [{
+        guard: 'isReady',
+        actions: [
+          {
+            type: 'xyflow:fitDiagram',
+            params: { duration: 0 },
+          },
+          'startSyncLayout',
+          assign(({ context }) => ({
+            navigationHistory: {
+              currentIndex: 0,
+              history: [{
+                viewId: context.view.id,
+                fromNode: null,
+                viewport: { ...context.xyflow!.getViewport() },
+              }],
+            },
+          })),
+        ],
+        target: 'ready',
+      }, {
+        target: 'initializing',
+      }],
+    },
     ready: {
       initial: 'idle',
       on: {
@@ -579,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': {
@@ -628,9 +689,21 @@ 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 }) => {
+          actions: sendTo((c) => c.context.syncLayoutActorRef!, ({ event }) => {
             if (event.type === 'saveManualLayout.schedule') {
               return { type: 'sync' }
             }
@@ -756,6 +829,11 @@ export const diagramMachine = setup({
               }),
               target: 'idle',
             },
+            'notations.unhighlight': {
+              actions: assign(s => ({
+                ...focusNodesEdges(s),
+              })),
+            },
           },
         },
         walkthrough: {
@@ -807,6 +885,11 @@ export const diagramMachine = setup({
                 enqueue('xyflow:fitFocusedBounds')
               }),
             },
+            'notations.unhighlight': {
+              actions: assign(s => ({
+                ...updateActiveWalkthrough(s),
+              })),
+            },
             'walkthrough.end': {
               target: 'idle',
             },
@@ -849,15 +932,6 @@ export const diagramMachine = setup({
           }),
         },
       ],
-      exit: assign({
-        syncLayoutActorRef: ({ self, context, spawn }) =>
-          spawn('syncManualLayoutActorLogic', {
-            id: 'syncLayout',
-            systemId: 'syncLayout',
-            input: { parent: self, viewId: context.view.id },
-          }),
-        // lastOnNavigate: null,
-      }),
       on: {
         'update.view': {
           actions: enqueueActions(({ enqueue, context, event }) => {
@@ -882,10 +956,11 @@ export const diagramMachine = setup({
               enqueue.raise({ type: 'fitDiagram', duration: 200 }, { id: 'fitDiagram', delay: 25 })
             }
             enqueue.assign(updateNavigationHistory)
-            enqueue.assign(mergeXYNodesEdges)
             enqueue.assign({
+              ...mergeXYNodesEdges({ context, event }),
               lastOnNavigate: null,
             })
+            enqueue('startSyncLayout')
           }),
           target: '#idle',
         },
@@ -928,17 +1003,10 @@ export const diagramMachine = setup({
         enqueueActions(({ enqueue, event, check, context }) => {
           const isAnotherView = check('is another view')
           if (isAnotherView) {
-            const viewId = event.view.id
-
             enqueue('closeAllOverlays')
             enqueue('stopSyncLayout')
             enqueue.assign({
               focusedNode: null,
-              syncLayoutActorRef: ({ self, spawn }) =>
-                spawn('syncManualLayoutActorLogic', {
-                  id: 'syncLayout',
-                  input: { parent: self, viewId },
-                }),
             })
             const { fromNode, toNode } = findCorrespondingNode(context, event)
             if (fromNode && toNode) {
@@ -960,16 +1028,19 @@ export const diagramMachine = setup({
               })
               enqueue.raise({ type: 'fitDiagram', duration: 200 }, { id: 'fitDiagram', delay: 25 })
             }
+          }
+          enqueue.assign({
+            ...mergeXYNodesEdges({ context, event }),
+            lastOnNavigate: null,
+          })
+          if (isAnotherView) {
+            enqueue('startSyncLayout')
           } else {
-            enqueue.sendTo(c => c.context.syncLayoutActorRef, { type: 'synced' })
+            enqueue.sendTo(c => c.context.syncLayoutActorRef!, { type: 'synced' })
             if (!context.viewportChangedManually) {
               enqueue.raise({ type: 'fitDiagram' }, { id: 'fitDiagram', delay: 50 })
             }
           }
-          enqueue.assign(mergeXYNodesEdges)
-          enqueue.assign({
-            lastOnNavigate: null,
-          })
         }),
       ],
     },
@@ -987,7 +1058,12 @@ export const diagramMachine = setup({
     assign({
       xyflow: null,
       xystore: null as any,
-      initialized: false,
+      xyedges: [],
+      xynodes: [],
+      initialized: {
+        xydata: false,
+        xyflow: false,
+      },
       syncLayoutActorRef: null as any,
     }),
   ],

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;
-    };
-};

package/dist/overlays/relationship-details/useLayoutedDetails.js

@@ -1,267 +0,0 @@
-import dagre from '@dagrejs/dagre';
-import { invariant, compareRelations, compareFqnHierarchically, isAncestor } from '@likec4/core';
-import { useMemo } from 'react';
-import { pipe, sort, reverse, forEach, takeWhile, first, map, sortBy, prop, filter, isTruthy } from 'remeda';
-import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
-
-const Sizes = {
-  dagre: {
-    ranksep: 60,
-    nodesep: 35,
-    edgesep: 25
-  },
-  edgeLabel: {
-    width: 120,
-    height: 10,
-    minlen: 1
-  },
-  nodeWidth: 330,
-  hodeHeight: 180,
-  compoundLabelHeight: 5
-};
-const ZIndexes = {
-  compound: 0,
-  // keep edges and elements in the same layer
-  edge: 2,
-  element: 2,
-  max: 5
-};
-function createGraph() {
-  const g = new dagre.graphlib.Graph({
-    directed: true,
-    compound: true
-  });
-  g.setGraph({
-    ...Sizes.dagre,
-    rankdir: "LR"
-  });
-  g.setDefaultEdgeLabel(() => ({ ...Sizes.edgeLabel }));
-  g.setDefaultNodeLabel(() => ({}));
-  return g;
-}
-const sized = (height = Sizes.hodeHeight) => ({
-  width: Sizes.nodeWidth,
-  height
-});
-const graphId = (node) => ({
-  id: node.id,
-  port: node.type === "compound" ? `${node.id}::port` : node.id
-});
-function nodeData(element, ctx) {
-  let diagramNode = ctx.diagramNodes.get(element.id);
-  const ancestor = diagramNode ?? pipe(
-    element.ancestors().toArray(),
-    map((ancestor2) => ctx.diagramNodes.get(ancestor2.id)),
-    filter(isTruthy),
-    first()
-  );
-  return {
-    fqn: element.id,
-    title: diagramNode?.title ?? element.title,
-    technology: diagramNode?.technology ?? element.technology,
-    description: diagramNode?.description ?? element.description,
-    color: diagramNode?.color ?? ancestor?.color ?? element.color,
-    shape: diagramNode?.shape ?? element.shape,
-    icon: diagramNode?.icon ?? element.icon ?? "none",
-    style: diagramNode?.style ?? element.$element.style ?? {},
-    navigateTo: diagramNode?.navigateTo ?? first(element.scopedViews().take(1).toArray())?.id ?? null,
-    width: 0,
-    height: 0,
-    depth: 1,
-    ports: {
-      in: [],
-      out: []
-    }
-  };
-}
-function createXYNode(nodeType, element, ctx) {
-  let node = ctx.xynodes.get(element.id);
-  if (node) {
-    return node;
-  }
-  const g = ctx.g;
-  const parent = pipe(
-    [...element.ancestors()],
-    takeWhile((ancestor) => !isAncestor(ancestor.id, ctx.edge.source) && !isAncestor(ancestor.id, ctx.edge.target)),
-    first(),
-    (found) => found ? createXYNode("compound", found, ctx) : null
-  );
-  const base = {
-    id: element.id,
-    draggable: false,
-    selectable: true,
-    focusable: true,
-    deletable: false,
-    position: { x: 0, y: 0 },
-    zIndex: ZIndexes[nodeType],
-    initialWidth: 0,
-    initialHeight: 0,
-    ...!!parent && { parentId: parent.id }
-  };
-  const xynode = {
-    ...base,
-    type: nodeType,
-    data: nodeData(element, ctx)
-  };
-  ctx.xynodes.set(element.id, xynode);
-  const k = graphId(xynode);
-  g.setNode(k.id, sized());
-  if (xynode.type === "compound") {
-    g.setNode(k.port, {
-      width: Sizes.nodeWidth - Sizes.dagre.ranksep,
-      height: Sizes.compoundLabelHeight
-    });
-    g.setParent(k.port, k.id);
-  }
-  if (parent) {
-    const parentGraphId = graphId(parent).id;
-    g.setParent(k.id, parentGraphId);
-  }
-  return xynode;
-}
-function applyDagreLayout(g) {
-  dagre.layout(g);
-  return function nodeBounds(nodeId, relativeTo) {
-    const { x, y, width, height } = g.node(nodeId);
-    const pos = {
-      position: {
-        x: x - Math.round(width / 2),
-        y: y - Math.round(height / 2)
-      },
-      width,
-      height
-    };
-    if (!relativeTo) {
-      return pos;
-    }
-    const offset = nodeBounds(relativeTo).position;
-    return {
-      position: {
-        x: pos.position.x - offset.x,
-        y: pos.position.y - offset.y
-      },
-      width: pos.width,
-      height: pos.height
-    };
-  };
-}
-function layout(edge, view, likec4model) {
-  const all = /* @__PURE__ */ new Set([edge.source, edge.target]);
-  const relations = edge.relations.map((r) => {
-    const relation = likec4model.relationship(r);
-    all.add(relation.source.id);
-    all.add(relation.target.id);
-    return {
-      source: relation.source.id,
-      target: relation.target.id,
-      relation: relation.$relationship
-    };
-  }).sort(compareRelations).reverse();
-  const diagramNodes = new Map(view.nodes.map((n) => [n.id, n]));
-  const g = createGraph();
-  const ctx = {
-    g,
-    xynodes: /* @__PURE__ */ new Map(),
-    edge,
-    diagramNodes,
-    xyedges: []
-  };
-  pipe(
-    [...all],
-    sort(compareFqnHierarchically),
-    reverse(),
-    forEach((id) => {
-      const element = likec4model.element(id);
-      createXYNode("element", element, ctx);
-    })
-  );
-  if (relations.length === 1 && all.size < 4) {
-    g.setDefaultEdgeLabel(() => ({ width: 250 }));
-  }
-  for (const { relation, ...points } of relations) {
-    const source = ctx.xynodes.get(points.source);
-    invariant(source, "source node not found");
-    const target = ctx.xynodes.get(points.target);
-    invariant(target, "target node not found");
-    source.data.ports.out.push(target.id);
-    target.data.ports.in.push(source.id);
-    g.setEdge(graphId(source).port, graphId(target).port);
-    const edge2 = {
-      id: relation.id,
-      type: "relationship",
-      source: source.id,
-      target: target.id,
-      sourceHandle: source.id + "_out" + (source.data.ports.out.length - 1),
-      targetHandle: target.id + "_in" + (target.data.ports.in.length - 1),
-      data: {
-        relationId: relation.id,
-        color: relation.color,
-        label: relation.title ?? null,
-        technology: relation.technology,
-        description: relation.description,
-        navigateTo: relation.navigateTo ?? null,
-        line: relation.line ?? "dashed"
-      },
-      zIndex: ZIndexes.edge
-    };
-    ctx.xyedges.push(edge2);
-  }
-  const nodebounds = applyDagreLayout(ctx.g);
-  const sortedPorts = (nodeId, type, ports) => {
-    return pipe(
-      ports,
-      map((port, index) => {
-        return {
-          port: nodeId + "_" + type + index,
-          topY: nodebounds(port).position.y
-        };
-      }),
-      sortBy(prop("topY")),
-      map(prop("port"))
-    );
-  };
-  const xynodes = [...ctx.xynodes.values()].map((node) => {
-    const { position, width, height } = nodebounds(node.id, node.parentId);
-    node.data.ports.in = sortedPorts(node.id, "in", node.data.ports.in);
-    node.data.ports.out = sortedPorts(node.id, "out", node.data.ports.out);
-    if (node.type === "element") {
-      node.data.width = width;
-      node.data.height = height;
-    }
-    node.position = position;
-    node.initialHeight = height;
-    node.initialWidth = width;
-    node.style = {
-      width,
-      height
-    };
-    return node;
-  });
-  return {
-    edge,
-    xyedges: ctx.xyedges,
-    xynodes,
-    bounds: {
-      x: 0,
-      y: 0,
-      width: g.graph().width ?? 0,
-      height: g.graph().height ?? 0
-    }
-  };
-}
-function useLayoutedDetails(edgeId, view) {
-  const edge = view.edges.find((e) => e.id === edgeId);
-  invariant(edge, `edge ${edgeId} not found in ${view.id}`);
-  const likec4model = useLikeC4Model(true);
-  return useMemo(() => layout(
-    edge,
-    view,
-    likec4model
-  ), [
-    edge,
-    view,
-    layout
-  ]);
-}
-
-export { ZIndexes, useLayoutedDetails };