traderead-charts 1.3.3 → 1.3.5

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Changelog
 
+## 1.3.5 — 2026-10-04
+
+- **Price lines can carry a trade plan.** `addPriceLine(price, color, label,
+  opts)` now writes the label on the line (the price stays on the axis), and
+  takes `opts.fit` and `opts.group`:
+  - `fit: true` widens the price scale to keep the line on screen, up to 0.6×
+    the visible bars' own range — a far second target used to squeeze the
+    candles into half the pane, so beyond that it is left out;
+  - a labelled line still outside the frame is pinned to the pane's edge with
+    an arrow, so a plan never silently loses a level;
+  - `group: "name"` lets `clearPriceLines("name")` remove just that set;
+    `clearPriceLines()` with no argument still clears every line.
+- Unlabelled lines behave exactly as before.
+
+## 1.3.4 — 2026-09-30
+
+- **A pinch on a phone zooms the chart, not the page.** The plot now always
+  carries `touch-action: none`. 1.3.3 cancelled the pinch in `touchmove`,
+  but the browser decides to zoom the page at `touchstart`, before that
+  handler can stop it — on phones the whole page still grew. Nothing else
+  changes: every one-finger move on the plot was already the chart's, so the
+  page never scrolled from there.
+- **The version inside the file matches the package again**: the banner read
+  1.3.0 and `TRCharts.version` 1.0.0 through 1.3.3.
+- **Zoom out reaches as far on a phone as on a laptop.** The narrowest bar was
+  1.5 px, so a 310-px phone plot held 200 bars while a laptop held 700; the
+  floor is now whatever fits 750 bars in the plot, when that is smaller than
+  1.5 px (never under 0.25 px). Laptops are practically unchanged.
+
 ## 1.3.3 — 2026-09-29
 
 - **The view can be dragged past the last bar by half the plot**, not by ten

package/README.md

@@ -58,7 +58,7 @@ npm install traderead-charts
 or straight from a CDN, no build step:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/traderead-charts@1.3.1/src/traderead-charts.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/traderead-charts@1.3.3/src/traderead-charts.js"></script>
 ```
 
 ## Quick start

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "traderead-charts",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "description": "Complete financial charting widget — candlesticks, indicators with a pro-style panel, drawing tools, symbol search, themes. Batteries included, zero dependencies, in production on traderead.ai.",
   "main": "src/traderead-charts.js",
   "files": [

package/src/traderead-charts.js

@@ -1,5 +1,5 @@
 /*!
- * TradeRead Charts v1.3.0
+ * TradeRead Charts v1.3.5
  * Copyright (c) 2026 Marcel Todea / TradeRead — traderead.ai
  * Original work, written from first principles.
  * TradeRead Community License 1.0 (see LICENSE.md): free to use, including
@@ -125,6 +125,21 @@
       if (v < min) min = v;
       if (v > max) max = v;
     }
+    // Price lines added with { fit: true } — a trade plan's entry, stop and
+    // targets — widen the price scale so the plan is on screen. One sitting
+    // more than 0.6x the bars' own range away is left out: a far Target 2
+    // squeezed the candles into half the pane (4 Oct 2026). It is pinned to
+    // the pane's edge instead (see the price-line paint).
+    if (this.kind === "price" && isFinite(min) && isFinite(max)) {
+      var span = max - min, pls = this.chart.priceLines, fmin = min, fmax = max;
+      for (i = 0; i < pls.length; i++) {
+        v = pls[i].price;
+        if (!pls[i].fit || !isNum(v) || v < min - 0.6 * span || v > max + 0.6 * span) continue;
+        if (v < fmin) fmin = v;
+        if (v > fmax) fmax = v;
+      }
+      min = fmin; max = fmax;
+    }
     if (!isFinite(min) || !isFinite(max)) { min = 0; max = 1; }
     if (min === max) { min -= 0.5; max += 0.5; }
     var pad = (max - min) * this.chart.opt.autoScalePadPct;
@@ -178,6 +193,9 @@
       c.style.cssText = "position:absolute;left:0;top:0;width:100%;height:100%;display:block;";
       container.appendChild(c);
     });
+    // from the first touch: the browser reads touch-action when the finger
+    // lands, so it must be in place before any gesture (see _touchLock)
+    this.overlay.style.touchAction = "none";
     this.ctx = this.canvas.getContext("2d");
     this.dctx = this.drawCanvas.getContext("2d");
     this.octx = this.overlay.getContext("2d");
@@ -763,6 +781,14 @@
   // on a phone at 2 px a bar: the latest candles stayed pinned to the price
   // axis and could not be brought to the middle to zoom on them (owner's
   // find, 29 Sep 2026).
+  // Zoomed all the way out, a phone shows as many bars as a laptop: the floor
+  // is the option (1.5 px a bar) or whatever fits 750 bars in the plot,
+  // whichever is smaller — a 310-px phone plot held 200 bars at 1.5 px
+  // (owner's find, 30 Sep 2026: "pe mobil pot să fac un zoom out limitat").
+  // Never under 0.25 px; each bar is still drawn at least a pixel wide.
+  Chart.prototype._minSpacing = function () {
+    return Math.max(0.25, Math.min(this.opt.minBarSpacing, this._plotW() / 750));
+  };
   Chart.prototype._maxRight = function () {
     return this.bars.length - 1 + Math.max(this.opt.rightPadBars * 2, (this._plotW() * 0.5) / (this.barSpacing || 1));
   };
@@ -1235,11 +1261,18 @@
   };
 
 
-  Chart.prototype.addPriceLine = function (price, color, label) {
-    this.priceLines.push({ price: price, color: color || "#8b949e", label: label });
+  // opts.fit: widen the price scale to keep the line in view (see the pane
+  // scale). opts.group: a name, so clearPriceLines(name) removes only that
+  // set. The label is written on the line; the price stays on the axis.
+  Chart.prototype.addPriceLine = function (price, color, label, opts) {
+    opts = opts || {};
+    this.priceLines.push({ price: price, color: color || "#8b949e", label: label, fit: !!opts.fit, group: opts.group || null });
+    this._paint();
+  };
+  Chart.prototype.clearPriceLines = function (group) {
+    this.priceLines = group ? this.priceLines.filter(function (l) { return l.group !== group; }) : [];
     this._paint();
   };
-  Chart.prototype.clearPriceLines = function () { this.priceLines = []; this._paint(); };
   Chart.prototype.onCrosshair = function (cb) { this.crosshairCb = cb; };
   // cb({firstVisible, lastVisible, barsLeft}) after every pan/zoom; fires at
   // most once per paint. barsLeft small = time to prepend history.
@@ -1268,11 +1301,16 @@
     this.el.style.cursor = t ? "crosshair" : "";
     this._touchLock();
   };
-  // While a tool is armed or a shape is being dragged, the chart owns the
-  // touch: without touch-action none the browser steals the gesture, fires
-  // a cancel and kills the line mid-draw (paid for once in production).
+  // The plot owns every touch, always. Without touch-action none the browser
+  // steals the gesture: mid-draw it fires a cancel and kills the line (paid
+  // for once in production), and a pinch zoomed the whole PAGE instead of
+  // the chart on phones (owner's find, 30 Sep 2026) — the browser decides
+  // that at touchstart, before any preventDefault in touchmove can stop it.
+  // Nothing is lost: every one-finger move on the plot was already the
+  // chart's (touchmove prevents the default), so the page never scrolled
+  // from here anyway.
   Chart.prototype._touchLock = function () {
-    this.overlay.style.touchAction = (this.tool || this._draft || this._dragDraw || this._sepDrag || this._axisDrag) ? "none" : "";
+    this.overlay.style.touchAction = "none";
   };
   Chart.prototype.onToolDone = function (cb) { this._toolDoneCb = cb; };
   Chart.prototype.clearDrawings = function () { this.drawings = []; this._draft = null; this._selected = null; this._persist(); this._paintDrawings(); };
@@ -1839,16 +1877,37 @@
     for (i = 0; i < tags.length; i++) {
       var t = tags[i];
       var ty = pp.toY(t.price);
-      if (ty < pp.y0 || ty > pp.y0 + pp.h) continue;
-      c.strokeStyle = t.color; c.lineWidth = 1; c.setLineDash([4, 3]);
-      c.beginPath(); c.moveTo(0, Math.round(ty) + 0.5); c.lineTo(W, Math.round(ty) + 0.5); c.stroke();
-      c.setLineDash([]);
+      // A labelled level outside the frame (a far target) is pinned to the
+      // pane's edge with an arrow, so the plan never silently loses a level;
+      // an unlabelled line outside the frame stays hidden, as before.
+      var offAbove = ty < pp.y0, offBelow = ty > pp.y0 + pp.h;
+      if ((offAbove || offBelow) && !(t.label && !t._last)) continue;
+      if (offAbove) ty = pp.y0 + 10;
+      else if (offBelow) ty = pp.y0 + pp.h - 10;
+      if (!offAbove && !offBelow) {
+        c.strokeStyle = t.color; c.lineWidth = 1; c.setLineDash([4, 3]);
+        c.beginPath(); c.moveTo(0, Math.round(ty) + 0.5); c.lineTo(W, Math.round(ty) + 0.5); c.stroke();
+        c.setLineDash([]);
+      }
       var txt = fmtPrice(t.price, dec);
       c.fillStyle = t._last ? t.color : o.tagBg;
       c.fillRect(W, ty - 9, o.priceAxisWidth, 18);
       c.fillStyle = t._last ? "#0d1117" : o.tagText;
       c.textBaseline = "middle";
       c.fillText(txt, W + 5, ty);
+      // the line says what it is ("TP1", "SL"), just above it at the right edge
+      if (t.label && !t._last) {
+        c.save();
+        c.font = "700 10.5px -apple-system, 'Segoe UI', sans-serif";
+        var lbl = offAbove ? "\u25B2 " + t.label : offBelow ? "\u25BC " + t.label : t.label;
+        var lw = c.measureText(lbl).width;
+        c.globalAlpha = 0.85; c.fillStyle = o.tagBg;
+        c.fillRect(W - lw - 14, ty - 16, lw + 10, 14);
+        c.globalAlpha = 1; c.fillStyle = t.color;
+        c.textAlign = "right"; c.textBaseline = "middle";
+        c.fillText(lbl, W - 9, offAbove ? ty + 1 : ty - 9);
+        c.restore();
+      }
     }
 
     // markers
@@ -1968,7 +2027,7 @@
       if (self._axisDrag) {
         var ad = self._axisDrag;
         if (ad.axis === "price") self._vZoom = clamp(ad.z0 * Math.exp((self._cross.y - ad.y0) * 0.004), 0.15, 8);
-        else self.barSpacing = clamp(ad.s0 * Math.exp((self._cross.x - ad.x0) * 0.004), self.opt.minBarSpacing, self.opt.maxBarSpacing);
+        else self.barSpacing = clamp(ad.s0 * Math.exp((self._cross.x - ad.x0) * 0.004), self._minSpacing(), self.opt.maxBarSpacing);
         self._paint();
         return;
       }
@@ -2166,7 +2225,7 @@
       }
       var anchor = self.xToIndex(x);
       var k = Math.exp(-e.deltaY * 0.0015);
-      self.barSpacing = clamp(self.barSpacing * k, self.opt.minBarSpacing, self.opt.maxBarSpacing);
+      self.barSpacing = clamp(self.barSpacing * k, self._minSpacing(), self.opt.maxBarSpacing);
       self.rightIndex = anchor - (self.xToIndex(x) - self.rightIndex);
       self._paint();
     }, { passive: false });
@@ -2231,7 +2290,7 @@
         var aax = e.touches[0].clientX - r.left, aay = e.touches[0].clientY - r.top;
         var ad2 = self._axisDrag;
         if (ad2.axis === "price") self._vZoom = clamp(ad2.z0 * Math.exp((aay - ad2.y0) * 0.004), 0.15, 8);
-        else self.barSpacing = clamp(ad2.s0 * Math.exp((aax - ad2.x0) * 0.004), self.opt.minBarSpacing, self.opt.maxBarSpacing);
+        else self.barSpacing = clamp(ad2.s0 * Math.exp((aax - ad2.x0) * 0.004), self._minSpacing(), self.opt.maxBarSpacing);
         self._paint();
         e.preventDefault();
         return;
@@ -2269,7 +2328,7 @@
         var g0 = e.touches[0], g1 = e.touches[1];
         var pd = Math.hypot(g0.clientX - g1.clientX, g0.clientY - g1.clientY) || 1;
         var pmx = (g0.clientX + g1.clientX) / 2 - r.left;
-        self.barSpacing = clamp(pinch.spacing0 * pd / pinch.d0, self.opt.minBarSpacing, self.opt.maxBarSpacing);
+        self.barSpacing = clamp(pinch.spacing0 * pd / pinch.d0, self._minSpacing(), self.opt.maxBarSpacing);
         // the bar that was under the fingers stays under them (and follows
         // them: two fingers also pan)
         self.rightIndex = clamp(pinch.anchor - (self.xToIndex(pmx) - self.rightIndex), 0, self._maxRight());
@@ -2365,7 +2424,7 @@
   }
 
   global.TRCharts = {
-    version: "1.0.0",
+    version: "1.3.5",
     themes: THEMES,
     resample: resample,
     createChart: function (el, options) { return new Chart(el, options); },