@realsee/dnalogel 0.1.0

package/plugins/floorplan/PanoFloorplanRadarPlugin/Content/index.style.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.contentStyle = void 0;
+var contentStyle = {
+  position: 'absolute',
+  left: '50%',
+  top: '50%',
+  transform: 'translate(-50%, -50%)'
+};
+exports.contentStyle = contentStyle;

package/plugins/floorplan/PanoFloorplanRadarPlugin/Controller.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Five } from '@realsee/five';
+import { FloorplanServerData } from '../typings/floorplanServerData';
+import { FloorplanExtraObject3D } from '../typings/floorplanData';
+export interface PanoFloorplanRadarPluginControllerParameter {
+    wrapper?: string | Element;
+    configs?: {
+        hoverEnable?: boolean;
+        cameraImage?: {
+            style: React.CSSProperties;
+        };
+    };
+}
+export default class PanoFloorplanRadarPluginController {
+    private five;
+    private pxmm;
+    private wrapperSelector;
+    private data?;
+    private wrapper;
+    private size;
+    private extraObjects?;
+    private orginExtraObjects?;
+    private configs;
+    constructor(five: Five, params?: PanoFloorplanRadarPluginControllerParameter);
+    dispose: () => void;
+    load: (data: FloorplanServerData) => Promise<void>;
+    /** 把插件的渲染DOM插入到对应的容器中去 */
+    appendTo(wrapper: Element): void;
+    changeConfigs(configs: PanoFloorplanRadarPluginController['configs']): void;
+    setExtraObjectsWith3DPositions(data: FloorplanExtraObject3D[]): void;
+    private updateSize;
+    private render;
+}

package/plugins/floorplan/PanoFloorplanRadarPlugin/Controller.js

@@ -0,0 +1,214 @@
+"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"] = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _Content = _interopRequireDefault(require("./Content"));
+
+var ReactDOM = _interopRequireWildcard(require("react-dom"));
+
+var _formatData = _interopRequireWildcard(require("../utils/formatData"));
+
+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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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 PanoFloorplanRadarPluginController = /*#__PURE__*/function () {
+  function PanoFloorplanRadarPluginController(five, params) {
+    var _this = this;
+
+    _classCallCheck(this, PanoFloorplanRadarPluginController);
+
+    _defineProperty(this, "pxmm", 0);
+
+    _defineProperty(this, "wrapperSelector", '');
+
+    _defineProperty(this, "wrapper", null);
+
+    _defineProperty(this, "size", {
+      width: 0,
+      height: 0
+    });
+
+    _defineProperty(this, "configs", {});
+
+    _defineProperty(this, "dispose", function () {
+      _this.wrapper && ReactDOM.unmountComponentAtNode(_this.wrapper);
+    });
+
+    _defineProperty(this, "load", /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(data) {
+        var _wrapper, copyData, floorplanData;
+
+        return regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                // 处理 wrapper
+                if (!_this.wrapper) {
+                  _wrapper = document.querySelector(_this.wrapperSelector);
+                  if (!_wrapper) console.warn('插件容器不存在，可能得到与预期不符的效果，是不是忘记初始化容器了？');
+                  _this.wrapper = _wrapper;
+                }
+
+                copyData = JSON.parse(JSON.stringify(data));
+                _context.next = 4;
+                return (0, _formatData["default"])(copyData);
+
+              case 4:
+                floorplanData = _context.sent;
+                _this.data = floorplanData;
+                _context.next = 8;
+                return new Promise(function (resolve) {
+                  var _floorplanData$outlin, _floorplanData$outlin2;
+
+                  var floorIndex = _this.five.work.observers[_this.five.getCurrentState().panoIndex].floorIndex; // 当有 svgString 时，没有加载过程
+
+
+                  // 当有 svgString 时，没有加载过程
+                  if ((_floorplanData$outlin = floorplanData.outlines[floorIndex]) !== null && _floorplanData$outlin !== void 0 && _floorplanData$outlin.svgContent) return resolve();
+                  var nowFloorImage = new Image();
+                  var nowFloorImageSrc = (_floorplanData$outlin2 = floorplanData.outlines[floorIndex]) === null || _floorplanData$outlin2 === void 0 ? void 0 : _floorplanData$outlin2.url; // 如果当前楼层图片不存在，不存在加载过程
+
+                  // 如果当前楼层图片不存在，不存在加载过程
+                  if (!nowFloorImageSrc) return resolve(); // 图片加载完成时再 render
+
+                  // 图片加载完成时再 render
+                  nowFloorImage.onload = function () {
+                    return resolve();
+                  };
+
+                  nowFloorImage.src = nowFloorImageSrc;
+                });
+
+              case 8:
+                _this.updateSize();
+
+                _this.render();
+
+              case 10:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }());
+
+    this.five = five;
+    (params === null || params === void 0 ? void 0 : params.configs) && Object.assign(this.configs, params.configs);
+    if (typeof (params === null || params === void 0 ? void 0 : params.wrapper) === 'string') this.wrapperSelector = params.wrapper;else if ((params === null || params === void 0 ? void 0 : params.wrapper) instanceof Element) this.wrapper = params.wrapper;
+    five.once('dispose', this.dispose);
+  }
+
+  _createClass(PanoFloorplanRadarPluginController, [{
+    key: "appendTo",
+    value:
+    /** 把插件的渲染DOM插入到对应的容器中去 */
+    function appendTo(wrapper) {
+      this.wrapper = wrapper;
+    }
+  }, {
+    key: "changeConfigs",
+    value: function changeConfigs(configs) {
+      Object.assign(this.configs, configs);
+      this.render();
+    }
+  }, {
+    key: "setExtraObjectsWith3DPositions",
+    value: function setExtraObjectsWith3DPositions(data) {
+      this.orginExtraObjects = data;
+      if (!this.data) return;
+      this.extraObjects = (0, _formatData.formatExtraObjects)(data, this.five, this.data);
+      this.render();
+    }
+  }, {
+    key: "updateSize",
+    value: function updateSize() {
+      if (!this.data || !this.wrapper) return;
+      var size = Math.min(this.wrapper.clientWidth, this.wrapper.clientHeight);
+      var _this$data$bounding = this.data.bounding,
+          max = _this$data$bounding.max,
+          min = _this$data$bounding.min;
+      var boundingWidth = max.x - min.x;
+      var boundingHeight = max.y - min.y;
+
+      var _getSize = function getSize() {
+        if (boundingWidth > boundingHeight) return [size, size / boundingWidth * boundingHeight];
+        return [size / boundingHeight * boundingWidth, size];
+      }(),
+          _getSize2 = _slicedToArray(_getSize, 2),
+          width = _getSize2[0],
+          height = _getSize2[1];
+
+      this.size = {
+        width: width,
+        height: height
+      };
+      this.pxmm = width / boundingWidth;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (!this.data || !this.pxmm || !this.wrapper) return;
+
+      if (!this.extraObjects && this.orginExtraObjects) {
+        this.extraObjects = (0, _formatData.formatExtraObjects)(this.orginExtraObjects, this.five, this.data);
+      }
+
+      var props = {
+        pxmm: this.pxmm,
+        five: this.five,
+        width: this.size.width,
+        height: this.size.height,
+        floorplanData: this.data,
+        extraObjects: this.extraObjects,
+        hoverEnable: this.configs.hoverEnable,
+        cameraImage: this.configs.cameraImage
+      };
+      ReactDOM.render( /*#__PURE__*/React.createElement(_Content["default"], _extends({}, props, this.configs)), this.wrapper);
+    }
+  }]);
+
+  return PanoFloorplanRadarPluginController;
+}();
+
+exports["default"] = PanoFloorplanRadarPluginController;

package/plugins/floorplan/PanoFloorplanRadarPlugin/index.d.ts

@@ -0,0 +1,8 @@
+import type { FivePlugin } from '@realsee/five';
+import PanoFloorplanRadarPluginController from './Controller';
+export declare const PanoFloorplanRadarPlugin: FivePlugin<PanoFloorplanRadarPluginParameterType, PanoFloorplanRadarPluginReturnType>;
+export default PanoFloorplanRadarPlugin;
+export type { PanoFloorplanRadarPluginController };
+export type { PanoFloorplanRadarPluginControllerParameter } from './Controller';
+export declare type PanoFloorplanRadarPluginReturnType = PanoFloorplanRadarPluginController;
+export declare type PanoFloorplanRadarPluginParameterType = ConstructorParameters<typeof PanoFloorplanRadarPluginController>[1];

package/plugins/floorplan/PanoFloorplanRadarPlugin/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.PanoFloorplanRadarPlugin = void 0;
+
+var _Controller = _interopRequireDefault(require("./Controller"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var PanoFloorplanRadarPlugin = function PanoFloorplanRadarPlugin(five, params) {
+  return new _Controller["default"](five, params);
+};
+
+exports.PanoFloorplanRadarPlugin = PanoFloorplanRadarPlugin;
+var _default = PanoFloorplanRadarPlugin;
+exports["default"] = _default;

package/plugins/floorplan/TopviewFloorplanPlugin/Controller.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { Five } from '@realsee/five';
+import { FloorplanServerData } from '../typings/floorplanServerData';
+import { FloorplanRoomItem } from '../typings/floorplanData';
+export interface TopviewFloorplanPluginParameterType {
+    selector?: string | Element;
+    scale?: number;
+    hoverEnable?: boolean;
+    autoShowEnable?: boolean;
+    cameraImage?: {
+        style: React.CSSProperties;
+    };
+    getLabelElement?: (room: FloorplanRoomItem) => Element | null;
+}
+export declare type TopviewFloorplanPluginReturnType = TopviewFloorplanPluginController;
+export declare class TopviewFloorplanPluginController {
+    size: {
+        width: number;
+        height: number;
+    };
+    visible: boolean;
+    private five;
+    protected pxmm: number;
+    private panoIndex;
+    private floorIndex;
+    private configs;
+    private lastPanoramaLongitude;
+    private handleClick;
+    private selector?;
+    private floorplanData?;
+    private wrapper?;
+    private container;
+    constructor(five: Five, params: TopviewFloorplanPluginParameterType);
+    /** 加载户型图数据 */
+    load(data: FloorplanServerData): Promise<void>;
+    /** 把插件的渲染DOM插入到对应的容器中去 */
+    appendTo(wrapper: Element): this;
+    dispose: () => void;
+    /** 模型楼层高亮改变时，自动进行楼层切换 */
+    private onModelShownFloorChange;
+    /** panoIndex 改变时，更新 floorIndex */
+    private handlePanoArrived;
+    /** 在户型图展示时阻止 Five 的所有行为 */
+    private handleWantsGesture;
+    private handleModelLoaded;
+    /** 非 Topview 态隐藏户型图 */
+    private handleModeChange;
+    /** 动画结束后是 Topview 态就展示户型图 */
+    private handleInitAnimationEnded;
+    private show;
+    private hide;
+    /** 更新户型图大小 */
+    private updateSize;
+    private render;
+}

package/plugins/floorplan/TopviewFloorplanPlugin/Controller.js

@@ -0,0 +1,267 @@
+"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.TopviewFloorplanPluginController = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _getPxmm = _interopRequireDefault(require("../../../shared-utils/getPxmm"));
+
+var _components = _interopRequireDefault(require("../ModelFloorplanPlugin/components"));
+
+var _changeModelCanvansOpacity = _interopRequireDefault(require("../../../shared-utils/changeModelCanvansOpacity"));
+
+var _style = require("./style");
+
+var _filter = require("../../../shared-utils/filter");
+
+var _formatData = _interopRequireDefault(require("../utils/formatData"));
+
+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 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 TopviewFloorplanPluginController = /*#__PURE__*/function () {
+  function TopviewFloorplanPluginController(five, params) {
+    var _this = this;
+
+    _classCallCheck(this, TopviewFloorplanPluginController);
+
+    _defineProperty(this, "size", {
+      width: 0,
+      height: 0
+    });
+
+    _defineProperty(this, "visible", false);
+
+    _defineProperty(this, "pxmm", 0);
+
+    _defineProperty(this, "panoIndex", 0);
+
+    _defineProperty(this, "floorIndex", 0);
+
+    _defineProperty(this, "configs", {});
+
+    _defineProperty(this, "lastPanoramaLongitude", 0);
+
+    _defineProperty(this, "handleClick", function () {
+      return false;
+    });
+
+    _defineProperty(this, "container", document.createElement('div'));
+
+    _defineProperty(this, "dispose", function () {
+      var _this$container;
+
+      _this.hide();
+
+      _this.container && _reactDom["default"].unmountComponentAtNode(_this.container);
+      (_this$container = _this.container) === null || _this$container === void 0 ? void 0 : _this$container.remove();
+
+      _this.five.off('modeChange', _this.handleModeChange);
+
+      _this.five.off('panoArrived', _this.handlePanoArrived);
+
+      _this.five.off('modelLoaded', _this.handleModelLoaded);
+
+      _this.five.off('wantsGesture', _this.handleWantsGesture);
+
+      _this.five.off('initAnimationEnded', _this.handleInitAnimationEnded);
+
+      _this.five.off('modelShownFloorChange', _this.onModelShownFloorChange);
+    });
+
+    _defineProperty(this, "onModelShownFloorChange", function (shownFloor) {
+      if (shownFloor === null) return;
+      _this.floorIndex = shownFloor;
+
+      _this.render();
+    });
+
+    _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, "handleWantsGesture", function () {
+      if (!_this.visible) return;
+      return false;
+    });
+
+    _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, "handleModeChange", function (mode) {
+      if (mode !== 'Topview') return _this.hide();
+    });
+
+    _defineProperty(this, "handleInitAnimationEnded", function () {
+      var _this$five$getCurrent = _this.five.getCurrentState(),
+          mode = _this$five$getCurrent.mode;
+
+      if (mode === 'Topview') _this.show();
+    });
+
+    _defineProperty(this, "updateSize", function () {
+      if (!_this.floorplanData) return;
+      if (!_this.container || !_this.wrapper) return;
+      if (_this.five.getCurrentState().mode !== 'Topview') 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);
+
+      _this.pxmm = pxmm;
+      _this.size = {
+        width: _width,
+        height: _height
+      };
+      _this.container.style.width = _width + 'px';
+      _this.container.style.height = _height + 'px';
+    });
+
+    this.five = five;
+    this.selector = params.selector;
+    this.configs = (0, _filter.omit)(params, ['selector']); // 设置 container 样式
+
+    this.container.classList.add('floorplan-plugin');
+    Object.assign(this.container.style, _style.pluginStyle); // 如果初始化的时候模型已经加载完毕了，就不用再等 modelLoaded
+
+    this.five.model.loaded ? this.handleModelLoaded() : five.once('modelLoaded', this.handleModelLoaded);
+    this.five.once('dispose', this.dispose);
+    this.five.on('modeChange', this.handleModeChange);
+    this.five.on('panoArrived', this.handlePanoArrived);
+    this.five.on('initAnimationEnded', this.handleInitAnimationEnded);
+    this.five.on('modelShownFloorChange', this.onModelShownFloorChange);
+  }
+  /** 加载户型图数据 */
+
+
+  _createClass(TopviewFloorplanPluginController, [{
+    key: "load",
+    value: function () {
+      var _load = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(data) {
+        var copyData;
+        return regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                copyData = JSON.parse(JSON.stringify(data));
+                _context.next = 3;
+                return (0, _formatData["default"])(copyData);
+
+              case 3:
+                this.floorplanData = _context.sent;
+                this.render();
+
+              case 5:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+
+      function load(_x) {
+        return _load.apply(this, arguments);
+      }
+
+      return load;
+    }()
+    /** 把插件的渲染DOM插入到对应的容器中去 */
+
+  }, {
+    key: "appendTo",
+    value: function appendTo(wrapper) {
+      this.wrapper = wrapper;
+      wrapper.appendChild(this.container);
+      return this;
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      var modelOpacity = 0.01;
+      var renderDuration = 500;
+      this.visible = true;
+      this.updateSize();
+      this.render(renderDuration);
+      (0, _changeModelCanvansOpacity["default"])(this.five, modelOpacity, renderDuration);
+      this.five.on('wantsGesture', this.handleWantsGesture);
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      var modelOpacity = 1;
+      var renderDuration = 0;
+      this.visible = false;
+      (0, _changeModelCanvansOpacity["default"])(this.five, modelOpacity, renderDuration);
+      this.render();
+      this.five.off('wantsGesture', this.handleWantsGesture);
+    }
+    /** 更新户型图大小 */
+
+  }, {
+    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 || 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 TopviewFloorplanPluginController;
+}();
+
+exports.TopviewFloorplanPluginController = TopviewFloorplanPluginController;

package/plugins/floorplan/TopviewFloorplanPlugin/index.d.ts

@@ -0,0 +1,5 @@
+import { FivePlugin } from '@realsee/five';
+import { TopviewFloorplanPluginParameterType, TopviewFloorplanPluginReturnType } from './Controller';
+export declare const TopviewFloorplanPlugin: FivePlugin<TopviewFloorplanPluginParameterType, TopviewFloorplanPluginReturnType>;
+export default TopviewFloorplanPlugin;
+export type { TopviewFloorplanPluginReturnType, TopviewFloorplanPluginParameterType } from './Controller';

package/plugins/floorplan/TopviewFloorplanPlugin/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.TopviewFloorplanPlugin = void 0;
+
+var _Controller = require("./Controller");
+
+var TopviewFloorplanPlugin = function TopviewFloorplanPlugin(five, params) {
+  return new _Controller.TopviewFloorplanPluginController(five, params);
+};
+
+exports.TopviewFloorplanPlugin = TopviewFloorplanPlugin;
+var _default = TopviewFloorplanPlugin;
+exports["default"] = _default;

package/plugins/floorplan/TopviewFloorplanPlugin/style.d.ts

@@ -0,0 +1 @@
+export declare const pluginStyle: Partial<CSSStyleDeclaration>;

package/plugins/floorplan/TopviewFloorplanPlugin/style.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pluginStyle = void 0;
+var pluginStyle = {
+  position: 'absolute',
+  left: '50%',
+  top: '50%',
+  transform: 'translate(-50%, -50%)',
+  pointerEvents: 'none'
+};
+exports.pluginStyle = pluginStyle;

package/plugins/floorplan/components/FloorplanImage.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { FloorplanData } from '../typings/floorplanData';
+/** 展示当前楼层的户型图图片 */
+export default function FloorplanBaseImage(props: {
+    floorplanData: FloorplanData;
+    floorIndex: number;
+}): JSX.Element | null;