@primeui/chart-core 0.0.1-alpha.1

package/dist/chunk-XUAASRXW.mjs

@@ -0,0 +1,579 @@
+import { scatterHitTest } from './chunk-LKC7MZKK.mjs';
+import { collectScatterMarkerOverlays } from './chunk-X4D7FKUS.mjs';
+import { registerDatasetLayers, triggerCompositorRepaint } from './chunk-Q6PPVIHU.mjs';
+import { resolveScatterLabels } from './chunk-66T4MRC5.mjs';
+import { renderResolvedLabels } from './chunk-QQBXUDM4.mjs';
+import { AnimatedScene, resolveAnimatedProps, SCATTER_ANIMATABLE_PROPS } from './chunk-VN7CKCSE.mjs';
+import { calculateScatterLayout } from './chunk-DTWTCFRG.mjs';
+import { reconcileSvgChildren } from './chunk-KP2TWD4Z.mjs';
+import { parseAnimationConfig } from './chunk-3WEMHXZI.mjs';
+import { raf, cancelRaf } from './chunk-EDAKJLNA.mjs';
+import { buildAccessibilityRenderContext, generateSeriesDescription } from './chunk-OGJ6IIBW.mjs';
+import { collectItems } from './chunk-FFMT6OCO.mjs';
+import { SCATTER_BOOST_AUTO_THRESHOLD, DEFAULT_HOVER_DIM_OPACITY, DEFAULT_HOVER_BRIGHTNESS, SCATTER_SPATIAL_INDEX_THRESHOLD, DEFAULT_FALLBACK_COLOR } from './chunk-NKUYIWAP.mjs';
+import { ScatterDecimator } from './chunk-OWW3K55O.mjs';
+import { buildQuadtree } from './chunk-C36VWQ7A.mjs';
+import { defaultLightTheme } from './chunk-O2X6FF45.mjs';
+import { materializeSvgNode, setAttr, createSvgGroup } from './chunk-SSLTFJ3U.mjs';
+
+// src/series/scatter/controller/index.ts
+function scatterHoverInteraction(base, dsId, hover) {
+  const anyHovered = hover.datasetId !== null;
+  const isThisSeries = hover.datasetId === dsId;
+  return {
+    ...base.interaction ?? {},
+    hoveredIndex: isThisSeries ? hover.index : null,
+    isSeriesDimmed: anyHovered && !isThisSeries
+  };
+}
+function buildScatterSvgChildren(params) {
+  const { paint, renderLayouts, activeRenderProps, visibleLayouts, visibleRenderProps, context, hover, labelConfig, datasetVisibility } = params;
+  const children = [];
+  for (const [dsId, scatterLayout] of renderLayouts) {
+    const props = activeRenderProps.get(dsId);
+    if (!props || props.renderMarker) continue;
+    const propsWithHover = {
+      ...props,
+      interaction: scatterHoverInteraction(props, dsId, hover)
+    };
+    const node = paint.renderSvg(propsWithHover, scatterLayout, context);
+    setAttr(node, "data-dataset", dsId);
+    if (context.accessibility?.enabled && context.accessibility.landmarkVerbosity === "all") {
+      setAttr(node, "role", "region");
+      setAttr(node, "aria-label", generateSeriesDescription(props.name ?? dsId, "scatter", scatterLayout.visiblePoints.length));
+    }
+    children.push(node);
+  }
+  if (labelConfig && !labelConfig.render) {
+    const labelGroup = createSvgGroup();
+    setAttr(labelGroup, "data-layer", "labels");
+    for (const [dsId, scatterLayout] of visibleLayouts) {
+      if (datasetVisibility?.get(dsId) === false) continue;
+      const props = visibleRenderProps.get(dsId);
+      const seriesColor = typeof props?.color === "string" ? props.color : DEFAULT_FALLBACK_COLOR;
+      renderResolvedLabels(resolveScatterLabels(scatterLayout.visiblePoints, seriesColor, labelConfig, props?.name, props?.data), labelConfig, {
+        renderer: "svg",
+        svgGroup: labelGroup,
+        theme: context.theme
+      });
+    }
+    children.push(labelGroup);
+  }
+  return children;
+}
+var SCATTER_DATASET_REGISTRY = {
+  number: ["opacity"],
+  color: []
+};
+var ScatterRendererController = class {
+  constructor(paint) {
+    // Animation lifecycle — local raf clock + fingerprint for phase detection.
+    this._animRafId = null;
+    this._lastFingerprint = "";
+    // Canonical layout caches — VISIBLE entries only (exiting excluded).
+    // Used for hit-test, legend, and marker overlays. Per-design: users can't
+    // hover points that are fading out.
+    this.layoutCache = /* @__PURE__ */ new Map();
+    this.renderPropsCache = /* @__PURE__ */ new Map();
+    // Render-time caches — include visible + exiting entries. Canvas paint
+    // callbacks and SVG render read these so fading points stay on screen.
+    this.renderLayouts = /* @__PURE__ */ new Map();
+    this.activeRenderPropsCache = /* @__PURE__ */ new Map();
+    // Per-dataset property-animation overrides resolved from AnimatedPropertyStore.
+    // Set by `applyPropertyAnimations()` each property-animation tick and merged
+    // into the active render props at read time. Cleared by `destroy()`.
+    this._propertyOverrides = /* @__PURE__ */ new Map();
+    this.scatterDatasets = [];
+    this.decimator = new ScatterDecimator();
+    this._markerOverlays = [];
+    this.lastInput = null;
+    // Single source of truth for the current hover. Written ONLY by applyHover (never
+    // re-seeded from input.hover), read by renderFrame and the compositor paint callback.
+    // Hover is event-driven and always arrives via applyHover, so re-seeding from the
+    // swappable input would let a stale input.hover clobber the live hover. Mirrors
+    // candlestick/heatmap/radar/polar.
+    this.hover = { datasetId: null, index: null };
+    // DOM targets
+    this.svgGroup = null;
+    this.canvasEl = null;
+    this.onFrame = null;
+    this._paint = paint;
+    this._scene = new AnimatedScene({
+      // ENTER: series fades in from transparent.
+      emptyState: (target) => ({ ...target, opacity: 0 }),
+      // EXIT: series fades out to transparent.
+      exitEmptyState: (target) => ({ ...target, opacity: 0 }),
+      registry: SCATTER_DATASET_REGISTRY
+    });
+  }
+  // ================================================================
+  // PUBLIC API
+  // ================================================================
+  update(input) {
+    this.lastInput = input;
+    this.svgGroup = input.svgGroup ?? null;
+    this.canvasEl = input.canvasEl ?? null;
+    const { datasets, datasetVisibility, decimationConfig, zoomState, orientation = "vertical", compositor, features } = input;
+    const sortedDatasets = Array.from(datasets.entries()).sort(([, a], [, b]) => a.order - b.order);
+    const rawDatasets = collectItems(sortedDatasets, datasetVisibility).scatter;
+    if (decimationConfig && rawDatasets.length > 0) {
+      const zoomX = orientation === "vertical" ? zoomState?.x : zoomState?.y;
+      const zoomY = orientation === "vertical" ? zoomState?.y : zoomState?.x;
+      this.scatterDatasets = this.decimator.apply(rawDatasets, decimationConfig, zoomX, zoomY);
+    } else {
+      this.scatterDatasets = rawDatasets;
+    }
+    const hasScales = !!input.scatterXScales && !!input.valueScales && input.valueScales.size > 0;
+    if ((this.scatterDatasets.length === 0 || !hasScales) && this._scene.getElements().length === 0) {
+      this.layoutCache.clear();
+      this.renderPropsCache.clear();
+      this.renderLayouts.clear();
+      this.activeRenderPropsCache.clear();
+      this._markerOverlays = [];
+      this._cancelRaf();
+      this._scene.reset();
+      this._lastFingerprint = "";
+      if (input.renderer === "svg" && this.svgGroup) {
+        while (this.svgGroup.firstChild) this.svgGroup.removeChild(this.svgGroup.firstChild);
+      }
+      return;
+    }
+    if (input.renderer === "svg" && !this.svgGroup) return;
+    const visibleDatasets = this.scatterDatasets.filter((d) => d.visible);
+    const fingerprint = visibleDatasets.map((d) => d.id).sort().join("|");
+    const phase = this._lastFingerprint === "" ? "entrance" : fingerprint !== this._lastFingerprint ? "update" : "static";
+    const animConfig = features.get("animation")?.props;
+    const { enabled: animEnabled, duration, easing } = parseAnimationConfig(animConfig);
+    const shouldAnimate = animEnabled && duration > 0 && phase !== "static";
+    this._updateCachesAndLayout(visibleDatasets, input);
+    if (input.renderer === "canvas" && compositor) {
+      compositor.removeLayersByPrefix?.("scatter:");
+      const liveIds = /* @__PURE__ */ new Set();
+      for (const el of this._scene.getElements()) liveIds.add(el.current.datasetId);
+      for (const sd of visibleDatasets) liveIds.add(sd.id);
+      registerDatasetLayers(
+        compositor,
+        "scatter",
+        liveIds,
+        (dsId) => this._scene.getElement(dsId)?.current.stackOrder ?? datasets.get(dsId)?.order ?? 0,
+        (dsId) => (ctx) => this.paintCanvasLayer(ctx, dsId)
+      );
+    }
+    const sceneTargets = this._buildSceneTargets(visibleDatasets, input);
+    const opts = {
+      numbers: { duration: shouldAnimate ? duration : 0, easing },
+      colors: { duration: shouldAnimate ? duration : 0, easing }
+    };
+    if (phase === "static" && this._animRafId !== null) {
+      this._commit(fingerprint);
+      return;
+    }
+    this._cancelRaf();
+    this._scene.diff(sceneTargets, opts);
+    if (shouldAnimate) {
+      this._renderSceneFrame();
+      const tick = (now) => {
+        this._animRafId = null;
+        const { allIdle } = this._scene.tick(now);
+        this._renderSceneFrame();
+        if (allIdle && this.lastInput?.renderer === "canvas" && this.lastInput.compositor) {
+          const liveIds = new Set(Array.from(this._scene.getElements()).map((el) => el.current.datasetId));
+          this.lastInput.compositor.removeLayersByPrefix?.("scatter:");
+          registerDatasetLayers(
+            this.lastInput.compositor,
+            "scatter",
+            liveIds,
+            (dsId) => this._scene.getElement(dsId)?.current.stackOrder ?? 0,
+            (dsId) => (ctx) => this.paintCanvasLayer(ctx, dsId)
+          );
+        }
+        if (!allIdle) {
+          this._animRafId = raf(tick);
+        }
+      };
+      this._animRafId = raf(tick);
+    } else {
+      this._scene.tick(performance.now());
+      this._renderSceneFrame();
+    }
+    this._commit(fingerprint);
+  }
+  /**
+   * Re-project point positions through the chrome-animated scales each frame so the
+   * dots track the X/Y axis rescale in lockstep (the value-domain model — points stay
+   * glued to their gridlines because both derive from the same interpolating scale).
+   *
+   * Unlike the line controller, the scatter scene loop animates OPACITY only and reuses
+   * cached positions — so the position cache must be refreshed HERE every frame. Mirrors
+   * `LineRendererController.syncWithAnimatedScale`. `categoryScale` is unused (scatter X
+   * is a numeric value axis, not a band); the animated X scales arrive via `valueXScales`.
+   */
+  syncWithAnimatedScale(_categoryScale, valueScales, valueXScales) {
+    if (!this.lastInput || this.renderLayouts.size === 0) return;
+    if (this.allBoostActive()) return;
+    if (valueScales) this.lastInput.valueScales = valueScales;
+    if (valueXScales) this.lastInput.scatterXScales = valueXScales;
+    const visibleDatasets = this.scatterDatasets.filter((d) => d.visible);
+    this._updateCachesAndLayout(visibleDatasets, this.lastInput);
+    if (this._animRafId !== null) return;
+    if (this.lastInput.renderer === "svg") {
+      this._renderSceneFrame();
+    } else {
+      this._rebuildRenderLayouts();
+    }
+  }
+  applyHover(hover) {
+    this.hover = hover;
+    if (this.renderLayouts.size === 0 || !this.lastInput) return;
+    if (this.allBoostActive()) {
+      return;
+    }
+    if (this._animRafId !== null) {
+      return;
+    }
+    const input = this.lastInput;
+    if (input.renderer === "svg" && this.svgGroup) {
+      const context = {
+        chartId: input.chartId,
+        width: input.width,
+        height: input.height,
+        renderer: input.renderer,
+        chartArea: input.chartArea,
+        theme: input.theme,
+        accessibility: buildAccessibilityRenderContext(input.features)
+      };
+      const children = buildScatterSvgChildren({
+        paint: this._paint,
+        renderLayouts: this.renderLayouts,
+        activeRenderProps: this.activeRenderPropsCache,
+        visibleLayouts: this.layoutCache,
+        visibleRenderProps: this.renderPropsCache,
+        context,
+        hover,
+        labelConfig: input.labelConfig,
+        datasetVisibility: input.datasetVisibility
+      });
+      reconcileSvgChildren(this.svgGroup, children);
+      return;
+    }
+    for (const sd of this.scatterDatasets) {
+      const baseProps = this.renderPropsCache.get(sd.id);
+      if (!baseProps) continue;
+      const updated = this.buildRenderProps(sd, input);
+      this.renderPropsCache.set(sd.id, updated);
+      const liveOpacity = this._scene.getElement(sd.id)?.current.opacity ?? this.activeRenderPropsCache.get(sd.id)?.animationOpacity ?? 1;
+      const overrides = this._propertyOverrides.get(sd.id);
+      const merged = overrides ? { ...updated, ...overrides, animationOpacity: liveOpacity } : { ...updated, animationOpacity: liveOpacity };
+      this.activeRenderPropsCache.set(sd.id, merged);
+    }
+    triggerCompositorRepaint(input.renderer, this.canvasEl, input.compositor);
+  }
+  /** True when every visible scatter series is in boost mode (explicit or auto above 50k). */
+  get boostActive() {
+    return this.allBoostActive();
+  }
+  allBoostActive() {
+    if (this.renderLayouts.size === 0) return false;
+    for (const [datasetId, layout] of this.renderLayouts) {
+      const props = this.renderPropsCache.get(datasetId) ?? this.activeRenderPropsCache.get(datasetId);
+      const boost = props?.boost;
+      if (boost === true) continue;
+      if (boost === false) return false;
+      if (layout.visiblePoints.length < SCATTER_BOOST_AUTO_THRESHOLD) return false;
+    }
+    return true;
+  }
+  hitTest(x, y) {
+    return scatterHitTest(x, y, { layouts: this.layoutCache, renderPropsCache: this.renderPropsCache, theme: this.lastInput?.theme ?? defaultLightTheme });
+  }
+  getSvgOutput() {
+    return null;
+  }
+  get hasData() {
+    return this.scatterDatasets.length > 0;
+  }
+  get layouts() {
+    return this.layoutCache;
+  }
+  get markerOverlays() {
+    return this._markerOverlays;
+  }
+  destroy() {
+    this._cancelRaf();
+    this._scene.reset();
+    this._lastFingerprint = "";
+    this._propertyOverrides.clear();
+    this.lastInput?.compositor?.removeLayersByPrefix("scatter:");
+  }
+  /**
+   * Apply animated property values without triggering a full layout cycle.
+   * Called from the property-animation framework wrapper each animation tick.
+   *
+   * Per-dataset: writes overrides into `_propertyOverrides` (or deletes the
+   * entry when the store has no live values for it), then patches downstream
+   * caches and triggers a repaint.
+   *
+   * SVG: scatter renders points imperatively each frame from
+   * `activeRenderPropsCache`, so a `renderFrameCycle()` call replays the merged
+   * props onto the DOM. Canvas: refreshes the cache then triggers compositor
+   * repaint so the layer paint callback reads the merged props.
+   */
+  applyPropertyAnimations(store) {
+    const input = this.lastInput;
+    if (!input) return;
+    let appliedAny = false;
+    for (const [dsId, baseProps] of this.activeRenderPropsCache) {
+      const overrides = resolveAnimatedProps(store, "scatter", dsId, SCATTER_ANIMATABLE_PROPS);
+      if (Object.keys(overrides).length === 0) {
+        if (this._propertyOverrides.delete(dsId)) appliedAny = true;
+        continue;
+      }
+      appliedAny = true;
+      this._propertyOverrides.set(dsId, overrides);
+      this.activeRenderPropsCache.set(dsId, { ...baseProps, ...overrides });
+    }
+    if (!appliedAny) return;
+    if (triggerCompositorRepaint(input.renderer, this.canvasEl, input.compositor)) return;
+    if (input.renderer === "svg") {
+      this.renderFrame();
+    }
+  }
+  /**
+   * Full re-render of the current scene state.
+   *
+   * Used by the property-animation framework wrapper: when a property
+   * animation completes and its override is released from the store,
+   * `_renderSceneFrame()` rebuilds `activeRenderPropsCache` from the now-empty
+   * overrides map, then `renderFrame()` projects the cleaned props to DOM /
+   * canvas so SVG attributes snap back to base values.
+   */
+  renderFrameCycle() {
+    this._renderSceneFrame();
+  }
+  // ================================================================
+  // PRIVATE HELPERS
+  // ================================================================
+  /**
+   * Build per-dataset scene targets from visible scatter datasets.
+   * Element id format: datasetId. One element per series (opacity-only v1).
+   */
+  _buildSceneTargets(visibleDatasets, input) {
+    const targets = /* @__PURE__ */ new Map();
+    for (const sd of visibleDatasets) {
+      const stackOrder = input.datasets.get(sd.id)?.order ?? 0;
+      const axisId = sd.props.yAxisId ?? input.firstValueAxisId;
+      targets.set(sd.id, {
+        opacity: 1,
+        stackOrder,
+        axisId: axisId ?? "",
+        datasetId: sd.id
+      });
+    }
+    return targets;
+  }
+  /**
+   * Walk the scene and rebuild per-dataset render state (renderLayouts +
+   * activeRenderPropsCache) from element opacities — WITHOUT painting. Split out so
+   * `syncWithAnimatedScale` can refresh the layouts during an in-flight compositor
+   * repaint (canvas) without triggering a nested repaint (which would recurse).
+   *
+   * Mirrors Heatmap's scene-derived render path but at dataset granularity.
+   */
+  _rebuildRenderLayouts() {
+    const elements = Array.from(this._scene.getElements()).sort((a, b) => (a.current.stackOrder ?? 0) - (b.current.stackOrder ?? 0));
+    const newRenderLayouts = /* @__PURE__ */ new Map();
+    const newActiveProps = /* @__PURE__ */ new Map();
+    for (const el of elements) {
+      const dsId = el.current.datasetId;
+      const layout = this.layoutCache.get(dsId) ?? this.renderLayouts.get(dsId);
+      if (!layout) continue;
+      const baseProps = this.renderPropsCache.get(dsId) ?? this.activeRenderPropsCache.get(dsId);
+      if (!baseProps) continue;
+      const overrides = this._propertyOverrides.get(dsId);
+      const renderProps = overrides ? { ...baseProps, ...overrides, animationOpacity: el.current.opacity } : {
+        ...baseProps,
+        animationOpacity: el.current.opacity
+      };
+      newRenderLayouts.set(dsId, layout);
+      newActiveProps.set(dsId, renderProps);
+    }
+    this.renderLayouts = newRenderLayouts;
+    this.activeRenderPropsCache = newActiveProps;
+  }
+  /** Rebuild render state, then paint (canvas: triggers a compositor repaint). */
+  _renderSceneFrame() {
+    this._rebuildRenderLayouts();
+    this.renderFrame();
+  }
+  /**
+   * Update visible-only caches (layoutCache, renderPropsCache) and marker
+   * overlays from the current set of visible scatter datasets.
+   */
+  _updateCachesAndLayout(visibleDatasets, input) {
+    const newLayoutCache = /* @__PURE__ */ new Map();
+    const newRenderPropsCache = /* @__PURE__ */ new Map();
+    const sortedVisible = [...visibleDatasets].sort((a, b) => (input.datasets.get(a.id)?.order ?? 0) - (input.datasets.get(b.id)?.order ?? 0));
+    let dsIdx = 0;
+    for (const sd of sortedVisible) {
+      const props = sd.props;
+      const targetXAxisId = props.xAxisId ?? input.firstCategoryAxisId;
+      const targetYAxisId = props.yAxisId ?? input.firstValueAxisId;
+      const xScale = input.scatterXScales?.get(targetXAxisId);
+      const sharedValueScale = input.valueScales?.values().next().value;
+      const yScale = input.valueScales?.get(targetYAxisId) ?? sharedValueScale;
+      if (!xScale || !yScale) continue;
+      const baseLayout = calculateScatterLayout(props, input.chartArea, {
+        xScale,
+        yScale,
+        stackBases: input.scatterStackBasesMap?.get(sd.id)
+      });
+      const layout = { ...baseLayout, datasetIndex: dsIdx++ };
+      newLayoutCache.set(sd.id, layout);
+      newRenderPropsCache.set(sd.id, this.buildRenderProps(sd, input));
+    }
+    this.layoutCache = newLayoutCache;
+    this.renderPropsCache = newRenderPropsCache;
+    this._markerOverlays = collectScatterMarkerOverlays(newLayoutCache, newRenderPropsCache);
+  }
+  /** Cancel any in-flight raf. */
+  _cancelRaf() {
+    if (this._animRafId !== null) {
+      cancelRaf(this._animRafId);
+      this._animRafId = null;
+    }
+  }
+  _commit(fingerprint) {
+    this._lastFingerprint = fingerprint;
+  }
+  buildRenderProps(sd, input) {
+    const anyHovered = this.hover.datasetId !== null;
+    const isThisSeries = this.hover.datasetId === sd.id;
+    const hoverConfig = input.hoverConfig;
+    return {
+      ...sd.props,
+      interaction: {
+        hoveredIndex: isThisSeries ? this.hover.index : null,
+        isSeriesDimmed: anyHovered && !isThisSeries
+      },
+      effects: {
+        hoverBrightness: hoverConfig?.brightness ?? DEFAULT_HOVER_BRIGHTNESS,
+        dimOpacity: hoverConfig?.dimOpacity ?? DEFAULT_HOVER_DIM_OPACITY,
+        hoverRadiusMultiplier: hoverConfig?.radiusMultiplier,
+        // Per-point hover accessors stay on props.pointHoverBackgroundColor / pointHoverBorderColor;
+        // the renderer resolves them per-point and falls back to effects.* (global <Chart.Hover>).
+        hoverBackgroundColor: sd.props.hoverColor ?? hoverConfig?.backgroundColor,
+        hoverBorderColor: sd.props.hoverBorderColor ?? hoverConfig?.borderColor,
+        hoverBorderStrokeWidth: hoverConfig?.borderStrokeWidth,
+        hoverPointRadius: sd.props.hoverPointRadius
+      }
+    };
+  }
+  /**
+   * Paint a frame using already-populated render-time caches.
+   * Cache population is the responsibility of `_updateCachesAndLayout`
+   * (visible-only caches) and `_renderSceneFrame` (animation-time render caches).
+   */
+  renderFrame() {
+    if (!this.lastInput) return;
+    const input = this.lastInput;
+    const renderLayouts = this.renderLayouts;
+    const activeRenderProps = this.activeRenderPropsCache;
+    const visibleLayouts = this.layoutCache;
+    const visibleRenderProps = this.renderPropsCache;
+    for (const [, layout] of visibleLayouts) {
+      if (layout.visiblePoints.length > SCATTER_SPATIAL_INDEX_THRESHOLD && !layout.spatialIndex) {
+        const area = layout.chartArea;
+        const pts = layout.visiblePoints;
+        const quadPoints = new Array(pts.length);
+        const map = /* @__PURE__ */ new Map();
+        for (let i = 0; i < pts.length; i++) {
+          const pt = pts[i];
+          quadPoints[i] = { x: pt.px, y: pt.py, idx: pt.dataIndex, r: pt.radius };
+          map.set(pt.dataIndex, pt);
+        }
+        layout.spatialIndex = buildQuadtree(quadPoints, { x0: area.x, y0: area.y, x1: area.x + area.width, y1: area.y + area.height });
+        layout.pointByDataIndex = map;
+      }
+    }
+    const context = {
+      chartId: input.chartId,
+      width: input.width,
+      height: input.height,
+      renderer: input.renderer,
+      chartArea: input.chartArea,
+      theme: input.theme,
+      accessibility: buildAccessibilityRenderContext(input.features)
+    };
+    if (triggerCompositorRepaint(input.renderer, this.canvasEl, input.compositor)) {
+      this.onFrame?.();
+      return;
+    }
+    if (input.renderer === "svg" && this.svgGroup) {
+      const group = this.svgGroup;
+      const children = buildScatterSvgChildren({
+        paint: this._paint,
+        renderLayouts,
+        activeRenderProps,
+        visibleLayouts,
+        visibleRenderProps,
+        context,
+        hover: this.hover,
+        labelConfig: input.labelConfig,
+        datasetVisibility: input.datasetVisibility
+      });
+      group.replaceChildren(...children.map(materializeSvgNode));
+    } else if (input.renderer === "canvas") {
+      const ctx = this.canvasEl?.getContext("2d");
+      if (ctx) {
+        for (const [, scatterLayout] of renderLayouts) {
+          const props = activeRenderProps.get(scatterLayout.datasetId);
+          if (!props) continue;
+          this._paint.renderCanvas(props, scatterLayout, ctx, context);
+        }
+        if (input.labelConfig && !input.labelConfig.render) {
+          for (const [dsId, scatterLayout] of visibleLayouts) {
+            if (input.datasetVisibility?.get(dsId) === false) continue;
+            const props = visibleRenderProps.get(dsId);
+            const seriesColor = typeof props?.color === "string" ? props.color : DEFAULT_FALLBACK_COLOR;
+            renderResolvedLabels(resolveScatterLabels(scatterLayout.visiblePoints, seriesColor, input.labelConfig, props?.name, props?.data), input.labelConfig, {
+              renderer: "canvas",
+              ctx,
+              theme: input.theme
+            });
+          }
+        }
+      }
+    }
+    this.onFrame?.();
+  }
+  /**
+   * Canvas compositor layer paint callback. Reads the current `renderLayouts`
+   * + `activeRenderPropsCache` so every repaint (line-triggered, chrome-triggered,
+   * or scatter-triggered) draws the current animated opacity without needing
+   * pre-mutated state.
+   */
+  paintCanvasLayer(ctx, dsId) {
+    const layout = this.renderLayouts.get(dsId);
+    const props = this.activeRenderPropsCache.get(dsId);
+    if (!layout || !props || props.renderMarker || !this.lastInput) return;
+    const context = {
+      chartId: this.lastInput.chartId,
+      width: this.lastInput.width,
+      height: this.lastInput.height,
+      renderer: "canvas",
+      chartArea: this.lastInput.chartArea,
+      theme: this.lastInput.theme
+    };
+    this._paint.renderCanvas(props, layout, ctx, context);
+    if (this.lastInput?.labelConfig && !this.lastInput.labelConfig.render && this.lastInput.datasetVisibility?.get(dsId) !== false) {
+      const seriesColor = typeof props.color === "string" ? props.color : DEFAULT_FALLBACK_COLOR;
+      renderResolvedLabels(resolveScatterLabels(layout.visiblePoints, seriesColor, this.lastInput.labelConfig, props.name, props.data), this.lastInput.labelConfig, {
+        renderer: "canvas",
+        ctx,
+        theme: this.lastInput.theme
+      });
+    }
+  }
+};
+
+export { ScatterRendererController };