@pirireis/webglobeplugins 0.15.34 → 0.16.0

package/circle-line-chain/readme.md

@@ -0,0 +1,57 @@
+# Road Map
+
+## CircleLine
+Atomic unit is the circle-line constructed from a circle and a line with start and end point which indicates the radius.
+
+### Attributes
+Main attributes: StartPoint, EndPoint, Radius
+Other attributes: Color, opacity, dash opacity, dash ratio
+
+### API
+API is the manipulation of above attributes
+
+### Implementation
+
+Buffer Orchestrater is enough.
+
+## ChainOfCircleLines
+Composit unit is a chain of circle-lines. 
+
+### Attributes
+
+Main attributes: one to many relation of a chain and its circle-lines
+
+
+# API
+- startChain(chainID) //
+- addPointToChain(chainID) 
+- editPointOfChain(chainID, pointID) // 
+- divideChain(chainID, )
+
+
+
+# Concept Formation
+
+Circle-Line has ( startPoint, endPoint )
+
+Chain Has [...circle-line] -> [ c0, c1, c2 ...] -> c0.endPoint == c1.startPoint, c1.endPoint == c2.startPoint
+
+## Modes 
+ 
+ Focus Mod
+ - mouse icon hides and edge point icon is displayed
+ 
+ 
+ ## interaction points ( this can be a new module)
+      changes the mouse icon
+      plugin creates them. 
+      interaction points carryin carries information about how to interact with the plugin.
+  
+ - On Edges
+      Updates coordinates on right click and carry
+      deletes on right
+ - on mid point of a radius line (+)
+      Addes an edge to mid points. ( deletes the old one and inserts 2)
+ 
+ UserInterface
+ - drawNewMethod

package/circle-line-chain/util.js

@@ -1 +1 @@
-export const keyMethod = (chainKey, nodeKey) => `${chainKey}_${nodeKey}`;
+export const keyMethod = (chainKey, nodeKey) => `${chainKey}_${nodeKey}`;

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

@@ -1,230 +1,274 @@
-import { PixelPaddingForFlatCompassCache } from "../programs/two-d/pixel-padding-for-compass";
-import { BufferManager, BufferOrchestrator } from "../util/account";
-import { PixelPaddingCompassTextWriter } from "./compass-text-writer";
-const PaddingAngle = 30;
-const textGapFit = 10;
-export class PixelPaddingCompassPlugin {
-    constructor(id, { opacity = 1, textAngleOn = true, defaultProperties = {
-        rgba: [1, 1, 1, 1],
-        pixelRadiusRatioBig: 0.8,
-        pixelRadiusRatioSmall: 0.6,
-    }, 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.textAngleOn = textAngleOn;
-        this.defaultProperties = defaultProperties;
-        this.bufferOrchestrator = new BufferOrchestrator({ capacity: 10 });
-        this._font_hold = { font, northFont };
-        this.compassMap = new CompassMap(this);
-        this._opacity = opacity;
-        this.isFreed = false;
-    }
-    init(globe, gl) {
-        this.globe = globe;
-        this.resize();
-        this.gl = gl;
-        if (this.textAngleOn) {
-            this._createTextWriter();
-        }
-        this._initOrchestrations();
-    }
-    /**
-     * @param {string} key
-     * @param {number} long
-     * @param {number} lat
-     * @typedef properties
-     * @property {number} pixelRadiusRatioBig
-     * @property {number} pixelRadiusRatioSmall
-     * @property {[4 numbers between 0-1]} rgba
-     */
-    insert(key, long, lat, properties = null) {
-        this.__insertText(key, null, null, { properties, update: true });
-        this.compassMap.insert(key, long, lat, properties);
-        this.globe.DrawRender();
-    }
-    /**
-     *
-     * @param {string} key
-     */
-    delete(key) {
-        this.compassMap.delete(key);
-        this.globe.DrawRender();
-    }
-    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);
-        {
-            // createBuffers
-            const bufferType = "DYNAMIC_DRAW";
-            const initialCapacity = this.bufferOrchestrator.capacity;
-            this.bufferManagersCompMap = new Map([
-                ["screenCoordinates", {
-                        'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.x, item.y])
-                    }],
-                ["pixelRadiusRatioSmall", {
-                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.properties.pixelRadiusRatioSmall])
-                    }],
-                ["pixelRadiusRatioBig", {
-                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array([item.properties.pixelRadiusRatioBig])
-                    }],
-                ["rgba", {
-                        'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array(item.properties.rgba)
-                    }],
-            ]);
-            const obj = function (bufferManagerComp) {
-                return { 'buffer': bufferManagerComp.bufferManager.buffer, 'stride': 0, 'offset': 0 };
-            };
-            this.paddingVao = this.paddingProgram.createVAO(...['screenCoordinates', 'pixelRadiusRatioSmall', 'pixelRadiusRatioBig', 'rgba'].map(key => obj(this.bufferManagersCompMap.get(key))));
-        }
-    }
-    _createTextWriter() {
-        this.writer = new PixelPaddingCompassTextWriter(this.globe, { angle: PaddingAngle, ...this._font_hold });
-    }
-    resize() {
-        this.writer?.resize();
-    }
-    __insertText(key, x, y, { properties, update = false } = {}) {
-        if (!this.writer)
-            return;
-        if (update) {
-            let radius;
-            if (properties != null && properties.pixelRadiusRatioBig) {
-                radius = properties.pixelRadiusRatioBig * this.radiusMultiplier;
-            }
-            else {
-                radius = this.defaultProperties.pixelRadiusRatioBig * this.radiusMultiplier;
-            }
-            this.writer.insertTextItem(key, x, y, radius + textGapFit);
-        }
-        else {
-            this.writer.insertTextItem(key, x, y);
-        }
-    }
-    // Globe API interface methods
-    draw2D() {
-        if (this.isFreed) {
-            console.warn("PixelPaddingCompassPlugin is freed, cannot draw.");
-            return;
-        }
-        ;
-        const { gl, globe, paddingProgram, paddingVao, bufferOrchestrator, bufferManagersCompMap } = this;
-        const is3D = globe.api_GetCurrentGeometry() === 0;
-        if (is3D)
-            return;
-        const items = this.compassMap.query(globe, this.writer);
-        if (items.length === 0)
-            return;
-        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() {
-        if (this.isFreed) {
-            console.warn("PixelPaddingCompassPlugin is already freed.");
-            return;
-        }
-        ;
-        this.isFreed = true;
-        this.compassMap.free();
-        const { globe, gl, paddingVao } = this;
-        gl.deleteVertexArray(paddingVao);
-        PixelPaddingForFlatCompassCache.release(globe);
-        this.bufferManagersCompMap.forEach(v => {
-            v.bufferManager.free();
-        });
-    }
-    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());
-    }
-}
-class CompassMap {
-    constructor(parent) {
-        this.coordsMemory = new Map();
-        this.propertyMemory = new Map();
-        this.parent = parent;
-    }
-    insert(key, long, lat, properties = null) {
-        this.coordsMemory.set(key, [long, lat]);
-        if (properties)
-            this.propertyMemory.set(key, properties);
-    }
-    delete(key) {
-        this.coordsMemory.delete(key);
-        this.propertyMemory.delete(key);
-    }
-    free() {
-        this.coordsMemory.clear();
-        this.propertyMemory.clear();
-        this.coordsMemory = null;
-        this.propertyMemory = null;
-    }
-    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({
-                long: v[0],
-                lat: v[1],
-                z: 0,
-            });
-            writer?.insertTextItem(k, x, y);
-            if (x !== null) {
-                const properties = { ...defaultProperties, ...propertyMemory.get(k) };
-                result.push({ key: k, x, y, properties });
-            }
-        });
-        return result;
-    }
-}
-function isOnTheScreen(globe, points) { }
+import { PixelPaddingForFlatCompassCache } from "../programs/two-d/pixel-padding-for-compass";
+import { BufferManager, BufferOrchestrator } from "../util/account";
+
+import { PixelPaddingCompassTextWriter } from "./compass-text-writer"
+
+const PaddingAngle = 30;
+const textGapFit = 10;
+
+export class PixelPaddingCompassPlugin {
+    constructor(id, {
+        opacity = 1,
+        textAngleOn = true,
+        defaultProperties = {
+            rgba: [1, 1, 1, 1],
+            pixelRadiusRatioBig: 0.8,
+            pixelRadiusRatioSmall: 0.6,
+        },
+        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.textAngleOn = textAngleOn
+        this.defaultProperties = defaultProperties
+        this.bufferOrchestrator = new BufferOrchestrator({ capacity: 10 });
+
+        this._font_hold = { font, northFont };
+        this.compassMap = new CompassMap(this);
+        this._opacity = opacity;
+        this.isFreed = false;
+    }
+
+    init(globe, gl) {
+        this.globe = globe;
+        this.resize();
+        this.gl = gl;
+        if (this.textAngleOn) {
+            this._createTextWriter();
+        }
+        this._initOrchestrations()
+    }
+
+
+    /**
+     * @param {string} key
+     * @param {number} long
+     * @param {number} lat
+     * @typedef properties
+     * @property {number} pixelRadiusRatioBig
+     * @property {number} pixelRadiusRatioSmall
+     * @property {[4 numbers between 0-1]} rgba 
+     */
+    insert(key, long, lat, properties = null) {
+        this.__insertText(key, null, null, { properties, update: true });
+        this.compassMap.insert(key, long, lat, properties);
+        this.globe.DrawRender();
+    }
+
+
+    /**
+     * 
+     * @param {string} key 
+     */
+    delete(key) {
+        this.compassMap.delete(key);
+        this.globe.DrawRender();
+    }
+
+
+
+    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);
+        {
+            // createBuffers
+            const bufferType = "DYNAMIC_DRAW";
+            const initialCapacity = this.bufferOrchestrator.capacity;
+            this.bufferManagersCompMap = new Map(
+                [
+                    ["screenCoordinates", {
+                        'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.x, item.y])
+                    }],
+                    ["pixelRadiusRatioSmall", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.properties.pixelRadiusRatioSmall])
+                    }],
+                    ["pixelRadiusRatioBig", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.properties.pixelRadiusRatioBig])
+                    }],
+                    ["rgba", {
+                        'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array(item.properties.rgba)
+                    }],
+                ]
+            );
+
+            const obj = function (bufferManagerComp) {
+                return { 'buffer': bufferManagerComp.bufferManager.buffer, 'stride': 0, 'offset': 0 }
+            };
+            this.paddingVao = this.paddingProgram.createVAO(
+                ...['screenCoordinates', 'pixelRadiusRatioSmall', 'pixelRadiusRatioBig', 'rgba'].map(key => obj(this.bufferManagersCompMap.get(key))));
+        }
+    }
+
+    _createTextWriter() {
+        this.writer = new PixelPaddingCompassTextWriter(this.globe, { angle: PaddingAngle, ...this._font_hold });
+    }
+
+
+    resize() {
+        this.writer?.resize();
+    }
+
+
+    __insertText(key, x, y, { properties, update = false } = {}) {
+        if (!this.writer) return;
+        if (update) {
+            let radius;
+            if (properties != null && properties.pixelRadiusRatioBig) {
+                radius = properties.pixelRadiusRatioBig * this.radiusMultiplier;
+            } else {
+                radius = this.defaultProperties.pixelRadiusRatioBig * this.radiusMultiplier;
+            }
+            this.writer.insertTextItem(key, x, y, radius + textGapFit);
+        } else {
+            this.writer.insertTextItem(key, x, y)
+        }
+    }
+
+    // Globe API interface methods
+
+    draw2D() {
+        if (this.isFreed) {
+            console.warn("PixelPaddingCompassPlugin is freed, cannot draw.");
+            return;
+        };
+        const { gl, globe, paddingProgram, paddingVao, bufferOrchestrator, bufferManagersCompMap } = this;
+        const is3D = globe.api_GetCurrentGeometry() === 0;
+        if (is3D) return;
+        const items = this.compassMap.query(globe, this.writer);
+        if (items.length === 0) return;
+        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() {
+        if (this.isFreed) {
+            console.warn("PixelPaddingCompassPlugin is already freed.");
+            return
+        };
+        this.isFreed = true;
+        this.compassMap.free();
+        const { globe, gl, paddingVao } = this;
+        gl.deleteVertexArray(paddingVao);
+        PixelPaddingForFlatCompassCache.release(globe);
+        this.bufferManagersCompMap.forEach(v => {
+            v.bufferManager.free();
+        })
+
+    }
+
+    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());
+    }
+}
+
+
+
+class CompassMap {
+    constructor(parent) {
+        this.coordsMemory = new Map();
+        this.propertyMemory = new Map();
+        this.parent = parent;
+    }
+
+    insert(key, long, lat, properties = null) {
+        this.coordsMemory.set(key, [long, lat]);
+        if (properties) this.propertyMemory.set(key, properties);
+    }
+
+    delete(key) {
+        this.coordsMemory.delete(key);
+        this.propertyMemory.delete(key);
+    }
+
+    free() {
+        this.coordsMemory.clear();
+        this.propertyMemory.clear();
+        this.coordsMemory = null;
+        this.propertyMemory = null;
+    }
+
+    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(
+                {
+                    long: v[0],
+                    lat: v[1],
+                    z: 0,
+                },
+
+            );
+            writer?.insertTextItem(k, x, y);
+
+            if (x !== null) {
+                const properties = { ...defaultProperties, ...propertyMemory.get(k) };
+                result.push({ key: k, x, y, properties })
+            }
+        })
+        return result;
+    }
+}
+
+function isOnTheScreen(globe, points) { }
+