vuejs leaflet1.6.0 Cannot read property '_transformPoints' of undefined

[ryuchaehwa]

trafficstars

Hello, Many thanks for this library. Our customers love it.

We're currently moving our CS solution to Vuejs from Delphi. I've almost done with the leaflet part, but I've got a problem dragging Circle. PolyLine works fine which I don't understand... It just keep shows an error

'_transformPoints' of undefined.

As leaflet is a standalone and not for the framework, we're using vuejs wrapper for leaflet only. Other plugins like draw, edit, drag, handlers' vanilla versions are added into component due to leaflet doesn't support framework issues. so I don't think making them as one wrapper(one component) might be the issue. I'm thinking the issue comes from the version difference maybe...?, but I'm lost during debugging.... We've added our extra codes to customize it a bit.

with leaflet 1.0.3 I don't see an issue.

package.json
leaflet: 1.6.0

leaflet.draw.customize.js

...
  _replaceCoordGetters: function() {
      if (this._path instanceof L.Circle) { //this line changed, original: if (this._path.getLatLng) {
        // Circle, CircleMarker
        this._path.getLatLng_ = this._path.getLatLng;
        this._path.getLatLng = L.Util.bind(function() {
          return this.dragging._transformPoints(this.dragging._matrix, {});
        }, this._path);
      } else if (this._path instanceof L.Polyline) { //line changed 
        this._path.getLatLngs_ = this._path.getLatLngs;
        this._path.getLatLngs = L.Util.bind(function() {
          return this.dragging._transformPoints(this.dragging._matrix, []);
        }, this._path);
      }
    },

leaflet.js error line:

_fireDOMEvent: function(e, type, targets) {
...
if (e.type !== 'keypress' && e.type !== 'keydown' && e.type !== 'keyup') {
			var isMarker = target.getLatLng && (!target._radius || target._radius <= 10);
			data.containerPoint = isMarker ?
				this.latLngToContainerPoint(target.getLatLng()) : this.mouseEventToContainerPoint(e); //this line
			data.layerPoint = this.containerPointToLayerPoint(data.containerPoint);
			data.latlng = isMarker ? target.getLatLng() : this.layerPointToLatLng(data.layerPoint);
		}
}

Regards

[w8r]

I don't quite get how this is happening. Can you maybe provide a short example on https://codesandbox.io?

[ryuchaehwa]

@w8r I was trying to make a repo when I wrote the issue but it's over 8,000 lines.. I will send you a full test project if that's ok for you, please let me know your e-mail address! :)