CaptureOverlay.qml

// SPDX-License-Identifier: GPL-3.0-or-later

pragma ComponentBehavior: Bound

import QtQuick
import GrabInk

Window {
    id: overlay
    required property ScreenshotService screenshotService
    visible: false
    color: "transparent"
    flags: Qt.FramelessWindowHint | Qt.WindowStaysOnTopHint
    title: qsTr("选择并标注截图")

    property real startX: 0
    property real startY: 0
    property real dragSelectionX: 0
    property real dragSelectionY: 0
    property real dragSelectionWidth: 0
    property real dragSelectionHeight: 0
    property real selectionX: 0
    property real selectionY: 0
    property real selectionWidth: 0
    property real selectionHeight: 0
    property real pointerX: 0
    property real pointerY: 0
    property real textLocalX: 0
    property real textLocalY: 0
    property bool editing: false
    property bool finishing: false
    property bool colorPaletteVisible: false
    property bool textEditing: false
    property string activeTool: ""
    property string previousDrawTool: "pen"
    property string selectionDragMode: ""
    property string selectedColor: "#FF5967"
    property string hoveredPixelColor: "#000000"
    property var annotations: []
    property var draftAnnotation: null
    readonly property color shadeColor: "#52000000"
    readonly property real minimumSelectionSize: 8
    readonly property real newSelectionDragThreshold: 3
    readonly property real resizeHitMargin: 7
    readonly property real selectionHandleSize: 8
    readonly property bool selectionValid: selectionWidth >= 8 && selectionHeight >= 8
    readonly property real imageLeft: (width - baseImage.paintedWidth) / 2
    readonly property real imageTop: (height - baseImage.paintedHeight) / 2
    readonly property real imageRight: imageLeft + baseImage.paintedWidth
    readonly property real imageBottom: imageTop + baseImage.paintedHeight
    readonly property real selectableLeft: imageLeft
    readonly property real selectableTop: imageTop
    readonly property real selectableRight: imageRight
    readonly property real selectableBottom: imageBottom
    readonly property real imageScaleX: baseImage.sourceSize.width > 0
                                        && baseImage.paintedWidth > 0
                                        ? baseImage.sourceSize.width / baseImage.paintedWidth : 1
    readonly property real imageScaleY: baseImage.sourceSize.height > 0
                                        && baseImage.paintedHeight > 0
                                        ? baseImage.sourceSize.height / baseImage.paintedHeight : 1

    onAnnotationsChanged: annotationLayer.requestPaint()
    onDraftAnnotationChanged: annotationLayer.requestPaint()
    onClosing: close => {
        close.accepted = false
        overlay.cancel()
    }

    function showOverlay() {
        selectionX = 0
        selectionY = 0
        selectionWidth = 0
        selectionHeight = 0
        pointerX = 0
        pointerY = 0
        editing = false
        finishing = false
        colorPaletteVisible = false
        textEditing = false
        activeTool = ""
        previousDrawTool = "pen"
        selectionDragMode = ""
        annotations = []
        draftAnnotation = null
        showFullScreen()
        requestActivate()
    }

    function clampImageX(value) {
        return Math.max(selectableLeft, Math.min(selectableRight, value))
    }

    function clampImageY(value) {
        return Math.max(selectableTop, Math.min(selectableBottom, value))
    }

    function resizeModeAt(x, y) {
        if (!editing || !selectionValid)
            return ""

        const left = selectionX
        const top = selectionY
        const right = selectionX + selectionWidth
        const bottom = selectionY + selectionHeight
        const nearLeft = Math.abs(x - left) <= resizeHitMargin
        const nearRight = Math.abs(x - right) <= resizeHitMargin
        const nearTop = Math.abs(y - top) <= resizeHitMargin
        const nearBottom = Math.abs(y - bottom) <= resizeHitMargin
        const withinHorizontal = x >= left - resizeHitMargin
                && x <= right + resizeHitMargin
        const withinVertical = y >= top - resizeHitMargin
                && y <= bottom + resizeHitMargin

        if (nearLeft && nearTop) return "nw"
        if (nearRight && nearTop) return "ne"
        if (nearLeft && nearBottom) return "sw"
        if (nearRight && nearBottom) return "se"
        if (nearTop && withinHorizontal) return "n"
        if (nearBottom && withinHorizontal) return "s"
        if (nearLeft && withinVertical) return "w"
        if (nearRight && withinVertical) return "e"
        return ""
    }

    function resizeCursor(mode) {
        if (mode === "n" || mode === "s") return Qt.SizeVerCursor
        if (mode === "e" || mode === "w") return Qt.SizeHorCursor
        if (mode === "nw" || mode === "se") return Qt.SizeFDiagCursor
        if (mode === "ne" || mode === "sw") return Qt.SizeBDiagCursor
        return Qt.ArrowCursor
    }

    function selectionCursorShape() {
        if (selectionDragMode === "new" || selectionDragMode === "pendingNew")
            return Qt.CrossCursor
        const mode = selectionDragMode !== ""
                ? selectionDragMode : resizeModeAt(pointerX, pointerY)
        if (mode !== "")
            return resizeCursor(mode)
        if (!editing || !pointInsideSelection(pointerX, pointerY))
            return Qt.CrossCursor
        if (activeTool === "text")
            return Qt.IBeamCursor
        return activeTool !== "" ? Qt.CrossCursor : Qt.ArrowCursor
    }

    function handleCenterX(mode) {
        if (mode.indexOf("w") !== -1) return selectionX
        if (mode.indexOf("e") !== -1) return selectionX + selectionWidth
        return selectionX + selectionWidth / 2
    }

    function handleCenterY(mode) {
        if (mode.indexOf("n") !== -1) return selectionY
        if (mode.indexOf("s") !== -1) return selectionY + selectionHeight
        return selectionY + selectionHeight / 2
    }

    function clearSelectionContent() {
        editing = false
        activeTool = ""
        colorPaletteVisible = false
        textEditing = false
        textInput.text = ""
        annotations = []
        draftAnnotation = null
        annotationLayer.requestPaint()
    }

    function beginNewSelection(x, y) {
        clearSelectionContent()
        const imageX = clampImageX(x)
        const imageY = clampImageY(y)
        startX = imageX
        startY = imageY
        selectionX = imageX
        selectionY = imageY
        selectionWidth = 0
        selectionHeight = 0
        selectionDragMode = "new"
    }

    function prepareNewSelection(x, y) {
        startX = clampImageX(x)
        startY = clampImageY(y)
        colorPaletteVisible = false
        selectionDragMode = "pendingNew"
    }

    function beginSelectionResize(mode) {
        selectionDragMode = mode
        dragSelectionX = selectionX
        dragSelectionY = selectionY
        dragSelectionWidth = selectionWidth
        dragSelectionHeight = selectionHeight
        colorPaletteVisible = false
        draftAnnotation = null
    }

    function translateAnnotations(deltaX, deltaY) {
        if ((deltaX === 0 && deltaY === 0) || annotations.length === 0)
            return

        const translated = []
        for (let i = 0; i < annotations.length; ++i) {
            const item = annotations[i]
            const copy = {}
            for (let key in item)
                copy[key] = item[key]
            if (typeof item.x1 === "number") copy.x1 = item.x1 + deltaX
            if (typeof item.y1 === "number") copy.y1 = item.y1 + deltaY
            if (typeof item.x2 === "number") copy.x2 = item.x2 + deltaX
            if (typeof item.y2 === "number") copy.y2 = item.y2 + deltaY
            if (item.points) {
                copy.points = []
                for (let j = 0; j < item.points.length; ++j) {
                    copy.points.push({
                        x: item.points[j].x + deltaX,
                        y: item.points[j].y + deltaY
                    })
                }
            }
            translated.push(copy)
        }
        annotations = translated
    }

    function updateSelectionResize(x, y) {
        const mode = selectionDragMode
        const originalRight = dragSelectionX + dragSelectionWidth
        const originalBottom = dragSelectionY + dragSelectionHeight
        const imageX = clampImageX(x)
        const imageY = clampImageY(y)
        let left = dragSelectionX
        let top = dragSelectionY
        let right = originalRight
        let bottom = originalBottom

        if (mode.indexOf("w") !== -1)
            left = Math.max(selectableLeft,
                            Math.min(originalRight - minimumSelectionSize, imageX))
        if (mode.indexOf("e") !== -1)
            right = Math.min(selectableRight,
                             Math.max(dragSelectionX + minimumSelectionSize, imageX))
        if (mode.indexOf("n") !== -1)
            top = Math.max(selectableTop,
                           Math.min(originalBottom - minimumSelectionSize, imageY))
        if (mode.indexOf("s") !== -1)
            bottom = Math.min(selectableBottom,
                              Math.max(dragSelectionY + minimumSelectionSize, imageY))

        const deltaX = selectionX - left
        const deltaY = selectionY - top
        selectionX = left
        selectionY = top
        selectionWidth = right - left
        selectionHeight = bottom - top
        translateAnnotations(deltaX, deltaY)
        annotationLayer.requestPaint()
    }

    function cancel() {
        if (finishing)
            return
        hide()
        overlay.screenshotService.cancelSelection()
    }

    function handleEscape() {
        if (textEditing) {
            textEditing = false
            textInput.text = ""
        } else if (colorPaletteVisible) {
            colorPaletteVisible = false
        } else {
            cancel()
        }
    }

    function resetSelection() {
        selectionDragMode = ""
        clearSelectionContent()
        selectionWidth = 0
        selectionHeight = 0
    }

    function undo() {
        if (annotations.length === 0)
            return
        annotations = annotations.slice(0, annotations.length - 1)
    }

    function selectTool(tool) {
        if (textEditing)
            commitText()
        colorPaletteVisible = false
        if (tool !== "picker" && tool !== "blur" && tool !== "mosaic")
            previousDrawTool = tool
        activeTool = activeTool === tool ? "" : tool
    }

    function beginText(point) {
        textLocalX = point.x
        textLocalY = point.y
        textInput.text = ""
        textEditing = true
        Qt.callLater(function() { textInput.forceActiveFocus() })
    }

    function commitText() {
        if (!textEditing)
            return
        const value = textInput.text.trim()
        textEditing = false
        textInput.text = ""
        if (value.length === 0)
            return
        annotations = annotations.concat([{
            type: "text",
            x1: textLocalX,
            y1: textLocalY,
            text: value,
            color: selectedColor,
            width: 1,
            fontSize: 18
        }])
    }

    function confirm() {
        if (!selectionValid || finishing)
            return
        if (textEditing)
            commitText()
        finishing = true
        const resultAnnotations = annotations
        hide()
        overlay.screenshotService.finishAnnotatedSelection(
                    selectionX - imageLeft, selectionY - imageTop,
                    selectionWidth, selectionHeight,
                    baseImage.paintedWidth, baseImage.paintedHeight,
                    resultAnnotations)
        finishing = false
    }

    function pointInsideSelection(x, y) {
        return x >= selectionX && x <= selectionX + selectionWidth
                && y >= selectionY && y <= selectionY + selectionHeight
    }

    function localPoint(x, y) {
        return {
            x: Math.max(0, Math.min(selectionWidth, x - selectionX)),
            y: Math.max(0, Math.min(selectionHeight, y - selectionY))
        }
    }

    function toolLabel(tool) {
        if (tool === "rect") return qsTr("矩形")
        if (tool === "arrow") return qsTr("箭头")
        if (tool === "pen") return qsTr("画笔")
        if (tool === "text") return qsTr("文字")
        if (tool === "picker") return qsTr("像素取色")
        if (tool === "blur") return qsTr("模糊")
        if (tool === "mosaic") return qsTr("马赛克")
        return qsTr("未选择工具")
    }

    Shortcut { sequence: "Escape"; enabled: overlay.visible && !overlay.textEditing; onActivated: overlay.handleEscape() }
    Shortcut { sequence: "Return"; enabled: overlay.visible && overlay.selectionValid && !overlay.textEditing; onActivated: overlay.confirm() }
    Shortcut { sequence: "Ctrl+Z"; enabled: overlay.visible && overlay.editing && !overlay.textEditing; onActivated: overlay.undo() }

    Connections {
        target: overlay.screenshotService
        function onSelectionRequested() { overlay.showOverlay() }
    }

    Rectangle {
        anchors.fill: parent
        color: "black"
        z: -2
    }

    Image {
        id: baseImage
        anchors.fill: parent
        source: overlay.screenshotService.selectionSource
        fillMode: Image.PreserveAspectFit
        cache: false
        asynchronous: false
    }

    AnnotationLayer {
        id: annotationLayer
        x: overlay.selectionX
        y: overlay.selectionY
        width: overlay.selectionWidth
        height: overlay.selectionHeight
        clip: true
        visible: overlay.selectionValid
        z: 1
        source: overlay.screenshotService.selectionSource
        annotations: overlay.annotations
        draftAnnotation: overlay.draftAnnotation
        viewportWidth: overlay.width
        viewportHeight: overlay.height
    }

    Rectangle {
        anchors.fill: parent
        color: overlay.shadeColor
        visible: !overlay.selectionValid
        z: 2
    }
    Rectangle { x: 0; y: 0; width: parent.width; height: overlay.selectionY; color: overlay.shadeColor; visible: overlay.selectionValid; z: 2 }
    Rectangle { x: 0; y: overlay.selectionY; width: overlay.selectionX; height: overlay.selectionHeight; color: overlay.shadeColor; visible: overlay.selectionValid; z: 2 }
    Rectangle { x: overlay.selectionX + overlay.selectionWidth; y: overlay.selectionY; width: parent.width - x; height: overlay.selectionHeight; color: overlay.shadeColor; visible: overlay.selectionValid; z: 2 }
    Rectangle { x: 0; y: overlay.selectionY + overlay.selectionHeight; width: parent.width; height: parent.height - y; color: overlay.shadeColor; visible: overlay.selectionValid; z: 2 }

    Rectangle {
        x: overlay.selectionX
        y: overlay.selectionY
        width: overlay.selectionWidth
        height: overlay.selectionHeight
        color: "transparent"
        border.width: 2
        border.color: "#6F80FF"
        visible: overlay.selectionValid
        z: 3
    }

    Item {
        anchors.fill: parent
        visible: overlay.editing && overlay.selectionValid
        z: 6

        Repeater {
            model: ["nw", "n", "ne", "e", "se", "s", "sw", "w"]

            delegate: Rectangle {
                id: selectionHandle
                required property string modelData
                x: overlay.handleCenterX(modelData) - width / 2
                y: overlay.handleCenterY(modelData) - height / 2
                width: overlay.selectionHandleSize
                height: overlay.selectionHandleSize
                radius: 1
                color: "white"
                border.width: 1
                border.color: "#4358E8"
            }
        }
    }

    MouseArea {
        id: selectMouse
        anchors.fill: parent
        enabled: !overlay.textEditing
        hoverEnabled: true
        cursorShape: overlay.selectionCursorShape()
        z: 5

        onPressed: mouse => {
            if (overlay.finishing)
                return
            overlay.pointerX = mouse.x
            overlay.pointerY = mouse.y
            if (!overlay.editing) {
                overlay.beginNewSelection(mouse.x, mouse.y)
                return
            }

            const resizeMode = overlay.resizeModeAt(mouse.x, mouse.y)
            if (resizeMode !== "") {
                overlay.beginSelectionResize(resizeMode)
                return
            }
            if (!overlay.pointInsideSelection(mouse.x, mouse.y)) {
                overlay.prepareNewSelection(mouse.x, mouse.y)
                return
            }
            if (overlay.activeTool === "")
                return

            if (overlay.activeTool === "picker") {
                const picked = overlay.screenshotService.pixelColor(
                            mouse.x - overlay.imageLeft, mouse.y - overlay.imageTop,
                            baseImage.paintedWidth, baseImage.paintedHeight)
                overlay.selectedColor = picked
                overlay.hoveredPixelColor = picked
                overlay.activeTool = overlay.previousDrawTool
                return
            }

            const p = overlay.localPoint(mouse.x, mouse.y)
            if (overlay.activeTool === "text") {
                overlay.beginText(p)
                return
            }

            overlay.draftAnnotation = {
                type: overlay.activeTool,
                color: overlay.selectedColor,
                width: overlay.activeTool === "pen" ? 4 : 3,
                x1: p.x, y1: p.y, x2: p.x, y2: p.y,
                points: [{ x: p.x, y: p.y }]
            }
        }

        onPositionChanged: mouse => {
            overlay.pointerX = mouse.x
            overlay.pointerY = mouse.y
            if (overlay.editing && overlay.activeTool === "picker"
                    && overlay.pointInsideSelection(mouse.x, mouse.y)) {
                overlay.hoveredPixelColor = overlay.screenshotService.pixelColor(
                            mouse.x - overlay.imageLeft, mouse.y - overlay.imageTop,
                            baseImage.paintedWidth, baseImage.paintedHeight)
            }
            if (!pressed || overlay.finishing)
                return
            if (overlay.selectionDragMode === "pendingNew") {
                const pendingX = overlay.clampImageX(mouse.x)
                const pendingY = overlay.clampImageY(mouse.y)
                if (Math.abs(pendingX - overlay.startX) < overlay.newSelectionDragThreshold
                        && Math.abs(pendingY - overlay.startY)
                                < overlay.newSelectionDragThreshold) {
                    return
                }
                overlay.beginNewSelection(overlay.startX, overlay.startY)
            }
            if (overlay.selectionDragMode === "new") {
                const imageX = overlay.clampImageX(mouse.x)
                const imageY = overlay.clampImageY(mouse.y)
                overlay.selectionX = Math.min(overlay.startX, imageX)
                overlay.selectionY = Math.min(overlay.startY, imageY)
                overlay.selectionWidth = Math.abs(imageX - overlay.startX)
                overlay.selectionHeight = Math.abs(imageY - overlay.startY)
                return
            }
            if (overlay.selectionDragMode !== "") {
                overlay.updateSelectionResize(mouse.x, mouse.y)
                return
            }
            if (!overlay.draftAnnotation)
                return
            const p = overlay.localPoint(mouse.x, mouse.y)
            overlay.draftAnnotation.x2 = p.x
            overlay.draftAnnotation.y2 = p.y
            if (overlay.draftAnnotation.type === "pen")
                overlay.draftAnnotation.points.push({ x: p.x, y: p.y })
            annotationLayer.requestPaint()
        }

        onReleased: {
            if (overlay.finishing)
                return
            if (overlay.selectionDragMode === "pendingNew") {
                overlay.selectionDragMode = ""
                return
            }
            if (overlay.selectionDragMode === "new") {
                overlay.selectionDragMode = ""
                if (overlay.selectionValid) {
                    overlay.editing = true
                }
                return
            }
            if (overlay.selectionDragMode !== "") {
                overlay.selectionDragMode = ""
                return
            }
            if (!overlay.draftAnnotation)
                return
            const dx = Math.abs(overlay.draftAnnotation.x2 - overlay.draftAnnotation.x1)
            const dy = Math.abs(overlay.draftAnnotation.y2 - overlay.draftAnnotation.y1)
            if (overlay.draftAnnotation.type === "pen" || dx >= 2 || dy >= 2)
                overlay.annotations = overlay.annotations.concat([overlay.draftAnnotation])
            overlay.draftAnnotation = null
        }

        onCanceled: {
            overlay.selectionDragMode = ""
            overlay.draftAnnotation = null
            overlay.editing = overlay.selectionValid
        }
    }

    Rectangle {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 26
        width: hintText.implicitWidth + 34
        height: 38
        radius: 10
        color: "#D91B1E26"
        z: 10

        Text {
            id: hintText
            anchors.centerIn: parent
            text: !overlay.editing
                  ? qsTr("拖动选择截图区域  ·  Esc 取消")
                  : overlay.activeTool === "picker"
                    ? qsTr("移动鼠标查看像素颜色，点击应用颜色")
                    : qsTr("选择工具进行标注  ·  Ctrl+Z 撤销  ·  Enter 完成")
            color: "white"
            font.pixelSize: 12
            font.weight: Font.Medium
        }
    }

    Rectangle {
        id: pickerBadge
        x: Math.max(10, Math.min(overlay.width - width - 10, overlay.pointerX + 18))
        y: Math.max(10, Math.min(overlay.height - height - 10, overlay.pointerY + 18))
        width: 116
        height: 38
        radius: 10
        color: "#F21D2028"
        visible: overlay.editing && overlay.activeTool === "picker"
                 && overlay.pointInsideSelection(overlay.pointerX, overlay.pointerY)
        z: 18

        Row {
            anchors.centerIn: parent
            spacing: 8
            Rectangle { width: 20; height: 20; radius: 5; color: overlay.hoveredPixelColor; border.color: "#80FFFFFF" }
            Text { text: overlay.hoveredPixelColor; color: "white"; font.pixelSize: 12; font.family: "monospace" }
        }
    }

    Rectangle {
        id: textEditor
        x: Math.max(8, Math.min(overlay.width - width - 8,
                              overlay.selectionX + overlay.textLocalX))
        y: Math.max(8, Math.min(overlay.height - height - 8,
                              overlay.selectionY + overlay.textLocalY))
        width: Math.max(140, Math.min(300,
                                     overlay.selectionWidth - overlay.textLocalX))
        height: 40
        radius: 7
        color: "#F21D2028"
        border.color: overlay.selectedColor
        visible: overlay.textEditing
        z: 30

        TextInput {
            id: textInput
            anchors.fill: parent
            anchors.leftMargin: 10
            anchors.rightMargin: 10
            color: overlay.selectedColor
            selectionColor: "#5B6EF5"
            selectedTextColor: "white"
            verticalAlignment: TextInput.AlignVCenter
            font.pixelSize: 18
            clip: true
            Keys.onReturnPressed: event => {
                event.accepted = true
                overlay.commitText()
            }
            Keys.onEscapePressed: event => {
                event.accepted = true
                overlay.textEditing = false
                textInput.text = ""
            }
        }
    }

    CaptureToolbar {
        id: toolbar
        x: Math.max(12, Math.min(parent.width - width - 12,
                                overlay.selectionX + overlay.selectionWidth - width))
        y: Math.max(12, overlay.selectionY + overlay.selectionHeight + 10 + height <= parent.height
                    ? overlay.selectionY + overlay.selectionHeight + 10
                    : overlay.selectionY - height - 10)
        visible: overlay.editing && overlay.selectionValid
        z: 20
        activeTool: overlay.activeTool
        selectedColor: overlay.selectedColor
        paletteVisible: overlay.colorPaletteVisible
        annotationCount: overlay.annotations.length
        selectionPixelWidth: Math.round(overlay.selectionWidth * overlay.imageScaleX)
        selectionPixelHeight: Math.round(overlay.selectionHeight * overlay.imageScaleY)
        activeToolLabel: overlay.toolLabel(overlay.activeTool)
        finishing: overlay.finishing
        onToolSelected: tool => overlay.selectTool(tool)
        onPaletteToggled: overlay.colorPaletteVisible = !overlay.colorPaletteVisible
        onUndoRequested: overlay.undo()
        onReselectRequested: overlay.resetSelection()
        onCancelRequested: overlay.cancel()
        onConfirmRequested: overlay.confirm()
    }

    ColorPalette {
        id: colorPalette
        x: Math.max(12, Math.min(overlay.width - width - 12, toolbar.x + toolbar.width - width))
        y: toolbar.y >= height + 20 ? toolbar.y - height - 8
                                    : toolbar.y + toolbar.height + 8
        visible: overlay.colorPaletteVisible && toolbar.visible
        z: 25
        selectedColor: overlay.selectedColor
        onColorSelected: color => {
            overlay.selectedColor = color
            overlay.colorPaletteVisible = false
        }
    }
}