Additional properties - multiple changes of a field

Question

Hello,
I am creating a custom component based on a Google Maps component which shows circles of different colors on a map. My idea is to use the Additional Properties window to modify the colors of circles that I have already displayed.
I created a small additional properties sheet in order to change the colors of my circles, which works great in design studio as shown in the pictures below. Note: initially, all circles were red.
In the first image, the color for the circle over Lausanne is changed to blue; and in the second the color for the circle over Sion is changed to black.
In the component, both changes are visible, however once I execute it in a browser only the last change is applied, as shown below.
My question is the following: is there a way to save multiple changes of a same field in the additional properties window? I would like to avoid having multiple identical forms for each circle if possible.
Any insight on how I could approach this problem would be appreciated. I have tried several different approaches such as for example pushing all modifications into an array, without any luck.
Thank you very much for your help!
Michael

Answer 1

Unfortunately I have not figured out how to get it to work. I implemented the following getter/setter in my component.js:
this.circleColors = function(value) {
       if (value === undefined) {
            return JSON.stringify(myCircleColors);
       else {
             if (value != "") myCircleColors = JSON.parse(value);
             return this;
where myCircleColors is an internal array.
Also, I added a circleColors property (type String) in my .xml file, and I still have the same issue as earlier: only the last modification to the array is kept.
Is this code correct, or did I missunderstand your explanation?
Note: the method is called when a modification is done to a color field in the additional properties window