Wykks / ngx-mapbox-gl

Angular binding of mapbox-gl-js
https://wykks.github.io/ngx-mapbox-gl
MIT License
344 stars 138 forks source link

Right click and drag map #64

Closed behuda closed 5 years ago

behuda commented 5 years ago

Whenever i right click and try to tilt the map, mouse is captured and error occurs

Uncaught TypeError: Cannot read property 'equals' of undefined at tn._onMouseMove (eval at (vendor.js:138), :33:259175) at ZoneDelegate.invokeTask (eval at 1295 (polyfills.js:451), :398:31) at Zone.runTask (eval at 1295 (polyfills.js:451), :165:47) at HTMLDocument.ZoneTask.invoke (eval at 1295 (polyfills.js:451), :460:38

Wykks commented 5 years ago

Hum, I will need more information than that. I can't reproduce your issue. Can you reproduce it here ? https://stackblitz.com/edit/ngx-mapbox-gl-playground

behuda commented 5 years ago

https://stackblitz.com/edit/line-zoom-testing I did some testing, mapbox-gl\src\ui\handler\drag_rotate.js (mapboxg-gl src code)

 _unbind() {
        window.document.removeEventListener('mousemove', this._onMouseMove, {capture: true});
        window.document.removeEventListener('mouseup', this._onMouseUp);
        window.removeEventListener('blur', this._onBlur);
        DOM.enableDrag();
    }
 _onMouseMove(e: MouseEvent) {
        const pos = DOM.mousePos(this._el, e);
        if (this._lastPos.equals(pos)) {
            return;
        }
_onMouseUp(e: MouseEvent) {
        if (DOM.mouseButton(e) !== this._eventButton) return;
        switch (this._state) {
        case 'active':
            this._state = 'enabled';
            DOM.suppressClick();
            this._unbind();
            this._deactivate();
            this._inertialRotate(e);
            break;
        case 'pending':
            this._state = 'enabled';
            this._unbind();
            break;
        default:
            assert(false);
            break;
        }
    }

_deactivate makes _.lastPos to undefined on mouseUp In unbind method mouse event handlers are unregistered.

But move mouse event handler is still not unregeistered, and is called on every mouse move by that time _.lastPos is undefined and subsequent move mouse events generates the error.

I think its related to angular version.

Wykks commented 5 years ago

Seems to be fixed if you update zone.js. Even if ngx-mapbox-gl run mapbox-gl outside NgZone, zone still patches vanilla js functions to do his stuff..

behuda commented 5 years ago

yup thanks zonejs patching was the problem