@pirireis/webglobeplugins 1.1.12 → 1.1.13

package/package.json

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

package/semiplugins/shape-on-terrain/terrain-polygon/terrain-polygon.js

@@ -11,16 +11,19 @@ export class TerrainPolygonSemiPlugin {
     _options = {
         drawEdges: true,
         pickable: false,
+        pickablePause: false,
         variativeColorsOn: false,
         polygonStyle: {
             defaultColor: [0.5, 0.5, 1, 1],
             pickedColor: [1, 0, 0, 1],
             opacity: 1.0,
+            useDefaultColor: false,
         },
         edgeStyle: {
             defaultColor: [1, 1, 0, 1],
             pickedColor: [1, 0, 0, 1],
             opacity: 1.0,
+            useDefaultColor: true,
         },
         // Global opacity multiplier applied on top of style opacities
         opacity: 1.0,
@@ -83,11 +86,16 @@ export class TerrainPolygonSemiPlugin {
         console.log("TerrainPolygonSemiPlugin options:", this._options);
     }
     ;
-    _effectivePolygonOpacity() {
-        return this._options.opacity * this._options.polygonStyle.opacity;
-    }
-    _effectiveEdgeOpacity() {
-        return this._options.opacity * this._options.edgeStyle.opacity;
+    _effectiveOpacity(target) {
+        if (target === "polygon") {
+            return new Float32Array([this._options.opacity * this._options.polygonStyle.opacity]);
+        }
+        else if (target === "edgeArc") {
+            return new Float32Array([this._options.opacity * this._options.edgeStyle.opacity]);
+        }
+        else {
+            throw new Error(`Unknown target ${target} for _effectiveOpacity, must be "polygon" or "edgeArc"`);
+        }
     }
     init(globe, gl) {
         this.globe = globe;
@@ -98,7 +106,7 @@ export class TerrainPolygonSemiPlugin {
         this._vec3Buffer = gl.createBuffer();
         this._mercatorXYBuffer = gl.createBuffer();
         this._uboHandler = this._program.createUBO();
-        this._uboHandler.updateSingle("opacity", new Float32Array([this._effectivePolygonOpacity()]));
+        this._uboHandler.updateSingle("opacity", this._effectiveOpacity("polygon"));
         this._uboHandler.updateSingle("defaultColor", new Float32Array(this._options.polygonStyle.defaultColor));
         if (this._options.pickable) {
             this._pickIndexBuffer = gl.createBuffer();
@@ -110,7 +118,7 @@ export class TerrainPolygonSemiPlugin {
             this._uboForRealEdgeArcs = this._program.createUBO();
             this._uboForRealEdgeArcs.updateSingle("defaultColor", new Float32Array(this._options.edgeStyle.defaultColor));
             this._uboForRealEdgeArcs.updateSingle("useDefaultColor", new Float32Array([1]));
-            this._uboForRealEdgeArcs.updateSingle("opacity", new Float32Array([this._effectiveEdgeOpacity()]));
+            this._uboForRealEdgeArcs.updateSingle("opacity", this._effectiveOpacity("edgeArc"));
             this._drawRealEdgeArcs.elementBuffer = gl.createBuffer();
         }
         if (this._options.variativeColorsOn) {
@@ -164,64 +172,45 @@ export class TerrainPolygonSemiPlugin {
         if (name.startsWith("private_")) {
             throw new Error(`Cannot set private uniform ${name}`);
         }
-        const isStyleKey = name === "defaultColor" || name === "pickedColor" || name === "opacity";
+        const isStyleKey = name === "defaultColor" || name === "pickedColor" || name === "opacity" || name === "useDefaultColor";
+        let targetUBO;
         if (target === "polygon") {
-            if (isStyleKey) {
-                const prev = this._options.polygonStyle[name];
-                if (prev === value)
-                    return;
-                this._options.polygonStyle[name] = value;
-                if (name === "opacity") {
-                    this._uboHandler.updateSingle("opacity", new Float32Array([this._effectivePolygonOpacity()]));
-                }
-                else {
-                    this._uboHandler.updateSingle(name, value);
-                }
-            }
-            else {
-                this._uboHandler.updateSingle(name, value);
-            }
+            targetUBO = this._uboHandler;
         }
         else if (target === "edgeArc") {
-            if (isStyleKey) {
-                const prev = this._options.edgeStyle[name];
-                if (prev === value)
-                    return;
-                this._options.edgeStyle[name] = value;
-                if (name === "opacity") {
-                    this._uboForRealEdgeArcs?.updateSingle("opacity", new Float32Array([this._effectiveEdgeOpacity()]));
-                }
-                else {
-                    this._uboForRealEdgeArcs?.updateSingle(name, value);
-                }
+            targetUBO = this._uboForRealEdgeArcs;
+        }
+        else {
+            console.warn(`Unknown target ${target} for setUniform, must be "polygon" or "edgeArc"`);
+            return;
+        }
+        if (isStyleKey) {
+            const prev = this._options.polygonStyle[name];
+            if (prev === value)
+                return;
+            this._options.polygonStyle[name] = value;
+            if (name === "opacity") {
+                targetUBO.updateSingle("opacity", this._effectiveOpacity(target));
             }
             else {
-                this._uboForRealEdgeArcs?.updateSingle(name, value);
+                targetUBO.updateSingle(name, value);
             }
         }
         else {
-            console.warn(`Unknown target ${target} for setUniform, must be "polygon" or "edgeArc"`);
+            targetUBO.updateSingle(name, value);
         }
         this.globe.DrawRender();
     }
-    setDrawEdgesState(state, options = {}) {
+    setDrawEdgesState(state) {
         const oldState = this._options.drawEdges;
         if (oldState === state)
             return;
-        if (options?.defaultColor) {
-            this._options.edgeStyle.defaultColor = options.defaultColor;
-        }
-        if (options?.pickedColor) {
-            this._options.edgeStyle.pickedColor = options.pickedColor;
-        }
-        if (options?.opacity !== undefined) {
-            this._options.edgeStyle.opacity = options.opacity;
-        }
         if (oldState === false && state === true) {
             this._uboForRealEdgeArcs = this._program.createUBO();
             this._uboForRealEdgeArcs.updateSingle("defaultColor", new Float32Array(this._options.edgeStyle.defaultColor));
-            this._uboForRealEdgeArcs.updateSingle("useDefaultColor", new Float32Array([1]));
-            this._uboForRealEdgeArcs.updateSingle("opacity", new Float32Array([this._effectiveEdgeOpacity()]));
+            this._uboForRealEdgeArcs.updateSingle("useDefaultColor", new Float32Array([this._options.edgeStyle.useDefaultColor ? 1 : 0]));
+            this._uboForRealEdgeArcs.updateSingle("pickedColor", new Float32Array(this._options.edgeStyle.pickedColor));
+            this._uboForRealEdgeArcs.updateSingle("opacity", this._effectiveOpacity("edgeArc"));
             this._drawRealEdgeArcs.elementBuffer = this.globe.gl.createBuffer();
         }
         else if (oldState === true && state === false) {
@@ -237,28 +226,42 @@ export class TerrainPolygonSemiPlugin {
     setOpacity(opacity) {
         if (this._options.opacity !== opacity) {
             this._options.opacity = opacity;
-            this._uboHandler.updateSingle("opacity", new Float32Array([this._effectivePolygonOpacity()]));
-            this._uboForRealEdgeArcs?.updateSingle("opacity", new Float32Array([this._effectiveEdgeOpacity()]));
+            this._uboHandler.updateSingle("opacity", this._effectiveOpacity("polygon"));
+            this._uboForRealEdgeArcs?.updateSingle("opacity", this._effectiveOpacity("edgeArc"));
             this.globe.DrawRender();
         }
     }
+    setPausePickableState(state) {
+        if (this._options.pickable === false) {
+            throw new Error("TerrainPolygonSemiPlugin is not pickable. Set pickable option to true on construction to enable picking.");
+        }
+        const oldState = this._options.pickablePause;
+        if (oldState === state)
+            return;
+        this._options.pickablePause = state;
+        // dont initialize anything. just set private_isPickedOn uniform 
+        this._uboHandler.updateSingle("private_isPickedOn", new Float32Array([state ? 0.0 : 1.0]));
+        this.globe.DrawRender();
+    }
     setPickableState(state) {
+        throw new Error("setPickableState is buggy. use setPausePickableState instead.");
         const oldState = this._options.pickable;
         if (oldState === state)
             return;
         if (oldState === false && state === true) {
-            // this._pickIndexBuffer = this.globe.gl.createBuffer();
+            this._pickIndexBuffer = this.globe.gl.createBuffer();
             this._uboHandler.updateSingle("private_isPickedOn", new Float32Array([1.0]));
             this._uboHandler.updateSingle("pickedColor", new Float32Array(this._options.polygonStyle.pickedColor));
-            // this._pickerDisplayer = new PickerDisplayer(this.globe, "R32I");
+            this._pickerDisplayer = new PickerDisplayer(this.globe, "R32I");
         }
         else if (oldState === true && state === false) {
-            // this.globe.gl.deleteBuffer(this._pickIndexBuffer!);
-            // this._pickIndexBuffer = null;
+            this.globe.gl.deleteBuffer(this._pickIndexBuffer);
+            this._pickIndexBuffer = null;
             this._uboHandler.updateSingle("private_isPickedOn", new Float32Array([0.0]));
-            // this._pickerDisplayer?.free();
-            // this._pickerDisplayer = null;
-            // this._lastPickedPolygon = null;
+            this._uboHandler.updateSingle("private_pickedIndex", new Float32Array([-1]));
+            this._pickerDisplayer?.free();
+            this._pickerDisplayer = null;
+            this._lastPickedPolygon = null;
         }
         this._options.pickable = state;
         this._workerContact.setPickableState(state);
@@ -399,7 +402,7 @@ export class TerrainPolygonSemiPlugin {
         if (this._options.showTesselationPoints) {
             this._program.draw(this._vao, this._drawPointsRangeIndexParams, this._uboHandler);
         }
-        if (this._pickerDisplayer && this._options.pickable) {
+        if (this._pickerDisplayer && !this._options.pickablePause) {
             this._pickerDisplayer.bindFBO();
             this._pickerDisplayer.clearTextures();
             // gl.enable(gl.DEPTH_TEST);
@@ -407,7 +410,7 @@ export class TerrainPolygonSemiPlugin {
         gl.frontFace(gl.CW);
         this._program.draw(this._vao, this._drawRangeIndexParams, this._uboHandler);
         gl.frontFace(gl.CCW);
-        if (this._pickerDisplayer && this._options.pickable) {
+        if (this._pickerDisplayer && !this._options.pickablePause) {
             gl.bindFramebuffer(gl.FRAMEBUFFER, null);
             this._pickerDisplayer.drawColorTexture();
             this._selfSelect();