@likec4/diagram 1.55.1 → 1.57.0

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

@@ -1,309 +1,248 @@
-import { invariant } from '@likec4/core';
-import { getViewportForBounds, applyEdgeChanges, applyNodeChanges } from '@xyflow/react';
-import { shallowEqual } from 'fast-equals';
-import { prop, isString } from 'remeda';
-import { setup, enqueueActions, assign, assertEvent, cancel, raise } from 'xstate';
-import { MinZoom } from '../../base/const.js';
-import { updateEdges } from '../../base/updateEdges.js';
-import { updateNodes } from '../../base/updateNodes.js';
-import { typedSystem } from '../../likec4diagram/state/utils.js';
-import { layoutResultToXYFlow } from './layout-to-xyflow.js';
-import { Base } from '../../base/Base.js';
-
+import "../../_virtual/_rolldown/runtime.js";
+import { Base } from "../../base/Base.js";
+import { MinZoom } from "../../base/const.js";
+import { updateEdges } from "../../base/updateEdges.js";
+import { updateNodes } from "../../base/updateNodes.js";
+import { typedSystem } from "../../likec4diagram/state/utils.js";
+import { layoutResultToXYFlow } from "./layout-to-xyflow.js";
+import { applyEdgeChanges, applyNodeChanges, getViewportForBounds } from "@xyflow/react";
+import { shallowEqual } from "fast-equals";
+import { isString, prop } from "remeda";
+import { invariant } from "@likec4/core";
+import { assertEvent, assign, cancel, enqueueActions, raise, setup } from "xstate";
+//#region src/overlays/relationship-details/actor.ts
 function inputToSubject(input) {
-  if ("edgeId" in input) {
-    invariant(isString(input.edgeId), "edgeId is required");
-    return {
-      edgeId: input.edgeId
-    };
-  }
-  return {
-    source: input.source,
-    target: input.target
-  };
+	if ("edgeId" in input) {
+		invariant(isString(input.edgeId), "edgeId is required");
+		return { edgeId: input.edgeId };
+	}
+	return {
+		source: input.source,
+		target: input.target
+	};
 }
-const ViewPadding = {
-  x: "22px",
-  y: "22px"
+var ViewPadding = {
+	x: "22px",
+	y: "22px"
 };
-const _relationshipDetailsLogic = setup({
-  types: {
-    context: {},
-    input: {},
-    tags: {},
-    events: {}
-  },
-  actions: {
-    "xyflow:fitDiagram": ({ context }, params) => {
-      let { duration, bounds } = params ?? {};
-      duration ??= 450;
-      const { xyflow, xystore } = context;
-      invariant(xyflow, "xyflow is not initialized");
-      invariant(xystore, "xystore is not initialized");
-      bounds ??= context.bounds;
-      const maxZoom = Math.max(xyflow.getZoom(), 1);
-      if (bounds) {
-        const { width, height } = xystore.getState();
-        const viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, ViewPadding);
-        xyflow.setViewport(viewport, duration > 0 ? { duration } : void 0).catch(console.error);
-      } else {
-        xyflow.fitView({
-          minZoom: MinZoom,
-          maxZoom,
-          padding: ViewPadding,
-          ...duration > 0 && { duration, interpolate: "smooth" }
-        }).catch(console.error);
-      }
-    },
-    "xyflow:updateNodeInternals": ({ context }) => {
-      invariant(context.xystore, "xystore is not initialized");
-      const { domNode, updateNodeInternals } = context.xystore.getState();
-      const nodeIds = new Set(context.xyedges.flatMap((e) => [e.source, e.target]));
-      if (nodeIds.size === 0 || !domNode) {
-        return;
-      }
-      const updates = /* @__PURE__ */ new Map();
-      for (const updateId of nodeIds) {
-        const nodeElement = domNode.querySelector(`.react-flow__node[data-id="${updateId}"]`);
-        if (nodeElement) {
-          updates.set(updateId, { id: updateId, nodeElement, force: true });
-        }
-      }
-      updateNodeInternals(updates, { triggerFitView: false });
-    },
-    "updateXYFlow": assign(({ context, event }) => {
-      assertEvent(event, "xyflow.init");
-      let initialized = context.initialized;
-      if (!initialized.xyflow) {
-        initialized = {
-          ...initialized,
-          xyflow: true
-        };
-      }
-      return {
-        initialized,
-        xyflow: event.instance,
-        xystore: event.store
-      };
-    }),
-    "updateLayoutData": assign(({ context, event }) => {
-      assertEvent(event, "update.layoutData");
-      const { xynodes, xyedges, bounds } = layoutResultToXYFlow(event.data);
-      let initialized = context.initialized;
-      if (!initialized.xydata) {
-        initialized = {
-          ...initialized,
-          xydata: true
-        };
-      }
-      return {
-        initialized,
-        xynodes: updateNodes(context.xynodes, xynodes),
-        xyedges: updateEdges(context.xyedges, xyedges),
-        bounds: shallowEqual(context.bounds, bounds) ? context.bounds : bounds
-      };
-    }),
-    "open relationship source": enqueueActions(({ system, event }) => {
-      if (event.type !== "xyflow.edgeClick") {
-        return;
-      }
-      const diagramActor = typedSystem(system).diagramActorRef;
-      const relationId = event.edge.data.relationId;
-      if (relationId) {
-        diagramActor.send({ type: "open.source", relation: relationId });
-      }
-    })
-  },
-  guards: {
-    "isReady": ({ context }) => context.initialized.xydata && context.initialized.xyflow,
-    "enable: navigate.to": () => true
-  }
+var relationshipDetailsLogic = setup({
+	types: {
+		context: {},
+		input: {},
+		tags: {},
+		events: {}
+	},
+	actions: {
+		"xyflow:fitDiagram": ({ context }, params) => {
+			let { duration, bounds } = params ?? {};
+			duration ??= 450;
+			const { xyflow, xystore } = context;
+			invariant(xyflow, "xyflow is not initialized");
+			invariant(xystore, "xystore is not initialized");
+			bounds ??= context.bounds;
+			const maxZoom = Math.max(xyflow.getZoom(), 1);
+			if (bounds) {
+				const { width, height } = xystore.getState();
+				const viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, ViewPadding);
+				xyflow.setViewport(viewport, duration > 0 ? { duration } : void 0).catch(console.error);
+			} else xyflow.fitView({
+				minZoom: MinZoom,
+				maxZoom,
+				padding: ViewPadding,
+				...duration > 0 && {
+					duration,
+					interpolate: "smooth"
+				}
+			}).catch(console.error);
+		},
+		"xyflow:updateNodeInternals": ({ context }) => {
+			invariant(context.xystore, "xystore is not initialized");
+			const { domNode, updateNodeInternals } = context.xystore.getState();
+			const nodeIds = new Set(context.xyedges.flatMap((e) => [e.source, e.target]));
+			if (nodeIds.size === 0 || !domNode) return;
+			const updates = /* @__PURE__ */ new Map();
+			for (const updateId of nodeIds) {
+				const nodeElement = domNode.querySelector(`.react-flow__node[data-id="${updateId}"]`);
+				if (nodeElement) updates.set(updateId, {
+					id: updateId,
+					nodeElement,
+					force: true
+				});
+			}
+			updateNodeInternals(updates, { triggerFitView: false });
+		},
+		"updateXYFlow": assign(({ context, event }) => {
+			assertEvent(event, "xyflow.init");
+			let initialized = context.initialized;
+			if (!initialized.xyflow) initialized = {
+				...initialized,
+				xyflow: true
+			};
+			return {
+				initialized,
+				xyflow: event.instance,
+				xystore: event.store
+			};
+		}),
+		"updateLayoutData": assign(({ context, event }) => {
+			assertEvent(event, "update.layoutData");
+			const { xynodes, xyedges, bounds } = layoutResultToXYFlow(event.data);
+			let initialized = context.initialized;
+			if (!initialized.xydata) initialized = {
+				...initialized,
+				xydata: true
+			};
+			return {
+				initialized,
+				xynodes: updateNodes(context.xynodes, xynodes),
+				xyedges: updateEdges(context.xyedges, xyedges),
+				bounds: shallowEqual(context.bounds, bounds) ? context.bounds : bounds
+			};
+		}),
+		"open relationship source": enqueueActions(({ system, event }) => {
+			if (event.type !== "xyflow.edgeClick") return;
+			const diagramActor = typedSystem(system).diagramActorRef;
+			const relationId = event.edge.data.relationId;
+			if (relationId) diagramActor.send({
+				type: "open.source",
+				relation: relationId
+			});
+		})
+	},
+	guards: {
+		"isReady": ({ context }) => context.initialized.xydata && context.initialized.xyflow,
+		"enable: navigate.to": () => true
+	}
 }).createMachine({
-  initial: "initializing",
-  context: ({ input }) => ({
-    subject: inputToSubject(input),
-    viewId: input.viewId,
-    bounds: {
-      x: 0,
-      y: 0,
-      width: 200,
-      height: 200
-    },
-    initialized: {
-      xydata: false,
-      xyflow: false
-    },
-    xyflow: null,
-    xystore: null,
-    xynodes: [],
-    xyedges: []
-  }),
-  states: {
-    "initializing": {
-      on: {
-        "xyflow.init": {
-          actions: "updateXYFlow",
-          target: "isReady"
-        },
-        "update.layoutData": {
-          actions: "updateLayoutData",
-          target: "isReady"
-        },
-        "close": {
-          target: "closed"
-        }
-      }
-    },
-    "isReady": {
-      always: [{
-        guard: "isReady",
-        actions: [
-          { type: "xyflow:fitDiagram", params: { duration: 0 } },
-          raise({ type: "xyflow.updateNodeInternals" }, { delay: 50 })
-        ],
-        target: "ready"
-      }, {
-        target: "initializing"
-      }]
-    },
-    "ready": {
-      on: {
-        "xyflow.edgeMouseEnter": {
-          actions: [
-            assign({
-              xyedges: ({ context, event }) => {
-                const hasDimmed = context.xyedges.some(
-                  (edge) => edge.data.dimmed === true || edge.data.dimmed === "immediate"
-                );
-                return context.xyedges.map((edge) => {
-                  if (edge.id === event.edge.id) {
-                    return Base.setData(edge, {
-                      hovered: true,
-                      dimmed: false
-                    });
-                  }
-                  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 })
-          ]
-        },
-        "xyflow.edgeMouseLeave": {
-          actions: [
-            assign({
-              xyedges: ({ context, event }) => 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 })
-          ]
-        },
-        "dim.nonhovered.edges": {
-          actions: assign({
-            xyedges: ({ context }) => context.xyedges.map((edge) => Base.setDimmed(edge, edge.data.hovered !== 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)
-                );
-              }
-              return context.xyedges.map(Base.setDimmed(false));
-            }
-          })
-        },
-        "xyflow.selectionChange": {
-          actions: enqueueActions(({ event, context, enqueue }) => {
-            if (event.edges.length === 0 && context.xyedges.some((e) => e.data.dimmed) && !context.xyedges.some((e) => e.data.hovered)) {
-              enqueue.raise({ type: "undim.edges" });
-            }
-          })
-        },
-        "update.layoutData": {
-          actions: [
-            "updateLayoutData",
-            cancel("fitDiagram"),
-            raise({ type: "fitDiagram", duration: 0 }, { id: "fitDiagram", delay: 50 }),
-            raise({ type: "xyflow.updateNodeInternals" }, { delay: 75 })
-          ]
-        },
-        "xyflow.init": {
-          actions: "updateXYFlow"
-        },
-        "xyflow.applyNodeChanges": {
-          actions: assign({
-            xynodes: ({ context, event }) => {
-              return applyNodeChanges(event.changes, context.xynodes);
-            }
-          })
-        },
-        "xyflow.applyEdgeChanges": {
-          actions: assign({
-            xyedges: ({ context, event }) => {
-              return applyEdgeChanges(event.changes, context.xyedges);
-            }
-          })
-        },
-        "xyflow.paneDblClick": {
-          actions: "xyflow:fitDiagram"
-        },
-        "xyflow.edgeClick": {
-          actions: "open relationship source"
-        },
-        "navigate.to": {
-          actions: assign({
-            subject: ({ event }) => inputToSubject(event.params),
-            viewId: ({ context, event }) => event.params.viewId ?? context.viewId
-          })
-        },
-        "close": {
-          target: "closed"
-        }
-      },
-      exit: assign({
-        xyedges: [],
-        xynodes: [],
-        initialized: {
-          xydata: false,
-          xyflow: false
-        },
-        xyflow: null,
-        xystore: null
-      })
-    },
-    "closed": {
-      type: "final"
-    }
-  },
-  on: {
-    "fitDiagram": {
-      actions: {
-        type: "xyflow:fitDiagram",
-        params: prop("event")
-      }
-    },
-    "xyflow.resized": {
-      actions: [
-        cancel("fitDiagram"),
-        raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 200 })
-      ]
-    },
-    "xyflow.updateNodeInternals": {
-      actions: "xyflow:updateNodeInternals"
-    }
-  }
+	initial: "initializing",
+	context: ({ input }) => ({
+		subject: inputToSubject(input),
+		viewId: input.viewId,
+		bounds: {
+			x: 0,
+			y: 0,
+			width: 200,
+			height: 200
+		},
+		initialized: {
+			xydata: false,
+			xyflow: false
+		},
+		xyflow: null,
+		xystore: null,
+		xynodes: [],
+		xyedges: []
+	}),
+	states: {
+		"initializing": { on: {
+			"xyflow.init": {
+				actions: "updateXYFlow",
+				target: "isReady"
+			},
+			"update.layoutData": {
+				actions: "updateLayoutData",
+				target: "isReady"
+			},
+			"close": { target: "closed" }
+		} },
+		"isReady": { always: [{
+			guard: "isReady",
+			actions: [{
+				type: "xyflow:fitDiagram",
+				params: { duration: 0 }
+			}, raise({ type: "xyflow.updateNodeInternals" }, { delay: 50 })],
+			target: "ready"
+		}, { target: "initializing" }] },
+		"ready": {
+			on: {
+				"xyflow.edgeMouseEnter": { actions: [
+					assign({ xyedges: ({ context, event }) => {
+						const hasDimmed = context.xyedges.some((edge) => edge.data.dimmed === true || edge.data.dimmed === "immediate");
+						return context.xyedges.map((edge) => {
+							if (edge.id === event.edge.id) return Base.setData(edge, {
+								hovered: true,
+								dimmed: false
+							});
+							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
+					})
+				] },
+				"xyflow.edgeMouseLeave": { actions: [
+					assign({ xyedges: ({ context, event }) => 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
+					})
+				] },
+				"dim.nonhovered.edges": { actions: assign({ xyedges: ({ context }) => context.xyedges.map((edge) => Base.setDimmed(edge, edge.data.hovered !== true)) }) },
+				"undim.edges": { actions: assign({ xyedges: ({ context }) => {
+					if (context.xyedges.some((edge) => edge.selected === true)) return context.xyedges.map((edge) => Base.setDimmed(edge, edge.selected !== true ? edge.data.dimmed || "immediate" : false));
+					return context.xyedges.map(Base.setDimmed(false));
+				} }) },
+				"xyflow.selectionChange": { actions: enqueueActions(({ event, context, enqueue }) => {
+					if (event.edges.length === 0 && context.xyedges.some((e) => e.data.dimmed) && !context.xyedges.some((e) => e.data.hovered)) enqueue.raise({ type: "undim.edges" });
+				}) },
+				"update.layoutData": { actions: [
+					"updateLayoutData",
+					cancel("fitDiagram"),
+					raise({
+						type: "fitDiagram",
+						duration: 0
+					}, {
+						id: "fitDiagram",
+						delay: 50
+					}),
+					raise({ type: "xyflow.updateNodeInternals" }, { delay: 75 })
+				] },
+				"xyflow.init": { actions: "updateXYFlow" },
+				"xyflow.applyNodeChanges": { actions: assign({ xynodes: ({ context, event }) => {
+					return applyNodeChanges(event.changes, context.xynodes);
+				} }) },
+				"xyflow.applyEdgeChanges": { actions: assign({ xyedges: ({ context, event }) => {
+					return applyEdgeChanges(event.changes, context.xyedges);
+				} }) },
+				"xyflow.paneDblClick": { actions: "xyflow:fitDiagram" },
+				"xyflow.edgeClick": { actions: "open relationship source" },
+				"navigate.to": { actions: assign({
+					subject: ({ event }) => inputToSubject(event.params),
+					viewId: ({ context, event }) => event.params.viewId ?? context.viewId
+				}) },
+				"close": { target: "closed" }
+			},
+			exit: assign({
+				xyedges: [],
+				xynodes: [],
+				initialized: {
+					xydata: false,
+					xyflow: false
+				},
+				xyflow: null,
+				xystore: null
+			})
+		},
+		"closed": { type: "final" }
+	},
+	on: {
+		"fitDiagram": { actions: {
+			type: "xyflow:fitDiagram",
+			params: prop("event")
+		} },
+		"xyflow.resized": { actions: [cancel("fitDiagram"), raise({ type: "fitDiagram" }, {
+			id: "fitDiagram",
+			delay: 200
+		})] },
+		"xyflow.updateNodeInternals": { actions: "xyflow:updateNodeInternals" }
+	}
 });
-const relationshipDetailsLogic = _relationshipDetailsLogic;
-
+//#endregion
 export { relationshipDetailsLogic };