@likec4/diagram 1.57.0 → 1.58.0

package/dist/editor/actor/state.sync-queue.js

@@ -1,11 +1,11 @@
 import "../../_virtual/_rolldown/runtime.js";
 import { machine } from "./setup.js";
 import { typedSystem } from "../../likec4diagram/state/utils.js";
+import { cancelSync, clearQueue, deleteNodesAndEdges, makeSnapshot, pushToSyncQueue, redo, scheduleSync, undo } from "./actions.js";
 import { isViewChange } from "./types.js";
-import { makeSnapshot, pushToSyncQueue, reschedule, scheduleSync, undo } from "./actions.js";
-import { isNot } from "remeda";
+import { findLast } from "remeda";
 import { invariant } from "@likec4/core";
-import { assign, enqueueActions, sendTo } from "xstate";
+import { assign, enqueueActions, log, sendTo } from "xstate";
 //#region src/editor/actor/state.sync-queue.ts
 var to = {
 	idle: { target: "#queue-idle" },
@@ -24,6 +24,7 @@ var idle = machine.createStateConfig({
 		...to.pending
 	},
 	on: {
+		"delete.nodes-edges": { actions: deleteNodesAndEdges() },
 		"change.sync-snapshot": {
 			actions: pushToSyncQueue(),
 			...to.pending
@@ -32,11 +33,13 @@ var idle = machine.createStateConfig({
 			actions: pushToSyncQueue(),
 			...to.process
 		},
-		"undo": {
-			actions: undo(),
-			reenter: true,
+		"undo": { actions: undo() },
+		"redo": { actions: redo() },
+		"cancel": {
+			actions: cancelSync(),
 			...to.idle
-		}
+		},
+		"view.synched": { actions: log("in idle got view.synched") }
 	}
 });
 /**
@@ -54,21 +57,32 @@ var pending = machine.createStateConfig({
 			actions: pushToSyncQueue(),
 			...to.process
 		},
+		"delete.nodes-edges": {
+			actions: deleteNodesAndEdges(),
+			reenter: true,
+			...to.pending
+		},
 		"edit.move.start": { ...to.suspended },
 		"undo": {
+			reenter: true,
 			actions: undo(),
+			...to.pending
+		},
+		"redo": {
+			reenter: true,
+			actions: redo(),
+			...to.pending
+		},
+		"cancel": {
+			actions: clearQueue(),
 			...to.idle
 		},
-		"view.synched": {
-			guard: "has pending",
-			actions: () => {},
-			...to.process
-		}
+		"view.synched": { actions: log("in pending got view.synched") }
 	},
 	after: { "wait-after-edit": [{
 		guard: "has pending",
 		...to.process
-	}, { ...to.idle }] }
+	}, to.idle] }
 });
 /**
 * When editing starts, we suspend the queue
@@ -76,17 +90,14 @@ var pending = machine.createStateConfig({
 var suspended = machine.createStateConfig({
 	...idOf(to.suspended),
 	on: {
-		"undo": {
-			actions: undo(),
+		"edit.*": to.idle,
+		"cancel": {
+			actions: [clearQueue(), cancelSync()],
 			...to.idle
-		},
-		"edit.*": { ...to.pending },
-		"change.*": { actions: reschedule() },
-		"cancel": { ...to.idle }
+		}
 	}
 });
-var peekFromQueue = () => machine.assign(({ system, context: { syncQueue, processing } }) => {
-	if (processing) return {};
+var peekFromQueue = () => machine.assign(({ system, context: { syncQueue } }) => {
 	let [head, ...tail] = syncQueue;
 	if (head === "sync-snapshot") head = makeSnapshot(system).change;
 	return {
@@ -100,16 +111,12 @@ var clearProcessing = () => ({ processing: null });
 */
 var process = machine.createStateConfig({
 	...idOf(to.process),
-	initial: "enter",
+	initial: "peekFromQueue",
 	tags: ["busy"],
 	states: {
-		enter: {
+		peekFromQueue: {
 			entry: peekFromQueue(),
 			always: [
-				{
-					guard: ({ context: { processing } }) => !processing,
-					...to.idle
-				},
 				{
 					guard: ({ context: { processing } }) => processing === "apply-latest-to-manual",
 					target: "applyLatestToManual"
@@ -118,7 +125,19 @@ var process = machine.createStateConfig({
 					guard: ({ context: { processing } }) => processing === "apply-semantic-layout",
 					target: "applySemanticLayout"
 				},
-				{ target: "executeChanges" }
+				{
+					guard: ({ context: { processing } }) => isViewChange(processing),
+					target: "executeChanges"
+				},
+				{
+					guard: "has pending",
+					reenter: true,
+					...to.process
+				},
+				{
+					actions: clearQueue(),
+					...to.idle
+				}
 			]
 		},
 		/**
@@ -126,13 +145,15 @@ var process = machine.createStateConfig({
 		*/
 		applyLatestToManual: machine.createStateConfig({
 			initial: "call",
+			entry: assign(({ system }) => ({ processing: makeSnapshot(system).change })),
 			states: {
 				call: { invoke: {
 					src: "applyLatest",
 					input: ({ context }) => {
-						const current = context.history?.head.change.layout;
+						const current = context.processing;
+						invariant(isViewChange(current) && current.op === "save-view-snapshot");
 						return {
-							current: current?._layout === "manual" ? current : void 0,
+							current: current.layout,
 							viewId: context.viewId
 						};
 					},
@@ -140,20 +161,28 @@ var process = machine.createStateConfig({
 						actions: sendTo(typedSystem.diagramActor, ({ event }) => ({
 							type: "update.view",
 							view: event.output.updated
-						}), { delay: 10 }),
+						}), { delay: 20 }),
 						target: "wait"
 					},
 					onError: {
-						actions: [({ event }) => {
-							console.error(event.error);
-						}],
+						actions: assign(({ event }) => {
+							console.error("applyLatestToManual onError", { error: event.error });
+							return {
+								processing: null,
+								syncQueue: []
+							};
+						}),
 						...to.idle
 					}
 				} },
 				wait: {
-					entry: assign(clearProcessing),
+					on: { "*": { actions: log(({ event }) => `wait: ignoring event ${event.type}`) } },
 					after: { "500ms": {
-						actions: scheduleSync(),
+						actions: [
+							clearQueue(),
+							assign({ redo: null }),
+							scheduleSync()
+						],
 						...to.idle
 					} }
 				}
@@ -169,10 +198,10 @@ var process = machine.createStateConfig({
 				input: ({ context }) => ({ viewId: context.viewId }),
 				onDone: { target: "decideNext" },
 				onError: {
-					actions: [({ event }) => {
-						console.error(event.error);
-					}],
-					target: "decideNext"
+					actions: ({ event }) => {
+						console.error("applySemanticLayout onError", { error: event.error });
+					},
+					target: "failure"
 				}
 			}
 		}),
@@ -190,36 +219,44 @@ var process = machine.createStateConfig({
 			},
 			onDone: {
 				actions: enqueueActions(({ context, event, enqueue }) => {
+					const requested = event.output.requested;
 					enqueue.assign({
 						processing: null,
-						syncQueue: context.syncQueue.filter(isNot(isViewChange))
+						syncQueue: context.syncQueue.filter((change) => !isViewChange(change) || !requested.includes(change))
+					});
+					const lastSyncSnapshot = findLast(event.output.applied, (c) => c.op === "save-view-snapshot");
+					if (lastSyncSnapshot) enqueue.sendTo(typedSystem.diagramActor, {
+						type: "update.view-bounds",
+						bounds: lastSyncSnapshot.layout.bounds
 					});
 				}),
-				target: "decideNext"
+				target: "waitViewSynced"
 			},
 			onError: {
-				actions: assign(({ event }) => {
+				actions: ({ event }) => {
 					console.error("executeChanges onError", { error: event.error });
-					return {
-						processing: null,
-						syncQueue: []
-					};
-				}),
-				...to.idle
+				},
+				target: "failure"
 			}
 		} }),
+		waitViewSynced: {
+			on: { "view.synched": { target: "decideNext" } },
+			after: { 2e3: "decideNext" }
+		},
 		decideNext: {
 			entry: assign(clearProcessing),
 			always: [{
 				guard: "has pending",
-				target: "enter"
-			}, { ...to.idle }]
-		}
+				reenter: true,
+				...to.process
+			}, to.idle]
+		},
+		failure: { always: {
+			actions: clearQueue(),
+			...to.idle
+		} }
 	},
-	on: {
-		"change.*": { actions: reschedule() },
-		"view.synched": { actions: () => {} }
-	}
+	on: {}
 });
 var syncQueue = machine.createStateConfig({
 	initial: "idle",

package/dist/editor/actor/types.d.ts

@@ -10,6 +10,10 @@ export type EditorActorEvent = {
     type: 'change.latest-to-manual';
 } | {
     type: 'change.sync-snapshot';
+} | {
+    type: 'delete.nodes-edges';
+    nodeIds: t.NodeId[];
+    edgeIds: t.EdgeId[];
 } | {
     type: 'view.synched';
 } | {
@@ -36,10 +40,11 @@ export interface EditorActorInput {
     viewId: t.ViewId;
 }
 export type SyncOp = t.ViewChange | 'sync-snapshot' | 'apply-semantic-layout' | 'apply-latest-to-manual';
-export declare const isViewChange: (change: SyncOp) => change is t.ViewChange;
+export declare const isViewChange: (change: SyncOp | null) => change is t.ViewChange;
 export interface EditorActorContext {
     viewId: t.ViewId;
     history: LinkedSnapshot | null;
+    redo: LinkedSnapshot | null;
     editing: null | {
         /**
          * The subject of the edit

package/dist/editor/actor/types.js

@@ -1,5 +1,5 @@
 import "../../_virtual/_rolldown/runtime.js";
 //#region src/editor/actor/types.ts
-var isViewChange = (change) => typeof change !== "string";
+var isViewChange = (change) => change !== null && typeof change !== "string";
 //#endregion
 export { isViewChange };

package/dist/editor/useEditorActorLogic.js

@@ -25,8 +25,20 @@ function useEditorActorLogic() {
 			console.error("No editor port available for executing change");
 			throw new Error("No editor port");
 		}
-		for (const change of input.changes) await promisify(() => port.handleChange(input.viewId, change));
-		return {};
+		const applied = [];
+		for (const change of input.changes) try {
+			await promisify(() => port.handleChange(input.viewId, change));
+			applied.push(change);
+		} catch (error) {
+			console.error("Failed to execute change", {
+				change,
+				error
+			});
+		}
+		return {
+			requested: input.changes,
+			applied
+		};
 	});
 	const applySemanticLayout = useCallbackRef(async ({ input }) => {
 		if (!port) {

package/dist/hooks/useEditorActor.d.ts

@@ -2,3 +2,8 @@ import { EditorActorRef } from '../editor/actor/machine';
 import { EditorActorStateTag } from '../editor/actor/types';
 export declare function useEditorActorRef(): EditorActorRef | null;
 export declare function useEditorActorStateHasTag(tag: EditorActorStateTag): boolean;
+/**
+ * Check if the editor actor is in the 'busy' state
+ * (i.e. syncing with the backend)
+ */
+export declare function useEditorIsBusy(): boolean;

package/dist/hooks/useEditorActor.js

@@ -1,6 +1,7 @@
 import "../_virtual/_rolldown/runtime.js";
 import { selectDiagramActor, useDiagramSnapshot } from "./useDiagram.js";
 import { useEffect, useState } from "react";
+import "@mantine/hooks";
 //#region src/hooks/useEditorActor.ts
 var select = selectDiagramActor((s) => {
 	return s.children.editor ?? null;
@@ -12,8 +13,8 @@ function useEditorActorStateHasTag(tag) {
 	const editorActor = useEditorActorRef();
 	const [hasTag, setHasTag] = useState(() => editorActor?.getSnapshot().hasTag(tag) ?? false);
 	useEffect(() => {
-		const subscription = editorActor?.subscribe((snapshot) => {
-			setHasTag(snapshot.hasTag(tag));
+		const subscription = editorActor?.select((s) => s.hasTag(tag)).subscribe((hasTag) => {
+			setHasTag(hasTag);
 		});
 		return () => {
 			subscription?.unsubscribe();

package/dist/index.d.ts

@@ -22,3 +22,5 @@ export { LikeC4ProjectsOverview, type LikeC4ProjectsOverviewProps, } from './Lik
 export { normalizeSearch, SearchContext, type SearchContextValue, useSearchContext, } from './search/SearchContext';
 export { bodyCss as searchBodyCss, dialogCss as searchDialogCss, SearchPanelContent, } from './search/Search';
 export { SearchControl } from './components/SearchControl';
+export { DefaultMantineProvider } from './context/DefaultMantineProvider';
+export { FramerMotionConfig } from './context/FramerMotionConfig';

package/dist/index.js

@@ -1,5 +1,7 @@
 import { IconRendererProvider } from "./context/IconRenderer.js";
 import { useUpdateEffect } from "./hooks/useUpdateEffect.js";
+import { DefaultMantineProvider } from "./context/DefaultMantineProvider.js";
+import { FramerMotionConfig } from "./context/FramerMotionConfig.js";
 import { useDiagram } from "./hooks/safeContext.js";
 import { useDiagramContext, useOnDiagramEvent } from "./hooks/useDiagram.js";
 import { useCurrentView, useCurrentViewId } from "./hooks/useCurrentView.js";
@@ -21,4 +23,4 @@ import { LikeC4View } from "./LikeC4View.js";
 import { ReactLikeC4 } from "./ReactLikeC4.js";
 import { LikeC4ProjectsOverview } from "./LikeC4ProjectsOverview.js";
 import { SearchControl } from "./components/SearchControl.js";
-export { IconRendererProvider, LikeC4Diagram, LikeC4EditorProvider, LikeC4ModelProvider, LikeC4ProjectsOverview, LikeC4ProjectsProvider, LikeC4View, ReactLikeC4, SearchContext, SearchControl, SearchPanelContent, StaticLikeC4Diagram, createLikeC4Editor, normalizeSearch, pickViewBounds, bodyCss as searchBodyCss, dialogCss as searchDialogCss, useChangeLikeC4Project, useCurrentView, useCurrentViewId, useCurrentViewModel, useDiagram, useDiagramContext, useHasProjects, useLikeC4Model, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, useLikeC4Specification, useLikeC4Styles, useLikeC4ViewModel, useOnDiagramEvent, useOptionalCurrentViewModel, useSearchContext, useUpdateEffect };
+export { DefaultMantineProvider, FramerMotionConfig, IconRendererProvider, LikeC4Diagram, LikeC4EditorProvider, LikeC4ModelProvider, LikeC4ProjectsOverview, LikeC4ProjectsProvider, LikeC4View, ReactLikeC4, SearchContext, SearchControl, SearchPanelContent, StaticLikeC4Diagram, createLikeC4Editor, normalizeSearch, pickViewBounds, bodyCss as searchBodyCss, dialogCss as searchDialogCss, useChangeLikeC4Project, useCurrentView, useCurrentViewId, useCurrentViewModel, useDiagram, useDiagramContext, useHasProjects, useLikeC4Model, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, useLikeC4Specification, useLikeC4Styles, useLikeC4ViewModel, useOnDiagramEvent, useOptionalCurrentViewModel, useSearchContext, useUpdateEffect };

package/dist/likec4diagram/DiagramUI.d.ts

@@ -1,2 +1,2 @@
 import { MemoExoticComponent } from 'react';
-export declare const LikeC4DiagramUI: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare const LikeC4DiagramUI: MemoExoticComponent<() => import("react").JSX.Element>;

package/dist/likec4diagram/DiagramXYFlow.js

@@ -52,8 +52,10 @@ var viewportToTopLeft = (ctx) => {
 };
 var selectXYProps = selectDiagramActor(({ context: ctx, children }) => {
 	const { enableReadOnly } = deriveToggledFeatures(ctx);
-	const isNotEditingEdge = enableReadOnly || children.editor?.getSnapshot().context.editing?.subject !== "edge";
-	let nodesDraggable = !enableReadOnly && ctx.nodesDraggable;
+	const editorSnapshot = enableReadOnly ? null : children.editor?.getSnapshot();
+	const isNotEditingEdge = enableReadOnly || editorSnapshot?.context.editing?.subject !== "edge";
+	const isEditorBusy = editorSnapshot?.hasTag("busy") ?? false;
+	let nodesDraggable = !enableReadOnly && ctx.nodesDraggable && !isEditorBusy;
 	if (ctx.dynamicViewVariant === "sequence" && ctx.view._type === "dynamic") nodesDraggable = false;
 	return {
 		enableReadOnly,
@@ -63,7 +65,7 @@ var selectXYProps = selectDiagramActor(({ context: ctx, children }) => {
 		pannable: ctx.pannable,
 		zoomable: ctx.zoomable,
 		nodesDraggable,
-		nodesSelectable: ctx.nodesSelectable && isNotEditingEdge,
+		nodesSelectable: ctx.nodesSelectable && isNotEditingEdge && !isEditorBusy,
 		fitViewPadding: ctx.fitViewPadding,
 		enableFitView: ctx.features.enableFitView,
 		...!ctx.features.enableFitView && { viewport: viewportToTopLeft(ctx) }
@@ -128,6 +130,7 @@ function LikeC4DiagramXYFlow({ background = "dots", reactFlowProps = {}, childre
 		background: initialized ? background : "transparent",
 		fitView: false,
 		onNodeClick: useCallbackRef$1((e, node) => {
+			if (e.isPropagationStopped()) return;
 			e.stopPropagation();
 			diagram.send({
 				type: "xyflow.nodeClick",
@@ -136,6 +139,7 @@ function LikeC4DiagramXYFlow({ background = "dots", reactFlowProps = {}, childre
 			onNodeClick?.(diagram.findDiagramNode(node.id), e);
 		}),
 		onEdgeClick: useCallbackRef$1((e, edge) => {
+			if (e.isPropagationStopped()) return;
 			e.stopPropagation();
 			diagram.send({
 				type: "xyflow.edgeClick",
@@ -144,12 +148,20 @@ function LikeC4DiagramXYFlow({ background = "dots", reactFlowProps = {}, childre
 			onEdgeClick?.(diagram.findDiagramEdge(edge.id), e);
 		}),
 		onEdgeDoubleClick: useCallbackRef$1((e, edge) => {
+			if (e.isPropagationStopped()) return;
 			e.stopPropagation();
 			diagram.send({
 				type: "xyflow.edgeDoubleClick",
 				edge
 			});
 		}),
+		onDelete: useCallbackRef$1(({ nodes, edges }) => {
+			diagram.editorActor().send({
+				type: "delete.nodes-edges",
+				nodeIds: nodes.map((node) => node.data.id),
+				edgeIds: edges.map((edge) => edge.data.id)
+			});
+		}),
 		onPaneClick: useCallbackRef$1((e) => {
 			e.stopPropagation();
 			diagram.send({ type: "xyflow.paneClick" });

package/dist/likec4diagram/custom/edges/EdgeDrifts.d.ts

@@ -3,4 +3,4 @@ export type EdgeDriftsProps = {
     edgeProps: Types.EdgeProps;
     svgPath: string;
 };
-export declare function EdgeDrifts({ edgeProps: { data }, svgPath, }: EdgeDriftsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function EdgeDrifts({ edgeProps: { data }, svgPath, }: EdgeDriftsProps): import("react").JSX.Element | null;

package/dist/likec4diagram/custom/edges/RelationshipEdge.js

@@ -13,7 +13,7 @@ import { EdgeLabelContainer } from "../../../base-primitives/edge/EdgeLabelConta
 import { EdgePath } from "../../../base-primitives/edge/EdgePath.js";
 import { memoEdge } from "../../../base-primitives/memoEdge.js";
 import { EdgeDrifts } from "./EdgeDrifts.js";
-import { controlPoint, controlPointsContainer } from "./edges.css.js";
+import { controlPoint, controlPointsContainer, labelDraggable } from "./edges.css.js";
 import { useControlPoints } from "./useControlPoints.js";
 import { useRelationshipEdgePath } from "./useRelationshipEdgePath.js";
 import { css, cx } from "@likec4/styles/css";
@@ -33,7 +33,11 @@ var RelationshipEdge = memoEdge((props) => {
 	const [isControlPointDragging, setIsControlPointDragging] = useState(false);
 	const isControlPointDraggingRef = useRef(isControlPointDragging);
 	isControlPointDraggingRef.current = isControlPointDragging;
+	const [isLabelDragging, setIsLabelDragging] = useState(false);
+	const isLabelDraggingRef = useRef(isLabelDragging);
+	isLabelDraggingRef.current = isLabelDragging;
 	const xyflow = useXYFlow();
+	const xyflowStore = useXYStoreApi();
 	const diagram = useDiagram();
 	const { enableNavigateTo, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
 	const enabledEditing = !enableReadOnly;
@@ -52,32 +56,58 @@ var RelationshipEdge = memoEdge((props) => {
 		y: labelXY?.y ?? labelY
 	}, isSamePoint);
 	useUpdateEffect$1(() => {
-		if (isControlPointDraggingRef.current) return;
+		if (isControlPointDraggingRef.current || isLabelDraggingRef.current) return;
 		setLabelPos({
 			x: labelX,
 			y: labelY
 		});
 	}, [labelX, labelY]);
 	const svgPathRef = useRef(null);
+	const labelOffsetRef = useRef({
+		x: 0,
+		y: 0
+	});
+	const captureLabelOffset = useCallbackRef(() => {
+		const path = svgPathRef.current;
+		if (data.isLabelCustomized && path && labelBBox) {
+			const center = getEdgeCenter(path);
+			labelOffsetRef.current = {
+				x: labelBBox.x - center.x,
+				y: labelBBox.y - center.y
+			};
+		} else labelOffsetRef.current = {
+			x: 0,
+			y: 0
+		};
+	});
 	useRafEffect(() => {
 		const path = svgPathRef.current;
 		if (!path || !isControlPointDragging) return;
-		setLabelPos(getEdgeCenter(path));
+		const center = getEdgeCenter(path);
+		const offset = labelOffsetRef.current;
+		setLabelPos({
+			x: center.x + offset.x,
+			y: center.y + offset.y
+		});
 	}, [edgePath, isControlPointDragging]);
 	const updateEdgeData = useCallbackRef((controlPoints) => {
-		const point = labelBBox && svgPathRef.current ? getEdgeCenter(svgPathRef.current) : null;
-		if (point) diagram.updateEdgeData(id, {
-			controlPoints,
-			labelBBox: {
-				...labelBBox,
-				...point
-			}
-		});
-		else diagram.updateEdgeData(id, { controlPoints });
+		const center = labelBBox && svgPathRef.current ? getEdgeCenter(svgPathRef.current) : null;
+		if (center) {
+			const offset = labelOffsetRef.current;
+			diagram.updateEdgeData(id, {
+				controlPoints,
+				labelBBox: {
+					...labelBBox,
+					x: center.x + offset.x,
+					y: center.y + offset.y
+				}
+			});
+		} else diagram.updateEdgeData(id, { controlPoints });
 		diagram.stopEditing(true);
 		setIsControlPointDragging(false);
 	});
 	const onControlPointerStartMove = useCallbackRef(() => {
+		captureLabelOffset();
 		diagram.startEditing("edge");
 		setIsControlPointDragging(true);
 	});
@@ -92,6 +122,7 @@ var RelationshipEdge = memoEdge((props) => {
 		});
 	});
 	const onControlPointerDelete = useCallbackRef((points) => {
+		captureLabelOffset();
 		diagram.startEditing("edge");
 		setIsControlPointDragging(true);
 		setControlPoints(points);
@@ -115,6 +146,86 @@ var RelationshipEdge = memoEdge((props) => {
 		diagram.updateEdgeData(id, { controlPoints: newControlPoints });
 		diagram.stopEditing(true);
 	});
+	const updateLabelPosition = useCallbackRef((pos) => {
+		if (labelBBox) diagram.updateEdgeData(id, {
+			labelBBox: {
+				...labelBBox,
+				x: pos.x,
+				y: pos.y
+			},
+			isLabelCustomized: true
+		});
+		diagram.stopEditing(true);
+		setIsLabelDragging(false);
+	});
+	/**
+	* Handle pointer down on the edge label to drag it to a custom position.
+	* Mirrors the control-point LMB drag.
+	*/
+	const onLabelPointerDown = useCallbackRef((e) => {
+		if (e.pointerType !== "mouse" || e.button !== 0 || !labelBBox || isControlPointDraggingRef.current) return;
+		const { domNode, edges, addSelectedEdges, unselectNodesAndEdges } = xyflowStore.getState();
+		if (!domNode) return;
+		e.stopPropagation();
+		if (!selected) {
+			unselectNodesAndEdges({ edges: edges.filter((ed) => ed.selected && ed.id !== id) });
+			addSelectedEdges([id]);
+		}
+		let hasMoved = false;
+		const initialPoint = {
+			x: e.clientX,
+			y: e.clientY
+		};
+		const clientPoint = { ...initialPoint };
+		const flowStart = xyflow.screenToFlowPosition(initialPoint, { snapToGrid: false });
+		const grab = {
+			x: flowStart.x - labelBBox.x,
+			y: flowStart.y - labelBBox.y
+		};
+		let pos = {
+			x: labelBBox.x,
+			y: labelBBox.y
+		};
+		let animationFrameId = null;
+		const onPointerMove = (ev) => {
+			clientPoint.x = ev.clientX;
+			clientPoint.y = ev.clientY;
+			if (!isSamePoint(initialPoint, clientPoint)) {
+				if (!hasMoved) {
+					hasMoved = true;
+					diagram.startEditing("edge");
+					setIsLabelDragging(true);
+				}
+				animationFrameId ??= requestAnimationFrame(() => {
+					animationFrameId = null;
+					const { x, y } = xyflow.screenToFlowPosition(clientPoint, { snapToGrid: false });
+					pos = {
+						x: Math.round(x - grab.x),
+						y: Math.round(y - grab.y)
+					};
+					setLabelPos(pos);
+				});
+			}
+			ev.stopPropagation();
+		};
+		const onPointerUp = (ev) => {
+			ev.stopPropagation();
+			domNode.removeEventListener("pointermove", onPointerMove, { capture: true });
+			if (animationFrameId !== null) cancelAnimationFrame(animationFrameId);
+			if (hasMoved) {
+				domNode.addEventListener("click", stopAndPrevent, {
+					capture: true,
+					once: true
+				});
+				updateLabelPosition(pos);
+			}
+		};
+		domNode.addEventListener("pointermove", onPointerMove, { capture: true });
+		domNode.addEventListener("pointerup", onPointerUp, {
+			once: true,
+			capture: true
+		});
+	});
 	if (isControlPointDragging && !props.data.hovered) props = {
 		...props,
 		data: {
@@ -139,12 +250,14 @@ var RelationshipEdge = memoEdge((props) => {
 			}),
 			labelBBox && /* @__PURE__ */ jsx(EdgeLabelContainer, {
 				edgeProps: props,
-				labelPosition: isControlPointDragging ? labelPos : {
+				labelPosition: isControlPointDragging || isLabelDragging ? labelPos : {
 					x: labelX,
 					y: labelY
 				},
+				...enabledEditing && { onPointerDown: onLabelPointerDown },
 				children: /* @__PURE__ */ jsx(EdgeLabel, {
-					pointerEvents: enabledEditing ? "none" : "all",
+					pointerEvents: "all",
+					className: enabledEditing ? labelDraggable : void 0,
 					edgeProps: props,
 					children: navigateTo && /* @__PURE__ */ jsx(EdgeActionButton, { onClick: (e) => {
 						e.stopPropagation();

package/dist/likec4diagram/custom/edges/SequenceStepEdge.d.ts

@@ -1,2 +1,2 @@
 import { Types } from '../../types';
-export declare function SequenceStepEdge(props: Types.EdgeProps<'seq-step'>): import("react/jsx-runtime").JSX.Element;
+export declare function SequenceStepEdge(props: Types.EdgeProps<'seq-step'>): import("react").JSX.Element;

package/dist/likec4diagram/custom/edges/edges.css.d.ts

@@ -1,2 +1,3 @@
 export declare const controlPointsContainer: string;
+export declare const labelDraggable: string;
 export declare const controlPoint: string;

package/dist/likec4diagram/custom/edges/edges.css.js

@@ -12,6 +12,10 @@ var controlPointsContainer = css({
 	},
 	zIndex: "[100]"
 });
+var labelDraggable = css({
+	cursor: "grab!",
+	_active: { cursor: "grabbing!" }
+});
 var controlPoint = css({
 	fill: `[var(--xy-edge-stroke)]`,
 	stroke: `transparent`,
@@ -41,4 +45,4 @@ var controlPoint = css({
 	_groupActive: { cursor: "grabbing" }
 });
 //#endregion
-export { controlPoint, controlPointsContainer };
+export { controlPoint, controlPointsContainer, labelDraggable };