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
