@pirireis/webglobeplugins 0.3.6 → 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));
+    }
+
+
+}