Merge pull request #109 from amosproj/release-candidate-11

Include Release candidate 11 on main branch
amosproj · Jun 30, 2021 · 2d26937 · 2d26937
2 parents aa1410e + 307f7c1
commit 2d26937
Show file tree

Hide file tree

Showing 9 changed files with 324 additions and 126 deletions.
diff --git a/index.html b/index.html
@@ -21,14 +21,22 @@
 </head>
 <body>
     <iframe id="amos"></iframe>
-    <script>
+    <script type="module">
+        import { TestViewerAPI } from './src/js/viewer/TestViewerAPI.js'
+
         // Callback function to start viewer via viewerAsync
         window.parent = {
             callback: function(viewerWindow, viewerAsync) {
                 console.info("initial callback called:", viewerWindow, viewerAsync);
-                viewerAsync("../assets/", (api) => {
+                viewerAsync("https://bora.bup-nbg.de/amos2floors", (api) => {
 
                     console.info("loaded callback called with API:", api);
+
+                    // test the API
+                    const test = new TestViewerAPI(api);
+                    test.eventMeshTest(0, 0, -2, ["vwr_onclick", "vwr_oncontext", "vwr_onpointer"]);
+                    test.eventMeshTest(0, 5);
+                    test.addListeners();
                 });
             }
         };

diff --git a/src/js/viewer/TestViewerAPI.js b/src/js/viewer/TestViewerAPI.js
@@ -0,0 +1,103 @@
+"use strict";
+
+import { ViewerContextItem } from "./ViewerContextItem.js";
+
+
+export class TestViewerAPI {
+
+    constructor(viewerAPI) {
+        this.viewerAPI = viewerAPI;
+    }
+
+    eventMeshTest(x = 0, y = 0, z = -2, exclude = ["vwr_onpointer", "vwr_ondrag"]) {
+        // visual test, spawn in white sphere at first image position in scene (offset specified by parameters)
+        const sphere = new this.viewerAPI.THREE.SphereGeometry(1 / 5, 10, 10);
+        const testMesh = new this.viewerAPI.THREE.Mesh(sphere, new this.viewerAPI.THREE.MeshBasicMaterial());
+        const startPos = this.viewerAPI.toLocal(this.viewerAPI.image.currentImage.pos);
+        testMesh.position.set(startPos.x + x, startPos.y + y, startPos.z + z);
+
+        if (!exclude.includes("vwr_onclick")) {
+            testMesh.vwr_onclick = function (xy, position) {
+                this.material.color.set(0xff0000); // as a test set color red
+                console.log("vwr_onclick is triggered.");
+                console.log("Pointer position: ", xy);
+                console.log("Local coordinate for pointer position: ", position);
+                return true;
+            }
+        }
+
+        if (!exclude.includes("vwr_oncontext")) {
+            testMesh.vwr_oncontext = function (xy, position) {
+                this.material.color.set(0x00ff00); // as a test set color green
+                console.log("vwr_oncontext is triggered.");
+                console.log("Pointer position: ", xy);
+                console.log("Local coordinate for pointer position: ", position);
+
+                //Creating callback function for context menu item:
+                let callback = function (key, options) {
+                    var msg = 'clicked: ' + key;
+                    (window.console && console.log(msg)) || alert(msg);
+                };
+
+                //Creating item objects
+                let itemEdit = new ViewerContextItem(callback, "edit", null, "Edit");
+                let itemCut = new ViewerContextItem(callback, "cut", null, "Cut");
+
+                //Creating list of item objects.
+                return [itemEdit, itemCut];
+            }
+        }
+
+        if (!exclude.includes("vwr_onpointer")) {
+            testMesh.vwr_onpointerenter = function () {
+                this.material.color.set(0xffff00); // as a test set color yellow
+                console.log("vwr_onpointerenter is triggered.");
+            }
+
+            testMesh.vwr_onpointerleave = function () {
+                this.material.color.set(0x0000ff); // as a test set color blue
+                console.log("vwr_onpointerleave is triggered.");
+            }
+        }
+
+        if (!exclude.includes("vwr_ondrag")) {
+            testMesh.vwr_ondragstart = function (xy, position) {
+                this.material.color.set(0xff0000); // as a test set color red
+                console.log("vwr_ondragstart is triggered.");
+                console.log("Pointer position: ", xy);
+                console.log("Local coordinate for pointer position: ", position);
+                return true;
+            }
+
+            testMesh.vwr_ondrag = function (xy, position) {
+                this.material.color.set(0x00ff00); // as a test set color green
+                console.log("vwr_ondrag is triggered.");
+                //console.log("Pointer position: " , xy);
+                //console.log("Local coordinate for pointer position: " , position);
+            }
+
+            testMesh.vwr_ondragend = function () {
+                this.material.color.set(0x0000ff); // as a test set color blue
+                console.log("vwr_ondragend is triggered.");
+            }
+        }
+
+        this.viewerAPI.pano.addLayer(testMesh);
+    }
+
+    addListeners() {
+        const logIt = function (name, payload, human) {
+            const h = human ? " by user" : " not by user";
+            if (name == "moved") {
+                console.log(name + " to " + payload + h);
+            } else if (name == "viewed") {
+                console.log(name + " " + payload.lonov + " " + payload.latov + " " + payload.fov + h);
+            } else if (name == "floor") {
+                console.log(name + " " + payload + h);
+            }
+        }
+
+        this.viewerAPI.listen(logIt);
+    }
+
+}
diff --git a/src/js/viewer/ViewerAPI.js b/src/js/viewer/ViewerAPI.js
@@ -7,7 +7,6 @@ import { ViewerMapAPI } from "./ViewerMapAPI.js"
 import { ViewerState } from "./ViewerState.js";
 import { libraryInfo } from "./LibraryInfo.js";
 import { ViewerVersionAPI } from "./ViewerVersionAPI.js";
-import { ViewerContextItem } from "./ViewerContextItem.js";
 import { LON_SCALAR, LAN_SCALAR } from "./ViewerConfig.js";
 
 
@@ -37,15 +36,15 @@ export class ViewerAPI {
             context: this,
             xhrFields: {
                 withCredentials: true
-            }
+            },
+            async : false
         }).done((data) => {
             this.image = new ViewerImageAPI(data.images);
             this.floor = new ViewerFloorAPI(data, this);
 
             this.pano = new ViewerPanoAPI(this);
             this.map = new ViewerMapAPI(this);
         }).then(() => {
-            document.addEventListener('mousedown', function (e) { e.preventDefault(); }, false);
             // the only html element we work with (the pano-viewer div)
             const panoDiv = document.getElementById('pano-viewer');
 
@@ -161,54 +160,6 @@ export class ViewerAPI {
             globalCoords[2] + this.floor.currentFloor.z);
     }
 
-    eventMeshTest(x = 0, y = 0, z = -2) {
-        // visual test, spawn in white sphere at first image position in scene (offset specified by parameters)
-        const sphere = new THREE.SphereGeometry(1 / 5, 10, 10);
-        const testMesh = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial());
-        const startPos = this.toLocal(this.image.currentImage.pos);
-        testMesh.position.set(startPos.x + x, startPos.y + y, startPos.z + z);
-
-        testMesh.vwr_onclick = function (xy, position) {
-            this.material.color.set(0xff0000); // as a test set color red
-            console.log("vwr_onclick is triggered.");
-            console.log("Pointer position: " , xy);
-            console.log("Local coordinate for pointer position: " , position);
-            return true;
-        }
-
-        testMesh.vwr_oncontext = function (xy, position) {
-            this.material.color.set(0x00ff00); // as a test set color green
-            console.log("vwr_oncontext is triggered.");
-            console.log("Pointer position: " , xy);
-            console.log("Local coordinate for pointer position: " , position);
-
-            //Creating callback function for context menu item:
-            let callback = function (key, options) {
-                var msg = 'clicked: ' + key;
-                (window.console && console.log(msg)) || alert(msg);
-            };
-
-            //Creating item objects
-            let itemEdit = new ViewerContextItem(callback, "edit", null, "Edit");
-            let itemCut = new ViewerContextItem(callback, "cut", null, "Cut");
-
-            //Creating list of item objects.
-            return [itemEdit, itemCut];
-        }
-
-        testMesh.vwr_onpointerenter = function () {
-            this.material.color.set(0xffff00); // as a test set color yellow
-            console.log("vwr_onpointerenter is triggered.");
-        }
-
-        testMesh.vwr_onpointerleave = function () {
-            this.material.color.set(0x0000ff); // as a test set color blue
-            console.log("vwr_onpointerleave is triggered.");
-        }
-
-        this.pano.addLayer(testMesh);
-    }
-
     // TODO: swap() and big(wanted)
 
 }
diff --git a/src/js/viewer/ViewerImage.js b/src/js/viewer/ViewerImage.js
@@ -20,6 +20,7 @@ export class ViewerImage {
 
         this.mapOffset; // : [offsetX, offsetY] // in pixels, offset from map png
 
+        this.imagesInRadius = null; // : [ViewerImage] // used for displaying closest pano mesh at cursor (set in ViewerImageAPI:calcImagesInPanoSphere)
     }
 
 }
diff --git a/src/js/viewer/ViewerImageAPI.js b/src/js/viewer/ViewerImageAPI.js
@@ -33,4 +33,29 @@ export class ViewerImageAPI {
         return this.currentImage();
     }
 
+    calcImagesInPanoSphere(radius, viewerAPI) {
+        if (this.currentImage.imagesInRadius != null) return this.currentImage.imagesInRadius; // already calculated
+
+        this.currentImage.imagesInRadius = [];
+
+        const currGlobalPos = this.currentImage.pos;
+        const currLocalPos = viewerAPI.toLocal([currGlobalPos[0], currGlobalPos[1], currGlobalPos[2]]);
+
+        viewerAPI.floor.currentFloor.viewerImages.forEach(element => {
+            const loopLocalPos = viewerAPI.toLocal(element.pos);
+            const [dx, dy] = [currLocalPos.x - loopLocalPos.x, currLocalPos.y - loopLocalPos.y];
+            const currDistance = Math.sqrt(dx * dx + dy * dy);
+
+            if (currDistance <= radius) {
+                this.currentImage.imagesInRadius.push(element);
+            }
+        });
+
+        if (this.currentImage.imagesInRadius == []) {
+            console.error("No other positions found in sphere radius");
+        }
+
+        return this.currentImage.imagesInRadius;
+    }
+
 }
diff --git a/src/js/viewer/ViewerMapAPI.js b/src/js/viewer/ViewerMapAPI.js
@@ -36,7 +36,7 @@ export class ViewerMapAPI {
 
         map.addEventListener('fullscreenchange', (event) => {
             // If map set to full screen, hide the floor setting buttons
-            hideButtons( "floorOL"); 
+            hideButtons("floorOL");
         });
         this.control_button();
     }
@@ -284,22 +284,23 @@ export class ViewerMapAPI {
         var mapdata = this.viewerFloorAPI.floors[this.viewerFloorAPI.currentFloorId].mapData;
         var floor = this.viewerFloorAPI;
         var z = this.viewerFloorAPI.floors[this.viewerFloorAPI.currentFloorId].z;
-        var viewerAPI = this.viewerAPI; 
+        var viewerAPI = this.viewerAPI;
 
-        this.map.on('dblclick', function(event){
+        this.map.on('dblclick', function (event) {
 
             coord = event.coordinate;
             mousePosition.push(((coord[0] - (mapdata.x / mapdata.density)) / (LON_SCALAR * 1000) ) + floor.origin[0]);
             mousePosition.push(((coord[1] - (mapdata.y / mapdata.density)) / (LAN_SCALAR * 1000) ) + floor.origin[1]);
 
             // move 
-            viewerAPI.move(mousePosition[0],mousePosition[1],z);
+            viewerAPI.move(mousePosition[0], mousePosition[1], z);
+        });
 
-        })
+        viewerAPI.propagateEvent("moved", viewerAPI.image.currentImage.id, true);
     }
 
-    setMiddle(poslon, poslan){
-            this.map.getView().setCenter([poslon,poslan]);
+    setMiddle(poslon, poslan) {
+        this.map.getView().setCenter([poslon,poslan]);
     }
 
     control_button(){
@@ -328,7 +329,6 @@ export class ViewerMapAPI {
 }
 
 function hideButtons(divId) {
-
     //let divId = "floorOL"; 
     var element = document.getElementById(divId); 
 
@@ -338,4 +338,4 @@ function hideButtons(divId) {
     } else {
       element.style.display = "none";
     }
-  }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,6 +20,7 @@ export class ViewerImage { @@
             this.mapOffset; // : [offsetX, offsetY] // in pixels, offset from map png
+            this.imagesInRadius = null; // : [ViewerImage] // used for displaying closest pano mesh at cursor (set in ViewerImageAPI:calcImagesInPanoSphere)
         }
     }