@pirireis/webglobeplugins 0.0.10 → 0.1.1

package/package.json

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

package/programs/rings/distancering/circlepaddingfreeangleprogram.js

@@ -33,6 +33,7 @@ out vec4 v_color;
 void main() {   
     if( flag == 1.0 || radius == 0.0 ) return; // 1.0 is hide 
     v_color = color;
+    if ( pad_angle == 0.0 ) v_color.rgb += 0.2;
     gl_PointSize = 2.0;
 
     float odd = mod(float(gl_VertexID), 2.0);
@@ -50,8 +51,8 @@ void main() {
     if ( compass == 1 ){
         limp = circleLimpFromLongLatRadCenterMercatorCompass(center , radius_, angle);
     } else {
-        limp = circleLimpFromLongLatRadCenterMercatorRealDistancePadding(center, radius_, angle);
-        // limp = circleLimpFromLongLatRadCenterMercatorRealDistance(center, radius_, angle);
+        // limp = circleLimpFromLongLatRadCenterMercatorRealDistancePadding(center, radius_, angle);
+        limp = circleLimpFromLongLatRadCenterMercatorRealDistance(center, radius_, angle);
     }
     v_limp = limp;
     gl_Position = mercatorXYTo2DPoint(limp);
@@ -269,7 +270,8 @@ export class BufferManager extends BufferOffsetManager {
     updateCentersHide(data) {
         const { gl, buffer } = this;
         const items = [];
-        for (const { centerID, hide } of data) {
+        for (const { centerID, hide = null } of data) {
+            if (hide === null) continue;
             const block = new Float32Array([hide]);
             const center = this._centerMaps.get(centerID);
             if (!center) continue;

package/programs/rings/distancering/circlepaddysharedbuffer.js

@@ -227,7 +227,8 @@ export default class {
     updateCentersHide(data) {
         const { gl, buffer } = this;
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-        for (let { centerID, hide } of data) {
+        for (let { centerID, hide = null } of data) {
+            if (hide === null) continue;
             const rings = this._centerMap.get(centerID).get("rings");
             for (let i = 0; i < rings.length; i++) {
                 const offset = this._ringOffsets.get(rings[i]);

package/programs/rings/distancering/paddyflatprogram.js

@@ -51,8 +51,8 @@ void main() {
     if ( compass == 1 ){
         limp = circleLimpFromLongLatRadCenterMercatorCompass(center , radius_, angle);
     } else {
-        limp = circleLimpFromLongLatRadCenterMercatorRealDistancePadding(center, radius_, angle);
-        // limp = circleLimpFromLongLatRadCenterMercatorRealDistance(center, radius_, angle);
+        // limp = circleLimpFromLongLatRadCenterMercatorRealDistancePadding(center, radius_, angle);
+        limp = circleLimpFromLongLatRadCenterMercatorRealDistance(center, radius_, angle);
     }
     v_limp = limp;
     gl_Position = mercatorXYTo2DPoint(limp);

package/rangerings/enum.js

@@ -0,0 +1,7 @@
+
+export const ENUM_HIDE = Object.freeze({ SHOW: 0, HIDE: 1, HIDE_1_DEGREE_PADDINGS: 2 });
+export const ENUM_TEXT_HIDE = Object.freeze({ SHOW: 0, HIDE: 1 });
+export const COMPASS_MODES = Object.freeze({
+    COMPASS: 1,
+    REAL: 0,
+});

package/rangerings/index.js

@@ -1,3 +1,3 @@
-import RangeRings, { ENUM_HIDE } from './rangerings';
-
-export { RangeRings, ENUM_HIDE };
+import RangeRings from './rangerings';
+import { ENUM_HIDE, ENUM_TEXT_HIDE, COMPASS_MODES } from './enum';
+export { RangeRings, ENUM_HIDE, ENUM_TEXT_HIDE, COMPASS_MODES };

package/rangerings/rangeringangletext.js

@@ -0,0 +1,434 @@
+
+import {
+    CSGlobe,
+    CSObjectTypes,
+    CSIconTypes,
+    CSObjectArrayUpdateTypes,
+    GlobeManager
+} from "@pirireis/webglobe";
+import { ENUM_HIDE, ENUM_TEXT_HIDE, COMPASS_MODES } from "./enum";
+
+
+const Degree = 180 / Math.PI;
+
+
+
+const fidKey = "__fid__";
+
+
+const object = {
+    "displayName": "CompassRose",
+    "layerType": 3,
+
+    "wkbGeom": null,
+    "wfsLayerName": null,
+    "objectType": "point",
+    "bbox": null,
+    "startLod": 2,
+    "endLod": 30,
+    "continuousLOD": true,
+    "MVTXYZName": "hd_seyp",
+    "rasterize": false,
+}
+
+
+export default class RangeRingAngleText {
+    constructor(globe, { style = null, flatCompassMode = COMPASS_MODES.REAL } = {}) {
+        this.globe = globe;
+        this.ObjectArray = globe.ObjectArray;
+
+        this._flatCompassMode = flatCompassMode;
+        this._lastImplicitCompassMode = this.__implicitCompassMode();
+        if (style) {
+            this.style = style;
+        } else {
+            this.style = this.ObjectArray.GetDefaultStyle();
+            const { labels } = this.style;
+            const label = labels[0];
+            label.offset = { x: 0, y: 0 };
+            label.fontFamily.hollowWidth = 1;
+            label.vAlignment = 2;
+            label.hAlignment = 2;
+            label.size = 17;
+            // this.style.filter = [
+            //     {
+            //         rule: ["any", ["<", "startLod", "LOD"]],
+            //         name: "startLODRule",
+            //         style: {
+            //             opacity: 0
+            //         }
+
+            //     }
+            // ];
+        }
+
+        this.style.labels[0].text = "`${aci}`"
+        this.style.fidKey = fidKey;
+        this.object = Object.assign({}, object, { style: this.style });
+
+        this._centerCollection = new Map();
+        // new inner MAP params
+        // hide
+        // textHide
+
+        this.ObjectArray.Add(this.object);
+
+    }
+
+
+    setCompass(mode) {
+        if (mode === this._flatCompassMode) return;
+        this._flatCompassMode = mode;
+        this.__onCompassChange();
+    }
+
+
+    free() {
+        this.flush();
+        this.ObjectArray.RemoveObject(this.object);
+    }
+
+
+
+    /**
+     * @param {Array<{centerID,stepAngle, x, y, 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
+     * 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
+     * 
+     * */
+    insertBulk(ringDatas) {
+
+        const addBucket = {
+            coords: [],
+            coordsZ: [],
+            attribs: []
+        }
+
+        const deleteBucket = {
+            coords: [],
+            coordsZ: [],
+            attribs: []
+        }
+
+        for (const { centerID, x, y, rings, stepAngle, hide = ENUM_HIDE.SHOW, textHide = ENUM_TEXT_HIDE.SHOW } of ringDatas) {
+            if (this._centerCollection.has(centerID)) {
+                const stepAngle = this._centerCollection.get(centerID).get("stepAngle");
+                this._fillDeleteBucket(centerID, stepAngle, deleteBucket);
+            }
+            const maxRadius = rings.reduce((acc, { radius }) => Math.max(acc, radius), 0);
+            this._appendCircle(x, y, maxRadius, stepAngle, centerID, addBucket);
+            this._centerCollection.set(centerID,
+                new Map([
+                    ["stepAngle", stepAngle],
+                    ["maxRadius", maxRadius],
+                    ["x", x],
+                    ["y", y],
+                    ["hide", hide],
+                    ["textHide", textHide]
+                ]));
+        }
+
+        if (deleteBucket.coords.length > 0) this._updateData(deleteBucket, CSObjectArrayUpdateTypes.DELETE);
+        if (addBucket.coords.length > 0) this._updateData(addBucket, CSObjectArrayUpdateTypes.ADD);
+
+    }
+
+    /**
+     * @param {Array<{centerID, x,y}>} centerDatas
+     * aci ve radiuslarin tutulmasi gereklidir. 
+     * */
+    updateCentersXY(centerDatas) {
+        const updateBucket = {
+            coords: [],
+            coordsZ: [],
+            attribs: []
+        }
+        for (const { centerID, x, y } of centerDatas) {
+            if (this._centerCollection.has(centerID)) {
+                const centerMap = this._centerCollection.get(centerID);
+                const maxRadius = centerMap.get("maxRadius");
+                const stepAngle = centerMap.get("stepAngle");
+                // long, lat, radius, step, centerID, outBucket
+                this._appendCircle(x, y, maxRadius, stepAngle, centerID, updateBucket);
+                centerMap.set("x", x);
+                centerMap.set("y", y);
+
+            }
+        }
+        for (const attribs of updateBucket.attribs) {
+            delete attribs["aci"];
+        }
+        if (updateBucket.coords.length > 0) {
+            this._updateData(updateBucket, CSObjectArrayUpdateTypes.UPDATE);
+        }
+    }
+
+
+
+    /**
+     * 
+     * @param {Array<{centerID:string, hide: bool}} centerHides 
+     */
+    updateCentersHide(centerHides) {
+        const addBucket = {
+            coords: [],
+            coordsZ: [],
+            attribs: []
+        };
+        const deleteBucket = {
+            coords: [],
+            coordsZ: [],
+            attribs: []
+        };
+        for (const { centerID, textHide = null, hide = null } of centerHides) {
+            if (!this._centerCollection.has(centerID)) continue;
+            const centerMap = this._centerCollection.get(centerID);
+
+            const isHidden = centerMap.get("hide") === ENUM_HIDE.HIDE || centerMap.get("textHide") === ENUM_TEXT_HIDE.HIDE;
+
+            const _hide = hide !== null ? hide : centerMap.get("hide");
+            const _textHide = textHide !== null ? textHide : centerMap.get("textHide");
+
+            const show = _hide !== ENUM_HIDE.HIDE && _textHide === ENUM_TEXT_HIDE.SHOW;
+            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);
+            }
+            if (hide !== null) centerMap.set("hide", hide);
+            if (textHide !== null) centerMap.set("textHide", textHide);
+        }
+        if (deleteBucket.coords.length > 0) this._updateData(deleteBucket, CSObjectArrayUpdateTypes.DELETE);
+        if (addBucket.coords.length > 0) this._updateData(addBucket, CSObjectArrayUpdateTypes.ADD);
+    }
+
+
+    // TODO : Implement this
+    deleteCenters(centerIDs) {
+        const deleteBucket = {
+            coords: [],
+            coordsZ: [],
+            attribs: []
+        }
+        for (const centerID of centerIDs) {
+            if (this._centerCollection.has(centerID)) {
+                this._fillDeleteBucket(centerID, deleteBucket);
+                this._centerCollection.delete(centerID);
+            }
+        }
+        this._updateData(deleteBucket, CSObjectArrayUpdateTypes.DELETE);
+    }
+
+
+
+
+
+    flush() {
+        const data = {
+            coords: [],
+            coordsZ: [],
+            attribs: []
+        };
+        this._idCollector = new Set();
+        this.ObjectArray.SetData(this.object, data);
+    }
+
+    //------------------GLOBE EVENTS------------------//
+
+    setGeometry() {
+        this.__onCompassChange();
+    }
+
+
+    //------------------PRIVATE METHODS------------------//
+
+    __implicitCompassMode() {
+        const is3D = this.globe.api_GetCurrentGeometry() === 0;
+        if (is3D) {
+            return COMPASS_MODES.REAL;
+        } else {
+            return this._flatCompassMode;
+        }
+    }
+
+
+    __onCompassChange() {
+        if (this._lastImplicitCompassMode === this.__implicitCompassMode()) return;
+        this._lastImplicitCompassMode = this.__implicitCompassMode();
+        this._updateAll();
+    }
+
+
+
+    // TODO: compass ve gercek mesafeye gore farkli hesaplamalar yapilacak __implicitCompassMode
+    _appendCircle(long, lat, radius, step, centerID, outBucket) {
+        const currentCompassMode = this.__implicitCompassMode();
+        if (currentCompassMode == COMPASS_MODES.REAL) {
+            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);
+        }
+
+    }
+
+    __realCoords(long, lat, radius, stepAngle, centerID, outBucket) {
+        const { coords, coordsZ, attribs } = outBucket;
+
+        const coords_ = realCircle(long, lat, radius, stepAngle / Degree);
+        {   // add 0
+            const { long, lat } = coords_[0];
+            coords.push(long, lat);
+            coordsZ.push(0);
+            const key = this._key(centerID, 0);
+            // fidkey is the key
+            attribs.push({
+                "__fid__": key,
+                "aci": "K"
+            });
+        }
+        let aci = stepAngle;
+        const cutAway = 0 == (360 % stepAngle) ? 1 : 0;
+        for (let i = 1; i < coords_.length - cutAway; i++) {
+            const { long, lat } = coords_[i];
+            coords.push(long, lat);
+            coordsZ.push(0);
+            const key = this._key(centerID, i);
+            // fidkey is the key
+            attribs.push({
+                "__fid__": key,
+                "aci": aci.toString()
+            })
+            aci += stepAngle;
+        }
+    }
+
+
+    __compassCoords(long, lat, radius, stepAngle, centerID, outBucket) {
+
+        const Dlong = Degree * long;
+        const Dlat = Degree * lat;
+
+        const R = 6371.0 * 1000;
+        const { coords, coordsZ, attribs } = outBucket;
+        const { globe } = this;
+        const radianRadius = radius / R;
+        const scale = Math.cos(lat);
+        {   // 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);
+            coordsZ.push(0);
+            const key = this._key(centerID, 0);
+            attribs.push({
+                "__fid__": key,
+                "aci": "K"
+            })
+        }
+        let aci = stepAngle;
+        let i = 1;
+        const RStep = stepAngle / Degree;
+        for (let cstep = Math.PI / 2 - RStep; cstep > -Math.PI * 1.5; cstep -= RStep) {
+            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);
+            coordsZ.push(0);
+            const key = this._key(centerID, i++);
+            attribs.push({
+                "__fid__": key,
+                "aci": Math.floor(aci).toString()
+            })
+            aci += stepAngle;
+        }
+    }
+
+
+    _updateData(bucket, mode) {
+        this.ObjectArray.UpdateData(this.object, mode, [bucket], { attribs: false, icon: false, text: false });
+    }
+
+
+    _key(centerRingKey, limpIndex) {
+        return `${centerRingKey}_${limpIndex}`;
+    }
+
+    _fillDeleteBucket(centerID, outDeleteBucket) {
+
+        const centerMap = this._centerCollection.get(centerID);
+        const stepAngle = centerMap.get("stepAngle");
+        const { coords, coordsZ, attribs } = outDeleteBucket;
+        let i = 0;
+        for (let aci = 0; aci < 360; aci += stepAngle) {
+            const key = this._key(centerID, i++);
+            coords.push(0, 0);
+            coordsZ.push(0);
+            attribs.push({
+                "__fid__": key,
+            });
+        }
+    }
+
+    _updateAll() {
+        const updateBucket = {
+            coords: [],
+            coordsZ: [],
+            attribs: []
+        }
+        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 maxRadius = centerMap.get("maxRadius");
+            const stepAngle = centerMap.get("stepAngle");
+            this._appendCircle(x, y, maxRadius, stepAngle, centerID, updateBucket);
+        }
+        this._updateData(updateBucket, CSObjectArrayUpdateTypes.UPDATE);
+    }
+
+}
+
+
+const readCoords = (long, lat, radius, stepAngle) => {
+
+    const result = []
+    const degree = radius / R;
+
+    return result;
+}
+
+
+
+
+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;
+}

package/rangerings/rangerings.js

@@ -1,8 +1,9 @@
 import { rings } from "../programs";
-
+import { COMPASS_MODES } from "./enum";
 import { PaddingFreeAngleCache } from "../programs/rings/distancering";
-const { CircleFlatProgram, PaddyFlatProgram, CirclePaddySharedBuffer } = rings;
 
+import RangeRingAngleText from "./rangeringangletext";
+const { CircleFlatProgram, PaddyFlatProgram, CirclePaddySharedBuffer } = rings;
 
 /**
  * @typedef RangeRingData
@@ -18,14 +19,13 @@ const { CircleFlatProgram, PaddyFlatProgram, CirclePaddySharedBuffer } = rings;
  */
 
 
-export const ENUM_HIDE = Object.freeze({ SHOW: 0, HIDE: 1, HIDE_1_DEGREE_PADDINGS: 2 });
-
 
 export default class {
 
-    constructor(id, oneDegreePadding = true, compass = 1, circleEdgeCount = 360) {
+    constructor(id, { oneDegreePadding = true, compass = COMPASS_MODES.COMPASS, circleEdgeCount = 360, showNumbers = true } = {}) {
         this.id = id;
         this.compass = compass;
+        this._showNumbers = showNumbers;
         this.circleEdgeCount = circleEdgeCount;
         this._onedegreepaddingOn = oneDegreePadding;
         this.bufferManager = null;
@@ -40,10 +40,13 @@ export default class {
         this.globe = globe;
         this.circleFlatProgram = new CircleFlatProgram(globe, gl);
         this.paddyFlatProgram = new PaddyFlatProgram(globe, gl);
-
         this.paddingFreeAngleProgram = PaddingFreeAngleCache.getProgram(globe);
+        if (this._showNumbers) {
+            this._textPlugin = new RangeRingAngleText(globe, { flatCompassMode: this.compass });
+        }
     }
 
+    // TODO: Add text free
     free() {
         this.circleFlatProgram.free();
         this.paddyFlatProgram.free();
@@ -53,6 +56,23 @@ export default class {
     }
 
 
+
+    // // TODO: Client should reinsert all data to be able to see numbers. Think Better Solution.
+    // setShowNumbers(showNumbers) {
+    //     this._showNumbers = showNumbers;
+    //     if (this._showNumbers) {
+    //         this._textPlugin = new RangeRingAngleText(this.globe);
+    //     } else {
+    //         this._textPlugin?.free();
+    //         this._textPlugin = null;
+    //     }
+    // }
+
+    setGeometry() {
+        this._textPlugin?.setGeometry();
+    }
+
+
     draw3D() {
         const { circleFlatProgram, paddyFlatProgram, paddingFreeAngleProgram, bufferManager, compass, gl, circleEdgeCount, paddingBufferManager } = this;
         // if (globe.api_GetCurrentGeometry() === 0) return; // do not draw in 3D mode
@@ -77,6 +97,7 @@ export default class {
      */
     setCampass(compass) {
         this.compass = compass;
+        this._textPlugin?.setCompass(compass);
     }
 
     initilizeBufferManager(initialRingCapacity, bufferDrawType) {
@@ -96,6 +117,7 @@ export default class {
 
         this.bufferManager.insertBulk(insertData);
         this.paddingBufferManager.insertBulk(items);
+        this._textPlugin?.insertBulk(items);
         this.globe.DrawRender();
     }
 
@@ -103,6 +125,7 @@ export default class {
     updateCentersXY(items) {
         this.bufferManager.updateCentersXY(items);
         this.paddingBufferManager.updateCentersXY(items);
+        this._textPlugin?.updateCentersXY(items);
         this.globe.DrawRender();
     }
 
@@ -119,6 +142,7 @@ export default class {
 
         this.bufferManager.removeCenters(centerIds);
         this.paddingBufferManager.removeCenters(centerIds);
+        this._textPlugin?.removeCenters(centerIds);
         // this.bufferManager.defrag();
         // this.paddingBufferManager.defrag();
         this.globe.DrawRender();
@@ -129,6 +153,7 @@ export default class {
     updateCentersHide(centerHides) {
         this.bufferManager.updateCentersHide(centerHides);
         this.paddingBufferManager.updateCentersHide(centerHides);
+        this._textPlugin?.updateCentersHide(centerHides);
         this.globe.DrawRender();
     }
 }

package/util/shaderfunctions/geometrytransformations.js

@@ -73,8 +73,6 @@ vec4 cartesian3DToGLPosition( vec3 position) {
 
 // pi / pole = 2 / R
 
-
-
 export const longLatRadToMercator = R + PI + `
 vec2 longLatRadToMercator( vec2 longLatRad) {
     float x = R * longLatRad.x;
@@ -94,7 +92,6 @@ vec3 longLatRadToCartesian3D( vec2 longLat) {
 `;
 
 
-
 // TODO: Make it precise. It doesnt use haversine formula. If this changes, change the formmula which calculates text position. 
 export const circleLimpFromLongLatRadCenterCartesian3D = R + `
 vec3 circleLimpFromLongLatRadCenterCartesian3D( vec2 center, float radius, float angle) {
@@ -109,17 +106,17 @@ vec3 circleLimpFromLongLatRadCenterCartesian3D( vec2 center, float radius, float
     }
 `;
 
-// TODO: Make it precise.
+// TODO: Make it precise. Y axis is not correct.
+
+// ln | tan [ (x/2) + (π/4) ] | + C
 export const circleLimpFromLongLatRadCenterMercatorRealDistance = `
 vec2 circleLimpFromLongLatRadCenterMercatorRealDistance(vec2 center, float radius, float angle){
-    
     float radius_radian =  radius / R;
     float lat = center.y - radius_radian * sin(angle);
-
     float scale = 1.0/abs( cos( lat ) );
+    float y =  log( tan( PI / 4.0 + lat / 2.0 ) ) * R;
     vec2 center_ = longLatRadToMercator(center);
     float x = center_.x + scale * radius * cos(angle);
-    float y = center_.y - scale * radius * sin(angle);
     return vec2(x, y);
 }
 `;