Re: [Dev] [Architecture] [PC] Web based flowchart editor using jsPlumb

[Dilini Mihindra]

Hi all,

Thank you for the suggestion. Yes, I have already used the z-index property
in the flowchart diagram. For the svg element of the connection, I used
z-index: 6 and for the text filed overlay I used z-index: 21. As the
z-index of the text field overlay element is higher than that of the
connection element, the overlay is drawn in-front of the connection element
in the diagram. (See Fig. 1)
*Figure 1 - The connection and overlay text field in the flowchart diagram
(not the PNG)*

​This is changed when I save the diagram as a PNG. I tried setting the
z-index of the overlay text filed dynamically within the saveAsPNG
function, but it did not work. Can you think of another reason as to why
these are correctly positioned in the diagram but not in the PNG?

Thank you.

Dilini Mihindra Mampitiya Arachchi
Intern - Software Engineer
WSO2 Inc.
Mobile: +94 710 420 550
Email: dili...@wso2.com
[image: https://lk.linkedin.com/in/dilinimampitiya]


  

On Fri, Apr 8, 2016 at 5:01 PM, Imesh Chandrasiri  wrote:

> Hi Dilini,
>
> Try using the z-index property as mentioned in the jsplumb documentation
> [1].
>
> [1] https://jsplumbtoolkit.com/community/doc/styling-via-css
>
>
>
> On Fri, Apr 8, 2016 at 4:57 PM, Himasha Guruge  wrote:
>
>> Hi Dilini,
>>
>> Did you try using the z-index property? [1] [2]
>>
>> [1] http://www.w3schools.com/cssref/pr_pos_z-index.asp
>> [2]
>> http://stackoverflow.com/questions/19265746/javascript-is-there-a-way-how-to-draw-svg-path-under-the-content
>>
>> Regards,
>> Himasha
>>
>> On Fri, Apr 8, 2016 at 3:31 PM, Dilini Mihindra  wrote:
>>
>>> Hi all,
>>>
>>> I tried to save the flowchart to a PNG image using the link [1] provided
>>> by ImeshC in a previous mail. It gave an error when I used the method
>>> canvas.toBlob() saying that it is not a function.
>>>
>>> However, I was able to save the diagram to a PNG by replacing that
>>> method by saveAsPNG() method in canvas2image.js library. There is still a
>>> little problem. The saved PNG has connection labels behind the connection
>>> (see Figure 1).
>>>
>>> ​*Figure 1 - Saved PNG of a flowchart diagram*
>>>
>>> Can anyone help me with this? I searched for a solution but could not
>>> find any. I would highly appreciate your suggestions on this.
>>>
>>> + adding Dev Group
>>>
>>> [1] - http://stackoverflow.com/questions/29951482/jsplumb-exporte-png
>>>
>>> Thank you.
>>>
>>> Dilini Mihindra Mampitiya Arachchi
>>> Intern - Software Engineer
>>> WSO2 Inc.
>>> Mobile: +94 710 420 550
>>> Email: dili...@wso2.com
>>> [image: https://lk.linkedin.com/in/dilinimampitiya]
>>> 
>>> 
>>>   
>>>
>>> On Wed, Apr 6, 2016 at 4:27 PM, Dilini Mihindra 
>>> wrote:
>>>
 Hi Imesh,

 When trying to save the flowchart as a PNG, I came across the
 stackoverflow question you suggested. I will try it again and see whether
 it works. Thank you for mentioning it.
 For your question, yes, the labels on connectors are editable. I
 replaced those labels with text fields so that the user can edit them
 whenever required.

 Thank you.

 Dilini Mihindra Mampitiya Arachchi
 Intern - Software Engineer
 WSO2 Inc.
 Mobile: +94 710 420 550
 Email: dili...@wso2.com

 

 On Wed, Apr 6, 2016 at 2:50 PM, Imesh Chandrasiri 
 wrote:

> Hi,
>
>  I have a suggestion for the the functionalities,
>
> - You've mentioned there was an issue with downloading the svg as a
> png. I found a couple of links I think might be useful for you.
> link 2
> - A
> stackoverflow question which the exported png contains no connectors.
>
> Above discussion lead to a solution so I hope this would help you.
>
> One more question is whether the labels on connectors are editable?
>
>
> On Wed, Apr 6, 2016 at 2:00 PM, Dilini Mihindra 
> wrote:
>
>> Hi Dakshika,
>>
>> Following are the meeting notes on flowchart editor:
>>
>>- Drag and drop basic elements to create a new element.
>>- Distinguish the elements in the palette.
>>- Set two endpoints for each element. (one in and one out)
>>- Highlight the target endpoints when a connector is being
>>dragged from an endpoint.
>>- Break single line content to multiple lines based on the
>>element width.
>>- Delete a connection/element by showing a cross over it.
>>- Show delete 

Re: [Dev] [Architecture] [PC] Web based flowchart editor using jsPlumb

[Imesh Chandrasiri]

Hi Dilini,

Try using the z-index property as mentioned in the jsplumb documentation
[1].

[1] https://jsplumbtoolkit.com/community/doc/styling-via-css


On Fri, Apr 8, 2016 at 4:57 PM, Himasha Guruge  wrote:

> Hi Dilini,
>
> Did you try using the z-index property? [1] [2]
>
> [1] http://www.w3schools.com/cssref/pr_pos_z-index.asp
> [2]
> http://stackoverflow.com/questions/19265746/javascript-is-there-a-way-how-to-draw-svg-path-under-the-content
>
> Regards,
> Himasha
>
> On Fri, Apr 8, 2016 at 3:31 PM, Dilini Mihindra  wrote:
>
>> Hi all,
>>
>> I tried to save the flowchart to a PNG image using the link [1] provided
>> by ImeshC in a previous mail. It gave an error when I used the method
>> canvas.toBlob() saying that it is not a function.
>>
>> However, I was able to save the diagram to a PNG by replacing that method
>> by saveAsPNG() method in canvas2image.js library. There is still a little
>> problem. The saved PNG has connection labels behind the connection (see
>> Figure 1).
>>
>> ​*Figure 1 - Saved PNG of a flowchart diagram*
>>
>> Can anyone help me with this? I searched for a solution but could not
>> find any. I would highly appreciate your suggestions on this.
>>
>> + adding Dev Group
>>
>> [1] - http://stackoverflow.com/questions/29951482/jsplumb-exporte-png
>>
>> Thank you.
>>
>> Dilini Mihindra Mampitiya Arachchi
>> Intern - Software Engineer
>> WSO2 Inc.
>> Mobile: +94 710 420 550
>> Email: dili...@wso2.com
>> [image: https://lk.linkedin.com/in/dilinimampitiya]
>> 
>> 
>>   
>>
>> On Wed, Apr 6, 2016 at 4:27 PM, Dilini Mihindra  wrote:
>>
>>> Hi Imesh,
>>>
>>> When trying to save the flowchart as a PNG, I came across the
>>> stackoverflow question you suggested. I will try it again and see whether
>>> it works. Thank you for mentioning it.
>>> For your question, yes, the labels on connectors are editable. I
>>> replaced those labels with text fields so that the user can edit them
>>> whenever required.
>>>
>>> Thank you.
>>>
>>> Dilini Mihindra Mampitiya Arachchi
>>> Intern - Software Engineer
>>> WSO2 Inc.
>>> Mobile: +94 710 420 550
>>> Email: dili...@wso2.com
>>>
>>> 
>>>
>>> On Wed, Apr 6, 2016 at 2:50 PM, Imesh Chandrasiri 
>>> wrote:
>>>
 Hi,

  I have a suggestion for the the functionalities,

 - You've mentioned there was an issue with downloading the svg as a
 png. I found a couple of links I think might be useful for you.
 link 2
 - A
 stackoverflow question which the exported png contains no connectors.

 Above discussion lead to a solution so I hope this would help you.

 One more question is whether the labels on connectors are editable?


 On Wed, Apr 6, 2016 at 2:00 PM, Dilini Mihindra 
 wrote:

> Hi Dakshika,
>
> Following are the meeting notes on flowchart editor:
>
>- Drag and drop basic elements to create a new element.
>- Distinguish the elements in the palette.
>- Set two endpoints for each element. (one in and one out)
>- Highlight the target endpoints when a connector is being dragged
>from an endpoint.
>- Break single line content to multiple lines based on the element
>width.
>- Delete a connection/element by showing a cross over it.
>- Show delete option when an element/connection is clicked.
>- If possible, inside a single div separate the palette and the
>drawing.
>- Change the border color of end element.
>- Highlight the whole background of an element when it is selected.
>- Avoid the endpoint dislocation of the decision element.
>
> I implemented these suggestions to the existing flowchart editor.
>
> Thank you.
>
> Dilini Mihindra Mampitiya Arachchi
> Intern - Software Engineer
> WSO2 Inc.
> Mobile: +94 710 420 550
> Email: dili...@wso2.com
>
> 
>
> On Wed, Apr 6, 2016 at 11:06 AM, Dakshika Jayathilaka <
> daksh...@wso2.com> wrote:
>
>> Hi,
>>
>> Can you share the notes that taken during the review.
>>
>> Regards,
>>
>> *Dakshika Jayathilaka*
>> PMC Member & Committer of Apache Stratos
>> Senior Software Engineer
>> WSO2, Inc.
>> lean.enterprise.middleware
>> 0771100911
>>
>> On Fri, Mar 18, 2016 at 12:13 PM, Dilini Mihindra 
>> wrote:
>>
>>> Hi all,
>>>
>>> I implemented a flowchart editor for the Process Center (PC). It was
>>> implemented using the 

Re: [Dev] [Architecture] [PC] Web based flowchart editor using jsPlumb

[Himasha Guruge]

Hi Dilini,

Did you try using the z-index property? [1] [2]

[1] http://www.w3schools.com/cssref/pr_pos_z-index.asp
[2]
http://stackoverflow.com/questions/19265746/javascript-is-there-a-way-how-to-draw-svg-path-under-the-content

Regards,
Himasha

On Fri, Apr 8, 2016 at 3:31 PM, Dilini Mihindra  wrote:

> Hi all,
>
> I tried to save the flowchart to a PNG image using the link [1] provided
> by ImeshC in a previous mail. It gave an error when I used the method
> canvas.toBlob() saying that it is not a function.
>
> However, I was able to save the diagram to a PNG by replacing that method
> by saveAsPNG() method in canvas2image.js library. There is still a little
> problem. The saved PNG has connection labels behind the connection (see
> Figure 1).
>
> ​*Figure 1 - Saved PNG of a flowchart diagram*
>
> Can anyone help me with this? I searched for a solution but could not find
> any. I would highly appreciate your suggestions on this.
>
> + adding Dev Group
>
> [1] - http://stackoverflow.com/questions/29951482/jsplumb-exporte-png
>
> Thank you.
>
> Dilini Mihindra Mampitiya Arachchi
> Intern - Software Engineer
> WSO2 Inc.
> Mobile: +94 710 420 550
> Email: dili...@wso2.com
> [image: https://lk.linkedin.com/in/dilinimampitiya]
> 
> 
>   
>
> On Wed, Apr 6, 2016 at 4:27 PM, Dilini Mihindra  wrote:
>
>> Hi Imesh,
>>
>> When trying to save the flowchart as a PNG, I came across the
>> stackoverflow question you suggested. I will try it again and see whether
>> it works. Thank you for mentioning it.
>> For your question, yes, the labels on connectors are editable. I replaced
>> those labels with text fields so that the user can edit them whenever
>> required.
>>
>> Thank you.
>>
>> Dilini Mihindra Mampitiya Arachchi
>> Intern - Software Engineer
>> WSO2 Inc.
>> Mobile: +94 710 420 550
>> Email: dili...@wso2.com
>>
>> 
>>
>> On Wed, Apr 6, 2016 at 2:50 PM, Imesh Chandrasiri 
>> wrote:
>>
>>> Hi,
>>>
>>>  I have a suggestion for the the functionalities,
>>>
>>> - You've mentioned there was an issue with downloading the svg as a png.
>>> I found a couple of links I think might be useful for you.
>>> link 2
>>> - A
>>> stackoverflow question which the exported png contains no connectors.
>>>
>>> Above discussion lead to a solution so I hope this would help you.
>>>
>>> One more question is whether the labels on connectors are editable?
>>>
>>>
>>> On Wed, Apr 6, 2016 at 2:00 PM, Dilini Mihindra 
>>> wrote:
>>>
 Hi Dakshika,

 Following are the meeting notes on flowchart editor:

- Drag and drop basic elements to create a new element.
- Distinguish the elements in the palette.
- Set two endpoints for each element. (one in and one out)
- Highlight the target endpoints when a connector is being dragged
from an endpoint.
- Break single line content to multiple lines based on the element
width.
- Delete a connection/element by showing a cross over it.
- Show delete option when an element/connection is clicked.
- If possible, inside a single div separate the palette and the
drawing.
- Change the border color of end element.
- Highlight the whole background of an element when it is selected.
- Avoid the endpoint dislocation of the decision element.

 I implemented these suggestions to the existing flowchart editor.

 Thank you.

 Dilini Mihindra Mampitiya Arachchi
 Intern - Software Engineer
 WSO2 Inc.
 Mobile: +94 710 420 550
 Email: dili...@wso2.com

 

 On Wed, Apr 6, 2016 at 11:06 AM, Dakshika Jayathilaka <
 daksh...@wso2.com> wrote:

> Hi,
>
> Can you share the notes that taken during the review.
>
> Regards,
>
> *Dakshika Jayathilaka*
> PMC Member & Committer of Apache Stratos
> Senior Software Engineer
> WSO2, Inc.
> lean.enterprise.middleware
> 0771100911
>
> On Fri, Mar 18, 2016 at 12:13 PM, Dilini Mihindra 
> wrote:
>
>> Hi all,
>>
>> I implemented a flowchart editor for the Process Center (PC). It was
>> implemented using the jsPlumb.js library. A user can describe a BPMN
>> process by creating a corresponding flowchart diagram using this editor.
>> There are four basic elements in the editor; the start element, the
>> decision element, the step element and the end element.
>>
>> Following functionalities are included in the editor:
>>
>>- User can draw flowchart 

Re: [Dev] [Architecture] [PC] Web based flowchart editor using jsPlumb

[Dilini Mihindra]

Hi all,

I tried to save the flowchart to a PNG image using the link [1] provided by
ImeshC in a previous mail. It gave an error when I used the method  canvas.
toBlob() saying that it is not a function.

However, I was able to save the diagram to a PNG by replacing that method
by saveAsPNG() method in canvas2image.js library. There is still a little
problem. The saved PNG has connection labels behind the connection (see
Figure 1).

​*Figure 1 - Saved PNG of a flowchart diagram*

Can anyone help me with this? I searched for a solution but could not find
any. I would highly appreciate your suggestions on this.

+ adding Dev Group

[1] - http://stackoverflow.com/questions/29951482/jsplumb-exporte-png

Thank you.

Dilini Mihindra Mampitiya Arachchi
Intern - Software Engineer
WSO2 Inc.
Mobile: +94 710 420 550
Email: dili...@wso2.com
[image: https://lk.linkedin.com/in/dilinimampitiya]


  

On Wed, Apr 6, 2016 at 4:27 PM, Dilini Mihindra  wrote:

> Hi Imesh,
>
> When trying to save the flowchart as a PNG, I came across the
> stackoverflow question you suggested. I will try it again and see whether
> it works. Thank you for mentioning it.
> For your question, yes, the labels on connectors are editable. I replaced
> those labels with text fields so that the user can edit them whenever
> required.
>
> Thank you.
>
> Dilini Mihindra Mampitiya Arachchi
> Intern - Software Engineer
> WSO2 Inc.
> Mobile: +94 710 420 550
> Email: dili...@wso2.com
>
> 
>
> On Wed, Apr 6, 2016 at 2:50 PM, Imesh Chandrasiri  wrote:
>
>> Hi,
>>
>>  I have a suggestion for the the functionalities,
>>
>> - You've mentioned there was an issue with downloading the svg as a png.
>> I found a couple of links I think might be useful for you.
>> link 2
>> - A
>> stackoverflow question which the exported png contains no connectors.
>>
>> Above discussion lead to a solution so I hope this would help you.
>>
>> One more question is whether the labels on connectors are editable?
>>
>>
>> On Wed, Apr 6, 2016 at 2:00 PM, Dilini Mihindra  wrote:
>>
>>> Hi Dakshika,
>>>
>>> Following are the meeting notes on flowchart editor:
>>>
>>>- Drag and drop basic elements to create a new element.
>>>- Distinguish the elements in the palette.
>>>- Set two endpoints for each element. (one in and one out)
>>>- Highlight the target endpoints when a connector is being dragged
>>>from an endpoint.
>>>- Break single line content to multiple lines based on the element
>>>width.
>>>- Delete a connection/element by showing a cross over it.
>>>- Show delete option when an element/connection is clicked.
>>>- If possible, inside a single div separate the palette and the
>>>drawing.
>>>- Change the border color of end element.
>>>- Highlight the whole background of an element when it is selected.
>>>- Avoid the endpoint dislocation of the decision element.
>>>
>>> I implemented these suggestions to the existing flowchart editor.
>>>
>>> Thank you.
>>>
>>> Dilini Mihindra Mampitiya Arachchi
>>> Intern - Software Engineer
>>> WSO2 Inc.
>>> Mobile: +94 710 420 550
>>> Email: dili...@wso2.com
>>>
>>> 
>>>
>>> On Wed, Apr 6, 2016 at 11:06 AM, Dakshika Jayathilaka >> > wrote:
>>>
 Hi,

 Can you share the notes that taken during the review.

 Regards,

 *Dakshika Jayathilaka*
 PMC Member & Committer of Apache Stratos
 Senior Software Engineer
 WSO2, Inc.
 lean.enterprise.middleware
 0771100911

 On Fri, Mar 18, 2016 at 12:13 PM, Dilini Mihindra 
 wrote:

> Hi all,
>
> I implemented a flowchart editor for the Process Center (PC). It was
> implemented using the jsPlumb.js library. A user can describe a BPMN
> process by creating a corresponding flowchart diagram using this editor.
> There are four basic elements in the editor; the start element, the
> decision element, the step element and the end element.
>
> Following functionalities are included in the editor:
>
>- User can draw flowchart diagrams using the elements provided in
>the palette.
>- User can connect elements by drawing connections from source
>endpoints to target endpoints.
>- These connections can be labeled.
>- Elements and connections can be deleted.
>- All the elements within the drawing area can be dragged and
>re-positioned.
>- The step and the decision elements can be re-sized.
>- User can edit the label of an element and