Change Editor (IDE) & Add visual code editor (Blockly)

[sfranzyshen]

Add a Visual Code Editor like Google's Blockly

The base javascript generator will need to be modified to generate elk friendly code ... Also Blockly doesn't support bitwise operation ... although at least one fork (mixley) does ...

[sfranzyshen]

Blockly may not be the best framework to work with ... but it's the only web based visual development framework that can be quickly adapted ... A 'New' editor based on 'nodes' would be the ideal direction ... https://tamats.com/projects/litegraph/editor/

[sfranzyshen]

Sample Node Editors: (leaning toward https://github.com/newcat/baklavajs)

https://newcat.github.io/ml-training-data-generator/#/ https://codepen.io/xgundam05/pen/KjqJn https://codepen.io/hatead/pen/mjPmxV https://codepen.io/Edopad/pen/LdpZXO https://codepen.io/dmitriibobrovnikov/pen/bPWmvb https://sttng.github.io/slim-shady/ https://rete.js.org/#/examples/basic https://tamats.com/projects/litegraph/demo/ http://shamansir.github.io/rpd/examples.html

[sfranzyshen]

Re-write the editor (IDE) to be more like the EspruinoWebIDE but also with the file manager tree ... A framework (like jquery or maybe reactjs??) but light weight maybe even pure vanilla javascript ... ace.js for code editor ... and some kind of visual editor ... blockly is the obvious and easiest to port over ...

https://github.com/espruino/EspruinoWebIDE

[Pablo2048]

Hi, I would also suggest to add https://github.com/jagenjo/litegraph.js to the list of visual editors...

[sfranzyshen]

While I'd like to pursue the node visual editors ... I'm going to implement Blockly first. Before bring blockly in i'm rewriting the "editor" to be multi document (MDI). The final design is going to be built around the following ...

• Blockly (example) - (github)
• GoldenLayout (example) - (github)
• Ace Editor (example) - (github)

One of the problems with Blockly is that it is one way 'Blocks to Code" at least one attempt was done a few years back to also handle 'Code to Blocks' Blocklify (example) - (github)

[Pablo2048]

Another split layout library to notice is https://github.com/nathancahill/split/tree/master/packages/split-grid - advantages to the Golden Layout are no JQuery/Zepto dependency and small size.