@focusbc/bbs-lib 0.0.4 → 0.0.5

package/README.md

@@ -37,6 +37,18 @@ const context: MapContext = {
 
 const overlay = MapOverlay.initialize(document.getElementById('map-overlay')!, context)
 
+overlay.click().subscribe(({ shape, lat, lng }) => {
+  console.log('left click', { shape, lat, lng })
+})
+
+overlay.doubleClick().subscribe(({ shape, lat, lng }) => {
+  console.log('double click', { shape, lat, lng })
+})
+
+overlay.rightClick().subscribe(({ shape, lat, lng }) => {
+  console.log('right click', { shape, lat, lng })
+})
+
 // Later, when the event/site changes:
 overlay.setContext(newContext)
 ```
@@ -93,7 +105,7 @@ Open `http://localhost:5173`, select an event, then a site. The overlay calls `M
 
 ## Client demo
 
-The client-facing reference implementation lives in [`demo/`](demo/). It installs `@focusbc/bbs-lib` from **npm** (not the local `src/` or `dist/` in this repo) and bundles with esbuild. See [`demo/README.md`](demo/README.md).
+The client-facing reference implementation lives in [`demo/`](demo/). It is a static site (`index.html` + `main.js`) with no build step. See [`demo/README.md`](demo/README.md).
 
 From this directory:
 
@@ -107,6 +119,8 @@ Or from the repository root:
 yarn bbs-demo:serve
 ```
 
+To run the demo folder on its own, serve it statically — for example `npx --yes serve . -p 5174` from `demo/`.
+
 ---
 
 ## Releasing the library

package/dist/browser/bbs-lib.js

@@ -18186,105 +18186,9 @@ var ImageLoader = {
 var defaultLogger = new ProbeLog({ id: "deck" });
 var log_default = defaultLogger;
 
-// node_modules/@deck.gl/core/dist/debug/loggers.js
-var logState = {
-  attributeUpdateStart: -1,
-  attributeManagerUpdateStart: -1,
-  attributeUpdateMessages: []
-};
-var LOG_LEVEL_MAJOR_UPDATE = 1;
-var LOG_LEVEL_MINOR_UPDATE = 2;
-var LOG_LEVEL_UPDATE_DETAIL = 3;
-var LOG_LEVEL_INFO = 4;
-var LOG_LEVEL_DRAW = 2;
-var getLoggers = (log4) => ({
-  /* Layer events */
-  "layer.changeFlag": (layer, key, flags) => {
-    log4.log(LOG_LEVEL_UPDATE_DETAIL, `${layer.id} ${key}: `, flags[key])();
-  },
-  "layer.initialize": (layer) => {
-    log4.log(LOG_LEVEL_MAJOR_UPDATE, `Initializing ${layer}`)();
-  },
-  "layer.update": (layer, needsUpdate) => {
-    if (needsUpdate) {
-      const flags = layer.getChangeFlags();
-      log4.log(LOG_LEVEL_MINOR_UPDATE, `Updating ${layer} because: ${Object.keys(flags).filter((key) => flags[key]).join(", ")}`)();
-    } else {
-      log4.log(LOG_LEVEL_INFO, `${layer} does not need update`)();
-    }
-  },
-  "layer.matched": (layer, changed) => {
-    if (changed) {
-      log4.log(LOG_LEVEL_INFO, `Matched ${layer}, state transfered`)();
-    }
-  },
-  "layer.finalize": (layer) => {
-    log4.log(LOG_LEVEL_MAJOR_UPDATE, `Finalizing ${layer}`)();
-  },
-  /* CompositeLayer events */
-  "compositeLayer.renderLayers": (layer, updated, subLayers) => {
-    if (updated) {
-      log4.log(LOG_LEVEL_MINOR_UPDATE, `Composite layer rendered new subLayers ${layer}`, subLayers)();
-    } else {
-      log4.log(LOG_LEVEL_INFO, `Composite layer reused subLayers ${layer}`, subLayers)();
-    }
-  },
-  /* LayerManager events */
-  "layerManager.setLayers": (layerManager, updated, layers) => {
-    if (updated) {
-      log4.log(LOG_LEVEL_MINOR_UPDATE, `Updating ${layers.length} deck layers`)();
-    }
-  },
-  "layerManager.activateViewport": (layerManager, viewport) => {
-    log4.log(LOG_LEVEL_UPDATE_DETAIL, "Viewport changed", viewport)();
-  },
-  /* AttributeManager events */
-  "attributeManager.invalidate": (attributeManager, trigger, attributeNames) => {
-    log4.log(LOG_LEVEL_MAJOR_UPDATE, attributeNames ? `invalidated attributes ${attributeNames} (${trigger}) for ${attributeManager.id}` : `invalidated all attributes for ${attributeManager.id}`)();
-  },
-  "attributeManager.updateStart": (attributeManager) => {
-    logState.attributeUpdateMessages.length = 0;
-    logState.attributeManagerUpdateStart = Date.now();
-  },
-  "attributeManager.updateEnd": (attributeManager, numInstances) => {
-    const timeMs = Math.round(Date.now() - logState.attributeManagerUpdateStart);
-    log4.groupCollapsed(LOG_LEVEL_MINOR_UPDATE, `Updated attributes for ${numInstances} instances in ${attributeManager.id} in ${timeMs}ms`)();
-    for (const updateMessage of logState.attributeUpdateMessages) {
-      log4.log(LOG_LEVEL_UPDATE_DETAIL, updateMessage)();
-    }
-    log4.groupEnd(LOG_LEVEL_MINOR_UPDATE)();
-  },
-  /* Attribute events */
-  "attribute.updateStart": (attribute) => {
-    logState.attributeUpdateStart = Date.now();
-  },
-  "attribute.allocate": (attribute, numInstances) => {
-    const message2 = `${attribute.id} allocated ${numInstances}`;
-    logState.attributeUpdateMessages.push(message2);
-  },
-  "attribute.updateEnd": (attribute, numInstances) => {
-    const timeMs = Math.round(Date.now() - logState.attributeUpdateStart);
-    const message2 = `${attribute.id} updated ${numInstances} in ${timeMs}ms`;
-    logState.attributeUpdateMessages.push(message2);
-  },
-  /* Render events */
-  "deckRenderer.renderLayers": (deckRenderer, renderStats, opts) => {
-    const { pass, redrawReason, stats } = opts;
-    for (const status of renderStats) {
-      const { totalCount, visibleCount, compositeCount, pickableCount } = status;
-      const primitiveCount = totalCount - compositeCount;
-      const hiddenCount = primitiveCount - visibleCount;
-      log4.log(LOG_LEVEL_DRAW, `RENDER #${deckRenderer.renderCount}   ${visibleCount} (of ${totalCount} layers) to ${pass} because ${redrawReason}   (${hiddenCount} hidden, ${compositeCount} composite ${pickableCount} pickable)`)();
-      if (stats) {
-        stats.get("Redraw Layers").add(visibleCount);
-      }
-    }
-  }
-});
-
 // node_modules/@deck.gl/core/dist/debug/index.js
 var loggers = {};
-if (production !== "production") {
+if (false) {
   loggers = getLoggers(log_default);
 }
 function register(handlers) {
@@ -78769,9 +78673,25 @@ var MapOverlay = class _MapOverlay {
     this._centerChangedEvent = new Event3();
     this._shapesChangedEvent = new Event3();
     this._clickEvent = new Event3();
+    this._doubleClickEvent = new Event3();
+    this._rightClickEvent = new Event3();
+    this.onDoubleClick = (event) => {
+      if (!(event.target instanceof HTMLCanvasElement)) {
+        return;
+      }
+      this._doubleClickEvent.emit(this.createPointerEventFromMouseEvent(event));
+    };
+    this.onRightClick = (event) => {
+      if (!(event.target instanceof HTMLCanvasElement)) {
+        return;
+      }
+      event.preventDefault();
+      this._rightClickEvent.emit(this.createPointerEventFromMouseEvent(event));
+    };
     const { zoom, heading, tilt } = options;
     const { center: center3, defaultLevelId } = context;
     this._context = context;
+    this._htmlElement = htmlElement;
     this._levelId = defaultLevelId;
     this._viewState = {
       zoom: zoom ?? DEFAULT_ZOOM,
@@ -78800,6 +78720,8 @@ var MapOverlay = class _MapOverlay {
         this._initializedEvent.emit();
       }
     });
+    this._htmlElement.addEventListener("dblclick", this.onDoubleClick, true);
+    this._htmlElement.addEventListener("contextmenu", this.onRightClick, true);
   }
   // #region Private methods
   /**
@@ -78820,6 +78742,21 @@ var MapOverlay = class _MapOverlay {
   rebuildLayers() {
     this._deck.setProps({ layers: this.createLayers() });
   }
+  createPointerEventFromMouseEvent(event) {
+    const bounds = this._htmlElement.getBoundingClientRect();
+    const x2 = event.clientX - bounds.left;
+    const y2 = event.clientY - bounds.top;
+    const viewport = this._deck.getViewports()?.[0];
+    const [lng, lat] = viewport ? viewport.unproject([x2, y2]) : [this.getCenter().lng, this.getCenter().lat];
+    const picked = this._deck.pickObject({ x: x2, y: y2 })?.object;
+    return {
+      lat,
+      lng,
+      x: lng,
+      y: lat,
+      shape: picked?.groupId ? this._shapes.find((shape) => shape.id === picked.groupId) : void 0
+    };
+  }
   /**
    * Handle the click event.
    */
@@ -78899,6 +78836,8 @@ var MapOverlay = class _MapOverlay {
     this.finalize();
   }
   finalize() {
+    this._htmlElement.removeEventListener("dblclick", this.onDoubleClick, true);
+    this._htmlElement.removeEventListener("contextmenu", this.onRightClick, true);
     this._deck.finalize();
   }
   //#region Getters and Setters
@@ -79008,6 +78947,12 @@ var MapOverlay = class _MapOverlay {
   click() {
     return this._clickEvent;
   }
+  doubleClick() {
+    return this._doubleClickEvent;
+  }
+  rightClick() {
+    return this._rightClickEvent;
+  }
   //#endregion
   //#endregion
 };