@pirireis/webglobeplugins 0.6.2 → 0.6.3

package/bearing-line/plugin.js

@@ -27,7 +27,12 @@ const constraintFloat = (x, lowerBound, upperBound) => {
  */
 
 export default class Plugin {
-
+    /**
+     * 
+     * @param {*} id 
+     * @param {Map<[K ,ContextTextWriter]} 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 } = {}) {
         this.id = id;

package/circle-line-chain/chain-list-map.js

@@ -9,6 +9,7 @@ export class ChainListMap {
         this._chainSideProperties = new Map();
         this._indexMap = new Map(); // hold list index of lastly updated nodes. on add delete goes empty
         this.keyMethod = keyMethod;
+
     }
 
     getChain(chainKey) {
@@ -171,12 +172,13 @@ export class ChainListMap {
      * @param {*} textWriterObjs 
      * @param {*} nodeKeys use nodeKeys on updateCoordinatesOnly
      */
-    textUpdate(chainKey, textWriterObjs) {
+    textUpdate(chainKey, textWriterObjs, dataPreAdaptor) {
         const chain = this._chainMap.get(chainKey);
+        const data = (dataPreAdaptor) ? chain.map(dataPreAdaptor) : chain;
         if (!chain) return;
         const properties = this._chainSideProperties.get(chainKey);
         textWriterObjs.forEach((writer) => {
-            writer.insertTextBulk(chain, properties);
+            writer.insertTextBulk(data, properties);
         });
 
     }

package/circle-line-chain/plugin.js

@@ -34,15 +34,24 @@ import { keyMethod } from "./util";
 const radian = Math.PI / 180;
 
 export class CircleLineChainPlugin {
-
-    constructor(id, { drawCircleOn = true, textContextWriterInjectionMap = new Map() } = {}) {
+    /**
+     * 
+     * @param {*} id 
+     * @param {Map<[key, ContextTextWriter3]} textContextWriterInjectionMap //import { ContextTextWriter3 } from "@pirireis/webglobeplugins/write-text/context-text3"; 
+     */
+    constructor(id, {
+        drawCircleOn = true,
+        textContextWriterInjectionMap = new Map(),
+        textDataPreAdaptor = null
+    } = {}) {
         this.id = id;
         this._textContextWriterInjectionMap = textContextWriterInjectionMap;
         this._textContextWriterInjectionMap.forEach((writer) => writer.setKeyAdaptor((v, i, c, properties) => v.__identity__));
         this._opacity = 1;
         this._chainListMap = new ChainListMap(keyMethod);
         this.bufferOrchestrator = new BufferOrchestrator({ capacity: 10 });
-        this._drawCircleOn = drawCircleOn
+        this._drawCircleOn = drawCircleOn;
+        this._textDataPreAdaptor = textDataPreAdaptor;
     }
 
     // init
@@ -262,8 +271,8 @@ export class CircleLineChainPlugin {
         for (const chainKey of chainKeys) {
             bufferKeys.push(...this._chainListMap.deleteChainAndReturnChainKeys(chainKey));
         }
-        this._updateTexts(chainKeys, this._textContextWriterInjectionMap.keys());
         this._textContextWriterInjectionMap.forEach((writer) => writer.deleteTextBulk(bufferKeys));
+        this._updateTexts(chainKeys, this._textContextWriterInjectionMap.keys());
         this.bufferOrchestrator.deleteBulk(bufferKeys, this.bufferManagersCompMap);
         this.globe.DrawRender();
     }
@@ -301,7 +310,7 @@ export class CircleLineChainPlugin {
     _updateTexts(chainKeys, textWriterIDs) {
         const textWriters = textWriterIDs.map((v) => this._textContextWriterInjectionMap.get(v));
         chainKeys.forEach((chainKey) => {
-            this._chainListMap.textUpdate(chainKey, textWriters);
+            this._chainListMap.textUpdate(chainKey, textWriters, this._textDataPreAdaptor);
         })
     }
 

package/compass-rose/compass-rose-padding-flat.js

@@ -14,7 +14,7 @@ export class PixelPaddingCompassPlugin {
         defaultProperties = {
             rgba: [1, 1, 1, 1],
             pixelRadiusBig: 250,
-            pixelRadiusSmall: 220
+            pixelRadiusSmall: 200
         },
         font = {
             name: 'Arial',

package/package.json

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

package/programs/two-d/pixel-padding-for-compass.js

@@ -18,10 +18,14 @@ vec3 coord_opacity(){
     float radius;
     float angle;
     if( gl_VertexID % 2 == 0){
-        if ( gl_VertexID % 60 == 0){
-            radius = pixel_radius_small;
+        if( gl_VertexID % 180 == 0){
+             radius = pixel_radius_small ;
+        }
+        else if ( gl_VertexID % 60 == 0){
+            float gap = (pixel_radius_big - pixel_radius_small) / 5.0;
+            radius =  pixel_radius_small + gap;
         } else if( gl_VertexID % 10 == 0) {
-            float gap = (pixel_radius_big - pixel_radius_small) / 4.0;
+            float gap = (pixel_radius_big - pixel_radius_small) / 2.0;
             radius =  pixel_radius_small + gap;
         } else {
             float gap = (pixel_radius_big - pixel_radius_small) * 0.75;
@@ -29,7 +33,7 @@ vec3 coord_opacity(){
         }
         angle = (float(gl_VertexID) / (${vertexCount}.0));
     } else {
-        if ( gl_VertexID % 60 == 1){
+        if ( gl_VertexID % 180 == 1){
             radius = pixel_radius_big + 10.0;
 
         } else {

package/rangerings/rangeringangletext.js

@@ -1,10 +1,6 @@
 
 import {
-    CSGlobe,
-    CSObjectTypes,
-    CSIconTypes,
     CSObjectArrayUpdateTypes,
-    GlobeManager
 } from "@pirireis/webglobe";
 import { ENUM_HIDE, ENUM_TEXT_HIDE, COMPASS_MODES } from "./enum";
 
@@ -64,16 +60,7 @@ export default class RangeRingAngleText {
         label.hAlignment = 2;
         label.size = 17;
         label.text = "`${aci}`"
-        // this.style.filter = [
-        //     {
-        //         rule: ["any", ["===", "aci", "K"]],
-        //         name: "startLODRule",
-        //         style: {
-        //             ...
-        //         }
-
-        //     }
-        // ];
+
         return style;
     }
 
@@ -259,9 +246,10 @@ export default class RangeRingAngleText {
         for (const [centerID, centerMap] of this._centerCollection) {
             const hide = centerMap.get("hide");
             const hideText = centerMap.get("textHide");
-            const isHidden = hide === ENUM_HIDE.HIDE || hideText === ENUM_TEXT_HIDE.HIDE;
+            centerMap.set("textHide", ENUM_TEXT_HIDE.HIDE);
+            if (hide === ENUM_HIDE.HIDE) continue;
+            const isHidden = hideText === ENUM_TEXT_HIDE.HIDE;
             if (!isHidden) this._fillDeleteBucket(centerID, deleteBucket);
-            centerMap.set("hide", ENUM_HIDE.HIDE);
         }
         this._updateData(deleteBucket, CSObjectArrayUpdateTypes.DELETE);
     }
@@ -275,8 +263,9 @@ export default class RangeRingAngleText {
         }
         for (const [centerID, centerMap] of this._centerCollection) {
             const hide = centerMap.get("hide");
+            if (hide === ENUM_HIDE.HIDE) continue;
             const hideText = centerMap.get("textHide");
-            const isHidden = hide === ENUM_HIDE.HIDE || hideText === ENUM_TEXT_HIDE.HIDE;
+            const isHidden = hideText === ENUM_TEXT_HIDE.HIDE;
             if (isHidden) {
                 const x = centerMap.get("x");
                 const y = centerMap.get("y");
@@ -292,29 +281,6 @@ export default class RangeRingAngleText {
 
 
 
-    showAllVisibleCircleText() {
-        this._hideAll = false;
-        const addBucket = {
-            coords: [],
-            coordsZ: [],
-            attribs: []
-        }
-        for (const [centerID, centerMap] of this._centerCollection) {
-            const hide = centerMap.get("hide");
-            const hideText = centerMap.get("textHide");
-            if (hide === ENUM_HIDE.HIDE) continue
-            const isHidden = hideText === ENUM_TEXT_HIDE.HIDE;
-            if (isHidden) {
-                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, addBucket);
-                centerMap.set("textHide", ENUM_TEXT_HIDE.SHOW);
-            }
-        }
-        if (addBucket.coords.length) this._updateData(addBucket, CSObjectArrayUpdateTypes.ADD);
-    }
 
     flush() {
         const data = {

package/write-text/context-text2.js

@@ -1,19 +1,5 @@
 import { CSZMode } from "@pirireis/webglobe";
 
-const defaultStyle = {
-    textFont: {
-        name: 'Arial',
-        textColor: '#FFFFFF', // beyaz
-        hollowColor: '#000000', // siyah
-        size: 12, // piksel
-        hollow: true,
-        bold: true,
-        italic: false,
-    },
-    opacity: 1.0,
-    zMode: CSZMode.Z_GROUND_PERVERTEX,
-}
-
 /**
  * TODOs:
  * 1) update all if initials change (propably need a context and a callback to iterate over data)
@@ -21,10 +7,33 @@ const defaultStyle = {
  * 3) extend the mechanic on 2 to other events
  */
 export class ContextTextWriter2 {
-    constructor(globe, { style = null, doDraw = true, textAdaptor = null, coordinatesAdaptor = null, keyAdaptor = null, opacityAdaptor = null, angleAdaptor = null, angleOnSphere = false } = {}) {
+    constructor(globe, {
+        style = {
+            textFont: {
+                name: 'Arial',
+                textColor: '#FFFFFF', // beyaz
+                hollowColor: '#000000', // siyah
+                size: 12, // piksel
+                hollow: true,
+                bold: true,
+                italic: false,
+            },
+            opacity: 1.0,
+            zMode: CSZMode.Z_GROUND_PERVERTEX,
+        },
+        doDraw = true,
+        textAdaptor = null,
+        coordinatesAdaptor = null,
+        keyAdaptor = null,
+        opacityAdaptor = null,
+        angleAdaptor = null,
+        angleOnSphere = false,
+        zoomLevelOpacityAdaptor = null,
+        zoomLevelSizeAdaptor = null,
+    } = {}) {
         this.globe = globe;
         this.itemMap = new Map();
-        this.style = style || defaultStyle;
+        this.style = style;
         this.doDraw = doDraw;
 
 
@@ -32,6 +41,9 @@ export class ContextTextWriter2 {
         this.coordinatesAdaptor = coordinatesAdaptor;
         this.keyAdaptor = keyAdaptor;
 
+        this.zoomLevelOpacityAdaptor = zoomLevelOpacityAdaptor;
+        this.zoomLevelSizeAdaptor = zoomLevelSizeAdaptor;
+
         this.opacityAdaptor = opacityAdaptor ? opacityAdaptor : () => 1;
         this.angleOnSphere = angleOnSphere;
         if (angleAdaptor) {
@@ -141,7 +153,7 @@ export class ContextTextWriter2 {
         };
         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 });
+        this.itemMap.set(key, { long: coords.long, lat: coords.lat, text, opacity, angle, data: item });
     }
 
     clear() {

package/write-text/context-text3.js

@@ -0,0 +1,174 @@
+import { CSZMode } from "@pirireis/webglobe";
+
+/**
+ * TODOs:
+ * 1) update all if initials change (propably need a context and a callback to iterate over data)
+ * 2) expose a mechanic to update text on zoom change
+ * 3) extend the mechanic on 2 to other events
+ */
+export class ContextTextWriter3 {
+    constructor(globe, {
+        style = {
+            textFont: {
+                name: 'Arial',
+                textColor: '#FFFFFF', // beyaz
+                hollowColor: '#000000', // siyah
+                size: 12, // piksel
+                hollow: true,
+                bold: true,
+                italic: false,
+            },
+            opacity: 1.0,
+            zMode: CSZMode.Z_GROUND_PERVERTEX,
+        },
+        doDraw = true,
+        textAdaptor = null,
+        coordinatesAdaptor = null,
+        keyAdaptor = null,
+        opacityAdaptor = null,
+        angleAdaptor = null,
+        angleOnSphere = false,
+        zoomLevelAdaptor = (zoomLevel) => (item) => {
+            return {
+                opacityMultiplier: 1,
+                sizeMultiplier: 1
+            }
+        }
+    } = {}) {
+        this.globe = globe;
+        this.itemMap = new Map();
+        this.style = style;
+        this.doDraw = doDraw;
+
+
+        this.textAdaptor = textAdaptor;
+        this.coordinatesAdaptor = coordinatesAdaptor;
+        this.keyAdaptor = keyAdaptor;
+
+        this.zoomLevelAdaptor = zoomLevelAdaptor;
+
+        this.opacityAdaptor = opacityAdaptor ? opacityAdaptor : () => 1;
+        this.angleOnSphere = angleOnSphere;
+        if (angleAdaptor) {
+            this.angleAdaptor = angleAdaptor
+            this.angleAdaptorIsOn = true;
+        } else {
+            this.angleAdaptor = () => null
+            this.angleAdaptorIsOn = false
+        }
+    }
+
+    setKeyAdaptor(adaptor) {
+        this.keyAdaptor = adaptor;
+    }
+
+    setDoDraw(bool) {
+        this.doDraw = bool;
+    }
+
+    setStyle(style) {
+        this.style = style;
+    }
+
+    setOpacity(opacity) {
+        this.style.opacity = opacity;
+    }
+
+
+
+    draw() {
+        if (!this.doDraw) return;
+        const { globe, style, itemMap } = this;
+        const { textFont, opacity: opacity_ } = style;
+        const textSize = textFont.size;
+        const is3D = globe.api_GetCurrentGeometry() === 0;
+        const angleIsOn = is3D ? (this.angleAdaptorIsOn && this.angleOnSphere) : (this.angleAdaptorIsOn)
+        const zoomLevel = globe.api_GetCurrentLODWithDecimal();
+        const zoomAdaptor = this.zoomLevelAdaptor(zoomLevel);
+        for (const [key, item] of itemMap) {
+            const { lat, long, text, opacity = null, angle = null, data } = item;
+            const { x, y } = globe.api_GetScreenPointFromGeo(
+                {
+                    long: long,
+                    lat: lat,
+                    z: 0,
+                },
+                style.zMode === CSZMode.Z_MSL,
+            );
+            const { opacityMultiplier, sizeMultiplier } = zoomAdaptor(data);
+            const o = (opacity === null ? opacity_ : opacity * opacity_) * opacityMultiplier;
+            textFont.size = sizeMultiplier * textSize;
+
+            if (x !== null && y !== null) globe.api_DrawContextTextMultiLine(text, textFont, o, { x, y }, angleIsOn, angle);
+        }
+        textFont.size = textSize;
+    }
+
+
+    updateOpacityOfItem(item, i, container, properties) {
+        const opacity = this.opacityAdaptor(item, i, container, properties);
+        if (opacity == null) return;
+        const key = this.keyAdaptor(item, i, container, properties);
+        const data = this.itemMap.get(key)
+        data.opacity = opacity;
+    }
+
+    updateOpacityContainer(container, properties) {
+        container.forEach((v, i, c) => {
+            this.updateOpacityOfItem(v, i, c, properties);
+        })
+    }
+
+
+    insertTextBulk(container, properties) {
+        container.forEach((v, i, c) => {
+            this.insertText(v, i, c, properties);
+        })
+    }
+
+    updateTextCoords(item, i, container, properties) {
+        const coords = this.coordinatesAdaptor(item, i, container, properties);
+        if (coords == null) return;
+        const key = this.keyAdaptor(item, i, container, properties);
+        const data = this.itemMap.get(key)
+        data.angle = this.angleAdaptor(item, i, container, properties);
+        data.long = coords.long;
+        data.lat = coords.lat;
+    }
+
+    updateTextCoordsBulk(container, properties) {
+        container.forEach((v, i, c) => {
+            this.updateTextCoords(v, i, c, properties)
+        })
+    }
+
+    deleteTextBulk(keys) {
+        for (const key of keys) {
+            this.itemMap.delete(key);
+        }
+    }
+
+
+    insertText(item, id, container, properties) {
+        const key = this.keyAdaptor(item, id, container, properties)
+        const coords = this.coordinatesAdaptor(item, id, container, properties)
+        if (coords == null) {
+            this.itemMap.delete(key);
+            return;
+        }
+        const text = this.textAdaptor(item, id, container, properties)
+        if (text == null) {
+            this.itemMap.delete(key);
+            return
+        };
+        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, data: item });
+    }
+
+    clear() {
+        this.itemMap.clear();
+    }
+}
+
+