@pirireis/webglobeplugins 0.1.5 → 0.1.7

package/compassrose/compassrose-2d.js

@@ -0,0 +1,29 @@
+// TODO: Implement compass rose in 2D
+// TODO: enrich cameraBlockTotem with globe tile and more...
+
+const vertexShader = `#version 300 es
+
+
+in vec2 center;
+in float pixel_radius;
+in vec4 color;
+out vec4 v_color;
+void main() {
+    const float PI = 3.14159265359;
+    float angle = float(gl_VertexID) / 180.0  * PI;
+    vec2 limp = vec2( 
+        
+    )
+    vec2 position = 
+    v_color = color;
+}
+`;
+
+const fragmentShader = `#version 300 es
+precision mediump float;
+in vec4 v_color;
+out vec4 outColor;
+void main() {
+    outColor = v_color;
+}
+`;

package/compassrose/compassrose.js

@@ -132,8 +132,8 @@ const object = {
                     "x": 16,
                     "y": -16
                 },
-                "vAlignment": 0,
-                "hAlignment": 0,
+                "vAlignment": 2,
+                "hAlignment": 2,
                 "size": 20,
                 "hollowColor": "#000",
                 "textColor": "#FFF",
@@ -219,7 +219,8 @@ export default class CompassRose {
 
         this.primaryKey = primaryKey;
 
-        this.object = Object.assign({}, object);
+        this.object = structuredClone(object);
+        this.object.id = id;
 
         setIconSize(this.object, size);
         if (imageURL) {
@@ -320,6 +321,10 @@ export default class CompassRose {
         }
     }
 
+    removeFromMap() {
+        this.globe.ObjectArray.Delete(this.id);
+    }
+
 
     // private
     _setData(data) {
@@ -337,6 +342,7 @@ export default class CompassRose {
         globe.ObjectArray.UpdateData(object, operation, [data], canChange);
     }
 
+
 }
 
 const getID = (data, primaryKey) => data.attribs[primaryKey];

package/package.json

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

package/programs/index.js

@@ -5,7 +5,7 @@ import ArrowField from "./arrowfield";
 import { glProgramCache, globeProgramCache, noRegisterGlobeProgramCache } from "./programcache";
 import * as vectorfield from "./vectorfields";
 import { FadeAway } from "./helpers";
-import rings from "./rings";
+import * as rings from "./rings";
 export {
     Float2LegendWithRatio,
     GlobeShellWiggle,

package/programs/line-on-globe/program.js

@@ -0,0 +1,115 @@
+import { CameraUniformBlockString, CameraUniformBlockTotem } from "../totems";
+import { longLatRadToMercator, longLatRadToCartesian3D, cartesian3DToGLPosition, mercatorXYTo2DPoint } from "../shaderfunctions/geometrytransformations";
+import { createProgram } from "../webgl/program";
+import { noRegisterGlobeProgramCache, globeProgramCache } from "../programcache";
+import { BufferOffsetManger } from "../../util/account";
+
+const GLOBE_MIDPOINT_COUNT = 100;
+const ITEM_SIZE = 8;
+
+const vertexShader = `#version 300 es
+precision highp float;
+${CameraUniformBlockString}
+${longLatRadToMercator}
+${longLatRadToCartesian3D}
+${cartesian3DToGLPosition}
+${mercatorXYTo2DPoint}
+
+in vec2 start_position;
+in vec2 end_position;
+in vec4 color;
+out vec4 v_color;
+
+void main() {
+    
+    vec2 longLat;
+    if (is3D) {
+        float interpolation = float(gl_VertexID) / ${GLOBE_MIDPOINT_COUNT}.0;
+        longLat = mix(start_position, end_position, interpolation)
+        vec3 cartesian = longLatRadToMercator(longLat);
+        gl_Position = cartesian3DToGLPosition(cartesian);
+    } else {
+        if ( gl_VertexID == 0 ) {
+            longLat = start_position;
+        } else {
+            longLat = end_position;
+        }
+        vec2 mercator = longLatRadToMercator(longLat);
+        gl_Position = mercatorXYTo2DPoint(mercator);
+    }
+    v_color = color;
+}
+`
+
+const fragmentShader = `#version 300 es
+precision highp float;
+in vec4 v_color;
+out vec4 color;
+void main() {
+    color = v_color;
+}
+`
+
+
+class Logic {
+
+    constructor(globe) {
+        this.globe = globe;
+        this.gl = gl;
+        this.program = createProgram(gl, vertexShader, fragmentShader);
+        const { gl, program } = this;
+        {
+            // assign attribute locations
+            gl.bindAttribLocation(program, 0, "start_position");
+            gl.bindAttribLocation(program, 1, "end_position");
+            gl.bindAttribLocation(program, 2, "color");
+
+        }
+
+
+        this.cameraBlockBindingPoint = 0;
+        const cameraBlockIndex = this.gl.getUniformBlockIndex(this.program, "CameraUniformBlock");
+        this.cameraBlockTotem = globeProgramCache.getProgram(globe, CameraUniformBlockTotem);
+
+    }
+
+
+    draw(bufferManager) {
+
+    }
+
+
+
+}
+
+
+class BufferManager extends BufferOffsetManger {
+
+    constructor(gl, { capacity = 10, bufferType = "DYNAMIC_DRAW" } = {}) {
+        super(ITEM_SIZE, { capacity, bufferType });
+        this.gl = gl;
+        this.buffer = gl.createBuffer();
+
+        const { gl, buffer } = this;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, _capacity * ITEM_SIZE * 4, gl[bufferType]);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+
+        this.vao = gl.createVertexArray();
+        {
+
+        }
+    }
+
+    insertBulk(items) {
+
+    }
+}
+
+
+
+export const programCache = Object.freeze({
+    get: (globe) => { return noRegisterGlobeProgramCache.getProgram(globe, Logic) },
+    release: (globe) => { noRegisterGlobeProgramCache.releaseProgram(globe, Logic) }
+});
+

package/programs/rings/distancering/circleflatprogram.js

@@ -2,7 +2,7 @@ import { createProgram, shaderfunctions } from "../../../util";
 import CameraUniformBlockTotem, { CameraUniformBlockString } from "../../totems/camerauniformblock";
 import { noRegisterGlobeProgramCache, globeProgramCache } from "../../programcache";
 
-const CIRCLE_EDGE_COUNT = 72;
+const CIRCLE_EDGE_COUNT = 360;
 
 const vertexShader = `#version 300 es ` +
     shaderfunctions.PI +
@@ -19,6 +19,8 @@ const vertexShader = `#version 300 es ` +
 uniform int compass;
 uniform float circle_edge_count;
 
+uniform float opacity;
+
 in vec2 center;
 in float radius;
 in vec4 color;
@@ -28,7 +30,7 @@ out vec2 v_limp;
 
 void main() {
     if( flag == 1.0 || radius == 0.0) return; // flag 1.0 is hide
-    v_color = color;
+    v_color = vec4(color.rgb, color.a * opacity);
     if ( gl_VertexID == 270 ) v_color.rgb += 0.2;
     float angle = 3.1415926535897932384626433832795 * 2.0 * (float(gl_VertexID) /  circle_edge_count);
     if ( is3D ){
@@ -76,36 +78,49 @@ class Logic {
         const cameraBlockIndex = this.gl.getUniformBlockIndex(this.program, "CameraUniformBlock");
         this.gl.uniformBlockBinding(this.program, cameraBlockIndex, this.cameraBlockBindingPoint);
 
+        this._opacityLocation = this.gl.getUniformLocation(this.program, "opacity");
         this._compassLocation = this.gl.getUniformLocation(this.program, "compass");
         this._circleEdgeCountLocation = this.gl.getUniformLocation(this.program, "circle_edge_count");
-        this._circle_edge_count = CIRCLE_EDGE_COUNT;
+        this._circleEdgeCount = CIRCLE_EDGE_COUNT;
         this._compassmode = 1;
+        this._opacity = 1.0;
         {
             const currentProgram = this.gl.getParameter(this.gl.CURRENT_PROGRAM);
             this.gl.useProgram(this.program);
             this.gl.uniform1i(this._compassLocation, 1);
             this.gl.uniform1f(this._circleEdgeCountLocation, CIRCLE_EDGE_COUNT);
+            this.gl.uniform1f(this._opacityLocation, 1.0);
+
             this.gl.useProgram(currentProgram);
         }
 
     }
 
 
-    draw(attrBufferManager, compass, circle_edge_count) {
+    draw(attrBufferManager, compass, circleEdgeCount, opacity) {
         const { gl, program, cameraBlockTotem, cameraBlockBindingPoint } = this;
         gl.useProgram(program);
         cameraBlockTotem.bind(cameraBlockBindingPoint);
         attrBufferManager.bindCircleVAO();
 
-        if (compass !== this._compassLocation) {
+        if (compass !== this._compassmode) {
             gl.uniform1i(this._compassLocation, compass);
+            console.log("compass", compass);
             this._compassmode = compass;
         }
-        if (circle_edge_count !== this._circleEdgeCountLocation) {
-            gl.uniform1f(this._circleEdgeCountLocation, circle_edge_count);
-            this._circle_edge_count = circle_edge_count;
+
+        if (opacity !== this._opacity) {
+            gl.uniform1f(this._opacityLocation, opacity);
+            console.log("opacity", opacity);
+            this._opacity = opacity;
+        }
+
+        if (circleEdgeCount !== this._circleEdgeCount) {
+            gl.uniform1f(this._circleEdgeCountLocation, circleEdgeCount);
+            console.log("circleEdgeCount", circleEdgeCount);
+            this._circleEdgeCount = circleEdgeCount;
         }
-        gl.drawArraysInstanced(gl.LINE_LOOP, 0, circle_edge_count, attrBufferManager.length);
+        gl.drawArraysInstanced(gl.LINE_LOOP, 0, circleEdgeCount, attrBufferManager.length);
         gl.bindVertexArray(null);
         cameraBlockTotem.unbind(cameraBlockBindingPoint);
     }
@@ -118,18 +133,7 @@ class Logic {
 }
 
 
-export default class {
-    constructor(globe, gl) {
-        this.gl = gl;
-        this.globe = globe;
-        this.logic = noRegisterGlobeProgramCache.getProgram(globe, Logic);
-    }
-
-    draw(attrBufferManager, compass, circle_edge_count) {
-        this.logic.draw(attrBufferManager, compass, circle_edge_count);
-    }
-
-    free() {
-        noRegisterGlobeProgramCache.releaseProgram(this.gl, Logic);
-    }
-}
+export const programCache = Object.freeze({
+    getProgram: (globe) => { return noRegisterGlobeProgramCache.getProgram(globe, Logic) },
+    releaseProgram: (globe) => { noRegisterGlobeProgramCache.releaseProgram(globe, Logic) }
+});

package/programs/rings/distancering/circlepaddingfreeangleprogram.js

@@ -25,13 +25,16 @@ in float pad_angle;
 
 uniform int compass;
 
+uniform float opacity;
+
 out vec2 v_limp;
 out vec4 v_color;
 
 
 void main() {   
     if( flag == 1.0 || radius == 0.0 ) return; // 1.0 is hide 
-    v_color = color;
+    v_color = vec4(color.rgb, color.a * opacity);
+
     if ( pad_angle == 0.0 ) v_color.rgb -= 0.2;
     gl_PointSize = 2.0;
 
@@ -80,12 +83,13 @@ class Logic {
 
         {
             const gl = this.gl;
-            this.center = gl.getAttribLocation(this.program, "center");
-            this.radius = gl.getAttribLocation(this.program, "radius");
-            this.pad_range = gl.getAttribLocation(this.program, "pad_range");
-            this.color = gl.getAttribLocation(this.program, "color");
-            this.flag = gl.getAttribLocation(this.program, "flag");
-            this.pad_angle = gl.getAttribLocation(this.program, "pad_angle");
+            // assign attribute locations
+            gl.bindAttribLocation(this.program, 0, "center");
+            gl.bindAttribLocation(this.program, 1, "radius");
+            gl.bindAttribLocation(this.program, 2, "pad_range");
+            gl.bindAttribLocation(this.program, 3, "color");
+            gl.bindAttribLocation(this.program, 4, "flag");
+            gl.bindAttribLocation(this.program, 5, "pad_angle");
 
         }
 
@@ -94,19 +98,20 @@ class Logic {
         this.gl.uniformBlockBinding(this.program, cameraBlockIndex, this.cameraBlockBindingPoint);
         this.cameraBlockTotem = globeProgramCache.getProgram(globe, CameraUniformBlockTotem);
         this._compassLocation = this.gl.getUniformLocation(this.program, "compass");
-
-
+        this._opacityLocation = this.gl.getUniformLocation(this.program, "opacity");
+        this._opacity = 1.0;
         {
             const currentProgram = this.gl.getParameter(this.gl.CURRENT_PROGRAM);
             this.gl.useProgram(this.program);
             this.gl.uniform1i(this._compassLocation, 1);
+            this.gl.uniform1f(this._opacityLocation, 1.0);
             this._lastCompass = 1;
             this.gl.useProgram(currentProgram);
         }
     }
 
 
-    draw(attrBufferManager, compass) {
+    draw(attrBufferManager, compass, opacity) {
 
         const { gl, program, cameraBlockBindingPoint, cameraBlockTotem, _compassLocation } = this;
 
@@ -117,6 +122,10 @@ class Logic {
             gl.uniform1i(_compassLocation, compass);
             this._lastCompass = compass;
         }
+        if (opacity !== this._opacity) {
+            gl.uniform1f(this._opacityLocation, opacity);
+            this._opacity = opacity;
+        }
         gl.disable(gl.DEPTH_TEST);
         gl.drawArraysInstanced(gl.LINES, 0, 2, attrBufferManager.length);
         gl.enable(gl.DEPTH_TEST);
@@ -124,7 +133,7 @@ class Logic {
         gl.bindVertexArray(null);
 
     }
-    initilizeBufferManager({ bufferType = "DYNAMIC_DRAW", initialRingCapacity = 10 } = {}) {
+    createBuffer({ bufferType = "DYNAMIC_DRAW", initialRingCapacity = 10 } = {}) {
         return new BufferManager(this.gl, bufferType, initialRingCapacity);
 
     }
@@ -214,7 +223,7 @@ export class BufferManager extends BufferOffsetManager {
         console.log("space left:", spaceLeft, "required space:", requiredSpace);
         if (requiredSpace > spaceLeft) {
             console.log("new capacity:", this.capacity + requiredSpace - spaceLeft)
-            this.extendBuffer(gl, buffer, this.bufferType, this.capacity + requiredSpace - spaceLeft);
+            this.extendBuffer(this.capacity + requiredSpace - spaceLeft);
         }
 
         const items = [];

package/programs/rings/distancering/index.js

@@ -1,5 +1,5 @@
-import CircleFlatProgram from './circleflatprogram';
+import { programCache as circleProgramCache } from './circleflatprogram';
 import PaddyFlatProgram from './paddyflatprogram';
 import CirclePaddySharedBuffer from './circlepaddysharedbuffer';
 import { PaddingFreeAngleCache } from './circlepaddingfreeangleprogram';
-export { CircleFlatProgram, PaddyFlatProgram, CirclePaddySharedBuffer, PaddingFreeAngleCache };
+export { circleProgramCache, PaddyFlatProgram, CirclePaddySharedBuffer, PaddingFreeAngleCache };

package/programs/rings/distancering/paddyflatprogram.js

@@ -24,6 +24,9 @@ in float flag;
 uniform int compass;
 uniform float pad_count;
 
+uniform float opacity;
+
+
 out vec2 v_limp;
 out vec4 v_color;
 
@@ -32,7 +35,7 @@ void main() {
 
     float alpha_padding =  z_level * z_level / (pad_range/ 100.0 );
     if( flag == 2.0 || flag == 1.0 || radius == 0.0 || alpha_padding < 0.1 || z_level < 3.0 ) return; // 1.0 is hide 
-    v_color = vec4(color.rgb, alpha_padding);
+    v_color = vec4(color.rgb, color.a * alpha_padding * opacity);
 
     gl_PointSize = 2.0;
 
@@ -86,27 +89,40 @@ class Logic {
         this.gl.uniformBlockBinding(this.program, cameraBlockIndex, this.cameraBlockBindingPoint);
         this.cameraBlockTotem = globeProgramCache.getProgram(globe, CameraUniformBlockTotem);
         this._padCountLocation = this.gl.getUniformLocation(this.program, "pad_count");
-
+        this._opacityLocation = this.gl.getUniformLocation(this.program, "opacity");
         this._compassLocation = this.gl.getUniformLocation(this.program, "compass");
-
+        this._compassMode = 1;
+        this._opacity = 1.0;
+        this._padCount = 360;
         {
             const currentProgram = this.gl.getParameter(this.gl.CURRENT_PROGRAM);
             this.gl.useProgram(this.program);
             this.gl.uniform1i(this._compassLocation, 1);
             this.gl.useProgram(currentProgram);
+            this.gl.uniform1f(this._padCountLocation, 360)
         }
 
     }
 
 
-    draw(attrBufferManager, padCount, compass) {
+    draw(attrBufferManager, padCount, compass, opacity) {
         const { gl, program, _padCountLocation, cameraBlockBindingPoint, cameraBlockTotem, _compassLocation } = this;
         gl.useProgram(program);
         attrBufferManager.bindPaddingVAO();
         cameraBlockTotem.bind(cameraBlockBindingPoint);
         // draw instanced
-        gl.uniform1f(_padCountLocation, padCount);
-        gl.uniform1i(_compassLocation, compass);
+        if (padCount !== this._padCount) {
+            this._padCount = padCount;
+            gl.uniform1f(_padCountLocation, padCount);
+        }
+        if (compass !== this._compassMode) {
+            gl.uniform1i(_compassLocation, compass);
+            this._compassMode = compass;
+        }
+        if (opacity !== this._opacity) {
+            this._opacity = opacity;
+            gl.uniform1f(this._opacityLocation, opacity);
+        }
         gl.drawArraysInstanced(gl.LINES, 0, padCount * 2, attrBufferManager.length);
         gl.bindVertexArray(null);
         cameraBlockTotem.unbind(cameraBlockBindingPoint);

package/programs/rings/index.js

@@ -1,9 +1 @@
-import CirclePaddySharedBuffer from './distancering/circlepaddysharedbuffer';
-import CircleFlatProgram from './distancering/circleflatprogram';
-import PaddyFlatProgram from './distancering/paddyflatprogram';
-
-export default {
-    CirclePaddySharedBuffer,
-    CircleFlatProgram,
-    PaddyFlatProgram,
-};
+export * from "./distancering";

package/rangerings/index.js

@@ -1,3 +1,4 @@
 import RangeRings from './rangerings';
+import RangeRingAngleText from './rangeringangletext';
 import { ENUM_HIDE, ENUM_TEXT_HIDE, COMPASS_MODES } from './enum';
-export { RangeRings, ENUM_HIDE, ENUM_TEXT_HIDE, COMPASS_MODES };
+export { RangeRings, ENUM_HIDE, ENUM_TEXT_HIDE, COMPASS_MODES, RangeRingAngleText };

package/rangerings/rangeringangletext.js

@@ -17,9 +17,8 @@ const fidKey = "__fid__";
 
 
 const object = {
-    "displayName": "CompassRose",
+    "displayName": "RangeRingAngleText",
     "layerType": 3,
-
     "wkbGeom": null,
     "wfsLayerName": null,
     "objectType": "point",
@@ -33,38 +32,17 @@ const object = {
 
 
 export default class RangeRingAngleText {
-    constructor(globe, id, { style = null, flatCompassMode = COMPASS_MODES.REAL } = {}) {
+    constructor(globe, id, { style = null, flatCompassMode = COMPASS_MODES.REAL, hideAll = false } = {}) {
         this.globe = globe;
         this.ObjectArray = globe.ObjectArray;
         this.id = id;
         this._flatCompassMode = flatCompassMode;
         this._lastImplicitCompassMode = this.__implicitCompassMode();
-        if (style) {
-            this.style = style;
-        } else {
-            this.style = this.ObjectArray.GetDefaultStyle();
-            const { labels } = this.style;
-            const label = labels[0];
-            label.offset = { x: 0, y: 0 };
-            label.fontFamily.hollowWidth = 1;
-            label.vAlignment = 2;
-            label.hAlignment = 2;
-            label.size = 17;
-            // this.style.filter = [
-            //     {
-            //         rule: ["any", ["<", "startLod", "LOD"]],
-            //         name: "startLODRule",
-            //         style: {
-            //             opacity: 0
-            //         }
-
-            //     }
-            // ];
-        }
 
-        this.style.labels[0].text = "`${aci}`"
-        this.style.fidKey = fidKey;
-        this.object = Object.assign({}, object, { style: this.style, id: this.id });
+        this._hideAll = hideAll;
+
+        const style_ = style !== null ? style : this.getDefaultStyle();
+        this.object = Object.assign({}, object, { style: style_, id: this.id });
 
         this._centerCollection = new Map();
         // new inner MAP params
@@ -75,6 +53,37 @@ export default class RangeRingAngleText {
 
     }
 
+    getDefaultStyle() {
+        const style = this.ObjectArray.GetDefaultStyle();
+        style.fidKey = fidKey;
+        const { labels } = style;
+        const label = labels[0];
+        label.offset = { x: 0, y: 0 };
+        label.fontFamily.hollowWidth = 1;
+        label.vAlignment = 2;
+        label.hAlignment = 2;
+        label.size = 17;
+        label.text = "`${aci}`"
+        // this.style.filter = [
+        //     {
+        //         rule: ["any", ["===", "aci", "K"]],
+        //         name: "startLODRule",
+        //         style: {
+        //             ...
+        //         }
+
+        //     }
+        // ];
+        return style;
+    }
+
+
+    setStyle(style) {
+        if (style === null) return;
+        this.object.style = style;
+        this.ObjectArray.StyleChanged(this.object);
+    }
+
 
     setCompass(mode) {
         if (mode === this._flatCompassMode) return;
@@ -100,7 +109,7 @@ export default class RangeRingAngleText {
      * 
      * */
     insertBulk(ringDatas) {
-
+        const { _hideAll } = this;
         const addBucket = {
             coords: [],
             coordsZ: [],
@@ -118,7 +127,8 @@ export default class RangeRingAngleText {
                 this._fillDeleteBucket(centerID, deleteBucket);
             }
             const maxRadius = rings.reduce((acc, { radius }) => Math.max(acc, radius), 0);
-            const show = hide !== ENUM_HIDE.HIDE && textHide === ENUM_TEXT_HIDE.SHOW;
+            const textHide_ = _hideAll ? ENUM_TEXT_HIDE.HIDE : textHide;
+            const show = hide !== ENUM_HIDE.HIDE && textHide_ === ENUM_TEXT_HIDE.SHOW;
             if (show) this._appendCircle(x, y, maxRadius, stepAngle, centerID, addBucket);
             this._centerCollection.set(centerID,
                 new Map([
@@ -127,10 +137,10 @@ export default class RangeRingAngleText {
                     ["x", x],
                     ["y", y],
                     ["hide", hide],
-                    ["textHide", textHide]
+                    ["textHide", textHide_]
                 ]));
         }
-
+        if (this._hideAll) return;
         if (deleteBucket.coords.length > 0) this._updateData(deleteBucket, CSObjectArrayUpdateTypes.DELETE);
         if (addBucket.coords.length > 0) this._updateData(addBucket, CSObjectArrayUpdateTypes.ADD);
 
@@ -149,18 +159,22 @@ export default class RangeRingAngleText {
         for (const { centerID, x, y } of centerDatas) {
             if (this._centerCollection.has(centerID)) {
                 const centerMap = this._centerCollection.get(centerID);
+                centerMap.set("x", x);
+                centerMap.set("y", y);
+                const hide = centerMap.get("hide");
+                const textHide = centerMap.get("textHide");
+                const isHidden = hide === ENUM_HIDE.HIDE || textHide === ENUM_TEXT_HIDE.HIDE;
+                if (isHidden) continue;
                 const maxRadius = centerMap.get("maxRadius");
                 const stepAngle = centerMap.get("stepAngle");
                 // long, lat, radius, step, centerID, outBucket
                 this._appendCircle(x, y, maxRadius, stepAngle, centerID, updateBucket);
-                centerMap.set("x", x);
-                centerMap.set("y", y);
 
             }
         }
-        for (const attribs of updateBucket.attribs) {
-            delete attribs["aci"];
-        }
+        // for (const attribs of updateBucket.attribs) {
+        //     delete attribs["aci"];
+        // }
         if (updateBucket.coords.length > 0) {
             this._updateData(updateBucket, CSObjectArrayUpdateTypes.UPDATE);
         }
@@ -173,6 +187,10 @@ export default class RangeRingAngleText {
      * @param {Array<{centerID:string, hide: bool}} centerHides 
      */
     updateCentersHide(centerHides) {
+        if (this._hideAll) {
+            console.warn("Tum mesafe halkasi yazilari gizli durum. Islem yapilamaz");
+            return;
+        };
         const addBucket = {
             coords: [],
             coordsZ: [],
@@ -223,6 +241,46 @@ export default class RangeRingAngleText {
     }
 
 
+    hideAll() {
+        this._hideAll = true;
+        const deleteBucket = {
+            coords: [],
+            coordsZ: [],
+            attribs: []
+        }
+        for (const [centerID, centerMap] of this._centerCollection) {
+            const hide = centerMap.get("hide");
+            const hideText = centerMap.get("textHide");
+            const isHidden = hide === ENUM_HIDE.HIDE || hideText === ENUM_TEXT_HIDE.HIDE;
+            if (!isHidden) this._fillDeleteBucket(centerID, deleteBucket);
+            centerMap.set("hide", ENUM_HIDE.HIDE);
+        }
+        this._updateData(deleteBucket, CSObjectArrayUpdateTypes.DELETE);
+    }
+
+    showAll() {
+        this._hideAll = false;
+        const addBucket = {
+            coords: [],
+            coordsZ: [],
+            attribs: []
+        }
+        for (const [centerID, centerMap] of this._centerCollection) {
+            const hide = centerMap.get("hide");
+            const hideText = centerMap.get("textHide");
+            const isHidden = hide === ENUM_HIDE.HIDE || hideText === ENUM_TEXT_HIDE.HIDE;
+            if (isHidden) {
+                const x = centerMap.get("x");
+                const y = centerMap.get("y");
+                const maxRadius = centerMap.get("maxRadius");
+                const stepAngle = centerMap.get("stepAngle");
+                this._appendCircle(x, y, maxRadius, stepAngle, centerID, addBucket);
+                centerMap.set("hide", ENUM_HIDE.SHOW);
+                centerMap.set("textHide", ENUM_TEXT_HIDE.SHOW);
+            }
+        }
+        if (addBucket.coords.length) this._updateData(addBucket, CSObjectArrayUpdateTypes.ADD);
+    }
 
 
 

package/rangerings/rangerings.js

@@ -3,7 +3,7 @@ import { COMPASS_MODES } from "./enum";
 import { PaddingFreeAngleCache } from "../programs/rings/distancering";
 
 import RangeRingAngleText from "./rangeringangletext";
-const { CircleFlatProgram, PaddyFlatProgram, CirclePaddySharedBuffer } = rings;
+const { circleProgramCache, PaddyFlatProgram, CirclePaddySharedBuffer } = rings;
 
 /**
  * @typedef RangeRingData
@@ -22,10 +22,12 @@ const { CircleFlatProgram, PaddyFlatProgram, CirclePaddySharedBuffer } = rings;
 
 export default class {
 
-    constructor(id, { oneDegreePadding = true, compass = COMPASS_MODES.COMPASS, showNumbers = true } = {}) {
+    constructor(id, { oneDegreePadding = true, compass = COMPASS_MODES.REAL, showNumbers = true, numbersStyle = null, opacity = 1 } = {}) {
         this.id = id;
         this.compass = compass;
         this._showNumbers = showNumbers;
+        this._numbersStyle = numbersStyle;
+        this._opacity = opacity;
         this.circleEdgeCount = 360;
         this._onedegreepaddingOn = oneDegreePadding;
         this.bufferManager = null;
@@ -39,11 +41,12 @@ export default class {
     init(globe, gl) {
         this.gl = gl;
         this.globe = globe;
-        this.circleFlatProgram = new CircleFlatProgram(globe, gl);
+        this.circleFlatProgram = circleProgramCache.getProgram(globe);
         this.paddyFlatProgram = new PaddyFlatProgram(globe, gl);
         this.paddingFreeAngleProgram = PaddingFreeAngleCache.getProgram(globe);
         if (this._showNumbers) {
-            this._textPlugin = new RangeRingAngleText(globe, this.id + "text", { flatCompassMode: this.compass });
+            this.textPlugin = new RangeRingAngleText(globe, this.id + "text", { flatCompassMode: this.compass, style: this._numbersStyle });
+            delete this._numbersStyle;
         }
     }
 
@@ -52,28 +55,29 @@ export default class {
         this.circleFlatProgram.free();
         this.paddyFlatProgram.free();
         this.bufferManager?.free();
-        this._textPlugin?.free();
+        this.textPlugin?.free();
     }
 
 
-
+    setOpacity(opacity) {
+        this._opacity = opacity;
+        this.globe.DrawRender();
+    }
 
     setGeometry() {
-        this._textPlugin?.setGeometry();
+        this.textPlugin?.setGeometry();
     }
 
 
     draw3D() {
-        const { circleFlatProgram, paddyFlatProgram, paddingFreeAngleProgram, bufferManager, compass, gl, circleEdgeCount, paddingBufferManager } = this;
-        // if (globe.api_GetCurrentGeometry() === 0) return; // do not draw in 3D mode
+        const { circleFlatProgram, paddyFlatProgram, paddingFreeAngleProgram, bufferManager, compass, gl, circleEdgeCount, paddingBufferManager, _opacity } = this;
         if (this.bufferManager !== null && bufferManager.length > 0) {
             gl.disable(gl.DEPTH_TEST);
             // gl.enable(gl.BLEND);
             // gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-            circleFlatProgram.draw(bufferManager, compass, circleEdgeCount);
-            if (this._onedegreepaddingOn) paddyFlatProgram.draw(bufferManager, 360, compass);
-            paddingFreeAngleProgram.draw(paddingBufferManager, compass);
-
+            circleFlatProgram.draw(bufferManager, compass, circleEdgeCount, _opacity);
+            if (this._onedegreepaddingOn) paddyFlatProgram.draw(bufferManager, 360, compass, _opacity);
+            paddingFreeAngleProgram.draw(paddingBufferManager, compass, _opacity);
             gl.enable(gl.DEPTH_TEST);
         }
     }
@@ -87,14 +91,14 @@ export default class {
      */
     setCampass(compass) {
         this.compass = compass;
-        this._textPlugin?.setCompass(compass);
+        this.textPlugin?.setCompass(compass);
     }
 
     initilizeBufferManager(initialRingCapacity, bufferDrawType) {
         const { gl, globe } = this
         this.bufferDrawType = bufferDrawType;
         this.bufferManager = new CirclePaddySharedBuffer(gl, globe, { bufferType: bufferDrawType, initialRingCapacity: initialRingCapacity });
-        this.paddingBufferManager = this.paddingFreeAngleProgram.initilizeBufferManager({ bufferType: bufferDrawType, initialRingCapacity });
+        this.paddingBufferManager = this.paddingFreeAngleProgram.createBuffer({ bufferType: bufferDrawType, initialRingCapacity });
     }
 
 
@@ -110,19 +114,26 @@ export default class {
             item.paddingAngles = angleToPaddingAngles(item.stepAngle, 0);
         }
         this.paddingBufferManager.insertBulk(items);
-        this._textPlugin?.insertBulk(items);
+        this.textPlugin?.insertBulk(items);
         this.globe.DrawRender();
     }
 
 
+    /**
+     * 
+     * @param {Array<{centerID, x, y}>} items 
+     */
     updateCentersXY(items) {
         this.bufferManager.updateCentersXY(items);
         this.paddingBufferManager.updateCentersXY(items);
-        this._textPlugin?.updateCentersXY(items);
+        this.textPlugin?.updateCentersXY(items);
         this.globe.DrawRender();
     }
 
 
+    /**
+     * @param   {Array<{centerID, rgba:[4 numbers]}>} centerColors
+     */
     updateCentersColor(centerColors) {
         this.bufferManager.updateCentersColor(centerColors);
         this.paddingBufferManager.updateCentersColor(centerColors);
@@ -130,27 +141,34 @@ export default class {
     }
 
 
-    // TODO: test
+    /**
+     * @param {Array<{centerID}>} centerIds
+     */
     removeCenters(centerIds) {
         this.bufferManager.removeCenters(centerIds);
         this.paddingBufferManager.removeCenters(centerIds);
-        this._textPlugin?.removeCenters(centerIds);
+        this.textPlugin?.removeCenters(centerIds);
         // this.bufferManager.defrag();
         // this.paddingBufferManager.defrag();
         this.globe.DrawRender();
 
     }
 
-    //TODO: test
+    /**
+     * 
+     * @param {Array<{centerID, hide, textHide}>} centerHides
+     */
     updateCentersHide(centerHides) {
         this.bufferManager.updateCentersHide(centerHides);
         this.paddingBufferManager.updateCentersHide(centerHides);
-        this._textPlugin?.updateCentersHide(centerHides);
+        this.textPlugin?.updateCentersHide(centerHides);
         this.globe.DrawRender();
     }
 }
 
 
+
+
 const ringItemsToCircleBufferInsertDataAdaptor = (ringItems) => {
 
     const result = [];

package/util/account/bufferoffsetmanager.js

@@ -116,7 +116,8 @@ export default class {
     }
 
 
-    extendBuffer(gl, buffer, bufferType, newCapacity) {
+    extendBuffer(newCapacity) {
+        const { gl, buffer, bufferType } = this;
         const itemSize = this.itemSize;
         const bufferData = this._getBufferData();
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
@@ -136,7 +137,8 @@ export default class {
      * @param {number} partOffset
      * @returns 
      */
-    _updatePartial(items, partOffset, gl, buffer) {
+    _updatePartial(items, partOffset) {
+        const { gl, buffer } = this;
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
         const partStart = partOffset * 4;
         for (let { key, payload } of items) {

package/waveparticles/index.js

@@ -1,3 +1,3 @@
 import VectorFieldWaveParticle from "./plugin";
 import { centigradePlus90ToVectorArray } from "./adaptor";
-export { centigradePlus90ToVectorArray, VectorFieldWaveParticle };
+export { centigradePlus90ToVectorArray, VectorFieldWaveParticle };