@pirireis/webglobeplugins 0.6.22 → 0.6.24-a

package/rangerings-2/plugin.js

@@ -29,14 +29,553 @@
  * @property {[number, number, number]} color
  * 
  * 
- * @method setOpacity
- * @method insertBulk
- * @method updateCentersXY
- * @method updateCentersColor
- * @method removeCenters
- * @method updateCentersHide
+ * @method insertBulk    
+ * @typedef {Array<{ringID, radius, padding}>} rings
+ * @param {Array<centerID:string, x:number, y:number, stepAngle:number, rgba:[4 numbers], rings:rings} items
+ 
+ * @method updateCentersXY     @param {Array<{centerID, x, y}>} items
+ * @method updateCentersColor  @param {Array<{centerID, rgba:[4 numbers]}>} centerColors
+ * 
+ * @method updateCentersHide   @param {Array<{centerID, hide, textHide}>} centerHides
+ * @method removeCenters       @param {Array<{centerID}>} centerIds
+ * @method setOpacity          @param {number} opacity
  * 
  * @method setOneDegreePaddingOn //  performance consuming, might be removed
  * @method setCompass // removed
  * 
- */
+ */
+
+import { centerCoords2dflatDataCreatorWithRadius, CircleCache as CircleCache2D } from "../programs/line-on-globe/circle-accurate-flat";
+import { CircleCache as CircleCache3D } from "../programs/line-on-globe/circle-accurate-3d";
+import { LinesColorInstancedFlatCache } from "../programs/line-on-globe/lines-color-instanced-flat";
+import { BufferOrchestrator, BufferManager } from "../util/account";
+import { populateFloat32Array } from "../util/jshelpers/data-filler";
+import { RingAccount, ringKeyMethod, ringBigPaddingKeyMethod } from "./ring-account";
+import { CirclePadding3DCache } from "../programs/line-on-globe/degree-padding-around-circle-3d";
+import { LineOnGlobeCache } from '../programs/line-on-globe/naive-accurate';
+
+import RangeRingAngleText from "./rangeringangletext";
+
+/**
+ * Programs:
+ * 
+ * circle3d circle2d padding3d padding2d
+ * 
+ *  
+ * */
+
+
+/**
+ * [+] Draw circles
+ * [+] BUG BUFFER OVERFLOW
+ * [+] Draw one degree paddings 2d
+ * [+] Create a program for accurate padding 3d
+ * [+] Draw one degree paddings 3d
+ * [+] Draw big paddings
+ * [+] DrawText
+ * [+] big paddings does not remove
+ */
+
+// TODO make x, y -> long, lat
+
+class RangeRings {
+    constructor(id, { oneDegreePadding = true, showNumbers = true, numbersStyle = null, opacity = 1 } = {}) {
+
+        this.id = id;
+
+        this._oneDegreePadding = oneDegreePadding;
+        this._showNumbers = showNumbers;
+        this._numbersStyle = numbersStyle;
+        this._opacity = opacity;
+        this._circleFlatEdgeCount = 362;
+        this._ringAccount = new RingAccount();
+
+    }
+
+
+    init(globe, gl) {
+        this.globe = globe;
+        this.gl = gl;
+        this._initPrograms();
+        this._initBufferManagers();
+        if (this._showNumbers) {
+            this.textPlugin = new RangeRingAngleText(globe, this.id + "text", { flatCompassMode: this.compass, style: this._numbersStyle, opacity: this._opacity });
+            delete this._numbersStyle;
+        }
+    }
+
+
+    _initPrograms() {
+        const { globe } = this;
+        this._circleProgram2D = CircleCache2D.get(globe);
+        this._circleProgram3D = CircleCache3D.get(globe);
+        this._padding2dProgram = LinesColorInstancedFlatCache.get(globe);
+        this._padding3dProgram = CirclePadding3DCache.get(globe);
+        this._bigPadding3dFlatProgram = LineOnGlobeCache.get(globe);
+        // this._padding3dProgram
+    }
+
+
+    _initBufferManagers() {
+        const { globe, gl, _circleFlatEdgeCount } = this;
+
+        const initialCapacity = 10;
+        const bufferType = "DYNAMIC_DRAW";
+        // circle2d, circle3d, 1 degree paddings,
+        this.bufferOrchestrator = new BufferOrchestrator({ capacity: initialCapacity });
+
+        this.bufferManagersCompMap = new Map(
+            [
+                // circle 3D
+                ["centerCoords3d", {
+                    'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
+                    'adaptor': (item) => new Float32Array(item.centerCoords3d),
+                }],
+                ["rgba", {
+                    'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
+                    'adaptor': (item) => new Float32Array(item.hide === 1 ? [0, 0, 0, 0] : item.rgba)
+                }],
+                ["radius3d", {
+                    'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    'adaptor': (item) => new Float32Array([item.radius])
+                }],
+                ["radius3dsmall", {
+                    'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    'adaptor': (item) => new Float32Array([item.radius - item.padding / 3])
+                }],
+                ["circleDashAngle", {
+                    'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    'adaptor': (item) => new Float32Array([1]),
+                }],
+                ["dashOpacity", {
+                    'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    'adaptor': (item) => new Float32Array([1]),
+                }],
+
+                // circle 2D 
+                ["centerCoords2dflatForPadding", {
+                    'bufferManager': new BufferManager(gl, _circleFlatEdgeCount * 2, { bufferType, initialCapacity }),
+                    'adaptor': (item) => item.centerCoords2dflatForPadding,
+                }],
+                ["centerCoords2dflat", {
+                    'bufferManager': new BufferManager(gl, _circleFlatEdgeCount * 2, { bufferType, initialCapacity }),
+                    'adaptor': (item) => item.centerCoords2dflat,
+                }],
+                ["rgbaMercator", {
+                    'bufferManager': new BufferManager(gl, 4 * _circleFlatEdgeCount, { bufferType, initialCapacity }),
+                    'adaptor': (item) => populateFloat32Array.fillWithListData(_circleFlatEdgeCount, item.hide === 1 ? [0, 0, 0, 0] : item.rgba),
+                }],
+                ["circleDashAngleMercator", {
+                    'bufferManager': new BufferManager(gl, _circleFlatEdgeCount, { bufferType, initialCapacity }),
+                    'adaptor': (item) => populateFloat32Array.fillFloat32Array(_circleFlatEdgeCount, 1),
+                }],
+                ["dashOpacityMercator", {
+                    'bufferManager': new BufferManager(gl, _circleFlatEdgeCount, { bufferType, initialCapacity }),
+                    'adaptor': (item) => populateFloat32Array.fillFloat32Array(_circleFlatEdgeCount, 1),
+                }],
+            ]
+        );
+
+        const obj = function (bufferManagerComp, divisor = 1) {
+            return { 'buffer': bufferManagerComp.bufferManager.buffer, 'stride': 0, 'offset': 0, divisor }
+
+        };
+        this.circle2DVao = this._circleProgram2D.createVAO(
+            ...["centerCoords2dflat", "rgbaMercator", "circleDashAngleMercator", "dashOpacityMercator"].map(key => obj(this.bufferManagersCompMap.get(key)))
+        );
+        this.circle3DVao = this._circleProgram3D.createVAO(
+            ...["centerCoords3d", "radius3d", "rgba", "circleDashAngle", "dashOpacity"].map(key => obj(this.bufferManagersCompMap.get(key)))
+        );
+
+        this.oneDegreePaddingVao = this._padding2dProgram.createVAO(
+            { buffer: this.bufferManagersCompMap.get("centerCoords2dflat").bufferManager.buffer, size: 2, stride: 0, offset: 0 },
+            { buffer: this.bufferManagersCompMap.get("centerCoords2dflatForPadding").bufferManager.buffer, size: 2, stride: 0, offset: 0 },
+            { buffer: this.bufferManagersCompMap.get("rgbaMercator").bufferManager.buffer, size: 4, stride: 0, offset: 0 },
+        );
+
+        // PADDING 
+        // this one needs glue to assosiate rings and their big paddings since the count for center is not fixed
+        this.paddingBufferOrchestrator = new BufferOrchestrator({ capacity: initialCapacity });
+        this.bufferManagersCompMapPadding = new Map(
+            [
+                ["circlePoint", {
+                    'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                    'adaptor': (item) => item.circlePoint,
+                }],
+                ["paddingPoint", {
+                    'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                    'adaptor': (item) => item.paddingPoint,
+                }],
+                ["circlePoint3d", {
+                    'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
+                    'adaptor': (item) => item.circlePoint3d
+                }],
+                ["paddingPoint3d", {
+                    'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
+                    'adaptor': (item) => item.paddingPoint3d
+                }],
+                ["rgba", {
+                    'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
+                    'adaptor': (item) => new Float32Array(item.rgba)
+                }],
+
+                ["dashOpacity", {
+                    'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    'adaptor': (item) => new Float32Array([1]),
+                }],
+                ["dashRatio", {
+                    'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    'adaptor': (item) => new Float32Array([1]),
+                }],
+            ]
+        );
+
+        // this.bigPaddingVAO = this._padding2dProgram.createVAO(
+        //     { buffer: this.bufferManagersCompMapPadding.get("circlePoint").bufferManager.buffer, size: 2, stride: 0, offset: 0 },
+        //     { buffer: this.bufferManagersCompMapPadding.get("paddingPoint").bufferManager.buffer, size: 2, stride: 0, offset: 0 },
+        //     { buffer: this.bufferManagersCompMapPadding.get("rgba").bufferManager.buffer, size: 4, stride: 0, offset: 0 },
+        // );
+
+        this._bigPadding3dFlatVAO = this._bigPadding3dFlatProgram.createVAO(
+            ...["circlePoint", "circlePoint3d", "paddingPoint", "paddingPoint3d", "dashRatio", "dashOpacity", "rgba",].map(key => obj(this.bufferManagersCompMapPadding.get(key)))
+        );
+
+        this._padding3dOneDegreeVao = this._padding3dProgram.createVAO(
+            ...["centerCoords3d", "radius3d", "radius3dsmall", "rgba"].map(key => obj(this.bufferManagersCompMap.get(key)))
+        );
+
+    }
+
+
+    // GLOBE API
+
+    draw3D() {
+        const {
+            globe, gl,
+            _circleProgram2D, _circleProgram3D, _padding2dProgram, _padding3dProgram, _bigPadding3dFlatProgram,
+            circle2DVao, circle3DVao, oneDegreePaddingVao, _padding3dOneDegreeVao, _bigPadding3dFlatVAO,
+            bufferOrchestrator, paddingBufferOrchestrator,
+            _circleFlatEdgeCount, _opacity, _oneDegreePadding } = this;
+        gl.disable(gl.DEPTH_TEST);
+        const is3D = globe.api_GetCurrentGeometry() === 0;
+        // const lod = globe.api_GetCurrentLOD();
+        if (is3D) {
+            _circleProgram3D.draw(circle3DVao, bufferOrchestrator.length, _opacity);
+            if (_oneDegreePadding) _padding3dProgram.draw(_padding3dOneDegreeVao, bufferOrchestrator.length, 360, 1, _opacity);
+        } else {
+            _circleProgram2D.draw(circle2DVao, bufferOrchestrator.length, _circleFlatEdgeCount, _opacity);
+            // _padding2dProgram.draw(bigPaddingVAO, paddingBufferOrchestrator.length, _opacity);
+            if (_oneDegreePadding) _padding2dProgram.draw(oneDegreePaddingVao, bufferOrchestrator.length * _circleFlatEdgeCount, _opacity);
+        }
+        _bigPadding3dFlatProgram.draw(_bigPadding3dFlatVAO, paddingBufferOrchestrator.length, _opacity);
+        gl.enable(gl.DEPTH_TEST);
+    }
+
+    free() {
+        if (this._isFreed) return;
+        const { globe } = this;
+        CircleCache2D.release(globe);
+        CircleCache3D.release(globe);
+        this.textPlugin?.free();
+        // free buffer managers
+        this._isFreed = true;
+    }
+
+
+    // API
+
+    /**
+     * @method updateCentersXY @param { Array < { centerID, x, y } >} items 
+    */
+    updateCentersXY(items) {
+        // Algorithm
+        /**
+         * 1. ask centerRingAccount for existing rings COORDINATE RELATED KEYS
+         * 2. update centers
+         * 3. update buffer orchestators
+         */
+
+        this._ringAccount.updateCentersXY(items);
+        const { globe,
+            bufferOrchestrator, bufferManagersCompMap,
+            paddingBufferOrchestrator, bufferManagersCompMapPadding
+        } = this;
+        for (const { centerID } of items) {
+            const datas = this.__reconstructCentralRings(centerID);
+            // TODO add big paddings when when implemented
+            bufferOrchestrator.updateBulk(datas, bufferManagersCompMap, ["centerCoords3d", "centerCoords2dflat", "centerCoords2dflatForPadding"]);
+            const paddingDatas = this.__reconstructCentralRingsBigPaddings(centerID);
+            paddingBufferOrchestrator.updateBulk(paddingDatas, bufferManagersCompMapPadding, ["circlePoint", "paddingPoint", "circlePoint3d", "paddingPoint3d"]);
+        }
+        this.textPlugin?.updateCentersXY(items);
+
+
+
+        globe.DrawRender();
+    }
+
+    /**
+     * @method insertBulk
+     * @typedef { Array < { ringID, radius, padding } >} rings
+     * @param { Array < centerID: string, x: number, y: number, stepAngle: number, rgba: [4 numbers], rings: rings, hide, textHide } items
+    */
+    insertBulk(items) {
+        // Algorithm
+        /**
+         * 1 ask centerRingAccount for existing rings 
+         *  presizely: TODO
+         * 2. delete all existing keys with buffer orchestators 
+         * 3. insert new centerRings to centerRingAccount
+         * 4. insert new keys with buffer orchestators
+         */
+        const { globe, _ringAccount, bufferOrchestrator, bufferManagersCompMap, paddingBufferOrchestrator, bufferManagersCompMapPadding } = this;
+        // TODO add delete existing for padding
+        for (const item of items) {
+            const existingKeys = _ringAccount.ringKeys(item.centerID);
+            if (existingKeys.length) {
+                bufferOrchestrator.deleteBulk(existingKeys, bufferManagersCompMap);
+            }
+            const paddingKeys = _ringAccount.ringBigPaddingKeys(item.centerID);
+            if (paddingKeys.length) {
+                paddingBufferOrchestrator.deleteBulk(paddingKeys, bufferManagersCompMapPadding);
+            }
+        }
+
+        for (const item of items) {
+            _ringAccount.insertCenter(item);
+            const datas = this.__reconstructCentralRings(item.centerID);
+            bufferOrchestrator.insertBulk(datas, bufferManagersCompMap,);
+            const paddingDatas = this.__reconstructCentralRingsBigPaddings(item.centerID);
+            paddingBufferOrchestrator.insertBulk(paddingDatas, bufferManagersCompMapPadding);
+        }
+
+        this.textPlugin?.insertBulk(items);
+        globe.DrawRender();
+
+    }
+
+
+
+
+    /**
+     * @method updateCentersColor @param { Array < { centerID, rgba: [4 numbers] } >} centerColors
+    */
+    updateCentersColor(centerColors) {
+        // Algorithm
+        /**
+         * 1. ask centerRingAccount for existing rings COLOR KEYS
+         * 2. update centers
+         * 3. update buffer orchestators
+         */
+        this._ringAccount.updateCentersColor(centerColors);
+        const { globe,
+            bufferOrchestrator, bufferManagersCompMap,
+            paddingBufferOrchestrator, bufferManagersCompMapPadding
+        } = this;
+        for (const { centerID } of centerColors) {
+            const datas = this.__reconstructCentralProperties(centerID);
+            bufferOrchestrator.updateBulk(datas, bufferManagersCompMap, ["rgba", "rgbaMercator"]);
+            const paddingDatas = this.__reconstructCentralPaddingProperties(centerID)
+            paddingBufferOrchestrator.updateBulk(paddingDatas, bufferManagersCompMapPadding, ["rgba"]);
+        }
+        globe.DrawRender();
+    }
+
+    /**
+     * 
+     * @method updateCentersHide @param { Array < { centerID, hide, textHide } >} centerHides
+    */
+    updateCentersHide(centerHides) {
+        // Algorithm
+        /**
+         * Simple
+         * 1. update centers
+         * 2. reconstruct data,
+         * 3. update color buffer 
+         * */
+        this._ringAccount.updateCentersHide(centerHides);
+        const { globe,
+            bufferOrchestrator, bufferManagersCompMap,
+            paddingBufferOrchestrator, bufferManagersCompMapPadding
+        } = this;
+
+        for (const { centerID } of centerHides) {
+            const datas = this.__reconstructCentralProperties(centerID);
+            bufferOrchestrator.updateBulk(datas, bufferManagersCompMap, ["rgba", "rgbaMercator"]);
+            const paddingDatas = this.__reconstructCentralPaddingProperties(centerID)
+            paddingBufferOrchestrator.updateBulk(paddingDatas, bufferManagersCompMapPadding, ["rgba"]);
+        }
+
+        this.textPlugin?.updateCentersHide(centerHides);
+        globe.DrawRender();
+        /**
+         * Complicated
+         * 1. ask centerRingAccount for existing rings HIDE KEYS
+         * 2. delete from buffer orchestators
+         * 3. mark centers as hidden
+         */
+
+    }
+
+    /**
+     * @method removeCenters @param { Array < { centerID } >} centerIDs
+    */
+    removeCenters(centerIDs) {
+        // Algorithm
+        /**
+         * 1. ask centerRingAccount for existing rings
+         * 2. delete from buffer orchestators
+         * 3. delete from centerRingAccount
+        */
+        const { globe,
+            bufferOrchestrator, bufferManagersCompMap,
+            paddingBufferOrchestrator, bufferManagersCompMapPadding,
+            _ringAccount } = this;
+        for (const centerID of centerIDs) {
+            const existingKeys = _ringAccount.ringKeys(centerID);
+            if (existingKeys.length) {
+                bufferOrchestrator.deleteBulk(existingKeys, bufferManagersCompMap);
+            }
+        }
+
+        for (const centerID of centerIDs) {
+            const paddingKeys = _ringAccount.ringBigPaddingKeys(centerID);
+            if (paddingKeys.length) {
+                paddingBufferOrchestrator.deleteBulk(paddingKeys, bufferManagersCompMapPadding);
+            }
+        }
+        this.textPlugin?.removeCenters(centerIDs);
+        globe.DrawRender();
+    }
+
+    /**
+     * @method setOpacity @param { number } opacity
+    */
+    setOpacity(opacity) {
+        console.log("opacity", opacity, typeof opacity);
+        if (typeof opacity !== "number" || opacity < 0 || opacity > 1) throw new Error("Invalid opacity value");
+        this._opacity = opacity;
+        this.textPlugin?.setOpacity(opacity);
+        this.globe.DrawRender();
+    }
+
+
+    /**
+     * @method setOneDegreePaddingOn //  performance consuming, might be removed
+    */
+    setOneDegreePaddingOn(isOneDegreePaddingOn) {
+        // TODO
+        if (this._oneDegreePadding === isOneDegreePaddingOn) return;
+        this._oneDegreePadding = isOneDegreePaddingOn;
+
+        // Complicated
+        // if (isOneDegreePaddingOn) {
+        //     // fill the Coordinate Buffer for 1 degree Padding
+        //     // Use orchastrator to create data for all rings
+
+        // } else {
+        //     // empty the Coordinate Buffer for 1 degree Padding
+        // }
+    }
+
+    __reconstructCentralRingsBigPaddings(centerID) {
+        const { globe, _circleFlatEdgeCount } = this;
+        const centerItem = this._ringAccount.getCenter(centerID);
+        if (centerItem === undefined) throw new Error("Center not found");
+        const findPointByPolar = globe.Math.FindPointByPolar;
+        const { x, y, stepAngle, rgba, rings, hide = 0, textHide = 0 } = centerItem;
+        const result = [];
+        const color = hide === 1 ? new Float32Array([0, 0, 0, 0]) : new Float32Array(rgba)
+        for (const { ringID, radius, padding } of rings) {
+            let azimuthAngle = 0;
+            while (azimuthAngle < 360) {
+                const circlePoint = globe.Math.FindPointByPolar(x, y, radius, azimuthAngle); // long lat
+                const paddingPoint = globe.Math.FindPointByPolar(x, y, radius - padding, azimuthAngle); // long lat
+                result.push({
+                    key: ringBigPaddingKeyMethod(centerID, ringID, azimuthAngle),
+                    circlePoint: new Float32Array(globe.api_GetMercator2DPoint(circlePoint.long, circlePoint.lat)),
+                    paddingPoint: new Float32Array(globe.api_GetMercator2DPoint(paddingPoint.long, paddingPoint.lat)),
+                    circlePoint3d: new Float32Array(globe.api_GetCartesian3DPoint(circlePoint.long, circlePoint.lat, 0, 0)),
+                    paddingPoint3d: new Float32Array(globe.api_GetCartesian3DPoint(paddingPoint.long, paddingPoint.lat, 0, 0)),
+                    rgba: color,
+                    hide,
+                    textHide
+                });
+                azimuthAngle += stepAngle;
+
+            }
+        }
+        return result;
+    }
+
+    __reconstructCentralRings(centerID) {
+        const { globe, _circleFlatEdgeCount } = this;
+        const centerItem = this._ringAccount.getCenter(centerID);
+        if (centerItem === undefined) throw new Error("Center not found");
+
+        const { x, y, stepAngle, rgba, rings, hide = 0, textHide = 0 } = centerItem;
+
+        const long = x;
+        const lat = y;
+        const centerCoords3d = globe.api_GetCartesian3DPoint(long, lat, 0, 0);
+
+        const result = [];
+
+        for (const { ringID, radius, padding } of rings) {
+            const key = ringKeyMethod(centerID, ringID);
+            const centerCoords2dflat = centerCoords2dflatDataCreatorWithRadius(globe, x, y, radius, { edgeCount: _circleFlatEdgeCount });
+            const centerCoords2dflatForPadding = centerCoords2dflatDataCreatorWithRadius(globe, x, y, radius - padding / 3, { edgeCount: _circleFlatEdgeCount });
+            result.push({
+                key,
+                centerCoords3d,
+                centerCoords2dflat,
+                radius,
+                padding,
+                rgba,
+                centerCoords2dflatForPadding,
+                hide,
+                textHide
+            });
+        }
+        return result;
+
+    }
+
+    __reconstructCentralPaddingProperties(centerID) {
+        const centerItem = this._ringAccount.getCenter(centerID);
+        if (centerItem === undefined) throw new Error("Center not found");
+        const { x, y, stepAngle, rgba, rings, hide = 0, textHide = 0 } = centerItem;
+        const result = [];
+        for (const { ringID, } of rings) {
+            let angle = 0;
+            while (angle < 360) {
+                result.push({
+                    key: ringBigPaddingKeyMethod(centerID, ringID, angle),
+                    rgba: hide === 1 ? new Float32Array([0, 0, 0, 0]) : rgba,
+                    textHide
+                });
+                angle += stepAngle;
+            }
+        }
+        return result;
+    }
+
+    __reconstructCentralProperties(centerID) {
+        const centerItem = this._ringAccount.getCenter(centerID);
+        if (centerItem === undefined) throw new Error("Center not found");
+        const { rgba, rings, hide = 0, textHide = 0 } = centerItem;
+        const result = [];
+        for (const { ringID } of rings) {
+            const key = ringKeyMethod(centerID, ringID);
+            result.push({
+                key,
+                rgba: hide === 1 ? new Float32Array([0, 0, 0, 0]) : rgba,
+                textHide
+            });
+        }
+        return result;
+    }
+}
+
+
+export { RangeRings };