@pipsend/charts 2.3.0 → 2.3.1

package/dist/pipsend-charts.standalone.development.js

@@ -1,6 +1,6 @@
 /*!
  * @license
- * Pipsend Charts v2.3.0-dev+202609220108
+ * Pipsend Charts v2.3.1
  * Copyright (c) 2026 Pipsend
  * Licensed under MIT License
  * Built on TradingView Lightweight Charts™ (Apache 2.0)
@@ -19747,6 +19747,8 @@
             this._private__pointerId = null;
             this._private__pressOrigin = null;
             this._private__pressedLine = null;
+            /** Distance from the pointer to the dragged line when the press landed. */
+            this._private__grabOffset = 0;
             /** Latest pointer position in pane coordinates, or null when off the panes. */
             this._private__point = null;
             this._private__paneIndex = undefined;
@@ -19824,6 +19826,7 @@
             this._private__pointerId = event.pointerId;
             this._private__element.setPointerCapture(event.pointerId);
             line.beginDrag();
+            this._private__grabOffset = this._private__measureGrabOffset(line, event);
             this._private__applyCursor();
             event.preventDefault();
             event.stopPropagation();
@@ -19858,6 +19861,7 @@
                     Math.abs(event.clientY - origin._internal_y) > CLICK_TOLERANCE_PX);
             if (dragged !== null) {
                 this._private__dragging = null;
+                this._private__grabOffset = 0;
                 if (moved) {
                     dragged.commitDrag();
                 }
@@ -19885,6 +19889,7 @@
             }
             const line = this._private__dragging;
             this._private__dragging = null;
+            this._private__grabOffset = 0;
             this._private__releasePointer();
             line.cancelDrag();
             this._private__applyCursor();
@@ -19914,16 +19919,38 @@
             // as the pointer leaves the pane canvas — over the price axis, past the
             // chart's edge — and a drag driven from it freezes there while the user
             // is still moving.
+            const paneY = this._private__paneY(line, event);
+            return paneY === null ? null : line.priceAt(paneY - this._private__grabOffset);
+        }
+        /** The pointer's position inside the line's pane, in pane coordinates. */
+        _private__paneY(line, event) {
             const pane = this._private__chart.panes()[line.paneIndex()];
             const paneElement = pane ? pane.getHTMLElement() : null;
             if (paneElement) {
-                return line.priceAt(event.clientY - paneElement.getBoundingClientRect().top);
+                return event.clientY - paneElement.getBoundingClientRect().top;
             }
             if (this._private__point !== null && this._private__paneIndex === line.paneIndex()) {
-                return line.priceAt(this._private__point._internal_y);
+                return this._private__point._internal_y;
             }
             return null;
         }
+        /**
+         * Keeps the grab point: a line picked up by the edge of its label moves with
+         * the pointer rather than centring itself on it. Ignored past a sane
+         * distance, so a bad reading cannot send the line off on the first move.
+         */
+        _private__measureGrabOffset(line, event) {
+            if (!line.dragAnchorY) {
+                return 0;
+            }
+            const anchor = line.dragAnchorY();
+            const paneY = this._private__paneY(line, event);
+            if (anchor === null || paneY === null) {
+                return 0;
+            }
+            const offset = paneY - anchor;
+            return Math.abs(offset) > 40 /* Constants.MaxGrabOffsetPx */ ? 0 : offset;
+        }
         /**
          * Hit ids are either a bare line id or `id#part`, which is how a line with
          * several targets reports which one was hit.
@@ -20479,6 +20506,126 @@
         return new InteractiveLineManager(chart, series);
     }
 
+    /**
+     * Fans out labels that land on top of each other.
+     *
+     * Every position line on a chart shares one of these. Two positions opened at
+     * the same price draw their labels at the same coordinate, and the one behind
+     * becomes unreachable — the engine resolves the hit to whichever primitive it
+     * reaches first, and that is always the same one. Nudging each collision down
+     * leaves every label a strip of its own to be grabbed by.
+     *
+     * The line itself never moves: it stays at the price it belongs to, and only
+     * the label is offset.
+     */
+    class PositionLineLabelLayout {
+        constructor() {
+            /** Registration order. It is what keeps the fan from reshuffling per frame. */
+            this._private__order = [];
+            this._private__claims = new Map();
+            this._private__offsets = new Map();
+            this._private__invalidated = true;
+        }
+        _internal_register(ownerId) {
+            if (!this._private__claims.has(ownerId)) {
+                this._private__order.push(ownerId);
+                this._private__claims.set(ownerId, []);
+                this._private__invalidated = true;
+            }
+        }
+        _internal_unregister(ownerId) {
+            const index = this._private__order.indexOf(ownerId);
+            if (index !== -1) {
+                this._private__order.splice(index, 1);
+            }
+            this._private__claims.delete(ownerId);
+            this._private__invalidated = true;
+        }
+        _internal_isEmpty() {
+            return this._private__order.length === 0;
+        }
+        /**
+         * Publishes where an owner's labels want to sit. Called while each line
+         * rebuilds its renderer data, so a fan can be one frame behind while prices
+         * move — which is invisible, and cheaper than forcing a second pass.
+         */
+        _internal_setClaims(ownerId, claims) {
+            this._private__claims.set(ownerId, claims);
+            this._private__invalidated = true;
+        }
+        /** How far down a label has to move to clear the ones already placed. */
+        _internal_offsetFor(ownerId, level) {
+            if (this._private__invalidated) {
+                this._private__recalculate();
+            }
+            return this._private__offsets.get(key(ownerId, level)) ?? 0;
+        }
+        _private__recalculate() {
+            const offsets = new Map();
+            const placed = [];
+            for (const ownerId of this._private__order) {
+                for (const claim of this._private__claims.get(ownerId) ?? []) {
+                    const gap = minGap(claim._internal_height);
+                    const maxOffset = claim._internal_height;
+                    // Moved down to the first coordinate that clears everything already
+                    // placed, and no further. Two levels whose own prices nearly part
+                    // them only need the few pixels they are short of — stepping by a
+                    // full gap each time is what made the fan look flung open.
+                    let y = claim._internal_y;
+                    for (const other of [...placed].sort(byY)) {
+                        if (Math.abs(y - other._internal_y) < gap) {
+                            y = other._internal_y + gap;
+                        }
+                    }
+                    let offset = y - claim._internal_y;
+                    if (offset > maxOffset) {
+                        // More labels than there is room to fan. The rest stack, which is
+                        // no worse than before and keeps the pile from running off.
+                        offset = 0;
+                    }
+                    placed.push({ _internal_y: claim._internal_y + offset, _internal_height: claim._internal_height });
+                    offsets.set(key(ownerId, claim._internal_level), offset);
+                }
+            }
+            this._private__offsets = offsets;
+            this._private__invalidated = false;
+        }
+    }
+    function key(ownerId, level) {
+        return `${ownerId}:${level}`;
+    }
+    /**
+     * The strip a label keeps to itself. Comfortably clickable, and no wider —
+     * every pixel here is a pixel the label sits away from its own line.
+     */
+    function minGap(height) {
+        return Math.max(9, Math.round(height * 0.4));
+    }
+    function byY(a, b) {
+        return a._internal_y - b._internal_y;
+    }
+    const layouts = new WeakMap();
+    /** The layout is shared by every position line on the same chart. */
+    function acquireLabelLayout(chart, ownerId) {
+        let layout = layouts.get(chart);
+        if (!layout) {
+            layout = new PositionLineLabelLayout();
+            layouts.set(chart, layout);
+        }
+        layout._internal_register(ownerId);
+        return layout;
+    }
+    function releaseLabelLayout(chart, ownerId) {
+        const layout = layouts.get(chart);
+        if (!layout) {
+            return;
+        }
+        layout._internal_unregister(ownerId);
+        if (layout._internal_isEmpty()) {
+            layouts.delete(chart);
+        }
+    }
+
     const positionLineDefaultColors = {
         entry: '#2962FF',
         takeProfit: '#26A17B',
@@ -20511,12 +20658,12 @@
             // line, so the narrowest target is tested first.
             for (const layout of this._private__layouts) {
                 if (layout._internal_closable && x >= layout._internal_closeLeft && x <= layout._internal_closeRight &&
-                    Math.abs(y - layout._internal_y) <= layout._internal_height / 2) {
+                    Math.abs(y - layout._internal_labelY) <= layout._internal_height / 2) {
                     return { _internal_level: layout._internal_level, _internal_part: 'close' };
                 }
             }
             for (const layout of this._private__layouts) {
-                if (x >= layout._internal_pillLeft && x <= layout._internal_pillRight && Math.abs(y - layout._internal_y) <= layout._internal_height / 2) {
+                if (x >= layout._internal_pillLeft && x <= layout._internal_pillRight && Math.abs(y - layout._internal_labelY) <= layout._internal_height / 2) {
                     return { _internal_level: layout._internal_level, _internal_part: 'body' };
                 }
             }
@@ -20566,7 +20713,8 @@
             const pillWidth = badgeWidth + labelWidth + closeWidth;
             const pillRight = Math.max(pillWidth, lineEnd - 8 /* Constants.LabelGap */);
             const pillLeft = pillRight - pillWidth;
-            const top = level._internal_y - height / 2;
+            const labelY = level._internal_y + level._internal_labelOffsetY;
+            const top = labelY - height / 2;
             this._private__drawLineSegments(scope, level, pillLeft, pillRight, lineEnd);
             this._private__drawPill(scope, data, level, { _internal_left: pillLeft, _internal_top: top, _internal_width: pillWidth, _internal_height: height });
             let cellLeft = pillLeft;
@@ -20579,7 +20727,7 @@
             ctx.scale(hpr, vpr);
             ctx.textAlign = 'center';
             ctx.fillStyle = data._internal_textColor ?? level._internal_color;
-            ctx.fillText(level._internal_text, cellLeft + labelWidth / 2, level._internal_y);
+            ctx.fillText(level._internal_text, cellLeft + labelWidth / 2, labelY);
             ctx.restore();
             cellLeft += labelWidth;
             if (level._internal_closable) {
@@ -20589,6 +20737,7 @@
             return {
                 _internal_level: level._internal_level,
                 _internal_y: level._internal_y,
+                _internal_labelY: labelY,
                 _internal_height: height,
                 _internal_pillLeft: pillLeft,
                 _internal_pillRight: pillRight,
@@ -20607,12 +20756,20 @@
             ctx.lineWidth = lineWidth;
             setLineStyle(ctx, level._internal_lineStyle);
             ctx.beginPath();
-            ctx.moveTo(0, y);
-            ctx.lineTo(Math.round(Math.max(0, pillLeft - 8 /* Constants.LabelGap */) * hpr), y);
-            if (lineEnd > pillRight + 8 /* Constants.LabelGap */) {
-                ctx.moveTo(Math.round((pillRight + 8 /* Constants.LabelGap */) * hpr), y);
+            if (level._internal_labelOffsetY !== 0) {
+                // The label has been fanned off its line, so breaking the line for it
+                // would leave a gap with nothing in it.
+                ctx.moveTo(0, y);
                 ctx.lineTo(Math.round(lineEnd * hpr), y);
             }
+            else {
+                ctx.moveTo(0, y);
+                ctx.lineTo(Math.round(Math.max(0, pillLeft - 8 /* Constants.LabelGap */) * hpr), y);
+                if (lineEnd > pillRight + 8 /* Constants.LabelGap */) {
+                    ctx.moveTo(Math.round((pillRight + 8 /* Constants.LabelGap */) * hpr), y);
+                    ctx.lineTo(Math.round(lineEnd * hpr), y);
+                }
+            }
             ctx.stroke();
             ctx.restore();
         }
@@ -20807,6 +20964,7 @@
             this._private__theme = { ...positionLineThemeDefaults, ...options.theme };
             this._private__paneViews = [this._private__paneView];
             this._private__axisViews = positionLineLevels.map((level) => new PositionLineAxisView(() => this._private__axisLabel(level)));
+            this._private__labelLayout = acquireLabelLayout(this._private__chart, this._private__id);
             this._private__series.attachPrimitive(this);
             acquireController(this._private__chart)?._internal_register(this);
         }
@@ -20893,6 +21051,23 @@
             const price = this._private__series.coordinateToPrice(paneY);
             return price === null ? null : price;
         }
+        /**
+         * Where the level being dragged actually sits. The controller measures the
+         * pointer against it so the level moves by what the pointer moved, instead
+         * of jumping to sit under it — which matters most when the label has been
+         * fanned away from its own line.
+         */
+        dragAnchorY() {
+            if (this._private__dragLevel === null) {
+                return null;
+            }
+            const price = this._private__levelOptions(this._private__dragLevel)?.price;
+            if (price === undefined || !isFinite(price)) {
+                return null;
+            }
+            const y = this._private__series.priceToCoordinate(price);
+            return y === null ? null : y;
+        }
         beginDrag() {
             this._private__dragLevel = this._private__hoveredLevel;
             if (this._private__dragLevel === null) {
@@ -21041,6 +21216,7 @@
          */
         remove() {
             releaseController(this._private__chart, this);
+            releaseLabelLayout(this._private__chart, this._private__id);
             this._private__series.detachPrimitive(this);
         }
         requestUpdate() {
@@ -21086,7 +21262,11 @@
             if (!this._private__attached || this._private__options.visible === false) {
                 return null;
             }
+            const layout = this._private__chart.options()['layout'];
+            const fontSize = this._private__theme.fontSize ?? layout.fontSize;
+            const labelHeight = fontSize + this._private__theme.paddingY * 2;
             const levels = [];
+            const claims = [];
             for (const level of positionLineLevels) {
                 const options = this._private__levelOptions(level);
                 // A level added through a patch can be missing its price until the
@@ -21099,9 +21279,11 @@
                     continue;
                 }
                 const isEntry = level === 'entry';
+                claims.push({ _internal_level: level, _internal_y: y, _internal_height: labelHeight });
                 levels.push({
                     _internal_level: level,
                     _internal_y: y,
+                    _internal_labelOffsetY: 0,
                     _internal_color: options.color ?? positionLineDefaultColors[level],
                     _internal_text: options.formatText ? options.formatText(options.price) : options.text ?? '',
                     _internal_badge: options.badge ?? '',
@@ -21113,10 +21295,15 @@
                 });
             }
             if (levels.length === 0) {
+                this._private__labelLayout._internal_setClaims(this._private__id, []);
                 return null;
             }
-            const layout = this._private__chart.options()['layout'];
-            const fontSize = this._private__theme.fontSize ?? layout.fontSize;
+            // Published before the offsets are read so every line on the chart —
+            // positions, pending orders, alerts — is fanned against the same set.
+            this._private__labelLayout._internal_setClaims(this._private__id, claims);
+            for (const level of levels) {
+                level._internal_labelOffsetY = this._private__labelLayout._internal_offsetFor(this._private__id, level._internal_level);
+            }
             return {
                 _internal_levels: levels,
                 _internal_background: this._private__theme.background ?? resolveBackgroundColor(layout.background),
@@ -30854,7 +31041,7 @@
      * Returns the current version as a string. For example `'1.0.0'`.
      */
     function version() {
-        return "2.3.0-dev+202609220108";
+        return "2.3.1";
     }
 
     var PipsendChartsModule = /*#__PURE__*/Object.freeze({