@realsee/dnalogel 0.1.7-alpha.2 → 0.1.7-alpha.3

package/libs/gltf-viewer/index.js

@@ -37,8 +37,6 @@ require("core-js/modules/es.date.to-string.js");
 
 require("core-js/modules/es.regexp.to-string.js");
 
-require("core-js/modules/es.number.is-integer.js");
-
 require("core-js/modules/es.number.constructor.js");
 
 require("core-js/modules/es.array.concat.js");
@@ -104,7 +102,7 @@ var Controller = /*#__PURE__*/function () {
     (0, _classCallCheck2["default"])(this, Controller);
     (0, _defineProperty2["default"])(this, "fov", 35);
     (0, _defineProperty2["default"])(this, "longitude", 0);
-    (0, _defineProperty2["default"])(this, "latitude", -0.3);
+    (0, _defineProperty2["default"])(this, "latitude", 0);
     (0, _defineProperty2["default"])(this, "needsRender", false);
     this.config = config; // 异步事件回调
 
@@ -236,8 +234,7 @@ var Controller = /*#__PURE__*/function () {
     key: "clear",
     value: function clear() {
       if (this.target) {
-        this.scene.remove(this.target.scene); // disposeObject(this.target)
-
+        this.scene.remove(this.target.scene);
         this.update(defaultPos);
         this.target = undefined;
       }
@@ -269,7 +266,30 @@ var Controller = /*#__PURE__*/function () {
 
       this.target = object;
       this.target.scene.visible = false;
-      this.scene.add(this.target.scene);
+      this.scene.add(this.target.scene); // ==== 调试逻辑 =====
+
+      {// const boxHelper = new THREE.BoxHelper(this.target.scene, 0x2bb8aa)
+        // this.scene.add(boxHelper)
+        // const axesHelper = new THREE.AxesHelper(300)
+        // this.scene.add(axesHelper)
+        // const boundingSphere = boxHelper.geometry.boundingSphere
+        // if (boundingSphere) {
+        //   const { center, radius } = boundingSphere
+        //   const fov = Math.PI / 2 - Math.asin(this.renderer.domElement.offsetWidth / 2 / radius)
+        //   console.log('fov', fov, this.renderer.domElement.offsetWidth / 2, radius)
+        // }
+        // const VFov = 45
+        // const aspect = this.camera.aspect
+        // // // 计算水平 fov
+        // const HFov = (2 * Math.atan(Math.tan((VFov * Math.PI) / 180 / 2) * aspect) * 180) / Math.PI
+        // const zEye = Math.abs(radius) / Math.sin(((HFov / 2) * Math.PI) / 180)
+        // console.log('HFOV', HFov, zEye)
+        // const lookPos = new THREE.Vector3(
+        //   center.x + this.scene.position.x,
+        //   center.x + this.scene.position.y,
+        //   center.x + this.scene.position.z,
+        // )
+      }
       setTimeout(function () {
         if (object === _this3.target) {
           _this3.target.scene.visible = true;
@@ -598,7 +618,7 @@ var GLTFViewer = /*#__PURE__*/function (_Subscribe) {
       }, {
         set: function set(obj, prop, value) {
           if (prop === 'fov') {
-            if (!Number.isInteger(value)) {
+            if (Number(value) === NaN) {
               throw new TypeError('The fov is not an number');
             }
 
@@ -653,6 +673,18 @@ var GLTFViewer = /*#__PURE__*/function (_Subscribe) {
       if (!controller) throw new Error(ERROR_NO_CONTROLLER);
       controller.appendTo(container, size);
     }
+    /**
+     * 刷新：如果传递宽高则以该宽高重新绘制；否则，以父容器的宽高重新绘制。
+     * @param size
+     */
+
+  }, {
+    key: "refresh",
+    value: function refresh(size) {
+      var controller = caches[this.uuid];
+      if (!controller) throw new Error(ERROR_NO_CONTROLLER);
+      controller.refresh(size);
+    }
     /**
      * 销毁
      */

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@realsee/dnalogel",
-  "version": "0.1.7-alpha.2",
-  "description": "如视前端 Componets、Plugins 兼部分 SDKs \"Dnalogel\" 库。",
+  "version": "0.1.7-alpha.3",
+  "description": "如视前端 Components、Plugins 兼部分 SDKs \"Dnalogel\" 库。",
   "author": "BEIKE REALSEE TECHNOLOGY (HK) LIMITED",
   "peerDependencies": {
-    "@realsee/five": "^5.0.0-alpha.52",
+    "@realsee/five": "^5.0.0-alpha.84",
     "@tweenjs/tween.js": "^18.6.4",
     "@types/styled-jsx": "^2.2.9",
     "hammerjs": "^2.0.8",

package/plugins/ModelRoomLabelPlugin/Controller.js

@@ -71,6 +71,7 @@ var ModelRoomLabelController = /*#__PURE__*/function () {
     this.container.style.width = '100%';
     this.container.style.height = '100%';
     this.container.style.position = 'absolute';
+    this.container.style.pointerEvents = 'none';
     this.container.style.left = '0';
     this.container.style.top = '0'; // five lisenter
 

package/plugins/ModelRoomLabelPlugin/RoomLabelItem.js

@@ -50,14 +50,14 @@ function RoomLabelItem(props, ref) {
   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"
+    className: _style["default"].dynamic([["312299051", [(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",
+    id: "312299051",
     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"
+  }, [".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;point-events:auto;-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([["312299051", [(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"
+    className: _style["default"].dynamic([["312299051", [(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"
   }));
 }
 

package/plugins/floorplan/ModelFloorplanPlugin/Controller.d.ts

@@ -8,6 +8,9 @@ export interface ModelFloorplanParameterType {
     scale?: number;
     autoShowEnable?: boolean;
     hoverEnable?: boolean;
+    compassEnable?: boolean;
+    ruleLabelsEnable?: boolean;
+    roomLabelsEnable?: boolean;
     cameraImage?: {
         style: React.CSSProperties;
     };
@@ -18,7 +21,7 @@ export interface ModelFloorplanPluginsShowOpts {
     floorIndex?: number;
     isAutoShow?: boolean;
     modelOpacity?: number;
-    immediatily?: boolean;
+    immediately?: boolean;
     userAction?: boolean;
 }
 export declare const MODEL_FLOORPLAN_PLUGIN_NAME = "modelFloorplanPlugin";
@@ -64,7 +67,7 @@ export default class ModelFloorplanPluginController {
      * 5. 如果多次调用 show 方法，参数与上次参数不一致时，上次 show Promise 会被 reject
      * @param opts.floorIndex 楼层
      * @param opts.modelOpacity 模型透明度
-     * @param opts.immediatily 是否立即展示
+     * @param opts.immediately 是否立即展示
      * @param opts.isAutoShow 是否是自动展示
      */
     show: (opts?: ModelFloorplanPluginsShowOpts | undefined) => Promise<boolean>;

package/plugins/floorplan/ModelFloorplanPlugin/Controller.js

@@ -57,7 +57,7 @@ var _getPxmm = _interopRequireDefault(require("../../../shared-utils/getPxmm"));
 
 var _correctFiveState = _interopRequireWildcard(require("./utils/correctFiveState"));
 
-var _changeModelCanvansOpacity = _interopRequireDefault(require("../../../shared-utils/changeModelCanvansOpacity"));
+var _changeModelCanvasOpacity = _interopRequireDefault(require("../../../shared-utils/changeModelCanvasOpacity"));
 
 var _controller = require("./controller.style");
 
@@ -210,7 +210,7 @@ var ModelFloorplanPluginController = /*#__PURE__*/function () {
 
                             _this.showRejection = function (errorMsg) {
                               hasRejected = true;
-                              reject(errorMsg ? new Error(errorMsg) : new Error(_constant.FloorplanErrorType.UnknowError));
+                              reject(errorMsg ? new Error(errorMsg) : new Error(_constant.FloorplanErrorType.UnknownError));
                             };
 
                             _context.next = 4;
@@ -234,7 +234,7 @@ var ModelFloorplanPluginController = /*#__PURE__*/function () {
                               break;
                             }
 
-                            return _context.abrupt("return", reject(new Error(_constant.FloorplanErrorType.UnknowError)));
+                            return _context.abrupt("return", reject(new Error(_constant.FloorplanErrorType.UnknownError)));
 
                           case 11:
                             if (_this.visible) {
@@ -242,7 +242,7 @@ var ModelFloorplanPluginController = /*#__PURE__*/function () {
                               break;
                             }
 
-                            return _context.abrupt("return", reject(new Error(_constant.FloorplanErrorType.UnknowError)));
+                            return _context.abrupt("return", reject(new Error(_constant.FloorplanErrorType.UnknownError)));
 
                           case 13:
                             // 更新户型图状态
@@ -259,8 +259,8 @@ var ModelFloorplanPluginController = /*#__PURE__*/function () {
 
 
                             modelOpacity = (_opts$modelOpacity = opts === null || opts === void 0 ? void 0 : opts.modelOpacity) !== null && _opts$modelOpacity !== void 0 ? _opts$modelOpacity : 0.01;
-                            renderDuration = opts !== null && opts !== void 0 && opts.immediatily ? 0 : _constant.SHOW_ANIME_DURATION;
-                            (0, _changeModelCanvansOpacity["default"])(_this.five, modelOpacity, renderDuration);
+                            renderDuration = opts !== null && opts !== void 0 && opts.immediately ? 0 : _constant.SHOW_ANIME_DURATION;
+                            (0, _changeModelCanvasOpacity["default"])(_this.five, modelOpacity, renderDuration);
 
                             _this.render(renderDuration); // 展示之后的事件监听
 
@@ -329,7 +329,7 @@ var ModelFloorplanPluginController = /*#__PURE__*/function () {
 
       _this.visible = false;
       (_this$showRejection2 = _this.showRejection) === null || _this$showRejection2 === void 0 ? void 0 : _this$showRejection2.call(_this, _constant.FloorplanErrorType.BreakOffByHide);
-      (0, _changeModelCanvansOpacity["default"])(_this.five, 1, 0);
+      (0, _changeModelCanvasOpacity["default"])(_this.five, 1, 0);
 
       _this.render();
 
@@ -601,7 +601,15 @@ var ModelFloorplanPluginController = /*#__PURE__*/function () {
     key: "render",
     value: function render(duration) {
       if (!this.container) return;
-      if (this.size.width === 0) return;
+      if (this.size.width === 0) return; // eslint-disable-next-line prettier/prettier
+
+      var _this$configs = this.configs,
+          cameraImage = _this$configs.cameraImage,
+          hoverEnable = _this$configs.hoverEnable,
+          getLabelElement = _this$configs.getLabelElement,
+          roomLabelsEnable = _this$configs.roomLabelsEnable,
+          compassEnable = _this$configs.compassEnable,
+          ruleLabelsEnable = _this$configs.ruleLabelsEnable;
       var props = {
         five: this.five,
         pxmm: this.pxmm,
@@ -611,9 +619,12 @@ var ModelFloorplanPluginController = /*#__PURE__*/function () {
         floorIndex: this.floorIndex,
         floorplanData: this.floorplanData,
         onRoomHeightClick: this.handleClick,
-        cameraImage: this.configs.cameraImage,
-        hoverEnable: this.configs.hoverEnable,
-        getLabelElement: this.configs.getLabelElement,
+        cameraImage: cameraImage,
+        hoverEnable: hoverEnable !== null && hoverEnable !== void 0 ? hoverEnable : true,
+        getLabelElement: getLabelElement,
+        roomLabelsEnable: roomLabelsEnable !== null && roomLabelsEnable !== void 0 ? roomLabelsEnable : true,
+        compassEnable: compassEnable !== null && compassEnable !== void 0 ? compassEnable : true,
+        ruleLabelsEnable: ruleLabelsEnable !== null && ruleLabelsEnable !== void 0 ? ruleLabelsEnable : true,
         lastPanoramaLongitude: this.lastPanoramaLongitude
       };
 

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

@@ -57,10 +57,10 @@ function Camera(props) {
   var size = bodyWidth < 500 || bodyHeight < 500 ? 17 : 37;
   var rotateBaseStyle = {
     position: 'absolute',
-    left: "".concat((0, _px2rem["default"])(-15)),
-    top: "".concat((0, _px2rem["default"])(-15)),
-    width: "".concat((0, _px2rem["default"])(size)),
-    height: "".concat((0, _px2rem["default"])(size)),
+    left: (0, _px2rem["default"])(-15),
+    top: (0, _px2rem["default"])(-15),
+    width: (0, _px2rem["default"])(size),
+    height: (0, _px2rem["default"])(size),
     transformOrigin: "".concat((0, _px2rem["default"])(15), " ").concat((0, _px2rem["default"])(15)),
     transform: "rotate(".concat(rotate, "deg)"),
     backgroundImage: "url('//vrlab-image4.ljcdn.com/release/web/default-sidemap-camera.c9772225.png')",

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

@@ -38,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)")
@@ -60,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/RoomLabels.js

@@ -80,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;