react-photo-sphere-viewer
Version:
Photosphere Viewer for React.JS, wrapper of photo-sphere-viewer.js
419 lines (418 loc) • 22.7 kB
JavaScript
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
import { __assign, __spreadArray } from './node_modules/tslib/tslib.es6.js';
import React, { forwardRef, useMemo, useRef, useState, useEffect, useImperativeHandle, useCallback } from 'react';
import { Viewer } from '@photo-sphere-viewer/core';
import './styles.css.js';
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"];
var defaultNavbar = ["zoom", "fullscreen"];
function adaptOptions(options) {
var adaptedOptions = __assign({}, 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 _a = useState(),
element = _a[0],
setElement = _a[1];
var ref = useCallback(function (r) {
if (r && r !== element) {
setElement(r);
}
}, [element]);
return [element, ref];
}
var ReactPhotoSphereViewer = /*#__PURE__*/forwardRef(function (props, ref) {
var _a = useDomElement(),
sphereElement = _a[0],
setRef = _a[1];
var options = useMemo(function () {
return props;
}, [
// recreate options when individual props change
props.src, 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.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]);
var spherePlayerInstance = useRef(null);
var LITTLEPLANET_MAX_ZOOM = 130;
var LITTLEPLANET_DEF_LAT = useState(-90)[0];
var LITTLEPLANET_FISHEYE = useState(2)[0];
var LITTLEPLANET_DEF_ZOOM = useState(0)[0];
var _b = useState(defaultNavbar),
currentNavbar = _b[0],
setCurrentNavbar = _b[1];
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 () {
var _a, _b, _d, _e, _f, _g, _h, _j, _k, _l;
var littlePlanetEnabled = true;
if (sphereElement && !spherePlayerInstance.current) {
var _c_1 = new Viewer(__assign(__assign({}, adaptOptions(options)), {
container: sphereElement,
panorama: options.src,
size: {
height: options.height,
width: options.width || "100px"
},
fisheye: options.littlePlanet ? LITTLEPLANET_FISHEYE : options.fisheye || false,
minFov: (_a = options.minFov) !== null && _a !== void 0 ? _a : 30,
maxFov: options.littlePlanet ? LITTLEPLANET_MAX_ZOOM : (_b = options.maxFov) !== null && _b !== void 0 ? _b : 90,
defaultZoomLvl: options.littlePlanet ? LITTLEPLANET_DEF_ZOOM : (_d = options.defaultZoomLvl) !== null && _d !== void 0 ? _d : 50,
defaultYaw: (_e = options.defaultYaw) !== null && _e !== void 0 ? _e : 0,
defaultPitch: options.littlePlanet ? LITTLEPLANET_DEF_LAT : (_f = options.defaultPitch) !== null && _f !== void 0 ? _f : 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: (_g = options.moveInertia) !== null && _g !== void 0 ? _g : true,
mousewheel: options.littlePlanet ? false : (_h = options.mousewheel) !== null && _h !== void 0 ? _h : true,
mousemove: (_j = options.mousemove) !== null && _j !== void 0 ? _j : true,
mousewheelCtrlKey: options.mousewheelCtrlKey || false,
touchmoveTwoFingers: options.touchmoveTwoFingers || false,
panoData: options.panoData || {},
requestHeaders: options.requestHeaders || {},
withCredentials: options.withCredentials || false,
navbar: filterNavbar(options.navbar),
lang: options.lang || {},
keyboard: options.keyboard || "fullscreen",
plugins: __spreadArray([], options.plugins ? options.plugins : [], true)
}));
_c_1.addEventListener("ready", function () {
if (options.onReady) {
options.onReady(_c_1);
}
}, {
once: true
});
_c_1.addEventListener("click", function (data) {
if (options.onClick) {
options.onClick(data, _c_1);
}
if (options.littlePlanet && littlePlanetEnabled) {
littlePlanetEnabled = false;
// fly inside the sphere
_c_1.animate({
yaw: 0,
pitch: LITTLEPLANET_DEF_LAT,
zoom: 75,
speed: "3rpm"
}).then(function () {
// watch on the sky
_c_1.animate({
yaw: 0,
pitch: 0,
zoom: 90,
speed: "10rpm"
}).then(function () {
var _a;
// Disable Little Planet.
_c_1.setOption("maxFov", options.maxFov || 70);
_c_1.setOption("mousewheel", (_a = options.mousewheel) !== null && _a !== void 0 ? _a : true);
});
});
}
});
_c_1.addEventListener("dblclick", function (data) {
if (options.onDblclick) {
options.onDblclick(data, _c_1);
}
});
_c_1.addEventListener("zoom-updated", function (zoom) {
if (options.onZoomChange) {
options.onZoomChange(zoom, _c_1);
}
});
_c_1.addEventListener("position-updated", function (position) {
if (options.onPositionChange) {
options.onPositionChange(position.position.pitch, position.position.yaw, _c_1);
}
});
var _currentNavbar = filterNavbar(options.navbar);
if (options.littlePlanet) {
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: ((_k = props.lang) === null || _k === void 0 ? void 0 : _k.littlePlanetIcon) || littlePlanetIcon,
title: ((_l = props.lang) === null || _l === void 0 ? void 0 : _l.littlePlanetButton) || "Reset Little Planet",
className: "resetLittlePlanetButton",
onClick: function onClick() {
littlePlanetEnabled = true;
_c_1.setOption("maxFov", LITTLEPLANET_MAX_ZOOM);
//_c.setOption("fisheye", LITTLEPLANET_FISHEYE) // @ts-ignore ts(2345)
_c_1.setOption("mousewheel", false);
_c_1.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_1.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_1.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_1.setOption("navbar", _currentNavbar);
setCurrentNavbar(_currentNavbar);
} else {
_c_1.navbar.hide();
}
Emitter.on("animate", function (options) {
_c_1.animate(options);
}).on("stop-animation", function () {
_c_1.stopAnimation();
}).on("destroy", function () {
_c_1.destroy();
}).on("rotate", function (options) {
_c_1.rotate(options);
}).on("setOption", function (pair) {
var option = pair.option,
value = pair.value;
_c_1.setOption(option, value);
}).on("zoom", function (zoom) {
_c_1.zoom(zoom);
}).on("zoomIn", function (step) {
_c_1.zoomIn(step);
}).on("zoomOut", function (step) {
_c_1.zoomOut(step);
}).on("needsContinuousUpdate", function (enabled) {
_c_1.needsContinuousUpdate(enabled);
}).on("observeObjects", function (userDataKey) {
_c_1.observeObjects(userDataKey);
}).on("unobserveObjects", function (userDataKey) {
_c_1.unobserveObjects(userDataKey);
}).on("setCursor", function (cursor) {
_c_1.setCursor(cursor);
});
spherePlayerInstance.current = _c_1;
}
}, [sphereElement, options]);
useEffect(function () {
return function () {
var _a, _b, _d, _e;
var viewer = spherePlayerInstance.current;
if (viewer && viewer.container && viewer.container.parentNode) {
(_b = (_a = viewer.renderer) === null || _a === void 0 ? void 0 : _a.renderer) === null || _b === void 0 ? void 0 : _b.dispose();
(_e = (_d = viewer.renderer) === null || _d === void 0 ? void 0 : _d.renderer) === null || _e === void 0 ? void 0 : _e.forceContextLoss();
viewer.destroy();
}
};
}, [spherePlayerInstance]);
useEffect(function () {
if (spherePlayerInstance.current && options.src) {
spherePlayerInstance.current.setPanorama(options.src, {});
}
}, [options.src]);
var _imperativeHandle = function _imperativeHandle() {
return {
animate: function animate(options) {
Emitter.emit("animate", options);
},
destroy: function destroy() {
Emitter.emit("destroy", {});
},
createTooltip: function createTooltip(config) {
var _a;
return (_a = spherePlayerInstance.current) === null || _a === void 0 ? void 0 : _a.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 _a;
return (_a = spherePlayerInstance.current) === null || _a === void 0 ? void 0 : _a.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 _a;
return (_a = spherePlayerInstance.current) === null || _a === void 0 ? void 0 : _a.resize(size);
},
enterFullscreen: function enterFullscreen() {
var _a;
return (_a = spherePlayerInstance.current) === null || _a === void 0 ? void 0 : _a.enterFullscreen();
},
exitFullscreen: function exitFullscreen() {
var _a;
return (_a = spherePlayerInstance.current) === null || _a === void 0 ? void 0 : _a.exitFullscreen();
},
toggleFullscreen: function toggleFullscreen() {
var _a;
return (_a = spherePlayerInstance.current) === null || _a === void 0 ? void 0 : _a.toggleFullscreen();
},
isFullscreenEnabled: function isFullscreenEnabled() {
var _a;
return (_a = spherePlayerInstance.current) === null || _a === void 0 ? void 0 : _a.isFullscreenEnabled();
},
getPlugin: function getPlugin(pluginId) {
var _a;
return (_a = spherePlayerInstance.current) === null || _a === void 0 ? void 0 : _a.getPlugin(pluginId);
},
getPosition: function getPosition() {
var _a;
return (_a = spherePlayerInstance.current) === null || _a === void 0 ? void 0 : _a.getPosition();
},
getZoomLevel: function getZoomLevel() {
var _a;
return (_a = spherePlayerInstance.current) === null || _a === void 0 ? void 0 : _a.getZoomLevel();
},
getSize: function getSize() {
var _a;
return (_a = spherePlayerInstance.current) === null || _a === void 0 ? void 0 : _a.getSize();
},
needsUpdate: function needsUpdate() {
var _a;
return (_a = spherePlayerInstance.current) === null || _a === void 0 ? void 0 : _a.needsUpdate();
},
autoSize: function autoSize() {
var _a;
return (_a = spherePlayerInstance.current) === null || _a === void 0 ? void 0 : _a.autoSize();
},
// eslint-disable-next-line @typescript-eslint/no-explicit-any
setPanorama: function setPanorama(path, options) {
var _a;
return (_a = spherePlayerInstance.current) === null || _a === void 0 ? void 0 : _a.setPanorama(path, options);
},
showError: function showError(message) {
var _a;
return (_a = spherePlayerInstance.current) === null || _a === void 0 ? void 0 : _a.showError(message);
},
hideError: function hideError() {
var _a;
return (_a = spherePlayerInstance.current) === null || _a === void 0 ? void 0 : _a.hideError();
},
startKeyboardControl: function startKeyboardControl() {
var _a;
return (_a = spherePlayerInstance.current) === null || _a === void 0 ? void 0 : _a.startKeyboardControl();
},
stopKeyboardControl: function stopKeyboardControl() {
var _a;
return (_a = spherePlayerInstance.current) === null || _a === void 0 ? void 0 : _a.stopKeyboardControl();
}
};
};
// Methods
useImperativeHandle(ref, _imperativeHandle, [spherePlayerInstance.current, sphereElement, options, ref]);
return /*#__PURE__*/React.createElement("div", {
className: options.containerClass || "view-container",
ref: setRef
});
});
export { ReactPhotoSphereViewer };
//# sourceMappingURL=index.js.map