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

package/plugins/PanoMeasurePlugin/Controller/index.js

@@ -0,0 +1,230 @@
+"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.function.name.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 _Magnifier = _interopRequireDefault(require("../Modules/Magnifier"));
+
+var _FiveHelper = _interopRequireDefault(require("../Modules/FiveHelper"));
+
+var _EditController = _interopRequireDefault(require("./EditController"));
+
+var _WatchController = _interopRequireDefault(require("./WatchController"));
+
+var _three = require("three");
+
+var _Model = require("../Model");
+
+var _five = require("@realsee/five");
+
+var _mouseGroup = require("../utils/mouseGroup");
+
+var _UIController = require("../Modules/UIController");
+
+var _GuideController = require("../Modules/GuideController");
+
+var _ShortcutKeyController = require("./ShortcutKeyController");
+
+var MeasureController = /*#__PURE__*/function () {
+  function MeasureController(five, params) {
+    var _this = this;
+
+    (0, _classCallCheck2["default"])(this, MeasureController);
+    (0, _defineProperty2["default"])(this, "hasOpen", false);
+    (0, _defineProperty2["default"])(this, "hook", new _five.Subscribe());
+    (0, _defineProperty2["default"])(this, "container", document.createElement('div'));
+    (0, _defineProperty2["default"])(this, "controller", null);
+    (0, _defineProperty2["default"])(this, "getCurrentMode", function () {
+      if (_this.controller instanceof _EditController["default"]) return 'Edit';
+      if (_this.controller instanceof _WatchController["default"]) return 'Watch';
+      return null;
+    });
+    (0, _defineProperty2["default"])(this, "changeMode", function (mode) {
+      var _this$controller;
+
+      if (!_this.hasOpen) return;
+      if (_this.getCurrentMode() === mode) return;
+      (_this$controller = _this.controller) === null || _this$controller === void 0 ? void 0 : _this$controller.dispose();
+      var controllerMap = {
+        Watch: _WatchController["default"],
+        Edit: _EditController["default"]
+      };
+      if (!controllerMap[mode]) throw new Error('不存在的 Mode');
+      _this.controller = new controllerMap[mode](_this.controllerParams);
+
+      _this.hook.emit('modeChange', mode);
+    });
+    this.five = five;
+    this.params = params;
+    this.model = new _Model.Model({
+      userDistanceItemCreator: this.params.userDistanceItemCreator
+    });
+    this.fiveHelper = new _FiveHelper["default"](five); // magnifier
+
+    var magnifierSize = 190;
+    var magnifierScale = 2;
+    this.magnifier = new _Magnifier["default"](five, {
+      scale: magnifierScale,
+      width: magnifierSize,
+      height: magnifierSize
+    }); // ==================== Group ====================
+
+    this.group = new _three.Group();
+    this.group.name = 'plugin-measure-group';
+    this.container.classList.add('five-plugin-measure-container');
+    this.container.style.position = 'relative';
+    this.container.style.pointerEvents = 'none';
+    this.container.style.width = '100%';
+    this.container.style.height = '100%';
+    this.container.style.background = 'rgba(0, 0, 0, 0.15)';
+    this.controllerParams = {
+      five: this.five,
+      hook: this.hook,
+      group: this.group,
+      model: this.model,
+      magnifier: this.magnifier,
+      container: this.container,
+      fiveHelper: this.fiveHelper,
+      mouseGroup: (0, _mouseGroup.getMouseGroup)(),
+      userDistanceItemCreator: this.params.userDistanceItemCreator
+    };
+    if (this.params.useUIController !== false) this.useUIController = new _UIController.UIController(this, this.controllerParams);
+    if (this.params.useUIController !== false) this.useGuideController = new _GuideController.GuideController(this, this.controllerParams);
+  }
+
+  (0, _createClass2["default"])(MeasureController, [{
+    key: "appendTo",
+    value: function appendTo(parent) {
+      parent.append(this.container);
+    }
+  }, {
+    key: "dispose",
+    value: function dispose() {
+      var _this$useUIController, _this$magnifier;
+
+      this.close();
+      (_this$useUIController = this.useUIController) === null || _this$useUIController === void 0 ? void 0 : _this$useUIController.dispose();
+      (_this$magnifier = this.magnifier) === null || _this$magnifier === void 0 ? void 0 : _this$magnifier.dispose();
+      this.five.needsRender = true;
+    }
+    /** 加载数据
+     * @description 数据加载时会覆盖当前已保存的数据
+     * @description 如果当前正在编辑中，会自动退出并保存编辑
+     */
+
+  }, {
+    key: "load",
+    value: function load(data) {
+      this.model.parse(data);
+      this.save();
+    }
+    /** 插件功能入口
+     * @description 会隐藏鼠标的默认聚焦环
+     * @description 会隐藏当前 VR 内的点位展示
+     */
+
+  }, {
+    key: "open",
+    value: function open() {
+      var _this$useUIController2, _this$useGuideControl;
+
+      if (this.hasOpen) return;
+      this.hasOpen = true;
+      this.five.scene.add(this.group); // 隐藏点位和鼠标聚焦环
+
+      this.five.helperVisible = false;
+      this.controller = new _WatchController["default"](this.controllerParams);
+      (_this$useUIController2 = this.useUIController) === null || _this$useUIController2 === void 0 ? void 0 : _this$useUIController2.show();
+      (_this$useGuideControl = this.useGuideController) === null || _this$useGuideControl === void 0 ? void 0 : _this$useGuideControl.show();
+      this.shortcutKeyController = new _ShortcutKeyController.ShortcutKeyController(this, this.five);
+    }
+    /** 关闭插件功能
+     * @description 清除标尺线条
+     * @description 还原点位展示和默认鼠标 UI
+     */
+
+  }, {
+    key: "close",
+    value: function close() {
+      var _this$controller2, _this$useUIController3, _this$useGuideControl2, _this$shortcutKeyCont;
+
+      this.hasOpen = false; // 展示点位和鼠标聚焦环
+
+      (_this$controller2 = this.controller) === null || _this$controller2 === void 0 ? void 0 : _this$controller2.dispose();
+      (_this$useUIController3 = this.useUIController) === null || _this$useUIController3 === void 0 ? void 0 : _this$useUIController3.hide();
+      (_this$useGuideControl2 = this.useGuideController) === null || _this$useGuideControl2 === void 0 ? void 0 : _this$useGuideControl2.hide();
+      (_this$shortcutKeyCont = this.shortcutKeyController) === null || _this$shortcutKeyCont === void 0 ? void 0 : _this$shortcutKeyCont.dispose();
+      this.controller = null;
+      this.five.helperVisible = true;
+      this.five.scene.remove(this.group);
+      this.five.needsRender = true;
+    }
+  }, {
+    key: "revoke",
+    value:
+    /** 撤销编辑 */
+    function revoke() {
+      if (!(this.controller instanceof _EditController["default"])) return;
+      this.controller.revoke();
+      return;
+    }
+  }, {
+    key: "removeLineByID",
+    value: function removeLineByID(lineID) {
+      this.model.removeLineByID(lineID);
+    }
+    /**
+     * 高亮当前线段
+     */
+
+  }, {
+    key: "highlightLine",
+    value: function highlightLine(lineID) {
+      if (this.getCurrentMode() !== 'Watch') return false;
+      var line = this.model.getLineByID(lineID);
+      if (!line) return false;
+      this.controller.highlightLine(line);
+      return true;
+    }
+  }, {
+    key: "clearHighlightLines",
+    value: function clearHighlightLines() {
+      if (this.getCurrentMode() !== 'Watch') return false;
+      this.controller.clearHighlightLines();
+      return true;
+    }
+    /** 保存编辑 */
+
+  }, {
+    key: "save",
+    value: function save() {
+      if (!(this.controller instanceof _EditController["default"])) return this;
+      this.model.mergeModel(this.controller.model);
+      return this;
+    }
+    /** 把当前以保存的数据转换成 JSON 对象 */
+
+  }, {
+    key: "toJson",
+    value: function toJson() {
+      return this.model.toJson();
+    }
+  }]);
+  return MeasureController;
+}();
+
+exports["default"] = MeasureController;

package/plugins/PanoMeasurePlugin/Model/index.d.ts

@@ -0,0 +1,38 @@
+import Line from './line';
+import Point from './point';
+import { Subscribe, SubscribeEventMap } from '@realsee/five';
+import { PluginData } from '../typings/data';
+import { Polyline } from './polyline';
+import { UserDistanceItem } from '../utils/distanceDom';
+interface IModelEvent extends SubscribeEventMap {
+    /** 新增线条
+     * @param line 被创建的线条
+     */
+    lineAdded: (line: Line) => void;
+    /** 删除线条
+     * @param lines 被删除的线条数组
+     */
+    lineRemoved: (lines: Line) => void;
+}
+export interface ModelParams {
+    userDistanceItemCreator?: () => UserDistanceItem;
+}
+export declare class Model {
+    readonly lines: Line[];
+    readonly points: Point[];
+    readonly params: ModelParams;
+    readonly polylines: Polyline[];
+    readonly hook: Subscribe<IModelEvent>;
+    constructor(params: ModelParams);
+    addLine(line: Line): this | undefined;
+    removeLineByID(lineID: string): void;
+    removeLine(line: Line): this;
+    mergeModel(model: Model): void;
+    includes(item: Point | Line): boolean | undefined;
+    getPointByID(id: string): Point | undefined;
+    getLineByID(id: string): Line | undefined;
+    getClosestPoint(): void;
+    parse(data: PluginData): this;
+    toJson(): PluginData;
+}
+export {};

package/plugins/PanoMeasurePlugin/Model/index.js

@@ -0,0 +1,235 @@
+"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.Model = void 0;
+
+require("core-js/modules/es.array.includes.js");
+
+require("core-js/modules/es.string.includes.js");
+
+require("core-js/modules/es.array.find.js");
+
+require("core-js/modules/es.array.slice.js");
+
+require("core-js/modules/es.array.for-each.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.array.splice.js");
+
+require("core-js/modules/es.array.concat.js");
+
+require("core-js/modules/es.array.filter.js");
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+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 _line = _interopRequireDefault(require("./line"));
+
+var _point = _interopRequireDefault(require("./point"));
+
+var _five = require("@realsee/five");
+
+var _removeArrayItem = _interopRequireDefault(require("../../../shared-utils/removeArrayItem"));
+
+var _polyline = require("./polyline");
+
+var Model = /*#__PURE__*/function () {
+  function Model(params) {
+    (0, _classCallCheck2["default"])(this, Model);
+    (0, _defineProperty2["default"])(this, "lines", []);
+    (0, _defineProperty2["default"])(this, "points", []);
+    (0, _defineProperty2["default"])(this, "polylines", []);
+    (0, _defineProperty2["default"])(this, "hook", new _five.Subscribe());
+    this.params = params;
+  }
+
+  (0, _createClass2["default"])(Model, [{
+    key: "addLine",
+    value: function addLine(line) {
+      var _line$points = (0, _slicedToArray2["default"])(line.points, 2),
+          startPoint = _line$points[0],
+          endPoint = _line$points[1];
+
+      if (!startPoint || !endPoint) return this;
+      if (!this.includes(startPoint)) this.points.push(startPoint);
+      if (!this.includes(endPoint)) this.points.push(endPoint);
+      this.lines.push(line);
+      var lastPolyline = this.polylines.find(function (polyline) {
+        return !!polyline.getNext(line);
+      });
+
+      if (lastPolyline) {
+        lastPolyline.push(line);
+      } else {
+        var polyline = new _polyline.Polyline();
+        polyline.push(line);
+        this.polylines.push(polyline);
+      }
+
+      this.hook.emit('lineAdded', line);
+    }
+  }, {
+    key: "removeLineByID",
+    value: function removeLineByID(lineID) {
+      var line = this.getLineByID(lineID);
+      if (line) this.removeLine(line);
+    }
+  }, {
+    key: "removeLine",
+    value: function removeLine(line) {
+      // handle polyline
+      var polyline = this.polylines.find(function (polyline) {
+        return polyline.lines.includes(line);
+      });
+
+      if (polyline) {
+        if (polyline.lines.slice(-1)[0] !== line) throw new Error('不能从中间删除线段');
+        polyline.pop();
+        if (polyline.lines.length === 0) (0, _removeArrayItem["default"])(polyline, this.polylines);
+      }
+
+      var _line$points2 = (0, _slicedToArray2["default"])(line.points, 2),
+          point = _line$points2[0],
+          anotherPoint = _line$points2[1];
+
+      if (point.lines.length === 0) (0, _removeArrayItem["default"])(point, this.points);
+      if (anotherPoint.lines.length === 0) (0, _removeArrayItem["default"])(anotherPoint, this.points);
+      (0, _removeArrayItem["default"])(line, this.lines);
+      line.clear();
+      this.hook.emit('lineRemoved', line);
+      return this;
+    }
+  }, {
+    key: "mergeModel",
+    value: function mergeModel(model) {
+      var _this = this;
+
+      model.lines.forEach(function (line) {
+        return _this.addLine(line);
+      });
+    }
+  }, {
+    key: "includes",
+    value: function includes(item) {
+      if (item.type === 'point') {
+        return this.points.find(function (_ref) {
+          var id = _ref.id;
+          return id === item.id;
+        }) !== undefined;
+      } else if (item.type === 'line') {
+        return this.lines.find(function (_ref2) {
+          var id = _ref2.id;
+          return id === item.id;
+        }) !== undefined;
+      }
+    }
+  }, {
+    key: "getPointByID",
+    value: function getPointByID(id) {
+      return this.points.find(function (_ref3) {
+        var _id = _ref3.id;
+        return _id === id;
+      });
+    }
+  }, {
+    key: "getLineByID",
+    value: function getLineByID(id) {
+      return this.lines.find(function (_ref4) {
+        var _id = _ref4.id;
+        return _id === id;
+      });
+    }
+  }, {
+    key: "getClosestPoint",
+    value: function getClosestPoint() {}
+  }, {
+    key: "parse",
+    value: function parse(data) {
+      var _this2 = this,
+          _this$points,
+          _this$lines,
+          _this$polylines;
+
+      var points = data.points.map(function (_ref5) {
+        var id = _ref5.id,
+            position = _ref5.position;
+        var point = new _point["default"](position);
+        point.id = id;
+        return point;
+      });
+      var lines = data.lines.map(function (data) {
+        var _data$points = (0, _slicedToArray2["default"])(data.points, 2),
+            pointID = _data$points[0],
+            anotherPointID = _data$points[1];
+
+        var point = _this2.getPointByID.call({
+          points: points
+        }, pointID);
+
+        var anotherPoint = _this2.getPointByID.call({
+          points: points
+        }, anotherPointID);
+
+        if (!point || !anotherPoint) throw new Error('线上的点不存在');
+        var line = new _line["default"](point, anotherPoint, _this2);
+        line.id = data.id;
+        return line;
+      });
+      var polylines = data.polylines.map(function (polylineJson) {
+        var polyline = new _polyline.Polyline();
+        polylineJson.lines.forEach(function (lineID) {
+          var line = lines.find(function (_ref6) {
+            var id = _ref6.id;
+            return id === lineID;
+          });
+          line && polyline.push(line);
+        });
+        return polyline;
+      });
+
+      (_this$points = this.points).splice.apply(_this$points, [0, this.points.length].concat((0, _toConsumableArray2["default"])(points)));
+
+      (_this$lines = this.lines).splice.apply(_this$lines, [0, this.lines.length].concat((0, _toConsumableArray2["default"])(lines)));
+
+      (_this$polylines = this.polylines).splice.apply(_this$polylines, [0, this.polylines.length].concat((0, _toConsumableArray2["default"])(polylines)));
+
+      return this;
+    }
+  }, {
+    key: "toJson",
+    value: function toJson() {
+      return {
+        points: this.points.map(function (point) {
+          return point.toJson();
+        }),
+        lines: this.lines.map(function (line) {
+          return line.toJson();
+        }),
+        polylines: this.polylines.map(function (polyline) {
+          return polyline.toJson();
+        }).filter(function (polylines) {
+          return polylines.lines.length > 0;
+        })
+      };
+    }
+  }]);
+  return Model;
+}();
+
+exports.Model = Model;

package/plugins/PanoMeasurePlugin/Model/line.d.ts

@@ -0,0 +1,30 @@
+import { Model } from '.';
+import Point from './point';
+import { LineJson } from '..';
+import { Polyline } from './polyline';
+import { LineCompletelyJson } from '../typings/data';
+import { Line as FiveLine } from '@realsee/five/line';
+import { Subscribe, SubscribeEventMap } from '@realsee/five';
+import { DistanceItem } from '../utils/distanceDom';
+export interface ILineHook extends SubscribeEventMap {
+    selected: (line: Line) => void;
+}
+export default class Line {
+    id: string;
+    selected: boolean;
+    readonly type = "line";
+    readonly model: Model;
+    readonly mesh: FiveLine;
+    readonly points: Point[];
+    readonly lightMesh: FiveLine;
+    readonly hook: Subscribe<ILineHook>;
+    readonly distanceItem: DistanceItem;
+    private polyline?;
+    constructor(point: Point, anotherPoint: Point, model: Model);
+    clear(): void;
+    getPolyline(): Polyline;
+    findAnotherPoint(point: Point): Point | undefined;
+    toJson(): LineJson;
+    toCompletelyJson(): LineCompletelyJson;
+    clone(): Line;
+}

package/plugins/PanoMeasurePlugin/Model/line.js

@@ -0,0 +1,121 @@
+"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.array.find.js");
+
+require("core-js/modules/es.array.includes.js");
+
+require("core-js/modules/es.string.includes.js");
+
+require("core-js/modules/es.array.map.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 _polyline = require("./polyline");
+
+var _uuid = _interopRequireDefault(require("../../../shared-utils/uuid"));
+
+var _line = require("../utils/line");
+
+var _five = require("@realsee/five");
+
+var _distanceDom = require("../utils/distanceDom");
+
+var Line = /*#__PURE__*/function () {
+  function Line(point, anotherPoint, model) {
+    var _this = this;
+
+    (0, _classCallCheck2["default"])(this, Line);
+    (0, _defineProperty2["default"])(this, "selected", false);
+    (0, _defineProperty2["default"])(this, "type", 'line');
+    this.id = (0, _uuid["default"])();
+    this.model = model;
+    if (point.id === anotherPoint.id) throw new Error('无效的线段, 一个点无法构成线段');
+    this.hook = new _five.Subscribe();
+    this.points = [point, anotherPoint];
+    this.mesh = (0, _line.creatLineMesh)(this, 'normal');
+    this.lightMesh = (0, _line.creatLineMesh)(this, 'light');
+    this.distanceItem = (0, _distanceDom.creatDistanceItem)({
+      line: this,
+      clickCallback: function clickCallback() {
+        return _this.hook.emit('selected', _this);
+      },
+      userDistanceItem: this.model.params.userDistanceItemCreator ? this.model.params.userDistanceItemCreator() : undefined
+    });
+    point.lines.push(this);
+    anotherPoint.lines.push(this);
+  }
+
+  (0, _createClass2["default"])(Line, [{
+    key: "clear",
+    value: function clear() {
+      this.selected = false;
+      this.polyline = undefined;
+    }
+  }, {
+    key: "getPolyline",
+    value: function getPolyline() {
+      var _this2 = this;
+
+      if (this.polyline) return this.polyline;
+      var modelPolyline = this.model.polylines.find(function (polyline) {
+        return polyline.lines.includes(_this2);
+      });
+      this.polyline = modelPolyline;
+      if (modelPolyline) return modelPolyline;
+      var polyline = new _polyline.Polyline();
+      polyline.push(this);
+      return polyline;
+    }
+  }, {
+    key: "findAnotherPoint",
+    value: function findAnotherPoint(point) {
+      return this.points.find(function (_ref) {
+        var id = _ref.id;
+        return id !== point.id;
+      });
+    }
+  }, {
+    key: "toJson",
+    value: function toJson() {
+      return {
+        id: this.id,
+        points: this.points.map(function (_ref2) {
+          var id = _ref2.id;
+          return id;
+        })
+      };
+    }
+  }, {
+    key: "toCompletelyJson",
+    value: function toCompletelyJson() {
+      return {
+        id: this.id,
+        points: this.points.map(function (point) {
+          return point.toJson();
+        })
+      };
+    }
+  }, {
+    key: "clone",
+    value: function clone() {
+      var line = new Line(this.points[0].clone(), this.points[1].clone(), this.model);
+      return line;
+    }
+  }]);
+  return Line;
+}();
+
+exports["default"] = Line;

package/plugins/PanoMeasurePlugin/Model/point.d.ts

@@ -0,0 +1,16 @@
+import Line from './line';
+import { Vector3 } from 'three';
+import { PluginData } from '../typings/data';
+declare type IPointData = PluginData['points'][0];
+export default class Point {
+    id: string;
+    lines: Line[];
+    position: Vector3;
+    readonly type = "point";
+    constructor(position: Vector3 | number[]);
+    toJson(): IPointData;
+    addLine(line: Line): void;
+    removeLine(line: Line): void;
+    clone(): Point;
+}
+export {};