@primeui/chart-core 0.0.1-alpha.1

package/dist/chunk-WRULPWHD.mjs

@@ -0,0 +1,492 @@
+import { createLinearScale } from './chunk-RQ3CKQOX.mjs';
+
+// src/utils/zoom/calculations.ts
+function resolveLimit(limit, originalValue) {
+  if (limit === "original") return originalValue;
+  return limit;
+}
+function clampZoomWindow(window, limits, originalDomain) {
+  let { min, max } = window;
+  if (min > max) {
+    const tmp = min;
+    min = max;
+    max = tmp;
+  }
+  let effectiveMinRange = limits?.minRange;
+  if (effectiveMinRange == null && originalDomain) {
+    const originalRange = originalDomain[1] - originalDomain[0];
+    effectiveMinRange = originalRange / 1e3;
+  }
+  const range = max - min;
+  if (effectiveMinRange != null && range < effectiveMinRange) {
+    const center = (min + max) / 2;
+    const halfRange = effectiveMinRange / 2;
+    min = center - halfRange;
+    max = center + halfRange;
+  }
+  const hardMin = resolveLimit(limits?.min, originalDomain?.[0]) ?? originalDomain?.[0];
+  const hardMax = resolveLimit(limits?.max, originalDomain?.[1]) ?? originalDomain?.[1];
+  if (hardMin != null && min < hardMin) {
+    const shift = hardMin - min;
+    min = hardMin;
+    max = max + shift;
+  }
+  if (hardMax != null && max > hardMax) {
+    const shift = max - hardMax;
+    max = hardMax;
+    min = min - shift;
+  }
+  if (hardMin != null && min < hardMin) min = hardMin;
+  if (hardMax != null && max > hardMax) max = hardMax;
+  return { min, max };
+}
+function computeWheelZoom(currentWindow, cursorDataValue, zoomFactor, limits, originalDomain) {
+  const { min, max } = currentWindow;
+  const range = max - min;
+  const cursorFraction = range > 0 ? (cursorDataValue - min) / range : 0.5;
+  const newRange = range / zoomFactor;
+  const newMin = cursorDataValue - cursorFraction * newRange;
+  const newMax = cursorDataValue + (1 - cursorFraction) * newRange;
+  return clampZoomWindow({ min: newMin, max: newMax }, limits, originalDomain);
+}
+function classifyWheelGesture(e) {
+  if (e.ctrlKey) return "zoom";
+  if (e.deltaX !== 0) return "pan";
+  return "zoom";
+}
+function computeDragZoomWindow(startPixel, endPixel, invert, limits, originalDomain) {
+  const v1 = invert(startPixel);
+  const v2 = invert(endPixel);
+  const min = Math.min(v1, v2);
+  const max = Math.max(v1, v2);
+  return clampZoomWindow({ min, max }, limits, originalDomain);
+}
+function computePanDelta(currentWindow, deltaPixels, pixelRange, limits, originalDomain) {
+  const { min, max } = currentWindow;
+  const dataRange = max - min;
+  const dataDelta = pixelRange !== 0 ? deltaPixels / pixelRange * dataRange : 0;
+  return clampZoomWindow({ min: min - dataDelta, max: max - dataDelta }, limits, originalDomain);
+}
+function isZoomed(state) {
+  return state.x !== null || state.y !== null;
+}
+function normalizeZoomState(state, originals) {
+  const atFullExtent = (w, domain) => {
+    if (!w || !domain) return false;
+    const range = domain[1] - domain[0];
+    const eps = Math.max(Math.abs(range), 1) * 1e-9;
+    return Math.abs(w.min - domain[0]) <= eps && Math.abs(w.max - domain[1]) <= eps;
+  };
+  const nextX = atFullExtent(state.x, originals.x) ? null : state.x;
+  const nextY = atFullExtent(state.y, originals.y) ? null : state.y;
+  if (nextX === state.x && nextY === state.y) return state;
+  return { x: nextX, y: nextY };
+}
+function isModifierKeyPressed(e, key) {
+  if (!key) return false;
+  switch (key) {
+    case "shift":
+      return e.shiftKey;
+    case "ctrl":
+      return e.ctrlKey;
+    case "alt":
+      return e.altKey;
+    case "meta":
+      return e.metaKey;
+    default:
+      return false;
+  }
+}
+function createInitialZoomState() {
+  return { x: null, y: null };
+}
+function normalizeSubConfig(value, defaults) {
+  if (value === false) return null;
+  if (value === true || value === void 0) return defaults;
+  return { ...defaults, ...value };
+}
+function effectiveLimit(userLimit, dataMinRange) {
+  if (dataMinRange == null) return userLimit;
+  if (userLimit?.minRange != null) return userLimit;
+  return { ...userLimit, minRange: dataMinRange };
+}
+function buildZoomScales(layoutData, zoomState) {
+  const isVertical = layoutData.orientation === "vertical";
+  const timeScale = layoutData.sharedTimeScale;
+  const firstValueScale = layoutData.valueScales.values().next().value;
+  const scatterXScale = layoutData.scatterXScales?.values().next().value;
+  let categoryIndexScale;
+  if (!timeScale && !scatterXScale) {
+    const origDomain = isVertical ? layoutData.originalDomains?.x : layoutData.originalDomains?.y;
+    const catRange = isVertical ? [layoutData.cartesianArea.x, layoutData.cartesianArea.x + layoutData.cartesianArea.width] : [layoutData.cartesianArea.y, layoutData.cartesianArea.y + layoutData.cartesianArea.height];
+    if (origDomain) {
+      const zoomAxis = isVertical ? zoomState?.x : zoomState?.y;
+      const activeDomain = zoomAxis ? [zoomAxis.min, zoomAxis.max] : origDomain;
+      const bandScale = layoutData.sharedCategoryScale;
+      const bandDomain = bandScale?.domain();
+      if (bandScale && bandDomain && bandDomain.length > 0) {
+        const bw = bandScale.bandwidth();
+        const firstPos = (bandScale(bandDomain[0]) ?? catRange[0]) + bw / 2;
+        const lastPos = (bandScale(bandDomain[bandDomain.length - 1]) ?? catRange[1]) + bw / 2;
+        categoryIndexScale = createLinearScale(activeDomain, [firstPos, lastPos]);
+      } else {
+        categoryIndexScale = createLinearScale(activeDomain, catRange);
+      }
+    }
+  }
+  const xScale = isVertical ? timeScale ?? scatterXScale ?? categoryIndexScale ?? void 0 : firstValueScale;
+  const yScale = isVertical ? firstValueScale : timeScale ?? scatterXScale ?? categoryIndexScale ?? void 0;
+  return { x: xScale, y: yScale };
+}
+
+// src/utils/zoom/controller.ts
+function isInsidePlotArea(x, y, plotArea) {
+  return x >= plotArea.x && x <= plotArea.x + plotArea.width && y >= plotArea.y && y <= plotArea.y + plotArea.height;
+}
+function computePinchZoomFactor(previousDistance, currentDistance) {
+  if (previousDistance <= 0) return 1;
+  return currentDistance / previousDistance;
+}
+var ZoomPanController = class {
+  constructor(deps) {
+    this.dragState = null;
+    this.pinchState = null;
+    this._zoomCurrent = createInitialZoomState();
+    this._rafHandle = 0;
+    /** Framework binds this to write settled zoom state to reactive state. */
+    this.onSettle = null;
+    this.deps = deps;
+  }
+  updateDeps(deps) {
+    this.deps = deps;
+  }
+  // ========================================================================
+  // WHEEL
+  // ========================================================================
+  handleWheel(mouseX, mouseY, deltaY, modifiers) {
+    const { mode, wheelCfg, limits } = this.deps.getConfig();
+    if (!wheelCfg?.enabled) return null;
+    if (wheelCfg.modifierKey && !isModifierKeyPressed(modifiers, wheelCfg.modifierKey)) return null;
+    const plotArea = this.deps.getPlotArea();
+    if (!plotArea || !isInsidePlotArea(mouseX, mouseY, plotArea)) return null;
+    const scales = this.deps.getScales();
+    if (!scales) return null;
+    const speed = wheelCfg.speed ?? 0.1;
+    const delta = deltaY > 0 ? 1 - speed : 1 + speed;
+    const originals = this.deps.getOriginalDomains();
+    const newState = { ...this.deps.getZoomState() };
+    if ((mode === "x" || mode === "xy") && scales.x) {
+      const cursorValue = scales.x.invert(mouseX);
+      newState.x = computeWheelZoom(this.deps.getCurrentWindow("x"), cursorValue, delta, effectiveLimit(limits?.x, originals.minRangeX), originals.x);
+    }
+    if ((mode === "y" || mode === "xy") && scales.y) {
+      const cursorValue = scales.y.invert(mouseY);
+      newState.y = computeWheelZoom(this.deps.getCurrentWindow("y"), cursorValue, delta, effectiveLimit(limits?.y, originals.minRangeY), originals.y);
+    }
+    return { newState, settle: false };
+  }
+  /**
+   * Pan via trackpad two-finger scroll. Only acts once the chart is zoomed —
+   * an unzoomed chart has nowhere to pan, so the caller should let the page
+   * scroll instead of consuming the event.
+   */
+  handleWheelPan(deltaX, deltaY, mouseX, mouseY) {
+    const { mode, panCfg, limits } = this.deps.getConfig();
+    if (!panCfg?.enabled) return null;
+    const plotArea = this.deps.getPlotArea();
+    if (!plotArea || !isInsidePlotArea(mouseX, mouseY, plotArea)) return null;
+    if (!isZoomed(this.deps.getZoomState())) return null;
+    const originals = this.deps.getOriginalDomains();
+    const newState = { ...this.deps.getZoomState() };
+    if ((mode === "x" || mode === "xy") && deltaX !== 0) {
+      newState.x = computePanDelta(this.deps.getCurrentWindow("x"), -deltaX, plotArea.width, effectiveLimit(limits?.x, originals.minRangeX), originals.x);
+    }
+    if ((mode === "y" || mode === "xy") && deltaY !== 0) {
+      newState.y = computePanDelta(this.deps.getCurrentWindow("y"), deltaY, plotArea.height, effectiveLimit(limits?.y, originals.minRangeY), originals.y);
+    }
+    return { newState, settle: false };
+  }
+  // ========================================================================
+  // POINTER DOWN
+  // ========================================================================
+  handlePointerDown(x, y, pointerId, button, modifiers, pointerType = "mouse") {
+    const noAction = { action: null, capturePointer: false, setDragging: false };
+    if (button !== 0) return noAction;
+    const plotArea = this.deps.getPlotArea();
+    if (!plotArea || !isInsidePlotArea(x, y, plotArea)) return noAction;
+    const { panCfg, dragCfg, pinchCfg } = this.deps.getConfig();
+    const isTouch = pointerType === "touch";
+    if (isTouch && pinchCfg?.enabled && this.dragState?.active && this.dragState.pointerId !== pointerId) {
+      const firstId = this.dragState.pointerId;
+      const first = { x: this.dragState.lastX, y: this.dragState.lastY };
+      const dx = x - first.x;
+      const dy = y - first.y;
+      this.dragState = null;
+      this.pinchState = {
+        active: true,
+        pointers: /* @__PURE__ */ new Map([
+          [firstId, first],
+          [pointerId, { x, y }]
+        ]),
+        initialDistance: Math.sqrt(dx * dx + dy * dy),
+        initialZoom: { ...this.deps.getZoomState() },
+        centerX: (first.x + x) / 2,
+        centerY: (first.y + y) / 2
+      };
+      return { action: "pinch-update", capturePointer: true, setDragging: false };
+    }
+    if (pinchCfg?.enabled && this.pinchState?.active) {
+      this.pinchState.pointers.set(pointerId, { x, y });
+      if (this.pinchState.pointers.size === 2) {
+        const pts = Array.from(this.pinchState.pointers.values());
+        const dx = pts[1].x - pts[0].x;
+        const dy = pts[1].y - pts[0].y;
+        this.pinchState.initialDistance = Math.sqrt(dx * dx + dy * dy);
+        this.pinchState.centerX = (pts[0].x + pts[1].x) / 2;
+        this.pinchState.centerY = (pts[0].y + pts[1].y) / 2;
+        this.pinchState.initialZoom = { ...this.deps.getZoomState() };
+      }
+      return { action: "pinch-update", capturePointer: true, setDragging: false };
+    }
+    const panModifierOk = isTouch || !panCfg?.modifierKey || isModifierKeyPressed(modifiers, panCfg.modifierKey);
+    const isPanMode = panCfg?.enabled && panModifierOk && isZoomed(this.deps.getZoomState());
+    if (isPanMode) {
+      this.dragState = { active: true, mode: "pan", startX: x, startY: y, lastX: x, lastY: y, pointerId };
+      return { action: "drag-pan", capturePointer: true, setDragging: true };
+    }
+    const isDragZoom = !isTouch && dragCfg?.enabled && (!dragCfg.modifierKey || isModifierKeyPressed(modifiers, dragCfg.modifierKey));
+    if (isDragZoom) {
+      this.dragState = { active: true, mode: "zoom", startX: x, startY: y, lastX: x, lastY: y, pointerId };
+      return { action: "drag-zoom", capturePointer: true, setDragging: true };
+    }
+    if (pinchCfg?.enabled && !this.dragState) {
+      this.pinchState = {
+        active: true,
+        pointers: /* @__PURE__ */ new Map([[pointerId, { x, y }]]),
+        initialDistance: 0,
+        initialZoom: { ...this.deps.getZoomState() },
+        centerX: x,
+        centerY: y
+      };
+      return { action: "pinch-init", capturePointer: true, setDragging: false };
+    }
+    return noAction;
+  }
+  // ========================================================================
+  // POINTER MOVE
+  // ========================================================================
+  handlePointerMove(x, y, pointerId) {
+    if (this.pinchState?.active && this.pinchState.pointers.size === 2) {
+      this.pinchState.pointers.set(pointerId, { x, y });
+      const pts = Array.from(this.pinchState.pointers.values());
+      const dx = pts[1].x - pts[0].x;
+      const dy = pts[1].y - pts[0].y;
+      const currentDistance = Math.sqrt(dx * dx + dy * dy);
+      if (this.pinchState.initialDistance > 0) {
+        const factor = computePinchZoomFactor(this.pinchState.initialDistance, currentDistance);
+        const scales = this.deps.getScales();
+        const originals = this.deps.getOriginalDomains();
+        if (scales) {
+          const { mode, limits } = this.deps.getConfig();
+          const newState = { ...this.deps.getZoomState() };
+          const centerX = (pts[0].x + pts[1].x) / 2;
+          const centerY = (pts[0].y + pts[1].y) / 2;
+          if ((mode === "x" || mode === "xy") && scales.x) {
+            const cursorValue = scales.x.invert(centerX);
+            const baseWindow = this.pinchState.initialZoom.x ?? (originals.x ? { min: originals.x[0], max: originals.x[1] } : { min: 0, max: 1 });
+            newState.x = computeWheelZoom(baseWindow, cursorValue, factor, effectiveLimit(limits?.x, originals.minRangeX), originals.x);
+          }
+          if ((mode === "y" || mode === "xy") && scales.y) {
+            const cursorValue = scales.y.invert(centerY);
+            const baseWindow = this.pinchState.initialZoom.y ?? (originals.y ? { min: originals.y[0], max: originals.y[1] } : { min: 0, max: 1 });
+            newState.y = computeWheelZoom(baseWindow, cursorValue, factor, effectiveLimit(limits?.y, originals.minRangeY), originals.y);
+          }
+          return { zoomResult: { newState, settle: false }, selectionRect: null };
+        }
+      }
+      return { zoomResult: null, selectionRect: null };
+    }
+    const drag = this.dragState;
+    if (!drag?.active || drag.pointerId !== pointerId) return { zoomResult: null, selectionRect: null };
+    const plotArea = this.deps.getPlotArea();
+    if (!plotArea) return { zoomResult: null, selectionRect: null };
+    if (drag.mode === "zoom") {
+      const { mode } = this.deps.getConfig();
+      const sx = Math.max(plotArea.x, Math.min(drag.startX, x));
+      const sy = Math.max(plotArea.y, Math.min(drag.startY, y));
+      const ex = Math.max(plotArea.x, Math.min(Math.max(drag.startX, x), plotArea.x + plotArea.width));
+      const ey = Math.max(plotArea.y, Math.min(Math.max(drag.startY, y), plotArea.y + plotArea.height));
+      const selectionRect = {
+        x: mode === "y" ? plotArea.x : sx,
+        y: mode === "x" ? plotArea.y : sy,
+        width: mode === "y" ? plotArea.width : ex - sx,
+        height: mode === "x" ? plotArea.height : ey - sy
+      };
+      return { zoomResult: null, selectionRect };
+    }
+    if (drag.mode === "pan") {
+      const deltaX = x - drag.lastX;
+      const deltaY = y - drag.lastY;
+      drag.lastX = x;
+      drag.lastY = y;
+      const { mode, limits } = this.deps.getConfig();
+      const originals = this.deps.getOriginalDomains();
+      const newState = { ...this.deps.getZoomState() };
+      if ((mode === "x" || mode === "xy") && deltaX !== 0) {
+        newState.x = computePanDelta(this.deps.getCurrentWindow("x"), deltaX, plotArea.width, effectiveLimit(limits?.x, originals.minRangeX), originals.x);
+      }
+      if ((mode === "y" || mode === "xy") && deltaY !== 0) {
+        newState.y = computePanDelta(this.deps.getCurrentWindow("y"), -deltaY, plotArea.height, effectiveLimit(limits?.y, originals.minRangeY), originals.y);
+      }
+      return { zoomResult: { newState, settle: false }, selectionRect: null };
+    }
+    return { zoomResult: null, selectionRect: null };
+  }
+  // ========================================================================
+  // POINTER UP
+  // ========================================================================
+  handlePointerUp(x, y, pointerId) {
+    const noAction = { zoomResult: null, clearSelection: false, clearDragging: false, clearCursor: false, releasePointerId: pointerId };
+    if (this.pinchState?.active) {
+      this.pinchState.pointers.delete(pointerId);
+      if (this.pinchState.pointers.size < 2) {
+        this.pinchState = null;
+        return { zoomResult: { newState: this.deps.getZoomState(), settle: true }, clearSelection: false, clearDragging: true, clearCursor: true, releasePointerId: pointerId };
+      }
+      return { ...noAction, releasePointerId: pointerId };
+    }
+    const drag = this.dragState;
+    if (!drag?.active || drag.pointerId !== pointerId) return noAction;
+    let zoomResult = null;
+    if (drag.mode === "zoom") {
+      const dx = Math.abs(x - drag.startX);
+      const dy = Math.abs(y - drag.startY);
+      if (dx > 5 || dy > 5) {
+        const scales = this.deps.getScales();
+        const originals = this.deps.getOriginalDomains();
+        if (scales) {
+          const { mode, limits } = this.deps.getConfig();
+          const newState = { ...this.deps.getZoomState() };
+          if ((mode === "x" || mode === "xy") && scales.x) {
+            newState.x = computeDragZoomWindow(drag.startX, x, (px) => scales.x.invert(px), effectiveLimit(limits?.x, originals.minRangeX), originals.x);
+          }
+          if ((mode === "y" || mode === "xy") && scales.y) {
+            newState.y = computeDragZoomWindow(drag.startY, y, (px) => scales.y.invert(px), effectiveLimit(limits?.y, originals.minRangeY), originals.y);
+          }
+          zoomResult = { newState, settle: true };
+        }
+      }
+    } else if (drag.mode === "pan") {
+      zoomResult = { newState: this.deps.getZoomState(), settle: true };
+    }
+    this.dragState = null;
+    return { zoomResult, clearSelection: true, clearDragging: true, clearCursor: true, releasePointerId: pointerId };
+  }
+  // ========================================================================
+  // STATE MACHINE — owned by controller, not by framework hook
+  // ========================================================================
+  applyZoom(newState, settle = false) {
+    const normalized = normalizeZoomState(newState, this.deps.getOriginalDomains());
+    this._zoomCurrent = normalized;
+    if (settle) {
+      if (this._rafHandle) {
+        cancelAnimationFrame(this._rafHandle);
+        this._rafHandle = 0;
+      }
+      this.onSettle?.(normalized);
+    } else {
+      if (this._rafHandle) cancelAnimationFrame(this._rafHandle);
+      this._rafHandle = requestAnimationFrame(() => {
+        this._rafHandle = 0;
+        this.onSettle?.(this._zoomCurrent);
+      });
+    }
+  }
+  resetZoom() {
+    if (this._rafHandle) {
+      cancelAnimationFrame(this._rafHandle);
+      this._rafHandle = 0;
+    }
+    this.applyZoom(createInitialZoomState(), true);
+  }
+  updateZoom(state) {
+    this.applyZoom(state, true);
+  }
+  getZoomState() {
+    return this._zoomCurrent;
+  }
+  getCurrentWindow(axis) {
+    const current = this._zoomCurrent[axis];
+    if (current) return current;
+    const originals = this.deps.getOriginalDomains();
+    const domain = axis === "x" ? originals.x : originals.y;
+    return domain ? { min: domain[0], max: domain[1] } : { min: 0, max: 1 };
+  }
+  destroyZoomState() {
+    if (this._rafHandle) {
+      cancelAnimationFrame(this._rafHandle);
+      this._rafHandle = 0;
+    }
+  }
+  // ========================================================================
+  // ATTACH — wire DOM events; returns detach function
+  // ========================================================================
+  attach(container, callbacks) {
+    const handleWheel = (e) => {
+      const rect = container.getBoundingClientRect();
+      const mouseX = e.clientX - rect.left;
+      const mouseY = e.clientY - rect.top;
+      const result = classifyWheelGesture(e) === "pan" ? this.handleWheelPan(e.deltaX, e.deltaY, mouseX, mouseY) : this.handleWheel(mouseX, mouseY, e.deltaY, { shiftKey: e.shiftKey, ctrlKey: e.ctrlKey, altKey: e.altKey, metaKey: e.metaKey });
+      if (result) {
+        e.preventDefault();
+        this.applyZoom(result.newState, result.settle);
+      }
+    };
+    const handlePointerDown = (e) => {
+      if (e.target.closest?.("button,a,input,select")) return;
+      const rect = container.getBoundingClientRect();
+      const result = this.handlePointerDown(e.clientX - rect.left, e.clientY - rect.top, e.pointerId, e.button, { shiftKey: e.shiftKey, ctrlKey: e.ctrlKey, altKey: e.altKey, metaKey: e.metaKey }, e.pointerType);
+      if (result.capturePointer) container.setPointerCapture(e.pointerId);
+      if (result.setDragging) {
+        callbacks.onDragging(true);
+        e.preventDefault();
+      }
+      if (result.action === "drag-pan") container.style.cursor = "grabbing";
+    };
+    const handlePointerMove = (e) => {
+      const rect = container.getBoundingClientRect();
+      const result = this.handlePointerMove(e.clientX - rect.left, e.clientY - rect.top, e.pointerId);
+      if (result.selectionRect) callbacks.onSelectionRect(result.selectionRect);
+      if (result.zoomResult) this.applyZoom(result.zoomResult.newState, result.zoomResult.settle);
+    };
+    const handlePointerUp = (e) => {
+      const rect = container.getBoundingClientRect();
+      const result = this.handlePointerUp(e.clientX - rect.left, e.clientY - rect.top, e.pointerId);
+      if (result.zoomResult) this.applyZoom(result.zoomResult.newState, result.zoomResult.settle);
+      if (result.clearSelection) callbacks.onSelectionRect(null);
+      if (result.clearDragging) callbacks.onDragging(false);
+      if (result.clearCursor) container.style.cursor = "";
+      try {
+        container.releasePointerCapture(result.releasePointerId);
+      } catch {
+      }
+    };
+    const prevTouchAction = container.style.touchAction;
+    container.style.touchAction = "none";
+    container.addEventListener("wheel", handleWheel, { passive: false });
+    container.addEventListener("pointerdown", handlePointerDown);
+    container.addEventListener("pointermove", handlePointerMove);
+    container.addEventListener("pointerup", handlePointerUp);
+    container.addEventListener("pointercancel", handlePointerUp);
+    return () => {
+      container.style.touchAction = prevTouchAction;
+      container.removeEventListener("wheel", handleWheel);
+      container.removeEventListener("pointerdown", handlePointerDown);
+      container.removeEventListener("pointermove", handlePointerMove);
+      container.removeEventListener("pointerup", handlePointerUp);
+      container.removeEventListener("pointercancel", handlePointerUp);
+    };
+  }
+};
+
+export { ZoomPanController, buildZoomScales, clampZoomWindow, classifyWheelGesture, computeDragZoomWindow, computePanDelta, computeWheelZoom, createInitialZoomState, effectiveLimit, isModifierKeyPressed, isZoomed, normalizeSubConfig, normalizeZoomState };

package/dist/chunk-WS64BZXT.mjs

@@ -0,0 +1 @@
+