@vizabi/bubblechart 5.5.2 → 5.5.4

package/build/bubblechart.js

@@ -1,4 +1,4 @@
-// https://github.com/vizabi/bubblechart#readme v5.5.2 build 1765875954936 Copyright 2025 Gapminder Foundation and contributors
+// https://github.com/vizabi/bubblechart#readme v5.5.4 build 1773941847513 Copyright 2026 Gapminder Foundation and contributors
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@vizabi/shared-components'), require('d3'), require('mobx'), require('@deck.gl/core'), require('@deck.gl/layers')) :
   typeof define === 'function' && define.amd ? define(['exports', '@vizabi/shared-components', 'd3', 'mobx', '@deck.gl/core', '@deck.gl/layers'], factory) :
@@ -1423,8 +1423,10 @@ in float instanceSizes;
 in float instanceAngles;
 in vec2 instancePixelOffsets;
 in float instanceLineWidths;
+in float instanceGlowWidths;
 in vec4 instanceFillColors;
 in vec4 instanceLineColors;
+in vec4 instanceGlowColors;
 in vec3 instancePickingColors;
 in float instanceDragged;
 
@@ -1437,9 +1439,11 @@ uniform vec4 padding;
 uniform int sizeUnits;
 uniform float edgeMaxCoord;
 
+out vec4 vGlowColor;
 out vec4 vFillColor;
 out vec4 vLineColor;
 out float vLineWidth;
+out float vGlowWidth;
 out vec2 uv;
 out vec2 dimensions;
 
@@ -1457,6 +1461,8 @@ void main(void) {
   geometry.pickingColor = instancePickingColors;
   uv = positions;
   vLineWidth = instanceLineWidths;
+  vGlowWidth = instanceGlowWidths;
+  vec4 glowPadding = padding + vec4(instanceGlowWidths);
 
   // convert size in meters to pixels, then scaled and clamp
 
@@ -1466,9 +1472,9 @@ void main(void) {
     sizeMinPixels, sizeMaxPixels
   );
 
-  dimensions = instanceRects.zw * sizePixels + padding.xy + padding.zw;
+  dimensions = instanceRects.zw * sizePixels + glowPadding.xy + glowPadding.zw;
 
-  vec2 pixelOffset = (positions * instanceRects.zw + instanceRects.xy) * sizePixels + mix(-padding.xy, padding.zw, positions);
+  vec2 pixelOffset = (positions * instanceRects.zw + instanceRects.xy) * sizePixels + mix(-glowPadding.xy, glowPadding.zw, positions);
   pixelOffset = rotate_by_angle(pixelOffset, instanceAngles);
   pixelOffset += instancePixelOffsets;
   pixelOffset.y *= -1.0;
@@ -1481,6 +1487,7 @@ void main(void) {
     gl_Position.xy += project_pixel_size_to_clipspace(offset.xy);
 
     vec2 clip_dimensions = project_pixel_size_to_clipspace(dimensions);
+    vec2 clip_glow = project_pixel_size_to_clipspace(vec2(vGlowWidth));
 
     //default pos switch on edge
     if (instanceDragged < 0.5) {
@@ -1490,8 +1497,8 @@ void main(void) {
     }
 
     //edge check
-    vec2 a = clamp(gl_Position.xy, vec2(-edgeMaxCoord), vec2(edgeMaxCoord) - clip_dimensions);
-    vec2 b = clamp(gl_Position.xy, clip_dimensions - edgeMaxCoord, vec2(edgeMaxCoord));
+    vec2 a = clamp(gl_Position.xy, vec2(-edgeMaxCoord) - clip_glow, vec2(edgeMaxCoord) - clip_dimensions + clip_glow);
+    vec2 b = clamp(gl_Position.xy, clip_dimensions - edgeMaxCoord - clip_glow, vec2(edgeMaxCoord) + clip_glow);
     //flip y
     gl_Position.xy = mix(a, b, vec2(positions.x, 1.0 - positions.y));
 
@@ -1507,6 +1514,8 @@ void main(void) {
   DECKGL_FILTER_COLOR(vFillColor, geometry);
   vLineColor = vec4(instanceLineColors.rgb, instanceLineColors.a * opacity);
   DECKGL_FILTER_COLOR(vLineColor, geometry);
+  vGlowColor = vec4(instanceGlowColors.rgb, instanceGlowColors.a * opacity);
+  DECKGL_FILTER_COLOR(vGlowColor, geometry);
 }
 `;
 
@@ -1522,8 +1531,10 @@ uniform float cornerRadius;
 in vec4 vFillColor;
 in vec4 vLineColor;
 in float vLineWidth;
+in float vGlowWidth;
 in vec2 uv;
 in vec2 dimensions;
+in vec4 vGlowColor;
 
 out vec4 fragColor;
 
@@ -1539,17 +1550,24 @@ void main()
 
   vec2 pixelPosition = uv * dimensions;
         
+  float fDist = RectSDF(pixelPosition-dimensions/2.0, dimensions/2.0 - vLineWidth/2.0-1.0 - vGlowWidth, cornerRadius);
+  vec4 v4ToColor = (fDist < 0.0) ? vFillColor : vec4(0.0);
+
   if (stroked) {
-    float fDist = RectSDF(pixelPosition-dimensions/2.0, dimensions/2.0 - vLineWidth/2.0-1.0, cornerRadius);
     float fBlendAmount = smoothstep(-1.0, 1.0, abs(fDist) - vLineWidth / 2.0);
 
     vec4 v4FromColor = vLineColor;
-    vec4 v4ToColor = (fDist < 0.0) ? vFillColor : vec4(0.0);
     fragColor = mix(v4FromColor, v4ToColor, fBlendAmount);
   } else {
-    fragColor = vFillColor;
+    fragColor = v4ToColor;
   }
         
+  // Outer glow
+  if (vGlowWidth > 0.0) {
+    float glowFactor = (1.0 - smoothstep(0.3*vGlowWidth, vGlowWidth*1.3, fDist -  vLineWidth/2.0));
+    fragColor = fragColor + vec4(vGlowColor.rgb, vGlowColor.a * glowFactor) * (1.0 - fragColor.a);
+  }
+
   DECKGL_FILTER_COLOR(fragColor, geometry);
 }
 `;
@@ -1557,6 +1575,8 @@ void main()
   class LabelBackgroundLayer extends layers._TextBackgroundLayer {
     static defaultProps = {
       getDragged: {type: 'accessor', value: 0.0},
+      getGlowColor: {type: 'accessor', value: [0, 0, 0, 255]},
+      getGlowWidth: {type: 'accessor', value: 0.0},
     };
 
     initializeState() {
@@ -1571,6 +1591,19 @@ void main()
           //  return this.parent.props.getDragged(object, info);
           //}
         },
+        instanceGlowColors: {
+          size: 4,
+          transition: true,
+          type: 'unorm8',
+          accessor: 'getGlowColor',
+          defaultValue: [0, 0, 0, 255]
+        },
+        instanceGlowWidths: {
+          size: 1,
+          transition: false,
+          accessor: "getGlowWidth",
+          defaultValue: 0.0
+        },
       });
     }
     
@@ -1817,6 +1850,8 @@ void main(void) {
       getLineSourceFillOffset: {type: 'accessor', value: 0},
       getRadius: {type: 'accessor', value: 0},
       getDragged: {type: 'accessor', value: 0.0},
+      getGlowColor: {type: 'accessor', value: [0, 0, 0, 255]},
+      getGlowWidth: {type: 'accessor', value: 0.0}
     }
     
     getPickingInfo(e) {
@@ -1895,6 +1930,55 @@ void main(void) {
           }
         ),
         //...layers,
+        this.props.glow && new LabelBackgroundLayer(
+          this.getSubLayerProps({
+            id: 'glow',
+            updateTriggers: {
+              //getColor: [activeObject],
+              getDragged: this.props.updateTriggers.getDragged,
+              getPixelOffset: this.props.updateTriggers.getPixelOffset,
+              getPosition: this.props.updateTriggers.getPosition,
+              getSize: this.props.updateTriggers.getSize,
+              getGlowWidth: this.props.updateTriggers.getGlowWidth,
+            }
+          }), {
+            data: this.props.data,
+            getPosition: (d, { index, data }) => {
+              const pos = this.props.getPosition(d, { index, data });
+              return index == (data.length - 1) ? pos : [...pos.slice(0, 2), -10];
+            },
+            getBoundingRect: this.getBoundingRect,
+            getPixelOffset: this.props.getPixelOffset,
+            getSize: this.props.getSize,
+            getFillColor: (_, { index, data }) => {
+              const alpha = index == (data.length - 1) ? 255 : 0;
+              return [255, 255, 255, alpha];
+            },
+            getLineColor: (d, { index, data }) => {
+              const alpha = index == (data.length - 1) ? 255: 0;
+              return [...(typeof this.props.getBorderColor == "function" ? this.props.getBorderColor(d) : this.props.getBorderColor).slice(0,3), alpha];
+            },
+            getLineWidth: (_, { index, data }) => {
+              return index == (data.length - 1) ? 1: 0;
+            },
+            getGlowColor: this.props.getGlowColor,
+            getGlowWidth:  (d, { index, data }) => {
+              return index == (data.length - 1) ? this.props.getGlowWidth(d) : 0;
+            },
+            getDragged: this.props.getDragged,
+            padding: this.props.backgroundPadding,
+            edgeMaxCoord: this.props.edgeMaxCoord,
+            cornerRadius: 5,
+            transitions: {
+              getPosition: this.props.transitions?.getPosition,
+              getPixelOffset: this.props.transitions?.getPosition,
+              getSize: this.props.transitions?.getSize,
+              getFillColor: this.props.transitions?.getBackgroundColor,
+              getLineColor: this.props.transitions?.getBorderColor,
+              getLineWidth: this.props.transitions?.getBorderWidth,
+              getGlowColor: this.props.transitions?.getGlowColor,
+            }
+        }),
         ...super.renderLayers(),
         this.state.closeData?.length && new LabelCloseButtonLayer(
           this.getSubLayerProps({
@@ -2156,6 +2240,7 @@ void main(void) {
       this.dragX;
       this.dragY;
       this.redrawUpdateTrigger = 0;
+      this.lastLineRedrawUpdateTrigger = 0;
       this.opacityUpdateTrigger = 0;
     }
 
@@ -2695,7 +2780,7 @@ void main(void) {
         //requestAnimationFrame(() => {
           this.deckBubble.setProps({layers: this.getBubbleLayers(this.__oldData, false, 0, undefined, this.__lastLineTrailData)});
           requestAnimationFrame(() => {
-            this.redrawUpdateTrigger++;
+            this.lastLineRedrawUpdateTrigger++;
             this.deckBubble.setProps({layers: this.getBubbleLayers(this.__oldData, true, 0.001, undefined, this.__lastLineTrailData)});
             requestAnimationFrame(() => {
               this.redrawUpdateTrigger++;
@@ -2788,8 +2873,6 @@ void main(void) {
         return true;
       });
 
-      this.labelZScale = d3.scaleLinear([0, selectedData.size - 1],[-0.09, -0.05]);
-      
       if (newTrailsData.length) {
         newTrailsData.forEach(d => {
           if (!d[TRAIL_KEY]) return;
@@ -2855,8 +2938,16 @@ void main(void) {
       } = this.profileConstants;
 
       //transfer min max radius to size dialog via root ui observable (probably a cleaner way is possible)
-      this.root.ui.minMaxRadius = {min: minRadiusPx, max: maxRadiusPx};
-      
+      if (this.root.ui.minMaxRadius) {
+        this.root.ui.minMaxRadius.min = minRadiusPx;
+        this.root.ui.minMaxRadius.max = maxRadiusPx;
+      } else {
+        this.root.ui.minMaxRadius = {
+          min: minRadiusPx,
+          max: maxRadiusPx
+        };
+      }
+
       const extent = this.MDL.size.scale.extent || [0, 1];
       
       let minArea = sharedComponents.LegacyUtils.radiusToArea(Math.max(maxRadiusPx * extent[0], minRadiusPx));
@@ -2888,6 +2979,16 @@ void main(void) {
       const activeObject = this.__highlightedMarkers.size == 1 ? Object.assign({}, this.model.dataMap.get(this.__highlightedMarkers.keys().next().value)) : null;
       this.activeObject = activeObject?.[REQUIRED_KEY] ? null : activeObject;
       this.activeObjectData = this.activeObject ? [this.activeObject] : [];
+      this.labelGlow = false;
+      if (this.activeObject && this.__someSelected) {
+        const index = this.__selectedKeys.indexOf(this.activeObject[TRAIL_KEY] || this.activeObject[KEY]);
+        if (index > -1) {
+          this.__selectedKeys.push(this.__selectedKeys.splice(index, 1)[0]);
+          const data = this.__labelData.splice(index, 1);
+          this.__labelData = [...this.__labelData, ...data];
+          this.labelGlow = true;
+        }
+      }
       this.opacityUpdateTrigger++;
       this.deckBubble.setProps({layers: this.getBubbleLayers(undefined, false)});
     }
@@ -2899,6 +3000,7 @@ void main(void) {
       this.__selectedMarkers = new Map(selectedFilter.markers);
       this.__selectedKeys = [...this.__selectedMarkers.keys()];
 
+      this.labelZScale = d3.scaleLinear([0, this.__selectedKeys.length - 1],[-0.09, -0.05]);
 
       Object.keys(this.labelOffset).forEach(key => {
         if (!this.__selectedMarkers.has(key)) delete this.labelOffset[key];
@@ -3337,6 +3439,19 @@ void main(void) {
           const key = d[TRAIL_KEY] || d[KEY];
           return this.labelDragged[key];
         },
+        getGlowWidth: (d) => {
+          if (!d) return 0;
+          return this.activeObject && ((d[TRAIL_KEY] || d[KEY]) === (this.activeObject[TRAIL_KEY ] || this.activeObject[KEY])) ? 5 : 0;
+        },
+        getGlowColor: (d, { target }) => {
+          if (!d) return;
+          const c = d3.color(this.__getColor(d[TRAIL_KEY] || d[KEY], d.color)).formatRgb().slice(4, -1).split(",").map(v=>+v);
+          target[0] = c[0];
+          target[1] = c[1];
+          target[2] = c[2];
+          target[3] = 200;
+          return target;
+        },
         onLabelDragStart: ({ object:d, x, y, coordinate, sourceLayer, viewport }, evt) => {
           console.log("onLabelDragStart", d, x, y, coordinate, viewport, sourceLayer);
           if (!d) return;
@@ -3653,7 +3768,7 @@ void main(void) {
           getWidth: this.props.getLastTrailLineWidth,
           updateTriggers: {
             getColor: [this.activeObject, this.opacityUpdateTrigger],
-            getTargetPosition: [this.redrawUpdateTrigger]
+            getTargetPosition: [this.redrawUpdateTrigger, this.lastLineRedrawUpdateTrigger]
           },
           transitions: t ? { 
             getTargetPosition: { 
@@ -3863,6 +3978,9 @@ void main(void) {
             //smoothing: 0.1
           } : { sdf: false },
           //fontWeight: '500',
+          glow: this.labelGlow,
+          getGlowColor: this.props.getGlowColor,
+          getGlowWidth: this.props.getGlowWidth,
           getPosition: this.props.getLabelPositionZ,
           getPixelOffset: this.props.getPixelOffset,
           getText: this.props.getLabelText,
@@ -3893,7 +4011,8 @@ void main(void) {
           updateTriggers: {
             getPixelOffset: [this.dragX, this.dragY, this.redrawUpdateTrigger],
             getDragged: [this.dragX0, this.dragY0],
-            getPosition: [this.redrawUpdateTrigger]
+            getPosition: [this.redrawUpdateTrigger],
+            getGlowWidth: [this.activeObject],
           },        
           transitions: t ? {
             getPosition: {
@@ -4248,7 +4367,7 @@ void main(void) {
     },
   };
 
-  BubbleChart.versionInfo = { version: "5.5.2", build: 1765875954936, package: {"homepage":"https://github.com/vizabi/bubblechart#readme","name":"@vizabi/bubblechart","description":"Vizabi bubble chart"}, sharedComponents: sharedComponents.versionInfo};
+  BubbleChart.versionInfo = { version: "5.5.4", build: 1773941847513, package: {"homepage":"https://github.com/vizabi/bubblechart#readme","name":"@vizabi/bubblechart","description":"Vizabi bubble chart"}, sharedComponents: sharedComponents.versionInfo};
 
   exports.Base = BubbleChart;