@realsee/vreo 2.3.10 → 2.4.1

package/lib/Player/typings.d.ts

@@ -2,6 +2,9 @@ import React, { ReactNode } from 'react';
 import { Subscribe, Five } from '@realsee/five';
 import { VreoKeyframe, VreoKeyframeConfigMap, VreoKeyframeEvent } from '../typings/VreoUnit';
 import { VideoAgentMeshOptions } from './modules/VideoAgent/VideoAgentMesh';
+export type VreoFunctionComponent<P = {}> = (props: P) => ReactNode;
+/** @deprecated 请使用 VreoFunctionComponent<CustomVreoKeyframeProps> 替代 */
+export type LegacyCustomKeyframe = React.FC<CustomVreoKeyframeProps>;
 export interface PlayerConfigs {
     /**
      * @deprecated rename to container
@@ -24,7 +27,7 @@ export interface PlayerConfigs {
      * 如果需要在 底部面板添加自定义内容，可以传递个 React 组件。
      */
     customPanelChildren?: ReactNode;
-    customKeyframes?: React.FC<CustomVreoKeyframeProps>[];
+    customKeyframes?: (VreoFunctionComponent<CustomVreoKeyframeProps> | React.FC<CustomVreoKeyframeProps>)[];
     imageOptions?: {
         size: number;
     };
@@ -38,12 +41,12 @@ export interface PlayerConfigs {
     onAvatarClick?: () => any;
     onWaveClick?: () => any;
 }
-export declare type AppSize = 'S' | 'M' | 'L' | 'XL';
-export declare type WaveAppearance = 'single' | 'double' | 'solid' | 'swap' | 'expand';
+export type AppSize = 'S' | 'M' | 'L' | 'XL';
+export type WaveAppearance = 'single' | 'double' | 'solid' | 'swap' | 'expand';
 export interface Appearance {
     waveStyle?: 'wave' | 'solid';
 }
-export declare type VreoSubscribe = Pick<Subscribe<VreoKeyframeEvent>, 'on' | 'once' | 'off'>;
+export type VreoSubscribe = Pick<Subscribe<VreoKeyframeEvent>, 'on' | 'once' | 'off'>;
 export interface CustomVreoKeyframeProps {
     subscribe: Pick<Subscribe<{
         [key: string]: (data: VreoKeyframe, currentTime: number) => any;

package/lib/fivePlugins/CSS3DRenderPlugin/centerPoint.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = centerPoint;
-
 var _three = require("three");
-
 function centerPoint(point1, point2) {
   return new _three.Vector3((point1.x + point2.x) / 2, (point1.y + point2.y) / 2, (point1.z + point2.z) / 2);
 }

package/lib/fivePlugins/CSS3DRenderPlugin/createResizeObserver.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = createResizeObserver;
-
 /**
  * @description: 简陋的 ResizeObserver polyfill
  */

package/lib/fivePlugins/CSS3DRenderPlugin/evenNumber.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = evenNumber;
-
 function evenNumber(num, config) {
   var roundNum = Math.round(num);
   return roundNum % 2 === 0 ? roundNum : roundNum + Number(config !== null && config !== void 0 && config.smaller ? -1 : 1);

package/lib/fivePlugins/CSS3DRenderPlugin/index.d.ts

@@ -9,7 +9,7 @@ export interface Vector3Position {
     y: number;
     z: number;
 }
-export declare type CSS3DRenderPluginParameterType = undefined;
+export type CSS3DRenderPluginParameterType = undefined;
 export interface CSS3DRenderPluginExportType {
     /**
      * @description: 根据传入的四个点位创建一个3d dom容器，可以通过ReactDom.render()的方式将react组件放到容器中

package/lib/fivePlugins/CSS3DRenderPlugin/index.js

@@ -1,29 +1,22 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.CSS3DRenderPlugin = void 0;
-
-var THREE = _interopRequireWildcard(require("three"));
-
+var _three = _interopRequireWildcard(require("three"));
+var THREE = _three;
 var _CSS3DRenderer = require("three/examples/jsm/renderers/CSS3DRenderer");
-
 var _evenNumber = _interopRequireDefault(require("./evenNumber"));
-
 var _centerPoint = _interopRequireDefault(require("./centerPoint"));
-
 var _transformPositionToVector = _interopRequireDefault(require("./transformPositionToVector3"));
-
 var _createResizeObserver = _interopRequireDefault(require("./createResizeObserver"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+/**
+ * 三维向量
+ */
 
 /**
  * **CSS3DRenderPlugin** 提供矩形区域（三维空间四个坐标点），你可以在此矩形区域中渲染 DOM 内容。
@@ -31,24 +24,21 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  *
  * @returns
  */
-var CSS3DRenderPlugin = function CSS3DRenderPlugin(five) {
+var CSS3DRenderPlugin = exports.CSS3DRenderPlugin = function CSS3DRenderPlugin(five) {
   var state = {
     disposeCallbacks: []
   };
-
   var create3DDomContainer = function create3DDomContainer() {
     var _five$model, _five$model2, _config$autoRender;
-
     for (var _len = arguments.length, params = new Array(_len), _key = 0; _key < _len; _key++) {
       params[_key] = arguments[_key];
     }
-
     var points = params[0].map(function (point) {
-      return point instanceof THREE.Vector3 ? point : (0, _transformPositionToVector["default"])(point);
+      return point instanceof _three.Vector3 ? point : (0, _transformPositionToVector["default"])(point);
     });
     var config = params[1];
     if ((points === null || points === void 0 ? void 0 : points.length) < 4) return console.error('points must be equal or greater than than 4');
-    if (!(five !== null && five !== void 0 && (_five$model = five.model) !== null && _five$model !== void 0 && _five$model.loaded)) return console.error('five.model.loaded is: ', five === null || five === void 0 ? void 0 : (_five$model2 = five.model) === null || _five$model2 === void 0 ? void 0 : _five$model2.loaded);
+    if (!(five !== null && five !== void 0 && (_five$model = five.model) !== null && _five$model !== void 0 && _five$model.loaded)) return console.error('five.model.loaded is: ', five === null || five === void 0 || (_five$model2 = five.model) === null || _five$model2 === void 0 ? void 0 : _five$model2.loaded);
     var fiveElement = five.getElement();
     if (!fiveElement) return console.error('five.getElement() is ' + fiveElement);
     var disposers = [];
@@ -59,43 +49,40 @@ var CSS3DRenderPlugin = function CSS3DRenderPlugin(five) {
     var autoRender = (_config$autoRender = config === null || config === void 0 ? void 0 : config.autoRender) !== null && _config$autoRender !== void 0 ? _config$autoRender : true;
     var behindFiveContainer = (config === null || config === void 0 ? void 0 : config.behindFiveContainer) || fiveElement.parentElement || document.body;
     var container = (config === null || config === void 0 ? void 0 : config.container) || document.createElement('div');
-    container.classList.add('__Vreo-plugin--CSS3DRenderPlugin'); // 获取css3DObject, 如果mode为behind的话，一起获取mesh
+    container.classList.add('__Dnalogel-plugin--CSS3DRenderPlugin');
 
+    // 获取css3DObject, 如果mode为behind的话，一起获取mesh
     var _createObject = createObject(points, {
-      ratio: ratio,
-      dpr: dpr,
-      container: container,
-      mode: mode
-    }),
-        css3DObject = _createObject.css3DObject,
-        mesh = _createObject.mesh; // ======= INIT START =======
-
-
+        ratio: ratio,
+        dpr: dpr,
+        container: container,
+        mode: mode
+      }),
+      css3DObject = _createObject.css3DObject,
+      mesh = _createObject.mesh;
+
+    // ======= INIT START =======
     var resizeObserver;
     var frontModeUnInited = mode === 'front' && !state.frontMode;
     var behindModeUnInited = mode === 'behind' && !state.behindMode;
     var inited = !(frontModeUnInited || behindModeUnInited);
     var stopRenderFlag = false;
     var requestAnimationFrameId = null;
-
     if (behindModeUnInited) {
       state.behindMode = {
-        scene: new THREE.Scene(),
+        scene: new _three.Scene(),
         css3DRenderer: new _CSS3DRenderer.CSS3DRenderer()
       };
     }
-
     if (frontModeUnInited) {
       state.frontMode = {
-        scene: new THREE.Scene(),
+        scene: new _three.Scene(),
         css3DRenderer: new _CSS3DRenderer.CSS3DRenderer()
       };
     }
-
     var _ref = mode === 'behind' ? state.behindMode : state.frontMode,
-        scene = _ref.scene,
-        css3DRenderer = _ref.css3DRenderer;
-
+      scene = _ref.scene,
+      css3DRenderer = _ref.css3DRenderer;
     var render = function () {
       if (!inited) {
         var css3DRendererSetSize = function css3DRendererSetSize() {
@@ -109,27 +96,22 @@ var CSS3DRenderPlugin = function CSS3DRenderPlugin(five) {
           });
           css3DRenderer.setSize(rendererWidth, rendererHeight);
         };
-
         css3DRendererSetSize();
         resizeObserver = (0, _createResizeObserver["default"])(css3DRendererSetSize, fiveElement);
         css3DRenderer.domElement.style.position = 'absolute';
         css3DRenderer.domElement.style.top = '0';
         css3DRenderer.domElement.style.userSelect = 'none';
         css3DRenderer.domElement.style.pointerEvents = 'none';
-
-        var renderEveryFrame = function renderEveryFrame() {
+        var _renderEveryFrame = function renderEveryFrame() {
           if (stopRenderFlag) return;
-          requestAnimationFrameId = requestAnimationFrame(renderEveryFrame);
+          requestAnimationFrameId = requestAnimationFrame(_renderEveryFrame);
           css3DRenderer.render(scene, five.camera);
         };
-
         return function () {
           var _resizeObserver, _resizeObserver$obser;
-
           scene.add(css3DObject);
-          (_resizeObserver = resizeObserver) === null || _resizeObserver === void 0 ? void 0 : (_resizeObserver$obser = _resizeObserver.observe) === null || _resizeObserver$obser === void 0 ? void 0 : _resizeObserver$obser.call(_resizeObserver);
-          renderEveryFrame();
-
+          (_resizeObserver = resizeObserver) === null || _resizeObserver === void 0 || (_resizeObserver$obser = _resizeObserver.observe) === null || _resizeObserver$obser === void 0 || _resizeObserver$obser.call(_resizeObserver);
+          _renderEveryFrame();
           if (mode === 'behind' && mesh) {
             five.scene.add(mesh);
             disposers.push(function () {
@@ -143,18 +125,15 @@ var CSS3DRenderPlugin = function CSS3DRenderPlugin(five) {
         };
       }
     }();
-
     if (frontModeUnInited) {
       var wrapper = fiveElement.parentElement || document.body;
       wrapper.appendChild(css3DRenderer.domElement);
     }
-
     if (behindModeUnInited) {
       var _wrapper = behindFiveContainer;
-
       _wrapper.appendChild(css3DRenderer.domElement);
-    } // ======= INIT END =======
-
+    }
+    // ======= INIT END =======
 
     var dispose = function dispose() {
       stopRenderFlag = true;
@@ -163,32 +142,25 @@ var CSS3DRenderPlugin = function CSS3DRenderPlugin(five) {
       });
       scene.remove(css3DObject);
       if (typeof requestAnimationFrameId === 'number') cancelAnimationFrame(requestAnimationFrameId);
-
       if (scene.children.length === 0) {
         css3DRenderer.domElement.remove();
         if (mode === 'front') state.frontMode = undefined;
         if (mode === 'behind') state.behindMode = undefined;
-
         if (!state.behindMode && !state.frontMode) {
           var _resizeObserver2, _resizeObserver2$unob;
-
-          (_resizeObserver2 = resizeObserver) === null || _resizeObserver2 === void 0 ? void 0 : (_resizeObserver2$unob = _resizeObserver2.unobserve) === null || _resizeObserver2$unob === void 0 ? void 0 : _resizeObserver2$unob.call(_resizeObserver2);
+          (_resizeObserver2 = resizeObserver) === null || _resizeObserver2 === void 0 || (_resizeObserver2$unob = _resizeObserver2.unobserve) === null || _resizeObserver2$unob === void 0 || _resizeObserver2$unob.call(_resizeObserver2);
         }
       }
-
       return true;
     };
-
     var idx = state.disposeCallbacks.findIndex(function (item) {
       return item === dispose;
     });
-
     if (idx !== -1) {
       state.disposeCallbacks.splice(idx, 1);
     } else {
       state.disposeCallbacks.push(dispose);
     }
-
     if (autoRender) render();
     return {
       container: container,
@@ -197,12 +169,11 @@ var CSS3DRenderPlugin = function CSS3DRenderPlugin(five) {
       render: autoRender ? undefined : render
     };
   };
-
   var createObject = function createObject(points, config) {
     var ratio = config.ratio,
-        dpr = config.dpr,
-        element = config.container,
-        mode = config.mode;
+      dpr = config.dpr,
+      element = config.container,
+      mode = config.mode;
     var planeWidth = points[0].distanceTo(points[1]);
     var planeHeight = points[1].distanceTo(points[2]);
     var domWidthPx = (0, _evenNumber["default"])(planeWidth / ratio * dpr);
@@ -214,31 +185,26 @@ var CSS3DRenderPlugin = function CSS3DRenderPlugin(five) {
     element.style.pointerEvents = 'none';
     var centerPosition = (0, _centerPoint["default"])(points[0], points[2]);
     var vector01 = points[1].clone().sub(points[0]); // 点0 -> 点1 的向量
-
     var vector12 = points[2].clone().sub(points[1]); // 点1 -> 点2 的向量
-    // 旋转
 
-    var rotateXAngle = new THREE.Vector3(0, 1, 0).angleTo(new THREE.Vector3(0, vector12.y, vector12.z));
-    var rotateYAngle = new THREE.Vector3(1, 0, 0).angleTo(new THREE.Vector3(vector01.x, 0, vector01.z));
-    var rotateZAngle = vector01.angleTo(new THREE.Vector3(vector01.x, 0, vector01.z));
+    // 旋转
+    var rotateXAngle = new _three.Vector3(0, 1, 0).angleTo(new _three.Vector3(0, vector12.y, vector12.z));
+    var rotateYAngle = new _three.Vector3(1, 0, 0).angleTo(new _three.Vector3(vector01.x, 0, vector01.z));
+    var rotateZAngle = vector01.angleTo(new _three.Vector3(vector01.x, 0, vector01.z));
     /**
      * [0,1,0] => [0,0,1]  为rolate Worldx正方向
      * [0,0,1] => [0,1,0]  为rolate Worldy正方向
      * [0,1,1] => [-1,0,0] 为rolate Worldz正方向
      */
-
     var rotateX = (vector12.z > 0 ? -1 : 1) * rotateXAngle;
     var rotateY = (vector01.z < 0 ? 1 : -1) * rotateYAngle;
     var rotateZ = (vector01.x > 0 && vector01.y < 0 || vector01.x < 0 && vector01.y > 0 ? -1 : 1) * rotateZAngle;
-    css3DObject.rotateOnWorldAxis(new THREE.Vector3(1, 0, 0), rotateX); // x
-
-    css3DObject.rotateOnWorldAxis(new THREE.Vector3(0, 1, 0), rotateY); // y
-
-    css3DObject.rotateOnWorldAxis(new THREE.Vector3(0, 0, 1), rotateZ); // z
+    css3DObject.rotateOnWorldAxis(new _three.Vector3(1, 0, 0), rotateX); // x
+    css3DObject.rotateOnWorldAxis(new _three.Vector3(0, 1, 0), rotateY); // y
+    css3DObject.rotateOnWorldAxis(new _three.Vector3(0, 0, 1), rotateZ); // z
 
     css3DObject.position.set(centerPosition.x, centerPosition.y, centerPosition.z);
     var mesh;
-
     if (mode === 'behind') {
       var material = new THREE.MeshBasicMaterial({
         opacity: 0,
@@ -252,13 +218,11 @@ var CSS3DRenderPlugin = function CSS3DRenderPlugin(five) {
       mesh.rotation.copy(css3DObject.rotation);
       mesh.scale.copy(css3DObject.scale);
     }
-
     return {
       css3DObject: css3DObject,
       mesh: mesh
     };
   };
-
   return {
     create3DDomContainer: create3DDomContainer,
     disposeAll: function disposeAll() {
@@ -269,7 +233,4 @@ var CSS3DRenderPlugin = function CSS3DRenderPlugin(five) {
     }
   };
 };
-
-exports.CSS3DRenderPlugin = CSS3DRenderPlugin;
-var _default = CSS3DRenderPlugin;
-exports["default"] = _default;
+var _default = exports["default"] = CSS3DRenderPlugin;

package/lib/fivePlugins/CSS3DRenderPlugin/transformPositionToVector3.js

@@ -4,15 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _three = require("three");
-
 var transformPositionToVector3 = function transformPositionToVector3(_ref) {
   var x = _ref.x,
-      y = _ref.y,
-      z = _ref.z;
+    y = _ref.y,
+    z = _ref.z;
   return new _three.Vector3(x, y, z);
 };
-
-var _default = transformPositionToVector3;
-exports["default"] = _default;
+var _default = exports["default"] = transformPositionToVector3;