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 gradientPropertyName: cePopup.gradientPropertyName
property alias gradientThumbnail: gradientThumbnail
property alias shapeGradientThumbnail: shapeGradientThumbnail
property bool shapeGradients: false property bool shapeGradients: false
property color originalColor property color originalColor
property bool isVector3D: false property bool isVector3D: false
@@ -63,70 +66,6 @@ SecondColumnLayout {
colorEditor.backendValue.resetValue() 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 { Connections {
id: backendConnection id: backendConnection
target: colorEditor target: colorEditor

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

@@ -84,7 +84,7 @@ T.Popup {
function determineActiveColorMode() { function determineActiveColorMode() {
if (colorEditor.supportGradient && gradientLine.hasGradient) { if (colorEditor.supportGradient && gradientLine.hasGradient) {
if (colorEditor.shapeGradients) { if (colorEditor.shapeGradients) {
switch (gradientLine.gradientTypeName) { switch (gradientModel.gradientTypeName) {
case "LinearGradient": case "LinearGradient":
ceMode.currentIndex = ceMode.indexOfValue("LinearGradient") ceMode.currentIndex = ceMode.indexOfValue("LinearGradient")
break break
@@ -109,6 +109,76 @@ T.Popup {
colorEditor.originalColor = colorEditor.color 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 { WheelHandler {
onWheel: function(event) { onWheel: function(event) {
Controller.mainScrollView.flick(0, event.angleDelta.y * 5) Controller.mainScrollView.flick(0, event.angleDelta.y * 5)
@@ -214,9 +284,9 @@ T.Popup {
colorEditor.resetShapeColor() colorEditor.resetShapeColor()
if (colorEditor.shapeGradients) if (colorEditor.shapeGradients)
gradientLine.gradientTypeName = "LinearGradient" gradientModel.gradientTypeName = "LinearGradient"
else else
gradientLine.gradientTypeName = "Gradient" gradientModel.gradientTypeName = "Gradient"
if (gradientLine.hasGradient) if (gradientLine.hasGradient)
gradientLine.updateGradient() gradientLine.updateGradient()
@@ -227,7 +297,7 @@ T.Popup {
break break
case "RadialGradient": case "RadialGradient":
colorEditor.resetShapeColor() colorEditor.resetShapeColor()
gradientLine.gradientTypeName = "RadialGradient" gradientModel.gradientTypeName = "RadialGradient"
if (gradientLine.hasGradient) if (gradientLine.hasGradient)
gradientLine.updateGradient() gradientLine.updateGradient()
@@ -238,7 +308,7 @@ T.Popup {
break break
case "ConicalGradient": case "ConicalGradient":
colorEditor.resetShapeColor() colorEditor.resetShapeColor()
gradientLine.gradientTypeName = "ConicalGradient" gradientModel.gradientTypeName = "ConicalGradient"
if (gradientLine.hasGradient) if (gradientLine.hasGradient)
gradientLine.updateGradient() gradientLine.updateGradient()
@@ -250,7 +320,7 @@ T.Popup {
default: default:
console.log("Unknown item selected in color mode ComboBox.") console.log("Unknown item selected in color mode ComboBox.")
} }
colorEditor.updateThumbnail() cePopup.updateThumbnail()
} }
ToolTipArea { ToolTipArea {
@@ -290,9 +360,9 @@ T.Popup {
function applyPreset() { function applyPreset() {
if (!gradientLine.hasGradient) { if (!gradientLine.hasGradient) {
if (colorEditor.shapeGradients) if (colorEditor.shapeGradients)
gradientLine.gradientTypeName = "LinearGradient" gradientModel.gradientTypeName = "LinearGradient"
else else
gradientLine.gradientTypeName = "Gradient" gradientModel.gradientTypeName = "Gradient"
} }
if (presetList.gradientData.presetType == 0) { if (presetList.gradientData.presetType == 0) {
@@ -354,6 +424,8 @@ T.Popup {
width: parent.width width: parent.width
visible: !cePopup.isNotInGradientMode() visible: !cePopup.isNotInGradientMode()
model: gradientModel
onCurrentColorChanged: { onCurrentColorChanged: {
if (colorEditor.supportGradient && gradientLine.hasGradient) { if (colorEditor.supportGradient && gradientLine.hasGradient) {
colorEditor.color = gradientLine.currentColor colorEditor.color = gradientLine.currentColor
@@ -373,7 +445,7 @@ T.Popup {
colorEditor.originalColor = gradientLine.currentColor colorEditor.originalColor = gradientLine.currentColor
} }
onInvalidated: colorEditor.updateThumbnail() onInvalidated: cePopup.updateThumbnail()
Connections { Connections {
target: modelNodeBackend target: modelNodeBackend
@@ -948,7 +1020,7 @@ T.Popup {
onActivated: { onActivated: {
gradientLine.model.setGradientOrientation(gradientOrientation.currentValue) gradientLine.model.setGradientOrientation(gradientOrientation.currentValue)
colorEditor.updateThumbnail() cePopup.updateThumbnail()
} }
Component.onCompleted: { Component.onCompleted: {

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

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