QodeAssist/TaskFlow/Editor/qml/TaskPort.qml

import QtQuick
import TaskFlow.Editor

TaskPortItem {
    id: root

    property bool isInput: true

    width: 20
    height: 20

    // Port circle
    Rectangle {
        id: portCircle
        anchors.centerIn: parent
        width: 16
        height: 16
        radius: 8
        color: getPortColor()
        border.color: palette.windowText
        border.width: 1

        // Inner circle for connected state simulation
        Rectangle {
            anchors.centerIn: parent
            width: 8
            height: 8
            radius: 4
            color: root.port ? palette.windowText : "transparent"
            visible: root.port !== null
        }
    }

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true

        onEntered: {
            portCircle.scale = 1.3
            portCircle.border.width = 2
        }

        onExited: {
            portCircle.scale = 1.0
            portCircle.border.width = 1
        }
    }

    function getPortColor() {
        if (!root.port) return palette.mid

        // Different colors for input/output using system palette
        if (root.isInput) {
            return palette.highlight  // System highlight color for inputs
        } else {
            return Qt.lighter(palette.highlight, 1.3)  // Lighter highlight for outputs
        }
    }

    Behavior on scale {
        NumberAnimation { duration: 100 }
    }
}