Merge pull request #8 from farminf/develop

Develop

demo/src/index.js

@@ -3,6 +3,7 @@ import { render } from 'react-dom';
 
 import { Pannellum, PannellumVideo }  from '../../src';
 import myImage from "./images/alma.jpg";
+import myImage2 from "./images/milan.jpg";
 import myVideo from "./images/jfk.mp4";
 import myVideo2 from "./images/video.mp4";
 
@@ -19,6 +20,12 @@ class Demo extends Component {
     };
   }
 
+  hanldeClickImage = (path) => {
+    this.setState({
+      mediaPhoto: myImage2,
+    });
+  }
+
   hanldeClick = (path)=>{
     this.setState({
       mediaVideo : myVideo,
@@ -39,51 +46,11 @@ class Demo extends Component {
     return (
       <div>
         <h1>{this.state.title}</h1>
-        {/*<Pannellum
-          width="700px"
-          height="400px"
-          image={myImage}
-          pitch={10}
-          yaw={180}
-          hfov={110}
-          autoLoad
-          author=""
-          title=""
-          orientationOnByDefault={false}
-          compass
-          draggable
-          keyboardZoom
-          mouseZoom
-          preview=""      
-          previewAuthor=""
-          previewTitle=""
-          showControls
-          showFullscreenCtrl
-          showZoomCtrl
-          onLoad={()=>{console.log("panorama loaded");}}
-          onScenechange={(id)=>{console.log("Scene has change on " + id);}}
-          onScenechangefadedone={()=>{console.log("panorama loaded");}}
-          onError={(err)=>{console.log("Error" , err);}}
-          onErrorcleared={()=>{console.log("Error Cleared");}}
-          onMousedown={(evt)=>{console.log("Mouse Down" , evt);}}
-          onMouseup={(evt)=>{console.log("Mouse Up", evt);}}
-          onTouchstart={(evt)=>{console.log("Touch Start", evt);}}
-          onTouchend={(evt)=>{console.log("Touch End", evt);}}
-          hotspots={[
-            {
-              "pitch": 11,
-              "yaw": -167,
-              "type": "info",
-              "text": "Info Hotspot Text 1",
-              "URL": "https://github.com/farminf/pannellum-react"
-            }
-          ]}
-          hotspotDebug={false}
-        />
+
         <Pannellum
           width="800px"
           height="300px"
-          image={myImage}
+          image={this.state.mediaPhoto}
           pitch={10}
           yaw={180}
           hfov={500}
@@ -120,15 +87,15 @@ class Demo extends Component {
           />
 
           <Pannellum.Hotspot 
-            type="info"
+            type="custom"
             pitch={31}
-            yaw={-107}
-            text="Info Hotspot Text 4"
-            URL="https://github.com/farminf"
+            yaw={150}
+            handleClick={(evt , name) => this.hanldeClickImage(name)}
+            name="ss"
           />
 
         </Pannellum>
-        */}
+
 
 
 
@@ -192,9 +159,9 @@ class Demo extends Component {
               height="400px"
               pitch={10}
               yaw={180}
-              hfov={140}
-              minHfov={50}
-              maxHfov={150}
+              hfov={110}
+              minHfov={90}
+              maxHfov={120}
               hotSpotDebug
               mouseZoom={false}
             >

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pannellum-react",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "description": "Pannellum React Component",
   "main": "lib/index.js",
   "module": "es/index.js",

src/elements/Pannellum.js

@@ -1,6 +1,8 @@
 import propTypes from 'prop-types';
 import React, { Component } from 'react';
 import '../pannellum/css/pannellum.css';
+import '../pannellum/css/style-textInfo.css';
+
 import '../pannellum/js/libpannellum.js';
 import '../pannellum/js/pannellum.js';
 import '../pannellum/js/RequestAnimationFrame';
@@ -11,7 +13,7 @@ class Pannellum extends Component {
   constructor(props){
     super(props);
     this.state = {
-      id: Math.random().toString(36).substr(2, 9)
+      id: Math.random().toString(36).substr(2, 9),
     };
   }
 
@@ -29,6 +31,7 @@ class Pannellum extends Component {
     hfov: propTypes.number,
     minHfov: propTypes.number,
     maxHfov: propTypes.number,
+    autoRotate: propTypes.number,
     compass: propTypes.bool,
     preview: propTypes.string,
     previewTitle: propTypes.string,
@@ -52,7 +55,10 @@ class Pannellum extends Component {
     onMouseup: propTypes.func,
     onTouchstart: propTypes.func,
     onTouchend: propTypes.func,
-    hotspotDebug: propTypes.bool
+    hotspotDebug: propTypes.bool,
+    Tooltip: propTypes.func,
+    handleClick:propTypes.func,
+    name: propTypes.string
   }
 
   static defaultProps = {
@@ -65,6 +71,7 @@ class Pannellum extends Component {
     hfov: 100,
     minHfov: 50,
     maxHfov: 150,
+    autoRotate: 0,
     compass: false,
     preview: '',
     previewTitle: '',
@@ -91,31 +98,44 @@ class Pannellum extends Component {
     hotspotDebug: false,
   }
 
-  componentDidMount = () => {
+  renderImage = (state) =>{
     const { children } = this.props;
+    // make the array of sub components, even if its one, it become array of one 
+    let hotspots = [...children];
     let hotspotArray = [];
-    if (Array.isArray(children)){
-      children.map(hotspot =>{
-        return hotspotArray.push({ 
-          "type":hotspot.props.type,
-          "pitch":hotspot.props.pitch,
-          "yaw":hotspot.props.yaw,
-          "text":hotspot.props.text,
-          "URL":hotspot.props.URL
-        });
-      });
-    } else {
-      hotspotArray.push(
-        { 
-          "type":children.props.type,
-          "pitch":children.props.pitch,
-          "yaw":children.props.yaw,
-          "text":children.props.text,
-          "URL":children.props.URL
+    if (Array.isArray(hotspots)){
+      hotspots.map(hotspot =>{
+        switch (hotspot.props.type){
+
+          case "info":
+            return hotspotArray.push({
+              "id": Math.random().toString(36).substr(2, 9),
+              "type":hotspot.props.type,
+              "pitch":hotspot.props.pitch ? hotspot.props.pitch : 10,
+              "yaw":hotspot.props.yaw ? hotspot.props.yaw : 10,
+              "text":hotspot.props.text ? hotspot.props.text : "",
+              "URL":hotspot.props.URL ? hotspot.props.URL : ""
+            });
+          case "custom":
+            return hotspotArray.push({
+              "id": Math.random().toString(36).substr(2, 9),
+              "pitch":hotspot.props.pitch ? hotspot.props.pitch : 10,
+              "yaw":hotspot.props.yaw ? hotspot.props.yaw : 10,
+              "createTooltipFunc": hotspot.props.Tooltip ? hotspot.props.Tooltip: this.hotspotTooltip,
+              "cssClass": "tooltipcss",
+              "createTooltipArgs":"",
+              "clickHandlerArgs": hotspot.props.name ? hotspot.props.name : "noName",
+              "clickHandlerFunc": hotspot.props.handleClick ? hotspot.props.handleClick : hotspot.handleClickHotspot,
+            });
+          default:
+            return [];
         }
-      );
+
+      });
     }
 
+
+
     let jsonConfig = {
       type: "equirectangular",
       panorama: this.props.image,
@@ -124,6 +144,7 @@ class Pannellum extends Component {
       hfov: this.props.hfov,
       minHfov: this.props.minHfov,
       maxHfov: this.props.maxHfov,
+      autoRotate: this.props.autoRotate,
       compass: this.props.compass,
       preview: this.props.preview,
       previewTitle:this.props.previewTitle,
@@ -141,21 +162,76 @@ class Pannellum extends Component {
       hotSpotDebug: this.props.hotspotDebug,
       hotSpots: hotspotArray
     };
-
+  
     Object.keys(jsonConfig).forEach((key) => (jsonConfig[key] === "") && delete jsonConfig[key]);
-    const panorama = pannellum.viewer(this.props.id ? this.props.id : this.state.id, jsonConfig);
-    panorama.on("load" , this.props.onLoad);
-    panorama.on("scenechange" , this.props.onScenechange);
-    panorama.on("scenechangefadedone" , this.props.onScenechangefadedone);
-    panorama.on("error" , this.props.onError);
-    panorama.on("errorcleared" , this.props.onErrorcleared);
-    panorama.on("mousedown" , this.props.onMousedown);
-    panorama.on("mouseup" , this.props.onMouseup);
-    panorama.on("touchstart" , this.props.onTouchstart);
-    panorama.on("touchend" , this.props.onTouchend);
+
+    if (state === "update"){
+
+      this.state.renderer.destroy();
+      let p = pannellum.viewer(this.props.id ? this.props.id : this.state.id, jsonConfig);
+
+      p.on("load" , this.props.onLoad);
+      p.on("scenechange" , this.props.onScenechange);
+      p.on("scenechangefadedone" , this.props.onScenechangefadedone);
+      p.on("error" , this.props.onError);
+      p.on("errorcleared" , this.props.onErrorcleared);
+      p.on("mousedown" , this.props.onMousedown);
+      p.on("mouseup" , this.props.onMouseup);
+      p.on("touchstart" , this.props.onTouchstart);
+      p.on("touchend" , this.props.onTouchend);
+
+    } else {
+      const panorama = pannellum.viewer(this.props.id ? this.props.id : this.state.id, jsonConfig);
+      this.setState({
+        renderer: panorama
+      });
+      panorama.on("load" , this.props.onLoad);
+      panorama.on("scenechange" , this.props.onScenechange);
+      panorama.on("scenechangefadedone" , this.props.onScenechangefadedone);
+      panorama.on("error" , this.props.onError);
+      panorama.on("errorcleared" , this.props.onErrorcleared);
+      panorama.on("mousedown" , this.props.onMousedown);
+      panorama.on("mouseup" , this.props.onMouseup);
+      panorama.on("touchstart" , this.props.onTouchstart);
+      panorama.on("touchend" , this.props.onTouchend);
+    }
+
+  }
+
+  componentDidMount = () => {
+
+    this.renderImage("mount");
+
+  }
+
 
+  componentDidUpdate (){
+
+    this.renderImage("update");
+
+  }
+
+  handleClickHotspot = (e , id) => {
+    console.log("hotspot clicked" , id);
   }
 
+
+  hotspotTooltip = (hotSpotDiv, args) => {
+    hotSpotDiv.setAttribute("id", "textInfo");
+    const hDiv = document.createElement('div');
+    hDiv.classList.add('hotspot');
+    const outDiv = document.createElement('div');
+    outDiv.classList.add('out');
+    const inDiv = document.createElement('div');
+    inDiv.classList.add('in');
+    const imageDiv = document.createElement('div');
+    imageDiv.classList.add('image');
+    hotSpotDiv.appendChild(hDiv);
+    hDiv.appendChild(inDiv);
+    hDiv.appendChild(outDiv);
+  }
+
+
   render() {
     let { width, height, ...props } = this.props;
     let divStyle = {
@@ -166,6 +242,7 @@ class Pannellum extends Component {
       <div 
         id={this.props.id ? this.props.id : this.state.id}
         style={divStyle}
+        ref={node => this.imageNode = node}
       />
     );
   }

src/elements/PannellumVideo.js

@@ -105,6 +105,7 @@ class PannellumVideo extends Component {
       this.video.pnlmViewer.setYaw(this.props.yaw);
       this.video.pnlmViewer.setPitch(this.props.pitch);
       this.video.pnlmViewer.setHfov(this.props.hfov);
+      this.video.pnlmViewer.setHfovBounds([this.props.minHfov,this.props.maxHfov]);
 
       //remove all hotspots
       cuurentHS.map( hs => this.video.pnlmViewer.removeHotSpot(hs.id));

src/pannellum/css/style-textInfo.css

@@ -33,6 +33,7 @@
 
 #textInfo .hotspot {
     cursor: pointer;
+    box-sizing: border-box;
 }
 
 #textInfo .hotspot .out:before {
@@ -55,6 +56,7 @@
     -webkit-transition: -webkit-transform ease-out 0.1s, border 0.2s;
     -moz-transition: -moz-transform ease-out 0.1s, border 0.2s;
     transition: transform ease-out 0.1s, border 0.2s;
+    box-sizing: border-box;
 }
 
 #textInfo .hotspot .in {