webgl-plot - npm Package Compare versions

Comparing version 0.7.0 to 0.7.1

dist/ColorRGBA.d.ts

@@ -0,0 +0,0 @@ export declare class ColorRGBA {

dist/ColorRGBA.js

 export class ColorRGBA {
+    r;
+    g;
+    b;
+    a;
     constructor(r, g, b, a) {
@@ -3,0 +7,0 @@ this.r = r;

dist/thickTools/thick.d.ts

@@ -7,3 +7,3 @@ /**
 import { Vec2 } from "./vecTools.js";
-export declare type NormalMiter = {
+export type NormalMiter = {
     vec2: Vec2;
@@ -10,0 +10,0 @@ miterLength: number;

dist/thickTools/thick.js

@@ -0,0 +0,0 @@ /**

dist/thickTools/vecTools.d.ts

@@ -6,3 +6,3 @@ /**
  */
-export declare type Vec2 = {
+export type Vec2 = {
     x: number;
@@ -9,0 +9,0 @@ y: number;

dist/thickTools/vecTools.js

@@ -0,0 +0,0 @@ /**

dist/WbglLine.d.ts

@@ -0,0 +0,0 @@ import type { ColorRGBA } from "./ColorRGBA";

dist/WbglLine.js

@@ -6,2 +6,3 @@ import { WebglBase } from "./WebglBase";
 export class WebglLine extends WebglBase {
+    currentIndex = 0;
     /**
@@ -20,3 +21,2 @@ * Create a new line
         super();
-        this.currentIndex = 0;
         this.webglNumPoints = numPoints;
@@ -23,0 +23,0 @@ this.numPoints = numPoints;

dist/WbglPolar.d.ts

@@ -0,0 +0,0 @@ import type { ColorRGBA } from "./ColorRGBA";

dist/WbglPolar.js

 import { WebglBase } from "./WebglBase";
 export class WebglPolar extends WebglBase {
+    numPoints;
+    xy;
+    color;
+    intenisty;
+    visible;
+    offsetTheta;
     constructor(c, numPoints) {
@@ -4,0 +10,0 @@ super();

dist/WbglSquare.d.ts

@@ -0,0 +0,0 @@ import type { ColorRGBA } from "./ColorRGBA";

dist/WbglSquare.js

@@ -0,0 +0,0 @@ import { WebglBase } from "./WebglBase";

dist/WbglStep.d.ts

@@ -0,0 +0,0 @@ import type { ColorRGBA } from "./ColorRGBA";

dist/WbglStep.js

@@ -0,0 +0,0 @@ import { WebglBase } from "./WebglBase";

dist/WbglThickLine.d.ts

@@ -0,0 +0,0 @@ import type { ColorRGBA } from "./ColorRGBA";

dist/WbglThickLine.js

@@ -8,2 +8,7 @@ import { PolyLine } from "./thickTools/thick";
 export class WebglThickLine extends WebglBase {
+    currentIndex = 0;
+    //protected triPoints: Float32Array;
+    _linePoints;
+    _thicknessRequested = 0;
+    _actualThickness = 0;
     /**
@@ -22,5 +27,2 @@ * Create a new line
         super();
-        this.currentIndex = 0;
-        this._thicknessRequested = 0;
-        this._actualThickness = 0;
         this.webglNumPoints = numPoints * 2;
@@ -27,0 +29,0 @@ this.numPoints = numPoints;

dist/WebglBase.d.ts

@@ -0,0 +0,0 @@ import { ColorRGBA } from "./ColorRGBA";

dist/WebglBase.js

@@ -6,5 +6,66 @@ import { ColorRGBA } from "./ColorRGBA";
 export class WebglBase {
+    //private static program: WebGLProgram;
+    intensity;
+    visible;
     /**
+     * The number of data point pairs in the line
+     */
+    numPoints;
+    /**
+     * The data ponits for webgl array
      * @internal
      */
+    xy;
+    /**
+     * The Color of the line
+     */
+    color;
+    /**
+     * The horizontal scale of the line
+     * @default = 1
+     */
+    scaleX;
+    /**
+     * The vertical scale of the line
+     * @default = 1
+     */
+    scaleY;
+    /**
+     * The horizontal offset of the line
+     * @default = 0
+     */
+    offsetX;
+    /**
+     * the vertical offset of the line
+     * @default = 0
+     */
+    offsetY;
+    /**
+     * if this is a close loop line or not
+     * @default = false
+     */
+    loop;
+    /**
+     * total webgl number of points
+     * @internal
+     */
+    webglNumPoints;
+    /**
+     * @private
+     * @internal
+     */
+    _vbuffer;
+    /**
+     * @private
+     * @internal
+     */
+    //public _prog: WebGLProgram;
+    /**
+     * @private
+     * @internal
+     */
+    _coord;
+    /**
+     * @internal
+     */
     constructor() {
@@ -11,0 +72,0 @@ this.scaleX = 1;

dist/webglplot.d.ts

@@ -16,3 +16,3 @@ /**
 export { WebglLine, ColorRGBA, WebglStep, WebglPolar, WebglSquare, WebglThickLine };
-declare type WebglPlotConfig = {
+type WebglPlotConfig = {
     antialias?: boolean;
@@ -19,0 +19,0 @@ transparent?: boolean;

dist/webglplot.esm.d.ts

@@ -324,3 +324,3 @@ declare class ColorRGBA {
 
-declare type WebglPlotConfig = {
+type WebglPlotConfig = {
     antialias?: boolean;
@@ -327,0 +327,0 @@ transparent?: boolean;

dist/webglplot.esm.js

 class ColorRGBA {
+    r;
+    g;
+    b;
+    a;
     constructor(r, g, b, a) {
@@ -14,5 +18,66 @@ this.r = r;
 class WebglBase {
+    //private static program: WebGLProgram;
+    intensity;
+    visible;
     /**
+     * The number of data point pairs in the line
+     */
+    numPoints;
+    /**
+     * The data ponits for webgl array
      * @internal
      */
+    xy;
+    /**
+     * The Color of the line
+     */
+    color;
+    /**
+     * The horizontal scale of the line
+     * @default = 1
+     */
+    scaleX;
+    /**
+     * The vertical scale of the line
+     * @default = 1
+     */
+    scaleY;
+    /**
+     * The horizontal offset of the line
+     * @default = 0
+     */
+    offsetX;
+    /**
+     * the vertical offset of the line
+     * @default = 0
+     */
+    offsetY;
+    /**
+     * if this is a close loop line or not
+     * @default = false
+     */
+    loop;
+    /**
+     * total webgl number of points
+     * @internal
+     */
+    webglNumPoints;
+    /**
+     * @private
+     * @internal
+     */
+    _vbuffer;
+    /**
+     * @private
+     * @internal
+     */
+    //public _prog: WebGLProgram;
+    /**
+     * @private
+     * @internal
+     */
+    _coord;
+    /**
+     * @internal
+     */
     constructor() {
@@ -39,2 +104,3 @@ this.scaleX = 1;
 class WebglLine extends WebglBase {
+    currentIndex = 0;
     /**
@@ -53,3 +119,2 @@ * Create a new line
         super();
-        this.currentIndex = 0;
         this.webglNumPoints = numPoints;
@@ -259,2 +324,8 @@ this.numPoints = numPoints;
 class WebglPolar extends WebglBase {
+    numPoints;
+    xy;
+    color;
+    intenisty;
+    visible;
+    offsetTheta;
     constructor(c, numPoints) {
@@ -490,2 +561,7 @@ super();
 class WebglThickLine extends WebglBase {
+    currentIndex = 0;
+    //protected triPoints: Float32Array;
+    _linePoints;
+    _thicknessRequested = 0;
+    _actualThickness = 0;
     /**
@@ -504,5 +580,2 @@ * Create a new line
         super();
-        this.currentIndex = 0;
-        this._thicknessRequested = 0;
-        this._actualThickness = 0;
         this.webglNumPoints = numPoints * 2;
@@ -591,2 +664,68 @@ this.numPoints = numPoints;
     /**
+     * @private
+     */
+    webgl;
+    /**
+     * Global horizontal scale factor
+     * @default = 1.0
+     */
+    gScaleX;
+    /**
+     * Global vertical scale factor
+     * @default = 1.0
+     */
+    gScaleY;
+    /**
+     * Global X/Y scale ratio
+     * @default = 1
+     */
+    gXYratio;
+    /**
+     * Global horizontal offset
+     * @default = 0
+     */
+    gOffsetX;
+    /**
+     * Global vertical offset
+     * @default = 0
+     */
+    gOffsetY;
+    /**
+     * Global log10 of x-axis
+     * @default = false
+     */
+    gLog10X;
+    /**
+     * Global log10 of y-axis
+     * @default = false
+     */
+    gLog10Y;
+    /**
+     * collection of data lines in the plot
+     */
+    _linesData;
+    /**
+     * collection of auxiliary lines (grids, markers, etc) in the plot
+     */
+    _linesAux;
+    _thickLines;
+    _surfaces;
+    get linesData() {
+        return this._linesData;
+    }
+    get linesAux() {
+        return this._linesAux;
+    }
+    get thickLines() {
+        return this._thickLines;
+    }
+    get surfaces() {
+        return this._surfaces;
+    }
+    _progLine;
+    /**
+     * log debug output
+     */
+    debug = false;
+    /**
      * Create a webgl-plot instance
@@ -630,7 +769,2 @@ * @param canvas - the canvas in which the plot appears
     constructor(canvas, options) {
-        /**
-         * log debug output
-         */
-        this.debug = false;
-        this.addLine = this.addDataLine;
         if (options == undefined) {
@@ -676,14 +810,2 @@ this.webgl = canvas.getContext("webgl", {
     }
-    get linesData() {
-        return this._linesData;
-    }
-    get linesAux() {
-        return this._linesAux;
-    }
-    get thickLines() {
-        return this._thickLines;
-    }
-    get surfaces() {
-        return this._surfaces;
-    }
     /**
@@ -821,2 +943,3 @@ * updates and redraws the content of the plot
     }
+    addLine = this.addDataLine;
     addAuxLine(line) {
@@ -823,0 +946,0 @@ this._addLine(line);

dist/webglplot.js

@@ -20,2 +20,68 @@ /**
     /**
+     * @private
+     */
+    webgl;
+    /**
+     * Global horizontal scale factor
+     * @default = 1.0
+     */
+    gScaleX;
+    /**
+     * Global vertical scale factor
+     * @default = 1.0
+     */
+    gScaleY;
+    /**
+     * Global X/Y scale ratio
+     * @default = 1
+     */
+    gXYratio;
+    /**
+     * Global horizontal offset
+     * @default = 0
+     */
+    gOffsetX;
+    /**
+     * Global vertical offset
+     * @default = 0
+     */
+    gOffsetY;
+    /**
+     * Global log10 of x-axis
+     * @default = false
+     */
+    gLog10X;
+    /**
+     * Global log10 of y-axis
+     * @default = false
+     */
+    gLog10Y;
+    /**
+     * collection of data lines in the plot
+     */
+    _linesData;
+    /**
+     * collection of auxiliary lines (grids, markers, etc) in the plot
+     */
+    _linesAux;
+    _thickLines;
+    _surfaces;
+    get linesData() {
+        return this._linesData;
+    }
+    get linesAux() {
+        return this._linesAux;
+    }
+    get thickLines() {
+        return this._thickLines;
+    }
+    get surfaces() {
+        return this._surfaces;
+    }
+    _progLine;
+    /**
+     * log debug output
+     */
+    debug = false;
+    /**
      * Create a webgl-plot instance
@@ -59,7 +125,2 @@ * @param canvas - the canvas in which the plot appears
     constructor(canvas, options) {
-        /**
-         * log debug output
-         */
-        this.debug = false;
-        this.addLine = this.addDataLine;
         if (options == undefined) {
@@ -105,14 +166,2 @@ this.webgl = canvas.getContext("webgl", {
     }
-    get linesData() {
-        return this._linesData;
-    }
-    get linesAux() {
-        return this._linesAux;
-    }
-    get thickLines() {
-        return this._thickLines;
-    }
-    get surfaces() {
-        return this._surfaces;
-    }
     /**
@@ -250,2 +299,3 @@ * updates and redraws the content of the plot
     }
+    addLine = this.addDataLine;
     addAuxLine(line) {
@@ -252,0 +302,0 @@ this._addLine(line);

dist/webglplot.umd.js

@@ -8,2 +8,6 @@ (function (global, factory) {
     class ColorRGBA {
+        r;
+        g;
+        b;
+        a;
         constructor(r, g, b, a) {
@@ -21,5 +25,66 @@ this.r = r;
     class WebglBase {
+        //private static program: WebGLProgram;
+        intensity;
+        visible;
         /**
+         * The number of data point pairs in the line
+         */
+        numPoints;
+        /**
+         * The data ponits for webgl array
          * @internal
          */
+        xy;
+        /**
+         * The Color of the line
+         */
+        color;
+        /**
+         * The horizontal scale of the line
+         * @default = 1
+         */
+        scaleX;
+        /**
+         * The vertical scale of the line
+         * @default = 1
+         */
+        scaleY;
+        /**
+         * The horizontal offset of the line
+         * @default = 0
+         */
+        offsetX;
+        /**
+         * the vertical offset of the line
+         * @default = 0
+         */
+        offsetY;
+        /**
+         * if this is a close loop line or not
+         * @default = false
+         */
+        loop;
+        /**
+         * total webgl number of points
+         * @internal
+         */
+        webglNumPoints;
+        /**
+         * @private
+         * @internal
+         */
+        _vbuffer;
+        /**
+         * @private
+         * @internal
+         */
+        //public _prog: WebGLProgram;
+        /**
+         * @private
+         * @internal
+         */
+        _coord;
+        /**
+         * @internal
+         */
         constructor() {
@@ -46,2 +111,3 @@ this.scaleX = 1;
     class WebglLine extends WebglBase {
+        currentIndex = 0;
         /**
@@ -60,3 +126,2 @@ * Create a new line
             super();
-            this.currentIndex = 0;
             this.webglNumPoints = numPoints;
@@ -266,2 +331,8 @@ this.numPoints = numPoints;
     class WebglPolar extends WebglBase {
+        numPoints;
+        xy;
+        color;
+        intenisty;
+        visible;
+        offsetTheta;
         constructor(c, numPoints) {
@@ -497,2 +568,7 @@ super();
     class WebglThickLine extends WebglBase {
+        currentIndex = 0;
+        //protected triPoints: Float32Array;
+        _linePoints;
+        _thicknessRequested = 0;
+        _actualThickness = 0;
         /**
@@ -511,5 +587,2 @@ * Create a new line
             super();
-            this.currentIndex = 0;
-            this._thicknessRequested = 0;
-            this._actualThickness = 0;
             this.webglNumPoints = numPoints * 2;
@@ -598,2 +671,68 @@ this.numPoints = numPoints;
         /**
+         * @private
+         */
+        webgl;
+        /**
+         * Global horizontal scale factor
+         * @default = 1.0
+         */
+        gScaleX;
+        /**
+         * Global vertical scale factor
+         * @default = 1.0
+         */
+        gScaleY;
+        /**
+         * Global X/Y scale ratio
+         * @default = 1
+         */
+        gXYratio;
+        /**
+         * Global horizontal offset
+         * @default = 0
+         */
+        gOffsetX;
+        /**
+         * Global vertical offset
+         * @default = 0
+         */
+        gOffsetY;
+        /**
+         * Global log10 of x-axis
+         * @default = false
+         */
+        gLog10X;
+        /**
+         * Global log10 of y-axis
+         * @default = false
+         */
+        gLog10Y;
+        /**
+         * collection of data lines in the plot
+         */
+        _linesData;
+        /**
+         * collection of auxiliary lines (grids, markers, etc) in the plot
+         */
+        _linesAux;
+        _thickLines;
+        _surfaces;
+        get linesData() {
+            return this._linesData;
+        }
+        get linesAux() {
+            return this._linesAux;
+        }
+        get thickLines() {
+            return this._thickLines;
+        }
+        get surfaces() {
+            return this._surfaces;
+        }
+        _progLine;
+        /**
+         * log debug output
+         */
+        debug = false;
+        /**
          * Create a webgl-plot instance
@@ -637,7 +776,2 @@ * @param canvas - the canvas in which the plot appears
         constructor(canvas, options) {
-            /**
-             * log debug output
-             */
-            this.debug = false;
-            this.addLine = this.addDataLine;
             if (options == undefined) {
@@ -683,14 +817,2 @@ this.webgl = canvas.getContext("webgl", {
         }
-        get linesData() {
-            return this._linesData;
-        }
-        get linesAux() {
-            return this._linesAux;
-        }
-        get thickLines() {
-            return this._thickLines;
-        }
-        get surfaces() {
-            return this._surfaces;
-        }
         /**
@@ -828,2 +950,3 @@ * updates and redraws the content of the plot
         }
+        addLine = this.addDataLine;
         addAuxLine(line) {
@@ -927,4 +1050,2 @@ this._addLine(line);
 
-    Object.defineProperty(exports, '__esModule', { value: true });
-
 }));

package.json

 {
   "name": "webgl-plot",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "High-performance 2D plotting library based on native WebGL",
   "main": "./dist/webglplot.umd.js",
+  "type": "module",
   "exports": {
     ".": {
+      "types": "./dist/webglplot.d.ts",
       "require": "./dist/webglplot.cjs",
@@ -26,10 +28,10 @@ "import": "./dist/webglplot.esm.mjs"
     "@skypack/package-check": "^0.2.2",
-    "@typescript-eslint/eslint-plugin": "^5.12.1",
-    "@typescript-eslint/parser": "^5.12.1",
-    "eslint": "^8.10.0",
-    "rollup": "^2.68.0",
-    "rollup-plugin-dts": "^4.1.0",
-    "typedoc": "^0.22.12",
-    "typedoc-plugin-markdown": "^3.11.14",
-    "typescript": "^4.5.5"
+    "@typescript-eslint/eslint-plugin": "^6.4.1",
+    "@typescript-eslint/parser": "^6.4.1",
+    "eslint": "^8.48.0",
+    "rollup": "^3.28.1",
+    "rollup-plugin-dts": "^6.0.0",
+    "typedoc": "^0.25.0",
+    "typedoc-plugin-markdown": "^3.16.0",
+    "typescript": "^5.2.2"
   },
@@ -50,3 +52,4 @@ "scripts": {
   },
-  "homepage": "https://github.com/danchitnis/webgl-plot"
-}
+  "homepage": "https://github.com/danchitnis/webgl-plot",
+  "packageManager": "yarn@3.6.3"
+}

README.md

@@ -1,2 +0,2 @@
-![Npm Build](https://github.com/danchitnis/webgl-plot/workflows/Npm%20Build/badge.svg) ![Yarn Build](https://github.com/danchitnis/webgl-plot/workflows/Yarn%20Build/badge.svg) ![Code scanning](https://github.com/danchitnis/webgl-plot/workflows/Code%20scanning/badge.svg) ![Build](https://github.com/danchitnis/webgl-plot/workflows/Build/badge.svg) [![DOI](https://zenodo.org/badge/205590760.svg)](https://zenodo.org/badge/latestdoi/205590760)
+![Npm Build](https://github.com/danchitnis/webgl-plot/workflows/Npm%20Build/badge.svg) ![Yarn Build](https://github.com/danchitnis/webgl-plot/workflows/Yarn%20Build/badge.svg) ![Code scanning](https://github.com/danchitnis/webgl-plot/workflows/Code%20scanning/badge.svg) [![DOI](https://zenodo.org/badge/205590760.svg)](https://zenodo.org/badge/latestdoi/205590760)
 
@@ -26,6 +26,14 @@ ## [Live demo 🚀](https://danchitnis.github.io/webgl-plot-examples/vanilla/)
 
-## Thick Lines are now supported! 🥳
+## Thick Lines
 
-However notice that due to computation of the line data points, the performance of the thick lines is nearly _6 times slower_ than the normal lines. Only use thick lines when you need to see the lines clearly for example when highlighting a specific line. Further information can be found below. For benchmarking, see the [benchmark]() section.
+However notice that due to computation of the line data points, the performance of the thick lines is nearly _6 times slower_ than the normal lines. Only use thick lines when you need to see the lines clearly for example when highlighting a specific line. Further information can be found below. For benchmarking, see the [benchmark](https://github.com/danchitnis/webgl-plot#benchmark) section.
 
+## Version `next` coming soon 🎉
+
+The next version is currently under development. More computation is moved to the GPU, significantly improving performance. These improvements specifically benefit the rolling plot and the scatter plot. However, these changes require a rewrite of the main library and migration to `webgl2`. The current version will remain as no maintenance is needed since it is based on pure javascript. See an example [here](https://codesandbox.io/s/wbglscatteracc-krsvmy).
+
+## Python vesrion now released!! 🥳
+
+See [pyglplot](https://github.com/danchitnis/pyglplot) for the python equivalent of this library. However, please notice the python version is at its early stages.
+
 ## Getting started
@@ -147,22 +155,17 @@
 ```javascript
-import {
-  WebglPlot,
-  WebglLine,
-  ColorRGBA,
-} from "https://cdn.jsdelivr.net/gh/danchitnis/webgl-plot@master/dist/webglplot.esm.min.js";
+import { WebglPlot, WebglLine, ColorRGBA } from "<http source>";
 ```
 
+You can use web-based bundlers such as [esm.sh](https://esm.sh/), [unpkng](https://unpkg.com/), [JSdeliver](https://www.jsdelivr.com/?docs=esm) ,and [jspm](https://jspm.org/) to import the library to get the appropriate `http source`. See an example here:
+[JSfiddle](https://jsfiddle.net/danchitnis/tu1svwbp/)
+
 Thanks to [TimDaub](https://github.com/TimDaub) for testing the ES6 module.
 
-Notice that this method is only recommended for test and small codes.
+## Benchmark
 
-## SkyPack
+[Native Line](https://danchitnis.github.io/webgl-plot/benchmark/bench1.html) and
+[Thick Line](https://danchitnis.github.io/webgl-plot/benchmark/bench-thick.html).
 
-[Skypack](https://www.skypack.dev/view/webgl-plot) is a new exciting CDN for ESM Javascript. See the example below on how to use it:
-[JSfiddle](https://jsfiddle.net/danchitnis/tu1svwbp/)
+See [Benchmark](https://github.com/danchitnis/webgl-plot/blob/webglplot-v2/benchmark/README.md) for more detailed analysis.
 
-## Benchmark
-
-[Line generation and Frame rate](https://danchitnis.github.io/webgl-plot/benchmark/bench1.html)
-
 ## Internal test
@@ -169,0 +172,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

287304

increased by2.36%

Lines of code

7791

increased by8.54%

Number of lines in readme file

191

increased by1.6%

Is type module

Yes

No dependency changes