@pirireis/webglobeplugins 0.15.22-alpha → 0.15.24

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pirireis/webglobeplugins",
-    "version": "0.15.22-alpha",
+    "version": "0.15.24",
     "main": "index.js",
     "author": "Toprak Nihat Deniz Ozturk",
     "license": "MIT",

package/point-tracks/plugin.js

@@ -14,7 +14,7 @@ const _0vec3 = /* @__PURE__ */ [0, 0, 0];
  * @typedef {Array<Point>, rgba, trackID} Track
  */
 class PointTracksPlugin {
-    constructor(id, { pointSize = 2, hoveredPointSize = 4, selectionPointFilling = 4, opacity = 1.0, objectStoreExtraParameters = ["long", "lat", "height"], initialCapacity = 10000000 } = {}) {
+    constructor(id, { pointSize = 2, hoveredPointSize = 4, selectionPointFilling = 4, opacity = 1.0, objectStoreExtraParameters = ["long", "lat", "height"], initialCapacity = 1000 } = {}) {
         this.id = id;
         this._isFreed = false;
         this._pointProgram = null;
@@ -25,7 +25,7 @@ class PointTracksPlugin {
         this._selectedID = -1;
         this._selectedObj = null;
         this._tracksToPointsMap = new Map(); // one to many
-        this._opacity = opacity;
+        this._opacity = opacity ? opacity : 1.0;
         this.program = null;
         this._lastWH = { w: 0, h: 0 };
         this._focusParams = { on: false, length: 0, elementBuffer: null, trackIDs: [] };
@@ -34,11 +34,11 @@ class PointTracksPlugin {
             selectionPointFilling: selectionPointFilling ? selectionPointFilling : 4,
             hoveredPointSize: hoveredPointSize ? hoveredPointSize : 4
         };
-        this._objectStoreExtraParameters = objectStoreExtraParameters;
+        this._objectStoreExtraParameters = objectStoreExtraParameters ? objectStoreExtraParameters : [];
         this._objectStoreExtraParametersFiltered = objectStoreExtraParameters.filter(param => {
             return !["long", "lat", "height", "ID", "trackID"].includes(param);
         });
-        this._bufferOrchestrator = new BufferOrchestrator({ capacity: initialCapacity });
+        this._bufferOrchestrator = new BufferOrchestrator({ capacity: initialCapacity ? initialCapacity : 1000 });
     }
     init(globe, gl) {
         this.globe = globe;

package/programs/totems/canvas-webglobe-info.js

@@ -1,13 +1,13 @@
 import { globeProgramCache } from "../programcache";
-export const WebGlobeInfoUniformBlockString = `
-layout(std140) uniform WebGlobeInfo {
-    vec2 canvas_resolution;
-    vec2 mouse_radian_long_lat;
-    vec2 mouse_pixel_xy;
-    float north_angle;
-    float world_tilt;
-    float earth_distance;
-}; 
+export const WebGlobeInfoUniformBlockString = `
+layout(std140) uniform WebGlobeInfo {
+    vec2 canvas_resolution;
+    vec2 mouse_radian_long_lat;
+    vec2 mouse_pixel_xy;
+    float north_angle;
+    float world_tilt;
+    float earth_distance;
+}; 
 `;
 export default class CanvasWebGlobeInfo {
     id;

package/programs/totems/globe-changes.js

@@ -12,11 +12,12 @@ export class GlobeChangeObserver {
     };
     lastElevationCoefficient = NaN;
     changes = {
-        geometryChanged: false,
-        lookChanged: false,
-        lodChanged: false,
-        worldWHChanged: false,
-        elevationCoefficientChanged: false
+        geometry: false,
+        look: false,
+        lod: false,
+        lod2DWheel: false,
+        elevationScale: false,
+        screenMoved: false
     };
     constructor(globe) {
         this.globe = globe;
@@ -27,24 +28,30 @@ export class GlobeChangeObserver {
         this.lastElevationCoefficient = globe.api_GetZScale();
     }
     checkChanges() {
-        const currentGeometry = this.globe.api_GetCurrentGeometry();
-        const currentLook = this.globe.api_GetCurrentLookInfo();
-        const currentLOD = this.globe.api_GetCurrentLODWithDecimal();
-        const currentWorldWH = this.globe.api_GetCurrentWorldWH();
-        this.changes.geometryChanged = (this.lastGeometry !== currentGeometry);
-        this.changes.lookChanged = (this.lastLook.CenterLong !== currentLook.CenterLong ||
+        const globe = this.globe;
+        const currentGeometry = globe.api_GetCurrentGeometry();
+        const currentLook = globe.api_GetCurrentLookInfo();
+        const currentLOD = globe.api_GetCurrentLODWithDecimal();
+        const currentWorldWH = globe.api_GetCurrentWorldWH();
+        this.changes.geometry = (this.lastGeometry !== currentGeometry);
+        this.changes.look = (this.lastLook.CenterLong !== currentLook.CenterLong ||
             this.lastLook.CenterLat !== currentLook.CenterLat ||
             this.lastLook.Distance !== currentLook.Distance ||
             this.lastLook.Tilt !== currentLook.Tilt ||
-            this.lastLook.NorthAng !== currentLook.NorthAng);
-        this.changes.lodChanged = (this.lastLOD !== currentLOD);
-        this.changes.worldWHChanged = (this.lastWorldWH.width !== currentWorldWH.width ||
+            this.lastLook.NorthAng !== currentLook.NorthAng ||
+            this.lastWorldWH.width !== currentWorldWH.width ||
             this.lastWorldWH.height !== currentWorldWH.height);
+        this.changes.lod = (this.lastLOD !== currentLOD);
+        this.changes.lod2DWheel = (!globe.api_IsScreenMoving() && this.changes.lod);
         // Update last known states
         this.lastGeometry = currentGeometry;
         this.lastLook = currentLook;
         this.lastLOD = currentLOD;
         this.lastWorldWH = currentWorldWH;
+        this.changes.screenMoved = (this.changes.geometry ||
+            this.changes.look ||
+            this.changes.lod ||
+            this.changes.lod2DWheel);
     }
     getChanges() {
         return this.changes;

package/range-tools-on-terrain/bearing-line/plugin.js

@@ -435,10 +435,8 @@ export class BearingLinePlugin {
             this.linePlugin.draw3D();
             this.linePluginBL.draw3D();
         }
-        if (this.drawOptions.drawAngleRing) {
-            for (const textWriter of this._textWritersMap.values()) {
-                textWriter.draw();
-            }
+        for (const textWriter of this._textWritersMap.values()) {
+            textWriter.draw();
         }
     }
     free() {

package/range-tools-on-terrain/range-ring/adapters.js

@@ -7,10 +7,10 @@
 //         altitude: rangeRing.altitude,
 //     };
 // }
-const keyAdapter = (centerID, rangeID) => {
+export const keyAdapter = (centerID, rangeID) => {
     return `${centerID}-${rangeID}`;
 };
-export const allKeysAdapter = (rangeRing) => {
+export const allCircleKeysAdapter = (rangeRing) => {
     const result = new Array(rangeRing.rings.length);
     for (let i = 0; i < rangeRing.rings.length; i++) {
         result[i] = keyAdapter(rangeRing.centerID, rangeRing.rings[i].ringID);
@@ -56,20 +56,36 @@ export const rangeRingToArcInputAdapter = (globe, rangeRingInput) => {
     }
     return result;
 };
+export function createColorRatios(color, stepAngle, colorFade = 0.4) {
+    const angleCount = Math.ceil(360 / stepAngle) * 2;
+    let angleLeft = 360;
+    const result = new Array(angleCount);
+    for (let i = 0; i < angleCount; i++) {
+        const currentAngle = Math.min(stepAngle, angleLeft);
+        angleLeft -= currentAngle;
+        result[i * 2] = {
+            color: [0, 0, 0, 0],
+            ratio: 1,
+        };
+        const colorRatio = {
+            // color: i % 2 === 0 ? color : [color[0] * colorFade, color[1] * colorFade, color[2] * colorFade, color[3]] as Color,
+            color: i % 2 === 0 ? color : [1 - color[0] * colorFade, 1 - color[1] * colorFade, 1 - color[2] * colorFade, color[3]],
+            ratio: currentAngle - 1
+        };
+        result[i * 2 + 1] = colorRatio;
+    }
+    return result;
+}
 export const padding1DegreeInputAdapter = (bearingLine) => {
-    const { long, lat, rgba, altitude = 0, rings } = bearingLine;
+    const { long, lat, rgba, altitude = 0, rings, stepAngle } = bearingLine;
     const result = new Array(rings.length);
     for (let i = 0; i < rings.length; i++) {
         const ring = rings[i];
         result[i] = {
             key: keyAdapter(bearingLine.centerID, ring.ringID),
             center: [long, lat],
-            outerRadius: ring.radius,
-            colorsRatios: [{
-                    color: rgba,
-                    ratio: 360,
-                }
-            ],
+            radius: ring.radius,
+            colorsRatios: createColorRatios(rgba, stepAngle, 0.5),
             heightFromGroundIn3D: altitude,
         };
     }

package/range-tools-on-terrain/range-ring/plugin.js

@@ -1,5 +1,18 @@
 import { CircleOnTerrainPlugin } from "../../semiplugins/shape-on-terrain/circle-plugin";
 import { ArcOnTerrainPlugin } from "../../semiplugins/shape-on-terrain/arc-plugin";
+import { Padding1DegreePlugin } from '../../semiplugins/shape-on-terrain/padding-1-degree';
+import { padding1DegreeInputAdapter, rangeRingToArcInputAdapter, rangeRingToCircleInputAdapter, allCircleKeysAdapter, allArcKeysAdapter, createColorRatios } from "./adapters";
+export var ENUM_HIDE;
+(function (ENUM_HIDE) {
+    ENUM_HIDE[ENUM_HIDE["SHOW"] = 0] = "SHOW";
+    ENUM_HIDE[ENUM_HIDE["HIDE"] = 1] = "HIDE";
+    ENUM_HIDE[ENUM_HIDE["HIDE_1_DEGREE_PADDINGS"] = 2] = "HIDE_1_DEGREE_PADDINGS";
+})(ENUM_HIDE || (ENUM_HIDE = {}));
+export var ENUM_TEXT_HIDE;
+(function (ENUM_TEXT_HIDE) {
+    ENUM_TEXT_HIDE[ENUM_TEXT_HIDE["SHOW"] = 0] = "SHOW";
+    ENUM_TEXT_HIDE[ENUM_TEXT_HIDE["HIDE"] = 1] = "HIDE";
+})(ENUM_TEXT_HIDE || (ENUM_TEXT_HIDE = {}));
 // @ts-ignore
 export class RangeRingPlugin {
     id;
@@ -9,6 +22,8 @@ export class RangeRingPlugin {
     arcPlugin;
     paddingPlugin = null; // TODO: implement padding plugin
     _memory = new Map();
+    _freed = false;
+    textWritersMap = new Map();
     _semiPluginOptions = {
         circleOnTerrainOptions: {
             variativeColorsOn: false,
@@ -30,22 +45,202 @@ export class RangeRingPlugin {
             defaultHeightFromGroundIn3D: 0,
         },
     };
-    constructor(id) {
+    constructor(id, { textDataPreAdaptor = (center) => center, textWritersMap = new Map(), }) {
         this.id = id;
-        this.circlePlugin = new CircleOnTerrainPlugin(this.id + "-circle");
+        this.circlePlugin = new CircleOnTerrainPlugin(this.id + "-circle", {
+            variativeColorsOn: true,
+        });
         this.arcPlugin = new ArcOnTerrainPlugin(this.id + "-arc", {
-            vertexCount: 5,
+            variativeColorsOn: true,
+            vertexCount: 20,
+        });
+        this.paddingPlugin = new Padding1DegreePlugin(this.id + "-padding", {
+            variativeColorsOn: true,
+            defaultColor: [1, 1, 1, 1],
+            defaultHeightFromGroundIn3D: 0,
         });
-        this.paddingPlugin = null; // TODO: initialize padding plugin if needed
+        if (textWritersMap) {
+            this.textWritersMap = textWritersMap;
+        }
     }
     insertBulk(items) {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot insert items");
+            return;
+        }
+        if (this.globe === null || this.gl === null) {
+            console.warn("Globe or WebGL context is not initialized, cannot insert items");
+            return;
+        }
+        const visableItems = items.filter(item => item.hide !== ENUM_HIDE.HIDE);
+        if (this.paddingPlugin) {
+            const paddingInputs = visableItems.map(item => padding1DegreeInputAdapter(item)).flat();
+            this.paddingPlugin.insertBulk(paddingInputs);
+        }
+        const circleInputs = visableItems.filter(item => item.hide === ENUM_HIDE.SHOW).map(rangeRingToCircleInputAdapter).flat();
+        this.circlePlugin.insertBulk(circleInputs);
+        const arcInputs = visableItems.map((item) => rangeRingToArcInputAdapter(this.globe, item)).flat();
+        this.arcPlugin.insertBulk(arcInputs);
+        for (const item of items) {
+            this._memory.set(item.centerID, item);
+            if (item.hide !== ENUM_HIDE.HIDE && item.textHide === ENUM_HIDE.SHOW) {
+                this.updateText([item.centerID]);
+            }
+        }
+    }
+    removeCenters(centers) {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot remove centers");
+            return;
+        }
+        if (this.globe === null || this.gl === null) {
+            console.warn("Globe or WebGL context is not initialized, cannot remove centers");
+            return;
+        }
+        for (let i = 0; i < centers.length; i++) {
+            const rangeRingInput = this._memory.get(centers[i]);
+            if (!rangeRingInput) {
+                console.warn(`No data found for centerID: ${centers[i]}`);
+                continue;
+            }
+            const circleKeys = allCircleKeysAdapter(rangeRingInput);
+            this.circlePlugin.deleteBulk(circleKeys);
+            this.paddingPlugin?.deleteBulk(circleKeys);
+            const allArcKeys = allArcKeysAdapter(rangeRingInput);
+            this.arcPlugin.deleteBulk(allArcKeys);
+            this._memory.delete(centers[i]);
+        }
+        this.globe.DrawRender();
+    }
+    updateCenters() {
     }
-    _build() {
+    updateCentersCoordinate(items) {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot update centers coordinates");
+            return;
+        }
+        if (this.globe === null || this.gl === null) {
+            console.warn("Globe or WebGL context is not initialized, cannot update centers coordinates");
+            return;
+        }
+        const globe = this.globe;
+        for (const item of items) {
+            const { centerID, long, lat } = item;
+            const rangeRingInput = this._memory.get(centerID);
+            if (rangeRingInput) {
+                rangeRingInput.long = long;
+                rangeRingInput.lat = lat;
+                const arcData = rangeRingToArcInputAdapter(globe, rangeRingInput);
+                this.arcPlugin.updateCoordinates(arcData);
+                const circleData = rangeRingToCircleInputAdapter(rangeRingInput);
+                this.circlePlugin.updateCoordinates(circleData);
+                this.paddingPlugin?.updateCoordinates(circleData);
+                this.updateText([centerID]);
+            }
+        }
+    }
+    updateCentersColor(items) {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot update centers color");
+            return;
+        }
+        if (this.globe === null || this.gl === null) {
+            console.warn("Globe or WebGL context is not initialized, cannot update centers color");
+            return;
+        }
+        // update Colors from memory map
+        for (let item of items) {
+            const data = this._memory.get(item.centerID);
+            if (!data) {
+                console.warn(`No data found for centerID: ${item.centerID}`);
+                continue;
+            }
+            data.rgba = item.rgba;
+            // update arc Colors 
+            const arcColors = allArcKeysAdapter(data).map(key => ({ key, color: data.rgba }));
+            this.arcPlugin.updateColors(arcColors, false);
+            const circleColors = allCircleKeysAdapter(data).map(key => ({ key, color: data.rgba }));
+            this.circlePlugin.updateColors(circleColors);
+            if (this.paddingPlugin) {
+                const colorRatios = createColorRatios(data.rgba, data.stepAngle, 0.5);
+                for (const { key } of circleColors) {
+                    this.paddingPlugin?.updateColorRatios(key, colorRatios, false);
+                }
+            }
+            this.updateText([item.centerID]);
+        }
+        this.globe.DrawRender();
+    }
+    updateCentersHide() {
     }
     init(globe, gl) {
         this.globe = globe;
         this.gl = gl;
+        this.circlePlugin.init(globe, gl);
+        this.arcPlugin.init(globe, gl);
+        this.paddingPlugin?.init(globe, gl);
     }
     draw3D() {
+        if (this._freed) {
+            console.warn("RangeRing Plugin is freed, cannot draw");
+            return;
+        }
+        this.arcPlugin.draw3D();
+        this.paddingPlugin?.draw3D();
+        this.circlePlugin.draw3D();
+        for (const [key, writer] of this.textWritersMap) {
+            writer.draw();
+        }
+    }
+    free() {
+        if (this._freed) {
+            console.warn("RangeRing Plugin is already freed");
+            return;
+        }
+        this._freed = true;
+        this.circlePlugin.free();
+        this.arcPlugin.free();
+        this.paddingPlugin?.free();
+    }
+    updateText(centerIDs = null) {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot update text");
+            return;
+        }
+        if (this.globe === null || this.gl === null) {
+            console.warn("Globe or WebGL context is not initialized, cannot update text");
+            return;
+        }
+        const globe = this.globe;
+        const textWritersMap = this.textWritersMap;
+        let keys = centerIDs ?? this._memory.keys();
+        for (const centerID of keys) {
+            const rangeRingData = this._memory.get(centerID);
+            if (!rangeRingData)
+                continue;
+            for (const [key, writer] of textWritersMap) {
+                writer.insertText(rangeRingData);
+            }
+        }
+    }
+    deleteText(centerIDs) {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot delete text");
+            return;
+        }
+        if (this.globe === null || this.gl === null) {
+            console.warn("Globe or WebGL context is not initialized, cannot delete text");
+            return;
+        }
+        const globe = this.globe;
+        const textWritersMap = this.textWritersMap;
+        for (const centerID of centerIDs) {
+            const rangeRingData = this._memory.get(centerID);
+            if (!rangeRingData)
+                continue;
+            for (const [key, writer] of textWritersMap) {
+                writer.deleteText(rangeRingData);
+            }
+        }
     }
 }

package/range-tools-on-terrain/range-ring/types.js

@@ -1 +1,9 @@
-export {};
+export const ENUM_HIDE = Object.freeze({
+    SHOW: 0,
+    HIDE: 1,
+    HIDE_1_DEGREE_PADDINGS: 2
+});
+export const ENUM_TEXT_HIDE = Object.freeze({
+    SHOW: 0,
+    HIDE: 1
+});

package/semiplugins/lightweight/line-plugin.js

@@ -11,8 +11,8 @@ export class LinePlugin {
     vao = null;
     _options;
     _uboHandler = null;
-    _bufferOrchestrator;
-    _bufferManagersMap = new Map();
+    bufferOrchestrator;
+    bufferManagersMap = new Map();
     _freed = false;
     constructor(id, { flatViewOn = true, globeViewOn = true, variativeColorsOn = false, defaultColor = [1, 1, 1, 1], dashedLineOpacityVariativeOn = false, dashedLineRatioVariativeOn = false, bufferType = "DYNAMIC_DRAW", opacity = 1.0, initialCapacity = 10 } = {}) {
         this.id = id;
@@ -27,7 +27,7 @@ export class LinePlugin {
             opacity: opacity ?? 1.0,
             initialCapacity: initialCapacity ?? 10
         };
-        this._bufferOrchestrator = new BufferOrchestrator({ capacity: initialCapacity ?? 10 });
+        this.bufferOrchestrator = new BufferOrchestrator({ capacity: initialCapacity ?? 10 });
     }
     init(globe, gl) {
         this.globe = globe;
@@ -40,7 +40,7 @@ export class LinePlugin {
             if (key === null) {
                 return null;
             }
-            const bufferManagerComp = this._bufferManagersMap.get(key);
+            const bufferManagerComp = this.bufferManagersMap.get(key);
             if (bufferManagerComp === undefined) {
                 throw new Error(`Buffer key ${key} does not exist in bufferManagersMap`);
             }
@@ -53,20 +53,35 @@ export class LinePlugin {
         }));
     }
     // PLUGIN INTERFACE METHODS
+    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(items) {
-        const { _bufferOrchestrator, _bufferManagersMap, globe } = this;
-        if (!_bufferOrchestrator || !globe) {
+        const { bufferOrchestrator, bufferManagersMap, globe } = this;
+        if (!bufferOrchestrator || !globe) {
             throw new Error("Buffer orchestrator or globe is not initialized.");
         }
-        _bufferOrchestrator.insertBulk(items, _bufferManagersMap);
+        bufferOrchestrator.insertBulk(items, bufferManagersMap);
         this.globe?.DrawRender();
     }
     deleteBulk(keys) {
-        const { _bufferOrchestrator, _bufferManagersMap, globe } = this;
-        if (!_bufferOrchestrator || !globe) {
+        const { bufferOrchestrator, bufferManagersMap, globe } = this;
+        if (!bufferOrchestrator || !globe) {
             throw new Error("Buffer orchestrator or globe is not initialized.");
         }
-        _bufferOrchestrator.deleteBulk(keys, _bufferManagersMap);
+        bufferOrchestrator.deleteBulk(keys, bufferManagersMap);
         this.globe?.DrawRender();
     }
     setPluginOpacity(opacity, drawRender = false) {
@@ -98,6 +113,9 @@ export class LinePlugin {
             this.globe.DrawRender();
         }
     }
+    updateCoordinates(items) {
+        throw new Error("Method not implemented.");
+    }
     // GLOBE INTERACTION METHODS
     draw3D() {
         if (this._freed) {
@@ -107,15 +125,15 @@ export class LinePlugin {
         if (!this.globe || !this.gl || !this.program || !this.vao) {
             throw new Error("Globe, GL context or program is not initialized.");
         }
-        const { _bufferOrchestrator, _options, _uboHandler, vao } = this;
-        if (!_bufferOrchestrator || !_bufferOrchestrator || !_uboHandler) {
+        const { bufferOrchestrator, _options, _uboHandler, vao } = this;
+        if (!bufferOrchestrator || !bufferOrchestrator || !_uboHandler) {
             throw new Error("Buffer orchestrator is not initialized.");
         }
         const { flatViewOn, globeViewOn, opacity } = _options;
         const drawOptions = {
             drawRange: {
                 first: 0,
-                count: _bufferOrchestrator.length
+                count: bufferOrchestrator.length
             }
         };
         this.gl.disable(this.gl.DEPTH_TEST); // Disable depth test for lines
@@ -134,7 +152,7 @@ export class LinePlugin {
         if (this._freed)
             return;
         // TODO: FILL
-        this._bufferManagersMap.forEach((manager) => {
+        this.bufferManagersMap.forEach((manager) => {
             manager.bufferManager.free();
         });
         this._uboHandler?.free();
@@ -145,7 +163,7 @@ export class LinePlugin {
     _fillManagerMap() {
         const globe = this.globe;
         const { flatViewOn, globeViewOn, variativeColorsOn, dashedLineOpacityVariativeOn, dashedLineRatioVariativeOn, bufferType = "DYNAMIC_DRAW" } = this._options;
-        const m = this._bufferManagersMap;
+        const m = this.bufferManagersMap;
         const initialCapacity = this._options.initialCapacity;
         if (flatViewOn) {
             m.set("start_position", {