Uploading the screenshot.
*Sachithra DangallaSoftware Engineering Intern* Mobile : +94 (0) 713700656 <thili...@wso2.com> sachit...@wso2.com <thili...@wso2.com> On Wed, Sep 28, 2016 at 9:11 AM, Sachithra Dangalla <sachit...@wso2.com> wrote: > Hi Dakshika, > > Thank you for the information. Since the base is an svg canvas, I tried to > embed html ul/li (as in[2] of your response) in a foreignObject and > achieved the desired tree structure with collapsible/expandable > functionality. But each leaf node should have an anchor that can be dragged > and extended to connect with leaf nodes of the opposite container. I could > embed another svg inside each leaf node li component to draw an anchor but > it cannot be extended beyond the parent html component's boundaries. > > <svg> >> <foreignObject> >> <ul> >> <li> >> <span> NodeText </span> >> <svg> Anchor Icon </svg> >> </li> >> > > > > I could, > > 1. Draw the anchors externally, without any binding to the text nodes, > handle the collapsing and expanding separately for the anchors > 2. Or draw the tree structure using svg groups instead of html ul/li > and find a way to get the collapsing and expanding (SO question on [1]) > 3. Or use svg g components and go on with a static tree structure. > > > > [1] - http://stackoverflow.com/questions/39724745/how-to- > implement-collapsible-tree-structure-using-svg-g > > > > *Sachithra DangallaSoftware Engineering Intern* > Mobile : +94 (0) 713700656 <thili...@wso2.com> > sachit...@wso2.com <thili...@wso2.com> > > On Wed, Sep 28, 2016 at 1:38 AM, Dakshika Jayathilaka <daksh...@wso2.com> > wrote: > >> 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/di >> st/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-wit >>> h-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
