@windborne/grapher 1.0.37 → 1.0.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windborne/grapher",
-  "version": "1.0.37",
+  "version": "1.0.39",
   "description": "Graphing library",
   "main": "src/index.js",
   "module": "dist/bundle.esm.js",

package/src/components/graph_body.jsx

@@ -21,7 +21,7 @@ import binarySearch from '../helpers/binary_search';
 
 export default React.memo(GraphBody);
 
-function GraphBody({ stateController, webgl, bodyHeight, boundsSelectionEnabled, showTooltips, tooltipOptions, checkIntersection, draggablePoints, onPointDrag, onDraggablePointsDoubleClick, verticalLines, clockStyle, timeZone, onPointClick }) {
+function GraphBody({ stateController, webgl, bodyHeight, boundsSelectionEnabled, showTooltips, showContextMenu=true, tooltipOptions, checkIntersection, draggablePoints, onPointDrag, onDraggablePointsDoubleClick, verticalLines, clockStyle, timeZone, onPointClick }) {
     const canvasEl = useCallback((el) => {
         if (stateController.primaryRenderer) {
             stateController.primaryRenderer.dispose();
@@ -278,11 +278,13 @@ function GraphBody({ stateController, webgl, bodyHeight, boundsSelectionEnabled,
     
     const onContextMenu = (event) => {
         event.preventDefault();
-        stateController.setContextMenuMousePosition({
-            clientX: event.clientX,
-            clientY: event.clientY,
-            showing: true
-        });
+        if (showContextMenu !== false) {
+            stateController.setContextMenuMousePosition({
+                clientX: event.clientX,
+                clientY: event.clientY,
+                showing: true
+            });
+        }
     };
 
     return (

package/src/grapher.jsx

@@ -239,6 +239,7 @@ function Grapher(props) {
                                 bodyHeight={props.bodyHeight}
                                 boundsSelectionEnabled={props.boundsSelectionEnabled}
                                 showTooltips={props.showTooltips}
+                                showContextMenu={props.showContextMenu}
                                 tooltipOptions={props.tooltipOptions}
                                 checkIntersection={props.checkIntersection}
                                 draggablePoints={props.draggablePoints}

package/src/index.d.ts

@@ -131,6 +131,7 @@ export interface GrapherProps {
   showRangeSelectors?: boolean;
   showSeriesKey?: boolean;
   showTooltips?: boolean;
+  showContextMenu?: boolean;
   showGrid?: boolean;
   showAxisColors?: boolean;
   bigLabels?: boolean;

package/src/renderer/draw_line.js

@@ -29,6 +29,11 @@ export default function drawLine(dataInRenderSpace, {
         return;
     }
     
+    if (!context.setLineDash) {
+        console.error('drawLine called with WebGL context instead of 2D context');
+        return;
+    }
+    
     if (highlighted) {
         width += 2;
     }

package/src/renderer/graph_body_renderer.js

@@ -96,6 +96,12 @@ export default class GraphBodyRenderer extends Eventable {
     clear() {
         if (this._webgl) {
             this._lineProgram.clear();
+            // Also clear the overlay canvas if it exists (for multi shadow charts)
+            if (this._overlayContext) {
+                this._overlayContext.clearRect(0, 0, this._overlayCanvas.width, this._overlayCanvas.height);
+            }
+            // Reset the initialization flag so canvas can be resized if needed
+            this._overlayCanvasInitialized = false;
         } else {
             this._context.clearRect(0, 0, this._context.canvas.width, this._context.canvas.height);
         }
@@ -564,8 +570,8 @@ export default class GraphBodyRenderer extends Eventable {
         // since WebGL and 2D contexts can't coexist on the same canvas
         let drawContext = this._context;
         
-        if (this._webgl && singleSeries.rendering === 'shadow' && (width > 0 || shouldShowIndividualPoints)) {
-            // Only create overlay if we're actually drawing lines or points
+        if (this._webgl && singleSeries.rendering === 'shadow') {
+            // Always create overlay for shadow charts since they need 2D context for drawLine
             if (!this._overlayCanvas) {
                 this._overlayCanvas = document.createElement('canvas');
                 this._overlayCanvas.style.position = 'absolute';
@@ -576,19 +582,28 @@ export default class GraphBodyRenderer extends Eventable {
                 this._canvas.parentNode.insertBefore(this._overlayCanvas, this._canvas.nextSibling);
             }
             
-            // Size the overlay canvas to match the main canvas
-            this._overlayCanvas.width = this._canvas.width;
-            this._overlayCanvas.height = this._canvas.height;
-            this._overlayCanvas.style.width = this._canvas.style.width;
-            this._overlayCanvas.style.height = this._canvas.style.height;
-            
-            // Clear the overlay before drawing
-            this._overlayContext.clearRect(0, 0, this._overlayCanvas.width, this._overlayCanvas.height);
-            
+            // Size the overlay canvas to match the main canvas (only once when creating)
+            if (!this._overlayCanvasInitialized) {
+                this._overlayCanvas.width = this._canvas.width;
+                this._overlayCanvas.height = this._canvas.height;
+                this._overlayCanvas.style.width = this._canvas.style.width;
+                this._overlayCanvas.style.height = this._canvas.style.height;
+                this._overlayCanvasInitialized = true;
+            }
             drawContext = this._overlayContext;
         } else if (this._context2d) {
             // For non-WebGL or non-shadow charts with 2D context
             drawContext = this._context2d;
+        } else if (this._webgl) {
+            // Fallback for WebGL: create a temporary context for drawing lines
+            console.warn('Creating fallback 2D context for WebGL shadow chart');
+            if (!this._fallbackContext) {
+                const fallbackCanvas = document.createElement('canvas');
+                fallbackCanvas.width = this._canvas.width;
+                fallbackCanvas.height = this._canvas.height;
+                this._fallbackContext = fallbackCanvas.getContext('2d');
+            }
+            drawContext = this._fallbackContext;
         }
 
         const drawParams = {

package/src/state/calculate_tooltip_state.js

@@ -66,10 +66,18 @@ export default function calculateTooltipState({mousePresent, mouseX, mouseY, siz
             continue;
         }
 
-        const dataMinX = data[0][0];
-        const dataMaxX = data[data.length - 1][0];
+        let dataMinX = data[0][0];
+        let dataMaxX = data[data.length - 1][0];
+        
+        if (dataMinX instanceof Date) {
+            dataMinX = dataMinX.getTime();
+        }
+        if (dataMaxX instanceof Date) {
+            dataMaxX = dataMaxX.getTime();
+        }
+        
         const dataRange = dataMaxX - dataMinX;
-        const padding = Math.max(dataRange * 0.05, (bounds.maxX - bounds.minX) * 0.02); 
+        const padding = 0; 
 
         if (trueX < dataMinX - padding || trueX > dataMaxX + padding) {
             continue;