[prev in list] [next in list] [prev in thread] [next in thread]
List: esb-java-dev
Subject: Re: [Dev] What is the best way to implement collapsible tree structure in an SVG group
From: Sachithra Dangalla <sachithra () wso2 ! com>
Date: 2016-09-28 3:55:08
Message-ID: CAKgmYrgF0bSsWWHjaLZjgyw25Xs6n_571tVO+itBfW0t1X_dCQ () mail ! gmail ! com
[Download RAW message or body]
[Attachment #2 (multipart/related)]
[Attachment #4 (multipart/alternative)]
Uploading the screenshot.
*Sachithra DangallaSoftware Engineering Intern*
Mobile : +94 (0) 713700656 <thilinad@wso2.com>
sachithra@wso2.com <thilinad@wso2.com>
On Wed, Sep 28, 2016 at 9:11 AM, Sachithra Dangalla <sachithra@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 <thilinad@wso2.com>
> sachithra@wso2.com <thilinad@wso2.com>
>
> On Wed, Sep 28, 2016 at 1:38 AM, Dakshika Jayathilaka <dakshika@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 <sachithra@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 <thilinad@wso2.com>
>>> sachithra@wso2.com <thilinad@wso2.com>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>> ---------- Forwarded message ----------
>>> From: Sachithra Dangalla <sachithra@wso2.com>
>>> Date: Tue, Sep 20, 2016 at 10:23 AM
>>> Subject: [Architecture] [Progress] JS based Data Mapper tooling
>>> To: architecture@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 <thilinad@wso2.com>
>>> sachithra@wso2.com <thilinad@wso2.com>
>>>
>>>
>>>
>>> _______________________________________________
>>> Dev mailing list
>>> Dev@wso2.org
>>> http://wso2.org/cgi-bin/mailman/listinfo/dev
>>>
>>>
>>
>
[Attachment #7 (text/html)]
<div dir="ltr">Uploading the screenshot.<br><img \
src="cid:ii_itmd8yyd0_1576ee2fbb696570" height="424" \
width="339"><br><br></div><div class="gmail_extra"><br clear="all"><div><div \
class="gmail_signature" data-smartmail="gmail_signature"><div dir="ltr"><div><div \
dir="ltr"><span><font color="#888888"><div><b \
style="color:rgb(0,0,0);font-family:arial,helvetica,sans-serif"><font \
color="#888888">Sachithra Dangalla<br>Software Engineering \
Intern</font></b><br></div><div>Mobile : <a href="mailto:thilinad@wso2.com" \
target="_blank">+94 (0) 713700656 </a><br><a href="mailto:thilinad@wso2.com" \
target="_blank">sachithra@wso2.com</a></div></font></span></div></div></div></div></div>
<br><div class="gmail_quote">On Wed, Sep 28, 2016 at 9:11 AM, Sachithra Dangalla \
<span dir="ltr"><<a href="mailto:sachithra@wso2.com" \
target="_blank">sachithra@wso2.com</a>></span> wrote:<br><blockquote \
class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc \
solid;padding-left:1ex"><div dir="ltr"><div><div>Hi Dakshika,<br><br></div>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. <br><br></div><blockquote \
class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid \
rgb(204,204,204);padding-left:1ex"><div><span \
style="font-family:monospace,monospace"><svg><br></span></div><div><span \
style="font-family:monospace,monospace"> \
<foreignObject><br></span></div><div><span \
style="font-family:monospace,monospace"> \
<ul><br></span></div><div><span style="font-family:monospace,monospace"> \
<li><br> <span> NodeText </span> <br> \
<svg> Anchor Icon </svg> <br></span></div><div><span \
style="font-family:monospace,monospace"> \
</li></span><br></div></blockquote><div><br></div><div><br><br>I \
could,<br><ol><li>Draw the anchors externally, without any binding to the text \
nodes, handle the collapsing and expanding separately for the anchors</li><li>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])</li><li>Or use svg g \
components and go on with a static tree structure.<br></li></ol></div><br><img \
style="margin-right:0px" \
src="https://mail.google.com/mail/u/0/?ui=2&ik=dc87f3b1e3&view=att&th=1576 \
ed4ce6ff4457&attid=0.2&disp=safe&realattid=ii_itmcp2cx0_1576ed4ce59b27d2&zw"><br>[1] \
- <a href="http://stackoverflow.com/questions/39724745/how-to-implement-collapsible-tree-structure-using-svg-g" \
target="_blank">http://stackoverflow.com/<wbr>questions/39724745/how-to-<wbr>implement-collapsible-tree-<wbr>structure-using-svg-g</a><br><br></div><div \
class="gmail_extra"><span class=""><br clear="all"><div><div \
data-smartmail="gmail_signature"><div dir="ltr"><div><div dir="ltr"><span><font \
color="#888888"><div><b \
style="color:rgb(0,0,0);font-family:arial,helvetica,sans-serif"><font \
color="#888888">Sachithra Dangalla<br>Software Engineering \
Intern</font></b><br></div><div>Mobile : <a href="mailto:thilinad@wso2.com" \
target="_blank">+94 (0) 713700656 </a><br><a href="mailto:thilinad@wso2.com" \
target="_blank">sachithra@wso2.com</a></div></font></span></div></div></div></div></div>
<br></span><div><div class="h5"><div class="gmail_quote">On Wed, Sep 28, 2016 at \
1:38 AM, Dakshika Jayathilaka <span dir="ltr"><<a href="mailto:dakshika@wso2.com" \
target="_blank">dakshika@wso2.com</a>></span> wrote:<br><blockquote \
class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc \
solid;padding-left:1ex"><div dir="ltr">Hi Sachithra,<div><br></div><div>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] </div><div> </div><div>[1] \
<a href="http://wso2-dev-ux.github.io/theme-wso2/layout.html" \
target="_blank">http://wso2-dev-ux.github.io/t<wbr>heme-wso2/layout.html</a> \
</div><div>[2] <a href="https://github.com/wso2-dev-ux/theme-wso2/blob/master/dist/js/theme-wso2.js#L432" \
target="_blank">https://github.com/wso2-de<wbr>v-ux/theme-wso2/blob/master/di<wbr>st/js/theme-wso2.js#L432</a></div></div><div \
class="gmail_extra"><br clear="all"><div><div data-smartmail="gmail_signature"><div \
dir="ltr"><div><div dir="ltr"><div><div dir="ltr"><div dir="ltr"><b \
style="color:rgb(136,136,136)">Dakshika Jayathilaka</b></div><div dir="ltr"><span \
style="font-size:12.8000001907349px"><font color="#666666">PMC Member & Committer \
of Apache Stratos</font></span><b><br style="color:rgb(136,136,136)"></b><div><span \
style="font-family:tahoma,sans-serif;font-size:12.8px"><font \
color="#666666">Associate Technical Lead</font></span></div><div \
style="color:rgb(136,136,136)"><font color="#666666">WSO2, Inc.<br></font></div><div \
style="color:rgb(136,136,136)"><font size="1" \
color="#666666">lean.enterprise.middleware</font></div><div \
style="color:rgb(136,136,136)">0771100911</div></div></div></div></div></div></div></div></div>
<br><div class="gmail_quote"><div><div>On Fri, Sep 23, 2016 at 12:09 AM, Sachithra \
Dangalla <span dir="ltr"><<a href="mailto:sachithra@wso2.com" \
target="_blank">sachithra@wso2.com</a>></span> wrote:<br></div></div><blockquote \
class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc \
solid;padding-left:1ex"><div><div><div dir="ltr"><div class="gmail_quote"><div \
dir="ltr"><div><div>Hi,<br><br></div>I am an intern working on the project JavaScript \
based Data mapper tooling. The project is described in the forwarded mail below. \
<br><br><b>Current status:</b><br>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. <br><br></div>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. \
<br><br><br><b>Requirement:</b><br>The requirement is to add the \
expandable/collapsible functionality to the tree structure. \
<br><br><br><b>Problem</b>:<br>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.<br><div><div><div><div><div><br></div><div>The possible approaches \
are:<br><ol><li>Use a library and embed ul/li inside svg - which might affect the \
drawing of draggable ends<br></li><li>Write a similar custom code to get the desired \
functionality<br></li></ol></div><div>Which is the best \
way?<br></div><div><br><br><br clear="all"><div><div \
data-smartmail="gmail_signature"><div dir="ltr"><div><div dir="ltr"><span><font \
color="#888888"><div><b \
style="color:rgb(0,0,0);font-family:arial,helvetica,sans-serif"><font \
color="#888888">Sachithra Dangalla<br>Software Engineering \
Intern</font></b><br></div><div>Mobile : <a href="mailto:thilinad@wso2.com" \
target="_blank">+94 (0) 713700656 </a><br><a href="mailto:thilinad@wso2.com" \
target="_blank">sachithra@wso2.com</a><br><br><br><br><br><br><br><br></div></font></span></div></div></div></div></div>
<br><div class="gmail_quote">---------- Forwarded message ----------<br>From: <b \
class="gmail_sendername">Sachithra Dangalla</b> <span dir="ltr"><<a \
href="mailto:sachithra@wso2.com" \
target="_blank">sachithra@wso2.com</a>></span><br>Date: Tue, Sep 20, 2016 at 10:23 \
AM<br>Subject: [Architecture] [Progress] JS based Data Mapper tooling<br>To: <a \
href="mailto:architecture@wso2.org" \
target="_blank">architecture@wso2.org</a><br><br><br><div \
dir="ltr"><div><div>Hi,<br><br></div>I am an intern currently working on JavaScript \
based Data Mapper tooling. <br><br></div><div>Initially, the project was started by \
incorporating jsPlumb and the basic UI requirements were achieved including, \
<br><ol><li>File reading</li><li>XML parsing</li><li>Displaying tree \
structure</li><li>Draggable nodes (Map leaf nodes to opposite \
container)<br></li><li>Draggable containers(input and output \
structures)</li></ol><p>The draggable nodes functionality is simulated in one of my \
blog posts - <a href="http://comexile.blogspot.com/2016/08/simple-mapping-tool-with-jsplumb.html" \
target="_blank">http://comexile.blogspot.com/2<wbr>016/08/simple-mapping-tool-wit<wbr>h-jsplumb.html</a><br></p><p>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])</p><p><img \
src="cid:ii_itazz1lx0_15745e9b0dffa8db" height="230" \
width="537"><br></p><p>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]) <br></p><p>The next steps would be to incorporate SVG in order to achieve the \
draggable nodes and containers. <br></p><p>Please let me know of feedback and \
suggestions for improvements.</p><p><br></p><p>[1] - Link to working file - <a \
href="https://github.com/sachi-d/DataMapperWebApp/blob/master/WebContent/d3trials/datamapper_d3.html" \
target="_blank">https://github.com/sachi-d/Dat<wbr>aMapperWebApp/blob/master/WebC<wbr>ontent/d3trials/datamapper_d3.<wbr>html</a><br></p><p>[2] \
- JSFiddle for JSON schema tree structure - <a \
href="https://jsfiddle.net/sachid/Lvuff6r5/" \
target="_blank">https://jsfiddle.net/sachid/Lv<wbr>uff6r5/</a><br></p><p> [3] - \
<span></span>Related blog posts<span> - </span><a \
href="http://comexile.blogspot.com/search/label/WSO2%20Experiments" \
target="_blank">http://comexile.blogspot.com/s<wbr>earch/label/WSO2%20Experiments \
<br></a></p></div><div><div><div>[4] - Git repository - <a \
href="https://github.com/sachi-d/DataMapperWebApp" \
target="_blank">https://github.com/sachi-d/Dat<wbr>aMapperWebApp</a><span><font \
color="#888888"><span><font color="#888888"><span><font \
color="#888888"><br><br><br></font></span></font></span></font></span></div><span><font \
color="#888888"><span><font color="#888888"><span><font color="#888888"><div>-- \
<br><div><div dir="ltr"><div><div dir="ltr"><span><font color="#888888"><div><b \
style="color:rgb(0,0,0);font-family:arial,helvetica,sans-serif"><font \
color="#888888">Sachithra Dangalla<br>Software Engineering \
Intern</font></b><br></div><div>Mobile : <a href="mailto:thilinad@wso2.com" \
target="_blank">+94 (0) 713700656 </a><br><a href="mailto:thilinad@wso2.com" \
target="_blank">sachithra@wso2.com</a></div></font></span></div></div></div></div> \
</div></font></span></font></span></font></span></div></div></div> \
</div><br></div></div></div></div></div></div> </div><br></div>
<br></div></div>______________________________<wbr>_________________<br>
Dev mailing list<br>
<a href="mailto:Dev@wso2.org" target="_blank">Dev@wso2.org</a><br>
<a href="http://wso2.org/cgi-bin/mailman/listinfo/dev" rel="noreferrer" \
target="_blank">http://wso2.org/cgi-bin/mailma<wbr>n/listinfo/dev</a><br> \
<br></blockquote></div><br></div> </blockquote></div><br></div></div></div>
</blockquote></div><br></div>
--001a11436388e03eed053d89287c--
["dmd3.png" (image/png)]
["responsetoMail2.png" (image/png)]
_______________________________________________
Dev mailing list
Dev@wso2.org
http://wso2.org/cgi-bin/mailman/listinfo/dev
[prev in list] [next in list] [prev in thread] [next in thread]
Configure |
About |
News |
Add a list |
Sponsored by KoreLogic