traderead-charts 1.3.2 → 1.3.5

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # 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
+  bars. On a phone at 2 px a bar ten bars were 20 px: the latest candles
+  stayed pinned to the price axis and could not be brought to the middle to
+  zoom on them. The limit is now in pixels; wide bars keep the old ten.
+- **Pinch zooms around the fingers**, and the bar under them stays under
+  them. It used to zoom from the right edge only.
+- **Pinch measures the real distance between the fingers.** A pinch made
+  with one finger above the other has almost no horizontal spread; measuring
+  only that made the zoom jump.
+- **A pinch on the chart never zooms the page instead.** iOS ignores
+  `user-scalable=no`: the touch handler now claims the gesture, and Safari's
+  own `gesturestart` / `gesturechange` are cancelled on the chart.
+
 ## 1.3.2 — 2026-09-20
 
 - **README install example unpinned from 1.2.0.** The copy-paste snippet on

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.2",
+  "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");
@@ -758,6 +776,22 @@
   Chart.prototype.xToIndex = function (x) {
     return this.rightIndex + this.opt.rightPadBars - (this._plotW() - x) / this.barSpacing;
   };
+  // How far past the last bar the view may be dragged: the pad, or half the
+  // plot, whichever is more — in pixels, not bars. Ten bars of slack was 20 px
+  // 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));
+  };
   Chart.prototype._visibleRange = function () {
     var lo = Math.floor(this.xToIndex(0)), hi = Math.ceil(this.xToIndex(this._plotW()));
     return [clamp(lo, 0, this.bars.length - 1), clamp(hi, 0, this.bars.length - 1)];
@@ -1227,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.
@@ -1260,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(); };
@@ -1831,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
@@ -1938,7 +2005,7 @@
       function step(now) {
         var dt = now - last; last = now;
         self.rightIndex = clamp(self.rightIndex - glide.v * dt / self.barSpacing,
-          0, self.bars.length - 1 + self.opt.rightPadBars * 2);
+          0, self._maxRight());
         self._paint();
         glide.v *= Math.pow(0.94, dt / 16.7);
         if (Math.abs(glide.v) >= 0.05) glide.raf = requestAnimationFrame(step);
@@ -1960,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;
       }
@@ -2003,7 +2070,7 @@
         }
         glide.lastX = nowX; glide.lastT = nowT;
         self.rightIndex = drag.right0 + (drag.x0 - nowX) / self.barSpacing;
-        self.rightIndex = clamp(self.rightIndex, 0, self.bars.length - 1 + self.opt.rightPadBars * 2);
+        self.rightIndex = clamp(self.rightIndex, 0, self._maxRight());
         if (drag.vpan) {
           var us = self.panes[0].h * (1 - self.opt.volumeHeightPct * 0.35) || 1;
           self._vOff = drag.off0 + (e.clientY - r.top - drag.y0) / us;
@@ -2152,13 +2219,13 @@
       // way every charting tool treats it. Vertical wheel stays zoom.
       if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
         self.rightIndex = clamp(self.rightIndex + e.deltaX / self.barSpacing,
-          0, self.bars.length - 1 + self.opt.rightPadBars * 2);
+          0, self._maxRight());
         self._paint();
         return;
       }
       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 });
@@ -2209,8 +2276,12 @@
         if (self._draft) { self.drawings.push(self._draft); self._selected = self._draft.id; self._draft = null; self._persist(); self._paintDrawings(); }
         self._dragDraw = null; self._sepDrag = null; drag = null;
         self._touchLock();
-        var dx = e.touches[0].clientX - e.touches[1].clientX;
-        pinch = { d0: Math.abs(dx) || 1, spacing0: self.barSpacing };
+        // Zoom around the fingers, on their real distance: a pinch made with
+        // one finger above the other has almost no horizontal spread, and
+        // measuring only that made the zoom jump.
+        var f0 = e.touches[0], f1 = e.touches[1];
+        pinch = { d0: Math.hypot(f0.clientX - f1.clientX, f0.clientY - f1.clientY) || 1, spacing0: self.barSpacing,
+                  anchor: self.xToIndex((f0.clientX + f1.clientX) / 2 - r.left) };
       }
     }, { passive: true });
     el.addEventListener("touchmove", function (e) {
@@ -2219,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;
@@ -2254,9 +2325,16 @@
         return;
       }
       if (pinch && e.touches.length === 2) {
-        var d = Math.abs(e.touches[0].clientX - e.touches[1].clientX) || 1;
-        self.barSpacing = clamp(pinch.spacing0 * d / pinch.d0, self.opt.minBarSpacing, self.opt.maxBarSpacing);
+        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._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());
         self._paint();
+        // the page must not zoom instead: iOS ignores user-scalable=no
+        e.preventDefault();
       } else if (drag && e.touches.length === 1) {
         var tNowT = performance.now(), tNowX = e.touches[0].clientX - r.left;
         if (glide.lastT) {
@@ -2265,7 +2343,7 @@
         }
         glide.lastX = tNowX; glide.lastT = tNowT;
         self.rightIndex = drag.right0 + (drag.x0 - tNowX) / self.barSpacing;
-        self.rightIndex = clamp(self.rightIndex, 0, self.bars.length - 1 + self.opt.rightPadBars * 2);
+        self.rightIndex = clamp(self.rightIndex, 0, self._maxRight());
         if (drag.vpan) {
           var us2 = self.panes[0].h * (1 - self.opt.volumeHeightPct * 0.35) || 1;
           self._vOff = drag.off0 + (e.touches[0].clientY - r.top - drag.y0) / us2;
@@ -2291,6 +2369,9 @@
       self._touchLock();
     }
     el.addEventListener("touchend", endTouch, { passive: true });
+    // Safari's own pinch events: without this it zooms the whole page.
+    el.addEventListener("gesturestart", function (e) { e.preventDefault(); });
+    el.addEventListener("gesturechange", function (e) { e.preventDefault(); });
     // a browser-fired cancel must COMMIT the in-flight shape, not destroy it
     el.addEventListener("touchcancel", endTouch, { passive: true });
   };
@@ -2343,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); },