QML / JS value/reference problem

[sedi]

Hi,

i am trying to implement a menu with several sub-menus. Therefore when changing to a sub-menu, I want to push the current color information into an array / var property, like I do with the actions themselves. The problem: I cannot copy the value of a color. It's always the reference that is copied, so the whole storing process becomes pointless, the stored color changes as soon as I assign the new color.

the QML properties are:

property alias color: actionBarMainRect.color;
    property var colorsUpperLevel: []

property alias color: actionBarMainRect.color;
    property var colorsUpperLevel: []

To copy to clipboard, switch view to plain text mode 

In JS I use this code

var color = actionBarLeft.color
 
    actionBarLeft.colorsUpperLevel.push(color)
 
    console.log("pushed color1: "+ actionBarLeft.colorsUpperLevel[actionBarLeft.colorsUpperLevel.length-1])
    console.log("actionBarLeft.color1" + actionBarLeft.color)
    console.log("menuColor1:  "+menuColor)
    console.log("color1: "+color)
 
    actionBarLeft.color = menuColor
 
    console.log("pushed color2: "+ actionBarLeft.colorsUpperLevel[actionBarLeft.colorsUpperLevel.length-1])
    console.log("actionBarLeft.color2" + actionBarLeft.color)
    console.log("menuColor2:  "+menuColor)
    console.log("color2: "+color)

var color = actionBarLeft.color

    actionBarLeft.colorsUpperLevel.push(color)

    console.log("pushed color1: "+ actionBarLeft.colorsUpperLevel[actionBarLeft.colorsUpperLevel.length-1])
    console.log("actionBarLeft.color1" + actionBarLeft.color)
    console.log("menuColor1:  "+menuColor)
    console.log("color1: "+color)

    actionBarLeft.color = menuColor

    console.log("pushed color2: "+ actionBarLeft.colorsUpperLevel[actionBarLeft.colorsUpperLevel.length-1])
    console.log("actionBarLeft.color2" + actionBarLeft.color)
    console.log("menuColor2:  "+menuColor)
    console.log("color2: "+color)

To copy to clipboard, switch view to plain text mode 

with this result:

qml: pushed color1: #008400 // old color, stored correctly
qml: actionBarLeft.color1#008400 // still old
qml: menuColor1: #8400ff // the new color
qml: color1: #008400 // everything ok
//---> Now the assignment happens
qml: pushed color2: #8400ff // ok, we wanted to change this.
qml: actionBarLeft.color2#8400ff // but not this!!
qml: menuColor2: #8400ff
qml: color2: #8400ff // and not this!!

Any ideas?