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 <[email protected]> [email protected] <[email protected]> On Wed, Sep 28, 2016 at 1:38 AM, Dakshika Jayathilaka <[email protected]> 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/ > 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 <[email protected]> > 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 <[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-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 <[email protected]> >> [email protected] <[email protected]> >> >> >> >> _______________________________________________ >> Dev mailing list >> [email protected] >> http://wso2.org/cgi-bin/mailman/listinfo/dev >> >> >
_______________________________________________ Dev mailing list [email protected] http://wso2.org/cgi-bin/mailman/listinfo/dev
