Method createOverlays

src/worker/ChartGPUWorkerProxy.ts:838–892

* Creates DOM overlays for tooltip, legend, text labels, and data zoom slider. * Called after canvas is appended to container.

()

   * Called after canvas is appended to container.
   */
  private createOverlays(): void {
    if (this.isDisposed) return;
    
    // Always create tooltip (for hover interactions)
    this.tooltip = createTooltip(this.container);
    
    // Always create text overlay (for axis labels)
    this.textOverlay = createTextOverlay(this.container);

    // Dedicated annotation overlay (separate from axis labels)
    // so clearing/updating annotations never affects axis label rendering.
    this.annotationTextOverlay = createTextOverlay(this.container);
    
    // Always create legend (worker will send updates if needed)
    // Default position is 'right' - worker may override via messages
    this.legend = createLegend(this.container, 'right');
    
    // Create data zoom slider if configured
    const hasSliderZoom = this.cachedOptions.dataZoom?.some(z => z?.type === 'slider') ?? false;
    
    if (hasSliderZoom) {
      // Create zoom state that delegates to worker via setZoomRange
      const initialStart = this.cachedZoomRange?.start ?? 0;
      const initialEnd = this.cachedZoomRange?.end ?? 100;
      const constraints = this.computeZoomSpanConstraints(this.cachedOptions);
      this.zoomState = createZoomState(initialStart, initialEnd, constraints);
      
      // Sync zoom state changes to worker
      // CRITICAL: Echo suppression - only send changes to worker if they originated from UI
      // (slider drag, programmatic setZoomRange calls), NOT from worker zoom messages
      this.zoomState.onChange((range) => {
        if (this.isDisposed) return;
        
        // Prevent echo: Don't send zoom changes back to worker if they came FROM the worker
        if (this.isProcessingWorkerZoomUpdate) return;
        
        this.setZoomRange(range.start, range.end);
      });
      
      // Create slider host element with absolute positioning at bottom
      // This matches the non-worker ChartGPU implementation
      this.dataZoomSliderHost = this.createDataZoomSliderHost();
      
      // Create slider inside host with marginTop: 0 (host provides padding)
      const DATA_ZOOM_SLIDER_HEIGHT_CSS_PX = 32;
      this.dataZoomSlider = createDataZoomSlider(this.dataZoomSliderHost, this.zoomState, {
        height: DATA_ZOOM_SLIDER_HEIGHT_CSS_PX,
        marginTop: 0, // host provides vertical spacing
      });
      
      // Apply theme to slider
      const themeConfig = this.resolveThemeConfig();
      this.dataZoomSlider.update(themeConfig);
    }
  }
  
  /**
   * Creates and configures the data zoom slider host element.