@pipsend/charts 0.0.8 → 0.0.9

package/README.md

@@ -61,7 +61,9 @@ Explore interactive examples to see Pipsend Charts in action:
 
 ### Screenshots
 
-> **Note:** Add screenshots of your charts here to showcase the visual capabilities
+![PipsendCharts Clean](image.png)
+![PipsendCharts Indicators](image-1.png)
+![PipsendCharts Trading Lines](image-2.png)
 
 ```
 📊 Candlestick Chart with SMA & EMA

package/dist/pipsend-charts.development.mjs

@@ -1,6 +1,6 @@
 /*!
  * @license
- * Pipsend Charts v0.0.8-dev+202510241619
+ * Pipsend Charts v0.0.9-dev+202510282317
  * Copyright (c) 2025 Pipsend
  * Licensed under MIT License
  * Built on TradingView Lightweight Charts™ (Apache 2.0)
@@ -6417,7 +6417,12 @@ class ChartModel {
             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));
@@ -16144,6 +16149,8 @@ class DraggablePriceLine {
         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 = {
@@ -16159,6 +16166,7 @@ class DraggablePriceLine {
         }
     }
     _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,
@@ -16174,8 +16182,12 @@ class DraggablePriceLine {
             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) {
@@ -16192,15 +16204,24 @@ class DraggablePriceLine {
                 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);
                 }
             }
         };
@@ -16208,69 +16229,50 @@ class DraggablePriceLine {
             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) {
@@ -16278,37 +16280,61 @@ class DraggablePriceLine {
             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;
@@ -16321,6 +16347,10 @@ class DraggablePriceLine {
      */
     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,
@@ -16350,6 +16380,8 @@ class DraggablePriceLine {
         // 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);
@@ -16482,49 +16514,23 @@ class InteractiveLineManager {
         }
     }
     _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
@@ -16685,7 +16691,7 @@ const customSeriesDefaultOptions = {
  * Returns the current version as a string. For example `'1.0.0'`.
  */
 function version() {
-    return "0.0.8-dev+202510241619";
+    return "0.0.9-dev+202510282317";
 }
 
 export { areaSeries as AreaSeries, barSeries as BarSeries, baselineSeries as BaselineSeries, candlestickSeries as CandlestickSeries, ColorType, CrosshairMode, DraggablePriceLine, histogramSeries as HistogramSeries, InteractiveLineManager, LastPriceAnimationMode, lineSeries as LineSeries, LineStyle, LineType, MismatchDirection, PriceLineSource, PriceScaleMode, TickMarkType, TrackingModeExitMode, applyATR, applyBollingerBands, applyEMA, applyMACD, applyOBV, applyRSI, applySMA, applyStochastic, applyVolume, applyWMA, createChart, createChartEx, createImageWatermark, createInteractiveLineManager, createOptionsChart, createSeriesMarkers, createTextWatermark, createTradingLine, createUpDownMarkers, createYieldCurveChart, customSeriesDefaultOptions, defaultHorzScaleBehavior, isBusinessDay, isUTCTimestamp, setOBVVolumeData, setVolumeData, version };