@pierre/diffs 1.3.0-beta.1 → 1.3.0-beta.11

package/dist/managers/InteractionManager.js

@@ -1,10 +1,13 @@
+import { dequeueRender, queueRender } from "./UniversalRenderingManager.js";
 import { areSelectionsEqual } from "../utils/areSelectionsEqual.js";
 import { areSelectionPointsEqual } from "../utils/areSelectionPointsEqual.js";
 import { createGutterUtilityElement } from "../utils/createGutterUtilityElement.js";
+import { isGutterUtilityPath } from "../utils/isGutterUtilityPath.js";
 import { toHtml } from "hast-util-to-html";
-
 //#region src/managers/InteractionManager.ts
 var InteractionManager = class {
+	mode;
+	options;
 	hoveredLine;
 	hoveredToken;
 	pre;
@@ -17,10 +20,15 @@ var InteractionManager = class {
 	hasPointerListeners = false;
 	hasDocumentPointerListeners = false;
 	selectedRange = null;
+	selectedRangeHighlightSide;
+	selectedRangeLineNumberOnly = false;
+	editorActiveLine = null;
+	editorActiveLineSide;
+	editorLineNumberOnly = false;
 	proposedSelectedRange;
-	renderedSelectionRange;
+	renderedSelectedLinesState;
+	renderedEditorActiveLineState;
 	selectionAnchor;
-	queuedSelectionRender;
 	pointerSession = { mode: "idle" };
 	constructor(mode, options) {
 		this.mode = mode;
@@ -46,13 +54,11 @@ var InteractionManager = class {
 		this.clearHoveredToken();
 		this.detachDocumentPointerListeners();
 		this.clearPointerSession();
-		if (this.queuedSelectionRender != null) {
-			cancelAnimationFrame(this.queuedSelectionRender);
-			this.queuedSelectionRender = void 0;
-		}
+		dequeueRender(this.renderSelection);
 		this.interactiveLinesAttr = false;
 		this.interactiveLineNumbersAttr = false;
 		this.hasPointerListeners = false;
+		this.setSelectionDirty();
 	}
 	setup(pre) {
 		this.setSelectionDirty();
@@ -79,19 +85,33 @@ var InteractionManager = class {
 		this.placeUtility();
 	}
 	setSelectionDirty() {
-		this.renderedSelectionRange = void 0;
+		this.renderedSelectedLinesState = void 0;
+		this.renderedEditorActiveLineState = void 0;
 	}
 	isSelectionDirty() {
-		return this.renderedSelectionRange === null;
+		return this.renderedSelectedLinesState === void 0 || this.renderedEditorActiveLineState === void 0;
 	}
 	setSelection(range, options) {
 		const isRangeChange = !(range === this.selectedRange || areSelectionsEqual(range ?? void 0, this.selectedRange ?? void 0));
-		if (!this.isSelectionDirty() && !isRangeChange) return;
+		const lineNumberOnly = options?.lineNumberOnly ?? false;
+		const isStyleChange = options?.activeLineSide !== this.selectedRangeHighlightSide || lineNumberOnly !== this.selectedRangeLineNumberOnly;
+		if (!this.isSelectionDirty() && !isRangeChange && !isStyleChange) return;
 		this.proposedSelectedRange = void 0;
 		this.selectedRange = range;
+		this.selectedRangeHighlightSide = options?.activeLineSide;
+		this.selectedRangeLineNumberOnly = lineNumberOnly;
 		this.renderSelection();
 		this.placeUtility();
-		if (isRangeChange && options?.notify !== false) this.notifySelectionCommitted();
+		if (isRangeChange && options?.notify !== false) this.notifySelectionCommitted(range);
+	}
+	setEditorActiveLine(lineNumber, { lineNumberOnly = false, side } = {}) {
+		const isLineChange = lineNumber !== this.editorActiveLine;
+		const isStyleChange = side !== this.editorActiveLineSide || lineNumberOnly !== this.editorLineNumberOnly;
+		if (!this.isSelectionDirty() && !isLineChange && !isStyleChange) return;
+		this.editorActiveLine = lineNumber;
+		this.editorActiveLineSide = side;
+		this.editorLineNumberOnly = lineNumberOnly;
+		this.renderSelection();
 	}
 	getSelection() {
 		return this.selectedRange;
@@ -290,7 +310,6 @@ var InteractionManager = class {
 		if (pointerInfo == null) return;
 		const { pre } = this;
 		if (pre == null) return;
-		event.preventDefault();
 		const { lineNumber, eventSide, lineIndex } = pointerInfo;
 		if (event.shiftKey && this.selectedRange != null) {
 			const rowRange = this.getIndexesFromSelection(this.selectedRange, pre.getAttribute("data-diff-type") === "split");
@@ -340,7 +359,7 @@ var InteractionManager = class {
 		this.attachDocumentPointerListeners();
 	}
 	startGutterSelectionFromPointerDown(event) {
-		const { enableLineSelection = false, onGutterUtilityClick } = this.options;
+		const { onGutterUtilityClick } = this.options;
 		if (onGutterUtilityClick == null) return;
 		const selectedEndpoints = this.currentSelectionEnds();
 		const point = selectedEndpoints?.bottom ?? this.resolveSelectionPoint(event, {
@@ -357,18 +376,15 @@ var InteractionManager = class {
 			anchor,
 			current: point
 		};
-		if (enableLineSelection) {
-			this.selectionAnchor = {
-				lineNumber: anchor.lineNumber,
-				side: anchor.side
-			};
-			this.updateSelection(point.lineNumber, point.side, false);
-			this.notifySelectionStart(this.getCurrentSelectionRange());
-		}
+		this.selectionAnchor = {
+			lineNumber: anchor.lineNumber,
+			side: anchor.side
+		};
+		this.updateSelection(point.lineNumber, point.side, false);
+		this.notifySelectionStart(this.getCurrentSelectionRange());
 		this.attachDocumentPointerListeners();
 	}
 	handleDocumentPointerMove = (event) => {
-		const { enableLineSelection = false } = this.options;
 		switch (this.pointerSession.mode) {
 			case "idle": return;
 			case "gutterSelecting": {
@@ -377,7 +393,7 @@ var InteractionManager = class {
 				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);
+				this.updateSelection(point.lineNumber, point.side);
 				return;
 			}
 			case "selecting": {
@@ -416,24 +432,24 @@ var InteractionManager = class {
 		}
 	};
 	handleDocumentPointerUp = (event) => {
-		const { enableLineSelection = false, onGutterUtilityClick } = this.options;
+		const { onGutterUtilityClick } = this.options;
 		switch (this.pointerSession.mode) {
 			case "idle": return;
 			case "gutterSelecting": {
-				if (event.pointerId !== this.pointerSession.pointerId) return;
+				const { pointerSession: session } = this;
+				if (event.pointerId !== session.pointerId) return;
 				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);
+					session.current = point;
+					this.updateSelection(point.lineNumber, point.side);
 				}
-				onGutterUtilityClick?.(this.buildSelectedLineRange(this.pointerSession.anchor, this.pointerSession.current));
+				const completedRange = this.buildSelectedLineRange(session.anchor, session.current);
+				onGutterUtilityClick?.({ ...completedRange });
 				this.selectionAnchor = void 0;
-				if (enableLineSelection) {
-					this.notifySelectionEnd(this.getCurrentSelectionRange());
-					this.notifySelectionCommitted();
-					this.clearProposedSelection();
-				}
+				this.notifySelectionEnd(completedRange);
+				this.notifySelectionCommitted(completedRange);
+				this.clearProposedSelection();
 				this.clearPointerSession();
 				this.detachDocumentPointerListeners();
 				return;
@@ -446,7 +462,7 @@ var InteractionManager = class {
 				this.clearPendingSingleLineState();
 				this.detachDocumentPointerListeners();
 				this.notifySelectionEnd(this.getCurrentSelectionRange());
-				this.notifySelectionCommitted();
+				this.notifySelectionCommitted(this.getCurrentSelectionRange());
 				this.clearProposedSelection();
 				return;
 			case "selecting":
@@ -456,7 +472,7 @@ var InteractionManager = class {
 				this.detachDocumentPointerListeners();
 				this.clearPointerSession();
 				this.notifySelectionEnd(this.getCurrentSelectionRange());
-				this.notifySelectionCommitted();
+				this.notifySelectionCommitted(this.getCurrentSelectionRange());
 				this.clearProposedSelection();
 		}
 	};
@@ -709,10 +725,12 @@ var InteractionManager = class {
 			nextRange = this.buildSelectionRange(anchorLine, currentLine, anchorSide, side);
 		}
 		if (areSelectionsEqual(previousRange ?? void 0, nextRange ?? void 0)) return;
+		this.selectedRangeHighlightSide = void 0;
+		this.selectedRangeLineNumberOnly = false;
 		if (this.options.controlledSelection === true) this.proposedSelectedRange = nextRange;
 		else {
 			this.selectedRange = nextRange;
-			this.queuedSelectionRender ??= requestAnimationFrame(this.renderSelection);
+			queueRender(this.renderSelection);
 		}
 		this.placeUtility();
 		if (emitChange) this.notifySelectionChangeDelta();
@@ -726,62 +744,121 @@ var InteractionManager = class {
 			end: split ? finalIndexes[1] : finalIndexes[0]
 		} : void 0;
 	}
-	renderSelection = () => {
-		if (this.queuedSelectionRender != null) {
-			cancelAnimationFrame(this.queuedSelectionRender);
-			this.queuedSelectionRender = void 0;
+	getSelectionRenderState() {
+		return {
+			selectedLines: {
+				range: this.selectedRange,
+				highlightSide: this.selectedRangeHighlightSide,
+				lineNumberOnly: this.selectedRangeLineNumberOnly
+			},
+			editorActiveLine: {
+				range: this.editorActiveLine == null ? null : {
+					start: this.editorActiveLine,
+					end: this.editorActiveLine,
+					side: this.editorActiveLineSide
+				},
+				highlightSide: this.editorActiveLineSide,
+				lineNumberOnly: this.editorLineNumberOnly
+			}
+		};
+	}
+	resolveLineRenderRange(state, split, source) {
+		if (state.range == null) return;
+		const rowRange = this.getIndexesFromSelection(state.range, split);
+		if (rowRange == null) {
+			console.error({
+				rowRange,
+				range: state.range
+			});
+			throw new Error(`InteractionManager.renderSelection: No valid ${source} rowRange`);
 		}
-		if (this.pre == null || this.renderedSelectionRange === this.selectedRange) return;
-		const allSelected = this.pre.querySelectorAll("[data-selected-line]");
-		for (const element of allSelected) element.removeAttribute("data-selected-line");
-		this.renderedSelectionRange = this.selectedRange;
-		if (this.selectedRange == null) return;
+		return rowRange;
+	}
+	getLineRenderColumns(selectedLines, selectedRowRange, editorActiveLine, editorRowRange) {
+		if (this.pre == null || selectedRowRange == null && editorRowRange == null) return [];
 		const { children: codeElements } = this.pre;
-		if (codeElements.length === 0) return;
 		if (codeElements.length > 2) {
 			console.error(codeElements);
 			throw new Error("InteractionManager.renderSelection: Somehow there are more than 2 code elements...");
 		}
-		const split = this.pre.getAttribute("data-diff-type") === "split";
-		const rowRange = this.getIndexesFromSelection(this.selectedRange, split);
-		if (rowRange == null) {
-			console.error({
-				rowRange,
-				selectedRange: this.selectedRange
-			});
-			throw new Error("InteractionManager.renderSelection: No valid rowRange");
-		}
-		const isSingle = rowRange.start === rowRange.end;
-		const first = Math.min(rowRange.start, rowRange.end);
-		const last = Math.max(rowRange.start, rowRange.end);
+		const columns = [];
 		for (const code of codeElements) {
+			const side = code.hasAttribute("data-deletions") ? "deletions" : code.hasAttribute("data-additions") ? "additions" : void 0;
+			const renderSelectedLines = selectedLines != null && selectedRowRange != null && (selectedLines.highlightSide == null || side == null || selectedLines.highlightSide === side);
+			const renderEditorActiveLine = editorActiveLine != null && editorRowRange != null && (editorActiveLine.highlightSide == null || side == null || editorActiveLine.highlightSide === side);
+			if (!renderSelectedLines && !renderEditorActiveLine) continue;
 			const [gutter, content] = code.children;
+			if (!(gutter instanceof HTMLElement) || !(content instanceof HTMLElement)) throw new Error("InteractionManager.renderSelection: missing gutter or content element");
+			if (content.children.length !== gutter.children.length) throw new Error("InteractionManager.renderSelection: gutter and content children dont match, something is wrong");
+			columns.push({
+				content,
+				gutter,
+				renderEditorActiveLine,
+				renderSelectedLines
+			});
+		}
+		return columns;
+	}
+	renderSelection = () => {
+		dequeueRender(this.renderSelection);
+		const renderState = this.getSelectionRenderState();
+		if (this.pre == null) return;
+		const { editorActiveLine, selectedLines } = renderState;
+		const selectedLinesChanged = !areLineRenderStatesEqual(this.renderedSelectedLinesState, selectedLines);
+		const editorActiveLineChanged = !areLineRenderStatesEqual(this.renderedEditorActiveLineState, editorActiveLine);
+		if (!selectedLinesChanged && !editorActiveLineChanged) return;
+		if (selectedLinesChanged) this.renderedSelectedLinesState = void 0;
+		if (editorActiveLineChanged) this.renderedEditorActiveLineState = void 0;
+		const split = this.pre.getAttribute("data-diff-type") === "split";
+		const selectedRowRange = !selectedLinesChanged ? void 0 : this.resolveLineRenderRange(selectedLines, split, "selected-lines");
+		const editorRowRange = !editorActiveLineChanged ? void 0 : this.resolveLineRenderRange(editorActiveLine, split, "editor-active-line");
+		const columns = this.getLineRenderColumns(selectedLinesChanged ? selectedLines : void 0, selectedRowRange, editorActiveLineChanged ? editorActiveLine : void 0, editorRowRange);
+		const selectedLinesComplete = selectedLines.range == null || columns.some((column) => column.renderSelectedLines);
+		const editorActiveLineComplete = editorActiveLine.range == null || columns.some((column) => column.renderEditorActiveLine);
+		if (selectedLinesChanged) for (const element of this.pre.querySelectorAll("[data-selected-line]")) element.removeAttribute("data-selected-line");
+		if (editorActiveLineChanged) for (const element of this.pre.querySelectorAll("[data-editor-active-line]")) element.removeAttribute("data-editor-active-line");
+		const selectedFirst = selectedRowRange == null ? void 0 : Math.min(selectedRowRange.start, selectedRowRange.end);
+		const selectedLast = selectedRowRange == null ? void 0 : Math.max(selectedRowRange.start, selectedRowRange.end);
+		const selectedIsSingle = selectedFirst === selectedLast;
+		const editorLineIndex = editorRowRange?.start;
+		for (const column of columns) {
+			const { content, gutter, renderEditorActiveLine, renderSelectedLines } = column;
+			const finalLineIndex = Math.max(renderSelectedLines ? selectedLast ?? -Infinity : -Infinity, renderEditorActiveLine ? editorLineIndex ?? -Infinity : -Infinity);
 			const len = content.children.length;
-			if (len !== gutter.children.length) throw new Error("InteractionManager.renderSelection: gutter and content children dont match, something is wrong");
 			for (let i = 0; i < len; i++) {
 				const contentElement = content.children[i];
 				const gutterElement = gutter.children[i];
 				if (!(contentElement instanceof HTMLElement) || !(gutterElement instanceof HTMLElement)) continue;
 				const lineIndex = this.parseLineIndex(contentElement, split);
-				if ((lineIndex ?? 0) > last) break;
-				if (lineIndex == null || lineIndex < first) continue;
-				let attributeValue = isSingle ? "single" : lineIndex === first ? "first" : lineIndex === last ? "last" : "";
-				contentElement.setAttribute("data-selected-line", attributeValue);
-				gutterElement.setAttribute("data-selected-line", attributeValue);
-				if (gutterElement.nextSibling instanceof HTMLElement && contentElement.nextSibling instanceof HTMLElement && (contentElement.nextSibling.hasAttribute("data-line-annotation") || contentElement.nextSibling.hasAttribute("data-merge-conflict-actions"))) {
-					if (isSingle) {
-						attributeValue = "last";
-						contentElement.setAttribute("data-selected-line", "first");
-					} else if (lineIndex === first) attributeValue = "";
-					else if (lineIndex === last) contentElement.setAttribute("data-selected-line", "");
-					contentElement.nextSibling.setAttribute("data-selected-line", attributeValue);
-					gutterElement.nextSibling.setAttribute("data-selected-line", attributeValue);
+				if ((lineIndex ?? 0) > finalLineIndex) break;
+				if (lineIndex == null) continue;
+				if (renderSelectedLines && selectedFirst != null && selectedLast != null && lineIndex >= selectedFirst && lineIndex <= selectedLast) {
+					let attributeValue = selectedIsSingle ? "single" : lineIndex === selectedFirst ? "first" : lineIndex === selectedLast ? "last" : "";
+					gutterElement.setAttribute("data-selected-line", attributeValue);
+					if (!selectedLines.lineNumberOnly) {
+						contentElement.setAttribute("data-selected-line", attributeValue);
+						if (gutterElement.nextSibling instanceof HTMLElement && contentElement.nextSibling instanceof HTMLElement && (contentElement.nextSibling.hasAttribute("data-line-annotation") || contentElement.nextSibling.hasAttribute("data-merge-conflict-actions"))) {
+							if (selectedIsSingle) {
+								attributeValue = "last";
+								contentElement.setAttribute("data-selected-line", "first");
+							} else if (lineIndex === selectedFirst) attributeValue = "";
+							else if (lineIndex === selectedLast) contentElement.setAttribute("data-selected-line", "");
+							contentElement.nextSibling.setAttribute("data-selected-line", attributeValue);
+							gutterElement.nextSibling.setAttribute("data-selected-line", attributeValue);
+						}
+					}
+				}
+				if (renderEditorActiveLine && lineIndex === editorLineIndex) {
+					gutterElement.setAttribute("data-editor-active-line", "");
+					if (!editorActiveLine.lineNumberOnly) contentElement.setAttribute("data-editor-active-line", "");
 				}
 			}
 		}
+		if (selectedLinesChanged && selectedLinesComplete) this.renderedSelectedLinesState = selectedLines;
+		if (editorActiveLineChanged && editorActiveLineComplete) this.renderedEditorActiveLineState = editorActiveLine;
 	};
-	notifySelectionCommitted() {
-		this.options.onLineSelected?.(this.getCurrentSelectionRange() ?? null);
+	notifySelectionCommitted(range) {
+		this.options.onLineSelected?.(range);
 	}
 	notifySelectionChangeDelta() {
 		this.options.onLineSelectionChange?.(this.getCurrentSelectionRange() ?? null);
@@ -1073,7 +1150,7 @@ function selectionPointFromAnnotationSlotName(slotName) {
 	const match = /^annotation-(?:(additions|deletions)-)?(\d+)$/.exec(slotName);
 	if (match == null) return;
 	const lineNumber = Number.parseInt(match[2], 10);
-	if (!Number.isFinite(lineNumber)) return;
+	if (!Number.isFinite(lineNumber) || lineNumber <= 0) return;
 	return {
 		lineNumber,
 		side: match[1]
@@ -1082,6 +1159,12 @@ function selectionPointFromAnnotationSlotName(slotName) {
 function hasElementFromPoint(value) {
 	return value != null && typeof value.elementFromPoint === "function";
 }
+function areSelectionRangesEqual(first, second) {
+	return first === second || areSelectionsEqual(first ?? void 0, second ?? void 0);
+}
+function areLineRenderStatesEqual(first, second) {
+	return first?.highlightSide === second.highlightSide && first?.lineNumberOnly === second.lineNumberOnly && areSelectionRangesEqual(first?.range ?? null, second.range);
+}
 function getAnnotationSide(lineType, codeElement) {
 	switch (lineType) {
 		case "change-deletion": return "deletions";
@@ -1100,13 +1183,6 @@ function getLineTypeFromElement(element) {
 		default: return;
 	}
 }
-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) {
 	switch (debugLogType) {
 		case "none": return;
@@ -1120,7 +1196,7 @@ function debugLogIfEnabled(debugLogType = "none", logIfType, ...args) {
 	}
 	console.log(...args);
 }
-
 //#endregion
 export { InteractionManager, pluckInteractionOptions };
+
 //# sourceMappingURL=InteractionManager.js.map