@pirireis/webglobeplugins 0.5.2 → 0.5.4

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

@@ -25,16 +25,24 @@ export class ChainListMap {
      */
     addNode(node, chainKey, theNodeKeyFront = null) {
         const chain = this.getChain(chainKey);
-        if (theNodeKeyFront == null) {
-            chain.push(node);
-            return;
-        }
+        let frontIndex = null;
         for (let i = 0; i < chain.length; i++) {
             const n_ode = chain[i];
-            if (n_ode.key == theNodeKeyFront) {
-                chain.splice(i, 0, node);
-                break;
+            if (n_ode.key === node.key) {
+                throw new Error("Chain node already exists");
+            }
+            if (n_ode.key === theNodeKeyFront) {
+                frontIndex = i;
+            }
+        }
+        if (theNodeKeyFront !== null) {
+            if (frontIndex !== null) {
+                chain.splice(frontIndex, 0, node);
+            } else {
+                throw new Error("Could not find theNodeKeyFront");
             }
+        } else {
+            chain.push(node);
         }
         node.__identity__ = this.keyMethod(chainKey, node.key);
         this._resetIndexChain(chainKey);
@@ -49,20 +57,20 @@ export class ChainListMap {
 
     deleteNodesBelongToAChain(chainKey, nodeKeys) {
         const chain = this._chainMap.get(chainKey);
-        const compKeys = [];
+        const deleteKeys = [];
         const removeSet = new Set(nodeKeys);
         const newChain = []
         for (const node of chain) {
             const dKey = node.__identity__;
             this._indexMap.delete(dKey);
             if (removeSet.has(node.key)) {
-                compKeys.push(dKey);
+                deleteKeys.push(dKey);
             } else {
                 newChain.push(node);
             }
         }
         this._chainMap.set(chainKey, newChain);
-        return compKeys;
+        return deleteKeys;
     }
 
     deleteChainAndReturnChainKeys(chainKey) {
@@ -80,6 +88,25 @@ export class ChainListMap {
     }
 
 
+    updateNodeProperties(node, chainKey) {
+        const index = this.getIndexOfNode(chainKey, node.key)
+        const chainNode = this._chainMap.get(chainKey)[index];
+        if (node.circleProperties) {
+            node.circleProperties.forEach((value, key, container) => chainNode[key] = value);
+        }
+        if (node.lineProperties) {
+            node.lineProperties.forEach((value, key, container) => chainNode[key] = value);
+        }
+    }
+
+    updateCoordsinatesOfNode(node, chainKey) {
+        const index = this.getIndexOfNode(chainKey, node.key)
+        const chain = this._chainMap.get(chainKey);
+        chain[index].long = node.long;
+        chain[index].long = node.lat;
+
+    }
+
     setChain(chainKey, nodeList) {
         if (this._chainMap.has(chainKey)) this._flushIndexMap();
         this._chainMap.set(chainKey, nodeList);
@@ -116,11 +143,10 @@ export class ChainListMap {
      * @param {*} chainKey 
      * @param {*} callback | (value, index, array) => expexted output
      */
-    calculateBufferPropertiesChain(chainKey, callback, result, nodeIndexes = null) {
+    calculateBufferPropertiesChain(chainKey, callback, result,) {
         const chain = this._chainMap.get(chainKey);
         const props = this._chainSideProperties.get(chainKey);
-        const iterator = nodeIndexes !== null ? nodeIndexes : chain.keys();
-        for (const i of iterator) {
+        for (let i = 0; i < chain.length - 1; i++) {
             const node = callback(chain[i], i, chain, props);
             if (node !== null) result.push(node);
         }
@@ -132,21 +158,12 @@ export class ChainListMap {
      * @param {*} textWriterObjs 
      * @param {*} nodeKeys use nodeKeys on updateCoordinatesOnly
      */
-    textUpdate(chainKey, textWriterObjs, nodeIndexes = null) {
+    textUpdate(chainKey, textWriterObjs) {
         const chain = this._chainMap.get(chainKey);
         if (!chain) return;
         const properties = this._chainSideProperties.get(chainKey);
-        if (nodeIndexes) {
-            textWriterObjs.forEach((writer) => {
-                nodeIndexes.forEach((i) => {
-                    writer.insertText(chain[i], i, chain, properties);
-                });
-            });
-            return;
-        }
         textWriterObjs.forEach((writer) => {
-            const chain = this._chainMap.get(chainKey);
-            const properties = this._chainSideProperties.get(chainKey);
+
             writer.insertTextBulk(chain, properties);
         });
 

package/circle-line-chain/plugin.js

@@ -2,7 +2,7 @@ import { LineOnGlobeCache } from '../programs/line-on-globe/naive';
 import { CircleCache } from '../programs/line-on-globe/circle';
 import { BufferOrchestrator, BufferManager } from "../util/account";
 import { ChainListMap } from "./chain-list-map";
-import { keyMethod } from './util';
+import { keyMethod } from "./util";
 // TODO: Add update buffer and update text mehods on add, delete, update methods
 
 
@@ -21,6 +21,16 @@ import { keyMethod } from './util';
  * updateChainProperties
  */
 
+
+/**
+ * @typedef StyleProperties
+ * @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
+ */
+
 const radian = Math.PI / 180;
 
 export class CircleLineChainPlugin {
@@ -28,7 +38,7 @@ export class CircleLineChainPlugin {
     constructor(id, { drawCircleOn = true, textContextWriterInjectionMap = new Map() } = {}) {
         this.id = id;
         this._textContextWriterInjectionMap = textContextWriterInjectionMap;
-        this._textContextWriterInjectionMap.forEach((writer) => writer.setKeyAdaptor((v, i, c, probs) => v.__identity__));
+        this._textContextWriterInjectionMap.forEach((writer) => writer.setKeyAdaptor((v, i, c, properties) => v.__identity__));
         this._opacity = 1;
         this._chainListMap = new ChainListMap(keyMethod);
         this.bufferOrchestrator = new BufferOrchestrator({ capacity: 10 });
@@ -64,7 +74,10 @@ export class CircleLineChainPlugin {
                     }],
                     ["rgba", {
                         'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array(item.rgba)
+                        '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 }),
@@ -72,16 +85,26 @@ export class CircleLineChainPlugin {
                     }],
                     ["dashRatio", {
                         'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.dashRatio])
+                        'adaptor': (item) => new Float32Array([item.chainProperties.dashRatio])
                     }],
 
                     ["dashOpacity", {
                         'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.dashOpacity])
+                        'adaptor': (item) => new Float32Array([item.chainProperties.dashOpacity])
                     }],
                     ["circleDashAngle", {
                         'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.circleDashAngle / 360])
+                        '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);
+                        }
                     }]
                 ]
             );
@@ -92,7 +115,7 @@ export class CircleLineChainPlugin {
             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))));
+                ...["centerCoords", "bigRadius", "rgbaCircle", "circleDashAngle", "dashOpacity"].map(key => obj(this.bufferManagersCompMap.get(key))));
         }
 
     }
@@ -127,7 +150,7 @@ export class CircleLineChainPlugin {
         for (const chain of data) {
             chainKeys.push(chain.chainKey);
             chain.nodes.forEach((node) => {
-                this._chainListMap.updateNode(node, chain.chainKey);
+                this._chainListMap.updateCoordsinatesOfNode(node, chain.chainKey);
             });
         }
         this._reconstructChains(chainKeys);
@@ -135,6 +158,18 @@ export class CircleLineChainPlugin {
     }
 
 
+    /**
+     * 
+     * @param {*} chainKey 
+     * @param {Array<{nodeKey, Map[propertyName ,value]}} propertyMap 
+     */
+    updateNodeProperties(chainKey, nodesAndPropertyMap, { textWriterIDs = [] } = {}) {
+        this._chainListMap.updateNodeProperties(chainKey, nodesAndPropertyMap)
+        this._reconstructChains([chainKey]);
+        this._textUpdate(chainKey, textWriterIDs);
+        this.globe.DrawRender();
+    }
+
     /**
      * 
      * @param {*} chainKey 
@@ -152,16 +187,15 @@ export class CircleLineChainPlugin {
      * @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
+     * @property {StyleProperties} chainProperties
+
+     *  } chainProperties
      * 
      * @typedef {Object} node
      * @property {string} key
      * @property {number} long
      * @property {number} lat  
+     * @property {StyleProperties} circleProperties
      */
     insertBulk(data, { textWriterIDs = [] } = []) {
         // first insert everything to implicit structure,
@@ -169,15 +203,14 @@ export class CircleLineChainPlugin {
         // let _reconstractChainBufferData method interact with data and bufferOrchestrator.
         const chainKeysToConstruct = [];
 
-        for (const { chainKey, rgba, dashOpacity, dashRatio, circleDashAngle, nodes } of data) {
+        for (const { chainKey, chainProperties, nodes } of data) {
             this._chainListMap.setChain(chainKey, nodes);
-            this._chainListMap.setChainProperties(chainKey, {
-                rgba, dashOpacity, dashRatio, circleDashAngle, chainKey
-            });
+            this._chainListMap.setChainProperties(chainKey, chainProperties);
             chainKeysToConstruct.push(chainKey);
         }
         this._reconstructChains(chainKeysToConstruct);
         if (textWriterIDs) this._updateTexts(chainKeysToConstruct, textWriterIDs);
+        this.globe.DrawRender();
     }
 
     /**
@@ -191,6 +224,7 @@ export class CircleLineChainPlugin {
         this._chainListMap.addNode(node, chainKey, theNodeKeyFront);
         if (textWriterIDs) this._updateTexts([chainKey], textWriterIDs);
         this._reconstructChains([chainKey]);
+        this.globe.DrawRender();
 
     }
 
@@ -200,6 +234,7 @@ export class CircleLineChainPlugin {
         this._chainListMap.updateNode(node, chainKey);
         if (textWriterIDs) this._updateTexts([chainKey], textWriterIDs);
         this._reconstructChains([chainKey]);
+        this.globe.DrawRender();
     }
 
 
@@ -230,6 +265,7 @@ export class CircleLineChainPlugin {
         this._updateTexts(chainKeys, this._textContextWriterInjectionMap.keys());
         this._textContextWriterInjectionMap.forEach((writer) => writer.deleteTextBulk(bufferKeys));
         this.bufferOrchestrator.deleteBulk(bufferKeys, this.bufferManagersCompMap);
+        this.globe.DrawRender();
     }
 
 
@@ -246,8 +282,10 @@ export class CircleLineChainPlugin {
         });
         this._reconstructChains(chainKeysToReconstuct);
         this._textContextWriterInjectionMap.forEach((writer) => writer.deleteTextBulk(bufferKeys));
-        if (textWriterIDs) this._updateTexts(chainKeysToReconstuct, textWriterIDs)
+        // if (textWriterIDs) this._updateTexts(chainKeysToReconstuct, textWriterIDs)
         this.bufferOrchestrator.deleteBulk(bufferKeys, this.bufferManagersCompMap);
+        this.globe.DrawRender();
+
     }
 
 
@@ -271,18 +309,17 @@ export class CircleLineChainPlugin {
         // }   
 
         const radiusM = radiusMethod(globe);
-        const callback = (v, i, array, probs) => {
+        const callback = (v, i, array, chainProperties) => {
             if (i == array.length - 1) return null;
             return {
-                rgba: probs.rgba,
+                chainProperties: chainProperties,
                 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,
+                long: v.long,
+                lat: v.lat,
+                lineProperties: v.lineProperties,
+                circleProperties: v.circleProperties,
                 key: v.__identity__
             }
         }

package/package.json

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

package/rangerings/rangeringangletext.js

@@ -292,7 +292,7 @@ export default class RangeRingAngleText {
 
 
 
-    showAllVisiableCircleText() {
+    showAllVisibleCircleText() {
         this._hideAll = false;
         const addBucket = {
             coords: [],

package/util/account/single-attribute-buffer-management/buffer-manager.js

@@ -67,12 +67,10 @@ export class BufferManager {
 
         const newArray = new Float32Array(newCapacity * itemSize);
         const bufferData = this._getBufferData(occupiedCapacity);
-        // console.log("bufferData", bufferData);
         let newOffset = 0;
         for (const offset of offsetValues) {
             const itemOffset = offset * itemSize;
             newArray.set(bufferData.slice(itemOffset, itemOffset + itemSize), newOffset);
-            // console.log("oldOffset", itemOffset, "newOffset", newOffset);
             newOffset += itemSize;
         }
 
@@ -87,7 +85,6 @@ export class BufferManager {
         const { gl, buffer, bufferType } = this;
         const itemSize = this.itemSize;
         const bufferData = this._getBufferData(occupiedCapacity);
-        // console.log("extending buffer from", occupiedCapacity, "to", newCapacity, 'item size', itemSize);
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
         gl.bufferData(gl.ARRAY_BUFFER, newCapacity * itemSize * 4, gl[bufferType]);
         gl.bufferSubData(gl.ARRAY_BUFFER, 0, bufferData);
@@ -96,9 +93,7 @@ export class BufferManager {
 
     _getBufferData(occupiedCapacity) {
         const { gl, buffer } = this;
-        // console.log(occupiedCapacity, this.itemSize)
         const size = occupiedCapacity * this.itemSize;
-        // console.log("size", size);
         const bufferData = new Float32Array(size);
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
         gl.getBufferSubData(gl.ARRAY_BUFFER, 0, bufferData);

package/util/account/single-attribute-buffer-management/buffer-orchestrator.js

@@ -129,23 +129,26 @@ export class BufferOrchestrator {
         const { offsetMap } = this;
         const offsets = [];
         for (const item of items) {
-            const offset = offsetMap.get(item.key) || this.nextOffset();
+            let o = offsetMap.get(item.key);
+            const offset = o !== undefined ? o : this.nextOffset();
             offsetMap.set(item.key, offset);
             offsets.push(offset);
         }
         for (const [key, { bufferManager, adaptor }] of bufferManagersMap) {
             bufferManager.insertBulk(items.map(adaptor), offsets);
         }
+
     }
 
 
-    // doesnot assign offset to the new items.
+    // does not assign offset to the new items.
     updateBulk(items, bufferManagersMap, bufferKeys) {
         const { offsetMap } = this;
         const offsets = [];
         for (const item of items) {
             const offset = offsetMap.get(item.key);
-            offsets.push(offset);
+            if (offset !== undefined) { offsets.push(offset); } else { throw new Error("updateBulk item Key does not exist"); }
+
         }
         if (bufferKeys) {
             for (const key of bufferKeys) {
@@ -174,7 +177,6 @@ export class BufferOrchestrator {
         for (const [key, { bufferManager }] of bufferManagersMap) {
             bufferManager.deleteBulk(offsets);
         }
-        //console.log("deleteBulk after item size", this.offsetMap.size);
     }
 
 
@@ -198,9 +200,7 @@ export class BufferOrchestrator {
     autoExtendBuffers(itemsLength, bufferManagersMap) {
         if (itemsLength <= this.emptySpace) return;
         const newCapacity = this.length + itemsLength;
-        //console.log("autoExtendBuffers", "item L", itemsLength, "E space", this.emptySpace, "cap", this.capacity, "length", this.length, 'new Cap', newCapacity);
         for (const [key, { bufferManager }] of bufferManagersMap) {
-            //console.log("length", this.length, "newCapacity", newCapacity);
             bufferManager.extendBuffer(this.length, newCapacity);
         }
         this._capacity = newCapacity;
@@ -235,7 +235,6 @@ export class BufferOrchestrator {
         const newOffsetMap = new Map();
         let newOffset = 0;
         for (const [key, offset] of this.offsetMap) {
-            //console.log("defrag", key, offset, newOffset);
             newOffsetMap.set(key, newOffset++);
         }
         this.offsetMap = newOffsetMap

package/write-text/context-text2.js

@@ -134,7 +134,6 @@ export class ContextTextWriter2 {
         if (text == null) return;
         const opacity = this.opacityAdaptor(item, id, container, properties);
         const angle = this.angleAdaptor(item, id, container, properties);
-        console.log(angle, "angle")
         const key = this.keyAdaptor(item, id, container, properties)
         this.itemMap.set(key, { long: coords.long, lat: coords.lat, text, opacity, angle });
     }