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: [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 Fri, Apr 8, 2016 at 5:01 PM, Imesh Chandrasiri <[email protected]> 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 <[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 > >
_______________________________________________ Dev mailing list [email protected] http://wso2.org/cgi-bin/mailman/listinfo/dev
