@pirireis/webglobeplugins 0.15.34 → 0.16.0

package/rangerings/plugin.js

@@ -1,543 +1,644 @@
-/**
- * @typedef RangeRingData
- * @property {number} centerX
- * @property {number} centerY
- * @property {Array<Ring>} rings
- *
- * @typedef Ring
- * @property {number} radius
- * @property {number} padding
- * @property {[number, number, number]} color
- *
- *
- * @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 updateCentersCoordinate    @param {Array<{centerID, long,lat}>} 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
- *
- */
-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 { mapGetOrThrow } from "../util/check/get";
-import { populateFloat32Array } from "../util/jshelpers/data-filler";
-import { RingAccount, ringBigPaddingKeyMethod, ringKeyMethod } from "./ring-account";
-import { CirclePadding3DCache } from "../programs/line-on-globe/degree-padding-around-circle-3d";
-import { LineOnGlobeCache } from '../programs/line-on-globe/naive-accurate-flexible';
-import RangeRingAngleText from "./rangeringangletext";
-import { Z_ALPHA_MODE } from "../programs/line-on-globe/util";
-import { ENUM_HIDE } from "./enum";
-import { opacityCheck, mapGetOrThrow } from "../util/check/typecheck";
-import { sphereCoord } from "../util/geometry/index";
-const CIRCLE_FLAT_EDGE_COUNT = 362; // 360 + 2 for closing the circle and a cutting point
-/**
- *
- *
- * @typedef {string} centerID
- *
- * @typedef {Object} RangeRing
- * @property {string} ringID
- * @property {number} radius in range meters
- * @property {number} padding badding range in meter
- *
- *
- *  Array < centerID: string, long: number, lat: number, stepAngle: number, rgba: [4 numbers], rings: rings, hide, textHide
- * @typedef {Object} RangeRingsItem
- * @property {centerID} centerID
- * @property {number} long
- * @property {number} lat
- * @property {number} stepAngle
- * @property {number} altitude
- * @property {number} hide
- * @property {number} textHide
- * @property {number} rgba
- * @property {Array<RangeRing>} rings
- */
-class RangeRings {
-    constructor(id, { oneDegreePadding = true, showNumbers = true, numbersStyle = null, opacity = 1, zAlphaOnDegreePadding = Z_ALPHA_MODE.ON } = {}, { textDataPreAdaptor = null, textWritersMap = new Map() } = {}) {
-        this.id = id;
-        this._oneDegreePadding = oneDegreePadding;
-        this._zAlphaOnDegreePadding = zAlphaOnDegreePadding;
-        this._showNumbers = showNumbers;
-        this._numbersStyle = numbersStyle;
-        this._opacity = opacity;
-        this._ringAccount = new RingAccount();
-        this._textWritersMap = textWritersMap;
-        this._textDataPreAdaptor = textDataPreAdaptor;
-        this._textWritersMap.forEach((textWriter) => textWriter.setKeyAdaptor((item) => item.__identity__));
-    }
-    // USER API
-    /**
-     * @method updateCentersCoordinate @param { Array < { centerID, long,lat } >} items
-    */
-    updateCentersCoordinate(items, { textWriterIDs = [] } = {}) {
-        // Algorithm
-        /**
-         * 1. ask centerRingAccount for existing rings COORDINATE RELATED KEYS
-         * 2. update centers
-         * 3. update buffer orchestators
-         */
-        this._ringAccount.updateCentersCoordinate(items);
-        const { globe, bufferOrchestrator, bufferManagersCompMap, paddingBufferOrchestrator, bufferManagersCompMapPadding } = this;
-        for (const { centerID } of items) {
-            const datas = this.__reconstructCentralRings(centerID);
-            bufferOrchestrator.updateBulk(datas, bufferManagersCompMap, ["centerCoords3d", "centerCoords2dflat", "targetCoords3d", "centerCoords2dflatForPadding"]);
-            const paddingDatas = this.__reconstructCentralRingsBigPaddings(centerID);
-            paddingBufferOrchestrator.updateBulk(paddingDatas, bufferManagersCompMapPadding, ["circlePoint2d", "paddingPoint2d", "circlePoint3d", "paddingPoint3d"]);
-        }
-        this.paddingTextPlugin?.updateCentersXY(items);
-        this.__contextTextWriterUpdate(items.map(({ centerID }) => centerID), textWriterIDs);
-        globe.DrawRender();
-    }
-    /**
-     * @method insertBulk
-     * @param { Array < RangeRingsItem> } items
-    */
-    insertBulk(items, { textWriterIDs = [] } = {}) {
-        // Algorithm
-        /**
-         * 1 ask centerRingAccount for existing rings
-         * 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;
-        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.paddingTextPlugin?.insertBulk(items);
-        this.__contextTextWriterUpdate(items.map(({ centerID }) => centerID), textWriterIDs);
-        globe.DrawRender();
-    }
-    /**
-     * @method updateCentersColor @param { Array < { centerID, rgba: [4 numbers] } >} centerColors
-    */
-    updateCentersColor(centerColors, { textWriterIDs = [] } = {}) {
-        // 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"]);
-        }
-        this.__contextTextWriterUpdate(centerColors.map(({ centerID }) => centerID), textWriterIDs);
-        globe.DrawRender();
-    }
-    /**
-     *
-     * @method updateCentersHide @param { Array < { centerID, hide, textHide } >} centerHides
-    */
-    updateCentersHide(centerHides, { textWriterIDs = [] } = {}) {
-        // 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 paddingDatas0 = this.__reconstructCentralRings(centerID);
-            bufferOrchestrator.updateBulk(paddingDatas0, bufferManagersCompMap, ["radius3dsmall", "centerCoords2dflatForPadding"]);
-            const paddingDatas = this.__reconstructCentralPaddingProperties(centerID);
-            paddingBufferOrchestrator.updateBulk(paddingDatas, bufferManagersCompMapPadding, ["rgba"]);
-        }
-        this.paddingTextPlugin?.updateCentersHide(centerHides);
-        this.__contextTextWriterUpdate(centerHides.map(({ centerID }) => centerID), textWriterIDs);
-        globe.DrawRender();
-        /**
-         * Complicated
-         * 1. ask centerRingAccount for existing rings HIDE KEYS
-         * 2. delete from buffer orchestators
-         * 3. mark centers as hidden
-         */
-    }
-    /**
-     * @param {Array<string>} textWriterIDs textWritersMap keys to be used for writing text.
-     * @param {Array<string>} itemKeys if empty, all texts will be updated. Use  {@link ringKeyMethod} method to get keys
-     */
-    updateText(textWriterIDs = [], itemKeys = null) {
-        const textWritersMap = textWriterGetOrThrow(this._textWritersMap, textWriterIDs);
-        if (itemKeys === null) {
-            this._ringAccount.updateAllText(textWritersMap, this._textDataPreAdaptor);
-            this.globe.DrawRender();
-        }
-        else {
-            itemKeys.forEach((key) => {
-                const item = this._ringAccount.getCenter(key);
-                if (item === undefined)
-                    throw new Error("Center not found");
-                const textData = this._textDataPreAdaptor(item);
-                textWritersMap.forEach((textWriter) => textWriter.insertText(textData));
-            });
-        }
-        this.globe.DrawRender();
-    }
-    /**
-     * @method removeCenters @param { Array < { centerID } >} centerIDs
-    */
-    removeCenters(centerIDs) {
-        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);
-                this._textWritersMap.forEach((textWriter) => textWriter.deleteTextBulk(existingKeys));
-            }
-        }
-        for (const centerID of centerIDs) {
-            const paddingKeys = _ringAccount.ringBigPaddingKeys(centerID);
-            if (paddingKeys.length) {
-                paddingBufferOrchestrator.deleteBulk(paddingKeys, bufferManagersCompMapPadding);
-            }
-        }
-        this.paddingTextPlugin?.removeCenters(centerIDs);
-        this._ringAccount.removeCenters(centerIDs);
-        globe.DrawRender();
-    }
-    /**
-     * @method setOpacity @param { number } opacity
-    */
-    setOpacity(opacity) {
-        opacityCheck(opacity);
-        this._opacity = opacity;
-        this.paddingTextPlugin?.setOpacity(opacity);
-        this._textWritersMap.forEach((writer) => writer.setOpacity(opacity));
-        this.globe.DrawRender();
-    }
-    /**
-     * @method setOneDegreePaddingOn //  performance consuming, might be removed
-    */
-    setOneDegreePaddingOn(isOneDegreePaddingOn) {
-        if (typeof isOneDegreePaddingOn !== "boolean")
-            throw new Error("Invalid value for one degree padding");
-        if (this._oneDegreePadding === isOneDegreePaddingOn)
-            return;
-        this._oneDegreePadding = isOneDegreePaddingOn;
-        this.globe.DrawRender();
-    }
-    setZAlphaOnDegreePadding(zAlphaOnDegreePadding) {
-        if (zAlphaOnDegreePadding !== 0 && zAlphaOnDegreePadding !== 1)
-            throw new Error("Invalid value for zAlphaOnDegreePadding");
-        if (this._zAlphaOnDegreePadding === zAlphaOnDegreePadding)
-            return;
-        this._zAlphaOnDegreePadding = zAlphaOnDegreePadding;
-        this.globe.DrawRender();
-    }
-    // PRIVATE METHODS
-    _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._lineOnGlobe_bigPadding = LineOnGlobeCache.get(globe);
-    }
-    _initBufferManagers() {
-        const { gl } = 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),
-                }],
-            ["targetCoords3d", {
-                    'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
-                    'adaptor': (item) => new Float32Array(item.targetCoords3d),
-                }],
-            ["rgba", {
-                    'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
-                    'adaptor': (item) => new Float32Array(item.hide === ENUM_HIDE.HIDE ? [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) => {
-                        if (item.hide === ENUM_HIDE.HIDE_1_DEGREE_PADDINGS)
-                            return new Float32Array([item.radius]);
-                        return 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, CIRCLE_FLAT_EDGE_COUNT * 2, { bufferType, initialCapacity }),
-                    'adaptor': (item) => item.centerCoords2dflatForPadding,
-                }],
-            ["centerCoords2dflat", {
-                    'bufferManager': new BufferManager(gl, CIRCLE_FLAT_EDGE_COUNT * 2, { bufferType, initialCapacity }),
-                    'adaptor': (item) => item.centerCoords2dflat,
-                }],
-            ["rgbaMercator", {
-                    'bufferManager': new BufferManager(gl, 4 * CIRCLE_FLAT_EDGE_COUNT, { bufferType, initialCapacity }),
-                    'adaptor': (item) => populateFloat32Array.fillWithListData(CIRCLE_FLAT_EDGE_COUNT, item.hide === ENUM_HIDE.HIDE ? [0, 0, 0, 0] : item.rgba),
-                }],
-            ["circleDashAngleMercator", {
-                    'bufferManager': new BufferManager(gl, CIRCLE_FLAT_EDGE_COUNT, { bufferType, initialCapacity }),
-                    'adaptor': (item) => populateFloat32Array.fillFloat32Array(CIRCLE_FLAT_EDGE_COUNT, 1),
-                }],
-            ["dashOpacityMercator", {
-                    'bufferManager': new BufferManager(gl, CIRCLE_FLAT_EDGE_COUNT, { bufferType, initialCapacity }),
-                    'adaptor': (item) => populateFloat32Array.fillFloat32Array(CIRCLE_FLAT_EDGE_COUNT, 1),
-                }],
-        ]);
-        const obj = function (bufferManagerComp, divisor = 1) {
-            if (bufferManagerComp === null)
-                return null;
-            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", "targetCoords3d", "rgba", "circleDashAngle", "dashOpacity"].map(key => obj(this.bufferManagersCompMap.get(key))));
-        this._oneDegree2DPaddingVao = 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([
-            ["circlePoint2d", {
-                    'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
-                    'adaptor': (item) => item.circlePoint2d,
-                }],
-            ["paddingPoint2d", {
-                    'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
-                    'adaptor': (item) => item.paddingPoint2d,
-                }],
-            ["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._bigPadding3dFlatVAO = this._lineOnGlobe_bigPadding.createVAO(//"dashRatio", "dashOpacity"
-        ...["circlePoint2d", "circlePoint3d", "paddingPoint2d", "paddingPoint3d", null, null, "rgba",].map(key => (key === null) ? null : obj(this.bufferManagersCompMapPadding.get(key))));
-        this._padding3dOneDegreeVao = this._padding3dProgram.createVAO(...["centerCoords3d", "radius3d", "radius3dsmall", "rgba"].map(key => obj(this.bufferManagersCompMap.get(key))));
-    }
-    // IMPLICIT METHODS
-    __reconstructCentralRingsBigPaddings(centerID) {
-        const { globe } = this;
-        const centerItem = this._ringAccount.getCenter(centerID);
-        if (centerItem === undefined)
-            throw new Error("Center not found");
-        const { long, lat, stepAngle, rgba, rings, hide = 0, textHide = 0, altitude: centerAltitude = 0 } = centerItem;
-        const result = [];
-        const color = hide === 1 ? new Float32Array([0, 0, 0, 0]) : new Float32Array(rgba);
-        for (const { ringID, radius, padding, altitude = centerAltitude } of rings) {
-            let azimuthAngle = 0;
-            while (azimuthAngle < 360) {
-                const circlePoint = globe.Math.FindPointByPolar(long, lat, radius, azimuthAngle); // long lat
-                const paddingPoint = globe.Math.FindPointByPolar(long, lat, radius - padding, azimuthAngle); // long lat
-                result.push({
-                    key: ringBigPaddingKeyMethod(centerID, ringID, azimuthAngle),
-                    circlePoint2d: new Float32Array(globe.api_GetMercator2DPoint(circlePoint.long, circlePoint.lat)),
-                    paddingPoint2d: new Float32Array(globe.api_GetMercator2DPoint(paddingPoint.long, paddingPoint.lat)),
-                    circlePoint3d: sphereCoord(circlePoint.long, circlePoint.lat, globe, altitude / 1000),
-                    paddingPoint3d: sphereCoord(paddingPoint.long, paddingPoint.lat, globe, altitude / 1000),
-                    rgba: color,
-                    hide,
-                    textHide
-                });
-                azimuthAngle += stepAngle;
-            }
-        }
-        return result;
-    }
-    __reconstructCentralRings(centerID) {
-        const { globe } = this;
-        const centerItem = this._ringAccount.getCenter(centerID);
-        if (centerItem === undefined)
-            throw new Error("Center not found");
-        const { long, lat, rgba, rings, hide = 0, textHide = 0, altitude: centralAltitude = 0 } = centerItem;
-        const centerCoords3d = sphereCoord(long, lat, globe, centralAltitude / 1000);
-        const result = [];
-        for (const { ringID, radius, padding, __identity__, altitude = centralAltitude } of rings) {
-            const key = __identity__;
-            const centerCoords2dflat = centerCoords2dflatDataCreatorWithRadius(globe, long, lat, radius, { edgeCount: CIRCLE_FLAT_EDGE_COUNT });
-            const radiusPadding = hide === ENUM_HIDE.HIDE_1_DEGREE_PADDINGS ? radius : radius - padding / 3;
-            const targetPoint = globe.Math.FindPointByPolar(long, lat, radius, 0); // long lat
-            const targetCoords3d = sphereCoord(targetPoint.long, targetPoint.lat, globe, altitude / 1000);
-            const centerCoords2dflatForPadding = centerCoords2dflatDataCreatorWithRadius(globe, long, lat, radiusPadding, { edgeCount: CIRCLE_FLAT_EDGE_COUNT });
-            result.push({
-                key,
-                centerCoords3d,
-                targetCoords3d,
-                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 { 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, __identity__ } of rings) {
-            const key = __identity__;
-            result.push({
-                key,
-                rgba: hide === ENUM_HIDE.HIDE ? new Float32Array([0, 0, 0, 0]) : rgba,
-                textHide
-            });
-        }
-        return result;
-    }
-    // GLOBE API
-    init(globe, gl) {
-        this.globe = globe;
-        this.gl = gl;
-        this._initPrograms();
-        this._initBufferManagers();
-        if (this._showNumbers) {
-            this.paddingTextPlugin = new RangeRingAngleText(globe, this.id + "text", { style: this._numbersStyle, opacity: this._opacity });
-            delete this._numbersStyle;
-        }
-    }
-    draw3D() {
-        const { globe, gl, _circleProgram2D, _circleProgram3D, _padding2dProgram, _padding3dProgram, _lineOnGlobe_bigPadding, _circle2DVao, _circle3DVao, _oneDegree2DPaddingVao, _padding3dOneDegreeVao, _bigPadding3dFlatVAO, bufferOrchestrator, paddingBufferOrchestrator, _opacity, _oneDegreePadding, _zAlphaOnDegreePadding } = 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, _zAlphaOnDegreePadding);
-        }
-        else {
-            _circleProgram2D.draw(_circle2DVao, bufferOrchestrator.length, CIRCLE_FLAT_EDGE_COUNT, _opacity);
-            // _padding2dProgram.draw(bigPaddingVAO, paddingBufferOrchestrator.length, _opacity);
-            if (_oneDegreePadding)
-                _padding2dProgram.draw(_oneDegree2DPaddingVao, bufferOrchestrator.length * CIRCLE_FLAT_EDGE_COUNT, _opacity, _zAlphaOnDegreePadding);
-        }
-        const drawOptions = { drawRange: { first: 0, count: paddingBufferOrchestrator.length } };
-        _lineOnGlobe_bigPadding.draw(_bigPadding3dFlatVAO, drawOptions, _opacity);
-        this._textWritersMap.forEach((textWriter) => textWriter.draw());
-        gl.enable(gl.DEPTH_TEST);
-    }
-    free() {
-        if (this._isFreed)
-            return;
-        const { globe } = this;
-        this.bufferManagersCompMap.forEach(({ bufferManager }) => bufferManager.free());
-        this.bufferManagersCompMapPadding.forEach(({ bufferManager }) => bufferManager.free());
-        // delete vaos
-        this.gl.deleteVertexArray(this._circle2DVao);
-        this.gl.deleteVertexArray(this._circle3DVao);
-        this.gl.deleteVertexArray(this._oneDegree2DPaddingVao);
-        this.gl.deleteVertexArray(this._padding3dOneDegreeVao);
-        this.gl.deleteVertexArray(this._bigPadding3dFlatVAO);
-        // delete programs
-        CircleCache2D.release(globe);
-        CircleCache3D.release(globe);
-        LinesColorInstancedFlatCache.release(globe);
-        CirclePadding3DCache.release(globe);
-        LineOnGlobeCache.release(globe);
-        this._circleProgram2D = null;
-        this._circleProgram3D = null;
-        this._padding2dProgram = null;
-        this._padding3dProgram = null;
-        this._lineOnGlobe_bigPadding = null;
-        this.paddingTextPlugin?.free();
-        this._isFreed = true;
-    }
-    __contextTextWriterUpdate(centerIDs, textWriterIDs = null) {
-        let textWriters = null;
-        if (textWriterIDs === null) {
-            textWriters = Array.from(this._textWritersMap.values());
-        }
-        else if (textWriterIDs.length === 0) {
-            return;
-        }
-        else {
-            textWriters = textWriterGetOrThrow(this._textWritersMap, textWriterIDs);
-        }
-        centerIDs.forEach((centerID) => { this._ringAccount.textUpdate(centerID, textWriters, this._textDataPreAdaptor); });
-    }
-}
-const textWriterGetOrThrow = mapGetOrThrow("textWriterIDs is invalid");
-export { RangeRings, Z_ALPHA_MODE };
+/**
+ * @typedef RangeRingData
+ * @property {number} centerX
+ * @property {number} centerY
+ * @property {Array<Ring>} rings
+ * 
+ * @typedef Ring
+ * @property {number} radius
+ * @property {number} padding
+ * @property {[number, number, number]} color
+ * 
+ * 
+ * @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 updateCentersCoordinate    @param {Array<{centerID, long,lat}>} 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
+ * 
+ */
+
+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 { mapGetOrThrow } from "../util/check/get";
+import { populateFloat32Array } from "../util/jshelpers/data-filler";
+import { RingAccount, ringBigPaddingKeyMethod, ringKeyMethod } from "./ring-account";
+import { CirclePadding3DCache } from "../programs/line-on-globe/degree-padding-around-circle-3d";
+import { LineOnGlobeCache } from '../programs/line-on-globe/naive-accurate-flexible';
+import RangeRingAngleText from "./rangeringangletext";
+import { Z_ALPHA_MODE } from "../programs/line-on-globe/util";
+import { ENUM_HIDE } from "./enum";
+import { opacityCheck, mapGetOrThrow } from "../util/check/typecheck";
+import { sphereCoord } from "../util/geometry/index"
+const CIRCLE_FLAT_EDGE_COUNT = 362; // 360 + 2 for closing the circle and a cutting point
+
+
+
+/**
+ * 
+ * 
+ * @typedef {string} centerID
+ * 
+ * @typedef {Object} RangeRing
+ * @property {string} ringID
+ * @property {number} radius in range meters
+ * @property {number} padding badding range in meter
+ * 
+ * 
+ *  Array < centerID: string, long: number, lat: number, stepAngle: number, rgba: [4 numbers], rings: rings, hide, textHide
+ * @typedef {Object} RangeRingsItem
+ * @property {centerID} centerID
+ * @property {number} long
+ * @property {number} lat
+ * @property {number} stepAngle
+ * @property {number} altitude
+ * @property {number} hide
+ * @property {number} textHide
+ * @property {number} rgba
+ * @property {Array<RangeRing>} rings
+ */
+
+class RangeRings {
+    constructor(id,
+        {
+            oneDegreePadding = true, showNumbers = true, numbersStyle = null, opacity = 1, zAlphaOnDegreePadding = Z_ALPHA_MODE.ON
+        } = {},
+        {
+            textDataPreAdaptor = null,
+            textWritersMap = new Map()
+        } = {}) {
+        this.id = id;
+        this._oneDegreePadding = oneDegreePadding;
+        this._zAlphaOnDegreePadding = zAlphaOnDegreePadding;
+        this._showNumbers = showNumbers;
+        this._numbersStyle = numbersStyle;
+        this._opacity = opacity;
+        this._ringAccount = new RingAccount();
+        this._textWritersMap = textWritersMap;
+        this._textDataPreAdaptor = textDataPreAdaptor;
+        this._textWritersMap.forEach((textWriter) => textWriter.setKeyAdaptor((item) => item.__identity__));
+    }
+
+
+    // USER API
+
+    /**
+     * @method updateCentersCoordinate @param { Array < { centerID, long,lat } >} items 
+    */
+    updateCentersCoordinate(items, { textWriterIDs = [] } = {}) {
+        // Algorithm
+        /**
+         * 1. ask centerRingAccount for existing rings COORDINATE RELATED KEYS
+         * 2. update centers
+         * 3. update buffer orchestators
+         */
+
+        this._ringAccount.updateCentersCoordinate(items);
+        const { globe,
+            bufferOrchestrator, bufferManagersCompMap,
+            paddingBufferOrchestrator,
+            bufferManagersCompMapPadding
+        } = this;
+        for (const { centerID } of items) {
+            const datas = this.__reconstructCentralRings(centerID);
+            bufferOrchestrator.updateBulk(datas, bufferManagersCompMap, ["centerCoords3d", "centerCoords2dflat", "targetCoords3d", "centerCoords2dflatForPadding"]);
+            const paddingDatas = this.__reconstructCentralRingsBigPaddings(centerID);
+            paddingBufferOrchestrator.updateBulk(paddingDatas, bufferManagersCompMapPadding, ["circlePoint2d", "paddingPoint2d", "circlePoint3d", "paddingPoint3d"]);
+        }
+        this.paddingTextPlugin?.updateCentersXY(items);
+
+        this.__contextTextWriterUpdate(items.map(({ centerID }) => centerID), textWriterIDs);
+        globe.DrawRender();
+    }
+
+    /**
+     * @method insertBulk
+     * @param { Array < RangeRingsItem> } items
+    */
+    insertBulk(items, { textWriterIDs = [] } = {}) {
+        // Algorithm
+        /**
+         * 1 ask centerRingAccount for existing rings 
+         * 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;
+        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.paddingTextPlugin?.insertBulk(items);
+        this.__contextTextWriterUpdate(items.map(({ centerID }) => centerID), textWriterIDs);
+        globe.DrawRender();
+    }
+
+
+
+
+    /**
+     * @method updateCentersColor @param { Array < { centerID, rgba: [4 numbers] } >} centerColors
+    */
+    updateCentersColor(centerColors, { textWriterIDs = [] } = {}) {
+        // 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"]);
+        }
+        this.__contextTextWriterUpdate(centerColors.map(({ centerID }) => centerID), textWriterIDs);
+        globe.DrawRender();
+    }
+
+    /**
+     * 
+     * @method updateCentersHide @param { Array < { centerID, hide, textHide } >} centerHides
+    */
+    updateCentersHide(centerHides, { textWriterIDs = [] } = {}) {
+        // 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 paddingDatas0 = this.__reconstructCentralRings(centerID);
+            bufferOrchestrator.updateBulk(paddingDatas0, bufferManagersCompMap, ["radius3dsmall", "centerCoords2dflatForPadding"]);
+
+            const paddingDatas = this.__reconstructCentralPaddingProperties(centerID)
+            paddingBufferOrchestrator.updateBulk(paddingDatas, bufferManagersCompMapPadding, ["rgba"]);
+        }
+        this.paddingTextPlugin?.updateCentersHide(centerHides);
+        this.__contextTextWriterUpdate(centerHides.map(({ centerID }) => centerID), textWriterIDs);
+        globe.DrawRender();
+        /**
+         * Complicated
+         * 1. ask centerRingAccount for existing rings HIDE KEYS
+         * 2. delete from buffer orchestators
+         * 3. mark centers as hidden
+         */
+    }
+
+
+    /**
+     * @param {Array<string>} textWriterIDs textWritersMap keys to be used for writing text.
+     * @param {Array<string>} itemKeys if empty, all texts will be updated. Use  {@link ringKeyMethod} method to get keys
+     */
+    updateText(textWriterIDs = [], itemKeys = null) {
+        const textWritersMap = textWriterGetOrThrow(this._textWritersMap, textWriterIDs);
+        if (itemKeys === null) {
+            this._ringAccount.updateAllText(textWritersMap, this._textDataPreAdaptor);
+            this.globe.DrawRender();
+        } else {
+            itemKeys.forEach((key) => {
+                const item = this._ringAccount.getCenter(key);
+                if (item === undefined) throw new Error("Center not found");
+                const textData = this._textDataPreAdaptor(item);
+                textWritersMap.forEach((textWriter) => textWriter.insertText(textData));
+            });
+        }
+        this.globe.DrawRender();
+    }
+
+
+
+
+    /**
+     * @method removeCenters @param { Array < { centerID } >} centerIDs
+    */
+    removeCenters(centerIDs) {
+        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);
+                this._textWritersMap.forEach((textWriter) => textWriter.deleteTextBulk(existingKeys));
+
+            }
+        }
+        for (const centerID of centerIDs) {
+            const paddingKeys = _ringAccount.ringBigPaddingKeys(centerID);
+            if (paddingKeys.length) {
+                paddingBufferOrchestrator.deleteBulk(paddingKeys, bufferManagersCompMapPadding);
+            }
+        }
+        this.paddingTextPlugin?.removeCenters(centerIDs);
+        this._ringAccount.removeCenters(centerIDs);
+        globe.DrawRender();
+    }
+
+    /**
+     * @method setOpacity @param { number } opacity
+    */
+    setOpacity(opacity) {
+        opacityCheck(opacity);
+        this._opacity = opacity;
+        this.paddingTextPlugin?.setOpacity(opacity);
+        this._textWritersMap.forEach((writer) => writer.setOpacity(opacity));
+        this.globe.DrawRender();
+    }
+
+
+    /**
+     * @method setOneDegreePaddingOn //  performance consuming, might be removed
+    */
+    setOneDegreePaddingOn(isOneDegreePaddingOn) {
+        if (typeof isOneDegreePaddingOn !== "boolean") throw new Error("Invalid value for one degree padding");
+        if (this._oneDegreePadding === isOneDegreePaddingOn) return;
+        this._oneDegreePadding = isOneDegreePaddingOn;
+        this.globe.DrawRender();
+    }
+
+
+    setZAlphaOnDegreePadding(zAlphaOnDegreePadding) {
+        if (zAlphaOnDegreePadding !== 0 && zAlphaOnDegreePadding !== 1) throw new Error("Invalid value for zAlphaOnDegreePadding");
+        if (this._zAlphaOnDegreePadding === zAlphaOnDegreePadding) return;
+        this._zAlphaOnDegreePadding = zAlphaOnDegreePadding;
+        this.globe.DrawRender();
+    }
+
+
+    // PRIVATE METHODS
+
+    _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._lineOnGlobe_bigPadding = LineOnGlobeCache.get(globe);
+
+    }
+
+
+    _initBufferManagers() {
+        const { gl } = 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),
+                }],
+                ["targetCoords3d", {
+                    'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
+                    'adaptor': (item) => new Float32Array(item.targetCoords3d),
+                }],
+
+                ["rgba", {
+                    'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
+                    'adaptor': (item) => new Float32Array(item.hide === ENUM_HIDE.HIDE ? [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) => {
+                        if (item.hide === ENUM_HIDE.HIDE_1_DEGREE_PADDINGS) return new Float32Array([item.radius]);
+                        return 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, CIRCLE_FLAT_EDGE_COUNT * 2, { bufferType, initialCapacity }),
+                    'adaptor': (item) => item.centerCoords2dflatForPadding,
+                }],
+                ["centerCoords2dflat", {
+                    'bufferManager': new BufferManager(gl, CIRCLE_FLAT_EDGE_COUNT * 2, { bufferType, initialCapacity }),
+                    'adaptor': (item) => item.centerCoords2dflat,
+                }],
+                ["rgbaMercator", {
+                    'bufferManager': new BufferManager(gl, 4 * CIRCLE_FLAT_EDGE_COUNT, { bufferType, initialCapacity }),
+                    'adaptor': (item) => populateFloat32Array.fillWithListData(CIRCLE_FLAT_EDGE_COUNT, item.hide === ENUM_HIDE.HIDE ? [0, 0, 0, 0] : item.rgba),
+                }],
+                ["circleDashAngleMercator", {
+                    'bufferManager': new BufferManager(gl, CIRCLE_FLAT_EDGE_COUNT, { bufferType, initialCapacity }),
+                    'adaptor': (item) => populateFloat32Array.fillFloat32Array(CIRCLE_FLAT_EDGE_COUNT, 1),
+                }],
+                ["dashOpacityMercator", {
+                    'bufferManager': new BufferManager(gl, CIRCLE_FLAT_EDGE_COUNT, { bufferType, initialCapacity }),
+                    'adaptor': (item) => populateFloat32Array.fillFloat32Array(CIRCLE_FLAT_EDGE_COUNT, 1),
+                }],
+            ]
+        );
+
+        const obj = function (bufferManagerComp, divisor = 1) {
+            if (bufferManagerComp === null) return null;
+            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", "targetCoords3d", "rgba", "circleDashAngle", "dashOpacity"].map(key => obj(this.bufferManagersCompMap.get(key)))
+        );
+
+        this._oneDegree2DPaddingVao = 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(
+            [
+                ["circlePoint2d", {
+                    'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                    'adaptor': (item) => item.circlePoint2d,
+                }],
+                ["paddingPoint2d", {
+                    'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                    'adaptor': (item) => item.paddingPoint2d,
+                }],
+                ["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._bigPadding3dFlatVAO = this._lineOnGlobe_bigPadding.createVAO(//"dashRatio", "dashOpacity"
+            ...["circlePoint2d", "circlePoint3d", "paddingPoint2d", "paddingPoint3d", null, null, "rgba",].map(key =>
+                (key === null) ? null : obj(this.bufferManagersCompMapPadding.get(key)))
+        );
+
+        this._padding3dOneDegreeVao = this._padding3dProgram.createVAO(
+            ...["centerCoords3d", "radius3d", "radius3dsmall", "rgba"].map(key => obj(this.bufferManagersCompMap.get(key)))
+        );
+
+
+
+    }
+
+    // IMPLICIT METHODS
+
+    __reconstructCentralRingsBigPaddings(centerID) {
+        const { globe } = this;
+        const centerItem = this._ringAccount.getCenter(centerID);
+        if (centerItem === undefined) throw new Error("Center not found");
+        const { long, lat, stepAngle, rgba, rings, hide = 0, textHide = 0, altitude: centerAltitude = 0 } = centerItem;
+        const result = [];
+        const color = hide === 1 ? new Float32Array([0, 0, 0, 0]) : new Float32Array(rgba)
+        for (const { ringID, radius, padding, altitude = centerAltitude } of rings) {
+            let azimuthAngle = 0;
+            while (azimuthAngle < 360) {
+                const circlePoint = globe.Math.FindPointByPolar(long, lat, radius, azimuthAngle); // long lat
+                const paddingPoint = globe.Math.FindPointByPolar(long, lat, radius - padding, azimuthAngle); // long lat
+                result.push({
+                    key: ringBigPaddingKeyMethod(centerID, ringID, azimuthAngle),
+                    circlePoint2d: new Float32Array(globe.api_GetMercator2DPoint(circlePoint.long, circlePoint.lat)),
+                    paddingPoint2d: new Float32Array(globe.api_GetMercator2DPoint(paddingPoint.long, paddingPoint.lat)),
+                    circlePoint3d: sphereCoord(circlePoint.long, circlePoint.lat, globe, altitude / 1000),
+                    paddingPoint3d: sphereCoord(paddingPoint.long, paddingPoint.lat, globe, altitude / 1000),
+                    rgba: color,
+                    hide,
+                    textHide
+                });
+                azimuthAngle += stepAngle;
+
+            }
+        }
+        return result;
+    }
+
+
+    __reconstructCentralRings(centerID) {
+        const { globe } = this;
+        const centerItem = this._ringAccount.getCenter(centerID);
+        if (centerItem === undefined) throw new Error("Center not found");
+
+        const { long, lat, rgba, rings, hide = 0, textHide = 0, altitude: centralAltitude = 0 } = centerItem;
+        const centerCoords3d = sphereCoord(long, lat, globe, centralAltitude / 1000);
+
+        const result = [];
+
+        for (const { ringID, radius, padding, __identity__, altitude = centralAltitude } of rings) {
+            const key = __identity__;
+
+            const centerCoords2dflat = centerCoords2dflatDataCreatorWithRadius(globe, long, lat, radius, { edgeCount: CIRCLE_FLAT_EDGE_COUNT });
+            const radiusPadding = hide === ENUM_HIDE.HIDE_1_DEGREE_PADDINGS ? radius : radius - padding / 3;
+            const targetPoint = globe.Math.FindPointByPolar(long, lat, radius, 0); // long lat
+            const targetCoords3d = sphereCoord(targetPoint.long, targetPoint.lat, globe, altitude / 1000);
+            const centerCoords2dflatForPadding = centerCoords2dflatDataCreatorWithRadius(globe, long, lat, radiusPadding, { edgeCount: CIRCLE_FLAT_EDGE_COUNT });
+            result.push({
+                key,
+                centerCoords3d,
+                targetCoords3d,
+                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 { 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, __identity__ } of rings) {
+            const key = __identity__;
+            result.push({
+                key,
+                rgba: hide === ENUM_HIDE.HIDE ? new Float32Array([0, 0, 0, 0]) : rgba,
+                textHide
+            });
+        }
+        return result;
+    }
+
+
+
+    // GLOBE API
+
+
+    init(globe, gl) {
+        this.globe = globe;
+        this.gl = gl;
+        this._initPrograms();
+        this._initBufferManagers();
+        if (this._showNumbers) {
+            this.paddingTextPlugin = new RangeRingAngleText(globe, this.id + "text", { style: this._numbersStyle, opacity: this._opacity });
+            delete this._numbersStyle;
+        }
+    }
+
+
+
+    draw3D() {
+        const {
+            globe, gl,
+            _circleProgram2D, _circleProgram3D, _padding2dProgram, _padding3dProgram, _lineOnGlobe_bigPadding,
+            _circle2DVao, _circle3DVao, _oneDegree2DPaddingVao, _padding3dOneDegreeVao, _bigPadding3dFlatVAO,
+            bufferOrchestrator, paddingBufferOrchestrator,
+            _opacity, _oneDegreePadding, _zAlphaOnDegreePadding } = 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, _zAlphaOnDegreePadding);
+        } else {
+            _circleProgram2D.draw(_circle2DVao, bufferOrchestrator.length, CIRCLE_FLAT_EDGE_COUNT, _opacity);
+            // _padding2dProgram.draw(bigPaddingVAO, paddingBufferOrchestrator.length, _opacity);
+            if (_oneDegreePadding) _padding2dProgram.draw(_oneDegree2DPaddingVao, bufferOrchestrator.length * CIRCLE_FLAT_EDGE_COUNT, _opacity, _zAlphaOnDegreePadding);
+        }
+        const drawOptions = { drawRange: { first: 0, count: paddingBufferOrchestrator.length } };
+        _lineOnGlobe_bigPadding.draw(_bigPadding3dFlatVAO, drawOptions, _opacity);
+        this._textWritersMap.forEach((textWriter) => textWriter.draw());
+        gl.enable(gl.DEPTH_TEST);
+    }
+
+    free() {
+        if (this._isFreed) return;
+        const { globe } = this;
+        this.bufferManagersCompMap.forEach(({ bufferManager }) => bufferManager.free());
+        this.bufferManagersCompMapPadding.forEach(({ bufferManager }) => bufferManager.free());
+        // delete vaos
+        this.gl.deleteVertexArray(this._circle2DVao);
+        this.gl.deleteVertexArray(this._circle3DVao);
+        this.gl.deleteVertexArray(this._oneDegree2DPaddingVao);
+        this.gl.deleteVertexArray(this._padding3dOneDegreeVao);
+        this.gl.deleteVertexArray(this._bigPadding3dFlatVAO);
+        // delete programs
+        CircleCache2D.release(globe);
+        CircleCache3D.release(globe);
+        LinesColorInstancedFlatCache.release(globe);
+        CirclePadding3DCache.release(globe);
+        LineOnGlobeCache.release(globe);
+        this._circleProgram2D = null;
+        this._circleProgram3D = null;
+        this._padding2dProgram = null;
+        this._padding3dProgram = null;
+        this._lineOnGlobe_bigPadding = null;
+        this.paddingTextPlugin?.free();
+        this._isFreed = true;
+    }
+
+
+    __contextTextWriterUpdate(centerIDs, textWriterIDs = null) {
+        let textWriters = null;
+        if (textWriterIDs === null) {
+            textWriters = Array.from(this._textWritersMap.values());
+        } else if (textWriterIDs.length === 0) {
+            return
+        } else {
+            textWriters = textWriterGetOrThrow(this._textWritersMap, textWriterIDs);
+        }
+        centerIDs.forEach((centerID) => { this._ringAccount.textUpdate(centerID, textWriters, this._textDataPreAdaptor); });
+    }
+}
+
+
+const textWriterGetOrThrow = mapGetOrThrow("textWriterIDs is invalid")
+
+export { RangeRings, Z_ALPHA_MODE };