@realsee/dnalogel 0.1.0

package/plugins/floorplan/ModelFloorplanPlugin/utils/correctFiveState.d.ts

@@ -0,0 +1,14 @@
+import { Five } from '@realsee/five';
+export interface ShowState {
+    latitude: number;
+    longitude: number;
+    fov: number;
+}
+/** 判断当前状态是否可以展示户型图 */
+export declare function checkShowState(five: Five, showState: ShowState): boolean;
+/** 更改 Five 状态到展示户型图的状态
+ * 1. 判断状态不符合时，会纠正到正确的状态
+ * 2. 内置了相应的动画时间计算
+ * 3. 纠正成功会返回 true，失败「可能会被用户行为中断」会返回 false
+ */
+export default function correctFiveState(five: Five, showState: ShowState, userAction?: boolean): Promise<void>;

package/plugins/floorplan/ModelFloorplanPlugin/utils/correctFiveState.js

@@ -0,0 +1,162 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkShowState = checkShowState;
+exports["default"] = correctFiveState;
+
+var _five = require("@realsee/five");
+
+var _changeMode = _interopRequireDefault(require("../../../../shared-utils/five/changeMode"));
+
+var _constant = require("./constant");
+
+var _to = _interopRequireDefault(require("../../../../shared-utils/to"));
+
+var _nearlyEqual = _interopRequireDefault(require("../../../../shared-utils/nearlyEqual"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 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 checkShowState(five, showState) {
+  if (five.currentMode !== _five.Five.Mode.Floorplan) return false;
+  var latitude = showState.latitude,
+      longitude = showState.longitude,
+      fov = showState.fov;
+
+  var _five$getCurrentState = five.getCurrentState(),
+      _latitude = _five$getCurrentState.latitude,
+      _longitude = _five$getCurrentState.longitude;
+
+  var _fov = five.camera.fov;
+  if ((0, _nearlyEqual["default"])(latitude, _latitude, 1) && (0, _nearlyEqual["default"])(longitude, _longitude, 1) && fov === _fov) return true;
+  return false;
+}
+/** 更改 Five 状态到展示户型图的状态
+ * 1. 判断状态不符合时，会纠正到正确的状态
+ * 2. 内置了相应的动画时间计算
+ * 3. 纠正成功会返回 true，失败「可能会被用户行为中断」会返回 false
+ */
+
+
+function correctFiveState(_x, _x2) {
+  return _correctFiveState.apply(this, arguments);
+}
+
+function _correctFiveState() {
+  _correctFiveState = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(five, showState) {
+    var userAction,
+        result,
+        _yield$to,
+        _yield$to2,
+        changeModeError,
+        _result,
+        _five$getCurrentState2,
+        latitude,
+        longitude,
+        fov,
+        time,
+        _yield$to3,
+        _yield$to4,
+        updateCameraError,
+        _args = arguments;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            userAction = _args.length > 2 && _args[2] !== undefined ? _args[2] : true;
+            // 当前已满足状态，不需要变更
+            result = checkShowState(five, showState);
+
+            if (!(result === true)) {
+              _context.next = 4;
+              break;
+            }
+
+            return _context.abrupt("return");
+
+          case 4:
+            if (!(five.currentMode !== _five.Five.Mode.Floorplan)) {
+              _context.next = 16;
+              break;
+            }
+
+            _context.next = 7;
+            return (0, _to["default"])((0, _changeMode["default"])(five, _five.Five.Mode.Floorplan, showState, undefined, userAction));
+
+          case 7:
+            _yield$to = _context.sent;
+            _yield$to2 = _slicedToArray(_yield$to, 1);
+            changeModeError = _yield$to2[0];
+
+            if (!changeModeError) {
+              _context.next = 12;
+              break;
+            }
+
+            throw changeModeError;
+
+          case 12:
+            // changeMode 是异步行为，可能会被打断，需要在结束后加一次判断
+            _result = checkShowState(five, showState);
+
+            if (!(_result === false)) {
+              _context.next = 15;
+              break;
+            }
+
+            throw new Error(_constant.FloorplanErrorType.ChangeModeError);
+
+          case 15:
+            return _context.abrupt("return");
+
+          case 16:
+            // 纠正相机状态
+            // 根据 latitude、longitude、fov 计算动画时间，最多 1s
+            _five$getCurrentState2 = five.getCurrentState(), latitude = _five$getCurrentState2.latitude, longitude = _five$getCurrentState2.longitude, fov = _five$getCurrentState2.fov;
+            time = Math.min(1000, Math.max(200, Math.abs(latitude - Math.PI / 2) * 1000, (longitude > Math.PI ? 2 * Math.PI - longitude : longitude) * 500, Math.abs(fov - showState.fov) * 10));
+            _context.next = 20;
+            return (0, _to["default"])(five.updateCamera(showState, time, userAction));
+
+          case 20:
+            _yield$to3 = _context.sent;
+            _yield$to4 = _slicedToArray(_yield$to3, 1);
+            updateCameraError = _yield$to4[0];
+
+            if (!updateCameraError) {
+              _context.next = 25;
+              break;
+            }
+
+            throw new Error(_constant.FloorplanErrorType.UpdateCameraError);
+
+          case 25:
+            return _context.abrupt("return");
+
+          case 26:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _correctFiveState.apply(this, arguments);
+}

package/plugins/floorplan/PanoFloorplanRadarPlugin/Content/Camera.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Five } from '@realsee/five';
+import { FloorplanData } from '../../typings/floorplanData';
+declare const _default: React.NamedExoticComponent<{
+    five: Five;
+    width: number;
+    height: number;
+    floorplanData: FloorplanData;
+    cameraImage?: {
+        style: React.CSSProperties;
+    } | undefined;
+}>;
+export default _default;

package/plugins/floorplan/PanoFloorplanRadarPlugin/Content/Camera.js

@@ -0,0 +1,91 @@
+"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 React = _interopRequireWildcard(require("react"));
+
+var _throttle = _interopRequireDefault(require("../../../../shared-utils/throttle"));
+
+var _Camera = require("./Camera.style");
+
+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; }
+
+var _default = /*#__PURE__*/React.memo(function Camera(props) {
+  var _props$cameraImage;
+
+  var getCameraPositionTransform = function getCameraPositionTransform(panoIndex) {
+    var observers = props.floorplanData.observers;
+    var observer = observers[panoIndex];
+    var left = Math.floor(observer.positionInImage.x * props.width);
+    var top = Math.floor(observer.positionInImage.y * props.height);
+    return "translate(".concat(left, "px, ").concat(top, "px)");
+  };
+
+  var getCameraRotationTransform = function getCameraRotationTransform() {
+    var _five$getCurrentState = five.getCurrentState(),
+        longitude = _five$getCurrentState.longitude; // 为什么要加 45 ==> 因为 UI 给的图初始角度是 -45
+
+
+    var rotate = Math.floor(longitude / Math.PI * 180) * -1 + 45;
+    return "rotate(".concat(rotate, "deg)");
+  };
+
+  var changePosition = function changePosition(panoIndex) {
+    if (!cameraPositionDomRef.current) return;
+    cameraPositionDomRef.current.style.transform = getCameraPositionTransform(panoIndex);
+  };
+
+  var changeRotate = (0, _throttle["default"])(function () {
+    if (!cameraRotateDomRef.current) return;
+    cameraRotateDomRef.current.style.transform = getCameraRotationTransform();
+  }, 1000 / 60);
+  var five = props.five;
+  var cameraPositionDomRef = React.useRef(null);
+  var cameraRotateDomRef = React.useRef(null);
+  var originPositionStyle = {
+    transform: getCameraPositionTransform(five.getCurrentState().panoIndex)
+  };
+  var originRotationStyle = {
+    transform: getCameraRotationTransform()
+  };
+  React.useEffect(function () {
+    var onModelLoaded = function onModelLoaded() {
+      changePosition(five.getCurrentState().panoIndex);
+      changeRotate();
+    };
+
+    changePosition(five.getCurrentState().panoIndex);
+    changeRotate();
+    five.on('panoWillArrive', changePosition);
+    five.on('cameraUpdate', changeRotate);
+    five.on('modelLoaded', onModelLoaded);
+    return function () {
+      five.off('panoWillArrive', changePosition);
+      five.off('cameraUpdate', changeRotate);
+      five.off('modelLoaded', onModelLoaded);
+    };
+  });
+  var rotateBaseStyle = Object.assign({}, _Camera.rotateStyle, (_props$cameraImage = props.cameraImage) === null || _props$cameraImage === void 0 ? void 0 : _props$cameraImage.style);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: cameraPositionDomRef,
+    style: Object.assign({}, _Camera.positionStyle, originPositionStyle)
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: cameraRotateDomRef,
+    style: Object.assign({}, rotateBaseStyle, originRotationStyle)
+  }));
+}, function (prev, next) {
+  return Object.keys(prev).every(function (key) {
+    return next[key] === prev[key];
+  });
+});
+
+exports["default"] = _default;

package/plugins/floorplan/PanoFloorplanRadarPlugin/Content/Camera.style.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const positionStyle: React.CSSProperties;
+export declare const rotateStyle: React.CSSProperties;

package/plugins/floorplan/PanoFloorplanRadarPlugin/Content/Camera.style.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rotateStyle = exports.positionStyle = void 0;
+
+var _px2rem = _interopRequireDefault(require("../../../../shared-utils/px2rem"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var positionStyle = {
+  position: 'absolute',
+  left: '0',
+  top: '0',
+  width: '0',
+  height: '0',
+  transform: 'none',
+  pointerEvents: 'none',
+  transition: 'transform 1s linear'
+};
+exports.positionStyle = positionStyle;
+var rotateStyle = {
+  position: 'absolute',
+  left: "".concat((0, _px2rem["default"])(-15)),
+  top: "".concat((0, _px2rem["default"])(-15)),
+  width: "".concat((0, _px2rem["default"])(17)),
+  height: "".concat((0, _px2rem["default"])(17)),
+  backgroundSize: '100%',
+  backgroundRepeat: 'no-repeat',
+  transformOrigin: "".concat((0, _px2rem["default"])(15), " ").concat((0, _px2rem["default"])(15)),
+  transform: 'rotate(45deg)',
+  backgroundImage: "url('//vrlab-static.ljcdn.com/release/web/default-sidemap-camera.5e0b9a1a.png')"
+};
+exports.rotateStyle = rotateStyle;

package/plugins/floorplan/PanoFloorplanRadarPlugin/Content/NowFloor/ExtraObjects.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { FloorplanExtraObject } from '../../../typings/floorplanData';
+export declare function ExtraObjects(props: {
+    extraObjects: FloorplanExtraObject[];
+}): JSX.Element;

package/plugins/floorplan/PanoFloorplanRadarPlugin/Content/NowFloor/ExtraObjects.js

@@ -0,0 +1,50 @@
+"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.ExtraObjects = ExtraObjects;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _px2rem = _interopRequireDefault(require("../../../../../shared-utils/px2rem"));
+
+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 ExtraObjects(props) {
+  var containerStyle = {
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    top: '0',
+    left: '0',
+    pointerEvents: 'none'
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: containerStyle
+  }, props.extraObjects.map(function (extraObject) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: extraObject.id,
+      style: {
+        width: 0,
+        height: 0,
+        position: 'absolute',
+        top: extraObject.positionInImage.y * 100 + '%',
+        left: extraObject.positionInImage.x * 100 + '%'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: "".concat((0, _px2rem["default"])(extraObject.icon.width)),
+        height: "".concat((0, _px2rem["default"])(extraObject.icon.height)),
+        backgroundImage: "url(".concat(extraObject.icon.url, ")"),
+        transform: 'translate(-50%, -50%)'
+      }
+    }));
+  }));
+}

package/plugins/floorplan/PanoFloorplanRadarPlugin/Content/NowFloor/RoomHighlight.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Five } from '@realsee/five';
+import { FloorplanData } from '../../../typings/floorplanData';
+export default function RoomHighlight(props: {
+    five: Five;
+    pxmm: number;
+    floorIndex: number;
+    floorplanData: FloorplanData;
+}): JSX.Element;

package/plugins/floorplan/PanoFloorplanRadarPlugin/Content/NowFloor/RoomHighlight.js

@@ -0,0 +1,102 @@
+"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"] = RoomHighlight;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _three = require("three");
+
+var _formatPosition = _interopRequireWildcard(require("../../../utils/formatPosition"));
+
+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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function RoomHighlight(props) {
+  if (!props.five.work || !props.five.model) return /*#__PURE__*/React.createElement(React.Fragment, null);
+  var nowFloorData = props.floorplanData.floorDatas[props.floorIndex];
+  var contentDomRef = React.useRef(null);
+  var floorplanObservers = props.floorplanData.observers;
+
+  var handleClick = function handleClick(e) {
+    if (!contentDomRef.current) return;
+    var boundingClient = contentDomRef.current.getBoundingClientRect(); // 注意 React 对事件做了代理，clientX 和 clientY 不再相对于原 DOM，而是 document
+
+    var mouseVector = new _three.Vector2(e.clientX, e.clientY);
+    var contentOffset = new _three.Vector2(boundingClient.left, boundingClient.top); // 相当于原生 mouseEvent 的 clientX clientY
+
+    var mouseOriginVector = mouseVector.clone().sub(contentOffset);
+    var mouseOffsetVector = new _three.Vector2(mouseOriginVector.x / contentDomRef.current.clientWidth, mouseOriginVector.y / contentDomRef.current.clientHeight);
+    var closestPoint = floorplanObservers.filter(function (observer) {
+      return observer.floorIndex === props.floorIndex;
+    }).sort(function (ob1, ob2) {
+      var position1 = new _three.Vector2(ob1.positionInImage.x, ob1.positionInImage.y);
+      var position2 = new _three.Vector2(ob2.positionInImage.x, ob2.positionInImage.y);
+      return position1.distanceTo(mouseOffsetVector) - position2.distanceTo(mouseOffsetVector);
+    })[0];
+    props.five.moveToPano(closestPoint.index);
+  };
+
+  var highlightStyle = {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    pointerEvents: 'all'
+  };
+  var svgStyle = {
+    width: '100%',
+    height: '100%',
+    overflow: 'visible'
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    ref: contentDomRef,
+    className: "floorplan-plugin__room-highlight",
+    style: highlightStyle,
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement("svg", {
+    style: svgStyle
+  }, nowFloorData.rooms.map(function (room) {
+    return /*#__PURE__*/React.createElement(Room, _extends({
+      key: room.id
+    }, props, {
+      data: room
+    }));
+  })));
+}
+
+function Room(props) {
+  var bounding = props.floorplanData.bounding;
+
+  var _pathD = (0, _formatPosition.pathD)(props.data.path, {
+    needZ: true,
+    format: function format(vector) {
+      return (0, _formatPosition["default"])(vector, props.pxmm, bounding);
+    }
+  });
+
+  var pathElement = React.useRef(null);
+
+  var handleMouseOver = function handleMouseOver() {
+    pathElement.current && (pathElement.current.style.opacity = '0.1');
+  };
+
+  var handleMouseOut = function handleMouseOut() {
+    pathElement.current && (pathElement.current.style.opacity = '0');
+  };
+
+  return /*#__PURE__*/React.createElement("path", {
+    ref: pathElement,
+    d: _pathD,
+    fill: "#000",
+    opacity: 0,
+    onMouseOver: handleMouseOver,
+    onMouseOut: handleMouseOut
+  });
+}

package/plugins/floorplan/PanoFloorplanRadarPlugin/Content/NowFloor/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Five } from '@realsee/five';
+import { FloorplanData, FloorplanExtraObject } from '../../../typings/floorplanData';
+export default function NowFloor(props: {
+    five: Five;
+    pxmm: number;
+    floorIndex: number;
+    hoverEnable?: boolean;
+    extraObjects?: FloorplanExtraObject[];
+    floorplanData: FloorplanData;
+}): JSX.Element;

package/plugins/floorplan/PanoFloorplanRadarPlugin/Content/NowFloor/index.js

@@ -0,0 +1,42 @@
+"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"] = NowFloor;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _RoomHighlight = _interopRequireDefault(require("./RoomHighlight"));
+
+var _FloorplanImage = _interopRequireDefault(require("../../../components/FloorplanImage"));
+
+var _ExtraObjects = require("./ExtraObjects");
+
+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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function NowFloor(props) {
+  var _props$extraObjects;
+
+  var nowFloorStyle = {
+    position: 'relative',
+    width: '100%',
+    height: '100%'
+  };
+  var nowFloorExtraObjects = props === null || props === void 0 ? void 0 : (_props$extraObjects = props.extraObjects) === null || _props$extraObjects === void 0 ? void 0 : _props$extraObjects.filter(function (object) {
+    return object.floorIndex === props.floorIndex;
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    style: nowFloorStyle
+  }, /*#__PURE__*/React.createElement(_FloorplanImage["default"], props), nowFloorExtraObjects && /*#__PURE__*/React.createElement(_ExtraObjects.ExtraObjects, {
+    extraObjects: nowFloorExtraObjects
+  }), props.hoverEnable && /*#__PURE__*/React.createElement(_RoomHighlight["default"], _extends({}, props, props.floorplanData)));
+}

package/plugins/floorplan/PanoFloorplanRadarPlugin/Content/index.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { FloorplanData, FloorplanExtraObject } from '../../typings/floorplanData';
+import type { Five } from '@realsee/five';
+export interface Props {
+    five: Five;
+    pxmm: number;
+    width: number;
+    height: number;
+    hoverEnable?: boolean;
+    floorplanData: FloorplanData;
+    extraObjects?: FloorplanExtraObject[];
+    cameraImage?: {
+        style: React.CSSProperties;
+    };
+}
+declare const _default: React.NamedExoticComponent<Props>;
+export default _default;

package/plugins/floorplan/PanoFloorplanRadarPlugin/Content/index.js

@@ -0,0 +1,75 @@
+"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 _Camera = _interopRequireDefault(require("./Camera"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _NowFloor = _interopRequireDefault(require("./NowFloor"));
+
+var _index = require("./index.style");
+
+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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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 _default = /*#__PURE__*/React.memo(function Content(props) {
+  if (!props.floorplanData) return null;
+  var five = props.five;
+  var panoIndex = five.getCurrentState().panoIndex;
+  var observers = five.work.observers;
+
+  var _React$useState = React.useState(observers[panoIndex].floorIndex),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      floorIndex = _React$useState2[0],
+      changeFloorIndex = _React$useState2[1];
+
+  var sizeStyle = {
+    width: props.width + 'px',
+    height: props.height + 'px'
+  };
+
+  var handlePanoArrived = function handlePanoArrived(panoIndex) {
+    changeFloorIndex(observers[panoIndex].floorIndex);
+  };
+
+  React.useEffect(function () {
+    five.on('panoArrived', handlePanoArrived);
+    return function () {
+      five.off('panoArrived', handlePanoArrived);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    style: Object.assign({}, _index.contentStyle, sizeStyle)
+  }, /*#__PURE__*/React.createElement(_NowFloor["default"], _extends({}, props, {
+    floorIndex: floorIndex
+  })), /*#__PURE__*/React.createElement(_Camera["default"], props));
+}, function (prev, next) {
+  return Object.keys(prev).every(function (key) {
+    return next[key] === prev[key];
+  });
+});
+
+exports["default"] = _default;

package/plugins/floorplan/PanoFloorplanRadarPlugin/Content/index.style.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const contentStyle: React.CSSProperties;