react-photo-sphere-viewer
Version:
A React wrapper for Photo Sphere Viewer, to display 360° panoramas with ease.
514 lines (505 loc) • 30.7 kB
JavaScript
import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, typeof as _typeof } from './_virtual/_rollupPluginBabelHelpers.js';
import React, { forwardRef, useMemo, useRef, useState, useEffect, useImperativeHandle, useCallback } from 'react';
import { Viewer } from '@photo-sphere-viewer/core';
import '@photo-sphere-viewer/core/index.css';
import EventEmitter from './node_modules/eventemitter3/index.js';
var eventEmitter = new EventEmitter();
var Emitter = {
on: function on(event, fn) {
return eventEmitter.on(event, fn);
},
once: function once(event, fn) {
return eventEmitter.once(event, fn);
},
off: function off(event, fn) {
return eventEmitter.off(event, fn);
},
emit: function emit(event, payload) {
return eventEmitter.emit(event, payload);
}
};
Object.freeze(Emitter);
var omittedProps = ["src", "height", "width", "hideNavbarButton", "containerClass", "littlePlanet", "onPositionChange", "onZoomChange", "onClick", "onDblclick", "onReady"];
/**
* Props interface for the Viewer component.
*
* @interface
* @property {string} src - The source of the image to be viewed.
* @property {boolean | string | Array<string | NavbarCustomButton>} [navbar] - Configuration for the navbar. Can be a boolean, string, or an array of strings or NavbarCustomButton.
* @property {string} height - The height of the viewer.
* @property {string} [width] - The width of the viewer.
* @property {string} [containerClass] - The CSS class for the viewer container.
* @property {boolean} [littlePlanet] - Enable or disable the little planet effect.
* @property {boolean | number} [fishEye] - Enable or disable the fisheye effect, or set the fisheye level.
* @property {boolean} [hideNavbarButton] - Show/hide the button that hides the navbar.
* @property {Object} [lang] - Language configuration for the viewer. Each property is a string that represents the text for a specific action.
* @property {Function} [onPositionChange] - Event handler for when the position changes. Receives the latitude, longitude, and the Viewer instance.
* @property {Function} [onZoomChange] - Event handler for when the zoom level changes. Receives the ZoomUpdatedEvent and the Viewer instance.
* @property {Function} [onClick] - Event handler for when the viewer is clicked. Receives the ClickEvent and the Viewer instance.
* @property {Function} [onDblclick] - Event handler for when the viewer is double clicked. Receives the ClickEvent and the Viewer instance.
* @property {Function} [onReady] - Event handler for when the viewer is ready. Receives the Viewer instance.
*/
var defaultNavbar = ["zoom", "fullscreen"];
function adaptOptions(options) {
var adaptedOptions = _objectSpread2({}, options);
for (var key in adaptedOptions) {
if (omittedProps.includes(key)) {
delete adaptedOptions[key];
}
}
return adaptedOptions;
}
function map(_in, inMin, inMax, outMin, outMax) {
return (_in - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
}
function filterNavbar(navbar) {
if (navbar == null) return defaultNavbar;
if (!Array.isArray(navbar)) {
if (typeof navbar === "string") {
return navbar === "" ? false : [navbar];
}
return navbar ? defaultNavbar : false;
}
return navbar;
}
function useDomElement() {
var _useState = useState(),
_useState2 = _slicedToArray(_useState, 2),
element = _useState2[0],
setElement = _useState2[1];
var ref = useCallback(function (r) {
if (r && r !== element) {
setElement(r);
}
}, [element]);
return [element, ref];
}
/**
* Interface for the Viewer API.
*
* @interface
* @property {Function} animate - Starts an animation. Receives an object of AnimateOptions.
* @property {Function} destroy - Destroys the viewer.
* @property {Function} createTooltip - Creates a tooltip. Receives a TooltipConfig object.
* @property {Function} needsContinuousUpdate - Enables or disables continuous updates. Receives a boolean.
* @property {Function} observeObjects - Starts observing objects. Receives a string key.
* @property {Function} unobserveObjects - Stops observing objects. Receives a string key.
* @property {Function} setCursor - Sets the cursor. Receives a string.
* @property {Function} stopAnimation - Stops the current animation. Returns a Promise.
* @property {Function} rotate - Rotates the viewer. Receives an ExtendedPosition object.
* @property {Function} setOption - Sets a single option. Receives an option key and a value.
* @property {Function} setOptions - Sets multiple options. Receives an object of options.
* @property {Function} getCurrentNavbar - Returns the current navbar.
* @property {Function} zoom - Sets the zoom level. Receives a number.
* @property {Function} zoomIn - Increases the zoom level. Receives a number.
* @property {Function} zoomOut - Decreases the zoom level. Receives a number.
* @property {Function} resize - Resizes the viewer. Receives a CssSize object.
* @property {Function} enterFullscreen - Enters fullscreen mode.
* @property {Function} exitFullscreen - Exits fullscreen mode.
* @property {Function} toggleFullscreen - Toggles fullscreen mode.
* @property {Function} isFullscreenEnabled - Returns whether fullscreen is enabled.
* @property {Function} getPlugin - Returns a plugin. Receives a plugin ID or a PluginConstructor.
* @property {Function} getPosition - Returns the current position.
* @property {Function} getZoomLevel - Returns the current zoom level.
* @property {Function} getSize - Returns the current size.
* @property {Function} needsUpdate - Updates the viewer.
* @property {Function} autoSize - Sets the size to auto.
* @property {Function} setPanorama - Sets the panorama. Receives a path and an optional PanoramaOptions object. Returns a Promise.
* @property {Function} showError - Shows an error message. Receives a string.
* @property {Function} hideError - Hides the error message.
* @property {Function} startKeyboardControl - Starts keyboard control.
* @property {Function} stopKeyboardControl - Stops keyboard control.
*/
var ReactPhotoSphereViewer = /*#__PURE__*/forwardRef(function (props, ref) {
var _useDomElement = useDomElement(),
_useDomElement2 = _slicedToArray(_useDomElement, 2),
sphereElement = _useDomElement2[0],
setRef = _useDomElement2[1];
var options = useMemo(function () {
return props;
}, [
// recreate options when individual props change
props.panorama, props.src, props.size, props.canvasBackground, props.navbar, props.height, props.width, props.containerClass, props.hideNavbarButton || true, props.littlePlanet, props.fishEye, props.lang, props.onPositionChange, props.onZoomChange, props.onClick, props.onDblclick, props.onReady, props.moveSpeed, props.zoomSpeed, props.moveInertia, props.mousewheel, props.mousemove, props.mousewheelCtrlKey, props.touchmoveTwoFingers, props.panoData, props.requestHeaders, props.withCredentials, props.keyboard, props.keyboardActions, props.plugins, props.adapter, props.sphereCorrection, props.minFov, props.maxFov, props.defaultZoomLvl, props.defaultYaw, props.defaultPitch, props.caption, props.description, props.downloadUrl, props.downloadName, props.loadingImg, props.loadingTxt, props.rendererParameters, props.defaultTransition]);
var spherePlayerInstance = useRef(null);
var LITTLEPLANET_MAX_ZOOM = 130;
var _useState3 = useState(-90),
_useState4 = _slicedToArray(_useState3, 1),
LITTLEPLANET_DEF_LAT = _useState4[0];
var _useState5 = useState(2),
_useState6 = _slicedToArray(_useState5, 1),
LITTLEPLANET_FISHEYE = _useState6[0];
var _useState7 = useState(0),
_useState8 = _slicedToArray(_useState7, 1),
LITTLEPLANET_DEF_ZOOM = _useState8[0];
var _useState9 = useState(defaultNavbar),
_useState10 = _slicedToArray(_useState9, 2),
currentNavbar = _useState10[0],
setCurrentNavbar = _useState10[1];
var littlePlanetEnabledRef = useRef(true);
useEffect(function () {
function handleResize() {
var aspectRatio = window.innerWidth / window.innerHeight;
//console.log(aspectRatio)
LITTLEPLANET_MAX_ZOOM = Math.floor(map(aspectRatio, 0.5, 1.8, 140, 115));
}
// Add event listener
window.addEventListener("resize", handleResize);
handleResize();
return function () {
return window.removeEventListener("resize", handleResize);
};
}, []);
useEffect(function () {
if (sphereElement && !spherePlayerInstance.current) {
var _options$minFov, _options$maxFov, _options$defaultZoomL, _options$defaultYaw, _options$defaultPitch, _options$moveInertia, _options$mousewheel, _options$mousemove, _options$plugins;
var _c = new Viewer(_objectSpread2(_objectSpread2({}, adaptOptions(options)), {}, {
container: sphereElement,
panorama: options.panorama || options.src,
size: {
height: options.height,
width: options.width || "100px"
},
fisheye: options.littlePlanet ? LITTLEPLANET_FISHEYE : options.fisheye || false,
minFov: (_options$minFov = options.minFov) !== null && _options$minFov !== void 0 ? _options$minFov : 30,
maxFov: options.littlePlanet ? LITTLEPLANET_MAX_ZOOM : (_options$maxFov = options.maxFov) !== null && _options$maxFov !== void 0 ? _options$maxFov : 90,
defaultZoomLvl: options.littlePlanet ? LITTLEPLANET_DEF_ZOOM : (_options$defaultZoomL = options.defaultZoomLvl) !== null && _options$defaultZoomL !== void 0 ? _options$defaultZoomL : 50,
defaultYaw: (_options$defaultYaw = options.defaultYaw) !== null && _options$defaultYaw !== void 0 ? _options$defaultYaw : 0,
defaultPitch: options.littlePlanet ? LITTLEPLANET_DEF_LAT : (_options$defaultPitch = options.defaultPitch) !== null && _options$defaultPitch !== void 0 ? _options$defaultPitch : 0,
sphereCorrection: options.sphereCorrection || {
pan: 0,
tilt: 0,
roll: 0
},
moveSpeed: options.moveSpeed || 1,
zoomSpeed: options.zoomSpeed || 1,
// when it undefined, = true, then use input value.
// The input value maybe false, value || true => false => true
moveInertia: (_options$moveInertia = options.moveInertia) !== null && _options$moveInertia !== void 0 ? _options$moveInertia : true,
mousewheel: options.littlePlanet ? false : (_options$mousewheel = options.mousewheel) !== null && _options$mousewheel !== void 0 ? _options$mousewheel : true,
mousemove: (_options$mousemove = options.mousemove) !== null && _options$mousemove !== void 0 ? _options$mousemove : true,
mousewheelCtrlKey: options.mousewheelCtrlKey || false,
touchmoveTwoFingers: options.touchmoveTwoFingers || false,
panoData: options.panoData || undefined,
requestHeaders: options.requestHeaders || undefined,
withCredentials: options.withCredentials || false,
navbar: filterNavbar(options.navbar),
lang: options.lang || {},
keyboard: options.keyboard || "fullscreen",
plugins: (_options$plugins = options.plugins) !== null && _options$plugins !== void 0 ? _options$plugins : []
}));
_c.addEventListener("ready", function () {
if (options.onReady) {
options.onReady(_c);
}
}, {
once: true
});
_c.addEventListener("click", function (data) {
if (options.onClick) {
options.onClick(data, _c);
}
if (options.littlePlanet && littlePlanetEnabledRef.current) {
littlePlanetEnabledRef.current = false;
// fly inside the sphere
_c.animate({
yaw: 0,
pitch: LITTLEPLANET_DEF_LAT,
zoom: 75,
speed: "3rpm"
}).then(function () {
// watch on the sky
_c.animate({
yaw: 0,
pitch: 0,
zoom: 90,
speed: "10rpm"
}).then(function () {
var _options$mousewheel2;
// Disable Little Planet.
_c.setOption("maxFov", options.maxFov || 70);
_c.setOption("mousewheel", (_options$mousewheel2 = options.mousewheel) !== null && _options$mousewheel2 !== void 0 ? _options$mousewheel2 : true);
});
});
}
});
_c.addEventListener("dblclick", function (data) {
if (options.onDblclick) {
options.onDblclick(data, _c);
}
});
_c.addEventListener("zoom-updated", function (zoom) {
if (options.onZoomChange) {
options.onZoomChange(zoom, _c);
}
});
_c.addEventListener("position-updated", function (position) {
if (options.onPositionChange) {
options.onPositionChange(position.position.pitch, position.position.yaw, _c);
}
});
var _currentNavbar = filterNavbar(options.navbar);
if (options.littlePlanet) {
var _props$lang, _props$lang2;
var littlePlanetIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 20C16.4183 20 20 16.4183 20 12C20 11.8805 19.9974 11.7615 19.9922 11.6433C20.2479 11.4141 20.4882 11.1864 20.7118 10.9611C21.0037 10.6672 21.002 10.1923 20.708 9.90049C20.4336 9.628 20.0014 9.61143 19.7077 9.84972C19.4023 8.75248 18.8688 7.75024 18.1616 6.89725C18.4607 6.84611 18.7436 6.8084 19.0087 6.784C19.4212 6.74604 19.7247 6.38089 19.6868 5.96842C19.6488 5.55595 19.2837 5.25235 18.8712 5.29032C18.4474 5.32932 17.9972 5.39638 17.5262 5.48921C17.3267 5.52851 17.1614 5.64353 17.0543 5.79852C15.6765 4.67424 13.917 4 12 4C7.58172 4 4 7.58172 4 12C4 12.2776 4.01414 12.552 4.04175 12.8223C3.78987 12.7532 3.50899 12.8177 3.31137 13.0159C2.97651 13.3517 2.67596 13.6846 2.415 14.0113C2.15647 14.3349 2.20924 14.8069 2.53287 15.0654C2.8565 15.3239 3.32843 15.2711 3.58696 14.9475C3.78866 14.695 4.02466 14.4302 4.2938 14.1557C4.60754 15.2796 5.16056 16.3037 5.8945 17.1697C5.66824 17.3368 5.54578 17.6248 5.60398 17.919C5.68437 18.3253 6.07894 18.5896 6.48528 18.5092C6.7024 18.4662 6.92455 18.4177 7.15125 18.3637C8.49656 19.3903 10.1771 20 12 20ZM7.15125 18.3637C6.69042 18.012 6.26891 17.6114 5.8945 17.1697C5.98073 17.106 6.08204 17.0599 6.19417 17.0377C7.19089 16.8405 8.33112 16.5084 9.55581 16.0486C9.94359 15.903 10.376 16.0994 10.5216 16.4872C10.6671 16.8749 10.4708 17.3073 10.083 17.4529C9.05325 17.8395 8.0653 18.1459 7.15125 18.3637ZM19.7077 9.84972C19.6869 9.86663 19.6667 9.88483 19.6474 9.90431C18.9609 10.5957 18.0797 11.3337 17.0388 12.0753C16.7014 12.3157 16.6228 12.784 16.8631 13.1213C17.1035 13.4587 17.5718 13.5373 17.9091 13.297C18.6809 12.7471 19.3806 12.1912 19.9922 11.6433C19.965 11.0246 19.8676 10.4241 19.7077 9.84972ZM20.9366 5.37924C20.5336 5.28378 20.1294 5.53313 20.034 5.93619C19.9385 6.33925 20.1879 6.74339 20.5909 6.83886C20.985 6.93219 21.1368 7.07125 21.1932 7.16142C21.2565 7.26269 21.3262 7.52732 21.0363 8.10938C20.8516 8.48014 21.0025 8.93042 21.3732 9.1151C21.744 9.29979 22.1943 9.14894 22.379 8.77818C22.7566 8.02003 22.9422 7.12886 22.4648 6.36582C22.1206 5.81574 21.5416 5.52252 20.9366 5.37924ZM2.81481 16.2501C2.94057 15.8555 2.72259 15.4336 2.32793 15.3078C1.93327 15.1821 1.51138 15.4 1.38562 15.7947C1.19392 16.3963 1.17354 17.0573 1.53488 17.6349C1.98775 18.3587 2.84153 18.6413 3.68907 18.7224C4.1014 18.7619 4.46765 18.4596 4.50712 18.0473C4.54658 17.635 4.24432 17.2687 3.83199 17.2293C3.13763 17.1628 2.88355 16.9624 2.80651 16.8393C2.75679 16.7598 2.70479 16.5954 2.81481 16.2501ZM15.7504 14.704C16.106 14.4915 16.2218 14.0309 16.0093 13.6754C15.7967 13.3199 15.3362 13.204 14.9807 13.4166C14.4991 13.7045 13.9974 13.9881 13.4781 14.2648C12.9445 14.5491 12.4132 14.8149 11.8883 15.0615C11.5134 15.2376 11.3522 15.6843 11.5283 16.0592C11.7044 16.4341 12.1511 16.5953 12.526 16.4192C13.0739 16.1618 13.6277 15.8847 14.1834 15.5887C14.7242 15.3005 15.2474 15.0048 15.7504 14.704Z\" fill=\"rgba(255,255,255,.7)\"/>\n </svg>";
var resetLittlePlanetButton = {
id: "resetLittlePlanetButton",
content: ((_props$lang = props.lang) === null || _props$lang === void 0 ? void 0 : _props$lang.littlePlanetIcon) || littlePlanetIcon,
title: ((_props$lang2 = props.lang) === null || _props$lang2 === void 0 ? void 0 : _props$lang2.littlePlanetButton) || "Reset Little Planet",
className: "resetLittlePlanetButton",
onClick: function onClick() {
littlePlanetEnabledRef.current = true;
_c.setOption("maxFov", LITTLEPLANET_MAX_ZOOM);
//_c.setOption("fisheye", LITTLEPLANET_FISHEYE) // @ts-ignore ts(2345)
_c.setOption("mousewheel", false);
_c.animate({
yaw: 0,
pitch: LITTLEPLANET_DEF_LAT,
zoom: LITTLEPLANET_DEF_ZOOM,
speed: "10rpm"
});
}
};
if (_currentNavbar !== false && !_currentNavbar.find(function (item) {
return _typeof(item) === "object" && (item === null || item === void 0 ? void 0 : item.id) === "resetLittlePlanetButton";
})) {
_currentNavbar.splice(1, 0, resetLittlePlanetButton);
}
}
if (options.hideNavbarButton) {
// add toggle navbar visibility button
var hideNavbarButton = {
id: "hideNavbarButton",
content: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\" fill=\"none\">\n <g clip-path=\"url(#clip0_429_11083)\">\n <path d=\"M7 7.00006L17 17.0001M7 17.0001L17 7.00006\" stroke=\"rgba(255,255,255,.7)\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_429_11083\">\n <rect width=\"24\" height=\"24\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>",
title: "Hide Navbar",
className: "hideNavbarButton",
onClick: function onClick() {
_c.navbar.hide();
// add a show navbar button that is always hidden until mouseover
var btn = document.createElement("a");
btn.className = "showNavbarButton";
// add svg icon
btn.innerHTML = "<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 26 26\" style=\"enable-background:new 0 0 26 26;\" xml:space=\"preserve\" class=\"icon icon-back-to-top\">\n <g>\n <path d=\"M13.8,1.3L21.6,9c0.1,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.1,0.3,0.1,0.4s0,0.3-0.1,0.4c-0.1,0.1-0.1,0.3-0.3,0.4\n c-0.1,0.1-0.2,0.2-0.4,0.3c-0.2,0.1-0.3,0.1-0.4,0.1c-0.1,0-0.3,0-0.4-0.1c-0.2-0.1-0.3-0.2-0.4-0.3L14.2,5l0,19.1\n c0,0.2-0.1,0.3-0.1,0.5c0,0.1-0.1,0.3-0.3,0.4c-0.1,0.1-0.2,0.2-0.4,0.3c-0.1,0.1-0.3,0.1-0.5,0.1c-0.1,0-0.3,0-0.4-0.1\n c-0.1-0.1-0.3-0.1-0.4-0.3c-0.1-0.1-0.2-0.2-0.3-0.4c-0.1-0.1-0.1-0.3-0.1-0.5l0-19.1l-5.7,5.7C6,10.8,5.8,10.9,5.7,11\n c-0.1,0.1-0.3,0.1-0.4,0.1c-0.2,0-0.3,0-0.4-0.1c-0.1-0.1-0.3-0.2-0.4-0.3c-0.1-0.1-0.1-0.2-0.2-0.4C4.1,10.2,4,10.1,4.1,9.9\n c0-0.1,0-0.3,0.1-0.4c0-0.1,0.1-0.3,0.3-0.4l7.7-7.8c0.1,0,0.2-0.1,0.2-0.1c0,0,0.1-0.1,0.2-0.1c0.1,0,0.2,0,0.2-0.1\n c0.1,0,0.1,0,0.2,0c0,0,0.1,0,0.2,0c0.1,0,0.2,0,0.2,0.1c0.1,0,0.1,0.1,0.2,0.1C13.7,1.2,13.8,1.2,13.8,1.3z\"></path>\n </g>\n </svg>";
btn.title = "Show Navbar";
btn.onclick = function (e) {
e.preventDefault();
_c.navbar.show();
btn.remove();
};
// add the button to the viewer container
document.body.appendChild(btn);
}
};
if (_currentNavbar !== false && !_currentNavbar.find(function (item) {
return _typeof(item) === "object" && (item === null || item === void 0 ? void 0 : item.id) === "hideNavbarButton";
})) {
_currentNavbar.push(hideNavbarButton);
}
}
if (_currentNavbar !== false) {
_c.setOption("navbar", _currentNavbar);
setCurrentNavbar(_currentNavbar);
} else {
_c.navbar.hide();
}
/* @ts-ignore next line */
Emitter.on("animate", function (options) {
_c.animate(options);
}).on("stop-animation", function () {
_c.stopAnimation();
}).on("destroy", function () {
_c.destroy();
}).on("rotate", function (options) {
_c.rotate(options);
}).on("setOption", function (pair) {
var option = pair.option,
value = pair.value;
_c.setOption(option, value);
}).on("setOptions", function (options) {
_c.setOptions(options);
}).on("zoom", function (zoom) {
_c.zoom(zoom);
}).on("zoomIn", function (step) {
_c.zoomIn(step);
}).on("zoomOut", function (step) {
_c.zoomOut(step);
}).on("resize", function (size) {
_c.resize(size);
}).on("enterFullscreen", function () {
_c.enterFullscreen();
}).on("exitFullscreen", function () {
_c.exitFullscreen();
}).on("toggleFullscreen", function () {
_c.toggleFullscreen();
}).on("needsContinuousUpdate", function (enabled) {
_c.needsContinuousUpdate(enabled);
}).on("observeObjects", function (userDataKey) {
_c.observeObjects(userDataKey);
}).on("unobserveObjects", function (userDataKey) {
_c.unobserveObjects(userDataKey);
}).on("setCursor", function (cursor) {
_c.setCursor(cursor);
}).on("setPanorama", function (payload) {
_c.setPanorama(payload.path, payload.options);
}).on("showError", function (message) {
_c.showError(message);
}).on("hideError", function () {
_c.hideError();
}).on("startKeyboardControl", function () {
_c.startKeyboardControl();
}).on("stopKeyboardControl", function () {
_c.stopKeyboardControl();
});
spherePlayerInstance.current = _c;
}
}, [sphereElement, options]);
useEffect(function () {
var viewer = spherePlayerInstance.current;
if (viewer && viewer.container && viewer.container.parentNode) {
if (viewer && viewer.container && viewer.container.parentNode) {
var _viewer$renderer, _viewer$renderer$rend, _viewer$renderer2, _viewer$renderer2$ren;
(_viewer$renderer = viewer.renderer) === null || _viewer$renderer === void 0 ? void 0 : (_viewer$renderer$rend = _viewer$renderer.renderer) === null || _viewer$renderer$rend === void 0 ? void 0 : _viewer$renderer$rend.dispose();
(_viewer$renderer2 = viewer.renderer) === null || _viewer$renderer2 === void 0 ? void 0 : (_viewer$renderer2$ren = _viewer$renderer2.renderer) === null || _viewer$renderer2$ren === void 0 ? void 0 : _viewer$renderer2$ren.forceContextLoss();
viewer.destroy();
}
}
}, [spherePlayerInstance]);
useEffect(function () {
var _options$panorama;
var panorama = (_options$panorama = options.panorama) !== null && _options$panorama !== void 0 ? _options$panorama : options.src;
if (spherePlayerInstance.current && panorama) {
spherePlayerInstance.current.setPanorama(panorama, {});
}
}, [options.src, options.panorama]);
var _imperativeHandle = function _imperativeHandle() {
return {
animate: function animate(options) {
Emitter.emit("animate", options);
},
destroy: function destroy() {
Emitter.emit("destroy", {});
},
createTooltip: function createTooltip(config) {
var _spherePlayerInstance;
return (_spherePlayerInstance = spherePlayerInstance.current) === null || _spherePlayerInstance === void 0 ? void 0 : _spherePlayerInstance.createTooltip(config);
},
needsContinuousUpdate: function needsContinuousUpdate(enabled) {
Emitter.emit("needsContinuousUpdate", enabled);
},
observeObjects: function observeObjects(userDataKey) {
Emitter.emit("observeObjects", userDataKey);
},
unobserveObjects: function unobserveObjects(userDataKey) {
Emitter.emit("unobserveObjects", userDataKey);
},
setCursor: function setCursor(cursor) {
Emitter.emit("setCursor", cursor);
},
stopAnimation: function stopAnimation() {
Emitter.emit("stop-animation", {});
},
rotate: function rotate(position) {
Emitter.emit("rotate", position);
},
setOption: function setOption(option, value) {
Emitter.emit("setOption", {
option: option,
value: value
});
},
setOptions: function setOptions(options) {
var _spherePlayerInstance2;
return (_spherePlayerInstance2 = spherePlayerInstance.current) === null || _spherePlayerInstance2 === void 0 ? void 0 : _spherePlayerInstance2.setOptions(options);
},
getCurrentNavbar: function getCurrentNavbar() {
return currentNavbar;
},
zoom: function zoom(value) {
Emitter.emit("zoom", value);
},
zoomIn: function zoomIn(step) {
Emitter.emit("zoomIn", {
step: step
});
},
zoomOut: function zoomOut(step) {
Emitter.emit("zoomOut", {
step: step
});
},
resize: function resize(size) {
var _spherePlayerInstance3;
return (_spherePlayerInstance3 = spherePlayerInstance.current) === null || _spherePlayerInstance3 === void 0 ? void 0 : _spherePlayerInstance3.resize(size);
},
enterFullscreen: function enterFullscreen() {
var _spherePlayerInstance4;
return (_spherePlayerInstance4 = spherePlayerInstance.current) === null || _spherePlayerInstance4 === void 0 ? void 0 : _spherePlayerInstance4.enterFullscreen();
},
exitFullscreen: function exitFullscreen() {
var _spherePlayerInstance5;
return (_spherePlayerInstance5 = spherePlayerInstance.current) === null || _spherePlayerInstance5 === void 0 ? void 0 : _spherePlayerInstance5.exitFullscreen();
},
toggleFullscreen: function toggleFullscreen() {
var _spherePlayerInstance6;
return (_spherePlayerInstance6 = spherePlayerInstance.current) === null || _spherePlayerInstance6 === void 0 ? void 0 : _spherePlayerInstance6.toggleFullscreen();
},
isFullscreenEnabled: function isFullscreenEnabled() {
var _spherePlayerInstance7;
return (_spherePlayerInstance7 = spherePlayerInstance.current) === null || _spherePlayerInstance7 === void 0 ? void 0 : _spherePlayerInstance7.isFullscreenEnabled();
},
getPlugin: function getPlugin(pluginId) {
var _spherePlayerInstance8;
return (_spherePlayerInstance8 = spherePlayerInstance.current) === null || _spherePlayerInstance8 === void 0 ? void 0 : _spherePlayerInstance8.getPlugin(pluginId);
},
getPosition: function getPosition() {
var _spherePlayerInstance9;
return (_spherePlayerInstance9 = spherePlayerInstance.current) === null || _spherePlayerInstance9 === void 0 ? void 0 : _spherePlayerInstance9.getPosition();
},
getZoomLevel: function getZoomLevel() {
var _spherePlayerInstance10;
return (_spherePlayerInstance10 = spherePlayerInstance.current) === null || _spherePlayerInstance10 === void 0 ? void 0 : _spherePlayerInstance10.getZoomLevel();
},
getSize: function getSize() {
var _spherePlayerInstance11;
return (_spherePlayerInstance11 = spherePlayerInstance.current) === null || _spherePlayerInstance11 === void 0 ? void 0 : _spherePlayerInstance11.getSize();
},
needsUpdate: function needsUpdate() {
var _spherePlayerInstance12;
return (_spherePlayerInstance12 = spherePlayerInstance.current) === null || _spherePlayerInstance12 === void 0 ? void 0 : _spherePlayerInstance12.needsUpdate();
},
autoSize: function autoSize() {
var _spherePlayerInstance13;
return (_spherePlayerInstance13 = spherePlayerInstance.current) === null || _spherePlayerInstance13 === void 0 ? void 0 : _spherePlayerInstance13.autoSize();
},
// eslint-disable-next-line @typescript-eslint/no-explicit-any
setPanorama: function setPanorama(path, options) {
var _spherePlayerInstance14;
return (_spherePlayerInstance14 = spherePlayerInstance.current) === null || _spherePlayerInstance14 === void 0 ? void 0 : _spherePlayerInstance14.setPanorama(path, options);
},
showError: function showError(message) {
var _spherePlayerInstance15;
return (_spherePlayerInstance15 = spherePlayerInstance.current) === null || _spherePlayerInstance15 === void 0 ? void 0 : _spherePlayerInstance15.showError(message);
},
hideError: function hideError() {
var _spherePlayerInstance16;
return (_spherePlayerInstance16 = spherePlayerInstance.current) === null || _spherePlayerInstance16 === void 0 ? void 0 : _spherePlayerInstance16.hideError();
},
startKeyboardControl: function startKeyboardControl() {
var _spherePlayerInstance17;
return (_spherePlayerInstance17 = spherePlayerInstance.current) === null || _spherePlayerInstance17 === void 0 ? void 0 : _spherePlayerInstance17.startKeyboardControl();
},
stopKeyboardControl: function stopKeyboardControl() {
var _spherePlayerInstance18;
return (_spherePlayerInstance18 = spherePlayerInstance.current) === null || _spherePlayerInstance18 === void 0 ? void 0 : _spherePlayerInstance18.stopKeyboardControl();
}
};
};
// Methods
useImperativeHandle(ref, _imperativeHandle, [spherePlayerInstance.current, sphereElement, options, ref]);
return /*#__PURE__*/React.createElement("div", {
className: options.containerClass || "view-container",
ref: setRef
});
});
ReactPhotoSphereViewer.displayName = "ReactPhotoSphereViewer";
export { ReactPhotoSphereViewer };
//# sourceMappingURL=index.js.map