types

@types/gl-plot2d/index.d.ts

@@ -0,0 +1,116 @@
+// Type definitions for gl-plot2d.
+// Project: https://github.com/gl-vis/gl-plot2d
+// Definitions by: camargo <https://github.com/camargo>
+
+declare const glPlot2d: GLPlot2D;
+export = glPlot2d;
+
+declare global {
+ interface GLPlot2D {
+ _depthCounter: number;
+ _drawPick: Function;
+ _pickTimeout: number;
+ _tickBounds: number[];
+ backgroundColor: number[];
+ borderColor: number[];
+ borderLineColor: number[][];
+ borderLineEnable: boolean[];
+ borderLineWidth: number[];
+ box: Boxes;
+ dataBox: number[];
+ dirty: boolean;
+ gl: WebGLRenderingContext;
+ grid: Grid;
+ gridLineColor: number[][];
+ gridLineEnable: boolean[];
+ gridLineWidth: number[];
+ labelAngle: number[];
+ labelColor: number[][];
+ labelEnable: boolean[];
+ labelPad: number[];
+ line: Lines;
+ objects: any[];
+ overlays: any[];
+ pickBuffer: SelectBuffer;
+ pickDelay: number;
+ pickDirty: boolean;
+ pickPixelRatio: number;
+ pickRadius: number;
+ pixelRatio: number;
+ screenBox: number[];
+ static: boolean;
+ text: TextElements;
+ tickAngle: number[];
+ tickColor: number[][];
+ tickEnable: boolean[];
+ tickMarkColor: number[][];
+ tickMarkLength: number[];
+ tickMarkWidth: number[];
+ tickPad: number[];
+ titleAngle: number;
+ titleCenter: number[];
+ titleColor: number[];
+ titleEnable: boolean;
+ viewBox: number[];
+ zeroLineColor: number[][];
+ zeroLineEnable: boolean[];
+ zeroLineWidth: number[];
+ addObject(object: any): void;
+ addOverlay(object: any): void;
+ GLPlot2D(gl: WebGLRenderingContext, pickBuffer: any): GLPlot2D;
+ dispose(): void;
+ draw(): void;
+ drawPick(): void;
+ nextDepthValue(): number;
+ pick(x: number, y: number): any;
+ removeObject(object: any): void;
+ removeOverlay(object: any): void;
+ setDataBox(nbox: number[]): void;
+ setDirty(): void;
+ setOverlayDirty(): void;
+ setScreenBox(nbox: number[]): void;
+ setViewBox(nbox: number[]): void;
+ update(options: any): void;
+ }
+
+ interface Boxes {
+ plot: GLPlot2D;
+ shader: any;
+ vbo: any;
+ bind(): void;
+ Boxes(plot: GLPlot2D, vbo: any, shader: any): Boxes;
+ dispose(): void;
+ drawBox(loX: number, loY: number, hiX: number, hiY: number, color: number[]): void;
+ }
+
+ interface GridOptions {
+ ticks: number[][];
+ bounds: number[];
+ }
+
+ interface Grid {
+ plot: GLPlot2D;
+ shader: any;
+ tickShader: any;
+ ticks: number[][];
+ vbo: any;
+ Grid(plot: GLPlot2D, vbo: any, shader: any, tickShader: any): Grid;
+ dispose(): void;
+ drawTickMarks(): void;
+ update(options: GridOptions): void;
+ }
+
+ interface Lines {
+ plot: GLPlot2D;
+ shader: any;
+ vbo: any;
+ bind(): void;
+ Lines(plot: GLPlot2D, vbo: any, shader: any): Lines;
+ dispose(): void;
+ drawLine(startX: number, startY: number, endX: number, endY: number, width: number, color: number[]): void;
+ }
+
+ interface SelectBuffer {}
+
+ interface TextElements {}
+}

src/GlPlot2dComponent.tsx

@@ -25,7 +25,7 @@ import { GlPlot2dComponentProps,
 export class GlPlot2dComponent extends skate.Component<GlPlot2dComponentProps> {
  private canvas: HTMLCanvasElement | null; // Canvas element we render to.
  private gl: WebGLRenderingContext | null; // WebGL Context.
- private plot: any | null;  // Plot object via gl-plot2d.
+ private plot: GLPlot2D | null; // Plot object via gl-plot2d.
  private spikes: any | null; // Spikes object via gl-spikes2d.
 
  /**
@@ -233,17 +233,14 @@ export class GlPlot2dComponent extends skate.Component<GlPlot2dComponentProps> {
  };
 
  this.canvas.onmouseup = () => {
- // console.info('onmouseup: ', event);
  // TODO.
  };
 
  this.canvas.onmousemove = () => {
- // console.info('onmousemove: ', event);
  // TODO.
  };
 
  this.canvas.onmouseover = () => {
- // console.info('onmouseover: ', event);
  // TODO.
  };
  }
@@ -309,20 +306,25 @@ export class GlPlot2dComponent extends skate.Component<GlPlot2dComponentProps> {
  * @memberOf GlPlot2dComponent
  */
  public drawPlot(): void {
- // Make sure plot is updated with current plotOptions before drawing.
- this.plot.update(this['plotOptions']);
+ if (this.plot) {
+ // Make sure plot is updated with current plotOptions before drawing.
+ this.plot.update(this['plotOptions']);
 
- if (this['debug']) {
- console.time('drawTime');
- }
+  if (this['debug']) {
+  console.time('drawTime');
+  }
 
- this.plot.draw();
+  this.plot.draw();
 
- if (this['debug']) {
- console.timeEnd('drawTime');
- }
+  if (this['debug']) {
+  console.timeEnd('drawTime');
+  }
 
- skate.emit(this, `gl-plot-2d-draw-plot-done-${this['name']}`);
+ skate.emit(this, `gl-plot-2d-draw-plot-done-${this['name']}`);
+ }
+ else if (this['debug']) {
+ console.error('GlPlot2dComponent: drawPlot: no plot object: ', this.plot);
+ }
  }
 
  /**
@@ -367,7 +369,7 @@ export class GlPlot2dComponent extends skate.Component<GlPlot2dComponentProps> {
  * @memberOf GlPlot2dComponent
  */
  private onMouseDown(event: MouseEvent): void {
- if (this. canvas) {
+ if (this.canvas && this.plot) {
  const canvasBoundingRect = this.canvas.getBoundingClientRect();
  const x = event.clientX - canvasBoundingRect.left;
  const y = Math.abs(event.clientY - canvasBoundingRect.top - canvasBoundingRect.height);
@@ -376,14 +378,6 @@ export class GlPlot2dComponent extends skate.Component<GlPlot2dComponentProps> {
 
  if (result) {
  this.spikes.update({ center: result.dataCoord });
-
- // Select point by changing it's color.
- this['traces'].forEach((trace: Trace) => {
- if (trace.scatterFancy) {
- trace.scatterFancy.selectByPointId(result.pointId, [1.0, 1.0, 0.0, 1.0]);
- result.object.update(trace.scatterFancy);
- }
- });
  }
  else {
  this.spikes.update();

tsconfig.json

@@ -10,6 +10,7 @@
  "./@types"
  ],
  "types": [
+ "gl-plot2d",
  "whatwg-customelements"
  ],
  "jsx": "react",