@ngroznykh/papirus 0.8.4 → 0.9.1

package/dist/papirus.js

@@ -1731,6 +1731,101 @@ function directionToVector(dir) {
 		};
 	}
 }
+function clamp$1(value, min, max) {
+	return Math.max(min, Math.min(max, value));
+}
+function dist(a, b) {
+	return Math.hypot(a.x - b.x, a.y - b.y);
+}
+function closestPointOnRectSide(bounds, side, pointer) {
+	const { x, y, width, height } = bounds;
+	switch (side) {
+		case "top": return {
+			x: clamp$1(pointer.x, x, x + width),
+			y
+		};
+		case "bottom": return {
+			x: clamp$1(pointer.x, x, x + width),
+			y: y + height
+		};
+		case "left": return {
+			x,
+			y: clamp$1(pointer.y, y, y + height)
+		};
+		case "right": return {
+			x: x + width,
+			y: clamp$1(pointer.y, y, y + height)
+		};
+	}
+}
+function closestPointOnRectOutline(bounds, pointer) {
+	const sides = [
+		"top",
+		"right",
+		"bottom",
+		"left"
+	];
+	let side = sides[0];
+	let point = closestPointOnRectSide(bounds, side, pointer);
+	let best = dist(pointer, point);
+	for (let i = 1; i < sides.length; i++) {
+		const nextSide = sides[i];
+		const nextPoint = closestPointOnRectSide(bounds, nextSide, pointer);
+		const nextDist = dist(pointer, nextPoint);
+		if (nextDist < best) {
+			side = nextSide;
+			point = nextPoint;
+			best = nextDist;
+		}
+	}
+	return {
+		side,
+		point
+	};
+}
+function getOutlineConnectHandle(bounds, pointer, offset, prevSide, hysteresis = 8) {
+	const closest = closestPointOnRectOutline(bounds, pointer);
+	let side = closest.side;
+	let attach = closest.point;
+	if (prevSide && prevSide !== closest.side) {
+		const stay = closestPointOnRectSide(bounds, prevSide, pointer);
+		if (dist(pointer, stay) <= dist(pointer, closest.point) + hysteresis) {
+			side = prevSide;
+			attach = stay;
+		}
+	}
+	if (offset === 0) return {
+		side,
+		attach,
+		handle: attach
+	};
+	const delta = {
+		top: {
+			x: 0,
+			y: -offset
+		},
+		right: {
+			x: offset,
+			y: 0
+		},
+		bottom: {
+			x: 0,
+			y: offset
+		},
+		left: {
+			x: -offset,
+			y: 0
+		}
+	}[side];
+	return {
+		side,
+		attach,
+		handle: {
+			x: attach.x + delta.x,
+			y: attach.y + delta.y
+		}
+	};
+}
 //#endregion
 //#region src/core/ConnectionManager.ts
 /**
@@ -1747,6 +1842,9 @@ var ConnectionManager = class extends EventEmitter {
 		this.sourceAnchorId = null;
 		this.hoverNodeId = null;
 		this.hoverAnchorId = null;
+		this.hoverPoint = null;
+		this.hoverOutlineHandle = false;
+		this.hoverOutlineSide = null;
 		this.hoverDisabled = false;
 		this.reconnectPoint = null;
 		this.previewTargetAnchorId = null;
@@ -1808,9 +1906,12 @@ var ConnectionManager = class extends EventEmitter {
 	*/
 	clearPointerHover() {
 		if (this.hoverDisabled) return;
-		if (this.hoverNodeId !== null || this.hoverAnchorId !== null) {
+		if (this.hoverNodeId !== null || this.hoverAnchorId !== null || this.hoverOutlineHandle) {
 			this.hoverNodeId = null;
 			this.hoverAnchorId = null;
+			this.hoverPoint = null;
+			this.hoverOutlineSide = null;
+			this.clearOutlineHandleCursor();
 			this.renderer.markDirty();
 		}
 	}
@@ -1837,9 +1938,12 @@ var ConnectionManager = class extends EventEmitter {
 	*/
 	disableHover() {
 		this.hoverDisabled = true;
-		if (this.hoverNodeId !== null || this.hoverAnchorId !== null) {
+		if (this.hoverNodeId !== null || this.hoverAnchorId !== null || this.hoverOutlineHandle) {
 			this.hoverNodeId = null;
 			this.hoverAnchorId = null;
+			this.hoverPoint = null;
+			this.hoverOutlineSide = null;
+			this.clearOutlineHandleCursor();
 			this.renderer.markDirty();
 		}
 	}
@@ -1851,7 +1955,7 @@ var ConnectionManager = class extends EventEmitter {
 	}
 	/**
 	* Try to start connection from a hovered anchor point.
-	* When attachToOutline + Shift: start from anywhere on node outline.
+	* When attachToOutline: drag the outline handle, or Shift+drag from the node body.
 	* Otherwise: requires clicking on an anchor/port so that node drag still works.
 	*/
 	tryStartConnectionAtPoint(event) {
@@ -1860,18 +1964,18 @@ var ConnectionManager = class extends EventEmitter {
 			x: event.worldX,
 			y: event.worldY
 		};
+		if (this.attachToOutline) {
+			const handleHit = this.findOutlineConnectHandleAt(point);
+			if (handleHit) {
+				this.startOutlineConnection(handleHit.node, handleHit.attach);
+				return true;
+			}
+		}
 		const node = this.getNodeAtPoint(point, false);
 		if (!node) return false;
 		if (this.attachToOutline && event.shiftKey) {
-			const { point: outlinePoint, param } = node.getClosestPointOnOutline(point);
-			this.sourceNode = node;
-			this.isConnecting = true;
-			this.sourceAnchorId = null;
-			this.sourcePoint = outlinePoint;
-			this.sourceOutlineParam = param;
-			this.previewEndpoint = point;
-			this.emit("connectionStart", node);
-			this.renderer.markDirty();
+			const { point: outlinePoint } = node.getClosestPointOnOutline(point);
+			this.startOutlineConnection(node, outlinePoint);
 			return true;
 		}
 		const hover = this.getAnchorAtPoint(node, point);
@@ -2473,7 +2577,10 @@ var ConnectionManager = class extends EventEmitter {
 	renderHoverAnchors(ctx) {
 		if (this.isConnecting || this.isReconnecting) return;
 		this.renderEditablePolylineControls(ctx);
-		if (this.attachToOutline) return;
+		if (this.attachToOutline) {
+			this.renderOutlineConnectHandle(ctx);
+			return;
+		}
 		if (!this.hoverNodeId) return;
 		const node = this.renderer.getNode(this.hoverNodeId);
 		if (!node) return;
@@ -2488,7 +2595,7 @@ var ConnectionManager = class extends EventEmitter {
 			ctx.beginPath();
 			ctx.arc(anchor.point.x, anchor.point.y, radius, 0, Math.PI * 2);
 			ctx.fill();
-			if (isHovered) this.drawPlus(radius, ctx, anchor);
+			if (isHovered) this.drawPlus(radius, ctx, anchor.point);
 		}
 		ctx.restore();
 	}
@@ -2507,6 +2614,7 @@ var ConnectionManager = class extends EventEmitter {
 			if (edge.state !== "selected" || !edge.isEditablePolyline()) continue;
 			const controlPoints = edge.getEditableControlPoints();
 			if (controlPoints.length === 0) continue;
+			const beforePoints = edge.controlPoints?.length ? clonePoints(edge.controlPoints) : clonePoints(controlPoints);
 			for (let i = 0; i < controlPoints.length; i++) {
 				const dx = point.x - controlPoints[i].x;
 				const dy = point.y - controlPoints[i].y;
@@ -2516,7 +2624,7 @@ var ConnectionManager = class extends EventEmitter {
 					edge,
 					index: i
 				};
-				this.emit("controlPointDragStart");
+				this.emit("controlPointDragStart", edge, beforePoints);
 				this.renderer.markDirty();
 				return true;
 			}
@@ -2532,7 +2640,7 @@ var ConnectionManager = class extends EventEmitter {
 					edge,
 					index: insertControl.index
 				};
-				this.emit("controlPointDragStart");
+				this.emit("controlPointDragStart", edge, beforePoints);
 				this.renderer.markDirty();
 				return true;
 			}
@@ -2638,15 +2746,15 @@ var ConnectionManager = class extends EventEmitter {
 			y
 		};
 	}
-	drawPlus(radius, ctx, anchor) {
+	drawPlus(radius, ctx, point) {
 		const plusSize = radius * .5;
 		ctx.strokeStyle = "#ffffff";
 		ctx.lineWidth = 1.5;
 		ctx.beginPath();
-		ctx.moveTo(anchor.point.x - plusSize, anchor.point.y);
-		ctx.lineTo(anchor.point.x + plusSize, anchor.point.y);
-		ctx.moveTo(anchor.point.x, anchor.point.y - plusSize);
-		ctx.lineTo(anchor.point.x, anchor.point.y + plusSize);
+		ctx.moveTo(point.x - plusSize, point.y);
+		ctx.lineTo(point.x + plusSize, point.y);
+		ctx.moveTo(point.x, point.y - plusSize);
+		ctx.lineTo(point.x, point.y + plusSize);
 		ctx.stroke();
 	}
 	renderAnchorHighlights(ctx, point, reconnecting) {
@@ -2667,7 +2775,7 @@ var ConnectionManager = class extends EventEmitter {
 			ctx.arc(anchor.point.x, anchor.point.y, radius, 0, Math.PI * 2);
 			ctx.fill();
 			if (isNearest) if (forbidden) this.drawCross(radius, ctx, anchor);
-			else this.drawPlus(radius, ctx, anchor);
+			else this.drawPlus(radius, ctx, anchor.point);
 		}
 		ctx.restore();
 	}
@@ -2692,19 +2800,94 @@ var ConnectionManager = class extends EventEmitter {
 		}
 		return null;
 	}
+	startOutlineConnection(node, attach) {
+		const { point: outlinePoint, param } = node.getClosestPointOnOutline(attach);
+		this.sourceNode = node;
+		this.isConnecting = true;
+		this.sourceAnchorId = null;
+		this.sourcePoint = outlinePoint;
+		this.sourceOutlineParam = param;
+		this.previewEndpoint = attach;
+		this.emit("connectionStart", node);
+		this.renderer.markDirty();
+	}
+	outlineHandleHysteresis() {
+		return 8 / Math.max(this.renderer.zoom, 1e-4);
+	}
+	outlineConnectHandleFor(node, pointer) {
+		const prevSide = node.id === this.hoverNodeId ? this.hoverOutlineSide : null;
+		const geom = getOutlineConnectHandle(node.getBounds(), pointer, 0, prevSide, this.outlineHandleHysteresis());
+		const { point: onOutline } = node.getClosestPointOnOutline(geom.attach);
+		return {
+			attach: onOutline,
+			handle: onOutline,
+			side: geom.side
+		};
+	}
+	outlineHandleHitRadius() {
+		return 10 / Math.max(this.renderer.zoom, 1e-4);
+	}
+	findOutlineConnectHandleAt(point) {
+		if (!this.attachToOutline) return null;
+		const radiusSq = this.outlineHandleHitRadius() ** 2;
+		const nodes = Array.from(this.renderer.nodes.values());
+		for (let i = nodes.length - 1; i >= 0; i--) {
+			const node = nodes[i];
+			if (!node.visible || !this.isCompatibleTarget(node)) continue;
+			const { attach, handle } = this.outlineConnectHandleFor(node, point);
+			const dx = point.x - handle.x;
+			const dy = point.y - handle.y;
+			if (dx * dx + dy * dy <= radiusSq) return {
+				node,
+				attach,
+				handle
+			};
+		}
+		return null;
+	}
+	renderOutlineConnectHandle(ctx) {
+		if (!this.hoverNodeId || !this.hoverPoint) return;
+		const node = this.renderer.getNode(this.hoverNodeId);
+		if (!node) return;
+		const { handle } = this.outlineConnectHandleFor(node, this.hoverPoint);
+		const radius = this.hoverOutlineHandle ? 6 : 4;
+		ctx.save();
+		ctx.setLineDash([]);
+		ctx.fillStyle = "#3b82f6";
+		ctx.beginPath();
+		ctx.arc(handle.x, handle.y, radius, 0, Math.PI * 2);
+		ctx.fill();
+		this.drawPlus(radius, ctx, handle);
+		ctx.restore();
+	}
+	clearOutlineHandleCursor() {
+		if (this.hoverOutlineHandle) {
+			this.hoverOutlineHandle = false;
+			this.setCursor("");
+		}
+	}
 	updateHover(point) {
 		if (this.hoverDisabled) return;
-		const node = this.getNodeAtPoint(point, false);
+		const handleHit = this.findOutlineConnectHandleAt(point);
+		const node = handleHit?.node ?? this.getNodeAtPoint(point, false);
 		const prevNodeId = this.hoverNodeId;
 		const prevAnchorId = this.hoverAnchorId;
+		const prevOutlineHandle = this.hoverOutlineHandle;
+		this.hoverPoint = node ? point : null;
 		if (!node) {
 			this.hoverNodeId = null;
 			this.hoverAnchorId = null;
+			this.hoverOutlineSide = null;
+			this.clearOutlineHandleCursor();
 		} else {
 			this.hoverNodeId = node.id;
-			this.hoverAnchorId = this.getAnchorAtPoint(node, point)?.id ?? null;
+			this.hoverAnchorId = handleHit ? null : this.getAnchorAtPoint(node, point)?.id ?? null;
+			this.hoverOutlineHandle = handleHit !== null;
+			if (this.attachToOutline) this.hoverOutlineSide = this.outlineConnectHandleFor(node, point).side;
+			if (this.hoverOutlineHandle) this.setCursor("crosshair");
+			else if (prevOutlineHandle) this.setCursor("");
 		}
-		if (prevNodeId !== this.hoverNodeId || prevAnchorId !== this.hoverAnchorId) this.renderer.markDirty();
+		if (prevNodeId !== this.hoverNodeId || prevAnchorId !== this.hoverAnchorId || prevOutlineHandle !== this.hoverOutlineHandle || this.attachToOutline && node !== null) this.renderer.markDirty();
 	}
 	getAnchorAtPoint(node, point) {
 		const anchorIds = !this.attachToOutline && node.ports.length > 0 ? node.getPortAnchorIds() : null;
@@ -3195,6 +3378,32 @@ var MoveNodesCommand = class {
 		}
 	}
 };
+var ResizeNodesCommand = class {
+	constructor(getNode, changes) {
+		this.getNode = getNode;
+		this.changes = new Map(Array.from(changes.entries()).map(([id, v]) => [id, {
+			before: { ...v.before },
+			after: { ...v.after }
+		}]));
+	}
+	execute() {
+		this.apply("after");
+	}
+	undo() {
+		this.apply("before");
+	}
+	apply(which) {
+		for (const [id, bounds] of this.changes) {
+			const node = this.getNode(id);
+			if (node === void 0) continue;
+			const next = bounds[which];
+			node.x = next.x;
+			node.y = next.y;
+			node.width = next.width;
+			node.height = next.height;
+		}
+	}
+};
 /**
 * Restores editable-polyline control points on undo (used with node drag composite).
 */
@@ -3209,13 +3418,13 @@ var ChangeEditablePolylineControlPointsCommand = class {
 	execute() {
 		for (const [id, { after }] of this.changes) {
 			const edge = this.getEdge(id);
-			if (edge?.isEditablePolyline()) edge.controlPoints = clonePoints(after);
+			if (edge?.isEditablePolyline()) edge.controlPoints = after.length > 0 ? clonePoints(after) : void 0;
 		}
 	}
 	undo() {
 		for (const [id, { before }] of this.changes) {
 			const edge = this.getEdge(id);
-			if (edge?.isEditablePolyline()) edge.controlPoints = clonePoints(before);
+			if (edge?.isEditablePolyline()) edge.controlPoints = before.length > 0 ? clonePoints(before) : void 0;
 		}
 	}
 };
@@ -7210,6 +7419,8 @@ var InteractionManager = class {
 		this.overlayCleanup = null;
 		this.dragStartPositions = /* @__PURE__ */ new Map();
 		this.dragStartEditablePolylinePoints = /* @__PURE__ */ new Map();
+		this.controlPointGestureBefore = /* @__PURE__ */ new Map();
+		this.resizeStartBounds = null;
 		this.reconnectOrigins = /* @__PURE__ */ new Map();
 		this.labelEditor = new LabelEditor();
 		this.scrollbarDragState = null;
@@ -7495,6 +7706,42 @@ var InteractionManager = class {
 				});
 				this.reconnectOrigins.delete(edge.id);
 			});
+			this.resizeManager.on("resizeStart", (_nodeId, _handle, startBounds) => {
+				this.resizeStartBounds = { ...startBounds };
+			});
+			this.resizeManager.on("resizeEnd", (nodeId, bounds) => {
+				const before = this.resizeStartBounds;
+				this.resizeStartBounds = null;
+				if (!before) return;
+				if (before.x === bounds.x && before.y === bounds.y && before.width === bounds.width && before.height === bounds.height) return;
+				this.historyManager.execute(new ResizeNodesCommand((id) => this.renderer.getNode(id), new Map([[nodeId, {
+					before: { ...before },
+					after: {
+						x: bounds.x,
+						y: bounds.y,
+						width: bounds.width,
+						height: bounds.height
+					}
+				}]])));
+			});
+			this.connectionManager.on("controlPointDragStart", (edge, before) => {
+				this.controlPointGestureBefore.set(edge.id, clonePoints(before));
+			});
+			this.connectionManager.on("controlPointDragEnd", () => {
+				const changes = /* @__PURE__ */ new Map();
+				for (const [id, before] of this.controlPointGestureBefore) {
+					const edge = this.renderer.getEdge(id);
+					if (!edge?.isEditablePolyline()) continue;
+					const after = clonePoints(edge.controlPoints ?? []);
+					if (!this.editablePolylinePointsEqual(before, after)) changes.set(id, {
+						before: clonePoints(before),
+						after
+					});
+				}
+				this.controlPointGestureBefore.clear();
+				if (changes.size === 0) return;
+				this.historyManager.execute(new ChangeEditablePolylineControlPointsCommand((id) => this.renderer.getEdge(id), changes));
+			});
 		}
 		this.historyManager.on("change", () => {
 			this.renderer.markDirty();
@@ -7653,7 +7900,23 @@ var InteractionManager = class {
 		if (this.renderer.blocksDiagramPointerAtScreen(event.screenX, event.screenY)) return;
 		if (this.dragManager.handledMouseDown || this.resizeManager.handledMouseDown || this.connectionManager.connecting) return;
 		if (this.navigationOnly) return;
-		if (this.connectionManager.handleDoubleClick(event)) return;
+		const polylineBeforeByEdge = /* @__PURE__ */ new Map();
+		for (const edge of this.renderer.edges.values()) {
+			if (edge.state !== "selected" || !edge.isEditablePolyline()) continue;
+			polylineBeforeByEdge.set(edge.id, clonePoints(edge.controlPoints?.length ? edge.controlPoints : edge.getEditableControlPoints()));
+		}
+		if (this.connectionManager.handleDoubleClick(event)) {
+			const changes = /* @__PURE__ */ new Map();
+			for (const [id, before] of polylineBeforeByEdge) {
+				const after = clonePoints(this.renderer.getEdge(id)?.controlPoints ?? []);
+				if (!this.editablePolylinePointsEqual(before, after)) changes.set(id, {
+					before: clonePoints(before),
+					after
+				});
+			}
+			if (changes.size > 0) this.historyManager.execute(new ChangeEditablePolylineControlPointsCommand((id) => this.renderer.getEdge(id), changes));
+			return;
+		}
 		const point = {
 			x: event.worldX,
 			y: event.worldY
@@ -15281,6 +15544,6 @@ function applyEdgeStyle(ctx, style) {
 	return baseOpacity * strokeOpacity;
 }
 //#endregion
-export { AddNodeCommand, AnimationManager, AutoLayout, AutoRouting, BezierPathStrategy, CContainer, CDivider, CIcon, CShape, CText, ChangeEdgePropertiesCommand, ChangeEditablePolylineControlPointsCommand, ChangeGroupPropertiesCommand, ChangeNodePropertiesCommand, CircleNode, ClipboardManager, CompositeCommand, CompositeNode, ConnectionManager, ContextMenuManager, CustomShapeNode, DARK_THEME, DEFAULT_THEME, DiagramRenderer, DiamondNode, DragManager, Edge, Element, EventEmitter, GridOverlay, Group, GuidesOverlay, HistoryManager, ImageExporter, InputHandler, InteractionManager, MiniMap, MoveNodesCommand, NavigationManager, Node, NodeImage, PolylinePathStrategy, Port, PropertyChangeBatcher, RectangleNode, RemoveNodeCommand, ResizeManager, RulersOverlay, SearchManager, SelectionManager, Serializer, ShapeFactories, StraightPathStrategy, StyleManager, SvgExporter, TextLabel, alignNodes, angle, applyEdgeStyle, applyNodeStyle, bezierPoint, boundsCenter, calculateBezierControlPoints, clamp, clonePoints, container, deserializeCComponent, directionFromAngle, distance, distanceToSegment, distributeNodes, divider, drawRoundedRectPath, expandBounds, flexLayout, generateId, getClosestPointOnPath, getPathPointAt, icon, isCornerPlacement, isEdgeEdgeEndpoint, isNodeEdgeEndpoint, lerp, mergeBounds, normalizeSides, pointInEllipse, pointInRect, rectIntersection, rectUnion, rectsIntersect, renderFillAndStroke, resetIdCounter, resetPortIdCounter, resolveContentInset, rotatePoint, segmentRectIntersections, shape, snapPointToGrid, snapToGrid, text };
+export { AddNodeCommand, AnimationManager, AutoLayout, AutoRouting, BezierPathStrategy, CContainer, CDivider, CIcon, CShape, CText, ChangeEdgePropertiesCommand, ChangeEditablePolylineControlPointsCommand, ChangeGroupPropertiesCommand, ChangeNodePropertiesCommand, CircleNode, ClipboardManager, CompositeCommand, CompositeNode, ConnectionManager, ContextMenuManager, CustomShapeNode, DARK_THEME, DEFAULT_THEME, DiagramRenderer, DiamondNode, DragManager, Edge, Element, EventEmitter, GridOverlay, Group, GuidesOverlay, HistoryManager, ImageExporter, InputHandler, InteractionManager, MiniMap, MoveNodesCommand, NavigationManager, Node, NodeImage, PolylinePathStrategy, Port, PropertyChangeBatcher, RectangleNode, RemoveNodeCommand, ResizeManager, ResizeNodesCommand, RulersOverlay, SearchManager, SelectionManager, Serializer, ShapeFactories, StraightPathStrategy, StyleManager, SvgExporter, TextLabel, alignNodes, angle, applyEdgeStyle, applyNodeStyle, bezierPoint, boundsCenter, calculateBezierControlPoints, clamp, clonePoints, container, deserializeCComponent, directionFromAngle, distance, distanceToSegment, distributeNodes, divider, drawRoundedRectPath, expandBounds, flexLayout, generateId, getClosestPointOnPath, getPathPointAt, icon, isCornerPlacement, isEdgeEdgeEndpoint, isNodeEdgeEndpoint, lerp, mergeBounds, normalizeSides, pointInEllipse, pointInRect, rectIntersection, rectUnion, rectsIntersect, renderFillAndStroke, resetIdCounter, resetPortIdCounter, resolveContentInset, rotatePoint, segmentRectIntersections, shape, snapPointToGrid, snapToGrid, text };
 
 //# sourceMappingURL=papirus.js.map