Displays a single Block with a Block-Header and Block-Body BlockComponent that displays all the nested elements when it’s open. Every object or array are presented by the BlockComponent. FileComponent Displays a File BlockMenuComponent The Menu on every BlockComponent The main header of the application with the title and the colors HeaderComponent themes Displays the buttons panel. There are 2 instances of this LoadFileComponent component, for every side – Right and Left AppComponent The main component of an Angular application External Libraries Drag&Drop For drag and drop we chose to use the Dragula [11] library that was somewhat popular. Although it is good enough for the basic use case of moving an element from one container to another, it has many issues when using complex elements, such as we use in Jxon-D. Due to these issues, we were forced to implement several additions for handling copying of an element instead of moving, cloning of an element and delete. XML Since JSON is JavaScript Object Notation, it is natively supported by JavaScript and thus, by Angular. Not so with XML. For handling XML, we’ve used the xml2js [12] package for transferring an XML string to a JS object and vice versa. Saving a file locally To save a file locally we’ve used the FileSaver [13] utility package. References
BlockComponent Displays a single Block with a Block-Header and Block-Body that displays all the nested elements when it’s open. Every object or array are presented by the BlockComponent. FileComponent Displays a File BlockMenuComponent The Menu on every BlockComponent HeaderComponent The main header of the application with the title and the colors themes LoadFileComponent Displays the buttons panel. There are 2 instances of this component, for every side – Right and Left AppComponent The main component of an Angular application External Libraries Drag&Drop For drag and drop we chose to use the Dragula [11] library that was somewhat popular. Although it is good enough for the basic use case of moving an element from one container to another, it has many issues when using complex elements, such as we use in Jxon-D. Due to these issues, we were forced to implement several additions for handling copying of an element instead of moving, cloning of an element and delete. XML Since JSON is JavaScript Object Notation, it is natively supported by JavaScript and thus, by Angular. Not so with XML. For handling XML, we’ve used the xml2js [12] package for transferring an XML string to a JS object and vice versa. Saving a file locally To save a file locally we’ve used the FileSaver [13] utility package. References
Project22997-GaryD-Final.docx