Function createInsideZoom

src/interaction/createInsideZoom.ts:68–199

(eventManager: EventManager, zoomState: ZoomState)

 * - shift+left drag OR middle-mouse drag pans left/right (only when inside grid)
 */
export function createInsideZoom(eventManager: EventManager, zoomState: ZoomState): InsideZoom {
  let disposed = false;
  let enabled = false;

  let lastPointer: ChartGPUEventPayload | null = null;
  let isPanning = false;
  let lastPanGridX = 0;

  const clearPan = (): void => {
    isPanning = false;
    lastPanGridX = 0;
  };

  const onMouseMove = (payload: ChartGPUEventPayload): void => {
    lastPointer = payload;
    if (!enabled) return;

    // Pan only for mouse drags, only when inside grid.
    const e = payload.originalEvent;
    const shouldPan = payload.isInGrid && (isShiftLeftDrag(e) || isMiddleButtonDrag(e));

    if (!shouldPan) {
      clearPan();
      return;
    }

    const plotWidthCss = payload.plotWidthCss;
    if (!(plotWidthCss > 0) || !Number.isFinite(plotWidthCss)) {
      clearPan();
      return;
    }

    if (!isPanning) {
      isPanning = true;
      lastPanGridX = payload.gridX;
      return;
    }

    const dxCss = payload.gridX - lastPanGridX;
    lastPanGridX = payload.gridX;
    if (!Number.isFinite(dxCss) || dxCss === 0) return;

    const { start, end } = zoomState.getRange();
    const span = end - start;
    if (!Number.isFinite(span) || span === 0) return;

    // Convert grid-local px to percent points *within the current window*.
    // “Grab to pan” behavior: dragging right should move the window left (show earlier data).
    const deltaPct = -(dxCss / plotWidthCss) * span;
    if (!Number.isFinite(deltaPct) || deltaPct === 0) return;
    zoomState.pan(deltaPct);
  };

  const onMouseLeave = (_payload: ChartGPUEventPayload): void => {
    lastPointer = null;
    clearPan();
  };