Polygon with Holes Marker

[AliHasan71]

Describe your problem

I am able to successfully create polygon markers. Is there any way to define polygons with holes using this library?

Online demo URL

No response

Photo Sphere Viewer version

5.4.2

Plugins loaded

No response

Additional context

No response

[AliHasan71]

Is there any workaround solution in the meantime? Like using paths to define polygons instead or patterns along with polygons?

When spherical coordinates are given for the polygon attribute, how are they transformed into an SVG points?

[mistic100]

Please give a try to this branch https://github.com/mistic100/Photo-Sphere-Viewer/tree/polygon-hole

The definition of a polygon with holes is similar to GeoJSON syntax if you are familiar with it.

                                polygonPixels: [
                                    [
                                        // main shape
                                        [2941, 1413], [3042, 1402], [3041, 1555], [2854, 1559],
                                        [2739, 1516], [2775, 1469], [2941, 1413],
                                    ],
                                    [
                                        // first hole
                                        [2900, 1450], [2950, 1450], [2950, 1500], [2900, 1500],
                                    ]
                                ],

[AliHasan71]

Yes I am familiar with it. I actually tried that and it didn't work previously. But I see you have now made a Polygon into a Path.

I am using Photo Sphere Viewer via npm. Is there any way I can test this branch from there? How can I test it with my project?

[mistic100]

you will have to build it locally and use "npm link"/"yarn link"

https://photo-sphere-viewer.js.org/guide/development.html

[AliHasan71]

Works nicely! Just had to add the fillRule property to the svgStyle so that filled polygons also have the holes cutout.

Any chance this can be incorporated in the next release? Thanks a bunch.

[mistic100]

can you provide an example of your polygon where you have to change fillRule ? because I don't need it on the demo, and it should not be necessary if the polygon is not selfcrossing

[AliHasan71]

So firstly, after testing the branch locally, plugin-markers.html in the examples folder doesn't seem to open on the browser.

My polygon is not selfcrossing. Please refer to the below images.

Without fillRule in SVGStyle:

With fillRule in SVGStyle

[mistic100]

I need the actual data !

[AliHasan71]

Sorry about that. I have attached the entire MarkerConfig JSON, which includes the polygon vertices.
polygon.json

[mistic100]

Ok I understand the problem : I forced the holes coordinates to be in reverse order, but as you already did it (rightfully), it cancels out

Photo-Sphere-Viewer/packages/markers-plugin/src/markers/MarkerPolygon.ts

Line 68 in 0ec9d42

innerPoints += (i === 0 ? innerPos : innerPos.reverse())

I will remove this array inversion.

[AliHasan71]

Yes that makes complete sense why the evenodd value for the fillStyle property made it work regardless.

I have tested it and everything works perfectly including hovering, tooltip, etc. Thank you for the feature! Looking forward to the 5.8.0 release.

[github-actions]

This feature/bug fix has been released in version 5.7.4.