JamesLMilner / terra-draw

A library for drawing on maps that supports Mapbox, MapLibre, Google Maps, OpenLayers and Leaflet out the box
https://terradraw.io
MIT License
485 stars 57 forks source link

[Bug] `rotateable`, `scalable` and some options on select mode are not enabled in Maplibre adapter #325

Closed JinIgarashi closed 3 days ago

JinIgarashi commented 1 month ago

Describe the bug

In maplibre-gl-terradraw, I set the following polygon drawing option for TerraDrawSelectMode. For rectangle, angled-rectangle, I am using the same options.

new TerraDrawSelectMode({
    flags: {
        polygon: {
            feature: {
                draggable: true,
                rotateable: true,
                scaleable: true,
                coordinates: {
                    midpoints: true, 
                    draggable: true,
                    deletable: true
                }
            }
        }
    }
})

and I realised rotateable, coordinates.deletable are not enabled for maplibre adapter.

I found those properties from this test cases.

https://github.com/JamesLMilner/terra-draw/blob/977006802f8aef3d73c96e9e0436149ff58876fb/e2e/src/index.ts#L66-L89

I am wondering whether it is a bug or expected behaviour. Or features on select mode may be different according to the map adapter.

Terra Draw npm version

1.0.0-beta.1

To Reproduce

enable rotateable, scalable and coordinates.deletable on TerraDrawSelectMode

const terradraw = new TerraDraw({
  adapter: new TerraDrawMapLibreGLAdapter({ map }),
  modes: [
     new TerraDrawPolygonMode(),
     new TerraDrawSelectMode({
        flags: {
            polygon: {
                feature: {
                    draggable: true,
                    rotateable: true,
                    scaleable: true,
                    coordinates: {
                        midpoints: true,
                        draggable: true,
                        deletable: true
                    }
                }
            }
        }
    })
  ]
});

Expected behavior

If rotateable is enabled, a feature can be rotated. if rotateable is enabled, the size of feature can be changed. if coordinates.deletable is enabled, a node on an edge can be removed (by using delete key of keyboard?)

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

Smartphone (please complete the following information):

n/a

Additional context Add any other context about the problem here.

JamesLMilner commented 1 month ago

Hey @JinIgarashi - thanks for raising. The select behaviour should be the same for every adapter and Terra Draw (currently) does not behave differently for different adapters (or a least not intentionally!)

The delete, rotate and scale behaviours are enabled via keyboard input, defaulting to Delete for deleting, Control + r for rotation and Control + s for scaling. In future maybe we'll look at a way to perform these directly via the map interface, although this could a tricky UX to ensure consistently across different adapters. Let me know if this answers your question?

JinIgarashi commented 1 month ago

@JamesLMilner thanks. I did not know how keyboard input is associated to the delete, rotate and scale.

I confirmed rotate and scale works well. but I am not sure why deleting is not working. Plugin's select mode options are like below.

https://github.com/watergis/maplibre-gl-terradraw/blob/a30899112eac822951ed10a89244ccfe1fbeec74/src/lib/constants/getDefaultModeOptions.ts#L44-L117

I realized I did not add deletable to feature prop. maybe this is the problem. but I added deletable to coordinates prop, so at least deleting node should work?

however, when I enter delete key after selecting a node, it does not delete it. do you have any idea?

JinIgarashi commented 1 month ago

@JamesLMilner I just added deletable in the plugin setting locally, and tried to use delete key to delete a feature. it does not work...

JamesLMilner commented 1 month ago

Hi @JinIgarashi - deleteable is slightly confusing perhaps as it applies to being able to delete individual coordinates via the right mouse click interaction as opposed to keyboard interaction.

You can delete features by default using the Delete key, although this does not exist on some Apple devices so you'll need to assign it to Ctrl + Backspace or similar. You could probably do some detection to ensure the appropriate key is assigned.

Let me know if this explanation helps?

JinIgarashi commented 1 month ago

@JamesLMilner no, deleting does not work even with ctrl. I think current interface of deleting a feature or a node need to be improved. I don't think users can do this complex operations. rotating and rescaling feature is not such priority, but deleting is a critical feature...

JinIgarashi commented 1 month ago

I am thinking deleting a feature function maybe can be implemented by maplibre-gl-terradraw plugin side.

JamesLMilner commented 1 month ago

Hey @JinIgarashi, sorry to hear you're still having trouble here.

Firstly it'd be great to hear more about this not working, as I can't replicate this on main at the moment. See me deleting a polygon in Select mode with Backspace on MacOS:

https://github.com/user-attachments/assets/03445b43-3c51-450c-b903-70cb47234e93

Can you explain more about what is not working exactly? It might be that the map is not receiving focus and the event is not being capture by Terra Draw because of this. It shouldn't be necessary to implement this at the maplibre-gl-terradraw level I don't believe.

Secondly would be open to hearing more about potential improves to the UX of deleting features or coordinates. Please let me know if you have ideas about improving this.

JinIgarashi commented 2 weeks ago

@JamesLMilner I don't know why, maybe my Macbook is broken. I still cannot delete a feature by control + backspaceI assume it is delete key). I really don't know how to delete it even after watching. your pasted video because I cannot see how you type in your keyboard.

I am thinking to change delete mode feature in maplibre-gl-terradraw slightly differently to solve deleting issue.

I think letting users select what features they want to delete before clicking delete button, is the easiest way for users.

JinIgarashi commented 3 days ago

@JamesLMilner I solved deleting feature issue in maplibre plugin side. I added new delete-selection mode to allow users to delete only selected feature. I will close this issue.

https://github.com/watergis/maplibre-gl-terradraw/pull/65

JamesLMilner commented 1 day ago

I see @JinIgarashi - thanks for raising this issue. I still feel a bit of an itch not understanding why delete wasn't working. I was thinking it might be because another element is swallowing they keyboard event? Hard to tell without digging deeper.