hyperprop-charting-library 0.1.63 → 0.1.64

package/dist/hyperprop-charting-library.cjs

@@ -1065,6 +1065,10 @@ function createChart(element, options = {}) {
   }
   canvas.style.display = "block";
   canvas.style.touchAction = "none";
+  canvas.style.userSelect = "none";
+  canvas.style.setProperty("-webkit-user-select", "none");
+  canvas.style.setProperty("-webkit-touch-callout", "none");
+  canvas.setAttribute("draggable", "false");
   element.innerHTML = "";
   element.appendChild(canvas);
   const margin = { top: 16, right: 72, bottom: 34, left: 12 };
@@ -3555,6 +3559,9 @@ function createChart(element, options = {}) {
     draw();
   };
   const onPointerDown = (event) => {
+    if (event.pointerType === "touch" || event.pointerType === "pen") {
+      event.preventDefault();
+    }
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch") {
       touchPointers.set(event.pointerId, point);
@@ -3653,12 +3660,29 @@ function createChart(element, options = {}) {
     isDragging = true;
     dragMode = region;
     activePointerId = event.pointerId;
-    pointerDownInfo = { pointerId: event.pointerId, x: point.x, y: point.y, region, moved: false };
+    const crosshairDrag = (event.pointerType === "touch" || event.pointerType === "pen") && region === "plot";
+    pointerDownInfo = {
+      pointerId: event.pointerId,
+      pointerType: event.pointerType,
+      x: point.x,
+      y: point.y,
+      region,
+      moved: false,
+      crosshairDrag
+    };
     lastPointerX = point.x;
     lastPointerY = point.y;
     canvas.setPointerCapture(event.pointerId);
+    if (crosshairDrag) {
+      canvas.style.cursor = "crosshair";
+      setCrosshairPoint(point);
+      emitCrosshairMove(point.x, point.y, "plot");
+    }
   };
   const onPointerMove = (event) => {
+    if (event.pointerType === "touch" || event.pointerType === "pen") {
+      event.preventDefault();
+    }
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch" && touchPointers.has(event.pointerId)) {
       touchPointers.set(event.pointerId, point);
@@ -3681,6 +3705,16 @@ function createChart(element, options = {}) {
         pointerDownInfo.moved = true;
       }
     }
+    if (pointerDownInfo?.crosshairDrag && pointerDownInfo.pointerId === event.pointerId) {
+      if (getHitRegion(point.x, point.y) === "plot") {
+        canvas.style.cursor = "crosshair";
+        setCrosshairPoint(point);
+        emitCrosshairMove(point.x, point.y, "plot");
+        lastPointerX = point.x;
+        lastPointerY = point.y;
+      }
+      return;
+    }
     if (drawingDragState) {
       if (activePointerId !== null && event.pointerId !== activePointerId) {
         return;
@@ -3894,7 +3928,13 @@ function createChart(element, options = {}) {
     activePointerId = null;
     canvas.style.cursor = "default";
     if (event && pointerDownInfo && event.pointerId === pointerDownInfo.pointerId) {
-      if (!pointerDownInfo.moved) {
+      if (pointerDownInfo.crosshairDrag) {
+        const point = getCanvasPoint(event);
+        if (getHitRegion(point.x, point.y) === "plot") {
+          setCrosshairPoint(point);
+          emitCrosshairMove(point.x, point.y, "plot");
+        }
+      } else if (!pointerDownInfo.moved) {
         const clickPrice = pointerDownInfo.region === "plot" ? roundToPricePrecision(priceFromCanvasY(pointerDownInfo.y)) : void 0;
         chartClickHandler?.({
           x: pointerDownInfo.x,
@@ -3941,6 +3981,7 @@ function createChart(element, options = {}) {
     zoomX(factor, point.x);
   };
   const onDoubleClick = (event) => {
+    event.preventDefault();
     if (!doubleClickEnabled) {
       return;
     }
@@ -3966,6 +4007,9 @@ function createChart(element, options = {}) {
     }
     resetViewport();
   };
+  const onContextMenu = (event) => {
+    event.preventDefault();
+  };
   canvas.addEventListener("pointerdown", onPointerDown);
   canvas.addEventListener("pointermove", onPointerMove);
   canvas.addEventListener("pointerup", endPointerDrag);
@@ -3973,6 +4017,7 @@ function createChart(element, options = {}) {
   canvas.addEventListener("pointerleave", endPointerDrag);
   canvas.addEventListener("wheel", onWheel, { passive: false });
   canvas.addEventListener("dblclick", onDoubleClick);
+  canvas.addEventListener("contextmenu", onContextMenu);
   const updateOptions = (nextOptions) => {
     const wasTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
     const previousWidth = width;
@@ -4270,6 +4315,7 @@ function createChart(element, options = {}) {
     canvas.removeEventListener("pointerleave", endPointerDrag);
     canvas.removeEventListener("wheel", onWheel);
     canvas.removeEventListener("dblclick", onDoubleClick);
+    canvas.removeEventListener("contextmenu", onContextMenu);
     element.innerHTML = "";
   };
   draw();

package/dist/hyperprop-charting-library.js

@@ -1041,6 +1041,10 @@ function createChart(element, options = {}) {
   }
   canvas.style.display = "block";
   canvas.style.touchAction = "none";
+  canvas.style.userSelect = "none";
+  canvas.style.setProperty("-webkit-user-select", "none");
+  canvas.style.setProperty("-webkit-touch-callout", "none");
+  canvas.setAttribute("draggable", "false");
   element.innerHTML = "";
   element.appendChild(canvas);
   const margin = { top: 16, right: 72, bottom: 34, left: 12 };
@@ -3531,6 +3535,9 @@ function createChart(element, options = {}) {
     draw();
   };
   const onPointerDown = (event) => {
+    if (event.pointerType === "touch" || event.pointerType === "pen") {
+      event.preventDefault();
+    }
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch") {
       touchPointers.set(event.pointerId, point);
@@ -3629,12 +3636,29 @@ function createChart(element, options = {}) {
     isDragging = true;
     dragMode = region;
     activePointerId = event.pointerId;
-    pointerDownInfo = { pointerId: event.pointerId, x: point.x, y: point.y, region, moved: false };
+    const crosshairDrag = (event.pointerType === "touch" || event.pointerType === "pen") && region === "plot";
+    pointerDownInfo = {
+      pointerId: event.pointerId,
+      pointerType: event.pointerType,
+      x: point.x,
+      y: point.y,
+      region,
+      moved: false,
+      crosshairDrag
+    };
     lastPointerX = point.x;
     lastPointerY = point.y;
     canvas.setPointerCapture(event.pointerId);
+    if (crosshairDrag) {
+      canvas.style.cursor = "crosshair";
+      setCrosshairPoint(point);
+      emitCrosshairMove(point.x, point.y, "plot");
+    }
   };
   const onPointerMove = (event) => {
+    if (event.pointerType === "touch" || event.pointerType === "pen") {
+      event.preventDefault();
+    }
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch" && touchPointers.has(event.pointerId)) {
       touchPointers.set(event.pointerId, point);
@@ -3657,6 +3681,16 @@ function createChart(element, options = {}) {
         pointerDownInfo.moved = true;
       }
     }
+    if (pointerDownInfo?.crosshairDrag && pointerDownInfo.pointerId === event.pointerId) {
+      if (getHitRegion(point.x, point.y) === "plot") {
+        canvas.style.cursor = "crosshair";
+        setCrosshairPoint(point);
+        emitCrosshairMove(point.x, point.y, "plot");
+        lastPointerX = point.x;
+        lastPointerY = point.y;
+      }
+      return;
+    }
     if (drawingDragState) {
       if (activePointerId !== null && event.pointerId !== activePointerId) {
         return;
@@ -3870,7 +3904,13 @@ function createChart(element, options = {}) {
     activePointerId = null;
     canvas.style.cursor = "default";
     if (event && pointerDownInfo && event.pointerId === pointerDownInfo.pointerId) {
-      if (!pointerDownInfo.moved) {
+      if (pointerDownInfo.crosshairDrag) {
+        const point = getCanvasPoint(event);
+        if (getHitRegion(point.x, point.y) === "plot") {
+          setCrosshairPoint(point);
+          emitCrosshairMove(point.x, point.y, "plot");
+        }
+      } else if (!pointerDownInfo.moved) {
         const clickPrice = pointerDownInfo.region === "plot" ? roundToPricePrecision(priceFromCanvasY(pointerDownInfo.y)) : void 0;
         chartClickHandler?.({
           x: pointerDownInfo.x,
@@ -3917,6 +3957,7 @@ function createChart(element, options = {}) {
     zoomX(factor, point.x);
   };
   const onDoubleClick = (event) => {
+    event.preventDefault();
     if (!doubleClickEnabled) {
       return;
     }
@@ -3942,6 +3983,9 @@ function createChart(element, options = {}) {
     }
     resetViewport();
   };
+  const onContextMenu = (event) => {
+    event.preventDefault();
+  };
   canvas.addEventListener("pointerdown", onPointerDown);
   canvas.addEventListener("pointermove", onPointerMove);
   canvas.addEventListener("pointerup", endPointerDrag);
@@ -3949,6 +3993,7 @@ function createChart(element, options = {}) {
   canvas.addEventListener("pointerleave", endPointerDrag);
   canvas.addEventListener("wheel", onWheel, { passive: false });
   canvas.addEventListener("dblclick", onDoubleClick);
+  canvas.addEventListener("contextmenu", onContextMenu);
   const updateOptions = (nextOptions) => {
     const wasTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
     const previousWidth = width;
@@ -4246,6 +4291,7 @@ function createChart(element, options = {}) {
     canvas.removeEventListener("pointerleave", endPointerDrag);
     canvas.removeEventListener("wheel", onWheel);
     canvas.removeEventListener("dblclick", onDoubleClick);
+    canvas.removeEventListener("contextmenu", onContextMenu);
     element.innerHTML = "";
   };
   draw();

package/dist/index.cjs

@@ -1065,6 +1065,10 @@ function createChart(element, options = {}) {
   }
   canvas.style.display = "block";
   canvas.style.touchAction = "none";
+  canvas.style.userSelect = "none";
+  canvas.style.setProperty("-webkit-user-select", "none");
+  canvas.style.setProperty("-webkit-touch-callout", "none");
+  canvas.setAttribute("draggable", "false");
   element.innerHTML = "";
   element.appendChild(canvas);
   const margin = { top: 16, right: 72, bottom: 34, left: 12 };
@@ -3555,6 +3559,9 @@ function createChart(element, options = {}) {
     draw();
   };
   const onPointerDown = (event) => {
+    if (event.pointerType === "touch" || event.pointerType === "pen") {
+      event.preventDefault();
+    }
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch") {
       touchPointers.set(event.pointerId, point);
@@ -3653,12 +3660,29 @@ function createChart(element, options = {}) {
     isDragging = true;
     dragMode = region;
     activePointerId = event.pointerId;
-    pointerDownInfo = { pointerId: event.pointerId, x: point.x, y: point.y, region, moved: false };
+    const crosshairDrag = (event.pointerType === "touch" || event.pointerType === "pen") && region === "plot";
+    pointerDownInfo = {
+      pointerId: event.pointerId,
+      pointerType: event.pointerType,
+      x: point.x,
+      y: point.y,
+      region,
+      moved: false,
+      crosshairDrag
+    };
     lastPointerX = point.x;
     lastPointerY = point.y;
     canvas.setPointerCapture(event.pointerId);
+    if (crosshairDrag) {
+      canvas.style.cursor = "crosshair";
+      setCrosshairPoint(point);
+      emitCrosshairMove(point.x, point.y, "plot");
+    }
   };
   const onPointerMove = (event) => {
+    if (event.pointerType === "touch" || event.pointerType === "pen") {
+      event.preventDefault();
+    }
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch" && touchPointers.has(event.pointerId)) {
       touchPointers.set(event.pointerId, point);
@@ -3681,6 +3705,16 @@ function createChart(element, options = {}) {
         pointerDownInfo.moved = true;
       }
     }
+    if (pointerDownInfo?.crosshairDrag && pointerDownInfo.pointerId === event.pointerId) {
+      if (getHitRegion(point.x, point.y) === "plot") {
+        canvas.style.cursor = "crosshair";
+        setCrosshairPoint(point);
+        emitCrosshairMove(point.x, point.y, "plot");
+        lastPointerX = point.x;
+        lastPointerY = point.y;
+      }
+      return;
+    }
     if (drawingDragState) {
       if (activePointerId !== null && event.pointerId !== activePointerId) {
         return;
@@ -3894,7 +3928,13 @@ function createChart(element, options = {}) {
     activePointerId = null;
     canvas.style.cursor = "default";
     if (event && pointerDownInfo && event.pointerId === pointerDownInfo.pointerId) {
-      if (!pointerDownInfo.moved) {
+      if (pointerDownInfo.crosshairDrag) {
+        const point = getCanvasPoint(event);
+        if (getHitRegion(point.x, point.y) === "plot") {
+          setCrosshairPoint(point);
+          emitCrosshairMove(point.x, point.y, "plot");
+        }
+      } else if (!pointerDownInfo.moved) {
         const clickPrice = pointerDownInfo.region === "plot" ? roundToPricePrecision(priceFromCanvasY(pointerDownInfo.y)) : void 0;
         chartClickHandler?.({
           x: pointerDownInfo.x,
@@ -3941,6 +3981,7 @@ function createChart(element, options = {}) {
     zoomX(factor, point.x);
   };
   const onDoubleClick = (event) => {
+    event.preventDefault();
     if (!doubleClickEnabled) {
       return;
     }
@@ -3966,6 +4007,9 @@ function createChart(element, options = {}) {
     }
     resetViewport();
   };
+  const onContextMenu = (event) => {
+    event.preventDefault();
+  };
   canvas.addEventListener("pointerdown", onPointerDown);
   canvas.addEventListener("pointermove", onPointerMove);
   canvas.addEventListener("pointerup", endPointerDrag);
@@ -3973,6 +4017,7 @@ function createChart(element, options = {}) {
   canvas.addEventListener("pointerleave", endPointerDrag);
   canvas.addEventListener("wheel", onWheel, { passive: false });
   canvas.addEventListener("dblclick", onDoubleClick);
+  canvas.addEventListener("contextmenu", onContextMenu);
   const updateOptions = (nextOptions) => {
     const wasTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
     const previousWidth = width;
@@ -4270,6 +4315,7 @@ function createChart(element, options = {}) {
     canvas.removeEventListener("pointerleave", endPointerDrag);
     canvas.removeEventListener("wheel", onWheel);
     canvas.removeEventListener("dblclick", onDoubleClick);
+    canvas.removeEventListener("contextmenu", onContextMenu);
     element.innerHTML = "";
   };
   draw();

package/dist/index.js

@@ -1041,6 +1041,10 @@ function createChart(element, options = {}) {
   }
   canvas.style.display = "block";
   canvas.style.touchAction = "none";
+  canvas.style.userSelect = "none";
+  canvas.style.setProperty("-webkit-user-select", "none");
+  canvas.style.setProperty("-webkit-touch-callout", "none");
+  canvas.setAttribute("draggable", "false");
   element.innerHTML = "";
   element.appendChild(canvas);
   const margin = { top: 16, right: 72, bottom: 34, left: 12 };
@@ -3531,6 +3535,9 @@ function createChart(element, options = {}) {
     draw();
   };
   const onPointerDown = (event) => {
+    if (event.pointerType === "touch" || event.pointerType === "pen") {
+      event.preventDefault();
+    }
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch") {
       touchPointers.set(event.pointerId, point);
@@ -3629,12 +3636,29 @@ function createChart(element, options = {}) {
     isDragging = true;
     dragMode = region;
     activePointerId = event.pointerId;
-    pointerDownInfo = { pointerId: event.pointerId, x: point.x, y: point.y, region, moved: false };
+    const crosshairDrag = (event.pointerType === "touch" || event.pointerType === "pen") && region === "plot";
+    pointerDownInfo = {
+      pointerId: event.pointerId,
+      pointerType: event.pointerType,
+      x: point.x,
+      y: point.y,
+      region,
+      moved: false,
+      crosshairDrag
+    };
     lastPointerX = point.x;
     lastPointerY = point.y;
     canvas.setPointerCapture(event.pointerId);
+    if (crosshairDrag) {
+      canvas.style.cursor = "crosshair";
+      setCrosshairPoint(point);
+      emitCrosshairMove(point.x, point.y, "plot");
+    }
   };
   const onPointerMove = (event) => {
+    if (event.pointerType === "touch" || event.pointerType === "pen") {
+      event.preventDefault();
+    }
     const point = getCanvasPoint(event);
     if (event.pointerType === "touch" && touchPointers.has(event.pointerId)) {
       touchPointers.set(event.pointerId, point);
@@ -3657,6 +3681,16 @@ function createChart(element, options = {}) {
         pointerDownInfo.moved = true;
       }
     }
+    if (pointerDownInfo?.crosshairDrag && pointerDownInfo.pointerId === event.pointerId) {
+      if (getHitRegion(point.x, point.y) === "plot") {
+        canvas.style.cursor = "crosshair";
+        setCrosshairPoint(point);
+        emitCrosshairMove(point.x, point.y, "plot");
+        lastPointerX = point.x;
+        lastPointerY = point.y;
+      }
+      return;
+    }
     if (drawingDragState) {
       if (activePointerId !== null && event.pointerId !== activePointerId) {
         return;
@@ -3870,7 +3904,13 @@ function createChart(element, options = {}) {
     activePointerId = null;
     canvas.style.cursor = "default";
     if (event && pointerDownInfo && event.pointerId === pointerDownInfo.pointerId) {
-      if (!pointerDownInfo.moved) {
+      if (pointerDownInfo.crosshairDrag) {
+        const point = getCanvasPoint(event);
+        if (getHitRegion(point.x, point.y) === "plot") {
+          setCrosshairPoint(point);
+          emitCrosshairMove(point.x, point.y, "plot");
+        }
+      } else if (!pointerDownInfo.moved) {
         const clickPrice = pointerDownInfo.region === "plot" ? roundToPricePrecision(priceFromCanvasY(pointerDownInfo.y)) : void 0;
         chartClickHandler?.({
           x: pointerDownInfo.x,
@@ -3917,6 +3957,7 @@ function createChart(element, options = {}) {
     zoomX(factor, point.x);
   };
   const onDoubleClick = (event) => {
+    event.preventDefault();
     if (!doubleClickEnabled) {
       return;
     }
@@ -3942,6 +3983,9 @@ function createChart(element, options = {}) {
     }
     resetViewport();
   };
+  const onContextMenu = (event) => {
+    event.preventDefault();
+  };
   canvas.addEventListener("pointerdown", onPointerDown);
   canvas.addEventListener("pointermove", onPointerMove);
   canvas.addEventListener("pointerup", endPointerDrag);
@@ -3949,6 +3993,7 @@ function createChart(element, options = {}) {
   canvas.addEventListener("pointerleave", endPointerDrag);
   canvas.addEventListener("wheel", onWheel, { passive: false });
   canvas.addEventListener("dblclick", onDoubleClick);
+  canvas.addEventListener("contextmenu", onContextMenu);
   const updateOptions = (nextOptions) => {
     const wasTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
     const previousWidth = width;
@@ -4246,6 +4291,7 @@ function createChart(element, options = {}) {
     canvas.removeEventListener("pointerleave", endPointerDrag);
     canvas.removeEventListener("wheel", onWheel);
     canvas.removeEventListener("dblclick", onDoubleClick);
+    canvas.removeEventListener("contextmenu", onContextMenu);
     element.innerHTML = "";
   };
   draw();

package/package.json

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