@forgecharts/sdk 1.5.21 → 1.5.22

package/dist/react/internal.js

@@ -1,5 +1,5 @@
 import React11, { createContext, forwardRef, useRef, useState, useImperativeHandle, useEffect, useCallback, useMemo, useContext, useReducer } from 'react';
-import { TextStyle, Application, Container, Graphics, Text, FillGradient } from 'pixi.js';
+import { TextStyle, Application, Container, Graphics, Text, FillGradient, CanvasTextMetrics } from 'pixi.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import ReactDOM from 'react-dom';
 
@@ -7709,9 +7709,11 @@ function orderRoleLabel(role) {
   }
 }
 function isDraggableRole(role) {
-  return role === "stop_loss" || role === "take_profit";
+  return role === "stop_loss" || role === "take_profit" || role === "limit" || role === "stop";
 }
 var LINE_H = 15;
+var LABEL_GAP = 6;
+var LABEL_PAD = 6;
 var PILL_H = 16;
 var PILL_W = 28;
 var PILL_R = 4;
@@ -7878,13 +7880,18 @@ var PixiTradingRenderer = class {
         this._drawDragHandle(plotWidth - 26, y, color, alpha);
       }
       const boxY = y - LINE_H / 2;
+      const roleStr = orderRoleLabel(order.role);
+      const text = roleStr ? `${roleStr} ${order.qty}` : `${order.side.toUpperCase()} ${order.qty}`;
+      const textW = Math.ceil(CanvasTextMetrics.measureText(text, labelStyle).width);
+      const pillW = textW + LABEL_PAD * 2;
+      const pillX = Math.max(0, plotWidth - LABEL_GAP - pillW);
+      this._boxGfx.roundRect(pillX, boxY, pillW, LINE_H, PILL_R).fill({ color, alpha });
+      labelIdx = this._drawLabel(text, pillX + pillW / 2, y, labelIdx, labelStyle, true);
       this._boxGfx.rect(plotWidth, boxY, psWidth, LINE_H).fill({ color, alpha });
+      labelIdx = this._drawLabel(order.price.toFixed(2), plotWidth + 4, y, labelIdx, labelStyle);
       if (isDraggableRole(order.role)) {
         this._orderHitZones.push({ id: order.id, role: order.role, x: 0, y: boxY, w: plotWidth + psWidth, h: LINE_H });
       }
-      const roleStr = orderRoleLabel(order.role);
-      const text = roleStr && isDraggableRole(order.role) ? `${roleStr} ${order.price.toFixed(2)}` : roleStr ? `${roleStr} ${order.qty}` : `${order.side.toUpperCase()} ${order.qty}`;
-      labelIdx = this._drawLabel(text, plotWidth + 4, y, labelIdx, labelStyle);
       if (isEntry && !order.groupId && !bracketEntryIds.has(order.id)) {
         const tpPillY = y - PILL_H / 2;
         this._boxGfx.roundRect(PILL_TP_X, tpPillY, PILL_W, PILL_H, PILL_R).fill({ color: TP_PILL_COLOR, alpha: 0.85 });
@@ -7949,19 +7956,56 @@ var PixiTradingRenderer = class {
         }
         this._lineGfx.stroke();
         const boxY = y - LINE_H / 2;
-        this._boxGfx.rect(plotWidth, boxY, psWidth, LINE_H).fill({ color, alpha: 0.9 });
-        this._positionHitZones.push({ id: pos.id, x: plotWidth, y: boxY, w: psWidth, h: LINE_H });
         let text;
         if (pos.label) {
           text = pos.label;
         } else {
-          text = `Entry ${pos.entryPrice}`;
+          text = `${pos.side.toUpperCase()} ${pos.qty}`;
           if (pos.unrealizedPnl !== void 0) {
             const pnlSign = pos.unrealizedPnl >= 0 ? "+" : "";
             text += ` ${pnlSign}${pos.unrealizedPnl.toFixed(2)}`;
           }
         }
-        labelIdx = this._drawLabel(text, plotWidth + 4, y, labelIdx, labelStyle);
+        const textW = Math.ceil(CanvasTextMetrics.measureText(text, labelStyle).width);
+        const pillW = textW + LABEL_PAD * 2;
+        const pillX = Math.max(0, plotWidth - LABEL_GAP - pillW);
+        this._boxGfx.roundRect(pillX, boxY, pillW, LINE_H, PILL_R).fill({ color, alpha: 0.9 });
+        labelIdx = this._drawLabel(text, pillX + pillW / 2, y, labelIdx, labelStyle, true);
+        this._boxGfx.rect(plotWidth, boxY, psWidth, LINE_H).fill({ color, alpha: 0.9 });
+        labelIdx = this._drawLabel(String(pos.entryPrice), plotWidth + 4, y, labelIdx, labelStyle);
+        this._positionHitZones.push({ id: pos.id, x: pillX, y: boxY, w: pillW, h: LINE_H });
+        const linked = pos.linkedOrderIds ?? [];
+        const hasTp = linked.some((id) => id.endsWith("-tp"));
+        const hasSl = linked.some((id) => id.endsWith("-sl"));
+        const entrySide = pos.side === "long" ? "buy" : "sell";
+        if (!hasTp) {
+          const tpY = y - PILL_H / 2;
+          this._boxGfx.roundRect(PILL_TP_X, tpY, PILL_W, PILL_H, PILL_R).fill({ color: TP_PILL_COLOR, alpha: 0.85 });
+          labelIdx = this._drawLabel("TP", PILL_TP_X + PILL_W / 2, y, labelIdx, pillLabelStyle, true);
+          this._pillHitZones.push({
+            kind: "tp",
+            entryOrderId: pos.id,
+            entrySide,
+            x: PILL_TP_X,
+            y: tpY,
+            w: PILL_W,
+            h: PILL_H
+          });
+        }
+        if (!hasSl) {
+          const slY = y - PILL_H / 2;
+          this._boxGfx.roundRect(PILL_SL_X, slY, PILL_W, PILL_H, PILL_R).fill({ color: SL_PILL_COLOR, alpha: 0.85 });
+          labelIdx = this._drawLabel("SL", PILL_SL_X + PILL_W / 2, y, labelIdx, pillLabelStyle, true);
+          this._pillHitZones.push({
+            kind: "sl",
+            entryOrderId: pos.id,
+            entrySide,
+            x: PILL_SL_X,
+            y: slY,
+            w: PILL_W,
+            h: PILL_H
+          });
+        }
       }
     }
   }
@@ -23118,7 +23162,11 @@ var ChartCanvas = forwardRef(
             type: "modify",
             orderId,
             symbol: symbolRef.current,
-            limitPrice: newPrice,
+            // Route by role: a stop order's price is its TRIGGER, not a limit.
+            // Sending limitPrice for a stop would modify the wrong field on the
+            // broker (or be rejected), which matters now that stop orders are
+            // draggable and not just bracket legs.
+            ...order?.role === "stop" ? { stopPrice: newPrice } : { limitPrice: newPrice },
             timestamp: Date.now()
           });
         }