feedc0de/qt-creator
1
0
Fork 0
forked from qt-creator/qt-creator
Code Pull Requests Activity

QmlDesigner: Move GradientModel to ColorEditorPopup

Browse Source 
The model is used to handle state and to render the preview in the color
editor. Therefore we need the model outside of the GradientLine.

Change-Id: Ia8c171d0cba6b944a8ac8b557d2f7be4e813b342
Reviewed-by: Henning Gründl <henning.gruendl@qt.io>
This commit is contained in:
Thomas Hartmann
2022-07-15 15:47:45 +02:00
parent 1e628d9806
commit ba6f85f4a7
3 changed files with 105 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditor.qml
View File

@@ -53,6 +53,9 @@ SecondColumnLayout {
}
property alias gradientPropertyName: cePopup.gradientPropertyName
property alias gradientThumbnail: gradientThumbnail
property alias shapeGradientThumbnail: shapeGradientThumbnail
property bool shapeGradients: false
property color originalColor
property bool isVector3D: false
@@ -63,70 +66,6 @@ SecondColumnLayout {
colorEditor.backendValue.resetValue()
}
function updateThumbnail() {
if (!cePopup.gradientLine.hasGradient)
return
if (!colorEditor.shapeGradients) {
var gradientString = "import QtQuick 2.15; Gradient {"
var orientation = cePopup.gradientOrientation.currentValue
=== Gradient.Horizontal ? "Gradient.Horizontal" : "Gradient.Vertical"
gradientString += "orientation: " + orientation + ";"
for (var i = 0; i < cePopup.gradientLine.model.count; i++)
gradientString += "GradientStop {}"
gradientString += "}"
var gradientObject = Qt.createQmlObject(
gradientString, colorEditor.gradientThumbnail,
"dynamicGradient")
for (i = 0; i < cePopup.gradientLine.model.count; i++) {
gradientObject.stops[i].color = cePopup.gradientLine.model.getColor(
i)
gradientObject.stops[i].position = cePopup.gradientLine.model.getPosition(
i)
}
colorEditor.gradientThumbnail.gradient = gradientObject
} else {
var gradientStr = "import QtQuick 2.15; import QtQuick.Shapes 1.15; "
+ cePopup.gradientLine.gradientTypeName + " {"
if (cePopup.gradientLine.gradientTypeName === "LinearGradient") {
gradientStr += "x1: 0" + ";x2: " + shape.width + ";y1: 0"
+ ";y2: " + shape.height + ";"
} else if (cePopup.gradientLine.gradientTypeName === "RadialGradient") {
gradientStr += "centerX: " + shape.width * 0.5 + ";centerY: "
+ shape.height * 0.5 + ";focalX: " + shape.width * 0.5 + ";focalY: "
+ shape.height * 0.5 + ";centerRadius: " + Math.min(
shape.width, shape.height) * 0.5 + ";focalRadius: 0" + ";"
} else if (cePopup.gradientLine.gradientTypeName === "ConicalGradient") {
gradientStr += "centerX: " + shape.width * 0.5 + ";centerY: "
+ shape.height * 0.5 + ";angle: 0" + ";"
}
for (var j = 0; j < cePopup.gradientLine.model.count; j++)
gradientStr += "GradientStop {}"
gradientStr += "}"
var gradientObj = Qt.createQmlObject(
gradientStr, colorEditor.shapeGradientThumbnail,
"dynamicShapeGradient")
for (j = 0; j < cePopup.gradientLine.model.count; j++) {
gradientObj.stops[j].color = cePopup.gradientLine.model.getColor(
j)
gradientObj.stops[j].position = cePopup.gradientLine.model.getPosition(
j)
}
colorEditor.shapeGradientThumbnail.fillGradient = gradientObj
}
}
Connections {
id: backendConnection
target: colorEditor

92
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditorPopup.qml
View File

@@ -84,7 +84,7 @@ T.Popup {
function determineActiveColorMode() {
if (colorEditor.supportGradient && gradientLine.hasGradient) {
if (colorEditor.shapeGradients) {
switch (gradientLine.gradientTypeName) {
switch (gradientModel.gradientTypeName) {
case "LinearGradient":
ceMode.currentIndex = ceMode.indexOfValue("LinearGradient")
break
@@ -109,6 +109,76 @@ T.Popup {
colorEditor.originalColor = colorEditor.color
}
function updateThumbnail() {
if (!cePopup.gradientLine.hasGradient)
return
if (!colorEditor.shapeGradients) {
var gradientString = "import QtQuick 2.15; Gradient {"
var orientation = cePopup.gradientOrientation.currentValue
=== Gradient.Horizontal ? "Gradient.Horizontal" : "Gradient.Vertical"
gradientString += "orientation: " + orientation + ";"
for (var i = 0; i < cePopup.gradientLine.model.count; i++)
gradientString += "GradientStop {}"
gradientString += "}"
var gradientObject = Qt.createQmlObject(
gradientString, colorEditor.gradientThumbnail,
"dynamicGradient")
for (i = 0; i < cePopup.gradientLine.model.count; i++) {
gradientObject.stops[i].color = cePopup.gradientLine.model.getColor(
i)
gradientObject.stops[i].position = cePopup.gradientLine.model.getPosition(
i)
}
colorEditor.gradientThumbnail.gradient = gradientObject
} else {
var gradientStr = "import QtQuick 2.15; import QtQuick.Shapes 1.15; "
+ gradientModel.gradientTypeName + " {"
if (gradientModel.gradientTypeName === "LinearGradient") {
gradientStr += "x1: 0" + ";x2: " + shape.width + ";y1: 0"
+ ";y2: " + shape.height + ";"
} else if (gradientModel.gradientTypeName === "RadialGradient") {
gradientStr += "centerX: " + shape.width * 0.5 + ";centerY: "
+ shape.height * 0.5 + ";focalX: " + shape.width * 0.5 + ";focalY: "
+ shape.height * 0.5 + ";centerRadius: " + Math.min(
shape.width, shape.height) * 0.5 + ";focalRadius: 0" + ";"
} else if (gradientModel.gradientTypeName === "ConicalGradient") {
gradientStr += "centerX: " + shape.width * 0.5 + ";centerY: "
+ shape.height * 0.5 + ";angle: 0" + ";"
}
for (var j = 0; j < gradientModel.count; j++)
gradientStr += "GradientStop {}"
gradientStr += "}"
var gradientObj = Qt.createQmlObject(
gradientStr, colorEditor.shapeGradientThumbnail,
"dynamicShapeGradient")
for (j = 0; j < cePopup.gradientLine.model.count; j++) {
gradientObj.stops[j].color = cePopup.gradientLine.model.getColor(
j)
gradientObj.stops[j].position = cePopup.gradientLine.model.getPosition(
j)
}
colorEditor.shapeGradientThumbnail.fillGradient = gradientObj
}
}
GradientModel {
id: gradientModel
anchorBackendProperty: anchorBackend
gradientPropertyName: "gradient"
}
WheelHandler {
onWheel: function(event) {
Controller.mainScrollView.flick(0, event.angleDelta.y * 5)
@@ -214,9 +284,9 @@ T.Popup {
colorEditor.resetShapeColor()
if (colorEditor.shapeGradients)
gradientLine.gradientTypeName = "LinearGradient"
gradientModel.gradientTypeName = "LinearGradient"
else
gradientLine.gradientTypeName = "Gradient"
gradientModel.gradientTypeName = "Gradient"
if (gradientLine.hasGradient)
gradientLine.updateGradient()
@@ -227,7 +297,7 @@ T.Popup {
break
case "RadialGradient":
colorEditor.resetShapeColor()
gradientLine.gradientTypeName = "RadialGradient"
gradientModel.gradientTypeName = "RadialGradient"
if (gradientLine.hasGradient)
gradientLine.updateGradient()
@@ -238,7 +308,7 @@ T.Popup {
break
case "ConicalGradient":
colorEditor.resetShapeColor()
gradientLine.gradientTypeName = "ConicalGradient"
gradientModel.gradientTypeName = "ConicalGradient"
if (gradientLine.hasGradient)
gradientLine.updateGradient()
@@ -250,7 +320,7 @@ T.Popup {
default:
console.log("Unknown item selected in color mode ComboBox.")
}
colorEditor.updateThumbnail()
cePopup.updateThumbnail()
}
ToolTipArea {
@@ -290,9 +360,9 @@ T.Popup {
function applyPreset() {
if (!gradientLine.hasGradient) {
if (colorEditor.shapeGradients)
gradientLine.gradientTypeName = "LinearGradient"
gradientModel.gradientTypeName = "LinearGradient"
else
gradientLine.gradientTypeName = "Gradient"
gradientModel.gradientTypeName = "Gradient"
}
if (presetList.gradientData.presetType == 0) {
@@ -354,6 +424,8 @@ T.Popup {
width: parent.width
visible: !cePopup.isNotInGradientMode()
model: gradientModel
onCurrentColorChanged: {
if (colorEditor.supportGradient && gradientLine.hasGradient) {
colorEditor.color = gradientLine.currentColor
@@ -373,7 +445,7 @@ T.Popup {
colorEditor.originalColor = gradientLine.currentColor
}
onInvalidated: colorEditor.updateThumbnail()
onInvalidated: cePopup.updateThumbnail()
Connections {
target: modelNodeBackend
@@ -948,7 +1020,7 @@ T.Popup {
onActivated: {
gradientLine.model.setGradientOrientation(gradientOrientation.currentValue)
colorEditor.updateThumbnail()
cePopup.updateThumbnail()
}
Component.onCompleted: {

46
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientLine.qml
View File

@@ -34,12 +34,10 @@ Item {
height: StudioTheme.Values.colorEditorPopupLineHeight
property color currentColor
property alias model: repeater.model
property GradientModel model
property GradientModel gradientModel: root.model
property bool hasGradient: gradientModel.hasGradient
property alias gradientPropertyName: gradientModel.gradientPropertyName
property alias gradientTypeName: gradientModel.gradientTypeName
property bool hasGradient: root.model.hasGradient
signal selectedNodeChanged
signal invalidated
@@ -49,38 +47,38 @@ Item {
}
onCurrentColorChanged: {
gradientModel.setColor(colorLine.selectedIndex, root.currentColor)
root.gradientModel.setColor(colorLine.selectedIndex, root.currentColor)
colorLine.invalidate()
}
function addGradient() {
gradientModel.addGradient()
root.gradientModel.addGradient()
colorLine.invalidate()
colorLine.select(0)
}
function deleteGradient() {
gradientModel.deleteGradient()
root.gradientModel.deleteGradient()
}
function setPresetByID(presetID) {
gradientModel.setPresetByID(presetID)
root.gradientModel.setPresetByID(presetID)
colorLine.invalidate()
colorLine.select(0)
}
function setPresetByStops(stopsPositions, stopsColors, stopsCount) {
gradientModel.setPresetByStops(stopsPositions, stopsColors, stopsCount)
root.gradientModel.setPresetByStops(stopsPositions, stopsColors, stopsCount)
colorLine.invalidate()
colorLine.select(0)
}
function savePreset() {
gradientModel.savePreset()
root.gradientModel.savePreset()
}
function updateGradient() {
gradientModel.updateGradient()
root.gradientModel.updateGradient()
}
Connections {
@@ -109,9 +107,9 @@ Item {
repeater.itemAt(index).item.highlighted = true
colorLine.selectedIndex = index
gradientModel.lock()
root.gradientModel.lock()
root.currentColor = repeater.itemAt(index).item.color
gradientModel.unlock()
root.gradientModel.unlock()
root.selectedNodeChanged()
}
@@ -119,19 +117,19 @@ Item {
function invalidate() {
var gradientString = "import QtQuick 2.15; Gradient { orientation: Gradient.Horizontal;"
for (var i = 0; i < gradientModel.count; i++) {
for (var i = 0; i < root.gradientModel.count; i++) {
gradientString += "GradientStop {}"
}
gradientString += "}"
var gradientObject = Qt.createQmlObject(gradientString, gradientRectangle, "test")
for (i = 0; i < gradientModel.count; i++) {
for (i = 0; i < root.gradientModel.count; i++) {
if (repeater.itemAt(i) !== null)
repeater.itemAt(i).item.y = 20 // fixes corner case for dragging overlapped items
gradientObject.stops[i].color = gradientModel.getColor(i)
gradientObject.stops[i].position = gradientModel.getPosition(i)
gradientObject.stops[i].color = root.gradientModel.getColor(i)
gradientObject.stops[i].position = root.gradientModel.getPosition(i)
}
gradientRectangle.gradient = gradientObject
@@ -150,7 +148,7 @@ Item {
onClicked: {
var currentPosition = mouseX / colorLine.effectiveWidth
var newIndex = gradientModel.addStop(currentPosition, root.currentColor)
var newIndex = root.gradientModel.addStop(currentPosition, root.currentColor)
if (newIndex > 0)
colorLine.select(newIndex)
@@ -165,11 +163,7 @@ Item {
Repeater {
id: repeater
model: GradientModel {
id: gradientModel
anchorBackendProperty: anchorBackend
gradientPropertyName: "gradient"
}
model: root.gradientModel
delegate: Loader {
id: loader
@@ -364,14 +358,14 @@ Item {
onReleased: {
if (drag.active) {
gradientModel.setPosition(colorLine.selectedIndex,
root.gradientModel.setPosition(colorLine.selectedIndex,
gradientStopHandle.currentGradiantStopPosition())
gradientStopHandle.refreshToolTip(false)
if (parent.y < 10) {
if (!gradientStopHandle.readOnly) {
colorLine.select(index - 1)
gradientModel.removeStop(index)
root.gradientModel.removeStop(index)
}
}
parent.y = 20