@pirireis/webglobeplugins 0.6.25-a → 0.6.26-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.26-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;
         }