Hi Sachithra, We do have tree view on wso2 theme[1]. If you using wso2 theme inside this you can use it out of the box. Or else it's a tiny set of javascript. [2]
[1] http://wso2-dev-ux.github.io/theme-wso2/layout.html [2] https://github.com/wso2-dev-ux/theme-wso2/blob/master/dist/js/theme-wso2.js#L432 *Dakshika Jayathilaka* PMC Member & Committer of Apache Stratos Associate Technical Lead WSO2, Inc. lean.enterprise.middleware 0771100911 On Fri, Sep 23, 2016 at 12:09 AM, Sachithra Dangalla <sachit...@wso2.com> wrote: > 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 <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 > > > 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 <thili...@wso2.com> > sachit...@wso2.com <thili...@wso2.com> > > > > _______________________________________________ > Dev mailing list > Dev@wso2.org > http://wso2.org/cgi-bin/mailman/listinfo/dev > >
_______________________________________________ Dev mailing list Dev@wso2.org http://wso2.org/cgi-bin/mailman/listinfo/dev
