@pirireis/webglobeplugins 0.17.0 → 1.0.2

package/semiplugins/lightweight/{piece-of-pie-plugin.js → piece-of-pie-plugin.ts}

@@ -1,200 +1,275 @@
-import { PieceOfPieProgramCache } from "../../programs/rings/partial-ring/piece-of-pie";
-import { BufferManager, BufferOrchestrator } from "../../util/account/single-attribute-buffer-management/index";
-import { sphereCoord } from "../../util/geometry/index";
-import { opacityCheck } from "../../util/check/typecheck";
-const INITIAL_CAPACITY = 10; // Initial capacity for the buffer orchestrator
-const EDGE_COUNT = 100; // Number of edges for the pie chart
-const Radians = Math.PI / 180; // Conversion factor from degrees to radians
-export class PieceOfPiePlugin {
-    id;
-    _isFreed = false;
-    globe = null;
-    gl = null;
-    program = null;
-    vao = null;
-    bufferManagersMap = null;
-    bufferOrchestrator = new BufferOrchestrator({ capacity: INITIAL_CAPACITY });
-    drawMode = "BOTH";
-    _uboHandler = null;
-    _pluginOptions = {
-        bufferType: "STATIC_DRAW",
-        initialCapacity: INITIAL_CAPACITY,
-        opacity: 1.0, // Default opacity is 1.0
-        defaultHeightFromGroundIn3D: 0, // Default altitude is ground level
-        defaultColor: [1, 1, 1, 1], // Default color is white with full opacity
-        variativeColorsOn: false, // Default is to not use variative colors
-    };
-    constructor(id, options = null) {
-        this.id = id;
-        if (options) {
-            this._pluginOptions = {
-                ...this._pluginOptions,
-                ...options
-            };
-        }
-    }
-    insertBulk(items) {
-        this.bufferOrchestrator.insertBulk(items, this.bufferManagersMap);
-        this.globe?.DrawRender();
-    }
-    deleteBulk(keys) {
-        this.bufferOrchestrator.deleteBulk(keys, this.bufferManagersMap);
-        this.globe?.DrawRender();
-    }
-    setPluginOpacity(opacity, drawRender = true) {
-        opacityCheck(opacity);
-        this._uboHandler?.updateSingle("u_opacity", new Float32Array([opacity]));
-        if (drawRender) {
-            this.globe?.DrawRender();
-        }
-    }
-    setDrawMode(drawMode) {
-        if (drawMode !== "TRIANGLE_FAN" && drawMode !== "LINE_STRIP" && drawMode !== "BOTH") {
-            throw new Error("Invalid draw mode. Use 'TRIANGLE_FAN' or 'LINE_STRIP'.");
-        }
-        this.drawMode = drawMode;
-        this.globe?.DrawRender();
-    }
-    setDefaultColor(color) {
-        if (this._isFreed) {
-            console.warn("PieceOfPiePlugin is freed, cannot set default color.");
-            return;
-        }
-        if (!Array.isArray(color) || color.length !== 4) {
-            throw new Error("Color must be an array of 4 numbers [R, G, B, A].");
-        }
-        this._uboHandler?.updateSingle("u_color", new Float32Array(color));
-        this.globe?.DrawRender();
-    }
-    _createBufferManagersMap() {
-        const { gl, globe, _pluginOptions } = this;
-        const { bufferType, initialCapacity } = _pluginOptions;
-        if (!gl || !globe) {
-            throw new Error("Globe and WebGL context must be initialized before creating buffer management map.");
-        }
-        const bufferManagersMap = new Map([
-            ["centerCoords2d", {
-                    bufferManager: new BufferManager(this.gl, 2, { bufferType: bufferType, initialCapacity }),
-                    adaptor: (item) => new Float32Array(globe.api_GetMercator2DPoint(item.center[0], item.center[1])),
-                }],
-            ["centerCoords3d", {
-                    bufferManager: new BufferManager(gl, 3, { bufferType, initialCapacity }),
-                    adaptor: (item) => sphereCoord(item.center[0], item.center[1], globe, (item.altitude ?? this._pluginOptions.defaultHeightFromGroundIn3D) / 1000)
-                }],
-            ["startAngle2d", {
-                    bufferManager: new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                    adaptor: (item) => {
-                        if (item.startAngle2D === undefined) {
-                            return new Float32Array([0]); // Default angle if not provided
-                        }
-                        return new Float32Array([(item.startAngle2D) * Radians]);
-                    }
-                }],
-            ["tailAngle2d", {
-                    bufferManager: new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                    adaptor: (item) => {
-                        if (item.coverAngle2D === undefined) {
-                            return new Float32Array([0]); // Default angle if not provided
-                        }
-                        return new Float32Array([item.coverAngle2D * Radians]);
-                    }
-                }],
-            ["startAngle3d", {
-                    bufferManager: new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                    adaptor: (item) => {
-                        if (item.startAngle3D === undefined) {
-                            return new Float32Array([0]); // Default angle if not provided
-                        }
-                        return new Float32Array([item.startAngle3D * Radians]);
-                    }
-                }],
-            ["tailAngle3d", {
-                    bufferManager: new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                    adaptor: (item) => {
-                        if (item.coverAngle3D === undefined) {
-                            return new Float32Array([0]); // Default angle if not provided
-                        }
-                        return new Float32Array([item.coverAngle3D * Radians]);
-                    }
-                }],
-            ["fillingMode", {
-                    bufferManager: new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                    adaptor: (item) => new Float32Array([item.fillingMode ?? 0])
-                }],
-            ["radius", {
-                    bufferManager: new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                    adaptor: (item) => new Float32Array([item.radius])
-                }],
-        ]);
-        if (this._pluginOptions.variativeColorsOn) {
-            bufferManagersMap.set("rgba", {
-                bufferManager: new BufferManager(gl, 4, { bufferType, initialCapacity }),
-                adaptor: (item) => {
-                    if (!item.color || item.color.length === 0) {
-                        return new Float32Array([1, 1, 1, 1]); // Default color if none provided
-                    }
-                    return new Float32Array(item.color);
-                }
-            });
-        }
-        this.bufferManagersMap = bufferManagersMap;
-    }
-    init(globe, gl) {
-        this.globe = globe;
-        this.gl = gl;
-        this.program = PieceOfPieProgramCache.get(globe);
-        this._createBufferManagersMap();
-        this.vao = this.program.createVAO(
-        //@ts-ignore
-        ...['centerCoords2d',
-            'centerCoords3d',
-            'startAngle2d',
-            'tailAngle2d',
-            'startAngle3d',
-            'tailAngle3d',
-            'rgba',
-            'radius',
-            'fillingMode'].map((name) => {
-            if (!this.bufferManagersMap?.has(name)) {
-                return null; // this make vao with default attribute value with no buffer bound to it
-            }
-            const buffer = this.bufferManagersMap?.get(name)?.bufferManager.buffer;
-            return {
-                buffer: buffer,
-                stride: 0,
-                offset: 0,
-            };
-        }));
-        this._uboHandler = this.program.createUBO();
-        this._uboHandler.updateSingle("u_color", new Float32Array(this._pluginOptions.defaultColor));
-        this._uboHandler.updateSingle("u_opacity", new Float32Array([this._pluginOptions.opacity ?? 1.0])); // Default opacity is 1.0
-    }
-    draw3D() {
-        if (!this.gl || !this.program || !this.vao || !this.globe) {
-            console.warn("PieChartPlugin is not initialized properly Or unregistered from globe.");
-            return;
-        }
-        const length = this.bufferOrchestrator.length;
-        this.gl.disable(this.gl.DEPTH_TEST);
-        if (this.drawMode === "BOTH") {
-            this.program?.draw(length, this.vao, EDGE_COUNT, "LINE_STRIP", this._uboHandler);
-            this.program?.draw(length, this.vao, EDGE_COUNT, "TRIANGLE_FAN", this._uboHandler);
-        }
-        else {
-            this.program?.draw(length, this.vao, EDGE_COUNT, this.drawMode, this._uboHandler);
-        }
-        this.gl.enable(this.gl.DEPTH_TEST);
-    }
-    free() {
-        if (this._isFreed) {
-            console.warn("PieChartPlugin is already freed.");
-            return;
-        }
-        PieceOfPieProgramCache.release(this.globe);
-        this.gl?.deleteVertexArray(this.vao);
-        this._isFreed = true;
-        this.globe = null;
-        this.gl = null;
-        this.program = null;
-    }
-}
+import { Globe, Meter, PluginInterface, Color, BUFFER_TYPE, BufferAndReadInfo, UBOHandler, LongLatDegree } from "../../types";
+import { PieceOfPieProgramCache, Logic, DrawMode } from "../../programs/rings/partial-ring/piece-of-pie";
+import { BufferManagersMap, BufferManager, BufferOrchestrator } from "../../util/account/single-attribute-buffer-management/index";
+import { sphereCoord } from "../../util/geometry/index";
+import { opacityCheck } from "../../util/check/typecheck";
+import { CentigradeDegree } from "../../types";
+
+
+const INITIAL_CAPACITY = 10; // Initial capacity for the buffer orchestrator
+const EDGE_COUNT = 100; // Number of edges for the pie chart
+const Radians = Math.PI / 180; // Conversion factor from degrees to radians
+
+export type FillingMode = 0 | 1 | 2; // 0: constant, 1: fading, 2: hide
+export type DrawModePlugin = DrawMode | "BOTH";
+
+
+
+export type PieceOfPiePluginOptions = {
+    defaultHeightFromGroundIn3D: Meter; // Default altitude for the pie chart
+    bufferType: BUFFER_TYPE; // Type of buffer to use
+    initialCapacity: number; // Initial capacity for the buffer orchestrator
+    defaultColor: Color; // Default color for the pie chart
+    variativeColorsOn: boolean; // Whether to use variative colors
+    opacity: number; // Opacity of the pie chart
+}
+
+
+export type PieceOfPiePluginInput = {
+    key: string;
+    center: LongLatDegree;
+    radius: Meter;
+    startAngle2D?: CentigradeDegree; // in radians
+    startAngle3D?: CentigradeDegree; // in radians
+    coverAngle2D?: CentigradeDegree; // in radians
+    coverAngle3D?: CentigradeDegree; // in radians
+    altitude?: Meter;
+    fillingMode?: FillingMode;
+    color?: Color;
+}
+
+
+export class PieceOfPiePlugin implements PluginInterface {
+    id: string;
+    private _isFreed: boolean = false;
+    globe: Globe | null = null;
+    private gl: WebGL2RenderingContext | null = null;
+    private program: Logic | null = null;
+    private vao: WebGLVertexArrayObject | null = null;
+    private bufferManagersMap: BufferManagersMap | null = null;
+    private bufferOrchestrator: BufferOrchestrator = new BufferOrchestrator({ capacity: INITIAL_CAPACITY });
+    private drawMode: DrawModePlugin = "BOTH";
+    private _uboHandler: UBOHandler | null = null;
+
+    private _pluginOptions: PieceOfPiePluginOptions = {
+        bufferType: "STATIC_DRAW",
+        initialCapacity: INITIAL_CAPACITY,
+        opacity: 1.0, // Default opacity is 1.0
+        defaultHeightFromGroundIn3D: 0, // Default altitude is ground level
+        defaultColor: [1, 1, 1, 1], // Default color is white with full opacity
+        variativeColorsOn: false, // Default is to not use variative colors
+    };
+    constructor(
+        id: string,
+        options: Partial<PieceOfPiePluginOptions> | null = null
+    ) {
+        this.id = id;
+        if (options) {
+            this._pluginOptions = {
+                ...this._pluginOptions,
+                ...options
+            };
+        }
+    }
+
+
+    insertBulk(items: PieceOfPiePluginInput[]): void {
+
+        this.bufferOrchestrator.insertBulk(items, this.bufferManagersMap as BufferManagersMap);
+        this.globe?.DrawRender();
+    }
+
+
+    deleteBulk(keys: string[]): void {
+        this.bufferOrchestrator.deleteBulk(keys, this.bufferManagersMap as BufferManagersMap);
+        this.globe?.DrawRender();
+    }
+
+
+    setPluginOpacity(opacity: number, drawRender: boolean = true): void {
+        opacityCheck(opacity);
+        this._uboHandler?.updateSingle("u_opacity", new Float32Array([opacity]));
+        if (drawRender) {
+            this.globe?.DrawRender();
+        }
+    }
+
+    setDrawMode(drawMode: DrawMode): void {
+        if (drawMode !== "TRIANGLE_FAN" && drawMode !== "LINE_STRIP" && drawMode !== "BOTH") {
+            throw new Error("Invalid draw mode. Use 'TRIANGLE_FAN' or 'LINE_STRIP'.");
+        }
+        this.drawMode = drawMode;
+        this.globe?.DrawRender();
+    }
+
+
+    setDefaultColor(color: Color): void {
+        if (this._isFreed) {
+            console.warn("PieceOfPiePlugin is freed, cannot set default color.");
+            return;
+        }
+        if (!Array.isArray(color) || color.length !== 4) {
+            throw new Error("Color must be an array of 4 numbers [R, G, B, A].");
+        }
+        this._uboHandler?.updateSingle("u_color", new Float32Array(color));
+        this.globe?.DrawRender();
+    }
+
+
+    _createBufferManagersMap(): void {
+        const { gl, globe, _pluginOptions } = this;
+        const { bufferType, initialCapacity } = _pluginOptions;
+        if (!gl || !globe) {
+            throw new Error("Globe and WebGL context must be initialized before creating buffer management map.");
+        }
+
+        const bufferManagersMap: BufferManagersMap = new Map(
+            [
+                ["centerCoords2d", {
+                    bufferManager: new BufferManager(
+                        this.gl as WebGL2RenderingContext,
+                        2,
+                        { bufferType: bufferType, initialCapacity }
+                    ),
+                    adaptor: (item: PieceOfPiePluginInput) => new Float32Array(
+                        globe.api_GetMercator2DPoint(item.center[0], item.center[1])
+                    ),
+                }],
+                ["centerCoords3d", {
+                    bufferManager: new BufferManager(gl, 3, { bufferType, initialCapacity }),
+                    adaptor: (item: PieceOfPiePluginInput) => sphereCoord(
+                        item.center[0], item.center[1],
+                        globe,
+                        (item.altitude ?? this._pluginOptions.defaultHeightFromGroundIn3D) / 1000
+                    )
+                }],
+                ["startAngle2d", {
+                    bufferManager: new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    adaptor: (item: PieceOfPiePluginInput) => {
+                        if (item.startAngle2D === undefined) {
+                            return new Float32Array([0]); // Default angle if not provided
+                        }
+                        return new Float32Array([(item.startAngle2D) * Radians]);
+                    }
+                }],
+                ["tailAngle2d", {
+                    bufferManager: new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    adaptor: (item: PieceOfPiePluginInput) => {
+                        if (item.coverAngle2D === undefined) {
+                            return new Float32Array([0]); // Default angle if not provided
+                        }
+                        return new Float32Array([item.coverAngle2D * Radians]);
+                    }
+                }],
+                ["startAngle3d", {
+                    bufferManager: new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    adaptor: (item: PieceOfPiePluginInput) => {
+                        if (item.startAngle3D === undefined) {
+                            return new Float32Array([0]); // Default angle if not provided
+                        }
+                        return new Float32Array([item.startAngle3D * Radians]);
+                    }
+                }],
+                ["tailAngle3d", {
+                    bufferManager: new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    adaptor: (item: PieceOfPiePluginInput) => {
+                        if (item.coverAngle3D === undefined) {
+                            return new Float32Array([0]); // Default angle if not provided
+                        }
+                        return new Float32Array([item.coverAngle3D * Radians]);
+                    }
+                }],
+                ["fillingMode", {
+                    bufferManager: new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    adaptor: (item: PieceOfPiePluginInput) => new Float32Array([item.fillingMode ?? 0])
+                }],
+
+                ["radius", {
+                    bufferManager: new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    adaptor: (item: PieceOfPiePluginInput) => new Float32Array([item.radius])
+                }],
+            ]
+        );
+
+        if (this._pluginOptions.variativeColorsOn) {
+            bufferManagersMap.set("rgba", {
+                bufferManager: new BufferManager(gl, 4, { bufferType, initialCapacity }),
+                adaptor: (item: PieceOfPiePluginInput) => {
+                    if (!item.color || item.color.length === 0) {
+                        return new Float32Array([1, 1, 1, 1]); // Default color if none provided
+                    }
+                    return new Float32Array(item.color);
+                }
+            }
+            );
+        }
+        this.bufferManagersMap = bufferManagersMap;
+    }
+
+
+    init(globe: Globe, gl: WebGL2RenderingContext): void {
+        this.globe = globe;
+        this.gl = gl;
+        this.program = PieceOfPieProgramCache.get(globe) as Logic;
+        this._createBufferManagersMap();
+        this.vao = this.program.createVAO(
+            //@ts-ignore
+            ...['centerCoords2d',
+                'centerCoords3d',
+                'startAngle2d',
+                'tailAngle2d',
+                'startAngle3d',
+                'tailAngle3d',
+                'rgba',
+                'radius',
+                'fillingMode'].map((name) => {
+                    if (!this.bufferManagersMap?.has(name)) {
+                        return null; // this make vao with default attribute value with no buffer bound to it
+                    }
+                    const buffer = this.bufferManagersMap?.get(name)?.bufferManager.buffer;
+                    return {
+                        buffer: buffer,
+                        stride: 0,
+                        offset: 0,
+                    } as BufferAndReadInfo;
+                })
+        );
+
+        this._uboHandler = this.program.createUBO();
+        this._uboHandler.updateSingle("u_color", new Float32Array(this._pluginOptions.defaultColor));
+        this._uboHandler.updateSingle("u_opacity", new Float32Array([this._pluginOptions.opacity ?? 1.0])); // Default opacity is 1.0
+    }
+
+
+
+    draw3D(): void {
+        if (!this.gl || !this.program || !this.vao || !this.globe) {
+            console.warn("PieChartPlugin is not initialized properly Or unregistered from globe.");
+            return;
+        }
+        const length = this.bufferOrchestrator.length;
+        this.gl.disable(this.gl.DEPTH_TEST);
+        if (this.drawMode === "BOTH") {
+            this.program?.draw(length, this.vao, EDGE_COUNT, "LINE_STRIP", this._uboHandler);
+            this.program?.draw(length, this.vao, EDGE_COUNT, "TRIANGLE_FAN", this._uboHandler);
+        } else {
+            this.program?.draw(length, this.vao, EDGE_COUNT, this.drawMode as DrawMode, this._uboHandler);
+        }
+        this.gl.enable(this.gl.DEPTH_TEST);
+    }
+
+
+    free(): void {
+        if (this._isFreed) {
+            console.warn("PieChartPlugin is already freed.");
+            return;
+        }
+        PieceOfPieProgramCache.release(this.globe as Globe);
+        this.gl?.deleteVertexArray(this.vao as WebGLVertexArrayObject);
+        this._isFreed = true;
+        this.globe = null;
+        this.gl = null;
+        this.program = null;
+    }
+
+}