@pirireis/webglobeplugins 0.3.7 → 0.3.8

package/bearing-line/plugin.js

@@ -160,7 +160,7 @@ export default class Plugin {
         };
 
         this.lineVao = this.lineProgram.createVAO(
-            ...['centerCoords', 'targetCoords', 'dashRatio', 'rgba'].map(key => obj(this.bufferManagersCompMap.get(key))));
+            ...['centerCoords', 'targetCoords', 'dashRatio', 'dashOpacity', 'rgba'].map(key => obj(this.bufferManagersCompMap.get(key))));
         this.ringVao = this.ringProgram.createVAO(
             ...['centerCoords', 'startAngle', 'tailAngle', 'rgba', 'radius', 'rgbaMode'].map(key => obj(this.bufferManagersCompMap.get(key))));
         {
@@ -174,7 +174,7 @@ export default class Plugin {
         }
         // centerObj, startAngleObj, radiusObj, colorObj, dashRatioObj, dashOpacityObj
         this.circleVao = this.circleProgram.createVAO(
-            ...["centerCoords", "startAngle", "bigRadius", "rgba", "circleDashAngle", "dashOpacity"].map(key => obj(this.bufferManagersCompMap.get(key))));
+            ...["centerCoords", "bigRadius", "rgba", "circleDashAngle", "dashOpacity"].map(key => obj(this.bufferManagersCompMap.get(key))));
     }
 
 
@@ -216,17 +216,21 @@ export default class Plugin {
      * @property {number} dashOpacity 0-1
      * @property {number} circleDashAngle 0-360
      * @param {Array<item>} items 
-     * @param {Array<string>} injectionsSubSetIDs | textContextInjectionMap keys to be used for writing text.
+     * @param {Array<string>} textWriterInjectionSubSetIDs | textContextInjectionMap keys to be used for writing text.
      */
-    insertBulk(items, injectionsSubSetIDs = []) {
+    insertBulk(items, textWriterInjectionSubSetIDs = []) {
         const { globe, bufferOrchestrator, bufferManagersCompMap } = this;// angleTextContext, distanceTextContext,
-        const injectionsSubSet = injectionsSubSetIDs.map((id) => this._textContextInjectionMap.get(id));
+        const textWriterInjectionSubSets = textWriterInjectionSubSetIDs.map((id) => this._textContextInjectionMap.get(id));
         const data = []
         for (let item of items) {
-            this._insertTexts(item, injectionsSubSet);
+            this._insertTexts(item, textWriterInjectionSubSets);
             data.push(this.__insertAdaptor(item));
         }
         bufferOrchestrator.insertBulk(data, bufferManagersCompMap);
+        this._textContextInjectionMap.forEach((v) => {
+            const { writer } = v;
+            writer.updateOpacityBulk(items, (e) => e.key, (e) => e.rgba[3]);
+        })
         globe.DrawRender();
     }
 
@@ -251,7 +255,7 @@ export default class Plugin {
      */
     updateCoordinatesBulk(items, textWriterInjectionSubSetIDs = []) { //TODO
         const injectionsSubSet = textWriterInjectionSubSetIDs.map((id) => this._textContextInjectionMap.get(id));
-        const { globe, bufferOrchestrator, bufferManagersCompMap, angleTextContext, distanceTextContext } = this;
+        const { globe, bufferOrchestrator, bufferManagersCompMap, } = this;
         const data = []
         for (let item of items) {
             this._insertTexts(item, injectionsSubSet);
@@ -270,12 +274,22 @@ export default class Plugin {
      * @param {*} textWriterInjectionSubSetIDs 
      * Do NOT send empty data if property ID of this data is entered or NaN is loaded to the buffer, resulting in an unwanted behaviour.
      */
-    updatePartial(items, propertyIDs = [], textWriterInjectionSubSetIDs = []) {
+    updatePartial(items, propertyIDs = [], textWriterInjectionSubSetIDs = []) { // textWriterInjectionSubSetIDs = []
         if (propertyIDs.length === 0) console.warn("updatePartial is called with no target propertyIDs");
         const { _textContextInjectionMap, bufferOrchestrator, bufferManagersCompMap } = this;
         const writers = textWriterInjectionSubSetIDs.map((x) => _textContextInjectionMap.get(x));
         for (let item of items) { this._insertTexts(item, writers) }
         bufferOrchestrator.updateBulk(items, bufferManagersCompMap, propertyIDs);
+        // patch to update text opacity
+        for (const property of propertyIDs) {
+            if (property === "rgba") {
+                this._textContextInjectionMap.forEach((v) => {
+                    const { writer } = v;
+                    writer.updateOpacityBulk(items, (e) => e.key, (e) => e.rgba[3]);
+                })
+
+            }
+        }
     }
 
 
@@ -359,6 +373,7 @@ export default class Plugin {
 
 
 
+
     _insertTexts(item, textWriterInjectionSubSet) {
         //TODO This method can be more performant if it works horizontally, tabular
         textWriterInjectionSubSet.forEach((v) => {
@@ -369,6 +384,7 @@ export default class Plugin {
         });
     }
 
+
     _deleteTexts(keys) {
         this._textContextInjectionMap.forEach((e) => {
             e.writer.deleteTextBulk(keys);

package/circle-lines/chain-api.md

@@ -0,0 +1,336 @@
+
+## insertBulk
+```json
+[
+    {
+    "chainID": "Mağrib",
+        "points": [
+            {
+                "id": "Fas",
+                "long": 0,
+                "lat": 0,
+            },
+            {
+                "id":"Cezayir",
+                "long": 10,
+                "lat": 20,
+            },
+            {
+                "id":"Tunus",
+                "long": 10,
+                "lat": 15
+            }
+        ],
+        "rgba": [1,0,0,1],
+        "dashRatio": 0.1,
+        "dashOpacity": 0.5,
+        "circleDashAngle": 15,
+    },
+]
+```
+
+```js
+                                        // ["distance"]
+updateCoordinatesBulk( items, contextTextWriterIDs=[]) {
+    for ( const item of items){
+        this._updateCoordsChain(item.chainID, item.points);
+    }
+}
+
+_updateCoordsChain(chainID, nodes){
+    const chain = this._chainMap(chainID); // chain is a `list`
+    const updateIDs = [];
+    for ( let i = 0; i< chain.length; i++){
+        if ( )
+    }
+}
+```
+
+
+```js
+// text
+const textContextMap = new Map(
+[
+    [
+            "distance",
+            {
+                writer: new ContextTextWriter(globe,),
+                coordsAdaptor: (item, index, array) => { // 
+                    const { long, lat } = globe.Math.GetMidPoint(item.long, item.lat, item.endLong, item.endLat);
+                    return {
+                        long,
+                        lat,
+                    }
+                },
+                textAdaptor: (item) => {
+                    const distance = globe.Math.GetDist2D(item.long, item.lat, item.endLong, item.endLat);
+                    return distance.toFixed(2) + "m";
+                },
+
+            }
+        ]
+    ]
+)
+
+                                                        // ["distance"]
+updateCoordinatesBulk(items, textWriterInjectionSubSetIDs = []) { 
+    
+}
+
+_updateChainCoords(chainID, points){
+    this._updateCoordsBuffer();
+}
+
+```
+
+
+---
+
+```js
+const connectNaive = (p1, p2) => {p1.set("to",p2);p2.set("from":p1)};
+const Tanca = new Map([["long", 0],[ "lat",0], ["from", null], ["to":null]]);
+const Cebelitarik = new Map([["long", 0],[ "lat",0], ["from", null], ["to":null]]);
+const Cezayir = new Map([["long", 0],[ "lat",0], ["from", null], ["to":null]]);
+const Tunus = new Map([["long", 0],[ "lat",0], ["from", null], ["to":null]]);
+const Tanca = {id, long,lat, toID}
+
+plugin.insertBulk([
+    {
+        chainID: "Mağrib",
+        points: [
+            {Tanca, to: Cebelitarik}
+            {Cebelitarik, to:"Cezayir"},
+            {Cezayir, to: "Tunus"}, // implicitly connects to Tunus
+            {Tunus, to:null}
+        ]),
+        rgba: [1.0, 0.0, 0.0, 1.0],
+        dashRatio: 0.1,
+        dashOpacity: 0.5,
+        circleDashAngle: 15,
+    }
+]);
+```
+Advantage: User knows patterns of position data.
+Disadventage: Not json. 
+Bug: How to insert into middle?
+
+
+coordinateAdaptor => (v, i, array) => {
+    return {
+        (v.long + array[i+1].long) / 2.0,
+    }
+}
+
+```js
+const connect = (chainMap, chainID, node) => {
+    const chain = chainMap.get(chainID);
+
+}
+
+```
+---
+
+## updateCoordinatesBulk
+
+updates pointMap;
+then updates buffers from updated version of pointMap; 
+
+imparatively open next or prev 
+
+```json
+[
+    {
+        "chainID": "Mağrib",
+        "points": [
+            {
+                ""Fas"": {
+               "     "l"ong": 100,
+                    "lat": 30
+                }
+            }
+        ]
+     }
+]
+```
+
+
+## deleteBulk 
+
+```json
+[
+    {
+        "chainID": "Mağrib",
+        "all": false,
+        "points": [
+            "Fas"
+        ]
+    }
+]
+```
+
+
+## ContextTextWriter
+
+```js
+{
+
+    writer: new ContextTextWriter(globe),
+    coordsAdaptor: (item) => 
+        if (item.get("next") === null) return false;
+        const goe = {
+        long: point.get("long"),
+        lat: point.get("lat"),
+        endLong: point.get("next")?.get("long"),
+        endLat: point.get("next")?.get("lat")
+        }
+        return globe.getMidPoint(geo.long,geo.lat, geo.endLong, geo.endLat)
+        }
+    },
+    textAdaptor: (item) => {
+        const angle = item.long, item.lat, item.endLong, item.endLat
+        );
+        if (angle < 0) {
+            return (angle + 360).toFixed(2) + "°";
+        }
+        return angle.toFixed(2) + "°";
+    },
+}
+```
+
+---
+
+```js
+class Chain{
+    constractor(id, {rgba = [1,0,0,1], dashOpacity = 1, dashRatio = 0.1, circleDashAngle = 30  } = []){
+        this.id = 0;
+        this.idMap = new Map();
+        this.list = [];
+        this._rgba = rgba;
+        this._dashOpacity = dashOpacity;
+        this._dashRatio = dashRatio;
+        this._circleDashAngle = this.circleDashAngle;
+    }
+
+    add(item, fromID = null){
+        this.idMap.set(item.id, item);
+        let drawIndex;
+        if (from === null) {
+            this.list.push(item);
+            drawIndex = this.list.length - 1;
+        }
+
+        for ( let i = 0 ; i < this.list.length ; i++){
+            if ( fromID === this.list[i].id) {
+                drawIndex = i;
+                this.list.splice(i, 0, item);
+            }
+        }
+
+        this._update( [i, i-1]);
+    }
+
+    nextID(id){
+        // for loop if data source is a list. not performand.
+        // pointer if data rouce is a node. Clunky
+        // reconstract the map on (!append) operation.  
+    }
+}
+
+```
+
+---
+## Design Priorities
+
+user interaction. insert, update, get data
+some processies are callback. callbacks uses the pattern user insert the data
+
+ContextTextWriter Plugin interaction I provided was imparative. I fit to that context because item had required data.
+Current context has uses next objects data in the chain. 
+
+What is the imparative way to get next data?
+A `function` - A `pointer` 
+If I go with a `pointer` I need to get the data with a `pointer`
+How to I provide a `function` to get the next data?
+```js
+getNodeData(chainID, id){
+    return this.chainMap.get(chainID).get(id)
+}
+// Problem to use this function the object of getNodeData must be created before creating contextTextWriterMap.
+```
+
+how minimally hold the data
+
+how to render
+
+
+
+Edit mod. user asks chain data and bind placeholders. 
+
+
+
+## API
+
+
+
+getChain(chainID) =>  {pointID, long, lat}
+
+
+
+## explore pattern
+
+(x, index, array ) doesnt fit. 
+
+
+
+
+## insertBulk
+```json
+[
+    {
+    "chainID": "Mağrib",
+        "points": [
+            {
+                "id": "Fas",
+                "long": 0,
+                "lat": 0,
+                "to": "Cezayir"
+            },
+            {
+                "id":"Cezayir",
+                "long": 10,
+                "lat": 20,
+                "to": "Tunus"
+            },
+            {
+                "id":"Tunus",
+                "long": 10,
+                "lat": 15
+            }
+        ],
+        "rgba": [1,0,0,1],
+        "dashRatio": 0.1,
+        "dashOpacity": 0.5,
+        "circleDashAngle": 15,
+    },
+]
+```
+
+```js
+                                        // ["distance"]
+updateCoordinatesBulk( items, contextTextWriterIDs=[]) {
+    for ( const item of items){
+        this._updateCoordsChain(item.chainID, item.points);
+    }
+}
+
+_updateCoordsChain(chainID, nodes){
+    const chain = this._chainMap(chainID); // chain is a `list`
+  
+
+}
+```
+
+
+## 
+Get data from user with `to` keyword. implicitly add from keyword
+

package/circle-lines/chain-list-map.js

@@ -0,0 +1,203 @@
+import { keyMethod } from "./util";
+/**
+ * set and get node data 
+ * node indexes; 
+ */
+export class ChainListMap {
+
+    constructor() {
+        this._chainMap = new Map();
+        this._chainSideProperties = new Map();
+        this._indexMap = new Map(); // hold list index of lastly updated nodes. on add delete goes empty
+    }
+
+    getChain(chainKey) {
+        if (!this._chainMap.has(chainKey)) this._chainMap.set(chainKey, []);
+        return this._chainMap.get(chainKey);
+    }
+
+    /**
+     * 
+     * @param {*} node 
+     * @param {*} chainKey 
+     * @param {string|null} theNodeKeyFront 
+     */
+    addNode(node, chainKey, theNodeKeyFront = null) {
+        const chain = this.getChain(chainKey);
+
+        if (theNodeKeyFront == null) {
+            chain.push(node);
+            return;
+        }
+
+        for (let i = 0; i < chain.length; i++) {
+            const n_ode = chain[i];
+            if (n_ode == theNodeKeyFront) {
+                chain.splice(i, 0, node);
+                return;
+            }
+        }
+        this._resetIndexChain(chainKey);
+    }
+
+    deleteNode(chainKey, nodeKey) {
+        const index = this.getIndexOfNode(chainKey, nodeKey);
+        const chain = this._chainMap.get(chainKey);
+        chain.splice(index, 1);
+        this._resetIndexChain(chainKey);
+    }
+
+    deleteNodesBelongToAChain(chainKey, nodeKeys) {
+        const chain = this._chainMap.get(chainKey);
+        const compKeys = [];
+        const removeSet = new Set(nodeKeys);
+        const newChain = []
+        for (const node of chain) {
+            const dKey = keyMethod(chainKey, node.key);
+            this._indexMap.delete(dKey);
+            if (removeSet.has(node.key)) {
+                compKeys.push(dKey);
+            } else {
+                newChain.push(node);
+            }
+        }
+        this._chainMap.set(chainKey, newChain);
+        return compKeys;
+    }
+
+    deleteChainAndReturnChainKeys(chainKey) {
+        const keys = this.getNodeKeysOfChain(chainKey);
+        this._chainMap.delete(chainKey);
+        for (const key of keys) this._indexMap.delete(key);
+        return keys;
+    }
+
+    updateNode(node, chainKey) {
+        const index = this.getIndexOfNode(chainKey, node.key)
+        const chain = this._chainMap.getChain(chainKey);
+        chain[index] = node;
+    }
+
+
+    setChain(chainKey, list) {
+        if (this._chainMap.has(chain)) this._flushIndexMap();
+        this._chainMap.set(chainKey, list);
+    }
+
+
+    setChainProperties(chainKey, properties) {
+        this._chainSideProperties.set(chainKey, properties);
+    }
+
+
+    /**
+     * 
+     * @param {string} chainKey 
+     * @param {Map} properties 
+     * // after this method update text and buffer data of the chain
+     */
+    updateChainProperties(chainKey, properties) {
+
+        const memoryProperties = this._chainSideProperties.get(chainKey);
+        properties.forEach((value, key, m) => {
+            memoryProperties[key] = value;
+        })
+
+    }
+
+    getChainProperties(chainKey) {
+        this._chainSideProperties.get(chainKey);
+    }
+
+    /**
+     * 
+     * @param {*} chainKey 
+     * @param {*} callback | (value, index, array) => expexted output
+     */
+    calculateBufferPropertiesChain(chainKey, callback, result, nodeIndexes = null) {
+        const nodes = this._chainMap(chainKey);
+        const props = this._chainSideProperties(chainKey);
+        const iterator = nodeIndexes !== null ? nodeIndexes : nodes.keys();
+        for (const i of iterator) {
+
+            result.push(callback(chain[i], i, chain, probs));
+        }
+    }
+
+
+    /**
+     * 
+     * @param {*} chainKey 
+     * @param {*} textWriterObjs 
+     * @param {*} nodeKeys use nodeKeys on updateCoordinatesOnly
+     */
+    textUpdate(chainKey, textWriterObjs, nodeIndexes = null) {
+        const chain = this.getChain(chainKey);
+
+        if (nodeKeys) {
+            textWriterObjs.forEach((v) => {
+                const { coordsAdaptor, textAdaptor, writer } = v;
+                for (const i in nodeIndexes) {
+                    const value = chain[i];
+                    const { long, lat } = coordsAdaptor(value, i, chain);
+                    const text = textAdaptor(value, i, chain);
+                    const opacity = opacityAdaptor(value, i, array);
+
+                    writer.insertText(
+                        keyMethod(chainKey, value.key),
+                        lat,
+                        long,
+                        text,
+                        opacity
+                    );
+                }
+            });
+            return;
+        }
+
+        textWriterObjs.forEach((v) => {
+            const { coordsAdaptor, textAdaptor, opacityAdaptor, writer } = v;
+            chain.forEach((value, i, array) => {
+                const { lat, long } = coordsAdaptor(value, i, array);
+                const text = textAdaptor(value, i, array);
+                const opacity = opacityAdaptor(value, i, array);
+                writer.insertText(item.key, lat, long, text);
+            });
+        });
+
+    }
+
+
+    getIndexOfNode(chainKey, nodeKey) {
+        const key = keyMethod(chainKey, nodeKey);
+        if (this._indexMap.has(key)) return this._indexMap.get(key);
+
+        const chain = this._chainMap.get(chainKey);
+        for (let i = 0; i < chain.length; i++) {
+            const node = chain[i];
+            this._indexMap.set(key, i);
+            if (node.key === nodeKey) {
+                return i
+            }
+        }
+    }
+
+    _flushIndexMap() {
+        this._indexMap.clear();
+    }
+
+    _resetIndexChain(chainKey) {
+        const chain = this._chainMap.get(chain);
+        for (let i = 0; i < chain.length; i++) {
+            const node = chain[i]
+            this._indexMap.set(keyMethod(chainKey, node.key), i);
+        }
+    }
+
+    getNodeKeysOfChain(chainKey) {
+        const chain = this._chainMap(chainKey);
+        return chain.map((v) => keyMethod(chainKey, v.key));
+    }
+
+
+}

package/circle-lines/plugin.js

@@ -10,8 +10,322 @@
  *  - line
  * 
  * Chain 
- * - multiple circlelines connected 
- * - a wrapper around buffer orchester to hold one to many relationship
- * 
+  user data
+  [ {
+    chainKey: "Magrib",
+    nodes: new Map([
+        [ "Tanca", {long, lat, to:"Cebelitarik"}],
+        [ "Cebelitarik", {long, lat, to: null}]
+    ])
+  }]
+  implicitly add from keyword for simplicity;
  * # Mouse interations
-*/
+*/
+
+import { LineOnGlobeCache } from '../programs/line-on-globe/naive';
+import { CircleCache } from '../programs/line-on-globe/circle';
+import { BufferOrchestrator } from "../util/account";
+import { ChainListMap } from "./chain-list-map";
+import { keyMethod } from "./util";
+import { buffer } from 'three/tsl';
+
+// TODO: Add update buffer and update text mehods on add, delete, update methods
+
+
+/**
+ * Insert info to chain list map (nodes and properties)
+ * 
+ * ask chain list map for text data
+ * ask chain list map for buffer data
+ * 
+ */
+
+const radian = Math.PI / 180;
+
+export class CircleLineChainPlugin {
+
+    constructor(id, { textContextInjectionMap = new Map() } = {}) {
+        this.id = id;
+        this._textContextInjectionMap = textContextInjectionMap;
+        this._opacity = 1;
+        this._chainListMap = new ChainListMap();
+        this.bufferOrchestrator = new BufferOrchestrator({ capacity: 10 });
+        this._chainListMap
+    }
+
+    // init
+
+    init(globe, gl) {
+        this.gl = gl;
+        this.globe = globe
+        this._initOrchestrations()
+    }
+
+
+    _initOrchestrations() {
+        this.lineProgram = LineOnGlobeCache.get(globe);
+        this.circleProgram = CircleCache.get(globe);
+        {
+            // createBuffers
+            const bufferType = "DYNAMIC_DRAW";
+            const initialCapacity = this.bufferOrchestrator.capacity;
+            this.bufferManagersCompMap = new Map(
+                [
+                    ["centerCoords", {
+                        'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([radian * item.long, radian * item.lat]),
+                    }],
+                    ["targetCoords", {
+                        'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([radian * item.targetLong, radian * item.targetLat])
+                    }],
+                    ["rgba", {
+                        'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array(item.rgba)
+                    }],
+                    ["bigRadius", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.bigRadius])
+                    }],
+                    ["rgbaMode", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.rgbaMode])
+                    }],
+                    ["dashRatio", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.dashRatio])
+                    }],
+
+                    ["dashOpacity", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.dashOpacity])
+                    }],
+                    ["circleDashAngle", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.circleDashAngle / 360])
+                    }]
+                ]
+            );
+            // (startPotisionBufferObj, endPositionBufferObj, dashRatioBufferObj, colorBufferObj)
+            this.lineVao = this.lineProgram.createVAO(
+                ...['centerCoords', 'targetCoords', 'dashRatio', 'dashOpacity', 'rgba'].map(key => obj(this.bufferManagersCompMap.get(key))));
+            this.circleVao = this.circleProgram.createVAO(
+                ...["centerCoords", "bigRadius", "rgba", "circleDashAngle", "dashOpacity"].map(key => obj(this.bufferManagersCompMap.get(key))));
+        }
+
+    }
+
+
+    // API
+
+    // -- update bulk family
+    /**
+     * 
+     * @param {Array<chain>} data 
+     * @typedef chain
+     * @property {string} chainKey
+     * @property {Array<node>} nodes
+     * 
+     * @typedef {Object} node
+     * @property {string} key
+     * @property {number} long
+     * @property {number} lat  
+     */
+    updateCoordinatesBulk(data, textWriterInjectionSubSetIDs = []) {
+        // update implicit data structure
+        // find keys to update.. (inserted data and the radius of "from")
+        // updateBuffers
+        // update text
+    }
+
+
+
+    // ---- insertBulk family
+    /**
+     * 
+     * @param {Array<chain>} data 
+     * @typedef chain
+     * @property {string} chainKey
+     * @property {[0-1,0-1,0-1,0-1]} rgba
+     * @property { 0-1 } dashOpacity 
+     * @property { 0-1 } dashRatio
+     * @property {0-360} circleDashAngle 
+     * @property {Array<node>} nodes
+     * 
+     * @typedef {Object} node
+     * @property {string} key
+     * @property {number} long
+     * @property {number} lat  
+     */
+    insertBulk(data) {
+        // 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, rgba, dashOpacity, dashRatio, circleDashAngle, nodes } of data) {
+            this._chainListMap.setChain(chainKey, nodes);
+            this._chainListMap.setChainInfo(chainKey, {
+                rgba, dashOpacity, dashRatio, circleDashAngle
+            });
+            chainKeysToConstruct.push(chainKey);
+        }
+        this._reconstructChains(chainKeysToConstruct);
+    }
+
+    /**
+     * 
+     * @param {*} chainKey 
+     * @param {*} key // node key
+     * @param {*} long 
+     * @param {*} lat 
+     * @param {*} theNodeKeyFront | node key of the next node, null places to the last
+     */
+    addNode(chainKey, key, long, lat, theNodeKeyFront = null) {
+        // TODO: if before object is null update the last two elements of the chain only. 
+        this._chainListMap.addNode({ lat, long, key }, chainKey, theNodeKeyFront);
+        this._reconstructChains([chainKey]);
+
+    }
+
+
+
+    updateNodeCoordinates(node, chainKey, textContextIDs) {
+        this._chainListMap.updateNode(node, chainKey);
+
+        {
+            const textContexts = textContextIDs.map(v => this._textContextInjectionMap.get(v));
+            this._chainListMap.textUpdate(chainKey, textContextIDs,)
+        }
+
+    }
+
+
+
+    setOpacity(opacity) {
+        this._opacity = opacity;
+    }
+
+
+
+    getChain(chainKey) {
+        this._chainListMap.getChain(chainKey);
+    }
+
+    /**
+     * 
+     * @param {*} chainKey 
+     * @param {*} nodeKeys 
+     */
+    deleteChain(chainKey) {
+        const keys = this._chainListMap.deleteChainAndReturnChainKeys(chainKey)
+        this.bufferOrchestrator.deleteBulk(keys, this.bufferManagersCompMap)
+    }
+
+
+    /**
+     * 
+     * @param {Map<keys, [nodeKeys]} keysAndNodes
+     */
+    deleteNodes(keysAndNodes) {
+        const bufferKeys = [];
+        const chainKeysToReconstuct = [];
+        keysAndNodes.forEach((nodeList, chainKey, m) => {
+            bufferKeys.push(...this._chainListMap.deleteChainAndReturnChainKeys(chainKey, nodeList));
+            chainKeysToReconstuct.push(chainKey);
+        })
+        this._reconstructChains(chainKeysToReconstuct);
+        this.bufferOrchestrator.deleteBulk(bufferKeys, this.bufferManagersCompMap);
+    }
+
+
+    deleteNode(chainKey, nodeKey) {
+        this._chainListMap.deleteNode(chainKey, nodeKey);
+
+    }
+
+    // implicit
+
+    _updateTextOpacityAll(items) {
+        this._textContextInjectionMap.forEach((v) => {
+            const { writer } = v
+            for (const item of items) {
+                if (item.rgba) {
+                    writer.updateOpacityOfItem(item.key, item.rgba[3])
+                }
+            }
+        });
+    }
+
+
+    _insertTexts(item, textWriterInjectionSubSet) {
+        //TODO This method can be more performant if it works horizontally, tabular
+        textWriterInjectionSubSet.forEach((v) => {
+            const { coordsAdaptor, textAdaptor, writer } = v
+            const { lat, long } = coordsAdaptor(item);
+            const text = textAdaptor(item);
+            writer.insertText(item.key, lat, long, text);
+        });
+    }
+
+
+
+    _reconstructChains(chainKeys) {
+        const { globe } = globe;
+        //     this.lineVao = this.lineProgram.createVAO(
+        //         ...['centerCoords', 'targetCoords', 'dashRatio', 'dashOpacity', 'rgba'].map(key => obj(this.bufferManagersCompMap.get(key))));
+        //     this.circleVao = this.circleProgram.createVAO(
+        //         ...["centerCoords", "bigRadius", "rgba", "circleDashAngle", "dashOpacity"].map(key => obj(this.bufferManagersCompMap.get(key))));
+        // }
+        const radiusM = radiusMethod(globe);
+        const callback = (v, i, array, probs) => {
+            return {
+                rgba: probs.rgba,
+                bigRadius: radiusM(v, i, array),
+                circleDashAngle: probs.circleDashAngle,
+                dashOpacity: probs.dashOpacity,
+                dashRatio: probs.dashRatio,
+                long: v.long,
+                lat: v.lat,
+                targetLong: array[i + 1].long,
+                targetLat: array[i + 1].lat,
+                key: keyMethod(probs.chainKey, v.key)
+            }
+        }
+        const bulkData = [];
+        chainKeys.forEach((k) => {
+            this._chainListMap.calculateBufferPropertiesChain(k, callback, bulkData);
+        })
+
+        this._insertBulk(bulkData);
+    }
+
+
+    _insertBulk(bulkData) {
+        this.bufferOrchestrator.insertBulk(bulkData, this.bufferManagersCompMap);
+    }
+
+
+    // GLOBE API
+    //TODO:
+    free() {
+        if (this.isFreed) return;
+        this.bufferManagersCompMap.forEach(({ bufferManager }) => {
+            bufferManager.free();
+        })
+        LineOnGlobeCache.release(this.globe);
+        CircleCache.release(this.globe);
+        this.isFreed = true;
+    }
+
+    draw3D() {
+        const { gl } = this;
+        this.lineProgram.draw(this.lineVao, this.bufferOrchestrator.length, this._opacity);
+    }
+}
+
+
+
+const radiusMethod = (globe) => (v, i, array) => {
+    return globe.Math.GetDist2D(v.long, v.lat, array[i + 1].endLong, array[i + 1].endLat)
+} 

package/circle-lines/util.js

@@ -0,0 +1 @@
+export const keyMethod = (chainKey, nodeKey) => `${chainKey}_${nodeKey}`;

package/package.json

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

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

@@ -36,7 +36,6 @@ ${circleLimpFromLongLatRadCenterMercatorRealDistance}
 uniform float edge_count;
 
 in vec2 center_position;
-in float start_angle;
 in float radius;
 in vec4 color;
 in float dash_ratio;
@@ -112,11 +111,10 @@ class Logic {
 
         {   // assign attribute locations
             gl.bindAttribLocation(program, 0, "center_position");
-            gl.bindAttribLocation(program, 1, "start_angle");
-            gl.bindAttribLocation(program, 2, "radius");
-            gl.bindAttribLocation(program, 3, "color");
-            gl.bindAttribLocation(program, 4, "dash_ratio");
-            gl.bindAttribLocation(program, 5, "dash_opacity");
+            gl.bindAttribLocation(program, 1, "radius");
+            gl.bindAttribLocation(program, 2, "color");
+            gl.bindAttribLocation(program, 3, "dash_ratio");
+            gl.bindAttribLocation(program, 4, "dash_opacity");
         }
 
         this.cameraBindingPoint = 0;
@@ -125,7 +123,7 @@ class Logic {
         gl.uniformBlockBinding(program, cameraBlockLocation, this.cameraBindingPoint);
     }
 
-    createVAO(centerObj, startAngleObj, radiusObj, colorObj, dashRatioObj, dashOpacityObj) {
+    createVAO(centerObj, radiusObj, colorObj, dashRatioObj, dashOpacityObj) {
         const { gl } = this;
         const vao = gl.createVertexArray();
         const divisor = 1;
@@ -134,25 +132,21 @@ class Logic {
             const { buffer, stride = 0, offset = 0 } = centerObj;
             vaoAttributeLoader(gl, buffer, 0, 2, stride, offset, divisor);
         }
-        {
-            const { buffer, stride = 0, offset = 0 } = startAngleObj;
-            vaoAttributeLoader(gl, buffer, 1, 1, stride, offset, divisor);
-        }
         {
             const { buffer, stride = 0, offset = 0 } = radiusObj;
-            vaoAttributeLoader(gl, buffer, 2, 1, stride, offset, divisor);
+            vaoAttributeLoader(gl, buffer, 1, 1, stride, offset, divisor);
         }
         {
             const { buffer, stride = 0, offset = 0 } = colorObj;
-            vaoAttributeLoader(gl, buffer, 3, 4, stride, offset, divisor);
+            vaoAttributeLoader(gl, buffer, 2, 4, stride, offset, divisor);
         }
         {
             const { buffer, stride = 0, offset = 0 } = dashRatioObj;
-            vaoAttributeLoader(gl, buffer, 4, 1, stride, offset, divisor);
+            vaoAttributeLoader(gl, buffer, 3, 1, stride, offset, divisor);
         }
         {
             const { buffer, stride = 0, offset = 0 } = dashOpacityObj;
-            vaoAttributeLoader(gl, buffer, 5, 1, stride, offset, divisor);
+            vaoAttributeLoader(gl, buffer, 4, 1, stride, offset, divisor);
         }
         gl.bindVertexArray(null);
         gl.bindVertexArray(null);

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

@@ -21,10 +21,12 @@ in vec2 start_position;
 in vec2 end_position;
 in float dash_ratio;
 in vec4 color;
+in float dash_opacity;
 out vec4 v_color;
 out vec2 v_limp;
 out float interpolation;
 out float v_dash_ratio;
+out float v_dash_opacity;
 
 
 void main() {
@@ -50,6 +52,7 @@ void main() {
     // else {v_color = vec4(0.0, 0.0, 0.0, 0.0);}
     v_color = color;
     v_dash_ratio = dash_ratio;
+    v_dash_opacity = dash_opacity;
 }
 `;
 
@@ -62,13 +65,14 @@ out vec4 color;
 in float interpolation;
 in float v_dash_ratio;
 in vec2 v_limp;
+in float v_dash_opacity;
 void main() {
     if (v_limp.x < -POLE || v_limp.x > POLE || v_limp.y < -POLE || v_limp.y > POLE) { discard; }
     color = v_color;
     color.a *= opacity;
     if ( v_dash_ratio >= 1.0 ) { return; }
     if (interpolation > 0.95) { return; }
-    if (fract(interpolation / (2.0 * v_dash_ratio)) < 0.5) { color.a /= 4.0; }
+    if (fract(interpolation / (2.0 * v_dash_ratio)) < 0.5) { color.a *= v_dash_opacity; }
 
 }
 `;
@@ -88,6 +92,7 @@ class Logic {
             gl.bindAttribLocation(program, 1, "end_position");
             gl.bindAttribLocation(program, 2, "dash_ratio");
             gl.bindAttribLocation(program, 3, "color");
+            gl.bindAttribLocation(program, 4, "dash_opacity");
         }
 
         {
@@ -133,7 +138,7 @@ class Logic {
 
 
     //
-    createVAO(startPotisionBufferObj, endPositionBufferObj, dashRatioBufferObj, colorBufferObj) {
+    createVAO(startPotisionBufferObj, endPositionBufferObj, dashRatioBufferObj, dashOpacityBufferObj, colorBufferObj) {
         const { gl } = this;
         const vao = gl.createVertexArray();
         gl.bindVertexArray(vao);
@@ -168,6 +173,15 @@ class Logic {
             gl.vertexAttribPointer(3, 4, gl.FLOAT, false, stride, offset);
             gl.vertexAttribDivisor(3, 1);
         }
+
+        {
+            const { buffer, stride = 0, offset = 0 } = dashOpacityBufferObj;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(4);
+            gl.vertexAttribPointer(4, 1, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(4, 1);
+        }
+
         gl.bindVertexArray(null);
         gl.bindBuffer(gl.ARRAY_BUFFER, null);
         return vao;

package/write-text/context-text.js

@@ -22,6 +22,7 @@ export class ContextTextWriter {
         this.doDraw = doDraw;
     }
 
+
     setDoDraw(bool) {
         this.doDraw = bool;
     }
@@ -42,8 +43,9 @@ export class ContextTextWriter {
     draw() {
         if (!this.doDraw) return;
         const { globe, style, itemMap } = this;
-        const { textFont, opacity } = style;
-        for (const [key, { lat, long, text }] of itemMap) {
+        const { textFont, opacity: opacity_ } = style;
+
+        for (const [key, { lat, long, text, opacity = null }] of itemMap) {
             const { x, y } = globe.api_GetScreenPointFromGeo(
                 {
                     long: long,
@@ -52,17 +54,30 @@ export class ContextTextWriter {
                 },
                 style.zMode === CSZMode.Z_MSL,
             );
-
-            globe.api_DrawContextTextMultiLine(text, textFont, opacity, { x, y });
+            const o = opacity === null ? opacity_ : opacity * opacity_;
+            globe.api_DrawContextTextMultiLine(text, textFont, o, { x, y });
         }
     }
 
 
-    insertText(key, lat, long, text) {
+    insertText(key, lat, long, text,) { // TODO: Make it more generic
         this.itemMap.set(key, { lat, long, text });
     }
 
 
+    updateOpacityOfItem(key, opacity) {
+        this.itemMap.get(key).opacity = opacity;
+    }
+
+    updateOpacityBulk(items, keyAdaptor, valueAdaptor) {
+        for (const item of items) {
+            const key = keyAdaptor(item);
+            const opacity = valueAdaptor(item);
+            const data = this.itemMap.get(key)
+            data.opacity = opacity;
+        }
+    }
+
     updateText(key, text) {
         const item = this.itemMap.get(key);
         item.text = text;
@@ -94,7 +109,11 @@ export class ContextTextWriter {
         }
     }
 
+
+
     clear() {
         this.itemMap.clear();
     }
-}
+}
+
+