@bicharts/chart-host 0.6.41 → 0.6.43

package/dist/{chunk-NMEXSUOR.mjs → chunk-MVM2R7K7.mjs}

@@ -2030,6 +2030,30 @@ function stripJsComments(code) {
 }
 
 // src/selection.ts
+function rowIdxsFromMark(el) {
+  if (!el) return [];
+  const raw = el.getAttribute("data-row-idx");
+  if (!raw) return [];
+  const out = [];
+  for (const tok of raw.split(",")) {
+    const n = parseInt(tok.trim(), 10);
+    if (!isNaN(n) && n >= 0) out.push(n);
+  }
+  return out;
+}
+function nextSelection(current, rowIdxs, mods = {}) {
+  const cur = Array.from(current ?? []);
+  if (mods.ctrl || mods.shift) {
+    const next = new Set(cur);
+    for (const r2 of rowIdxs) {
+      if (next.has(r2)) next.delete(r2);
+      else next.add(r2);
+    }
+    return Array.from(next);
+  }
+  const same = cur.length === rowIdxs.length && rowIdxs.every((r2) => cur.includes(r2));
+  return same ? [] : rowIdxs.slice();
+}
 function isInsideControl(target, container) {
   let el = target;
   if (el && el.nodeType !== 1) el = el.parentElement ?? el.parentNode ?? null;
@@ -2121,17 +2145,6 @@ function createMarkResolver(env) {
     if (m2 && ev) return refineHitCorridor(m2, ev.clientX, ev.clientY, sel);
     return m2;
   };
-  const rowIdxsFromMark = (el) => {
-    if (!el) return [];
-    const raw = el.getAttribute("data-row-idx");
-    if (!raw) return [];
-    const out = [];
-    for (const tok of raw.split(",")) {
-      const n = parseInt(tok.trim(), 10);
-      if (!isNaN(n) && n >= 0) out.push(n);
-    }
-    return out;
-  };
   const penetrateOverlayAt = (x3, y4, sel) => {
     try {
       const stack = doc.elementsFromPoint(x3, y4);
@@ -2186,11 +2199,149 @@ function createMarkResolver(env) {
   };
   return { isInvisibleStrokePath, distToPathCenterline, refineHitCorridor, findMark, rowIdxsFromMark, penetrateOverlayAt, resolveByGeometry };
 }
+function collectD3GlyphCenters(container, baseRect, out) {
+  const Point = container.ownerDocument?.defaultView?.DOMPoint ?? globalThis.DOMPoint;
+  const marks = container.querySelectorAll(`.${MARK_CLASS}.${MARK_SELECTED_CLASS}`);
+  const rects = [];
+  for (let i = 0; i < marks.length; i++) {
+    const r2 = marks[i].getBoundingClientRect();
+    rects.push(r2);
+  }
+  const CONTAINMENT_CAP = 300;
+  const EPS2 = 1;
+  const filterContainers = marks.length <= CONTAINMENT_CAP;
+  const enclosesAnother = (ci) => {
+    const c2 = rects[ci];
+    const cArea = c2.width * c2.height;
+    if (cArea <= 0) return false;
+    for (let mj = 0; mj < rects.length; mj++) {
+      if (mj === ci) continue;
+      const m2 = rects[mj];
+      const mArea = m2.width * m2.height;
+      if (mArea <= 0 || mArea >= cArea) continue;
+      if (m2.left >= c2.left - EPS2 && m2.right <= c2.right + EPS2 && m2.top >= c2.top - EPS2 && m2.bottom <= c2.bottom + EPS2) return true;
+    }
+    return false;
+  };
+  for (let i = 0; i < marks.length; i++) {
+    const el = marks[i];
+    const r2 = rects[i];
+    if (r2.width === 0 && r2.height === 0) continue;
+    if (filterContainers && enclosesAnother(i)) continue;
+    const tag = el.tagName.toLowerCase();
+    let sx;
+    let sy;
+    const cxA = el.getAttribute("data-cx"), cyA = el.getAttribute("data-cy");
+    if (cxA != null && cyA != null && typeof el.getScreenCTM === "function") {
+      const ctm = el.getScreenCTM();
+      const cxN = parseFloat(cxA), cyN = parseFloat(cyA);
+      if (ctm && isFinite(cxN) && isFinite(cyN)) {
+        const p2 = new Point(cxN, cyN).matrixTransform(ctm);
+        sx = p2.x;
+        sy = p2.y;
+      }
+    }
+    if (sx === void 0 && tag === "path" && typeof el.getPointAtLength === "function") {
+      try {
+        const len = el.getTotalLength();
+        const ctm = el.getScreenCTM();
+        if (len > 0 && ctm) {
+          const dAttr = el.getAttribute("d") || "";
+          const isArcSector = /[Aa]/.test(dAttr) && !/[CcSsQqTt]/.test(dAttr);
+          let local;
+          if (isArcSector) {
+            const N2 = 24;
+            let ax = 0, ay = 0;
+            for (let k3 = 0; k3 < N2; k3++) {
+              const sp = el.getPointAtLength(len * k3 / N2);
+              ax += sp.x;
+              ay += sp.y;
+            }
+            const cand = new Point(ax / N2, ay / N2);
+            let inside = true;
+            try {
+              if (typeof el.isPointInFill === "function") {
+                inside = el.isPointInFill(cand);
+              }
+            } catch {
+              inside = true;
+            }
+            if (inside) local = cand;
+          }
+          if (!local) local = el.getPointAtLength(len / 2);
+          const p2 = local.matrixTransform(ctm);
+          sx = p2.x;
+          sy = p2.y;
+        }
+      } catch {
+      }
+    }
+    if (sx === void 0 || sy === void 0) {
+      const isRect = tag === "rect";
+      sx = isRect ? r2.left + r2.width * 0.8 : r2.left + r2.width / 2;
+      sy = isRect ? r2.top + r2.height * 0.2 : r2.top + r2.height / 2;
+    }
+    out.push({ x: sx - baseRect.left, y: sy - baseRect.top });
+  }
+}
+var SELECTION_GLYPH_CLASS = "lch-sel-glyph";
+function clearSelectionGlyphs(overlay) {
+  if (overlay) {
+    while (overlay.firstChild) overlay.removeChild(overlay.firstChild);
+  }
+}
+function paintSelectionGlyphs(overlay, centers, style) {
+  const doc = overlay.ownerDocument;
+  const frag = doc.createDocumentFragment();
+  const count = Math.min(centers.length, style.max ?? 600);
+  for (let i = 0; i < count; i++) {
+    const c2 = centers[i];
+    const g3 = doc.createElement("span");
+    g3.className = SELECTION_GLYPH_CLASS;
+    g3.textContent = style.symbol;
+    g3.style.position = "absolute";
+    g3.style.left = c2.x + "px";
+    g3.style.top = c2.y + "px";
+    g3.style.transform = "translate(-50%, -50%)";
+    g3.style.font = "700 11px/1 system-ui, -apple-system, Segoe UI, sans-serif";
+    g3.style.color = style.color;
+    const halo = style.halo;
+    g3.style.textShadow = `-1px -1px 1px ${halo}, 1px -1px 1px ${halo}, -1px 1px 1px ${halo}, 1px 1px 1px ${halo}, 0 0 2px ${halo}`;
+    g3.style.pointerEvents = "none";
+    frag.appendChild(g3);
+  }
+  overlay.appendChild(frag);
+  return count;
+}
 
 // src/hitTargets.ts
 var SVG_NS = "http://www.w3.org/2000/svg";
 var HIT_ATTR = "data-lch-hit";
 var ELEMENT_CAP2 = 5e3;
+var mapsPresentationAttributes = /* @__PURE__ */ new WeakMap();
+function engineMapsPresentationAttributes(ownerDoc, view) {
+  if (!ownerDoc || typeof ownerDoc !== "object") return false;
+  const known = mapsPresentationAttributes.get(ownerDoc);
+  if (known !== void 0) return known;
+  let maps = false;
+  try {
+    const host = ownerDoc.documentElement;
+    const probe = ownerDoc.createElementNS(SVG_NS, "svg");
+    const shape = ownerDoc.createElementNS(SVG_NS, "rect");
+    shape.setAttribute("fill", "none");
+    probe.appendChild(shape);
+    host.appendChild(probe);
+    try {
+      maps = String(view.getComputedStyle(shape).fill ?? "").trim().toLowerCase() === "none";
+    } finally {
+      host.removeChild(probe);
+    }
+  } catch {
+    maps = false;
+  }
+  mapsPresentationAttributes.set(ownerDoc, maps);
+  return maps;
+}
 function ensureCrossfilterHitTargets(container, doc) {
   const report = { tagged: 0, hitRects: 0, peFlips: 0, peStrokeOnly: 0 };
   try {
@@ -2253,7 +2404,7 @@ function ensureCrossfilterHitTargets(container, doc) {
       } else {
         const cs = computed(el);
         if (cs && cs.pointerEvents === "none") {
-          const fill = String(el.getAttribute?.("fill") ?? cs.fill ?? "").trim().toLowerCase();
+          const fill = String((engineMapsPresentationAttributes(ownerDoc, view) ? cs.fill : el.getAttribute?.("fill") ?? cs.fill) ?? "").trim().toLowerCase();
           const unfilled = fill === "none" || fill === "transparent" || fill === "rgba(0, 0, 0, 0)";
           if (el.style) el.style.pointerEvents = unfilled ? "stroke" : "all";
           report.peFlips++;
@@ -3625,17 +3776,10 @@ function createChartHost(container, config) {
     const rows = parseRowIdxs(el.getAttribute(ROW_IDX_ATTR));
     if (!rows.length) return;
     const tick = el.classList?.contains?.(AXIS_FILTER_CLASS) ? el : null;
-    if (e?.ctrlKey || e?.metaKey || e?.shiftKey) {
-      const next = new Set(current ?? []);
-      for (const r2 of rows) {
-        if (next.has(r2)) next.delete(r2);
-        else next.add(r2);
-      }
-      notify(Array.from(next), "user", tick);
-      return;
-    }
-    const same = !!current && current.length === rows.length && rows.every((r2) => current.includes(r2));
-    notify(same ? [] : rows, "user", same ? null : tick);
+    const multi = !!(e?.ctrlKey || e?.metaKey || e?.shiftKey);
+    const next = nextSelection(current, rows, { ctrl: !!(e?.ctrlKey || e?.metaKey), shift: !!e?.shiftKey });
+    const toggledOff = !multi && next.length === 0;
+    notify(next, "user", toggledOff ? null : tick);
   };
   container.addEventListener(XFILTER_REFRESH_EVENT, onXf);
   container.addEventListener("click", onClick);
@@ -4058,8 +4202,14 @@ export {
   Bn,
   buildRenderPayload,
   stripJsComments,
+  rowIdxsFromMark,
+  nextSelection,
   isInsideControl,
   createMarkResolver,
+  collectD3GlyphCenters,
+  SELECTION_GLYPH_CLASS,
+  clearSelectionGlyphs,
+  paintSelectionGlyphs,
   ensureCrossfilterHitTargets,
   censusMarks,
   isBlankRender,

package/dist/index.mjs

@@ -65,6 +65,7 @@ import {
   SCROLL_SLACK_PX,
   SEASONAL_MARKERS_DEFAULT,
   SELECTION_ACTIVE_CLASS,
+  SELECTION_GLYPH_CLASS,
   VALUE_AXIS_BASELINE_DEFAULT,
   VALUE_AXIS_MIN_FIT,
   VIEW_ONLY_UI_STATE_KEYS,
@@ -86,6 +87,8 @@ import {
   censusValuePlacement,
   chartOwnsTimeline,
   clearGeoCache,
+  clearSelectionGlyphs,
+  collectD3GlyphCenters,
   colourSpreadFlag,
   compileRenderFn,
   compositeOver,
@@ -117,7 +120,9 @@ import {
   loadGeo,
   measureContainerBoxes,
   needsScroll,
+  nextSelection,
   noopViewStateProvider,
+  paintSelectionGlyphs,
   periodTickSuppressesFeedback,
   pillBacksGlyph,
   pinScrolledAxis,
@@ -129,6 +134,7 @@ import {
   requiredD3Plugins,
   resolveAutoColorScale,
   resolveOptions,
+  rowIdxsFromMark,
   scrollFitFor,
   sessionViewStateProvider,
   stripEsmExports,
@@ -140,7 +146,7 @@ import {
   unpinScrolledAxis,
   valuePlacementFlag,
   withoutViewOnlyKeys
-} from "./chunk-NMEXSUOR.mjs";
+} from "./chunk-MVM2R7K7.mjs";
 import "./chunk-A2GMXZP7.mjs";
 import "./chunk-GHODWOAL.mjs";
 
@@ -2629,6 +2635,7 @@ export {
   SCROLL_SLACK_PX,
   SEASONAL_MARKERS_DEFAULT,
   SELECTION_ACTIVE_CLASS,
+  SELECTION_GLYPH_CLASS,
   TRANSPORT_LOST_CHECKING_MESSAGE,
   VALUE_AXIS_BASELINE_DEFAULT,
   VALUE_AXIS_MIN_FIT,
@@ -2662,7 +2669,9 @@ export {
   chartOwnsTimeline,
   chooserFitsViewport,
   clearGeoCache,
+  clearSelectionGlyphs,
   codeReadsDatesInLocalTime,
+  collectD3GlyphCenters,
   colourSpreadFlag,
   compileRenderFn,
   compileTrivialSource,
@@ -2725,12 +2734,14 @@ export {
   needsScroll,
   newQualifyGroupState,
   newQualifyRefusalGroupState,
+  nextSelection,
   noopViewStateProvider,
   normaliseAggregation,
   normaliseProductFeedbackText,
   normalizeFilterTerm,
   orderMostDistinct,
   orderRefusalsForDisplay,
+  paintSelectionGlyphs,
   parsePendingGenerate,
   pendingRecoveryNextDelayMs,
   pendingRecoveryRemainingMs,
@@ -2768,6 +2779,7 @@ export {
   requiredD3Plugins,
   resolveAutoColorScale,
   resolveOptions,
+  rowIdxsFromMark,
   sameMarker,
   scrollFitFor,
   servedCorrelationProves,

package/dist/react.mjs

@@ -7,7 +7,7 @@ import {
   loadGeo,
   syncMemberSelection,
   toSourceRows
-} from "./chunk-NMEXSUOR.mjs";
+} from "./chunk-MVM2R7K7.mjs";
 import "./chunk-A2GMXZP7.mjs";
 import "./chunk-GHODWOAL.mjs";
 

package/dist/types/index.d.ts

@@ -9,7 +9,7 @@ export { buildRenderPayload, type RenderPayload, type GeoPointBinding } from "./
 export { codeReadsDatesInLocalTime, vegaSpecReadsDatesInLocalTime } from "./dateCells";
 export { createChartHost, compileRenderFn, stripEsmExports, requiredD3Plugins, explainRenderFailure, sessionViewStateProvider, noopViewStateProvider, assembleD3, D3_PLUGIN_PACKAGES, type ChartHost, type ChartHostConfig, type RenderFn } from "./host";
 export { createChartGroup, toSourceRows, syncMemberSelection, type ChartGroup, type ChartGroupMember, type ChartGroupSelection, type ChartGroupChange, type ChartGroupMemberOptions, type ChartGroupSourceOptions, type ChartGroupPayload } from "./group";
-export { createMarkResolver, isInsideControl, type MarkResolver, type MarkResolverEnv } from "./selection";
+export { createMarkResolver, isInsideControl, rowIdxsFromMark, nextSelection, collectD3GlyphCenters, clearSelectionGlyphs, paintSelectionGlyphs, SELECTION_GLYPH_CLASS, type MarkResolver, type MarkResolverEnv, type GlyphCenter, type SelectionGlyphStyle, type SelectionModifiers, } from "./selection";
 export { planTrivialChart, compileTrivialSource, type TrivialPlan, type TrivialShapeKind } from "./trivial";
 export { captureSvgSnapshot, svgToDataUrl, svgNaturalSize, rasterizeSvgToPngDataUrl, type SnapshotOptions } from "./snapshot";
 export { shouldReview, buildReviewWire, bareBase64, actionFor, type ReviewGate, type ReviewWire, type ReviewVerdict, type ReviewAction } from "./review";

package/dist/types/selection.d.ts

@@ -1,3 +1,30 @@
+/**
+ * The rows a mark names: its data-row-idx read as a comma list of non-negative whole
+ * numbers. A token that is not one names no row and is skipped; no attribute, no rows.
+ */
+export declare function rowIdxsFromMark(el: Element | null): number[];
+/** The keys held during a click. Cmd counts as Ctrl. */
+export interface SelectionModifiers {
+    ctrl?: boolean;
+    shift?: boolean;
+}
+/**
+ * THE SELECTION A CLICK LEAVES - the one rule every host applies to a click on a mark that names
+ * `rowIdxs`, from the selection it holds (`current`).
+ *
+ * With Ctrl/Cmd or Shift the semantics are TOGGLE-PER-ROW, not union: each clicked row that is
+ * selected is removed and each that is not is added, so Ctrl-clicking a selected mark takes it
+ * off, and a mark spanning several rows (a legend swatch) toggles each of them - a naive union
+ * would leave a mark lit after the reader Ctrl-clicked it off. Toggling the last row off is a
+ * legitimate way to reach empty.
+ *
+ * Without a modifier a click REPLACES the selection, and a click on exactly the current selection
+ * - the same rows, compared with the selection the host holds now, never with a remembered click -
+ * clears it: the other half of the gesture. So a plain click that returns [] is a toggle-off.
+ * Comparing with a remembered click instead went stale whenever the selection changed under it (a
+ * clear from elsewhere, a re-derived selection), and the next click on the mark then did nothing.
+ */
+export declare function nextSelection(current: Iterable<number> | null | undefined, rowIdxs: readonly number[], mods?: SelectionModifiers): number[];
 /**
  * True when a click's target sits inside a reader-operated control the chart drew (CONTROL_CLASS
  * on the target or an ancestor), looking no further out than `container` - a page that wraps the
@@ -20,3 +47,37 @@ export interface MarkResolver {
     resolveByGeometry(x: number, y: number, sel: string): HTMLElement | null;
 }
 export declare function createMarkResolver(env: MarkResolverEnv): MarkResolver;
+/** A glyph's centre, in pixels from the overlay's own top-left corner. */
+export interface GlyphCenter {
+    x: number;
+    y: number;
+}
+/**
+ * Where each SELECTED mark in `container` gets its glyph (every `.d3-mark` that also carries the
+ * selected class), pushed onto `out` in document order, relative to `baseRect` (the overlay's own
+ * client rect). Throws what the platform throws; a host that must not fail its paint catches it.
+ */
+export declare function collectD3GlyphCenters(container: Element, baseRect: {
+    left: number;
+    top: number;
+}, out: GlyphCenter[]): void;
+/** The class every painted selection glyph carries. */
+export declare const SELECTION_GLYPH_CLASS = "lch-sel-glyph";
+/** Removes every glyph (every child) from the overlay. */
+export declare function clearSelectionGlyphs(overlay: Element | null | undefined): void;
+export interface SelectionGlyphStyle {
+    /** The character drawn at each centre. */
+    symbol: string;
+    /** The glyph's colour. */
+    color: string;
+    /** The halo drawn on every side of it, so it reads on a dark and a light mark alike. */
+    halo: string;
+    /** At most this many are drawn. Default 600, which keeps the DOM light on a huge selection. */
+    max?: number;
+}
+/**
+ * Draws one glyph per centre (up to `max`) into `overlay`, positioned from the overlay's own
+ * top-left corner and never hit-tested. Returns how many it drew. It does not clear the overlay
+ * first: a host clears it (clearSelectionGlyphs) before deciding whether to paint at all.
+ */
+export declare function paintSelectionGlyphs(overlay: Element, centers: readonly GlyphCenter[], style: SelectionGlyphStyle): number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bicharts/chart-host",
-  "version": "0.6.41",
+  "version": "0.6.43",
   "description": "Run a BIC-generated D3 chart in any web host: compiles the generated render() function, applies the shared option defaults, resolves mark clicks (through tooltip overlays), owns the selection affordance, and translates row indices between cross-filtered charts. The same contract the BIC Power BI visual implements, minus Power BI. React bindings at @bicharts/chart-host/react.",
   "license": "Apache-2.0",
   "type": "module",