@pirireis/webglobeplugins 0.6.3 → 0.6.4

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

@@ -1,6 +1,6 @@
 import { PixelPaddingForFlatCompassCache } from "../programs/two-d/pixel-padding-for-compass";
 import { BufferManager, BufferOrchestrator } from "../util/account";
-// import { ContextTextWriter2 } from "../write-text/context-text2";
+
 import { PixelPaddingCompassTextWriter } from "./compass-text-writer"
 
 const PaddingAngle = 30;

package/package.json

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

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

@@ -9,32 +9,28 @@ in vec2 screen_coordinate;
 in float pixel_radius_small;
 in float pixel_radius_big;
 in vec4 rgba;
-
 out vec4 v_rgba;
-
 uniform float plugin_opacity;
 
 vec3 coord_opacity(){
     float radius;
     float angle;
+    float gap = (pixel_radius_big - pixel_radius_small);
     if( gl_VertexID % 2 == 0){
         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;
+            radius =  pixel_radius_small + gap * 0.5; 
         } else if( gl_VertexID % 10 == 0) {
-            float gap = (pixel_radius_big - pixel_radius_small) / 2.0;
-            radius =  pixel_radius_small + gap;
+            radius =  pixel_radius_small + gap * 0.75;
         } else {
-            float gap = (pixel_radius_big - pixel_radius_small) * 0.75;
-            radius =  pixel_radius_small + gap;
+            radius =  pixel_radius_small + gap* 0.90;
         }
         angle = (float(gl_VertexID) / (${vertexCount}.0));
     } else {
         if ( gl_VertexID % 180 == 1){
-            radius = pixel_radius_big + 10.0;
+            radius = pixel_radius_big + gap * 0.1;
 
         } else {
             radius = pixel_radius_big;

package/write-text/context-text3.js

@@ -2,7 +2,7 @@ import { CSZMode } from "@pirireis/webglobe";
 
 /**
  * TODOs:
- * 1) update all if initials change (propably need a context and a callback to iterate over data)
+ * 1) update all if initials change (propably need a context and a callback to iterate over payload)
  * 2) expose a mechanic to update text on zoom change
  * 3) extend the mechanic on 2 to other events
  */
@@ -28,6 +28,8 @@ export class ContextTextWriter3 {
         opacityAdaptor = null,
         angleAdaptor = null,
         angleOnSphere = false,
+        xOffset = 0,
+        yOffset = 0,
         zoomLevelAdaptor = (zoomLevel) => (item) => {
             return {
                 opacityMultiplier: 1,
@@ -56,6 +58,9 @@ export class ContextTextWriter3 {
             this.angleAdaptor = () => null
             this.angleAdaptorIsOn = false
         }
+
+        this.xOffset = xOffset;
+        this.yOffset = yOffset;
     }
 
     setKeyAdaptor(adaptor) {
@@ -78,7 +83,7 @@ export class ContextTextWriter3 {
 
     draw() {
         if (!this.doDraw) return;
-        const { globe, style, itemMap } = this;
+        const { globe, style, itemMap, xOffset, yOffset } = this;
         const { textFont, opacity: opacity_ } = style;
         const textSize = textFont.size;
         const is3D = globe.api_GetCurrentGeometry() === 0;
@@ -86,7 +91,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, data } = item;
+            const { lat, long, text, opacity = null, angle = null, payload } = item;
             const { x, y } = globe.api_GetScreenPointFromGeo(
                 {
                     long: long,
@@ -95,29 +100,16 @@ export class ContextTextWriter3 {
                 },
                 style.zMode === CSZMode.Z_MSL,
             );
-            const { opacityMultiplier, sizeMultiplier } = zoomAdaptor(data);
+            const { opacityMultiplier, sizeMultiplier } = zoomAdaptor(payload);
             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);
+            if (x !== null && y !== null) globe.api_DrawContextTextMultiLine(text, textFont, o, { x: x + xOffset, y: y - yOffset }, 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) {
@@ -126,21 +118,7 @@ export class ContextTextWriter3 {
         })
     }
 
-    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) {
@@ -163,7 +141,7 @@ 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, data: item });
+        this.itemMap.set(key, { long: coords.long, lat: coords.lat, text, opacity, angle, payload: item });
     }
 
     clear() {

package/write-text/context-text2.js

@@ -1,164 +0,0 @@
-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 ContextTextWriter2 {
-    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;
-        this.doDraw = doDraw;
-
-
-        this.textAdaptor = textAdaptor;
-        this.coordinatesAdaptor = coordinatesAdaptor;
-        this.keyAdaptor = keyAdaptor;
-
-        this.zoomLevelOpacityAdaptor = zoomLevelOpacityAdaptor;
-        this.zoomLevelSizeAdaptor = zoomLevelSizeAdaptor;
-
-        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 is3D = globe.api_GetCurrentGeometry() === 0;
-        const angleIsOn = is3D ? (this.angleAdaptorIsOn && this.angleOnSphere) : (this.angleAdaptorIsOn)
-        for (const [key, { lat, long, text, opacity = null, angle = null }] of itemMap) {
-            const { x, y } = globe.api_GetScreenPointFromGeo(
-                {
-                    long: long,
-                    lat: lat,
-                    z: 0,
-                },
-                style.zMode === CSZMode.Z_MSL,
-            );
-            const o = opacity === null ? opacity_ : opacity * opacity_;
-
-            if (x !== null && y !== null) globe.api_DrawContextTextMultiLine(text, textFont, o, { x, y }, angleIsOn, angle);
-        }
-    }
-
-
-    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();
-    }
-}
-
-