@pirireis/webglobeplugins 0.15.1-alpha → 0.15.2-3.alpha

package/semiplugins/shape-on-terrain/circle-plugin.js

@@ -9,6 +9,7 @@ import { globe3Dcoordinates, globe2Dcoordinates } from "../../Math/methods";
 import { StaticDynamicStrategy, StaticDynamicState } from "../../util/build-strategy/static-dynamic";
 import { WORLD_RADIUS_3D, WORLD_RADIUS_MERCATOR } from "../../Math/constants";
 import { opacityCheck } from "../../util/check/typecheck";
+import { FrameCounterTrigger } from "../../util/frame-counter-trigger";
 const ACTIVATE_DYNAMIC_STRATEGY_AT_LEVEL = 8;
 const CIRCLE_POINTS_COUNT_HALF = 65; // Half of the points plus one for the reflection
 const CIRCLE_POINTS_COUNT = CIRCLE_POINTS_COUNT_HALF * 2 - 1; // Number of points to approximate the circle
@@ -58,45 +59,47 @@ export class CircleOnTerrainPlugin {
     globe = null;
     gl = null;
     lineProgram = null;
-    bufferManagerMap = new Map();
+    bufferManagersMap = new Map();
     bufferOrchestrator = new BufferOrchestrator();
     circleMap = new Map();
     _cameraUniformBlock = null;
-    _isFree = false;
+    _freed = false;
     _circleUBOHandler = null;
     _opacity = 1;
     _vao = null;
     _dobuild = true; // This is used to trigger the build of circles when the camera position changes.
+    _frameCounterTrigger = null;
     _staticDynamicStrategy = null;
-    _styleOptions = {
+    _options = {
         variativeColorsOn: false,
         defaultColor: [0.1, 0.1, 0.1, 1], // Default color in RGBA format
-        defaultHeightFromGroundIn3D: 30.0
+        defaultHeightFromGroundIn3D: 30.0,
+        isMSL: false
     };
-    constructor(id, styleOptions = {}) {
+    _textDataPreAdaptor = undefined;
+    constructor(id, styleOptions = null) {
         this.id = id;
-        this._styleOptions = { ...this._styleOptions, ...styleOptions };
-        this._styleOptions.defaultColor = new Float32Array(this._styleOptions.defaultColor);
+        if (styleOptions) {
+            this._options = { ...this._options, ...styleOptions };
+        }
     }
     init(globe, gl) {
         this.globe = globe;
         this.gl = gl;
         // Initialize the program cache for line strip rendering.
-        this._staticDynamicStrategy = new StaticDynamicStrategy(globe, ACTIVATE_DYNAMIC_STRATEGY_AT_LEVEL);
         this.lineProgram = LineStripProgramCache.get(globe);
-        // const g3D = globe3Dcoordinates(globe, 30);
         const g2D = globe2Dcoordinates(globe);
         // Initialize with a reasonable initial capacity to prevent buffer size issues
         const initialCapacity = 100; // Start with capacity for 100 circles
-        this.bufferManagerMap.set("position3d", {
+        this.bufferManagersMap.set("position3d", {
             bufferManager: new BufferManager(gl, (CIRCLE_POINTS_COUNT + 1) * 3, { initialCapacity }), // plus 1 is for butting linestrips
             adaptor: (item) => {
-                const { longLatArr, height = this._styleOptions.defaultHeightFromGroundIn3D } = item;
-                const result = globe3Dcoordinates(globe, height)(longLatArr, { paddingCount: 1, paddingValue: NaN });
+                const { longLatArr, height = this._options.defaultHeightFromGroundIn3D, msl = this._options.isMSL } = item;
+                const result = globe3Dcoordinates(globe, longLatArr, height, msl, { paddingCount: 1, paddingValue: NaN });
                 return result;
             }
         });
-        this.bufferManagerMap.set("position2d", {
+        this.bufferManagersMap.set("position2d", {
             bufferManager: new BufferManager(gl, (CIRCLE_POINTS_COUNT + 1) * 2, { initialCapacity }),
             adaptor: (item) => {
                 const { longLatArr } = item;
@@ -104,8 +107,8 @@ export class CircleOnTerrainPlugin {
                 return result;
             }
         });
-        if (this._styleOptions.variativeColorsOn) {
-            this.bufferManagerMap.set("color", {
+        if (this._options.variativeColorsOn) {
+            this.bufferManagersMap.set("color", {
                 bufferManager: new BufferManager(gl, (CIRCLE_POINTS_COUNT + 1) * 4, { initialCapacity }),
                 adaptor: (item) => {
                     if (item.color) {
@@ -115,50 +118,109 @@ export class CircleOnTerrainPlugin {
                     }
                     else {
                         for (let i = 0; i < CIRCLE_POINTS_COUNT; i++) {
-                            _colorArray.set(this._styleOptions.defaultColor, i * 4);
+                            _colorArray.set(this._options.defaultColor, i * 4);
                         }
                     }
                     return _colorArray;
                 }
             });
         }
-        this._vao = this.lineProgram.createVAO(createBufferAndReadInfo(this.bufferManagerMap.get("position3d")?.bufferManager.buffer), createBufferAndReadInfo(this.bufferManagerMap.get("position2d")?.bufferManager.buffer), this._styleOptions.variativeColorsOn ?
-            createBufferAndReadInfo(this.bufferManagerMap.get("color")?.bufferManager.buffer) : null);
+        this._vao = this.lineProgram.createVAO(createBufferAndReadInfo(this.bufferManagersMap.get("position3d")?.bufferManager.buffer), createBufferAndReadInfo(this.bufferManagersMap.get("position2d")?.bufferManager.buffer), this._options.variativeColorsOn ?
+            createBufferAndReadInfo(this.bufferManagersMap.get("color")?.bufferManager.buffer) : null);
         this._circleUBOHandler = this.lineProgram.createUBO();
+        this.setDefaultColor(this._options.defaultColor);
         this._cameraUniformBlock = CameraUniformBlockTotemCache.get(globe);
+        this._staticDynamicStrategy = new StaticDynamicStrategy(globe, ACTIVATE_DYNAMIC_STRATEGY_AT_LEVEL, () => {
+            this.__buildStaticCircles();
+        });
+        this._frameCounterTrigger = new FrameCounterTrigger(globe, 15, 1000, (globeChanges) => {
+            if (this._freed)
+                return;
+            this._buildCircles();
+        });
+    }
+    increaseSpace(amount) {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot increase space");
+            return;
+        }
+        if (this.globe === null) {
+            console.warn("Globe is not initialized.");
+            return;
+        }
+        if (typeof amount !== "number" || amount <= 0) {
+            console.warn("Invalid amount, must be a positive number");
+            return;
+        }
+        this.bufferOrchestrator.ensureSpace(amount, this.bufferManagersMap);
     }
     insertBulk(circles) {
-        if (this._isFree)
+        if (this._freed)
             return;
         if (!this.globe || !this.gl || !this.lineProgram || !this.bufferOrchestrator ||
-            !this.bufferManagerMap || !this._vao || !this._circleUBOHandler) {
+            !this.bufferManagersMap || !this._vao || !this._circleUBOHandler) {
             throw new Error("Plugin not initialized properly");
         }
-        //
-        const fillStaticKeys = [];
+        const keys = [];
+        let newItemCount = 0;
         for (const circleInput of circles) {
             if (!circleInput.key || !circleInput.center || !circleInput.radius) {
                 console.warn(`CircleOnTerrainPlugin: Circle input is missing required properties: ${circleInput.radius} or ${circleInput.center} or ${circleInput.key}`);
                 continue;
             }
-            fillStaticKeys.push(circleInput.key);
+            if (circleInput.radius <= 0) {
+                console.warn(`CircleOnTerrainPlugin: Circle ${circleInput.key} has non-positive radius ${circleInput.radius}. Skipping.`);
+                continue;
+            }
+            keys.push(circleInput.key);
+            if (!this.circleMap.has(circleInput.key)) {
+                newItemCount++;
+            }
             const circleForAzimuthCalc = CircleMethods.createCircleClosestAzimuthAngleProperties(circleInput);
             this.circleMap.set(circleInput.key, [circleInput, circleForAzimuthCalc]);
-            if (this._staticDynamicStrategy?.getState() !== StaticDynamicState.DYNAMIC) {
-                fillStaticKeys.push(circleInput.key);
-            }
         }
-        this.__buildStaticCircles(fillStaticKeys);
+        this.bufferOrchestrator.ensureSpace(newItemCount, this.bufferManagersMap);
+        this._buildCircles(keys);
+        if (this._options.variativeColorsOn) {
+            this.__fillColor(keys);
+        }
         this.globe.DrawRender();
     }
+    updateColors(keyColorCouples, drawRender = true) {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot increase space");
+            return;
+        }
+        if (this.globe === null) {
+            console.warn("Globe is not initialized.");
+            return;
+        }
+        if (this._options.variativeColorsOn === false) {
+            console.warn("VariativeColors are not enabled");
+            return;
+        }
+        for (const { key, color } of keyColorCouples) {
+            const [circleInput] = this.circleMap.get(key) || [];
+            if (circleInput) {
+                circleInput.color = color;
+                this.__fillColor([key]);
+            }
+            else {
+                console.warn(`Circle key ${key} not found in circleMap.`);
+            }
+        }
+        if (drawRender) {
+            this.globe.DrawRender();
+        }
+    }
     deleteBulk(keys) {
-        if (this._isFree)
+        if (this._freed)
             return;
         if (!this.globe || !this.gl || !this.lineProgram || !this.bufferOrchestrator ||
-            !this.bufferManagerMap || !this._vao || !this._circleUBOHandler) {
+            !this.bufferManagersMap || !this._vao || !this._circleUBOHandler) {
             throw new Error("Plugin not initialized properly");
         }
-        this.bufferOrchestrator.deleteBulk(keys, this.bufferManagerMap);
+        this.bufferOrchestrator.deleteBulk(keys, this.bufferManagersMap);
         for (const key of keys) {
             if (this.circleMap.has(key)) {
                 this.circleMap.delete(key);
@@ -168,47 +230,104 @@ export class CircleOnTerrainPlugin {
             }
         }
     }
-    setPluginOpacity(opacity) {
+    setPluginOpacity(opacity, drawRender = false) {
         if (!this.globe || !this.gl) {
             console.warn("Globe or WebGL context is not initialized.");
             return;
         }
         opacityCheck(opacity);
         this._opacity = opacity;
-        this.globe.DrawRender();
+        if (drawRender) {
+            this.globe.DrawRender();
+        }
     }
-    setDefaultColor(color) {
+    setElevationMode(mode) {
+        switch (mode) {
+            case "msl":
+                this._options.isMSL = true;
+                break;
+            case "agl":
+                this._options.isMSL = false;
+                break;
+            default:
+                throw new Error(`Unknown elevation mode: ${mode}`);
+        }
+        this._buildCircles();
+        this.globe?.DrawRender();
+    }
+    setDefaultColor(color, drawRender = false) {
         if (!this.globe || !this.gl) {
             console.warn("Globe or WebGL context is not initialized.");
             return;
         }
         this._circleUBOHandler?.updateSingle("u_color", new Float32Array(color));
+        if (drawRender) {
+            this.globe.DrawRender();
+        }
+    }
+    updateCoordinates(items) {
+        if (this._freed) {
+            console.warn("CircleOnTerrainPlugin is freed, cannot update coordinates");
+            return;
+        }
+        if (this.globe === null) {
+            console.warn("Globe is not initialized, cannot update coordinates");
+            return;
+        }
+        const updateKeys = [];
+        for (const item of items) {
+            const { key, center, radius } = item;
+            const [circleInput] = this.circleMap.get(key) || [];
+            if (circleInput) {
+                circleInput.center = center;
+                circleInput.radius = radius;
+                updateKeys.push(key);
+            }
+            else {
+                console.warn(`Circle key ${key} not found in circleMap.`);
+                continue;
+            }
+        }
+        this._buildCircles(updateKeys);
         this.globe.DrawRender();
     }
     // IMPLICIT METHODS
-    _buildCircles() {
+    __fillColor(subSetIDs) {
+        if (!this._options.variativeColorsOn)
+            return;
+        const wrapper = [null];
+        for (const key of subSetIDs) {
+            const [circleInput, circleForAzimuthCalc] = this.circleMap.get(key) || [];
+            if (circleInput) {
+                wrapper[0] = circleInput;
+                this.bufferOrchestrator.insertBulk(wrapper, this.bufferManagersMap, ["color"]);
+            }
+        }
+    }
+    _buildCircles(subSetIDs = null) {
         // @ts-ignore
         this._staticDynamicStrategy?.updateState();
         const state = this._staticDynamicStrategy?.getState();
-        if (state === StaticDynamicState.TO_STATIC) {
-            this.__buildStaticCircles();
+        if (state === StaticDynamicState.DYNAMIC) {
+            this.__buildDynamicCircles(subSetIDs);
         }
-        else if (state === StaticDynamicState.DYNAMIC) {
-            this.__buildCircles();
+        else if (subSetIDs || state === StaticDynamicState.TO_STATIC) {
+            this.__buildStaticCircles(subSetIDs);
         }
     }
-    __buildCircles() {
-        const { globe, gl, _cameraUniformBlock, lineProgram, bufferOrchestrator, bufferManagerMap, circleMap } = this;
+    __buildDynamicCircles(subSetIDs = null) {
+        const { globe, gl, _cameraUniformBlock, lineProgram, bufferOrchestrator, bufferManagersMap, circleMap } = this;
         if (!globe || !gl || !_cameraUniformBlock || !lineProgram ||
-            !bufferOrchestrator || !bufferManagerMap || !circleMap)
+            !bufferOrchestrator || !bufferManagersMap || !circleMap)
             throw new Error("Plugin not initialized properly");
         // unoptimized.. resets all circles.
-        // bufferOrchestrator.resetWithCapacity(bufferManagerMap, circleMap.size);
+        // bufferOrchestrator.resetWithCapacity(bufferManagersMap, circleMap.size);
         // Prepare the data for the buffers
         const data = [{
                 key: "",
                 longLatArr: [],
-                height: null
+                height: null,
+                msl: null
             }];
         const lookAtPosition = _cameraUniformBlock.getLookAtVector();
         const cameraPosition = _cameraUniformBlock.getNormalizedCameraVector();
@@ -217,8 +336,16 @@ export class CircleOnTerrainPlugin {
         vec3.normalize(cameraPosition, cameraPosition);
         const currentLOD = globe.api_GetCurrentLODWithDecimal();
         const circlePointsLongLat = new Float64Array((CIRCLE_POINTS_COUNT) * 2);
-        for (const [key, circle] of this.circleMap.entries()) {
-            const [{ radius, center, height = null }, circleForAzimuthCalc] = circle;
+        let keys;
+        if (!subSetIDs || subSetIDs.length === 0) {
+            keys = Array.from(this.circleMap.keys());
+            // bufferOrchestrator.resetWithCapacity(bufferManagersMap, circleMap.size);
+        }
+        else {
+            keys = subSetIDs;
+        }
+        for (const key of keys) {
+            const [{ radius, center, height = null, msl = null }, circleForAzimuthCalc] = this.circleMap.get(key);
             const closestAzimuthAngle = CircleMethods.closestAzimuthAngle(circleForAzimuthCalc, cameraPosition);
             const stregthLevel = defineStregthLevel(currentLOD, radius);
             if (stregthLevel < 0) {
@@ -230,69 +357,61 @@ export class CircleOnTerrainPlugin {
             data[0].key = key;
             data[0].longLatArr = circlePointsLongLat;
             data[0].height = height;
+            data[0].msl = msl;
             // Add to buffer orchestrator
-            this.bufferOrchestrator.insertBulk(data, bufferManagerMap, ["position3d", "position2d"]);
+            this.bufferOrchestrator.insertBulk(data, bufferManagersMap, [
+                this.globe?.api_GetCurrentGeometry() === 0 ? "position3d" : "position2d",
+            ]);
         }
     }
     // this will be used to build static circles, which are not affected by camera position or LOD.
     // LOD < 8 or something
     __buildStaticCircles(subSetIDs = null) {
-        const { globe, gl, _cameraUniformBlock, lineProgram, bufferOrchestrator, bufferManagerMap, circleMap } = this;
+        const { globe, gl, _cameraUniformBlock, lineProgram, bufferOrchestrator, bufferManagersMap, circleMap } = this;
         if (!globe || !gl || !_cameraUniformBlock || !lineProgram ||
-            !bufferOrchestrator || !bufferManagerMap || !circleMap)
+            !bufferOrchestrator || !bufferManagersMap || !circleMap)
             throw new Error("Plugin not initialized properly");
-        const data = [{
-                key: "",
-                longLatArr: [],
-                height: null,
-                color: [1, 1, 1, 1]
-            }];
+        const datas = [];
         // ensure buffer orchestrotrator have enough capacity
         // all circles are build with even sampling, AttractionLevel = 0
         const templateAngles = AnglesStash[0];
         const zeroRotation = 0;
+        let keys;
         if (!subSetIDs || subSetIDs.length === 0) {
-            const circlePointsLongLat = new Float64Array((CIRCLE_POINTS_COUNT) * 2);
-            bufferOrchestrator.resetWithCapacity(bufferManagerMap, circleMap.size);
-            for (const [key, circle] of this.circleMap.entries()) {
-                const [{ radius, center, height = null, color = null }, _] = circle;
-                CircleCDF.globeFindPointByPolarHalfCircle(circlePointsLongLat, globe, center[0], center[1], radius, zeroRotation, templateAngles);
-                data[0].key = key;
-                data[0].longLatArr = circlePointsLongLat;
-                data[0].height = height;
-                data[0].color = color || this._styleOptions.defaultColor;
-                this.bufferOrchestrator.insertBulk(data, bufferManagerMap);
-            }
+            keys = Array.from(this.circleMap.keys());
+            // bufferOrchestrator.resetWithCapacity(bufferManagersMap, circleMap.size);
         }
         else {
-            // This does check the size beforehand.
-            // subset is probably is used to insert a single item or,
-            // rebuild of existing items which passed from rbushTree or similar indexed search. 
-            // therefore, it is not necessary to check for new items and extend capacity 
-            for (let key of subSetIDs) {
-                if (!this.circleMap.has(key)) {
-                    console.warn(`CircleOnTerrainPlugin: Circle ${key} not found in circleMap.`);
-                    continue;
-                }
-                const [{ radius, center, height = null, color = null }, _] = this.circleMap.get(key);
-                const circlePointsLongLat = new Float64Array((CIRCLE_POINTS_COUNT) * 2);
-                CircleCDF.globeFindPointByPolarHalfCircle(circlePointsLongLat, globe, center[0], center[1], radius, zeroRotation, templateAngles);
-                data[0].key = key;
-                data[0].longLatArr = circlePointsLongLat;
-                data[0].height = height;
-                data[0].color = color || this._styleOptions.defaultColor;
-                this.bufferOrchestrator.insertBulk(data, bufferManagerMap);
+            keys = subSetIDs;
+        }
+        for (let key of keys) {
+            if (!this.circleMap.has(key)) {
+                console.warn(`CircleOnTerrainPlugin: Circle ${key} not found in circleMap.`);
+                continue;
             }
+            const [{ radius, center, height = null, color = null, msl = undefined }, _] = this.circleMap.get(key);
+            const circlePointsLongLat = new Float64Array((CIRCLE_POINTS_COUNT) * 2);
+            CircleCDF.globeFindPointByPolarHalfCircle(circlePointsLongLat, globe, center[0], center[1], radius, zeroRotation, templateAngles);
+            datas.push({
+                key,
+                longLatArr: circlePointsLongLat,
+                height,
+                color: color || this._options.defaultColor,
+                msl
+            });
         }
+        this.bufferOrchestrator.insertBulk(datas, bufferManagersMap, [this.globe?.api_GetCurrentGeometry() === 0 ? "position3d" : "position2d"]);
     }
     // GLOBE API INTERFACE
     draw3D() {
-        const { _isFree, globe, gl, lineProgram, bufferOrchestrator, bufferManagerMap, _vao, _circleUBOHandler } = this;
-        if (_isFree || !globe || !gl || !lineProgram || !bufferOrchestrator ||
-            !bufferManagerMap || !_vao || !_circleUBOHandler) {
+        const { _freed, globe, gl, lineProgram, bufferOrchestrator, bufferManagersMap, _vao, _circleUBOHandler } = this;
+        if (_freed || !globe || !gl || !lineProgram || !bufferOrchestrator ||
+            !bufferManagersMap || !_vao || !_circleUBOHandler) {
             return;
         }
-        this._buildCircles();
+        // if (globe.api_IsScreenMoving())
+        this._frameCounterTrigger?.trigger();
+        // this._buildCircles();
         const drawOptions = {
             drawRange: {
                 first: 0,
@@ -304,18 +423,18 @@ export class CircleOnTerrainPlugin {
         gl.enable(gl.DEPTH_TEST);
     }
     free() {
-        if (this._isFree)
+        if (this._freed)
             return;
-        this._isFree = true;
+        this._freed = true;
         if (this.lineProgram) {
             LineStripProgramCache.release(this.lineProgram);
             this.lineProgram = null;
         }
         this.circleMap.clear();
-        this.bufferManagerMap.forEach(({ bufferManager }) => {
+        this.bufferManagersMap.forEach(({ bufferManager }) => {
             bufferManager.free();
         });
-        this.bufferManagerMap.clear();
+        this.bufferManagersMap.clear();
         CameraUniformBlockTotemCache.release(this.globe);
     }
 }