@micromag/screen-image-360 0.3.81 → 0.3.89

package/es/index.js

@@ -91,6 +91,8 @@ var propTypes = {
   onNext: PropTypes.func,
   type: PropTypes.string,
   spacing: PropTypes.number,
+  enableInteraction: PropTypes.func,
+  disableInteraction: PropTypes.func,
   className: PropTypes.string
 };
 var defaultProps = {
@@ -105,6 +107,8 @@ var defaultProps = {
   onNext: null,
   type: null,
   spacing: 20,
+  enableInteraction: null,
+  disableInteraction: null,
   className: null
 };
 
@@ -122,6 +126,8 @@ var Image360Screen = function Image360Screen(_ref) {
       onNext = _ref.onNext,
       type = _ref.type,
       spacing = _ref.spacing,
+      enableInteraction = _ref.enableInteraction,
+      disableInteraction = _ref.disableInteraction,
       className = _ref.className;
   var THREE = useThree();
   var trackScreenEvent = useTrackScreenEvent(type);
@@ -201,8 +207,8 @@ var Image360Screen = function Image360Screen(_ref) {
   var lon = useRef(0);
   var lat = useRef(0);
   var phi = useRef(0);
-  var theta = useRef(0);
-  useRef(50);
+  var theta = useRef(0); // const distance = useRef(50);
+
   var pointerDown = useRef(false);
   var pointerDownX = useRef(0);
   var pointerDownY = useRef(0);
@@ -212,9 +218,8 @@ var Image360Screen = function Image360Screen(_ref) {
   var render3D = useCallback(function () {
     if (THREE === null) {
       return;
-    }
-
-    THREE.MathUtils; // lat.current = Math.max(-85, Math.min(85, lat.current));
+    } // const { MathUtils } = THREE;
+    // lat.current = Math.max(-85, Math.min(85, lat.current));
     // phi.current = MathUtils.degToRad(90 - lat.current);
     // theta.current = MathUtils.degToRad(lon.current);
     // camera.current.position.x =
@@ -224,6 +229,7 @@ var Image360Screen = function Image360Screen(_ref) {
     //     distance.current * Math.sin(phi.current) * Math.sin(theta.current);
     // camera.current.lookAt(0, 0, 0);
 
+
     lat.current = Math.max(-85, Math.min(85, lat.current));
     phi.current = THREE.MathUtils.degToRad(90 - lat.current);
     theta.current = THREE.MathUtils.degToRad(lon.current);
@@ -444,7 +450,9 @@ var Image360Screen = function Image360Screen(_ref) {
     screenSize: {
       width: width,
       height: height
-    }
+    },
+    enableInteraction: enableInteraction,
+    disableInteraction: disableInteraction
   })) : null)) : null];
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, (_ref6 = {}, _defineProperty(_ref6, className, className !== null), _defineProperty(_ref6, styles.showVideo, isPreview || isStatic || isCapture), _ref6)]),

package/lib/index.js

@@ -127,6 +127,8 @@ var propTypes = {
   onNext: PropTypes__default["default"].func,
   type: PropTypes__default["default"].string,
   spacing: PropTypes__default["default"].number,
+  enableInteraction: PropTypes__default["default"].func,
+  disableInteraction: PropTypes__default["default"].func,
   className: PropTypes__default["default"].string
 };
 var defaultProps = {
@@ -141,6 +143,8 @@ var defaultProps = {
   onNext: null,
   type: null,
   spacing: 20,
+  enableInteraction: null,
+  disableInteraction: null,
   className: null
 };
 
@@ -158,6 +162,8 @@ var Image360Screen = function Image360Screen(_ref) {
       onNext = _ref.onNext,
       type = _ref.type,
       spacing = _ref.spacing,
+      enableInteraction = _ref.enableInteraction,
+      disableInteraction = _ref.disableInteraction,
       className = _ref.className;
   var THREE = useThree();
   var trackScreenEvent = hooks.useTrackScreenEvent(type);
@@ -237,8 +243,8 @@ var Image360Screen = function Image360Screen(_ref) {
   var lon = React.useRef(0);
   var lat = React.useRef(0);
   var phi = React.useRef(0);
-  var theta = React.useRef(0);
-  React.useRef(50);
+  var theta = React.useRef(0); // const distance = useRef(50);
+
   var pointerDown = React.useRef(false);
   var pointerDownX = React.useRef(0);
   var pointerDownY = React.useRef(0);
@@ -248,9 +254,8 @@ var Image360Screen = function Image360Screen(_ref) {
   var render3D = React.useCallback(function () {
     if (THREE === null) {
       return;
-    }
-
-    THREE.MathUtils; // lat.current = Math.max(-85, Math.min(85, lat.current));
+    } // const { MathUtils } = THREE;
+    // lat.current = Math.max(-85, Math.min(85, lat.current));
     // phi.current = MathUtils.degToRad(90 - lat.current);
     // theta.current = MathUtils.degToRad(lon.current);
     // camera.current.position.x =
@@ -260,6 +265,7 @@ var Image360Screen = function Image360Screen(_ref) {
     //     distance.current * Math.sin(phi.current) * Math.sin(theta.current);
     // camera.current.lookAt(0, 0, 0);
 
+
     lat.current = Math.max(-85, Math.min(85, lat.current));
     phi.current = THREE.MathUtils.degToRad(90 - lat.current);
     theta.current = THREE.MathUtils.degToRad(lon.current);
@@ -480,7 +486,9 @@ var Image360Screen = function Image360Screen(_ref) {
     screenSize: {
       width: width,
       height: height
-    }
+    },
+    enableInteraction: enableInteraction,
+    disableInteraction: disableInteraction
   })) : null)) : null];
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles.container, (_ref6 = {}, _defineProperty__default["default"](_ref6, className, className !== null), _defineProperty__default["default"](_ref6, styles.showVideo, isPreview || isStatic || isCapture), _ref6)]),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-image-360",
-    "version": "0.3.81",
+    "version": "0.3.89",
     "description": "",
     "keywords": [
         "javascript"
@@ -50,15 +50,15 @@
     "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@folklore/size": "^0.1.20",
-        "@micromag/core": "^0.3.81",
-        "@micromag/element-background": "^0.3.81",
-        "@micromag/element-call-to-action": "^0.3.81",
-        "@micromag/element-closed-captions": "^0.3.81",
-        "@micromag/element-container": "^0.3.81",
-        "@micromag/element-image": "^0.3.81",
-        "@micromag/element-media-controls": "^0.3.81",
-        "@micromag/element-video": "^0.3.81",
-        "@micromag/transforms": "^0.3.81",
+        "@micromag/core": "^0.3.88",
+        "@micromag/element-background": "^0.3.88",
+        "@micromag/element-call-to-action": "^0.3.89",
+        "@micromag/element-closed-captions": "^0.3.88",
+        "@micromag/element-container": "^0.3.88",
+        "@micromag/element-image": "^0.3.88",
+        "@micromag/element-media-controls": "^0.3.88",
+        "@micromag/element-video": "^0.3.88",
+        "@micromag/transforms": "^0.3.88",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -70,5 +70,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "4fec1502a42a4813cc39e24de20c6cd47134cc62"
+    "gitHead": "b79d346163c149050ed713e8162675f11b8baf4b"
 }