@ngroznykh/papirus 0.9.0 → 0.9.1

package/dist/core/ConnectionManager.d.ts

@@ -45,6 +45,9 @@ export declare class ConnectionManager extends EventEmitter<ConnectionEvents> {
     private sourceAnchorId;
     private hoverNodeId;
     private hoverAnchorId;
+    private hoverPoint;
+    private hoverOutlineHandle;
+    private hoverOutlineSide;
     private hoverDisabled;
     private reconnectPoint;
     private previewTargetAnchorId;
@@ -112,7 +115,7 @@ export declare class ConnectionManager extends EventEmitter<ConnectionEvents> {
     enableHover(): void;
     /**
      * 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: InputEvent): boolean;
@@ -191,6 +194,13 @@ export declare class ConnectionManager extends EventEmitter<ConnectionEvents> {
     private renderAnchorHighlights;
     private drawCross;
     private getNodeAtPoint;
+    private startOutlineConnection;
+    private outlineHandleHysteresis;
+    private outlineConnectHandleFor;
+    private outlineHandleHitRadius;
+    private findOutlineConnectHandleAt;
+    private renderOutlineConnectHandle;
+    private clearOutlineHandleCursor;
     private updateHover;
     private getAnchorAtPoint;
 }

package/dist/core/ConnectionManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectionManager.d.ts","sourceRoot":"","sources":["../../src/core/ConnectionManager.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ConnectionManager.d.ts","sourceRoot":"","sources":["../../src/core/ConnectionManager.ts"],"names":[],"mappings":"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"}

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();
 	}
@@ -2639,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) {
@@ -2668,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();
 	}
@@ -2693,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;