Add Polyline/Polygon

[andfanilo]

As a user I want to be able to draw polyline (one click during line drawing = one new anchor point)

https://github.com/fabricjs/fabric.js/issues/6319

[robmarkcole]

I have a use case for this :-)

[andfanilo]

Ahah okay :) leaving notes for myself:

• should we be able to edit a ploygon point per point? or transform should apply to all polygon and just delkete/build one if needed?
  • could http://fabricjs.com/custom-controls-polygon help
• is polyline really interesting? or focus on polygon first? maybe if fill color then do polygon else if none make polyline?
• whole lot of polygon drawing on google so not scared XD

[hiankun]

I have came up with very messy code to draw "polygons" in my own tests. There are temporary line segments and polygons during the drawing process.

The code so far has a main problem which I believe due to my very limited understanding of Fabric.js and the mechanism of Streamlit. When drawing the "polygons", I have to disable "Update in realtime" or the aforementioned line segments will appear in the canvas and the polygon won't be created.

Should I create a PR to show you the code?

[andfanilo]

Sure @hiankun ! That'll help kickstart the conversation. If the only problem is disabling the update in realtime part we could try and reorganize which events provoke a Streamlit rerender ;) so feel free to share via PR Fanilo :balloon:

[hiankun]

Hi, I have created the PR #51 . Please check it when you have time to review. :-)

[andfanilo]

Thanks, I saw the PR, I'll have a look ASAP this week! (I have some other deadlines to solve first :( ...)

[hiankun]

@andfanilo No hurry. Take your time please.

[andfanilo]

@robmarkcole @hiankun #51 has been merged and I made a new 0.8.0 release. I pushed an update to the demo to add polygon to the Basic example. I'll let you play with it, test it, and then will promote it on the forums/social media around late Tuesday :wink:

Thanks Hian-Kun for the awesome contribution!

[hiankun]

I am so lucky to contribute to such a great project. Thank you for all the discussion and instruction. :-)

[hiankun]

@andfanilo

I pushed an update to the demo to add polygon to the Basic example.

Should we add a description to tell users that now they can use right-click to update the canvas?

[andfanilo]

Yeah I added it in the CHANGELOG and in the demo app description but I did not commit/push those yet. Will do at the same time as promoting the release.

[hiankun]

I have been using v0.8.0 in my app and found two bugs. Write them down here:

1. When using double-click to cancel latest point, we have to move mouse to any other position to make it work. If we keep double-clicking at the same position then it won't cancel anything.
2. After canceling a polygon with double-clicks, if we don't use right-click to "update", then the cancelled polygon will appear as a zero-sized polygon in the json data as shown in the screenshot. Other "update mechanisms" won't remove the zero-sized polygon. Only right-click will do the trick. (Edit: The right-click only remove the latest zero-sized polygon.)

[hiankun]

Another bug, which might be also related to the right-click interfering with the update mechanism (just a quick guess).

When canvas has a background image, the latest drawn polygon will be removed if we right-click again. However, if we do any other operations such as left-click or draw another shape, the right-click won't remove that polygon. The bug looks like the previous bug that the right-click only remove the zero-sized polygon which is created by the latest operation on the canvas.

[andfanilo]

Thanks for updating,

I'm currently installing my new personal workstation, hopefully it will be finished this weekend and I can come back to studying this issue!

Fanilo