From 72259ea6b4310a4c2c620dfcbf3bee2410df0903 Mon Sep 17 00:00:00 2001 From: Elia Lazzari Date: Thu, 8 Sep 2022 12:11:03 +0200 Subject: [PATCH] Adapters and Plugins Fixes #1 --- README.md | 65 ++++++++++++++++++++++++++++++++ example/src/App.js | 4 +- package-lock.json | 31 +++++++++------- package.json | 4 +- src/index.tsx | 92 ++++++++++++++++++++++++++++++++++++++-------- 5 files changed, 163 insertions(+), 33 deletions(-) diff --git a/README.md b/README.md index 92669e7..58a8d0e 100644 --- a/README.md +++ b/README.md @@ -120,6 +120,71 @@ type ViewerOptions = { ``` > This code is generated from the original library. Click [here](http://photo-sphere-viewer.js.org/guide/config.html) to see documentation. +### Plugins +To use the standard library plugins provided by the original library, you need to pass the `plugins` prop to the component. The prop is an array of plugins. Each plugin can be a constructor or an array of constructor and options. To include them in the component, you need to import them directly from the "react-photo-sphere-viewer" package. + +```jsx +import { ReactPhotoSphereViewer, CompassPlugin, MarkersPlugin } from 'react-photo-sphere-viewer'; + +function App() { + const plugins = [ + [CompassPlugin, { + hotspots: [ + { longitude: '0deg' }, + { longitude: '90deg' }, + { longitude: '180deg' }, + { longitude: '270deg' }, + ], + }], + [MarkersPlugin, { + markers: [ + { + id: 'polygon', + polygonPx: [2941, 1413, 3042, 1402, 3222, 1419, 3433, 1463, 3480, 1505, 3438, 1538, 3241, 1543, 3041, 1555, 2854, 1559, 2739, 1516, 2775, 1469, 2941, 1413 ], + svgStyle : { + fill : 'rgba(255,0,0,0.2)', + stroke : 'rgba(255, 0, 50, 0.8)', + strokeWidth: '2px', + }, + data: { compass: 'rgba(255, 0, 50, 0.8)' }, + }, + { + id: 'polyline', + polylinePx: [2478, 1635, 2184, 1747, 1674, 1953, 1166, 1852, 709, 1669, 301, 1519, 94, 1399, 34, 1356], + svgStyle: { + stroke : 'rgba(80, 150, 50, 0.8)', + strokeLinecap : 'round', + strokeLinejoin: 'round', + strokeWidth : '20px', + }, + data: { compass: 'rgba(80, 150, 50, 0.8)' }, + }, + ], + }], + ] + + + return ( +
+ +
+ ); +} +``` + +> Click [here](https://photo-sphere-viewer.js.org/plugins/) to see plugins documentation. + +### Adapters + +To use the standard library adapters provided by the original library, you need to pass the `adapter` prop to the component. The prop is an array of adapters. Each adapter can be a constructor or an array of constructor and options. To include them in the component, you need to import them directly from the "react-photo-sphere-viewer" package. + +```jsx + +import { CubemapAdapter, CubemapAdapterOptions } from 'react-photo-sphere-viewer'; +``` + +> Click [here](https://photo-sphere-viewer.js.org/guide/adapters/) to see adapters documentation. + ### events All documented events are exported as props (function names). diff --git a/example/src/App.js b/example/src/App.js index 998932e..b64bddd 100644 --- a/example/src/App.js +++ b/example/src/App.js @@ -1,10 +1,10 @@ import './App.css'; -import ReactPhotoSphereViewer from 'react-photo-sphere-viewer'; +import { ReactPhotoSphereViewer } from 'react-photo-sphere-viewer'; import React from 'react'; function App() { const photoSphereRef = React.useRef(); - + const handleClick = () => { photoSphereRef.current.animate({ latitude: 0, diff --git a/package-lock.json b/package-lock.json index 6929bdf..79e5ce5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,17 +1,17 @@ { "name": "react-photo-sphere-viewer", - "version": "2.0.5", + "version": "2.0.8", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "react-photo-sphere-viewer", - "version": "2.0.5", + "version": "2.0.8", "license": "MIT", "dependencies": { "autoprefixer": "^10.4.7", "eventemitter3": "^4.0.7", - "photo-sphere-viewer": "^4.6.4" + "photo-sphere-viewer": "^4.7.2" }, "devDependencies": { "@rollup/plugin-babel": "^5.3.1", @@ -5347,11 +5347,11 @@ } }, "node_modules/photo-sphere-viewer": { - "version": "4.6.4", - "resolved": "https://registry.npmjs.org/photo-sphere-viewer/-/photo-sphere-viewer-4.6.4.tgz", - "integrity": "sha512-DhhCivaX8YatgHpb4KL9FjQ+LY5NJL5nqxNrT/GRiOuYRvD4T0HX8cHne+MARvveT0/kNmqemQ6juxOj2qp/rg==", + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/photo-sphere-viewer/-/photo-sphere-viewer-4.7.2.tgz", + "integrity": "sha512-1+Cd3287oyprVwXhYJLMbjPQKyyHg7Papy1O+dS1z/31YrW4humuTNijROFokF3qalYDXhawH8NfdN49xxxpEw==", "dependencies": { - "three": "^0.142.0", + "three": "^0.144.0", "uevent": "^2.1.1" } }, @@ -6818,8 +6818,9 @@ "license": "MIT" }, "node_modules/three": { - "version": "0.142.0", - "license": "MIT" + "version": "0.144.0", + "resolved": "https://registry.npmjs.org/three/-/three-0.144.0.tgz", + "integrity": "sha512-R8AXPuqfjfRJKkYoTQcTK7A6i3AdO9++2n8ubya/GTU+fEHhYKu1ZooRSCPkx69jbnzT7dD/xEo6eROQTt2lJw==" }, "node_modules/through2": { "version": "2.0.5", @@ -10468,11 +10469,11 @@ "dev": true }, "photo-sphere-viewer": { - "version": "4.6.4", - "resolved": "https://registry.npmjs.org/photo-sphere-viewer/-/photo-sphere-viewer-4.6.4.tgz", - "integrity": "sha512-DhhCivaX8YatgHpb4KL9FjQ+LY5NJL5nqxNrT/GRiOuYRvD4T0HX8cHne+MARvveT0/kNmqemQ6juxOj2qp/rg==", + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/photo-sphere-viewer/-/photo-sphere-viewer-4.7.2.tgz", + "integrity": "sha512-1+Cd3287oyprVwXhYJLMbjPQKyyHg7Papy1O+dS1z/31YrW4humuTNijROFokF3qalYDXhawH8NfdN49xxxpEw==", "requires": { - "three": "^0.142.0", + "three": "^0.144.0", "uevent": "^2.1.1" } }, @@ -11342,7 +11343,9 @@ "dev": true }, "three": { - "version": "0.142.0" + "version": "0.144.0", + "resolved": "https://registry.npmjs.org/three/-/three-0.144.0.tgz", + "integrity": "sha512-R8AXPuqfjfRJKkYoTQcTK7A6i3AdO9++2n8ubya/GTU+fEHhYKu1ZooRSCPkx69jbnzT7dD/xEo6eROQTt2lJw==" }, "through2": { "version": "2.0.5", diff --git a/package.json b/package.json index cf2815f..b6a1731 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-photo-sphere-viewer", - "version": "2.0.8", + "version": "2.1.0", "description": "Photosphere Viewer for React.JS, wrapper of photo-sphere-viewer.js", "author": "Elius94", "license": "MIT", @@ -25,7 +25,7 @@ "dependencies": { "autoprefixer": "^10.4.7", "eventemitter3": "^4.0.7", - "photo-sphere-viewer": "^4.6.4" + "photo-sphere-viewer": "^4.7.2" }, "peerDependencies": { "prop-types": "^15.5.4", diff --git a/src/index.tsx b/src/index.tsx index f5d1e5c..d20436e 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,6 +3,31 @@ import { Viewer, ViewerOptions, PanoData, ClickData, Position, AnimateOptions } import "./styles.css" import "photo-sphere-viewer/dist/photo-sphere-viewer.css" import EventEmitter from "eventemitter3" +import { CompassPlugin, CompassPluginOptions } from "photo-sphere-viewer/dist/plugins/compass" +import "photo-sphere-viewer/dist/plugins/compass.css" +import { GyroscopePlugin, GyroscopePluginOptions } from "photo-sphere-viewer/dist/plugins/gyroscope" +import { MarkersPlugin, MarkersPluginOptions } from "photo-sphere-viewer/dist/plugins/markers" +import "photo-sphere-viewer/dist/plugins/markers.css" +import { AutorotateKeypointsPlugin, AutorotateKeypointsPluginOptions } from "photo-sphere-viewer/dist/plugins/autorotate-keypoints" +import { GalleryPlugin, GalleryPluginOptions } from "photo-sphere-viewer/dist/plugins/gallery" +import "photo-sphere-viewer/dist/plugins/gallery.css" +import { ResolutionPlugin, ResolutionPluginOptions } from "photo-sphere-viewer/dist/plugins/resolution" +import { SettingsPlugin, SettingsPluginOptions } from "photo-sphere-viewer/dist/plugins/settings" +import "photo-sphere-viewer/dist/plugins/settings.css" +import { StereoPlugin } from "photo-sphere-viewer/dist/plugins/stereo" +import { VideoPlugin, VideoPluginOptions } from "photo-sphere-viewer/dist/plugins/video" +import "photo-sphere-viewer/dist/plugins/video.css" +import { VirtualTourPlugin, VirtualTourPluginOptions } from "photo-sphere-viewer/dist/plugins/virtual-tour" +import "photo-sphere-viewer/dist/plugins/virtual-tour.css" +import { VisibleRangePlugin, VisibleRangePluginOptions } from "photo-sphere-viewer/dist/plugins/visible-range" +import { AbstractPlugin } from "photo-sphere-viewer/dist/photo-sphere-viewer" +// Adapters +import { EquirectangularTilesAdapter, EquirectangularTilesAdapterOptions, EquirectangularTilesPanorama } from "photo-sphere-viewer/dist/adapters/equirectangular-tiles" +import { EquirectangularVideoAdapter, EquirectangularVideoAdapterOptions, EquirectangularVideoPanorama } from "photo-sphere-viewer/dist/adapters/equirectangular-video" +import { CubemapAdapter, CubemapAdapterOptions } from "photo-sphere-viewer/dist/adapters/cubemap" +import { CubemapTilesAdapter, CubemapTilesAdapterOptions, CubemapTilesPanorama } from "photo-sphere-viewer/dist/adapters/cubemap-tiles" + + const eventEmitter = new EventEmitter() const Emitter = { @@ -15,19 +40,19 @@ const Emitter = { Object.freeze(Emitter) export interface Props extends ViewerOptions { - src: string; - navbar?: string[]; - height: number; - width?: number; - containerClass?: string; - littlePlanet?: boolean; - fishEye?: boolean | number; - // Events - onPositionChange?(lat: number, lng: number): any; - onZoomChange?(zoom: number): any; - onClick?(data: ClickData): void; - onDblclick?(data: ClickData): void; - onReady?(): void; + src: string; + navbar?: string[]; + height: number; + width?: number; + containerClass?: string; + littlePlanet?: boolean; + fishEye?: boolean | number; + // Events + onPositionChange?(lat: number, lng: number): any; + onZoomChange?(zoom: number): any; + onClick?(data: ClickData): void; + onDblclick?(data: ClickData): void; + onReady?(): void; } const defaultNavbar = [ @@ -182,7 +207,7 @@ const ReactPhotoSphereViewer = forwardRef((options: Props, ref: any): React.Reac _c.destroy() }).on("rotate", (options: { x: number, y: number }) => { _c.rotate(options) - }).on("setOption", (pair: {option: keyof ViewerOptions, value: any}) => { + }).on("setOption", (pair: { option: keyof ViewerOptions, value: any }) => { const { option, value } = pair _c.setOption(option, value) }).on("zoom", (zoom: number) => { @@ -237,4 +262,41 @@ const ReactPhotoSphereViewer = forwardRef((options: Props, ref: any): React.Reac ) }) -export default ReactPhotoSphereViewer +export { + ReactPhotoSphereViewer, + // Plugins + CompassPlugin, + CompassPluginOptions, + GyroscopePlugin, + GyroscopePluginOptions, + MarkersPlugin, + MarkersPluginOptions, + AutorotateKeypointsPlugin, + AutorotateKeypointsPluginOptions, + GalleryPlugin, + GalleryPluginOptions, + ResolutionPlugin, + ResolutionPluginOptions, + SettingsPlugin, + SettingsPluginOptions, + StereoPlugin, + VideoPlugin, + VideoPluginOptions, + VirtualTourPlugin, + VirtualTourPluginOptions, + VisibleRangePlugin, + VisibleRangePluginOptions, + AbstractPlugin, + // Adapters + CubemapAdapter, + CubemapAdapterOptions, + EquirectangularVideoAdapter, + EquirectangularVideoAdapterOptions, + EquirectangularVideoPanorama, + EquirectangularTilesAdapter, + EquirectangularTilesAdapterOptions, + EquirectangularTilesPanorama, + CubemapTilesAdapter, + CubemapTilesAdapterOptions, + CubemapTilesPanorama +}