@pirireis/webglobeplugins 0.6.0 → 0.6.2-a

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

@@ -1,41 +1,64 @@
 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 "./compass-text-writer"
+import { PixelPaddingCompassTextWriter } from "./compass-text-writer"
 
 const PaddingAngle = 30;
+const textGapFit = 10;
 
 export class PixelPaddingCompassPlugin {
     constructor(id, {
         opacity = 1,
-        textAngle = true,
+        textAngleOn = true,
+
         defaultProperties = {
             rgba: [1, 1, 1, 1],
-            pixelRadiusBig: 350,
-            pixelRadiusSmall: 270
+            pixelRadiusBig: 250,
+            pixelRadiusSmall: 220
+        },
+        font = {
+            name: 'Arial',
+            textColor: '#FFFFFF',
+            hollowColor: '#000000',
+            size: 12, // piksel
+            hollow: true,
+            bold: true,
+            italic: false,
+        },
+        northFont = {
+            name: 'Arial',
+            textColor: '#BBAA00',
+            hollowColor: '#000000',
+            size: 14, // piksel
+            hollow: true,
+            bold: true,
+            italic: false,
+
+
         }
     } = {}) {
         this.id = id;
-        this.textWriters = null
-        this.textAngle = textAngle
+        this.textAngleOn = textAngleOn
         this.defaultProperties = defaultProperties
         this.bufferOrchestrator = new BufferOrchestrator({ capacity: 10 });
 
+        this._font_hold = { font, northFont };
         this.compassMap = new CompassMap(this);
         this._opacity = opacity;
+
     }
 
     init(globe, gl) {
         this.globe = globe;
         this.gl = gl;
-        if (this.textAngle) {
+        if (this.textAngleOn) {
             this._createTextWriter();
         }
         this._initOrchestrations()
     }
 
     insert(key, long, lat, properties = null) {
-        this.__insertText(key, null, null, properties);
+        this.__insertText(key, null, null, { properties, update: true });
         this.compassMap.insert(key, long, lat, properties);
         this.globe.DrawRender();
 
@@ -49,16 +72,23 @@ export class PixelPaddingCompassPlugin {
 
 
 
-    setTextStyle(textStyle) {
-        this.writer.setStyle(textStyle);
+    setFont({ textFont = null, northFont = null } = {}) {
+        if (textFont) this.writer.setFont(textFont);
+        if (northFont) this.writer.setNorthFont(northFont);
         this.globe.DrawRender();
     }
 
+
     setOpacity(opacity) {
         this._opacity = opacity;
+        this.writer?.setOpacity(opacity);
         this.globe.DrawRender();
     }
 
+    getTextWriter() {
+        return this.writer;
+    }
+
     _initOrchestrations() {
         const { gl, globe } = this;
         this.paddingProgram = PixelPaddingForFlatCompassCache.get(globe);
@@ -96,18 +126,24 @@ export class PixelPaddingCompassPlugin {
     }
 
     _createTextWriter() {
-        this.writer = new ContextTextWriter2Offsets(this.globe, { angle: PaddingAngle });
+        this.writer = new PixelPaddingCompassTextWriter(this.globe, { angle: PaddingAngle, ...this._font_hold });
     }
 
-    __insertText(key, x, y, properties) {
+
+
+    __insertText(key, x, y, { properties, update = false } = {}) {
         if (!this.writer) return;
-        let radius;
-        if (properties != null && properties.pixelRadiusBig) {
-            radius = properties.pixelRadiusBig
+        if (update) {
+            let radius;
+            if (properties != null && properties.pixelRadiusBig) {
+                radius = properties.pixelRadiusBig
+            } else {
+                radius = this.defaultProperties.pixelRadiusBig;
+            }
+            this.writer.insertTextItem(key, x, y, radius + textGapFit);
         } else {
-            radius = this.defaultProperties.pixelRadiusBig;
+            this.writer.insertTextItem(key, x, y)
         }
-        this.writer.insertTextItem(key, x, y, radius);
     }
 
     // Globe API interface methods

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

@@ -1,18 +1,18 @@
-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,
-}
+// 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:
@@ -20,14 +20,51 @@ const defaultStyle = {
  * 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, angle = 30, } = {}) {
+const yGapFit = -2
+const xGapFit = -5
+
+export class PixelPaddingCompassTextWriter {
+    constructor(globe, {
+        font = {
+            name: 'Arial',
+            textColor: '#FFFFFF', // beyaz
+            hollowColor: '#000000', // siyah
+            size: 12, // piksel
+            hollow: true,
+            bold: true,
+            italic: false,
+        }, northFont = {
+            name: 'Arial',
+            textColor: '#BB0000', // beyaz
+            hollowColor: '#000000', // siyah
+            size: 14, // piksel
+            hollow: true,
+            bold: true,
+            italic: false,
+
+        }, doDraw = true, angle = 30, } = {}) {
         this.globe = globe;
         this.itemMap = new Map();
-        this.style = style || defaultStyle;
+        this.font = font;
+        this.northFont = northFont;
         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);
+
 
     }
 
@@ -39,31 +76,48 @@ export class ContextTextWriter2Offsets {
         this.doDraw = bool;
     }
 
-    setStyle(style) {
-        this.style = style;
+    setFont(font) {
+        this.font = font;
+    }
+
+    setNorthFont(font) {
+        this.northFont = font;
     }
 
     setOpacity(opacity) {
-        this.style.opacity = opacity;
+        this.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 } = this;
-        const { textFont, opacity: opacity_ } = style;
-        const is3D = globe.api_GetCurrentGeometry() === 0;
-        if (is3D) return;
-        const angleIsOn = is3D ? (this.angleAdaptorIsOn && this.angleOnSphere) : (this.angleAdaptorIsOn)
-        for (const [key, { center, offsets, texts, opacity = null, angles }] of itemMap) {
+        const { globe, font, opacity: opacity_, northFont, itemMap, texts, angles } = this;
+        this._checkSetOffsets();//  zMode: CSZMode.Z_GROUND_PERVERTEX,
+        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];
-                    console.log("asdfadsf", text, angle, center, offsetX, offsetY);
-                    globe.api_DrawContextTextMultiLine(text, textFont, o, { x: center.x + offsetX, y: center.y + offsetY }, angleIsOn, angle);
+                    if (angle === 0) {
+                        globe.api_DrawContextTextMultiLine(text, northFont, o, { x: center.x + offsetX * radius + xGapFit, y: center.y + offsetY * radius + yGapFit });
+
+                    } else {
+                        globe.api_DrawContextTextMultiLine(text, font, o, { x: center.x + offsetX * radius + xGapFit, y: center.y + offsetY * radius + yGapFit });
+
+                    }
                 });
             }
 
@@ -71,15 +125,13 @@ export class ContextTextWriter2Offsets {
     }
 
 
-    insertTextItem(key, x, y, 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;
-        const { offsets, angles, texts } = this.__offsetAngleText(radius);
-        item.offsets = offsets;
-        item.angles = angles;
-        item.texts = texts;
+
     }
 
     getItem(key) {
@@ -87,28 +139,21 @@ export class ContextTextWriter2Offsets {
         return this.itemMap.get(key);
     }
 
-    __calculateOffset(radius, angle) {
+    __calculateOffset(angle) {
         const rAngle = (angle - 90) * (Math.PI / 180);
-        return { offsetX: Math.cos(rAngle) * radius, offsetY: Math.sin(rAngle) * radius };
+        return { offsetX: Math.cos(rAngle + this._lastNorthAngle), offsetY: Math.sin(rAngle + this._lastNorthAngle) };
     }
 
-    __offsetAngleText(radius) {
+    __offset() {
         const angle = this.angle;
         const offsets = []
-        const angles = []
-        const texts = []
         let currentAngle = 0;
         while (currentAngle < 360) {
-            offsets.push(this.__calculateOffset(radius + 10, currentAngle));
-            angles.push(currentAngle);
-            if (currentAngle == 0) {
-                texts.push("K");
-            } else {
-                texts.push(currentAngle.toString());
-            }
+            offsets.push(this.__calculateOffset(currentAngle));
+
             currentAngle += angle;
         }
-        return { offsets, angles, texts };
+        return offsets;
     }
 
 

package/compass-rose/index.js

@@ -0,0 +1,3 @@
+import { PixelPaddingCompassTextWriter } from "./compass-text-writer";
+import { PixelPaddingCompassPlugin } from "./compass-rose-padding-flat";
+export { PixelPaddingCompassPlugin, PixelPaddingCompassTextWriter }

package/package.json

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

package/rangerings/rangeringangletext.js

@@ -261,7 +261,7 @@ export default class RangeRingAngleText {
             const hideText = centerMap.get("textHide");
             const isHidden = hide === ENUM_HIDE.HIDE || hideText === ENUM_TEXT_HIDE.HIDE;
             if (!isHidden) this._fillDeleteBucket(centerID, deleteBucket);
-            centerMap.set("hide", ENUM_HIDE.HIDE);
+            centerMap.set("hideText", ENUM_HIDE.HIDE);
         }
         this._updateData(deleteBucket, CSObjectArrayUpdateTypes.DELETE);
     }
@@ -302,7 +302,7 @@ export default class RangeRingAngleText {
         for (const [centerID, centerMap] of this._centerCollection) {
             const hide = centerMap.get("hide");
             const hideText = centerMap.get("textHide");
-            if (hide === ENUM_HIDE) continue
+            if (hide === ENUM_HIDE.HIDE) continue
             const isHidden = hideText === ENUM_TEXT_HIDE.HIDE;
             if (isHidden) {
                 const x = centerMap.get("x");

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

package/write-text/context-text3.js

@@ -0,0 +1,169 @@
+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 = (zoomLevel, item) => 1,
+        zoomLevelSizeAdaptor = (zoomLevel, item) => 1,
+    } = {}) {
+        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 textSize = textFont.size;
+        const is3D = globe.api_GetCurrentGeometry() === 0;
+        const angleIsOn = is3D ? (this.angleAdaptorIsOn && this.angleOnSphere) : (this.angleAdaptorIsOn)
+        const zoomLevel = globe.api_GetCurrentLODWithDecimal()
+        for (const [key, item] of itemMap) {
+            const { lat, long, text, opacity = null, angle = null } = item;
+            const { x, y } = globe.api_GetScreenPointFromGeo(
+                {
+                    long: long,
+                    lat: lat,
+                    z: 0,
+                },
+                style.zMode === CSZMode.Z_MSL,
+            );
+            const o = (opacity === null ? opacity_ : opacity * opacity_) * this.zoomLevelOpacityAdaptor(zoomLevel, item);
+            textFont.size = this.zoomLevelSizeAdaptor(zoomLevel) * 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 });
+    }
+
+    clear() {
+        this.itemMap.clear();
+    }
+}
+
+