@pirireis/webglobeplugins 0.3.9 → 0.4.0-a

package/{circle-lines → circle-line-chain}/chain-list-map.js

@@ -24,17 +24,15 @@ export class ChainListMap {
      */
     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) {
+            if (n_ode.key == theNodeKeyFront) {
                 chain.splice(i, 0, node);
-                return;
+                break;
             }
         }
         this._resetIndexChain(chainKey);
@@ -67,6 +65,7 @@ export class ChainListMap {
 
     deleteChainAndReturnChainKeys(chainKey) {
         const keys = this.getNodeKeysOfChain(chainKey);
+        console.log('chainKey', chainKey, "keys", keys);
         this._chainMap.delete(chainKey);
         for (const key of keys) this._indexMap.delete(key);
         return keys;
@@ -74,14 +73,14 @@ export class ChainListMap {
 
     updateNode(node, chainKey) {
         const index = this.getIndexOfNode(chainKey, node.key)
-        const chain = this._chainMap.getChain(chainKey);
+        const chain = this._chainMap.get(chainKey);
         chain[index] = node;
     }
 
 
-    setChain(chainKey, list) {
-        if (this._chainMap.has(chain)) this._flushIndexMap();
-        this._chainMap.set(chainKey, list);
+    setChain(chainKey, nodeList) {
+        if (this._chainMap.has(chainKey)) this._flushIndexMap();
+        this._chainMap.set(chainKey, nodeList);
     }
 
 
@@ -115,54 +114,37 @@ export class ChainListMap {
      * @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();
+        const chain = this._chainMap.get(chainKey);
+        const props = this._chainSideProperties.get(chainKey);
+        const iterator = nodeIndexes !== null ? nodeIndexes : chain.keys();
         for (const i of iterator) {
-
-            result.push(callback(chain[i], i, chain, probs));
+            const node = callback(chain[i], i, chain, props);
+            if (node !== null) result.push(node);
         }
     }
 
 
     /**
-     * 
      * @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
-                    );
-                }
+        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((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);
-            });
+        textWriterObjs.forEach((writer) => {
+            const chain = this._chainMap.get(chainKey);
+            const properties = this._chainSideProperties.get(chainKey);
+            writer.insertTextBulk(chain, properties);
         });
 
     }
@@ -187,7 +169,7 @@ export class ChainListMap {
     }
 
     _resetIndexChain(chainKey) {
-        const chain = this._chainMap.get(chain);
+        const chain = this._chainMap.get(chainKey);
         for (let i = 0; i < chain.length; i++) {
             const node = chain[i]
             this._indexMap.set(keyMethod(chainKey, node.key), i);
@@ -195,8 +177,12 @@ export class ChainListMap {
     }
 
     getNodeKeysOfChain(chainKey) {
-        const chain = this._chainMap(chainKey);
-        return chain.map((v) => keyMethod(chainKey, v.key));
+        const chain = this._chainMap.get(chainKey);
+        console.log("node keys", chain);
+        if (!chain) return [];
+        const result = chain.map((v) => keyMethod(chainKey, v.key));
+        console.log("buffer Keys", result);
+        return result
     }
 
 

package/{circle-lines → circle-line-chain}/plugin.js

@@ -1,33 +1,8 @@
-/**
- * import programs, buffer orchestrator
- * 
- * 
- * import dext managers
- * 
- * Entities:
- * AcircleLine
- *  - circle
- *  - line
- * 
- * Chain 
-  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 { BufferOrchestrator, BufferManager } 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
 
@@ -38,19 +13,25 @@ import { buffer } from 'three/tsl';
  * ask chain list map for text data
  * ask chain list map for buffer data
  * 
+ * 
+ * addNode
+ * insertBulk
+ * deleteChain
+ * deleteNodes
+ * updateCoordinates()
+ * updateChainProperties
  */
 
 const radian = Math.PI / 180;
 
 export class CircleLineChainPlugin {
 
-    constructor(id, { textContextInjectionMap = new Map() } = {}) {
+    constructor(id, { textContextWriterInjectionMap = new Map() } = {}) {
         this.id = id;
-        this._textContextInjectionMap = textContextInjectionMap;
+        this._textContextWriterInjectionMap = textContextWriterInjectionMap;
         this._opacity = 1;
         this._chainListMap = new ChainListMap();
         this.bufferOrchestrator = new BufferOrchestrator({ capacity: 10 });
-        this._chainListMap
     }
 
     // init
@@ -63,6 +44,7 @@ export class CircleLineChainPlugin {
 
 
     _initOrchestrations() {
+        const { gl, globe } = this;
         this.lineProgram = LineOnGlobeCache.get(globe);
         this.circleProgram = CircleCache.get(globe);
         {
@@ -87,10 +69,6 @@ export class CircleLineChainPlugin {
                         '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])
@@ -107,6 +85,9 @@ export class CircleLineChainPlugin {
                 ]
             );
             // (startPotisionBufferObj, endPositionBufferObj, dashRatioBufferObj, colorBufferObj)
+            const obj = function (bufferManagerComp) {
+                return { 'buffer': bufferManagerComp.bufferManager.buffer, 'stride': 0, 'offset': 0 }
+            };
             this.lineVao = this.lineProgram.createVAO(
                 ...['centerCoords', 'targetCoords', 'dashRatio', 'dashOpacity', 'rgba'].map(key => obj(this.bufferManagersCompMap.get(key))));
             this.circleVao = this.circleProgram.createVAO(
@@ -131,14 +112,33 @@ export class CircleLineChainPlugin {
      * @property {number} long
      * @property {number} lat  
      */
-    updateCoordinatesBulk(data, textWriterInjectionSubSetIDs = []) {
+    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.updateNode(node, chain.chainKey);
+            });
+        }
+        this._reconstructChains(chainKeys);
+        this._insertTexts(chainKeys, textWriterIDs);
     }
 
 
+    /**
+     * 
+     * @param {*} chainKey 
+     * @param {Map<propertyName ,value} propertyMap 
+     */
+    updateChainProperties(chainKey, propertyMap, { textWriterIDs = [] } = {}) {
+        this._chainListMap.updateChainProperties(chainKey, propertyMap);
+        this._reconstructChains([chainKey]);
+        if (textWriterIDs) this._insertTexts([chainKey], textWriterIDs);
+    }
 
     // ---- insertBulk family
     /**
@@ -157,7 +157,7 @@ export class CircleLineChainPlugin {
      * @property {number} long
      * @property {number} lat  
      */
-    insertBulk(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.
@@ -165,39 +165,36 @@ export class CircleLineChainPlugin {
 
         for (const { chainKey, rgba, dashOpacity, dashRatio, circleDashAngle, nodes } of data) {
             this._chainListMap.setChain(chainKey, nodes);
-            this._chainListMap.setChainInfo(chainKey, {
-                rgba, dashOpacity, dashRatio, circleDashAngle
+            this._chainListMap.setChainProperties(chainKey, {
+                rgba, dashOpacity, dashRatio, circleDashAngle, chainKey
             });
             chainKeysToConstruct.push(chainKey);
         }
         this._reconstructChains(chainKeysToConstruct);
+        if (textWriterIDs) this._insertTexts(chainKeysToConstruct, textWriterIDs);
     }
 
     /**
      * 
+     * @param {{key, long, lat}} node
      * @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) {
+    addNode(node, chainKey, { theNodeKeyFront = null, textContextIDs = [] } = {}) {
         // TODO: if before object is null update the last two elements of the chain only. 
-        this._chainListMap.addNode({ lat, long, key }, chainKey, theNodeKeyFront);
+        console.log("addNode", node, chainKey, theNodeKeyFront);
+        this._chainListMap.addNode(node, chainKey, theNodeKeyFront);
+        if (textContextIDs) this._insertTexts([chainKey], textContextIDs);
         this._reconstructChains([chainKey]);
 
     }
 
 
 
-    updateNodeCoordinates(node, chainKey, textContextIDs) {
+    updateNodeCoordinates(node, chainKey, { textContextIDs = [] } = {}) {
         this._chainListMap.updateNode(node, chainKey);
-
-        {
-            const textContexts = textContextIDs.map(v => this._textContextInjectionMap.get(v));
-            this._chainListMap.textUpdate(chainKey, textContextIDs,)
-        }
-
+        if (textContextIDs) this._insertTexts([chainKey], textContextIDs);
+        this._reconstructChains([chainKey]);
     }
 
 
@@ -214,71 +211,60 @@ export class CircleLineChainPlugin {
 
     /**
      * 
-     * @param {*} chainKey 
-     * @param {*} nodeKeys 
+     * @param {*} chainKeys 
      */
-    deleteChain(chainKey) {
-        const keys = this._chainListMap.deleteChainAndReturnChainKeys(chainKey)
-        this.bufferOrchestrator.deleteBulk(keys, this.bufferManagersCompMap)
+    deleteChains(chainKeys) {
+        const bufferKeys = [];
+        for (const chainKey of chainKeys) {
+            bufferKeys.push(...this._chainListMap.deleteChainAndReturnChainKeys(chainKey));
+        }
+        console.log("delete chain keys", chainKeys);
+        console.log("deletechains bufferKeys", bufferKeys);
+        this._insertTexts(chainKeys, this._textContextWriterInjectionMap.keys());
+        this._textContextWriterInjectionMap.forEach((writer) => writer.deleteTextBulk(bufferKeys));
+        this.bufferOrchestrator.deleteBulk(bufferKeys, this.bufferManagersCompMap);
     }
 
 
     /**
      * 
-     * @param {Map<keys, [nodeKeys]} keysAndNodes
+     * @param {Array<{key, nodeKeys:[]} keysAndNodes
      */
     deleteNodes(keysAndNodes) {
         const bufferKeys = [];
         const chainKeysToReconstuct = [];
-        keysAndNodes.forEach((nodeList, chainKey, m) => {
-            bufferKeys.push(...this._chainListMap.deleteChainAndReturnChainKeys(chainKey, nodeList));
+        keysAndNodes.forEach(({ chainKey, nodeKeys }) => {
+            bufferKeys.push(...this._chainListMap.deleteNodesBelongToAChain(chainKey, nodeKeys));
             chainKeysToReconstuct.push(chainKey);
-        })
+        });
         this._reconstructChains(chainKeysToReconstuct);
+        this._textContextWriterInjectionMap.forEach((writer) => writer.deleteTextBulk(bufferKeys));
         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);
-        });
+    _insertTexts(chainKeys, textWriterIDs) {
+        const textWriters = textWriterIDs.map((v) => this._textContextWriterInjectionMap.get(v));
+        chainKeys.forEach((chainKey) => {
+            this._chainListMap.textUpdate(chainKey, textWriters);
+        })
     }
 
 
 
     _reconstructChains(chainKeys) {
-        const { globe } = globe;
+        const { globe } = this;
         //     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) => {
+            if (i == array.length - 1) return null;
             return {
                 rgba: probs.rgba,
                 bigRadius: radiusM(v, i, array),
@@ -303,6 +289,7 @@ export class CircleLineChainPlugin {
 
     _insertBulk(bulkData) {
         this.bufferOrchestrator.insertBulk(bulkData, this.bufferManagersCompMap);
+        this.globe.DrawRender();
     }
 
 
@@ -315,17 +302,23 @@ export class CircleLineChainPlugin {
         })
         LineOnGlobeCache.release(this.globe);
         CircleCache.release(this.globe);
+        this.lineProgram = null;
+        this.circleProgram = null;
         this.isFreed = true;
     }
 
     draw3D() {
         const { gl } = this;
+        gl.disable(gl.DEPTH_TEST);
         this.lineProgram.draw(this.lineVao, this.bufferOrchestrator.length, this._opacity);
+        this.circleProgram.draw(this.circleVao, this.bufferOrchestrator.length, this._opacity);
+        this._textContextWriterInjectionMap.forEach((writer) => writer.draw());
+        gl.enable(gl.DEPTH_TEST);
     }
 }
 
 
 
 const radiusMethod = (globe) => (v, i, array) => {
-    return globe.Math.GetDist2D(v.long, v.lat, array[i + 1].endLong, array[i + 1].endLat)
+    return globe.Math.GetDist3D(v.long, v.lat, array[i + 1].long, array[i + 1].lat)
 } 

package/package.json

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

package/rangerings/rangerings.js

@@ -39,6 +39,7 @@ export default class {
 
     setOneDegreePaddingOn(oneDegreePadding) {
         this._onedegreepaddingOn = oneDegreePadding;
+        this.globe.DrawRender();
     }
 
     init(globe, gl) {

package/write-text/context-text.js

@@ -20,6 +20,9 @@ export class ContextTextWriter {
         this.itemMap = new Map();
         this.style = style || defaultStyle;
         this.doDraw = doDraw;
+
+
+
     }
 
 
@@ -35,6 +38,7 @@ export class ContextTextWriter {
         this.style.opacity = opacity;
     }
 
+    // Clean this ask Front dev
     doDraw(boolean) {
         this.doDraw = boolean;
     }
@@ -60,6 +64,8 @@ export class ContextTextWriter {
     }
 
 
+
+
     insertText(key, lat, long, text,) { // TODO: Make it more generic
         this.itemMap.set(key, { lat, long, text });
     }

package/write-text/context-text2.js

@@ -0,0 +1,128 @@
+import { CSZMode } from "@pirireis/webglobe";
+
+const defaultStyle = {
+    textFont: {
+        name: 'Arial',
+        textColor: '#FFFFFF', // beyaz
+        hollowColor: '#000000', // siyah
+        size: 12, // piksel
+        hollow: true,
+        bold: true,
+        italic: false,
+    },
+    opacity: 1.0,
+    zMode: CSZMode.Z_GROUND_PERVERTEX,
+}
+
+export class ContextTextWriter2 {
+    constructor(globe, { style = null, doDraw = true, textAdaptor = null, coordinatesAdaptor = null, keyAdaptor = null, opacityAdaptor = null } = {}) {
+        this.globe = globe;
+        this.itemMap = new Map();
+        this.style = style || defaultStyle;
+        this.doDraw = doDraw;
+
+
+        this.textAdaptor = textAdaptor;
+        this.coordinatesAdaptor = coordinatesAdaptor;
+        this.keyAdaptor = keyAdaptor;
+        if (opacityAdaptor) {
+            this.opacityAdaptor = opacityAdaptor
+        } else {
+            this.opacityAdaptor = () => 1;
+        }
+    }
+
+
+    setDoDraw(bool) {
+        this.doDraw = bool;
+    }
+
+    setStyle(style) {
+        this.style = style;
+    }
+
+    setOpacity(opacity) {
+        this.style.opacity = opacity;
+    }
+
+
+
+    draw() {
+        if (!this.doDraw) return;
+        const { globe, style, itemMap } = this;
+        const { textFont, opacity: opacity_ } = style;
+
+        for (const [key, { lat, long, text, opacity = null }] of itemMap) {
+            const { x, y } = globe.api_GetScreenPointFromGeo(
+                {
+                    long: long,
+                    lat: lat,
+                    z: 0,
+                },
+                style.zMode === CSZMode.Z_MSL,
+            );
+            const o = opacity === null ? opacity_ : opacity * opacity_;
+            if (x !== null && y !== null) globe.api_DrawContextTextMultiLine(text, textFont, o, { x, y });
+        }
+    }
+
+
+    updateOpacityOfItem(item, i, container, properties) {
+        const opacity = this.opacityAdaptor(item, i, container, properties);
+        if (opacity == null) return;
+        const key = this.keyAdaptor(item, i, container, properties);
+        const data = this.itemMap.get(key)
+        data.opacity = opacity;
+    }
+
+    updateOpacityContainer(container, properties) {
+        container.forEach((v, i, c) => {
+            this.updateOpacityOfItem(v, i, c, properties);
+        })
+    }
+
+
+    insertTextBulk(container, properties) {
+        container.forEach((v, i, c) => {
+            this.insertText(v, i, c, properties);
+        })
+    }
+
+    updateTextCoords(item, i, container, properties) {
+        const coords = this.coordinatesAdaptor(item, i, container, properties);
+        if (coords == null) return;
+        const key = this.keyAdaptor(item, i, container, properties);
+        const data = this.itemMap.get(key)
+        data.long = coords.long;
+        data.lat = coords.lat;
+    }
+
+    updateTextCoordsBulk(container, properties) {
+        container.forEach((v, i, c) => {
+            this.updateTextCoords(v, i, c, properties)
+        })
+    }
+
+    deleteTextBulk(keys) {
+        for (const key of keys) {
+            this.itemMap.delete(key);
+        }
+    }
+
+
+    insertText(item, id, container, properties) {
+        const coords = this.coordinatesAdaptor(item, id, container, properties)
+        if (coords == null) return;
+        const text = this.textAdaptor(item, id, container, properties)
+        if (text == null) return;
+        const opacity = this.opacityAdaptor(item, id, container, properties);
+        const key = this.keyAdaptor(item, id, container, properties)
+        this.itemMap.set(key, { long: coords.long, lat: coords.lat, text, opacity });
+    }
+
+    clear() {
+        this.itemMap.clear();
+    }
+}
+
+