@realsee/dnalogel 0.1.0

package/shared-utils/animationFrame/BetterTween.js

@@ -0,0 +1,102 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BetterTween = void 0;
+exports.tweenProgress = tweenProgress;
+
+var _tween = _interopRequireDefault(require("@tweenjs/tween.js"));
+
+var _ = require(".");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var BetterTween = /*#__PURE__*/function (_TWEEN$Tween) {
+  _inherits(BetterTween, _TWEEN$Tween);
+
+  var _super = _createSuper(BetterTween);
+
+  function BetterTween() {
+    var _this;
+
+    _classCallCheck(this, BetterTween);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "disposeMethods", []);
+
+    _defineProperty(_assertThisInitialized(_this), "onDispose", function (callback) {
+      _this.disposeMethods.push(callback);
+
+      return _assertThisInitialized(_this);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "play", function () {
+      _this.start(0);
+
+      _this.animationFrameDisposer = (0, _.requestAnimationFrameInterval)(function (time) {
+        return _this.update(time);
+      });
+      return _assertThisInitialized(_this);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "dispose", function () {
+      var _this$animationFrameD, _this2;
+
+      _this.stop();
+
+      (_this$animationFrameD = (_this2 = _this).animationFrameDisposer) === null || _this$animationFrameD === void 0 ? void 0 : _this$animationFrameD.call(_this2);
+
+      _this.disposeMethods.forEach(function (fn) {
+        return fn();
+      });
+
+      _this.disposeMethods = [];
+
+      _tween["default"].remove(_assertThisInitialized(_this));
+    });
+
+    return _this;
+  }
+
+  return BetterTween;
+}(_tween["default"].Tween);
+
+exports.BetterTween = BetterTween;
+
+function tweenProgress(duration) {
+  var easing = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _tween["default"].Easing.Linear.None;
+  var tween = new BetterTween({
+    progress: 0
+  }).to({
+    progress: 1
+  });
+  if (duration !== undefined) tween.duration(duration);
+  if (easing !== undefined) tween.easing(easing);
+  return tween;
+}

package/shared-utils/animationFrame/calculateProgress.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 线性过程插值
+ */
+export declare function progressNumber(from: number, to: number, pst: number): number;
+/**
+ * 弧度过程插值值,会取锐角进行插值
+ */
+export declare function progressRad(from: number, to: number, pst: number): number;

package/shared-utils/animationFrame/calculateProgress.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.progressNumber = progressNumber;
+exports.progressRad = progressRad;
+
+var _formatRad = require("./formatRad");
+
+var PI = Math.PI;
+var PI_2 = PI * 2;
+/**
+ * 线性过程插值
+ */
+
+function progressNumber(from, to, pst) {
+  return from + (to - from) * pst;
+}
+/**
+ * 弧度过程插值值,会取锐角进行插值
+ */
+
+
+function progressRad(from, to, pst) {
+  from = (0, _formatRad.formatRad)(from);
+  to = (0, _formatRad.formatRad)(to);
+
+  if (to - from > PI) {
+    return (0, _formatRad.formatRad)(progressNumber(from + PI_2, to, pst));
+  }
+
+  if (from - to > PI) {
+    return (0, _formatRad.formatRad)(progressNumber(from - PI_2, to, pst));
+  }
+
+  return progressNumber(from, to, pst);
+}

package/shared-utils/animationFrame/formatRad.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 把一个任意角度的弧度值转换为一个 [0, 2PI] 的弧度值
+ * @param rad 弧度值
+ */
+export declare function formatLongitude(rad: number): number;
+/**
+ * 把一个任意角度的弧度值转换为一个 [-2PI, 2PI] 的弧度值
+ * @param rad 弧度值
+ */
+export declare function formatLatitude(rad: number): number;
+/**
+ * 把一个任意角度的弧度值转换为一个 [0, 2PI] 的弧度值
+ * @param rad 弧度值
+ */
+export declare const formatRad: typeof formatLongitude;

package/shared-utils/animationFrame/formatRad.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatLatitude = formatLatitude;
+exports.formatLongitude = formatLongitude;
+exports.formatRad = void 0;
+var PI_2 = Math.PI * 2;
+/**
+ * 把一个任意角度的弧度值转换为一个 [0, 2PI] 的弧度值
+ * @param rad 弧度值
+ */
+
+function formatLongitude(rad) {
+  return (rad % PI_2 + PI_2) % PI_2;
+}
+/**
+ * 把一个任意角度的弧度值转换为一个 [-2PI, 2PI] 的弧度值
+ * @param rad 弧度值
+ */
+
+
+function formatLatitude(rad) {
+  return rad % PI_2;
+}
+/**
+ * 把一个任意角度的弧度值转换为一个 [0, 2PI] 的弧度值
+ * @param rad 弧度值
+ */
+
+
+var formatRad = formatLongitude;
+exports.formatRad = formatRad;

package/shared-utils/animationFrame/index.d.ts

@@ -0,0 +1,15 @@
+declare const _requestAnimationFrame: ((callback: FrameRequestCallback) => number) & typeof requestAnimationFrame;
+export default _requestAnimationFrame;
+export declare function nextFrame(fn: FrameRequestCallback, delay?: number): void;
+/**
+ * 在每个 AnimationFrame 中调用传入的函数
+ * @param callback 每次 AnimationFrame 中调用的函数
+ * @param frame 每秒运行多少次
+ * @returns 返回一个函数，调用可以停止 AnimationFrameLoop
+ */
+export declare function requestAnimationFrameInterval(callback?: (time: number) => any, frame?: number): () => void;
+/**
+ * 获取两个 AnimationFrame 间隔的时间
+ * @returns 返回一个 Promise，resolve 的结果是两个 AnimationFrame 间隔的时间
+ */
+export declare function getFrameTime(): Promise<unknown>;

package/shared-utils/animationFrame/index.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+exports.getFrameTime = getFrameTime;
+exports.nextFrame = nextFrame;
+exports.requestAnimationFrameInterval = requestAnimationFrameInterval;
+
+var _requestAnimationFrame = window.requestAnimationFrame || function (fn) {
+  return setTimeout(fn, 16);
+};
+
+var _cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;
+
+var _default = _requestAnimationFrame;
+exports["default"] = _default;
+
+function nextFrame(fn) {
+  var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  if (delay <= 0) _requestAnimationFrame(fn);else _requestAnimationFrame(function () {
+    return nextFrame(fn, delay - 1);
+  });
+}
+/**
+ * 在每个 AnimationFrame 中调用传入的函数
+ * @param callback 每次 AnimationFrame 中调用的函数
+ * @param frame 每秒运行多少次
+ * @returns 返回一个函数，调用可以停止 AnimationFrameLoop
+ */
+
+
+function requestAnimationFrameInterval(callback) {
+  var frame = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 60;
+  var index = -1;
+  var oldTime = 0;
+  var startTime = -1;
+  var minDeltaTime = 1000 / frame;
+
+  function loop(time) {
+    startTime === -1 && (startTime = time);
+    index = _requestAnimationFrame(loop);
+    var deltaTime = time - oldTime;
+    if (deltaTime < minDeltaTime) return;
+    oldTime = time;
+    callback && callback(time - startTime);
+  }
+
+  index = _requestAnimationFrame(loop);
+  return function stop() {
+    _cancelAnimationFrame(index);
+  };
+}
+/**
+ * 获取两个 AnimationFrame 间隔的时间
+ * @returns 返回一个 Promise，resolve 的结果是两个 AnimationFrame 间隔的时间
+ */
+
+
+function getFrameTime() {
+  var start = Date.now();
+  return new Promise(function (resolve) {
+    _requestAnimationFrame(function () {
+      resolve(Date.now() - start);
+    });
+  });
+} // export { Easing } from './tween'
+// export { default as tween } from './tween'

package/shared-utils/animationFrame/tween.d.ts

@@ -0,0 +1,75 @@
+import * as TWEEN from '@tweenjs/tween.js';
+export declare const Easing: {
+    Linear: {
+        None: (amount: number) => number;
+    };
+    Quadratic: {
+        In: (amount: number) => number;
+        Out: (amount: number) => number;
+        InOut: (amount: number) => number;
+    };
+    Cubic: {
+        In: (amount: number) => number;
+        Out: (amount: number) => number;
+        InOut: (amount: number) => number;
+    };
+    Quartic: {
+        In: (amount: number) => number;
+        Out: (amount: number) => number;
+        InOut: (amount: number) => number;
+    };
+    Quintic: {
+        In: (amount: number) => number;
+        Out: (amount: number) => number;
+        InOut: (amount: number) => number;
+    };
+    Sinusoidal: {
+        In: (amount: number) => number;
+        Out: (amount: number) => number;
+        InOut: (amount: number) => number;
+    };
+    Exponential: {
+        In: (amount: number) => number;
+        Out: (amount: number) => number;
+        InOut: (amount: number) => number;
+    };
+    Circular: {
+        In: (amount: number) => number;
+        Out: (amount: number) => number;
+        InOut: (amount: number) => number;
+    };
+    Elastic: {
+        In: (amount: number) => number;
+        Out: (amount: number) => number;
+        InOut: (amount: number) => number;
+    };
+    Back: {
+        In: (amount: number) => number;
+        Out: (amount: number) => number;
+        InOut: (amount: number) => number;
+    };
+    Bounce: {
+        In: (amount: number) => number;
+        Out: (amount: number) => number;
+        InOut: (amount: number) => number;
+    };
+};
+interface ITween<T> extends TWEEN.Tween<T> {
+    onDestroy: (fn: () => void) => TWEEN.Tween<T>;
+    destroy: () => void;
+}
+/**
+ * 对象变化的补间动画
+ * 1. 应用 requestAnimationFrameInterval 做 update
+ * 2. 在原生 tween 上新增 destroy 方法和 onDestroy 监听
+ * DOC： https://github.com/tweenjs/tween.js
+ * @param from 对象起始状态
+ * @param to 对象末尾状态
+ * @param duration 经历时间（s）
+ * @param easing 过程动画，默认是 Easing.Linear.None
+ */
+export default function tween<T>(from: T, to: T, duration: number, easing?: (amount: number) => number): ITween<T>;
+export declare function tweenProgress(duration: number, easing: typeof Easing.Linear.None): ITween<{
+    progress: number;
+}>;
+export {};

package/shared-utils/animationFrame/tween.js

@@ -0,0 +1,76 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Easing = void 0;
+exports["default"] = tween;
+exports.tweenProgress = tweenProgress;
+
+var TWEEN = _interopRequireWildcard(require("@tweenjs/tween.js"));
+
+var _index = require("./index");
+
+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; }
+
+var Easing = TWEEN.Easing;
+exports.Easing = Easing;
+
+/**
+ * 对象变化的补间动画
+ * 1. 应用 requestAnimationFrameInterval 做 update
+ * 2. 在原生 tween 上新增 destroy 方法和 onDestroy 监听
+ * DOC： https://github.com/tweenjs/tween.js
+ * @param from 对象起始状态
+ * @param to 对象末尾状态
+ * @param duration 经历时间（s）
+ * @param easing 过程动画，默认是 Easing.Linear.None
+ */
+function tween(from, to, duration) {
+  var easing = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : Easing.Linear.None;
+  var tween = new TWEEN.Tween(from).to(to, duration).easing(easing); // 这里注意一下，因为 requestAnimationFrameInterval 给的时间是从 0 开始的，tween 动画也从 0 开始
+
+  (0, _index.nextFrame)(function () {
+    return tween.start(0);
+  });
+  var cancelAnimationFrame = (0, _index.requestAnimationFrameInterval)(function (time) {
+    if (tween.update(time) === false) cancelAnimationFrame();
+  });
+  var destroyMethods = [];
+
+  tween.onDestroy = function (fn) {
+    destroyMethods.push(fn);
+    return tween;
+  };
+
+  tween.destroy = function () {
+    this.stop();
+    Object.assign(tween, {
+      _onStartCallback: null,
+      _onUpdateCallback: null,
+      _onCompleteCallback: null,
+      _onStopCallbackL: null
+    });
+    var destroyMethod;
+
+    while (destroyMethod = destroyMethods.shift()) {
+      destroyMethod();
+    }
+
+    cancelAnimationFrame();
+  };
+
+  return tween;
+}
+
+function tweenProgress(duration, easing) {
+  return tween({
+    progress: 0
+  }, {
+    progress: 1
+  }, duration, easing);
+}

package/shared-utils/changeModelCanvansOpacity.d.ts

@@ -0,0 +1,2 @@
+import type { Five } from '@realsee/five';
+export default function changeModelCanvansOpacity(five: Five, opacity: number, duration?: number): void;

package/shared-utils/changeModelCanvansOpacity.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = changeModelCanvansOpacity;
+
+function changeModelCanvansOpacity(five, opacity) {
+  var duration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 300;
+  var fiveEle = five.getElement();
+  if (!fiveEle) return;
+  fiveEle.style.opacity = opacity + '';
+  fiveEle.style.transition = duration === 0 ? 'none' : "opacity ".concat(duration, "ms linear");
+  if (duration === 0) return;
+  Promise.race([new Promise(function (res) {
+    return fiveEle.addEventListener('transitionend', res, {
+      once: true
+    });
+  }), new Promise(function (res) {
+    return setTimeout(res, duration);
+  })]).then(function () {
+    fiveEle.style.transition = 'none';
+  });
+}

package/shared-utils/createFiveContainer.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { FiveInitArgs } from '@realsee/five';
+import { FiveProviderPropTypes } from '@realsee/five/react';
+/**
+ * 创建一个Five App 容器：附带 Five 相关的 React Context & Hooks。
+ *
+ * @param workJson
+ * @returns
+ */
+export default function createFiveContainer(workJson: Record<string, any>, fiveInitArgs?: FiveInitArgs, withOpt?: boolean, initialState?: FiveProviderPropTypes['initialState']): React.FC<{}>;

package/shared-utils/createFiveContainer.js

@@ -0,0 +1,165 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = createFiveContainer;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _five = require("@realsee/five");
+
+var _react2 = require("@realsee/five/react");
+
+var THREE = _interopRequireWildcard(require("three"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+/**
+ * 创建一个Five App 容器：附带 Five 相关的 React Context & Hooks。
+ *
+ * @param workJson
+ * @returns
+ */
+function createFiveContainer(workJson) {
+  var fiveInitArgs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var withOpt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var initialState = arguments.length > 3 ? arguments[3] : undefined;
+  var work = (0, _five.parseWork)(workJson);
+  var defaultInitArgs = {
+    imageOptions: {
+      size: 2048
+    },
+    textureOptions: {
+      size: 512
+    },
+    onlyRenderIfNeeds: true
+  };
+  var FiveProvider = (0, _react2.createFiveProvider)(Object.assign(defaultInitArgs, fiveInitArgs));
+
+  var FiveContainer = function FiveContainer(props) {
+    var _React$useState = React.useState({
+      width: 200,
+      height: 540
+    }),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        wh = _React$useState2[0],
+        setWH = _React$useState2[1];
+
+    var ref = React.useRef(null);
+    var fixedHeightRef = React.useRef(false);
+    var resizeObserverRef = React.useRef(new ResizeObserver(function (entries) {
+      var entry = entries[0];
+      var width = entry.contentRect.width;
+      var height = fixedHeightRef.current ? wh.height : entry.contentRect.height;
+      if (!ref.current) return;
+      if (!resizeObserverRef.current) return;
+      setWH({
+        width: width,
+        height: height
+      });
+    }));
+    React.useEffect(function () {
+      if (!ref.current) return;
+      if (!resizeObserverRef.current) return;
+      var rootNd = document.querySelector('#root');
+
+      if (rootNd && rootNd.getAttribute('hidden') === 'true') {
+        fixedHeightRef.current = true;
+      }
+
+      resizeObserverRef.current.observe(ref.current);
+    }, []);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FiveProvider, {
+      initialState: initialState,
+      initialWork: work,
+      ref: function ref(_ref) {
+        return Object.assign(window, {
+          $five: _ref === null || _ref === void 0 ? void 0 : _ref.five,
+          $Five: _five.Five,
+          $THREE: THREE
+        });
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: ref,
+      style: {
+        width: '100%',
+        height: '100%',
+        position: 'relative'
+      }
+    }, /*#__PURE__*/React.createElement(_react2.FiveCanvas, {
+      width: wh.width,
+      height: wh.height
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'none',
+        overflow: 'hidden'
+      }
+    }, props.children), withOpt && /*#__PURE__*/React.createElement(FiveOpt, null))));
+  };
+
+  return FiveContainer;
+}
+
+function FiveOpt() {
+  var _useFiveState = (0, _react2.useFiveState)(),
+      _useFiveState2 = _slicedToArray(_useFiveState, 2),
+      fiveState = _useFiveState2[0],
+      setFiveState = _useFiveState2[1];
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "five-opt",
+    style: {
+      position: 'absolute',
+      bottom: '36px',
+      right: '24px',
+      display: 'flex',
+      flexDirection: 'column',
+      pointerEvents: 'all',
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    className: (0, _classnames["default"])('pure-button pure-button-primary', {
+      'pure-button-disabled': fiveState.mode === _five.Five.Mode.Panorama
+    }),
+    onClick: function onClick() {
+      return setFiveState({
+        mode: _five.Five.Mode.Panorama
+      });
+    }
+  }, "\u5168\u666F\u6A21\u5F0F"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("button", {
+    className: (0, _classnames["default"])('pure-button pure-button-primary', {
+      'pure-button-disabled': fiveState.mode === _five.Five.Mode.Floorplan
+    }),
+    onClick: function onClick() {
+      return setFiveState({
+        mode: _five.Five.Mode.Floorplan
+      });
+    }
+  }, "\u4E09\u7EF4\u6A21\u5F0F"));
+}

package/shared-utils/createLine/index.d.ts

@@ -0,0 +1,3 @@
+import { Vector3 } from 'three';
+import { Line } from '@realsee/five/line';
+export default function createLine(point1: Vector3, point2: Vector3, color?: Vector3, dashed?: boolean): Line;