Add cylinder to inspect mode

cylinder.js

@@ -7,6 +7,7 @@ import {
     clearRangeImages,
 } from "./interaction";
 import { setSliderValue } from "./panel";
+import { saveCylinder } from "./inspect";
 
 var radius = 0.5;
 
@@ -182,11 +183,16 @@ function paintRange() {
     paintRangeImages(rangeImages);
 }
 
+function saveCylinderToInspectMode() {
+    saveCylinder(centerPoint, radius, height, vector);
+}
+
 export {
     openCylindricalImages,
     createCylinder,
     cancelCylinder,
     applyCylindricalRadius,
     setScene,
     applyCylindricalHeight,
+    saveCylinderToInspectMode,
 };

inspect.js

@@ -17,25 +17,42 @@ function setScene(s) {
     scene = s;
 }
 
-function saveSphere(C, radius) {
+function saveSphere(C, r) {
     const geometry = new THREE.SphereGeometry(0.05, 10, 10);
     const material = new THREE.MeshBasicMaterial({
-        color: 0xaaaaaa,
+        color: NORMAL_COLOR,
     });
     const sphereObject = new THREE.Mesh(geometry, material);
 
     scene.add(sphereObject);
 
     sphereObject.position.set(C.x, C.y, C.z);
-    sphereObject.userData.radius = radius;
+    sphereObject.userData.radius = r;
     sphereObject.name = "Sphere" + spheres.length;
     sphereObject.visible = false;
-
     spheres.push(sphereObject);
 }
 
-function saveCylinder() {
-    console.log("Saving");
+function saveCylinder(C, r, h, V) {
+    const geometry = new THREE.CylinderGeometry(0.05, 0.05, 0.1, 10).rotateX(Math.PI / 2);
+    const material = new THREE.MeshBasicMaterial({
+        color: NORMAL_COLOR,
+    });
+
+    const cylinderObject = new THREE.Mesh(geometry, material);
+
+    scene.add(cylinderObject);
+
+    cylinderObject.lookAt(V.normalize());
+    cylinderObject.position.set(C.x, C.y, C.z);
+
+    cylinderObject.userData.radius = r;
+    cylinderObject.userData.height = h;
+    cylinderObject.userData.vector = V;
+
+    cylinderObject.name = "Cylinder" + cylinders.length;
+    cylinderObject.visible = false;
+    cylinders.push(cylinderObject);
 }
 
 function savePlane() {
@@ -44,15 +61,30 @@ function savePlane() {
 
 function setFiguresVisibility(show) {
     if (spheres.length > 0) spheres.forEach((s) => (s.visible = show));
+    if (cylinders.length > 0) cylinders.forEach((c) => (c.visible = show));
+    if (planes.length > 0) planes.forEach((p) => (p.visible = show));
 }
 
 function openFigure(objects) {
     let object = firstFigure(objects);
     if (!object) return;
-    if (spheres.length > 0)
+    if (object.name.startsWith("Sphere") && spheres.length > 0)
         spheres.forEach((s) => {
             if (s.name == object.name) openSphericalImages(s.position, s.userData.radius);
-            console.log("a");
+        });
+    if (object.name.startsWith("Cylinder") && cylinders.length > 0)
+        cylinders.forEach((c) => {
+            if (c.name == object.name)
+                openCylindricalImages(
+                    c.userData.vector,
+                    c.position,
+                    c.userData.radius,
+                    c.userData.height
+                );
+        });
+    if (object.name.startsWith("Plane") && spheres.length > 0)
+        planes.forEach((p) => {
+            if (p.name == object.name) openSphericalImages(p.position, p.userData.radius);
         });
 }
 
@@ -64,12 +96,27 @@ function hoveringFigure(objects) {
             if (s.name == object.name) s.material.color.setHex(HOVER_COLOR);
             else s.material.color.setHex(NORMAL_COLOR);
         });
+    if (cylinders.length > 0)
+        cylinders.forEach((c) => {
+            if (c.name == object.name) c.material.color.setHex(HOVER_COLOR);
+            else c.material.color.setHex(NORMAL_COLOR);
+        });
+    if (planes.length > 0)
+        planes.forEach((p) => {
+            if (p.name == object.name) p.material.color.setHex(HOVER_COLOR);
+            else p.material.color.setHex(NORMAL_COLOR);
+        });
 }
 
 function firstFigure(objects) {
     for (let i = 0; i < objects.length; i++) {
         const o = objects[i];
-        if (o.object.name.startsWith("Sphere")) return o.object;
+        if (
+            o.object.name.startsWith("Sphere") ||
+            o.object.name.startsWith("Cylinder") ||
+            o.object.name.startsWith("Plane")
+        )
+            return o.object;
     }
     return null;
 }
@@ -112,6 +159,72 @@ function getSphere2DCoords(P, C) {
     return { x: theta, y: phi };
 }
 
+function openCylindricalImages(vector, centerPoint, radius, height) {
+    let images = getAllImages();
+    let json = [];
+
+    const V = new THREE.Vector3(vector.x, vector.y, vector.z).multiplyScalar(height / 2);
+    const endPoint1 = new THREE.Vector3(centerPoint.x, centerPoint.y, centerPoint.z).add(V);
+    const endPoint2 = new THREE.Vector3(centerPoint.x, centerPoint.y, centerPoint.z).sub(V);
+    const infiniteVector = new THREE.Vector3(V.x, V.y, V.z).multiplyScalar(1000);
+    const point1 = new THREE.Vector3(centerPoint.x, centerPoint.y, centerPoint.z).add(
+        infiniteVector
+    );
+    const point2 = new THREE.Vector3(centerPoint.x, centerPoint.y, centerPoint.z).sub(
+        infiniteVector
+    );
+
+    const segment = new THREE.Line3(endPoint1, endPoint2);
+    const infiniteLine = new THREE.Line3(point1, point2);
+
+    var originProjected = new THREE.Vector3();
+    const origin = new THREE.Vector3(0, 0, 0);
+    infiniteLine.closestPointToPoint(origin, false, originProjected);
+    const originVector = new THREE.Vector3().subVectors(originProjected, origin).normalize();
+
+    images.forEach((object) => {
+        const P_real = new THREE.Vector3().copy(object.position);
+        const P_inter = new THREE.Vector3().copy(object.userData.intersection);
+        if (P_inter == null) return;
+
+        var lProjected = new THREE.Vector3();
+        var sProjected = new THREE.Vector3();
+        infiniteLine.closestPointToPoint(P_real, true, lProjected);
+        segment.closestPointToPoint(P_real, true, sProjected);
+        const lineDistance = lProjected.distanceTo(P_real).toFixed(5);
+        const segmentDistance = sProjected.distanceTo(P_real).toFixed(5);
+        if (lineDistance < radius && lineDistance == segmentDistance) {
+            const real_pos = getCylinder2DCoords(P_real, segment, originVector, centerPoint);
+            const inter_pos = getCylinder2DCoords(P_inter, segment, originVector, centerPoint);
+            json.push({
+                name: object.name,
+                x_real: real_pos.x,
+                y_real: real_pos.y,
+                x_inter: inter_pos.x,
+                y_inter: inter_pos.y,
+                isLandscape: object.userData.isLandscape,
+                heightToWidthRatio: object.userData.heightToWidthRatio,
+                zoom: object.userData.zoom,
+            });
+        }
+    });
+
+    let jsonContent = JSON.stringify(json);
+    localStorage.setItem("images", jsonContent);
+    const url = "openseadragon.html?mode=cylindrical";
+
+    window.open(url, "_blank");
+}
+
+function getCylinder2DCoords(P, segment, originVector, centerPoint) {
+    var sProjected = new THREE.Vector3();
+    segment.closestPointToPoint(P, true, sProjected);
+    const pointVector = new THREE.Vector3().subVectors(sProjected, P).normalize();
+    const x = originVector.angleTo(pointVector);
+    const y = centerPoint.distanceTo(sProjected);
+    return { x: x, y: -y };
+}
+
 export {
     saveSphere,
     saveCylinder,

panel.js

@@ -20,13 +20,15 @@ import {
     changePlaneHeight,
     changePlaneWidth,
     openPlane,
+    //savePlaneToInspectMode,
 } from "./plane.js";
 
 import {
     cancelCylinder,
     applyCylindricalRadius,
     openCylindricalImages,
     applyCylindricalHeight,
+    saveCylinderToInspectMode,
 } from "./cylinder.js";
 
 import { setFiguresVisibility } from "./inspect.js";
@@ -166,7 +168,7 @@ function createPanel() {
             setSelectionMode("plane");
         },
         "Save figure to Inspect mode": function () {
-            console.log("Saving plane");
+            //savePlaneToInspectMode();
         },
         Cancel: function () {
             cancelPlane();
@@ -215,7 +217,7 @@ function createPanel() {
         Radius: 0.5,
         Height: 1.0,
         "Save figure to Inspect mode": function () {
-            console.log("Saving cylinder");
+            saveCylinderToInspectMode();
         },
         Cancel: function () {
             cancelCylinder();