Merge pull request #2 from Elius94:Elius94/issue1

Adapters and Plugins
Elius94 · Sep 8, 2022 · b308d68 · b308d68
2 parents fa21882 + 72259ea
commit b308d68
Show file tree

Hide file tree

Showing 5 changed files with 163 additions and 33 deletions.
diff --git 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 (
+    <div className="App">
+      <ReactPhotoSphereViewer src="Test_pano.jpg" plugins={plugins} height={'100vh'} width={"100%"}></ReactPhotoSphereViewer>
+    </div>
+  );
+}
+```
+
+> 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
@@ -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
diff --git 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
@@ -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
+}