Idea: Replace .drn source files with .json. Generate diagrams based on .json. Adding, removing, and editing text of icons updates the underlying .json. The .json format is independent of the target compile language.
This is what I consider to be the first step in making a better Drakon Visual Editor one day. First, get the source code (.drn) into .json readable, clean format. Diagrams should be generated based on the json source live, this way, code and diagram can have a back and forth relationship.
How the following JSON works:
Each icon has a unique 'type'. Each icon has a position (x, y) on an imaginary 2D grid. The 2D grid starts at 0,0 at the header. The largest y value on the x0 line is always the end icon. "y" goes down, "x" goes to the right.
Question type icons have a "orientation" key which can be either "yes, no" or "no, yes" as the boolean is flipped.
Arrow loop type icons have a "connect" key which specifies where the arrow connects to, the icon found at the position represents the icon directly above the arrow connect point.
Loop type icons have an "end" key which specifies how many icons down on the same vertical y grid the pairing loop end icon is to be positioned.
As you can see, the following flat json structure (no crazy indentation) can represent any diagram complexity.
JSON source:
Код:
{
"icons" : [
{
"type" : "header",
"position" : [0, 0],
"text" : "fibonacci",
},
{
"type" : "arguments",
"position" : [1, 0],
"text" : "n",
},
{
"type" : "question",
"position" : [0, 1],
"orientation" : ["No", "Yes"],
"text" : "n === 0",
},
{
"type" : "statement",
"position" : [0, 2],
"text" : "return 0",
},
{
"type" : "end",
"position" : [0, 3],
"text" : "End",
},
{
"type" : "question",
"position" : [1, 1],
"orientation" : ["Yes", "No"],
"text" : "n > 2",
},
{
"type" : "statement",
"position" : [1, 2],
"text" : "return 1",
},
{
"type" : "statement",
"position" : [2, 1],
"text" : "return fibonacci(n - 2) + fibonacci(n - 1)",
},
],
}
Future steps: Create richer types rather than just header, arguments, question, statement, end, arrow loop, and loop types. Richer types would be for richer display of data itself such as arrays, objects, tables, and expressions.
Loop types (not used above)
Код:
{
"type" : "arrow loop",
"position" : [2, 2],
"connect" : [0, 0]
},
{
"type" : "loop",
"position" : [2, 2],
"text" : "foreach key, value in my_object",
"end" : [2, 5]
},
Вход
FAQ
Поиск
