@pirireis/webglobeplugins 0.6.26-a → 0.6.28-a

package/bearing-line/plugin.js

@@ -3,7 +3,6 @@ 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, 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";
 import { populateFloat32Array } from "../util/jshelpers/data-filler";
 import { ContextTextWriter } from '../write-text/context-text'
@@ -34,6 +33,7 @@ const constraintFloat = (x, lowerBound, upperBound) => {
  * 
  */
 
+// TODO UPDATE TO ContextTextWriter3
 
 
 export default class Plugin {
@@ -130,11 +130,8 @@ export default class Plugin {
         this.globe = globe;
         this.lineProgram = LineOnGlobeCache.get(globe);
         this.ringProgram = pieceOfPieProgramCache.get(globe);
-        this.angledLineProgram = AngledLineProgramCache.get(globe);
         this.circleProgram = CircleCache.get(globe);
         this.circle3DProgram = Circle3DCache.get(globe);
-        // this.angleTextContext = new ContextTextWriter(globe);
-        // this.distanceTextContext = new ContextTextWriter(globe);
         const circleFlatEdgeCount = this.circleFlatEdgeCount
         {
             // createBuffers
@@ -363,7 +360,7 @@ export default class Plugin {
      * @param {Array<{key, long, lat, endLong, endLat, bearingAngle}>} items
      * @param {Array<string>} textWriterInjectionSubSetIDs | textContextInjectionMap keys to be used for writing text.
      */
-    updateCoordinatesBulk(items, textWriterInjectionSubSetIDs = []) { //TODO
+    updateCoordinatesBulk(items, textWriterInjectionSubSetIDs = []) {
         const injectionsSubSet = textWriterGetOrThrow(this._textContextInjectionMap, textWriterInjectionSubSetIDs);;
         const { globe, bufferOrchestrator, bufferManagersCompMap, } = this;
         const data = []
@@ -489,7 +486,6 @@ export default class Plugin {
         this.bufferManagersCompMap.forEach(({ bufferManager, adaptor }) => {
             bufferManager.free();
         });
-
         const { gl, globe } = this;
         gl.deleteVertexArray(this.lineVao);
         gl.deleteVertexArray(this.ringVao);
@@ -499,7 +495,6 @@ export default class Plugin {
         LineOnGlobeCache.release(globe);
         pieceOfPieProgramCache.release(globe);
         CircleCache.release(globe);
-        AngledLineProgramCache.release(globe);
         Circle3DCache.release(globe)
         this.isFreed = true;
     }

package/circle-line-chain/plugin.js

@@ -8,7 +8,6 @@ import { mapGetOrThrow } from "../util/check/get";
 import { keyMethod } from "./util";
 import { populateFloat32Array } from "../util/jshelpers/data-filler";
 import { ContextTextWriter3 } from '../write-text/context-text3';
-// TODO: Add update buffer and update text mehods on add, delete, update methods
 
 
 /**
@@ -282,7 +281,6 @@ export class CircleLineChainPlugin {
      * @param {*} theNodeKeyFront | node key of the next node, null places to the last
      */
     addNode(node, chainKey, { theNodeKeyFront = null, textWriterIDs = [] } = {}) {
-        // TODO: if before object is null update the last two elements of the chain only. 
         this._chainListMap.addNode(node, chainKey, theNodeKeyFront);
         if (textWriterIDs) this._updateTexts([chainKey], textWriterIDs);
         this._reconstructChains([chainKey]);
@@ -412,7 +410,6 @@ export class CircleLineChainPlugin {
 
 
     // GLOBE API
-    //TODO:
     free() {
         if (this.isFreed) return;
         this.bufferManagersCompMap.forEach(({ bufferManager }) => {
@@ -426,12 +423,13 @@ export class CircleLineChainPlugin {
         const { gl } = this;
         gl.deleteVertexArray(this.lineVao);
         gl.deleteVertexArray(this.circleVao2d);
-        // gl.deleteVertexArray(this.toOriginVao);
+        gl.deleteVertexArray(this.circle3DVao);
         this.lineProgram = null;
         this.circleProgram2d = null;
         this.isFreed = true;
     }
 
+
     draw3D() {
         const { gl, globe } = this;
         gl.disable(gl.DEPTH_TEST);

package/package.json

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

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

@@ -15,9 +15,12 @@ import {
  * Plus 1 for returning to the start point. 1 for cutting the circle into pieces. 
  */
 const EDGE_COUNT = 62;
-
+const escape_value = 200_000_000;
 const vertexShaderSource = `#version 300 es
 precision highp float;
+
+# define escape_value ${escape_value}.0
+
 ${CameraUniformBlockString}
 ${mercatorXYToGLPosition}
 
@@ -34,7 +37,10 @@ out vec4 v_color;
 out float v_dash_ratio;
 out float v_dash_opacity;
 out vec2 v_limp;
+
+
 void main() {
+    if ( position2d.x == escape_value && position2d.y == escape_value){ return; }
     interpolation = float( gl_VertexID % edge_count ) / float(edge_count);
     if ( gl_VertexID % edge_count == 0 ) { return; } // cut on the first point.
     if ( is3D ) {
@@ -216,14 +222,25 @@ function centerCoords2dflatDataCreatorWithRadius(globe, centerLong, centerLat, r
         360 / (edgeCount - 2), // 1 for return to start point, 1 for cutting circles
     );
 
+    let { long: lastlg, lat: lastlt } = pointsLongLat[0];
     for (let i = 1; i < edgeCount; i++) {
         const { long: lg, lat: lt } = pointsLongLat[i - 1];
-        centerCoords2dflat.set(globe.api_GetMercator2DPoint(lg, lt), i * 2);
+        if (manhattanDistance(lastlg, lastlt, lg, lt) < 170) {
+            centerCoords2dflat.set(globe.api_GetMercator2DPoint(lg, lt), i * 2);
+        } else {
+            centerCoords2dflat.set([escape_value, escape_value], i * 2);
+        }
+        lastlg = lg;
+        lastlt = lt;
     }
     return centerCoords2dflat;
 }
 
 
+function manhattanDistance(x1, y1, x2, y2) {
+    return Math.max(Math.abs(x1 - x2), Math.abs(y1 - y2));
+}
+
 export {
     CircleCache, EDGE_COUNT, centerCoords2dflatDataCreator, centerCoords2dflatDataCreatorWithRadius
 }

package/programs/line-on-globe/lines-color-instanced-flat.js

@@ -34,7 +34,7 @@ void main() {
     }
     float gap =  distance(posA, posB);
     float z_alpha;
-    if ( z_alpha_on == 1 || gap > 40000000.0){
+    if ( z_alpha_on == 1 || gap > 37000000.0){
         z_alpha =  z_level * z_level /  ( gap / 100.0 );
         if( z_alpha < 0.1 ) {return;}
         if( z_alpha > 1.0 ) {z_alpha = 1.0;}

package/rangerings/index.js

@@ -1,4 +1,4 @@
-import RangeRings from './rangerings';
+import { RangeRings } from "./plugin";
 import RangeRingAngleText from './rangeringangletext';
 import { ENUM_HIDE, ENUM_TEXT_HIDE, COMPASS_MODES } from './enum';
 export { RangeRings, ENUM_HIDE, ENUM_TEXT_HIDE, COMPASS_MODES, RangeRingAngleText };

package/{rangerings-2 → rangerings}/plugin.js

@@ -33,7 +33,7 @@
  * @typedef {Array<{ringID, radius, padding}>} rings
  * @param {Array<centerID:string, x:number, y:number, stepAngle:number, rgba:[4 numbers], rings:rings} items
  
- * @method updateCentersXY     @param {Array<{centerID, x, y}>} items
+ * @method updateCentersCoordinate    @param {Array<{centerID, long,lat}>} items
  * @method updateCentersColor  @param {Array<{centerID, rgba:[4 numbers]}>} centerColors
  * 
  * @method updateCentersHide   @param {Array<{centerID, hide, textHide}>} centerHides
@@ -76,7 +76,7 @@ import RangeRingAngleText from "./rangeringangletext";
  * [+] big paddings does not remove
  */
 
-// TODO make x, y -> long, lat
+// TODO make long,lat -> long, lat
 
 class RangeRings {
     constructor(id, { oneDegreePadding = true, showNumbers = true, numbersStyle = null, opacity = 1 } = {}) {
@@ -112,7 +112,7 @@ class RangeRings {
         this._padding2dProgram = LinesColorInstancedFlatCache.get(globe);
         this._padding3dProgram = CirclePadding3DCache.get(globe);
         this._bigPadding3dFlatProgram = LineOnGlobeCache.get(globe);
-        // this._padding3dProgram
+
     }
 
 
@@ -230,12 +230,6 @@ class RangeRings {
             ]
         );
 
-        // this.bigPaddingVAO = this._padding2dProgram.createVAO(
-        //     { buffer: this.bufferManagersCompMapPadding.get("circlePoint").bufferManager.buffer, size: 2, stride: 0, offset: 0 },
-        //     { buffer: this.bufferManagersCompMapPadding.get("paddingPoint").bufferManager.buffer, size: 2, stride: 0, offset: 0 },
-        //     { buffer: this.bufferManagersCompMapPadding.get("rgba").bufferManager.buffer, size: 4, stride: 0, offset: 0 },
-        // );
-
         this._bigPadding3dFlatVAO = this._bigPadding3dFlatProgram.createVAO(
             ...["circlePoint", "circlePoint3d", "paddingPoint", "paddingPoint3d", "dashRatio", "dashOpacity", "rgba",].map(key => obj(this.bufferManagersCompMapPadding.get(key)))
         );
@@ -274,10 +268,22 @@ class RangeRings {
     free() {
         if (this._isFreed) return;
         const { globe } = this;
+        this.bufferManagersCompMap.forEach(({ bufferManager }) => bufferManager.free());
+        this.bufferManagersCompMapPadding.forEach(({ bufferManager }) => bufferManager.free());
+        // delete vaos
+        this.gl.deleteVertexArray(this.circle2DVao);
+        this.gl.deleteVertexArray(this.circle3DVao);
+        this.gl.deleteVertexArray(this.oneDegreePaddingVao);
+        this.gl.deleteVertexArray(this._padding3dOneDegreeVao);
+        this.gl.deleteVertexArray(this._bigPadding3dFlatVAO);
+        // delete programs
         CircleCache2D.release(globe);
         CircleCache3D.release(globe);
+        LinesColorInstancedFlatCache.release(globe);
+        CirclePadding3DCache.release(globe);
+        LineOnGlobeCache.release(globe);
         this.textPlugin?.free();
-        // free buffer managers
+
         this._isFreed = true;
     }
 
@@ -285,9 +291,9 @@ class RangeRings {
     // API
 
     /**
-     * @method updateCentersXY @param { Array < { centerID, x, y } >} items 
+     * @method updateCentersCoordinate @param { Array < { centerID, long,lat } >} items 
     */
-    updateCentersXY(items) {
+    updateCentersCoordinate(items) {
         // Algorithm
         /**
          * 1. ask centerRingAccount for existing rings COORDINATE RELATED KEYS
@@ -295,7 +301,7 @@ class RangeRings {
          * 3. update buffer orchestators
          */
 
-        this._ringAccount.updateCentersXY(items);
+        this._ringAccount.updateCentersCoordinate(items);
         const { globe,
             bufferOrchestrator, bufferManagersCompMap,
             paddingBufferOrchestrator, bufferManagersCompMapPadding
@@ -317,7 +323,7 @@ class RangeRings {
     /**
      * @method insertBulk
      * @typedef { Array < { ringID, radius, padding } >} rings
-     * @param { Array < centerID: string, x: number, y: number, stepAngle: number, rgba: [4 numbers], rings: rings, hide, textHide } items
+     * @param { Array < centerID: string, long: number, lat: number, stepAngle: number, rgba: [4 numbers], rings: rings, hide, textHide } items
     */
     insertBulk(items) {
         // Algorithm
@@ -483,14 +489,14 @@ class RangeRings {
         const centerItem = this._ringAccount.getCenter(centerID);
         if (centerItem === undefined) throw new Error("Center not found");
         const findPointByPolar = globe.Math.FindPointByPolar;
-        const { x, y, stepAngle, rgba, rings, hide = 0, textHide = 0 } = centerItem;
+        const { long, lat, stepAngle, rgba, rings, hide = 0, textHide = 0 } = centerItem;
         const result = [];
         const color = hide === 1 ? new Float32Array([0, 0, 0, 0]) : new Float32Array(rgba)
         for (const { ringID, radius, padding } of rings) {
             let azimuthAngle = 0;
             while (azimuthAngle < 360) {
-                const circlePoint = globe.Math.FindPointByPolar(x, y, radius, azimuthAngle); // long lat
-                const paddingPoint = globe.Math.FindPointByPolar(x, y, radius - padding, azimuthAngle); // long lat
+                const circlePoint = globe.Math.FindPointByPolar(long, lat, radius, azimuthAngle); // long lat
+                const paddingPoint = globe.Math.FindPointByPolar(long, lat, radius - padding, azimuthAngle); // long lat
                 result.push({
                     key: ringBigPaddingKeyMethod(centerID, ringID, azimuthAngle),
                     circlePoint: new Float32Array(globe.api_GetMercator2DPoint(circlePoint.long, circlePoint.lat)),
@@ -513,18 +519,15 @@ class RangeRings {
         const centerItem = this._ringAccount.getCenter(centerID);
         if (centerItem === undefined) throw new Error("Center not found");
 
-        const { x, y, stepAngle, rgba, rings, hide = 0, textHide = 0 } = centerItem;
-
-        const long = x;
-        const lat = y;
+        const { long, lat, stepAngle, rgba, rings, hide = 0, textHide = 0 } = centerItem;
         const centerCoords3d = globe.api_GetCartesian3DPoint(long, lat, 0, 0);
 
         const result = [];
 
         for (const { ringID, radius, padding } of rings) {
             const key = ringKeyMethod(centerID, ringID);
-            const centerCoords2dflat = centerCoords2dflatDataCreatorWithRadius(globe, x, y, radius, { edgeCount: _circleFlatEdgeCount });
-            const centerCoords2dflatForPadding = centerCoords2dflatDataCreatorWithRadius(globe, x, y, radius - padding / 3, { edgeCount: _circleFlatEdgeCount });
+            const centerCoords2dflat = centerCoords2dflatDataCreatorWithRadius(globe, long, lat, radius, { edgeCount: _circleFlatEdgeCount });
+            const centerCoords2dflatForPadding = centerCoords2dflatDataCreatorWithRadius(globe, long, lat, radius - padding / 3, { edgeCount: _circleFlatEdgeCount });
             result.push({
                 key,
                 centerCoords3d,
@@ -544,7 +547,7 @@ class RangeRings {
     __reconstructCentralPaddingProperties(centerID) {
         const centerItem = this._ringAccount.getCenter(centerID);
         if (centerItem === undefined) throw new Error("Center not found");
-        const { x, y, stepAngle, rgba, rings, hide = 0, textHide = 0 } = centerItem;
+        const { long, lat, stepAngle, rgba, rings, hide = 0, textHide = 0 } = centerItem;
         const result = [];
         for (const { ringID, } of rings) {
             let angle = 0;

package/rangerings/rangeringangletext.js

@@ -94,10 +94,10 @@ export default class RangeRingAngleText {
 
 
     /**
-     * @param {Array<{centerID,stepAngle, x, y, rings>} ringDatas
+     * @param {Array<{centerID,stepAngle, long,lat, rings>} ringDatas
      * centerID: string | ObjectArray fidKey de kullanilir
      * stepAngle: number | 0-360 arasinda
-     * x, y: number | merkez koordinatlari lat long radian. Globe icin dereceye iceride cevrilir
+     * long,lat: number | merkez koordinatlari lat long radian. Globe icin dereceye iceride cevrilir
      * rings: Array<{radius: number}> | En buyuk halkaya centik acilari yazilir, Sonraki adim yaricaplarin uzunlugunu yazdirmak
      * 
      * eger bir centerID zaten var ise: Onceki noktalar dusurulur ve yeniden eklenir
@@ -117,20 +117,20 @@ export default class RangeRingAngleText {
             attribs: []
         }
 
-        for (const { centerID, x, y, rings, stepAngle, hide = ENUM_HIDE.SHOW, textHide = ENUM_TEXT_HIDE.SHOW } of ringDatas) {
+        for (const { centerID, long, lat, rings, stepAngle, hide = ENUM_HIDE.SHOW, textHide = ENUM_TEXT_HIDE.SHOW } of ringDatas) {
             if (this._centerCollection.has(centerID)) {
                 this._fillDeleteBucket(centerID, deleteBucket);
             }
             const maxRadius = rings.reduce((acc, { radius }) => Math.max(acc, radius), 0);
             const textHide_ = _hideAll ? ENUM_TEXT_HIDE.HIDE : textHide;
             const show = hide !== ENUM_HIDE.HIDE && textHide_ === ENUM_TEXT_HIDE.SHOW;
-            if (show) this._appendCircle(x, y, maxRadius, stepAngle, centerID, addBucket);
+            if (show) this._appendCircle(long, lat, maxRadius, stepAngle, centerID, addBucket);
             this._centerCollection.set(centerID,
                 new Map([
                     ["stepAngle", stepAngle],
                     ["maxRadius", maxRadius],
-                    ["x", x],
-                    ["y", y],
+                    ["long", long],
+                    ["lat", lat],
                     ["hide", hide],
                     ["textHide", textHide_]
                 ]));
@@ -151,11 +151,11 @@ export default class RangeRingAngleText {
             coordsZ: [],
             attribs: []
         }
-        for (const { centerID, x, y } of centerDatas) {
+        for (const { centerID, long, lat } of centerDatas) {
             if (this._centerCollection.has(centerID)) {
                 const centerMap = this._centerCollection.get(centerID);
-                centerMap.set("x", x);
-                centerMap.set("y", y);
+                centerMap.set("long", long);
+                centerMap.set("lat", lat);
                 const hide = centerMap.get("hide");
                 const textHide = centerMap.get("textHide");
                 const isHidden = hide === ENUM_HIDE.HIDE || textHide === ENUM_TEXT_HIDE.HIDE;
@@ -163,7 +163,7 @@ export default class RangeRingAngleText {
                 const maxRadius = centerMap.get("maxRadius");
                 const stepAngle = centerMap.get("stepAngle");
                 // long, lat, radius, step, centerID, outBucket
-                this._appendCircle(x, y, maxRadius, stepAngle, centerID, updateBucket);
+                this._appendCircle(long, lat, maxRadius, stepAngle, centerID, updateBucket);
 
             }
         }
@@ -209,7 +209,7 @@ export default class RangeRingAngleText {
             if (!isHidden && !show) {
                 this._fillDeleteBucket(centerID, deleteBucket);
             } else if (isHidden && show) {
-                this._appendCircle(centerMap.get("x"), centerMap.get("y"), centerMap.get("maxRadius"), centerMap.get("stepAngle"), centerID, addBucket);
+                this._appendCircle(centerMap.get("long"), centerMap.get("lat"), centerMap.get("maxRadius"), centerMap.get("stepAngle"), centerID, addBucket);
             }
             if (hide !== null) centerMap.set("hide", hide);
             if (textHide !== null) centerMap.set("textHide", textHide);
@@ -267,11 +267,11 @@ export default class RangeRingAngleText {
             const hideText = centerMap.get("textHide");
             const isHidden = hideText === ENUM_TEXT_HIDE.HIDE;
             if (isHidden) {
-                const x = centerMap.get("x");
-                const y = centerMap.get("y");
+                const long = centerMap.get("long");
+                const lat = centerMap.get("lat");
                 const maxRadius = centerMap.get("maxRadius");
                 const stepAngle = centerMap.get("stepAngle");
-                this._appendCircle(x, y, maxRadius, stepAngle, centerID, addBucket);
+                this._appendCircle(long, lat, maxRadius, stepAngle, centerID, addBucket);
                 centerMap.set("hide", ENUM_HIDE.SHOW);
                 centerMap.set("textHide", ENUM_TEXT_HIDE.SHOW);
             }
@@ -326,7 +326,7 @@ export default class RangeRingAngleText {
             this.__realCoords(long, lat, radius, step, centerID, outBucket);
         } else if (currentCompassMode == COMPASS_MODES.COMPASS) {
             // throw new Error("Not implemented yet");
-            this.__compassCoords(long, lat, radius, step, centerID, outBucket);
+            // this.__compassCoords(long, lat, radius, step, centerID, outBucket);
         }
 
     }
@@ -334,7 +334,7 @@ export default class RangeRingAngleText {
     __realCoords(long, lat, radius, stepAngle, centerID, outBucket) {
         const { coords, coordsZ, attribs } = outBucket;
 
-        const coords_ = realCircle(long, lat, radius, stepAngle / Degree);
+        const coords_ = realCircle(this.globe, long, lat, radius, stepAngle);
         {   // add 0
             const { long, lat } = coords_[0];
             coords.push(long, lat);
@@ -356,7 +356,7 @@ export default class RangeRingAngleText {
             // fidkey is the key
             attribs.push({
                 "__fid__": key,
-                "aci": aci.toString()
+                "aci": (360 - aci).toString().padStart(3, '0')
             })
             aci += stepAngle;
         }
@@ -376,7 +376,7 @@ export default class RangeRingAngleText {
         {   // add 0
             const x = Dlong + Degree * (radianRadius * Math.cos(Math.PI / 2));
             const y = Dlat + Degree * (radianRadius * Math.sin(Math.PI / 2) * scale);
-            coords.push(x, y);
+            coords.push(long, lat);
             coordsZ.push(0);
             const key = this._key(centerID, 0);
             attribs.push({
@@ -391,7 +391,7 @@ export default class RangeRingAngleText {
             if (aci >= 360) break;
             const x = Dlong + Degree * (radianRadius * Math.cos(cstep));
             const y = Dlat + Degree * (radianRadius * Math.sin(cstep) * scale);
-            coords.push(x, y);
+            coords.push(long, lat);
             coordsZ.push(0);
             const key = this._key(centerID, i++);
             attribs.push({
@@ -437,11 +437,11 @@ export default class RangeRingAngleText {
         for (const [centerID, centerMap] of this._centerCollection) {
             const isHidden = centerMap.get("hide") === ENUM_HIDE.HIDE || centerMap.get("textHide") === ENUM_TEXT_HIDE.HIDE;
             if (isHidden) continue;
-            const x = centerMap.get("x");
-            const y = centerMap.get("y");
+            const long = centerMap.get("long");
+            const lat = centerMap.get("lat");
             const maxRadius = centerMap.get("maxRadius");
             const stepAngle = centerMap.get("stepAngle");
-            this._appendCircle(x, y, maxRadius, stepAngle, centerID, updateBucket);
+            this._appendCircle(long, lat, maxRadius, stepAngle, centerID, updateBucket);
         }
         this._updateData(updateBucket, CSObjectArrayUpdateTypes.UPDATE);
     }
@@ -462,28 +462,14 @@ const readCoords = (long, lat, radius, stepAngle) => {
 
 const R = 6371.0;
 
-const flatCircle = (longitude, latitude, radius, paddingAngles) => {
-    const degree = radius / R;
-    const points = [];
-
-    for (const angle of paddingAngles) {
-        const x = longitude + degree * Math.cos(angle);
-        const y = latitude + degree * Math.sin(angle);
-        points.push({ long: x, lat: y });
-    }
-    return points;
-}
-
-const realCircle = (longitude, latitude, radius, stepAngle) => {
-    const R = 6371000;
 
-    const degree = radius / R;
-    const points = [];
-    for (let step = Math.PI / 2.0; step > -Math.PI * 1.5; step -= stepAngle) {
-        const y = latitude + degree * Math.sin(step);
-        const x = longitude + degree * Math.cos(step) / Math.cos(y);
-
-        points.push({ long: Degree * x, lat: Degree * y });
-    }
-    return points;
+const realCircle = (globe, longitude, latitude, radius, stepAngle) => {
+    const pointsLongLat = globe.Math.GetEllipseGeo(
+        longitude,
+        latitude,
+        radius,
+        radius,
+        0,
+        stepAngle);
+    return pointsLongLat;
 }

package/{rangerings-2 → rangerings}/ring-account.js

@@ -23,13 +23,13 @@ class RingAccount {
     }
 
     /**
-     * @typedef {centerID, x, y, rings} centeralItem
+     * @typedef {centerID, long,lat, rings} centeralItem
      * 
      */
     insertCenter(centeralItem) {
         this._centeralMap.set(centeralItem.centerID, {
-            x: centeralItem.x,
-            y: centeralItem.y,
+            long: centeralItem.long,
+            lat: centeralItem.lat,
             rings: centeralItem.rings,
             rgba: new Float32Array(centeralItem.rgba),
             hide: centeralItem.hide,
@@ -43,12 +43,12 @@ class RingAccount {
         return this._centeralMap.get(centerID);
     }
 
-    updateCentersXY(items) {
-        for (const { centerID, x, y } of items) {
+    updateCentersCoordinate(items) {
+        for (const { centerID, long, lat } of items) {
             const center = this.getCenter(centerID);
             if (center) {
-                center.x = x;
-                center.y = y;
+                center.long = long;
+                center.lat = lat;
             }
         }
     }

package/timetracks/program.js

@@ -786,7 +786,7 @@ export default class TrackGlowLineProgram {
             gl.uniform3fv(_lineProgram.uTranslate, uTranslate);
 
             gl.bindVertexArray(_lineProgram.vao);
-            gl.drawArrays(gl.LINES, 0, this._totalLength);
+            gl.drawArrays(gl.LINES, 0, this._totalLength); // TODO: line_strip with thombstone to reduce buffer size in half
             gl.drawBuffers([
                 gl.COLOR_ATTACHMENT0,
                 gl.NONE

package/write-text/context-text.js

@@ -66,7 +66,7 @@ export class ContextTextWriter {
 
 
 
-    insertText(key, lat, long, text,) { // TODO: Make it more generic
+    insertText(key, lat, long, text,) {
         this.itemMap.set(key, { lat, long, text });
     }
 

package/write-text/context-text3.js

@@ -22,6 +22,8 @@ export class ContextTextWriter3 {
             opacity: 1.0,
             zMode: CSZMode.Z_GROUND_PERVERTEX,
         },
+        xOffset = 0,
+        yOffset = 0,
         doDraw = true,
         textAdaptor = null,
         coordinatesAdaptor = null,
@@ -29,8 +31,7 @@ export class ContextTextWriter3 {
         opacityAdaptor = null,
         angleAdaptor = null,
         angleOnSphere = false,
-        xOffset = 0,
-        yOffset = 0,
+        positionAdaptor = (item, i, container, properties) => "left",
         zoomLevelAdaptor = (zoomLevel) => (item) => {
             return {
                 opacityMultiplier: 1,
@@ -49,7 +50,7 @@ export class ContextTextWriter3 {
         this.keyAdaptor = keyAdaptor;
 
         this.zoomLevelAdaptor = zoomLevelAdaptor;
-
+        this.positionAdaptor = positionAdaptor;
         this.opacityAdaptor = opacityAdaptor ? opacityAdaptor : () => 1;
         this.angleOnSphere = angleOnSphere;
         if (angleAdaptor) {
@@ -104,7 +105,7 @@ export class ContextTextWriter3 {
         const zoomLevel = globe.api_GetCurrentLODWithDecimal();
         const zoomAdaptor = this.zoomLevelAdaptor(zoomLevel);
         for (const [key, item] of itemMap) {
-            const { lat, long, text, opacity = null, angle = null, payload } = item;
+            const { lat, long, text, opacity = null, angle = null, payload, position } = item;
             const { x, y } = globe.api_GetScreenPointFromGeo(
                 {
                     long: long,
@@ -116,7 +117,7 @@ export class ContextTextWriter3 {
             const { opacityMultiplier, sizeMultiplier } = zoomAdaptor(payload);
             const o = (opacity === null ? opacity_ : opacity * opacity_) * opacityMultiplier;
             textFont.size = sizeMultiplier * textSize;
-
+            textFont.position = position;
             if (x !== null && y !== null) globe.api_DrawContextTextMultiLine(text, textFont, o, { x: x + xOffset, y: y - yOffset }, angleIsOn, angle);
         }
         textFont.size = textSize;
@@ -154,7 +155,8 @@ export class ContextTextWriter3 {
         };
         const opacity = this.opacityAdaptor(item, id, container, properties);
         const angle = this.angleAdaptor(item, id, container, properties);
-        this.itemMap.set(key, { long: coords.long, lat: coords.lat, text, opacity, angle, payload: item });
+        const position = this.positionAdaptor(item, id, container, properties);
+        this.itemMap.set(key, { long: coords.long, lat: coords.lat, text, opacity, angle, payload: item, position });
     }
 
     clear() {