@pierre/diffs 1.2.0-beta.3 → 1.2.0-beta.5

package/dist/managers/InteractionManager.js

@@ -8,6 +8,7 @@ var InteractionManager = class {
 	hoveredLine;
 	hoveredToken;
 	pre;
+	gutterUtilityLine;
 	gutterUtilityContainer;
 	gutterUtilityButton;
 	gutterUtilitySlot;
@@ -37,6 +38,7 @@ var InteractionManager = class {
 		this.pre?.removeAttribute("data-interactive-line-numbers");
 		this.pre = void 0;
 		this.gutterUtilityContainer?.remove();
+		this.gutterUtilityLine = void 0;
 		this.gutterUtilityContainer = void 0;
 		this.gutterUtilityButton = void 0;
 		this.gutterUtilitySlot = void 0;
@@ -62,6 +64,7 @@ var InteractionManager = class {
 		if (enableGutterUtility) this.ensureGutterUtilityNode(usesCustomGutterUtility);
 		else if (this.gutterUtilityContainer != null) {
 			this.gutterUtilityContainer.remove();
+			this.gutterUtilityLine = void 0;
 			this.gutterUtilityContainer = void 0;
 			this.gutterUtilityButton = void 0;
 			this.gutterUtilitySlot = void 0;
@@ -73,6 +76,7 @@ var InteractionManager = class {
 		this.syncPointerListeners(pre);
 		this.updateInteractiveLineAttributes();
 		this.renderSelection();
+		this.placeUtility();
 	}
 	setSelectionDirty() {
 		this.renderedSelectionRange = void 0;
@@ -86,24 +90,26 @@ var InteractionManager = class {
 		this.proposedSelectedRange = void 0;
 		this.selectedRange = range;
 		this.renderSelection();
+		this.placeUtility();
 		if (isRangeChange && options?.notify !== false) this.notifySelectionCommitted();
 	}
 	getSelection() {
 		return this.selectedRange;
 	}
 	getHoveredLine = () => {
-		if (this.hoveredLine != null) {
-			if (this.mode === "diff" && this.hoveredLine.type === "diff-line") return {
-				lineNumber: this.hoveredLine.lineNumber,
-				side: this.hoveredLine.annotationSide
+		const gutterUtilityLine = this.gutterUtilityLine ?? this.hoveredLine;
+		if (gutterUtilityLine != null) {
+			if (this.mode === "diff" && gutterUtilityLine.type === "diff-line") return {
+				lineNumber: gutterUtilityLine.lineNumber,
+				side: gutterUtilityLine.annotationSide
 			};
-			if (this.mode === "file" && this.hoveredLine.type === "line") return { lineNumber: this.hoveredLine.lineNumber };
+			if (this.mode === "file" && gutterUtilityLine.type === "line") return { lineNumber: gutterUtilityLine.lineNumber };
 		}
 	};
 	handlePointerClick = (event) => {
 		const { onHunkExpand, onLineClick, onLineNumberClick, onTokenClick, onMergeConflictActionClick } = this.options;
 		if (onHunkExpand == null && onLineClick == null && onLineNumberClick == null && onMergeConflictActionClick == null && onTokenClick == null) return;
-		if (this.options.onGutterUtilityClick != null && isGutterUtilityPointerPath(event.composedPath())) return;
+		if (this.options.onGutterUtilityClick != null && isGutterUtilityPath(event.composedPath())) return;
 		debugLogIfEnabled(this.options.__debugPointerEvents, "click", "FileDiff.DEBUG.handlePointerClick:", event);
 		this.handlePointerEvent({
 			eventType: "click",
@@ -111,6 +117,7 @@ var InteractionManager = class {
 		});
 	};
 	handlePointerMove = (event) => {
+		if (event.pointerType !== "mouse") return;
 		const { lineHoverHighlight = "disabled", onLineEnter, onLineLeave, onTokenEnter, onTokenLeave, enableGutterUtility = false } = this.options;
 		if (lineHoverHighlight === "disabled" && !enableGutterUtility && onLineEnter == null && onLineLeave == null && onTokenEnter == null && onTokenLeave == null) return;
 		debugLogIfEnabled(this.options.__debugPointerEvents, "move", "FileDiff.DEBUG.handlePointerMove:", event);
@@ -126,7 +133,6 @@ var InteractionManager = class {
 			debugLogIfEnabled(__debugPointerEvents, "move", "FileDiff.DEBUG.handlePointerLeave: returned early, no hovered line or token");
 			return;
 		}
-		this.gutterUtilityContainer?.remove();
 		if (this.hoveredToken != null) {
 			this.options.onTokenLeave?.(this.hoveredToken, event);
 			this.clearHoveredToken();
@@ -138,6 +144,7 @@ var InteractionManager = class {
 			});
 			this.clearHoveredLine();
 		}
+		this.placeUtility();
 	};
 	handlePointerEvent({ eventType, event }) {
 		const { __debugPointerEvents } = this.options;
@@ -164,7 +171,6 @@ var InteractionManager = class {
 				}
 				if (!sameLine) {
 					if (this.hoveredLine != null) {
-						this.gutterUtilityContainer?.remove();
 						onLineLeave?.({
 							...this.hoveredLine,
 							event
@@ -173,12 +179,12 @@ var InteractionManager = class {
 					}
 					if (isHoverableLinePointerTarget(target)) {
 						this.setHoveredLine(this.toEventBaseProps(target));
-						if (this.gutterUtilityContainer != null) target.numberElement.appendChild(this.gutterUtilityContainer);
+						this.placeUtility();
 						onLineEnter?.({
 							...this.hoveredLine,
 							event
 						});
-					}
+					} else this.placeUtility();
 				}
 				break;
 			}
@@ -268,13 +274,19 @@ var InteractionManager = class {
 	handlePointerDown = (event) => {
 		if (event.pointerType === "mouse" && event.button !== 0 || this.pre == null || this.pointerSession.mode !== "idle") return;
 		const path = event.composedPath();
-		if (isGutterUtilityPointerPath(path) && this.options.onGutterUtilityClick != null) this.startGutterSelectionFromPointerDown(event, path);
-		else this.startLineSelectionFromPointerDown(event, path);
+		if (isGutterUtilityPath(path) && this.options.onGutterUtilityClick != null) this.startGutterSelectionFromPointerDown(event);
+		else {
+			if (event.pointerType !== "mouse") this.revealUtilityFromGutterPath(path);
+			this.startLineSelectionFromPointerDown(event);
+		}
 	};
-	startLineSelectionFromPointerDown(event, path) {
+	startLineSelectionFromPointerDown(event) {
 		const { enableLineSelection = false } = this.options;
 		if (!enableLineSelection) return;
-		const pointerInfo = this.getSelectionPointerInfo(path, true);
+		const pointerInfo = this.resolveSelectionInfo(event, {
+			source: "event-path",
+			requireNumberColumn: true
+		});
 		if (pointerInfo == null) return;
 		const { pre } = this;
 		if (pre == null) return;
@@ -314,6 +326,7 @@ var InteractionManager = class {
 		}
 		if (this.options.controlledSelection === true) this.proposedSelectedRange = null;
 		else this.selectedRange = null;
+		this.placeUtility();
 		this.selectionAnchor = {
 			lineNumber,
 			side: eventSide
@@ -326,23 +339,28 @@ var InteractionManager = class {
 		};
 		this.attachDocumentPointerListeners();
 	}
-	startGutterSelectionFromPointerDown(event, path) {
+	startGutterSelectionFromPointerDown(event) {
 		const { enableLineSelection = false, onGutterUtilityClick } = this.options;
 		if (onGutterUtilityClick == null) return;
-		const point = this.getSelectionPointFromPath(path);
-		if (point == null) return;
+		const selectedEndpoints = this.currentSelectionEnds();
+		const point = selectedEndpoints?.bottom ?? this.resolveSelectionPoint(event, {
+			source: "event-path",
+			excludeUtility: false
+		});
+		const anchor = selectedEndpoints?.top ?? point;
+		if (point == null || anchor == null) return;
 		event.preventDefault();
 		event.stopPropagation();
 		this.pointerSession = {
 			mode: "gutterSelecting",
 			pointerId: event.pointerId,
-			anchor: point,
+			anchor,
 			current: point
 		};
 		if (enableLineSelection) {
 			this.selectionAnchor = {
-				lineNumber: point.lineNumber,
-				side: point.side
+				lineNumber: anchor.lineNumber,
+				side: anchor.side
 			};
 			this.updateSelection(point.lineNumber, point.side, false);
 			this.notifySelectionStart(this.getCurrentSelectionRange());
@@ -355,7 +373,8 @@ var InteractionManager = class {
 			case "idle": return;
 			case "gutterSelecting": {
 				if (event.pointerId !== this.pointerSession.pointerId) return;
-				const point = this.getSelectionPointFromPath(event.composedPath());
+				event.preventDefault();
+				const point = this.resolveSelectionPoint(event, { source: "coordinates-first" });
 				if (point == null) return;
 				this.pointerSession.current = point;
 				if (enableLineSelection === true) this.updateSelection(point.lineNumber, point.side);
@@ -363,14 +382,22 @@ var InteractionManager = class {
 			}
 			case "selecting": {
 				if (event.pointerId !== this.pointerSession.pointerId) return;
-				const pointerInfo = this.getSelectionPointerInfo(event.composedPath(), false);
+				event.preventDefault();
+				const pointerInfo = this.resolveSelectionInfo(event, {
+					source: "coordinates-first",
+					requireNumberColumn: false
+				});
 				if (pointerInfo == null || this.selectionAnchor == null) return;
 				this.updateSelection(pointerInfo.lineNumber, pointerInfo.eventSide);
 				return;
 			}
 			case "pendingSingleLineUnselect": {
 				if (event.pointerId !== this.pointerSession.pointerId) return;
-				const pointerInfo = this.getSelectionPointerInfo(event.composedPath(), false);
+				event.preventDefault();
+				const pointerInfo = this.resolveSelectionInfo(event, {
+					source: "coordinates-first",
+					requireNumberColumn: false
+				});
 				if (pointerInfo == null || this.selectionAnchor == null) return;
 				const point = {
 					lineNumber: pointerInfo.lineNumber,
@@ -394,7 +421,8 @@ var InteractionManager = class {
 			case "idle": return;
 			case "gutterSelecting": {
 				if (event.pointerId !== this.pointerSession.pointerId) return;
-				const point = this.getSelectionPointFromPath(event.composedPath());
+				event.preventDefault();
+				const point = this.resolveSelectionPoint(event, { source: "coordinates-first" });
 				if (point != null) {
 					this.pointerSession.current = point;
 					if (enableLineSelection) this.updateSelection(point.lineNumber, point.side);
@@ -412,6 +440,7 @@ var InteractionManager = class {
 			}
 			case "pendingSingleLineUnselect":
 				if (event.pointerId !== this.pointerSession.pointerId) return;
+				event.preventDefault();
 				this.updateSelection(null, void 0, false);
 				this.selectionAnchor = void 0;
 				this.clearPendingSingleLineState();
@@ -422,6 +451,7 @@ var InteractionManager = class {
 				return;
 			case "selecting":
 				if (event.pointerId !== this.pointerSession.pointerId) return;
+				event.preventDefault();
 				this.selectionAnchor = void 0;
 				this.detachDocumentPointerListeners();
 				this.clearPointerSession();
@@ -498,6 +528,79 @@ var InteractionManager = class {
 			if (this.gutterUtilityButton.parentNode !== this.gutterUtilityContainer) this.gutterUtilityContainer.replaceChildren(this.gutterUtilityButton);
 		}
 	}
+	revealUtilityFromGutterPath(path) {
+		if (this.placeUtilityFromSelection()) return;
+		const target = this.resolvePointerTarget(path);
+		if (isLinePointerTarget(target) && target.numberColumn) this.showUtilityOnLine(this.toEventBaseProps(target));
+	}
+	placeUtility() {
+		if (this.placeUtilityFromSelection()) return;
+		if (this.hoveredLine != null) {
+			this.showUtilityOnLine(this.hoveredLine);
+			return;
+		}
+		this.hideUtility();
+	}
+	placeUtilityFromSelection() {
+		const endpoints = this.currentSelectionEnds();
+		if (endpoints == null) return false;
+		const target = this.targetForSelectionPoint(endpoints.bottom);
+		if (target == null) this.hideUtility();
+		else this.showUtilityOnLine(this.toEventBaseProps(target));
+		return true;
+	}
+	showUtilityOnLine(line) {
+		if (this.gutterUtilityContainer == null) return;
+		this.gutterUtilityLine = line;
+		line.numberElement.appendChild(this.gutterUtilityContainer);
+	}
+	hideUtility() {
+		this.gutterUtilityContainer?.remove();
+		this.gutterUtilityLine = void 0;
+	}
+	currentSelectionEnds() {
+		const range = this.getCurrentSelectionRange();
+		return range == null ? void 0 : this.selectionEnds(range);
+	}
+	selectionEnds(range) {
+		const start = {
+			lineNumber: range.start,
+			side: range.side
+		};
+		const end = {
+			lineNumber: range.end,
+			side: range.endSide ?? range.side
+		};
+		const startIndex = this.selectionPointRowIndex(start);
+		const endIndex = this.selectionPointRowIndex(end);
+		if (startIndex == null || endIndex == null) return;
+		return startIndex > endIndex ? {
+			top: end,
+			bottom: start
+		} : {
+			top: start,
+			bottom: end
+		};
+	}
+	selectionPointRowIndex(point) {
+		const indexes = this.getLineIndex(point.lineNumber, point.side);
+		if (indexes == null) return;
+		return this.isSplitDiff() ? indexes[1] : indexes[0];
+	}
+	targetForSelectionPoint(point) {
+		if (this.pre == null) return;
+		const indexes = this.getLineIndex(point.lineNumber, point.side);
+		if (indexes == null) return;
+		const lineIndex = this.mode === "diff" ? `${indexes[0]},${indexes[1]}` : `${indexes[0]}`;
+		const candidates = this.pre.querySelectorAll(`[data-column-number="${point.lineNumber}"][data-line-index="${lineIndex}"]`);
+		for (const element of candidates) {
+			if (!(element instanceof HTMLElement)) continue;
+			const target = this.resolvePointerTarget(getElementPath(element));
+			if (!isLinePointerTarget(target)) continue;
+			if (this.mode === "diff" && point.side != null && target.side !== point.side) continue;
+			return target;
+		}
+	}
 	attachDocumentPointerListeners() {
 		if (this.hasDocumentPointerListeners) return;
 		document.addEventListener("pointermove", this.handleDocumentPointerMove);
@@ -518,7 +621,7 @@ var InteractionManager = class {
 	clearPendingSingleLineState() {
 		if (this.pointerSession.mode === "pendingSingleLineUnselect") this.pointerSession = { mode: "idle" };
 	}
-	getSelectionPointerInfo(path, requireNumberColumn) {
+	selectionInfoFromPath(path, requireNumberColumn) {
 		const target = this.resolvePointerTarget(path);
 		if (!isLinePointerTarget(target)) return;
 		if (requireNumberColumn && !target.numberColumn) return;
@@ -529,7 +632,11 @@ var InteractionManager = class {
 			eventSide: this.mode === "diff" ? target.side : void 0
 		};
 	}
-	getSelectionPointFromPath(path) {
+	resolveSelectionInfo(event, options) {
+		const path = this.resolveSelectionPath(event, options);
+		return path != null ? this.selectionInfoFromPath(path, options.requireNumberColumn) : void 0;
+	}
+	selectionPointFromPath(path) {
 		const target = this.resolvePointerTarget(path);
 		if (!isLinePointerTarget(target)) return;
 		return {
@@ -537,6 +644,51 @@ var InteractionManager = class {
 			side: this.mode === "diff" ? target.side : void 0
 		};
 	}
+	resolveSelectionPoint(event, options) {
+		const path = this.resolveSelectionPath(event, options);
+		return path != null ? this.selectionPointFromPath(path) : void 0;
+	}
+	resolveSelectionPath(event, options) {
+		const excludeUtility = options.excludeUtility !== false;
+		switch (options.source) {
+			case "event-path": return this.pathFromEventPath(event.composedPath(), excludeUtility);
+			case "coordinates-first": {
+				const coordinatePath = this.pathFromCoordinates(event, excludeUtility);
+				if (coordinatePath !== void 0) return coordinatePath ?? void 0;
+				return this.pathFromEventPath(event.composedPath(), excludeUtility);
+			}
+		}
+	}
+	pathFromCoordinates(event, excludeUtility) {
+		const coordinateTarget = this.hitTest(event);
+		if (coordinateTarget === void 0) return;
+		if (coordinateTarget === null) return null;
+		return this.pathFromElement(coordinateTarget, excludeUtility) ?? null;
+	}
+	pathFromEventPath(path, excludeUtility) {
+		if (excludeUtility && isGutterUtilityPath(path)) return;
+		for (const element of path) if (element instanceof Element) return this.pathFromElement(element, excludeUtility);
+	}
+	pathFromElement(element, excludeUtility) {
+		const path = getElementPath(element);
+		if (excludeUtility && isGutterUtilityPath(path)) return;
+		const row = closestSelectableRow(element);
+		if (row != null) return getElementPath(row);
+		return this.pathFromAnnotationSlot(element);
+	}
+	pathFromAnnotationSlot(element) {
+		const point = selectionPointFromAnnotationSlotName(getAnnotationSlotName(element));
+		if (point == null) return;
+		const target = this.targetForSelectionPoint(point);
+		return target != null ? getElementPath(target.lineElement) : void 0;
+	}
+	hitTest(event) {
+		if (!Number.isFinite(event.clientX) || !Number.isFinite(event.clientY)) return;
+		const root = this.pre?.getRootNode();
+		const elementFromPointRoot = hasElementFromPoint(root) ? root : hasElementFromPoint(document) ? document : void 0;
+		if (elementFromPointRoot == null) return;
+		return elementFromPointRoot.elementFromPoint(event.clientX, event.clientY);
+	}
 	getLineIndex(lineNumber, side) {
 		const { getLineIndex } = this.options;
 		return getLineIndex != null ? getLineIndex(lineNumber, side) : [lineNumber - 1, lineNumber - 1];
@@ -562,6 +714,7 @@ var InteractionManager = class {
 			this.selectedRange = nextRange;
 			this.queuedSelectionRender ??= requestAnimationFrame(this.renderSelection);
 		}
+		this.placeUtility();
 		if (emitChange) this.notifySelectionChangeDelta();
 	}
 	getIndexesFromSelection(selectedRange, split) {
@@ -890,6 +1043,45 @@ function queryHTMLElement(parent, query) {
 	const element = parent?.querySelector(query);
 	return element instanceof HTMLElement ? element : void 0;
 }
+function getElementPath(element) {
+	const path = [];
+	let current = element;
+	while (current != null) {
+		path.push(current);
+		current = current.parentNode;
+	}
+	return path;
+}
+function closestSelectableRow(element) {
+	const row = element.closest("[data-line], [data-column-number]");
+	if (row instanceof HTMLElement) return row;
+	const annotationRow = element.closest("[data-line-annotation], [data-gutter-buffer=\"annotation\"]");
+	if (!(annotationRow instanceof HTMLElement)) return;
+	const previousRow = annotationRow.previousElementSibling;
+	return previousRow instanceof HTMLElement && (previousRow.hasAttribute("data-line") || previousRow.hasAttribute("data-column-number")) ? previousRow : void 0;
+}
+function getAnnotationSlotName(element) {
+	const slottedElement = element.closest("[slot^=\"annotation-\"]");
+	if (slottedElement instanceof HTMLElement) return slottedElement.getAttribute("slot") ?? void 0;
+	if (element instanceof HTMLElement) {
+		const slotName = element.getAttribute("name") ?? void 0;
+		return slotName != null && slotName.startsWith("annotation-") ? slotName : void 0;
+	}
+}
+function selectionPointFromAnnotationSlotName(slotName) {
+	if (slotName == null) return;
+	const match = /^annotation-(?:(additions|deletions)-)?(\d+)$/.exec(slotName);
+	if (match == null) return;
+	const lineNumber = Number.parseInt(match[2], 10);
+	if (!Number.isFinite(lineNumber)) return;
+	return {
+		lineNumber,
+		side: match[1]
+	};
+}
+function hasElementFromPoint(value) {
+	return value != null && typeof value.elementFromPoint === "function";
+}
 function getAnnotationSide(lineType, codeElement) {
 	switch (lineType) {
 		case "change-deletion": return "deletions";
@@ -908,8 +1100,11 @@ function getLineTypeFromElement(element) {
 		default: return;
 	}
 }
-function isGutterUtilityPointerPath(path) {
-	for (const element of path) if (element instanceof HTMLElement && element.hasAttribute("data-utility-button")) return true;
+function isGutterUtilityPath(path) {
+	for (const element of path) {
+		if (!(element instanceof HTMLElement)) continue;
+		if (element.hasAttribute("data-utility-button") || element.hasAttribute("data-gutter-utility-slot") || element.getAttribute("slot") === "gutter-utility-slot" || element.getAttribute("name") === "gutter-utility-slot") return true;
+	}
 	return false;
 }
 function debugLogIfEnabled(debugLogType = "none", logIfType, ...args) {