@realsee/dnalogel 0.1.3 → 0.1.7-alpha.10

package/plugins/PanoMeasurePlugin/Modules/UIController/HTML.js

@@ -0,0 +1,26 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.MAIN_NORMAL_PATH = exports.MAIN_MOUSE_LEAVE_FILL = exports.MAIN_MOUSE_ENTER_FILL = exports.MAIN_DONE_PATH = void 0;
+
+require("core-js/modules/es.array.concat.js");
+
+var MAIN_NORMAL_PATH = 'M31.379 15.466a1.045 1.045 0 0 1-.92 1.076l-11.276.607a1.6 1.6 0 0 0-1.512 1.511l-.599 11.113a1.045 1.045 0 0 1-.92 1.075l-.164.008a1.183 1.183 0 0 1-1.123-.975l-.016-.164-.221-10.768a1.6 1.6 0 0 0-1.567-1.567l-11.3-.231-.165-.016a1.187 1.187 0 0 1-.964-.996l-.01-.127.007-.164c.061-.496.455-.876.958-.917l.118-.003 11.112-.599a1.6 1.6 0 0 0 1.498-1.37l.014-.142.607-11.276a1.045 1.045 0 0 1 1.076-.92c.573.015 1.055.46 1.13 1.019l.009.121.221 10.766a1.6 1.6 0 0 0 1.567 1.566l11.3.234a1.181 1.181 0 0 1 1.14 1.139z';
+exports.MAIN_NORMAL_PATH = MAIN_NORMAL_PATH;
+var MAIN_DONE_PATH = 'M27.1772552,8.15828895 C27.8664561,7.48070421 28.5574369,7.81156875 28.8336646,8.04968716 C29.1098924,8.28780557 29.3990219,9.110014 28.8256559,9.79263351 L28.7110903,9.9165024 L13.9697229,25.1399531 C13.3288458,25.7700285 12.3239388,25.8070917 11.6402346,25.2511429 L11.5159715,25.1399531 L3.7056151,18.0063788 C3.01641417,17.3287941 3.00699739,16.2207954 3.68458213,15.5315945 C4.32230894,14.8829348 5.3413021,14.8364368 6.03356826,15.3981178 L6.15936649,15.5105615 L12.6856594,21.9049888 L27.1772552,8.15828895 Z';
+exports.MAIN_DONE_PATH = MAIN_DONE_PATH;
+var MAIN_MOUSE_ENTER_FILL = 'url(#fpm__main-b)';
+exports.MAIN_MOUSE_ENTER_FILL = MAIN_MOUSE_ENTER_FILL;
+var MAIN_MOUSE_LEAVE_FILL = 'url(#fpm__main-c)';
+exports.MAIN_MOUSE_LEAVE_FILL = MAIN_MOUSE_LEAVE_FILL;
+var revokeSvg = "\n  <svg class=\"fpm__revoke-icon\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http://www.w3.org/2000/svg\">\n    <defs>\n      <linearGradient x1=\"47.631%\" y1=\"55.183%\" x2=\"2.967%\" y2=\"86.323%\" id=\"fpm__revoke-a\">\n        <stop stop-color=\"#FFF\" offset=\"0%\" />\n        <stop stop-color=\"#FFF\" stop-opacity=\".5\" offset=\"100%\" />\n      </linearGradient>\n      <linearGradient x1=\"5.297%\" y1=\"43.016%\" x2=\"38.238%\" y2=\"79.932%\" id=\"fpm__revoke-b\">\n        <stop stop-color=\"#FFF\" offset=\"0%\" />\n        <stop stop-color=\"#FFF\" stop-opacity=\"0\" offset=\"100%\" />\n      </linearGradient>\n    </defs>\n    <path\n      d=\"M13.388 7.108c.552 0 1.005.42 1.06.957l.006.11v1.224c0 .921.745 1.667 1.666 1.667h7.184c5.804 0 10.509 4.616 10.509 10.309 0 5.595-4.544 10.15-10.21 10.305l-.3.004H8.924c-.917 0-1.66-.729-1.66-1.628 0-.846.658-1.541 1.5-1.62l.16-.008h14.38c3.972 0 7.191-3.158 7.191-7.053 0-3.81-3.08-6.916-6.933-7.049l-.257-.004H10.029l-.109-.005H8.212c-.245 0-.482-.085-.67-.237l-.09-.082a1.066 1.066 0 0 1-.065-1.422l.079-.086 5.175-5.077c.2-.195.468-.305.747-.305z\"\n      fill=\"url(#fpm__revoke-a)\"\n      fill-rule=\"nonzero\"\n      stroke=\"url(#fpm__revoke-b)\"\n      stroke-width=\".5\"\n    />\n  </svg>\n";
+var exitSvg = "\n  <svg class=\"fpm__exit-icon width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http://www.w3.org/2000/svg\">\n    <defs>\n      <linearGradient x1=\"36.288%\" y1=\"73.736%\" x2=\"54.242%\" y2=\"97.166%\" id=\"fpm__exit-a\">\n        <stop stop-color=\"#FFF\" offset=\"0%\" />\n        <stop stop-color=\"#FFF\" stop-opacity=\".5\" offset=\"100%\" />\n      </linearGradient>\n      <linearGradient x1=\"100%\" y1=\"47.234%\" x2=\"24.047%\" y2=\"47.234%\" id=\"fpm__exit-b\">\n        <stop stop-color=\"#FFF\" offset=\"0%\" />\n        <stop stop-color=\"#FFF\" stop-opacity=\".005\" offset=\"99.535%\" />\n        <stop stop-color=\"#FFF\" stop-opacity=\"0\" offset=\"100%\" />\n      </linearGradient>\n    </defs>\n    <path\n      d=\"M22 7a1.5 1.5 0 0 1 .144 2.993L22 10h-9a1.5 1.5 0 0 0-1.493 1.356l-.007.144v17a1.5 1.5 0 0 0 1.356 1.493L13 30h9a1.5 1.5 0 0 1 .144 2.993L22 33h-9a4.5 4.5 0 0 1-4.495-4.288L8.5 28.5v-17a4.5 4.5 0 0 1 4.288-4.495L13 7h9zm6.317 7.755a1 1 0 0 1 .7.286l4.856 4.764a1 1 0 0 1-.7 1.713h-5.856V21.5h-8.032a1.5 1.5 0 1 1 0-3h6.365c.92 0 1.666-.746 1.667-1.667v-1.078a1 1 0 0 1 1-1z\"\n      fill=\"url(#fpm__exit-a)\"\n      fill-rule=\"nonzero\"\n      stroke=\"url(#fpm__exit-b)\"\n      stroke-width=\".5\"\n    />\n  </svg>\n";
+var mainSvg = "\n  <svg class=\"fpm__main-icon\" width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" xmlns=\"http://www.w3.org/2000/svg\">\n    <defs>\n      <mask id=\"fpm__main-icon-mask\">\n        <rect id=\"fpm__main-icon-mask-black\" x=\"0\" y=\"0\" width=\"30\" height=\"30\" fill=\"black\"></rect>\n        <rect id=\"fpm__main-icon-mask-white\" x=\"0\" y=\"0\" width=\"0\" height=\"30\" fill=\"white\"></rect>\n      </mask>\n      <linearGradient id=\"fpm__main-a\" x1=\"25.371%\" y1=\"0%\" x2=\"109.587%\" y2=\"172.268%\">\n        <stop stop-color=\"#FFF\" offset=\"0%\" />\n        <stop stop-color=\"#FFF\" stop-opacity=\".77\" offset=\"44.051%\" />\n        <stop stop-color=\"#FFF\" stop-opacity=\".201\" offset=\"100%\" />\n      </linearGradient>\n      <radialGradient id=\"fpm__main-b\" fx=\"50%\" fy=\"50%\" r=\"50.864%\" gradientTransform=\"matrix(-.98302 0 0 -1 .992 1)\">\n        <stop stop-color=\"#2D7CFF\" offset=\"0%\" />\n        <stop stop-color=\"#2D7CFF\" stop-opacity=\".3\" offset=\"100%\" />\n      </radialGradient>\n      <radialGradient id=\"fpm__main-c\" fx=\"50%\" fy=\"50%\" r=\"50.864%\" gradientTransform=\"matrix(-.98302 0 0 -1 .992 1)\">\n        <stop stop-opacity=\".4\" offset=\"0%\" />\n        <stop stop-opacity=\".12\" offset=\"100%\" />\n      </radialGradient>\n    </defs>\n    <g fill=\"none\" fill-rule=\"evenodd\">\n      <circle fill=\"url(#fpm__main-a)\" cx=\"30\" cy=\"30\" r=\"30\" />\n      <path\n        class=\"fpm__main-icon-path\"\n        d=\"".concat(MAIN_NORMAL_PATH, "\"\n        fill=\"").concat(MAIN_MOUSE_LEAVE_FILL, "\"\n        fill-rule=\"nonzero\"\n        transform=\"translate(14 14)\"\n      />\n    </g>\n  </svg>\n");
+
+var _default = "\n  <style>\n    .fpm__revoke {\n      opacity: 0.3;\n    }\n    \n    .fpm__revoke.enabled {\n      opacity: 0.7;\n    }\n    \n    .fpm__revoke.enabled:hover {\n      opacity: 1;\n    }\n    \n    .fpm__revoke-icon {\n      width: 40px;\n      height: 40px;\n      margin-top: 10px;\n      cursor: pointer;\n    }  \n  </style>\n  <div class=\"fpm_ui-bg\"></div>\n  <div class=\"fpm_operating-space\">\n    <div class=\"fpm__ui-item fpm__revoke\">\n      ".concat(revokeSvg, "\n      <span class=\"fpm__text fpm__revoke-text\">\u64A4\u9500</span>\n    </div>\n    <div class=\"fpm__ui-item fpm__main\">\n      ").concat(mainSvg, "\n      <span class=\"fpm__text fpm__main-text\">\u6DFB\u52A0</span>\n    </div>\n    <div class=\"fpm__ui-item fpm__exit\">\n      ").concat(exitSvg, "\n      <span class=\"fpm__text fpm__exit-text\">\u9000\u51FA</span>\n    </div>\n  </div>\n");
+
+exports["default"] = _default;

package/plugins/PanoMeasurePlugin/Modules/UIController/MainBtnController.d.ts

@@ -0,0 +1,18 @@
+import MeasureController from '../../Controller';
+export declare class MainBtnController {
+    private container;
+    private measureController;
+    private mainIconMaskTween?;
+    private mainElement;
+    constructor(measureController: MeasureController, container: Element);
+    dispose(): void;
+    private getMainElement;
+    private change2Add;
+    private change2Cancel;
+    private change2Done;
+    private onMouseEnter;
+    private onMouseLeave;
+    private onClick;
+    private editedLineChangeHandler;
+    private modeChangeHandler;
+}

package/plugins/PanoMeasurePlugin/Modules/UIController/MainBtnController.js

@@ -0,0 +1,169 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MainBtnController = void 0;
+
+require("core-js/modules/es.object.assign.js");
+
+require("core-js/modules/es.date.to-string.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.regexp.to-string.js");
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _tween = _interopRequireDefault(require("@tweenjs/tween.js"));
+
+var _style = require("./style");
+
+var _BetterTween = require("../../../../shared-utils/animationFrame/BetterTween");
+
+var _HTML = require("./HTML");
+
+var MainBtnController = /*#__PURE__*/function () {
+  function MainBtnController(measureController, container) {
+    var _this = this;
+
+    (0, _classCallCheck2["default"])(this, MainBtnController);
+    (0, _defineProperty2["default"])(this, "onMouseEnter", function () {
+      var _this$mainElement = _this.mainElement,
+          mainItem = _this$mainElement.mainItem,
+          pathDom = _this$mainElement.pathDom;
+      mainItem.style.opacity = '1';
+      pathDom.setAttribute('fill', _HTML.MAIN_MOUSE_ENTER_FILL);
+    });
+    (0, _defineProperty2["default"])(this, "onMouseLeave", function () {
+      var _this$mainElement2 = _this.mainElement,
+          mainItem = _this$mainElement2.mainItem,
+          pathDom = _this$mainElement2.pathDom;
+      mainItem.style.opacity = '0.7';
+      pathDom.setAttribute('fill', _HTML.MAIN_MOUSE_LEAVE_FILL);
+    });
+    (0, _defineProperty2["default"])(this, "onClick", function () {
+      var mode = _this.measureController.getCurrentMode();
+
+      mode === 'Watch' ? _this.measureController.changeMode('Edit') : _this.measureController.save().changeMode('Watch');
+    });
+    (0, _defineProperty2["default"])(this, "editedLineChangeHandler", function (lines) {
+      // 线的数量大于 1 时，没有状态的变化
+      if (lines.length > 1) return; // 因为撤销导致的状态变更 -> 取消
+
+      if (lines.length === 0) return _this.change2Cancel(false);
+
+      _this.change2Done();
+    });
+    (0, _defineProperty2["default"])(this, "modeChangeHandler", function (mode) {
+      mode === 'Watch' ? _this.change2Add() : _this.change2Cancel();
+    });
+    this.measureController = measureController;
+    this.container = container;
+    this.mainElement = this.getMainElement();
+    Object.assign(this.mainElement.mainIcon.style, _style.mainIconStyle);
+    Object.assign(this.mainElement.mainItem.style, _style.mainItemStyle);
+    this.change2Add();
+    this.measureController.hook.on('modeChange', this.modeChangeHandler);
+    this.mainElement.mainIcon.addEventListener('click', this.onClick);
+    this.mainElement.mainIcon.addEventListener('mouseenter', this.onMouseEnter);
+    this.mainElement.mainIcon.addEventListener('mouseleave', this.onMouseLeave);
+  }
+
+  (0, _createClass2["default"])(MainBtnController, [{
+    key: "dispose",
+    value: function dispose() {
+      this.measureController.hook.off('modeChange', this.modeChangeHandler);
+      this.measureController.hook.off('editedLineChange', this.editedLineChangeHandler);
+      this.mainElement.mainIcon.removeEventListener('click', this.onClick);
+      this.mainElement.mainIcon.removeEventListener('mouseenter', this.onMouseEnter);
+      this.mainElement.mainIcon.removeEventListener('mouseleave', this.onMouseLeave);
+    }
+  }, {
+    key: "getMainElement",
+    value: function getMainElement() {
+      var mainTextDom = this.container.querySelector('.fpm__main-text');
+      var mainItem = this.container.querySelector('.fpm__main');
+      var mainIcon = this.container.querySelector('.fpm__main-icon');
+      var pathDom = mainItem === null || mainItem === void 0 ? void 0 : mainItem.querySelector('.fpm__main-icon-path');
+      var maskWhiteRect = mainIcon === null || mainIcon === void 0 ? void 0 : mainIcon.querySelector('#fpm__main-icon-mask-white');
+      if (!mainItem || !mainTextDom || !mainIcon || !pathDom || !maskWhiteRect) throw new Error('cannot find dom');
+      return {
+        mainTextDom: mainTextDom,
+        mainItem: mainItem,
+        mainIcon: mainIcon,
+        pathDom: pathDom,
+        maskWhiteRect: maskWhiteRect
+      };
+    }
+  }, {
+    key: "change2Add",
+    value: function change2Add() {
+      this.measureController.hook.off('editedLineChange', this.editedLineChangeHandler);
+      var _this$mainElement3 = this.mainElement,
+          mainIcon = _this$mainElement3.mainIcon,
+          mainTextDom = _this$mainElement3.mainTextDom,
+          pathDom = _this$mainElement3.pathDom;
+      mainIcon.style.transition = mainTextDom.innerText === '完成' ? 'none' : 'transform 300ms ease-in-out';
+      mainIcon.style.transform = 'rotate(0deg)';
+      mainTextDom.innerText = '添加';
+      pathDom === null || pathDom === void 0 ? void 0 : pathDom.setAttribute('d', _HTML.MAIN_NORMAL_PATH);
+    }
+  }, {
+    key: "change2Cancel",
+    value: function change2Cancel() {
+      var withAnime = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      var _this$mainElement4 = this.mainElement,
+          mainIcon = _this$mainElement4.mainIcon,
+          mainTextDom = _this$mainElement4.mainTextDom,
+          pathDom = _this$mainElement4.pathDom;
+      pathDom.setAttribute('d', _HTML.MAIN_NORMAL_PATH);
+      pathDom.setAttribute('mask', '');
+      mainIcon.style.transition = withAnime ? 'transform 300ms ease-in-out' : 'none';
+      mainIcon.style.transform = 'rotate(45deg)';
+      mainTextDom && (mainTextDom.innerText = '取消');
+      this.measureController.hook.on('editedLineChange', this.editedLineChangeHandler);
+    }
+  }, {
+    key: "change2Done",
+    value: function change2Done() {
+      var _this$mainIconMaskTwe,
+          _this2 = this;
+
+      var _this$getMainElement = this.getMainElement(),
+          mainTextDom = _this$getMainElement.mainTextDom,
+          mainIcon = _this$getMainElement.mainIcon,
+          pathDom = _this$getMainElement.pathDom,
+          maskWhiteRect = _this$getMainElement.maskWhiteRect;
+
+      if (mainTextDom.innerText === '完成') return;
+      mainIcon.style.transition = 'none';
+      mainIcon.style.transform = 'rotate(0deg)';
+      mainTextDom.innerText = '完成';
+      pathDom.setAttribute('d', _HTML.MAIN_DONE_PATH);
+      pathDom.setAttribute('mask', "url(#fpm__main-icon-mask)");
+      (_this$mainIconMaskTwe = this.mainIconMaskTween) === null || _this$mainIconMaskTwe === void 0 ? void 0 : _this$mainIconMaskTwe.dispose();
+      this.mainIconMaskTween = (0, _BetterTween.tweenProgress)().easing(_tween["default"].Easing.Quartic.InOut).onUpdate(function (_ref) {
+        var progress = _ref.progress;
+        maskWhiteRect.setAttribute('width', (progress * 30).toString());
+      }).onComplete(function () {
+        var _this2$mainIconMaskTw;
+
+        return (_this2$mainIconMaskTw = _this2.mainIconMaskTween) === null || _this2$mainIconMaskTw === void 0 ? void 0 : _this2$mainIconMaskTw.dispose();
+      }).play();
+    }
+    /* 鼠标移入时变成蓝色 */
+
+  }]);
+  return MainBtnController;
+}();
+
+exports.MainBtnController = MainBtnController;

package/plugins/PanoMeasurePlugin/Modules/UIController/Revoke/index.d.ts

@@ -0,0 +1,12 @@
+import MeasureController, { Mode } from '../../../Controller';
+export default class Revoke {
+    private container;
+    private revokeIcon;
+    private revokeItem;
+    private measureController;
+    constructor(measureController: MeasureController, container: Element);
+    dispose(): void;
+    onClick: () => void;
+    onModeChange: (mode: Mode) => void;
+    handleRevoke: () => () => void;
+}

package/plugins/PanoMeasurePlugin/Modules/UIController/Revoke/index.js

@@ -0,0 +1,59 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var Revoke = /*#__PURE__*/function () {
+  function Revoke(measureController, container) {
+    var _this = this;
+
+    (0, _classCallCheck2["default"])(this, Revoke);
+    (0, _defineProperty2["default"])(this, "onClick", function () {
+      _this.measureController.revoke();
+    });
+    (0, _defineProperty2["default"])(this, "onModeChange", function (mode) {
+      if (mode !== 'Edit') {
+        _this.revokeItem.classList.remove('enabled');
+
+        return;
+      }
+
+      _this.revokeItem.classList.add('enabled');
+    });
+    (0, _defineProperty2["default"])(this, "handleRevoke", function () {
+      return function () {};
+    });
+    this.measureController = measureController;
+    this.container = container;
+    var revokeIcon = this.container.querySelector('.fpm__revoke-icon');
+    var revokeItem = this.container.querySelector('.fpm__revoke');
+    if (!revokeIcon || !revokeItem) throw new Error('不正确的选择器');
+    this.revokeIcon = revokeIcon;
+    this.revokeItem = revokeItem;
+    this.revokeIcon.addEventListener('click', this.onClick);
+    measureController.hook.on('modeChange', this.onModeChange);
+  }
+
+  (0, _createClass2["default"])(Revoke, [{
+    key: "dispose",
+    value: function dispose() {
+      this.revokeIcon.removeEventListener('click', this.onClick);
+      this.measureController.hook.off('modeChange', this.onModeChange);
+    }
+  }]);
+  return Revoke;
+}();
+
+exports["default"] = Revoke;

package/plugins/PanoMeasurePlugin/Modules/UIController/index.d.ts

@@ -0,0 +1,16 @@
+import MeasureController from '../../Controller';
+export interface UIControllerParams {
+    container: Element;
+}
+export declare class UIController {
+    private revoke?;
+    private container;
+    private mainController?;
+    private disposers;
+    private measureController;
+    constructor(measureController: MeasureController, params: UIControllerParams);
+    dispose(): void;
+    show(): this;
+    hide(): this;
+    private handleExit;
+}

package/plugins/PanoMeasurePlugin/Modules/UIController/index.js

@@ -0,0 +1,123 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UIController = void 0;
+
+require("core-js/modules/es.object.assign.js");
+
+require("core-js/modules/es.array.for-each.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _HTML = _interopRequireDefault(require("./HTML"));
+
+var _style = require("./style");
+
+var _MainBtnController = require("./MainBtnController");
+
+var _Revoke = _interopRequireDefault(require("./Revoke"));
+
+var UIController = /*#__PURE__*/function () {
+  function UIController(measureController, params) {
+    var _this = this;
+
+    (0, _classCallCheck2["default"])(this, UIController);
+    (0, _defineProperty2["default"])(this, "disposers", []);
+    (0, _defineProperty2["default"])(this, "handleExit", function () {
+      var exitIcon = _this.container.querySelector('.fpm__exit-icon');
+
+      var exitItem = _this.container.querySelector('.fpm__exit');
+
+      if (!exitItem || !exitIcon) throw new Error('cannot find dom');
+      Object.assign(exitItem.style, _style.exitItemStyle);
+      Object.assign(exitIcon === null || exitIcon === void 0 ? void 0 : exitIcon.style, _style.exitIconStyle);
+
+      var onMouseEnter = function onMouseEnter() {
+        return exitItem.style.opacity = '1';
+      };
+
+      var onMouseLeave = function onMouseLeave() {
+        return exitItem.style.opacity = '0.7';
+      };
+
+      var handleClick = function handleClick() {
+        _this.measureController.close();
+      };
+
+      exitIcon.addEventListener('click', handleClick);
+      exitIcon.addEventListener('mouseenter', onMouseEnter);
+      exitIcon.addEventListener('mouseleave', onMouseLeave);
+      return function () {
+        exitIcon.removeEventListener('click', handleClick);
+        exitIcon.removeEventListener('mouseenter', onMouseEnter);
+        exitIcon.removeEventListener('mouseleave', onMouseLeave);
+      };
+    });
+    this.measureController = measureController;
+    this.container = document.createElement('div');
+    this.container.innerHTML = _HTML["default"];
+    this.container.classList.add('fpm__ui-controller');
+    params.container.appendChild(this.container);
+    var textDoms = this.container.querySelectorAll('.fpm__text');
+    var UIItems = this.container.querySelectorAll('.fpm__ui-item');
+    var bgDom = this.container.querySelector('.fpm_ui-bg');
+    var operatingSpaceDom = this.container.querySelector('.fpm_operating-space');
+    Object.assign(bgDom === null || bgDom === void 0 ? void 0 : bgDom.style, _style.controllerBackgroundStyle);
+    Object.assign(operatingSpaceDom === null || operatingSpaceDom === void 0 ? void 0 : operatingSpaceDom.style, _style.operatingSpaceStyle);
+    Object.assign(this.container.style, _style.uiWrapperStyle);
+    UIItems.forEach(function (item) {
+      return Object.assign(item.style, _style.buttonGroupStyle);
+    });
+    textDoms.forEach(function (item) {
+      return Object.assign(item.style, _style.textStyle);
+    });
+  }
+
+  (0, _createClass2["default"])(UIController, [{
+    key: "dispose",
+    value: function dispose() {
+      this.hide();
+      this.container.remove();
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      this.container.style.opacity = '1';
+      this.container.style.transform = 'translate(0, 0)';
+      this.revoke = new _Revoke["default"](this.measureController, this.container);
+      this.mainController = new _MainBtnController.MainBtnController(this.measureController, this.container);
+      this.disposers.push(this.handleExit());
+      return this;
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      var _this$revoke, _this$mainController;
+
+      this.container.style.opacity = '0';
+      this.container.style.transform = 'translate(0, 10px)';
+      (_this$revoke = this.revoke) === null || _this$revoke === void 0 ? void 0 : _this$revoke.dispose();
+      (_this$mainController = this.mainController) === null || _this$mainController === void 0 ? void 0 : _this$mainController.dispose();
+      this.disposers.forEach(function (disposer) {
+        return disposer();
+      });
+      this.disposers = [];
+      return this;
+    }
+  }]);
+  return UIController;
+}();
+
+exports.UIController = UIController;

package/plugins/PanoMeasurePlugin/Modules/UIController/style.d.ts

@@ -0,0 +1,17 @@
+export declare const addHoverImage = "//vrlab-static.ljcdn.com/release/web/measure/add-hover.944fffad.png";
+export declare const addNormalImage = "//vrlab-static.ljcdn.com/release/web/measure/add-normal.39e967e9.png";
+export declare const cancelHoverImage = "//vrlab-static.ljcdn.com/release/web/measure/canale-hover.74b37e24.png";
+export declare const cancelNormalImage = "//vrlab-static.ljcdn.com/release/web/measure/cancle-normal.77bb326c.png";
+export declare const doneHoverImage = "//vrlab-static.ljcdn.com/release/web/measure/done-hover.9e09438b.png";
+export declare const doneNormalImage = "//vrlab-static.ljcdn.com/release/web/measure/done-normal.4fcddd73.png";
+export declare const exitImage = "//vrlab-static.ljcdn.com/release/web/measure/exit.6693ad51.png";
+export declare const revokeImage = "//vrlab-static.ljcdn.com/release/web/measure/revoke.3e424843.png";
+export declare const uiWrapperStyle: Partial<CSSStyleDeclaration>;
+export declare const operatingSpaceStyle: Partial<CSSStyleDeclaration>;
+export declare const buttonGroupStyle: Partial<CSSStyleDeclaration>;
+export declare const controllerBackgroundStyle: Partial<CSSStyleDeclaration>;
+export declare const mainItemStyle: Partial<CSSStyleDeclaration>;
+export declare const exitItemStyle: Partial<CSSStyleDeclaration>;
+export declare const mainIconStyle: Partial<CSSStyleDeclaration>;
+export declare const exitIconStyle: Partial<CSSStyleDeclaration>;
+export declare const textStyle: Partial<CSSStyleDeclaration>;

package/plugins/PanoMeasurePlugin/Modules/UIController/style.js

@@ -0,0 +1,103 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.uiWrapperStyle = exports.textStyle = exports.revokeImage = exports.operatingSpaceStyle = exports.mainItemStyle = exports.mainIconStyle = exports.exitItemStyle = exports.exitImage = exports.exitIconStyle = exports.doneNormalImage = exports.doneHoverImage = exports.controllerBackgroundStyle = exports.cancelNormalImage = exports.cancelHoverImage = exports.buttonGroupStyle = exports.addNormalImage = exports.addHoverImage = void 0;
+var addHoverImage = '//vrlab-static.ljcdn.com/release/web/measure/add-hover.944fffad.png';
+exports.addHoverImage = addHoverImage;
+var addNormalImage = '//vrlab-static.ljcdn.com/release/web/measure/add-normal.39e967e9.png';
+exports.addNormalImage = addNormalImage;
+var cancelHoverImage = '//vrlab-static.ljcdn.com/release/web/measure/canale-hover.74b37e24.png';
+exports.cancelHoverImage = cancelHoverImage;
+var cancelNormalImage = '//vrlab-static.ljcdn.com/release/web/measure/cancle-normal.77bb326c.png';
+exports.cancelNormalImage = cancelNormalImage;
+var doneHoverImage = '//vrlab-static.ljcdn.com/release/web/measure/done-hover.9e09438b.png';
+exports.doneHoverImage = doneHoverImage;
+var doneNormalImage = '//vrlab-static.ljcdn.com/release/web/measure/done-normal.4fcddd73.png';
+exports.doneNormalImage = doneNormalImage;
+var exitImage = '//vrlab-static.ljcdn.com/release/web/measure/exit.6693ad51.png';
+exports.exitImage = exitImage;
+var revokeImage = '//vrlab-static.ljcdn.com/release/web/measure/revoke.3e424843.png';
+exports.revokeImage = revokeImage;
+var uiWrapperStyle = {
+  position: 'absolute',
+  top: '0',
+  left: '0',
+  width: '100%',
+  height: '100%',
+  opacity: '0',
+  transform: 'translate(0, 10px)',
+  transition: 'opacity 500ms ease-in-out, transform 500ms ease-in-out'
+};
+exports.uiWrapperStyle = uiWrapperStyle;
+var operatingSpaceStyle = {
+  position: 'absolute',
+  left: '50%',
+  bottom: '32px',
+  transform: 'translateX(-50%)',
+  width: '300px',
+  height: '89px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  fontSize: '16px',
+  pointerEvents: 'all',
+  color: '#fff',
+  zIndex: '10'
+};
+exports.operatingSpaceStyle = operatingSpaceStyle;
+var buttonGroupStyle = {
+  height: '100%',
+  width: 'max-content',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  alignItems: 'center'
+}; // 操作区下方的背景
+
+exports.buttonGroupStyle = buttonGroupStyle;
+var controllerBackgroundStyle = {
+  position: 'absolute',
+  bottom: '0',
+  left: '0',
+  opacity: '0.5',
+  width: '100%',
+  height: '184px',
+  background: "linear-gradient(180deg, rgba(0,0,0,0.00) 0%, #000000 100%)",
+  zIndex: '0'
+}; // item
+
+exports.controllerBackgroundStyle = controllerBackgroundStyle;
+var mainItemStyle = {
+  margin: '0 80px',
+  opacity: '0.7'
+};
+exports.mainItemStyle = mainItemStyle;
+var exitItemStyle = {
+  opacity: '0.7'
+}; // icon
+
+exports.exitItemStyle = exitItemStyle;
+var mainIconStyle = {
+  width: '60px',
+  height: '60px',
+  backgroundSize: '100%',
+  cursor: 'pointer'
+};
+exports.mainIconStyle = mainIconStyle;
+var exitIconStyle = {
+  width: '40px',
+  height: '40px',
+  marginTop: '10px',
+  backgroundSize: '100%',
+  cursor: 'pointer'
+}; // text
+
+exports.exitIconStyle = exitIconStyle;
+var textStyle = {
+  cursor: 'default',
+  userSelect: 'none'
+};
+exports.textStyle = textStyle;

package/plugins/PanoMeasurePlugin/index.d.ts

@@ -0,0 +1,7 @@
+import { FivePlugin } from '@realsee/five';
+import MeasureController, { MeasurePluginParameter } from './Controller';
+declare const MeasurePlugin: FivePlugin<MeasurePluginParameter, PluginReturns>;
+export default MeasurePlugin;
+export declare type PluginReturns = MeasureController;
+export type { PluginEvent } from './typings/event.type';
+export type { LineJson, PointJson } from './typings/data';

package/plugins/PanoMeasurePlugin/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _Controller = _interopRequireDefault(require("./Controller"));
+
+var MeasurePlugin = function MeasurePlugin(five, params) {
+  return new _Controller["default"](five, params);
+};
+
+var _default = MeasurePlugin; // 类型导出
+
+exports["default"] = _default;

package/plugins/PanoMeasurePlugin/typings/data.d.ts

@@ -0,0 +1,28 @@
+export interface LineCompletelyJson {
+    id: string;
+    points: PointJson[];
+}
+export interface PolylineCompletelyJson {
+    id: string;
+    points: PointJson[];
+    lines: LineCompletelyJson[];
+}
+export interface LineJson {
+    id: string;
+    points: string[];
+}
+export interface PolylineJson {
+    id: string;
+    points: string[];
+    lines: string[];
+}
+export interface PointJson {
+    id: string;
+    lines: string[];
+    position: number[];
+}
+export interface PluginData {
+    lines: LineJson[];
+    points: PointJson[];
+    polylines: PolylineJson[];
+}

package/plugins/PanoMeasurePlugin/typings/data.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/plugins/PanoMeasurePlugin/typings/event.type.d.ts

@@ -0,0 +1,28 @@
+import { SubscribeEventMap } from '@realsee/five';
+import { Vector3 } from 'three';
+import { Mode } from '../Controller';
+import { LineCompletelyJson } from './data';
+interface ControllerEvent extends SubscribeEventMap {
+    /**
+     * Mode 变更
+     */
+    modeChange: (mode: Mode) => void;
+}
+interface WatchEvent extends SubscribeEventMap {
+    selectedChange: (lines: LineCompletelyJson[]) => void;
+}
+interface EditEvent {
+    /**
+     * 编辑线条变更
+     */
+    editedLineChange: (lines: LineCompletelyJson[]) => void;
+    anchorChange: (anchor: Vector3 | null) => void;
+}
+interface DragEvent extends SubscribeEventMap {
+    wantsDragLine: (event: {
+        point: string;
+        lines: string[];
+    }) => boolean;
+}
+export declare type PluginEvent = ControllerEvent & EditEvent & WatchEvent & DragEvent;
+export {};