@realsee/dnalogel 0.1.1 → 0.1.5

package/plugins/ModelRoomLabelPlugin/Controller.js

@@ -0,0 +1,153 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.object.define-property.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModelRoomLabelController = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var ReactDOM = _interopRequireWildcard(require("react-dom"));
+
+var _RoomLabelItems = _interopRequireDefault(require("./RoomLabelItems"));
+
+var _parseData = require("./utils/parseData");
+
+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 ModelRoomLabelController = /*#__PURE__*/function () {
+  function ModelRoomLabelController(five) {
+    var _this = this;
+
+    (0, _classCallCheck2["default"])(this, ModelRoomLabelController);
+    (0, _defineProperty2["default"])(this, "enabled", true);
+    (0, _defineProperty2["default"])(this, "roomLabels", []);
+    (0, _defineProperty2["default"])(this, "container", document.createElement('div'));
+    (0, _defineProperty2["default"])(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();
+  }
+
+  (0, _createClass2["default"])(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,66 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.object.define-property.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+require("core-js/modules/es.function.name.js");
+
+require("core-js/modules/es.array.concat.js");
+
+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 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,159 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.object.define-property.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = RoomLabelItems;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _construct2 = _interopRequireDefault(require("@babel/runtime/helpers/construct"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+require("core-js/modules/es.string.sub.js");
+
+require("core-js/modules/es.array.concat.js");
+
+require("core-js/modules/es.array.for-each.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.array.sort.js");
+
+require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.object.values.js");
+
+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 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 = (0, _slicedToArray2["default"])(_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: (0, _construct2["default"])(_three.Vector3, (0, _toConsumableArray2["default"])(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,18 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+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,7 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+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,35 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parseModelRoomLabelPluginData = parseModelRoomLabelPluginData;
+
+require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.function.name.js");
+
+/** @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: ''
+    };
+  });
+}