Color variable in JSON?

GoJS
1

Hi,

I’m playing around with the “loading from JSON” feature and I’m stuck with following issue:

I have defined a gradient color such as:

var whitegreygradcolor = $(go.Brush, go.Brush.Linear, { 0.0: “white”, 1.0: “lightgrey” });

My shape template has a binding on fill

…
$(go.Shape,
<span =“Apple-tab-span” style=“white-space:pre”> { figure: “RoundedRectangle”,
<span =“Apple-tab-span” style=“white-space:pre”> fill: “white”},
<span =“Apple-tab-span” style=“white-space:pre”> new go.Binding(“fill”, “color”))
…

Now programmatically I would do following


var nodeDataArray = [
…
{ key: “A”, color: whitegreygradcolor, category: “myshapetempl”},
…

With JSON however I can not use the whitegreygradcolor as it is a variable. How would I use the gradient variable in JSON - or what would be an alternative approach to create the gradient fill?

2

Brushes are automatically converted into JSON by the Model.toJson and fromJson methods. Of course, there is a limit to what kinds of brushes that can be faithfully converted – it cannot handle patterns.

Alternatively, and you might prefer this for its simplicity, is to store just the information you need in your own data properties. If all your gradients are the same except one color, just save that one color. Or maybe you want to save two colors. Or maybe you want to save two colors and a direction. Whatever you choose, you can do your Binding of the Shape.fill property by using a converter function that constructs the Brush that you want to use.

I haven’t tested this, but for a single color, something like:
new go.Binding(“fill”, “color”, function© { return $(go.Brush, go.Brush.Linear, { 0.0: “white”, 1.0: c }); })

For two colors, perhaps:
new go.Binding(“fill”, “”, function(obj) { return $(go.Brush, go.Brush.Linear, { 0.0: obj.color1, 1.0: obj.color2 }); })

3

But what can I do if I use the IMG in Pattern Brushes?

like https://gojs.net/latest/intro/brush.html#PatternBrushes

    var img = new Image();
    img.src = 'track.png'; 
    var patternBrush = objGo(go.Brush, "Pattern", { pattern: img });

it should be :

myPalette.model = new go.GraphLinksModel([
{category:“pic2”,fill:patternBrush}
]);

json:

this is not work

{ “class”: “go.GraphLinksModel”,
“nodeDataArray”: [
{“category”:“pic”, “fill”:{“class”:“go.Brush”, “type”:“Pattern”}, “pos”:“265 -135”, “key”:-3, “size”:“90 460”}
],
“linkDataArray”: []}

4

Pattern Brushes depend on an external resource that we cannot reliably serialize.

The best that you can do is leave enough information in the data, as strings or numbers, that you can reconstruct the Brush in a Binding conversion function.