@forgecharts/sdk 1.5.24 → 1.5.26

package/dist/react/internal.js

@@ -1,4 +1,4 @@
-import React11, { createContext, forwardRef, useRef, useState, useImperativeHandle, useEffect, useCallback, useMemo, useContext, useReducer } from 'react';
+import React11, { createContext, forwardRef, useRef, useState, useEffect, useImperativeHandle, useCallback, useMemo, useContext, useReducer } from 'react';
 import { TextStyle, Application, Container, Graphics, Text, FillGradient, CanvasTextMetrics } from 'pixi.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import ReactDOM from 'react-dom';
@@ -7879,9 +7879,6 @@ var PixiTradingRenderer = class {
       } else {
         this._lineGfx.moveTo(0, y).lineTo(plotWidth, y).stroke({ color, width: lineCrisp.width, alpha });
       }
-      if (isDraggableRole(order.role)) {
-        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}`;
@@ -7890,6 +7887,9 @@ var PixiTradingRenderer = class {
       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);
+      if (isDraggableRole(order.role)) {
+        this._drawPillDragArrows(pillX + pillW / 2, boxY, color, alpha);
+      }
       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)) {
@@ -8021,12 +8021,19 @@ var PixiTradingRenderer = class {
    * with an up and a down chevron, centred on the line. Signals "drag me
    * vertically" the way TradingView's order-line handles do.
    */
-  _drawDragHandle(x, y, color, alpha) {
-    const s = 4;
-    const gap = 3;
-    this._boxGfx.roundRect(x - 8, y - 13, 16, 26, 4).fill({ color, alpha: alpha * 0.18 });
-    this._boxGfx.poly([x, y - gap - 2 * s, x + s, y - gap, x - s, y - gap]).fill({ color, alpha });
-    this._boxGfx.poly([x, y + gap + 2 * s, x + s, y + gap, x - s, y + gap]).fill({ color, alpha });
+  /**
+   * Up/down chevrons hugging a label pill, marking it draggable.
+   *
+   * Anchored to the pill rather than a fixed x so the affordance stays with
+   * the label wherever it is laid out.
+   */
+  _drawPillDragArrows(cx, boxY, color, alpha) {
+    const s = 3.5;
+    const gap = 2;
+    const upBase = boxY - gap;
+    this._boxGfx.poly([cx, upBase - s * 1.6, cx + s, upBase, cx - s, upBase]).fill({ color, alpha: alpha * 0.9 });
+    const downBase = boxY + LINE_H + gap;
+    this._boxGfx.poly([cx, downBase + s * 1.6, cx + s, downBase, cx - s, downBase]).fill({ color, alpha: alpha * 0.9 });
   }
   /** Draws or reuses a label at the given position and returns the next label index. */
   _drawLabel(text, x, y, labelIdx, style, centered) {
@@ -23015,6 +23022,19 @@ var ChartCanvas = forwardRef(
     );
     const drawOverlayRef = useRef(null);
     const [priceFraction, setPriceFraction] = useState(priceFractionProp ?? 0.6);
+    const [effectiveTheme, setEffectiveTheme] = useState(theme);
+    useEffect(() => {
+      setEffectiveTheme(theme);
+    }, [theme]);
+    useEffect(() => {
+      const chart = chartRef.current;
+      if (!chart) return;
+      const onThemeChanged = ({ theme: t }) => setEffectiveTheme(t);
+      chart.on("themeChanged", onThemeChanged);
+      return () => {
+        chart.off?.("themeChanged", onThemeChanged);
+      };
+    }, [dataBlocked]);
     const selectPointerToolRef = useRef(() => {
     });
     useImperativeHandle(ref, () => ({
@@ -24137,29 +24157,41 @@ var ChartCanvas = forwardRef(
               },
               children: [
                 /* @__PURE__ */ jsx(
-                  "a",
+                  "div",
                   {
-                    href: "https://forgecharts.com",
-                    target: "_blank",
-                    rel: "noopener noreferrer",
                     style: {
                       position: "absolute",
                       bottom: 38,
                       left: 6,
                       zIndex: 5,
-                      lineHeight: 0
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "flex-start",
+                      gap: 1,
+                      // Never intercept clicks meant for the chart; the logo re-enables
+                      // pointer events on itself below.
+                      pointerEvents: "none"
                     },
                     children: /* @__PURE__ */ jsx(
-                      "img",
+                      "a",
                       {
-                        src: theme === "light" ? logo_light_default : logo_dark_default,
-                        alt: "ForgeCharts",
-                        style: {
-                          height: 48,
-                          width: "auto",
-                          opacity: 0.55,
-                          userSelect: "none"
-                        }
+                        href: "https://forgecharts.com",
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        style: { lineHeight: 0, pointerEvents: "auto" },
+                        children: /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            src: effectiveTheme === "light" ? logo_light_default : logo_dark_default,
+                            alt: "ForgeCharts",
+                            style: {
+                              height: 48,
+                              width: "auto",
+                              opacity: 0.55,
+                              userSelect: "none"
+                            }
+                          }
+                        )
                       }
                     )
                   }
@@ -26742,6 +26774,9 @@ function _guessFrontMonth(product, months) {
   }
   return `${product}${months[0]}${currentYear + 1}`;
 }
+
+// src/version.ts
+var FORGECHARTS_VERSION = "1.5.26" ;
 var TIMEZONE_OPTIONS = [
   { label: "UTC", value: "UTC" },
   { label: "Exchange", value: "exchange" },
@@ -26968,6 +27003,17 @@ function BottomToolbar({ symbol, timezone, onTimezoneChange, session, onSessionC
   }, [sessionOpen]);
   return /* @__PURE__ */ jsxs("div", { className: "bottom-bar", children: [
     /* @__PURE__ */ jsxs("div", { className: "bottom-bar-left", children: [
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: "bottom-bar-version",
+          title: `ForgeCharts SDK ${FORGECHARTS_VERSION}`,
+          children: [
+            "v",
+            FORGECHARTS_VERSION
+          ]
+        }
+      ),
       showScriptButton !== false && /* @__PURE__ */ jsxs(
         "button",
         {