adrai
JS Object to animate flowchart?
After drawing the initial chart, is there a JS Object I can use for animations? I have in mind to show how a process flows through the chart by altering the css or class properties of boxes and arrows. What would be a starting point?
You have a JS Object in memory before rendering it out. Eventually could use that to manipulate the result. Naming the elements after their name in the definition
Since the chart is in SVG, maybe you can modify the SVG directly? But indeed the biggest problem would be to identify the elements. Not sure if it can be made easier by changing the instructions that go to the Raphaël library.
I had a look at the code. These are the lines that might need to be altered:
this.symbols = [];
this.lines = [];
If we change the arrays to objects {} (and adjust the respective code that loops through the arrays now) we could capture the symbols and lines by their name. For lines it could be “start-end” with “start” and “end” being symbol names.
Then a function changeSymbol(symbol, class) and changeLine(line, class|style) could do the trick.
I’ll see what I can come up with.
Quick q: which file contains the rendering enhancements for the line format? Didn’t see it
Added my fork to CodeClimate: https://codeclimate.com/github/Stwissel/flowchart.js - quite interesting results 😈