hyperprop-charting-library 0.1.55 → 0.1.57

package/dist/hyperprop-charting-library.cjs

@@ -959,6 +959,7 @@ function createChart(element, options = {}) {
   let drawings = (options.drawings ?? []).map((drawing) => normalizeDrawingState(drawing));
   let activeDrawingTool = null;
   let draftDrawing = null;
+  let drawingDragState = null;
   let drawingsChangeHandler = null;
   let drawingSelectHandler = null;
   const emitDrawingsChange = () => {
@@ -2043,10 +2044,12 @@ function createChart(element, options = {}) {
         const point = drawing.points[0];
         if (point) {
           const y = clamp(yFromPrice(point.price), chartTop + 1, chartBottom - 1);
+          const handleX = chartRight - 64;
           ctx.beginPath();
           ctx.moveTo(crisp(chartLeft), crisp(y));
           ctx.lineTo(crisp(chartRight), crisp(y));
           ctx.stroke();
+          drawDrawingHandle(handleX, y, drawing.color);
         }
       } else if (drawing.type === "trendline") {
         const first = drawing.points[0];
@@ -3091,6 +3094,15 @@ function createChart(element, options = {}) {
       ...time ? { time: time.toISOString() } : {}
     };
   };
+  const normalizeDrawingPoint = (index, price) => {
+    const roundedIndex = Math.round(index);
+    const time = getTimeForIndex(roundedIndex);
+    return {
+      index,
+      price: roundToPricePrecision(price),
+      ...time ? { time: time.toISOString() } : {}
+    };
+  };
   const canvasXFromDrawingPoint = (point) => {
     if (!drawState) return 0;
     return drawState.chartLeft + (point.index + 0.5 - drawState.xStart) / drawState.xSpan * drawState.chartWidth;
@@ -3116,6 +3128,10 @@ function createChart(element, options = {}) {
         const point = drawing.points[0];
         if (!point) continue;
         const lineY = canvasYFromDrawingPrice(point.price);
+        const handleX = drawState ? drawState.chartRight - 64 : 0;
+        if (Math.hypot(x - handleX, y - lineY) <= 8) {
+          return { drawing, target: "handle", pointIndex: 0 };
+        }
         if (Math.abs(y - lineY) <= 7) {
           return { drawing, target: "line" };
         }
@@ -3127,8 +3143,11 @@ function createChart(element, options = {}) {
         const y1 = canvasYFromDrawingPrice(first.price);
         const x2 = canvasXFromDrawingPoint(second);
         const y2 = canvasYFromDrawingPrice(second.price);
-        if (Math.hypot(x - x1, y - y1) <= 8 || Math.hypot(x - x2, y - y2) <= 8) {
-          return { drawing, target: "handle" };
+        if (Math.hypot(x - x1, y - y1) <= 8) {
+          return { drawing, target: "handle", pointIndex: 0 };
+        }
+        if (Math.hypot(x - x2, y - y2) <= 8) {
+          return { drawing, target: "handle", pointIndex: 1 };
         }
         if (distanceToSegment(x, y, x1, y1, x2, y2) <= 6) {
           return { drawing, target: "line" };
@@ -3236,6 +3255,39 @@ function createChart(element, options = {}) {
     }
     return false;
   };
+  const updateDrawingDrag = (x, y) => {
+    if (!drawingDragState) {
+      return false;
+    }
+    const currentPoint = drawingPointFromCanvas(x, y);
+    if (!currentPoint) {
+      return true;
+    }
+    const deltaIndex = currentPoint.index - drawingDragState.startCanvasPoint.index;
+    const deltaPrice = currentPoint.price - drawingDragState.startCanvasPoint.price;
+    drawings = drawings.map((drawing) => {
+      if (drawing.id !== drawingDragState?.drawingId || drawing.locked) {
+        return drawing;
+      }
+      if (drawingDragState.target === "handle") {
+        return {
+          ...drawing,
+          points: drawing.points.map(
+            (point, index) => index === (drawingDragState?.pointIndex ?? 0) ? normalizeDrawingPoint(currentPoint.index, currentPoint.price) : point
+          )
+        };
+      }
+      return {
+        ...drawing,
+        points: drawingDragState.startPoints.map(
+          (point) => normalizeDrawingPoint(point.index + deltaIndex, point.price + deltaPrice)
+        )
+      };
+    });
+    emitDrawingsChange();
+    draw();
+    return true;
+  };
   let isDragging = false;
   let dragMode = null;
   let lastPointerX = 0;
@@ -3275,6 +3327,7 @@ function createChart(element, options = {}) {
     pointerDownInfo = null;
     orderDragState = null;
     actionDragState = null;
+    drawingDragState = null;
     canvas.style.cursor = "default";
     setCrosshairPoint(null);
   };
@@ -3367,11 +3420,26 @@ function createChart(element, options = {}) {
         drawingSelectHandler?.({
           drawing: serializeDrawing(drawingHit.drawing),
           target: drawingHit.target,
+          ...drawingHit.pointIndex === void 0 ? {} : { pointIndex: drawingHit.pointIndex },
           x: point.x,
           y: point.y
         });
+        if (!drawingHit.drawing.locked) {
+          const startCanvasPoint = drawingPointFromCanvas(point.x, point.y);
+          if (startCanvasPoint) {
+            drawingDragState = {
+              drawingId: drawingHit.drawing.id,
+              target: drawingHit.target,
+              ...drawingHit.pointIndex === void 0 ? {} : { pointIndex: drawingHit.pointIndex },
+              startCanvasPoint,
+              startPoints: drawingHit.drawing.points.map((drawingPoint) => ({ ...drawingPoint }))
+            };
+            activePointerId = event.pointerId;
+            canvas.setPointerCapture(event.pointerId);
+          }
+        }
         setCrosshairPoint(null);
-        canvas.style.cursor = "pointer";
+        canvas.style.cursor = drawingHit.drawing.locked ? "pointer" : drawingHit.target === "handle" ? "grab" : "move";
         return;
       }
     }
@@ -3411,6 +3479,15 @@ function createChart(element, options = {}) {
         pointerDownInfo.moved = true;
       }
     }
+    if (drawingDragState) {
+      if (activePointerId !== null && event.pointerId !== activePointerId) {
+        return;
+      }
+      updateDrawingDrag(point.x, point.y);
+      canvas.style.cursor = drawingDragState.target === "handle" ? "grabbing" : "move";
+      setCrosshairPoint(null);
+      return;
+    }
     if (draftDrawing && activeDrawingTool === "trendline") {
       const nextPoint = drawingPointFromCanvas(point.x, point.y);
       if (nextPoint) {
@@ -3494,7 +3571,8 @@ function createChart(element, options = {}) {
         return;
       }
       if (!activeDrawingTool && getDrawingHit(point.x, point.y)) {
-        canvas.style.cursor = "pointer";
+        const drawingHit = getDrawingHit(point.x, point.y);
+        canvas.style.cursor = drawingHit?.drawing.locked ? "pointer" : drawingHit?.target === "handle" ? "grab" : "move";
         setCrosshairPoint(null);
         return;
       }
@@ -3590,6 +3668,10 @@ function createChart(element, options = {}) {
       }
       actionDragState = null;
     }
+    if (drawingDragState) {
+      drawingDragState = null;
+      emitDrawingsChange();
+    }
     isDragging = false;
     dragMode = null;
     activePointerId = null;

package/dist/hyperprop-charting-library.d.ts

@@ -63,6 +63,7 @@ interface DrawingObjectOptions {
 interface DrawingSelectEvent {
     drawing: DrawingObjectOptions;
     target: "line" | "handle";
+    pointIndex?: number;
     x: number;
     y: number;
 }

package/dist/hyperprop-charting-library.js

@@ -935,6 +935,7 @@ function createChart(element, options = {}) {
   let drawings = (options.drawings ?? []).map((drawing) => normalizeDrawingState(drawing));
   let activeDrawingTool = null;
   let draftDrawing = null;
+  let drawingDragState = null;
   let drawingsChangeHandler = null;
   let drawingSelectHandler = null;
   const emitDrawingsChange = () => {
@@ -2019,10 +2020,12 @@ function createChart(element, options = {}) {
         const point = drawing.points[0];
         if (point) {
           const y = clamp(yFromPrice(point.price), chartTop + 1, chartBottom - 1);
+          const handleX = chartRight - 64;
           ctx.beginPath();
           ctx.moveTo(crisp(chartLeft), crisp(y));
           ctx.lineTo(crisp(chartRight), crisp(y));
           ctx.stroke();
+          drawDrawingHandle(handleX, y, drawing.color);
         }
       } else if (drawing.type === "trendline") {
         const first = drawing.points[0];
@@ -3067,6 +3070,15 @@ function createChart(element, options = {}) {
       ...time ? { time: time.toISOString() } : {}
     };
   };
+  const normalizeDrawingPoint = (index, price) => {
+    const roundedIndex = Math.round(index);
+    const time = getTimeForIndex(roundedIndex);
+    return {
+      index,
+      price: roundToPricePrecision(price),
+      ...time ? { time: time.toISOString() } : {}
+    };
+  };
   const canvasXFromDrawingPoint = (point) => {
     if (!drawState) return 0;
     return drawState.chartLeft + (point.index + 0.5 - drawState.xStart) / drawState.xSpan * drawState.chartWidth;
@@ -3092,6 +3104,10 @@ function createChart(element, options = {}) {
         const point = drawing.points[0];
         if (!point) continue;
         const lineY = canvasYFromDrawingPrice(point.price);
+        const handleX = drawState ? drawState.chartRight - 64 : 0;
+        if (Math.hypot(x - handleX, y - lineY) <= 8) {
+          return { drawing, target: "handle", pointIndex: 0 };
+        }
         if (Math.abs(y - lineY) <= 7) {
           return { drawing, target: "line" };
         }
@@ -3103,8 +3119,11 @@ function createChart(element, options = {}) {
         const y1 = canvasYFromDrawingPrice(first.price);
         const x2 = canvasXFromDrawingPoint(second);
         const y2 = canvasYFromDrawingPrice(second.price);
-        if (Math.hypot(x - x1, y - y1) <= 8 || Math.hypot(x - x2, y - y2) <= 8) {
-          return { drawing, target: "handle" };
+        if (Math.hypot(x - x1, y - y1) <= 8) {
+          return { drawing, target: "handle", pointIndex: 0 };
+        }
+        if (Math.hypot(x - x2, y - y2) <= 8) {
+          return { drawing, target: "handle", pointIndex: 1 };
         }
         if (distanceToSegment(x, y, x1, y1, x2, y2) <= 6) {
           return { drawing, target: "line" };
@@ -3212,6 +3231,39 @@ function createChart(element, options = {}) {
     }
     return false;
   };
+  const updateDrawingDrag = (x, y) => {
+    if (!drawingDragState) {
+      return false;
+    }
+    const currentPoint = drawingPointFromCanvas(x, y);
+    if (!currentPoint) {
+      return true;
+    }
+    const deltaIndex = currentPoint.index - drawingDragState.startCanvasPoint.index;
+    const deltaPrice = currentPoint.price - drawingDragState.startCanvasPoint.price;
+    drawings = drawings.map((drawing) => {
+      if (drawing.id !== drawingDragState?.drawingId || drawing.locked) {
+        return drawing;
+      }
+      if (drawingDragState.target === "handle") {
+        return {
+          ...drawing,
+          points: drawing.points.map(
+            (point, index) => index === (drawingDragState?.pointIndex ?? 0) ? normalizeDrawingPoint(currentPoint.index, currentPoint.price) : point
+          )
+        };
+      }
+      return {
+        ...drawing,
+        points: drawingDragState.startPoints.map(
+          (point) => normalizeDrawingPoint(point.index + deltaIndex, point.price + deltaPrice)
+        )
+      };
+    });
+    emitDrawingsChange();
+    draw();
+    return true;
+  };
   let isDragging = false;
   let dragMode = null;
   let lastPointerX = 0;
@@ -3251,6 +3303,7 @@ function createChart(element, options = {}) {
     pointerDownInfo = null;
     orderDragState = null;
     actionDragState = null;
+    drawingDragState = null;
     canvas.style.cursor = "default";
     setCrosshairPoint(null);
   };
@@ -3343,11 +3396,26 @@ function createChart(element, options = {}) {
         drawingSelectHandler?.({
           drawing: serializeDrawing(drawingHit.drawing),
           target: drawingHit.target,
+          ...drawingHit.pointIndex === void 0 ? {} : { pointIndex: drawingHit.pointIndex },
           x: point.x,
           y: point.y
         });
+        if (!drawingHit.drawing.locked) {
+          const startCanvasPoint = drawingPointFromCanvas(point.x, point.y);
+          if (startCanvasPoint) {
+            drawingDragState = {
+              drawingId: drawingHit.drawing.id,
+              target: drawingHit.target,
+              ...drawingHit.pointIndex === void 0 ? {} : { pointIndex: drawingHit.pointIndex },
+              startCanvasPoint,
+              startPoints: drawingHit.drawing.points.map((drawingPoint) => ({ ...drawingPoint }))
+            };
+            activePointerId = event.pointerId;
+            canvas.setPointerCapture(event.pointerId);
+          }
+        }
         setCrosshairPoint(null);
-        canvas.style.cursor = "pointer";
+        canvas.style.cursor = drawingHit.drawing.locked ? "pointer" : drawingHit.target === "handle" ? "grab" : "move";
         return;
       }
     }
@@ -3387,6 +3455,15 @@ function createChart(element, options = {}) {
         pointerDownInfo.moved = true;
       }
     }
+    if (drawingDragState) {
+      if (activePointerId !== null && event.pointerId !== activePointerId) {
+        return;
+      }
+      updateDrawingDrag(point.x, point.y);
+      canvas.style.cursor = drawingDragState.target === "handle" ? "grabbing" : "move";
+      setCrosshairPoint(null);
+      return;
+    }
     if (draftDrawing && activeDrawingTool === "trendline") {
       const nextPoint = drawingPointFromCanvas(point.x, point.y);
       if (nextPoint) {
@@ -3470,7 +3547,8 @@ function createChart(element, options = {}) {
         return;
       }
       if (!activeDrawingTool && getDrawingHit(point.x, point.y)) {
-        canvas.style.cursor = "pointer";
+        const drawingHit = getDrawingHit(point.x, point.y);
+        canvas.style.cursor = drawingHit?.drawing.locked ? "pointer" : drawingHit?.target === "handle" ? "grab" : "move";
         setCrosshairPoint(null);
         return;
       }
@@ -3566,6 +3644,10 @@ function createChart(element, options = {}) {
       }
       actionDragState = null;
     }
+    if (drawingDragState) {
+      drawingDragState = null;
+      emitDrawingsChange();
+    }
     isDragging = false;
     dragMode = null;
     activePointerId = null;

package/dist/index.cjs

@@ -959,6 +959,7 @@ function createChart(element, options = {}) {
   let drawings = (options.drawings ?? []).map((drawing) => normalizeDrawingState(drawing));
   let activeDrawingTool = null;
   let draftDrawing = null;
+  let drawingDragState = null;
   let drawingsChangeHandler = null;
   let drawingSelectHandler = null;
   const emitDrawingsChange = () => {
@@ -2043,10 +2044,12 @@ function createChart(element, options = {}) {
         const point = drawing.points[0];
         if (point) {
           const y = clamp(yFromPrice(point.price), chartTop + 1, chartBottom - 1);
+          const handleX = chartRight - 64;
           ctx.beginPath();
           ctx.moveTo(crisp(chartLeft), crisp(y));
           ctx.lineTo(crisp(chartRight), crisp(y));
           ctx.stroke();
+          drawDrawingHandle(handleX, y, drawing.color);
         }
       } else if (drawing.type === "trendline") {
         const first = drawing.points[0];
@@ -3091,6 +3094,15 @@ function createChart(element, options = {}) {
       ...time ? { time: time.toISOString() } : {}
     };
   };
+  const normalizeDrawingPoint = (index, price) => {
+    const roundedIndex = Math.round(index);
+    const time = getTimeForIndex(roundedIndex);
+    return {
+      index,
+      price: roundToPricePrecision(price),
+      ...time ? { time: time.toISOString() } : {}
+    };
+  };
   const canvasXFromDrawingPoint = (point) => {
     if (!drawState) return 0;
     return drawState.chartLeft + (point.index + 0.5 - drawState.xStart) / drawState.xSpan * drawState.chartWidth;
@@ -3116,6 +3128,10 @@ function createChart(element, options = {}) {
         const point = drawing.points[0];
         if (!point) continue;
         const lineY = canvasYFromDrawingPrice(point.price);
+        const handleX = drawState ? drawState.chartRight - 64 : 0;
+        if (Math.hypot(x - handleX, y - lineY) <= 8) {
+          return { drawing, target: "handle", pointIndex: 0 };
+        }
         if (Math.abs(y - lineY) <= 7) {
           return { drawing, target: "line" };
         }
@@ -3127,8 +3143,11 @@ function createChart(element, options = {}) {
         const y1 = canvasYFromDrawingPrice(first.price);
         const x2 = canvasXFromDrawingPoint(second);
         const y2 = canvasYFromDrawingPrice(second.price);
-        if (Math.hypot(x - x1, y - y1) <= 8 || Math.hypot(x - x2, y - y2) <= 8) {
-          return { drawing, target: "handle" };
+        if (Math.hypot(x - x1, y - y1) <= 8) {
+          return { drawing, target: "handle", pointIndex: 0 };
+        }
+        if (Math.hypot(x - x2, y - y2) <= 8) {
+          return { drawing, target: "handle", pointIndex: 1 };
         }
         if (distanceToSegment(x, y, x1, y1, x2, y2) <= 6) {
           return { drawing, target: "line" };
@@ -3236,6 +3255,39 @@ function createChart(element, options = {}) {
     }
     return false;
   };
+  const updateDrawingDrag = (x, y) => {
+    if (!drawingDragState) {
+      return false;
+    }
+    const currentPoint = drawingPointFromCanvas(x, y);
+    if (!currentPoint) {
+      return true;
+    }
+    const deltaIndex = currentPoint.index - drawingDragState.startCanvasPoint.index;
+    const deltaPrice = currentPoint.price - drawingDragState.startCanvasPoint.price;
+    drawings = drawings.map((drawing) => {
+      if (drawing.id !== drawingDragState?.drawingId || drawing.locked) {
+        return drawing;
+      }
+      if (drawingDragState.target === "handle") {
+        return {
+          ...drawing,
+          points: drawing.points.map(
+            (point, index) => index === (drawingDragState?.pointIndex ?? 0) ? normalizeDrawingPoint(currentPoint.index, currentPoint.price) : point
+          )
+        };
+      }
+      return {
+        ...drawing,
+        points: drawingDragState.startPoints.map(
+          (point) => normalizeDrawingPoint(point.index + deltaIndex, point.price + deltaPrice)
+        )
+      };
+    });
+    emitDrawingsChange();
+    draw();
+    return true;
+  };
   let isDragging = false;
   let dragMode = null;
   let lastPointerX = 0;
@@ -3275,6 +3327,7 @@ function createChart(element, options = {}) {
     pointerDownInfo = null;
     orderDragState = null;
     actionDragState = null;
+    drawingDragState = null;
     canvas.style.cursor = "default";
     setCrosshairPoint(null);
   };
@@ -3367,11 +3420,26 @@ function createChart(element, options = {}) {
         drawingSelectHandler?.({
           drawing: serializeDrawing(drawingHit.drawing),
           target: drawingHit.target,
+          ...drawingHit.pointIndex === void 0 ? {} : { pointIndex: drawingHit.pointIndex },
           x: point.x,
           y: point.y
         });
+        if (!drawingHit.drawing.locked) {
+          const startCanvasPoint = drawingPointFromCanvas(point.x, point.y);
+          if (startCanvasPoint) {
+            drawingDragState = {
+              drawingId: drawingHit.drawing.id,
+              target: drawingHit.target,
+              ...drawingHit.pointIndex === void 0 ? {} : { pointIndex: drawingHit.pointIndex },
+              startCanvasPoint,
+              startPoints: drawingHit.drawing.points.map((drawingPoint) => ({ ...drawingPoint }))
+            };
+            activePointerId = event.pointerId;
+            canvas.setPointerCapture(event.pointerId);
+          }
+        }
         setCrosshairPoint(null);
-        canvas.style.cursor = "pointer";
+        canvas.style.cursor = drawingHit.drawing.locked ? "pointer" : drawingHit.target === "handle" ? "grab" : "move";
         return;
       }
     }
@@ -3411,6 +3479,15 @@ function createChart(element, options = {}) {
         pointerDownInfo.moved = true;
       }
     }
+    if (drawingDragState) {
+      if (activePointerId !== null && event.pointerId !== activePointerId) {
+        return;
+      }
+      updateDrawingDrag(point.x, point.y);
+      canvas.style.cursor = drawingDragState.target === "handle" ? "grabbing" : "move";
+      setCrosshairPoint(null);
+      return;
+    }
     if (draftDrawing && activeDrawingTool === "trendline") {
       const nextPoint = drawingPointFromCanvas(point.x, point.y);
       if (nextPoint) {
@@ -3494,7 +3571,8 @@ function createChart(element, options = {}) {
         return;
       }
       if (!activeDrawingTool && getDrawingHit(point.x, point.y)) {
-        canvas.style.cursor = "pointer";
+        const drawingHit = getDrawingHit(point.x, point.y);
+        canvas.style.cursor = drawingHit?.drawing.locked ? "pointer" : drawingHit?.target === "handle" ? "grab" : "move";
         setCrosshairPoint(null);
         return;
       }
@@ -3590,6 +3668,10 @@ function createChart(element, options = {}) {
       }
       actionDragState = null;
     }
+    if (drawingDragState) {
+      drawingDragState = null;
+      emitDrawingsChange();
+    }
     isDragging = false;
     dragMode = null;
     activePointerId = null;

package/dist/index.d.cts

@@ -63,6 +63,7 @@ interface DrawingObjectOptions {
 interface DrawingSelectEvent {
     drawing: DrawingObjectOptions;
     target: "line" | "handle";
+    pointIndex?: number;
     x: number;
     y: number;
 }

package/dist/index.d.ts

@@ -63,6 +63,7 @@ interface DrawingObjectOptions {
 interface DrawingSelectEvent {
     drawing: DrawingObjectOptions;
     target: "line" | "handle";
+    pointIndex?: number;
     x: number;
     y: number;
 }

package/dist/index.js

@@ -935,6 +935,7 @@ function createChart(element, options = {}) {
   let drawings = (options.drawings ?? []).map((drawing) => normalizeDrawingState(drawing));
   let activeDrawingTool = null;
   let draftDrawing = null;
+  let drawingDragState = null;
   let drawingsChangeHandler = null;
   let drawingSelectHandler = null;
   const emitDrawingsChange = () => {
@@ -2019,10 +2020,12 @@ function createChart(element, options = {}) {
         const point = drawing.points[0];
         if (point) {
           const y = clamp(yFromPrice(point.price), chartTop + 1, chartBottom - 1);
+          const handleX = chartRight - 64;
           ctx.beginPath();
           ctx.moveTo(crisp(chartLeft), crisp(y));
           ctx.lineTo(crisp(chartRight), crisp(y));
           ctx.stroke();
+          drawDrawingHandle(handleX, y, drawing.color);
         }
       } else if (drawing.type === "trendline") {
         const first = drawing.points[0];
@@ -3067,6 +3070,15 @@ function createChart(element, options = {}) {
       ...time ? { time: time.toISOString() } : {}
     };
   };
+  const normalizeDrawingPoint = (index, price) => {
+    const roundedIndex = Math.round(index);
+    const time = getTimeForIndex(roundedIndex);
+    return {
+      index,
+      price: roundToPricePrecision(price),
+      ...time ? { time: time.toISOString() } : {}
+    };
+  };
   const canvasXFromDrawingPoint = (point) => {
     if (!drawState) return 0;
     return drawState.chartLeft + (point.index + 0.5 - drawState.xStart) / drawState.xSpan * drawState.chartWidth;
@@ -3092,6 +3104,10 @@ function createChart(element, options = {}) {
         const point = drawing.points[0];
         if (!point) continue;
         const lineY = canvasYFromDrawingPrice(point.price);
+        const handleX = drawState ? drawState.chartRight - 64 : 0;
+        if (Math.hypot(x - handleX, y - lineY) <= 8) {
+          return { drawing, target: "handle", pointIndex: 0 };
+        }
         if (Math.abs(y - lineY) <= 7) {
           return { drawing, target: "line" };
         }
@@ -3103,8 +3119,11 @@ function createChart(element, options = {}) {
         const y1 = canvasYFromDrawingPrice(first.price);
         const x2 = canvasXFromDrawingPoint(second);
         const y2 = canvasYFromDrawingPrice(second.price);
-        if (Math.hypot(x - x1, y - y1) <= 8 || Math.hypot(x - x2, y - y2) <= 8) {
-          return { drawing, target: "handle" };
+        if (Math.hypot(x - x1, y - y1) <= 8) {
+          return { drawing, target: "handle", pointIndex: 0 };
+        }
+        if (Math.hypot(x - x2, y - y2) <= 8) {
+          return { drawing, target: "handle", pointIndex: 1 };
         }
         if (distanceToSegment(x, y, x1, y1, x2, y2) <= 6) {
           return { drawing, target: "line" };
@@ -3212,6 +3231,39 @@ function createChart(element, options = {}) {
     }
     return false;
   };
+  const updateDrawingDrag = (x, y) => {
+    if (!drawingDragState) {
+      return false;
+    }
+    const currentPoint = drawingPointFromCanvas(x, y);
+    if (!currentPoint) {
+      return true;
+    }
+    const deltaIndex = currentPoint.index - drawingDragState.startCanvasPoint.index;
+    const deltaPrice = currentPoint.price - drawingDragState.startCanvasPoint.price;
+    drawings = drawings.map((drawing) => {
+      if (drawing.id !== drawingDragState?.drawingId || drawing.locked) {
+        return drawing;
+      }
+      if (drawingDragState.target === "handle") {
+        return {
+          ...drawing,
+          points: drawing.points.map(
+            (point, index) => index === (drawingDragState?.pointIndex ?? 0) ? normalizeDrawingPoint(currentPoint.index, currentPoint.price) : point
+          )
+        };
+      }
+      return {
+        ...drawing,
+        points: drawingDragState.startPoints.map(
+          (point) => normalizeDrawingPoint(point.index + deltaIndex, point.price + deltaPrice)
+        )
+      };
+    });
+    emitDrawingsChange();
+    draw();
+    return true;
+  };
   let isDragging = false;
   let dragMode = null;
   let lastPointerX = 0;
@@ -3251,6 +3303,7 @@ function createChart(element, options = {}) {
     pointerDownInfo = null;
     orderDragState = null;
     actionDragState = null;
+    drawingDragState = null;
     canvas.style.cursor = "default";
     setCrosshairPoint(null);
   };
@@ -3343,11 +3396,26 @@ function createChart(element, options = {}) {
         drawingSelectHandler?.({
           drawing: serializeDrawing(drawingHit.drawing),
           target: drawingHit.target,
+          ...drawingHit.pointIndex === void 0 ? {} : { pointIndex: drawingHit.pointIndex },
           x: point.x,
           y: point.y
         });
+        if (!drawingHit.drawing.locked) {
+          const startCanvasPoint = drawingPointFromCanvas(point.x, point.y);
+          if (startCanvasPoint) {
+            drawingDragState = {
+              drawingId: drawingHit.drawing.id,
+              target: drawingHit.target,
+              ...drawingHit.pointIndex === void 0 ? {} : { pointIndex: drawingHit.pointIndex },
+              startCanvasPoint,
+              startPoints: drawingHit.drawing.points.map((drawingPoint) => ({ ...drawingPoint }))
+            };
+            activePointerId = event.pointerId;
+            canvas.setPointerCapture(event.pointerId);
+          }
+        }
         setCrosshairPoint(null);
-        canvas.style.cursor = "pointer";
+        canvas.style.cursor = drawingHit.drawing.locked ? "pointer" : drawingHit.target === "handle" ? "grab" : "move";
         return;
       }
     }
@@ -3387,6 +3455,15 @@ function createChart(element, options = {}) {
         pointerDownInfo.moved = true;
       }
     }
+    if (drawingDragState) {
+      if (activePointerId !== null && event.pointerId !== activePointerId) {
+        return;
+      }
+      updateDrawingDrag(point.x, point.y);
+      canvas.style.cursor = drawingDragState.target === "handle" ? "grabbing" : "move";
+      setCrosshairPoint(null);
+      return;
+    }
     if (draftDrawing && activeDrawingTool === "trendline") {
       const nextPoint = drawingPointFromCanvas(point.x, point.y);
       if (nextPoint) {
@@ -3470,7 +3547,8 @@ function createChart(element, options = {}) {
         return;
       }
       if (!activeDrawingTool && getDrawingHit(point.x, point.y)) {
-        canvas.style.cursor = "pointer";
+        const drawingHit = getDrawingHit(point.x, point.y);
+        canvas.style.cursor = drawingHit?.drawing.locked ? "pointer" : drawingHit?.target === "handle" ? "grab" : "move";
         setCrosshairPoint(null);
         return;
       }
@@ -3566,6 +3644,10 @@ function createChart(element, options = {}) {
       }
       actionDragState = null;
     }
+    if (drawingDragState) {
+      drawingDragState = null;
+      emitDrawingsChange();
+    }
     isDragging = false;
     dragMode = null;
     activePointerId = null;

package/package.json

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