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.

The requirement is to add the expandable/collapsible functionality to the
tree structure.

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 <thili...@wso2.com>
sachit...@wso2.com <thili...@wso2.com>

---------- Forwarded message ----------
From: Sachithra Dangalla <sachit...@wso2.com>
Date: Tue, Sep 20, 2016 at 10:23 AM
Subject: [Architecture] [Progress] JS based Data Mapper tooling
To: architect...@wso2.org


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 -

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

[2] - JSFiddle for JSON schema tree structure -

[3] - Related blog posts -

[4] - Git repository - https://github.com/sachi-d/DataMapperWebApp


*Sachithra DangallaSoftware Engineering Intern*
Mobile : +94 (0) 713700656 <thili...@wso2.com>
sachit...@wso2.com <thili...@wso2.com>
Dev mailing list

Reply via email to