ixmaps-gl 0.2.18 → 0.2.19

package/README.md

@@ -243,7 +243,7 @@ of your own project files gl can render.
 Load the engine from jsDelivr, pinned to a release tag (or `@main` for the latest commit):
 
 ```html
-<script src="https://cdn.jsdelivr.net/gh/gjrichter/ixmaps-gl@v0.2.18/ixmaps-gl.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/gjrichter/ixmaps-gl@v0.2.19/ixmaps-gl.js"></script>
 ```
 
 or from unpkg, the npm package [`ixmaps-gl`](https://www.npmjs.com/package/ixmaps-gl)
@@ -251,13 +251,13 @@ or from unpkg, the npm package [`ixmaps-gl`](https://www.npmjs.com/package/ixmap
 browser script, which defines the global `ixmaps`):
 
 ```html
-<script src="https://unpkg.com/ixmaps-gl@0.2.18/ixmaps-gl.js"></script>
+<script src="https://unpkg.com/ixmaps-gl@0.2.19/ixmaps-gl.js"></script>
 ```
 
 or use a local copy (`<script src="ixmaps-gl.js"></script>`). A minimal page:
 
 ```html
-<script src="https://cdn.jsdelivr.net/gh/gjrichter/ixmaps-gl@v0.2.18/ixmaps-gl.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/gjrichter/ixmaps-gl@v0.2.19/ixmaps-gl.js"></script>
 <div id="map_div" style="position:absolute;inset:0;"></div>
 
 <script>

package/ixmaps-gl.js

@@ -82,7 +82,7 @@
   // ---------------------------------------------------------------
   // this engine's release (= package.json "version", checked by
   // test/unit/version.test.mjs); ixmaps.glVersion, and logged once at start
-  const IXMAPS_GL_VERSION = '0.2.18';
+  const IXMAPS_GL_VERSION = '0.2.19';
 
   const LIB_URLS = {
     // Bumped 3.6.2 -> 5.x (2026-09-21, globe-projection compat fix): native
@@ -7045,83 +7045,6 @@
     return { offset, index, extent };
   }
 
-  // Chart texts covered by charts drawn after them. Flat draws each chart
-  // as one SVG group (glow, symbol, value text, in that order) in the
-  // sorted draw order, so a later chart's symbol and glow paint over the
-  // texts of every chart beneath it; here the texts are separate TextLayers
-  // above every icon. This composites that occlusion on the CPU: for each
-  // text, the transmittance Π(1 − α) of every LATER chart's symbol parts
-  // and glow at a few sample points of the text box, averaged — the
-  // fraction of the text still showing through, its alpha. Partly covered
-  // texts fade instead of being clipped (no per-pixel mask in deck.gl).
-  //   charts: in draw order, { x, y, parts: [{ dx, dy, r, shape, alpha }],
-  //     glowR, glowAlpha } in screen pixels; a part's alpha its opacity,
-  //     glowR 0 for none (glowAlpha scales glowProfileAlpha)
-  //   texts: { order (index into charts), x, y, w, h }
-  // Returns each text's transmittance, 0..1.
-  const OCCLUSION_CELL_PX = 64;
-  // below this a text is as good as hidden: left out of its TextLayer
-  const CHART_TEXT_MIN_TRANSMITTANCE = 0.08;
-  function chartTextTransmittance(charts, texts) {
-    const grid = new Map();
-    charts.forEach((c, k) => {
-      let ext = c.glowR || 0;
-      for (const p of c.parts) ext = Math.max(ext, Math.hypot(p.dx, p.dy) + p.r * Math.SQRT2);
-      const x0 = Math.floor((c.x - ext) / OCCLUSION_CELL_PX), x1 = Math.floor((c.x + ext) / OCCLUSION_CELL_PX);
-      const y0 = Math.floor((c.y - ext) / OCCLUSION_CELL_PX), y1 = Math.floor((c.y + ext) / OCCLUSION_CELL_PX);
-      for (let gx = x0; gx <= x1; gx++) {
-        for (let gy = y0; gy <= y1; gy++) {
-          const key = gx + ',' + gy;
-          let cell = grid.get(key);
-          if (!cell) grid.set(key, cell = []);
-          cell.push(k);
-        }
-      }
-    });
-    const alphaAt = (c, x, y) => {
-      let keep = 1;
-      if (c.glowR) {
-        const d = Math.hypot(x - c.x, y - c.y) / c.glowR;
-        if (d < 1) keep *= 1 - c.glowAlpha * glowProfileAlpha(d);
-      }
-      for (const p of c.parts) {
-        if (insideSymbolShape(p.shape, x - c.x - p.dx, y - c.y - p.dy, p.r)) keep *= 1 - p.alpha;
-      }
-      return keep;
-    };
-    // the box center and four points inside its corners
-    const SAMPLES = [[0, 0], [-0.35, -0.3], [0.35, -0.3], [-0.35, 0.3], [0.35, 0.3]];
-    return texts.map(t => {
-      let sum = 0;
-      for (const [sx, sy] of SAMPLES) {
-        const x = t.x + sx * t.w, y = t.y + sy * t.h;
-        const cell = grid.get(Math.floor(x / OCCLUSION_CELL_PX) + ',' + Math.floor(y / OCCLUSION_CELL_PX));
-        let keep = 1;
-        // cells list charts in draw order: only the later ones cover
-        if (cell) for (let i = cell.length - 1; i >= 0 && cell[i] > t.order && keep > 0; i--) keep *= alphaAt(charts[cell[i]], x, y);
-        sum += keep;
-      }
-      return sum / SAMPLES.length;
-    });
-  }
-  // _getGlowIcon's radial gradient: 0.28 at the center, 0.09 at half the
-  // radius, 0 at the edge (d = distance / radius)
-  function glowProfileAlpha(d) {
-    return d < 0.5 ? 0.28 - 0.19 * d / 0.5 : d < 1 ? 0.09 * (1 - (d - 0.5) / 0.5) : 0;
-  }
-  // inside drawSymbolPath's shape of radius r, (dx, dy) from its center;
-  // the shapes without their own test as the circle
-  function insideSymbolShape(shape, dx, dy, r) {
-    switch (shape) {
-      case 'squarefull': return Math.abs(dx) <= r && Math.abs(dy) <= r;
-      case 'square': return Math.abs(dx) <= r * Math.SQRT1_2 && Math.abs(dy) <= r * Math.SQRT1_2;
-      case 'roundrect': return Math.abs(dx) <= r * 0.8 && Math.abs(dy) <= r * 0.8;
-      case 'diamond': case 'carot': return Math.abs(dx) + Math.abs(dy) <= r;
-      case 'empty': return false;
-      default: return dx * dx + dy * dy <= r * r;
-    }
-  }
-
   // A pixel offset [dx, dy] (y down) from lngLat at MapLibre zoom `zoom`,
   // as lng/lat (Web Mercator, 512 px world tiles) — for shapes too large
   // for an icon, drawn in map coordinates (rebuilt with every refresh).
@@ -11555,8 +11478,8 @@
       // VALUES: bold value label centered on each bubble (see
       // flatValueText/valuesFontSizePx above). Labels are their own
       // layers, added last in the array so they draw on top of every icon
-      // layer; a label under later-drawn charts is faded or dropped by
-      // _occludeChartTexts, as flat's later chart groups cover it. Entries whose
+      // layer (a small bubble's label can still show over a bigger
+      // neighboring bubble's icon — a known, accepted gap). Entries whose
       // computed font size would be sub-pixel are dropped rather than
       // rendered at getSize: 0, matching the real engine's own "too
       // small to bother" gate.
@@ -11565,11 +11488,7 @@
         const textOpts = this._valueTextOpts();
         const pointValueOf = valueTextOf || this._chartValueTextFn();
 
-        // draw order of each chart (see chartTextTransmittance below); an
-        // item maxcharts left out draws no chart, so no text either
-        const orderOf = new Map(combined.map((d, k) => [d, k]));
         const pointLabels = individual.reduce((out, d) => {
-          if (!orderOf.has(d)) return out;
           const radius = vRadius(d.properties.value);
           // flat's VALUES label prints the value (nValuesA), not the size;
           // its font by flat's chart branch (_chartValueTextFn)
@@ -11577,7 +11496,7 @@
           if (fontSize > VALUES_MIN_FONT_PX) {
             const o = alignOf(d);
             out.push({ geometry: d.geometry, text, fontSize, bold, color: resolveTextColor(this.style, contrastTextColor((this.categoryColorsRgb || [])[d.properties.cat])),
-              pixelOffset: baseline ? [o[0], o[1] + baseline - 0.35 * fontSize] : o, order: orderOf.get(d) });
+              pixelOffset: baseline ? [o[0], o[1] + baseline - 0.35 * fontSize] : o });
           }
           return out;
         }, []);
@@ -11593,7 +11512,6 @@
         // would misrepresent every category's own count as one summed
         // number nobody's individual bubble actually shows.
         const groupLabels = groups.reduce((out, d) => {
-          if (!orderOf.has(d)) return out;
           const counts = d.properties.counts;
           const outerRadiusPx = vRadius(d.properties.total);
           const iconSizePx = outerRadiusPx * 2; // matches the cluster IconLayer's own getSize (*2) below
@@ -11608,7 +11526,7 @@
               const o = alignOf(d);
               out.push({ geometry: d.geometry, text: v.text, fontSize: v.fontSize, bold: v.bold,
                 color: resolveTextColor(this.style, contrastTextColor((this.categoryColorsRgb || [])[d.properties.cat])),
-                pixelOffset: v.baseline ? [o[0], o[1] + v.baseline - 0.35 * v.fontSize] : o, order: orderOf.get(d) });
+                pixelOffset: v.baseline ? [o[0], o[1] + v.baseline - 0.35 * v.fontSize] : o });
             }
             return out;
           }
@@ -11623,24 +11541,13 @@
               out.push({
                 geometry: d.geometry, text, fontSize,
                 color: resolveTextColor(this.style, contrastTextColor((this.categoryColorsRgb || [])[p.i])),
-                pixelOffset: [offsets[i].x * fitScale * pxPerCanvasUnit + alignOf(d)[0], offsets[i].y * fitScale * pxPerCanvasUnit + alignOf(d)[1]],
-                order: orderOf.get(d)
+                pixelOffset: [offsets[i].x * fitScale * pxPerCanvasUnit + alignOf(d)[0], offsets[i].y * fitScale * pxPerCanvasUnit + alignOf(d)[1]]
               });
             }
           });
           return out;
         }, []);
 
-        // a text under later charts fades by what still shows through them
-        // (chartTextTransmittance), as flat's per-chart SVG groups paint
-        // each later symbol and glow over it; nearly hidden ones are dropped
-        const visible = this._occludeChartTexts(combined, pointLabels.concat(groupLabels), {
-          liveZoom, globeCenter, alignOf, radiusOf, sizeValueOf, singleSymbol, shapeOf, fillOpacity, vRadius,
-          singleBorderWidthPx
-        });
-        const keepVisible = labels => labels.filter(l => visible.has(l));
-        const shownPointLabels = keepVisible(pointLabels), shownGroupLabels = keepVisible(groupLabels);
-
         const textLayerCommonProps = {
           pickable: false,
           getPosition: d => d.geometry.coordinates,
@@ -11658,10 +11565,10 @@
           getAlignmentBaseline: 'center'
         };
         // flat's SYMBOL branch writes its values in normal weight
-        if (shownPointLabels.length) layers.push(new TextLayer({ id: `ix-points-values-${this.name}`, data: shownPointLabels, getPixelOffset: d => d.pixelOffset, ...textLayerCommonProps,
-          fontWeight: shownPointLabels[0].bold === false ? 'normal' : 'bold' }));
-        if (shownGroupLabels.length) layers.push(new TextLayer({ id: `ix-cluster-values-${this.name}`, data: shownGroupLabels, getPixelOffset: d => d.pixelOffset, ...textLayerCommonProps,
-          fontWeight: shownGroupLabels[0].bold === false ? 'normal' : 'bold' }));
+        if (pointLabels.length) layers.push(new TextLayer({ id: `ix-points-values-${this.name}`, data: pointLabels, getPixelOffset: d => d.pixelOffset, ...textLayerCommonProps,
+          fontWeight: pointLabels[0].bold === false ? 'normal' : 'bold' }));
+        if (groupLabels.length) layers.push(new TextLayer({ id: `ix-cluster-values-${this.name}`, data: groupLabels, getPixelOffset: d => d.pixelOffset, ...textLayerCommonProps,
+          fontWeight: groupLabels[0].bold === false ? 'normal' : 'bold' }));
       }
 
       // LABEL: flat's chart label (maptheme.js 24533-24590) — a small text
@@ -12022,67 +11929,6 @@
     //    the item color (stroke font/7, opacity 0.5).
     // Both moved by the chart position (flatChartAlignOffset). The text is
     // the hover target of TEXTONLY, the box of LABEL.
-    // The charts of _buildChartLayers' bubbles layer (and its GLOW / AURA)
-    // as chartTextTransmittance's occluders, in draw order and screen
-    // pixels, and each text's resulting alpha: the text's color gets it,
-    // the returned Set holds the texts still visible. Screen pixels:
-    // Web Mercator world pixels at the live zoom; under globe a local
-    // equal-area frame around the view center at the scale MapLibre's
-    // globe matches Mercator's there (the limb's foreshortening ignored).
-    _occludeChartTexts(combined, texts, o) {
-      const visible = new Set();
-      if (!texts.length) return visible;
-      const toRad = Math.PI / 180;
-      let screenOf;
-      if (o.globeCenter) {
-        const s = 512 * Math.pow(2, o.liveZoom) / 360 / Math.cos(o.globeCenter.lat * toRad);
-        screenOf = c => [(((c[0] - o.globeCenter.lng) % 360 + 540) % 360 - 180) * Math.cos(c[1] * toRad) * s, -c[1] * s];
-      } else {
-        screenOf = c => { const p = lngLatToWorldPixel(c[0], c[1], o.liveZoom); return [p.x, p.y]; };
-      }
-      const glowOn = this.flags.has('GLOW') && !glowHiddenByScale(this.style, o.liveZoom);
-      const auraOn = !glowOn && this.flags.has('AURA') && !this.flags.has('ZOOM');
-      const symbols = Array.isArray(this.style.symbols) ? this.style.symbols : null;
-      const charts = combined.map(d => {
-        const [x, y] = screenOf(d.geometry.coordinates);
-        const a = o.alignOf(d), r = o.radiusOf(d), iconAlpha = this._iconAlpha(d) / 255;
-        let parts;
-        if (o.singleSymbol(d)) {
-          // the icon's shape is inset by half its border (_buildSingleIcon)
-          const shape = o.shapeOf(d.properties);
-          parts = [{ dx: 0, dy: 0, r: r * (1 - o.singleBorderWidthPx / BUBBLE_ICON_SIZE), shape, alpha: o.fillOpacity * iconAlpha }];
-        } else {
-          // _buildBubbleIcon's packed parts, its baked 0.9 alpha scaled by an
-          // explicit fillopacity like the bubbles layer's getColor
-          const counts = d.properties.counts, iso = this._groupIsolation(d);
-          const { present, radii, offsets, fitScale } = (iso && isolatedBubblePackLayout(counts, BUBBLE_ICON_SIZE, iso)) || computeBubblePackLayout(counts, BUBBLE_ICON_SIZE);
-          const px = 2 * r / BUBBLE_ICON_SIZE * fitScale;
-          const alpha = 0.9 * (this.style.fillopacity != null ? o.fillOpacity : 1) * iconAlpha;
-          parts = present.map((p, i) => ({ dx: offsets[i].x * px, dy: offsets[i].y * px, r: radii[i] * px,
-            shape: symbols ? normalizeSymbolShape(symbols[Math.min(p.i, symbols.length - 1)]) : 'circle', alpha }));
-        }
-        if (auraOn) parts.push({ dx: 0, dy: 0, r: r * 1.3, shape: 'circle', alpha: 0.3 * iconAlpha });
-        return {
-          x: x + a[0], y: y + a[1], parts,
-          glowR: glowOn ? o.vRadius(o.sizeValueOf(d)) * (d.properties.counts ? 9 : 11) / 2 : 0,
-          glowAlpha: iconAlpha
-        };
-      });
-      // the text box: Arial digits are ~0.56 em wide, ~0.7 em high
-      const boxes = texts.map(t => {
-        const [x, y] = screenOf(t.geometry.coordinates);
-        return { order: t.order, x: x + t.pixelOffset[0], y: y + t.pixelOffset[1], w: 0.56 * t.fontSize * String(t.text).length, h: 0.7 * t.fontSize };
-      });
-      const shown = chartTextTransmittance(charts, boxes);
-      texts.forEach((t, i) => {
-        if (shown[i] < CHART_TEXT_MIN_TRANSMITTANCE) return;
-        const c = t.color || [0, 0, 0];
-        if (shown[i] < 1) t.color = [c[0], c[1], c[2], Math.round((c[3] != null ? c[3] : 255) * shown[i])];
-        visible.add(t);
-      });
-      return visible;
-    }
-
     _buildLabelChartLayers(combined, zoom, liveZoom, sizeValueOf) {
       const textOnly = this.flags.has('TEXTONLY');
       const showValues = this.flags.has('VALUES') && !valuesHiddenByScale(this.style, zoom);
@@ -13139,7 +12985,7 @@
   // test-only: lets test/unit/*.test.mjs call pure internals directly (the
   // engine runs in a Node vm there); deliberately NOT on the ixmaps object
   global.__ixmapsGlInternals = {
-    IXMAPS_GL_VERSION, youtubeClickToPlay, symbolsFlagCompat, tooltipTable, legendRowLabels, scaleDenom, cssColorAlpha, aggregatedCategoricalClass, dominantDopacityAlpha, isAggregatedCategoricalChoropleth, computeBubblePackLayout, isolatedBubblePackLayout, chartTextTransmittance, glowProfileAlpha, insideSymbolShape, sequenceLayout, ringsLayout, multiQuadOffsets, pixelOffsetLngLat,
+    IXMAPS_GL_VERSION, youtubeClickToPlay, symbolsFlagCompat, tooltipTable, legendRowLabels, scaleDenom, cssColorAlpha, aggregatedCategoricalClass, dominantDopacityAlpha, isAggregatedCategoricalChoropleth, computeBubblePackLayout, isolatedBubblePackLayout, sequenceLayout, ringsLayout, multiQuadOffsets, pixelOffsetLngLat,
     normalizeTheme, projectThemeToDefinition, withoutProjectCode, groupRecordCount, resolveBasemapStyleUrl, resolveMapTypeColor, LayerBuilder, LayerRuntime, MapBuilder, typeStyleNumbers, styleNum,
     resolveScriptUrl, isTrustedScriptUrl, loadProcessingScript, loadBrokerData, applyBrokerThemePatch, makeBrokerTheme,
     equalIntervalBreaks, quantileBreaks, naturalBreaks, evenStrideSample, jenksBreakValues, partsFromBreakValues, resolvePartsClass,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ixmaps-gl",
-  "version": "0.2.18",
+  "version": "0.2.19",
   "description": "MapLibre GL + deck.gl reimplementation of the ixmaps-flat declarative mapping engine",
   "main": "ixmaps-gl.js",
   "browser": "ixmaps-gl.js",