@pirireis/webglobeplugins 0.6.25-a → 0.6.27-a

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

@@ -13,8 +13,8 @@ export class PixelPaddingCompassPlugin {
 
         defaultProperties = {
             rgba: [1, 1, 1, 1],
-            pixelRadiusBig: 250,
-            pixelRadiusSmall: 200
+            pixelRadiusRatioBig: 0.8,
+            pixelRadiusRatioSmall: 0.6,
         },
         font = {
             name: 'Arial',
@@ -50,6 +50,7 @@ export class PixelPaddingCompassPlugin {
 
     init(globe, gl) {
         this.globe = globe;
+        this.resize();
         this.gl = gl;
         if (this.textAngleOn) {
             this._createTextWriter();
@@ -63,8 +64,8 @@ export class PixelPaddingCompassPlugin {
      * @param {number} long
      * @param {number} lat
      * @typedef properties
-     * @property {number} pixelRadiusBig
-     * @property {number} pixelRadiusSmall
+     * @property {number} pixelRadiusRatioBig
+     * @property {number} pixelRadiusRatioSmall
      * @property {[4 numbers between 0-1]} rgba 
      */
     insert(key, long, lat, properties = null) {
@@ -115,13 +116,13 @@ export class PixelPaddingCompassPlugin {
                         'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
                         'adaptor': (item) => new Float32Array([item.x, item.y])
                     }],
-                    ["pixelRadiusSmall", {
+                    ["pixelRadiusRatioSmall", {
                         'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.properties.pixelRadiusSmall])
+                        'adaptor': (item) => new Float32Array([item.properties.pixelRadiusRatioSmall])
                     }],
-                    ["pixelRadiusBig", {
+                    ["pixelRadiusRatioBig", {
                         'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.properties.pixelRadiusBig])
+                        'adaptor': (item) => new Float32Array([item.properties.pixelRadiusRatioBig])
                     }],
                     ["rgba", {
                         'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
@@ -134,7 +135,7 @@ export class PixelPaddingCompassPlugin {
                 return { 'buffer': bufferManagerComp.bufferManager.buffer, 'stride': 0, 'offset': 0 }
             };
             this.paddingVao = this.paddingProgram.createVAO(
-                ...['screenCoordinates', 'pixelRadiusSmall', 'pixelRadiusBig', 'rgba'].map(key => obj(this.bufferManagersCompMap.get(key))));
+                ...['screenCoordinates', 'pixelRadiusRatioSmall', 'pixelRadiusRatioBig', 'rgba'].map(key => obj(this.bufferManagersCompMap.get(key))));
         }
     }
 
@@ -143,15 +144,19 @@ export class PixelPaddingCompassPlugin {
     }
 
 
+    resize() {
+        this.writer?.resize();
+    }
+
 
     __insertText(key, x, y, { properties, update = false } = {}) {
         if (!this.writer) return;
         if (update) {
             let radius;
-            if (properties != null && properties.pixelRadiusBig) {
-                radius = properties.pixelRadiusBig
+            if (properties != null && properties.pixelRadiusRatioBig) {
+                radius = properties.pixelRadiusRatioBig * this.radiusMultiplier;
             } else {
-                radius = this.defaultProperties.pixelRadiusBig;
+                radius = this.defaultProperties.pixelRadiusRatioBig * this.radiusMultiplier;
             }
             this.writer.insertTextItem(key, x, y, radius + textGapFit);
         } else {
@@ -185,6 +190,23 @@ export class PixelPaddingCompassPlugin {
         })
 
     }
+
+    resize() {
+        this.radiusMultiplier = this._shorterDimension() * 0.5;
+        this._reinsertAllText();
+    }
+
+
+    _reinsertAllText() {
+        this.compassMap.query(this.globe, this.writer).forEach((v) => {
+            this.__insertText(v.key, v.x, v.y, { properties: v.properties, update: true });
+        });
+    }
+
+    _shorterDimension() {
+        const globe = this.globe;
+        return Math.min(globe.api_ScrW(), globe.api_ScrH());
+    }
 }
 
 

package/package.json

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

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

@@ -6,8 +6,8 @@ const vertexShaderSource = `#version 300 es
 ${CameraUniformBlockString}
 
 in vec2 screen_coordinate;
-in float pixel_radius_small;
-in float pixel_radius_big;
+in float pixel_radius_small_ratio;
+in float pixel_radius_big_ratio;
 in vec4 rgba;
 out vec4 v_rgba;
 uniform float plugin_opacity;
@@ -15,31 +15,31 @@ uniform float plugin_opacity;
 vec3 coord_opacity(){
     float radius;
     float angle;
-    float gap = (pixel_radius_big - pixel_radius_small);
+    float gap = (pixel_radius_big_ratio - pixel_radius_small_ratio);
     if( gl_VertexID % 2 == 0){
         // if( gl_VertexID % 180 == 0){
-        //      radius = pixel_radius_small ;
+        //      radius = pixel_radius_small_ratio ;
         // } else
         if ( gl_VertexID % 60 == 0){
-            radius =  pixel_radius_small; 
+            radius =  pixel_radius_small_ratio; 
         } else if( gl_VertexID % 10 == 0) {
-            radius =  pixel_radius_small + gap * 0.5;
+            radius =  pixel_radius_small_ratio + gap * 0.5;
         } else {
-            radius =  pixel_radius_small + gap* 0.75;
+            radius =  pixel_radius_small_ratio + gap* 0.75;
         }
         angle = (float(gl_VertexID) / (${vertexCount}.0));
     } else {
         if ( gl_VertexID % 180 == 1){
-            radius = pixel_radius_big + gap * 0.1;
+            radius = pixel_radius_big_ratio + gap * 0.1;
 
         } else {
-            radius = pixel_radius_big;
+            radius = pixel_radius_big_ratio;
          }
         angle = (float(gl_VertexID - 1) / (${vertexCount}.0));
     }
     float opacity =  fract(angle + 0.2475) / 1.5 + 0.33;
     angle = angle * ${Math.PI * 2.0} + world_north_angle;
-
+    radius = radius *  min(screenWH.x, screenWH.y) / 2.0;;
     return vec3( screen_coordinate + vec2( cos(angle), sin(angle)) * radius, opacity);
 }
 
@@ -78,13 +78,13 @@ class Logic {
         const { gl, program } = this;
         { // assign attribute locations
             //             in vec2 screen_coordinate;
-            // in float pixel_radius_small;
-            // in float pixel_radius_big;
+            // in float pixel_radius_small_ratio;
+            // in float pixel_radius_big_ratio;
             // in vec4 rgba;
 
             gl.bindAttribLocation(program, 0, "screen_coordinate");
-            gl.bindAttribLocation(program, 1, "pixel_radius_small");
-            gl.bindAttribLocation(program, 2, "pixel_radius_big");
+            gl.bindAttribLocation(program, 1, "pixel_radius_small_ratio");
+            gl.bindAttribLocation(program, 2, "pixel_radius_big_ratio");
             gl.bindAttribLocation(program, 3, "rgba");
         }
         {
@@ -118,7 +118,7 @@ class Logic {
         cameraBlockTotem.unbind(cameraBlockBindingPoint);
     }
 
-    createVAO(screenCoordsBufferObj, pixelRadiusSmallBufferObj, pixelRadiusBigBufferObj, rgbaBufferObj) {
+    createVAO(screenCoordsBufferObj, pixelRadiusRatioSmallBufferObj, pixelRadiusRatioBigBufferObj, rgbaBufferObj) {
         const { gl } = this;
         const vao = gl.createVertexArray();
         gl.bindVertexArray(vao);
@@ -130,14 +130,14 @@ class Logic {
             gl.vertexAttribDivisor(0, 1);
         }
         {
-            const { buffer, stride = 0, offset = 0 } = pixelRadiusSmallBufferObj;
+            const { buffer, stride = 0, offset = 0 } = pixelRadiusRatioSmallBufferObj;
             gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
             gl.enableVertexAttribArray(1);
             gl.vertexAttribPointer(1, 1, gl.FLOAT, false, stride, offset);
             gl.vertexAttribDivisor(1, 1);
         }
         {
-            const { buffer, stride = 0, offset = 0 } = pixelRadiusBigBufferObj;
+            const { buffer, stride = 0, offset = 0 } = pixelRadiusRatioBigBufferObj;
             gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
             gl.enableVertexAttribArray(2);
             gl.vertexAttribPointer(2, 1, gl.FLOAT, false, stride, offset);

package/rangerings-2/rangeringangletext.js

@@ -356,7 +356,7 @@ export default class RangeRingAngleText {
             // fidkey is the key
             attribs.push({
                 "__fid__": key,
-                "aci": (360 - aci).toString()
+                "aci": (360 - aci).toString().padStart(3, '0')
             })
             aci += stepAngle;
         }

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() {