feat(core): adding onDoubleClick to Chart

New property to respond to double click events.
markmcdowell · Jul 9, 2020 · 1b6498b · 1b6498b
1 parent 0b48e94
commit 1b6498b
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 11 deletions.
diff --git a/packages/core/src/CanvasContainer.tsx b/packages/core/src/CanvasContainer.tsx
@@ -3,6 +3,7 @@ import * as React from "react";
 interface CanvasContainerProps {
     readonly height: number;
     readonly ratio: number;
+    readonly style?: React.CSSProperties;
     readonly width: number;
     readonly zIndex?: number;
 }
@@ -21,17 +22,17 @@ export class CanvasContainer extends React.PureComponent<CanvasContainerProps> {
     }
 
     public render() {
-        const { height, width, zIndex, ratio } = this.props;
+        const { height, ratio, style, width, zIndex } = this.props;
 
         const adjustedWidth = width * ratio;
         const adjustedHeight = height * ratio;
-        const style: React.CSSProperties = { position: "absolute", width, height };
+        const canvasStyle: React.CSSProperties = { position: "absolute", width, height };
 
         return (
-            <div style={{ position: "absolute", zIndex }}>
-                <canvas ref={this.bgRef} width={adjustedWidth} height={adjustedHeight} style={style} />
-                <canvas ref={this.axesRef} width={adjustedWidth} height={adjustedHeight} style={style} />
-                <canvas ref={this.mouseRef} width={adjustedWidth} height={adjustedHeight} style={style} />
+            <div style={{ ...style, position: "absolute", zIndex }}>
+                <canvas ref={this.bgRef} width={adjustedWidth} height={adjustedHeight} style={canvasStyle} />
+                <canvas ref={this.axesRef} width={adjustedWidth} height={adjustedHeight} style={canvasStyle} />
+                <canvas ref={this.mouseRef} width={adjustedWidth} height={adjustedHeight} style={canvasStyle} />
             </div>
         );
     }

diff --git a/packages/core/src/Chart.tsx b/packages/core/src/Chart.tsx
@@ -9,6 +9,7 @@ interface ChartProps {
     readonly height?: number;
     readonly id: number | string;
     readonly onContextMenu?: (event: React.MouseEvent, props: unknown) => void;
+    readonly onDoubleClick?: (event: React.MouseEvent, props: unknown) => void;
     readonly origin?: number[] | ((width: number, height: number) => number[]);
     readonly padding?: number | { top: number; bottom: number };
     readonly yExtents?: number[] | ((data: any) => number) | ((data: any) => number[]);
@@ -76,18 +77,27 @@ export class Chart extends PureComponent<ChartProps> {
     }
 
     private readonly listener = (type: string, moreProps, state, e) => {
-        const { id, onContextMenu } = this.props;
+        const { id, onContextMenu, onDoubleClick } = this.props;
 
         switch (type) {
             case "contextmenu": {
-                const { currentCharts } = moreProps;
-                if (currentCharts.indexOf(id) > -1) {
-                    if (onContextMenu !== undefined) {
+                if (onContextMenu !== undefined) {
+                    const { currentCharts } = moreProps;
+                    if (currentCharts.indexOf(id) > -1) {
                         onContextMenu(e, moreProps);
                     }
                 }
                 break;
             }
+            case "dblclick": {
+                if (onDoubleClick !== undefined) {
+                    const { currentCharts } = moreProps;
+                    if (currentCharts.indexOf(id) > -1) {
+                        onDoubleClick(e, moreProps);
+                    }
+                }
+                break;
+            }
         }
     };
 }
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -1,5 +1,5 @@
 export { ChartCanvas } from "./ChartCanvas";
-export { Chart } from "./Chart";
+export * from "./Chart";
 export * from "./GenericChartComponent";
 export * from "./GenericComponent";
 export * from "./utils";