@realsee/dnalogel 0.1.0

package/plugins/PanoRulerPlugin/index.js

@@ -0,0 +1,589 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.PanoRulerPlugin = void 0;
+
+var _five = require("@realsee/five");
+
+var _three = require("three");
+
+var _planimetry = require("../../shared-utils/math/planimetry");
+
+var _nextFrame = require("../../shared-utils/nextFrame");
+
+var _throttle = _interopRequireDefault(require("../../shared-utils/throttle"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+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; }
+
+var getDistance = function getDistance(p1, p2) {
+  return Math.sqrt(Math.pow(p1.z - p2.z, 2) + Math.pow(p1.x - p2.x, 2));
+};
+
+var getRoomHeightInfo = function getRoomHeightInfo(roomInfo, five) {
+  var roomHeightInfo = {};
+  var raycaster = new _three.Raycaster();
+  var work = five.work;
+  if (!work) return roomHeightInfo;
+  var observers = roomInfo.observers;
+  work.observers.forEach(function (observer, index) {
+    var position = observer.standingPosition;
+    var point = new _three.Vector3(position.x, position.y, position.z);
+    raycaster.set(point, new _three.Vector3(0, 1, 0));
+
+    var _five$model$intersect = five.model.intersectRaycaster(raycaster),
+        _five$model$intersect2 = _slicedToArray(_five$model$intersect, 1),
+        intersection = _five$model$intersect2[0];
+
+    var verticalY = intersection ? intersection.point.y : null;
+    var id = observers[index];
+    if (!id) return roomHeightInfo;
+    var observerRoomName = roomInfo.rooms[id].name;
+
+    if (roomHeightInfo[observerRoomName] === undefined) {
+      roomHeightInfo[observerRoomName] = {
+        __roof: [verticalY],
+        __floor: [point.y]
+      };
+    } else {
+      roomHeightInfo[observerRoomName].__roof.push(verticalY);
+
+      roomHeightInfo[observerRoomName].__floor.push(point.y);
+    }
+  }); // 地板高度求中位数,屋顶高度取最高
+
+  for (var roomName in roomHeightInfo) {
+    var room = roomHeightInfo[roomName];
+
+    room.__roof.sort();
+
+    room.__floor.sort();
+
+    room.floor = room.__floor[~~(room.__floor.length / 2)];
+    room.roof = room.__roof[room.__roof.length - 1];
+  }
+
+  return roomHeightInfo;
+};
+
+/**
+ * 全景标尺插件
+ */
+var PanoRulerPlugin = function PanoRulerPlugin(five, params) {
+  var state = {
+    enable: false,
+    loaded: false,
+    options: params.options || {
+      distanceText: function distanceText(distance) {
+        return "\u7EA6".concat(distance.toFixed(1), "\u7C73");
+      }
+    }
+  };
+
+  var tpl = function tpl(name, distance) {
+    var domStr = "\n      <div class=\"PanoRulerPlugin-rule-line\">\n        <em></em>\n        <div class=\"PanoRulerPlugin-rule-label\">\n          <div class=\"PanoRulerPlugin-rule-label-point\"></div>\n          <span class=\"PanoRulerPlugin-rule-label-name\">".concat(state.options.distanceText(distance), "</span>\n        </div>\n      </div>\n    ");
+    var res = document.createElement('div');
+    res.setAttribute('class', 'PanoRulerPlugin-rule');
+    res.setAttribute('data-name', name);
+    res.setAttribute('style', 'display: none');
+    res.innerHTML = domStr;
+    return res;
+  };
+
+  var $rule = document.createElement('div');
+  $rule.setAttribute('style', "position: absolute;pointer-events: none;width: 100%;height: 100%;left: 0;top: 0;overflow: hidden;");
+  var __rule = {};
+
+  var _load = function _load(roomInfo, roomRules) {
+    if (state.loaded) {
+      throw new Error('标尺被重复初始化！');
+    }
+
+    var roomHeightInfo = getRoomHeightInfo(roomInfo, five);
+    var work = five.work;
+    if (!work) return false;
+
+    var _loop = function _loop(obKey) {
+      var points = roomRules[obKey];
+      var defaultPosition = work.observers[0].standingPosition;
+      var roomPoints = points.map(function (_ref) {
+        var x = _ref.x,
+            z = _ref.z,
+            observers = _ref.observers;
+        var pointRoomName = observers.length > 0 ? roomInfo.rooms[roomInfo.observers[observers[0]]].name : '';
+        var medianFloorHeight = roomHeightInfo[pointRoomName] ? roomHeightInfo[pointRoomName].floor : null;
+        var minDistance = Infinity;
+        var nearestPoint = {
+          index: 0,
+          x: defaultPosition.x,
+          y: defaultPosition.y,
+          z: defaultPosition.z
+        };
+        observers.forEach(function (index) {
+          var position = work.observers[index].standingPosition;
+          var observerPoint = {
+            index: index,
+            x: position.x,
+            y: position.y,
+            z: position.z
+          };
+          var distance = getDistance({
+            x: x,
+            z: z
+          }, observerPoint);
+
+          if (medianFloorHeight) {
+            // 取最近点时排除高度与房间平均高度差大于0.3米的点
+            if (distance < minDistance && Math.abs(observerPoint.y - medianFloorHeight) < 0.3) {
+              minDistance = distance;
+              nearestPoint = observerPoint;
+            }
+          } else {
+            if (distance < minDistance) {
+              minDistance = distance;
+              nearestPoint = observerPoint;
+            }
+          }
+        });
+
+        var _origin = new _three.Vector3(x, nearestPoint.y, z);
+
+        Object.assign(_origin, {
+          observers: observers
+        });
+        var verticalY = roomHeightInfo[pointRoomName] ? roomHeightInfo[pointRoomName].roof : null;
+
+        var _vertical = !verticalY ? null : new _three.Vector3(x, verticalY, z);
+
+        if (_vertical) Object.assign(_vertical, {
+          observers: observers
+        });
+        var origin = _origin;
+        var vertical = _vertical;
+        return {
+          origin: origin,
+          vertical: vertical
+        };
+      });
+      __rule[obKey] = {
+        origins: roomPoints.map(function (roomPoint) {
+          return roomPoint.origin;
+        }),
+        rules: []
+      };
+
+      var _iterator = _createForOfIteratorHelper(roomPoints),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var _step$value = _step.value,
+              _origin2 = _step$value.origin,
+              vertical = _step$value.vertical;
+          if (!vertical) continue;
+
+          var _$element = tpl(obKey, _origin2.distanceTo(vertical));
+
+          $rule.append(_$element);
+
+          __rule[obKey].rules.push({
+            vertical: true,
+            rule: [_origin2, vertical],
+            $element: _$element
+          });
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+
+      for (var index = 0; index < roomPoints.length; index++) {
+        var nextIndex = index + 1;
+        if (nextIndex >= roomPoints.length) nextIndex = 0;
+        var origin = roomPoints[index].origin;
+        var next = roomPoints[nextIndex].origin;
+        var $element = tpl(obKey, origin.distanceTo(next));
+        $rule.append($element);
+
+        __rule[obKey].rules.push({
+          vertical: false,
+          rule: [origin, next],
+          $element: $element
+        });
+      }
+    };
+
+    for (var obKey in roomRules) {
+      _loop(obKey);
+    }
+
+    state.loaded = true;
+    return true;
+  };
+
+  var load = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(_roomInfo, _roomRules, options) {
+      var roomInfo, roomRules;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              roomInfo = _roomInfo || params.roomInfo;
+              roomRules = _roomRules || params.roomRules;
+
+              if (!(!roomInfo || !roomRules)) {
+                _context.next = 4;
+                break;
+              }
+
+              throw new Error('标尺数据依赖不齐全！');
+
+            case 4:
+              state.options = Object.assign({}, state.options, options || {});
+
+              if (!five.model.loaded) {
+                _context.next = 9;
+                break;
+              }
+
+              return _context.abrupt("return", _load(roomInfo, roomRules));
+
+            case 9:
+              _context.next = 11;
+              return new Promise(function (resolve) {
+                return five.once('modelLoaded', function () {
+                  return resolve(_load(roomInfo, roomRules));
+                });
+              });
+
+            case 11:
+              return _context.abrupt("return", _context.sent);
+
+            case 12:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function load(_x, _x2, _x3) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  if (params.roomInfo && params.roomRules) {
+    load(params.roomInfo, params.roomRules);
+  }
+
+  var getRuleScreenIntr = function getRuleScreenIntr(startPoint, endPoint, canvasWidth, canvasHeight) {
+    var screenLines = [[{
+      x: 0,
+      y: 0
+    }, {
+      x: canvasWidth,
+      y: 0
+    }], [{
+      x: 0,
+      y: 0
+    }, {
+      x: 0,
+      y: canvasHeight
+    }], [{
+      x: canvasWidth,
+      y: 0
+    }, {
+      x: canvasWidth,
+      y: canvasHeight
+    }], [{
+      x: 0,
+      y: canvasHeight
+    }, {
+      x: canvasWidth,
+      y: canvasHeight
+    }]];
+    var intr = [];
+
+    for (var i = 0; i < screenLines.length; i++) {
+      var result = (0, _planimetry.intersectionOfLine)([startPoint, endPoint], [screenLines[i][0], screenLines[i][1]], true);
+      if (result) intr.push(result);
+    }
+
+    if (intr.length === 0) return false;else {
+      return intr;
+    }
+  };
+
+  var freshRule = function freshRule() {
+    var element = five.getElement();
+    if (!element) return;
+    if (!state.loaded) return;
+    if (Object.keys(__rule).length <= 0) return;
+    var panoIndex = five.panoIndex,
+        camera = five.camera,
+        currentMode = five.currentMode;
+    if (panoIndex === undefined) return;
+    var name;
+
+    for (var _name in __rule) {
+      if (_name.split(',').indexOf(panoIndex.toString()) >= 0) name = _name;
+    }
+
+    if (!name) return;
+    var cameraPosition = camera.position;
+    var cameraDirection = camera.getWorldDirection(new _three.Vector3());
+    var width = element.width;
+    var height = element.height; // 非全景模式下隐藏所有标尺
+
+    if (currentMode !== _five.Five.Mode.Panorama) {
+      for (var _name2 in __rule) {
+        var _iterator2 = _createForOfIteratorHelper(__rule[_name2].rules),
+            _step2;
+
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var $element = _step2.value.$element;
+            $element.style.display = 'none';
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
+      }
+
+      return;
+    } // 隐藏非当前点位的标尺
+
+
+    for (var _name3 in __rule) {
+      var _iterator3 = _createForOfIteratorHelper(__rule[_name3].rules),
+          _step3;
+
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var _$element2 = _step3.value.$element;
+          _$element2.style.display = _name3 === name ? 'block' : 'none';
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+    }
+
+    var verticalLines = []; // 可以看到的角度最小的拐点
+
+    var _rule$name$origins$s = __rule[name].origins.slice().filter(function (point) {
+      return point.observers.indexOf(panoIndex) >= 0;
+    }).sort(function (pointA, pointB) {
+      var angleA = pointA.clone().setY(0).sub(cameraPosition).normalize().angleTo(cameraDirection.clone().setY(0));
+      var angleB = pointB.clone().setY(0).sub(cameraPosition).normalize().angleTo(cameraDirection.clone().setY(0));
+      return angleA - angleB;
+    }),
+        _rule$name$origins$s2 = _slicedToArray(_rule$name$origins$s, 1),
+        visibleOrigin = _rule$name$origins$s2[0];
+
+    var shownNotVerticalRules = [];
+
+    var _iterator4 = _createForOfIteratorHelper(__rule[name].rules),
+        _step4;
+
+    try {
+      for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+        var _step4$value = _step4.value,
+            rule = _step4$value.rule,
+            vertical = _step4$value.vertical,
+            _$element3 = _step4$value.$element;
+
+        var _rule = _slicedToArray(rule, 2),
+            start = _rule[0],
+            end = _rule[1];
+
+        var $line = _$element3.querySelector('.PanoRulerPlugin-rule-line');
+
+        if (!$line) return;
+
+        if (!visibleOrigin) {
+          _$element3.style.display = 'none';
+          continue;
+        }
+
+        if (start !== visibleOrigin && end !== visibleOrigin) {
+          _$element3.style.display = 'none';
+          continue;
+        }
+
+        if (start.distanceTo(end) < 0.5) {
+          _$element3.style.display = 'none';
+          continue;
+        }
+
+        if (start.observers.indexOf(panoIndex) === -1 || end.observers.indexOf(panoIndex) === -1) {
+          _$element3.style.display = 'none';
+          continue;
+        }
+
+        var startAngle = start.clone().sub(cameraPosition).normalize().angleTo(cameraDirection);
+
+        if (startAngle > Math.PI / 2) {
+          _$element3.style.display = 'none';
+          continue;
+        }
+
+        var endAngle = end.clone().sub(cameraPosition).normalize().angleTo(cameraDirection);
+
+        if (endAngle > Math.PI / 2) {
+          _$element3.style.display = 'none';
+          continue;
+        }
+
+        var ruleLength = start.distanceTo(end);
+        var midPoint = end.clone().sub(end.clone().sub(start).divide(new _three.Vector3(2, 2, 2)));
+        var disFromCameraToMid = midPoint.distanceTo(cameraPosition);
+
+        if (disFromCameraToMid / ruleLength > 8) {
+          _$element3.style.display = 'none';
+          continue;
+        }
+
+        if (!vertical) shownNotVerticalRules.push(rule);
+        if (vertical) verticalLines.push({
+          $element: _$element3,
+          startAngle: startAngle
+        });
+        var mouseStart = start.clone().project(camera);
+        var startLeft = (mouseStart.x + 1) / 2 * width;
+        var startTop = (-mouseStart.y + 1) / 2 * height;
+        var mouseEnd = end.clone().project(camera);
+        var endLeft = (mouseEnd.x + 1) / 2 * width;
+        var endTop = (-mouseEnd.y + 1) / 2 * height;
+
+        var _distance = Math.sqrt(Math.pow(endLeft - startLeft, 2) + Math.pow(endTop - startTop, 2));
+
+        var visibleLength = _distance;
+        var labelOffset = 50;
+        var intr = getRuleScreenIntr({
+          x: ~~startLeft,
+          y: ~~startTop
+        }, {
+          x: ~~endLeft,
+          y: ~~endTop
+        }, width, height);
+
+        if (intr && intr.length === 1) {
+          if (visibleOrigin === start) {
+            visibleLength = Math.sqrt(Math.pow(intr[0].x - startLeft, 2) + Math.pow(intr[0].y - startTop, 2));
+            labelOffset = visibleLength / _distance * 50;
+          } else if (visibleOrigin === end) {
+            visibleLength = Math.sqrt(Math.pow(intr[0].x - endLeft, 2) + Math.pow(intr[0].y - endTop, 2));
+            labelOffset = 100 - visibleLength / _distance * 50;
+          }
+        }
+
+        if (intr && intr.length === 2) {
+          var middlePoint = {
+            x: (intr[0].x + intr[1].x) / 2,
+            y: (intr[0].y + intr[1].y) / 2
+          };
+          var distanceFromStart = Math.sqrt(Math.pow(middlePoint.x - startLeft, 2) + Math.pow(middlePoint.y - startTop, 2));
+          labelOffset = distanceFromStart / _distance * 100;
+        }
+
+        var rad = Math.PI / 2 - Math.atan2(endLeft - startLeft, startTop - endTop);
+        var deg = rad / Math.PI * 180;
+        $line.style.width = _distance + 'px';
+        $line.style.left = startLeft + 'px';
+        $line.style.top = startTop + 'px';
+        $line.style.transform = "rotate(".concat(-deg, "deg)");
+        var $label = $line.querySelector('.PanoRulerPlugin-rule-label');
+        var reverse = endLeft - startLeft > 0;
+        var rotateY = reverse ? ' rotateY(180deg)' : '';
+        $label.style.transform = "rotate(".concat(deg, "deg)") + rotateY;
+        $label.style.left = "".concat(labelOffset, "%");
+
+        if (reverse) {
+          $label.setAttribute('class', 'PanoRulerPlugin-rule-label reverse');
+        } else {
+          $label.setAttribute('class', 'PanoRulerPlugin-rule-label');
+        }
+      }
+    } catch (err) {
+      _iterator4.e(err);
+    } finally {
+      _iterator4.f();
+    }
+  };
+
+  var nextFrameFreshRule = function nextFrameFreshRule() {
+    return (0, _nextFrame.nextFrame)(freshRule);
+  };
+
+  var throttleFreshRule = (0, _throttle["default"])(freshRule, 80);
+
+  var enable = function enable() {
+    var _five$getElement, _five$getElement$pare;
+
+    if (!state.loaded) return false;
+    if (state.enable) return true;
+    $rule.setAttribute('class', 'PanoRulerPlugin' + (state.options.className ? ' ' + state.options.className : ''));
+    (_five$getElement = five.getElement()) === null || _five$getElement === void 0 ? void 0 : (_five$getElement$pare = _five$getElement.parentElement) === null || _five$getElement$pare === void 0 ? void 0 : _five$getElement$pare.append($rule);
+    freshRule();
+    five.on('panoArrived', freshRule);
+    five.on('modeChange', freshRule);
+    five.on('cameraDirectionUpdate', nextFrameFreshRule);
+    five.on('movingToPano', nextFrameFreshRule);
+    five.on('mouseWheel', throttleFreshRule);
+    five.on('pinchGesture', throttleFreshRule);
+    state.enable = true;
+    return true;
+  };
+
+  var disable = function disable() {
+    if (!state.enable) return true;
+    five.off('panoArrived', freshRule);
+    five.off('modeChange', freshRule);
+    five.off('cameraDirectionUpdate', nextFrameFreshRule);
+    five.off('movingToPano', nextFrameFreshRule);
+    five.off('mouseWheel', throttleFreshRule);
+    five.off('pinchGesture', throttleFreshRule);
+
+    if ($rule) {
+      $rule.remove();
+    }
+
+    state.enable = false;
+    return true;
+  };
+
+  return {
+    enable: enable,
+    disable: disable,
+    load: load,
+    state: state
+  };
+};
+
+exports.PanoRulerPlugin = PanoRulerPlugin;
+var _default = PanoRulerPlugin;
+exports["default"] = _default;

package/plugins/PanoRulerPlugin/typings.d.ts

@@ -0,0 +1,21 @@
+export interface Room {
+    id: string;
+    name: string;
+    localName: string;
+    area: number;
+}
+export interface Rooms {
+    [key: string]: Room;
+}
+export declare type RoomObservers = string[];
+export interface RoomInfo {
+    rooms: Rooms;
+    observers: RoomObservers;
+}
+export interface RoomRules {
+    [key: string]: {
+        x: number;
+        z: number;
+        observers: number[];
+    }[];
+}

package/plugins/PanoRulerPlugin/typings.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/plugins/PanoTVVideoPlugin/index.d.ts

@@ -0,0 +1,24 @@
+import { FivePlugin } from '@realsee/five';
+export declare type PanoTVVideoPluginPoints = Record<string, {
+    position: {
+        y: number;
+        x: number;
+        z: number;
+    };
+    name: 'p0' | 'p1' | 'p2' | 'p3';
+}[][]>;
+export interface PanoTVVideoPluginData {
+    video_src: string;
+    video_poster_src: string;
+    points: PanoTVVideoPluginPoints;
+}
+export interface PanoTVVideoPluginParameterType {
+    videoElement?: HTMLVideoElement;
+}
+export interface PanoTVVideoPluginExportType {
+    enable: () => void;
+    disable: () => void;
+    load: (data: PanoTVVideoPluginData, videoElement?: HTMLVideoElement) => void;
+}
+export declare const PanoTVVideoPlugin: FivePlugin<PanoTVVideoPluginParameterType, PanoTVVideoPluginExportType>;
+export default PanoTVVideoPlugin;