0.7.7 && handle context menu

4 months ago · a8408a748c
4 changed files with 61 additions and 2 deletions
--- a/examples/right_click.html
+++ b/examples/right_click.html
@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+    <meta content="utf-8" http-equiv="encoding">
+    <script src="../dist/index.dev.js" type="text/javascript"></script>
+  </head>
+  <body>
+    <div id="chart" style="width: 50%; height: 500px;"></div>
+    <script type="text/javascript">
+      const startTime = 1590590148;
+      const data = Array.from(
+        { length: 20 },
+        (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 30)]
+      );
+      let options = {
+        renderLegend: false, usePanning: false,
+        axis: { y: { range: [0, 50] } },
+        zoomEvents: { mouse: { 
+          zoom: { isActive: false },
+          pan: { isActive: false },
+        } },
+        eventsCallbacks: { contextMenu: (position) => console.log('contextMenu', position) }
+      }
+      var pod = new LinePod(
+        document.getElementById('chart'),
+        [{ datapoints: data }],
+        options
+      );
+      pod.render();
+    </script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "@chartwerk/line-pod",
-  "version": "0.7.6",
+  "version": "0.7.7",
  "description": "Chartwerk line chart",
  "main": "dist/index.js",
  "files": [
--- a/src/index.ts
+++ b/src/index.ts
@ -35,6 +35,7 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
    this.clearAllMetrics();

    this.updateCrosshair();
+    this.updateEvents();

    if(!this.series.isSeriesAvailable) {
      this.renderNoDataPointsMessage();
@ -59,6 +60,16 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
    this._markersLayer?.clear();
  }

+  protected updateEvents(): void {
+    // overlay - core component that is used to handle mouse events
+    if(!this.overlay) {
+      return;
+    }
+    if(this.options._options.events?.contextMenu === undefined) {
+      return;
+    }
+    this.overlay.on('contextmenu', this.onContextMenu.bind(this));
+  }

  getRenderGenerator(renderArea: AreaType, yOrientation: yAxisOrientation): Generator {
    const yScale = yOrientation === yAxisOrientation.LEFT ? this.state.yScale : this.state.y1Scale;
@ -453,8 +464,19 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
    }
  }

+  protected onContextMenu(): void {
+    d3.event.preventDefault(); // do not open browser's context menu.
+    const eventX = d3.mouse(this.chartContainer.node())[0];
+    const eventY = d3.mouse(this.chartContainer.node())[1];
+
+    this.options._options.events.contextMenu({
+      x: this.state.xScale.invert(eventX),
+      y: this.state.yScale.invert(eventY),
+    });
+  }
+
  // override parent updateData method to provide markers and segments
-protected updateLineData(
+  protected updateLineData(
    series?: LineTimeSerie[],
    options?: LineOptions,
    markersConf?: MarkersConf,
--- a/src/types.ts
+++ b/src/types.ts
@ -23,6 +23,10 @@ export type LineOptions = Options & {
      x: number;
      y: number;
    }, range: AxisRange[]) => void;
+    contextMenu?: (position: {
+      x: number;
+      y: number;
+    }) => void;
  }
 }