hyperprop-charting-library 0.1.42 → 0.1.44

package/dist/hyperprop-charting-library.cjs

@@ -2536,8 +2536,75 @@ function createChart(element, options = {}) {
   let lastPointerX = 0;
   let lastPointerY = 0;
   let activePointerId = null;
+  const touchPointers = /* @__PURE__ */ new Map();
+  let pinchZoomState = null;
+  const getTouchPair = () => {
+    const points = Array.from(touchPointers.values());
+    const first = points[0];
+    const second = points[1];
+    return first && second ? [first, second] : null;
+  };
+  const getPointerDistance = (first, second) => {
+    return Math.hypot(second.x - first.x, second.y - first.y);
+  };
+  const getMidpoint = (first, second) => {
+    return {
+      x: (first.x + second.x) / 2,
+      y: (first.y + second.y) / 2
+    };
+  };
+  const beginPinchZoom = (first, second) => {
+    if (!drawState || data.length === 0) {
+      return;
+    }
+    const midpoint = getMidpoint(first, second);
+    const anchorRatio = clamp((midpoint.x - drawState.chartLeft) / drawState.chartWidth, 0, 1);
+    pinchZoomState = {
+      startDistance: Math.max(1, getPointerDistance(first, second)),
+      startSpan: xSpan,
+      anchorIndex: drawState.xStart + anchorRatio * xSpan
+    };
+    isDragging = false;
+    dragMode = null;
+    activePointerId = null;
+    pointerDownInfo = null;
+    orderDragState = null;
+    actionDragState = null;
+    canvas.style.cursor = "default";
+    setCrosshairPoint(null);
+  };
+  const applyPinchZoom = (first, second) => {
+    if (!drawState || !pinchZoomState || data.length === 0) {
+      return;
+    }
+    const distance = getPointerDistance(first, second);
+    if (distance <= 0) {
+      return;
+    }
+    const minSpan = minVisibleBars;
+    const maxSpan = Math.min(maxVisibleBars, Math.max(minSpan, data.length + maxPanBars * 2));
+    const nextSpan = clamp(pinchZoomState.startSpan * (pinchZoomState.startDistance / distance), minSpan, maxSpan);
+    const midpoint = getMidpoint(first, second);
+    const anchorRatio = clamp((midpoint.x - drawState.chartLeft) / drawState.chartWidth, 0, 1);
+    const nextStart = pinchZoomState.anchorIndex - anchorRatio * nextSpan;
+    xSpan = nextSpan;
+    xCenter = nextStart + nextSpan / 2;
+    clampXViewport();
+    updateFollowLatest(false);
+    emitViewportChange();
+    draw();
+  };
   const onPointerDown = (event) => {
     const point = getCanvasPoint(event);
+    if (event.pointerType === "touch") {
+      touchPointers.set(event.pointerId, point);
+      canvas.setPointerCapture(event.pointerId);
+      const touchPair = getTouchPair();
+      if (touchPair) {
+        beginPinchZoom(touchPair[0], touchPair[1]);
+        return;
+      }
+    }
     const crosshairButtonRegion = getCrosshairPriceActionRegion(point.x, point.y);
     if (crosshairButtonRegion) {
       crosshairPriceActionHandler?.({
@@ -2599,6 +2666,20 @@ function createChart(element, options = {}) {
   };
   const onPointerMove = (event) => {
     const point = getCanvasPoint(event);
+    if (event.pointerType === "touch" && touchPointers.has(event.pointerId)) {
+      touchPointers.set(event.pointerId, point);
+      const touchPair = getTouchPair();
+      if (touchPair) {
+        if (!pinchZoomState) {
+          beginPinchZoom(touchPair[0], touchPair[1]);
+        }
+        applyPinchZoom(touchPair[0], touchPair[1]);
+        return;
+      }
+      if (pinchZoomState) {
+        return;
+      }
+    }
     if (pointerDownInfo && pointerDownInfo.pointerId === event.pointerId && !pointerDownInfo.moved) {
       const dx = point.x - pointerDownInfo.x;
       const dy = point.y - pointerDownInfo.y;
@@ -2703,7 +2784,7 @@ function createChart(element, options = {}) {
       setCrosshairPoint(null);
     } else if (dragMode === "x-axis") {
       canvas.style.cursor = "ew-resize";
-      zoomXToLatest(Math.exp(-deltaX * 0.01));
+      zoomXToLatest(Math.exp(deltaX * 6e-3));
       setCrosshairPoint(null);
     } else if (dragMode === "y-axis") {
       canvas.style.cursor = "ns-resize";
@@ -2715,6 +2796,22 @@ function createChart(element, options = {}) {
     lastPointerY = point.y;
   };
   const endPointerDrag = (event) => {
+    if (event?.pointerType === "touch") {
+      touchPointers.delete(event.pointerId);
+      if (pinchZoomState) {
+        pinchZoomState = null;
+        isDragging = false;
+        dragMode = null;
+        activePointerId = null;
+        pointerDownInfo = null;
+        setCrosshairPoint(null);
+        canvas.style.cursor = "default";
+        return;
+      }
+    } else if (!event) {
+      touchPointers.clear();
+      pinchZoomState = null;
+    }
     if (event && activePointerId !== null && event.pointerId !== activePointerId) {
       return;
     }

package/dist/hyperprop-charting-library.js

@@ -2512,8 +2512,75 @@ function createChart(element, options = {}) {
   let lastPointerX = 0;
   let lastPointerY = 0;
   let activePointerId = null;
+  const touchPointers = /* @__PURE__ */ new Map();
+  let pinchZoomState = null;
+  const getTouchPair = () => {
+    const points = Array.from(touchPointers.values());
+    const first = points[0];
+    const second = points[1];
+    return first && second ? [first, second] : null;
+  };
+  const getPointerDistance = (first, second) => {
+    return Math.hypot(second.x - first.x, second.y - first.y);
+  };
+  const getMidpoint = (first, second) => {
+    return {
+      x: (first.x + second.x) / 2,
+      y: (first.y + second.y) / 2
+    };
+  };
+  const beginPinchZoom = (first, second) => {
+    if (!drawState || data.length === 0) {
+      return;
+    }
+    const midpoint = getMidpoint(first, second);
+    const anchorRatio = clamp((midpoint.x - drawState.chartLeft) / drawState.chartWidth, 0, 1);
+    pinchZoomState = {
+      startDistance: Math.max(1, getPointerDistance(first, second)),
+      startSpan: xSpan,
+      anchorIndex: drawState.xStart + anchorRatio * xSpan
+    };
+    isDragging = false;
+    dragMode = null;
+    activePointerId = null;
+    pointerDownInfo = null;
+    orderDragState = null;
+    actionDragState = null;
+    canvas.style.cursor = "default";
+    setCrosshairPoint(null);
+  };
+  const applyPinchZoom = (first, second) => {
+    if (!drawState || !pinchZoomState || data.length === 0) {
+      return;
+    }
+    const distance = getPointerDistance(first, second);
+    if (distance <= 0) {
+      return;
+    }
+    const minSpan = minVisibleBars;
+    const maxSpan = Math.min(maxVisibleBars, Math.max(minSpan, data.length + maxPanBars * 2));
+    const nextSpan = clamp(pinchZoomState.startSpan * (pinchZoomState.startDistance / distance), minSpan, maxSpan);
+    const midpoint = getMidpoint(first, second);
+    const anchorRatio = clamp((midpoint.x - drawState.chartLeft) / drawState.chartWidth, 0, 1);
+    const nextStart = pinchZoomState.anchorIndex - anchorRatio * nextSpan;
+    xSpan = nextSpan;
+    xCenter = nextStart + nextSpan / 2;
+    clampXViewport();
+    updateFollowLatest(false);
+    emitViewportChange();
+    draw();
+  };
   const onPointerDown = (event) => {
     const point = getCanvasPoint(event);
+    if (event.pointerType === "touch") {
+      touchPointers.set(event.pointerId, point);
+      canvas.setPointerCapture(event.pointerId);
+      const touchPair = getTouchPair();
+      if (touchPair) {
+        beginPinchZoom(touchPair[0], touchPair[1]);
+        return;
+      }
+    }
     const crosshairButtonRegion = getCrosshairPriceActionRegion(point.x, point.y);
     if (crosshairButtonRegion) {
       crosshairPriceActionHandler?.({
@@ -2575,6 +2642,20 @@ function createChart(element, options = {}) {
   };
   const onPointerMove = (event) => {
     const point = getCanvasPoint(event);
+    if (event.pointerType === "touch" && touchPointers.has(event.pointerId)) {
+      touchPointers.set(event.pointerId, point);
+      const touchPair = getTouchPair();
+      if (touchPair) {
+        if (!pinchZoomState) {
+          beginPinchZoom(touchPair[0], touchPair[1]);
+        }
+        applyPinchZoom(touchPair[0], touchPair[1]);
+        return;
+      }
+      if (pinchZoomState) {
+        return;
+      }
+    }
     if (pointerDownInfo && pointerDownInfo.pointerId === event.pointerId && !pointerDownInfo.moved) {
       const dx = point.x - pointerDownInfo.x;
       const dy = point.y - pointerDownInfo.y;
@@ -2679,7 +2760,7 @@ function createChart(element, options = {}) {
       setCrosshairPoint(null);
     } else if (dragMode === "x-axis") {
       canvas.style.cursor = "ew-resize";
-      zoomXToLatest(Math.exp(-deltaX * 0.01));
+      zoomXToLatest(Math.exp(deltaX * 6e-3));
       setCrosshairPoint(null);
     } else if (dragMode === "y-axis") {
       canvas.style.cursor = "ns-resize";
@@ -2691,6 +2772,22 @@ function createChart(element, options = {}) {
     lastPointerY = point.y;
   };
   const endPointerDrag = (event) => {
+    if (event?.pointerType === "touch") {
+      touchPointers.delete(event.pointerId);
+      if (pinchZoomState) {
+        pinchZoomState = null;
+        isDragging = false;
+        dragMode = null;
+        activePointerId = null;
+        pointerDownInfo = null;
+        setCrosshairPoint(null);
+        canvas.style.cursor = "default";
+        return;
+      }
+    } else if (!event) {
+      touchPointers.clear();
+      pinchZoomState = null;
+    }
     if (event && activePointerId !== null && event.pointerId !== activePointerId) {
       return;
     }

package/dist/index.cjs

@@ -2536,8 +2536,75 @@ function createChart(element, options = {}) {
   let lastPointerX = 0;
   let lastPointerY = 0;
   let activePointerId = null;
+  const touchPointers = /* @__PURE__ */ new Map();
+  let pinchZoomState = null;
+  const getTouchPair = () => {
+    const points = Array.from(touchPointers.values());
+    const first = points[0];
+    const second = points[1];
+    return first && second ? [first, second] : null;
+  };
+  const getPointerDistance = (first, second) => {
+    return Math.hypot(second.x - first.x, second.y - first.y);
+  };
+  const getMidpoint = (first, second) => {
+    return {
+      x: (first.x + second.x) / 2,
+      y: (first.y + second.y) / 2
+    };
+  };
+  const beginPinchZoom = (first, second) => {
+    if (!drawState || data.length === 0) {
+      return;
+    }
+    const midpoint = getMidpoint(first, second);
+    const anchorRatio = clamp((midpoint.x - drawState.chartLeft) / drawState.chartWidth, 0, 1);
+    pinchZoomState = {
+      startDistance: Math.max(1, getPointerDistance(first, second)),
+      startSpan: xSpan,
+      anchorIndex: drawState.xStart + anchorRatio * xSpan
+    };
+    isDragging = false;
+    dragMode = null;
+    activePointerId = null;
+    pointerDownInfo = null;
+    orderDragState = null;
+    actionDragState = null;
+    canvas.style.cursor = "default";
+    setCrosshairPoint(null);
+  };
+  const applyPinchZoom = (first, second) => {
+    if (!drawState || !pinchZoomState || data.length === 0) {
+      return;
+    }
+    const distance = getPointerDistance(first, second);
+    if (distance <= 0) {
+      return;
+    }
+    const minSpan = minVisibleBars;
+    const maxSpan = Math.min(maxVisibleBars, Math.max(minSpan, data.length + maxPanBars * 2));
+    const nextSpan = clamp(pinchZoomState.startSpan * (pinchZoomState.startDistance / distance), minSpan, maxSpan);
+    const midpoint = getMidpoint(first, second);
+    const anchorRatio = clamp((midpoint.x - drawState.chartLeft) / drawState.chartWidth, 0, 1);
+    const nextStart = pinchZoomState.anchorIndex - anchorRatio * nextSpan;
+    xSpan = nextSpan;
+    xCenter = nextStart + nextSpan / 2;
+    clampXViewport();
+    updateFollowLatest(false);
+    emitViewportChange();
+    draw();
+  };
   const onPointerDown = (event) => {
     const point = getCanvasPoint(event);
+    if (event.pointerType === "touch") {
+      touchPointers.set(event.pointerId, point);
+      canvas.setPointerCapture(event.pointerId);
+      const touchPair = getTouchPair();
+      if (touchPair) {
+        beginPinchZoom(touchPair[0], touchPair[1]);
+        return;
+      }
+    }
     const crosshairButtonRegion = getCrosshairPriceActionRegion(point.x, point.y);
     if (crosshairButtonRegion) {
       crosshairPriceActionHandler?.({
@@ -2599,6 +2666,20 @@ function createChart(element, options = {}) {
   };
   const onPointerMove = (event) => {
     const point = getCanvasPoint(event);
+    if (event.pointerType === "touch" && touchPointers.has(event.pointerId)) {
+      touchPointers.set(event.pointerId, point);
+      const touchPair = getTouchPair();
+      if (touchPair) {
+        if (!pinchZoomState) {
+          beginPinchZoom(touchPair[0], touchPair[1]);
+        }
+        applyPinchZoom(touchPair[0], touchPair[1]);
+        return;
+      }
+      if (pinchZoomState) {
+        return;
+      }
+    }
     if (pointerDownInfo && pointerDownInfo.pointerId === event.pointerId && !pointerDownInfo.moved) {
       const dx = point.x - pointerDownInfo.x;
       const dy = point.y - pointerDownInfo.y;
@@ -2703,7 +2784,7 @@ function createChart(element, options = {}) {
       setCrosshairPoint(null);
     } else if (dragMode === "x-axis") {
       canvas.style.cursor = "ew-resize";
-      zoomXToLatest(Math.exp(-deltaX * 0.01));
+      zoomXToLatest(Math.exp(deltaX * 6e-3));
       setCrosshairPoint(null);
     } else if (dragMode === "y-axis") {
       canvas.style.cursor = "ns-resize";
@@ -2715,6 +2796,22 @@ function createChart(element, options = {}) {
     lastPointerY = point.y;
   };
   const endPointerDrag = (event) => {
+    if (event?.pointerType === "touch") {
+      touchPointers.delete(event.pointerId);
+      if (pinchZoomState) {
+        pinchZoomState = null;
+        isDragging = false;
+        dragMode = null;
+        activePointerId = null;
+        pointerDownInfo = null;
+        setCrosshairPoint(null);
+        canvas.style.cursor = "default";
+        return;
+      }
+    } else if (!event) {
+      touchPointers.clear();
+      pinchZoomState = null;
+    }
     if (event && activePointerId !== null && event.pointerId !== activePointerId) {
       return;
     }

package/dist/index.js

@@ -2512,8 +2512,75 @@ function createChart(element, options = {}) {
   let lastPointerX = 0;
   let lastPointerY = 0;
   let activePointerId = null;
+  const touchPointers = /* @__PURE__ */ new Map();
+  let pinchZoomState = null;
+  const getTouchPair = () => {
+    const points = Array.from(touchPointers.values());
+    const first = points[0];
+    const second = points[1];
+    return first && second ? [first, second] : null;
+  };
+  const getPointerDistance = (first, second) => {
+    return Math.hypot(second.x - first.x, second.y - first.y);
+  };
+  const getMidpoint = (first, second) => {
+    return {
+      x: (first.x + second.x) / 2,
+      y: (first.y + second.y) / 2
+    };
+  };
+  const beginPinchZoom = (first, second) => {
+    if (!drawState || data.length === 0) {
+      return;
+    }
+    const midpoint = getMidpoint(first, second);
+    const anchorRatio = clamp((midpoint.x - drawState.chartLeft) / drawState.chartWidth, 0, 1);
+    pinchZoomState = {
+      startDistance: Math.max(1, getPointerDistance(first, second)),
+      startSpan: xSpan,
+      anchorIndex: drawState.xStart + anchorRatio * xSpan
+    };
+    isDragging = false;
+    dragMode = null;
+    activePointerId = null;
+    pointerDownInfo = null;
+    orderDragState = null;
+    actionDragState = null;
+    canvas.style.cursor = "default";
+    setCrosshairPoint(null);
+  };
+  const applyPinchZoom = (first, second) => {
+    if (!drawState || !pinchZoomState || data.length === 0) {
+      return;
+    }
+    const distance = getPointerDistance(first, second);
+    if (distance <= 0) {
+      return;
+    }
+    const minSpan = minVisibleBars;
+    const maxSpan = Math.min(maxVisibleBars, Math.max(minSpan, data.length + maxPanBars * 2));
+    const nextSpan = clamp(pinchZoomState.startSpan * (pinchZoomState.startDistance / distance), minSpan, maxSpan);
+    const midpoint = getMidpoint(first, second);
+    const anchorRatio = clamp((midpoint.x - drawState.chartLeft) / drawState.chartWidth, 0, 1);
+    const nextStart = pinchZoomState.anchorIndex - anchorRatio * nextSpan;
+    xSpan = nextSpan;
+    xCenter = nextStart + nextSpan / 2;
+    clampXViewport();
+    updateFollowLatest(false);
+    emitViewportChange();
+    draw();
+  };
   const onPointerDown = (event) => {
     const point = getCanvasPoint(event);
+    if (event.pointerType === "touch") {
+      touchPointers.set(event.pointerId, point);
+      canvas.setPointerCapture(event.pointerId);
+      const touchPair = getTouchPair();
+      if (touchPair) {
+        beginPinchZoom(touchPair[0], touchPair[1]);
+        return;
+      }
+    }
     const crosshairButtonRegion = getCrosshairPriceActionRegion(point.x, point.y);
     if (crosshairButtonRegion) {
       crosshairPriceActionHandler?.({
@@ -2575,6 +2642,20 @@ function createChart(element, options = {}) {
   };
   const onPointerMove = (event) => {
     const point = getCanvasPoint(event);
+    if (event.pointerType === "touch" && touchPointers.has(event.pointerId)) {
+      touchPointers.set(event.pointerId, point);
+      const touchPair = getTouchPair();
+      if (touchPair) {
+        if (!pinchZoomState) {
+          beginPinchZoom(touchPair[0], touchPair[1]);
+        }
+        applyPinchZoom(touchPair[0], touchPair[1]);
+        return;
+      }
+      if (pinchZoomState) {
+        return;
+      }
+    }
     if (pointerDownInfo && pointerDownInfo.pointerId === event.pointerId && !pointerDownInfo.moved) {
       const dx = point.x - pointerDownInfo.x;
       const dy = point.y - pointerDownInfo.y;
@@ -2679,7 +2760,7 @@ function createChart(element, options = {}) {
       setCrosshairPoint(null);
     } else if (dragMode === "x-axis") {
       canvas.style.cursor = "ew-resize";
-      zoomXToLatest(Math.exp(-deltaX * 0.01));
+      zoomXToLatest(Math.exp(deltaX * 6e-3));
       setCrosshairPoint(null);
     } else if (dragMode === "y-axis") {
       canvas.style.cursor = "ns-resize";
@@ -2691,6 +2772,22 @@ function createChart(element, options = {}) {
     lastPointerY = point.y;
   };
   const endPointerDrag = (event) => {
+    if (event?.pointerType === "touch") {
+      touchPointers.delete(event.pointerId);
+      if (pinchZoomState) {
+        pinchZoomState = null;
+        isDragging = false;
+        dragMode = null;
+        activePointerId = null;
+        pointerDownInfo = null;
+        setCrosshairPoint(null);
+        canvas.style.cursor = "default";
+        return;
+      }
+    } else if (!event) {
+      touchPointers.clear();
+      pinchZoomState = null;
+    }
     if (event && activePointerId !== null && event.pointerId !== activePointerId) {
       return;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperprop-charting-library",
-  "version": "0.1.42",
+  "version": "0.1.44",
   "description": "Lightweight TypeScript charting core",
   "type": "module",
   "main": "./dist/hyperprop-charting-library.cjs",