@realsee/dnalogel 0.1.2 → 0.1.3

package/plugins/ModelRoomLabelPlugin/Controller.js

@@ -0,0 +1,147 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModelRoomLabelController = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var ReactDOM = _interopRequireWildcard(require("react-dom"));
+
+var _RoomLabelItems = _interopRequireDefault(require("./RoomLabelItems"));
+
+var _parseData = require("./utils/parseData");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var ModelRoomLabelController = /*#__PURE__*/function () {
+  function ModelRoomLabelController(five) {
+    var _this = this;
+
+    _classCallCheck(this, ModelRoomLabelController);
+
+    _defineProperty(this, "enabled", true);
+
+    _defineProperty(this, "roomLabels", []);
+
+    _defineProperty(this, "container", document.createElement('div'));
+
+    _defineProperty(this, "onFiveModeChange", function (mode) {
+      if (mode !== 'Floorplan') {
+        _this.fiveModeEnabled = false;
+
+        _this.render();
+
+        return;
+      }
+
+      _this.five.once('initAnimationEnded', function () {
+        _this.fiveModeEnabled = _this.five.currentMode === 'Floorplan';
+
+        _this.render();
+      });
+    });
+
+    this.five = five;
+    this.fiveModeEnabled = this.five.currentMode === 'Floorplan'; // init container style
+
+    this.container.classList.add('model-room-label-plugin-container');
+    this.container.style.width = '100%';
+    this.container.style.height = '100%';
+    this.container.style.position = 'absolute';
+    this.container.style.left = '0';
+    this.container.style.top = '0'; // five lisenter
+
+    this.five.once('dispose', function () {
+      return _this.dispose();
+    });
+    this.five.on('modeChange', this.onFiveModeChange);
+    this.render();
+  }
+
+  _createClass(ModelRoomLabelController, [{
+    key: "dispose",
+    value: function dispose() {
+      this.five.off('modeChange', this.onFiveModeChange);
+      ReactDOM.unmountComponentAtNode(this.container);
+      this.container.remove();
+    }
+    /** 加载数据 */
+
+  }, {
+    key: "load",
+    value: function load(data) {
+      this.roomLabels = (0, _parseData.parseModelRoomLabelPluginData)(data);
+      this.render();
+    }
+    /** 设置插件容器 */
+
+  }, {
+    key: "appendTo",
+    value: function appendTo(wrapper) {
+      this.wrapper = wrapper;
+      wrapper.appendChild(this.container);
+      this.render();
+      return this;
+    }
+    /** 禁用插件功能
+     * @description
+     * - 如果当前正在展示中，会清除所有展示的 DOM
+     * - 如果当前未展示，即使后续 Five 状态满足展示要求，也不会展示
+     * */
+
+  }, {
+    key: "disable",
+    value: function disable() {
+      this.enabled = false;
+      this.render();
+      return this;
+    }
+    /** 启用插件功能
+     * @description
+     * - 如果当前符合展示条件，会立刻展示
+     * - 如果不符合展示条件，会等待 Five 状态满足条件后再展示
+     */
+
+  }, {
+    key: "enable",
+    value: function enable() {
+      this.enabled = true;
+      this.render();
+      return this;
+    }
+    /** 监听 Five Mode 变化
+     * @description
+     * Mode 不符合要求时，立刻消失，满足要求时，需要等待动画结束再展示
+     */
+
+  }, {
+    key: "render",
+    value: function render() {
+      if (!this.wrapper) return;
+      ReactDOM.render(this.enabled && this.fiveModeEnabled ? /*#__PURE__*/React.createElement(_RoomLabelItems["default"], {
+        five: this.five,
+        roomLabels: this.roomLabels
+      }) : /*#__PURE__*/React.createElement(React.Fragment, null), this.container);
+    }
+  }]);
+
+  return ModelRoomLabelController;
+}();
+
+exports.ModelRoomLabelController = ModelRoomLabelController;

package/plugins/ModelRoomLabelPlugin/RoomLabelItem.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Five } from '@realsee/five';
+import { RoomLabel } from './typings';
+declare const RefRoomLabelItem: React.ForwardRefExoticComponent<{
+    five: Five;
+    item: RoomLabel;
+} & React.RefAttributes<HTMLDivElement>>;
+export default RefRoomLabelItem;

package/plugins/ModelRoomLabelPlugin/RoomLabelItem.js

@@ -0,0 +1,48 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _px2rem = _interopRequireDefault(require("../../shared-utils/px2rem"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function RoomLabelItem(props, ref) {
+  var five = props.five;
+  var roomName = props.item.name;
+  var handleClick = React.useCallback(function () {
+    five.setState({
+      panoIndex: props.item.panoIndex,
+      mode: 'Panorama',
+      longitude: props.item.longitude
+    });
+  }, [props.five]);
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: handleClick,
+    ref: ref,
+    className: _style["default"].dynamic([["3619298579", [(0, _px2rem["default"])(roomName.length > 3 ? 8 : 10), (0, _px2rem["default"])(-64), (0, _px2rem["default"])(20), (0, _px2rem["default"])(32), (0, _px2rem["default"])(6), (0, _px2rem["default"])(-44), (0, _px2rem["default"])(48), (0, _px2rem["default"])(1)]]]) + " " + "room-guid-label-plugin__item"
+  }, /*#__PURE__*/React.createElement(_style["default"], {
+    id: "3619298579",
+    dynamic: [(0, _px2rem["default"])(roomName.length > 3 ? 8 : 10), (0, _px2rem["default"])(-64), (0, _px2rem["default"])(20), (0, _px2rem["default"])(32), (0, _px2rem["default"])(6), (0, _px2rem["default"])(-44), (0, _px2rem["default"])(48), (0, _px2rem["default"])(1)]
+  }, [".room-guid-label-plugin__item.__jsx-style-dynamic-selector{position:absolute;z-index:0;font-size:".concat((0, _px2rem["default"])(roomName.length > 3 ? 8 : 10), ";-webkit-transform:'';-ms-transform:'';transform:'';cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"), ".room-guid-label-plugin__item-text.__jsx-style-dynamic-selector{position:absolute;left:0;top:".concat((0, _px2rem["default"])(-64), ";-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:").concat((0, _px2rem["default"])(20), ";min-width:").concat((0, _px2rem["default"])(32), ";padding:0 ").concat((0, _px2rem["default"])(6), ";pointer-events:all;background:url('//vrlab-static.ljcdn.com/release/web/room-label-bg.23e9d038.png') no-repeat;background-size:100% 100%;white-space:nowrap;}"), ".room-guid-label-plugin__item-bar.__jsx-style-dynamic-selector{position:absolute;top:".concat((0, _px2rem["default"])(-44), ";height:").concat((0, _px2rem["default"])(48), ";width:").concat((0, _px2rem["default"])(1), ";background-image:linear-gradient(to bottom,rgba(255,255,255,1),rgba(255,255,255,0));}")]), /*#__PURE__*/React.createElement("span", {
+    className: _style["default"].dynamic([["3619298579", [(0, _px2rem["default"])(roomName.length > 3 ? 8 : 10), (0, _px2rem["default"])(-64), (0, _px2rem["default"])(20), (0, _px2rem["default"])(32), (0, _px2rem["default"])(6), (0, _px2rem["default"])(-44), (0, _px2rem["default"])(48), (0, _px2rem["default"])(1)]]]) + " " + "room-guid-label-plugin__item-text"
+  }, roomName), /*#__PURE__*/React.createElement("div", {
+    className: _style["default"].dynamic([["3619298579", [(0, _px2rem["default"])(roomName.length > 3 ? 8 : 10), (0, _px2rem["default"])(-64), (0, _px2rem["default"])(20), (0, _px2rem["default"])(32), (0, _px2rem["default"])(6), (0, _px2rem["default"])(-44), (0, _px2rem["default"])(48), (0, _px2rem["default"])(1)]]]) + " " + "room-guid-label-plugin__item-bar"
+  }));
+}
+
+var RefRoomLabelItem = /*#__PURE__*/React.forwardRef(RoomLabelItem);
+var _default = RefRoomLabelItem;
+exports["default"] = _default;

package/plugins/ModelRoomLabelPlugin/RoomLabelItems.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Five } from '@realsee/five';
+import { RoomLabel } from './typings';
+export default function RoomLabelItems(props: {
+    five: Five;
+    roomLabels: RoomLabel[];
+}): JSX.Element;

package/plugins/ModelRoomLabelPlugin/RoomLabelItems.js

@@ -0,0 +1,149 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = RoomLabelItems;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _three = require("three");
+
+var _RoomLabelItem = _interopRequireDefault(require("./RoomLabelItem"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct; } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function getLabelVisible(five, roomLabelItem) {
+  // 先看是不是在当前展示的楼层上
+  var isLabelInFloor = five.model.shownFloor === null || roomLabelItem.floorIndex === five.model.shownFloor;
+  if (!isLabelInFloor) return false; // 再看是不是被模型遮挡
+
+  var raycaster = new _three.Raycaster();
+  var cameraPosition = five.camera.position.clone();
+  var position = new _three.Vector3(roomLabelItem.position.x, roomLabelItem.position.y, roomLabelItem.position.z);
+  var vectorDistance = position.distanceTo(cameraPosition);
+  raycaster.set(cameraPosition.clone(), position.clone().sub(cameraPosition).normalize());
+
+  var _five$model$intersect = five.model.intersectRaycaster(raycaster),
+      _five$model$intersect2 = _slicedToArray(_five$model$intersect, 1),
+      intersection = _five$model$intersect2[0];
+
+  if (intersection && intersection.distance + 1 < vectorDistance) return false;
+  return true;
+}
+
+function getLabelTransform(five, roomLabelItem, containerWidth, containerHeight) {
+  var position = new _three.Vector3(roomLabelItem.position.x, roomLabelItem.position.y, roomLabelItem.position.z);
+  var mouse = position.clone().project(five.camera);
+  var xOffset = Math.ceil((mouse.x + 1) / 2 * containerWidth);
+  var yOffset = Math.ceil((-mouse.y + 1) / 2 * containerHeight);
+  return "translate(".concat(xOffset, "px, ").concat(yOffset, "px)");
+}
+
+function updateFormatData(five, labels, containerWidth, containerHeight) {
+  labels.forEach(function (roomLabelItem) {
+    // 计算是否可见，入股不可见，不会更新位置
+    roomLabelItem.visible = getLabelVisible(five, roomLabelItem);
+    if (!roomLabelItem.visible) return roomLabelItem; // 更新位置
+
+    roomLabelItem.transform = getLabelTransform(five, roomLabelItem, containerWidth, containerHeight);
+    return true;
+  });
+  labels.filter(function (_ref) {
+    var visible = _ref.visible;
+    return visible;
+  }).map(function (roomLabelItem) {
+    return {
+      roomLabelItem: roomLabelItem,
+      distance: _construct(_three.Vector3, _toConsumableArray(Object.values(roomLabelItem.position))).clone().distanceTo(five.camera.position)
+    };
+  }).sort(function (a, b) {
+    return a.distance - b.distance;
+  }).forEach(function (_ref2, index) {
+    var roomLabelItem = _ref2.roomLabelItem;
+    roomLabelItem.zIndex = index * 10;
+  });
+  return labels;
+}
+
+function RoomLabelItems(props) {
+  var five = props.five;
+  var itemRefs = React.useRef([]);
+  var contentRef = React.useRef(null);
+  var roomLabels = props.roomLabels;
+
+  function onFiveCameraDirectionUpdate() {
+    if (!contentRef.current) return;
+    updateFormatData(five, roomLabels, contentRef.current.clientWidth, contentRef.current.clientHeight).forEach(function (item, index) {
+      var ref = itemRefs.current[index];
+      if (!ref) return;
+
+      if (!item.visible) {
+        ref.style.opacity = '0';
+        ref.style.pointerEvents = 'none';
+        return;
+      }
+
+      ref.style.opacity = '1';
+      ref.style.pointerEvents = 'all';
+      ref.style.transform = item.transform;
+    });
+  }
+
+  React.useEffect(function () {
+    five.on('cameraDirectionUpdate', onFiveCameraDirectionUpdate);
+    onFiveCameraDirectionUpdate();
+    return function () {
+      five.off('cameraDirectionUpdate', onFiveCameraDirectionUpdate);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: contentRef,
+    className: "jsx-2859587460" + " " + "room-guid-label-plugin__content"
+  }, /*#__PURE__*/React.createElement(_style["default"], {
+    id: "2859587460"
+  }, [".room-guid-label-plugin__content.jsx-2859587460{width:100%;height:100%;position:relative;color:#fff;}"]), roomLabels.map(function (item) {
+    return /*#__PURE__*/React.createElement(_RoomLabelItem["default"], {
+      key: item.id,
+      item: item,
+      five: props.five,
+      ref: function ref(_ref3) {
+        return itemRefs.current.push(_ref3);
+      }
+    });
+  }));
+}

package/plugins/ModelRoomLabelPlugin/index.d.ts

@@ -0,0 +1,8 @@
+import { FivePlugin } from '@realsee/five';
+import { ModelRoomLabelController, ModelRoomLabelPluginParameters } from './Controller';
+export declare const ModelRoomLabelPlugin: FivePlugin<ModelRoomLabelPluginParameters, ModelRoomLabelPluginReturnType>;
+export default ModelRoomLabelPlugin;
+export type { ModelRoomLabelController } from './Controller';
+export type { ModelRoomLabelPluginData, RoomLabel } from './typings';
+export declare type ModelRoomLabelPluginReturnType = ModelRoomLabelController;
+export type { ModelRoomLabelPluginParameters } from './Controller';

package/plugins/ModelRoomLabelPlugin/index.js

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

package/plugins/ModelRoomLabelPlugin/typings.d.ts

@@ -0,0 +1,35 @@
+export declare type ModelRoomLabelPluginData = {
+    model_room_labels: Readonly<{
+        id: string;
+        name: string;
+        longitude: number;
+        pano_index: number;
+        floor_index: number;
+        position: {
+            x: number;
+            y: number;
+            z: number;
+        };
+    }>[];
+};
+export interface RoomLabel {
+    /** 房屋 ID */
+    readonly id: string;
+    /** 房屋名 */
+    readonly name: string;
+    /** 走到对应 panoIndex 时 five 的水平角度 */
+    readonly longitude: number;
+    /** 点击标签会走到的 panoIndex */
+    readonly panoIndex: number;
+    /** 所处楼层 */
+    readonly floorIndex: number;
+    /** 引导标签的三维坐标，一般是房屋中心点 */
+    readonly position: {
+        x: number;
+        y: number;
+        z: number;
+    };
+    zIndex: number;
+    visible: boolean;
+    transform: string;
+}

package/plugins/ModelRoomLabelPlugin/typings.js

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

package/plugins/ModelRoomLabelPlugin/utils/parseData.d.ts

@@ -0,0 +1,3 @@
+import { ModelRoomLabelPluginData, RoomLabel } from '../typings';
+/** @description 下划线转驼峰 */
+export declare function parseModelRoomLabelPluginData(data: ModelRoomLabelPluginData): RoomLabel[];

package/plugins/ModelRoomLabelPlugin/utils/parseData.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parseModelRoomLabelPluginData = parseModelRoomLabelPluginData;
+
+/** @description 下划线转驼峰 */
+function parseModelRoomLabelPluginData(data) {
+  return data.model_room_labels.map(function (_ref) {
+    var id = _ref.id,
+        pano_index = _ref.pano_index,
+        floor_index = _ref.floor_index,
+        name = _ref.name,
+        position = _ref.position,
+        longitude = _ref.longitude;
+    return {
+      id: id,
+      name: name,
+      position: position,
+      longitude: longitude,
+      panoIndex: pano_index,
+      floorIndex: floor_index,
+      zIndex: 0,
+      visible: false,
+      transform: ''
+    };
+  });
+}

package/plugins/PanoMaskSelectorPlugin/compare.d.ts

@@ -0,0 +1 @@
+export declare function compare(c1: THREE.Color, c2: THREE.Color, threshold?: number): boolean;

package/plugins/PanoMaskSelectorPlugin/compare.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.compare = compare;
+
+// 判断两个颜色是否相似
+function compare(c1, c2) {
+  var threshold = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.025;
+  var r = Math.abs(c1.r - c2.r);
+  var g = Math.abs(c1.g - c2.g);
+  var b = Math.abs(c1.b - c2.b);
+  return r < threshold && g < threshold && b < threshold;
+}

package/plugins/PanoMaskSelectorPlugin/createBox.d.ts

@@ -0,0 +1,7 @@
+import * as THREE from 'three';
+import { WorkObserver } from '@realsee/five';
+export declare function createBox(textures: THREE.Texture[], observer: WorkObserver, _config?: {
+    opacity?: boolean;
+    maskColor?: THREE.Color;
+    thickness?: number;
+}): THREE.Mesh<THREE.BoxBufferGeometry, THREE.ShaderMaterial[]>;

package/plugins/PanoMaskSelectorPlugin/createBox.js

@@ -0,0 +1,61 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createBox = createBox;
+
+var THREE = _interopRequireWildcard(require("three"));
+
+var _vertexShader = require("./vertexShader");
+
+var _fragmentShader = require("./fragmentShader");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function createBox(textures, observer, _config) {
+  var config = Object.assign({
+    opacity: true,
+    thickness: 0.005,
+    maskColor: new THREE.Color(1, 0, 0)
+  }, _config || {});
+  var materials = textures.map(function (texture) {
+    return new THREE.ShaderMaterial({
+      uniforms: {
+        map: {
+          value: texture
+        },
+        enable: {
+          value: 1
+        },
+        opacity: {
+          value: config.opacity ? 0.0 : 1
+        },
+        selectedColor: {
+          value: new THREE.Color(0, 0, 0)
+        },
+        maskColor: {
+          value: config.maskColor
+        },
+        thickness: {
+          value: config.thickness
+        }
+      },
+      vertexShader: _vertexShader.vertexShader,
+      fragmentShader: _fragmentShader.fragmentShader,
+      transparent: true,
+      depthTest: false,
+      side: THREE.DoubleSide
+    });
+  });
+  var boxBufferGeometry = new THREE.BoxBufferGeometry(1, 1, 1);
+  var box = new THREE.Mesh(boxBufferGeometry, materials);
+  box.geometry.scale(-1, 1, 1);
+  box.position.set(observer.position.x, observer.position.y, observer.position.z);
+  box.quaternion.multiply(observer.quaternion);
+  return box;
+}

package/plugins/PanoMaskSelectorPlugin/createTextures.d.ts

@@ -0,0 +1,3 @@
+import * as THREE from 'three';
+import { WorkImage } from '@realsee/five';
+export declare function createTextures(imgs: Omit<WorkImage, 'depth' | 'tiles'>): THREE.Texture[];

package/plugins/PanoMaskSelectorPlugin/createTextures.js

@@ -0,0 +1,29 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createTextures = createTextures;
+
+var THREE = _interopRequireWildcard(require("three"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function createTextures(imgs) {
+  var loader = new THREE.ImageLoader();
+  var keys = ['up', 'down', 'right', 'left', 'front', 'back'];
+  var textures = keys.map(function (key) {
+    var url = imgs[key];
+    var texture = new THREE.Texture();
+    loader.load(url, function (image) {
+      texture.image = image;
+      texture.needsUpdate = true;
+    });
+    return texture;
+  });
+  return textures;
+}

package/plugins/PanoMaskSelectorPlugin/fragmentShader.d.ts

@@ -0,0 +1 @@
+export declare const fragmentShader = "\nconst float PI = 3.1415926535897932384626433832795;\nuniform int enable;\nuniform sampler2D map;\nvarying vec2 vUv;\n\nuniform vec3 selectedColor;\nuniform vec3 maskColor;\nuniform float opacity;\nuniform float thickness;\n\n\n// \u5224\u65AD\u4E24\u4E2A\u989C\u8272\u662F\u5426\u76F8\u4F3C\nbool compare(vec3 c1, vec3 c2, float threshold) {\n  // \u8272\u503C\u8BEF\u5DEE 0.05\n  float diff = threshold;\n\n  float r = abs(c1.x - c2.x);\n  float g = abs(c1.y - c2.y);\n  float b = abs(c1.z - c2.z);\n\n  return r < diff && g < diff && b < diff;\n}\n\nvoid main(void) {\n  vec3 color = texture2D(map, vUv).xyz;\n  float alpha = texture2D(map, vUv).a;\n\n  gl_FragColor = vec4(color, opacity);\n\n  // \u5F00\u5173\n  if (enable != 1) {\n    gl_FragColor = vec4(color, opacity);\n    return;\n  }\n\n  // \u9ED8\u8BA4\u503C\uFF1A\u672A\u63D0\u4F9B \u9009\u4E2D\u8272\u503C\n  if (selectedColor.x == 0.0 && selectedColor.y == 0.0 && selectedColor.z == 0.0) {\n    gl_FragColor = vec4(color, opacity);\n    return;\n  }\n\n  bool similar = compare(color, selectedColor, 0.025);\n\n  // \u4E0D\u76F8\u4F3C\n  if (similar == false) {\n    gl_FragColor = vec4(color, opacity);\n    return;\n  }\n\n  // \u5BF9\u6BD4\u534A\u5F84\u5E45\u5EA6\n  float offset1 = thickness;\n  float offset2 = offset1 * sin(PI/4.0);\n\n  vec3 top = texture2D(map, vec2(vUv.x, vUv.y + offset1)).xyz;\n  vec3 right = texture2D(map, vec2(vUv.x + offset1, vUv.y)).xyz;\n  vec3 bottom = texture2D(map, vec2(vUv.x, vUv.y - offset1)).xyz;\n  vec3 left = texture2D(map, vec2(vUv.x - offset1, vUv.y)).xyz;\n  \n  vec3 topRight = texture2D(map, vec2(vUv.x + offset2, vUv.y + offset2)).xyz;\n  vec3 rightBottom = texture2D(map, vec2(vUv.x + offset2, vUv.y - offset2)).xyz;\n  vec3 bottomLeft = texture2D(map, vec2(vUv.x - offset2, vUv.y - offset2)).xyz;\n  vec3 leftTop = texture2D(map, vec2(vUv.x - offset2, vUv.y + offset2)).xyz;\n\n  float threshold = 0.0025;\n  bool a1 = compare(color, top, threshold);\n  bool b1 = compare(color, right, threshold);\n  bool c1 = compare(color, bottom, threshold);\n  bool d1 = compare(color, left, threshold);\n\n\n  bool a2 = compare(color, topRight, threshold);\n  bool b2 = compare(color, rightBottom, threshold);\n  bool c2 = compare(color, bottomLeft, threshold);\n  bool d2 = compare(color, leftTop, threshold);\n\n  if (a1 == true && b1 == true && c1 == true && d1 == true && a2 == true && b2 == true && c2 == true && d2 == true) {\n    gl_FragColor = vec4(color, opacity);\n    return;\n  }\n\n  gl_FragColor =  vec4(maskColor.x, maskColor.y, maskColor.z, 1.0);\n  // gl_FragColor =  vec4(154.0 / 255.0, 205.0 / 255.0, 50.0 / 255.0, 1.0) ;\n  // gl_FragColor =  vec4(139.0 / 255.0, 0.0 / 255.0, 0.0 / 255.0, 1.0) ;\n  // gl_FragColor =  vec4(255.0 / 255.0, 235.0 / 255.0, 59.0 / 255.0, 1.0) ;\n\n}\n";

package/plugins/PanoMaskSelectorPlugin/fragmentShader.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fragmentShader = void 0;
+var fragmentShader = "\nconst float PI = 3.1415926535897932384626433832795;\nuniform int enable;\nuniform sampler2D map;\nvarying vec2 vUv;\n\nuniform vec3 selectedColor;\nuniform vec3 maskColor;\nuniform float opacity;\nuniform float thickness;\n\n\n// \u5224\u65AD\u4E24\u4E2A\u989C\u8272\u662F\u5426\u76F8\u4F3C\nbool compare(vec3 c1, vec3 c2, float threshold) {\n  // \u8272\u503C\u8BEF\u5DEE 0.05\n  float diff = threshold;\n\n  float r = abs(c1.x - c2.x);\n  float g = abs(c1.y - c2.y);\n  float b = abs(c1.z - c2.z);\n\n  return r < diff && g < diff && b < diff;\n}\n\nvoid main(void) {\n  vec3 color = texture2D(map, vUv).xyz;\n  float alpha = texture2D(map, vUv).a;\n\n  gl_FragColor = vec4(color, opacity);\n\n  // \u5F00\u5173\n  if (enable != 1) {\n    gl_FragColor = vec4(color, opacity);\n    return;\n  }\n\n  // \u9ED8\u8BA4\u503C\uFF1A\u672A\u63D0\u4F9B \u9009\u4E2D\u8272\u503C\n  if (selectedColor.x == 0.0 && selectedColor.y == 0.0 && selectedColor.z == 0.0) {\n    gl_FragColor = vec4(color, opacity);\n    return;\n  }\n\n  bool similar = compare(color, selectedColor, 0.025);\n\n  // \u4E0D\u76F8\u4F3C\n  if (similar == false) {\n    gl_FragColor = vec4(color, opacity);\n    return;\n  }\n\n  // \u5BF9\u6BD4\u534A\u5F84\u5E45\u5EA6\n  float offset1 = thickness;\n  float offset2 = offset1 * sin(PI/4.0);\n\n  vec3 top = texture2D(map, vec2(vUv.x, vUv.y + offset1)).xyz;\n  vec3 right = texture2D(map, vec2(vUv.x + offset1, vUv.y)).xyz;\n  vec3 bottom = texture2D(map, vec2(vUv.x, vUv.y - offset1)).xyz;\n  vec3 left = texture2D(map, vec2(vUv.x - offset1, vUv.y)).xyz;\n  \n  vec3 topRight = texture2D(map, vec2(vUv.x + offset2, vUv.y + offset2)).xyz;\n  vec3 rightBottom = texture2D(map, vec2(vUv.x + offset2, vUv.y - offset2)).xyz;\n  vec3 bottomLeft = texture2D(map, vec2(vUv.x - offset2, vUv.y - offset2)).xyz;\n  vec3 leftTop = texture2D(map, vec2(vUv.x - offset2, vUv.y + offset2)).xyz;\n\n  float threshold = 0.0025;\n  bool a1 = compare(color, top, threshold);\n  bool b1 = compare(color, right, threshold);\n  bool c1 = compare(color, bottom, threshold);\n  bool d1 = compare(color, left, threshold);\n\n\n  bool a2 = compare(color, topRight, threshold);\n  bool b2 = compare(color, rightBottom, threshold);\n  bool c2 = compare(color, bottomLeft, threshold);\n  bool d2 = compare(color, leftTop, threshold);\n\n  if (a1 == true && b1 == true && c1 == true && d1 == true && a2 == true && b2 == true && c2 == true && d2 == true) {\n    gl_FragColor = vec4(color, opacity);\n    return;\n  }\n\n  gl_FragColor =  vec4(maskColor.x, maskColor.y, maskColor.z, 1.0);\n  // gl_FragColor =  vec4(154.0 / 255.0, 205.0 / 255.0, 50.0 / 255.0, 1.0) ;\n  // gl_FragColor =  vec4(139.0 / 255.0, 0.0 / 255.0, 0.0 / 255.0, 1.0) ;\n  // gl_FragColor =  vec4(255.0 / 255.0, 235.0 / 255.0, 59.0 / 255.0, 1.0) ;\n\n}\n";
+exports.fragmentShader = fragmentShader;