acttrader-charts 1.3.0-beta.23 → 1.3.0-beta.25

package/README.md

@@ -1171,9 +1171,11 @@ Sub-pane heights are user-resizable by dragging the separator between panes.
 
 ### SL/TP bracket labels — price or amount
 
-By default an SL/TP pill reads `SL 4159.00`. With `bracketLabelMode: 'amount'`
-it reads `SL -$290.80` — the money the position gains or loses if that bracket
-is hit, currency symbol in front.
+By default an SL/TP pill reads `SL @4159.00` — the currency sign is never shown on
+a price. With `bracketLabelMode: 'amount'` it reads `SL -$290.80` — the money the
+position gains or loses if that bracket is hit, currency symbol in front and a
+minus only on a loss. `'priceAndAmount'` shows `SL @4159.00` at rest and
+`SL @4159.00 -$290.80` while the bracket is dragged.
 
 The chart has no access to contract specs or the account currency, so each level
 supplies what the maths needs:
@@ -1188,7 +1190,7 @@ chart.setLevels([{
   valuePerPoint: 1,      // account-currency value of one price unit
   currencySymbol: '$',   // optional per-level override
 }], 'label', 'price', 'position');
-// pills render: SL -$290.80   TP +$189.20
+// pills render: SL -$290.80   TP $189.20
 ```
 
 ```

package/dist/{MACD-B6SoR6iH.d.cts → MACD-BD55Bgdu.d.cts}

@@ -1177,14 +1177,15 @@ interface ChartConfig {
     /**
      * What the SL/TP bracket pills show.
      *
-     * `'price'` (default) renders the bracket price — `SL 4159.00`.
+     * `'price'` (default) renders the bracket price — `SL @4159.00`. The currency
+     * sign is never shown on a price, only on money values.
      * `'amount'` renders the money the position gains or loses if that bracket
-     * is hit — `SL -$290.80` — computed from the level's `lots`, `contractSize`
-     * and `valuePerPoint`. Falls back to the price for any level lacking the
-     * data needed to compute it, so a partial rollout degrades gracefully.
-     * `'priceAndAmount'` keeps the price but puts the currency symbol in front
-     * of it — `SL $1.27859` — and appends the P/L while the bracket is being
-     * dragged: `SL $1.27859  -$29.08`.
+     * is hit — `SL -$290.80` (a minus only on a loss, no plus on a gain) —
+     * computed from the level's `lots`, `contractSize` and `valuePerPoint`.
+     * Falls back to the price for any level lacking the data needed to compute
+     * it, so a partial rollout degrades gracefully.
+     * `'priceAndAmount'` shows the price at rest — `SL @1.27859` — and appends
+     * the P/L while the bracket is being dragged: `SL @1.27859 -$29.08`.
      */
     bracketLabelMode?: 'price' | 'amount' | 'priceAndAmount';
     /**

package/dist/{MACD-B6SoR6iH.d.ts → MACD-BD55Bgdu.d.ts}

@@ -1177,14 +1177,15 @@ interface ChartConfig {
     /**
      * What the SL/TP bracket pills show.
      *
-     * `'price'` (default) renders the bracket price — `SL 4159.00`.
+     * `'price'` (default) renders the bracket price — `SL @4159.00`. The currency
+     * sign is never shown on a price, only on money values.
      * `'amount'` renders the money the position gains or loses if that bracket
-     * is hit — `SL -$290.80` — computed from the level's `lots`, `contractSize`
-     * and `valuePerPoint`. Falls back to the price for any level lacking the
-     * data needed to compute it, so a partial rollout degrades gracefully.
-     * `'priceAndAmount'` keeps the price but puts the currency symbol in front
-     * of it — `SL $1.27859` — and appends the P/L while the bracket is being
-     * dragged: `SL $1.27859  -$29.08`.
+     * is hit — `SL -$290.80` (a minus only on a loss, no plus on a gain) —
+     * computed from the level's `lots`, `contractSize` and `valuePerPoint`.
+     * Falls back to the price for any level lacking the data needed to compute
+     * it, so a partial rollout degrades gracefully.
+     * `'priceAndAmount'` shows the price at rest — `SL @1.27859` — and appends
+     * the P/L while the bracket is being dragged: `SL @1.27859 -$29.08`.
      */
     bracketLabelMode?: 'price' | 'amount' | 'priceAndAmount';
     /**

package/dist/index.cjs

@@ -1935,8 +1935,7 @@ function bracketPnl(input) {
 function formatMoney(amount, symbol = "$", decimals = 2) {
   const rounded = Number(amount.toFixed(decimals));
   const magnitude = Math.abs(rounded).toFixed(decimals);
-  if (rounded === 0) return `${symbol}${magnitude}`;
-  return `${rounded > 0 ? "+" : "-"}${symbol}${magnitude}`;
+  return `${rounded < 0 ? "-" : ""}${symbol}${magnitude}`;
 }
 function positionQty(input) {
   const { entryPrice, stopPrice, accountSize, riskPercent } = input;
@@ -2080,13 +2079,12 @@ function bracketBoxLabel(bracketType, price, precision, level, opts = DEFAULT_BR
     const pnl = amount();
     if (pnl !== null) return `${typeLabel} ${formatMoney(pnl, symbol)}`;
   }
-  if (opts.mode === "priceAndAmount") {
-    const priced = `${typeLabel} ${symbol}${price.toFixed(precision)}`;
-    if (!active) return priced;
+  const priced = `${typeLabel} @${price.toFixed(precision)}`;
+  if (opts.mode === "priceAndAmount" && active) {
     const pnl = amount();
-    return pnl === null ? priced : `${priced}  ${formatMoney(pnl, symbol)}`;
+    if (pnl !== null) return `${priced} ${formatMoney(pnl, symbol)}`;
   }
-  return `${typeLabel} ${price.toFixed(precision)}`;
+  return priced;
 }
 var BRACKET_BASE_RATIO = 0.68;
 var BRACKET_COL_OFFSETS = [0, -0.08, 0.08];
@@ -25316,6 +25314,10 @@ var _ChartEngine = class _ChartEngine {
     this.logoImage = null;
     // ── State persistence ─────────────────────────────────────────────────────
     this.isRestoringState = false;
+    this.onPointerEnter = () => {
+      this._cachedWrapRect = null;
+      this._cachedDrawRect = null;
+    };
     this.onMouseMove = (e) => {
       if (this._mobileCrosshairActive) return;
       if (Date.now() - this._lastTouchTime < 500) return;
@@ -26464,19 +26466,29 @@ var _ChartEngine = class _ChartEngine {
       throw new Error("acttrader-charts requires a browser environment");
     }
     enableKeyboardOverlayMode();
-    if (window.visualViewport) {
-      const vv = window.visualViewport;
-      const invalidate = () => {
-        this._cachedWrapRect = null;
-        this._cachedDrawRect = null;
-      };
+    const invalidate = () => {
+      this._cachedWrapRect = null;
+      this._cachedDrawRect = null;
+    };
+    const vv = window.visualViewport;
+    if (vv) {
       vv.addEventListener("resize", invalidate);
       vv.addEventListener("scroll", invalidate);
-      this.disposeVvListener = () => {
+    }
+    document.addEventListener("scroll", invalidate, { capture: true, passive: true });
+    window.addEventListener("resize", invalidate);
+    const layoutObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(invalidate) : null;
+    layoutObserver?.observe(document.documentElement);
+    if (document.body) layoutObserver?.observe(document.body);
+    this.disposeVvListener = () => {
+      if (vv) {
         vv.removeEventListener("resize", invalidate);
         vv.removeEventListener("scroll", invalidate);
-      };
-    }
+      }
+      document.removeEventListener("scroll", invalidate, { capture: true });
+      window.removeEventListener("resize", invalidate);
+      layoutObserver?.disconnect();
+    };
     const {
       container,
       theme = "dark",
@@ -27394,6 +27406,7 @@ var _ChartEngine = class _ChartEngine {
         this.scheduleViewportPersist();
       }
     );
+    this.drawCanvas.addEventListener("mouseenter", this.onPointerEnter);
     this.drawCanvas.addEventListener("mousemove", this.onMouseMove);
     this.drawCanvas.addEventListener("mouseleave", this.onMouseLeave);
     this.drawCanvas.addEventListener("mousedown", this.onCanvasClick);
@@ -29846,6 +29859,7 @@ var _ChartEngine = class _ChartEngine {
     this.advancedToolbar?.destroy();
     this.mobileHeader?.destroy();
     this.leftBar?.destroy();
+    this.drawCanvas.removeEventListener("mouseenter", this.onPointerEnter);
     this.drawCanvas.removeEventListener("mousemove", this.onMouseMove);
     this.drawCanvas.removeEventListener("mouseleave", this.onMouseLeave);
     this.drawCanvas.removeEventListener("mousedown", this.onCanvasClick);