@pirireis/webglobeplugins 0.5.12 → 0.6.1

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

@@ -1,38 +1,45 @@
 import { PixelPaddingForFlatCompassCache } from "../programs/two-d/pixel-padding-for-compass";
 import { BufferManager, BufferOrchestrator } from "../util/account";
 // import { ContextTextWriter2 } from "../write-text/context-text2";
-import { ContextTextWriter2Offsets } from "../write-text/context-text-2d-offsets"
+import { ContextTextWriter2Offsets } from "./compass-text-writer"
+
+const PaddingAngle = 30;
 
 export class PixelPaddingCompassPlugin {
     constructor(id, {
         opacity = 1,
-        textAngle = null, defaultProperties = {
+        textAngle = true,
+        defaultProperties = {
             rgba: [1, 1, 1, 1],
             pixelRadiusBig: 350,
             pixelRadiusSmall: 270
         }
     } = {}) {
         this.id = id;
-        this._textAngle = textAngle;
         this.textWriters = null
-        if (textAngle == null) {
-            this._createTextWriters();
-        }
+        this.textAngle = textAngle
+        this.defaultProperties = defaultProperties
         this.bufferOrchestrator = new BufferOrchestrator({ capacity: 10 });
-        this.compassMap = new CompassMap({ defaultProperties });
+
+        this.compassMap = new CompassMap(this);
         this._opacity = opacity;
+
     }
 
     init(globe, gl) {
         this.globe = globe;
         this.gl = gl;
-
+        if (this.textAngle) {
+            this._createTextWriter();
+        }
         this._initOrchestrations()
     }
 
     insert(key, long, lat, properties = null) {
+        this.__insertText(key, null, null, { properties, update: true });
         this.compassMap.insert(key, long, lat, properties);
         this.globe.DrawRender();
+
     }
 
 
@@ -42,14 +49,9 @@ export class PixelPaddingCompassPlugin {
     }
 
 
-    setTextAngle(textAngle) {
-        this._textAngle = textAngle;
-        this._createTextWriters();
-        this.globe.DrawRender();
-    }
 
     setTextStyle(textStyle) {
-        this.textWriters?.forEach((writer) => writer.setStyle(textStyle));
+        this.writer.setStyle(textStyle);
         this.globe.DrawRender();
     }
 
@@ -94,48 +96,57 @@ export class PixelPaddingCompassPlugin {
         }
     }
 
-    _createTextWriters() {
-        this.writer = new ContextTextWriter2Offsets(this.globe);
+    _createTextWriter() {
+        this.writer = new ContextTextWriter2Offsets(this.globe, { angle: PaddingAngle });
+    }
+
+    __insertText(key, x, y, { properties, update = false } = {}) {
+        if (!this.writer) return;
+        if (update) {
+            let radius;
+            if (properties != null && properties.pixelRadiusBig) {
+                radius = properties.pixelRadiusBig
+            } else {
+                radius = this.defaultProperties.pixelRadiusBig;
+            }
+            this.writer.insertTextItem(key, x, y, radius);
+        } else {
+            this.writer.insertTextItem(key, x, y)
+        }
     }
 
     // Globe API interface methods
 
     draw2D() {
-
         const { gl, globe, paddingProgram, paddingVao, bufferOrchestrator, bufferManagersCompMap } = this;
-        const items = this.compassMap.query(globe);
+        const is3D = globe.api_GetCurrentGeometry() === 0;
+        if (is3D) return;
+        const items = this.compassMap.query(globe, this.writer);
         if (items.length === 0) return;
-        const { x, y, properties } = items[0];
-        console.log(x, y, properties);
         bufferOrchestrator.flush();
         bufferOrchestrator.insertBulk(items, bufferManagersCompMap);
+        items.forEach((v) => {
+            this.__insertText(v.key, v.x, v.y)
+        });
         gl.disable(gl.DEPTH_TEST);
         paddingProgram.draw(paddingVao, bufferOrchestrator.length, this._opacity)
         gl.enable(gl.DEPTH_TEST);
+        this.writer?.draw();
     }
 
     free() {
 
+
     }
 }
 
 
 
 class CompassMap {
-    constructor({ defaultProperties = null } = {}) {
+    constructor(parent) {
         this.coordsMemory = new Map();
         this.propertyMemory = new Map();
-        if (defaultProperties !== null) {
-
-            this.defaultProperties = defaultProperties
-        } else {
-
-            this.defaultProperties = {
-                rgba: [1, 1, 1, 1],
-                pixelRadiusBig: 350,
-                pixelRadiusSmall: 270
-            }
-        }
+        this.parent = parent;
     }
 
     insert(key, long, lat, properties = null) {
@@ -148,8 +159,9 @@ class CompassMap {
         this.propertyMemory.delete(key);
     }
 
-    query(globe) {
-        const { coordsMemory, propertyMemory, defaultProperties } = this;
+    query(globe, writer) {
+        const { coordsMemory, propertyMemory } = this;
+        const defaultProperties = this.parent.defaultProperties;
         const result = [];
         coordsMemory.forEach((v, k, c) => {
             const { x, y } = globe.api_GetScreenPointFromGeo(
@@ -160,6 +172,8 @@ class CompassMap {
                 },
 
             );
+            writer?.insertTextItem(k, x, y);
+
             if (x !== null) {
                 const properties = { ...defaultProperties, ...propertyMemory.get(k) };
                 result.push({ key: k, x, y, properties })

package/compass-rose/compass-text-writer.js

@@ -0,0 +1,154 @@
+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)
+ * 2) expose a mechanic to update text on zoom change
+ * 3) extend the mechanic on 2 to other events
+ */
+export class ContextTextWriter2Offsets {
+    constructor(globe, { style = null, northStyle = {
+        textFont: {
+            name: 'Arial',
+            textColor: '#BB0000', // beyaz
+            hollowColor: '#000000', // siyah
+            size: 14, // piksel
+            hollow: true,
+            bold: true,
+            italic: false,
+        },
+        opacity: 1.0,
+        zMode: CSZMode.Z_GROUND_PERVERTEX,
+    }, doDraw = true, angle = 30, } = {}) {
+        this.globe = globe;
+        this.itemMap = new Map();
+        this.style = style || defaultStyle;
+        this.northStyle = northStyle || defaultStyle;
+        this.doDraw = doDraw;
+        this.angle = angle;
+
+        this.angles = []
+        this.texts = []
+        let currentAngle = 0;
+        while (currentAngle < 360) {
+            this.angles.push(currentAngle);
+            if (currentAngle == 0) {
+                this.texts.push("K");
+            } else {
+                this.texts.push(currentAngle.toString());
+            }
+            currentAngle += this.angle;
+        }
+        this._lastNorthAngle = globe.api_GetCurrentLookInfo()["NorthAng"] * (Math.PI / 180);
+        this.offsets = this.__offset(this._lastNorthAngle);
+
+
+    }
+
+    setKeyAdaptor(adaptor) {
+        this.keyAdaptor = adaptor;
+    }
+
+    setDoDraw(bool) {
+        this.doDraw = bool;
+    }
+
+    setStyle(style) {
+        this.style = style;
+    }
+
+    setOpacity(opacity) {
+        this.style.opacity = opacity;
+    }
+
+
+    _checkSetOffsets() {
+        const { globe } = this;
+        const newAngle = globe.api_GetCurrentLookInfo()["NorthAng"] * (Math.PI / 180);;
+        console.log("n angle", newAngle);
+        if (newAngle !== this._lastNorthAngle) {
+            this._lastNorthAngle = newAngle;
+            this.offsets = this.__offset();
+        }
+    }
+
+
+    draw() {
+        if (!this.doDraw) return;
+        const { globe, style, itemMap, texts, angles } = this;
+        const { textFont, opacity: opacity_ } = style;
+        const { textFont: nFont } = this.northStyle;
+        this._checkSetOffsets();
+        const offsets = this.offsets;
+        for (const [key, { center, radius, opacity = null }] of itemMap) {
+            const o = opacity === null ? opacity_ : opacity * opacity_;
+            if (center.x !== null && center.y !== null) {
+                offsets.forEach(({ offsetX, offsetY }, i) => {
+                    const text = texts[i];
+                    const angle = angles[i];
+                    if (angle === 0) {
+                        globe.api_DrawContextTextMultiLine(text, nFont, o, { x: center.x + offsetX * radius, y: center.y + offsetY * radius });
+
+                    } else {
+                        globe.api_DrawContextTextMultiLine(text, textFont, o, { x: center.x + offsetX * radius, y: center.y + offsetY * radius });
+
+                    }
+                });
+            }
+
+        }
+    }
+
+
+    insertTextItem(key, x, y, radius = undefined) {
+        const item = this.getItem(key);
+        item.center = { x, y };
+        if (radius === undefined) return;
+        if (item.radius != undefined && item.radius === radius) return;
+        item.radius = radius;
+
+    }
+
+    getItem(key) {
+        if (!this.itemMap.has(key)) this.itemMap.set(key, {});
+        return this.itemMap.get(key);
+    }
+
+    __calculateOffset(angle) {
+        const rAngle = (angle - 90) * (Math.PI / 180);
+        return { offsetX: Math.cos(rAngle + this._lastNorthAngle), offsetY: Math.sin(rAngle + this._lastNorthAngle) };
+    }
+
+    __offset() {
+        const angle = this.angle;
+        const offsets = []
+        let currentAngle = 0;
+        while (currentAngle < 360) {
+            offsets.push(this.__calculateOffset(currentAngle));
+
+            currentAngle += angle;
+        }
+        return offsets;
+    }
+
+
+    clear() {
+        this.itemMap.clear();
+    }
+}
+
+

package/package.json

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

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

@@ -20,15 +20,24 @@ vec3 coord_opacity(){
     if( gl_VertexID % 2 == 0){
         if ( gl_VertexID % 60 == 0){
             radius = pixel_radius_small;
+        } else if( gl_VertexID % 10 == 0) {
+            float gap = (pixel_radius_big - pixel_radius_small) / 4.0;
+            radius =  pixel_radius_small + gap;
         } else {
-            radius = (pixel_radius_big + pixel_radius_small) / 2.0;
+            float gap = (pixel_radius_big - pixel_radius_small) * 0.75;
+            radius =  pixel_radius_small + gap;
         }
         angle = (float(gl_VertexID) / (${vertexCount}.0));
     } else {
-        radius = pixel_radius_big;
+        if ( gl_VertexID % 60 == 1){
+            radius = pixel_radius_big + 10.0;
+
+        } else {
+            radius = pixel_radius_big;
+         }
         angle = (float(gl_VertexID - 1) / (${vertexCount}.0));
     }
-    float opacity =  fract(angle + 0.2475) / 1.5 + 0.25;
+    float opacity =  fract(angle + 0.2475) / 1.5 + 0.33;
     angle = angle * ${Math.PI * 2.0} + world_north_angle;
 
     return vec3( screen_coordinate + vec2( cos(angle), sin(angle)) * radius, opacity);

package/write-text/context-text-2d-offsets.js

@@ -1,149 +0,0 @@
-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)
- * 2) expose a mechanic to update text on zoom change
- * 3) extend the mechanic on 2 to other events
- */
-export class ContextTextWriter2Offsets {
-    constructor(globe, { style = null, doDraw = true, textAdaptor = null, coordinatesAdaptor = null, keyAdaptor = null, opacityAdaptor = null, angleAdaptor = null, angleOnSphere = false } = {}) {
-        this.globe = globe;
-        this.itemMap = new Map();
-        this.style = style || defaultStyle;
-        this.doDraw = doDraw;
-
-
-        this.textAdaptor = textAdaptor;
-        this.coordinatesAdaptor = coordinatesAdaptor;
-        this.keyAdaptor = keyAdaptor;
-
-        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, { center, offsets, texts, opacity = null, angle = null }] of itemMap) {
-            const o = opacity === null ? opacity_ : opacity * opacity_;
-            if (center.x !== null && center.y !== null) {
-                offsets.forEach(({ offsetX, offsetY }, i) => {
-                    const text = texts[i];
-                    globe.api_DrawContextTextMultiLine(text, textFont, o, { x: center.x + offsetX, y: center.y + offsetY }, 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 });
-    }
-
-    clear() {
-        this.itemMap.clear();
-    }
-}
-
-