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]
_______________________________________________ Dev mailing list [email protected] http://wso2.org/cgi-bin/mailman/listinfo/dev
