Add event handling

1 files changed, 143 insertions, 13 deletions

diff --git a/src/js/main.js b/src/js/main.js
index c2b3120..4f561fc 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -9,6 +9,8 @@ function wrapElmApplication(elmApp) {
         this._refreshExpiredTiles = true;
         this._renderWorldCopies = true;
         this.interactive = true;
+        this._eventRegistrationQueue = {};
+        this._eventListenerMap = new Map();
       }
 
       get mapboxStyle() {
@@ -55,12 +57,115 @@ function wrapElmApplication(elmApp) {
         this._renderWorldCopies = value;
       }
 
-      connectedCallback() {
-        mapboxgl.accessToken = this.token;
-        this.style.display = "block";
-        this.style.width = "100%";
-        this.style.height = "100%";
-        this._map = new mapboxgl.Map({
+      get center() {
+        return this._center;
+      }
+      set center(value) {
+        if (this._map) this._map.setCenter(value);
+        this._center = value;
+      }
+
+      get zoom() {
+        return this._zoom;
+      }
+      set zoom(value) {
+        if (this._map) this._map.setZoom(value);
+        this._zoom = value;
+      }
+
+      get bearing() {
+        return this._bearing;
+      }
+      set bearing(value) {
+        if (this._map) this._map.setBearing(value);
+        this._bearing = value;
+      }
+
+      get pitch() {
+        return this._pitch;
+      }
+      set pitch(value) {
+        if (this._map) this._map.setPitch(value);
+        this._pitch = value;
+      }
+
+      addEventListener(type, fn, ...args) {
+        if (this._map) {
+          var wrapped;
+          if (
+            [
+              "mousedown",
+              "mouseup",
+              "mouseover",
+              "mousemove",
+              "click",
+              "dblclick",
+              "mouseout",
+              "contextmenu",
+              "zoom",
+              "zoomstart",
+              "zoomend",
+              "rotate",
+              "rotatestart",
+              "rotateend"
+            ].includes(type)
+          ) {
+            wrapped = e => {
+              e.features = this._map.queryRenderedFeatures(
+                [e.lngLat.lng, e.lngLat.lat],
+                {
+                  layers: this.eventFeaturesLayers,
+                  filter: this.eventFeaturesFilter
+                }
+              );
+              return fn(e);
+            };
+          } else if (["touchend", "touchmove", "touchcancel"].includes(type)) {
+            wrapped = e => {
+              e.features = this._map.queryRenderedFeatures(
+                [e.lngLat.lng, e.lngLat.lat],
+                {
+                  layers: this.eventFeaturesLayers,
+                  filter: this.eventFeaturesFilter
+                }
+              );
+              e.perPointFeatures = e.lngLats.map(({ lng, lat }) =>
+                this._map.queryRenderedFeatures([lng, lat], {
+                  layers: this.eventFeaturesLayers,
+                  filter: this.eventFeaturesFilter
+                })
+              );
+              return fn(e);
+            };
+          } else {
+            wrapped = fn;
+          }
+          this._eventListenerMap.set(fn, wrapped);
+          return this._map.on(type, wrapped);
+        } else {
+          this._eventRegistrationQueue[type] =
+            this._eventRegistrationQueue[type] || [];
+          return this._eventRegistrationQueue[type].push(fn);
+        }
+      }
+
+      removeEventListener(type, fn, ...args) {
+        if (this._map) {
+          const wrapped = this._eventListenerMap.get(fn);
+          this._eventListenerMap.delete(fn);
+          return this._map.off(type, wrapped);
+        } else {
+          const queue = this._eventRegistrationQueue[type] || [];
+          const index = queue.findIndex(fn);
+          if (index >= 0) {
+            queue.splice(index, 1);
+          }
+          return;
+        }
+      }
+
+      _createMapInstance() {
+        let options = {
           container: this,
           style: this._style,
           minZoom: this._minZoom || 0,
@@ -70,14 +175,39 @@ function wrapElmApplication(elmApp) {
           logoPosition: this.logoPosition || "bottom-left",
           refreshExpiredTiles: this._refreshExpiredTiles,
           maxBounds: this._maxBounds,
-          center: this.center,
-          // zoom: this.zoom,
-          // bearing: this.bearing,
-          // pitch: this.pitch,
           renderWorldCopies: this._renderWorldCopies
-          // maxTileCacheSize: this._maxTileCacheSize,
-          // localIdeographFamily: this._localIdeographFamily
-        });
+        };
+        if (this._center) {
+          options.center = this._center;
+        }
+        if (this._zoom) {
+          options.zoom = this._zoom;
+        }
+        if (this._bearing) {
+          options.bearing = this._bearing;
+        }
+        if (this._pitch) {
+          options.pitch = this._pitch;
+        }
+        this._map = new mapboxgl.Map(options);
+
+        Object.entries(this._eventRegistrationQueue).forEach(
+          ([type, listeners]) => {
+            listeners.forEach(listener => {
+              this.addEventListener(type, listener);
+            });
+          }
+        );
+        this._eventRegistrationQueue = {};
+        return this._map;
+      }
+
+      connectedCallback() {
+        mapboxgl.accessToken = this.token;
+        this.style.display = "block";
+        this.style.width = "100%";
+        this.style.height = "100%";
+        this._map = this._createMapInstance();
       }
 
       disconnectedCallback() {