QmlDesigner: Add ExtendedFunctionLogic

Also a couple of smaller fixes on MenuItem and some changes in
ActionIndicator alias properties.

Change-Id: Ib8e30074f0c2934925ab3958afa106a904a0ecdd
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ExtendedFunctionLogic.qml

@@ -0,0 +1,207 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.1
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
+
+
+Item {
+    id: extendedFunctionButton
+
+    property variant backendValue
+    property bool isBoundBackend: backendValue.isBound
+    property string backendExpression: backendValue.expression
+
+    property string glyph: StudioTheme.Constants.actionIcon
+    property string color: StudioTheme.Constants.themeTextColor
+    property alias menuLoader: menuLoader
+
+    signal reseted
+
+    function show() {
+        menuLoader.show()
+    }
+
+    function setIcon() {
+        extendedFunctionButton.color = StudioTheme.Values.themeTextColor
+        if (backendValue === null) {
+            extendedFunctionButton.glyph = StudioTheme.Constants.actionIcon
+        } else if (backendValue.isBound) {
+            if (backendValue.isTranslated) {
+                // translations are a special case
+                extendedFunctionButton.glyph = StudioTheme.Constants.actionIcon
+            } else {
+                extendedFunctionButton.glyph = StudioTheme.Constants.closeCross
+                extendedFunctionButton.color = StudioTheme.Values.themeInteraction
+            }
+        } else {
+            if (backendValue.complexNode !== null
+                    && backendValue.complexNode.exists) {
+
+            } else {
+                extendedFunctionButton.glyph = StudioTheme.Constants.actionIcon
+            }
+        }
+    }
+
+    onBackendValueChanged: {
+        setIcon()
+    }
+
+    onIsBoundBackendChanged: {
+        setIcon()
+    }
+
+    onBackendExpressionChanged: {
+        setIcon()
+    }
+
+    Loader {
+        id: menuLoader
+
+        active: false
+
+        function show() {
+            active = true
+            item.popup()
+        }
+
+        sourceComponent: Component {
+            StudioControls.Menu {
+                id: menu
+
+                onAboutToShow: {
+                    exportMenuItem.checked = backendValue.hasPropertyAlias()
+                    exportMenuItem.enabled = !backendValue.isAttachedProperty()
+                }
+
+                StudioControls.MenuItem {
+                    text: qsTr("Reset")
+                    onTriggered: {
+                        transaction.start()
+                        backendValue.resetValue()
+                        backendValue.resetValue()
+                        transaction.end()
+                        extendedFunctionButton.reseted()
+                    }
+                }
+                StudioControls.MenuItem {
+                    text: qsTr("Set Binding")
+                    onTriggered: expressionDialogLoader.show()
+                }
+                StudioControls.MenuItem {
+                    id: exportMenuItem
+                    text: qsTr("Export Property as Alias")
+                    onTriggered: {
+                        if (checked)
+                            backendValue.exportPopertyAsAlias()
+                        else
+                            backendValue.removeAliasExport()
+                    }
+                    checkable: true
+                }
+
+                StudioControls.MenuItem {
+                    text: qsTr("Insert Keyframe")
+                    enabled: hasActiveTimeline
+                    onTriggered: insertKeyframe(backendValue.name)
+                }
+            }
+        }
+    }
+
+    Loader {
+        id: expressionDialogLoader
+        parent: itemPane
+        anchors.fill: parent
+
+        visible: false
+        active: visible
+
+        function show() {
+            expressionDialogLoader.visible = true
+        }
+
+        sourceComponent: Component {
+            Item {
+                id: expressionDialog
+                anchors.fill: parent
+
+                Component.onCompleted: {
+                    textField.text = backendValue.expression
+                    textField.forceActiveFocus()
+                }
+
+                Rectangle {
+                    anchors.fill: parent
+                    color: Theme.qmlDesignerBackgroundColorDarker()
+                    opacity: 0.6
+                }
+
+                MouseArea {
+                    anchors.fill: parent
+                    onDoubleClicked: expressionDialog.visible = false
+                }
+
+                Rectangle {
+                    x: 4
+                    Component.onCompleted: {
+                        var pos = itemPane.mapFromItem(
+                                    extendedFunctionButton.parent, 0, 0)
+                        y = pos.y + 2
+                    }
+
+                    width: parent.width - 8
+                    height: 260
+
+                    radius: 2
+                    color: Theme.qmlDesignerBackgroundColorDarkAlternate()
+                    border.color: Theme.qmlDesignerBorderColor()
+
+                    Label {
+                        x: 8
+                        y: 6
+                        font.bold: true
+                        text: qsTr("Binding Editor")
+                    }
+                    ExpressionTextField {
+                        id: textField
+                        onRejected: expressionDialogLoader.visible = false
+                        onAccepted: {
+                            backendValue.expression = textField.text.trim()
+                            expressionDialogLoader.visible = false
+                        }
+                        anchors.fill: parent
+                        anchors.leftMargin: 8
+                        anchors.rightMargin: 8
+                        anchors.topMargin: 24
+                        anchors.bottomMargin: 32
+                    }
+                }
+            }
+        }
+    }
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SpinBox.qml

@@ -33,71 +33,68 @@ Item {
     property alias decimals: spinBox.decimals
     property alias hasSlider: spinBox.hasSlider
 
-    property real minimumValue
+    property real minimumValue: 0.0
-    property real maximumValue
+    property real maximumValue: 99
-    property real stepSize
+    property real stepSize: 1.0
 
     property alias backendValue: spinBox.backendValue
 
-    Component.onCompleted: {
-        // TODO minimumValue/maximumValue convertion...
-        // TODO step size convertion...
-    }
-
     width: 100
     implicitHeight: spinBox.height
 
+    property bool __initialized: false
+
+    Component.onCompleted: {
+        wrapper.__initialized = true
+
+        convert("stepSize", stepSize)
+        convert("from", minimumValue)
+        convert("to", maximumValue)
+    }
+
+    onStepSizeChanged: convert("stepSize", stepSize)
+    onMinimumValueChanged: convert("from", minimumValue)
+    onMaximumValueChanged: convert("to", maximumValue)
+
+    function convert(target, value) {
+        if (!wrapper.__initialized)
+            return
+        spinBox[target] = Math.round(value * spinBox.factor)
+    }
+
     StudioControls.SpinBox {
         id: spinBox
 
-        property real properValue: value / factor
+        property real realValue: value / factor
+        property variant backendValue
+        property bool hasSlider: false
 
         from: minimumValue * factor
         to: maximumValue * factor
-
         width: wrapper.width
-        //height: wrapper.height
 
-//        property color textColor: colorLogic.textColor
+        ExtendedFunctionLogic {
-        property variant backendValue;
+            id: extFuncLogic
-
-        //implicitWidth: 74
-/*
-        ExtendedFunctionButton {
-            x: 4
-            anchors.verticalCenter: parent.verticalCenter
             backendValue: spinBox.backendValue
-            visible: spinBox.enabled
         }
-*/
-        /*
-        icon: extend.glyph
-        Extn2 {
-            glyph:
-        }
-        */
 
-        textColor: colorLogic.textColor
+        actionIndicator.icon.color: extFuncLogic.color
+        actionIndicator.icon.text: extFuncLogic.glyph
+        actionIndicator.onClicked: extFuncLogic.show()
 
         ColorLogic {
             id: colorLogic
             backendValue: spinBox.backendValue
             onValueFromBackendChanged: {
-                spinBox.value = valueFromBackend * factor;
+                spinBox.value = valueFromBackend * spinBox.factor;
             }
         }
 
-        property bool hasSlider: false
+        textColor: colorLogic.textColor
-
-        //height: hasSlider ? 32 : implicitHeight
 
         onCompressedValueModified: {
-            if (backendValue.value !== properValue)
+            if (backendValue.value !== realValue)
-                backendValue.value = properValue;
+                backendValue.value = realValue;
         }
-    /*
-        style: CustomSpinBoxStyle {
-        }
-    */
     }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ActionIndicator.qml

@@ -44,6 +44,8 @@ Rectangle {
     implicitWidth: StudioTheme.Values.height
     implicitHeight: StudioTheme.Values.height
 
+    signal clicked
+
     T.Label {
         id: actionIndicatorIcon
         anchors.fill: parent
@@ -60,6 +62,7 @@ Rectangle {
         anchors.fill: parent
         hoverEnabled: true
         onContainsMouseChanged: actionIndicator.hover = containsMouse
+        onClicked: actionIndicator.clicked()
     }
 
     states: [

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuItem.qml

@@ -26,6 +26,7 @@
 import QtQuick 2.12
 import QtQuick.Templates 2.12 as T
 import StudioTheme 1.0 as StudioTheme
+import QtQuick.Controls 2.12
 
 T.MenuItem {
     id: control
@@ -42,6 +43,7 @@ T.MenuItem {
     padding: 0
     spacing: 0
     horizontalPadding: StudioTheme.Values.contextMenuHorizontalPadding
+    action: Action {}
 
     contentItem: Item {
         id: menuItem
@@ -67,7 +69,7 @@ T.MenuItem {
 
             Shortcut {
                 id: shortcut
-                property int shortcutWorkaround: control.action.shortcut
+                property int shortcutWorkaround: control.action.shortcut ? control.action.shortcut : 0
                 sequence: shortcutWorkaround
             }
         }

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBox.qml

@@ -30,9 +30,8 @@ import StudioTheme 1.0 as StudioTheme
 T.SpinBox {
     id: mySpinBox
 
-property alias textColor: spinBoxInput.color
+    property alias textColor: spinBoxInput.color
-
+    property alias actionIndicator: actionIndicator
-    property alias actionIcon: actionIndicator.icon
 
     property int decimals: 0
     property int factor: Math.pow(10, decimals)
@@ -158,6 +157,7 @@ property alias textColor: spinBoxInput.color
         x: spinBoxInput.x + spinBoxInput.width - StudioTheme.Values.border
         width: sliderIndicator.visible ? __sliderIndicatorWidth : 0
         height: sliderIndicator.visible ? __sliderIndicatorHeight : 0
+        visible: false // reasonable default
     }
 
     SliderPopup {