@pirireis/webglobeplugins 0.17.1 → 1.0.2

package/tracks/timetracks/plugin-line-strip.js

@@ -1,240 +1,295 @@
-/**
- * Author: Toprak Nihat Deniz Ozturk
- */
-import TrackGlowLineProgram from './program-line-strip';
-import PointProgram from './programpoint-line-strip';
-/**
- * @typedef {Float32Array} TimeTrackMultiColorData  | A linestring is representation, let A{a1, a2, a3}, B{b1, b2} be the points of the line.
-     * TimeTrackMultiColorData is [
-     *  a1x, a1y, a1z, a1time, a1r, a1g, a1b, a1time, a3time,
-     *  a2x, a2y, a2z, a2time, a2r, a2g, a2b, a1time, a3time,
-     *  a3x, a3y, a3z, a3time, a3r, a3g, a3b, a1time, a3time,
-     *  NaN, NaN, NaN, NaN,    NaN, NaN, NaN, NaN,    NaN,
-     *  b1x, b1y, b1z, b1time, b1r, b1g, b1b, b1time, b2time,
-     *  b2x, b2y, b2z, b2time, b2r, b2g, b2b, BstartTime, BendTime
-     * ]
-     * there is a cutting point between A and B
-     *
-     * x, y is xy coordinates are in between 0, +1 for -180 to +180 longitude and -90 to +90 latitude
-     * z is height in meters
-*/
-/**
-  * Access following methods through `plugin.program.` :
-    * * setGamma
-    * * setExposure
-    * * setAlphaThreshold
-    * * setWeights
-    * * setHeadPercentage
-    * * setRouteAlpha
-    * * setFinalAlphaRatio
-    
-    uses float32array in a * {@link TimeTrackMultiColorData} format
-
- */
-export default class TimeTrackMultiColorPlugin {
-    /**
-     * @param {String} id
-     * @param {Object} options
-     * @param {TimeTrackMultiColorData} options.data {@link TimeTrackMultiColorData}
-     * @param {number} options.headPercentage 0 ~ 1
-     * @param {number} options.routeAlpha 0 ~ 1
-     * @param {Array.<Number>} options.weights  [w1, w2, w3, w4, w5]
-     * @param {number} options.alphaThreshold 0 ~ 1
-     * @param {number} options.exposure 0 ~ inf
-     * @param {number} options.gamma 0 ~ inf
-     * @param {number} options.finalAlphaRatio 0 ~ 1
-     * @param {number} pointOptions.opacity 0 ~ 1
-     * @param {number} pointOptions.pointSize 0 ~ inf
-     * @param {boolean} pointOptions.isOn true | false
-    */
-    constructor(id, options = {}, { opacity = 1.0, pointSize = 1, isOn = false } = {}) {
-        this.id = id;
-        this.globe = null;
-        this.gl = null;
-        this.program = null;
-        this._headTime = 0;
-        this._tailTime = 0;
-        this._data = options.data || null;
-        this._options = options;
-        this._pointOptions = { opacity, pointSize, isOn };
-        this.program = null;
-        this._transporArr = new Float32Array(3);
-        this._ready = false;
-        this.pointProgram = null;
-        this._attrBuffer = null;
-    }
-    // ----------------------------------
-    //     --- user methods ---
-    // ----------------------------------
-    setHeadAndTailTime(headTime, tailTime) {
-        this._headTime = headTime;
-        this._tailTime = tailTime;
-        // console.log("setHeadAndTailTime", headTime, tailTime);
-        this.pointProgram?.setHeadTime(headTime);
-        this.globe.DrawRender();
-    }
-    setBlurWeights(weights) {
-        this.program.setBlurWeights(weights);
-        this.globe.DrawRender();
-    }
-    setHeadPercentage(headPercentage) {
-        this.program.setHeadPercentage(headPercentage);
-        this.globe.DrawRender();
-    }
-    setRouteAlpha(routeAlpha) {
-        this.program.setRouteAlpha(routeAlpha);
-        this.globe.DrawRender();
-    }
-    setFinalAlphaRatio(finalAlphaRatio) {
-        this.program.setFinalAlphaRatio(finalAlphaRatio);
-        this.globe.DrawRender();
-    }
-    setGamma(gamma) {
-        this.program.setGamma(gamma);
-        this.globe.DrawRender();
-    }
-    setExposure(exposure) {
-        this.program.setExposure(exposure);
-        this.globe.DrawRender();
-    }
-    setBlurRepetition(repetition) {
-        this.program.setBlurRepetition(repetition);
-        this.globe.DrawRender();
-    }
-    // ---------------point program setters-------------------
-    setPointOpacity(opacity) {
-        this._pointOptions.opacity = opacity;
-        if (this.pointProgram) {
-            this.pointProgram.setOpacity(opacity);
-            this.globe.DrawRender();
-        }
-    }
-    setPointSize(size) {
-        this._pointOptions.pointSize = size;
-        if (this.pointProgram) {
-            this.pointProgram.setPointSize(size);
-            this.globe.DrawRender();
-        }
-    }
-    pointSwitch(isOn) {
-        if (isOn && !this.pointProgram) {
-            this.pointProgram = this._createPointProgram();
-        }
-        else {
-            this._deletePointProgram();
-        }
-    }
-    // ------------------------------------------------------------
-    _createPointProgram() {
-        const { gl } = this;
-        const program = new PointProgram(gl, this.globe, this._attrBuffer, this._pointOptions);
-        program.setDrawCount(this._totalSize);
-        return program;
-    }
-    _deletePointProgram() {
-        if (this.pointProgram)
-            this.pointProgram.free();
-        this.pointProgram = null;
-    }
-    // -------------------------------------------------------------
-    isReady() {
-        return this._ready;
-    }
-    /**
-     * @param {TimeTrackMultiColorData} data {@link TimeTrackMultiColorData}
-     * Check Class constructor
-     */
-    setData(data) {
-        if (this.gl) {
-            this._ready = false;
-            this.setDataAsFloat32Array(data);
-            this._ready = true;
-        }
-        else {
-            this._data = data;
-            this._ready = false;
-        }
-    }
-    /**
-     * @param {TimeTrackMultiColorData} data {@link TimeTrackMultiColorData}
-     * @param {number} totalSize | if not provided, it is calculated from float32Array.length / 9. Use if you want to draw first n points.
-     */
-    setDataAsFloat32Array(data, totalSize = null) {
-        const { gl, _attrBuffer } = this;
-        gl.bindBuffer(gl.ARRAY_BUFFER, _attrBuffer);
-        gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
-        gl.bindBuffer(gl.ARRAY_BUFFER, null);
-        // this.program.setInBuffer(data);
-        // this.pointProgram.setData(data);
-        if (totalSize) {
-            this._totalSize = totalSize;
-        }
-        else {
-            this._totalSize = data.length / 9;
-        }
-        this.program.setTotalLength(this._totalSize);
-        this.pointProgram?.setDrawCount(this._totalSize / 2);
-        this._ready = true;
-    }
-    // ------------------------------
-    //      --- globe Methods ---
-    // ------------------------------
-    draw3D(projMatrix, modelviewMatrix, transPos) {
-        if (!this._ready)
-            return;
-        const { _headTime, _tailTime, program, _transporArr, globe } = this;
-        this.pointProgram?.draw();
-        _transporArr.set([transPos.x, transPos.y, transPos.z], 0);
-        const geomType = globe.api_GetCurrentGeometry();
-        if (geomType === 0) {
-            program.draw(_headTime, _tailTime, projMatrix, modelviewMatrix, _transporArr);
-        }
-        else if (geomType === 1) {
-            const { width, height } = globe.api_GetCurrentWorldWH();
-            program.draw(_headTime, _tailTime, projMatrix, modelviewMatrix, _transporArr, [width, height]);
-        }
-        else {
-            console.error("Unknown geometry type", geomType);
-        }
-    }
-    resize(width, height) {
-        const { program, globe } = this;
-        width = width || globe.api_ScrW();
-        height = height || globe.api_ScrH();
-        program.resize(width, height);
-    }
-    init(globe, gl) {
-        this.globe = globe;
-        this.gl = gl;
-        this._attrBuffer = gl.createBuffer();
-        this.program = new TrackGlowLineProgram(gl, this._attrBuffer, globe.api_ScrW(), globe.api_ScrH(), this._options);
-        if (this._pointOptions?.isOn)
-            this.pointProgram = new PointProgram(gl, globe, this._attrBuffer);
-        // this.pointProgram.setAttrBuffer(_attrBuffer);
-        this.setGeometry();
-        if (this._data) {
-            this._ready = true;
-            this.setDataAsFloat32Array(this._data);
-            this._data = null;
-        }
-        this.resize();
-    }
-    free() {
-        const { gl, _attrBuffer } = this;
-        this.program.free();
-        gl.deleteBuffer(_attrBuffer);
-    }
-    setGeometry() {
-        const { globe, program } = this;
-        program.setIs3D(globe.api_GetCurrentGeometry() === 0);
-    }
-    // ----------------------------------
-    //      --- implicit methods ---
-    // ----------------------------------
-    _latLongToPixelXY(latitude, longitude) {
-        return {
-            x: (longitude + 180) / 360,
-            y: (90 - latitude) / 180
-        };
-    }
-}
+/**
+ * Author: Toprak Nihat Deniz Ozturk
+ */
+
+
+
+import TrackGlowLineProgram from './program-line-strip';
+import PointProgram from './programpoint-line-strip';
+
+/**
+ * @typedef {Float32Array} TimeTrackMultiColorData  | A linestring is representation, let A{a1, a2, a3}, B{b1, b2} be the points of the line.
+     * TimeTrackMultiColorData is [
+     *  a1x, a1y, a1z, a1time, a1r, a1g, a1b, a1time, a3time,
+     *  a2x, a2y, a2z, a2time, a2r, a2g, a2b, a1time, a3time, 
+     *  a3x, a3y, a3z, a3time, a3r, a3g, a3b, a1time, a3time,
+     *  NaN, NaN, NaN, NaN,    NaN, NaN, NaN, NaN,    NaN,
+     *  b1x, b1y, b1z, b1time, b1r, b1g, b1b, b1time, b2time, 
+     *  b2x, b2y, b2z, b2time, b2r, b2g, b2b, BstartTime, BendTime
+     * ]
+     * there is a cutting point between A and B
+     * 
+     * x, y is xy coordinates are in between 0, +1 for -180 to +180 longitude and -90 to +90 latitude
+     * z is height in meters
+*/
+
+
+
+
+
+/**
+  * Access following methods through `plugin.program.` :
+    * * setGamma
+    * * setExposure
+    * * setAlphaThreshold
+    * * setWeights
+    * * setHeadPercentage
+    * * setRouteAlpha
+    * * setFinalAlphaRatio 
+    
+    uses float32array in a * {@link TimeTrackMultiColorData} format
+
+ */
+export default class TimeTrackMultiColorPlugin {
+    /**
+     * @param {String} id 
+     * @param {Object} options 
+     * @param {TimeTrackMultiColorData} options.data {@link TimeTrackMultiColorData}
+     * @param {number} options.headPercentage 0 ~ 1
+     * @param {number} options.routeAlpha 0 ~ 1
+     * @param {Array.<Number>} options.weights  [w1, w2, w3, w4, w5]
+     * @param {number} options.alphaThreshold 0 ~ 1
+     * @param {number} options.exposure 0 ~ inf
+     * @param {number} options.gamma 0 ~ inf
+     * @param {number} options.finalAlphaRatio 0 ~ 1
+     * @param {number} pointOptions.opacity 0 ~ 1
+     * @param {number} pointOptions.pointSize 0 ~ inf
+     * @param {boolean} pointOptions.isOn true | false
+    */
+    constructor(id, options = {}, { opacity = 1.0, pointSize = 1, isOn = false } = {}) {
+        this.id = id;
+
+        this.globe = null;
+        this.gl = null;
+        this.program = null;
+        this._headTime = 0;
+        this._tailTime = 0;
+
+        this._data = options.data || null;
+        this._options = options;
+        this._pointOptions = { opacity, pointSize, isOn };
+        this.program = null;
+
+        this._transporArr = new Float32Array(3);
+
+        this._ready = false;
+
+        this.pointProgram = null;
+
+        this._attrBuffer = null;
+    }
+
+    // ----------------------------------
+    //     --- user methods ---
+    // ----------------------------------
+
+    setHeadAndTailTime(headTime, tailTime) {
+        this._headTime = headTime;
+        this._tailTime = tailTime;
+        // console.log("setHeadAndTailTime", headTime, tailTime);
+        this.pointProgram?.setHeadTime(headTime);
+        this.globe.DrawRender();
+    }
+
+    setBlurWeights(weights) {
+        this.program.setBlurWeights(weights);
+        this.globe.DrawRender();
+    }
+
+    setHeadPercentage(headPercentage) {
+        this.program.setHeadPercentage(headPercentage);
+        this.globe.DrawRender();
+    }
+
+    setRouteAlpha(routeAlpha) {
+        this.program.setRouteAlpha(routeAlpha);
+        this.globe.DrawRender();
+    }
+
+    setFinalAlphaRatio(finalAlphaRatio) {
+        this.program.setFinalAlphaRatio(finalAlphaRatio);
+        this.globe.DrawRender();
+    }
+
+    setGamma(gamma) {
+        this.program.setGamma(gamma);
+        this.globe.DrawRender();
+    }
+
+    setExposure(exposure) {
+        this.program.setExposure(exposure);
+        this.globe.DrawRender();
+    }
+
+    setBlurRepetition(repetition) {
+        this.program.setBlurRepetition(repetition);
+        this.globe.DrawRender();
+    }
+
+
+
+    // ---------------point program setters-------------------
+
+    setPointOpacity(opacity) {
+        this._pointOptions.opacity = opacity;
+        if (this.pointProgram) {
+            this.pointProgram.setOpacity(opacity);
+            this.globe.DrawRender();
+        }
+    }
+
+    setPointSize(size) {
+        this._pointOptions.pointSize = size;
+        if (this.pointProgram) {
+            this.pointProgram.setPointSize(size);
+            this.globe.DrawRender();
+        }
+    }
+
+    pointSwitch(isOn) {
+        if (isOn && !this.pointProgram) {
+            this.pointProgram = this._createPointProgram();
+        } else {
+            this._deletePointProgram();
+        }
+
+    }
+
+    // ------------------------------------------------------------
+
+    _createPointProgram() {
+        const { gl } = this;
+        const program = new PointProgram(gl, this.globe, this._attrBuffer, this._pointOptions);
+        program.setDrawCount(this._totalSize);
+        return program;
+    }
+
+    _deletePointProgram() {
+        if (this.pointProgram) this.pointProgram.free();
+        this.pointProgram = null;
+    }
+
+    // -------------------------------------------------------------
+
+    isReady() {
+        return this._ready;
+    }
+
+    /**
+     * @param {TimeTrackMultiColorData} data {@link TimeTrackMultiColorData}
+     * Check Class constructor
+     */
+    setData(data) {
+        if (this.gl) {
+            this._ready = false;
+            this.setDataAsFloat32Array(data);
+            this._ready = true;
+        } else {
+            this._data = data;
+            this._ready = false;
+        }
+    }
+
+    /**
+     * @param {TimeTrackMultiColorData} data {@link TimeTrackMultiColorData}
+     * @param {number} totalSize | if not provided, it is calculated from float32Array.length / 9. Use if you want to draw first n points.
+     */
+    setDataAsFloat32Array(data, totalSize = null) {
+
+        const { gl, _attrBuffer } = this;
+        gl.bindBuffer(gl.ARRAY_BUFFER, _attrBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+
+
+        // this.program.setInBuffer(data);
+
+        // this.pointProgram.setData(data);
+        if (totalSize) {
+            this._totalSize = totalSize;
+        } else {
+            this._totalSize = data.length / 9;
+        }
+        this.program.setTotalLength(this._totalSize);
+        this.pointProgram?.setDrawCount(this._totalSize / 2);
+
+        this._ready = true;
+    }
+
+    // ------------------------------
+    //      --- globe Methods ---
+    // ------------------------------
+
+    draw3D(projMatrix, modelviewMatrix, transPos) {
+        if (!this._ready) return;
+        const { _headTime, _tailTime, program, _transporArr, globe } = this;
+        this.pointProgram?.draw();
+
+        _transporArr.set([transPos.x, transPos.y, transPos.z], 0);
+        const geomType = globe.api_GetCurrentGeometry();
+        if (geomType === 0) {
+            program.draw(_headTime, _tailTime, projMatrix, modelviewMatrix, _transporArr);
+        } else if (geomType === 1) {
+            const { width, height } = globe.api_GetCurrentWorldWH();
+            program.draw(_headTime, _tailTime, projMatrix, modelviewMatrix, _transporArr,
+                [width, height]);
+        } else {
+            console.error("Unknown geometry type", geomType);
+        }
+    }
+
+    resize(width, height) {
+        const { program, globe } = this;
+        width = width || globe.api_ScrW();
+        height = height || globe.api_ScrH();
+        program.resize(width, height);
+    }
+
+
+    init(globe, gl) {
+        this.globe = globe;
+        this.gl = gl;
+        this._attrBuffer = gl.createBuffer();
+        this.program = new TrackGlowLineProgram(gl, this._attrBuffer, globe.api_ScrW(), globe.api_ScrH(), this._options);
+        if (this._pointOptions?.isOn) this.pointProgram = new PointProgram(gl, globe, this._attrBuffer);
+
+        // this.pointProgram.setAttrBuffer(_attrBuffer);
+        this.setGeometry();
+        if (this._data) {
+            this._ready = true;
+            this.setDataAsFloat32Array(this._data);
+
+            this._data = null;
+        }
+        this.resize();
+    }
+
+
+    free() {
+        const { gl, _attrBuffer } = this;
+        this.program.free();
+        gl.deleteBuffer(_attrBuffer);
+    }
+
+
+    setGeometry() {
+        const { globe, program } = this;
+        program.setIs3D(globe.api_GetCurrentGeometry() === 0);
+    }
+
+    // ----------------------------------
+    //      --- implicit methods ---
+    // ----------------------------------
+
+
+    _latLongToPixelXY(latitude, longitude) {
+        return {
+            x: (longitude + 180) / 360,
+            y: (90 - latitude) / 180
+        };
+    }
+}
+
+
+
+