Skip to content

Error dragging rectangle vertexes while a portion of the shape is out of the viewport #230

Description

@rnlovaz

Hello.

First of all, thank you for making this great plugin.

I've hit a bug while trying to resize rectangles in a particular case. This bug can be reproduced on the official Demo page shown in the repo (https://leaflet.github.io/Leaflet.Editable/example/index.html).

This particular error only seems to affect rectangles and happens when you try to drag the vertexes of a shape that has a portion of its body outside of the visible map viewport.

Here's a visual example before resize:

Image

The moment we try to drag any of the visible vertexes, the result is the following (I've dragged both):

Image

If we look at the console, we get the following stack trace:

Uncaught TypeError: can't access property "latlng", previous is undefined
    extendBounds https://leaflet.github.io/Leaflet.Editable/src/Leaflet.Editable.js:1730
    onVertexMarkerDrag https://leaflet.github.io/Leaflet.Editable/src/Leaflet.Editable.js:1330
    onDrag https://leaflet.github.io/Leaflet.Editable/src/Leaflet.Editable.js:557
    fire https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    _onDrag https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    fire https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    _updatePosition https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    f https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    _onMove https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    r https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    j https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    n https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    W https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    B https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    gt https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    mt https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    _onDown https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    r https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    j https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    o https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    O https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    B https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    gt https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    mt https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    enable https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    addHooks https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    enable https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    _initInteraction https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    _initIcon https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    onAdd https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    onAdd https://leaflet.github.io/Leaflet.Editable/src/Leaflet.Editable.js:527
    _layerAdd https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    whenReady https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    addLayer https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    addLayer https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    connect https://leaflet.github.io/Leaflet.Editable/src/Leaflet.Editable.js:523
    initialize https://leaflet.github.io/Leaflet.Editable/src/Leaflet.Editable.js:518
    e https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    addVertexMarker https://leaflet.github.io/Leaflet.Editable/src/Leaflet.Editable.js:1151
    addVertexMarkers https://leaflet.github.io/Leaflet.Editable/src/Leaflet.Editable.js:1169
    initVertexMarkers https://leaflet.github.io/Leaflet.Editable/src/Leaflet.Editable.js:1127
    initVertexMarkers https://leaflet.github.io/Leaflet.Editable/src/Leaflet.Editable.js:1130
50 Leaflet.Editable.js:1730:7
    extendBounds https://leaflet.github.io/Leaflet.Editable/src/Leaflet.Editable.js:1730
    onVertexMarkerDrag https://leaflet.github.io/Leaflet.Editable/src/Leaflet.Editable.js:1330
    onDrag https://leaflet.github.io/Leaflet.Editable/src/Leaflet.Editable.js:557
    fire https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    _onDrag https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    fire https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    _updatePosition https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    (Async: FrameRequestCallback)
    f https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    _onMove https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    r https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    j https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    n https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    (Async: EventListener.handleEvent)
    W https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    B https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    gt https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    mt https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    _onDown https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    r https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    j https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    o https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    (Async: EventListener.handleEvent)
    O https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    B https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    gt https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    mt https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    enable https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    addHooks https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    enable https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    _initInteraction https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    _initIcon https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    onAdd https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    onAdd https://leaflet.github.io/Leaflet.Editable/src/Leaflet.Editable.js:527
    _layerAdd https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    whenReady https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    addLayer https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    addLayer https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    connect https://leaflet.github.io/Leaflet.Editable/src/Leaflet.Editable.js:523
    initialize https://leaflet.github.io/Leaflet.Editable/src/Leaflet.Editable.js:518
    e https://npmcdn.com/leaflet@1.3.4/dist/leaflet.js:5
    addVertexMarker https://leaflet.github.io/Leaflet.Editable/src/Leaflet.Editable.js:1151
    addVertexMarkers https://leaflet.github.io/Leaflet.Editable/src/Leaflet.Editable.js:1169
    initVertexMarkers https://leaflet.github.io/Leaflet.Editable/src/Leaflet.Editable.js:1127
    initVertexMarkers https://leaflet.github.io/Leaflet.Editable/src/Leaflet.Editable.js:1130

Do you have any idea why this happens or how to work around it? For my use case, users frequently need to resize rectangles with portions not shown in the visible map.

For context, I'm using the following leaflet and plug-in versions:

  • Leaflet: v1.9.4
  • Leaflet.Editable: v1.3.2
  • Path.Drag.js: v0.0.6

Thank you for any help you can provide.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions