[Dev] What is the best way to implement collapsible tree structure in an SVG group
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 sachit...@wso2.com -- Forwarded message -- From: Sachithra Dangalla 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 sachit...@wso2.com ___ Dev mailing list Dev@wso2.org http://wso2.org/cgi-bin/mailman/listinfo/dev
Re: [Dev] What is the best way to implement collapsible tree structure in an SVG group
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 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 > sachit...@wso2.com > > > > > > > > > -- Forwarded message -- > From: Sachithra Dangalla > 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 > sachit...@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
Re: [Dev] What is the best way to implement collapsible tree structure in an SVG group
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. > > > > NodeText > Anchor Icon > > 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 sachit...@wso2.com On Wed, Sep 28, 2016 at 1:38 AM, Dakshika Jayathilaka 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 > 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 >> sachit...@wso2.com >> >> >> >> >> >> >> >> >> -- Forwarded message -- >> From: Sachithra Dangalla >> 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 >> sachit...@wso2.com >> >> >> >> ___ >> Dev mailing list >> Dev@wso2.org >> http://wso2.o
Re: [Dev] What is the best way to implement collapsible tree structure in an SVG group
Uploading the screenshot. *Sachithra DangallaSoftware Engineering Intern* Mobile : +94 (0) 713700656 sachit...@wso2.com On Wed, Sep 28, 2016 at 9:11 AM, Sachithra Dangalla 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. > > >> >> >> >> NodeText >> Anchor Icon >> >> > > > > 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 > sachit...@wso2.com > > On Wed, Sep 28, 2016 at 1:38 AM, Dakshika Jayathilaka > 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 >> 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 >>> sachit...@wso2.com >>> >>> >>> >>> >>> >>> >>> >>> >>> -- Forwarded message -- >>> From: Sachithra Dangalla >>> 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
