organize, move positions

example/app.js

@@ -11,15 +11,14 @@ class App extends Component {
  }
 
  makePlot1() {
- const p1 = glPlot2d.getRandomPositions(100);
- const p2 = glPlot2d.getRandomPositions(100);
+ const p1Positions = glPlot2d.getRandomPositions(100, 20);
 
  const trace1 = {
  mode: 'line',
- positions: p1.positions,
- min: p1.min,
- max: p1.max,
+ min: glPlot2d.getMax(p1Positions),
+ max: glPlot2d.getMin(p1Positions),
  line: {
+ positions: p1Positions,
  color: [0, 0, 1, 1],
  fill: [false, false, false, false],
  fillColor: [[0, 0, 1, 0.5], [0, 0, 1, 0.5], [0, 0, 1, 0.5], [0, 0, 1, 0.5]],
@@ -29,14 +28,14 @@ class App extends Component {
 
  const trace2 = {
  mode: 'scatterFancy',
- positions: [
- .5,.5, 1.5,.5, 2.5,.5, 3.5,.5, 4.5,.5, 5.5,.5, 6.5,.5, 7.5,.5, 8.5,.5, 9.5,.5,
- .5,1.5, 1.5,1.5, 2.5,1.5, .5,2.5, 1.5,2.5, 2.5,2.5, .5,3.5, 1.5,3.5, 2.5,3.5,
- 3.5,3.5, 4.5,3.5, 5.5,3.5
- ],
  min: { x: 0.5, y: 0.5 },
  max: { x: 9.5, y: 3.5 },
  scatterFancy: {
+ positions: [
+ .5,.5, 1.5,.5, 2.5,.5, 3.5,.5, 4.5,.5, 5.5,.5, 6.5,.5, 7.5,.5, 8.5,.5, 9.5,.5,
+ .5,1.5, 1.5,1.5, 2.5,1.5, .5,2.5, 1.5,2.5, 2.5,2.5, .5,3.5, 1.5,3.5, 2.5,3.5,
+ 3.5,3.5, 4.5,3.5, 5.5,3.5
+ ],
  sizes: [
  40, 20, 30, 40, 50, 60, 70, 80, 90, 100,
  25, 30, 35, 40, 45, 50, 1, 5, 20, 50, 120, 150
@@ -121,15 +120,15 @@ class App extends Component {
  }
 
  makePlot2() {
- const p3 = glPlot2d.getRandomPositions(100);
- const p4 = glPlot2d.getRandomPositions(1000);
+ const p3Positions = glPlot2d.getRandomPositions(100, 20);
+ const p4Positions = glPlot2d.getRandomPositions(1000, 30);
 
  const trace3 = {
  mode: 'line',
- positions: p3.positions,
- min: p3.min,
- max: p3.max,
+ min: glPlot2d.getMin(p3Positions),
+ max: glPlot2d.getMax(p3Positions),
  line: {
+ positions: p3Positions,
  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]],
@@ -139,10 +138,10 @@ class App extends Component {
 
  const trace4 = {
  mode: 'scatter',
- positions: p4.positions,
- min: p4.min,
- max: p4.max,
+ min: glPlot2d.getMin(p4Positions),
+ max: glPlot2d.getMax(p4Positions),
  scatter: {
+ positions: p4Positions,
  size: 10,
  color: [0.8, 0.0, 0.0, 1],
  borderSize: 1,
@@ -156,7 +155,7 @@ class App extends Component {
  this.height2 = '200px';
  this.width2 = '100%';
 
- const tickList = glPlot2d.getTicks(this.traces1, 'log', 1, false, null);
+ const tickList = glPlot2d.getTicks(this.traces2, 'log', 1, false, null);
 
  this.plotOptions2 = {
  pixelRatio: 1,

index.ts

@@ -7,6 +7,8 @@ export {
  GlPlot2dOptions,
  getLinearTicks,
  getLogTicks,
+ getMin,
+ getMax,
  getMinMax,
  getRandomPositions,
  getTicks,

src/GlPlot2dComponent.tsx

@@ -46,7 +46,6 @@ export class GlPlot2dComponent extends skate.Component<GlPlot2dComponentProps> {
  // Turn (or "coerce") each trace into a Trace object.
  return traces.map((trace: Trace) => {
  return new Trace(trace.mode,
- trace.positions,
  trace.min,
  trace.max,
  trace.line,
@@ -100,23 +99,7 @@ export class GlPlot2dComponent extends skate.Component<GlPlot2dComponentProps> {
  if (this.shadowRoot && !this.canvas && !this.plot) {
  this.canvas = this.shadowRoot.querySelector('canvas');
 
- 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.initGl();
  this.initEventHandlers();
  this.initPlot();
  this.fitCanvas();
@@ -202,30 +185,29 @@ export class GlPlot2dComponent extends skate.Component<GlPlot2dComponentProps> {
  }
 
  /**
- * Resize fit canvas function that uses canvas-fit.
- * Sets the viewBox to contain the entire surrounding div.
+ * Helper to initialize WebGL context.
+ *
+ * @returns {void}
  *
  * @memberOf GlPlot2dComponent
  */
- public fitCanvas(): void {
- // Setup fit().
- const resize = fit(this.canvas, null, +window.devicePixelRatio);
-
- if (this.shadowRoot) {
- // Get the div around the canvas.
- const div = this.shadowRoot.querySelector('div');
-
- if (div) {
- const boundingClientRect = div.getBoundingClientRect();
-
- // Set the viewBox to contain the entire surrounding div.
- // TODO: Parameterize the viewBox.
- this['plotOptions'].viewBox = [50, 1, boundingClientRect.width - 1, boundingClientRect.height - 1];
+ public initGl(): void {
+ if (this.canvas) {
+ this.gl = this.canvas.getContext('webgl');
+ }
+ else {
+ if (this['debug']) {
+ console.error('GlPlot2dComponent: initGl: No canvas: ', this.canvas);
  }
+ return;
  }
 
- // Trigger resize.
- resize();
+ if (!this.gl) {
+ if (this['debug']) {
+ console.error('GlPlot2dComponent: initGl: No gl: ', this.gl);
+ }
+ return;
+ }
  }
 
  /**
@@ -281,19 +263,46 @@ export class GlPlot2dComponent extends skate.Component<GlPlot2dComponentProps> {
 
  this['traces'].forEach((trace: Trace) => {
  if (trace.line) {
- this.addLinePlot(trace.positions, trace.line);
+ this.addLinePlot(trace.line);
  }
  else if (trace.scatter) {
- this.addScatterPlot(trace.positions, trace.scatter);
+ this.addScatterPlot(trace.scatter);
  }
  else if (trace.scatterFancy) {
- this.addScatterFancyPlot(trace.positions, trace.scatterFancy);
+ this.addScatterFancyPlot(trace.scatterFancy);
  }
  });
 
  skate.emit(this, `gl-plot-2d-init-plot-done-${this['name']}`);
  }
 
+ /**
+ * Resize fit canvas function that uses canvas-fit.
+ * Sets the viewBox to contain the entire surrounding div.
+ *
+ * @memberOf GlPlot2dComponent
+ */
+ public fitCanvas(): void {
+ // Setup fit().
+ const resize = fit(this.canvas, null, +window.devicePixelRatio);
+
+ if (this.shadowRoot) {
+ // Get the div around the canvas.
+ const div = this.shadowRoot.querySelector('div');
+
+ if (div) {
+ const boundingClientRect = div.getBoundingClientRect();
+
+ // Set the viewBox to contain the entire surrounding div.
+ // TODO: Parameterize the viewBox.
+ this['plotOptions'].viewBox = [50, 1, boundingClientRect.width - 1, boundingClientRect.height - 1];
+ }
+ }
+
+ // Trigger resize.
+ resize();
+ }
+
  /**
  * Helper tha draws the plot.
  *
@@ -319,14 +328,13 @@ export class GlPlot2dComponent extends skate.Component<GlPlot2dComponentProps> {
  /**
  * Helper that adds a line plot to the current plot.
  *
- * @param {number[]} positions
  * @param {Line} line
  *
  * @memberOf GlPlot2dComponent
  */
- public addLinePlot(positions: number[], line: Line): void {
+ public addLinePlot(line: Line): void {
  createLine(this.plot, {
- positions: new Float32Array(positions),
+ positions: line.positions,
  color: line.color,
  fill: line.fill,
  fillColor: line.fillColor,
@@ -337,14 +345,13 @@ export class GlPlot2dComponent extends skate.Component<GlPlot2dComponentProps> {
  /**
  * Helper that adds a scatter plot to the current plot.
  *
- * @param {number[]} positions
  * @param {Scatter} scatter
  *
  * @memberOf GlPlot2dComponent
  */
- public addScatterPlot(positions: number[], scatter: Scatter): void {
+ public addScatterPlot(scatter: Scatter): void {
  createScatter(this.plot, {
- positions: new Float32Array(positions),
+ positions: scatter.positions,
  size: scatter.size,
  color: scatter.color,
  borderSize: scatter.borderSize,
@@ -355,14 +362,13 @@ export class GlPlot2dComponent extends skate.Component<GlPlot2dComponentProps> {
  /**
  * Helper that adds a scatter fancy plot to the current plot.
  *
- * @param {number[]} positions
  * @param {ScatterFancy} scatterFancy
  *
  * @memberOf GlPlot2dComponent
  */
- public addScatterFancyPlot(positions: number[], scatterFancy: ScatterFancy): void {
+ public addScatterFancyPlot(scatterFancy: ScatterFancy): void {
  createScatterFancy(this.plot, {
- positions: new Float32Array(positions),
+ positions: scatterFancy.positions,
  sizes: scatterFancy.sizes,
  colors: scatterFancy.colors,
  glyphs: scatterFancy.glyphs,

src/GlPlot2dUtils.ts

@@ -123,39 +123,67 @@ export function getMinMax(traces: Trace[]): PointPair {
 }
 
 /**
- * Helper that gets random positions.
- * Also returns min and max coordinates from positions: (minX, minY) and (maxX, maxY).
+ * Helper that gets random positions for testing purposes.
  *
  * @export
  * @param {number} count
- * @returns {*}
+ * @param {number} xRange
+ * @returns {number[]}
  */
-export function getRandomPositions(count: number): any {
+export function getRandomPositions(count: number, xRange: number): number[] {
  const positions: number[] = [];
- let minX = Number.MAX_SAFE_INTEGER;
- let minY = Number.MAX_SAFE_INTEGER;
- let maxX = Number.MIN_SAFE_INTEGER;
- let maxY = Number.MIN_SAFE_INTEGER;
 
  for (let i = 0; i < 2 * count; i += 2) {
- positions[i] = (i / count) * 20 - 20;
+ positions[i] = (i / count) * xRange - xRange;
 
  // Samples the standard normal distribution, with 0 mean and unit standard deviation.
  // See https://github.com/scijs/gauss-random.
  positions[i + 1] = Math.sqrt(-2.0 * Math.log(Math.random())) * Math.cos(2.0 * Math.PI * Math.random());
+ }
+
+ return positions;
+}
+
+/**
+ * Get a min point out of a list of positions.
+ * Assumes (x, y) values are packed in a single positions array such that
+ * x === positions[i] and y === positions[i + 1].
+ *
+ * @export
+ * @param {number[]} positions
+ * @returns {Point}
+ */
+export function getMin(positions: number[]): Point {
+ let minX = Number.MAX_SAFE_INTEGER;
+ let minY = Number.MAX_SAFE_INTEGER;
 
+ for (let i = 0; i < positions.length; i += 2) {
  if (positions[i] < minX) { minX = positions[i]; }
  if (positions[i + 1] < minY) { minY = positions[i + 1]; }
+ }
+
+ return new Point(minX, minY);
+}
+
+/**
+ * Get a max point out of a list of positions.
+ * Assumes (x, y) values are packed in a single positions array such that
+ * x === positions[i] and y === positions[i + 1].
+ *
+ * @export
+ * @param {number[]} positions
+ * @returns {Point}
+ */
+export function getMax(positions: number[]): Point {
+ let maxX = Number.MIN_SAFE_INTEGER;
+ let maxY = Number.MIN_SAFE_INTEGER;
 
+ for (let i = 0; i < positions.length; i += 2) {
  if (positions[i] > maxX) { maxX = positions[i]; }
  if (positions[i + 1] > maxY) { maxY = positions[i + 1]; }
  }
 
- return {
- positions,
- min: new Point(minX, minY),
- max: new Point(maxX, maxY)
- };
+ return new Point(maxX, maxY);
 }
 
 /**

src/Line.ts

@@ -2,10 +2,13 @@
 /**
  * Line.
  *
+ * See https://github.com/gl-vis/gl-line2d.
+ *
  * @export
  * @class Line
  */
 export class Line {
+ public positions: number[];
  public color: number[];
  public fill: boolean[];
  public fillColor: number[][];
@@ -14,14 +17,16 @@ export class Line {
  /**
  * Creates an instance of Line.
  *
+ * @param {number[]} positions
  * @param {number[]} color
  * @param {boolean[]} fill
  * @param {number[][]} fillColor
  * @param {number} width
  *
  * @memberOf Line
  */
- constructor(color: number[], fill: boolean[], fillColor: number[][], width: number) {
+ constructor(positions: number[], color: number[], fill: boolean[], fillColor: number[][], width: number) {
+ this.positions = positions;
  this.color = color;
  this.fill = fill;
  this.fillColor = fillColor;