@vizabi/bubblechart 5.2.2 → 5.3.0

package/build/bubblechart.js

@@ -1,4 +1,4 @@
-// https://github.com/vizabi/bubblechart#readme v5.2.2 build 1747332366038 Copyright 2025 Gapminder Foundation and contributors
+// https://github.com/vizabi/bubblechart#readme v5.3.0 build 1750548202909 Copyright 2025 Gapminder Foundation and contributors
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@vizabi/shared-components'), require('d3'), require('mobx')) :
   typeof define === 'function' && define.amd ? define(['exports', '@vizabi/shared-components', 'd3', 'mobx'], factory) :
@@ -44465,6 +44465,7 @@ void main(void) {
       this.DOM.canvasWrap.select("canvas")
         .call(this._panZoom.dragRectangle)
         .call(this._panZoom.zoomer)
+        .on("contextmenu", (evt) => evt.preventDefault())
         .on("dblclick.zoom", null)
         .on("mouseup", () => {
           _this.draggingNow = false;
@@ -44913,6 +44914,7 @@ void main(void) {
       let trailChunkIndex = 0;
       let trailChunkIndex1 = 0;
       let indexOffset;
+      let newData = [];
       //let deltaTrailChunkIndex = 0;
       let currentTrailKey = null;
       //const _updateRanges = [];
@@ -44925,7 +44927,7 @@ void main(void) {
       let dataTrailChunkIndex;
       const trailsShowAndSomeSelected = this.MDL.trail.show && this.__someSelected;
 
-      const newData = trailsShowAndSomeSelected ? this.model.dataArray.reduce((res, d, i) => {
+      if (trailsShowAndSomeSelected) newData = this.model.dataArray.reduce((res, d, i) => {
         d.r = sharedComponents.LegacyUtils.areaToRadius(this.sScale(d.size || 0));
         if (d[TRAIL_KEY]) {
           if (!currentTrailKey) {
@@ -44965,7 +44967,18 @@ void main(void) {
         }
         return res;
 
-      }, []) : this.model.dataArray.filter(d => {
+      }, []); 
+      
+      //handle a situation when user is using opacity feature to hide unselected bubbles completely
+      //the invisible bubbles should be completely transparent to mouse events, better yet not exist at all
+      //it is convenient to do here because we are running O(N) filter for other purposes anyway
+      else if (this.__someSelected && this.ui.opacitySelectDim === 0) newData = this.model.dataArray.filter(d => {
+        if (d[REQUIRED_KEY] || !this.MDL.selected.data.filter.markers.has(d[KEY])) return false;
+        d.r = sharedComponents.LegacyUtils.areaToRadius(this.sScale(d.size || 0));
+        return true;
+      });
+      
+      else newData = this.model.dataArray.filter(d => {
         if (d[REQUIRED_KEY]) return false;
         d.r = sharedComponents.LegacyUtils.areaToRadius(this.sScale(d.size || 0));
         return true;
@@ -45718,34 +45731,35 @@ void main(void) {
             //}, 0);
           }
         },
-        onClick: ({ object:d, index }) => {
-          //console.log("onclick", d, this.activeObject);  
+        onClick: ({ object:d, index }, event) => {
           if (!d) return;
-          //zero opacity for non-selected markers
+          //invisible bubbles should not react to clicks
           if (this._getBubbleOpacity(d) == 0) return;
-
-          let dataKey = {[KEY]: d[KEY]};
-          console.log("click pretoggle", d, dataKey);
-          if (d[TRAIL_KEY]) {
-            const nextIndex = index + 1;
-            if (this.__data[nextIndex]?.[TRAIL_KEY] == d[TRAIL_KEY]) {
-              return;
+          //no reaction on trail bubbles either
+          if (d[TRAIL_KEY]) return;
+          
+          mobx.runInAction(() => {
+            const dataKey = {[KEY] : d[KEY]};
+
+            if (event.rightButton) {
+              dataKey.name = this.__labelWithoutFrame(d);
+              const margin = this.profileConstants.margin;
+              const toolNode = this.element.node();
+              const x = (this.width - event.offsetCenter.x) < 250 ? this.width - 250 : event.offsetCenter.x - 5;
+
+              //set context menu
+              const contextMenuComponent = this.root.findChild({type: "MarkerContextmenu"});
+              contextMenuComponent.show(dataKey, {
+                x: toolNode.offsetLeft + x + margin.left * this.profileConstants.leftMarginRatio,
+                y: toolNode.offsetTop + event.offsetCenter.y + margin.top - 5
+              });
             } else {
-              dataKey = {[KEY]: d[TRAIL_KEY]};
+              this.MDL.selected.data.filter.toggle(dataKey);
             }
-          }
-          //const invalidate = d?.[KEY] !== this.activeObject?.[KEY]
-          mobx.runInAction(() => {
-            this.MDL.selected.data.filter.toggle(dataKey);
-            console.log("click toggle", dataKey);
-          });      
-          //this.activeObject = d;
-          //if (invalidate) {
-            //setTimeout(() => {
-            //console.log("invalidate", d, this.activeObject);  
-          this.deckBubble.setProps({layers: this.getBubbleLayers(undefined, false, 0, false)});
-            //}, 0);
-          //}
+          });
+
+          // not sure why this is needed? -- angie
+          //this.deckBubble.setProps({layers: this.getBubbleLayers(undefined, false, 0, false)})
         },
       }
     }
@@ -46156,6 +46170,11 @@ void main(void) {
         placeholder: ".vzb-treemenu",
         model: marker,
         name: "tree-menu"
+      },{
+        type: sharedComponents.MarkerContextmenu,
+        placeholder: ".vzb-marker-contextmenu",
+        model: marker,
+        name: "marker-contextmenu"
       },{
         type: sharedComponents.DataWarning,
         placeholder: ".vzb-datawarning",
@@ -46200,6 +46219,7 @@ void main(void) {
         <div class="vzb-buttonlist"></div>
       </div>
       <div class="vzb-treemenu"></div>
+      <div class="vzb-marker-contextmenu"></div>
       <div class="vzb-datawarning"></div>
       <div class="vzb-spaceconfig"></div>
       <div class="vzb-datanotes"></div>
@@ -46340,7 +46360,7 @@ void main(void) {
     }
   });
 
-  BubbleChart.versionInfo = { version: "5.2.2", build: 1747332366038, package: {"homepage":"https://github.com/vizabi/bubblechart#readme","name":"@vizabi/bubblechart","description":"Vizabi bubble chart"}, sharedComponents: sharedComponents.versionInfo};
+  BubbleChart.versionInfo = { version: "5.3.0", build: 1750548202909, package: {"homepage":"https://github.com/vizabi/bubblechart#readme","name":"@vizabi/bubblechart","description":"Vizabi bubble chart"}, sharedComponents: sharedComponents.versionInfo};
 
   exports.Base = BubbleChart;