@realsee/dnalogel 2.1.0-alpha.3 → 2.1.0-alpha.5

package/libs/PanoTagPlugin/controller/index.js

@@ -2,15 +2,15 @@ import { Subscribe } from '@realsee/five';
 import { Quaternion } from 'three';
 import objectAssignDeep from 'object-assign-deep';
 import { writable } from 'svelte/store';
-import PointTagSvelte from '../Components/PointTag';
-import TagContentSvelte from '../Components/Tag/index';
-import { addDebugPoints, arrayPositionToVector3, actionAfterFiveModelLoad, debounce, normalPositionToPositions, planeNormal, random, resizeObserver, throttle, } from '../utils';
+import PointTagSvelte from '../Components/PointTag.svelte';
+import TagContentSvelte from '../Components/Tag/index.svelte';
+import { addDebugPoints, arrayPositionToVector3, actionAfterFiveModelLoad, debounce, normalPositionToPositions, planeNormal, resizeObserver, throttle, } from '../utils';
 import { TagComputer } from './TagComputer';
 import { CSS3DRenderPlugin } from '../../CSS3DRenderPlugin';
 import { DimensionType, PointType } from '../typings';
 // declare const __APP_VERSION__: string
-const VERSION = '0.2.0';
-const PLUGIN_NAME = `DnalogelPlugin-PanoTagPlugin-${random()}@${VERSION}`;
+const VERSION = '0.3.4';
+const PLUGIN_NAME = `DnalogelPlugin-PanoTagPlugin@${VERSION}`;
 const TAG_INITIAL_UNFOLDED = true;
 export const pluginFlag = (name) => `${PLUGIN_NAME}--${name}`;
 class PanoTagPluginController extends TagComputer {
@@ -151,7 +151,7 @@ class PanoTagPluginController extends TagComputer {
         const _tags = tags
             .map((tag) => {
             const config = this.getTagConfig(tag);
-            return Object.assign(Object.assign({}, tag), { state: Object.assign({ visible: undefined, unfolded: TAG_INITIAL_UNFOLDED }, config.initialState), hooks: new Subscribe() });
+            return Object.assign(Object.assign({}, tag), { state: Object.assign({ visible: undefined, unfolded: TAG_INITIAL_UNFOLDED }, config.initialState), hooks: new Subscribe(), clickable: config.clickable });
         })
             .filter((tag) => tag.position);
         this.tags.push(..._tags);
@@ -211,7 +211,7 @@ class PanoTagPluginController extends TagComputer {
         var _a, _b, _c, _d, _e, _f;
         this.disposeAllCSS3DContainer();
         (_a = this.PointTagSvelte) === null || _a === void 0 ? void 0 : _a.$destroy();
-        this.filter3DTag().forEach((tag) => { var _a; return (_a = tag.tag3DContentSvelte) === null || _a === void 0 ? void 0 : _aApp.$destroy(); });
+        this.filter3DTag().forEach((tag) => { var _a; return (_a = tag.tag3DContentSvelte) === null || _a === void 0 ? void 0 : _a.svelteApp.$destroy(); });
         this.tags = [];
         (_b = this.store.disposers) === null || _b === void 0 ? void 0 : _b.forEach((d) => d === null || d === void 0 ? void 0 : d());
         this.store.disposers = [];
@@ -322,7 +322,7 @@ class PanoTagPluginController extends TagComputer {
         (_a = this.PointTagSvelte) === null || _a === void 0 ? void 0 : _a.$set({ tags: [] });
         this.filter3DTag().forEach((tag) => {
             var _a;
-            (_a = tag.tag3DContentSvelte) === null || _a === void 0 ? void 0 : _aApp.$destroy();
+            (_a = tag.tag3DContentSvelte) === null || _a === void 0 ? void 0 : _a.svelteApp.$destroy();
             tag.tag3DContentSvelte = undefined;
         });
     }
@@ -451,7 +451,7 @@ class PanoTagPluginController extends TagComputer {
         (_a = this.PointTagSvelte) === null || _a === void 0 ? void 0 : _a.$set({ state: this.state, temporaryState: this.temporaryState, withAnimation: this.store.visibleWithAnimation });
         this.filter3DTag().forEach((tag) => {
             var _a;
-            (_a = tag.tag3DContentSvelte) === null || _a === void 0 ? void 0 : _aApp.$set({
+            (_a = tag.tag3DContentSvelte) === null || _a === void 0 ? void 0 : _a.svelteApp.$set({
                 state: this.state,
                 temporaryState: this.temporaryState,
                 withAnimation: this.store.visibleWithAnimation,

package/libs/PanoTagPlugin/index.d.ts

@@ -1,6 +1,7 @@
 import type { FivePlugin } from '@realsee/five';
 import PanoTagPluginController from './controller';
 export * from './controller';
+export * from './typings/tag';
 export declare type PanoTagPluginExportInterface = InstanceType<typeof PanoTagPluginController>;
 export declare type PanoTagPluginParamsInterface = ConstructorParameters<typeof PanoTagPluginController>[1];
 export declare const PanoTagPlugin: FivePlugin<PanoTagPluginParamsInterface, PanoTagPluginExportInterface>;

package/libs/PanoTagPlugin/index.js

@@ -1,4 +1,5 @@
 import PanoTagPluginController from './controller';
 export * from './controller';
+export * from './typings/tag';
 export const PanoTagPlugin = (five, params) => new PanoTagPluginController(five, params);
 export default PanoTagPlugin;

package/libs/PanoTagPlugin/mocks/mock1.js

@@ -56,7 +56,7 @@ const tagList = [
     {
         dimensionType: '3D',
         pointType: 'PlaneTag',
-        contentType: 'MediaPanel',
+        contentType: 'MediaPlane',
         position: [vector0, vector1, vector2, vector3],
         data: {
             mediaData: [

package/libs/PanoTagPlugin/mocks/mock6.js

@@ -103,7 +103,7 @@ export default {
         {
             dimensionType: '3D',
             pointType: 'PlaneTag',
-            contentType: 'MediaPanel',
+            contentType: 'MediaPlane',
             position: [vector0, vector1, vector2, vector3],
             data: {
                 mediaData: [

package/libs/PanoTagPlugin/tag.config.js

@@ -31,7 +31,7 @@ const DefaultConfig = {
         'Any-Marketing-Any': {
             unfoldedConfig: undefined,
         },
-        '3D-MediaPanel-PlaneTag': {
+        '3D-MediaPlane-PlaneTag': {
             unfoldedConfig: {
                 disableFold: true,
             },
@@ -39,6 +39,7 @@ const DefaultConfig = {
                 angleRange: undefined,
                 visibleDistance: undefined,
             },
+            clickable: false,
         },
     },
 };

package/libs/PanoTagPlugin/typings/controller.d.ts

@@ -1,7 +1,7 @@
 import type { PanoTagPluginController } from '../index';
 import type { ContentType, DimensionType, TagId, PointType, Tag } from '../typings';
 import type * as BasePlugin from '../../base/BasePlugin';
-import type TagContentSvelte from '../Components/Tag/index';
+import type TagContentSvelte from '../Components/Tag/index.svelte';
 import type { Vector3 } from 'three';
 import type { Create3DDomContainerReturnType } from '../../CSS3DRenderPlugin';
 import type { Writable } from 'svelte/store';
@@ -74,6 +74,7 @@ export declare type TagElement<C extends ContentType = ContentType, P extends Po
         leftPercent: number;
         topPercent: number;
     };
+    clickable: boolean;
     state: {
         visible?: boolean;
         unfolded: boolean;

package/libs/PanoTagPlugin/typings/tag.d.ts

@@ -31,7 +31,7 @@ export declare enum ContentType {
     /** 营销标签 */
     Marketing = "Marketing",
     /** 图片视频贴片 */
-    MediaPanel = "MediaPanel",
+    MediaPlane = "MediaPlane",
     /** 其他/自定义标签 */
     Custom = "Custom"
 }
@@ -146,6 +146,7 @@ export interface TagConfig<C extends ContentType = ContentType, T extends PointT
         unfolded?: boolean;
     };
     tag3DConfig?: Create3DDomContainerParamsType['config'];
+    clickable?: false;
 }
 export declare enum LinkType {
     VrLink = "vr",
@@ -201,9 +202,12 @@ interface ContentTypeMap {
         };
         extraData?: Object;
     };
-    [ContentType.MediaPanel]: {
+    [ContentType.MediaPlane]: {
         enableCarousel?: boolean;
-        /** @deprecated replaced by objectFit */
+        /**
+         * @description stretch: 拉伸适配, proportional: 等比适配，默认值 'proportional'
+         * @deprecated replaced by objectFit
+         */
         adaptationMode?: 'stretch' | 'proportional';
         /** object-fit doc {@link https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit} */
         objectFit?: ObjectFit;

package/libs/PanoTagPlugin/typings/tag.js

@@ -21,7 +21,7 @@ export var ContentType;
     /** 营销标签 */
     ContentType["Marketing"] = "Marketing";
     /** 图片视频贴片 */
-    ContentType["MediaPanel"] = "MediaPanel";
+    ContentType["MediaPlane"] = "MediaPlane";
     /** 其他/自定义标签 */
     ContentType["Custom"] = "Custom";
 })(ContentType || (ContentType = {}));

package/libs/floorplan/Components/BaseImage.svelte

@@ -0,0 +1,26 @@
+<script>var _a, _b;
+import NormalImage from './Normalmage.svelte';
+import SvgImage from './SvgImage.svelte';
+export let floorIndex;
+export let floorplanData;
+$: imageData = floorplanData.outlines[floorIndex];
+$: svgContent = (_b = (_a = floorplanData.outlines) === null || _a === void 0 ? void 0 : _a[floorIndex]) === null || _b === void 0 ? void 0 : _b.svgContent;
+</script>
+
+<div class="floorplan-plugin__base-image">
+  {#if svgContent}
+    <SvgImage content={svgContent} />
+  {:else if imageData}
+    <NormalImage url={imageData.url} />
+  {/if}
+</div>
+
+<style>
+  .floorplan-plugin__base-image {
+    position: absolute;
+    z-index: 10;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+</style>

package/libs/floorplan/Components/Camera.svelte

@@ -0,0 +1,46 @@
+<script>import { CAMERA_IMAGE } from '../Assets/camera';
+import rad2Deg from '../../shared-utils/math/rad2Deg';
+export let panoIndex;
+export let floorplanData;
+export let lastPanoramaLongitude;
+export let cameraImageUrl;
+const { observers } = floorplanData;
+const observer = observers[panoIndex];
+const leftRatio = observer.positionInImage.x;
+const topRatio = observer.positionInImage.y;
+const positionLeft = leftRatio * 100 + '%';
+const positionTop = topRatio * 100 + '%';
+const rotate = -rad2Deg(lastPanoramaLongitude) + 45;
+// TODO: 统一这里的判断条件，目前写了多处
+const bodyWidth = document.body.clientWidth;
+const bodyHeight = document.body.clientHeight;
+const size = bodyWidth < 500 || bodyHeight < 500 ? 17 : 37;
+const domSizeStyle = `${size / 16}rem`;
+</script>
+
+<div class="floorplan__camera-position" style:left={positionLeft} style:top={positionTop}>
+  <div
+    class="floorplan__camera-rotate"
+    style:width={domSizeStyle}
+    style:height={domSizeStyle}
+    style:left={'-' + domSizeStyle}
+    style:top={'-' + domSizeStyle}
+    style:transform={`rotate(${rotate}deg)`}
+    style:transform-origin={`${domSizeStyle} ${domSizeStyle}`}
+    style="background-image: {`url(${cameraImageUrl || CAMERA_IMAGE})`}"
+  />
+</div>
+
+<style lang="postcss">
+  .floorplan__camera-position {
+    position: absolute;
+    width: 0;
+    height: 0;
+  }
+
+  .floorplan__camera-rotate {
+    position: absolute;
+    background-repeat: no-repeat;
+    background-size: 100%;
+  }
+</style>

package/libs/floorplan/Components/Compass.svelte

@@ -0,0 +1,51 @@
+<script>var _a;
+import { COMPASS_IMAGE } from '../Assets/compass';
+function rad2Deg(rad) {
+    return (rad / Math.PI) * 180;
+}
+export let floorplanData;
+export let northDesc;
+const northRad = (_a = floorplanData.entrance) === null || _a === void 0 ? void 0 : _a.northRad;
+const canCompassShow = typeof northRad === 'number';
+const rotate = !northRad ? 0 : rad2Deg(northRad);
+const compassTransformStyle = `translateX(-50%) translateZ(10px) rotate(${-rotate + 90}deg)`;
+</script>
+
+{#if canCompassShow}
+  <div class="floorplan-plugin__compass" style:transform={compassTransformStyle}>
+    <div class="floorplan-plugin__compass-image" style="background-image: {`url(${COMPASS_IMAGE})`}" />
+    <span class="floorplan-plugin__compass-text"> {northDesc} </span>
+  </div>
+{/if}
+
+<style>
+  .floorplan-plugin__compass {
+    position: absolute;
+    left: 50%;
+    top: -46px;
+    width: 231px;
+    height: 41px;
+    will-change: opacity;
+    transform-origin: center 184px;
+  }
+  .floorplan-plugin__compass-image {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    opacity: 0.1;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+  .floorplan-plugin__compass-text {
+    position: absolute;
+    left: 50%;
+    top: 15px;
+    transform: translateX(-50%);
+    opacity: 0.2;
+    font-weight: bold;
+    font-size: 10px;
+    color: #fff;
+  }
+</style>

package/libs/floorplan/Components/CurrentFloor.svelte

@@ -0,0 +1,46 @@
+<script>import { writable } from 'svelte/store';
+import BaseImage from './BaseImage.svelte';
+import RoomLabels from './RoomLabels/RoomLabels.svelte';
+import RuleLabels from './RuleLabels/RuleLabels.svelte';
+import RoomMaterial from './RoomMaterials/RoomMaterial.svelte';
+import RoomHighlight from './RoomHighlight/RoomHighlight.svelte';
+export let isCurrent;
+export let floorIndex;
+export let hoverEnable;
+export let roomLabelsEnable;
+export let ruleLabelsEnable;
+export let floorplanData;
+export let getLabelElement;
+export let adaptiveRoomLabelVisibleEnable;
+const hoveredRoom = writable(undefined);
+</script>
+
+<div class={`floorplan-plugin__floor${isCurrent ? ' floorplan-plugin__floor--is-current' : ''}`}>
+  <RoomMaterial {...{ floorIndex, floorplanData }} />
+  {#if hoverEnable}
+    <RoomHighlight {...{ floorIndex, floorplanData, hoveredRoom }} />
+  {/if}
+  <BaseImage {...{ floorplanData, floorIndex }} />
+  {#if roomLabelsEnable}
+    <RoomLabels {...{ floorplanData, floorIndex, getLabelElement, hoveredRoom, adaptiveRoomLabelVisibleEnable }} />
+  {/if}
+  {#if ruleLabelsEnable}
+    <RuleLabels {...{ floorplanData, floorIndex }} />
+  {/if}
+</div>
+
+<style>
+  .floorplan-plugin__floor {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    pointer-events: none;
+  }
+  .floorplan-plugin__floor--is-current {
+    opacity: 1;
+    pointer-events: auto;
+  }
+</style>

package/libs/floorplan/Components/Main.svelte

@@ -0,0 +1,51 @@
+<script>import { linear } from 'svelte/easing';
+import { fade } from 'svelte/transition';
+import Camera from './Camera.svelte';
+import Compass from './Compass.svelte';
+import CurrentFloor from './CurrentFloor.svelte';
+export let duration = 0;
+export let visible;
+export let northDesc;
+export let panoIndex;
+export let floorIndex;
+export let hoverEnable;
+export let compassEnable;
+export let roomLabelsEnable;
+export let ruleLabelsEnable;
+export let floorplanData;
+export let lastPanoramaLongitude;
+export let cameraImageUrl;
+export let getLabelElement;
+export let adaptiveRoomLabelVisibleEnable;
+</script>
+
+{#if visible}
+  <div class="floorplan-main" in:fade={{ duration, easing: linear }}>
+    {#each floorplanData.floorDatas as floorData}
+      <CurrentFloor
+        {...{
+          hoverEnable,
+          floorplanData,
+          getLabelElement,
+          roomLabelsEnable,
+          ruleLabelsEnable,
+          adaptiveRoomLabelVisibleEnable,
+        }}
+        floorIndex={floorData.floorIndex}
+        isCurrent={floorData.floorIndex === floorIndex}
+      />
+    {/each}
+    <Camera {...{ panoIndex, floorplanData, lastPanoramaLongitude, cameraImageUrl }} />
+    {#if compassEnable}
+      <Compass {floorplanData} {northDesc} />
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .floorplan-main {
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+</style>

package/libs/floorplan/Components/Normalmage.svelte

@@ -0,0 +1,11 @@
+<script>export let url;
+</script>
+
+<img src={url} alt="floorplan iamge" />
+
+<style>
+  img {
+    width: 100%;
+    height: 100%;
+  }
+</style>

package/libs/floorplan/Components/RoomHighlight/Room.svelte

@@ -0,0 +1,27 @@
+<script>import formatFloorplanPoint, { pathD } from '../../utils/formatPosition';
+export let room;
+export let floorplanData;
+export let hoveredRoom;
+function onMouseEnter() {
+    hoveredRoom.set(room);
+}
+function onMouseLeave() {
+    hoveredRoom.set(undefined);
+}
+const { bounding } = floorplanData;
+const _pathD = pathD(room.path, {
+    needZ: true,
+    format: (vector) => formatFloorplanPoint(vector, bounding),
+});
+</script>
+
+<path d={_pathD} fill={`#fff`} on:mouseenter={onMouseEnter} on:mouseleave={onMouseLeave} />
+
+<style>
+  path {
+    opacity: 0;
+  }
+  path:hover {
+    opacity: 0.1;
+  }
+</style>

package/libs/floorplan/Components/RoomHighlight/RoomHighlight.svelte

@@ -0,0 +1,29 @@
+<script>import Room from './Room.svelte';
+export let floorIndex;
+export let floorplanData;
+export let hoveredRoom;
+const boundingWidth = floorplanData.bounding.max.x - floorplanData.bounding.min.x;
+const boundingHeight = floorplanData.bounding.max.y - floorplanData.bounding.min.y;
+</script>
+
+<div class="floorplan-plugin__room-highlight">
+  <svg width="100%" height="100%" viewBox={`0 0 ${boundingWidth} ${boundingHeight}`}>
+    {#each floorplanData.floorDatas[floorIndex].rooms as room (room.id)}
+      <Room {...{ room, floorplanData, hoveredRoom }} />
+    {/each}
+  </svg>
+</div>
+
+<style>
+  .floorplan-plugin__room-highlight {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  svg {
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+  }
+</style>

package/libs/floorplan/Components/RoomLabels/RoomLabel.svelte

@@ -0,0 +1,119 @@
+<script>import { onMount } from 'svelte';
+export let pxmm;
+export let room;
+export let hoveredRoom;
+export let getLabelElement;
+export let adaptiveRoomLabelVisibleEnable;
+// https://wrf.ecse.rpi.edu//Research/Short_Notes/pnpoly.html
+// https://github.com/substack/point-in-polygon
+function isPointInPolygon(point, polygon) {
+    const x = point[0];
+    const y = point[1];
+    let inside = false;
+    for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+        const xi = polygon[i][0];
+        const yi = polygon[i][1];
+        const xj = polygon[j][0];
+        const yj = polygon[j][1];
+        const intersect = yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi;
+        if (intersect)
+            inside = !inside;
+    }
+    return inside;
+}
+function isLabelInRoomCurry(room, labelElementSize) {
+    if (labelElementSize.width === 0 || labelElementSize.height === 0)
+        return () => false;
+    const polygon = room.path.map(({ x, y }) => [x, y]);
+    const labelPosition = room.roomLabel.position;
+    const { x, y } = labelPosition;
+    const { width, height } = labelElementSize;
+    const halfWidth = width / 2;
+    const halfHeight = height / 2;
+    return function isLabelInRoom(pxmm) {
+        const clientX = x * pxmm;
+        const clientY = y * pxmm;
+        const clientPolygon = polygon.map(([x, y]) => [x * pxmm, y * pxmm]);
+        // const
+        /** 围成 labelRect 的四个点
+         * 1----0
+         * |    |
+         * 2----3
+         */
+        const labelRectClientPoints = [
+            [clientX + halfWidth, clientY - halfHeight],
+            [clientX - halfWidth, clientY - halfHeight],
+            [clientX - halfWidth, clientY + halfHeight],
+            [clientX + halfWidth, clientY + halfHeight],
+        ];
+        return labelRectClientPoints.every((point) => isPointInPolygon(point, clientPolygon));
+    };
+}
+// ========== 获取设备宽高像素 ==========
+// TODO: 统一这里的判断条件，目前写了多处
+const bodyWidth = document.body.clientWidth;
+const bodyHeight = document.body.clientHeight;
+const roomSizeDes = room.size ? (room.size / 1000000).toFixed(1) + '㎡' : '';
+// ====================================
+const roomLabel = room.roomLabel;
+const left = roomLabel.positionInImage.x * 100 + '%';
+const top = roomLabel.positionInImage.y * 100 + '%';
+// 屏幕宽或高小于 500px 时，用 10px 字体，否则用 14px
+const fontSize = (bodyWidth < 500 || bodyHeight < 500 ? 10 : 14) / 16 + 'rem';
+let isHoverd = false;
+let labelElement;
+let labelElementSize;
+$: isLabelInRoom = labelElementSize ? isLabelInRoomCurry(room, labelElementSize) : undefined;
+$: userConfigElement = getLabelElement === null || getLabelElement === void 0 ? void 0 : getLabelElement(room);
+$: labelVisible = adaptiveRoomLabelVisibleEnable ? (isHoverd ? true : !!(isLabelInRoom === null || isLabelInRoom === void 0 ? void 0 : isLabelInRoom(pxmm))) : true;
+hoveredRoom.subscribe(function onHoverdRoomUpdate(_room) {
+    isHoverd = !!_room && _room.id === room.id;
+});
+onMount(() => {
+    // Label 能不能展示只跟房间大小有关
+    // 计算 LabelElement 宽高
+    const labelDomRect = labelElement === null || labelElement === void 0 ? void 0 : labelElement.getClientRects()[0];
+    labelElementSize = { width: labelDomRect.width, height: labelDomRect.height };
+});
+</script>
+
+<div
+  bind:this={labelElement}
+  class="floorplan-plugin__room-label-item"
+  style:left
+  style:top
+  style:font-size={fontSize}
+  style:opacity={labelVisible ? '1' : '0'}
+>
+  <!-- 用户没有配置自定义 DOM 时，使用默认 DOM -->
+  {#if getLabelElement === undefined}
+    <span class="floorplan-plugin__room-name">
+      {room.name}
+    </span>
+    <span class="floorplan-plugin__room-size">{roomSizeDes}</span>
+    <!-- 用户配置自定义 DOM 时，使用用户 DOM -->
+  {:else if userConfigElement}
+    <!-- TODO: @html 是一个很不好的语法，但是目前没有好的方式去配置 User DOM -->
+    <!-- TODO: 看一下能不能改成在 reactive segment 里动态插入 DOM -->
+    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+    {@html userConfigElement.outerHTML}
+  {/if}
+</div>
+
+<style>
+  .floorplan-plugin__room-label-item {
+    position: absolute;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    line-height: 1;
+    color: #fff;
+    transform: translate(-50%, -50%);
+    white-space: nowrap;
+    will-change: opacity;
+    transition: opacity 300ms;
+  }
+  .floorplan-plugin__room-size {
+    opacity: 0.45;
+  }
+</style>

package/libs/floorplan/Components/RoomLabels/RoomLabels.svelte

@@ -0,0 +1,35 @@
+<script>import RoomLabel from './RoomLabel.svelte';
+export let floorIndex;
+export let floorplanData;
+export let hoveredRoom;
+export let getLabelElement;
+export let adaptiveRoomLabelVisibleEnable;
+$: rooms = floorplanData.floorDatas[floorIndex].rooms;
+let clientWidth = 0;
+let pxmm = 0;
+$: {
+    const { max, min } = floorplanData.bounding;
+    const boundingWidth = max.x - min.x;
+    pxmm = clientWidth / boundingWidth;
+}
+</script>
+
+{#if rooms}
+  <div class="floorplan-plugin__room-labels" bind:clientWidth>
+    {#each rooms as room (room.id)}
+      <RoomLabel {...{ pxmm, room, getLabelElement, hoveredRoom, adaptiveRoomLabelVisibleEnable }} />
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .floorplan-plugin__room-labels {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 20;
+    pointer-events: none;
+  }
+</style>

package/libs/floorplan/Components/RoomMaterials/RoomMaterial.svelte

@@ -0,0 +1,42 @@
+<script>import formatFloorplanPoint from '../../utils/formatPosition';
+import RoomMaterial_0 from './RoomMaterial_0.svelte';
+import RoomMaterial_1 from './RoomMaterial_1.svelte';
+import RoomMaterial_2 from './RoomMaterial_2.svelte';
+export let floorIndex;
+export let floorplanData;
+const boundingWidth = floorplanData.bounding.max.x - floorplanData.bounding.min.x;
+const boundingHeight = floorplanData.bounding.max.y - floorplanData.bounding.min.y;
+$: rooms = floorplanData.floorDatas[floorIndex].rooms.map((room) => (Object.assign(Object.assign({}, room), { path: room.path.map((p) => formatFloorplanPoint(p, floorplanData.bounding)) })));
+</script>
+
+<div class="floorplan-plugin__room-material">
+  {#each rooms as room}
+    <svg width="100%" height="100%" viewBox={`0 0 ${boundingWidth} ${boundingHeight}`}>
+      {#if room.floorType === 1}
+        <RoomMaterial_0 path={room.path} />
+      {:else if room.floorType === 0}
+        <RoomMaterial_2 path={room.path} />
+      {:else}
+        <RoomMaterial_1 path={room.path} />
+      {/if}
+    </svg>
+  {/each}
+</div>
+
+<style>
+  .floorplan-plugin__room-material {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+  svg {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+  }
+</style>

package/libs/floorplan/Components/RoomMaterials/RoomMaterial_0.svelte

@@ -0,0 +1,7 @@
+<script>import { pathD } from '../../utils/formatPosition';
+export let path;
+$: d = pathD(path, { needZ: true });
+</script>
+
+<!-- 纯色背景 -->
+<path {d} fill="#2F313A" />