Zacharias-Brohn
152 lines
3.0 KiB
QML
152 lines
3.0 KiB
QML
pragma ComponentBehavior: Bound
|
|
|
|
import QtQuick
|
|
import QtQuick.Layouts
|
|
import qs.Config
|
|
import qs.Components
|
|
|
|
Item {
|
|
id: root
|
|
|
|
readonly property var colors: ["#ef4444", "#f97316", "#eab308", "#22c55e", "#06b6d4", "#3b82f6", "#a855f7", "#ec4899", "#ffffff", "#000000"]
|
|
required property Canvas drawing
|
|
required property var visibilities
|
|
|
|
function syncFromPenColor() {
|
|
if (!drawing)
|
|
return;
|
|
|
|
if (!saturationSlider.pressed)
|
|
saturationSlider.value = drawing.penColor.hsvSaturation;
|
|
|
|
if (!brightnessSlider.pressed)
|
|
brightnessSlider.value = drawing.penColor.hsvValue;
|
|
}
|
|
|
|
function updatePenColorFromHsv() {
|
|
if (!drawing)
|
|
return;
|
|
|
|
drawing.penColor = Qt.hsva(huePicker.currentHue, saturationSlider.value, brightnessSlider.value, drawing.penColor.a);
|
|
}
|
|
|
|
implicitHeight: column.height + Appearance.padding.larger * 2
|
|
implicitWidth: huePicker.implicitWidth + Appearance.padding.normal * 2
|
|
|
|
Component.onCompleted: syncFromPenColor()
|
|
|
|
Connections {
|
|
function onPenColorChanged() {
|
|
root.syncFromPenColor();
|
|
}
|
|
|
|
target: root.drawing
|
|
}
|
|
|
|
Column {
|
|
id: column
|
|
|
|
anchors.centerIn: parent
|
|
spacing: 12
|
|
|
|
ColorArcPicker {
|
|
id: huePicker
|
|
|
|
drawing: root.drawing
|
|
}
|
|
|
|
GradientSlider {
|
|
id: saturationSlider
|
|
|
|
brightness: brightnessSlider.value
|
|
channel: "saturation"
|
|
from: 0
|
|
hue: huePicker.currentHue
|
|
icon: "\ue40a"
|
|
implicitHeight: 30
|
|
implicitWidth: palette.width
|
|
orientation: Qt.Horizontal
|
|
to: 1
|
|
|
|
onMoved: root.updatePenColorFromHsv()
|
|
}
|
|
|
|
GradientSlider {
|
|
id: brightnessSlider
|
|
|
|
channel: "brightness"
|
|
from: 0
|
|
hue: huePicker.currentHue
|
|
icon: "\ue1ac"
|
|
implicitHeight: 30
|
|
implicitWidth: palette.width
|
|
orientation: Qt.Horizontal
|
|
saturation: saturationSlider.value
|
|
to: 1
|
|
|
|
onMoved: root.updatePenColorFromHsv()
|
|
}
|
|
|
|
GridLayout {
|
|
id: palette
|
|
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
columns: 5
|
|
rowSpacing: 8
|
|
rows: 2
|
|
|
|
Repeater {
|
|
model: root.colors
|
|
|
|
delegate: Item {
|
|
id: colorCircle
|
|
|
|
required property color modelData
|
|
readonly property bool selected: Qt.colorEqual(root.drawing.penColor, modelData)
|
|
|
|
Layout.fillWidth: true
|
|
height: 28
|
|
|
|
CustomRect {
|
|
anchors.centerIn: parent
|
|
border.color: Qt.rgba(0, 0, 0, 0.25)
|
|
border.width: Qt.colorEqual(modelData, "#ffffff") ? 1 : 0
|
|
color: colorCircle.modelData
|
|
height: 20
|
|
radius: width / 2
|
|
width: 20
|
|
}
|
|
|
|
CustomRect {
|
|
anchors.centerIn: parent
|
|
border.color: selected ? "#ffffff" : Qt.rgba(1, 1, 1, 0.28)
|
|
border.width: selected ? 3 : 1
|
|
color: "transparent"
|
|
height: parent.height
|
|
radius: width / 2
|
|
width: parent.height
|
|
|
|
StateLayer {
|
|
onClicked: root.drawing.penColor = colorCircle.modelData
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
FilledSlider {
|
|
from: 1
|
|
icon: "border_color"
|
|
implicitHeight: 30
|
|
implicitWidth: palette.width
|
|
multiplier: 1
|
|
orientation: Qt.Horizontal
|
|
to: 45
|
|
value: root.drawing.penWidth
|
|
|
|
onMoved: root.drawing.penWidth = value
|
|
}
|
|
}
|
|
}
|