Adding dynamic rules on dynamically

[deeprnd]

Can I add/change the gss rules on the fly? If I have a widget based system and wouldn't want to load all the rules at once. Is it possible? How? Also is there a trigger to redraw the content similar to what happens on window resize?

[paulyoung]

@Inviz can better explain how this would work.

[Inviz]

You can add stylesheets dynamically via DOM. You can have them in type="text/gss" (raw source) or "text/gss-ast" (json parser output)

[Inviz]

We listen to all DOM mutations. So changing style attribute/text content would trigger a remeasurement. RC version is probably too sensitive and remeasures stuff 'just in case'. It's pretty hard to do something that will need a manual redraw. What's your use case?

[deeprnd]

I have dynamic data which comes from server and I need to draw the graph (bar) according to the data. I thought once I receive the needed data I would create gss rules according to this and trigger calculations

[paulyoung]

In the release candidates you could do something like this:

@h |-(.bar)-...-| in(.graph) gap(24) {
  height: == &[intrinsic-height];
}

Which would lay out a variable number of bars in the graph horizontally. Then you could set the height using regular CSS based on the data received.

[Inviz]

0) Yes, as Paul said you can use intrinsic-height and set bar height via style attribute. Then you bind it the way you want.

1) You can use assumed values to feed data without fiddling with styles:

Either directly to set the style (on element with id bar1)

engine.solve('$bar1[height]', 10) - will set height to 10, it's visible for other constraints #bar1[height]

Or indirectly:

engine.solve('$bar1[length]', 10)

in gss:

.bar {
    height: == &length * 3; // bind each bar with thrice of its own "length"
 }

2) You can set constraints bypassing parser:

engine.solve(['==', ['get', ['#', 'bar1'], 'height'], 666], 'unique-tracking-key') // #bar[height] == 666;

you can remove that constraint later:

engine.solve(['remove', 'unique-tracking-key'])