Hi, I am an intern working on the project JavaScript based Data mapper tooling. The project is described in the forwarded mail below.
*Current status:* Currently the implementation parses a JSON schema, draws the structure on an SVG group, adds draggable circles to the leaf nodes which can be dropped on the leaf nodes of the opposite container. So far, a JSON schema is parsed and the tree structure is drawn on an SVG group through a recursive function by calculating the positions on the go. *Requirement:* The requirement is to add the expandable/collapsible functionality to the tree structure. *Problem*: There are a lot of JS libraries that provide this functionality but the result is always using HTML ul/li and its automated nesting abilities. My requirement is for the tree to be drawn on SVG. The possible approaches are: 1. Use a library and embed ul/li inside svg - which might affect the drawing of draggable ends 2. Write a similar custom code to get the desired functionality Which is the best way? *Sachithra DangallaSoftware Engineering Intern* Mobile : +94 (0) 713700656 <[email protected]> [email protected] <[email protected]> ---------- Forwarded message ---------- From: Sachithra Dangalla <[email protected]> Date: Tue, Sep 20, 2016 at 10:23 AM Subject: [Architecture] [Progress] JS based Data Mapper tooling To: [email protected] Hi, I am an intern currently working on JavaScript based Data Mapper tooling. Initially, the project was started by incorporating jsPlumb and the basic UI requirements were achieved including, 1. File reading 2. XML parsing 3. Displaying tree structure 4. Draggable nodes (Map leaf nodes to opposite container) 5. Draggable containers(input and output structures) The draggable nodes functionality is simulated in one of my blog posts - http://comexile.blogspot.com/2016/08/simple-mapping-tool-with-jsplumb.html As the next step, D3 was used instead of jsPlumb and the above requirements were achieved with the use of D3 and html svg. (Working file on [1]) Currently I'm working on reading JSON schema instead of XML and the tree structure was obtained by using html lists. (The working fiddle on [2]) The next steps would be to incorporate SVG in order to achieve the draggable nodes and containers. Please let me know of feedback and suggestions for improvements. [1] - Link to working file - https://github.com/sachi-d/Dat aMapperWebApp/blob/master/WebContent/d3trials/datamapper_d3.html [2] - JSFiddle for JSON schema tree structure - https://jsfiddle.net/sachid/Lvuff6r5/ [3] - Related blog posts - http://comexile.blogspot.com/search/label/WSO2%20Experiments [4] - Git repository - https://github.com/sachi-d/DataMapperWebApp -- *Sachithra DangallaSoftware Engineering Intern* Mobile : +94 (0) 713700656 <[email protected]> [email protected] <[email protected]>
_______________________________________________ Dev mailing list [email protected] http://wso2.org/cgi-bin/mailman/listinfo/dev
