@pirireis/webglobeplugins 1.0.2 → 1.0.3

package/semiplugins/shape-on-terrain/{padding-1-degree.ts → padding-1-degree.js}

@@ -1,713 +1,539 @@
-//      One Degree Padding
-/**
- * 2d coordinates are loaded ones
- * 3d coordinates are calculated on the fly.
- *
- * 2d paddings are fixed size
- * 3d paddings gets shortened as lod increases
- *
- * color buffer is shared and does not change on unless insert or delete
- * changing color can be done by re inserting
- *
- *
- *
- */
-
-import {
-    Globe,
-    GlobeChanges,
-    Meter,
-    Color,
-    BUFFER_TYPE,
-    UBOHandler,
-    ColorRatio,
-    PluginInterface,
-    DrawRangeIndexParams,
-    LongLatDegree
-} from '../../types';
-import { SemiPluginInterface } from '../interface';
-import { BufferManagersMap } from '../../util/account/single-attribute-buffer-management/types';
-
-import { BufferManager } from '../../util/account/single-attribute-buffer-management/buffer-manager';
-
-import { BufferOrchestrator } from '../../util/account/single-attribute-buffer-management/buffer-orchestrator';
-
-import {
-    LineStripProgramCache,
-    LineProgram
-} from '../../programs/line-on-globe/linestrip/linestrip';
-import {
-    opacityCheck,
-    colorCheck
-} from '../../util/check/typecheck';
-import { FrameCounterTrigger } from '../../util/frame-counter-trigger';
-
-
-
-export type Padding1DegreeInput = {
-    key: string;
-    center: LongLatDegree;
-    radius: Meter;
-    heightFromGroundIn3D?: Meter; // optional, if not provided, defaultHeightFromGroundIn3D will be used
-    colorsRatios: ColorRatio[];
-};
-
-
-export type Padding1DegreePluginOptions = {
-    bufferType: BUFFER_TYPE;
-    variativeColorsOn: boolean;
-    defaultColor: Color;
-    defaultHeightFromGroundIn3D: Meter;
-    adativePaddingSize: boolean; // TODO : implement this
-    adaptiveOpacity: boolean; // TODO : implement this
-    isMSL: boolean;
-}
-
-const initialCapacity = 2; // initial capacity for the buffer managers
-
-// You'll need to define this type based on your requirements
-type InnerPadding1DegreeInput = {
-    key: string;
-    center: [number, number];
-    radius: number;
-    outerCoords: (LongLatDegree | null)[];
-    innerCoords: (LongLatDegree | null)[];
-    colorsRatios: ColorRatio[]; // optional, if not provided, defaultColor will be used
-    heightFromGroundIn3D: Meter;
-};
-
-
-// const _float32Array = new Float32Array(360 * 3 * 2).fill(NaN);
-
-export class Padding1DegreePlugin implements SemiPluginInterface, PluginInterface {
-    id: string;
-    globe: Globe | null = null;
-    private bufferOrchestrator: BufferOrchestrator;
-    private bufferManagerMap: BufferManagersMap;
-    private lineProgram: LineProgram | null = null;
-    private _innerPaddingRatio = 0.95; //
-    private _float32Array: Float32Array | null = null; // this is used to forward the data to the buffer manager
-    private _uboHandler: UBOHandler | null = null; // this is used to forward the data to the shader program
-    private _bufferNames: string[] = ["position2d", "position3d"];
-    private _vao: WebGLVertexArrayObject | null = null; // this is used to store the VAO for the plugin
-    private _freed: boolean = false; // this is used to check if the plugin is freed or not
-    private _userOpacity: number = 1;
-    private _adaptiveOpacityMultiplier: number = 1;
-    private _dataMap = new Map<string, InnerPadding1DegreeInput>();
-    private _options: Padding1DegreePluginOptions = {
-        bufferType: "STATIC_DRAW",
-        variativeColorsOn: false,
-        defaultColor: [1, 1, 1, 1], // white color
-        defaultHeightFromGroundIn3D: 0.1, // 10 cm from ground
-        adativePaddingSize: true, // if true, the padding size will be adaptive to the LOD
-        adaptiveOpacity: true, // if true, the opacity will be adaptive to the LOD
-        isMSL: false // if true, no elevation of terrain
-
-    };
-    private _frameCounterTrigger: FrameCounterTrigger | null = null;
-
-    constructor(id: string, options: Partial<Padding1DegreePluginOptions> | null = null) {
-        this.id = id;
-        this.bufferManagerMap = new Map();
-        this.lineProgram = null;
-        this._options = options ? { ...this._options, ...options } : this._options;
-        this.bufferOrchestrator = new BufferOrchestrator()
-
-        if (this._options.variativeColorsOn) {
-            this._bufferNames.push("color");
-        }
-    }
-
-
-
-    increaseSpace(amount: number): void {
-        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.bufferManagerMap!);
-    }
-
-
-    insertBulk(inputs: Padding1DegreeInput[]): void {
-        if (this.globe === null) {
-            console.warn("Globe is not initialized, cannot insert input");
-            return;
-        }
-        if (this._freed) {
-            console.warn("Plugin is freed, cannot insert input");
-            return;
-        }
-
-        const wrapper: [InnerPadding1DegreeInput | null] = [null]
-        this._float32Array = new Float32Array(360 * 4 * 4); // largest float32Array
-        let newItemCount = 0;
-        for (let i = 0; i < inputs.length; i++) {
-            if (!this._dataMap.has(inputs[i].key)) {
-                newItemCount++;
-            }
-        }
-        this.bufferOrchestrator.ensureSpace(newItemCount, this.bufferManagerMap!);
-        for (let i = 0; i < inputs.length; i++) {
-            const coords = preAdapter(this.globe, inputs[i], this._innerPaddingRatio, null);
-            const paddingInput = { ...inputs[i], ...coords } as InnerPadding1DegreeInput;
-            this._dataMap.set(paddingInput.key, paddingInput);
-            wrapper[0] = paddingInput;
-            this.bufferOrchestrator.insertBulk(wrapper, this.bufferManagerMap, this._bufferNames);
-        }
-        this._float32Array = null;
-        this.globe?.DrawRender();
-    }
-
-
-    updateColorRatios(key: string, colorRatios: ColorRatio[], drawRender: boolean = true): void {
-        if (this._freed) {
-            console.warn("Plugin is freed, cannot update color");
-            return;
-        }
-        if (this.globe === null) {
-            console.warn("Globe is not initialized, cannot update color");
-            return;
-        }
-        if (!this._options.variativeColorsOn) {
-            console.warn("VariativeColors are not enabled");
-            return;
-        }
-        if (!this._dataMap.has(key)) {
-            console.warn(`Key ${key} does not exist in the data map`);
-            return;
-        }
-        const paddingInput = this._dataMap.get(key);
-        if (!paddingInput) {
-            console.warn(`Padding input for key ${key} is not found`);
-            return;
-        }
-        this._float32Array = new Float32Array(360 * 4 * 4); // largest float32Array
-
-        paddingInput.colorsRatios = colorRatios;
-        this.bufferOrchestrator.updateBulk([paddingInput], this.bufferManagerMap, ["color"]);
-        this._float32Array = null;
-        if (drawRender) {
-            this.globe.DrawRender();
-        }
-    }
-
-    updateCoordinates(items: Pick<Padding1DegreeInput, "key" | "center" | "radius">[]): void {
-        if (this._freed) {
-            console.warn("Plugin is freed, cannot update coordinates");
-            return;
-        }
-        if (this.globe === null) {
-            console.warn("Globe is not initialized, cannot update coordinates");
-            return;
-        }
-        this._float32Array = new Float32Array(360 * 4 * 4); // largest float32Array
-
-        const updateKeys: string[] = [];
-        for (const item of items) {
-            const paddingInput = this._dataMap.get(item.key);
-            if (!paddingInput) {
-                console.warn(`Padding input for key ${item.key} is not found`);
-                continue;
-            }
-            paddingInput.center = item.center;
-            paddingInput.radius = item.radius;
-            updateKeys.push(item.key);
-        }
-
-        this._buildPaddings("input", updateKeys);
-        this._float32Array = null;
-        this.globe.DrawRender();
-    }
-
-    deleteBulk(keys: string[]): void {
-        if (this.globe === null) {
-            console.warn("Globe is not initialized, cannot delete data");
-            return;
-        }
-        if (this._freed) {
-            console.warn("Plugin is freed, cannot delete data");
-            return;
-        }
-        this.bufferOrchestrator.deleteBulk(keys, this.bufferManagerMap);
-        for (const key of keys) {
-            this._dataMap.delete(key);
-        }
-        this.globe?.DrawRender();
-    }
-
-    setPluginOpacity(opacity: number, drawRender: boolean = false): void {
-        if (this._freed) {
-            console.warn("Plugin is freed, cannot set opacity");
-            return;
-        }
-        if (this.globe === null) {
-            console.warn("Globe is not initialized, cannot set opacity");
-            return;
-        }
-        opacityCheck(opacity);
-        this._userOpacity = opacity;
-        if (drawRender) {
-            this.globe.DrawRender();
-        }
-    }
-
-    setDefaultColor(color: Color): void {
-        if (this._freed) {
-            console.warn("Plugin is freed, cannot set default color");
-            return;
-        }
-        if (this.globe === null) {
-            console.warn("Globe is not initialized, cannot set default color");
-            return;
-        }
-        colorCheck(color);
-        this._options.defaultColor = color;
-        this._uboHandler?.updateSingle("u_color", new Float32Array(color));
-        this.globe.DrawRender();
-    }
-
-
-    setElevationMode(mode: "msl" | "agl"): void {
-        switch (mode) {
-            case "msl":
-                this._options.isMSL = true;
-                break;
-            case "agl":
-                this._options.isMSL = false;
-                break;
-            default:
-                throw new Error(`Unknown elevation mode: ${mode}`);
-        }
-        this._buildPaddings("elevation");
-        this.globe?.DrawRender();
-    }
-
-    init(globe: Globe, gl: WebGL2RenderingContext): void {
-        this.globe = globe;
-        this.lineProgram = LineStripProgramCache.get(globe);
-
-        this._frameCounterTrigger = new FrameCounterTrigger(globe, 10, 1000, (globeChanges: GlobeChanges) => {
-            if (this._freed) return;
-            this.__build(globeChanges);
-            globe.DrawRender();
-        });
-
-
-        this.__updateLODRelatedParameters()
-        this.__updateAdaptiveOpacityMultiplier();
-
-        const bufferManagerMap = new Map(
-            [
-                ["position2d", {
-                    bufferManager: new BufferManager(globe.gl as WebGL2RenderingContext,
-                        360 * 2 * 3, // plus 1 to cut
-                        { bufferType: this._options.bufferType, initialCapacity: initialCapacity }),
-                    adaptor: (paddingInput: InnerPadding1DegreeInput) => {
-                        if (this._float32Array === null) {
-                            throw new Error("Float32Array is not initialized");
-                        } else {
-                            this._float32Array.fill(NaN); // reset the float32Array
-                        }
-                        for (let i = 0; i < 360; i++) {
-
-                            const outerCoords = paddingInput.outerCoords[i] as LongLatDegree;
-                            const innerCoords = paddingInput.innerCoords[i] as LongLatDegree;
-                            if (outerCoords === null || innerCoords === null) {
-                                continue;
-                            }
-                            let coordsOuter = globe.api_GetMercator2DPoint(outerCoords[0], outerCoords[1]);
-                            // fill the second coordinate with 0
-                            this._float32Array[i * 6] = coordsOuter[0];
-                            this._float32Array[i * 6 + 1] = coordsOuter[1];
-
-                            let coordsInner = globe.api_GetMercator2DPoint(innerCoords[0], innerCoords[1]);
-                            // fill the second coordinate with 0
-                            this._float32Array[i * 6 + 2] = coordsInner[0];
-                            this._float32Array[i * 6 + 3] = coordsInner[1];
-                        }
-                        return this._float32Array.subarray(0, 360 * 2 * 3);
-                    }
-                }
-                ],
-                [
-                    "position3d", {
-                        bufferManager: new BufferManager(globe.gl as WebGL2RenderingContext,
-                            360 * 3 * 3, // plus 1 to cut
-                            { bufferType: this._options.bufferType, initialCapacity: initialCapacity }),
-                        adaptor: (paddingInput: InnerPadding1DegreeInput) => {
-                            if (this._float32Array === null) {
-                                throw new Error("Float32Array is not initialized");
-                            } else {
-                                this._float32Array.fill(NaN); // reset the float32Array
-                            }
-                            const _float32Array = this._float32Array;
-                            for (let i = 0; i < 360; i++) {
-
-
-                                const outerCoords = paddingInput.outerCoords[i] as LongLatDegree;
-                                const innerCoords = paddingInput.innerCoords[i] as LongLatDegree;
-                                if (outerCoords === null || innerCoords === null) {
-                                    continue;
-                                }
-                                const height = paddingInput.heightFromGroundIn3D ?? this._options.defaultHeightFromGroundIn3D;
-
-                                let coords = globe.api_GetCartesian3DPoint(outerCoords[0], outerCoords[1], height, this._options.isMSL);
-                                // fill the second coordinate with 0
-                                _float32Array[i * 9] = coords[0];
-                                _float32Array[i * 9 + 1] = coords[1];
-                                _float32Array[i * 9 + 2] = coords[2];
-
-
-                                let coordsInner = globe.api_GetCartesian3DPoint(innerCoords[0], innerCoords[1], height, this._options.isMSL);
-                                // fill the second coordinate with 0
-
-                                _float32Array[i * 9 + 3] = coordsInner[0];
-                                _float32Array[i * 9 + 4] = coordsInner[1];
-                                _float32Array[i * 9 + 5] = coordsInner[2];
-
-                            }
-                            return _float32Array.subarray(0, 360 * 3 * 3);
-                        }
-                    }
-                ],
-            ]
-        );
-
-
-        if (this._options.variativeColorsOn) {
-            bufferManagerMap.set(
-                "color", {
-                bufferManager: new BufferManager(globe.gl as WebGL2RenderingContext,
-                    360 * 4 * 3, // 4 for RGBA
-                    { bufferType: this._options.bufferType, initialCapacity: initialCapacity }),
-                adaptor: (paddingInput: Padding1DegreeInput) => {
-                    if (this._float32Array === null) {
-                        throw new Error("Float32Array is not initialized");
-                    } else {
-                        this._float32Array.fill(NaN); // reset the float32Array
-                    }
-                    if (!paddingInput.colorsRatios) {
-                        const color = this._options.defaultColor;
-                        const colorArray = new Float32Array(360 * 4 * 3);
-                        this._float32Array = colorArray; // store for forwarding
-                        for (let i = 0; i < 360; i++) {
-                            this._float32Array[i * 12] = color[0];
-                            this._float32Array[i * 12 + 1] = color[1];
-                            this._float32Array[i * 12 + 2] = color[2];
-                            this._float32Array[i * 12 + 3] = color[3];
-                            this._float32Array[i * 12 + 4] = color[0];
-                            this._float32Array[i * 12 + 5] = color[1];
-                            this._float32Array[i * 12 + 6] = color[2];
-                            this._float32Array[i * 12 + 7] = 0; //color[3] ;
-                        }
-                        return this._float32Array.subarray(0, 360 * 4 * 3);
-                    } else {
-                        const colorsRatios = paddingInput.colorsRatios;
-                        let i = 0;
-                        for (const colorRatio of colorsRatios) {
-                            const color = colorRatio.color;
-                            const ratio = colorRatio.ratio;
-                            for (let j = 0; j < ratio; j++) {
-                                this._float32Array[i * 12] = color[0];
-                                this._float32Array[i * 12 + 1] = color[1];
-                                this._float32Array[i * 12 + 2] = color[2];
-                                this._float32Array[i * 12 + 3] = color[3];
-                                this._float32Array[i * 12 + 4] = color[0];
-                                this._float32Array[i * 12 + 5] = color[1];
-                                this._float32Array[i * 12 + 6] = color[2];
-                                this._float32Array[i * 12 + 7] = 0.1;// color[3];
-                                i++;
-                            }
-                        }
-                        return this._float32Array.subarray(0, 360 * 4 * 3);
-                    }
-                }
-            }
-            );
-        }
-
-
-        const vaoInput = ["position3d", "position2d", "color"].map((name) => {
-            const bufferManager = bufferManagerMap.get(name);
-            if (!bufferManager) {
-                return null;
-            }
-            return {
-                buffer: bufferManager.bufferManager.buffer,
-                stride: 0,
-                offset: 0
-            }
-        })
-
-        this._vao = this.lineProgram.createVAO(
-            vaoInput[0],
-            vaoInput[1],
-            vaoInput[2],
-        );
-        this.bufferManagerMap = bufferManagerMap;
-        this.bufferOrchestrator.resetWithCapacity(bufferManagerMap, initialCapacity);
-        this._uboHandler = this.lineProgram.createUBO("STATIC_DRAW");
-        this._uboHandler.updateSingle("u_color", new Float32Array(this._options.defaultColor));
-    }
-
-
-    draw3D(): void {
-
-        if (this._freed) {
-            console.warn("Plugin is freed, cannot draw");
-            return;
-        }
-        if (this.globe === null || this.lineProgram === null || this._vao === null) {
-            console.warn("Globe or LineProgram or VAO is not initialized, cannot draw");
-            return;
-        }
-
-        this._frameCounterTrigger?.trigger();
-        // this.__build();
-
-        const gl = this.globe.gl as WebGL2RenderingContext;
-        const drawOptions: DrawRangeIndexParams = {
-            drawRange: {
-                first: 0,
-                count: this.bufferOrchestrator.length * (360 * 3), // plus 1 is for cutting linestrips
-            },
-        }
-        gl.disable(gl.DEPTH_TEST);
-
-        this.lineProgram.draw(
-            this._vao,
-            drawOptions,
-            this._userOpacity * this._adaptiveOpacityMultiplier,
-            this._uboHandler
-        );
-        gl.enable(gl.DEPTH_TEST);
-
-    }
-
-
-    free(): void {
-        if (this._freed) {
-            console.warn("Plugin is already freed");
-            return;
-        }
-        if (!this.globe || !this.lineProgram) {
-            console.warn("Globe or LineProgram is not initialized, cannot free the plugin");
-            return;
-        }
-        this._freed = true;
-        this._frameCounterTrigger?.free();
-        LineStripProgramCache.release(this.lineProgram);
-        this.lineProgram = null;
-        this._uboHandler?.free();
-        this._uboHandler = null;
-        this.globe.gl.deleteVertexArray(this._vao);
-        this.globe = null;
-        this._vao = null;
-        this.bufferManagerMap.forEach((bufferManager) => {
-            bufferManager.bufferManager.free();
-        });
-        this._float32Array = null;
-    }
-
-
-
-
-
-
-    _buildPaddings(level: "input" | "innerCircle" | "elevation" | "geometry", subSetIDs: string[] | null = null) {
-
-        if (level === "input") {
-            this.__inner(subSetIDs);
-            this.__elevation(subSetIDs);
-        } else if (level === "innerCircle") {
-            // Build inner circle paddings
-            if (this._options.adativePaddingSize) {
-                this.__innerCircle(subSetIDs);
-            }
-            this.__elevation(subSetIDs);
-        } else if (level === "elevation") {
-            // Build elevation paddings
-            this.__elevation(subSetIDs);
-        }
-    }
-
-    __inner(subSetIDs: string[] | null = null) {
-        // Implement inner circle padding logic
-
-        const datas = this._dataMap;
-
-        let keys;
-        if (subSetIDs) {
-            keys = subSetIDs;
-        } else {
-            keys = Array.from(datas.keys());
-        }
-        for (const key of keys) {
-            const value = datas.get(key);
-            if (!value) continue;
-
-            // Implement inner circle padding logic using key and value
-            const { innerCoords, outerCoords } = preAdapter(
-                this.globe!,
-                value,
-                this._innerPaddingRatio,
-                null
-            )
-            value.outerCoords = outerCoords;
-            value.innerCoords = innerCoords;
-        }
-    }
-
-    __innerCircle(subSetIDs: string[] | null = null) {
-        // Implement inner circle padding logic
-
-        const datas = this._dataMap;
-
-        let keys;
-        if (subSetIDs) {
-            keys = subSetIDs;
-        } else {
-            keys = Array.from(datas.keys());
-        }
-        for (const key of keys) {
-            const value = datas.get(key);
-            if (!value) continue;
-
-            // Implement inner circle padding logic using key and value
-            const { innerCoords } = preAdapter(
-                this.globe!,
-                value,
-                this._innerPaddingRatio,
-                value.outerCoords
-            )
-            value.innerCoords = innerCoords;
-        }
-    }
-
-
-    __elevation(subSetIDs: string[] | null = null) {
-        this.__updateAdaptiveOpacityMultiplier();
-        const bufferToUpdate = [this.globe?.api_GetCurrentGeometry() === 1 ? "position2d" : "position3d"];
-        const datas = this._dataMap;
-        const wrapper: [InnerPadding1DegreeInput] = [null!];
-        this._float32Array = new Float32Array(360 * 4 * 4); // largest float32Array
-
-        let keys;
-        if (subSetIDs) {
-            keys = subSetIDs;
-        } else {
-            keys = Array.from(datas.keys());
-        }
-
-        for (const key of keys) {
-            const value = datas.get(key);
-            if (!value) continue;
-            wrapper[0] = value
-            this.bufferOrchestrator.updateBulk(
-                wrapper,
-                this.bufferManagerMap,
-                bufferToUpdate
-            );
-        }
-        this._float32Array = null; // reset the float32Array
-    }
-
-
-
-    __build(globeChanges: GlobeChanges) {
-        if (globeChanges.lod) {
-            this.__updateLODRelatedParameters();
-            this._buildPaddings("innerCircle");
-        } else if (globeChanges.look || globeChanges.geometry) {
-            this._buildPaddings("elevation");
-        }
-
-    }
-    __updateLODRelatedParameters(): void {
-        const lod = this.globe?.api_GetCurrentLODWithDecimal() as number;
-        this._innerPaddingRatio = 1 - Math.pow(0.7, lod);
-    }
-
-    __updateAdaptiveOpacityMultiplier() {
-        if (this._options.adaptiveOpacity === true) {
-            const currentLod = this.globe?.api_GetCurrentLODWithDecimal() as number;
-            this._adaptiveOpacityMultiplier = Math.max(1 - (2.9 / currentLod), 0.1)
-        } else {
-            this._adaptiveOpacityMultiplier = 1; // TODO: set this once on adaptiveOpacity is Set to false
-        }
-    }
-
-}
-
-
-
-function preAdapter<T extends LongLatDegree | null>(
-    globe: Globe,
-    paddingInput: Padding1DegreeInput,
-    paddingRatio: number,
-    outerCoords: T[] | null,
-): { outerCoords: T[], innerCoords: T[] } {
-
-    const innerCoords: T[] = new Array<T>(360);
-
-    if (outerCoords === null) {
-        outerCoords = new Array<T>(360);
-
-        for (let i = 0; i < 360; i++) {
-            const { long, lat } = globe.Math.FindPointByPolar(
-                paddingInput.center[0], // center long
-                paddingInput.center[1], // center lat
-                paddingInput.radius, // outer radius
-                i, // angle
-            );
-
-            const { long: endLong, lat: endLat } = globe.Math.FindPointByPolar(
-                paddingInput.center[0], // center long
-                paddingInput.center[1], // center lat
-                paddingInput.radius * paddingRatio, // inner radius
-                i, // angle
-            );
-
-            const longDifference = Math.abs(long - endLong);
-            // const latDifference = Math.abs(lat - endLat);
-
-            if (longDifference > 45) {
-                outerCoords[i] = null as T;
-                innerCoords[i] = null as T;
-                continue;
-            }
-
-            // Assign the calculated coordinates
-            outerCoords[i] = [long, lat] as T;
-            innerCoords[i] = [endLong, endLat] as T;
-        }
-    } else {
-        // Handle case when outerCoords is provided
-        for (let i = 0; i < 360; i++) {
-            if (outerCoords[i] === null) {
-                innerCoords[i] = null as T;
-                continue;
-            }
-
-            const { long: endLong, lat: endLat } = globe.Math.FindPointByPolar(
-                paddingInput.center[0],
-                paddingInput.center[1],
-                paddingInput.radius * paddingRatio,
-                i
-            );
-
-            innerCoords[i] = [endLong, endLat] as T;
-        }
-    }
-
-    return { outerCoords, innerCoords };
-}
+//      One Degree Padding
+/**
+ * 2d coordinates are loaded ones
+ * 3d coordinates are calculated on the fly.
+ *
+ * 2d paddings are fixed size
+ * 3d paddings gets shortened as lod increases
+ *
+ * color buffer is shared and does not change on unless insert or delete
+ * changing color can be done by re inserting
+ *
+ *
+ *
+ */
+import { BufferManager } from '../../util/account/single-attribute-buffer-management/buffer-manager';
+import { BufferOrchestrator } from '../../util/account/single-attribute-buffer-management/buffer-orchestrator';
+import { LineStripProgramCache } from '../../programs/line-on-globe/linestrip/linestrip';
+import { opacityCheck, colorCheck } from '../../util/check/typecheck';
+import { FrameCounterTrigger } from '../../util/frame-counter-trigger';
+const initialCapacity = 2; // initial capacity for the buffer managers
+// const _float32Array = new Float32Array(360 * 3 * 2).fill(NaN);
+export class Padding1DegreePlugin {
+    id;
+    globe = null;
+    bufferOrchestrator;
+    bufferManagerMap;
+    lineProgram = null;
+    _innerPaddingRatio = 0.95; //
+    _float32Array = null; // this is used to forward the data to the buffer manager
+    _uboHandler = null; // this is used to forward the data to the shader program
+    _bufferNames = ["position2d", "position3d"];
+    _vao = null; // this is used to store the VAO for the plugin
+    _freed = false; // this is used to check if the plugin is freed or not
+    _userOpacity = 1;
+    _adaptiveOpacityMultiplier = 1;
+    _dataMap = new Map();
+    _options = {
+        bufferType: "STATIC_DRAW",
+        variativeColorsOn: false,
+        defaultColor: [1, 1, 1, 1], // white color
+        defaultHeightFromGroundIn3D: 0.1, // 10 cm from ground
+        adativePaddingSize: true, // if true, the padding size will be adaptive to the LOD
+        adaptiveOpacity: true, // if true, the opacity will be adaptive to the LOD
+        isMSL: false // if true, no elevation of terrain
+    };
+    _frameCounterTrigger = null;
+    constructor(id, options = null) {
+        this.id = id;
+        this.bufferManagerMap = new Map();
+        this.lineProgram = null;
+        this._options = options ? { ...this._options, ...options } : this._options;
+        this.bufferOrchestrator = new BufferOrchestrator();
+        if (this._options.variativeColorsOn) {
+            this._bufferNames.push("color");
+        }
+    }
+    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.bufferManagerMap);
+    }
+    insertBulk(inputs) {
+        if (this.globe === null) {
+            console.warn("Globe is not initialized, cannot insert input");
+            return;
+        }
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot insert input");
+            return;
+        }
+        const wrapper = [null];
+        this._float32Array = new Float32Array(360 * 4 * 4); // largest float32Array
+        let newItemCount = 0;
+        for (let i = 0; i < inputs.length; i++) {
+            if (!this._dataMap.has(inputs[i].key)) {
+                newItemCount++;
+            }
+        }
+        this.bufferOrchestrator.ensureSpace(newItemCount, this.bufferManagerMap);
+        for (let i = 0; i < inputs.length; i++) {
+            const coords = preAdapter(this.globe, inputs[i], this._innerPaddingRatio, null);
+            const paddingInput = { ...inputs[i], ...coords };
+            this._dataMap.set(paddingInput.key, paddingInput);
+            wrapper[0] = paddingInput;
+            this.bufferOrchestrator.insertBulk(wrapper, this.bufferManagerMap, this._bufferNames);
+        }
+        this._float32Array = null;
+        this.globe?.DrawRender();
+    }
+    updateColorRatios(key, colorRatios, drawRender = true) {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot update color");
+            return;
+        }
+        if (this.globe === null) {
+            console.warn("Globe is not initialized, cannot update color");
+            return;
+        }
+        if (!this._options.variativeColorsOn) {
+            console.warn("VariativeColors are not enabled");
+            return;
+        }
+        if (!this._dataMap.has(key)) {
+            console.warn(`Key ${key} does not exist in the data map`);
+            return;
+        }
+        const paddingInput = this._dataMap.get(key);
+        if (!paddingInput) {
+            console.warn(`Padding input for key ${key} is not found`);
+            return;
+        }
+        this._float32Array = new Float32Array(360 * 4 * 4); // largest float32Array
+        paddingInput.colorsRatios = colorRatios;
+        this.bufferOrchestrator.updateBulk([paddingInput], this.bufferManagerMap, ["color"]);
+        this._float32Array = null;
+        if (drawRender) {
+            this.globe.DrawRender();
+        }
+    }
+    updateCoordinates(items) {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot update coordinates");
+            return;
+        }
+        if (this.globe === null) {
+            console.warn("Globe is not initialized, cannot update coordinates");
+            return;
+        }
+        this._float32Array = new Float32Array(360 * 4 * 4); // largest float32Array
+        const updateKeys = [];
+        for (const item of items) {
+            const paddingInput = this._dataMap.get(item.key);
+            if (!paddingInput) {
+                console.warn(`Padding input for key ${item.key} is not found`);
+                continue;
+            }
+            paddingInput.center = item.center;
+            paddingInput.radius = item.radius;
+            updateKeys.push(item.key);
+        }
+        this._buildPaddings("input", updateKeys);
+        this._float32Array = null;
+        this.globe.DrawRender();
+    }
+    deleteBulk(keys) {
+        if (this.globe === null) {
+            console.warn("Globe is not initialized, cannot delete data");
+            return;
+        }
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot delete data");
+            return;
+        }
+        this.bufferOrchestrator.deleteBulk(keys, this.bufferManagerMap);
+        for (const key of keys) {
+            this._dataMap.delete(key);
+        }
+        this.globe?.DrawRender();
+    }
+    setPluginOpacity(opacity, drawRender = false) {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot set opacity");
+            return;
+        }
+        if (this.globe === null) {
+            console.warn("Globe is not initialized, cannot set opacity");
+            return;
+        }
+        opacityCheck(opacity);
+        this._userOpacity = opacity;
+        if (drawRender) {
+            this.globe.DrawRender();
+        }
+    }
+    setDefaultColor(color) {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot set default color");
+            return;
+        }
+        if (this.globe === null) {
+            console.warn("Globe is not initialized, cannot set default color");
+            return;
+        }
+        colorCheck(color);
+        this._options.defaultColor = color;
+        this._uboHandler?.updateSingle("u_color", new Float32Array(color));
+        this.globe.DrawRender();
+    }
+    setElevationMode(mode) {
+        switch (mode) {
+            case "msl":
+                this._options.isMSL = true;
+                break;
+            case "agl":
+                this._options.isMSL = false;
+                break;
+            default:
+                throw new Error(`Unknown elevation mode: ${mode}`);
+        }
+        this._buildPaddings("elevation");
+        this.globe?.DrawRender();
+    }
+    init(globe, gl) {
+        this.globe = globe;
+        this.lineProgram = LineStripProgramCache.get(globe);
+        this._frameCounterTrigger = new FrameCounterTrigger(globe, 10, 1000, (globeChanges) => {
+            if (this._freed)
+                return;
+            this.__build(globeChanges);
+            globe.DrawRender();
+        });
+        this.__updateLODRelatedParameters();
+        this.__updateAdaptiveOpacityMultiplier();
+        const bufferManagerMap = new Map([
+            ["position2d", {
+                    bufferManager: new BufferManager(globe.gl, 360 * 2 * 3, // plus 1 to cut
+                    { bufferType: this._options.bufferType, initialCapacity: initialCapacity }),
+                    adaptor: (paddingInput) => {
+                        if (this._float32Array === null) {
+                            throw new Error("Float32Array is not initialized");
+                        }
+                        else {
+                            this._float32Array.fill(NaN); // reset the float32Array
+                        }
+                        for (let i = 0; i < 360; i++) {
+                            const outerCoords = paddingInput.outerCoords[i];
+                            const innerCoords = paddingInput.innerCoords[i];
+                            if (outerCoords === null || innerCoords === null) {
+                                continue;
+                            }
+                            let coordsOuter = globe.api_GetMercator2DPoint(outerCoords[0], outerCoords[1]);
+                            // fill the second coordinate with 0
+                            this._float32Array[i * 6] = coordsOuter[0];
+                            this._float32Array[i * 6 + 1] = coordsOuter[1];
+                            let coordsInner = globe.api_GetMercator2DPoint(innerCoords[0], innerCoords[1]);
+                            // fill the second coordinate with 0
+                            this._float32Array[i * 6 + 2] = coordsInner[0];
+                            this._float32Array[i * 6 + 3] = coordsInner[1];
+                        }
+                        return this._float32Array.subarray(0, 360 * 2 * 3);
+                    }
+                }
+            ],
+            [
+                "position3d", {
+                    bufferManager: new BufferManager(globe.gl, 360 * 3 * 3, // plus 1 to cut
+                    { bufferType: this._options.bufferType, initialCapacity: initialCapacity }),
+                    adaptor: (paddingInput) => {
+                        if (this._float32Array === null) {
+                            throw new Error("Float32Array is not initialized");
+                        }
+                        else {
+                            this._float32Array.fill(NaN); // reset the float32Array
+                        }
+                        const _float32Array = this._float32Array;
+                        for (let i = 0; i < 360; i++) {
+                            const outerCoords = paddingInput.outerCoords[i];
+                            const innerCoords = paddingInput.innerCoords[i];
+                            if (outerCoords === null || innerCoords === null) {
+                                continue;
+                            }
+                            const height = paddingInput.heightFromGroundIn3D ?? this._options.defaultHeightFromGroundIn3D;
+                            let coords = globe.api_GetCartesian3DPoint(outerCoords[0], outerCoords[1], height, this._options.isMSL);
+                            // fill the second coordinate with 0
+                            _float32Array[i * 9] = coords[0];
+                            _float32Array[i * 9 + 1] = coords[1];
+                            _float32Array[i * 9 + 2] = coords[2];
+                            let coordsInner = globe.api_GetCartesian3DPoint(innerCoords[0], innerCoords[1], height, this._options.isMSL);
+                            // fill the second coordinate with 0
+                            _float32Array[i * 9 + 3] = coordsInner[0];
+                            _float32Array[i * 9 + 4] = coordsInner[1];
+                            _float32Array[i * 9 + 5] = coordsInner[2];
+                        }
+                        return _float32Array.subarray(0, 360 * 3 * 3);
+                    }
+                }
+            ],
+        ]);
+        if (this._options.variativeColorsOn) {
+            bufferManagerMap.set("color", {
+                bufferManager: new BufferManager(globe.gl, 360 * 4 * 3, // 4 for RGBA
+                { bufferType: this._options.bufferType, initialCapacity: initialCapacity }),
+                adaptor: (paddingInput) => {
+                    if (this._float32Array === null) {
+                        throw new Error("Float32Array is not initialized");
+                    }
+                    else {
+                        this._float32Array.fill(NaN); // reset the float32Array
+                    }
+                    if (!paddingInput.colorsRatios) {
+                        const color = this._options.defaultColor;
+                        const colorArray = new Float32Array(360 * 4 * 3);
+                        this._float32Array = colorArray; // store for forwarding
+                        for (let i = 0; i < 360; i++) {
+                            this._float32Array[i * 12] = color[0];
+                            this._float32Array[i * 12 + 1] = color[1];
+                            this._float32Array[i * 12 + 2] = color[2];
+                            this._float32Array[i * 12 + 3] = color[3];
+                            this._float32Array[i * 12 + 4] = color[0];
+                            this._float32Array[i * 12 + 5] = color[1];
+                            this._float32Array[i * 12 + 6] = color[2];
+                            this._float32Array[i * 12 + 7] = 0; //color[3] ;
+                        }
+                        return this._float32Array.subarray(0, 360 * 4 * 3);
+                    }
+                    else {
+                        const colorsRatios = paddingInput.colorsRatios;
+                        let i = 0;
+                        for (const colorRatio of colorsRatios) {
+                            const color = colorRatio.color;
+                            const ratio = colorRatio.ratio;
+                            for (let j = 0; j < ratio; j++) {
+                                this._float32Array[i * 12] = color[0];
+                                this._float32Array[i * 12 + 1] = color[1];
+                                this._float32Array[i * 12 + 2] = color[2];
+                                this._float32Array[i * 12 + 3] = color[3];
+                                this._float32Array[i * 12 + 4] = color[0];
+                                this._float32Array[i * 12 + 5] = color[1];
+                                this._float32Array[i * 12 + 6] = color[2];
+                                this._float32Array[i * 12 + 7] = 0.1; // color[3];
+                                i++;
+                            }
+                        }
+                        return this._float32Array.subarray(0, 360 * 4 * 3);
+                    }
+                }
+            });
+        }
+        const vaoInput = ["position3d", "position2d", "color"].map((name) => {
+            const bufferManager = bufferManagerMap.get(name);
+            if (!bufferManager) {
+                return null;
+            }
+            return {
+                buffer: bufferManager.bufferManager.buffer,
+                stride: 0,
+                offset: 0
+            };
+        });
+        this._vao = this.lineProgram.createVAO(vaoInput[0], vaoInput[1], vaoInput[2]);
+        this.bufferManagerMap = bufferManagerMap;
+        this.bufferOrchestrator.resetWithCapacity(bufferManagerMap, initialCapacity);
+        this._uboHandler = this.lineProgram.createUBO("STATIC_DRAW");
+        this._uboHandler.updateSingle("u_color", new Float32Array(this._options.defaultColor));
+    }
+    draw3D() {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot draw");
+            return;
+        }
+        if (this.globe === null || this.lineProgram === null || this._vao === null) {
+            console.warn("Globe or LineProgram or VAO is not initialized, cannot draw");
+            return;
+        }
+        this._frameCounterTrigger?.trigger();
+        // this.__build();
+        const gl = this.globe.gl;
+        const drawOptions = {
+            drawRange: {
+                first: 0,
+                count: this.bufferOrchestrator.length * (360 * 3), // plus 1 is for cutting linestrips
+            },
+        };
+        gl.disable(gl.DEPTH_TEST);
+        this.lineProgram.draw(this._vao, drawOptions, this._userOpacity * this._adaptiveOpacityMultiplier, this._uboHandler);
+        gl.enable(gl.DEPTH_TEST);
+    }
+    free() {
+        if (this._freed) {
+            console.warn("Plugin is already freed");
+            return;
+        }
+        if (!this.globe || !this.lineProgram) {
+            console.warn("Globe or LineProgram is not initialized, cannot free the plugin");
+            return;
+        }
+        this._freed = true;
+        this._frameCounterTrigger?.free();
+        LineStripProgramCache.release(this.lineProgram);
+        this.lineProgram = null;
+        this._uboHandler?.free();
+        this._uboHandler = null;
+        this.globe.gl.deleteVertexArray(this._vao);
+        this.globe = null;
+        this._vao = null;
+        this.bufferManagerMap.forEach((bufferManager) => {
+            bufferManager.bufferManager.free();
+        });
+        this._float32Array = null;
+    }
+    _buildPaddings(level, subSetIDs = null) {
+        if (level === "input") {
+            this.__inner(subSetIDs);
+            this.__elevation(subSetIDs);
+        }
+        else if (level === "innerCircle") {
+            // Build inner circle paddings
+            if (this._options.adativePaddingSize) {
+                this.__innerCircle(subSetIDs);
+            }
+            this.__elevation(subSetIDs);
+        }
+        else if (level === "elevation") {
+            // Build elevation paddings
+            this.__elevation(subSetIDs);
+        }
+    }
+    __inner(subSetIDs = null) {
+        // Implement inner circle padding logic
+        const datas = this._dataMap;
+        let keys;
+        if (subSetIDs) {
+            keys = subSetIDs;
+        }
+        else {
+            keys = Array.from(datas.keys());
+        }
+        for (const key of keys) {
+            const value = datas.get(key);
+            if (!value)
+                continue;
+            // Implement inner circle padding logic using key and value
+            const { innerCoords, outerCoords } = preAdapter(this.globe, value, this._innerPaddingRatio, null);
+            value.outerCoords = outerCoords;
+            value.innerCoords = innerCoords;
+        }
+    }
+    __innerCircle(subSetIDs = null) {
+        // Implement inner circle padding logic
+        const datas = this._dataMap;
+        let keys;
+        if (subSetIDs) {
+            keys = subSetIDs;
+        }
+        else {
+            keys = Array.from(datas.keys());
+        }
+        for (const key of keys) {
+            const value = datas.get(key);
+            if (!value)
+                continue;
+            // Implement inner circle padding logic using key and value
+            const { innerCoords } = preAdapter(this.globe, value, this._innerPaddingRatio, value.outerCoords);
+            value.innerCoords = innerCoords;
+        }
+    }
+    __elevation(subSetIDs = null) {
+        this.__updateAdaptiveOpacityMultiplier();
+        const bufferToUpdate = [this.globe?.api_GetCurrentGeometry() === 1 ? "position2d" : "position3d"];
+        const datas = this._dataMap;
+        const wrapper = [null];
+        this._float32Array = new Float32Array(360 * 4 * 4); // largest float32Array
+        let keys;
+        if (subSetIDs) {
+            keys = subSetIDs;
+        }
+        else {
+            keys = Array.from(datas.keys());
+        }
+        for (const key of keys) {
+            const value = datas.get(key);
+            if (!value)
+                continue;
+            wrapper[0] = value;
+            this.bufferOrchestrator.updateBulk(wrapper, this.bufferManagerMap, bufferToUpdate);
+        }
+        this._float32Array = null; // reset the float32Array
+    }
+    __build(globeChanges) {
+        if (globeChanges.lod) {
+            this.__updateLODRelatedParameters();
+            this._buildPaddings("innerCircle");
+        }
+        else if (globeChanges.look || globeChanges.geometry) {
+            this._buildPaddings("elevation");
+        }
+    }
+    __updateLODRelatedParameters() {
+        const lod = this.globe?.api_GetCurrentLODWithDecimal();
+        this._innerPaddingRatio = 1 - Math.pow(0.7, lod);
+    }
+    __updateAdaptiveOpacityMultiplier() {
+        if (this._options.adaptiveOpacity === true) {
+            const currentLod = this.globe?.api_GetCurrentLODWithDecimal();
+            this._adaptiveOpacityMultiplier = Math.max(1 - (2.9 / currentLod), 0.1);
+        }
+        else {
+            this._adaptiveOpacityMultiplier = 1; // TODO: set this once on adaptiveOpacity is Set to false
+        }
+    }
+}
+function preAdapter(globe, paddingInput, paddingRatio, outerCoords) {
+    const innerCoords = new Array(360);
+    if (outerCoords === null) {
+        outerCoords = new Array(360);
+        for (let i = 0; i < 360; i++) {
+            const { long, lat } = globe.Math.FindPointByPolar(paddingInput.center[0], // center long
+            paddingInput.center[1], // center lat
+            paddingInput.radius, // outer radius
+            i);
+            const { long: endLong, lat: endLat } = globe.Math.FindPointByPolar(paddingInput.center[0], // center long
+            paddingInput.center[1], // center lat
+            paddingInput.radius * paddingRatio, // inner radius
+            i);
+            const longDifference = Math.abs(long - endLong);
+            // const latDifference = Math.abs(lat - endLat);
+            if (longDifference > 45) {
+                outerCoords[i] = null;
+                innerCoords[i] = null;
+                continue;
+            }
+            // Assign the calculated coordinates
+            outerCoords[i] = [long, lat];
+            innerCoords[i] = [endLong, endLat];
+        }
+    }
+    else {
+        // Handle case when outerCoords is provided
+        for (let i = 0; i < 360; i++) {
+            if (outerCoords[i] === null) {
+                innerCoords[i] = null;
+                continue;
+            }
+            const { long: endLong, lat: endLat } = globe.Math.FindPointByPolar(paddingInput.center[0], paddingInput.center[1], paddingInput.radius * paddingRatio, i);
+            innerCoords[i] = [endLong, endLat];
+        }
+    }
+    return { outerCoords, innerCoords };
+}