@pirireis/webglobeplugins 0.15.35 → 0.16.0

package/wind/vectorfieldimage.js

@@ -1,23 +1,27 @@
-function getVectorField(u, v, width, height, vMin, vMax, uMin, uMax, flip) {
-    const data = new Uint8ClampedArray(width * height * 4);
-    for (let row = 0; row < height; row++) {
-        for (let col = 0; col < width; col++) {
-            let k = flip ? ((height - row - 1) * width + col) : row * width + col;
-            let idx = (width * row + col) << 2; // Multiply by 4 for RGBA
-            if (u[k] === null || v[k] === null || isNaN(u[k]) || !isFinite(u[k]) || isNaN(v[k]) || !isFinite(v[k])) {
-                data[idx] = 0; // R
-                data[idx + 1] = 0; // G
-                data[idx + 2] = 0; // B
-                data[idx + 3] = 0; // A
-            }
-            else {
-                data[idx] = Math.floor(255 * (u[k] - uMin) / (uMax - uMin)); // R
-                data[idx + 1] = Math.floor(255 * (v[k] - vMin) / (vMax - vMin)); // G
-                data[idx + 2] = 0; // B
-                data[idx + 3] = 255; // A
-            }
-        }
-    }
-    return data;
-}
-export default getVectorField;
+function getVectorField(u, v, width, height, vMin, vMax, uMin, uMax, flip) {
+
+    const data = new Uint8ClampedArray(width * height * 4);
+
+    for (let row = 0; row < height; row++) {
+        for (let col = 0; col < width; col++) {
+            let k = flip ? ((height - row - 1) * width + col) : row * width + col;
+            let idx = (width * row + col) << 2; // Multiply by 4 for RGBA
+
+            if (u[k] === null || v[k] === null || isNaN(u[k]) || !isFinite(u[k]) || isNaN(v[k]) || !isFinite(v[k])) {
+                data[idx] = 0; // R
+                data[idx + 1] = 0; // G
+                data[idx + 2] = 0; // B
+                data[idx + 3] = 0; // A
+            } else {
+                data[idx] = Math.floor(255 * (u[k] - uMin) / (uMax - uMin)); // R
+                data[idx + 1] = Math.floor(255 * (v[k] - vMin) / (vMax - vMin)); // G
+                data[idx + 2] = 0; // B
+                data[idx + 3] = 255; // A
+            }
+        }
+    }
+
+    return data;
+}
+
+export default getVectorField;

package/write-text/attached-text-writer.js

@@ -1,87 +1,105 @@
-import { CSZMode } from "@pirireis/webglobe";
-import { isTextFont, opacityCheck } from "../util/check/typecheck";
-/**
- * Light wight version of context text writer.
- * The parameters by text are calculated on user side and inserted as items. (ContextTextWriter3 constructs text data from items)
- *
- * Good side of ContextTextWriters pattern is that there is only one way to create text.
- * The glue is inside the plugin.
- * This makes the code more readable and maintainable.
- *
- * With AttachedTextWriter the glue is created by user.
- * I observed that the users generally uses a wrapper around the plugin logic anyway. This wrapper can be used as the glue for plugin and attacked writer.
- */
-export class AttachedTextWriter {
-    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, angleOnSphere = false, zoomLevelAdaptor = (zoomLevel) => (item) => {
-        return {
-            opacityMultiplier: 1,
-            sizeMultiplier: 1
-        };
-    }, } = {}) {
-        this.globe = globe;
-        this._itemMap = new Map();
-        this.doDraw = doDraw;
-        this.angleOnSphere = angleOnSphere;
-        this.zoomLevelAdaptor = zoomLevelAdaptor;
-        this.setStyle(style);
-    }
-    setOpacity(opacity) {
-        opacityCheck(opacity);
-        this._style.opacity = opacity;
-        this.globe.DrawRender();
-    }
-    setStyle(style) {
-        isTextFont(style.textFont);
-        this._style = style;
-        this.globe.DrawRender();
-    }
-    /**
-     *
-     * @param {{text, long, lat, z = 0, xOffset = 0, yOffset = 0, isAngleOn = false, Angle = 0 }} item
-     * @returns
-     */
-    insertItem(item) {
-        const key = this.keyAdaptor ? this.keyAdaptor(item) : item;
-        this._itemMap.set(key, item);
-        this.globe.DrawRender();
-    }
-    // TODO: use item style 
-    draw() {
-        if (!this.doDraw) {
-            return;
-        }
-        const { globe, _itemMap, _style } = this;
-        const { zMode, textFont, opacity } = _style;
-        const is3D = globe.api_GetCurrentGeometry() === 0;
-        const angleIsOn = is3D ? true : this.angleOnSphere;
-        const zoomLevel = globe.api_GetCurrentLODWithDecimal();
-        const zoomAdaptor = this.zoomLevelAdaptor(zoomLevel);
-        const theSize = textFont.size;
-        _itemMap.forEach((item, key) => {
-            const { text, long, lat, z = 0, xOffset = 0, yOffset = 0, isAngleOn = false, angle = 0 } = item;
-            const { x, y } = globe.api_GetScreenPointFromGeo({
-                long,
-                lat,
-                z
-            }, zMode);
-            const { opacityMultiplier, sizeMultiplier } = zoomAdaptor(item);
-            textFont.size = sizeMultiplier * theSize;
-            if (x !== null && y !== null) {
-                globe.api_DrawContextText(text, textFont, opacityMultiplier * opacity, { x: x + xOffset, y: y - yOffset }, (isAngleOn && angleIsOn), angle);
-            }
-        });
-        textFont.size = theSize;
-    }
-}
+
+import { CSZMode } from "@pirireis/webglobe";
+import { isTextFont, opacityCheck } from "../util/check/typecheck";
+
+/**
+ * Light wight version of context text writer.
+ * The parameters by text are calculated on user side and inserted as items. (ContextTextWriter3 constructs text data from items)
+ * 
+ * Good side of ContextTextWriters pattern is that there is only one way to create text.
+ * The glue is inside the plugin.
+ * This makes the code more readable and maintainable.
+ * 
+ * With AttachedTextWriter the glue is created by user.
+ * I observed that the users generally uses a wrapper around the plugin logic anyway. This wrapper can be used as the glue for plugin and attacked writer.
+ */
+
+export class AttachedTextWriter {
+    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,
+        angleOnSphere = false,
+        zoomLevelAdaptor = (zoomLevel) => (item) => {
+            return {
+                opacityMultiplier: 1,
+                sizeMultiplier: 1
+            }
+        },
+    } = {}) {
+        this.globe = globe;
+        this._itemMap = new Map();
+        this.doDraw = doDraw;
+        this.angleOnSphere = angleOnSphere;
+        this.zoomLevelAdaptor = zoomLevelAdaptor;
+        this.setStyle(style);
+
+    }
+
+
+    setOpacity(opacity) {
+        opacityCheck(opacity);
+        this._style.opacity = opacity;
+        this.globe.DrawRender();
+    }
+
+    setStyle(style) {
+        isTextFont(style.textFont);
+        this._style = style;
+        this.globe.DrawRender();
+    }
+
+    /**
+     * 
+     * @param {{text, long, lat, z = 0, xOffset = 0, yOffset = 0, isAngleOn = false, Angle = 0 }} item 
+     * @returns 
+     */
+
+    insertItem(item) {
+        const key = this.keyAdaptor ? this.keyAdaptor(item) : item;
+        this._itemMap.set(key, item);
+        this.globe.DrawRender();
+    }
+
+    // TODO: use item style 
+    draw() {
+        if (!this.doDraw) {
+            return;
+        }
+        const { globe, _itemMap, _style } = this;
+        const { zMode, textFont, opacity } = _style;
+        const is3D = globe.api_GetCurrentGeometry() === 0;
+        const angleIsOn = is3D ? true : this.angleOnSphere;
+        const zoomLevel = globe.api_GetCurrentLODWithDecimal();
+        const zoomAdaptor = this.zoomLevelAdaptor(zoomLevel);
+        const theSize = textFont.size;
+        _itemMap.forEach((item, key) => {
+            const { text, long, lat, z = 0, xOffset = 0, yOffset = 0, isAngleOn = false, angle = 0 } = item;
+            const { x, y } = globe.api_GetScreenPointFromGeo(
+                {
+                    long,
+                    lat,
+                    z
+                },
+                zMode
+            );
+            const { opacityMultiplier, sizeMultiplier } = zoomAdaptor(item);
+            textFont.size = sizeMultiplier * theSize;
+            if (x !== null && y !== null) {
+                globe.api_DrawContextText(text, textFont, opacityMultiplier * opacity, { x: x + xOffset, y: y - yOffset }, (isAngleOn && angleIsOn), angle);
+            }
+        });
+        textFont.size = theSize;
+    }
+}

package/write-text/context-text-bulk.ts

@@ -0,0 +1,268 @@
+// @ts-ignore
+import { CSZMode } from "@pirireis/webglobe";
+import { isTextFont, opacityCheck } from "../util/check/typecheck";
+// @ts-ignore
+import RBush from 'rbush';
+
+
+import {Globe, PluginInterface, TextFont} from '../types';
+
+interface Style {
+    textFont: TextFont;
+    opacity: number;
+    zMode: CSZMode;
+}
+
+interface ZoomAdapterResult {
+    opacityMultiplier: number;
+    sizeMultiplier: number;
+}
+
+interface TextItem {
+    long: number;
+    lat: number;
+    text: string;
+    opacity: number | null;
+    angle: number | null;
+    zPayload: any;
+    position: string;
+}
+
+
+export type KeyAdapter = (input: any) => string
+export type TextAdapter = (input: any) => TextItem[]
+export type ZoomLevelAdapter = (zoomLevel: number) => (aTextAdaptorOutput: any) => ZoomAdapterResult;
+export type EscapeAdapter = (input: any, zoomLevel: number) => boolean;
+
+/**
+ * TODOs:
+ * 1) update all if initials change (propably need a context and a callback to iterate over zPayload)
+ * 2) expose a mechanic to update text on zoom change
+ * 3) extend the mechanic on 2 to other events
+ * 
+ * TODO: key check and raise error if doesnt exist
+ */
+
+
+
+const defaultStyle = {
+    textFont: {
+        name: 'Arial',
+        textColor: '#FFFFFF', // beyaz
+        hollowColor: '#000000', // siyah
+        size: 12, // piksel
+        hollow: true,
+        bold: false,
+        italic: false,
+    },
+    opacity: 1.0,
+    zMode: CSZMode.Z_GROUND_PERVERTEX,
+}
+// xOffset = 0,
+// yOffset = 0,
+// doDraw = true,
+// textAdapter = null,
+// coordinatesAdapter = null,
+// keyAdapter = null,
+// opacityAdapter = null,
+// angleAdapter = null,
+// angleOnSphere = false,
+// positionAdapter = (item: any, i: number, container: any[], properties?: any): string => "left",
+
+
+class MyRBush extends RBush<any> {
+    toBBox({long, lat, key}: {long: number, lat: number, key: string}) { return {minX: long, minY: lat, maxX: long, maxY: lat}; }
+    compareMinX(a: any, b: any) { return a.long - b.long; }
+    compareMinY(a: any, b: any) { return a.lat - b.lat; }
+}
+
+export class ContextTexBulk {
+    private globe: Globe;
+    private dataMap: Map<string, {input: any, tree: MyRBush}>;
+    private style: Style;
+    private doDraw: boolean;
+    private keyAdaptor: KeyAdapter;
+    private textAdapter: TextAdapter;
+    private zoomLevelAdapter: ZoomLevelAdapter;
+    private escapeAdaptor: EscapeAdapter;
+    private xOffset: number;
+    private yOffset: number;
+
+    private angleOptions: {
+        angleOnSphere: boolean;
+        angleIsOn: boolean;
+    }
+
+    constructor(globe: Globe,
+        keyAdaptor: KeyAdapter,
+        textAdapter: TextAdapter,
+        zoomLevelAdapter = (zoomLevel: number) => (item: any): ZoomAdapterResult => {
+            return {
+                opacityMultiplier: 1,
+                sizeMultiplier: 1
+            }
+        },
+        escapeAdapter: EscapeAdapter = (input: any, zoomLevel: number) => false,
+        style = defaultStyle,
+        angleOptions = {
+            angleOnSphere: false,
+            angleIsOn: false
+        },
+        doDraw = true,
+        offset = { x: 0, y: 0 },
+    ) {
+        this.globe = globe;
+        this.dataMap = new Map<string, {input: any, tree: MyRBush}>();
+        isTextFont(style.textFont);
+        opacityCheck(style.opacity);
+        this.style = { ...style, textFont: { ...style.textFont } };
+        this.angleOptions = angleOptions;
+        this.doDraw = doDraw;
+        this.angleOptions = angleOptions;
+        this.keyAdaptor = keyAdaptor;
+        this.textAdapter = textAdapter;
+        this.zoomLevelAdapter = zoomLevelAdapter;
+        this.escapeAdaptor = escapeAdapter;
+        this.xOffset = offset.x;
+        this.yOffset = offset.y;
+    }
+
+
+    setDoDraw(bool: boolean): void {
+        this.doDraw = bool;
+        this.globe.DrawRender();
+    }
+
+    setStyle(style: Style): void {
+        isTextFont(style.textFont);
+        opacityCheck(style.opacity);
+        this.style = { ...style, textFont: { ...style.textFont } };
+        this.globe.DrawRender();
+    }
+
+    setOpacity(opacity: number): void {
+        this.style.opacity = opacity;
+        this.globe.DrawRender();
+    }
+
+    draw(): void {
+        if (!this.doDraw) return;
+        const { globe, style, dataMap, xOffset, yOffset } = this;
+        const { textFont, opacity: opacity_ } = style;
+        const textSize = textFont.size;
+        const is3D = globe.api_GetCurrentGeometry() === 0;
+        const angleIsOn = is3D ? (this.angleOptions.angleIsOn && this.angleOptions.angleOnSphere) : (this.angleOptions.angleIsOn)
+        
+        const bbox = globe.api_GetCurrentWorldLimit();
+        // @ts-ignore
+        const data = dataMap.values();
+        const zoomLevel = globe.api_GetCurrentLODWithDecimal();
+        const zoomAdapter = this.zoomLevelAdapter(zoomLevel);
+        
+        for (const {input, tree} of data) {
+            if (this.escapeAdaptor({input, tree}.input, zoomLevel)) return;
+            // @ts-ignore
+            const itemsInBBox = tree.search({minX: bbox.ll.x, minY: bbox.ll.y, maxX: bbox.ur.x, maxY: bbox.ur.y});
+
+            for (const item of itemsInBBox) {
+                const { lat, long, text, opacity = null, angle = null, zPayload, position } = item;
+                const { x, y } = globe.api_GetScreenPointFromGeo(
+                    {
+                        long: long,
+                        lat: lat,
+    
+                        z: 0,
+                },
+                style.zMode === CSZMode.Z_MSL,
+            );
+            const { opacityMultiplier, sizeMultiplier } = zoomAdapter(zPayload);
+            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;
+        }
+    }
+
+
+    insertText(data: any): void {
+        const key = this.keyAdaptor(data);
+        const textDatas = this.textAdapter(data);
+        const tree = new MyRBush();
+        // @ts-ignore
+        tree.load(textDatas);
+        this.dataMap.set(key, { input: data, tree });
+        this.globe.DrawRender();
+    }
+
+
+    insertTextBulk(inputs: any[]): void {
+        for (const input of inputs) {
+            const key = this.keyAdaptor(input);
+            const textDatas = this.textAdapter(input);
+            const tree = new MyRBush();
+            // @ts-ignore
+            tree.load(textDatas);
+            this.dataMap.set(key, { input, tree });
+        }
+        this.globe.DrawRender();
+    }
+
+
+    deleteText(data: any): void {
+        const keys = this.keyAdaptor(data);
+        if (this.dataMap.has(keys)) {
+            this.dataMap.delete(keys);
+        }
+        this.globe.DrawRender();
+    }
+
+
+    deleteTextBulk(inputs: any[]): void {
+        for (const input of inputs) {
+            const key = this.keyAdaptor(input);
+            this.dataMap.delete(key);
+        }
+        this.globe.DrawRender();
+    }
+
+
+    deleteTextByKey(key: string): void {
+        if (this.dataMap.has(key)) {
+            this.dataMap.delete(key);
+        }
+        this.globe.DrawRender();
+    }
+    
+
+    deleteTextBulkByKey(keys: string[]): void {
+        for (const key of keys) {
+            this.dataMap.delete(key);
+        }
+        this.globe.DrawRender();
+    }
+
+
+
+    setOffsets(x: number, y: number): void {
+        this.xOffset = x;
+        this.yOffset = y;
+    }
+
+
+
+    clear(): void {
+        // @ts-ignore
+        this.dataMap.clear();
+        this.globe.DrawRender();   
+    }
+
+    free(): void {
+        this.dataMap.clear();
+    }
+}