v_leaflet_draw cancel edit results in JavaScript "Uncaught TypeDef"

Was wondering if anyone else encountered this problem? Using v_leaflet_draw, click edit on the draw control, then click cancel and the result is a Javascript error. Other functionality seems to be fine. I would guess it is a Leaflet issue, but perhaps I am sending coordinates in an unexpected way?  Thanks for any pointers.

VM721:7 Uncaught TypeError: Cannot read property '0' of undefinedo.Polyline.o.Path.extend._projectLatlngs
@ VM721:7o.Polyline.o.Path.extend._projectLatlngs
@ VM721:7o.Polyline.o.Path.extend._projectLatlngs
@ VM721:7o.Polyline.o.Path.extend._project
@ VM721:7o.SVG.o.Renderer.extend._updatePath
@ VM721:7o.Path.o.Layer.extend.redraw
@ VM721:7o.Polyline.o.Path.extend.setLatLngs
@ VM721:7L.EditToolbar.Edit.L.Handler.extend._revertLayer
@ VM722:10(anonymous function)
@ VM722:10o.LayerGroup.o.Layer.extend.eachLayer
@ VM721:7L.EditToolbar.Edit.L.Handler.extend.revertLayers
@ VM722:10L.EditToolbar.L.Toolbar.extend.disable
@ VM722:10h @ VM721:7

A piece of the Leaflet JavaScript where it seems "t" is null:

_projectLatlngs: function(t, e) {
            var i, n, s = t[0] instanceof o.LatLng, r = t.length;
            if (s) {
                for (n = ,i = 0; r > i; i++)
                    n[i] = this._map.latLngToLayerPoint(t[i]);
                e.push(n)
            } else
                for (i = 0; r > i; i++)
                    this._projectLatlngs(t[i], e)
        }[/i][/i][/i]

Here is an example of creating a map which generates the above error when clicking edit, then cancel:

public class MyMap extends CssLayout {

    private static final Set<String> DRAW_POLYGON_BUTTON = new HashSet<>(Arrays.asList("polygon"));

    private LFeatureGroup fenceGroup;
    private LDraw drawController;
    private LMap map;



    public MyMap() {
        init();
    }


    private void init() {

        addStyleName("mapview");
        setSizeFull();

        String tileUrl = "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";

        LTileLayer mapBoxTiles = new LTileLayer(tileUrl);
        mapBoxTiles.setDetectRetina(true);

        map = new LMap();
        map.addLayer(mapBoxTiles);
        map.setImmediate(true);
        map.setSizeFull();

        Polygon enclosure = createEnclosure();
        LPolygon fence = new LPolygon(enclosure);

        fenceGroup = new LFeatureGroup();
        fenceGroup.addComponent(fence);
        map.setCenter(enclosure.getCentroid());
        map.zoomToContent();

        map.addLayer(fenceGroup);

        drawController = createDrawController(true);
        map.addControl(drawController);

        addComponent(map);

        setSizeFull();
    }



    private Polygon createEnclosure() {
        Coordinate coordinates = new Coordinate[4];
        coordinates[0] = new Coordinate(1, 2);
        coordinates[1] = new Coordinate(2, 3);
        coordinates[2] = new Coordinate(3, 4);
        coordinates[3] = new Coordinate(1, 2);
        GeometryFactory geometryFactory = new GeometryFactory();
        return geometryFactory.createPolygon(coordinates);
    }


    private LDraw createDrawController(boolean editable) {
        LDraw newDrawController = new LDraw();
        newDrawController.setDrawVisibleButtons(DRAW_POLYGON_BUTTON);
        newDrawController.setEditableFeatureGroup(fenceGroup);
        return newDrawController;
    }


}

Versions from pom.xml:

• vaadin 7.6.4
• v-leaflet 1.0.0-b6
• v-leaflet-draw 0.6.2

Entering edit mode and clicking cancel will work for LPolyLine and LCircle:

// LPolyline fence = new LPolyline(new Point(1, 1), new Point(1, 10));
        // LCircle fence = new LCircle(new Point(1, 1), 20);

But will fail for LPolygon and LRectangle (an LPolygon subclass) when the JavaScript tries to do the revert:
 

// LRectangle fence = new LRectangle(new Point(1, 1), new Point(20, 10));
        LPolygon fence = new LPolygon(new Point(1, 1), new Point(1, 10), new Point(20, 10), new Point(20, 1), new Point(1, 1));

Part of the problem might be in v-leaflet's org.vaadin.addon.leaflet.util.JTSUtil when creating a LinearRing. There is a check "closed" to see if the array of points forming the polygon ends with the first point in order to close the polygon, but the equals method was not implemented for org.vaadin.addon.leaflet.shared.Point, so the check always failed and an extra co-ordinate was being tacked on:

private static LinearRing toLinearRing(Point[] points) {
        boolean closed = points[0].equals(points[points.length - 1]);

        Coordinate[] coordinates = new Coordinate[points.length
                + (closed ? 0 : 1)];
        for (int i = 0; i < points.length; i++) {
            Point p = points[i];
            coordinates[i] = new Coordinate(p.getLon(), p.getLat());
        }
        if (!closed) {
            coordinates[coordinates.length - 1] = coordinates[0];
        }
        return getGeometryFactory().createLinearRing(coordinates);
    }

Adding the equals method to Point stopped adding the extra co-ordinate, but didn't resolve the issue. Still something with the LinearRing I would think, but I'm not sure how to setup the environment to follow the integration with JavaScript.
 

Hi,

Sorry for not answering sooner, I have somehow gathered a month's queue for my forum TODO :-)

I fixed the equals thingie, but not sure if it helps. I'll try to update to Leaflet 1.0 rc + latest draw JSs and then look if this still happens.

BTW. Try using Leaflet.Editable. It is awesome.

Hi, can you try against the latest v-leaflet:1.0.0-rc1 version? I didn't manage to reproduce the issue with that. If it still happens, I'll need to get some more details from you how to reproduce the issue.

cheers,
matti