|
|
@@ -1,16 +1,70 @@
|
|
|
import { checksum } from "@opencode-ai/util/encode"
|
|
|
-import { FileDiff } from "@pierre/diffs"
|
|
|
+import { FileDiff, type SelectedLineRange } from "@pierre/diffs"
|
|
|
import { createMediaQuery } from "@solid-primitives/media"
|
|
|
-import { createEffect, createMemo, onCleanup, splitProps } from "solid-js"
|
|
|
+import { createEffect, createMemo, createSignal, onCleanup, splitProps } from "solid-js"
|
|
|
import { createDefaultOptions, type DiffProps, styleVariables } from "../pierre"
|
|
|
import { getWorkerPool } from "../pierre/worker"
|
|
|
|
|
|
+type SelectionSide = "additions" | "deletions"
|
|
|
+
|
|
|
+function findElement(node: Node | null): HTMLElement | undefined {
|
|
|
+ if (!node) return
|
|
|
+ if (node instanceof HTMLElement) return node
|
|
|
+ return node.parentElement ?? undefined
|
|
|
+}
|
|
|
+
|
|
|
+function findLineNumber(node: Node | null): number | undefined {
|
|
|
+ const element = findElement(node)
|
|
|
+ if (!element) return
|
|
|
+
|
|
|
+ const line = element.closest("[data-line], [data-alt-line]")
|
|
|
+ if (!(line instanceof HTMLElement)) return
|
|
|
+
|
|
|
+ const value = (() => {
|
|
|
+ const primary = parseInt(line.dataset.line ?? "", 10)
|
|
|
+ if (!Number.isNaN(primary)) return primary
|
|
|
+
|
|
|
+ const alt = parseInt(line.dataset.altLine ?? "", 10)
|
|
|
+ if (!Number.isNaN(alt)) return alt
|
|
|
+ })()
|
|
|
+
|
|
|
+ return value
|
|
|
+}
|
|
|
+
|
|
|
+function findSide(node: Node | null): SelectionSide | undefined {
|
|
|
+ const element = findElement(node)
|
|
|
+ if (!element) return
|
|
|
+
|
|
|
+ const code = element.closest("[data-code]")
|
|
|
+ if (!(code instanceof HTMLElement)) return
|
|
|
+
|
|
|
+ if (code.hasAttribute("data-deletions")) return "deletions"
|
|
|
+ return "additions"
|
|
|
+}
|
|
|
+
|
|
|
export function Diff<T>(props: DiffProps<T>) {
|
|
|
let container!: HTMLDivElement
|
|
|
let observer: MutationObserver | undefined
|
|
|
let renderToken = 0
|
|
|
-
|
|
|
- const [local, others] = splitProps(props, ["before", "after", "class", "classList", "annotations", "onRendered"])
|
|
|
+ let selectionFrame: number | undefined
|
|
|
+ let dragFrame: number | undefined
|
|
|
+ let dragStart: number | undefined
|
|
|
+ let dragEnd: number | undefined
|
|
|
+ let dragSide: SelectionSide | undefined
|
|
|
+ let dragEndSide: SelectionSide | undefined
|
|
|
+ let dragMoved = false
|
|
|
+ let lastSelection: SelectedLineRange | null = null
|
|
|
+ let pendingSelectionEnd = false
|
|
|
+
|
|
|
+ const [local, others] = splitProps(props, [
|
|
|
+ "before",
|
|
|
+ "after",
|
|
|
+ "class",
|
|
|
+ "classList",
|
|
|
+ "annotations",
|
|
|
+ "selectedLines",
|
|
|
+ "onRendered",
|
|
|
+ ])
|
|
|
|
|
|
const mobile = createMediaQuery("(max-width: 640px)")
|
|
|
|
|
|
@@ -27,6 +81,7 @@ export function Diff<T>(props: DiffProps<T>) {
|
|
|
})
|
|
|
|
|
|
let instance: FileDiff<T> | undefined
|
|
|
+ const [current, setCurrent] = createSignal<FileDiff<T> | undefined>(undefined)
|
|
|
|
|
|
const getRoot = () => {
|
|
|
const host = container.querySelector("diffs-container")
|
|
|
@@ -117,6 +172,186 @@ export function Diff<T>(props: DiffProps<T>) {
|
|
|
observer.observe(container, { childList: true, subtree: true })
|
|
|
}
|
|
|
|
|
|
+ const setSelectedLines = (range: SelectedLineRange | null) => {
|
|
|
+ const active = current()
|
|
|
+ if (!active) return
|
|
|
+ lastSelection = range
|
|
|
+ active.setSelectedLines(range)
|
|
|
+ }
|
|
|
+
|
|
|
+ const updateSelection = () => {
|
|
|
+ const root = getRoot()
|
|
|
+ if (!root) return
|
|
|
+
|
|
|
+ const selection =
|
|
|
+ (root as unknown as { getSelection?: () => Selection | null }).getSelection?.() ?? window.getSelection()
|
|
|
+ if (!selection || selection.isCollapsed) return
|
|
|
+
|
|
|
+ const domRange =
|
|
|
+ (
|
|
|
+ selection as unknown as {
|
|
|
+ getComposedRanges?: (options?: { shadowRoots?: ShadowRoot[] }) => Range[]
|
|
|
+ }
|
|
|
+ ).getComposedRanges?.({ shadowRoots: [root] })?.[0] ??
|
|
|
+ (selection.rangeCount > 0 ? selection.getRangeAt(0) : undefined)
|
|
|
+
|
|
|
+ const startNode = domRange?.startContainer ?? selection.anchorNode
|
|
|
+ const endNode = domRange?.endContainer ?? selection.focusNode
|
|
|
+ if (!startNode || !endNode) return
|
|
|
+
|
|
|
+ if (!root.contains(startNode) || !root.contains(endNode)) return
|
|
|
+
|
|
|
+ const start = findLineNumber(startNode)
|
|
|
+ const end = findLineNumber(endNode)
|
|
|
+ if (start === undefined || end === undefined) return
|
|
|
+
|
|
|
+ const startSide = findSide(startNode)
|
|
|
+ const endSide = findSide(endNode)
|
|
|
+ const side = startSide ?? endSide
|
|
|
+
|
|
|
+ const selected: SelectedLineRange = {
|
|
|
+ start,
|
|
|
+ end,
|
|
|
+ }
|
|
|
+
|
|
|
+ if (side) selected.side = side
|
|
|
+ if (endSide && side && endSide !== side) selected.endSide = endSide
|
|
|
+
|
|
|
+ setSelectedLines(selected)
|
|
|
+ }
|
|
|
+
|
|
|
+ const scheduleSelectionUpdate = () => {
|
|
|
+ if (selectionFrame !== undefined) return
|
|
|
+
|
|
|
+ selectionFrame = requestAnimationFrame(() => {
|
|
|
+ selectionFrame = undefined
|
|
|
+ updateSelection()
|
|
|
+
|
|
|
+ if (!pendingSelectionEnd) return
|
|
|
+ pendingSelectionEnd = false
|
|
|
+ props.onLineSelectionEnd?.(lastSelection)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ const updateDragSelection = () => {
|
|
|
+ if (dragStart === undefined || dragEnd === undefined) return
|
|
|
+
|
|
|
+ const selected: SelectedLineRange = {
|
|
|
+ start: dragStart,
|
|
|
+ end: dragEnd,
|
|
|
+ }
|
|
|
+
|
|
|
+ if (dragSide) selected.side = dragSide
|
|
|
+ if (dragEndSide && dragSide && dragEndSide !== dragSide) selected.endSide = dragEndSide
|
|
|
+
|
|
|
+ setSelectedLines(selected)
|
|
|
+ }
|
|
|
+
|
|
|
+ const scheduleDragUpdate = () => {
|
|
|
+ if (dragFrame !== undefined) return
|
|
|
+
|
|
|
+ dragFrame = requestAnimationFrame(() => {
|
|
|
+ dragFrame = undefined
|
|
|
+ updateDragSelection()
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ const lineFromMouseEvent = (event: MouseEvent) => {
|
|
|
+ const path = event.composedPath()
|
|
|
+
|
|
|
+ let numberColumn = false
|
|
|
+ let line: number | undefined
|
|
|
+ let side: SelectionSide | undefined
|
|
|
+
|
|
|
+ for (const item of path) {
|
|
|
+ if (!(item instanceof HTMLElement)) continue
|
|
|
+
|
|
|
+ numberColumn = numberColumn || item.dataset.columnNumber != null
|
|
|
+
|
|
|
+ if (side === undefined && item.dataset.code != null) {
|
|
|
+ side = item.hasAttribute("data-deletions") ? "deletions" : "additions"
|
|
|
+ }
|
|
|
+
|
|
|
+ if (line === undefined) {
|
|
|
+ const primary = item.dataset.line ? parseInt(item.dataset.line, 10) : Number.NaN
|
|
|
+ if (!Number.isNaN(primary)) {
|
|
|
+ line = primary
|
|
|
+ } else {
|
|
|
+ const alt = item.dataset.altLine ? parseInt(item.dataset.altLine, 10) : Number.NaN
|
|
|
+ if (!Number.isNaN(alt)) line = alt
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (numberColumn && line !== undefined && side !== undefined) break
|
|
|
+ }
|
|
|
+
|
|
|
+ return { line, numberColumn, side }
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleMouseDown = (event: MouseEvent) => {
|
|
|
+ if (props.enableLineSelection !== true) return
|
|
|
+ if (event.button !== 0) return
|
|
|
+
|
|
|
+ const { line, numberColumn, side } = lineFromMouseEvent(event)
|
|
|
+ if (numberColumn) return
|
|
|
+ if (line === undefined) return
|
|
|
+
|
|
|
+ dragStart = line
|
|
|
+ dragEnd = line
|
|
|
+ dragSide = side
|
|
|
+ dragEndSide = side
|
|
|
+ dragMoved = false
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleMouseMove = (event: MouseEvent) => {
|
|
|
+ if (props.enableLineSelection !== true) return
|
|
|
+ if (dragStart === undefined) return
|
|
|
+
|
|
|
+ if ((event.buttons & 1) === 0) {
|
|
|
+ dragStart = undefined
|
|
|
+ dragEnd = undefined
|
|
|
+ dragSide = undefined
|
|
|
+ dragEndSide = undefined
|
|
|
+ dragMoved = false
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ const { line, side } = lineFromMouseEvent(event)
|
|
|
+ if (line === undefined) return
|
|
|
+
|
|
|
+ dragEnd = line
|
|
|
+ dragEndSide = side
|
|
|
+ dragMoved = true
|
|
|
+ scheduleDragUpdate()
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleMouseUp = () => {
|
|
|
+ if (props.enableLineSelection !== true) return
|
|
|
+ if (dragStart === undefined) return
|
|
|
+
|
|
|
+ if (dragMoved) {
|
|
|
+ pendingSelectionEnd = true
|
|
|
+ scheduleDragUpdate()
|
|
|
+ scheduleSelectionUpdate()
|
|
|
+ }
|
|
|
+
|
|
|
+ dragStart = undefined
|
|
|
+ dragEnd = undefined
|
|
|
+ dragSide = undefined
|
|
|
+ dragEndSide = undefined
|
|
|
+ dragMoved = false
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleSelectionChange = () => {
|
|
|
+ if (props.enableLineSelection !== true) return
|
|
|
+ if (dragStart === undefined) return
|
|
|
+
|
|
|
+ const selection = window.getSelection()
|
|
|
+ if (!selection || selection.isCollapsed) return
|
|
|
+
|
|
|
+ scheduleSelectionUpdate()
|
|
|
+ }
|
|
|
+
|
|
|
createEffect(() => {
|
|
|
const opts = options()
|
|
|
const workerPool = getWorkerPool(props.diffStyle)
|
|
|
@@ -126,6 +361,7 @@ export function Diff<T>(props: DiffProps<T>) {
|
|
|
|
|
|
instance?.cleanUp()
|
|
|
instance = new FileDiff<T>(opts, workerPool)
|
|
|
+ setCurrent(instance)
|
|
|
|
|
|
container.innerHTML = ""
|
|
|
instance.render({
|
|
|
@@ -146,9 +382,50 @@ export function Diff<T>(props: DiffProps<T>) {
|
|
|
notifyRendered()
|
|
|
})
|
|
|
|
|
|
+ createEffect(() => {
|
|
|
+ const selected = local.selectedLines ?? null
|
|
|
+ setSelectedLines(selected)
|
|
|
+ })
|
|
|
+
|
|
|
+ createEffect(() => {
|
|
|
+ if (props.enableLineSelection !== true) return
|
|
|
+
|
|
|
+ container.addEventListener("mousedown", handleMouseDown)
|
|
|
+ container.addEventListener("mousemove", handleMouseMove)
|
|
|
+ window.addEventListener("mouseup", handleMouseUp)
|
|
|
+ document.addEventListener("selectionchange", handleSelectionChange)
|
|
|
+
|
|
|
+ onCleanup(() => {
|
|
|
+ container.removeEventListener("mousedown", handleMouseDown)
|
|
|
+ container.removeEventListener("mousemove", handleMouseMove)
|
|
|
+ window.removeEventListener("mouseup", handleMouseUp)
|
|
|
+ document.removeEventListener("selectionchange", handleSelectionChange)
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
onCleanup(() => {
|
|
|
observer?.disconnect()
|
|
|
+
|
|
|
+ if (selectionFrame !== undefined) {
|
|
|
+ cancelAnimationFrame(selectionFrame)
|
|
|
+ selectionFrame = undefined
|
|
|
+ }
|
|
|
+
|
|
|
+ if (dragFrame !== undefined) {
|
|
|
+ cancelAnimationFrame(dragFrame)
|
|
|
+ dragFrame = undefined
|
|
|
+ }
|
|
|
+
|
|
|
+ dragStart = undefined
|
|
|
+ dragEnd = undefined
|
|
|
+ dragSide = undefined
|
|
|
+ dragEndSide = undefined
|
|
|
+ dragMoved = false
|
|
|
+ lastSelection = null
|
|
|
+ pendingSelectionEnd = false
|
|
|
+
|
|
|
instance?.cleanUp()
|
|
|
+ setCurrent(undefined)
|
|
|
})
|
|
|
|
|
|
return <div data-component="diff" style={styleVariables} ref={container} />
|
Adam