@pipsend/charts 0.0.8 → 0.0.10

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

@@ -1,6 +1,6 @@
 /*!
  * @license
- * Pipsend Charts v0.0.8-dev+202510241619
+ * Pipsend Charts v0.0.10-dev+202510282321
  * Copyright (c) 2025 Pipsend
  * Licensed under MIT License
  * Built on TradingView Lightweight Charts™ (Apache 2.0)
@@ -6418,7 +6418,12 @@
                 series._internal_destroy();
             }
             this._private__timeScale._internal_recalculateIndicesWithData();
+            const paneCountBefore = this._private__panes.length;
             this._private__cleanupIfPaneIsEmpty(paneImpl);
+            // If a pane was removed, trigger full update to refresh the layout
+            if (this._private__panes.length < paneCountBefore) {
+                this._internal_fullUpdate();
+            }
         }
         _internal_moveSeriesToScale(series, targetScaleId) {
             const pane = ensureNotNull(this._internal_paneForSource(series));
@@ -16540,6 +16545,8 @@
             this._private__isDragging = false;
             this._private__container = null;
             this._private__unsubscribeHandlers = [];
+            this._private__isHovering = false;
+            this._private__originalColor = '';
             this._private__chart = chart;
             this._private__series = series;
             this._private__options = {
@@ -16555,6 +16562,7 @@
             }
         }
         _private__createPriceLine() {
+            this._private__originalColor = this._private__options.color;
             this._private__priceLine = this._private__series.createPriceLine({
                 price: this._private__options.price,
                 color: this._private__options.color,
@@ -16570,8 +16578,12 @@
                 return;
             this._private__container = chartElement;
             const handleMouseDown = (e) => {
+                // Solo permitir drag 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__isNearLine(price)) {
+                if (this._private__isOnLine(e, price)) {
                     this._private__isDragging = true;
                     this._private__container.style.cursor = 'ns-resize';
                     if (this._private__options.onDragStart) {
@@ -16588,15 +16600,24 @@
                     if (this._private__options.onDragMove) {
                         this._private__options.onDragMove(newPrice);
                     }
+                    // Prevenir que el gráfico se mueva mientras arrastramos la línea
+                    e.preventDefault();
+                    e.stopPropagation();
                 }
                 else {
-                    // Show hover cursor
+                    // 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__isNearLine(price)) {
+                    if (this._private__isOnLine(e, price)) {
                         this._private__container.style.cursor = 'ns-resize';
+                        this._private__setHoverState(true);
                     }
                     else {
                         this._private__container.style.cursor = 'default';
+                        this._private__setHoverState(false);
                     }
                 }
             };
@@ -16604,69 +16625,50 @@
                 if (this._private__isDragging) {
                     this._private__isDragging = false;
                     this._private__container.style.cursor = 'default';
+                    this._private__setHoverState(false);
                     if (this._private__options.onDragEnd) {
                         this._private__options.onDragEnd(this._private__options.price);
                     }
                 }
             };
+            const handleMouseLeave = (e) => {
+                if (this._private__isDragging) {
+                    this._private__isDragging = false;
+                    this._private__setHoverState(false);
+                    if (this._private__options.onDragEnd) {
+                        this._private__options.onDragEnd(this._private__options.price);
+                    }
+                }
+                else {
+                    this._private__setHoverState(false);
+                }
+            };
             this._private__container.addEventListener('mousedown', handleMouseDown);
             this._private__container.addEventListener('mousemove', handleMouseMove);
             this._private__container.addEventListener('mouseup', handleMouseUp);
-            this._private__container.addEventListener('mouseleave', handleMouseUp);
+            this._private__container.addEventListener('mouseleave', handleMouseLeave);
             // Store unsubscribe handlers
             this._private__unsubscribeHandlers.push(() => {
                 this._private__container?.removeEventListener('mousedown', handleMouseDown);
                 this._private__container?.removeEventListener('mousemove', handleMouseMove);
                 this._private__container?.removeEventListener('mouseup', handleMouseUp);
-                this._private__container?.removeEventListener('mouseleave', handleMouseUp);
+                this._private__container?.removeEventListener('mouseleave', handleMouseLeave);
             });
         }
         _private__getPriceFromY(clientY) {
             try {
-                // Get chart element and bounds
+                // Usar la API del chart para convertir coordenada Y a precio
+                // Esto garantiza que usamos exactamente la misma escala que el chart
                 const chartElement = this._private__chart.chartElement?.() || document.querySelector('.tv-lightweight-charts');
                 if (!chartElement)
                     return this._private__options.price;
                 const rect = chartElement.getBoundingClientRect();
                 const relativeY = clientY - rect.top;
-                // Get visible logical range
-                const timeScale = this._private__chart.timeScale();
-                const visibleRange = timeScale.getVisibleLogicalRange();
-                if (!visibleRange)
+                // Usar coordinateToPrice() - método oficial del chart
+                const price = this._private__series.coordinateToPrice(relativeY);
+                if (price === null) {
                     return this._private__options.price;
-                // Get series data
-                const seriesData = this._private__series.data();
-                if (!seriesData || seriesData.length === 0)
-                    return this._private__options.price;
-                // Calculate min/max price in visible range
-                const startIndex = Math.max(0, Math.floor(visibleRange.from));
-                const endIndex = Math.min(seriesData.length - 1, Math.ceil(visibleRange.to));
-                let minPrice = Infinity;
-                let maxPrice = -Infinity;
-                for (let i = startIndex; i <= endIndex; i++) {
-                    const d = seriesData[i];
-                    if ('high' in d && 'low' in d) {
-                        minPrice = Math.min(minPrice, d.low);
-                        maxPrice = Math.max(maxPrice, d.high);
-                    }
-                    else if ('close' in d) {
-                        minPrice = Math.min(minPrice, d.close);
-                        maxPrice = Math.max(maxPrice, d.close);
-                    }
-                    else if ('value' in d) {
-                        minPrice = Math.min(minPrice, d.value);
-                        maxPrice = Math.max(maxPrice, d.value);
-                    }
                 }
-                // Add 10% padding
-                const padding = (maxPrice - minPrice) * 0.1;
-                minPrice -= padding;
-                maxPrice += padding;
-                // Calculate price from Y position
-                const priceRange = maxPrice - minPrice;
-                const chartHeight = rect.height;
-                const pricePerPixel = priceRange / chartHeight;
-                const price = maxPrice - (relativeY * pricePerPixel);
                 return price;
             }
             catch (error) {
@@ -16674,37 +16676,61 @@
                 return this._private__options.price;
             }
         }
-        _private__isNearLine(price) {
-            // More generous threshold - 15 pixels in price space
+        /**
+         * Verifica si el mouse está EN la línea (no cerca, sino exactamente sobre ella)
+         * Usa la API de coordenadas del chart para precisión consistente
+         * @param e - Mouse event
+         * @param price - Precio calculado desde la posición Y
+         */
+        _private__isOnLine(e, price) {
             const chartElement = this._private__chart.chartElement?.() || document.querySelector('.tv-lightweight-charts');
             if (!chartElement)
                 return false;
+            // Usar la API del chart para convertir precio a coordenada Y
+            const lineCoordinate = this._private__series.priceToCoordinate(this._private__options.price);
+            if (lineCoordinate === null)
+                return false;
+            // Obtener la coordenada Y del mouse relativa al chart
             const rect = chartElement.getBoundingClientRect();
-            const seriesData = this._private__series.data();
-            if (!seriesData || seriesData.length === 0)
+            const mouseY = e.clientY - rect.top;
+            // Threshold FIJO en píxeles (muy preciso y consistente)
+            const pixelThreshold = 5; // 5 píxeles - siempre igual sin importar el zoom
+            // Comparar directamente en píxeles (más preciso)
+            return Math.abs(mouseY - lineCoordinate) <= pixelThreshold;
+        }
+        /**
+         * Verifica si el mouse está en el área del gráfico (no en el price axis)
+         */
+        _private__isInChartArea(e) {
+            if (!this._private__container)
                 return false;
-            // Calculate pixel threshold based on visible range
-            let minPrice = Infinity;
-            let maxPrice = -Infinity;
-            for (const data of seriesData) {
-                const d = data;
-                if ('high' in d && 'low' in d) {
-                    minPrice = Math.min(minPrice, d.low);
-                    maxPrice = Math.max(maxPrice, d.high);
-                }
-                else if ('close' in d) {
-                    minPrice = Math.min(minPrice, d.close);
-                    maxPrice = Math.max(maxPrice, d.close);
-                }
-                else if ('value' in d) {
-                    minPrice = Math.min(minPrice, d.value);
-                    maxPrice = Math.max(maxPrice, d.value);
-                }
+            // Obtener el ancho del price axis (usualmente ~60-80px desde la derecha)
+            const rect = this._private__container.getBoundingClientRect();
+            const priceAxisWidth = 80; // Ancho aproximado del eje de precios
+            // El mouse debe estar ANTES del price axis (área del gráfico)
+            const mouseX = e.clientX - rect.left;
+            const chartAreaWidth = rect.width - priceAxisWidth;
+            return mouseX < chartAreaWidth;
+        }
+        /**
+         * Activa/desactiva el estado de hover (línea negra)
+         */
+        _private__setHoverState(isHovering) {
+            if (this._private__isHovering === isHovering || !this._private__priceLine)
+                return;
+            this._private__isHovering = isHovering;
+            if (isHovering) {
+                // Cambiar a negro cuando está en hover
+                this._private__priceLine.applyOptions({
+                    color: '#000000'
+                });
+            }
+            else {
+                // Restaurar color original
+                this._private__priceLine.applyOptions({
+                    color: this._private__originalColor
+                });
             }
-            const priceRange = maxPrice - minPrice;
-            const pixelThreshold = 15; // 15 pixels
-            const priceThreshold = (priceRange / rect.height) * pixelThreshold;
-            return Math.abs(price - this._private__options.price) < priceThreshold;
         }
         _private__updatePrice(newPrice) {
             this._private__options.price = newPrice;
@@ -16717,6 +16743,10 @@
          */
         applyOptions(options) {
             this._private__options = { ...this._private__options, ...options };
+            // Actualizar color original si se proporciona
+            if (options.color) {
+                this._private__originalColor = options.color;
+            }
             if (this._private__priceLine && options.price !== undefined) {
                 this._private__priceLine.applyOptions({
                     price: options.price,
@@ -16746,6 +16776,8 @@
             // Cleanup event listeners
             this._private__unsubscribeHandlers.forEach(handler => handler());
             this._private__unsubscribeHandlers = [];
+            // Remove hover state
+            this._private__setHoverState(false);
             // Remove price line
             if (this._private__priceLine) {
                 this._private__series.removePriceLine(this._private__priceLine);
@@ -16878,49 +16910,23 @@
             }
         }
         _private__getPriceFromMouseEvent(e) {
-            if (!this._private__container)
-                return 0;
-            const rect = this._private__container.getBoundingClientRect();
-            const relativeY = e.clientY - rect.top;
-            // Get visible logical range
-            const timeScale = this._private__chart.timeScale();
-            const visibleRange = timeScale.getVisibleLogicalRange();
-            if (!visibleRange)
-                return 0;
-            // Get series data
-            const seriesData = this._private__series.data();
-            if (!seriesData || seriesData.length === 0)
-                return 0;
-            // Calculate min/max price in visible range
-            const startIndex = Math.max(0, Math.floor(visibleRange.from));
-            const endIndex = Math.min(seriesData.length - 1, Math.ceil(visibleRange.to));
-            let minPrice = Infinity;
-            let maxPrice = -Infinity;
-            for (let i = startIndex; i <= endIndex; i++) {
-                const d = seriesData[i];
-                if ('high' in d && 'low' in d) {
-                    minPrice = Math.min(minPrice, d.low);
-                    maxPrice = Math.max(maxPrice, d.high);
-                }
-                else if ('close' in d) {
-                    minPrice = Math.min(minPrice, d.close);
-                    maxPrice = Math.max(maxPrice, d.close);
-                }
-                else if ('value' in d) {
-                    minPrice = Math.min(minPrice, d.value);
-                    maxPrice = Math.max(maxPrice, d.value);
+            try {
+                if (!this._private__container)
+                    return 0;
+                // Usar la misma API que usa el dragging para consistencia perfecta
+                const rect = this._private__container.getBoundingClientRect();
+                const relativeY = e.clientY - rect.top;
+                // Usar coordinateToPrice() - método oficial del chart
+                const price = this._private__series.coordinateToPrice(relativeY);
+                if (price === null) {
+                    return 0;
                 }
+                return price;
+            }
+            catch (error) {
+                console.error('Error getting price from mouse event:', error);
+                return 0;
             }
-            // Add 10% padding
-            const padding = (maxPrice - minPrice) * 0.1;
-            minPrice -= padding;
-            maxPrice += padding;
-            // Calculate price from Y position
-            const priceRange = maxPrice - minPrice;
-            const chartHeight = rect.height;
-            const pricePerPixel = priceRange / chartHeight;
-            const price = maxPrice - (relativeY * pricePerPixel);
-            return price;
         }
         /**
          * Activa el modo de creación de líneas por clic
@@ -17081,7 +17087,7 @@
      * Returns the current version as a string. For example `'1.0.0'`.
      */
     function version() {
-        return "0.0.8-dev+202510241619";
+        return "0.0.10-dev+202510282321";
     }
 
     var PipsendChartsModule = /*#__PURE__*/Object.freeze({