@realsee/dnalogel 0.1.5 → 0.1.7

package/components/GLTFView/index.d.ts

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { GLTFViewer, GLTFViewerConfig } from '../../libs/gltf-viewer';
+export declare type GLTFViewPropTypes = {
+    url: string;
+    className?: string;
+    ref?: (gltfViewer: GLTFViewer) => void;
+} & GLTFViewerConfig;
+/**
+ * **GLTFViewer** 预览 `glTF` 模型文件（支持.gltf和.glb格式），附带光照等效果。
+ *
+ * ### Usage
+ *
+ * 基础用法：
+ *
+ * ```jsx
+ * import { GLTFViewer } from '@realsee/dnalogel/libs/gltf-viewer'
+ *
+ * // 创建实例
+ * const gltfViewer = new GLTFViewer({
+ *  pixelRatio: 1,
+ * })
+ *
+ * // 挂载至 DOM 节点
+ * gltfViewer.appendTo(ref.current)
+ *
+ * // 加载模型文件
+ * await gltfViewer.load(glbCDNUrl)
+ *
+ * // 输出当前模型状态数据
+ * console.log(gltfViewer.state)
+ * // { longitude: 0, latitude: -0.3, fov: 35 }
+ *
+ * // 设置当前模型状态：直接给状态对象赋值（立即生效）
+ * gltfViewer.state = { longitude: 0, latitude: -0.3, fov: 35 }
+ *
+ * // 设置当前模型状态：直接给状态对象单个属性赋值（立即生效）
+ * gltfViewer.state.fov = 50
+ *
+ * ```
+ *
+ * 事件监听：
+ *
+ * ```jsx
+ * gltfViewer.on('stateChange', (state: GLTFViewerState) => {
+ *  // 事件：模型状态变化
+ * })
+ * gltfViewer.on('willLoad', () => {
+ *  // 即将加载
+ * })
+ * gltfViewer.on('progressing', (progressing: number) => {
+ *  // 加载进度
+ * })
+ * gltfViewer.on('loaded', (gltf: GLTF) => {
+ *  // 加载完成
+ * })
+ * gltfViewer.on('loadError', (error) => {
+ *  // 加载异常
+ * })
+ * ```
+ *
+ * React 组件：
+ *
+ * ```jsx
+ * import { GLTFView } from '@realsee/dnalogel/components/GLTFView'
+ *
+ * <GLTFView
+ *  url="//vrlab-static.ljcdn.com/release/web/demo.435f5fa2.glb"
+ *  ref={(gltfViewer) => gltfViewer.on('stateChange', (state) => console.log(state))} />
+ * ```
+ */
+export declare const GLTFView: React.FC<GLTFViewPropTypes>;
+export default GLTFView;

package/components/GLTFView/index.js

@@ -0,0 +1,149 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.object.define-property.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.GLTFView = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _gltfViewer = require("../../libs/gltf-viewer");
+
+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; }
+
+/**
+ * **GLTFViewer** 预览 `glTF` 模型文件（支持.gltf和.glb格式），附带光照等效果。
+ *
+ * ### Usage
+ *
+ * 基础用法：
+ *
+ * ```jsx
+ * import { GLTFViewer } from '@realsee/dnalogel/libs/gltf-viewer'
+ *
+ * // 创建实例
+ * const gltfViewer = new GLTFViewer({
+ *  pixelRatio: 1,
+ * })
+ *
+ * // 挂载至 DOM 节点
+ * gltfViewer.appendTo(ref.current)
+ *
+ * // 加载模型文件
+ * await gltfViewer.load(glbCDNUrl)
+ *
+ * // 输出当前模型状态数据
+ * console.log(gltfViewer.state)
+ * // { longitude: 0, latitude: -0.3, fov: 35 }
+ *
+ * // 设置当前模型状态：直接给状态对象赋值（立即生效）
+ * gltfViewer.state = { longitude: 0, latitude: -0.3, fov: 35 }
+ *
+ * // 设置当前模型状态：直接给状态对象单个属性赋值（立即生效）
+ * gltfViewer.state.fov = 50
+ *
+ * ```
+ *
+ * 事件监听：
+ *
+ * ```jsx
+ * gltfViewer.on('stateChange', (state: GLTFViewerState) => {
+ *  // 事件：模型状态变化
+ * })
+ * gltfViewer.on('willLoad', () => {
+ *  // 即将加载
+ * })
+ * gltfViewer.on('progressing', (progressing: number) => {
+ *  // 加载进度
+ * })
+ * gltfViewer.on('loaded', (gltf: GLTF) => {
+ *  // 加载完成
+ * })
+ * gltfViewer.on('loadError', (error) => {
+ *  // 加载异常
+ * })
+ * ```
+ *
+ * React 组件：
+ *
+ * ```jsx
+ * import { GLTFView } from '@realsee/dnalogel/components/GLTFView'
+ *
+ * <GLTFView
+ *  url="//vrlab-static.ljcdn.com/release/web/demo.435f5fa2.glb"
+ *  ref={(gltfViewer) => gltfViewer.on('stateChange', (state) => console.log(state))} />
+ * ```
+ */
+var GLTFView = function GLTFView(props) {
+  var ref = React.useRef(null);
+  React.useEffect(function () {
+    if (!ref.current) return;
+    var gltfViewer = new _gltfViewer.GLTFViewer(props);
+    gltfViewer.appendTo(ref.current);
+
+    var callback = /*#__PURE__*/function () {
+      var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+        return _regenerator["default"].wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return gltfViewer.load(props.url);
+
+              case 2:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function callback() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+
+    callback(); // 实例
+
+    if (props.ref) {
+      props.ref(ref.current);
+    }
+
+    return function () {
+      gltfViewer.dispose();
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: 'GLTFView ' + (props.className || ''),
+    ref: ref
+  });
+};
+
+exports.GLTFView = GLTFView;
+GLTFView.defaultProps = {};
+var _default = GLTFView;
+exports["default"] = _default;

package/libs/gltf-viewer/Subscribe.d.ts

@@ -0,0 +1,76 @@
+export declare type EventMap = {
+    [name: string]: (...args: any[]) => void | boolean;
+};
+/**
+ * 监听者模式
+ * @template T 预设的监听回调类型
+ * @example
+ * ```
+ * new Subscribe<{
+ * "foo": [arg1: number, arg2: string],
+ * "bar": [arg: boolean],
+ * }>()
+ * ```
+ */
+declare class Subscribe<T extends EventMap> {
+    /**
+     * 判断是否注册了事件
+     * @param name  事件类型
+     */
+    hasListener(name: keyof T): boolean;
+    /**
+     * 注册事件
+     * @param  name    事件类型
+     * @param  callback 事件回调函数
+     * @param  once     是否只执行一次
+     * @returns 解除事件
+     * @template K 预设的监听事件名称
+     * @template C 回调函数函数上下文
+     */
+    on<K extends keyof T>(name: K, callback: (...args: Parameters<T[K]>) => ReturnType<T[K]>, once?: boolean): () => void;
+    /**
+     * 注册事件(是否只执行一次)
+     * @param  name     事件类型
+     * @param  callback 事件回调函数
+     * @returns 解除事件
+     * @template K 预设的监听事件名称
+     * @template C 回调函数函数上下文
+     */
+    once<K extends keyof T>(name: K, callback: (...args: Parameters<T[K]>) => ReturnType<T[K]>): () => void;
+    /**
+     * 解除事件
+     *
+     * 如果 name 不传的话解除对应所有事件
+     * 如果 name, callback 不传的话解除所有name的所有事件
+     * @param  name     事件类型
+     * @param  callback 事件回调函数
+     * @template K 预设的监听事件名称
+     */
+    off<K extends keyof T>(name?: K, callback?: (...args: Parameters<T[K]>) => ReturnType<T[K]>): void;
+    /**
+     * 触发事件
+     * @param  name  事件类型
+     * @param  data  触发事件的数据
+     * @returns canceled 是否被触发取消
+     * @template K 预设的监听事件名称
+     */
+    emit<K extends keyof T>(name: K, ...data: Parameters<T[K]>): boolean;
+}
+export declare namespace SubscribeMixinType {
+    interface hasListener<T extends EventMap> {
+        (name: keyof T): boolean;
+    }
+    interface on<T extends EventMap> {
+        <K extends keyof T>(name: K, callback: (...args: Parameters<T[K]>) => ReturnType<T[K]>, once?: boolean): () => void;
+    }
+    interface once<T extends EventMap> {
+        <K extends keyof T>(name: K, callback: (...args: Parameters<T[K]>) => ReturnType<T[K]>): () => void;
+    }
+    interface off<T extends EventMap> {
+        <K extends keyof T>(names?: K | K[], callback?: (...args: any[]) => any): void;
+    }
+    interface emit<T extends EventMap> {
+        <K extends keyof T>(name: K, ...data: Parameters<T[K]>): boolean;
+    }
+}
+export { Subscribe };

package/libs/gltf-viewer/Subscribe.js

@@ -0,0 +1,231 @@
+"use strict";
+
+require("core-js/modules/es.function.name.js");
+
+require("core-js/modules/es.array.from.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.array.is-array.js");
+
+require("core-js/modules/es.object.define-property.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SubscribeMixinType = exports.Subscribe = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.array.splice.js");
+
+require("core-js/modules/es.array.slice.js");
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+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; }
+
+// type UniqueSymbol = ReturnType<(a: string) => { readonly 0: unique symbol }[0]>;
+//
+// function createSymbol(description: string): UniqueSymbol {
+//   // TODO 解决提示
+//   // @ts-ignore
+//   return typeof Symbol === "undefined" ? `$Symbol<${description}>$` : Symbol(description);
+// }
+//
+// const EVENT_SYMBOL = createSymbol("$$LIVE_EVENT$$")
+var EVENT_SYMBOL = Symbol("$$LIVE_EVENT$$");
+
+function __generateEventIfNotExisted(instance) {
+  if (!instance[EVENT_SYMBOL]) {
+    instance[EVENT_SYMBOL] = {};
+  }
+
+  return instance[EVENT_SYMBOL];
+}
+
+function __removeEventIfNotExisted(instance) {
+  if (!instance[EVENT_SYMBOL]) {
+    delete instance[EVENT_SYMBOL];
+  }
+}
+/**
+ * 监听者模式
+ * @template T 预设的监听回调类型
+ * @example
+ * ```
+ * new Subscribe<{
+ * "foo": [arg1: number, arg2: string],
+ * "bar": [arg: boolean],
+ * }>()
+ * ```
+ */
+
+
+var Subscribe = /*#__PURE__*/function () {
+  function Subscribe() {
+    (0, _classCallCheck2["default"])(this, Subscribe);
+  }
+
+  (0, _createClass2["default"])(Subscribe, [{
+    key: "hasListener",
+    value:
+    /**
+     * 判断是否注册了事件
+     * @param name  事件类型
+     */
+    function hasListener(name) {
+      var events = __generateEventIfNotExisted(this);
+
+      return events && events[name] && events[name].length > 0;
+    }
+    /**
+     * 注册事件
+     * @param  name    事件类型
+     * @param  callback 事件回调函数
+     * @param  once     是否只执行一次
+     * @returns 解除事件
+     * @template K 预设的监听事件名称
+     * @template C 回调函数函数上下文
+     */
+
+  }, {
+    key: "on",
+    value: function on(name, callback, once) {
+      var _this = this;
+
+      var events = __generateEventIfNotExisted(this);
+
+      if (!events[name]) events[name] = [];
+      events[name].push([callback, once || false]);
+      return function () {
+        return _this.off(name, callback);
+      };
+    }
+    /**
+     * 注册事件(是否只执行一次)
+     * @param  name     事件类型
+     * @param  callback 事件回调函数
+     * @returns 解除事件
+     * @template K 预设的监听事件名称
+     * @template C 回调函数函数上下文
+     */
+
+  }, {
+    key: "once",
+    value: function once(name, callback) {
+      return this.on(name, callback, true);
+    }
+    /**
+     * 解除事件
+     *
+     * 如果 name 不传的话解除对应所有事件
+     * 如果 name, callback 不传的话解除所有name的所有事件
+     * @param  name     事件类型
+     * @param  callback 事件回调函数
+     * @template K 预设的监听事件名称
+     */
+
+  }, {
+    key: "off",
+    value: function off(name, callback) {
+      if (name === undefined) {
+        __removeEventIfNotExisted(this);
+
+        return;
+      }
+
+      var events = __generateEventIfNotExisted(this);
+
+      if (!events[name]) events[name] = [];
+
+      if (callback === undefined) {
+        events[name].length = 0;
+        return;
+      }
+
+      var index = 0;
+
+      for (; index < events[name].length; index++) {
+        if (events[name][index][0] === callback) break;
+      }
+
+      if (index < events[name].length) {
+        events[name].splice(index, 1);
+      }
+    }
+    /**
+     * 触发事件
+     * @param  name  事件类型
+     * @param  data  触发事件的数据
+     * @returns canceled 是否被触发取消
+     * @template K 预设的监听事件名称
+     */
+
+  }, {
+    key: "emit",
+    value: function emit(name) {
+      var canceled = false;
+
+      var events = __generateEventIfNotExisted(this);
+
+      var event = events[name] || [];
+
+      for (var _len = arguments.length, data = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        data[_key - 1] = arguments[_key];
+      }
+
+      var _iterator = _createForOfIteratorHelper(event.slice()),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var one = _step.value;
+
+          var _one = (0, _slicedToArray2["default"])(one, 2),
+              _callback = _one[0],
+              _one$ = _one[1],
+              _once = _one$ === void 0 ? false : _one$;
+
+          var result = _callback.apply(void 0, data);
+
+          if (_once) this.off(name, _callback);
+          if (result === false) canceled = true;
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+
+      return canceled;
+    }
+  }]);
+  return Subscribe;
+}();
+
+exports.Subscribe = Subscribe;
+var SubscribeMixinType;
+exports.SubscribeMixinType = SubscribeMixinType;
+
+(function (_SubscribeMixinType) {})(SubscribeMixinType || (exports.SubscribeMixinType = SubscribeMixinType = {}));

package/libs/gltf-viewer/coordsMoveByOffset.d.ts

@@ -0,0 +1,13 @@
+export declare function coordsMoveByOffset(coords: {
+    longitude: number;
+    latitude: number;
+}, offset: {
+    x: number;
+    y: number;
+}, layout: {
+    height: number;
+    width: number;
+}): {
+    longitude: number;
+    latitude: number;
+};

package/libs/gltf-viewer/coordsMoveByOffset.js

@@ -0,0 +1,22 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.coordsMoveByOffset = coordsMoveByOffset;
+
+var _formatRad = require("./formatRad");
+
+function coordsMoveByOffset(coords, offset, layout) {
+  var longitude = coords.longitude,
+      latitude = coords.latitude;
+  longitude = longitude - offset.x / layout.width * 3;
+  latitude = latitude - offset.y / layout.height * 3;
+  longitude = (0, _formatRad.formatRad)(longitude);
+  return {
+    longitude: longitude,
+    latitude: latitude
+  };
+}

package/libs/gltf-viewer/coordsToDirection.d.ts

@@ -0,0 +1,5 @@
+import * as THREE from "three";
+export declare function coordsToDirection({ longitude, latitude }: {
+    longitude: number;
+    latitude: number;
+}): THREE.Vector3;

package/{components/PBRView/index.js → libs/gltf-viewer/coordsToDirection.js}

@@ -19,27 +19,23 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.coordsToDirection = coordsToDirection;
 
-var React = _interopRequireWildcard(require("react"));
+var THREE = _interopRequireWildcard(require("three"));
 
 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; }
 
-/**
- * 查看 **PBR**模型
- *
- * @TODO 待排期
- *
- * > RD 小哥哥 正在 加班研发中 ...
- */
-var PBRView = function PBRView() {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "PBRViewer"
-  });
-};
-
-PBRView.defaultProps = {};
-var _default = PBRView;
-exports["default"] = _default;
+function coordsToDirection(_ref) {
+  var longitude = _ref.longitude,
+      latitude = _ref.latitude;
+  var distance = Math.abs(Math.cos(latitude));
+  return new THREE.Vector3(
+  /* x */
+  -Math.sin(longitude) * distance,
+  /* y */
+  -Math.sin(latitude),
+  /* z */
+  -Math.cos(longitude) * distance);
+}

package/libs/gltf-viewer/formatRad.d.ts

@@ -0,0 +1 @@
+export declare function formatRad(rad: number): number;

package/libs/gltf-viewer/formatRad.js

@@ -0,0 +1,13 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatRad = formatRad;
+var PI_2 = Math.PI * 2;
+
+function formatRad(rad) {
+  return (rad % PI_2 + PI_2) % PI_2;
+}

package/libs/gltf-viewer/getFrameTime.d.ts

@@ -0,0 +1 @@
+export declare function getFrameTime(callback: (duration: number) => void): void;

package/libs/gltf-viewer/getFrameTime.js

@@ -0,0 +1,28 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getFrameTime = getFrameTime;
+
+require("core-js/modules/es.date.now.js");
+
+require("core-js/modules/es.date.to-string.js");
+
+var _requestAnimationFrame = require("./requestAnimationFrame");
+
+var cache = {
+  duration: 0
+};
+
+function getFrameTime(callback) {
+  if (cache.duration) callback(cache.duration);
+  var start = Date.now();
+  (0, _requestAnimationFrame.requestAnimationFrame)(function () {
+    callback(cache.duration = Date.now() - start);
+  });
+}
+
+getFrameTime(function () {});