@pirireis/webglobeplugins 0.6.19 → 0.6.21

package/bearing-line/plugin.js

@@ -1,7 +1,7 @@
 import { pieceOfPieProgramCache } from '../programs/rings/partial-ring/piece-of-pie';
 import { LineOnGlobeCache } from '../programs/line-on-globe/naive-accurate';
 import { CircleCache as Circle3DCache } from '../programs/line-on-globe/circle-accurate-3d';
-import { CircleCache, EDGE_COUNT as flatCircleEdgeCount } from '../programs/line-on-globe/circle-accurate-flat';
+import { CircleCache, EDGE_COUNT as flatCircleEdgeCount, centerCoords2dflatDataCreator } from '../programs/line-on-globe/circle-accurate-flat';
 import { BufferOrchestrator, BufferManager } from '../util/account';
 import { AngledLineProgramCache } from '../programs/line-on-globe/angled-line'; // TODO calculate the bearing target for 2d and 3d and use lineOnGlobeProgram
 import { mapGetOrThrow } from "../util/check/get";
@@ -41,10 +41,19 @@ export default class Plugin {
      * 
      * @param {*} id 
      * @param {Map<[K ,{writer:ContextTextWriter, coordsAdaptor, textAdaptor}]} textContextInjectionMap  import { ContextTextWriter } from '@pirireis/webglobeplugins/write-text/context-text';
-     * 
+     *
      */
 
-    constructor(id, { opacity = 1, textContextInjectionMap = new Map(), drawVRM = true, drawBearingLine = true, drawAngleRing = true, drawText = true } = {}) {
+    constructor(id,
+        {
+            opacity = 1,
+            textContextInjectionMap = new Map(),
+            drawVRM = true,
+            drawBearingLine = true,
+            drawAngleRing = true,
+            drawText = true,
+            circleFlatEdgeCount = flatCircleEdgeCount - 2
+        } = {}) {
         this.id = id;
         this._opacity = opacity;
         this.bufferOrchestrator = new BufferOrchestrator({ capacity: 10 });
@@ -53,7 +62,11 @@ export default class Plugin {
         this.drawVRM = drawVRM;
         this.drawBearingLine = drawBearingLine;
         this.drawAngleRing = drawAngleRing;
+
+
         this.drawText = drawText;
+
+        this.circleFlatEdgeCount = circleFlatEdgeCount + 2;//circleFlatEdgeCount;
     }
 
     setDoDrawVRM(bool) {
@@ -122,6 +135,7 @@ export default class Plugin {
         this.circle3DProgram = Circle3DCache.get(globe);
         // this.angleTextContext = new ContextTextWriter(globe);
         // this.distanceTextContext = new ContextTextWriter(globe);
+        const circleFlatEdgeCount = this.circleFlatEdgeCount
         {
             // createBuffers
             const bufferType = "DYNAMIC_DRAW";
@@ -134,7 +148,7 @@ export default class Plugin {
                         'adaptor': (item) => new Float32Array(globe.api_GetMercator2DPoint(item.long, item.lat)),
                     }],
                     ["centerCoords2dflat", {
-                        'bufferManager': new BufferManager(gl, flatCircleEdgeCount * 2, { bufferType, initialCapacity }),
+                        'bufferManager': new BufferManager(gl, circleFlatEdgeCount * 2, { bufferType, initialCapacity }),
                         'adaptor': (item) => item.centerCoords2dflat,
                     }],
                     ["centerCoords3d", {
@@ -216,21 +230,21 @@ export default class Plugin {
 
                     // normal circle
                     ["circleDashAngle", {
-                        'bufferManager': new BufferManager(gl, flatCircleEdgeCount, { bufferType, initialCapacity }),
+                        'bufferManager': new BufferManager(gl, circleFlatEdgeCount, { bufferType, initialCapacity }),
                         'adaptor': (item) => new Float32Array(item.rgba),
                     }],
                     // CIRCLE Mercator
                     ["rgbaMercator", {
-                        'bufferManager': new BufferManager(gl, 4 * flatCircleEdgeCount, { bufferType, initialCapacity }),
-                        'adaptor': (item) => populateFloat32Array.fillWithListData(flatCircleEdgeCount, item.rgba),
+                        'bufferManager': new BufferManager(gl, 4 * circleFlatEdgeCount, { bufferType, initialCapacity }),
+                        'adaptor': (item) => populateFloat32Array.fillWithListData(circleFlatEdgeCount, item.rgba),
                     }],
                     ["circleDashAngleMercator", {
-                        'bufferManager': new BufferManager(gl, flatCircleEdgeCount, { bufferType, initialCapacity }),
-                        'adaptor': (item) => populateFloat32Array.fillFloat32Array(flatCircleEdgeCount, item.circleDashAngle / 360),
+                        'bufferManager': new BufferManager(gl, circleFlatEdgeCount, { bufferType, initialCapacity }),
+                        'adaptor': (item) => populateFloat32Array.fillFloat32Array(circleFlatEdgeCount, item.circleDashAngle / 360),
                     }],
                     ["dashOpacityMercator", {
-                        'bufferManager': new BufferManager(gl, flatCircleEdgeCount, { bufferType, initialCapacity }),
-                        'adaptor': (item) => populateFloat32Array.fillFloat32Array(flatCircleEdgeCount, item.dashOpacity),
+                        'bufferManager': new BufferManager(gl, circleFlatEdgeCount, { bufferType, initialCapacity }),
+                        'adaptor': (item) => populateFloat32Array.fillFloat32Array(circleFlatEdgeCount, item.dashOpacity),
                     }],
 
                 ]
@@ -286,7 +300,7 @@ export default class Plugin {
             if (is3D) {
                 this.circle3DProgram.draw(this.circle3DVao, this.bufferOrchestrator.length, this._opacity);
             } else {
-                this.circleProgram.draw(this.circleVao, this.bufferOrchestrator.length, this._opacity);
+                this.circleProgram.draw(this.circleVao, this.bufferOrchestrator.length, this.circleFlatEdgeCount, this._opacity);
             }
         }
         if (this.drawText) {
@@ -436,22 +450,7 @@ export default class Plugin {
             tailAngle3d -= Math.PI * 2;
         }
 
-        const centerCoords2dflat = new Float32Array(flatCircleEdgeCount * 2);
-        const radius2d = globe.Math.GetDist2D(item.long, item.lat, item.endLong, item.endLat);
-        const pointsLongLat = globe.Math.GetEllipseGeo(
-            item.long,
-            item.lat,
-            radius2d,
-            radius2d,
-            startAngleOfCircle,
-            360 / (flatCircleEdgeCount - 2), // 1 for return to start point, 1 for cutting circles
-        );
-
-        for (let i = 1; i < flatCircleEdgeCount; i++) {
-            const { long: lg, lat: lt } = pointsLongLat[i - 1];
-            centerCoords2dflat.set(globe.api_GetMercator2DPoint(lg, lt), i * 2);
-        }
-
+        const centerCoords2dflat = centerCoords2dflatDataCreator(globe, item.long, item.lat, item.endLong, item.endLat, { startAngleOfCircle, edgeCount: this.circleFlatEdgeCount });
         return {
             key: item.key,
             lat: item.lat,
@@ -473,11 +472,13 @@ export default class Plugin {
 
 
     __fixPartialProperties(propertyIDs) {
-        const s = new Set("rgba", "dashOpacity", "circleDashAngle");
+        const s = new Set(["rgba", "dashOpacity", "circleDashAngle"]);
         const result = []
         for (const item of propertyIDs) {
             result.push(item);
+            console.log(item + " is processing")
             if (s.has(item)) {
+                console.log(item + "Mercator is added")
                 result.push(item + "Mercator");
             }
         }

package/circle-line-chain/plugin.js

@@ -1,5 +1,5 @@
 import { LineOnGlobeCache } from '../programs/line-on-globe/naive-accurate';
-import { CircleCache, EDGE_COUNT as EDGE_COUNT_2D_CIRCLE, centerCoords2dflatDataCreator } from '../programs/line-on-globe/circle-accurate-flat';
+import { CircleCache, EDGE_COUNT as flatCircleEdgeCount, centerCoords2dflatDataCreator } from '../programs/line-on-globe/circle-accurate-flat';
 import { CircleCache as Circle3DCache } from '../programs/line-on-globe/circle-accurate-3d';
 import { LineToTheOriginCache } from "../programs/line-on-globe/to-the-origin"
 import { BufferOrchestrator, BufferManager } from "../util/account";
@@ -47,7 +47,8 @@ export class CircleLineChainPlugin {
     constructor(id, {
         drawCircleOn = true,
         textContextWriterInjectionMap = new Map(),
-        textDataPreAdaptor = null
+        textDataPreAdaptor = null,
+        circleFlatEdgeCount = flatCircleEdgeCount - 2
     } = {}) {
         this.id = id;
         this._checkTextContextWriterInjectionMap(textContextWriterInjectionMap);
@@ -58,6 +59,7 @@ export class CircleLineChainPlugin {
         this.bufferOrchestrator = new BufferOrchestrator({ capacity: 10 });
         this._drawCircleOn = drawCircleOn;
         this._textDataPreAdaptor = textDataPreAdaptor;
+        this._circleFlatEdgeCount = circleFlatEdgeCount + 2;
     }
 
     // init
@@ -82,6 +84,7 @@ export class CircleLineChainPlugin {
         this.circle3DProgram = Circle3DCache.get(globe);
 
         this.lineToTheOriginProgram = LineToTheOriginCache.get(globe);
+        const _circleFlatEdgeCount = this._circleFlatEdgeCount;
         {
             // createBuffers
             const bufferType = "DYNAMIC_DRAW";
@@ -138,29 +141,27 @@ export class CircleLineChainPlugin {
                             return new Float32Array(item.chainProperties.rgba);
                         }
                     }],
-
-
                     // Mercator buffers
                     ["circleDashAngleMercator", {
-                        'bufferManager': new BufferManager(gl, 1 * EDGE_COUNT_2D_CIRCLE, { bufferType, initialCapacity }),
+                        'bufferManager': new BufferManager(gl, 1 * _circleFlatEdgeCount, { bufferType, initialCapacity }),
                         'adaptor': (item) => {
                             if (item.circleProperties?.circleDashAngle) return new Float32Array([item.circleProperties.circleDashAngle / 360]);
-                            return new populateFloat32Array.fillFloat32Array(EDGE_COUNT_2D_CIRCLE, item.chainProperties.circleDashAngle / 360);
+                            return new populateFloat32Array.fillFloat32Array(_circleFlatEdgeCount, item.chainProperties.circleDashAngle / 360);
                         }
                     }],
-                    ["rgbaCircleMercator", {
-                        "bufferManager": new BufferManager(gl, 4 * EDGE_COUNT_2D_CIRCLE, { bufferType, initialCapacity }),
+                    ["rgbaCircleMercator", {                            // 62
+                        "bufferManager": new BufferManager(gl, 4 * _circleFlatEdgeCount, { bufferType, initialCapacity }),
                         "adaptor": (item) => {
-                            if (item.circleProperties?.rgba) return populateFloat32Array.fillWithListData(EDGE_COUNT_2D_CIRCLE, item.circleProperties.rgba);
-                            return populateFloat32Array.fillWithListData(EDGE_COUNT_2D_CIRCLE, item.chainProperties.rgba);
+                            if (item.circleProperties?.rgba) return populateFloat32Array.fillWithListData(_circleFlatEdgeCount, item.circleProperties.rgba);
+                            return populateFloat32Array.fillWithListData(_circleFlatEdgeCount, item.chainProperties.rgba);
                         }
                     }],
                     ["dashOpacityMercator", {
-                        'bufferManager': new BufferManager(gl, 1 * EDGE_COUNT_2D_CIRCLE, { bufferType, initialCapacity }),
-                        'adaptor': (item) => populateFloat32Array.fillFloat32Array(EDGE_COUNT_2D_CIRCLE, item.chainProperties.dashOpacity)
+                        'bufferManager': new BufferManager(gl, 1 * _circleFlatEdgeCount, { bufferType, initialCapacity }),
+                        'adaptor': (item) => populateFloat32Array.fillFloat32Array(_circleFlatEdgeCount, item.chainProperties.dashOpacity)
                     }],
                     ["centerCoords2dMercator", {
-                        'bufferManager': new BufferManager(gl, 2 * EDGE_COUNT_2D_CIRCLE, { bufferType, initialCapacity }),
+                        'bufferManager': new BufferManager(gl, 2 * _circleFlatEdgeCount, { bufferType, initialCapacity }),
                         'adaptor': (item) => item.centerCoords2dflat,
                     }],
                 ]
@@ -379,7 +380,7 @@ export class CircleLineChainPlugin {
         const callback = (v, i, array, chainProperties) => {
             if (i == array.length - 1) return null;
 
-            const centerCoords2dflat = centerCoords2dflatDataCreator(globe, v.long, v.lat, array[i + 1].long, array[i + 1].lat);
+            const centerCoords2dflat = centerCoords2dflatDataCreator(globe, v.long, v.lat, array[i + 1].long, array[i + 1].lat, { edgeCount: this._circleFlatEdgeCount });
 
             return {
                 chainProperties: chainProperties,
@@ -442,7 +443,7 @@ export class CircleLineChainPlugin {
             if (is3D) {
                 this.circle3DProgram.draw(this.circle3DVao, this.bufferOrchestrator.length, this._opacity);
             } else {
-                this.circleProgram2d.draw(this.circleVao2d, this.bufferOrchestrator.length, this._opacity);
+                this.circleProgram2d.draw(this.circleVao2d, this.bufferOrchestrator.length, this._circleFlatEdgeCount, this._opacity);
             }
         }
         gl.enable(gl.DEPTH_TEST);

package/package.json

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

package/programs/line-on-globe/circle-accurate-3d.js

@@ -60,7 +60,6 @@ void main() {
     v_dash_opacity = dash_opacity;
     v_color = color;
     gl_PointSize = 3.0;
-
 }`
 
 const fragmentShaderSource = `#version 300 es

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

@@ -11,14 +11,17 @@ import {
 * Insert the points from the second index and skip 1 point as you placed 361 points
 */
 
-const EDGE_COUNT = 62; // 1 for returning to the start point. 1 for cutting the circle into pieces. 
+/**
+ * Plus 1 for returning to the start point. 1 for cutting the circle into pieces. 
+ */
+const EDGE_COUNT = 62;
 
 const vertexShaderSource = `#version 300 es
 precision highp float;
 ${CameraUniformBlockString}
 ${mercatorXYToGLPosition}
 
-uniform float edge_count;
+uniform int edge_count;
 
 
 in vec2 position2d;
@@ -32,8 +35,8 @@ out float v_dash_ratio;
 out float v_dash_opacity;
 out vec2 v_limp;
 void main() {
-    interpolation = float( gl_VertexID % 62 ) / ${EDGE_COUNT}.0;
-    if ( gl_VertexID % 62 == 0 ) { return; } // cut on the first point.
+    interpolation = float( gl_VertexID % edge_count ) / float(edge_count);
+    if ( gl_VertexID % edge_count == 0 ) { return; } // cut on the first point.
     if ( is3D ) {
         return;
         v_limp = vec2(0.0, 0.0);
@@ -79,11 +82,13 @@ class Logic {
         this.gl = globe.gl;
         this._lastOpacity = 1.0;
         this._lastMercatorMode = 0;
+        this._lastEdgeCount = EDGE_COUNT;
         this.program = createProgram(this.gl, vertexShaderSource, fragmentShaderSource);
 
         const { gl, program } = this;
         this.program.uniforms = {
             opacity: gl.getUniformLocation(program, "opacity"),
+            edgeCount: gl.getUniformLocation(program, "edge_count"),
             mercator_calculation_mode: gl.getUniformLocation(program, "mercator_calculation_mode")
         };
 
@@ -91,6 +96,7 @@ class Logic {
             const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
             gl.useProgram(program);
             gl.uniform1f(program.uniforms.opacity, 1.0);
+            gl.uniform1i(program.uniforms.edgeCount, EDGE_COUNT);
             gl.uniform1i(program.uniforms.mercator_calculation_mode, 0);
             gl.useProgram(currentProgram);
 
@@ -138,16 +144,20 @@ class Logic {
     }
 
 
-    draw(vao, length, opacity) {
+    draw(vao, length, edgeCount, opacity) {
         const { gl, program, cameraBlockTotem, cameraBindingPoint } = this;
         gl.useProgram(program);
         if (this._lastOpacity !== opacity) {
             gl.uniform1f(program.uniforms.opacity, opacity);
             this._lastOpacity = opacity;
         }
+        if (this._lastEdgeCount !== edgeCount) {
+            gl.uniform1i(program.uniforms.edgeCount, edgeCount);
+            this._lastEdgeCount = edgeCount;
+        }
         gl.bindVertexArray(vao);
         cameraBlockTotem.bind(cameraBindingPoint);
-        gl.drawArrays(gl.LINE_STRIP, 0, length * EDGE_COUNT)
+        gl.drawArrays(gl.LINE_STRIP, 0, length * edgeCount)
         // gl.drawArrays(gl.POINTS, 0, length * EDGE_COUNT)
         cameraBlockTotem.unbind(cameraBindingPoint);
         gl.bindVertexArray(null);
@@ -170,8 +180,8 @@ const CircleCache = Object.freeze({
 });
 
 
-function centerCoords2dflatDataCreator(globe, centerLong, centerLat, targetLong, targetLat, { startAngleOfCircle = null } = {}) {
-    const centerCoords2dflat = new Float32Array(EDGE_COUNT * 2);
+function centerCoords2dflatDataCreator(globe, centerLong, centerLat, targetLong, targetLat, { startAngleOfCircle = null, edgeCount = EDGE_COUNT } = {}) {
+    const centerCoords2dflat = new Float32Array(edgeCount * 2);
     const radius2d = globe.Math.GetDist2D(centerLong, centerLat, targetLong, targetLat);
     let angle;
     if (startAngleOfCircle === null) {
@@ -185,10 +195,10 @@ function centerCoords2dflatDataCreator(globe, centerLong, centerLat, targetLong,
         radius2d,
         radius2d,
         angle,
-        360 / (EDGE_COUNT - 2), // 1 for return to start point, 1 for cutting circles
+        360 / (edgeCount - 2), // 1 for return to start point, 1 for cutting circles
     );
 
-    for (let i = 1; i < EDGE_COUNT; i++) {
+    for (let i = 1; i < edgeCount; i++) {
         const { long: lg, lat: lt } = pointsLongLat[i - 1];
         centerCoords2dflat.set(globe.api_GetMercator2DPoint(lg, lt), i * 2);
     }

package/programs/rings/distancering/paddyflatprogram2d.js

@@ -0,0 +1,151 @@
+import { createProgram, shaderfunctions } from "../../../util";
+import {
+    circleLimpFromLongLatRadCenterMercatorRealDistanceNew_accurate,
+    circleLimpFromLongLatRadCenterCartesian3D_accurate_accurate
+} from "../../../util/shaderfunctions/geometrytransformations";
+import CameraUniformBlockTotem, { CameraUniformBlockString } from "../../totems/camerauniformblock";
+import { globeProgramCache, noRegisterGlobeProgramCache } from "../../programcache";
+
+const vertexShader = `#version 300 es ` +
+    shaderfunctions.PI +
+    shaderfunctions.R +
+    shaderfunctions.POLE +
+    CameraUniformBlockString +
+    shaderfunctions.mercatorXYToGLPosition +
+    shaderfunctions.longLatRadToMercator +
+    shaderfunctions.longLatRadToCartesian3D +
+    shaderfunctions.circleLimpFromLongLatRadCenterMercatorCompass +
+    shaderfunctions.circleLimpFromLongLatRadCenterMercatorRealDistancePadding +
+    shaderfunctions.circleLimpFromLongLatRadCenterMercatorRealDistance + `
+
+${circleLimpFromLongLatRadCenterCartesian3D_accurate_accurate}
+
+in vec2 center;
+in float radius;
+in float pad_range;
+in vec4 color;
+in float flag;
+
+uniform int compass;
+uniform float pad_count;
+
+uniform float opacity;
+
+
+out vec2 v_limp;
+out vec4 v_color;
+
+
+void main() {   
+
+    float alpha_padding =  z_level * z_level / (pad_range/ 100.0 );
+    if( flag == 2.0 || flag == 1.0 || radius == 0.0 || alpha_padding < 0.1 || z_level < 3.0 ) return; // 1.0 is hide 
+    v_color = vec4(color.rgb, color.a * alpha_padding * opacity);
+
+    gl_PointSize = 2.0;
+
+    float odd = mod(float(gl_VertexID), 2.0);
+    float index = (float(gl_VertexID)- odd ) / 2.0;
+    float angle = 3.1415926535897932384626433832795 * 2.0 * (index / pad_count );
+    float radius_ = radius - (pad_range * odd);
+
+    if ( is3D){  
+        gl_Position = projection * view * vec4(
+            circleLimpFromLongLatRadCenterCartesian3D_accurate( center, radius_, angle) - translate, 1.0);
+        v_limp = vec2(0.0, 0.0);
+        return;
+    }
+    vec2 limp;
+    if ( compass == 1 ){
+        limp = circleLimpFromLongLatRadCenterMercatorCompass(center , radius_, angle);
+    } else {
+        // limp = circleLimpFromLongLatRadCenterMercatorRealDistancePadding(center, radius_, angle);
+        limp = circleLimpFromLongLatRadCenterMercatorRealDistance(center, radius_, angle);
+    }
+    v_limp = limp;
+    gl_Position = mercatorXYToGLPosition(limp);
+}`;
+
+const fragmentShader = `#version 300 es
+precision highp float; `+
+    shaderfunctions.POLE + `
+in vec4 v_color;
+in vec2 v_limp;
+out vec4 outColor;
+void main() {
+    if ( v_limp.x < -POLE || v_limp.x > POLE || v_limp.y < -POLE || v_limp.y > POLE ){ discard; }
+    outColor = v_color;
+}`;
+
+class Logic {
+    constructor(globe) {
+        this.globe = globe;
+        this.gl = globe.gl;
+        this.program = createProgram(this.gl, vertexShader, fragmentShader);
+        { // bind positions so bufferManager can use them
+            this.gl.bindAttribLocation(this.program, 0, "center");
+            this.gl.bindAttribLocation(this.program, 1, "radius");
+            this.gl.bindAttribLocation(this.program, 2, "pad_range");
+            this.gl.bindAttribLocation(this.program, 3, "color");
+            this.gl.bindAttribLocation(this.program, 4, "flag");
+        }
+        this.cameraBlockBindingPoint = 0;
+        const cameraBlockIndex = this.gl.getUniformBlockIndex(this.program, "CameraUniformBlock");
+        this.gl.uniformBlockBinding(this.program, cameraBlockIndex, this.cameraBlockBindingPoint);
+        this.cameraBlockTotem = globeProgramCache.getProgram(globe, CameraUniformBlockTotem);
+        this._padCountLocation = this.gl.getUniformLocation(this.program, "pad_count");
+        this._opacityLocation = this.gl.getUniformLocation(this.program, "opacity");
+        this._compassLocation = this.gl.getUniformLocation(this.program, "compass");
+        this._compassMode = 1;
+        this._opacity = 1.0;
+        this._padCount = 360;
+        {
+            const currentProgram = this.gl.getParameter(this.gl.CURRENT_PROGRAM);
+            this.gl.useProgram(this.program);
+            this.gl.uniform1i(this._compassLocation, 1);
+            this.gl.uniform1f(this._opacityLocation, 1.0);
+            this.gl.uniform1f(this._padCountLocation, 360)
+            this.gl.useProgram(currentProgram);
+        }
+
+    }
+
+
+    draw(attrBufferManager, padCount, compass, opacity) {
+        const { gl, program, _padCountLocation, cameraBlockBindingPoint, cameraBlockTotem, _compassLocation } = this;
+        gl.useProgram(program);
+        attrBufferManager.bindPaddingVAO();
+        cameraBlockTotem.bind(cameraBlockBindingPoint);
+        // draw instanced
+        if (padCount !== this._padCount) {
+            this._padCount = padCount;
+            // console.log("padCount", padCount);
+            gl.uniform1f(_padCountLocation, padCount);
+        }
+        if (compass !== this._compassMode) {
+            // console.log("compass", compass);
+            gl.uniform1i(_compassLocation, compass);
+            this._compassMode = compass;
+        }
+        if (opacity !== this._opacity) {
+            // console.log("opacity", opacity);
+            this._opacity = opacity;
+            gl.uniform1f(this._opacityLocation, opacity);
+        }
+        gl.drawArraysInstanced(gl.LINES, 0, padCount * 2, attrBufferManager.length);
+        gl.bindVertexArray(null);
+        cameraBlockTotem.unbind(cameraBlockBindingPoint);
+    }
+
+    free() {
+        this.gl.deleteProgram(this.program);
+        globeProgramCache.releaseProgram(this.globe, CameraUniformBlockTotem);
+    }
+}
+
+
+
+export const PaddingProgramCache = Object.freeze({
+    getProgram: (globe) => { return noRegisterGlobeProgramCache.getProgram(globe, Logic) },
+    releaseProgram: (globe) => { noRegisterGlobeProgramCache.releaseProgram(globe, Logic) }
+})

package/programs/rings/distancering/paddyflatprogram3d.js

@@ -0,0 +1,151 @@
+import { createProgram, shaderfunctions } from "../../../util";
+import {
+    circleLimpFromLongLatRadCenterMercatorRealDistanceNew_accurate,
+    circleLimpFromLongLatRadCenterCartesian3D_accurate_accurate
+} from "../../../util/shaderfunctions/geometrytransformations";
+import CameraUniformBlockTotem, { CameraUniformBlockString } from "../../totems/camerauniformblock";
+import { globeProgramCache, noRegisterGlobeProgramCache } from "../../programcache";
+
+const vertexShader = `#version 300 es ` +
+    shaderfunctions.PI +
+    shaderfunctions.R +
+    shaderfunctions.POLE +
+    CameraUniformBlockString +
+    shaderfunctions.mercatorXYToGLPosition +
+    shaderfunctions.longLatRadToMercator +
+    shaderfunctions.longLatRadToCartesian3D +
+    shaderfunctions.circleLimpFromLongLatRadCenterMercatorCompass +
+    shaderfunctions.circleLimpFromLongLatRadCenterMercatorRealDistancePadding +
+    shaderfunctions.circleLimpFromLongLatRadCenterMercatorRealDistance + `
+
+${circleLimpFromLongLatRadCenterCartesian3D_accurate_accurate}
+
+in vec2 center;
+in float radius;
+in float pad_range;
+in vec4 color;
+in float flag;
+
+uniform int compass;
+uniform float pad_count;
+
+uniform float opacity;
+
+
+out vec2 v_limp;
+out vec4 v_color;
+
+
+void main() {   
+
+    float alpha_padding =  z_level * z_level / (pad_range/ 100.0 );
+    if( flag == 2.0 || flag == 1.0 || radius == 0.0 || alpha_padding < 0.1 || z_level < 3.0 ) return; // 1.0 is hide 
+    v_color = vec4(color.rgb, color.a * alpha_padding * opacity);
+
+    gl_PointSize = 2.0;
+
+    float odd = mod(float(gl_VertexID), 2.0);
+    float index = (float(gl_VertexID)- odd ) / 2.0;
+    float angle = 3.1415926535897932384626433832795 * 2.0 * (index / pad_count );
+    float radius_ = radius - (pad_range * odd);
+
+    if ( is3D){  
+        gl_Position = projection * view * vec4(
+            circleLimpFromLongLatRadCenterCartesian3D_accurate( center, radius_, angle) - translate, 1.0);
+        v_limp = vec2(0.0, 0.0);
+        return;
+    }
+    vec2 limp;
+    if ( compass == 1 ){
+        limp = circleLimpFromLongLatRadCenterMercatorCompass(center , radius_, angle);
+    } else {
+        // limp = circleLimpFromLongLatRadCenterMercatorRealDistancePadding(center, radius_, angle);
+        limp = circleLimpFromLongLatRadCenterMercatorRealDistance(center, radius_, angle);
+    }
+    v_limp = limp;
+    gl_Position = mercatorXYToGLPosition(limp);
+}`;
+
+const fragmentShader = `#version 300 es
+precision highp float; `+
+    shaderfunctions.POLE + `
+in vec4 v_color;
+in vec2 v_limp;
+out vec4 outColor;
+void main() {
+    if ( v_limp.x < -POLE || v_limp.x > POLE || v_limp.y < -POLE || v_limp.y > POLE ){ discard; }
+    outColor = v_color;
+}`;
+
+class Logic {
+    constructor(globe) {
+        this.globe = globe;
+        this.gl = globe.gl;
+        this.program = createProgram(this.gl, vertexShader, fragmentShader);
+        { // bind positions so bufferManager can use them
+            this.gl.bindAttribLocation(this.program, 0, "center");
+            this.gl.bindAttribLocation(this.program, 1, "radius");
+            this.gl.bindAttribLocation(this.program, 2, "pad_range");
+            this.gl.bindAttribLocation(this.program, 3, "color");
+            this.gl.bindAttribLocation(this.program, 4, "flag");
+        }
+        this.cameraBlockBindingPoint = 0;
+        const cameraBlockIndex = this.gl.getUniformBlockIndex(this.program, "CameraUniformBlock");
+        this.gl.uniformBlockBinding(this.program, cameraBlockIndex, this.cameraBlockBindingPoint);
+        this.cameraBlockTotem = globeProgramCache.getProgram(globe, CameraUniformBlockTotem);
+        this._padCountLocation = this.gl.getUniformLocation(this.program, "pad_count");
+        this._opacityLocation = this.gl.getUniformLocation(this.program, "opacity");
+        this._compassLocation = this.gl.getUniformLocation(this.program, "compass");
+        this._compassMode = 1;
+        this._opacity = 1.0;
+        this._padCount = 360;
+        {
+            const currentProgram = this.gl.getParameter(this.gl.CURRENT_PROGRAM);
+            this.gl.useProgram(this.program);
+            this.gl.uniform1i(this._compassLocation, 1);
+            this.gl.uniform1f(this._opacityLocation, 1.0);
+            this.gl.uniform1f(this._padCountLocation, 360)
+            this.gl.useProgram(currentProgram);
+        }
+
+    }
+
+
+    draw(attrBufferManager, padCount, compass, opacity) {
+        const { gl, program, _padCountLocation, cameraBlockBindingPoint, cameraBlockTotem, _compassLocation } = this;
+        gl.useProgram(program);
+        attrBufferManager.bindPaddingVAO();
+        cameraBlockTotem.bind(cameraBlockBindingPoint);
+        // draw instanced
+        if (padCount !== this._padCount) {
+            this._padCount = padCount;
+            // console.log("padCount", padCount);
+            gl.uniform1f(_padCountLocation, padCount);
+        }
+        if (compass !== this._compassMode) {
+            // console.log("compass", compass);
+            gl.uniform1i(_compassLocation, compass);
+            this._compassMode = compass;
+        }
+        if (opacity !== this._opacity) {
+            // console.log("opacity", opacity);
+            this._opacity = opacity;
+            gl.uniform1f(this._opacityLocation, opacity);
+        }
+        gl.drawArraysInstanced(gl.LINES, 0, padCount * 2, attrBufferManager.length);
+        gl.bindVertexArray(null);
+        cameraBlockTotem.unbind(cameraBlockBindingPoint);
+    }
+
+    free() {
+        this.gl.deleteProgram(this.program);
+        globeProgramCache.releaseProgram(this.globe, CameraUniformBlockTotem);
+    }
+}
+
+
+
+export const PaddingProgramCache = Object.freeze({
+    getProgram: (globe) => { return noRegisterGlobeProgramCache.getProgram(globe, Logic) },
+    releaseProgram: (globe) => { noRegisterGlobeProgramCache.releaseProgram(globe, Logic) }
+})

package/rangerings/rangerings copy.js

@@ -0,0 +1,219 @@
+import { rings } from "../programs";
+import { COMPASS_MODES } from "./enum";
+import { PaddingFreeAngleCache } from "../programs/rings/distancering";
+
+import RangeRingAngleText from "./rangeringangletext";
+const { circleProgramCache, PaddingProgramCache, CirclePaddySharedBuffer } = rings;
+
+/**
+ * @typedef RangeRingData
+ * @property {number} centerX
+ * @property {number} centerY
+ * @property {Array<Ring>} rings
+ * 
+ * @typedef Ring
+ * @property {number} radius
+ * @property {number} padding
+ * @property {[number, number, number]} color
+ * 
+ */
+
+
+
+export default class {
+
+    constructor(id, { oneDegreePadding = true, compass = COMPASS_MODES.REAL, showNumbers = true, numbersStyle = null, opacity = 1 } = {}) {
+        this.id = id;
+        this.compass = compass;
+        this._showNumbers = showNumbers;
+        this._numbersStyle = numbersStyle;
+        this._opacity = opacity;
+        this.circleEdgeCount = 360;
+        this._onedegreepaddingOn = oneDegreePadding;
+        this.bufferManager = null;
+
+        this._deleteCounter = 0;
+        this._deleteThreshold = 10;
+    }
+
+
+    setOneDegreePaddingOn(oneDegreePadding) {
+        this._onedegreepaddingOn = oneDegreePadding;
+        this.globe.DrawRender();
+    }
+
+    init(globe, gl) {
+        this.gl = gl;
+        this.globe = globe;
+        this.circleFlatProgram = circleProgramCache.getProgram(globe);
+        this.paddyFlatProgram = PaddingProgramCache.getProgram(globe);
+        this.paddingFreeAngleProgram = PaddingFreeAngleCache.getProgram(globe);
+        if (this._showNumbers) {
+            this.textPlugin = new RangeRingAngleText(globe, this.id + "text", { flatCompassMode: this.compass, style: this._numbersStyle, opacity: this._opacity });
+            delete this._numbersStyle;
+        }
+    }
+
+    // TODO: Add text free
+    free() {
+
+        this.circleProgramCache?.releaseProgram(this.globe);
+        this.PaddingProgramCache?.releaseProgram(this.globe);
+        this.PaddingFreeAngleCache?.releaseProgram(this.globe);
+        this.gl.deleteVertexArray(this.bufferManager?.vao);
+        this.gl.deleteVertexArray(this.paddingBufferManager?.vao);
+        this.paddingBufferManager?.free();
+        this.bufferManager?.free();
+        this.textPlugin?.free();
+        this.circleFlatProgram = null;
+        this.paddyFlatProgram = null;
+        this.bufferManager = null;
+        this.paddingBufferManager = null;
+        this.textPlugin = null;
+    }
+
+
+    setOpacity(opacity) {
+        this._opacity = opacity;
+        this.textPlugin?.setOpacity(opacity); // TODO impolement this
+        this.globe.DrawRender();
+    }
+
+    setGeometry() {
+        this.textPlugin?.setGeometry();
+    }
+
+
+    draw3D() {
+        const { circleFlatProgram, paddyFlatProgram, paddingFreeAngleProgram, bufferManager, compass, gl, circleEdgeCount, paddingBufferManager, _opacity } = this;
+        if (this.bufferManager !== null && bufferManager.length > 0) {
+            gl.disable(gl.DEPTH_TEST);
+            circleFlatProgram.draw(bufferManager, compass, circleEdgeCount, _opacity);
+            if (this._onedegreepaddingOn) paddyFlatProgram.draw(bufferManager, 360, compass, _opacity);
+            paddingFreeAngleProgram.draw(paddingBufferManager, compass, _opacity);
+            gl.enable(gl.DEPTH_TEST);
+        }
+    }
+
+
+
+    /**
+     * @param {RangeRingData} rangeRingData
+     * 0 compass limps
+     * other real distance limp
+     */
+    setCampass(compass) {
+        this.compass = compass;
+        this.textPlugin?.setCompass(compass);
+        this.globe.DrawRender();
+    }
+
+    initilizeBufferManager(initialRingCapacity, bufferDrawType) {
+        const { gl, globe } = this
+        this.bufferDrawType = bufferDrawType;
+        this.bufferManager = new CirclePaddySharedBuffer(gl, globe, { bufferType: bufferDrawType, initialRingCapacity: initialRingCapacity });
+        this.paddingBufferManager = this.paddingFreeAngleProgram.createBuffer({ bufferType: bufferDrawType, initialRingCapacity });
+    }
+
+
+    /**
+     * @typedef {Array<{ringID, radius, paddingRange}>} rings
+     * @param {Array<centerID:string, x:number, y:number, stepAngle:number, rgba:[4 numbers], rings:rings} items
+     */
+    insertBulk(items) {
+        const insertData = ringItemsToCircleBufferInsertDataAdaptor(items);
+
+        this.bufferManager.insertBulk(insertData);
+        for (const item of items) {
+            item.paddingAngles = angleToPaddingAngles(item.stepAngle, 0);
+        }
+        this.paddingBufferManager.insertBulk(items);
+        this.textPlugin?.insertBulk(items);
+        this.globe.DrawRender();
+    }
+
+
+    /**
+     * 
+     * @param {Array<{centerID, x, y}>} items 
+     */
+    updateCentersXY(items) {
+        this.bufferManager.updateCentersXY(items);
+        this.paddingBufferManager.updateCentersXY(items);
+        this.textPlugin?.updateCentersXY(items);
+        this.globe.DrawRender();
+    }
+
+
+    /**
+     * @param   {Array<{centerID, rgba:[4 numbers]}>} centerColors
+     */
+    updateCentersColor(centerColors) {
+        this.bufferManager.updateCentersColor(centerColors);
+        this.paddingBufferManager.updateCentersColor(centerColors);
+        this.globe.DrawRender();
+    }
+
+
+    /**
+     * @param {Array<{centerID}>} centerIds
+     */
+    removeCenters(centerIds) {
+        this.bufferManager.removeCenters(centerIds);
+        this.paddingBufferManager.removeCenters(centerIds);
+        this.textPlugin?.removeCenters(centerIds);
+        this._deleteCounter += centerIds.length;
+        if (this._deleteCounter > this._deleteThreshold) {
+            // this is naive since we are not checking the actual deletion
+            // but it works
+            this._deleteCounter = 0;
+            this.bufferManager.defrag();
+            this.paddingBufferManager.defrag();
+        }
+        this.globe.DrawRender();
+
+    }
+
+    /**
+     * 
+     * @param {Array<{centerID, hide, textHide}>} centerHides
+     */
+    updateCentersHide(centerHides) {
+        this.bufferManager.updateCentersHide(centerHides);
+        this.paddingBufferManager.updateCentersHide(centerHides);
+        this.textPlugin?.updateCentersHide(centerHides);
+        this.globe.DrawRender();
+    }
+}
+
+
+
+
+const ringItemsToCircleBufferInsertDataAdaptor = (ringItems) => {
+
+    const result = [];
+    for (const { centerID, x, y, rgba, rings, hide = 0, textHide = 0 } of ringItems) {
+        const resultRings = [];
+        for (const { ringID, radius, padding } of rings) {
+            resultRings.push({
+                ringID,
+                radius,
+                padding: padding / 5,
+                rgba,
+            });
+        }
+
+        result.push({
+            centerID,
+            x,
+            y,
+            rings: resultRings,
+            hide,
+            textHide
+        });
+    }
+    return result;
+};
+
+const angleToPaddingAngles = (gapDegree, offsetDegree = 0) => Array.from({ length: Math.ceil(360 / gapDegree) }, (_, i) => (i * gapDegree + offsetDegree) * Math.PI / 180);
+

package/rangerings-2/plugin.js

@@ -0,0 +1,42 @@
+/**
+ * Re implementation of rangering plugin.
+ */
+
+
+/**
+ * Circlelari cizen programlar
+ * Circlelari cizen bufferlarin muhasevesi. 
+ * 
+ * 1 derecelikler çok masraflı.
+ * bir dereceklikler için ayrı buffer orchastrator oluşturulmalı.
+ * 
+ * 
+ * A Range Ring {
+ *  rings: [ ring, ]
+ * }
+ */
+
+
+/**
+ * @typedef RangeRingData
+ * @property {number} centerX
+ * @property {number} centerY
+ * @property {Array<Ring>} rings
+ * 
+ * @typedef Ring
+ * @property {number} radius
+ * @property {number} padding
+ * @property {[number, number, number]} color
+ * 
+ * 
+ * @method setOpacity
+ * @method insertBulk
+ * @method updateCentersXY
+ * @method updateCentersColor
+ * @method removeCenters
+ * @method updateCentersHide
+ * 
+ * @method setOneDegreePaddingOn //  performance consuming, might be removed
+ * @method setCompass // removed
+ * 
+ */

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

@@ -29,79 +29,6 @@
 
 
 
-/**
- * Scratchpad
- * 
- * plugin insertBulk(items){
- *  this.offsetManager.autoExtendBuffers(items.length);
- *  this.offsetManager.assignOffsets(items); // read item.keys and assign offsets to them.
- *  this.attrib1BufferManager.insertBulk(items.map(item => this.attrib1Block(item)), ); 
- *  this.attrib2BufferManager.insertBulk();
- *  if (this.attrib3isInNeed) this.attrib3BufferManager.insertBulk(items);
- *  this.globe.DrawRender();
- * }
- * 
- * useTheCaseThatRequiresAttrib3(){
- *  // generate items from other buffers if possible.
- * }
- * 
- * 
- * assignOffsets(items){
- * for (const item of items){
- * const offset = this.offsetManager.getOffset(item.key) || this.offsetManager.nextOffset();
- * item.__offset__ = offset;
- * 
- * allBuffers = [attrib1BufferManager, attrib2BufferManager, attrib3BufferManager]
- *  // // not single responsibility .. 
- * defrag(allBuffers){
- *  for (const bufferManager of allBuffers){
- *     bufferManager.defrag(this.offsetManager.offsetMap);
- *  }
- *  this.offsetManager._defrag();  
- * }
- * 
- */
-
-
-/**
- * 
- * attrib1BufferManager.insertBulk( items) { 
- *  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
- *  for (const item of items) {
- *      const block = this.itemToBlock(item); // this changes based on inserted data structure and expected block structure.
- *      gl.bufferSubData(gl.ARRAY_BUFFER, item.__offset__, block);
- *  }
- * gl.bindBuffer(gl.ARRAY_BUFFER, null);
- * }
- * 
- * deleteBulk(offsets){
- *  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
- * for (const offset of offsets) {
- * gl.bufferSubData(gl.ARRAY_BUFFER, offset, emptyBlock);
- * }
- * gl.bindBuffer(gl.ARRAY_BUFFER, null);
- * }
- * 
- * 
- * // 
- * defrag(offsetMap){
- *  const newArray = new Float32Array(itemCount * itemSize);
- *  const bufferData = this._getBufferData();
- *  let newOffSet = 0;
- *  for (const [key, offSet] of offsetMap) {
- *     const bufferOffset = offset;
- *    newArray.set(bufferData.slice(bufferOffset, bufferOffset + itemSize), newOffSet);
-        newOffset += itemSize * 4;
-    }
-    *
-    * gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-    * 
- * }
- * 
- * ---------------- 
- 
- */
-
 const EXTRA_SIZE = 10;
 
 export class BufferOrchestrator {
@@ -137,7 +64,6 @@ export class BufferOrchestrator {
         for (const [key, { bufferManager, adaptor }] of bufferManagersMap) {
             bufferManager.insertBulk(items.map(adaptor), offsets);
         }
-
     }
 
 
@@ -155,7 +81,9 @@ export class BufferOrchestrator {
         }
         if (bufferKeys) {
             for (const key of bufferKeys) {
-                const { bufferManager, adaptor } = bufferManagersMap.get(key);
+                const bufferManagerComp = bufferManagersMap.get(key);
+                if (bufferManagerComp === undefined) throw new Error("updateBulk bufferKey does not exist");
+                const { bufferManager, adaptor } = bufferManagerComp;
                 bufferManager.insertBulk(items.map(adaptor), offsets);
             }
         } else {
@@ -228,7 +156,8 @@ export class BufferOrchestrator {
             }
         }
         this._defrag();
-        this._length = this._capacity = newCapacity;
+        this._length = offsetMap.size;
+        this._capacity = newCapacity;
         this.tombstoneOffsets = [];
     }
 

package/circle-line-chain/chain-api.md

@@ -1,336 +0,0 @@
-
-## 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
-