@pirireis/webglobeplugins 0.6.1 → 0.6.2-a

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

@@ -1,26 +1,48 @@
 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;
 
@@ -29,7 +51,7 @@ export class PixelPaddingCompassPlugin {
     init(globe, gl) {
         this.globe = globe;
         this.gl = gl;
-        if (this.textAngle) {
+        if (this.textAngleOn) {
             this._createTextWriter();
         }
         this._initOrchestrations()
@@ -50,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);
@@ -97,9 +126,11 @@ 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, update = false } = {}) {
         if (!this.writer) return;
         if (update) {
@@ -109,7 +140,7 @@ export class PixelPaddingCompassPlugin {
             } else {
                 radius = this.defaultProperties.pixelRadiusBig;
             }
-            this.writer.insertTextItem(key, x, y, radius);
+            this.writer.insertTextItem(key, x, y, radius + textGapFit);
         } else {
             this.writer.insertTextItem(key, x, y)
         }

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,9 +20,20 @@ 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, northStyle = {
-        textFont: {
+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
@@ -30,14 +41,12 @@ export class ContextTextWriter2Offsets {
             hollow: true,
             bold: true,
             italic: false,
-        },
-        opacity: 1.0,
-        zMode: CSZMode.Z_GROUND_PERVERTEX,
-    }, doDraw = true, angle = 30, } = {}) {
+
+        }, doDraw = true, angle = 30, } = {}) {
         this.globe = globe;
         this.itemMap = new Map();
-        this.style = style || defaultStyle;
-        this.northStyle = northStyle || defaultStyle;
+        this.font = font;
+        this.northFont = northFont;
         this.doDraw = doDraw;
         this.angle = angle;
 
@@ -67,12 +76,16 @@ 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;
     }
 
 
@@ -89,10 +102,8 @@ export class ContextTextWriter2Offsets {
 
     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 { 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_;
@@ -101,10 +112,10 @@ export class ContextTextWriter2Offsets {
                     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 });
+                        globe.api_DrawContextTextMultiLine(text, northFont, o, { x: center.x + offsetX * radius + xGapFit, y: center.y + offsetY * radius + yGapFit });
 
                     } else {
-                        globe.api_DrawContextTextMultiLine(text, textFont, o, { x: center.x + offsetX * radius, y: center.y + offsetY * radius });
+                        globe.api_DrawContextTextMultiLine(text, font, o, { x: center.x + offsetX * radius + xGapFit, y: center.y + offsetY * radius + yGapFit });
 
                     }
                 });

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.1",
+    "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();
+    }
+}
+
+