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 <[email protected]> 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 <[email protected]> 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: [email protected] >> [image: https://lk.linkedin.com/in/dilinimampitiya] >> <https://lk.linkedin.com/in/dilinimampitiya> >> <https://github.com/dilini-mampitiya> >> <http:///dilinimampitiya.wordpress.com> <https://twitter.com/dilu_7392> >> >> On Wed, Apr 6, 2016 at 4:27 PM, Dilini Mihindra <[email protected]> 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: [email protected] >>> <http:///dilinimampitiya.wordpress.com> >>> <https://twitter.com/dilu_7392> >>> >>> On Wed, Apr 6, 2016 at 2:50 PM, Imesh Chandrasiri <[email protected]> >>> 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 >>>> <http://stackoverflow.com/questions/29951482/jsplumb-exporte-png>- 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 <[email protected]> >>>> 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: [email protected] >>>>> <http:///dilinimampitiya.wordpress.com> >>>>> <https://twitter.com/dilu_7392> >>>>> >>>>> On Wed, Apr 6, 2016 at 11:06 AM, Dakshika Jayathilaka < >>>>> [email protected]> 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 <[email protected]> >>>>>> 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 specify his/her own >>>>>>> descriptions. >>>>>>> - User can modify previously saved flowcharts. >>>>>>> >>>>>>> Please find a document containing more details regarding the >>>>>>> flowchart editor, attached herewith. >>>>>>> >>>>>>> Thank you. >>>>>>> >>>>>>> Dilini Mihindra Mampitiya Arachchi >>>>>>> Intern - Software Engineer >>>>>>> Mobile: +94 710 420 550 >>>>>>> Email: [email protected] >>>>>>> >>>>>>> _______________________________________________ >>>>>>> Architecture mailing list >>>>>>> [email protected] >>>>>>> https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture >>>>>>> >>>>>>> >>>>>> >>>>> >>>>> _______________________________________________ >>>>> Architecture mailing list >>>>> [email protected] >>>>> https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture >>>>> >>>>> >>>> >>>> >>>> -- >>>> *Thanks and Regards*, >>>> Imesh Chandrasiri >>>> Software Engineer >>>> *E:* [email protected] | *P:* 0716519187 >>>> >>>> >>> >> >> _______________________________________________ >> Dev mailing list >> [email protected] >> http://wso2.org/cgi-bin/mailman/listinfo/dev >> >> > > > -- > Himasha Guruge > *Software Engineer* > WS*O2* *Inc.* > Mobile: +94 777459299 > [email protected] > -- *Thanks and Regards*, Imesh Chandrasiri Software Engineer *E:* [email protected] | *P:* 0716519187
_______________________________________________ Architecture mailing list [email protected] https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture
