@pipsend/charts 1.2.0 → 1.2.2

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

@@ -1,6 +1,6 @@
 /*!
  * @license
- * Pipsend Charts v1.2.0
+ * Pipsend Charts v1.2.1
  * Copyright (c) 2026 Pipsend
  * Licensed under MIT License
  * Built on TradingView Lightweight Charts™ (Apache 2.0)
@@ -17443,8 +17443,9 @@
         indicator.setVolumeData(volumeMap);
     }
 
+    const CLICK_TOLERANCE_PX = 4;
     /**
-     * Draggable Price Line - Línea de precio que se puede arrastrar con el mouse
+     * Draggable Price Line - Línea de precio que se puede arrastrar y/o hacer click
      */
     class DraggablePriceLine {
         constructor(chart, series, options) {
@@ -17454,6 +17455,8 @@
             this._private__unsubscribeHandlers = [];
             this._private__isHovering = false;
             this._private__originalColor = '';
+            this._private__mouseDownPos = null;
+            this._private__mouseDownOnLine = false;
             this._private__chart = chart;
             this._private__series = series;
             this._private__options = {
@@ -17464,10 +17467,25 @@
                 ...options,
             };
             this._private__createPriceLine();
-            if (this._private__options.draggable) {
-                this._private__setupDragHandlers();
+            // Set up handlers if line is interactive (draggable or clickable)
+            if (this._private__options.draggable || this._private__options.onClick) {
+                this._private__setupInteractionHandlers();
             }
         }
+        /**
+         * Resolve the effective title: formatTitle(price) wins over the static title.
+         */
+        _private__resolveTitle() {
+            if (this._private__options.formatTitle) {
+                try {
+                    return this._private__options.formatTitle(this._private__options.price);
+                }
+                catch (error) {
+                    console.error('Error in formatTitle:', error);
+                }
+            }
+            return this._private__options.title || '';
+        }
         _private__createPriceLine() {
             this._private__originalColor = this._private__options.color;
             this._private__priceLine = this._private__series.createPriceLine({
@@ -17476,29 +17494,36 @@
                 lineWidth: this._private__options.lineWidth,
                 lineStyle: this._private__options.lineStyle,
                 axisLabelVisible: this._private__options.axisLabelVisible,
-                title: this._private__options.title || '',
+                title: this._private__resolveTitle(),
             });
         }
-        _private__setupDragHandlers() {
+        _private__setupInteractionHandlers() {
             const chartElement = this._private__chart.chartElement?.() || document.querySelector('.tv-lightweight-charts');
             if (!chartElement)
                 return;
             this._private__container = chartElement;
             const handleMouseDown = (e) => {
-                // Solo permitir drag desde el área del gráfico (no desde el price axis)
+                // Solo permitir interacción desde el área del gráfico (no desde el price axis)
                 if (!this._private__isInChartArea(e)) {
                     return;
                 }
                 const price = this._private__getPriceFromY(e.clientY);
-                if (this._private__isOnLine(e, price)) {
+                if (!this._private__isOnLine(e, price)) {
+                    return;
+                }
+                // Track press for click vs drag detection
+                this._private__mouseDownPos = { _internal_x: e.clientX, _internal_y: e.clientY };
+                this._private__mouseDownOnLine = true;
+                // Only start drag if line is draggable
+                if (this._private__options.draggable) {
                     this._private__isDragging = true;
                     this._private__container.style.cursor = 'ns-resize';
                     if (this._private__options.onDragStart) {
                         this._private__options.onDragStart(this._private__options.price);
                     }
-                    e.preventDefault();
-                    e.stopPropagation();
                 }
+                e.preventDefault();
+                e.stopPropagation();
             };
             const handleMouseMove = (e) => {
                 if (this._private__isDragging) {
@@ -17510,32 +17535,65 @@
                     // Prevenir que el gráfico se mueva mientras arrastramos la línea
                     e.preventDefault();
                     e.stopPropagation();
+                    return;
                 }
-                else {
-                    // Solo mostrar hover si está en el área del gráfico
-                    if (!this._private__isInChartArea(e)) {
-                        this._private__setHoverState(false);
-                        return;
-                    }
-                    const price = this._private__getPriceFromY(e.clientY);
-                    if (this._private__isOnLine(e, price)) {
-                        this._private__container.style.cursor = 'ns-resize';
-                        this._private__setHoverState(true);
-                    }
-                    else {
+                // Hover state — only mutate cursor for transitions involving THIS line.
+                // Multiple lines can share the same chart element listener (one per line).
+                // Blindly resetting the cursor here would clobber another line's drag/hover.
+                if (!this._private__isInChartArea(e)) {
+                    if (this._private__isHovering) {
                         this._private__container.style.cursor = 'default';
                         this._private__setHoverState(false);
                     }
+                    return;
+                }
+                const price = this._private__getPriceFromY(e.clientY);
+                const onThisLine = this._private__isOnLine(e, price);
+                if (onThisLine) {
+                    this._private__container.style.cursor = this._private__options.draggable ? 'ns-resize' : 'pointer';
+                    this._private__setHoverState(true);
+                }
+                else if (this._private__isHovering) {
+                    // Only revert when actually leaving — don't override another line's cursor.
+                    this._private__container.style.cursor = 'default';
+                    this._private__setHoverState(false);
                 }
             };
             const handleMouseUp = (e) => {
-                if (this._private__isDragging) {
-                    this._private__isDragging = false;
+                const wasDragging = this._private__isDragging;
+                const downOnLine = this._private__mouseDownOnLine;
+                const downPos = this._private__mouseDownPos;
+                // Reset state regardless of outcome
+                this._private__isDragging = false;
+                this._private__mouseDownOnLine = false;
+                this._private__mouseDownPos = null;
+                if (wasDragging) {
+                    // Drag-end path
                     this._private__container.style.cursor = 'default';
                     this._private__setHoverState(false);
-                    if (this._private__options.onDragEnd) {
+                    const movedFromDown = downPos &&
+                        (Math.abs(e.clientX - downPos._internal_x) > CLICK_TOLERANCE_PX ||
+                            Math.abs(e.clientY - downPos._internal_y) > CLICK_TOLERANCE_PX);
+                    // If barely moved, treat as click instead of drag
+                    if (!movedFromDown && this._private__options.onClick) {
+                        this._private__options.onClick(this._private__options.price);
+                    }
+                    else if (this._private__options.onDragEnd) {
                         this._private__options.onDragEnd(this._private__options.price);
                     }
+                    return;
+                }
+                // Pure click path (non-draggable line or draggable that didn't start drag)
+                if (downOnLine && downPos && this._private__options.onClick) {
+                    const moved = Math.abs(e.clientX - downPos._internal_x) > CLICK_TOLERANCE_PX ||
+                        Math.abs(e.clientY - downPos._internal_y) > CLICK_TOLERANCE_PX;
+                    if (!moved) {
+                        // Confirm release was still on the line area
+                        const price = this._private__getPriceFromY(e.clientY);
+                        if (this._private__isOnLine(e, price)) {
+                            this._private__options.onClick(this._private__options.price);
+                        }
+                    }
                 }
             };
             const handleMouseLeave = (e) => {
@@ -17546,9 +17604,12 @@
                         this._private__options.onDragEnd(this._private__options.price);
                     }
                 }
-                else {
+                else if (this._private__isHovering) {
+                    this._private__container.style.cursor = 'default';
                     this._private__setHoverState(false);
                 }
+                this._private__mouseDownOnLine = false;
+                this._private__mouseDownPos = null;
             };
             this._private__container.addEventListener('mousedown', handleMouseDown);
             this._private__container.addEventListener('mousemove', handleMouseMove);
@@ -17642,11 +17703,16 @@
         _private__updatePrice(newPrice) {
             this._private__options.price = newPrice;
             if (this._private__priceLine) {
-                this._private__priceLine.applyOptions({ price: newPrice });
+                // Re-resolve title so formatTitle reflects the new price.
+                this._private__priceLine.applyOptions({
+                    price: newPrice,
+                    title: this._private__resolveTitle(),
+                });
             }
         }
         /**
-         * Update the price line options
+         * Update the price line options. Any subset of options can be passed.
+         * Title is recomputed from `formatTitle` if available, otherwise from `title`.
          */
         applyOptions(options) {
             this._private__options = { ...this._private__options, ...options };
@@ -17654,14 +17720,36 @@
             if (options.color) {
                 this._private__originalColor = options.color;
             }
-            if (this._private__priceLine && options.price !== undefined) {
-                this._private__priceLine.applyOptions({
-                    price: options.price,
-                    color: options.color,
-                    lineWidth: options.lineWidth,
-                    lineStyle: options.lineStyle,
-                    title: options.title,
-                });
+            if (!this._private__priceLine)
+                return;
+            // Apply visual options. Any field not in `options` is left untouched on the
+            // underlying price line, except `title` which we always re-resolve so that
+            // formatTitle stays in sync with whatever changed.
+            const patch = {
+                title: this._private__resolveTitle(),
+            };
+            if (options.price !== undefined)
+                patch.price = options.price;
+            if (options.color !== undefined)
+                patch.color = options.color;
+            if (options.lineWidth !== undefined)
+                patch.lineWidth = options.lineWidth;
+            if (options.lineStyle !== undefined)
+                patch.lineStyle = options.lineStyle;
+            this._private__priceLine.applyOptions(patch);
+        }
+        /**
+         * Set the title directly. Use this for updates that don't depend on the
+         * line's price (e.g. live PnL on a fixed entry line). Bypasses formatTitle.
+         */
+        setTitle(text) {
+            this._private__options.title = text;
+            // If a formatter is set we still write the static title to options, but
+            // the visual title comes from the formatter on the next price update.
+            // To make this call effective immediately, we override the rendered title
+            // here unconditionally.
+            if (this._private__priceLine) {
+                this._private__priceLine.applyOptions({ title: text });
             }
         }
         /**
@@ -17671,7 +17759,7 @@
             return this._private__options.price;
         }
         /**
-         * Set price programmatically
+         * Set price programmatically. Triggers formatTitle if configured.
          */
         setPrice(price) {
             this._private__updatePrice(price);
@@ -17793,6 +17881,8 @@
             onDragStart: options.onDragStart,
             onDragMove: options.onDragMove,
             onDragEnd: options.onDragEnd,
+            onClick: options.onClick,
+            formatTitle: options.formatTitle,
         };
         return new DraggablePriceLine(chart, series, lineOptions);
     }
@@ -24863,7 +24953,7 @@
      * Returns the current version as a string. For example `'1.0.0'`.
      */
     function version() {
-        return "1.2.0";
+        return "1.2.1";
     }
 
     var PipsendChartsModule = /*#__PURE__*/Object.freeze({

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

@@ -1,6 +1,6 @@
 /*!
  * @license
- * Pipsend Charts v1.2.0
+ * Pipsend Charts v1.2.1
  * Copyright (c) 2026 Pipsend
  * Licensed under MIT License
  * Built on TradingView Lightweight Charts™ (Apache 2.0)
@@ -17440,8 +17440,9 @@ function setVolumeProfileData(indicator, data) {
     indicator.setVolumeData(volumeMap);
 }
 
+const CLICK_TOLERANCE_PX = 4;
 /**
- * Draggable Price Line - Línea de precio que se puede arrastrar con el mouse
+ * Draggable Price Line - Línea de precio que se puede arrastrar y/o hacer click
  */
 class DraggablePriceLine {
     constructor(chart, series, options) {
@@ -17451,6 +17452,8 @@ class DraggablePriceLine {
         this._private__unsubscribeHandlers = [];
         this._private__isHovering = false;
         this._private__originalColor = '';
+        this._private__mouseDownPos = null;
+        this._private__mouseDownOnLine = false;
         this._private__chart = chart;
         this._private__series = series;
         this._private__options = {
@@ -17461,10 +17464,25 @@ class DraggablePriceLine {
             ...options,
         };
         this._private__createPriceLine();
-        if (this._private__options.draggable) {
-            this._private__setupDragHandlers();
+        // Set up handlers if line is interactive (draggable or clickable)
+        if (this._private__options.draggable || this._private__options.onClick) {
+            this._private__setupInteractionHandlers();
         }
     }
+    /**
+     * Resolve the effective title: formatTitle(price) wins over the static title.
+     */
+    _private__resolveTitle() {
+        if (this._private__options.formatTitle) {
+            try {
+                return this._private__options.formatTitle(this._private__options.price);
+            }
+            catch (error) {
+                console.error('Error in formatTitle:', error);
+            }
+        }
+        return this._private__options.title || '';
+    }
     _private__createPriceLine() {
         this._private__originalColor = this._private__options.color;
         this._private__priceLine = this._private__series.createPriceLine({
@@ -17473,29 +17491,36 @@ class DraggablePriceLine {
             lineWidth: this._private__options.lineWidth,
             lineStyle: this._private__options.lineStyle,
             axisLabelVisible: this._private__options.axisLabelVisible,
-            title: this._private__options.title || '',
+            title: this._private__resolveTitle(),
         });
     }
-    _private__setupDragHandlers() {
+    _private__setupInteractionHandlers() {
         const chartElement = this._private__chart.chartElement?.() || document.querySelector('.tv-lightweight-charts');
         if (!chartElement)
             return;
         this._private__container = chartElement;
         const handleMouseDown = (e) => {
-            // Solo permitir drag desde el área del gráfico (no desde el price axis)
+            // Solo permitir interacción desde el área del gráfico (no desde el price axis)
             if (!this._private__isInChartArea(e)) {
                 return;
             }
             const price = this._private__getPriceFromY(e.clientY);
-            if (this._private__isOnLine(e, price)) {
+            if (!this._private__isOnLine(e, price)) {
+                return;
+            }
+            // Track press for click vs drag detection
+            this._private__mouseDownPos = { _internal_x: e.clientX, _internal_y: e.clientY };
+            this._private__mouseDownOnLine = true;
+            // Only start drag if line is draggable
+            if (this._private__options.draggable) {
                 this._private__isDragging = true;
                 this._private__container.style.cursor = 'ns-resize';
                 if (this._private__options.onDragStart) {
                     this._private__options.onDragStart(this._private__options.price);
                 }
-                e.preventDefault();
-                e.stopPropagation();
             }
+            e.preventDefault();
+            e.stopPropagation();
         };
         const handleMouseMove = (e) => {
             if (this._private__isDragging) {
@@ -17507,32 +17532,65 @@ class DraggablePriceLine {
                 // Prevenir que el gráfico se mueva mientras arrastramos la línea
                 e.preventDefault();
                 e.stopPropagation();
+                return;
             }
-            else {
-                // Solo mostrar hover si está en el área del gráfico
-                if (!this._private__isInChartArea(e)) {
-                    this._private__setHoverState(false);
-                    return;
-                }
-                const price = this._private__getPriceFromY(e.clientY);
-                if (this._private__isOnLine(e, price)) {
-                    this._private__container.style.cursor = 'ns-resize';
-                    this._private__setHoverState(true);
-                }
-                else {
+            // Hover state — only mutate cursor for transitions involving THIS line.
+            // Multiple lines can share the same chart element listener (one per line).
+            // Blindly resetting the cursor here would clobber another line's drag/hover.
+            if (!this._private__isInChartArea(e)) {
+                if (this._private__isHovering) {
                     this._private__container.style.cursor = 'default';
                     this._private__setHoverState(false);
                 }
+                return;
+            }
+            const price = this._private__getPriceFromY(e.clientY);
+            const onThisLine = this._private__isOnLine(e, price);
+            if (onThisLine) {
+                this._private__container.style.cursor = this._private__options.draggable ? 'ns-resize' : 'pointer';
+                this._private__setHoverState(true);
+            }
+            else if (this._private__isHovering) {
+                // Only revert when actually leaving — don't override another line's cursor.
+                this._private__container.style.cursor = 'default';
+                this._private__setHoverState(false);
             }
         };
         const handleMouseUp = (e) => {
-            if (this._private__isDragging) {
-                this._private__isDragging = false;
+            const wasDragging = this._private__isDragging;
+            const downOnLine = this._private__mouseDownOnLine;
+            const downPos = this._private__mouseDownPos;
+            // Reset state regardless of outcome
+            this._private__isDragging = false;
+            this._private__mouseDownOnLine = false;
+            this._private__mouseDownPos = null;
+            if (wasDragging) {
+                // Drag-end path
                 this._private__container.style.cursor = 'default';
                 this._private__setHoverState(false);
-                if (this._private__options.onDragEnd) {
+                const movedFromDown = downPos &&
+                    (Math.abs(e.clientX - downPos._internal_x) > CLICK_TOLERANCE_PX ||
+                        Math.abs(e.clientY - downPos._internal_y) > CLICK_TOLERANCE_PX);
+                // If barely moved, treat as click instead of drag
+                if (!movedFromDown && this._private__options.onClick) {
+                    this._private__options.onClick(this._private__options.price);
+                }
+                else if (this._private__options.onDragEnd) {
                     this._private__options.onDragEnd(this._private__options.price);
                 }
+                return;
+            }
+            // Pure click path (non-draggable line or draggable that didn't start drag)
+            if (downOnLine && downPos && this._private__options.onClick) {
+                const moved = Math.abs(e.clientX - downPos._internal_x) > CLICK_TOLERANCE_PX ||
+                    Math.abs(e.clientY - downPos._internal_y) > CLICK_TOLERANCE_PX;
+                if (!moved) {
+                    // Confirm release was still on the line area
+                    const price = this._private__getPriceFromY(e.clientY);
+                    if (this._private__isOnLine(e, price)) {
+                        this._private__options.onClick(this._private__options.price);
+                    }
+                }
             }
         };
         const handleMouseLeave = (e) => {
@@ -17543,9 +17601,12 @@ class DraggablePriceLine {
                     this._private__options.onDragEnd(this._private__options.price);
                 }
             }
-            else {
+            else if (this._private__isHovering) {
+                this._private__container.style.cursor = 'default';
                 this._private__setHoverState(false);
             }
+            this._private__mouseDownOnLine = false;
+            this._private__mouseDownPos = null;
         };
         this._private__container.addEventListener('mousedown', handleMouseDown);
         this._private__container.addEventListener('mousemove', handleMouseMove);
@@ -17639,11 +17700,16 @@ class DraggablePriceLine {
     _private__updatePrice(newPrice) {
         this._private__options.price = newPrice;
         if (this._private__priceLine) {
-            this._private__priceLine.applyOptions({ price: newPrice });
+            // Re-resolve title so formatTitle reflects the new price.
+            this._private__priceLine.applyOptions({
+                price: newPrice,
+                title: this._private__resolveTitle(),
+            });
         }
     }
     /**
-     * Update the price line options
+     * Update the price line options. Any subset of options can be passed.
+     * Title is recomputed from `formatTitle` if available, otherwise from `title`.
      */
     applyOptions(options) {
         this._private__options = { ...this._private__options, ...options };
@@ -17651,14 +17717,36 @@ class DraggablePriceLine {
         if (options.color) {
             this._private__originalColor = options.color;
         }
-        if (this._private__priceLine && options.price !== undefined) {
-            this._private__priceLine.applyOptions({
-                price: options.price,
-                color: options.color,
-                lineWidth: options.lineWidth,
-                lineStyle: options.lineStyle,
-                title: options.title,
-            });
+        if (!this._private__priceLine)
+            return;
+        // Apply visual options. Any field not in `options` is left untouched on the
+        // underlying price line, except `title` which we always re-resolve so that
+        // formatTitle stays in sync with whatever changed.
+        const patch = {
+            title: this._private__resolveTitle(),
+        };
+        if (options.price !== undefined)
+            patch.price = options.price;
+        if (options.color !== undefined)
+            patch.color = options.color;
+        if (options.lineWidth !== undefined)
+            patch.lineWidth = options.lineWidth;
+        if (options.lineStyle !== undefined)
+            patch.lineStyle = options.lineStyle;
+        this._private__priceLine.applyOptions(patch);
+    }
+    /**
+     * Set the title directly. Use this for updates that don't depend on the
+     * line's price (e.g. live PnL on a fixed entry line). Bypasses formatTitle.
+     */
+    setTitle(text) {
+        this._private__options.title = text;
+        // If a formatter is set we still write the static title to options, but
+        // the visual title comes from the formatter on the next price update.
+        // To make this call effective immediately, we override the rendered title
+        // here unconditionally.
+        if (this._private__priceLine) {
+            this._private__priceLine.applyOptions({ title: text });
         }
     }
     /**
@@ -17668,7 +17756,7 @@ class DraggablePriceLine {
         return this._private__options.price;
     }
     /**
-     * Set price programmatically
+     * Set price programmatically. Triggers formatTitle if configured.
      */
     setPrice(price) {
         this._private__updatePrice(price);
@@ -17790,6 +17878,8 @@ function createTradingLine(series, chart, options) {
         onDragStart: options.onDragStart,
         onDragMove: options.onDragMove,
         onDragEnd: options.onDragEnd,
+        onClick: options.onClick,
+        formatTitle: options.formatTitle,
     };
     return new DraggablePriceLine(chart, series, lineOptions);
 }
@@ -24860,7 +24950,7 @@ const customSeriesDefaultOptions = {
  * Returns the current version as a string. For example `'1.0.0'`.
  */
 function version() {
-    return "1.2.0";
+    return "1.2.1";
 }
 
 export { areaSeries as AreaSeries, ArrowTool, barSeries as BarSeries, baselineSeries as BaselineSeries, BrushTool, candlestickSeries as CandlestickSeries, CircleTool, ColorType, CrosshairMode, DEFAULT_SESSIONS, DraggablePriceLine, DrawingToolsManager, EXTENDED_FIBONACCI_RATIOS, FibonacciCalculator, FibonacciExtensionTool, FibonacciFanTool, FibonacciTool, GanttTool, histogramSeries as HistogramSeries, HorizontalLineTool, InteractiveLineManager, LastPriceAnimationMode, lineSeries as LineSeries, LineStyle, LineType, MismatchDirection, PositionCalculator, PositionMarkersManager, PositionTool, PriceLineSource, PriceScaleMode, RectangleTool, RulerCalculator, RulerTool, STANDARD_FIBONACCI_RATIOS, TextTool, TickMarkType, TrackingModeExitMode, TradingSessionsIndicator, TrendLineTool, VerticalLineTool, VolumeProfileIndicator, applyATR, applyBollingerBands, applyEMA, applyMACD, applyOBV, applyRSI, applySMA, applyStochastic, applyVolume, applyWMA, calculatePipConfig, createArrowTool, createBrushTool, createChart, createChartEx, createCircleTool, createFibonacciExtensionTool, createFibonacciFanTool, createFibonacciTool, createGanttTool, createHorizontalLineTool, createImageWatermark, createInteractiveLineManager, createOptionsChart, createPositionMarkers, createPositionTool, createRectangleTool, createRulerTool, createSeriesMarkers, createTextTool, createTextWatermark, createTradingLine, createTradingSessionsIndicator, createTrendLineTool, createUpDownMarkers, createVerticalLineTool, createVolumeProfileIndicator, createYieldCurveChart, customSeriesDefaultOptions, defaultHorzScaleBehavior, getPipConfig, isBusinessDay, isUTCTimestamp, setOBVVolumeData, setVolumeData, setVolumeProfileData, version };