@realsee/dnalogel 0.1.7-alpha.1 → 0.1.7-alpha.10

package/plugins/PanoMeasurePlugin/Modules/GuideController.js

@@ -0,0 +1,107 @@
+"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.GuideController = 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 GuideController = /*#__PURE__*/function () {
+  function GuideController(measureController, params) {
+    var _this = this;
+
+    (0, _classCallCheck2["default"])(this, GuideController);
+    (0, _defineProperty2["default"])(this, "textDom", document.createElement('span'));
+    (0, _defineProperty2["default"])(this, "container", document.createElement('div'));
+    (0, _defineProperty2["default"])(this, "hasAnchor", false);
+    (0, _defineProperty2["default"])(this, "onModelChange", function (mode) {
+      if (mode === 'Watch') {
+        _this.textDom.innerText = "";
+        return;
+      }
+
+      _this.textDom.innerText = "\u8BF7\u9009\u62E9\u7B2C\u4E00\u4E2A\u6D4B\u91CF\u70B9\uFF0CEsc\u6216\u5355\u51FB\u9F20\u6807\u53F3\u952E\u53EF\u53D6\u6D88\u9009\u62E9";
+    });
+    (0, _defineProperty2["default"])(this, "anchorChange", function (anchor) {
+      if (!_this.hasAnchor && !!anchor) {
+        _this.hasAnchor = true;
+        _this.textDom.innerText = "\u9009\u62E9\u4E0B\u4E00\u4E2A\u6D4B\u91CF\u70B9\uFF0CEsc\u6216\u5355\u51FB\u9F20\u6807\u53F3\u952E\u53D6\u6D88\u9009\u62E9";
+      } else if (!anchor) {
+        _this.hasAnchor = false;
+        _this.textDom.innerText = "\u8BF7\u9009\u62E9\u7B2C\u4E00\u4E2A\u6D4B\u91CF\u70B9\uFF0CEsc\u6216\u5355\u51FB\u9F20\u6807\u53F3\u952E\u53EF\u53D6\u6D88\u9009\u62E9";
+      }
+    });
+    (0, _defineProperty2["default"])(this, "onEditedLineChange", function (lines) {
+      if (lines.length === 1) {
+        _this.textDom.innerText = "\u53EF\u4EE5\u8FDE\u7EED\u9009\u62E9\u6D4B\u91CF\u70B9\uFF0C\u6216\u70B9\u51FB\u4E0B\u65B9\u201C\u5B8C\u6210\u201D\u7ED3\u675F\u6D4B\u91CF\uFF08Esc\u53D6\u6D88\uFF0CCommand+S\u4FDD\u5B58\uFF09";
+      }
+    });
+    this.initDom();
+    params.container.append(this.container);
+    this.measureController = measureController;
+    measureController.hook.on('modeChange', this.onModelChange);
+    measureController.hook.on('anchorChange', this.anchorChange);
+    measureController.hook.on('editedLineChange', this.onEditedLineChange);
+  }
+
+  (0, _createClass2["default"])(GuideController, [{
+    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)';
+      return this;
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      this.container.style.opacity = '0';
+      this.container.style.transform = 'translate(0, -10px)';
+      this.measureController.hook.off('modeChange', this.onModelChange);
+      this.measureController.hook.off('anchorChange', this.anchorChange);
+      this.measureController.hook.off('editedLineChange', this.onEditedLineChange);
+      return this;
+    }
+  }, {
+    key: "initDom",
+    value: function initDom() {
+      var container = this.container;
+      var textDom = this.textDom;
+      container.classList.add('fpm__guide-container');
+      container.style.position = 'absolute';
+      container.style.top = '0px';
+      container.style.left = '0px';
+      container.style.width = '100%';
+      container.style.height = '110px';
+      container.style.display = 'flex';
+      container.style.alignItems = 'center';
+      container.style.justifyContent = 'center';
+      container.style.transform = 'translate(0, -10px)';
+      container.style.background = "linear-gradient(180deg, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.00) 100%)";
+      container.style.transition = 'opacity 500ms ease-in-out, transform 500ms ease-in-out';
+      container.style.opacity = '0';
+      textDom.classList.add('fpm__guide-text');
+      textDom.style.color = '#fff';
+      textDom.style.fontSize = '20px';
+      textDom.innerText = "\u70B9\u51FB\u4E0B\u65B9\u201C\u6DFB\u52A0\u201D\u5F00\u59CB\u6D4B\u8DDD";
+      container.appendChild(textDom);
+    }
+  }]);
+  return GuideController;
+}();
+
+exports.GuideController = GuideController;

package/plugins/PanoMeasurePlugin/Modules/Magnifier.d.ts

@@ -0,0 +1,24 @@
+import { Five } from '@realsee/five';
+import { Vector3 } from 'three';
+export interface MagnifierOptions {
+    width: number;
+    height: number;
+    scale: number;
+}
+export default class Magnifier {
+    private five;
+    private scale;
+    private width;
+    private height;
+    private pixelRatio;
+    private originWidth;
+    private originHeight;
+    private context;
+    private canvas;
+    private container?;
+    constructor(five: Five, options: MagnifierOptions);
+    dispose(): void;
+    clear(): void;
+    appendTo(element: Element): void;
+    updateWithPoint(point: Vector3): void;
+}

package/plugins/PanoMeasurePlugin/Modules/Magnifier.js

@@ -0,0 +1,139 @@
+"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;
+
+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");
+
+require("core-js/modules/es.array.concat.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 _three = require("three");
+
+/** 交换数组元素 */
+function exchange(array, index1, index2) {
+  var value = array[index1];
+  array[index1] = array[index2];
+  array[index2] = value;
+}
+
+var Magnifier = /*#__PURE__*/function () {
+  function Magnifier(five, options) {
+    (0, _classCallCheck2["default"])(this, Magnifier);
+    (0, _defineProperty2["default"])(this, "canvas", document.createElement('canvas'));
+    if (!five.renderer) throw new Error('Five Render 未初始化');
+    this.five = five;
+    var scale = options.scale;
+    var pixelRatio = five.renderer.getPixelRatio();
+    var originWidth = options.width;
+    var originHeight = options.height;
+    var width = originWidth * pixelRatio;
+    var height = originHeight * pixelRatio;
+    var magnifier = this.canvas;
+    var context = this.canvas.getContext('2d');
+    if (!context) throw new Error('CANNOT CREATE CONTEXT2D');
+    this.scale = scale;
+    this.context = context;
+    this.width = width;
+    this.height = height;
+    this.originWidth = originWidth;
+    this.originHeight = originHeight;
+    this.pixelRatio = pixelRatio;
+    magnifier.classList.add('plugin-measure-magnifier');
+    magnifier.style.position = 'absolute';
+    magnifier.style.pointerEvents = 'none';
+    magnifier.style.borderRadius = '50%';
+    magnifier.style.left = -width / 2 + 'px';
+    magnifier.style.top = -height - 90 + 'px';
+    magnifier.setAttribute('width', width.toString());
+    magnifier.setAttribute('height', height.toString());
+    this.canvas.style.width = originWidth + 'px';
+    this.canvas.style.height = originHeight + 'px';
+  }
+
+  (0, _createClass2["default"])(Magnifier, [{
+    key: "dispose",
+    value: function dispose() {
+      this.clear();
+      this.canvas.remove();
+    }
+  }, {
+    key: "clear",
+    value: function clear() {
+      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    }
+  }, {
+    key: "appendTo",
+    value: function appendTo(element) {
+      this.container = element;
+      element.append(this.canvas);
+    }
+  }, {
+    key: "updateWithPoint",
+    value: function updateWithPoint(point) {
+      if (!this.five.renderer || !this.container) return;
+      var scale = this.scale,
+          pixelRatio = this.pixelRatio,
+          context = this.context,
+          originWidth = this.originWidth,
+          originHeight = this.originHeight,
+          width = this.width,
+          height = this.height;
+      var position2d = point.clone().project(this.five.camera);
+      var left = (position2d.x + 1) / 2 * this.container.clientWidth;
+      var right = -(position2d.x - 1) / 2 * this.container.clientWidth;
+      var top = -(position2d.y - 1) / 2 * this.container.clientHeight;
+
+      if (left < 183) {
+        this.canvas.style.top = -originHeight / 2 + 'px';
+        this.canvas.style.left = 90 + 'px';
+      } else if (top < 183) {
+        this.canvas.style.top = 90 + 'px';
+        this.canvas.style.left = -originWidth / 2 + 'px';
+      } else if (right < 183) {
+        this.canvas.style.top = -originHeight / 2 + 'px';
+        this.canvas.style.left = -originWidth - 90 + 'px';
+      } else {
+        this.canvas.style.left = -originWidth / 2 + 'px';
+        this.canvas.style.top = -originHeight - 90 + 'px';
+      }
+
+      this.canvas.style.transform = "translate3d(".concat(left, "px, ").concat(top, "px, 10px)");
+      var renderSize = this.five.renderer.getSize(new _three.Vector2());
+      var x = (position2d.x + 1) / 2 * renderSize.x;
+      var y = (position2d.y + 1) / 2 * renderSize.y;
+      var pixels = this.five.getPixels(x - originWidth / scale / 2, y - originHeight / scale / 2, originWidth / scale, originHeight / scale, pixelRatio * scale);
+      var length = width * height / 2;
+
+      for (var index = 0; index < length; index++) {
+        var targetIndex = (height - Math.floor(index / width) - 1) * width + index % width;
+        exchange(pixels, index * 4 + 0, targetIndex * 4 + 0);
+        exchange(pixels, index * 4 + 1, targetIndex * 4 + 1);
+        exchange(pixels, index * 4 + 2, targetIndex * 4 + 2);
+        exchange(pixels, index * 4 + 3, targetIndex * 4 + 3);
+      }
+
+      var imageData = context.createImageData(width, height);
+      imageData.data.set(pixels);
+      context.putImageData(imageData, 0, 0);
+    }
+  }]);
+  return Magnifier;
+}();
+
+exports["default"] = Magnifier;

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

@@ -0,0 +1,6 @@
+export declare const 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";
+export declare const 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";
+export declare const MAIN_MOUSE_ENTER_FILL = "url(#fpm__main-b)";
+export declare const MAIN_MOUSE_LEAVE_FILL = "url(#fpm__main-c)";
+declare const _default: string;
+export default _default;

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;
+}