picking

example/app.js

@@ -11,7 +11,7 @@ class App extends Component {
  }
 
  makePlot1() {
- const p1 = glPlot2d.getRandomPositions(1000);
+ const p1 = glPlot2d.getRandomPositions(100);
  const p2 = glPlot2d.getRandomPositions(100);
 
  const trace1 = {
@@ -111,7 +111,7 @@ class App extends Component {
  color: [0, 1, 0, 1],
  fill: [false, false, false, false],
  fillColor: [[0, 1, 0, 0.5], [0, 1, 0, 0.5], [0, 1, 0, 0.5], [0, 1, 0, 0.5]],
- width: 2
+ width: 5
  }
  };
 
@@ -134,7 +134,7 @@ class App extends Component {
  this.height2 = '200px';
  this.width2 = '100%';
 
- const tickList = glPlot2d.getTicks(this.traces1, 'log', 1, true, null);
+ const tickList = glPlot2d.getTicks(this.traces1, 'log', 1, false, null);
 
  this.plotOptions2 = {
  pixelRatio: 1,
@@ -168,7 +168,7 @@ class App extends Component {
  tickMarkWidth: [1, 1, 1, 1],
  tickMarkLength: [4, 4, 4, 4],
  tickMarkColor: [[0, 0, 0, 0], [0, 0, 0, 1], [0, 0, 0, 0], [0, 0, 0, 0]],
- gridLineEnable: [true, true],
+ gridLineEnable: [false, true],
  gridLineColor: [[0, 0, 0, 0.5], [0, 0, 0, 0.5]],
  gridLineWidth: [0.5, 0.5],
  zeroLineEnable: [false, false],

package.json

@@ -20,13 +20,11 @@
  "glslify": "6.0.1",
  "ify-loader": "1.0.3",
  "lodash": "4.17.4",
- "mouse-change": "1.4.0",
- "mouse-wheel": "1.2.0",
  "skatejs": "4.6.7",
- "skatejs-web-components": "5.2.1",
+ "skatejs-web-components": "0.0.1",
  "ts-loader": "2.0.1",
  "tslib": "1.6.0",
- "tslint": "4.4.2",
+ "tslint": "4.5.1",
  "typescript": "2.2.1",
  "webpack": "2.2.1"
  },

src/GlPlot2dComponent.tsx

@@ -4,6 +4,7 @@ import * as fit from 'canvas-fit';
 import * as createLine from 'gl-line2d';
 import * as createPlot from 'gl-plot2d';
 import * as createScatter from 'gl-scatter2d';
+import * as createSpikes from 'gl-spikes2d';
 import { debounce } from 'lodash';
 
 import { GlPlot2dComponentProps,
@@ -23,6 +24,7 @@ export class GlPlot2dComponent extends skate.Component<GlPlot2dComponentProps> {
  private gl: WebGLRenderingContext | null; // WebGL Context.
  private canvas: HTMLCanvasElement | null; // Canvas element we render to.
  private plot: any | null; // Plot object via gl-plot2d.
+ private spikes: any | null; // Spikes object via gl-spikes2d.
 
  /**
  * Custom properties that should be defined on the element. These are set up in the constructor.
@@ -94,7 +96,25 @@ export class GlPlot2dComponent extends skate.Component<GlPlot2dComponentProps> {
  public renderedCallback(): void {
  if (this.shadowRoot && !this.canvas && !this.plot) {
  this.canvas = this.shadowRoot.querySelector('canvas');
- this.initResizeEvents();
+
+ if (this.canvas) {
+ this.gl = this.canvas.getContext('webgl');
+ }
+ else {
+ if (this['debug']) {
+ console.error('GlPlot2dComponent: initAndDrawPlot: No canvas: ', this.canvas);
+ }
+ return;
+ }
+
+ if (!this.gl) {
+ if (this['debug']) {
+ console.error('GlPlot2dComponent: initAndDrawPlot: No gl: ', this.gl);
+ }
+ return;
+ }
+
+ this.initEventHandlers();
  this.initPlot();
  this.fitCanvas();
  this.drawPlot();
@@ -141,6 +161,14 @@ export class GlPlot2dComponent extends skate.Component<GlPlot2dComponentProps> {
  if (this.plot) {
  this.plot.dispose();
  }
+
+ if (this.gl) {
+ this.gl = null;
+ }
+
+ if (this.canvas) {
+ this.canvas = null;
+ }
  }
 
  /**
@@ -193,12 +221,12 @@ export class GlPlot2dComponent extends skate.Component<GlPlot2dComponentProps> {
  }
 
  /**
- * Helper function that initializes resize events.
+ * Helper function that initializes event handlers.
  * Should be only called once on component initialization.
  *
  * @memberOf GlPlot2dComponent
  */
- public initResizeEvents(): void {
+ public initEventHandlers(): void {
  // Debounce the resize call.
  const debounceResize = debounce(() => {
  this.fitCanvas();
@@ -207,6 +235,28 @@ export class GlPlot2dComponent extends skate.Component<GlPlot2dComponentProps> {
 
  // Setup debounced window resize event listener.
  window.addEventListener('resize', debounceResize, false);
+
+ // Register canvas interaction events.
+ if (this.canvas) {
+ this.canvas.onmousedown = (event: MouseEvent) => {
+ this.onMouseDown(event);
+ };
+
+ this.canvas.onmouseup = () => {
+ // console.info('onmouseup: ', event);
+ // TODO.
+ };
+
+ this.canvas.onmousemove = () => {
+ // console.info('onmousemove: ', event);
+ // TODO.
+ };
+
+ this.canvas.onmouseover = () => {
+ // console.info('onmouseover: ', event);
+ // TODO.
+ };
+ }
  }
 
  /**
@@ -217,25 +267,9 @@ export class GlPlot2dComponent extends skate.Component<GlPlot2dComponentProps> {
  * @memberOf GlPlot2dComponent
  */
  public initPlot(): void {
- if (this.canvas) {
- this.gl = this.canvas.getContext('webgl');
- }
- else {
- if (this['debug']) {
- console.error('GlPlot2dComponent: initAndDrawPlot: No canvas: ', this.canvas);
- }
- return;
- }
-
- if (!this.gl) {
- if (this['debug']) {
- console.error('GlPlot2dComponent: initAndDrawPlot: No gl: ', this.gl);
- }
- return;
- }
-
  this['plotOptions'].gl = this.gl;
  this.plot = createPlot(this['plotOptions']);
+ this.spikes = createSpikes(this.plot);
 
  this['traces'].forEach((trace: Trace) => {
  if (trace.line) {
@@ -306,6 +340,33 @@ export class GlPlot2dComponent extends skate.Component<GlPlot2dComponentProps> {
  borderColor: scatter.borderColor
  });
  }
+
+ /**
+ * Event handler helper for mouse down event.
+ *
+ * @private
+ * @param {MouseEvent} event
+ *
+ * @memberOf GlPlot2dComponent
+ */
+ private onMouseDown(event: MouseEvent): void {
+ if (this. canvas) {
+ const canvasBoundingRect = this.canvas.getBoundingClientRect();
+ const x = event.clientX - canvasBoundingRect.left;
+ const y = Math.abs(event.clientY - canvasBoundingRect.top - canvasBoundingRect.height);
+
+ const result = this.plot.pick(x / this.plot.pixelRatio, y / this.plot.pixelRatio);
+
+ if (result) {
+ this.spikes.update({ center: result.dataCoord });
+ }
+ else {
+ this.spikes.update();
+ }
+
+ this.drawPlot();
+ }
+ }
 }
 
 /**