Function startDrag

src/components/createDataZoomSlider.ts:153–250

(e: PointerEvent, mode: DragMode)

  };

  const startDrag = (e: PointerEvent, mode: DragMode): void => {
    if (disposed) return;
    if (e.button !== 0) return;

    e.preventDefault();

    // If we somehow start a new drag while another is in-flight, clean up first.
    activeDragCleanup?.();
    activeDragCleanup = null;

    const dragStartX = e.clientX;
    const startRange = zoomState.getRange();

    const target = e.currentTarget instanceof Element ? e.currentTarget : windowEl;
    setPointerCaptureBestEffort(target, e.pointerId);

    if (mode === 'pan-window') {
      windowEl.style.cursor = 'grabbing';
      centerGrip.style.cursor = 'grabbing';
    }

    const onMove = (ev: PointerEvent): void => {
      if (disposed) return;
      if (ev.pointerId !== e.pointerId) return;

      ev.preventDefault();

      const dxPercent = pxToPercent(ev.clientX - dragStartX);
      if (dxPercent === null) return;

      switch (mode) {
        case 'left-handle': {
          // UX: don't allow handle crossing; clamp left <= current end.
          const nextStart = Math.min(startRange.end, startRange.start + dxPercent);
          const anchored = zoomState as unknown as Partial<{
            setRangeAnchored: (start: number, end: number, anchor: 'start' | 'end' | 'center') => void;
          }>;
          if (anchored.setRangeAnchored) {
            // When clamped by minSpan/maxSpan, keep the right edge anchored (prevents jumpiness).
            anchored.setRangeAnchored(nextStart, startRange.end, 'end');
          } else {
            zoomState.setRange(nextStart, startRange.end);
          }
          return;
        }
        case 'right-handle': {
          // UX: don't allow handle crossing; clamp right >= current start.
          const nextEnd = Math.max(startRange.start, startRange.end + dxPercent);
          const anchored = zoomState as unknown as Partial<{
            setRangeAnchored: (start: number, end: number, anchor: 'start' | 'end' | 'center') => void;
          }>;
          if (anchored.setRangeAnchored) {
            // When clamped by minSpan/maxSpan, keep the left edge anchored (prevents jumpiness).
            anchored.setRangeAnchored(startRange.start, nextEnd, 'start');
          } else {
            zoomState.setRange(startRange.start, nextEnd);
          }
          return;