@stocksharp/trading-controls 1.4.0 → 1.6.0

package/dist/sstradingcontrols.js

@@ -922,6 +922,12 @@ var SSTradingControls = (() => {
       /// The rendered filter controls, by column key, so a stored filter can be put
       /// back into them without rebuilding the row under the user's cursor.
       __publicField(this, "_filterEls");
+      // How many pages of `renderLimit` rows a paint may show: one, and one more each time
+      // the scroller nears its end. It never shrinks, so a repaint does not throw a reader
+      // halfway down back to the top.
+      __publicField(this, "_pages");
+      // Whether the last paint stopped at its limit with rows still unpainted.
+      __publicField(this, "_truncated");
       /// Suppresses onStateChange while setState applies a stored arrangement.
       __publicField(this, "_restoring");
       for (const col of options.columns) {
@@ -954,6 +960,8 @@ var SSTradingControls = (() => {
       );
       this._filterEls = /* @__PURE__ */ new Map();
       this._restoring = false;
+      this._pages = 1;
+      this._truncated = false;
       const accessors = {};
       for (const col of options.columns) {
         if (col.value) accessors[col.key] = col.value;
@@ -963,6 +971,7 @@ var SSTradingControls = (() => {
       this._paint();
       if (options.contextMenu) this._bindContextMenu();
       if ((options.selection || "none") !== "none") this._bindCopyShortcut();
+      if (options.scroller) this._bindScroller(options.scroller);
     }
     /** Every declared column in display order, hidden ones included. */
     columnKeys() {
@@ -1525,6 +1534,7 @@ var SSTradingControls = (() => {
     }
     render() {
       this._paint();
+      this._fillScroller();
       if (this.options.afterRender) this.options.afterRender();
     }
     _paint() {
@@ -1532,7 +1542,8 @@ var SSTradingControls = (() => {
       this._cellEls.clear();
       const pinned = this.options.pinnedRows ? this.options.pinnedRows() : [];
       const sorted = this.sortedRows();
-      const limit = this.options.renderLimit != null ? this.options.renderLimit : Infinity;
+      const limit = this.options.renderLimit != null ? this.options.renderLimit * this._pages : Infinity;
+      this._truncated = false;
       const children = [];
       for (const row of pinned) {
         if (row.place === GridPinnedPlacements.Top) children.push(this._pinnedRow(row));
@@ -1540,17 +1551,26 @@ var SSTradingControls = (() => {
       let painted = 0;
       if (this._group === null) {
         for (const row of sorted) {
-          if (painted >= limit) break;
+          if (painted >= limit) {
+            this._truncated = true;
+            break;
+          }
           children.push(this._bodyRow(row));
           painted++;
         }
       } else {
         for (const [key, group] of this._groups(sorted)) {
-          if (painted >= limit) break;
+          if (painted >= limit) {
+            this._truncated = true;
+            break;
+          }
           children.push(this._groupRow(key, group.label, group.rows.length));
           if (this._collapsed.has(key)) continue;
           for (const row of group.rows) {
-            if (painted >= limit) break;
+            if (painted >= limit) {
+              this._truncated = true;
+              break;
+            }
             children.push(this._bodyRow(row));
             painted++;
           }
@@ -1566,6 +1586,29 @@ var SSTradingControls = (() => {
         if (this._flashKnown !== null || keys.length > 0) this._flashKnown = new Set(keys);
       }
     }
+    _bindScroller(scroller) {
+      const onScroll = () => {
+        if (!this._canPage(scroller)) return;
+        this._pages++;
+        this.render();
+      };
+      scroller.addEventListener("scroll", onScroll);
+      this._release.push(() => scroller.removeEventListener("scroll", onScroll));
+    }
+    // A page that leaves the reader nothing to scroll would hold the rest out of reach, so the
+    // next is painted at once, until the scroller holds a screen past the one in view.
+    _fillScroller() {
+      const scroller = this.options.scroller;
+      while (scroller && this._canPage(scroller)) {
+        this._pages++;
+        this._paint();
+      }
+    }
+    // Whether the last paint left rows out while the scroller is within a screen of its end. A
+    // scroller with no height is not laid out - a panel in a hidden tab - and pages nothing.
+    _canPage(scroller) {
+      return this._truncated && (this.options.renderLimit ?? 0) > 0 && scroller.clientHeight > 0 && scroller.scrollTop + scroller.clientHeight * 2 >= scroller.scrollHeight;
+    }
     /**
      * The rendered row with this key, or null when it is not on screen (filtered
      * out, or past `renderLimit`).
@@ -2792,8 +2835,9 @@ var SSTradingControls = (() => {
         emptyText: this._host.t("No instruments"),
         rowClass: (i) => i.symbol === this.currentSymbol ? "wl-row wl-current" : "wl-row",
         bindRow: (tr, i) => tr.addEventListener("click", () => this._deps.onSelect(i.symbol)),
-        // Paint a screenful, export and subscribe over the whole filtered set.
-        renderLimit: _WatchlistWidget.RENDER_CAP,
+        // Paint a page at a time as the list is scrolled; export over the whole filtered set.
+        renderLimit: _WatchlistWidget.RENDER_PAGE,
+        scroller: this.rootEl.querySelector(".watchlist-pane"),
         // A header click re-renders through the grid, so this is the only
         // place that sees every change to the visible set — including a sort
         // the widget was never told about.
@@ -2993,7 +3037,7 @@ var SSTradingControls = (() => {
       return cell;
     }
     // Export the current filtered+sorted view to .xlsx — every matching
-    // instrument, without the RENDER_CAP truncation applied to the DOM.
+    // instrument, painted or not.
     _export() {
       this._grid?.download("watchlist", this._host.t("Markets"));
     }
@@ -3116,7 +3160,8 @@ var SSTradingControls = (() => {
   // day is scratch, not a setting worth syncing.
   _WatchlistWidget.BASELINE_KEY_PREFIX = "wlBaseline:";
   _WatchlistWidget.VISIBLE_CAP = 30;
-  _WatchlistWidget.RENDER_CAP = 300;
+  // Rows painted at a time: scrolling the list towards its end paints the next page.
+  _WatchlistWidget.RENDER_PAGE = 300;
   _WatchlistWidget.TYPE = ControlTypes.Watchlist;
   var WatchlistWidget = _WatchlistWidget;
 
@@ -6806,7 +6851,7 @@ var SSTradingControls = (() => {
   var _LogMonitorWidget = class _LogMonitorWidget {
     static create(hostEl, state, deps) {
       const host = assertHost(deps?.host, "LogMonitorWidget");
-      const root = _LogMonitorWidget._buildRoot(host);
+      const root = _LogMonitorWidget._buildRoot(host, deps?.chrome !== false, deps?.sources !== false);
       root.id = makePanelId(_LogMonitorWidget.TYPE);
       hostEl.appendChild(root);
       return new _LogMonitorWidget(root, state || {}, deps);
@@ -6814,13 +6859,14 @@ var SSTradingControls = (() => {
     // The panel's markup: a source tree, a toolbar of level toggles and a text box, and the
     // message table. The level toggles are buttons rather than checkboxes because they are read
     // as a row of states, and each carries its letter so the toolbar and the column agree.
-    static _buildRoot(host) {
+    static _buildRoot(host, chrome, sources) {
       const title = host.t("LogMonitor");
-      return makePanelRoot("log-monitor-panel", title, [
-        makeElement("div", "panel-header", {}, [
-          makeElement("span", "", {}, [title]),
-          makeIconButton("bt-icon-btn bt-icon-cancel panel-close-btn", host.t("ClosePanel"), "bi-x", { type: "button" })
-        ]),
+      const header = chrome ? [makeElement("div", "panel-header", {}, [
+        makeElement("span", "", {}, [title]),
+        makeIconButton("bt-icon-btn bt-icon-cancel panel-close-btn", host.t("ClosePanel"), "bi-x", { type: "button" })
+      ])] : [];
+      return makePanelRoot(`log-monitor-panel${sources ? "" : " log-sources-off"}`, title, [
+        ...header,
         makeElement("div", "panel-body log-monitor-body", {}, [
           makeElement("div", "log-sources", { role: "tree", "aria-label": host.t("LogSources") }, []),
           makeElement("div", "log-messages", {}, [
@@ -6905,7 +6951,16 @@ var SSTradingControls = (() => {
         rowKey: (m) => String(m.id),
         emptyText: this._host.t("NoLogMessages"),
         rowClass: (m) => `log-row log-row-${m.level}`,
-        contextMenu: makeGridMenu(this._host),
+        contextMenu: {
+          ...makeGridMenu(this._host),
+          // The tree is worth its width when several things write to the log and worth
+          // nothing when one does, and which of those is true changes with the session.
+          // So it is a choice the reader makes here, next to the other column choices.
+          items: (_context, defaults) => [
+            ...defaults,
+            { label: this._host.t("LogSources"), checked: this.sourcesShown(), run: () => this.showSources(!this.sourcesShown()) }
+          ]
+        },
         selection: "multi"
       }) : null;
       this._host.register(this);
@@ -6938,6 +6993,15 @@ var SSTradingControls = (() => {
       this._messages = [];
       this._render();
     }
+    /// Whether the source tree is currently drawn.
+    sourcesShown() {
+      return !this.rootEl.classList.contains("log-sources-off");
+    }
+    /// Show or hide the source tree. Hiding it does not drop the filter that is set: the
+    /// messages stay filtered by whatever was selected, which is what the reader last asked for.
+    showSources(on) {
+      this.rootEl.classList.toggle("log-sources-off", !on);
+    }
     /// Show one source's subtree, or everything when given null.
     select(sourceId) {
       this._selected = sourceId;
@@ -7188,7 +7252,9 @@ var SSTradingControls = (() => {
   var _TradeFeedWidget = class _TradeFeedWidget {
     static create(hostEl, state, deps) {
       const host = assertHost(deps?.host, "TradeFeedWidget");
-      const root = _TradeFeedWidget._buildRoot(host);
+      if (typeof deps.ownTradesTab !== "boolean")
+        throw new Error('TradeFeedWidget: dep "ownTradesTab" is required');
+      const root = _TradeFeedWidget._buildRoot(host, deps.ownTradesTab);
       root.id = makePanelId(_TradeFeedWidget.TYPE);
       hostEl.appendChild(root);
       return new _TradeFeedWidget(root, state || {}, deps);
@@ -7200,7 +7266,7 @@ var SSTradingControls = (() => {
     // pins another instrument to THIS feed, the one beside it asks the host for
     // another feed panel. The tooltips are what tell them apart, so neither is
     // an icon on its own.
-    static _buildRoot(host) {
+    static _buildRoot(host, ownTradesTab) {
       const addInstrument = host.t("AddInstrument");
       const marketTrades = host.t("MarketTrades");
       return makePanelRoot("tradefeed-panel tf-tab-market tf-view-list", host.t("TradeFeed"), [
@@ -7214,10 +7280,12 @@ var SSTradingControls = (() => {
           ]),
           makeIconButton("bt-icon-btn bt-icon-cancel panel-close-btn", host.t("ClosePanel"), "bi-x", { type: "button" })
         ]),
-        makeElement("div", "tf-tabs", { role: "tablist", "aria-label": host.t("Trade feed tabs") }, [
-          makeElement("button", "tf-tab active", { type: "button", role: "tab", "aria-selected": "true", "data-tab": "market" }, [marketTrades]),
-          makeElement("button", "tf-tab", { type: "button", role: "tab", "aria-selected": "false", "data-tab": "my" }, [host.t("My trades")])
-        ]),
+        ...ownTradesTab ? [
+          makeElement("div", "tf-tabs", { role: "tablist", "aria-label": host.t("Trade feed tabs") }, [
+            makeElement("button", "tf-tab active", { type: "button", role: "tab", "aria-selected": "true", "data-tab": "market" }, [marketTrades]),
+            makeElement("button", "tf-tab", { type: "button", role: "tab", "aria-selected": "false", "data-tab": "my" }, [host.t("My trades")])
+          ])
+        ] : [],
         makeElement("div", "tf-extras", { role: "list", "aria-label": host.t("ExtraInstruments"), hidden: "" }, []),
         // Each tape is a DataGrid over the shared table skin: the <thead>
         // is left empty for the grid to fill, which is also what makes the
@@ -7228,12 +7296,14 @@ var SSTradingControls = (() => {
             makeElement("tbody", "", {}, [])
           ])
         ]),
-        makeElement("div", "tradefeed-content tf-my", {}, [
-          makeElement("table", "terminal-table tradefeed-table", { role: "table", "aria-label": host.t("My trades") }, [
-            makeElement("thead", "", {}, []),
-            makeElement("tbody", "", {}, [])
+        ...ownTradesTab ? [
+          makeElement("div", "tradefeed-content tf-my", {}, [
+            makeElement("table", "terminal-table tradefeed-table", { role: "table", "aria-label": host.t("My trades") }, [
+              makeElement("thead", "", {}, []),
+              makeElement("tbody", "", {}, [])
+            ])
           ])
-        ]),
+        ] : [],
         makeElement("canvas", "tradefeed-bubbles tf-bubbles", { "aria-hidden": "true" }, []),
         makeElement("div", "tf-bubble-tooltip", { role: "tooltip", hidden: "" }, [])
       ]);