Elius94
[Bug]: getCurrentNode() not working
What happened?
on the photo-sphere-viewer docs, under the virtualTour plugin, there's a method called getCurrentNode which is supposed to return the current node. I used this in react-photo-sphere-viewer after getting an instance of the virtualTour plugin and got an error. I have attached an Image containing the error
What should have happened?
return current node
Code
// create an instance of the plugins const handleReady = (instance) => { // marker plugin intance const markersPluginInstance = instance.getPlugin(MarkersPlugin);
// virtualTour plugin instance
const virtualTourPluginInstance = instance.getPlugin(VirtualTourPlugin);
virtualTourPluginInstance.setNodes(vtplg)
const recNode = virtualTourPluginInstance.getCurrentNode()
console.log(recNode);
if (markerPlug) {
markerPlug.addEventListener("select-marker", () => {
console.log("marker clicked");
});
}
};
Sandbox Link
No response
Library Version
"^3.4.0-psv5.4.0"
What operating system are you using?
macOS
What browser are you using?
Chrome
Logs
No response
Interest to fix the bug
- [ ] I would like to fix this bug!
thank you. i have already used the "node-changed" event listener to get my nodeId which is what i was after but it'll still be great to have the method fixed
Sorry for the delay. Maybe this can help some others :)
to keep access to this functions you have to work into the handleReady function, that provides the prop "instance". Instance is the actual photosphere viewer instance. You can store his library function inside a state of your app. Like this:
in the handleReady function you can bind getCurrentNode to for example "getCurrentNodeFunction":
const handleReady = (instance) => {
const virtualTour = instance.getPlugin(VirtualTourPlugin);
if (!virtualTour) return;
const getCurrentNode = virtualTour.getCurrentNode.bind(virtualTour);
setGetCurrentNodeFunction(() => getCurrentNode);
}
and you can use getCurrentNode everywhere: const curr_node = getCurrentNodeFunction();
import {
ReactPhotoSphereViewer,
} from "react-photo-sphere-viewer";
import { VirtualTourPlugin } from "@photo-sphere-viewer/virtual-tour-plugin";
import { MarkersPlugin } from "@photo-sphere-viewer/markers-plugin";
import { GalleryPlugin } from "@photo-sphere-viewer/gallery-plugin";
import "@photo-sphere-viewer/virtual-tour-plugin/index.css";
import "@photo-sphere-viewer/gallery-plugin/index.css";
import React from "react";
const baseUrl = "https://photo-sphere-viewer-data.netlify.app/assets/";
const caption = "Cape Florida Light, Key Biscayne <b>© Pixexid</b>";
function App() {
const pSRef = React.createRef();
const [getCurrentNodeFunction, setGetCurrentNodeFunction] = React.useState(null);
const handleReady = (instance) => {
const virtualTour = instance.getPlugin(VirtualTourPlugin);
if (!virtualTour) return;
const markerLighthouse = {
id: "marker-1",
image: baseUrl + "pictos/pin-red.png",
tooltip: "Cape Florida Light, Key Biscayne",
size: { width: 32, height: 32 },
anchor: "bottom center",
gps: [-80.155973, 25.666601, 29 + 3]
};
virtualTour.setNodes(
[
{
id: "1",
panorama: baseUrl + "tour/key-biscayne-1.jpg",
thumbnail: baseUrl + "tour/key-biscayne-1-thumb.jpg",
name: "One",
caption: `[1] ${caption}`,
links: [{ nodeId: "2" }],
markers: [markerLighthouse],
gps: [-80.156479, 25.666725, 3],
panoData: { poseHeading: 327 }
},
{
id: "2",
panorama: baseUrl + "tour/key-biscayne-2.jpg",
thumbnail: baseUrl + "tour/key-biscayne-2-thumb.jpg",
name: "Two",
caption: `[2] ${caption}`,
links: [{ nodeId: "3" }, { nodeId: "1" }],
markers: [markerLighthouse],
gps: [-80.156168, 25.666623, 3],
panoData: { poseHeading: 318 }
},
{
id: "3",
panorama: baseUrl + "tour/key-biscayne-3.jpg",
thumbnail: baseUrl + "tour/key-biscayne-3-thumb.jpg",
name: "Three",
caption: `[3] ${caption}`,
links: [{ nodeId: "4" }, { nodeId: "2" }, { nodeId: "5" }],
gps: [-80.155932, 25.666498, 5],
panoData: { poseHeading: 310 }
},
{
id: "4",
panorama: baseUrl + "tour/key-biscayne-4.jpg",
thumbnail: baseUrl + "tour/key-biscayne-4-thumb.jpg",
name: "Four",
caption: `[4] ${caption}`,
links: [{ nodeId: "3" }, { nodeId: "5" }],
gps: [-80.156089, 25.666357, 3],
panoData: { poseHeading: 78 }
},
{
id: "5",
panorama: baseUrl + "tour/key-biscayne-5.jpg",
thumbnail: baseUrl + "tour/key-biscayne-5-thumb.jpg",
name: "Five",
caption: `[5] ${caption}`,
links: [{ nodeId: "6" }, { nodeId: "3" }, { nodeId: "4" }],
gps: [-80.156292, 25.666446, 2],
panoData: { poseHeading: 190 }
},
{
id: "6",
panorama: baseUrl + "tour/key-biscayne-6.jpg",
thumbnail: baseUrl + "tour/key-biscayne-6-thumb.jpg",
name: "Six",
caption: `[6] ${caption}`,
links: [{ nodeId: "5" }, { nodeId: "7" }],
gps: [-80.156465, 25.666496, 2],
panoData: { poseHeading: 295 }
},
{
id: "7",
panorama: baseUrl + "tour/key-biscayne-7.jpg",
thumbnail: baseUrl + "tour/key-biscayne-7-thumb.jpg",
name: "Seven",
caption: `[7] ${caption}`,
links: [{ nodeId: "6" }],
gps: [-80.15707, 25.6665, 3],
panoData: { poseHeading: 250, posePitch: 3 }
}
],
"2"
);
const getCurrentNode = virtualTour.getCurrentNode.bind(virtualTour);
setGetCurrentNodeFunction(() => getCurrentNode);
};
const handleClick = () => {
const curr_node = getCurrentNodeFunction();
console.log(curr_node);
}
const plugins = [
MarkersPlugin,
[
GalleryPlugin,
{
thumbnailSize: { width: 100, height: 100 }
}
],
[
VirtualTourPlugin,
{
positionMode: "gps",
renderMode: "3d"
}
]
];
return (
<div className="App" id={"container-360"}>
<ReactPhotoSphereViewer
ref={pSRef}
loadingImg={baseUrl + "loader.gif"}
touchmoveTwoFingers={true}
mousewheelCtrlKey={true}
defaultYaw={"130deg"}
navbar={["zoom", "move", "gallery", "download", "description", "caption", "fullscreen"]}
height={"100vh"}
width={"100%"}
hideNavbarButton={true}
onReady={handleReady}
plugins={plugins}
container={"container-360"}
src={baseUrl + "tour/key-biscayne-3.jpg"}
></ReactPhotoSphereViewer>
<button onClick={handleClick}>Get Current Node</button>
</div>
);
}
export default App;
Thanks