@pirireis/webglobeplugins 0.15.35 → 0.16.0

package/circle-line-chain/plugin.js

@@ -1,411 +1,464 @@
-import { LineOnGlobeCache } from '../programs/line-on-globe/naive-accurate-flexible';
-import { CircleCache, EDGE_COUNT as flatCircleEdgeCount, centerCoords2dflatDataCreator } from '../programs/line-on-globe/circle-accurate-flat';
-import { CircleCache as Circle3DCache } from '../programs/line-on-globe/circle-accurate-3d';
-import { BufferOrchestrator, BufferManager } from "../util/account";
-import { ChainListMap } from "../range-tools-on-terrain/circle-line-chain/chain-list-map";
-import { keyMethod } from "./util";
-import { populateFloat32Array } from "../util/jshelpers/data-filler";
-import { ContextTextWriter3 } from '../write-text/context-text3';
-import { opacityCheck, mapGetOrThrow } from '../util/check/typecheck';
-import { createBufferAndReadInfo } from '../util/gl-util/buffer/attribute-loader';
-import { sphereCoord } from '../util/geometry/index';
-/**
- * Insert info to chain list map (nodes and properties)
- *
- * ask chain list map for text data
- * ask chain list map for buffer data
- *
- *
- * addNode
- * insertBulk
- * deleteChain
- * deleteNodes
- * updateCoordinates()
- * updateChainProperties
- */
-/**
- *
- *
- * @typedef chain
- * @property {string} chainKey
- * @property {StyleProperties} chainProperties
- *
- * @typedef {Object} Node
- * @property {string} key
- * @property {number} long
- * @property {number} lat
- * @property {number} altitude
- * @property {StyleProperties} circleProperties
- *
- * @typedef {Object} Node
- * @property {string} key
- * @property {number} long
- * @property {number} lat
- *
- * @typedef StyleProperties
- * @property {Array<number>} rgba 0-1
- * @property { number} dashOpacity 0-1
- * @property { number} dashRatio 0-1
- * @property { number } circleDashAngle 0-360
- * @property { number} altitude
- *
- * //property {Array<Node>} nodes
- */
-const textWriterGetOrThrow = mapGetOrThrow("textWriterIDs is invalid");
-export class CircleLineChainPlugin {
-    /**
-     *
-     * @param {*} id
-     * @param {Map<key, ContextTextWriter3>} textWritersMap //import { ContextTextWriter3 } from "@pirireis/webglobeplugins/write-text/context-text3";
-     */
-    constructor(id, { drawCircleOn = true, textWritersMap = new Map(), textDataPreAdaptor = null, circleFlatEdgeCount = flatCircleEdgeCount - 2 } = {}) {
-        this.id = id;
-        this._checktextWritersMap(textWritersMap);
-        this._textWritersMap = textWritersMap;
-        this._textWritersMap.forEach((writer) => writer.setKeyAdaptor((v, i, c, properties) => v.__identity__));
-        this._opacity = 1;
-        this._chainListMap = new ChainListMap(keyMethod);
-        this.bufferOrchestrator = new BufferOrchestrator({ capacity: 10 });
-        this._drawCircleOn = drawCircleOn;
-        this._textDataPreAdaptor = textDataPreAdaptor;
-        this._circleFlatEdgeCount = circleFlatEdgeCount + 2;
-    }
-    // init
-    // API
-    setDrawCircleOn(bool) {
-        if (typeof bool !== 'boolean')
-            throw new Error("setDrawCircleOn parameter must be a boolean");
-        this._drawCircleOn = bool;
-        this.globe.DrawRender();
-    }
-    // ---- updateBulk
-    /**
-     * @param {Array<chain>} data
-     * @typedef chain
-     * @property {string} chainKey
-     * @property {Array<Node>} nodes
-
-     */
-    updateCoordinatesBulk(data, { textWriterIDs = [] } = {}) {
-        // update implicit data structure
-        // find keys to update.. (inserted data and the radius of "from")
-        // updateBuffers
-        // update text
-        const chainKeys = [];
-        for (const chain of data) {
-            chainKeys.push(chain.chainKey);
-            chain.nodes.forEach((node) => {
-                this._chainListMap.updateCoordsinatesOfNode(node, chain.chainKey);
-            });
-        }
-        this._reconstructChains(chainKeys);
-        this._updateTexts(chainKeys, textWriterIDs);
-    }
-    /**
-     * @param {*} chainKey
-     * @param {Array<{nodeKey, circleProperties:Map[propertyName ,value],  lineProperties:Map[propertyName ,value] }} propertyMap
-     */
-    updateNodesProperties(chainKey, nodesAndPropertyMap, { textWriterIDs = [] } = {}) {
-        this._chainListMap.updateNodesProperties(chainKey, nodesAndPropertyMap);
-        this._reconstructChains([chainKey]);
-        this._updateTexts([chainKey], textWriterIDs);
-        this.globe.DrawRender();
-    }
-    /**
-     * @param {*} chainKey
-     * @param {Map<propertyName ,value} propertyMap
-     */
-    updateChainProperties(chainKey, propertyMap, { textWriterIDs = [] } = {}) {
-        this._chainListMap.updateChainProperties(chainKey, propertyMap);
-        this._reconstructChains([chainKey]);
-        if (textWriterIDs)
-            this._updateTexts([chainKey], textWriterIDs);
-    }
-    updateNodeCoordinates(node, chainKey, { textWriterIDs = [] } = {}) {
-        this._chainListMap.updateCoordsinatesOfNode(node, chainKey);
-        if (textWriterIDs)
-            this._updateTexts([chainKey], textWriterIDs);
-        this._reconstructChains([chainKey]);
-        this.globe.DrawRender();
-    }
-    /**
-     *
-     * @param {Array<string>} textWriterIDs | textWritersMap keys to be used for writing text.
-     * @param {Array<string>} chainKeys | if empty, all texts will be updated
-     */
-    updateText(textWriterIDs = [], chainKeys = null) {
-        if (chainKeys === null)
-            chainKeys = this._chainListMap.getAllChainKeysIterator();
-        this._updateTexts(chainKeys, textWriterIDs);
-        this.globe.DrawRender();
-    }
-    // ---- insertBulk
-    /**
-     *
-     * @param {Array<chain>} data
-     */
-    insertBulk(data, { textWriterIDs = [] } = {}) {
-        // first insert everything to implicit structure,
-        // then iterate over data again to update text
-        // let _reconstractChainBufferData method interact with data and bufferOrchestrator.
-        const chainKeysToConstruct = [];
-        for (const { chainKey, chainProperties, nodes } of data) {
-            this._chainListMap.setChain(chainKey, nodes);
-            this._chainListMap.setChainProperties(chainKey, chainProperties);
-            chainKeysToConstruct.push(chainKey);
-        }
-        this._reconstructChains(chainKeysToConstruct);
-        if (textWriterIDs)
-            this._updateTexts(chainKeysToConstruct, textWriterIDs);
-        this.globe.DrawRender();
-    }
-    /**
-     * @param {Node} node
-     * @param {*} chainKey
-     * @param {*} theNodeKeyFront | node key of the next node, null places to the last
-     */
-    addNode(node, chainKey, { theNodeKeyFront = null, textWriterIDs = [] } = {}) {
-        this._chainListMap.addNode(node, chainKey, theNodeKeyFront);
-        if (textWriterIDs)
-            this._updateTexts([chainKey], textWriterIDs);
-        this._reconstructChains([chainKey]);
-        this.globe.DrawRender();
-    }
-    setOpacity(opacity) {
-        opacityCheck(opacity);
-        this._textWritersMap.forEach((writer) => writer.setOpacity(opacity));
-        this._opacity = opacity;
-        this.globe.DrawRender();
-    }
-    getChain(chainKey) {
-        this._chainListMap.getNodes(chainKey);
-    }
-    /**
-     *
-     * @param {*} chainKeys
-     */
-    deleteChains(chainKeys) {
-        const bufferKeys = [];
-        for (const chainKey of chainKeys) {
-            bufferKeys.push(...this._chainListMap.deleteChainAndReturnChainKeys(chainKey));
-        }
-        this._textWritersMap.forEach((writer) => writer.deleteTextBulk(bufferKeys));
-        this._updateTexts(chainKeys, this._textWritersMap.keys());
-        this.bufferOrchestrator.deleteBulk(bufferKeys, this.bufferManagersCompMap);
-        this.globe.DrawRender();
-    }
-    /**
-     *
-     * @param {Array<{chainKey, nodeKeys:[]} keysAndNodes
-     */
-    deleteNodes(keysAndNodes, { textWriterIDs = [] } = {}) {
-        const bufferKeys = [];
-        const chainKeysToReconstuct = [];
-        keysAndNodes.forEach(({ chainKey, nodeKeys }) => {
-            bufferKeys.push(...this._chainListMap.deleteNodesBelongToAChain(chainKey, nodeKeys));
-            chainKeysToReconstuct.push(chainKey);
-        });
-        this._textWritersMap.forEach((writer) => writer.deleteTextBulk(bufferKeys));
-        this.bufferOrchestrator.deleteBulk(bufferKeys, this.bufferManagersCompMap);
-        this._reconstructChains(chainKeysToReconstuct);
-        this._updateTexts(chainKeysToReconstuct, textWriterIDs);
-        this.globe.DrawRender();
-    }
-    init(globe, gl) {
-        this.gl = gl;
-        this.globe = globe;
-        this._initOrchestrations();
-    }
-    // implicit
-    _checktextWritersMap(textWritersMap) {
-        if (!(textWritersMap instanceof Map))
-            throw new Error("textWritersMap is not an instance of Map");
-        textWritersMap.forEach((v) => {
-            if (!(v instanceof ContextTextWriter3))
-                throw new Error("textWritersMap element is not an instance of ContextTextWriter3");
-        });
-    }
-    _initOrchestrations() {
-        const { gl, globe } = this;
-        this.lineProgram = LineOnGlobeCache.get(globe);
-        this.circleProgram2d = CircleCache.get(globe);
-        this.circle3DProgram = Circle3DCache.get(globe);
-        const _circleFlatEdgeCount = this._circleFlatEdgeCount;
-        {
-            // createBuffers
-            const bufferType = "DYNAMIC_DRAW";
-            const initialCapacity = this.bufferOrchestrator.capacity;
-            this.bufferManagersCompMap = new Map([
-                ["centerCoords2d", {
-                        'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array(globe.api_GetMercator2DPoint(item.long, item.lat)),
-                    }],
-                ["centerCoords3d", {
-                        'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
-                        'adaptor': (item) => sphereCoord(item.long, item.lat, globe, item.altitude),
-                    }],
-                ["targetCoords2d", {
-                        'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array(globe.api_GetMercator2DPoint(item.targetLong, item.targetLat)),
-                    }],
-                ["targetCoords3d", {
-                        'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
-                        'adaptor': (item) => sphereCoord(item.targetLong, item.targetLat, globe, item.altitude),
-                    }],
-                ["rgba", {
-                        'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
-                        'adaptor': (item) => {
-                            if (item.lineProperties?.rgba)
-                                return new Float32Array(item.lineProperties.rgba);
-                            return new Float32Array(item.chainProperties.rgba);
-                        }
-                    }],
-                // ["bigRadius", {
-                //     'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                //     'adaptor': (item) => new Float32Array([item.bigRadius])
-                // }],
-                ["dashRatio", {
-                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.chainProperties.dashRatio])
-                    }],
-                ["dashOpacity", {
-                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.chainProperties.dashOpacity])
-                    }],
-                ["circleDashAngle", {
-                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => {
-                            if (item.circleProperties?.circleDashAngle)
-                                return new Float32Array([item.circleProperties.circleDashAngle / 360]);
-                            return new Float32Array([item.chainProperties.circleDashAngle / 360]);
-                        }
-                    }],
-                ["rgbaCircle", {
-                        "bufferManager": new BufferManager(gl, 4, { bufferType, initialCapacity }),
-                        "adaptor": (item) => {
-                            if (item.circleProperties?.rgba)
-                                return new Float32Array(item.circleProperties.rgba);
-                            return new Float32Array(item.chainProperties.rgba);
-                        }
-                    }],
-                // Mercator buffers
-                ["circleDashAngleMercator", {
-                        'bufferManager': new BufferManager(gl, 1 * _circleFlatEdgeCount, { bufferType, initialCapacity }),
-                        'adaptor': (item) => {
-                            if (item.circleProperties?.circleDashAngle)
-                                return new Float32Array([item.circleProperties.circleDashAngle / 360]);
-                            return populateFloat32Array.fillFloat32Array(_circleFlatEdgeCount, item.chainProperties.circleDashAngle / 360);
-                        }
-                    }],
-                ["rgbaCircleMercator", {
-                        "bufferManager": new BufferManager(gl, 4 * _circleFlatEdgeCount, { bufferType, initialCapacity }),
-                        "adaptor": (item) => {
-                            if (item.circleProperties?.rgba)
-                                return populateFloat32Array.fillWithListData(_circleFlatEdgeCount, item.circleProperties.rgba);
-                            return populateFloat32Array.fillWithListData(_circleFlatEdgeCount, item.chainProperties.rgba);
-                        }
-                    }],
-                ["dashOpacityMercator", {
-                        'bufferManager': new BufferManager(gl, 1 * _circleFlatEdgeCount, { bufferType, initialCapacity }),
-                        'adaptor': (item) => populateFloat32Array.fillFloat32Array(_circleFlatEdgeCount, item.chainProperties.dashOpacity)
-                    }],
-                ["centerCoords2dMercator", {
-                        'bufferManager': new BufferManager(gl, 2 * _circleFlatEdgeCount, { bufferType, initialCapacity }),
-                        'adaptor': (item) => item.centerCoords2dflat,
-                    }],
-            ]);
-            const obj = (key) => createBufferAndReadInfo(this.bufferManagersCompMap.get(key).bufferManager.buffer);
-            this.lineVao = this.lineProgram.createVAO(...['centerCoords2d', 'centerCoords3d', 'targetCoords2d', 'targetCoords3d', 'dashRatio', 'dashOpacity', 'rgba'
-            ].map(key => obj(key)));
-            this.circleVao2d = this.circleProgram2d.createVAO(...["centerCoords2dMercator", "rgbaCircleMercator", "circleDashAngleMercator", "dashOpacityMercator"
-            ].map(key => obj(key)));
-            this.circle3DVao = this.circle3DProgram.createVAO(...["centerCoords3d", "targetCoords3d", "rgbaCircle", "circleDashAngle", "dashOpacity"
-            ].map(key => obj(key)));
-        }
-    }
-    _updateTexts(chainKeys, textWriterIDs) {
-        if (textWriterIDs.length === 0)
-            return;
-        const textWriters = textWriterGetOrThrow(this._textWritersMap, textWriterIDs);
-        chainKeys.forEach((chainKey) => {
-            this._chainListMap.textUpdate(chainKey, textWriters, this._textDataPreAdaptor);
-        });
-    }
-    _reconstructChains(chainKeys) {
-        const { globe } = this;
-        // const radiusM = radiusMethod(globe);
-        const callback = (v, i, array, chainProperties) => {
-            if (i === array.length - 1)
-                return null;
-            const centerCoords2dflat = centerCoords2dflatDataCreator(globe, v.long, v.lat, array[i + 1].long, array[i + 1].lat, { edgeCount: this._circleFlatEdgeCount });
-            const altitude = (v.altitude ?? chainProperties.altitude ?? 0) / 1000;
-            return {
-                chainProperties: chainProperties,
-                // bigRadius: radiusM(v, i, array),
-                targetLong: array[i + 1].long,
-                targetLat: array[i + 1].lat,
-                altitude: altitude,
-                long: v.long,
-                lat: v.lat,
-                lineProperties: v.lineProperties,
-                circleProperties: v.circleProperties,
-                centerCoords2dflat,
-                key: v.__identity__
-            };
-        };
-        const bulkData = [];
-        chainKeys.forEach((k) => {
-            this._chainListMap.calculateBufferPropertiesChain(k, callback, bulkData);
-        });
-        this._insertBulk(bulkData);
-    }
-    _insertBulk(bulkData) {
-        this.bufferOrchestrator.insertBulk(bulkData, this.bufferManagersCompMap);
-        this.globe.DrawRender();
-    }
-    // GLOBE API
-    free() {
-        if (this.isFreed)
-            return;
-        this.bufferManagersCompMap.forEach(({ bufferManager }) => {
-            bufferManager.free();
-        });
-        LineOnGlobeCache.release(this.globe);
-        CircleCache.release(this.globe);
-        Circle3DCache.release(this.globe);
-        // LineToTheOriginCache.release(this.globe);
-        this._textWritersMap.forEach((writer) => writer.free());
-        const { gl } = this;
-        gl.deleteVertexArray(this.lineVao);
-        gl.deleteVertexArray(this.circleVao2d);
-        gl.deleteVertexArray(this.circle3DVao);
-        this.lineProgram = null;
-        this.circleProgram2d = null;
-        this.isFreed = true;
-    }
-    draw3D() {
-        const { gl, globe } = this;
-        gl.disable(gl.DEPTH_TEST);
-        const drawOptions = {
-            drawRange: {
-                first: 0,
-                count: this.bufferOrchestrator.length
-            }
-        };
-        this.lineProgram.draw(this.lineVao, drawOptions, this._opacity);
-        this._textWritersMap.forEach((writer) => writer.draw());
-        const is3D = globe.api_GetCurrentGeometry() === 0;
-        if (this._drawCircleOn) {
-            if (is3D) {
-                this.circle3DProgram.draw(this.circle3DVao, this.bufferOrchestrator.length, this._opacity);
-            }
-            else {
-                this.circleProgram2d.draw(this.circleVao2d, this.bufferOrchestrator.length, this._circleFlatEdgeCount, this._opacity);
-            }
-        }
-        gl.enable(gl.DEPTH_TEST);
-    }
-}
-// const radiusMethod = (globe) => (v, i, array) => {
-//     return globe.Math.GetDist3D(v.long, v.lat, array[i + 1].long, array[i + 1].lat)
-// }
+import { LineOnGlobeCache } from '../programs/line-on-globe/naive-accurate-flexible';
+import { CircleCache, EDGE_COUNT as flatCircleEdgeCount, centerCoords2dflatDataCreator } from '../programs/line-on-globe/circle-accurate-flat';
+import { CircleCache as Circle3DCache } from '../programs/line-on-globe/circle-accurate-3d';
+import { BufferOrchestrator, BufferManager } from "../util/account";
+import { ChainListMap } from "../range-tools-on-terrain/circle-line-chain/chain-list-map";
+import { keyMethod } from "./util";
+import { populateFloat32Array } from "../util/jshelpers/data-filler";
+import { ContextTextWriter3 } from '../write-text/context-text3';
+import { opacityCheck, mapGetOrThrow } from '../util/check/typecheck';
+import { createBufferAndReadInfo } from '../util/gl-util/buffer/attribute-loader';
+import { sphereCoord } from '../util/geometry/index';
+/**
+ * Insert info to chain list map (nodes and properties)
+ * 
+ * ask chain list map for text data
+ * ask chain list map for buffer data
+ * 
+ * 
+ * addNode
+ * insertBulk
+ * deleteChain
+ * deleteNodes
+ * updateCoordinates()
+ * updateChainProperties
+ */
+
+
+/**
+ * 
+ * 
+ * @typedef chain
+ * @property {string} chainKey
+ * @property {StyleProperties} chainProperties
+ * 
+ * @typedef {Object} Node
+ * @property {string} key
+ * @property {number} long
+ * @property {number} lat  
+ * @property {number} altitude
+ * @property {StyleProperties} circleProperties
+ * 
+ * @typedef {Object} Node
+ * @property {string} key
+ * @property {number} long
+ * @property {number} lat  
+ * 
+ * @typedef StyleProperties
+ * @property {Array<number>} rgba 0-1
+ * @property { number} dashOpacity 0-1
+ * @property { number} dashRatio 0-1
+ * @property { number } circleDashAngle 0-360
+ * @property { number} altitude
+ * 
+ * //property {Array<Node>} nodes
+ */
+
+
+const textWriterGetOrThrow = mapGetOrThrow("textWriterIDs is invalid");
+
+export class CircleLineChainPlugin {
+    /**
+     * 
+     * @param {*} id 
+     * @param {Map<key, ContextTextWriter3>} textWritersMap //import { ContextTextWriter3 } from "@pirireis/webglobeplugins/write-text/context-text3"; 
+     */
+    constructor(id, {
+        drawCircleOn = true,
+        textWritersMap = new Map(),
+        textDataPreAdaptor = null,
+        circleFlatEdgeCount = flatCircleEdgeCount - 2
+    } = {}) {
+        this.id = id;
+        this._checktextWritersMap(textWritersMap);
+        this._textWritersMap = textWritersMap;
+        this._textWritersMap.forEach((writer) => writer.setKeyAdaptor((v, i, c, properties) => v.__identity__));
+        this._opacity = 1;
+        this._chainListMap = new ChainListMap(keyMethod);
+        this.bufferOrchestrator = new BufferOrchestrator({ capacity: 10 });
+        this._drawCircleOn = drawCircleOn;
+        this._textDataPreAdaptor = textDataPreAdaptor;
+        this._circleFlatEdgeCount = circleFlatEdgeCount + 2;
+    }
+
+    // init
+
+    // API
+    setDrawCircleOn(bool) {
+        if (typeof bool !== 'boolean') throw new Error("setDrawCircleOn parameter must be a boolean");
+        this._drawCircleOn = bool;
+        this.globe.DrawRender();
+    }
+
+    // ---- updateBulk
+    /**
+     * @param {Array<chain>} data 
+     * @typedef chain
+     * @property {string} chainKey
+     * @property {Array<Node>} nodes
+
+     */
+    updateCoordinatesBulk(data, { textWriterIDs = [] } = {}) {
+        // update implicit data structure
+        // find keys to update.. (inserted data and the radius of "from")
+        // updateBuffers
+        // update text
+        const chainKeys = [];
+        for (const chain of data) {
+            chainKeys.push(chain.chainKey);
+            chain.nodes.forEach((node) => {
+                this._chainListMap.updateCoordsinatesOfNode(node, chain.chainKey);
+            });
+        }
+        this._reconstructChains(chainKeys);
+        this._updateTexts(chainKeys, textWriterIDs);
+    }
+
+
+    /**
+     * @param {*} chainKey 
+     * @param {Array<{nodeKey, circleProperties:Map[propertyName ,value],  lineProperties:Map[propertyName ,value] }} propertyMap 
+     */
+    updateNodesProperties(chainKey, nodesAndPropertyMap, { textWriterIDs = [] } = {}) {
+        this._chainListMap.updateNodesProperties(chainKey, nodesAndPropertyMap)
+        this._reconstructChains([chainKey]);
+        this._updateTexts([chainKey], textWriterIDs);
+        this.globe.DrawRender();
+    }
+
+    /**
+     * @param {*} chainKey 
+     * @param {Map<propertyName ,value} propertyMap 
+     */
+    updateChainProperties(chainKey, propertyMap, { textWriterIDs = [] } = {}) {
+        this._chainListMap.updateChainProperties(chainKey, propertyMap);
+        this._reconstructChains([chainKey]);
+        if (textWriterIDs) this._updateTexts([chainKey], textWriterIDs);
+    }
+
+
+    updateNodeCoordinates(node, chainKey, { textWriterIDs = [] } = {}) {
+        this._chainListMap.updateCoordsinatesOfNode(node, chainKey);
+        if (textWriterIDs) this._updateTexts([chainKey], textWriterIDs);
+        this._reconstructChains([chainKey]);
+        this.globe.DrawRender();
+    }
+
+
+    /**
+     * 
+     * @param {Array<string>} textWriterIDs | textWritersMap keys to be used for writing text.
+     * @param {Array<string>} chainKeys | if empty, all texts will be updated
+     */
+    updateText(textWriterIDs = [], chainKeys = null) {
+        if (chainKeys === null) chainKeys = this._chainListMap.getAllChainKeysIterator();
+        this._updateTexts(chainKeys, textWriterIDs);
+        this.globe.DrawRender();
+    }
+
+
+    // ---- insertBulk
+    /**
+     * 
+     * @param {Array<chain>} data 
+     */
+    insertBulk(data, { textWriterIDs = [] } = {}) {
+        // first insert everything to implicit structure,
+        // then iterate over data again to update text
+        // let _reconstractChainBufferData method interact with data and bufferOrchestrator.
+        const chainKeysToConstruct = [];
+
+        for (const { chainKey, chainProperties, nodes } of data) {
+            this._chainListMap.setChain(chainKey, nodes);
+            this._chainListMap.setChainProperties(chainKey, chainProperties);
+            chainKeysToConstruct.push(chainKey);
+        }
+        this._reconstructChains(chainKeysToConstruct);
+        if (textWriterIDs) this._updateTexts(chainKeysToConstruct, textWriterIDs);
+        this.globe.DrawRender();
+    }
+
+    /**
+     * @param {Node} node
+     * @param {*} chainKey 
+     * @param {*} theNodeKeyFront | node key of the next node, null places to the last
+     */
+    addNode(node, chainKey, { theNodeKeyFront = null, textWriterIDs = [] } = {}) {
+        this._chainListMap.addNode(node, chainKey, theNodeKeyFront);
+        if (textWriterIDs) this._updateTexts([chainKey], textWriterIDs);
+        this._reconstructChains([chainKey]);
+        this.globe.DrawRender();
+
+    }
+
+
+    setOpacity(opacity) {
+        opacityCheck(opacity);
+        this._textWritersMap.forEach((writer) => writer.setOpacity(opacity));
+        this._opacity = opacity;
+        this.globe.DrawRender();
+    }
+
+
+
+    getChain(chainKey) { // TODO: change the name to getChainNodes
+        this._chainListMap.getNodes(chainKey);
+    }
+
+    /**
+     * 
+     * @param {*} chainKeys 
+     */
+    deleteChains(chainKeys) {
+        const bufferKeys = [];
+        for (const chainKey of chainKeys) {
+            bufferKeys.push(...this._chainListMap.deleteChainAndReturnChainKeys(chainKey));
+        }
+        this._textWritersMap.forEach((writer) => writer.deleteTextBulk(bufferKeys));
+        this._updateTexts(chainKeys, this._textWritersMap.keys());
+        this.bufferOrchestrator.deleteBulk(bufferKeys, this.bufferManagersCompMap);
+        this.globe.DrawRender();
+    }
+
+
+    /**
+     * 
+     * @param {Array<{chainKey, nodeKeys:[]} keysAndNodes
+     */
+    deleteNodes(keysAndNodes, { textWriterIDs = [] } = {}) {
+        const bufferKeys = [];
+        const chainKeysToReconstuct = [];
+        keysAndNodes.forEach(({ chainKey, nodeKeys }) => {
+            bufferKeys.push(...this._chainListMap.deleteNodesBelongToAChain(chainKey, nodeKeys));
+            chainKeysToReconstuct.push(chainKey);
+        });
+        this._textWritersMap.forEach((writer) => writer.deleteTextBulk(bufferKeys));
+        this.bufferOrchestrator.deleteBulk(bufferKeys, this.bufferManagersCompMap);
+        this._reconstructChains(chainKeysToReconstuct);
+        this._updateTexts(chainKeysToReconstuct, textWriterIDs);
+        this.globe.DrawRender();
+    }
+
+
+    init(globe, gl) {
+        this.gl = gl;
+        this.globe = globe
+        this._initOrchestrations()
+    }
+
+    // implicit
+
+    _checktextWritersMap(textWritersMap) {
+        if (!(textWritersMap instanceof Map)) throw new Error("textWritersMap is not an instance of Map");
+        textWritersMap.forEach((v) => {
+            if (!(v instanceof ContextTextWriter3)) throw new Error("textWritersMap element is not an instance of ContextTextWriter3");
+        });
+    }
+
+    _initOrchestrations() {
+        const { gl, globe } = this;
+        this.lineProgram = LineOnGlobeCache.get(globe);
+        this.circleProgram2d = CircleCache.get(globe);
+        this.circle3DProgram = Circle3DCache.get(globe);
+        const _circleFlatEdgeCount = this._circleFlatEdgeCount;
+        {
+
+            // createBuffers
+            const bufferType = "DYNAMIC_DRAW";
+            const initialCapacity = this.bufferOrchestrator.capacity;
+            this.bufferManagersCompMap = new Map(
+                [
+                    ["centerCoords2d", {
+                        'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array(globe.api_GetMercator2DPoint(item.long, item.lat)),
+                    }],
+                    ["centerCoords3d", {
+                        'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
+                        'adaptor': (item) => sphereCoord(item.long, item.lat, globe, item.altitude),
+                    }],
+                    ["targetCoords2d", {
+                        'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array(globe.api_GetMercator2DPoint(item.targetLong, item.targetLat)),
+                    }],
+                    ["targetCoords3d", {
+                        'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
+                        'adaptor': (item) => sphereCoord(item.targetLong, item.targetLat, globe, item.altitude),
+                    }],
+                    ["rgba", {
+                        'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
+                        'adaptor': (item) => {
+                            if (item.lineProperties?.rgba) return new Float32Array(item.lineProperties.rgba);
+                            return new Float32Array(item.chainProperties.rgba);
+                        }
+                    }],
+                    // ["bigRadius", {
+                    //     'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    //     'adaptor': (item) => new Float32Array([item.bigRadius])
+                    // }],
+                    ["dashRatio", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.chainProperties.dashRatio])
+                    }],
+                    ["dashOpacity", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.chainProperties.dashOpacity])
+                    }],
+                    ["circleDashAngle", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => {
+                            if (item.circleProperties?.circleDashAngle) return new Float32Array([item.circleProperties.circleDashAngle / 360]);
+                            return new Float32Array([item.chainProperties.circleDashAngle / 360]);
+                        }
+                    }],
+                    ["rgbaCircle", {
+                        "bufferManager": new BufferManager(gl, 4, { bufferType, initialCapacity }),
+                        "adaptor": (item) => {
+                            if (item.circleProperties?.rgba) return new Float32Array(item.circleProperties.rgba);
+                            return new Float32Array(item.chainProperties.rgba);
+                        }
+                    }],
+                    // Mercator buffers
+                    ["circleDashAngleMercator", {
+                        'bufferManager': new BufferManager(gl, 1 * _circleFlatEdgeCount, { bufferType, initialCapacity }),
+                        'adaptor': (item) => {
+                            if (item.circleProperties?.circleDashAngle) return new Float32Array([item.circleProperties.circleDashAngle / 360]);
+                            return populateFloat32Array.fillFloat32Array(_circleFlatEdgeCount, item.chainProperties.circleDashAngle / 360);
+                        }
+                    }],
+                    ["rgbaCircleMercator", {                            // 62
+                        "bufferManager": new BufferManager(gl, 4 * _circleFlatEdgeCount, { bufferType, initialCapacity }),
+                        "adaptor": (item) => {
+                            if (item.circleProperties?.rgba) return populateFloat32Array.fillWithListData(_circleFlatEdgeCount, item.circleProperties.rgba);
+                            return populateFloat32Array.fillWithListData(_circleFlatEdgeCount, item.chainProperties.rgba);
+                        }
+                    }],
+                    ["dashOpacityMercator", {
+                        'bufferManager': new BufferManager(gl, 1 * _circleFlatEdgeCount, { bufferType, initialCapacity }),
+                        'adaptor': (item) => populateFloat32Array.fillFloat32Array(_circleFlatEdgeCount, item.chainProperties.dashOpacity)
+                    }],
+                    ["centerCoords2dMercator", {
+                        'bufferManager': new BufferManager(gl, 2 * _circleFlatEdgeCount, { bufferType, initialCapacity }),
+                        'adaptor': (item) => item.centerCoords2dflat,
+                    }],
+                ]
+            );
+            const obj = (key) => createBufferAndReadInfo(this.bufferManagersCompMap.get(key).bufferManager.buffer);
+
+            this.lineVao = this.lineProgram.createVAO(
+                ...['centerCoords2d', 'centerCoords3d', 'targetCoords2d', 'targetCoords3d', 'dashRatio', 'dashOpacity', 'rgba'
+                ].map(key => obj(key)));
+
+            this.circleVao2d = this.circleProgram2d.createVAO(
+                ...["centerCoords2dMercator", "rgbaCircleMercator", "circleDashAngleMercator", "dashOpacityMercator"
+                ].map(key => obj(key)));
+
+            this.circle3DVao = this.circle3DProgram.createVAO(
+                ...["centerCoords3d", "targetCoords3d", "rgbaCircle", "circleDashAngle", "dashOpacity"
+                ].map(key => obj(key))
+            );
+
+        }
+
+    }
+
+
+
+    _updateTexts(chainKeys, textWriterIDs) {
+        if (textWriterIDs.length === 0) return;
+        const textWriters = textWriterGetOrThrow(this._textWritersMap, textWriterIDs)
+        chainKeys.forEach((chainKey) => {
+            this._chainListMap.textUpdate(chainKey, textWriters, this._textDataPreAdaptor);
+        });
+    }
+
+
+    _reconstructChains(chainKeys) {
+        const { globe } = this;
+
+        // const radiusM = radiusMethod(globe);
+        const callback = (v, i, array, chainProperties) => {
+            if (i === array.length - 1) return null;
+
+            const centerCoords2dflat = centerCoords2dflatDataCreator(globe, v.long, v.lat, array[i + 1].long, array[i + 1].lat, { edgeCount: this._circleFlatEdgeCount });
+            const altitude = (v.altitude ?? chainProperties.altitude ?? 0) / 1000;
+            return {
+                chainProperties: chainProperties,
+                // bigRadius: radiusM(v, i, array),
+                targetLong: array[i + 1].long,
+                targetLat: array[i + 1].lat,
+                altitude: altitude,
+                long: v.long,
+                lat: v.lat,
+                lineProperties: v.lineProperties,
+                circleProperties: v.circleProperties,
+                centerCoords2dflat,
+                key: v.__identity__
+
+            }
+        }
+        const bulkData = [];
+        chainKeys.forEach((k) => {
+            this._chainListMap.calculateBufferPropertiesChain(k, callback, bulkData);
+        })
+
+        this._insertBulk(bulkData);
+    }
+
+
+    _insertBulk(bulkData) {
+        this.bufferOrchestrator.insertBulk(bulkData, this.bufferManagersCompMap);
+        this.globe.DrawRender();
+    }
+
+
+    // GLOBE API
+    free() {
+        if (this.isFreed) return;
+        this.bufferManagersCompMap.forEach(({ bufferManager }) => {
+            bufferManager.free();
+        })
+        LineOnGlobeCache.release(this.globe);
+        CircleCache.release(this.globe);
+        Circle3DCache.release(this.globe);
+        // LineToTheOriginCache.release(this.globe);
+        this._textWritersMap.forEach((writer) => writer.free());
+        const { gl } = this;
+        gl.deleteVertexArray(this.lineVao);
+        gl.deleteVertexArray(this.circleVao2d);
+        gl.deleteVertexArray(this.circle3DVao);
+        this.lineProgram = null;
+        this.circleProgram2d = null;
+        this.isFreed = true;
+    }
+
+
+    draw3D() {
+        const { gl, globe } = this;
+        gl.disable(gl.DEPTH_TEST);
+
+        const drawOptions = {
+            drawRange: {
+                first: 0,
+                count: this.bufferOrchestrator.length
+            }
+        }
+        this.lineProgram.draw(this.lineVao, drawOptions, this._opacity);
+        this._textWritersMap.forEach((writer) => writer.draw());
+        const is3D = globe.api_GetCurrentGeometry() === 0;
+        if (this._drawCircleOn) {
+            if (is3D) {
+                this.circle3DProgram.draw(this.circle3DVao, this.bufferOrchestrator.length, this._opacity);
+            } else {
+                this.circleProgram2d.draw(this.circleVao2d, this.bufferOrchestrator.length, this._circleFlatEdgeCount, this._opacity);
+            }
+        }
+        gl.enable(gl.DEPTH_TEST);
+    }
+}
+
+
+
+// const radiusMethod = (globe) => (v, i, array) => {
+//     return globe.Math.GetDist3D(v.long, v.lat, array[i + 1].long, array[i + 1].lat)
+// }
+