Mapping a property value to a specific icon object

[drnextgis]

I try to map property value to a specific icon object accordingly documentation but it doesn't work. I've tried to look at source code. As you can see here icon can be string or function, not object if I understand it correctly.

[vvoovv]

Can you provide a code snippet for that problem?

[drnextgis]

Of course. This approach works fine:

valueToIconMap : {'color': {"#ff0000": "treeitem red", "#00ff00": "treeitem green"}}

But no one of these approaches does not work:

valueToIconMap : {'color': {"*": {iconClass: "treeitem", iconStyle: {background: "*"}}}}
valueToIconMap : {'color': {"*": {iconClass: "treeitem", iconStyle: {background: "red"}}}}

[vvoovv]

I confirm the problem. At least, a clause for "object" should be added after https://github.com/pjekel/cbtree/blob/master/extensions/TreeStyling.js#L869
case "object":
break;

For now I suggest to use string to define icon classes

[pjekel]

Denis,

Thanks for pointing out the issue. Vladimir already provided a solution which I took one step further. The icon object specified needs to be normalized therefore instead of:

case "object":
    break;

I addded:

case "object":
    icon = this._icon2Object(icon);
    break;

This fix will be incorporated in a new build later this month as I still have to address an IE 10 rendering issue. For the time being please fetch the TreeStyling.js code from the repository.

Please let me know if this works for you so we can close the issue.

[drnextgis]

Thanks for quick response! With proposed solution such expression works flawlessly:

valueToIconMap : {'color': {"*": {iconClass: "treeitem"}}}

But I need to create custom icon style "on the fly" and I try to use the following expression:

valueToIconMap : {'color': {"*": {iconClass: "treeitem", iconStyle: {background: "*"}}}}

Example of my .css:

.treeitem {
    width: 10px;
    height: 10px;
}

This approach doesn't work. Is it bug or I use valueToIconMap in incorrect manner?

I've also tried to make iconStyle manually:

valueToIconMap : {'color': {"*": {iconClass: "treeitem", iconStyle: {background: "blue"}}}}

But this also doesn't work.

[vvoovv]

valueToIconMap : {'color': {"": {iconClass: "treeitem", iconStyle: {background: ""}}}}

Denis, can't you achieve the desired effect with a function?

[drnextgis]

Could you give me any hints? As I can see such function should return string of css class names and it means I have to create css classes manually. Documentation contains the following example:

{ type: { "POI": {iconClass: "pointOfInterest", iconStyle: {border:"solid"}, indent: false} } }

but it looks like this operation doesn't implemented.

[vvoovv]

My idea was to do something like this

valueToIconMap: {
"icon": {"*": function(item, property, value){
var node = tree.getNodesByItem(item);
// apply style to the node
}}}


However, I don't know how to provide the "tree" context inside the function

[pjekel]

Denis & Vladimir, I think I have the final fix in place.

First, I never intended to allow for the wildcard character to be use in icon object properties but looking at your example I can see your point, it has been fixed and should work now.

Second, the getIconStyle() method never looked if any valueToIcon mapping was in place, therefore icon styling provided with a mapped icon was never applied, this has been fixed.

Finally, if a value is mapped to a function the function can now return either a string or an object, in addition, the function is now called in the context of the tree, thus the 'this' object in the function body is the tree.

I checked in the updated version of TreeStyling.js, and again, please let me know if this works for you guys....

[drnextgis]

Peter, big thanks. Now it works as expected. Great work!