@pradeepjadhav/trading-reload-chart 1.1.0 → 1.2.0

package/dist/canvas/layers/ShapesLayer/ShapesLayer.d.ts

@@ -21,6 +21,7 @@ export declare class ShapesLayer {
     private onShapeModified?;
     private onShapeSelected?;
     private onShapeDoubleClicked?;
+    private onShapeDeleteRequested?;
     private onToolChange?;
     constructor(options: ShapesLayerOptions);
     setCandles(candles: Candle[]): void;

package/dist/canvas/layers/ShapesLayer/ShapesLayer.types.d.ts

@@ -441,6 +441,7 @@ export type ShapesLayerOptions = {
     onShapeModified?: (payload: ShapeModifiedPayload) => void;
     onShapeSelected?: (payload: ShapeSelectedPayload | null) => void;
     onShapeDoubleClicked?: (payload: ShapeSelectedPayload) => void;
+    onShapeDeleteRequested?: (shapeId: ShapeId) => void;
     onToolChange?: (tool: ShapeToolType | null) => void;
 };
 export type InternalDragState = {

package/dist/chart/ChartController.types.d.ts

@@ -205,6 +205,17 @@ export type ChartControllerProps = {
      * ```
      */
     onShapeDoubleClicked?: (payload: ShapeSelectedPayload) => void;
+    /**
+     * Called when the user presses Delete (or Backspace) while a shape is selected.
+     *
+     * The parent owns the shape list and must remove the requested shape.
+     *
+     * @example
+     * ```ts
+     * onShapeDeleteRequested: (shapeId) => removeShape(shapeId)
+     * ```
+     */
+    onShapeDeleteRequested?: (shapeId: string) => void;
     /**
      * Called when the chart wants the parent to change the active drawing tool.
      *

package/dist/config/chartConfig.types.d.ts

@@ -381,8 +381,8 @@ export type TradeHandlesConfig = {
  * ```ts
  * const arrow: ClosedTradeIndicatorArrowConfig = {
  *   visible: true,
- *   width: 60,
- *   height: 30,
+ *   width: 20,
+ *   height: 10,
  *   headHeightRatio: 0.45,
  *   shaftWidthRatio: 6,
  *   buyColor: "#22c55e",
@@ -414,7 +414,7 @@ export type ClosedTradeIndicatorArrowConfig = {
  * ```ts
  * const closedTrades: ClosedTradeIndicatorsConfig = {
  *   visible: true,
- *   arrow: { visible: true, width: 60, height: 30, headHeightRatio: 0.45, shaftWidthRatio: 6, buyColor: "#22c55e", sellColor: "#ef4444", buyBorderColor: "#ffffff", sellBorderColor: "#ffffff", borderWidth: 1, opacity: 1 },
+ *   arrow: { visible: true, width: 20, height: 10, headHeightRatio: 0.45, shaftWidthRatio: 6, buyColor: "#22c55e", sellColor: "#ef4444", buyBorderColor: "#ffffff", sellBorderColor: "#ffffff", borderWidth: 1, opacity: 1 },
  *   connectorLine: { width: 1, color: "#ffffff", opacity: 0.65, style: "dotted", dash: [2, 4] },
  * };
  * ```
@@ -622,7 +622,7 @@ export type PreviousDayHighLowConfig = {
  *   volume: { visible: true, bullishColor: "#22c55e", bearishColor: "#ef4444", opacity: 0.35, height: 200, bottomOffset: 0, minBarHeight: 1 },
  *   crosshair: { color: "rgba(255,255,255,0.35)", thickness: 1, style: "dashed" },
  *   tradeHandles: {} as TradeHandlesConfig,
- *   closedTradeIndicators: { visible: true, arrow: { visible: true, width: 60, height: 30, headHeightRatio: 0.45, shaftWidthRatio: 6, buyColor: "#22c55e", sellColor: "#ef4444", buyBorderColor: "#ffffff", sellBorderColor: "#ffffff", borderWidth: 1, opacity: 1 }, connectorLine: { width: 1, color: "#ffffff", opacity: 0.65, style: "dotted", dash: [2, 4] } },
+ *   closedTradeIndicators: { visible: true, arrow: { visible: true, width: 20, height: 10, headHeightRatio: 0.45, shaftWidthRatio: 6, buyColor: "#22c55e", sellColor: "#ef4444", buyBorderColor: "#ffffff", sellBorderColor: "#ffffff", borderWidth: 1, opacity: 1 }, connectorLine: { width: 1, color: "#ffffff", opacity: 0.65, style: "dotted", dash: [2, 4] } },
  *   colors: { bullish: "#22c55e", bearish: "#ef4444", background: "#0b1220" },
  *   axis: { axisX: { height: 30, backgroundColor: "#0b1220", borderColor: "#1f2937", borderWidth: 1, textColor: "#cbd5e1", font: "12px Arial", textAlign: "center", tickColor: "#334155", tickWidth: 1, tickLength: 4, labelOffsetY: 16, minLabelGap: 16, crosshairLabel: { backgroundColor: "#111827", borderColor: "#111827", borderWidth: 1, textColor: "#ffffff", font: "12px Arial", paddingX: 8, height: 26 } }, axisY: { width: 80, backgroundColor: "#0b1220", borderColor: "#1f2937", borderWidth: 1, textColor: "#cbd5e1", font: "12px Arial", textAlign: "left", tickCount: 12, tickColor: "#334155", tickWidth: 1, tickLength: 4, tickGap: 64, labelOffsetX: 8, crosshairLabel: { backgroundColor: "#111827", borderColor: "#111827", borderWidth: 1, textColor: "#ffffff", font: "12px Arial", paddingX: 8, height: 20 } } },
  *   shapes: { trendline: { lineColor: "#22c55e" } },

package/dist/trading-reload-chart.js

@@ -1,5 +1,5 @@
-import { forwardRef as Rt, useEffect as st, useImperativeHandle as Dt, useRef as N } from "react";
-import { jsx as At } from "react/jsx-runtime";
+import { forwardRef as Mt, useEffect as st, useImperativeHandle as Rt, useRef as _ } from "react";
+import { jsx as Dt } from "react/jsx-runtime";
 var h = {
   primary: "#7959F7",
   blue: "#2962FF",
@@ -39,7 +39,7 @@ var h = {
   midLineOpacity: 0.9,
   midLineWidth: 0.5,
   midLineStyle: "solid"
-}, Xt = {
+}, At = {
   trendline: {
     lineWidth: 1,
     lineColor: y.blue,
@@ -134,12 +134,12 @@ var h = {
   opacity: 0.9,
   style: "dashed",
   dash: [4, 4]
-}, _ = {
+}, G = {
   width: 1,
   opacity: 0.9,
   style: "dotted",
   dash: [2, 4]
-}, G = {
+}, U = {
   height: 22,
   widthVolume: 60,
   widthPNL: 80,
@@ -299,7 +299,7 @@ var h = {
     },
     slHandle: {
       handle: {
-        ...G,
+        ...U,
         borderColor: h.red,
         borderOpacity: 0.4,
         backgroundColor: h.slBackground,
@@ -313,7 +313,7 @@ var h = {
     },
     tpHandle: {
       handle: {
-        ...G,
+        ...U,
         borderColor: h.green,
         borderOpacity: 0.4,
         backgroundColor: h.tpBackground,
@@ -326,7 +326,7 @@ var h = {
       }
     },
     startPriceHandle: {
-      handle: { ...G },
+      handle: { ...U },
       handleLine: {
         width: 1,
         color: h.blue,
@@ -362,11 +362,11 @@ var h = {
         textColor: h.green
       },
       temporarySlLine: {
-        ..._,
+        ...G,
         color: h.red
       },
       temporaryTpLine: {
-        ..._,
+        ...G,
         color: h.green
       }
     }
@@ -375,8 +375,8 @@ var h = {
     visible: !0,
     arrow: {
       visible: !0,
-      width: 60,
-      height: 30,
+      width: 20,
+      height: 10,
       headHeightRatio: 0.45,
       shaftWidthRatio: 6,
       buyColor: h.green,
@@ -387,7 +387,7 @@ var h = {
       opacity: 1
     },
     connectorLine: {
-      ..._,
+      ...G,
       color: h.white,
       opacity: 0.65
     }
@@ -397,7 +397,7 @@ var h = {
     bearish: h.red,
     background: h.background
   },
-  shapes: Xt
+  shapes: At
 }, lt = [
   300 * 1e3,
   900 * 1e3,
@@ -408,27 +408,27 @@ var h = {
   360 * 60 * 1e3,
   720 * 60 * 1e3,
   1440 * 60 * 1e3
-], It = (t) => {
+], Xt = (t) => {
   if (t.length < 2) return 900 * 1e3;
   const e = [];
   for (let i = 1; i < Math.min(t.length, 10); i++) e.push(t[i].time - t[i - 1].time);
   return e.sort((i, s) => i - s), e[Math.floor(e.length / 2)];
-}, Bt = ({ candleSpacing: t, candleTimeframeMs: e, labelWidth: i, minLabelGap: s }) => {
+}, It = ({ candleSpacing: t, candleTimeframeMs: e, labelWidth: i, minLabelGap: s }) => {
   if (t <= 0 || e <= 0) return lt[0];
   const r = i + s;
   for (const a of lt) if (a / e * t >= r) return a;
   const n = 1440 * 60 * 1e3, o = n / e * t;
   return n * Math.ceil(r / o);
-}, Wt = (t, e) => {
+}, Bt = (t, e) => {
   const i = new Date(t), s = (i.getHours() * 60 + i.getMinutes()) * 60 * 1e3 + i.getSeconds() * 1e3 + i.getMilliseconds();
   return e >= 1440 * 60 * 1e3 ? s === 0 : s % e === 0;
-}, Ft = (t) => {
+}, Wt = (t) => {
   const e = new Date(t), i = e.getHours(), s = e.getMinutes();
   return i === 0 && s === 0 ? String(e.getDate()) : `${String(i).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
-}, Yt = (t) => {
+}, Ft = (t) => {
   const e = new Date(t), i = e.toLocaleDateString("en-US", { weekday: "short" }), s = e.toLocaleDateString("en-US", { month: "short" });
   return `${i} ${e.getDate()} ${s} ${e.getHours().toString().padStart(2, "0")}.${e.getMinutes().toString().padStart(2, "0")}`;
-}, Ot = class {
+}, Yt = class {
   #t;
   #e;
   candles;
@@ -461,7 +461,7 @@ var h = {
   }
   drawCrosshairTimeLabel() {
     if (!this.crosshair.visible || !this.crosshair.candle) return;
-    const t = this.#e, e = this.#t.width, i = this.#t.height, s = c.axis.axisX.crosshairLabel, r = Yt(this.crosshair.candle.time);
+    const t = this.#e, e = this.#t.width, i = this.#t.height, s = c.axis.axisX.crosshairLabel, r = Ft(this.crosshair.candle.time);
     t.save(), t.font = s.font;
     const n = t.measureText(r).width + s.paddingX * 2, o = s.height, a = this.getCrosshairLabelX(n, e), l = Math.max(0, (i - o) / 2);
     t.fillStyle = s.backgroundColor, t.fillRect(a, l, n, o), t.strokeStyle = s.borderColor, t.lineWidth = s.borderWidth, t.strokeRect(a, l, n, o), t.fillStyle = s.textColor, t.textAlign = "center", t.textBaseline = "middle", t.fillText(r, a + n / 2, l + o / 2), t.restore();
@@ -479,9 +479,9 @@ var h = {
   }
   drawAxisLabels() {
     if (!this.viewport) return;
-    const t = this.#e, e = c.axis.axisX, i = this.#t.width, s = It(this.candles);
+    const t = this.#e, e = c.axis.axisX, i = this.#t.width, s = Xt(this.candles);
     t.save(), t.font = e.font, t.fillStyle = e.textColor, t.textAlign = e.textAlign, t.textBaseline = "middle";
-    const r = t.measureText("00:00").width, n = Bt({
+    const r = t.measureText("00:00").width, n = It({
       candleSpacing: this.viewport.candleSpacing,
       candleTimeframeMs: s,
       labelWidth: r,
@@ -489,9 +489,9 @@ var h = {
     }), { startIndex: o, endIndex: a } = this.getVisibleCandleIndexRange(i);
     for (let l = o; l <= a; l += 1) {
       const d = this.getSlotTime(l, s);
-      if (d === null || !Wt(d, n)) continue;
-      const u = this.getCandleCenterX(l), g = Ft(d), m = t.measureText(g).width;
-      this.isLabelOutsideCanvas(u, m, i) || (this.drawTick(u), this.drawLabel(g, u));
+      if (d === null || !Bt(d, n)) continue;
+      const u = this.getCandleCenterX(l), g = Wt(d), v = t.measureText(g).width;
+      this.isLabelOutsideCanvas(u, v, i) || (this.drawTick(u), this.drawLabel(g, u));
     }
     t.restore();
   }
@@ -535,7 +535,7 @@ var h = {
   getCrosshairLabelX(t, e) {
     return Math.max(120, Math.min(e - t, this.crosshair.x - t / 2));
   }
-}, p = (t, e = 5) => Number(t.toFixed(e)), O = ({ price: t, minPrice: e, priceRange: i, chartHeight: s }) => s - (t - e) / i * s, mt = ({ y: t, minPrice: e, priceRange: i, chartHeight: s }) => e + (1 - t / s) * i, Et = ({ priceRange: t, canvasHeight: e }) => {
+}, p = (t, e = 5) => Number(t.toFixed(e)), E = ({ price: t, minPrice: e, priceRange: i, chartHeight: s }) => s - (t - e) / i * s, mt = ({ y: t, minPrice: e, priceRange: i, chartHeight: s }) => e + (1 - t / s) * i, Et = ({ priceRange: t, canvasHeight: e }) => {
   const i = t / (e / c.axis.axisY.tickGap), s = 10 ** Math.floor(Math.log10(i));
   for (const r of [
     1,
@@ -547,7 +547,7 @@ var h = {
     if (n >= i) return n;
   }
   return 10 * s;
-}, zt = class {
+}, Ot = class {
   #t;
   #e;
   viewport = null;
@@ -614,7 +614,7 @@ var h = {
     };
   }
   getPriceY(t, e) {
-    return this.viewport ? O({
+    return this.viewport ? E({
       price: t,
       minPrice: this.viewport.minPrice,
       priceRange: this.viewport.priceRange,
@@ -635,7 +635,7 @@ var h = {
   getCrosshairLabelY(t, e) {
     return Math.max(0, Math.min(e - t, this.crosshair.y - t / 2));
   }
-}, Vt = class {
+}, zt = class {
   #t;
   #e;
   mouseX = 0;
@@ -712,7 +712,7 @@ var h = {
   drawLine({ ctx: t, fromX: e, fromY: i, toX: s, toY: r }) {
     t.beginPath(), t.moveTo(e, i), t.lineTo(s, r), t.stroke();
   }
-}, F = 60 * 1e3, Ct = 60 * F, Nt = 24 * Ct, _t = class {
+}, F = 60 * 1e3, Ct = 60 * F, Vt = 24 * Ct, Nt = class {
   #t;
   #e;
   candles;
@@ -930,7 +930,7 @@ var h = {
   }
   getInitialFallbackPercent() {
     const t = this.detectCandleTimeframeMs();
-    return t <= F ? 25e-4 : t <= 5 * F ? 35e-4 : t <= 15 * F ? 5e-3 : t <= Ct ? 75e-4 : (t < Nt, 0.01);
+    return t <= F ? 25e-4 : t <= 5 * F ? 35e-4 : t <= 15 * F ? 5e-3 : t <= Ct ? 75e-4 : (t < Vt, 0.01);
   }
   detectCandleTimeframeMs() {
     if (this.candles.length < 2) return 15 * F;
@@ -979,7 +979,7 @@ var h = {
     };
   }
   getPriceY(t, e) {
-    return O({
+    return E({
       price: t,
       minPrice: this.minPrice,
       priceRange: this.priceRange,
@@ -992,7 +992,7 @@ var h = {
   getAskPriceLineColor(t) {
     return t.close >= t.open ? c.candles.liveAskPriceLine.bullishColor : c.candles.liveAskPriceLine.bearishColor;
   }
-}, Gt = class {
+}, _t = class {
   #t;
   #e;
   #r = null;
@@ -1016,7 +1016,7 @@ var h = {
   }
   #u(t, e) {
     if (!this.#r || !this.#e) return;
-    const i = this.#t, s = i.canvas, r = O({
+    const i = this.#t, s = i.canvas, r = E({
       price: t,
       minPrice: this.#r.minPrice,
       priceRange: this.#r.priceRange,
@@ -1035,13 +1035,13 @@ var h = {
     y: (e.clientY - i.top) * r
   };
 };
-var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID() : `shape-${Date.now()}-${Math.random().toString(16).slice(2)}`, $ = (t, e) => vt(t, e), ht = (t, e) => ({
+var $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID() : `shape-${Date.now()}-${Math.random().toString(16).slice(2)}`, q = (t, e) => vt(t, e), ht = (t, e) => ({
   time: e.getNearestCandleTimeForX(t.x),
   price: e.getPriceForY(t.y)
 }), C = (t, e) => ({
   x: e.getXForTime(t.time),
   y: e.getYForPrice(t.price)
-}), Ut = (t, e) => {
+}), Gt = (t, e) => {
   const i = Math.min(t.x, e.x), s = Math.max(t.x, e.x), r = Math.min(t.y, e.y), n = Math.max(t.y, e.y);
   return {
     left: i,
@@ -1051,18 +1051,18 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     width: s - i,
     height: n - r
   };
-}, J = (t, e, i) => Ut(C(t, i), C(e, i)), K = (t, e) => {
+}, K = (t, e, i) => Gt(C(t, i), C(e, i)), J = (t, e) => {
   const i = t.x - e.x, s = t.y - e.y;
   return Math.sqrt(i * i + s * s);
 }, yt = (t, e, i) => {
   const s = i.x - e.x, r = i.y - e.y, n = s * s + r * r;
-  if (n === 0) return K(t, e);
+  if (n === 0) return J(t, e);
   const o = Math.max(0, Math.min(1, ((t.x - e.x) * s + (t.y - e.y) * r) / n));
-  return K(t, {
+  return J(t, {
     x: e.x + o * s,
     y: e.y + o * r
   });
-}, wt = (t, e, i = 0) => t.x >= e.left - i && t.x <= e.right + i && t.y >= e.top - i && t.y <= e.bottom + i, $t = (t, e, i = 8) => {
+}, wt = (t, e, i = 0) => t.x >= e.left - i && t.x <= e.right + i && t.y >= e.top - i && t.y <= e.bottom + i, Ut = (t, e, i = 8) => {
   if (!wt(t, e, i)) return !1;
   const s = Math.abs(t.x - e.left) <= i, r = Math.abs(t.x - e.right) <= i, n = Math.abs(t.y - e.top) <= i, o = Math.abs(t.y - e.bottom) <= i, a = t.x >= e.left - i && t.x <= e.right + i, l = t.y >= e.top - i && t.y <= e.bottom + i;
   return (s || r) && l || (n || o) && a;
@@ -1074,11 +1074,11 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   radius: s,
   cursor: r,
   index: n
-}), j = (t, e) => K(t, e) <= e.radius + 2, V = (t, e = 1) => t === "dashed" ? [e * 6, e * 4] : t === "dotted" ? [e, e * 3] : [], Q = (t, e, i) => {
-  t.strokeStyle = P(e.lineColor, e.lineOpacity), t.lineWidth = i ?? e.lineWidth, t.setLineDash(V(e.lineStyle, t.lineWidth));
-}, Pt = (t, e, i) => !e || i === void 0 || i <= 0 ? !1 : (t.fillStyle = P(e, i), !0), E = (t) => {
+}), j = (t, e) => J(t, e) <= e.radius + 2, V = (t, e = 1) => t === "dashed" ? [e * 6, e * 4] : t === "dotted" ? [e, e * 3] : [], tt = (t, e, i) => {
+  t.strokeStyle = b(e.lineColor, e.lineOpacity), t.lineWidth = i ?? e.lineWidth, t.setLineDash(V(e.lineStyle, t.lineWidth));
+}, Pt = (t, e, i) => !e || i === void 0 || i <= 0 ? !1 : (t.fillStyle = b(e, i), !0), O = (t) => {
   t.setLineDash([]);
-}, Jt = (t, e, i = {
+}, $t = (t, e, i = {
   fillColor: "#ffffff",
   borderColor: "#2962ff",
   borderThickness: 3
@@ -1086,15 +1086,15 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   t.save(), t.beginPath(), t.arc(e.x, e.y, e.radius, 0, Math.PI * 2), t.fillStyle = i.fillColor, t.fill(), t.lineWidth = i.borderThickness, t.strokeStyle = i.borderColor, t.stroke(), t.restore();
 }, z = (t, e, i) => {
   e.forEach((s) => {
-    Jt(t, s, i);
+    $t(t, s, i);
   });
-}, P = (t, e) => {
-  const i = jt(e, 0, 1);
-  return t.startsWith("rgba(") ? t : t.startsWith("rgb(") ? t.replace("rgb(", "rgba(").replace(")", `, ${i})`) : t.startsWith("#") ? Kt(t, i) : t;
-}, Kt = (t, e) => {
+}, b = (t, e) => {
+  const i = Kt(e, 0, 1);
+  return t.startsWith("rgba(") ? t : t.startsWith("rgb(") ? t.replace("rgb(", "rgba(").replace(")", `, ${i})`) : t.startsWith("#") ? qt(t, i) : t;
+}, qt = (t, e) => {
   const i = t.replace("#", ""), s = i.length === 3 ? i.split("").map((r) => `${r}${r}`).join("") : i;
   return `rgba(${parseInt(s.slice(0, 2), 16)}, ${parseInt(s.slice(2, 4), 16)}, ${parseInt(s.slice(4, 6), 16)}, ${e})`;
-}, jt = (t, e, i) => Math.min(i, Math.max(e, t)), dt = (t, e, i) => e + (t - e) * i, Z = (t, e) => {
+}, Kt = (t, e, i) => Math.min(i, Math.max(e, t)), dt = (t, e, i) => e + (t - e) * i, Z = (t, e) => {
   if (t.length === 0) return -1;
   let i = 0, s = Math.abs(t[0].time - e);
   for (let r = 1; r < t.length; r += 1) {
@@ -1102,7 +1102,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     n < s && (s = n, i = r);
   }
   return i;
-}, q = (t) => {
+}, Q = (t) => {
   if (t.length < 2) return 900 * 1e3;
   const e = [];
   for (let i = 1; i < t.length; i += 1) {
@@ -1110,9 +1110,9 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     s > 0 && e.push(s);
   }
   return e.length === 0 ? 900 * 1e3 : e.reduce((i, s) => i + s, 0) / e.length;
-}, Zt = (t, e, i) => {
+}, Jt = (t, e, i) => {
   const s = Z(t, e), r = s + i;
-  return s >= 0 && r >= 0 && r < t.length ? t[r].time : e + q(t) * i;
+  return s >= 0 && r >= 0 && r < t.length ? t[r].time : e + Q(t) * i;
 }, ct = (t) => t instanceof MouseEvent && t.type === "contextmenu" ? !1 : "button" in t && t.type === "pointerdown" ? t.button === 0 : !0, f = {
   handleColor: h.background,
   handleBorderColor: h.blue,
@@ -1166,13 +1166,13 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     fillOpacity: 0.04
   };
   static draw({ ctx: e, shape: i, converter: s, config: r = I.defaultConfig, selected: n = !1, hovered: o = !1 }) {
-    const [a, l] = i.vertices, d = C(a, s), u = C(l, s), g = J(a, l, s), m = Math.min(d.x, u.x), b = Math.max(d.x, u.x);
+    const [a, l] = i.vertices, d = C(a, s), u = C(l, s), g = K(a, l, s), v = Math.min(d.x, u.x), w = Math.max(d.x, u.x);
     e.save(), Pt(e, r.fillColor, r.fillOpacity) && e.fillRect(g.left, g.top, g.width, g.height);
-    for (const v of r.levels) {
-      const S = dt(a.price, l.price, v.level), T = s.getYForPrice(S), k = v.lineWidth;
-      e.beginPath(), e.strokeStyle = P(v.color, v.opacity), e.lineWidth = k, e.setLineDash(V(v.lineStyle, k)), e.moveTo(m, T), e.lineTo(b, T), e.stroke(), v.label && (e.setLineDash([]), e.fillStyle = P(v.color, v.opacity), e.font = "11px sans-serif", e.textBaseline = "middle", e.fillText(Number(v.label).toFixed(2).toString(), b + 12, T));
+    for (const m of r.levels) {
+      const S = dt(a.price, l.price, m.level), T = s.getYForPrice(S), k = m.lineWidth;
+      e.beginPath(), e.strokeStyle = b(m.color, m.opacity), e.lineWidth = k, e.setLineDash(V(m.lineStyle, k)), e.moveTo(v, T), e.lineTo(w, T), e.stroke(), m.label && (e.setLineDash([]), e.fillStyle = b(m.color, m.opacity), e.font = "11px sans-serif", e.textBaseline = "middle", e.fillText(Number(m.label).toFixed(2).toString(), w + 12, T));
     }
-    E(e), (n || o) && z(e, I.getHandles(i, s), {
+    O(e), (n || o) && z(e, I.getHandles(i, s), {
       fillColor: f.handleColor,
       borderColor: f.handleBorderColor,
       borderThickness: f.handleBorderThickness
@@ -1210,9 +1210,9 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   static hitTest({ point: e, shape: i, converter: s, tolerance: r = 8, config: n = I.defaultConfig }) {
     const [o, a] = i.vertices, l = C(o, s), d = C(a, s), u = Math.min(l.x, d.x), g = Math.max(l.x, d.x);
     if (e.x < u - r || e.x > g + r) return !1;
-    for (const m of n.levels) {
-      const b = dt(o.price, a.price, m.level), v = s.getYForPrice(b);
-      if (Math.abs(e.y - v) <= r) return !0;
+    for (const v of n.levels) {
+      const w = dt(o.price, a.price, v.level), m = s.getYForPrice(w);
+      if (Math.abs(e.y - m) <= r) return !0;
     }
     return !1;
   }
@@ -1246,7 +1246,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   };
   static draw({ ctx: e, shape: i, converter: s, config: r = Y.defaultConfig, selected: n = !1, hovered: o = !1 }) {
     const [a, l] = i.vertices, d = C(a, s), u = C(l, s);
-    e.save(), Q(e, r), e.beginPath(), e.moveTo(d.x, d.y), e.lineTo(u.x, u.y), e.stroke(), E(e), (n || o) && z(e, Y.getHandles(i, s), {
+    e.save(), tt(e, r), e.beginPath(), e.moveTo(d.x, d.y), e.lineTo(u.x, u.y), e.stroke(), O(e), (n || o) && z(e, Y.getHandles(i, s), {
       fillColor: f.handleColor,
       borderColor: f.handleBorderColor,
       borderThickness: f.handleBorderThickness
@@ -1318,9 +1318,9 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   static draw({ ctx: e, shape: i, converter: s, config: r = B.defaultConfig, selected: n = !1, hovered: o = !1 }) {
     const a = i.vertices.map((l) => C(l, s));
     if (a.length !== 0) {
-      e.save(), Q(e, r), e.beginPath(), e.moveTo(a[0].x, a[0].y);
+      e.save(), tt(e, r), e.beginPath(), e.moveTo(a[0].x, a[0].y);
       for (let l = 1; l < a.length; l += 1) e.lineTo(a[l].x, a[l].y);
-      e.stroke(), E(e), a.length >= 2 && B.drawEndArrow({
+      e.stroke(), O(e), a.length >= 2 && B.drawEndArrow({
         ctx: e,
         previousPoint: a[a.length - 2],
         endPoint: a[a.length - 1],
@@ -1384,7 +1384,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   }
   static drawEndArrow({ ctx: e, previousPoint: i, endPoint: s, color: r, opacity: n, lineWidth: o }) {
     const a = Math.atan2(s.y - i.y, s.x - i.x), l = 12, d = Math.PI / 7;
-    e.save(), e.beginPath(), e.strokeStyle = P(r, n), e.fillStyle = P(r, n), e.lineWidth = o, e.setLineDash([]), e.moveTo(s.x, s.y), e.lineTo(s.x - l * Math.cos(a - d), s.y - l * Math.sin(a - d)), e.lineTo(s.x - l * Math.cos(a + d), s.y - l * Math.sin(a + d)), e.closePath(), e.fill(), e.stroke(), e.restore();
+    e.save(), e.beginPath(), e.strokeStyle = b(r, n), e.fillStyle = b(r, n), e.lineWidth = o, e.setLineDash([]), e.moveTo(s.x, s.y), e.lineTo(s.x - l * Math.cos(a - d), s.y - l * Math.sin(a - d)), e.lineTo(s.x - l * Math.cos(a + d), s.y - l * Math.sin(a + d)), e.closePath(), e.fill(), e.stroke(), e.restore();
   }
 }, D = class W {
   static defaultConfig = {
@@ -1400,8 +1400,8 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     textFontSize: 20
   };
   static draw({ ctx: e, shape: i, converter: s, config: r = W.defaultConfig, selected: n = !1, hovered: o = !1 }) {
-    const [a, l] = i.vertices, d = J(a, l, s);
-    e.save(), Pt(e, r.fillColor, r.fillOpacity) && e.fillRect(d.left, d.top, d.width, d.height), Q(e, r), e.strokeRect(d.left, d.top, d.width, d.height), E(e), W.drawText(e, d, i.text, r), (n || o) && z(e, W.getHandles(i, s), {
+    const [a, l] = i.vertices, d = K(a, l, s);
+    e.save(), Pt(e, r.fillColor, r.fillOpacity) && e.fillRect(d.left, d.top, d.width, d.height), tt(e, r), e.strokeRect(d.left, d.top, d.width, d.height), O(e), W.drawText(e, d, i.text, r), (n || o) && z(e, W.getHandles(i, s), {
       fillColor: f.handleColor,
       borderColor: f.handleBorderColor,
       borderThickness: f.handleBorderThickness
@@ -1438,7 +1438,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   }
   static hitTest({ point: e, shape: i, converter: s, tolerance: r = 8 }) {
     const [n, o] = i.vertices;
-    return $t(e, J(n, o, s), r);
+    return Ut(e, K(n, o, s), r);
   }
   static move(e, i) {
     return {
@@ -1477,10 +1477,10 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   "USOIL",
   "UKOIL",
   "XAGUSD"
-], Tt = (t) => bt.some((e) => t.includes(e.slice(3))) ? 0.01 : xt.includes(t) ? 1 : St.includes(t) ? 0.01 : 1e-4, qt = (t, e) => bt.includes(t) ? e * 6.33806 : xt.includes(t) ? e * 1 : (St.includes(t), e * 10), ut = (t, e, i, s, r) => {
-  const n = r.split(".")[0], o = Tt(n), a = qt(n, s);
+], Tt = (t) => bt.some((e) => t.includes(e.slice(3))) ? 0.01 : xt.includes(t) ? 1 : St.includes(t) ? 0.01 : 1e-4, jt = (t, e) => bt.includes(t) ? e * 6.33806 : xt.includes(t) ? e * 1 : (St.includes(t), e * 10), ut = (t, e, i, s, r) => {
+  const n = r.split(".")[0], o = Tt(n), a = jt(n, s);
   return (t === "buy" ? i - e : e - i) / o * a;
-}, H = class w {
+}, H = class P {
   static defaultLongConfig = {
     defaultWidthCandles: 10,
     defaultStopLossPercent: 0.25,
@@ -1498,24 +1498,24 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     midLineWidth: 1,
     midLineStyle: "dashed"
   };
-  static defaultShortConfig = { ...w.defaultLongConfig };
-  static draw({ ctx: e, activeSymbol: i, shape: s, converter: r, config: n = s.type === "longPosition" ? w.defaultLongConfig : w.defaultShortConfig, selected: o = !1, hovered: a = !1 }) {
-    const l = w.getGeometry(s, r);
-    e.save(), e.fillStyle = P(n.profitFillColor, n.profitFillOpacity), e.fillRect(l.profitBox.left, l.profitBox.top, l.profitBox.width, l.profitBox.height), e.fillStyle = P(n.lossFillColor, n.lossFillOpacity), e.fillRect(l.lossBox.left, l.lossBox.top, l.lossBox.width, l.lossBox.height);
+  static defaultShortConfig = { ...P.defaultLongConfig };
+  static draw({ ctx: e, activeSymbol: i, shape: s, converter: r, config: n = s.type === "longPosition" ? P.defaultLongConfig : P.defaultShortConfig, selected: o = !1, hovered: a = !1 }) {
+    const l = P.getGeometry(s, r);
+    e.save(), e.fillStyle = b(n.profitFillColor, n.profitFillOpacity), e.fillRect(l.profitBox.left, l.profitBox.top, l.profitBox.width, l.profitBox.height), e.fillStyle = b(n.lossFillColor, n.lossFillOpacity), e.fillRect(l.lossBox.left, l.lossBox.top, l.lossBox.width, l.lossBox.height);
     const d = n.borderWidth;
-    e.strokeStyle = P(n.borderColor, n.borderOpacity), e.lineWidth = d, e.setLineDash(V(n.borderStyle, d)), e.strokeRect(l.box.left, l.box.top, l.box.width, l.box.height), e.beginPath(), e.strokeStyle = P(n.midLineColor, n.midLineOpacity), e.lineWidth = n.midLineWidth, e.setLineDash(V(n.midLineStyle, n.midLineWidth)), e.moveTo(l.box.left, l.entryY), e.lineTo(l.box.right, l.entryY), e.stroke(), E(e), w.drawLabels({
+    e.strokeStyle = b(n.borderColor, n.borderOpacity), e.lineWidth = d, e.setLineDash(V(n.borderStyle, d)), e.strokeRect(l.box.left, l.box.top, l.box.width, l.box.height), e.beginPath(), e.strokeStyle = b(n.midLineColor, n.midLineOpacity), e.lineWidth = n.midLineWidth, e.setLineDash(V(n.midLineStyle, n.midLineWidth)), e.moveTo(l.box.left, l.entryY), e.lineTo(l.box.right, l.entryY), e.stroke(), O(e), P.drawLabels({
       ctx: e,
       activeSymbol: i,
       shape: s,
       geometry: l,
       config: n
-    }), (o || a) && z(e, w.getHandles(s, r), {
+    }), (o || a) && z(e, P.getHandles(s, r), {
       fillColor: f.handleColor,
       borderColor: f.handleBorderColor,
       borderThickness: f.handleBorderThickness
     }), e.restore();
   }
-  static createFromVertex({ id: e, type: i, entry: s, converter: r, config: n = i === "longPosition" ? w.defaultLongConfig : w.defaultShortConfig }) {
+  static createFromVertex({ id: e, type: i, entry: s, converter: r, config: n = i === "longPosition" ? P.defaultLongConfig : P.defaultShortConfig }) {
     const o = r.getTimeForX(r.getXForTime(s.time) + r.getCandleWidth() * n.defaultWidthCandles), a = n.defaultStopLossPercent;
     return {
       id: e,
@@ -1527,13 +1527,13 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     };
   }
   static getGeometry(e, i) {
-    const s = C(e.entry, i), r = i.getXForTime(e.endTime), n = Math.min(s.x, r), o = Math.max(s.x, r), a = e.type === "longPosition", l = a ? e.takeProfitPercent : e.stopLossPercent, d = a ? e.stopLossPercent : e.takeProfitPercent, u = e.entry.price * (1 + l / 100), g = e.entry.price * (1 - d / 100), m = i.getYForPrice(u), b = i.getYForPrice(g), v = Math.min(m, b, s.y), S = Math.max(m, b, s.y), T = {
+    const s = C(e.entry, i), r = i.getXForTime(e.endTime), n = Math.min(s.x, r), o = Math.max(s.x, r), a = e.type === "longPosition", l = a ? e.takeProfitPercent : e.stopLossPercent, d = a ? e.stopLossPercent : e.takeProfitPercent, u = e.entry.price * (1 + l / 100), g = e.entry.price * (1 - d / 100), v = i.getYForPrice(u), w = i.getYForPrice(g), m = Math.min(v, w, s.y), S = Math.max(v, w, s.y), T = {
       left: n,
-      top: v,
+      top: m,
       right: o,
       bottom: s.y,
       width: o - n,
-      height: Math.abs(s.y - v)
+      height: Math.abs(s.y - m)
     }, k = {
       left: n,
       top: s.y,
@@ -1550,18 +1550,18 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       lowerPrice: g,
       box: {
         left: n,
-        top: v,
+        top: m,
         right: o,
         bottom: S,
         width: o - n,
-        height: S - v
+        height: S - m
       },
       profitBox: a ? T : k,
       lossBox: a ? k : T
     };
   }
   static getHandles(e, i) {
-    const s = w.getGeometry(e, i);
+    const s = P.getGeometry(e, i);
     return [
       x({
         shapeId: e.id,
@@ -1606,7 +1606,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     ];
   }
   static hitTest({ point: e, shape: i, converter: s }) {
-    return w.getHandles(i, s).some((r) => j(e, r)) ? !0 : wt(e, w.getGeometry(i, s).box);
+    return P.getHandles(i, s).some((r) => j(e, r)) ? !0 : wt(e, P.getGeometry(i, s).box);
   }
   static move(e, i) {
     return {
@@ -1628,7 +1628,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     } : i === "end" ? {
       ...e,
       endTime: s.time
-    } : i === "upperHeight" ? w.resizeUpperHeight(e, s.price) : i === "lowerHeight" ? w.resizeLowerHeight(e, s.price) : {
+    } : i === "upperHeight" ? P.resizeUpperHeight(e, s.price) : i === "lowerHeight" ? P.resizeLowerHeight(e, s.price) : {
       ...e,
       endTime: r.getTimeForX(r.getXForTime(e.endTime))
     };
@@ -1656,13 +1656,13 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   static drawLabels({ ctx: e, activeSymbol: i, shape: s, geometry: r, config: n }) {
     e.save(), e.font = "11px sans-serif", e.textBaseline = "middle";
     const o = s.type, a = Tt(i), l = s.entry.price * (s.takeProfitPercent / 100) / a, d = s.entry.price * (s.stopLossPercent / 100) / a, u = r.box.left + 6, g = l / d;
-    e.fillStyle = P(n.profitFillColor, 0.95);
-    const m = o === "longPosition" ? r.profitBox.top + r.profitBox.height / 10 : r.profitBox.bottom - r.profitBox.height / 10;
-    e.fillText(`${l.toFixed(2)} (${g.toFixed(2)})`, u, m), e.fillStyle = P(n.lossFillColor, 0.95);
-    const b = o === "shortPosition" ? r.lossBox.top + r.lossBox.height / 10 : r.lossBox.bottom - r.lossBox.height / 10;
-    e.fillText(d.toFixed(1), u, b);
+    e.fillStyle = b(n.profitFillColor, 0.95);
+    const v = o === "longPosition" ? r.profitBox.top + r.profitBox.height / 10 : r.profitBox.bottom - r.profitBox.height / 10;
+    e.fillText(`${l.toFixed(2)} (${g.toFixed(2)})`, u, v), e.fillStyle = b(n.lossFillColor, 0.95);
+    const w = o === "shortPosition" ? r.lossBox.top + r.lossBox.height / 10 : r.lossBox.bottom - r.lossBox.height / 10;
+    e.fillText(d.toFixed(1), u, w);
   }
-}, Qt = class {
+}, Zt = class {
   canvas;
   ctx;
   activeSymbol;
@@ -1682,12 +1682,13 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   onShapeModified;
   onShapeSelected;
   onShapeDoubleClicked;
+  onShapeDeleteRequested;
   onToolChange;
   constructor(t) {
     this.canvas = t.canvas;
     const e = this.canvas.getContext("2d");
     if (!e) throw new Error("Failed to get 2d context for ShapesLayer");
-    this.ctx = e, this.activeSymbol = t.activeSymbol, this.candles = t.candles, this.shapes = t.shapes, this.activeTool = t.activeTool ?? null, this.config = this.mergeConfig(t.config), this.onShapeAdded = t.onShapeAdded, this.onShapeModified = t.onShapeModified, this.onShapeSelected = t.onShapeSelected, this.onShapeDoubleClicked = t.onShapeDoubleClicked, this.onToolChange = t.onToolChange;
+    this.ctx = e, this.activeSymbol = t.activeSymbol, this.candles = t.candles, this.shapes = t.shapes, this.activeTool = t.activeTool ?? null, this.config = this.mergeConfig(t.config), this.onShapeAdded = t.onShapeAdded, this.onShapeModified = t.onShapeModified, this.onShapeSelected = t.onShapeSelected, this.onShapeDoubleClicked = t.onShapeDoubleClicked, this.onShapeDeleteRequested = t.onShapeDeleteRequested, this.onToolChange = t.onToolChange;
   }
   setCandles(t) {
     this.candles = t;
@@ -1728,6 +1729,8 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       return this.draft = null, this.setActiveToolAndEmit(null), !0;
     if (t.key === "Escape" && this.selectedShapeId)
       return this.setSelectedShapeId(null), !0;
+    if ((t.key === "Delete" || t.key === "Backspace") && this.selectedShapeId && !this.draft && this.onShapeDeleteRequested)
+      return this.onShapeDeleteRequested(this.selectedShapeId), !0;
     if (this.selectedShapeId && !this.draft && !this.activeTool && (t.key === "ArrowLeft" || t.key === "ArrowRight" || t.key === "ArrowUp" || t.key === "ArrowDown")) {
       const e = this.shapes.find((i) => i.id === this.selectedShapeId);
       if (e) {
@@ -1738,7 +1741,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     return !1;
   }
   getArrowKeyDelta(t) {
-    const e = q(this.candles);
+    const e = Q(this.candles);
     if (t === "ArrowLeft") return {
       time: -e,
       price: 0
@@ -1757,7 +1760,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     };
   }
   handlePointerDown(t) {
-    const e = $(this.canvas, t), i = ht(e, this.getConverter());
+    const e = q(this.canvas, t), i = ht(e, this.getConverter());
     if (this.activeTool)
       return ct(t) && this.handleToolPointerDown({
         point: e,
@@ -1805,7 +1808,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     return this.setSelectedShapeId(null), this.hoveredShapeId = null, this.canvas.style.cursor = "crosshair", !1;
   }
   handlePointerMove(t) {
-    const e = $(this.canvas, t), i = ht(e, this.getConverter());
+    const e = q(this.canvas, t), i = ht(e, this.getConverter());
     if (this.draft)
       return this.updateDraftPreview(i), !0;
     if (this.dragState) {
@@ -1827,7 +1830,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   }
   handleDoubleClick(t) {
     if (!this.onShapeDoubleClicked) return !1;
-    const e = $(this.canvas, t), i = this.findShapeAtPoint(e);
+    const e = q(this.canvas, t), i = this.findShapeAtPoint(e);
     return i ? (this.onShapeDoubleClicked(this.createShapeSelectedPayload(i)), !0) : !1;
   }
   checkTouchDoubleTap(t, e) {
@@ -1863,7 +1866,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     if (!this.draft || this.draft.type !== t) {
       this.draft = {
         type: t,
-        id: U(),
+        id: $(),
         vertices: [e, e]
       };
       return;
@@ -1879,7 +1882,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     if (!this.draft || this.draft.type !== "path") {
       this.draft = {
         type: "path",
-        id: U(),
+        id: $(),
         vertices: [t],
         previewVertex: null
       };
@@ -1900,7 +1903,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   }
   addPositionShape(t, e) {
     const i = this.getConverter(), s = t === "longPosition" ? this.config.longPosition : this.config.shortPosition, r = H.createFromVertex({
-      id: U(),
+      id: $(),
       type: t,
       entry: e,
       converter: i,
@@ -2204,7 +2207,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   getXForTime(t) {
     if (!this.viewport || this.candles.length === 0) return 0;
     if (t > this.candles[this.candles.length - 1].time) {
-      const i = q(this.candles);
+      const i = Q(this.candles);
       return (t - this.candles[0].time) / i * this.viewport.candleSpacing + this.viewport.offsetX + this.viewport.candleWidth / 2;
     }
     const e = Z(this.candles, t);
@@ -2213,10 +2216,10 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   getTimeForX(t) {
     if (!this.viewport) return Date.now();
     const e = Math.round((t - this.viewport.offsetX - this.viewport.candleWidth / 2) / this.viewport.candleSpacing);
-    return e >= 0 && e < this.candles.length ? this.candles[e].time : this.candles.length === 0 ? Date.now() : Zt(this.candles, this.candles[0].time, e);
+    return e >= 0 && e < this.candles.length ? this.candles[e].time : this.candles.length === 0 ? Date.now() : Jt(this.candles, this.candles[0].time, e);
   }
   getYForPrice(t) {
-    return this.viewport ? O({
+    return this.viewport ? E({
       price: t,
       minPrice: this.viewport.minPrice,
       priceRange: this.viewport.priceRange,
@@ -2263,7 +2266,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       }
     };
   }
-}, te = class {
+}, Qt = class {
   #t;
   #e;
   isDragging;
@@ -2313,7 +2316,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     this.drawTemporaryProtectionDrag();
   }
   createHitBox = ({ price: t, trade: e, type: i, x: s, y: r, width: n, height: o, viewport: a }) => {
-    const { showCloseSection: l, widthClose: d } = this.getHandleStyleConfig(i).handle, u = l ? d : 0, g = n - u, m = s + n - u;
+    const { showCloseSection: l, widthClose: d } = this.getHandleStyleConfig(i).handle, u = l ? d : 0, g = n - u, v = s + n - u;
     return {
       kind: "existingHandle",
       price: p(t),
@@ -2331,7 +2334,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
         height: o
       },
       closeButtonArea: {
-        x: m,
+        x: v,
         y: r,
         width: u,
         height: o
@@ -2447,12 +2450,12 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     });
     let g = e;
     l.save(), l.font = d.font, l.textBaseline = "middle", l.globalAlpha = d.textOpacity;
-    for (const m of u)
-      m.visible && (this.drawHandleSectionLabel({
-        section: m,
+    for (const v of u)
+      v.visible && (this.drawHandleSectionLabel({
+        section: v,
         currentX: g,
         y: a
-      }), g += m.width, g < e + s && this.drawHandleSectionDivider({
+      }), g += v.width, g < e + s && this.drawHandleSectionDivider({
         x: g,
         y1: i + 4,
         y2: i + r - 4,
@@ -2571,10 +2574,10 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   }
   drawClosedTradeArrow({ x: t, y: e, type: i, width: s, height: r, config: n }) {
     if (s <= 0 || r <= 0) return;
-    const o = this.#e, a = i === "buy", l = a ? n.buyColor : n.sellColor, d = a ? n.buyBorderColor : n.sellBorderColor, u = a ? 1 : -1, g = t, m = e, b = t, v = e + u * r, S = r / 2, T = S / Math.SQRT2, k = S / Math.SQRT2, Ht = g - T, kt = g + T, tt = m + u * k, et = Math.max(1, n.shaftWidthRatio), Mt = et + n.borderWidth * 2, it = () => {
-      o.beginPath(), o.moveTo(b, v), o.lineTo(g, m), o.moveTo(g, m), o.lineTo(Ht, tt), o.moveTo(g, m), o.lineTo(kt, tt), o.stroke();
+    const o = this.#e, a = i === "buy", l = a ? n.buyColor : n.sellColor, d = a ? n.buyBorderColor : n.sellBorderColor, u = a ? 1 : -1, g = Math.max(1, s / n.shaftWidthRatio), v = g + n.borderWidth * 2, w = t, m = e + u * (v / 2), S = t, T = m + u * r, k = r * n.headHeightRatio, et = s / 2, Ht = w - et, kt = w + et, N = m + u * k, it = () => {
+      o.beginPath(), o.moveTo(S, T), o.lineTo(w, N), o.moveTo(w, m), o.lineTo(Ht, N), o.moveTo(w, m), o.lineTo(kt, N), o.stroke();
     };
-    o.save(), o.globalAlpha = n.opacity, o.lineCap = "round", o.lineJoin = "round", o.strokeStyle = d, o.lineWidth = Mt, it(), o.strokeStyle = l, o.lineWidth = et, it(), o.restore();
+    o.save(), o.globalAlpha = n.opacity, o.lineCap = "round", o.lineJoin = "round", o.strokeStyle = d, o.lineWidth = v, it(), o.strokeStyle = l, o.lineWidth = g, it(), o.restore();
   }
   getTimeX(t) {
     if (!this.viewport || this.candles.length === 0 || !Number.isFinite(t)) return null;
@@ -2634,7 +2637,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     };
   }
   getPriceY(t, e) {
-    return O({
+    return E({
       price: t,
       minPrice: e.minPrice,
       priceRange: e.priceRange,
@@ -2902,11 +2905,11 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   formatPnlLabel(t) {
     return `${t >= 0 ? "+" : ""}${t.toFixed(2)}`;
   }
-}, ee = [
+}, te = [
   "pointerdown",
   "pointermove",
   "pointerup"
-], ie = class {
+], ee = class {
   #t;
   #e;
   #r;
@@ -2938,7 +2941,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     return i ? this.handleHoveredHitbox(t, i, e) : (this.resetCursorIfIdle(), !1);
   }
   isSupportedEventType(t) {
-    return ee.includes(t);
+    return te.includes(t);
   }
   getCanvasMousePoint(t) {
     const e = this.#t.getBoundingClientRect(), i = this.#t.width / e.width, s = this.#t.height / e.height;
@@ -3070,7 +3073,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   consumeEvent(t) {
     t.stopPropagation(), t.preventDefault();
   }
-}, se = class {
+}, ie = class {
   #t;
   #e;
   candles;
@@ -3159,7 +3162,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
 }, A = (t) => {
   const e = document.createElement("canvas");
   return e.className = t, e;
-}, re = (t, e) => {
+}, se = (t, e) => {
   const i = document.createElement("div");
   i.className = "trading-reload-chart", i.style.backgroundColor = e, i.tabIndex = 0;
   const s = document.createElement("div");
@@ -3198,7 +3201,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
 }, ft = (t) => Lt(c, t ?? {}), pt = (t, e) => e === void 0 || t.time >= 1e12 ? t : {
   ...t,
   time: t.time * 1e3 - e
-}, ne = 12, oe = class {
+}, re = 12, ne = class {
   #t;
   #e;
   #r;
@@ -3222,7 +3225,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   #P = null;
   #b = null;
   constructor(t, e) {
-    this.#t = t, this.#e = e, this.#r = ft(e.config), this.#i = re(t, this.#r.colors.background), this.#h = new Vt({
+    this.#t = t, this.#e = e, this.#r = ft(e.config), this.#i = se(t, this.#r.colors.background), this.#h = new zt({
       canvas: this.#i.overlayCanvas,
       crosshairColor: this.#r.crosshair.color,
       crosshairThickness: this.#r.crosshair.thickness,
@@ -3231,7 +3234,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   }
   updateProps(t) {
     const e = this.#e.activeShapeTool;
-    this.#e = t, this.#r = ft(t.config), this.#i && (this.#i.root.style.backgroundColor = this.#r.colors.background, this.#i.layout.style.setProperty("--axis-x-height", `${this.#r.axis.axisX.height}px`)), !this.#m && t.candles.length > 0 && this.#I(t.candles), this.#s && (t.activeShapeTool !== e && this.#Y(t.activeShapeTool), this.#l?.setConfig(this.#r.shapes), this.#l?.setShapes(t.shapes), this.#l?.setActiveTool(t.activeShapeTool), this.#g?.setConfig(this.#r.shapes.previousDayHighLow ?? null), this.#g?.setPreviousDay(t.previousDay), this.#n?.setClosedTrades(t.closedTrades ?? []), this.#x(), this.#E(), this.#c());
+    this.#e = t, this.#r = ft(t.config), this.#i && (this.#i.root.style.backgroundColor = this.#r.colors.background, this.#i.layout.style.setProperty("--axis-x-height", `${this.#r.axis.axisX.height}px`)), !this.#m && t.candles.length > 0 && this.#I(t.candles), this.#s && (t.activeShapeTool !== e && this.#Y(t.activeShapeTool), this.#l?.setConfig(this.#r.shapes), this.#l?.setShapes(t.shapes), this.#l?.setActiveTool(t.activeShapeTool), this.#g?.setConfig(this.#r.shapes.previousDayHighLow ?? null), this.#g?.setPreviousDay(t.previousDay), this.#n?.setClosedTrades(t.closedTrades ?? []), this.#x(), this.#O(), this.#c());
   }
   resetChartView() {
     this.#s?.resetView(), this.#c();
@@ -3242,7 +3245,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   #I(t) {
     if (!this.#i || this.#m) return;
     const e = t.map((s) => pt(s, this.#e.brokerTimezoneOffsetMs));
-    this.#u = new se({
+    this.#u = new ie({
       canvas: this.#i.volumeCanvas,
       candles: e,
       bullishColor: this.#r.volume.bullishColor,
@@ -3251,7 +3254,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       height: this.#r.volume.height,
       bottomOffset: this.#r.volume.bottomOffset,
       minBarHeight: this.#r.volume.minBarHeight
-    }), this.#s = new _t({
+    }), this.#s = new Nt({
       canvas: this.#i.candleCanvas,
       candles: e,
       baseCandleWidth: this.#r.candles.defaultWidth,
@@ -3261,7 +3264,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       autoFollowLatestCandle: this.#r.candles.autoFollowLatestCandle,
       autoFollowThresholdCandles: this.#r.candles.autoFollowThresholdCandles,
       rightOffsetCandles: this.#r.candles.rightOffsetCandles
-    }), this.#l = new Qt({
+    }), this.#l = new Zt({
       canvas: this.#i.shapesCanvas,
       activeSymbol: this.#e.activeSymbol,
       candles: e,
@@ -3280,18 +3283,21 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
       onShapeDoubleClicked: (s) => {
         this.#e.onShapeDoubleClicked?.(s);
       },
+      onShapeDeleteRequested: (s) => {
+        this.#e.onShapeDeleteRequested?.(s);
+      },
       onToolChange: (s) => {
         this.#e.onActiveShapeToolChange?.(s);
       }
     });
     const i = this.#i.shapesCanvas.getContext("2d");
-    i && (this.#g = new Gt({
+    i && (this.#g = new _t({
       ctx: i,
       config: this.#r.shapes.previousDayHighLow ?? null
-    }), this.#g.setPreviousDay(this.#e.previousDay)), this.#n = new te({ canvas: this.#i.tradesCanvas }), this.#n.setCandles(e), this.#n.setClosedTrades(this.#e.closedTrades ?? []), this.#x(), this.#o = new Ot({
+    }), this.#g.setPreviousDay(this.#e.previousDay)), this.#n = new Qt({ canvas: this.#i.tradesCanvas }), this.#n.setCandles(e), this.#n.setClosedTrades(this.#e.closedTrades ?? []), this.#x(), this.#o = new Yt({
       canvas: this.#i.axisXCanvas,
       candles: e
-    }), this.#d = new zt({ canvas: this.#i.axisYCanvas }), this.#a = new ie({
+    }), this.#d = new Ot({ canvas: this.#i.axisYCanvas }), this.#a = new ee({
       canvas: this.#i.tradesCanvas,
       getHandleHitboxes: () => this.#p() ? [] : this.#n?.handleHitboxes ?? [],
       getCurrentPrice: () => this.#s?.liveCandle?.close ?? 0,
@@ -3307,7 +3313,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     if (!this.#i) return;
     this.#b = new AbortController();
     const { signal: t } = this.#b, e = this.#i.interactionTarget;
-    e.addEventListener("pointerdown", (i) => this.#J(i), { signal: t }), e.addEventListener("pointerup", (i) => this.#j(i), { signal: t }), e.addEventListener("pointermove", (i) => this.#K(i), { signal: t }), e.addEventListener("pointerenter", (i) => this.#Z(i), { signal: t }), e.addEventListener("pointerleave", () => this.#q(), { signal: t }), e.addEventListener("contextmenu", (i) => this.#Q(i), { signal: t }), e.addEventListener("dblclick", (i) => this.#tt(i), { signal: t }), e.addEventListener("wheel", (i) => this.#U(i), {
+    e.addEventListener("pointerdown", (i) => this.#q(i), { signal: t }), e.addEventListener("pointerup", (i) => this.#J(i), { signal: t }), e.addEventListener("pointermove", (i) => this.#K(i), { signal: t }), e.addEventListener("pointerenter", (i) => this.#j(i), { signal: t }), e.addEventListener("pointerleave", () => this.#Z(), { signal: t }), e.addEventListener("contextmenu", (i) => this.#Q(i), { signal: t }), e.addEventListener("dblclick", (i) => this.#tt(i), { signal: t }), e.addEventListener("wheel", (i) => this.#U(i), {
       passive: !1,
       signal: t
     }), this.#i.axisXCanvas.addEventListener("pointerenter", (i) => this.#D(i), { signal: t }), this.#i.axisXCanvas.addEventListener("pointerdown", (i) => this.#A(i, "x"), { signal: t }), this.#i.axisXCanvas.addEventListener("pointermove", (i) => this.#X(i), { signal: t }), this.#i.axisXCanvas.addEventListener("pointerup", (i) => this.#S(i), { signal: t }), this.#i.axisXCanvas.addEventListener("pointercancel", (i) => this.#S(i), { signal: t }), this.#i.axisYCanvas.addEventListener("pointerenter", (i) => this.#D(i), { signal: t }), this.#i.axisYCanvas.addEventListener("pointerdown", (i) => this.#A(i, "y"), { signal: t }), this.#i.axisYCanvas.addEventListener("pointermove", (i) => this.#X(i), { signal: t }), this.#i.axisYCanvas.addEventListener("pointerup", (i) => this.#S(i), { signal: t }), this.#i.axisYCanvas.addEventListener("pointercancel", (i) => this.#S(i), { signal: t }), this.#i.axisYCanvas.addEventListener("wheel", (i) => this.#$(i), {
@@ -3353,7 +3359,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
   #Y(t) {
     t !== null && (this.#w = !1, this.#n?.setIsDragging(!1), this.#a?.cancelActiveInteraction()), this.#l?.setActiveTool(t);
   }
-  #O() {
+  #E() {
     const t = this.#e.openTrades ?? [];
     return this.#C ? t.map((e) => e.ticket !== this.#C?.ticket ? e : {
       ...e,
@@ -3362,9 +3368,9 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     }) : t;
   }
   #x() {
-    this.#n?.setTrades(this.#O());
+    this.#n?.setTrades(this.#E());
   }
-  #E() {
+  #O() {
     const t = this.#e.liveCandle;
     if (!t || !this.#s) return;
     const e = pt(t, this.#e.brokerTimezoneOffsetMs);
@@ -3450,7 +3456,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     if (e.style.cursor = i === "x" ? "ew-resize" : "ns-resize", !this.#f || this.#f.pointerId !== t.pointerId || this.#f.axis !== i) return;
     const s = i === "x" ? t.clientX : t.clientY, r = s - this.#f.lastClientPosition;
     if (this.#f.lastClientPosition = s, !this.#s || r === 0) return;
-    const n = (i === "x" ? r : -r) / ne;
+    const n = -r / re;
     i === "x" ? this.#s.zoomHorizontally(n) : this.#s.zoomVertically(n), t.preventDefault(), this.#c();
   }
   #S(t) {
@@ -3458,7 +3464,7 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     const e = t.currentTarget;
     e.hasPointerCapture(t.pointerId) && e.releasePointerCapture(t.pointerId), this.#f = null, t.preventDefault();
   }
-  #J(t) {
+  #q(t) {
     if (!(!this.#p() && this.#a?.handlePointerEvent(t))) {
       if (this.#l?.handlePointerEvent(t) ?? !1) {
         this.#c();
@@ -3477,17 +3483,17 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     const i = t.clientX - this.#T, s = t.clientY - this.#L;
     this.#T = t.clientX, this.#L = t.clientY, this.#s.panHorizontally(i), this.#s.panVertically(s), this.#c(), this.#k(t);
   }
-  #j(t) {
+  #J(t) {
     if (this.#w = !1, this.#l?.handlePointerEvent(t) ?? !1) {
       this.#c();
       return;
     }
     this.#p() || this.#a?.handlePointerEvent(t);
   }
-  #Z(t) {
+  #j(t) {
     document.body.style.cursor = "crosshair", this.#l?.handlePointerEvent(t), this.#p() || this.#a?.handlePointerEvent(t);
   }
-  #q() {
+  #Z() {
     this.#l?.clearHoverState(), document.body.style.cursor = "", this.#G();
   }
   #Q(t) {
@@ -3497,22 +3503,25 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
     this.#l?.handlePointerEvent(t);
   }
   #et(t) {
-    (this.#l?.handleKeyboardEvent(t) ?? !1) && (t.preventDefault(), this.#c());
+    this.#it(t.target) || (this.#l?.handleKeyboardEvent(t) ?? !1) && (t.preventDefault(), this.#c());
+  }
+  #it(t) {
+    return t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement || t instanceof HTMLSelectElement || t instanceof HTMLElement && t.isContentEditable;
   }
-}, he = Rt(({ className: t, style: e, ...i }, s) => {
-  const r = N(null), n = N(null), o = N(i);
-  return o.current = i, Dt(s, () => ({ resetChartView() {
+}, le = Mt(({ className: t, style: e, ...i }, s) => {
+  const r = _(null), n = _(null), o = _(i);
+  return o.current = i, Rt(s, () => ({ resetChartView() {
     n.current?.resetChartView();
   } })), st(() => {
     const a = r.current;
     if (!a) return;
-    const l = new oe(a, o.current);
+    const l = new ne(a, o.current);
     return n.current = l, () => {
       l.destroy(), n.current = null;
     };
   }, []), st(() => {
     n.current?.updateProps(o.current);
-  }, [i]), /* @__PURE__ */ At("div", {
+  }, [i]), /* @__PURE__ */ Dt("div", {
     ref: r,
     className: t,
     style: {
@@ -3524,5 +3533,5 @@ var U = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID(
 });
 export {
   c as CHART_CONFIG,
-  he as TradingReload
+  le as TradingReload
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pradeepjadhav/trading-reload-chart",
-	"version": "1.1.0",
+	"version": "1.2.0",
 	"description": "A React canvas-based trading chart library with candles, volume, drawing tools, and trade overlays.",
 	"keywords": [
 		"trading",