hyperprop-charting-library 0.1.70 → 0.1.71

package/dist/hyperprop-charting-library.cjs

@@ -2113,6 +2113,7 @@ function createChart(element, options = {}) {
     };
     const xFromDrawingPoint = (point) => chartLeft + (point.index + 0.5 - xStart) / xSpan * chartWidth;
     const FIB_RATIOS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
+    const FIB_EXT_RATIOS = [0, 0.382, 0.5, 0.618, 1, 1.272, 1.618, 2.618];
     const hexToRgba = (hex, alpha) => {
       const cleaned = hex.replace("#", "");
       if (cleaned.length !== 6) {
@@ -2313,6 +2314,83 @@ function createChart(element, options = {}) {
           });
           ctx.font = prevFont;
         }
+      } else if (drawing.type === "fib-extension") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        const p2 = drawing.points[2];
+        if (p0 && p1) {
+          const x0 = xFromDrawingPoint(p0);
+          const y0 = yFromPrice(p0.price);
+          const x1 = xFromDrawingPoint(p1);
+          const y1 = yFromPrice(p1.price);
+          ctx.save();
+          ctx.strokeStyle = hexToRgba(drawing.color, 0.6);
+          ctx.setLineDash([4, 4]);
+          ctx.lineWidth = 1;
+          ctx.beginPath();
+          ctx.moveTo(x0, y0);
+          ctx.lineTo(x1, y1);
+          if (p2) {
+            ctx.lineTo(xFromDrawingPoint(p2), yFromPrice(p2.price));
+          }
+          ctx.stroke();
+          ctx.restore();
+          drawDrawingHandle(x0, y0, drawing.color);
+          drawDrawingHandle(x1, y1, drawing.color);
+          if (p2) {
+            const x2 = xFromDrawingPoint(p2);
+            const y2 = yFromPrice(p2.price);
+            drawDrawingHandle(x2, y2, drawing.color);
+            const palette = drawing.colors.length > 0 ? drawing.colors : null;
+            const levelColorAt = (index) => palette ? palette[index % palette.length] : drawing.color;
+            const move = p1.price - p0.price;
+            const levelLines = FIB_EXT_RATIOS.map((ratio) => {
+              const price = p2.price + move * ratio;
+              return { ratio, price, y: yFromPrice(price) };
+            });
+            for (let index = 0; index < levelLines.length - 1; index += 1) {
+              const top = levelLines[index];
+              const bottom = levelLines[index + 1];
+              const bandTop = Math.min(top.y, bottom.y);
+              const bandBottom = Math.max(top.y, bottom.y);
+              ctx.save();
+              ctx.fillStyle = hexToRgba(levelColorAt(index), 0.1);
+              ctx.globalAlpha = draft ? 0.5 : 1;
+              ctx.fillRect(chartLeft, bandTop, chartRight - chartLeft, bandBottom - bandTop);
+              ctx.restore();
+            }
+            ctx.save();
+            ctx.lineWidth = drawing.width;
+            applyDashPattern(drawing.style, dashPatterns.dotted, dashPatterns.dashed);
+            levelLines.forEach((level, index) => {
+              ctx.strokeStyle = levelColorAt(index);
+              ctx.beginPath();
+              ctx.moveTo(crisp(chartLeft), crisp(level.y));
+              ctx.lineTo(crisp(chartRight), crisp(level.y));
+              ctx.stroke();
+            });
+            ctx.restore();
+            const prevFont = ctx.font;
+            ctx.font = `500 11px ${mergedOptions.fontFamily}`;
+            levelLines.forEach((level, index) => {
+              const labelText = `${level.ratio} (${formatPrice(level.price)})`;
+              const textWidth = ctx.measureText(labelText).width;
+              const padding = 4;
+              const bgX = chartLeft + 4;
+              const bgY = level.y - 9;
+              ctx.fillStyle = mergedOptions.backgroundColor;
+              fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
+              ctx.fillStyle = levelColorAt(index);
+              ctx.textAlign = "left";
+              ctx.textBaseline = "middle";
+              ctx.fillText(labelText, bgX + padding, bgY + 8);
+            });
+            ctx.font = prevFont;
+            if (drawing.label) {
+              drawDrawingLabel(drawing.label, (x0 + x2) / 2, Math.min(y0, y2), drawing.color);
+            }
+          }
+        }
       }
       ctx.restore();
     };
@@ -3474,6 +3552,41 @@ function createChart(element, options = {}) {
             return { drawing, target: "line" };
           }
         }
+      } else if (drawing.type === "fib-extension") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        const p2 = drawing.points[2];
+        if (!p0 || !p1) continue;
+        const x0 = canvasXFromDrawingPoint(p0);
+        const y0 = canvasYFromDrawingPrice(p0.price);
+        const x1 = canvasXFromDrawingPoint(p1);
+        const y1 = canvasYFromDrawingPrice(p1.price);
+        if (Math.hypot(x - x0, y - y0) <= 8) {
+          return { drawing, target: "handle", pointIndex: 0 };
+        }
+        if (Math.hypot(x - x1, y - y1) <= 8) {
+          return { drawing, target: "handle", pointIndex: 1 };
+        }
+        if (p2) {
+          const x2 = canvasXFromDrawingPoint(p2);
+          const y2 = canvasYFromDrawingPrice(p2.price);
+          if (Math.hypot(x - x2, y - y2) <= 8) {
+            return { drawing, target: "handle", pointIndex: 2 };
+          }
+          const move = p1.price - p0.price;
+          const fibExtRatios = [0, 0.382, 0.5, 0.618, 1, 1.272, 1.618, 2.618];
+          for (const ratio of fibExtRatios) {
+            const lineY = canvasYFromDrawingPrice(p2.price + move * ratio);
+            if (Math.abs(y - lineY) <= 5) {
+              return { drawing, target: "line" };
+            }
+          }
+          if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6 || distanceToSegment(x, y, x1, y1, x2, y2) <= 6) {
+            return { drawing, target: "line" };
+          }
+        } else if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6) {
+          return { drawing, target: "line" };
+        }
       }
     }
     return null;
@@ -3641,6 +3754,39 @@ function createChart(element, options = {}) {
       draw();
       return true;
     }
+    if (activeDrawingTool === "fib-extension") {
+      if (draftDrawing?.type === "fib-extension") {
+        if (draftDrawing.points.length < 3) {
+          draftDrawing = normalizeDrawingState({
+            ...serializeDrawing(draftDrawing),
+            points: [...draftDrawing.points.slice(0, -1), point, point]
+          });
+          draw();
+          return true;
+        }
+        const completed = normalizeDrawingState({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], draftDrawing.points[1], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        draw();
+        return true;
+      }
+      const defaults = getDrawingToolDefaults("fib-extension");
+      draftDrawing = normalizeDrawingState({
+        type: "fib-extension",
+        points: [point, point],
+        color: defaults.color ?? "#2563eb",
+        colors: defaults.colors ?? FIB_DEFAULT_PALETTE,
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 1
+      });
+      draw();
+      return true;
+    }
     return false;
   };
   const setDrawingDefaults = (tool, defaults) => {
@@ -3913,12 +4059,12 @@ function createChart(element, options = {}) {
       setCrosshairPoint(null);
       return;
     }
-    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "fib-retracement")) {
+    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "fib-retracement" || activeDrawingTool === "fib-extension")) {
       const nextPoint = drawingPointFromCanvas(point.x, point.y);
       if (nextPoint) {
         draftDrawing = {
           ...draftDrawing,
-          points: [draftDrawing.points[0], nextPoint]
+          points: [...draftDrawing.points.slice(0, -1), nextPoint]
         };
         canvas.style.cursor = "crosshair";
         draw();

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

@@ -44,7 +44,7 @@ interface ChartOptions {
     drawings?: DrawingObjectOptions[];
 }
 type IndicatorPane = "overlay" | "separate";
-type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement";
+type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension";
 interface DrawingPoint {
     index: number;
     price: number;

package/dist/hyperprop-charting-library.js

@@ -2088,6 +2088,7 @@ function createChart(element, options = {}) {
     };
     const xFromDrawingPoint = (point) => chartLeft + (point.index + 0.5 - xStart) / xSpan * chartWidth;
     const FIB_RATIOS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
+    const FIB_EXT_RATIOS = [0, 0.382, 0.5, 0.618, 1, 1.272, 1.618, 2.618];
     const hexToRgba = (hex, alpha) => {
       const cleaned = hex.replace("#", "");
       if (cleaned.length !== 6) {
@@ -2288,6 +2289,83 @@ function createChart(element, options = {}) {
           });
           ctx.font = prevFont;
         }
+      } else if (drawing.type === "fib-extension") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        const p2 = drawing.points[2];
+        if (p0 && p1) {
+          const x0 = xFromDrawingPoint(p0);
+          const y0 = yFromPrice(p0.price);
+          const x1 = xFromDrawingPoint(p1);
+          const y1 = yFromPrice(p1.price);
+          ctx.save();
+          ctx.strokeStyle = hexToRgba(drawing.color, 0.6);
+          ctx.setLineDash([4, 4]);
+          ctx.lineWidth = 1;
+          ctx.beginPath();
+          ctx.moveTo(x0, y0);
+          ctx.lineTo(x1, y1);
+          if (p2) {
+            ctx.lineTo(xFromDrawingPoint(p2), yFromPrice(p2.price));
+          }
+          ctx.stroke();
+          ctx.restore();
+          drawDrawingHandle(x0, y0, drawing.color);
+          drawDrawingHandle(x1, y1, drawing.color);
+          if (p2) {
+            const x2 = xFromDrawingPoint(p2);
+            const y2 = yFromPrice(p2.price);
+            drawDrawingHandle(x2, y2, drawing.color);
+            const palette = drawing.colors.length > 0 ? drawing.colors : null;
+            const levelColorAt = (index) => palette ? palette[index % palette.length] : drawing.color;
+            const move = p1.price - p0.price;
+            const levelLines = FIB_EXT_RATIOS.map((ratio) => {
+              const price = p2.price + move * ratio;
+              return { ratio, price, y: yFromPrice(price) };
+            });
+            for (let index = 0; index < levelLines.length - 1; index += 1) {
+              const top = levelLines[index];
+              const bottom = levelLines[index + 1];
+              const bandTop = Math.min(top.y, bottom.y);
+              const bandBottom = Math.max(top.y, bottom.y);
+              ctx.save();
+              ctx.fillStyle = hexToRgba(levelColorAt(index), 0.1);
+              ctx.globalAlpha = draft ? 0.5 : 1;
+              ctx.fillRect(chartLeft, bandTop, chartRight - chartLeft, bandBottom - bandTop);
+              ctx.restore();
+            }
+            ctx.save();
+            ctx.lineWidth = drawing.width;
+            applyDashPattern(drawing.style, dashPatterns.dotted, dashPatterns.dashed);
+            levelLines.forEach((level, index) => {
+              ctx.strokeStyle = levelColorAt(index);
+              ctx.beginPath();
+              ctx.moveTo(crisp(chartLeft), crisp(level.y));
+              ctx.lineTo(crisp(chartRight), crisp(level.y));
+              ctx.stroke();
+            });
+            ctx.restore();
+            const prevFont = ctx.font;
+            ctx.font = `500 11px ${mergedOptions.fontFamily}`;
+            levelLines.forEach((level, index) => {
+              const labelText = `${level.ratio} (${formatPrice(level.price)})`;
+              const textWidth = ctx.measureText(labelText).width;
+              const padding = 4;
+              const bgX = chartLeft + 4;
+              const bgY = level.y - 9;
+              ctx.fillStyle = mergedOptions.backgroundColor;
+              fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
+              ctx.fillStyle = levelColorAt(index);
+              ctx.textAlign = "left";
+              ctx.textBaseline = "middle";
+              ctx.fillText(labelText, bgX + padding, bgY + 8);
+            });
+            ctx.font = prevFont;
+            if (drawing.label) {
+              drawDrawingLabel(drawing.label, (x0 + x2) / 2, Math.min(y0, y2), drawing.color);
+            }
+          }
+        }
       }
       ctx.restore();
     };
@@ -3449,6 +3527,41 @@ function createChart(element, options = {}) {
             return { drawing, target: "line" };
           }
         }
+      } else if (drawing.type === "fib-extension") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        const p2 = drawing.points[2];
+        if (!p0 || !p1) continue;
+        const x0 = canvasXFromDrawingPoint(p0);
+        const y0 = canvasYFromDrawingPrice(p0.price);
+        const x1 = canvasXFromDrawingPoint(p1);
+        const y1 = canvasYFromDrawingPrice(p1.price);
+        if (Math.hypot(x - x0, y - y0) <= 8) {
+          return { drawing, target: "handle", pointIndex: 0 };
+        }
+        if (Math.hypot(x - x1, y - y1) <= 8) {
+          return { drawing, target: "handle", pointIndex: 1 };
+        }
+        if (p2) {
+          const x2 = canvasXFromDrawingPoint(p2);
+          const y2 = canvasYFromDrawingPrice(p2.price);
+          if (Math.hypot(x - x2, y - y2) <= 8) {
+            return { drawing, target: "handle", pointIndex: 2 };
+          }
+          const move = p1.price - p0.price;
+          const fibExtRatios = [0, 0.382, 0.5, 0.618, 1, 1.272, 1.618, 2.618];
+          for (const ratio of fibExtRatios) {
+            const lineY = canvasYFromDrawingPrice(p2.price + move * ratio);
+            if (Math.abs(y - lineY) <= 5) {
+              return { drawing, target: "line" };
+            }
+          }
+          if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6 || distanceToSegment(x, y, x1, y1, x2, y2) <= 6) {
+            return { drawing, target: "line" };
+          }
+        } else if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6) {
+          return { drawing, target: "line" };
+        }
       }
     }
     return null;
@@ -3616,6 +3729,39 @@ function createChart(element, options = {}) {
       draw();
       return true;
     }
+    if (activeDrawingTool === "fib-extension") {
+      if (draftDrawing?.type === "fib-extension") {
+        if (draftDrawing.points.length < 3) {
+          draftDrawing = normalizeDrawingState({
+            ...serializeDrawing(draftDrawing),
+            points: [...draftDrawing.points.slice(0, -1), point, point]
+          });
+          draw();
+          return true;
+        }
+        const completed = normalizeDrawingState({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], draftDrawing.points[1], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        draw();
+        return true;
+      }
+      const defaults = getDrawingToolDefaults("fib-extension");
+      draftDrawing = normalizeDrawingState({
+        type: "fib-extension",
+        points: [point, point],
+        color: defaults.color ?? "#2563eb",
+        colors: defaults.colors ?? FIB_DEFAULT_PALETTE,
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 1
+      });
+      draw();
+      return true;
+    }
     return false;
   };
   const setDrawingDefaults = (tool, defaults) => {
@@ -3888,12 +4034,12 @@ function createChart(element, options = {}) {
       setCrosshairPoint(null);
       return;
     }
-    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "fib-retracement")) {
+    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "fib-retracement" || activeDrawingTool === "fib-extension")) {
       const nextPoint = drawingPointFromCanvas(point.x, point.y);
       if (nextPoint) {
         draftDrawing = {
           ...draftDrawing,
-          points: [draftDrawing.points[0], nextPoint]
+          points: [...draftDrawing.points.slice(0, -1), nextPoint]
         };
         canvas.style.cursor = "crosshair";
         draw();

package/dist/index.cjs

@@ -2113,6 +2113,7 @@ function createChart(element, options = {}) {
     };
     const xFromDrawingPoint = (point) => chartLeft + (point.index + 0.5 - xStart) / xSpan * chartWidth;
     const FIB_RATIOS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
+    const FIB_EXT_RATIOS = [0, 0.382, 0.5, 0.618, 1, 1.272, 1.618, 2.618];
     const hexToRgba = (hex, alpha) => {
       const cleaned = hex.replace("#", "");
       if (cleaned.length !== 6) {
@@ -2313,6 +2314,83 @@ function createChart(element, options = {}) {
           });
           ctx.font = prevFont;
         }
+      } else if (drawing.type === "fib-extension") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        const p2 = drawing.points[2];
+        if (p0 && p1) {
+          const x0 = xFromDrawingPoint(p0);
+          const y0 = yFromPrice(p0.price);
+          const x1 = xFromDrawingPoint(p1);
+          const y1 = yFromPrice(p1.price);
+          ctx.save();
+          ctx.strokeStyle = hexToRgba(drawing.color, 0.6);
+          ctx.setLineDash([4, 4]);
+          ctx.lineWidth = 1;
+          ctx.beginPath();
+          ctx.moveTo(x0, y0);
+          ctx.lineTo(x1, y1);
+          if (p2) {
+            ctx.lineTo(xFromDrawingPoint(p2), yFromPrice(p2.price));
+          }
+          ctx.stroke();
+          ctx.restore();
+          drawDrawingHandle(x0, y0, drawing.color);
+          drawDrawingHandle(x1, y1, drawing.color);
+          if (p2) {
+            const x2 = xFromDrawingPoint(p2);
+            const y2 = yFromPrice(p2.price);
+            drawDrawingHandle(x2, y2, drawing.color);
+            const palette = drawing.colors.length > 0 ? drawing.colors : null;
+            const levelColorAt = (index) => palette ? palette[index % palette.length] : drawing.color;
+            const move = p1.price - p0.price;
+            const levelLines = FIB_EXT_RATIOS.map((ratio) => {
+              const price = p2.price + move * ratio;
+              return { ratio, price, y: yFromPrice(price) };
+            });
+            for (let index = 0; index < levelLines.length - 1; index += 1) {
+              const top = levelLines[index];
+              const bottom = levelLines[index + 1];
+              const bandTop = Math.min(top.y, bottom.y);
+              const bandBottom = Math.max(top.y, bottom.y);
+              ctx.save();
+              ctx.fillStyle = hexToRgba(levelColorAt(index), 0.1);
+              ctx.globalAlpha = draft ? 0.5 : 1;
+              ctx.fillRect(chartLeft, bandTop, chartRight - chartLeft, bandBottom - bandTop);
+              ctx.restore();
+            }
+            ctx.save();
+            ctx.lineWidth = drawing.width;
+            applyDashPattern(drawing.style, dashPatterns.dotted, dashPatterns.dashed);
+            levelLines.forEach((level, index) => {
+              ctx.strokeStyle = levelColorAt(index);
+              ctx.beginPath();
+              ctx.moveTo(crisp(chartLeft), crisp(level.y));
+              ctx.lineTo(crisp(chartRight), crisp(level.y));
+              ctx.stroke();
+            });
+            ctx.restore();
+            const prevFont = ctx.font;
+            ctx.font = `500 11px ${mergedOptions.fontFamily}`;
+            levelLines.forEach((level, index) => {
+              const labelText = `${level.ratio} (${formatPrice(level.price)})`;
+              const textWidth = ctx.measureText(labelText).width;
+              const padding = 4;
+              const bgX = chartLeft + 4;
+              const bgY = level.y - 9;
+              ctx.fillStyle = mergedOptions.backgroundColor;
+              fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
+              ctx.fillStyle = levelColorAt(index);
+              ctx.textAlign = "left";
+              ctx.textBaseline = "middle";
+              ctx.fillText(labelText, bgX + padding, bgY + 8);
+            });
+            ctx.font = prevFont;
+            if (drawing.label) {
+              drawDrawingLabel(drawing.label, (x0 + x2) / 2, Math.min(y0, y2), drawing.color);
+            }
+          }
+        }
       }
       ctx.restore();
     };
@@ -3474,6 +3552,41 @@ function createChart(element, options = {}) {
             return { drawing, target: "line" };
           }
         }
+      } else if (drawing.type === "fib-extension") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        const p2 = drawing.points[2];
+        if (!p0 || !p1) continue;
+        const x0 = canvasXFromDrawingPoint(p0);
+        const y0 = canvasYFromDrawingPrice(p0.price);
+        const x1 = canvasXFromDrawingPoint(p1);
+        const y1 = canvasYFromDrawingPrice(p1.price);
+        if (Math.hypot(x - x0, y - y0) <= 8) {
+          return { drawing, target: "handle", pointIndex: 0 };
+        }
+        if (Math.hypot(x - x1, y - y1) <= 8) {
+          return { drawing, target: "handle", pointIndex: 1 };
+        }
+        if (p2) {
+          const x2 = canvasXFromDrawingPoint(p2);
+          const y2 = canvasYFromDrawingPrice(p2.price);
+          if (Math.hypot(x - x2, y - y2) <= 8) {
+            return { drawing, target: "handle", pointIndex: 2 };
+          }
+          const move = p1.price - p0.price;
+          const fibExtRatios = [0, 0.382, 0.5, 0.618, 1, 1.272, 1.618, 2.618];
+          for (const ratio of fibExtRatios) {
+            const lineY = canvasYFromDrawingPrice(p2.price + move * ratio);
+            if (Math.abs(y - lineY) <= 5) {
+              return { drawing, target: "line" };
+            }
+          }
+          if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6 || distanceToSegment(x, y, x1, y1, x2, y2) <= 6) {
+            return { drawing, target: "line" };
+          }
+        } else if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6) {
+          return { drawing, target: "line" };
+        }
       }
     }
     return null;
@@ -3641,6 +3754,39 @@ function createChart(element, options = {}) {
       draw();
       return true;
     }
+    if (activeDrawingTool === "fib-extension") {
+      if (draftDrawing?.type === "fib-extension") {
+        if (draftDrawing.points.length < 3) {
+          draftDrawing = normalizeDrawingState({
+            ...serializeDrawing(draftDrawing),
+            points: [...draftDrawing.points.slice(0, -1), point, point]
+          });
+          draw();
+          return true;
+        }
+        const completed = normalizeDrawingState({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], draftDrawing.points[1], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        draw();
+        return true;
+      }
+      const defaults = getDrawingToolDefaults("fib-extension");
+      draftDrawing = normalizeDrawingState({
+        type: "fib-extension",
+        points: [point, point],
+        color: defaults.color ?? "#2563eb",
+        colors: defaults.colors ?? FIB_DEFAULT_PALETTE,
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 1
+      });
+      draw();
+      return true;
+    }
     return false;
   };
   const setDrawingDefaults = (tool, defaults) => {
@@ -3913,12 +4059,12 @@ function createChart(element, options = {}) {
       setCrosshairPoint(null);
       return;
     }
-    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "fib-retracement")) {
+    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "fib-retracement" || activeDrawingTool === "fib-extension")) {
       const nextPoint = drawingPointFromCanvas(point.x, point.y);
       if (nextPoint) {
         draftDrawing = {
           ...draftDrawing,
-          points: [draftDrawing.points[0], nextPoint]
+          points: [...draftDrawing.points.slice(0, -1), nextPoint]
         };
         canvas.style.cursor = "crosshair";
         draw();

package/dist/index.d.cts

@@ -44,7 +44,7 @@ interface ChartOptions {
     drawings?: DrawingObjectOptions[];
 }
 type IndicatorPane = "overlay" | "separate";
-type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement";
+type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension";
 interface DrawingPoint {
     index: number;
     price: number;

package/dist/index.d.ts

@@ -44,7 +44,7 @@ interface ChartOptions {
     drawings?: DrawingObjectOptions[];
 }
 type IndicatorPane = "overlay" | "separate";
-type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement";
+type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension";
 interface DrawingPoint {
     index: number;
     price: number;

package/dist/index.js

@@ -2088,6 +2088,7 @@ function createChart(element, options = {}) {
     };
     const xFromDrawingPoint = (point) => chartLeft + (point.index + 0.5 - xStart) / xSpan * chartWidth;
     const FIB_RATIOS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
+    const FIB_EXT_RATIOS = [0, 0.382, 0.5, 0.618, 1, 1.272, 1.618, 2.618];
     const hexToRgba = (hex, alpha) => {
       const cleaned = hex.replace("#", "");
       if (cleaned.length !== 6) {
@@ -2288,6 +2289,83 @@ function createChart(element, options = {}) {
           });
           ctx.font = prevFont;
         }
+      } else if (drawing.type === "fib-extension") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        const p2 = drawing.points[2];
+        if (p0 && p1) {
+          const x0 = xFromDrawingPoint(p0);
+          const y0 = yFromPrice(p0.price);
+          const x1 = xFromDrawingPoint(p1);
+          const y1 = yFromPrice(p1.price);
+          ctx.save();
+          ctx.strokeStyle = hexToRgba(drawing.color, 0.6);
+          ctx.setLineDash([4, 4]);
+          ctx.lineWidth = 1;
+          ctx.beginPath();
+          ctx.moveTo(x0, y0);
+          ctx.lineTo(x1, y1);
+          if (p2) {
+            ctx.lineTo(xFromDrawingPoint(p2), yFromPrice(p2.price));
+          }
+          ctx.stroke();
+          ctx.restore();
+          drawDrawingHandle(x0, y0, drawing.color);
+          drawDrawingHandle(x1, y1, drawing.color);
+          if (p2) {
+            const x2 = xFromDrawingPoint(p2);
+            const y2 = yFromPrice(p2.price);
+            drawDrawingHandle(x2, y2, drawing.color);
+            const palette = drawing.colors.length > 0 ? drawing.colors : null;
+            const levelColorAt = (index) => palette ? palette[index % palette.length] : drawing.color;
+            const move = p1.price - p0.price;
+            const levelLines = FIB_EXT_RATIOS.map((ratio) => {
+              const price = p2.price + move * ratio;
+              return { ratio, price, y: yFromPrice(price) };
+            });
+            for (let index = 0; index < levelLines.length - 1; index += 1) {
+              const top = levelLines[index];
+              const bottom = levelLines[index + 1];
+              const bandTop = Math.min(top.y, bottom.y);
+              const bandBottom = Math.max(top.y, bottom.y);
+              ctx.save();
+              ctx.fillStyle = hexToRgba(levelColorAt(index), 0.1);
+              ctx.globalAlpha = draft ? 0.5 : 1;
+              ctx.fillRect(chartLeft, bandTop, chartRight - chartLeft, bandBottom - bandTop);
+              ctx.restore();
+            }
+            ctx.save();
+            ctx.lineWidth = drawing.width;
+            applyDashPattern(drawing.style, dashPatterns.dotted, dashPatterns.dashed);
+            levelLines.forEach((level, index) => {
+              ctx.strokeStyle = levelColorAt(index);
+              ctx.beginPath();
+              ctx.moveTo(crisp(chartLeft), crisp(level.y));
+              ctx.lineTo(crisp(chartRight), crisp(level.y));
+              ctx.stroke();
+            });
+            ctx.restore();
+            const prevFont = ctx.font;
+            ctx.font = `500 11px ${mergedOptions.fontFamily}`;
+            levelLines.forEach((level, index) => {
+              const labelText = `${level.ratio} (${formatPrice(level.price)})`;
+              const textWidth = ctx.measureText(labelText).width;
+              const padding = 4;
+              const bgX = chartLeft + 4;
+              const bgY = level.y - 9;
+              ctx.fillStyle = mergedOptions.backgroundColor;
+              fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
+              ctx.fillStyle = levelColorAt(index);
+              ctx.textAlign = "left";
+              ctx.textBaseline = "middle";
+              ctx.fillText(labelText, bgX + padding, bgY + 8);
+            });
+            ctx.font = prevFont;
+            if (drawing.label) {
+              drawDrawingLabel(drawing.label, (x0 + x2) / 2, Math.min(y0, y2), drawing.color);
+            }
+          }
+        }
       }
       ctx.restore();
     };
@@ -3449,6 +3527,41 @@ function createChart(element, options = {}) {
             return { drawing, target: "line" };
           }
         }
+      } else if (drawing.type === "fib-extension") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        const p2 = drawing.points[2];
+        if (!p0 || !p1) continue;
+        const x0 = canvasXFromDrawingPoint(p0);
+        const y0 = canvasYFromDrawingPrice(p0.price);
+        const x1 = canvasXFromDrawingPoint(p1);
+        const y1 = canvasYFromDrawingPrice(p1.price);
+        if (Math.hypot(x - x0, y - y0) <= 8) {
+          return { drawing, target: "handle", pointIndex: 0 };
+        }
+        if (Math.hypot(x - x1, y - y1) <= 8) {
+          return { drawing, target: "handle", pointIndex: 1 };
+        }
+        if (p2) {
+          const x2 = canvasXFromDrawingPoint(p2);
+          const y2 = canvasYFromDrawingPrice(p2.price);
+          if (Math.hypot(x - x2, y - y2) <= 8) {
+            return { drawing, target: "handle", pointIndex: 2 };
+          }
+          const move = p1.price - p0.price;
+          const fibExtRatios = [0, 0.382, 0.5, 0.618, 1, 1.272, 1.618, 2.618];
+          for (const ratio of fibExtRatios) {
+            const lineY = canvasYFromDrawingPrice(p2.price + move * ratio);
+            if (Math.abs(y - lineY) <= 5) {
+              return { drawing, target: "line" };
+            }
+          }
+          if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6 || distanceToSegment(x, y, x1, y1, x2, y2) <= 6) {
+            return { drawing, target: "line" };
+          }
+        } else if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6) {
+          return { drawing, target: "line" };
+        }
       }
     }
     return null;
@@ -3616,6 +3729,39 @@ function createChart(element, options = {}) {
       draw();
       return true;
     }
+    if (activeDrawingTool === "fib-extension") {
+      if (draftDrawing?.type === "fib-extension") {
+        if (draftDrawing.points.length < 3) {
+          draftDrawing = normalizeDrawingState({
+            ...serializeDrawing(draftDrawing),
+            points: [...draftDrawing.points.slice(0, -1), point, point]
+          });
+          draw();
+          return true;
+        }
+        const completed = normalizeDrawingState({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], draftDrawing.points[1], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        draw();
+        return true;
+      }
+      const defaults = getDrawingToolDefaults("fib-extension");
+      draftDrawing = normalizeDrawingState({
+        type: "fib-extension",
+        points: [point, point],
+        color: defaults.color ?? "#2563eb",
+        colors: defaults.colors ?? FIB_DEFAULT_PALETTE,
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 1
+      });
+      draw();
+      return true;
+    }
     return false;
   };
   const setDrawingDefaults = (tool, defaults) => {
@@ -3888,12 +4034,12 @@ function createChart(element, options = {}) {
       setCrosshairPoint(null);
       return;
     }
-    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "fib-retracement")) {
+    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "fib-retracement" || activeDrawingTool === "fib-extension")) {
       const nextPoint = drawingPointFromCanvas(point.x, point.y);
       if (nextPoint) {
         draftDrawing = {
           ...draftDrawing,
-          points: [draftDrawing.points[0], nextPoint]
+          points: [...draftDrawing.points.slice(0, -1), nextPoint]
         };
         canvas.style.cursor = "crosshair";
         draw();

package/docs/API.md

@@ -416,11 +416,12 @@ Volume style inputs:
 Drawings are user-created chart tools, separate from indicators. They are interactive chart objects like horizontal lines and trendlines.
 
 - `id?: string`
-- `type: "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement"`
+- `type: "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension"`
   - `horizontal-line` / `vertical-line`: single-point, full-width/full-height line (one click to place)
   - `trendline`: two-point segment (click start, click end)
   - `ray`: two-point line that extends infinitely past the second point
   - `fib-retracement`: two-point retracement with levels/bands
+  - `fib-extension`: trend-based three-point extension (click trend start, trend end, then the projection origin); levels project from the third point by the first→second move
 - `points: DrawingPoint[]`
 - `visible?: boolean`
 - `color?: string`
@@ -447,6 +448,7 @@ chart.setActiveDrawingTool("vertical-line");   // next plot click creates a vert
 chart.setActiveDrawingTool("trendline");       // first click starts, second click commits
 chart.setActiveDrawingTool("ray");             // first click starts, second click commits (extends past p2)
 chart.setActiveDrawingTool("fib-retracement"); // first click starts, second click commits
+chart.setActiveDrawingTool("fib-extension");   // three clicks: trend start, trend end, projection origin
 chart.setActiveDrawingTool(null);              // back to normal cursor/pan
 ```
 

package/package.json

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