@realsee/dnalogel 0.1.4 → 0.1.7-alpha.3

package/plugins/floorplan/ModelFloorplanPlugin/components/Compass.js

@@ -1,6 +1,22 @@
 "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); }
+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
@@ -11,8 +27,6 @@ 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; }
@@ -24,11 +38,11 @@ function Compass(props) {
   if (!northRad) return null;
   var rotate = rad2Deg(northRad);
   var compassStyle = {
-    width: "".concat((0, _px2rem["default"])(231)),
-    height: "".concat((0, _px2rem["default"])(41)),
+    width: (0, _px2rem["default"])(231),
+    height: (0, _px2rem["default"])(41),
     position: 'absolute',
     left: '50%',
-    top: "".concat((0, _px2rem["default"])(-46)),
+    top: (0, _px2rem["default"])(-46),
     willChange: 'opacity',
     transformOrigin: "center ".concat((0, _px2rem["default"])(184)),
     transform: "translateX(-50%) translateZ(10px) rotate(".concat(-rotate + 90, "deg)")
@@ -46,11 +60,11 @@ function Compass(props) {
   var textStyle = {
     position: 'absolute',
     left: '50%',
-    top: "".concat((0, _px2rem["default"])(15)),
+    top: (0, _px2rem["default"])(15),
     transform: 'translateX(-50%)',
     opacity: '.2',
     fontWeight: 'bold',
-    fontSize: "".concat((0, _px2rem["default"])(10)),
+    fontSize: (0, _px2rem["default"])(10),
     color: '#fff'
   };
   return /*#__PURE__*/React.createElement("div", {

package/plugins/floorplan/ModelFloorplanPlugin/components/NowFloor/RoomHighlight.js

@@ -1,12 +1,38 @@
 "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); }
+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"] = RoomHighlight;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+require("core-js/modules/es.string.sub.js");
+
+require("core-js/modules/es.array.sort.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.array.map.js");
+
 var React = _interopRequireWildcard(require("react"));
 
 var _three = require("three");
@@ -17,8 +43,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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];
@@ -66,7 +90,7 @@ function RoomHighlight(props) {
   }, /*#__PURE__*/React.createElement("svg", {
     style: svgStyle
   }, nowFloorData.rooms.map(function (room) {
-    return /*#__PURE__*/React.createElement(Room, _extends({
+    return /*#__PURE__*/React.createElement(Room, (0, _extends2["default"])({
       key: room.id
     }, props, {
       data: room

package/plugins/floorplan/ModelFloorplanPlugin/components/NowFloor/RoomLabels.js

@@ -1,6 +1,22 @@
 "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); }
+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
@@ -8,12 +24,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.RoomLabel = RoomLabel;
 exports["default"] = RoomLabels;
 
+require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.number.to-fixed.js");
+
+require("core-js/modules/es.function.name.js");
+
 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; }
@@ -60,8 +80,8 @@ function RoomLabel(props) {
     display: 'flex',
     flexFlow: 'column',
     alignItems: 'center',
-    fontSize: "".concat((0, _px2rem["default"])(10)),
-    lineHeight: "".concat((0, _px2rem["default"])(15)),
+    fontSize: (0, _px2rem["default"])(10),
+    lineHeight: (0, _px2rem["default"])(15),
     color: '#fff',
     transform: 'translate(-50%, -50%)',
     whiteSpace: 'nowrap'

package/plugins/floorplan/ModelFloorplanPlugin/components/NowFloor/RoomMaterial.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { FloorplanData, FloorplanRoomItem } from '../../../typings/floorplanData';
+/** 为不同的房间添加不同的样式 */
+export default function RoomMaterial(props: {
+    floorIndex: number;
+    floorplanData: FloorplanData;
+    pxmm: number;
+}): JSX.Element;
+export declare function RoomMaterialSwitch(props: {
+    room: FloorplanRoomItem;
+}): JSX.Element;

package/plugins/floorplan/ModelFloorplanPlugin/components/NowFloor/RoomMaterial.js

@@ -0,0 +1,174 @@
+"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 _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RoomMaterialSwitch = RoomMaterialSwitch;
+exports["default"] = RoomMaterial;
+
+require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.object.assign.js");
+
+require("core-js/modules/es.array.concat.js");
+
+var React = _interopRequireWildcard(require("react"));
+
+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 RoomMaterial(props) {
+  var bounding = props.floorplanData.bounding;
+  var rooms = props.floorplanData.floorDatas[props.floorIndex].rooms;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "floorplan__floor-item floorplan__room-material"
+  }, rooms // 户型图坐标转 Svg 坐标
+  .map(function (room) {
+    return Object.assign({}, room, {
+      path: room.path.map(function (p) {
+        return (0, _formatPosition["default"])(p, props.pxmm, bounding);
+      })
+    });
+  }).map(function (room) {
+    return /*#__PURE__*/React.createElement(RoomMaterialSvgWrapper, {
+      key: room.id
+    }, /*#__PURE__*/React.createElement(RoomMaterialSwitch, {
+      room: room
+    }));
+  }));
+}
+
+function RoomMaterialSwitch(props) {
+  var floorType = props.room.floorType;
+  if (floorType === 1) return /*#__PURE__*/React.createElement(RoomMaterial_0, {
+    path: props.room.path
+  });
+  if (floorType === 0) return /*#__PURE__*/React.createElement(RoomMaterial_2, {
+    path: props.room.path
+  });
+  return /*#__PURE__*/React.createElement(RoomMaterial_1, {
+    path: props.room.path
+  });
+}
+
+function RoomMaterialSvgWrapper(props) {
+  return /*#__PURE__*/React.createElement("svg", {
+    style: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      overflow: 'visible'
+    }
+  }, props.children);
+}
+/** 纯色背景 */
+
+
+function RoomMaterial_0(props) {
+  var d = (0, _formatPosition.pathD)(props.path, {
+    needZ: true
+  });
+  return /*#__PURE__*/React.createElement("path", {
+    d: d,
+    fill: "#2F313A"
+  });
+}
+/** 瓷砖地板，偏蓝的格格 */
+
+
+function RoomMaterial_1(props) {
+  var d = (0, _formatPosition.pathD)(props.path, {
+    needZ: true
+  });
+  var halfWidth = 6;
+  var width = halfWidth * 2;
+  var patternPathD = "M0 ".concat(halfWidth, " h ").concat(width, " M").concat(halfWidth, " 0 v ").concat(width);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("pattern", {
+    id: "fpm-room-pattern-0",
+    x: "0",
+    y: "0",
+    width: width,
+    height: width,
+    patternUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: "0",
+    y: "0",
+    width: width,
+    height: width,
+    fill: "#323747"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: patternPathD,
+    stroke: "#ffffff",
+    strokeOpacity: "0.06",
+    strokeWidth: "0.5",
+    fill: "none"
+  }))), /*#__PURE__*/React.createElement("path", {
+    d: d,
+    fill: "url(#fpm-room-pattern-0)"
+  }));
+}
+/** 木地板，偏灰的格格 */
+
+
+function RoomMaterial_2(props) {
+  var d = (0, _formatPosition.pathD)(props.path, {
+    needZ: true
+  });
+
+  var PatternRect = function PatternRect() {
+    return /*#__PURE__*/React.createElement("rect", {
+      x: "0.5",
+      y: "0.5",
+      width: "6",
+      height: "50",
+      fill: "none",
+      stroke: "#4B4B57",
+      strokeWidth: "0.5"
+    });
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("pattern", {
+    id: "room-material-pattern-1",
+    x: "0",
+    y: "0",
+    width: "13",
+    height: "51",
+    patternUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement(PatternRect, null)), /*#__PURE__*/React.createElement("pattern", {
+    id: "room-material-pattern-2",
+    x: "7",
+    y: "25",
+    width: "13",
+    height: "51",
+    patternUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement(PatternRect, null))), /*#__PURE__*/React.createElement("path", {
+    d: d,
+    fill: "#43434D"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: d,
+    fill: "url(#room-material-pattern-1)"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: d,
+    fill: "url(#room-material-pattern-2)"
+  }));
+}

package/plugins/floorplan/ModelFloorplanPlugin/components/NowFloor/RuleLabels.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { FloorplanData } from '../../../typings/floorplanData';
+/** 展示当前楼层的户型图对应上下左右的标尺 */
+export default function RuleLabels(props: {
+    floorIndex: number;
+    floorplanData: FloorplanData;
+    pxmm: number;
+}): JSX.Element | null;

package/plugins/floorplan/ModelFloorplanPlugin/components/NowFloor/RuleLabels.js

@@ -0,0 +1,179 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = RuleLabels;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.array.sort.js");
+
+require("core-js/modules/es.array.flat.js");
+
+require("core-js/modules/es.array.slice.js");
+
+require("core-js/modules/es.array.concat.js");
+
+require("core-js/modules/es.object.assign.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _px2rem = _interopRequireDefault(require("../../../../../shared-utils/px2rem"));
+
+var _isNil = require("../../../../../shared-utils/isNil");
+
+var padding = 1000;
+
+/** 展示当前楼层的户型图对应上下左右的标尺 */
+function RuleLabels(props) {
+  var currentFloorDatas = props.floorplanData.floorDatas[props.floorIndex];
+  var bounding = props.floorplanData.bounding;
+  var ruleLabels = currentFloorDatas.rules;
+  if (!ruleLabels) return null;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "floorplan-plugin__rulelabels"
+  }, Object.keys(ruleLabels).map(function (direction) {
+    return /*#__PURE__*/_react["default"].createElement(RulesItem, {
+      key: direction,
+      data: ruleLabels[direction],
+      type: direction,
+      bounding: bounding,
+      pxmm: props.pxmm
+    });
+  }));
+}
+
+function RulesItem(props) {
+  var _rulesStyle;
+
+  var pxmm = props.pxmm,
+      bounding = props.bounding,
+      type = props.type,
+      data = props.data;
+  var isTop = type === 'top';
+  var isBottom = type === 'bottom';
+  var isLeft = type === 'left';
+  var isRight = type === 'right';
+  var isRow = isTop || isBottom; // 计算每一段墙的长度，以及墙两侧点距离标尺初始点的像素值
+
+  var positionArray = data.map(function (_ref) {
+    var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+        start = _ref2[0],
+        end = _ref2[1];
+
+    return isRow ? [start.x, end.x] : [start.y, end.y];
+  }).flat().sort().filter(function (x, index, arr) {
+    if (index === 0) return true;
+    return x !== arr[index - 1];
+  });
+  var minPosition = positionArray[0];
+  var maxPosition = positionArray.slice(-1)[0];
+  var length = maxPosition - minPosition;
+  var minBounding = isRow ? bounding.min.x : bounding.min.y;
+  var lengthPx = length * pxmm;
+  var positionPxArray = positionArray.map(function (x) {
+    return (x - minPosition) / length * lengthPx;
+  }); // 在主要方向上的偏移量，上下的标尺是距离图片左侧的长度，左右的标尺是距离图片底部的距离
+
+  var translateMain = (minPosition - minBounding) * pxmm; // 在次要方向的偏移量，希望达到的效果是标尺轴距离户型图边界 27px，但是图片自身是带有 1000mm 的边界，所以在计算时需要减去这个边界
+
+  var translateSecond = 27 - padding * pxmm;
+
+  var transform = function () {
+    if (isTop) return "translate(".concat(translateMain, "px, ").concat(-translateSecond, "px)");
+    if (isBottom) return "translate(".concat(translateMain, "px, ").concat(translateSecond, "px)");
+    if (isLeft) return "translate(".concat(-translateSecond, "px, ").concat(-translateMain, "px)");
+    if (isRight) return "translate(".concat(translateSecond, "px, ").concat(translateMain, "px)");
+  }(); // 把点位的户型图坐标转成距离起始位置的像素值
+
+
+  var textArray = positionArray.map(function (position, index, array) {
+    if (index === 0) return;
+    var distance = position - array[index - 1];
+    var positionPx = (array[index - 1] + distance / 2 - minPosition) / length * lengthPx;
+    return {
+      distance: distance,
+      positionPx: positionPx
+    };
+  }).filter(_isNil.notNil).filter(function (item) {
+    return item.distance / length > 0.12;
+  });
+  var rulesStyle = (_rulesStyle = {
+    position: 'absolute',
+    transform: "".concat(transform, " ").concat(isRow ? '' : 'rotate(-90deg)'),
+    transformOrigin: "".concat(isRight ? 'right top' : '').concat(isLeft ? 'left bottom' : ''),
+    left: isRow ? 0 : undefined,
+    top: isRight ? 0 : undefined,
+    bottom: isLeft ? 0 : undefined
+  }, (0, _defineProperty2["default"])(_rulesStyle, type, 0), (0, _defineProperty2["default"])(_rulesStyle, "width", lengthPx + 'px'), (0, _defineProperty2["default"])(_rulesStyle, "height", (0, _px2rem["default"])(5)), (0, _defineProperty2["default"])(_rulesStyle, "display", 'flex'), (0, _defineProperty2["default"])(_rulesStyle, "alignItems", 'center'), _rulesStyle);
+  var ruleLineStyle = {
+    background: '#fff',
+    opacity: 0.05,
+    width: '100%',
+    height: (0, _px2rem["default"])(1)
+  };
+  var ruleScaleStyle = {
+    position: 'absolute',
+    background: '#fff',
+    opacity: 0.05,
+    transformOrigin: 'center',
+    width: (0, _px2rem["default"])(1),
+    height: (0, _px2rem["default"])(5)
+  };
+  var isRightOrBottom = isRight || isBottom;
+  var textWrapperStyle = {
+    width: 0,
+    height: 0,
+    position: 'absolute',
+    bottom: isRightOrBottom ? (0, _px2rem["default"])(10) : undefined,
+    top: isRightOrBottom ? undefined : (0, _px2rem["default"])(10)
+  };
+  var textStyle = {
+    position: 'absolute',
+    width: 'max-content',
+    display: 'block',
+    transform: "translate(-50%, -50%) ".concat(isRow ? '' : 'rotate(180deg)'),
+    fontSize: (0, _px2rem["default"])(10),
+    color: '#fff',
+    opacity: 0.2
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "rule-labels-".concat(type),
+    style: rulesStyle
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "rule-line",
+    style: ruleLineStyle
+  }), positionPxArray.map(function (position, index) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: index,
+      className: "rule-scale",
+      style: Object.assign({
+        left: "".concat(position, "px")
+      }, ruleScaleStyle)
+    });
+  }), textArray.map(function (textItem, index) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: index,
+      className: "text-wrapper",
+      style: Object.assign({
+        left: "".concat(textItem.positionPx, "px")
+      }, textWrapperStyle)
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: "text",
+      style: textStyle
+    }, textItem.distance));
+  }));
+}

package/plugins/floorplan/ModelFloorplanPlugin/components/NowFloor/index.d.ts

@@ -7,6 +7,8 @@ export default function NowFloor(props: {
     visible: boolean;
     floorIndex: number;
     hoverEnable?: boolean;
+    ruleLabelsEnable?: boolean;
+    roomLabelsEnable?: boolean;
     floorplanData: FloorplanData;
     getLabelElement?: (room: FloorplanRoomItem) => Element | null;
     onRoomHeightClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => boolean | void;

package/plugins/floorplan/ModelFloorplanPlugin/components/NowFloor/index.js

@@ -1,12 +1,30 @@
 "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); }
+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"] = NowFloor;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var React = _interopRequireWildcard(require("react"));
 
 var _RoomLabels = _interopRequireDefault(require("./RoomLabels"));
@@ -15,14 +33,14 @@ var _RoomHighlight = _interopRequireDefault(require("./RoomHighlight"));
 
 var _FloorplanImage = _interopRequireDefault(require("../../../components/FloorplanImage"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _RuleLabels = _interopRequireDefault(require("./RuleLabels"));
+
+var _RoomMaterial = _interopRequireDefault(require("./RoomMaterial"));
 
 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 floorplanData = props.floorplanData,
       floorIndex = props.floorIndex,
@@ -35,14 +53,22 @@ function NowFloor(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: "now-floor",
     style: floorStyle
-  }, !!props.hoverEnable && props.visible && /*#__PURE__*/React.createElement(_RoomHighlight["default"], _extends({}, props, {
+  }, /*#__PURE__*/React.createElement(_RoomMaterial["default"], {
+    floorplanData: floorplanData,
+    floorIndex: floorIndex,
+    pxmm: props.pxmm
+  }), !!props.hoverEnable && props.visible && /*#__PURE__*/React.createElement(_RoomHighlight["default"], (0, _extends2["default"])({}, props, {
     onClick: props.onRoomHeightClick
   })), /*#__PURE__*/React.createElement(_FloorplanImage["default"], {
     floorplanData: floorplanData,
     floorIndex: floorIndex
-  }), /*#__PURE__*/React.createElement(_RoomLabels["default"], {
+  }), !!props.roomLabelsEnable && /*#__PURE__*/React.createElement(_RoomLabels["default"], {
     floorplanData: floorplanData,
     floorIndex: floorIndex,
     getLabelElement: getLabelElement
+  }), !!props.ruleLabelsEnable && /*#__PURE__*/React.createElement(_RuleLabels["default"], {
+    floorplanData: floorplanData,
+    floorIndex: floorIndex,
+    pxmm: props.pxmm
   }));
 }

package/plugins/floorplan/ModelFloorplanPlugin/components/index.d.ts

@@ -9,6 +9,9 @@ declare const _default: React.NamedExoticComponent<{
     panoIndex: number;
     floorIndex: number;
     hoverEnable?: boolean | undefined;
+    compassEnable?: boolean | undefined;
+    ruleLabelsEnable?: boolean | undefined;
+    roomLabelsEnable?: boolean | undefined;
     lastPanoramaLongitude: number;
     floorplanData?: FloorplanData | undefined;
     cameraImage?: {