@realsee/dnalogel 0.1.0

package/plugins/floorplan/ModelFloorplanPlugin/Controller.js

@@ -0,0 +1,643 @@
+"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"] = exports.MODEL_FLOORPLAN_PLUGIN_NAME = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _components = _interopRequireDefault(require("./components"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _to = _interopRequireDefault(require("../../../shared-utils/to"));
+
+var _formatData = _interopRequireDefault(require("../utils/formatData"));
+
+var _equal = _interopRequireDefault(require("../../../shared-utils/equal"));
+
+var _getPxmm = _interopRequireDefault(require("../../../shared-utils/getPxmm"));
+
+var _correctFiveState = _interopRequireWildcard(require("./utils/correctFiveState"));
+
+var _changeModelCanvansOpacity = _interopRequireDefault(require("../../../shared-utils/changeModelCanvansOpacity"));
+
+var _controller = require("./controller.style");
+
+var _filter = require("../../../shared-utils/filter");
+
+var _five2 = require("@realsee/five");
+
+var _constant = require("./utils/constant");
+
+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; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+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 MODEL_FLOORPLAN_PLUGIN_NAME = 'modelFloorplanPlugin';
+exports.MODEL_FLOORPLAN_PLUGIN_NAME = MODEL_FLOORPLAN_PLUGIN_NAME;
+
+var ModelFloorplanPluginController = /*#__PURE__*/function () {
+  /** 展示状态 */
+
+  /** 户型图大小 */
+  function ModelFloorplanPluginController(_five, params) {
+    var _this = this,
+        _params$scale;
+
+    _classCallCheck(this, ModelFloorplanPluginController);
+
+    _defineProperty(this, "name", MODEL_FLOORPLAN_PLUGIN_NAME);
+
+    _defineProperty(this, "visible", false);
+
+    _defineProperty(this, "size", {
+      width: 0,
+      height: 0
+    });
+
+    _defineProperty(this, "pxmm", 0);
+
+    _defineProperty(this, "panoIndex", 0);
+
+    _defineProperty(this, "floorIndex", 0);
+
+    _defineProperty(this, "configs", {});
+
+    _defineProperty(this, "lastPanoramaLongitude", 0);
+
+    _defineProperty(this, "container", document.createElement('div'));
+
+    _defineProperty(this, "dispose", function () {
+      var _this$container;
+
+      var five = _this.five;
+
+      _this.hide();
+
+      _this.container && _reactDom["default"].unmountComponentAtNode(_this.container);
+      (_this$container = _this.container) === null || _this$container === void 0 ? void 0 : _this$container.remove();
+      five.off('modelLoaded', _this.handleModelLoaded);
+      five.off('modeChange', _this.handleModeChange);
+      five.off('panGesture', _this.handlePanGesture);
+      five.off('panoArrived', _this.handlePanoArrived);
+      five.off('wantsChangeMode', _this.handleWantsChangeMode);
+      five.off('wantsInteriaPan', _this.handleWantsInteriaPan);
+      five.off('wantsTapGesture', _this.handleWantsTapGesture);
+      five.off('modelShownFloorChange', _this.onModelShownFloorChange);
+    });
+
+    _defineProperty(this, "updateSize", function () {
+      if (!_this.floorplanData) return;
+      if (!(0, _correctFiveState.checkShowState)(_this.five, _this.showState)) return;
+      if (!_this.container || !_this.wrapper) return; // 计算户型图展示大小
+
+      var _this$floorplanData$b = _this.floorplanData.bounding,
+          min = _this$floorplanData$b.min,
+          max = _this$floorplanData$b.max;
+      var width = max.x - min.x;
+      var height = max.y - min.y; // 每毫米对应的 px 值
+
+      var pxmm = (0, _getPxmm["default"])(_this.five, _this.wrapper);
+
+      var _width = Math.ceil(width * pxmm);
+
+      var _height = Math.ceil(height * pxmm);
+
+      if (_this.size.width === _width && _this.size.height === _height) return;
+      _this.pxmm = pxmm;
+      _this.size = {
+        width: _width,
+        height: _height
+      };
+      _this.container.style.width = _width + 'px';
+      _this.container.style.height = _height + 'px';
+    });
+
+    _defineProperty(this, "show", /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(opts) {
+        var _this$five$model;
+
+        var _this$showRejection, sameWithLastOpts, showPromise;
+
+        return regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                if (!(!_this.showPromise && _this.visible)) {
+                  _context2.next = 2;
+                  break;
+                }
+
+                return _context2.abrupt("return", true);
+
+              case 2:
+                if ((_this$five$model = _this.five.model) !== null && _this$five$model !== void 0 && _this$five$model.loaded) {
+                  _context2.next = 4;
+                  break;
+                }
+
+                throw new Error(_constant.FloorplanErrorType.ModelNotLoaded);
+
+              case 4:
+                if (_this.floorplanData) {
+                  _context2.next = 6;
+                  break;
+                }
+
+                throw new Error(_constant.FloorplanErrorType.DataNotLoaded);
+
+              case 6:
+                _this.visible = true;
+
+                if (!_this.showPromise) {
+                  _context2.next = 12;
+                  break;
+                }
+
+                sameWithLastOpts = (0, _equal["default"])(opts, _this.ModelFloorplanPluginsShowOpts, {
+                  deep: false
+                });
+
+                if (!(!!_this.showPromise && sameWithLastOpts)) {
+                  _context2.next = 11;
+                  break;
+                }
+
+                return _context2.abrupt("return", _this.showPromise);
+
+              case 11:
+                if (!!_this.showPromise && !sameWithLastOpts) (_this$showRejection = _this.showRejection) === null || _this$showRejection === void 0 ? void 0 : _this$showRejection.call(_this, _constant.FloorplanErrorType.DifferentShowParams);
+
+              case 12:
+                _this.ModelFloorplanPluginsShowOpts = opts;
+                showPromise = new Promise( /*#__PURE__*/function () {
+                  var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(resolve, reject) {
+                    var _opts$modelOpacity;
+
+                    var hasRejected, _yield$to, _yield$to2, correctError, modelOpacity, renderDuration;
+
+                    return regeneratorRuntime.wrap(function _callee$(_context) {
+                      while (1) {
+                        switch (_context.prev = _context.next) {
+                          case 0:
+                            hasRejected = false;
+
+                            _this.showRejection = function (errorMsg) {
+                              hasRejected = true;
+                              reject(errorMsg ? new Error(errorMsg) : new Error(_constant.FloorplanErrorType.UnknowError));
+                            };
+
+                            _context.next = 4;
+                            return (0, _to["default"])((0, _correctFiveState["default"])(_this.five, _this.showState, opts === null || opts === void 0 ? void 0 : opts.userAction));
+
+                          case 4:
+                            _yield$to = _context.sent;
+                            _yield$to2 = _slicedToArray(_yield$to, 1);
+                            correctError = _yield$to2[0];
+
+                            if (!correctError) {
+                              _context.next = 9;
+                              break;
+                            }
+
+                            return _context.abrupt("return", reject(correctError));
+
+                          case 9:
+                            if (!hasRejected) {
+                              _context.next = 11;
+                              break;
+                            }
+
+                            return _context.abrupt("return", reject(new Error(_constant.FloorplanErrorType.UnknowError)));
+
+                          case 11:
+                            if (_this.visible) {
+                              _context.next = 13;
+                              break;
+                            }
+
+                            return _context.abrupt("return", reject(new Error(_constant.FloorplanErrorType.UnknowError)));
+
+                          case 13:
+                            // 更新户型图状态
+                            _this.visible = true; // 更新户型图大小
+
+                            _this.updateSize(); // 高亮当前楼层，有两个目的
+                            // 1. 点击模型时，可以跳转到当前楼层的点位上
+                            // 2. 当前楼层比较小时，户型图也比较小，如果展示全部楼层，会展示户型图外有一圈模型
+
+
+                            if (opts !== null && opts !== void 0 && opts.floorIndex) _this.floorIndex = opts.floorIndex;
+
+                            _this.five.model.show(_this.floorIndex); // 模型消失, 渲染户型图
+
+
+                            modelOpacity = (_opts$modelOpacity = opts === null || opts === void 0 ? void 0 : opts.modelOpacity) !== null && _opts$modelOpacity !== void 0 ? _opts$modelOpacity : 0.01;
+                            renderDuration = opts !== null && opts !== void 0 && opts.immediatily ? 0 : _constant.SHOW_ANIME_DURATION;
+                            (0, _changeModelCanvansOpacity["default"])(_this.five, modelOpacity, renderDuration);
+
+                            _this.render(renderDuration); // 展示之后的事件监听
+
+
+                            _this.five.on('wantsGesture', _this.handleWantsGesture);
+
+                            _this.five.on('wantsTapGesture', _this.handleWantsTapGesture);
+
+                            return _context.abrupt("return", resolve(true));
+
+                          case 24:
+                          case "end":
+                            return _context.stop();
+                        }
+                      }
+                    }, _callee);
+                  }));
+
+                  return function (_x2, _x3) {
+                    return _ref2.apply(this, arguments);
+                  };
+                }()).then(function () {
+                  var _opts$userAction;
+
+                  _this.hooks.emit('showAnimationEnded', {
+                    auto: !!(opts !== null && opts !== void 0 && opts.isAutoShow),
+                    userAction: (_opts$userAction = opts === null || opts === void 0 ? void 0 : opts.userAction) !== null && _opts$userAction !== void 0 ? _opts$userAction : true
+                  });
+
+                  return true;
+                })["catch"](function (error) {
+                  // 自动展示的报错内部处理
+                  if (opts !== null && opts !== void 0 && opts.isAutoShow) return false;
+                  if (!(error instanceof Error)) return false; // 非自动展示的报错继续向外抛出
+
+                  throw error;
+                })["finally"](function () {
+                  _this.showPromise = void 0;
+                  _this.showRejection = void 0;
+                });
+                _this.showPromise = showPromise;
+                return _context2.abrupt("return", showPromise);
+
+              case 16:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2);
+      }));
+
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }());
+
+    _defineProperty(this, "hide", function (options) {
+      var _this$showRejection2, _options$userAction;
+
+      if (_this.size.width === 0) return true;
+      if (_this.visible === false) return true;
+      var isAutoHide = !!(options !== null && options !== void 0 && options.isAutoHide);
+
+      _this.five.off('wantsGesture', _this.handleWantsGesture);
+
+      _this.five.off('wantsTapGesture', _this.handleWantsTapGesture);
+
+      _this.visible = false;
+      (_this$showRejection2 = _this.showRejection) === null || _this$showRejection2 === void 0 ? void 0 : _this$showRejection2.call(_this, _constant.FloorplanErrorType.BreakOffByHide);
+      (0, _changeModelCanvansOpacity["default"])(_this.five, 1, 0);
+
+      _this.render();
+
+      _this.hooks.emit('hide', {
+        auto: isAutoHide,
+        userAction: (_options$userAction = options === null || options === void 0 ? void 0 : options.userAction) !== null && _options$userAction !== void 0 ? _options$userAction : true
+      });
+
+      return true;
+    });
+
+    _defineProperty(this, "onModelShownFloorChange", function (shownFloor) {
+      if (shownFloor === null) return;
+      _this.floorIndex = shownFloor;
+
+      _this.render();
+    });
+
+    _defineProperty(this, "handleModelLoaded", function () {
+      if (_this.wrapper) return;
+      if (!_this.selector) return;
+      var wrapper = _this.selector instanceof Element ? _this.selector : document.querySelector(_this.selector);
+      if (!wrapper) throw new Error('不正确的父容器选择器');
+      _this.wrapper = wrapper;
+      wrapper.append(_this.container);
+    });
+
+    _defineProperty(this, "handleClick", function () {
+      if (!_this.visible) return;
+
+      var prevented = _this.hooks.emit('click');
+
+      if (prevented) return false;
+    });
+
+    _defineProperty(this, "handleWantsTapGesture", function () {
+      return _this.handleClick();
+    });
+
+    _defineProperty(this, "handleWantsChangeMode", function (mode) {
+      if (mode !== 'Panorama') {
+        _this.lastPanoramaLongitude = _this.five.getCurrentState().longitude;
+      }
+
+      if (mode !== 'Floorplan') _this.hide();
+    });
+
+    _defineProperty(this, "handleModeChange", function (mode) {
+      if (mode === 'Floorplan') {
+        _this.five.on('panGesture', _this.handlePanGesture);
+      } else {
+        _this.hide();
+
+        _this.five.off('panGesture', _this.handlePanGesture);
+      }
+    });
+
+    _defineProperty(this, "handlePanoArrived", function (index) {
+      var _this$five;
+
+      if (!((_this$five = _this.five) !== null && _this$five !== void 0 && _this$five.work)) return;
+      _this.panoIndex = index;
+      _this.floorIndex = _this.five.work.observers[index].floorIndex;
+    });
+
+    _defineProperty(this, "handleWantsInteriaPan", function () {
+      if (_this.visible) return false;
+    });
+
+    _defineProperty(this, "handleWantsGesture", function (type, pointers) {
+      if (!_this.visible) return;
+      if (pointers.length > 1) return false;
+      if (type === 'mouseWheel') return false;
+    });
+
+    _defineProperty(this, "handlePanGesture", /*#__PURE__*/function () {
+      var _ref4 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4(_ref3, isFinal) {
+        var latitude, longitude, latitudeHide, longitudeHide, canHide, latitudeVisible, longitudeVisible, handleInteriaPan;
+        return regeneratorRuntime.wrap(function _callee4$(_context4) {
+          while (1) {
+            switch (_context4.prev = _context4.next) {
+              case 0:
+                latitude = _ref3.latitude, longitude = _ref3.longitude;
+
+                if (!(_this.configs.autoShowEnable === false)) {
+                  _context4.next = 3;
+                  break;
+                }
+
+                return _context4.abrupt("return");
+
+              case 3:
+                if (!(isFinal && _this.visible)) {
+                  _context4.next = 5;
+                  break;
+                }
+
+                return _context4.abrupt("return", _this.five.setState(_this.showState, true));
+
+              case 5:
+                // 满足消失的条件：
+                // 水平旋转角大于正负 5 度 || 俯仰角度大于 5 度
+                latitudeHide = Math.abs(latitude - Math.PI / 2) > 5 * Math.PI / 180;
+                longitudeHide = longitude > 5 * (Math.PI / 180) && longitude < 355 * (Math.PI / 180);
+                canHide = latitudeHide || longitudeHide;
+
+                if (!(_this.visible && canHide)) {
+                  _context4.next = 10;
+                  break;
+                }
+
+                return _context4.abrupt("return", _this.hide({
+                  isAutoHide: true
+                }));
+
+              case 10:
+                if (!(_this.five.camera.fov / _constant.FIVE_CAMERA_DEFAULT_FOV < 0.8)) {
+                  _context4.next = 12;
+                  break;
+                }
+
+                return _context4.abrupt("return");
+
+              case 12:
+                // 户型图展示条件：
+                // 水平旋转角正负 30 度 && 俯仰角度小于 10 度
+                latitudeVisible = Math.abs(latitude - Math.PI / 2) < 10 * Math.PI / 180;
+                longitudeVisible = longitude < 30 * (Math.PI / 180) || longitude > 330 * (Math.PI / 180);
+
+                if (!(isFinal && !_this.visible && latitudeVisible && longitudeVisible)) {
+                  _context4.next = 18;
+                  break;
+                }
+
+                // 当手指离开时需要等惯性结束之后在进行判断
+                handleInteriaPan = /*#__PURE__*/function () {
+                  var _ref5 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(any, isFinal) {
+                    return regeneratorRuntime.wrap(function _callee3$(_context3) {
+                      while (1) {
+                        switch (_context3.prev = _context3.next) {
+                          case 0:
+                            if (isFinal) {
+                              _context3.next = 2;
+                              break;
+                            }
+
+                            return _context3.abrupt("return");
+
+                          case 2:
+                            _this.five.off('interiaPan', handleInteriaPan);
+
+                            _context3.next = 5;
+                            return _this.show({
+                              isAutoShow: true
+                            });
+
+                          case 5:
+                          case "end":
+                            return _context3.stop();
+                        }
+                      }
+                    }, _callee3);
+                  }));
+
+                  return function handleInteriaPan(_x6, _x7) {
+                    return _ref5.apply(this, arguments);
+                  };
+                }();
+
+                _this.five.on('interiaPan', handleInteriaPan);
+
+                return _context4.abrupt("return");
+
+              case 18:
+              case "end":
+                return _context4.stop();
+            }
+          }
+        }, _callee4);
+      }));
+
+      return function (_x4, _x5) {
+        return _ref4.apply(this, arguments);
+      };
+    }());
+
+    this.five = _five;
+    this.hooks = new _five2.Subscribe();
+    this.selector = params.selector;
+    this.configs = (0, _filter.omit)(params, ['selector']);
+    this.showState = {
+      longitude: 0,
+      latitude: Math.PI / 2,
+      fov: _constant.FIVE_CAMERA_DEFAULT_FOV / ((_params$scale = params === null || params === void 0 ? void 0 : params.scale) !== null && _params$scale !== void 0 ? _params$scale : 1)
+    }; // 设置 container 样式
+
+    this.container.classList.add('floorplan-plugin');
+    Object.assign(this.container.style, _controller.pluginStyle); // 如果初始化的时候模型已经加载完毕了，就不用再等 modelLoaded
+
+    this.five.model.loaded ? this.handleModelLoaded() : _five.once('modelLoaded', this.handleModelLoaded);
+
+    _five.once('dispose', this.dispose);
+
+    _five.on('modeChange', this.handleModeChange);
+
+    _five.on('panGesture', this.handlePanGesture);
+
+    _five.on('panoArrived', this.handlePanoArrived);
+
+    _five.on('wantsChangeMode', this.handleWantsChangeMode);
+
+    _five.on('wantsInteriaPan', this.handleWantsInteriaPan);
+
+    _five.on('modelShownFloorChange', this.onModelShownFloorChange);
+  }
+
+  _createClass(ModelFloorplanPluginController, [{
+    key: "load",
+    value:
+    /** 加载户型图数据 */
+    function () {
+      var _load = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(data) {
+        var copyData;
+        return regeneratorRuntime.wrap(function _callee5$(_context5) {
+          while (1) {
+            switch (_context5.prev = _context5.next) {
+              case 0:
+                copyData = JSON.parse(JSON.stringify(data));
+                _context5.next = 3;
+                return (0, _formatData["default"])(copyData);
+
+              case 3:
+                this.floorplanData = _context5.sent;
+                this.render();
+
+              case 5:
+              case "end":
+                return _context5.stop();
+            }
+          }
+        }, _callee5, this);
+      }));
+
+      function load(_x8) {
+        return _load.apply(this, arguments);
+      }
+
+      return load;
+    }()
+    /** 把插件的渲染DOM插入到对应的容器中去 */
+
+  }, {
+    key: "appendTo",
+    value: function appendTo(wrapper) {
+      this.wrapper = wrapper;
+      wrapper.appendChild(this.container);
+      return this;
+    }
+    /** 更新户型图大小 */
+
+  }, {
+    key: "changeFloor",
+    value:
+    /** 更改户型图楼层 */
+    function changeFloor(floorIndex) {
+      this.five.model.show(floorIndex);
+      this.floorIndex = floorIndex;
+      this.render();
+    }
+  }, {
+    key: "changeConfigs",
+    value: function changeConfigs(params) {
+      Object.assign(this.configs, params);
+      if (!this.container) return;
+      this.render();
+    }
+    /** 模型楼层高亮改变时，自动进行楼层切换 */
+
+  }, {
+    key: "render",
+    value: function render(duration) {
+      if (!this.container) return;
+      if (this.size.width === 0) return;
+      var props = {
+        five: this.five,
+        pxmm: this.pxmm,
+        visible: this.visible,
+        duration: duration !== null && duration !== void 0 ? duration : 0,
+        panoIndex: this.panoIndex,
+        floorIndex: this.floorIndex,
+        floorplanData: this.floorplanData,
+        onRoomHeightClick: this.handleClick,
+        cameraImage: this.configs.cameraImage,
+        hoverEnable: this.configs.hoverEnable,
+        getLabelElement: this.configs.getLabelElement,
+        lastPanoramaLongitude: this.lastPanoramaLongitude
+      };
+
+      _reactDom["default"].render( /*#__PURE__*/React.createElement(_components["default"], props), this.container);
+    }
+  }]);
+
+  return ModelFloorplanPluginController;
+}();
+
+exports["default"] = ModelFloorplanPluginController;

package/plugins/floorplan/ModelFloorplanPlugin/components/Camera.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Five } from '@realsee/five';
+import { FloorplanData } from '../../typings/floorplanData';
+export default function Camera(props: {
+    five: Five;
+    panoIndex: number;
+    floorIndex: number;
+    lastPanoramaLongitude: number;
+    floorplanData: FloorplanData;
+    cameraImage?: {
+        style: React.CSSProperties;
+    };
+}): JSX.Element;