diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditor.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditor.qml index a9a26a52899..7df02af2fc0 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditor.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditor.qml @@ -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 diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditorPopup.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditorPopup.qml index 6537c9c89d7..a81720c4f99 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditorPopup.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditorPopup.qml @@ -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: { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientLine.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientLine.qml index c29d8d0689c..da701b8d496 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientLine.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientLine.qml @@ -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