@realsee/dnalogel 2.0.0-alpha.44 → 2.0.0-alpha.45

package/libs/PanoDoorLabelPlugin/utils.js

@@ -0,0 +1,55 @@
+import { Vector3 } from 'three';
+export function isTwoRectOverlaped(rect1, rect2) {
+    // 两矩形的中心点水平及垂直距离
+    const verticalDistance = Math.abs(rect1.top + rect1.height / 2 - rect2.top - rect2.height / 2);
+    const horizontalDistance = Math.abs(rect1.left + rect1.width / 2 - rect2.left - rect2.width / 2);
+    const verticalThreshold = (rect1.height + rect2.height) / 2;
+    const horizontalThroshold = (rect1.width + rect2.width) / 2;
+    if (verticalDistance > verticalThreshold && horizontalDistance > horizontalThroshold) {
+        return false;
+    }
+    return true;
+}
+export function getCameraToward(five) {
+    const { camera } = five;
+    const cameraDirection = camera.getWorldDirection(new Vector3());
+    let angel = (Math.atan(cameraDirection.z / cameraDirection.x) * 180) / Math.PI;
+    let toward = '';
+    if (cameraDirection.x < 0)
+        angel += 180;
+    if (angel < 0)
+        angel += 360;
+    if (angel > 315 || angel <= 45) {
+        toward = 'right';
+    }
+    else if (angel > 45 && angel <= 135) {
+        toward = 'back';
+    }
+    else if (angel > 135 && angel <= 225) {
+        toward = 'left';
+    }
+    else if (angel > 225 && angel <= 315) {
+        toward = 'forward';
+    }
+    return toward;
+}
+export function getDistance(p1, p2) {
+    return Math.sqrt(Math.pow(p1.z - p2.z, 2) + Math.pow(p1.x - p2.x, 2));
+}
+// left、right、forward、back 是 roomLabel 的朝向
+export function getToward(rad) {
+    const pi_4 = Math.PI / 4;
+    if (rad > -pi_4 && rad <= pi_4) {
+        return 'left';
+    }
+    else if (rad > pi_4 * 3 || rad <= -pi_4 * 3) {
+        return 'right';
+    }
+    else if (rad > -pi_4 * 3 && rad <= -pi_4) {
+        return 'forward';
+    }
+    else if (rad > pi_4 && rad <= pi_4 * 3) {
+        return 'back';
+    }
+    return '';
+}

package/libs/PanoRulerProPlugin/Controller.js

@@ -1,4 +1,4 @@
-import RulerItems from './RulerItems.svelte';
+import RulerItems from './RulerItems';
 export default class Controller {
     constructor(five, params) {
         var _a, _b;

package/libs/PanoSpatialTagPlugin/Plugin.js

@@ -1,8 +1,8 @@
 import * as THREE from 'three';
 import { Five, Subscribe } from '@realsee/five';
 import CSS3DRenderPlugin from '../CSS3DRenderPlugin';
-import Origins from './Components/origins.svelte';
-import Tag from './Components/tag.svelte';
+import Origins from './Components/origins';
+import Tag from './Components/tag';
 import { pluginStyle } from './style';
 import render from '../shared-utils/tinyEJSrender';
 const MESH_SIZE = 0.001;

package/libs/floorplan/ModelFloorplanPlugin/Controller.js

@@ -1,6 +1,6 @@
 import to from '../../shared-utils/to';
 import equal from '../../shared-utils/equal';
-import Main from '../Components/Main.svelte';
+import Main from '../Components/Main';
 import formatData from '../utils/formatData';
 import { CAMERA_IMAGE } from '../Assets/camera';
 import { omit } from '../../shared-utils/filter';

package/libs/floorplan/PanoFloorplanRadarPlugin/Controller.js

@@ -1,4 +1,4 @@
-import Main from './Components/Main.svelte';
+import Main from './Components/Main';
 import equal from '../../shared-utils/equal';
 import { CAMERA_IMAGE } from '../Assets/camera';
 import * as BasePlugin from '../../base/BasePluginWithData';

package/libs/floorplan/TopviewFloorplanPlugin/Controller.js

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 import equal from '../../shared-utils/equal';
-import Main from '../Components/Main.svelte';
+import Main from '../Components/Main';
 import formatData from '../utils/formatData';
 import { CAMERA_IMAGE } from '../Assets/camera';
 import { omit } from '../../shared-utils/filter';

package/libs/floorplan/typings/floorplanServerData.d.ts

@@ -118,11 +118,24 @@ export interface FloorplanServerObserver {
     position: FloorplanServerPosition;
     position_in_image: FloorplanServerImagePosition;
 }
+export interface FloorplanServerDoorPosition {
+    x: number;
+    y: number;
+    z: number;
+}
+export interface FloorplanServerDoorItem {
+    id: string;
+    localName: string;
+    name: string;
+    position: FloorplanServerDoorPosition;
+    rad: number;
+}
 export interface FloorplanServerComputedData {
     floor_datas: FloorplanServerFloorData[];
     entrance: FloorplanServerEntrance | null;
     bounding: FloorplanServerBounding;
     observers: FloorplanServerObserver[];
+    doors: FloorplanServerDoorItem[];
 }
 /** 原始输入的户型图数据 */
 export interface FloorplanServerData {

package/libs/index.d.ts

@@ -14,4 +14,5 @@ export * from './PanoSpatialTagPlugin';
 export * from './ModelItemLabelPlugin';
 export * from './ModelTVVideoPlugin';
 export * from './ItemLabelPlugin';
-export declare const DnalogelVersion = "2.0.0-alpha.38";
+export * from './PanoDoorLabelPlugin';
+export declare const DnalogelVersion = "2.0.0-alpha.43";

package/libs/index.js

@@ -26,4 +26,6 @@ export * from './ModelItemLabelPlugin';
 export * from './ModelTVVideoPlugin';
 // 物品标签
 export * from './ItemLabelPlugin';
-export const DnalogelVersion = '2.0.0-alpha.38';
+// 分间标签
+export * from './PanoDoorLabelPlugin';
+export const DnalogelVersion = '2.0.0-alpha.43';

package/package.json

@@ -8,7 +8,7 @@
   "repository": "https://github.com/realsee-developer/dnalogel.git",
   "description": "如视 VR 看房插件合集",
   "private": false,
-  "version": "2.0.0-alpha.44",
+  "version": "2.0.0-alpha.45",
   "license": "SEE LICENSE IN TERMS.txt",
   "files": [
     "libs",

package/dist/PanoCompassPlugin/Plugin.d.ts

@@ -1,47 +0,0 @@
-import type { Five, FivePlugin } from '@realsee/five';
-import type { FloorplanServerRoomItem } from '../floorplan/typings/floorplanServerData';
-export interface PanoCompassPluginParameterType {
-    compassImageUrl?: string;
-    entryDoorImageUrl?: string;
-}
-export interface PanoCompassPluginData {
-    north_rad: null | number;
-    entrance: null | undefined | {
-        position: {
-            x: number;
-            y: number;
-            z: number;
-        };
-    };
-    room_observers: undefined | {
-        index: number;
-        floor_index: number;
-        room: FloorplanServerRoomItem;
-    }[];
-}
-export declare type PanoCompassPluginExportType = PanoCompassController;
-export declare const PanoCompassPlugin: FivePlugin<PanoCompassPluginParameterType | undefined, PanoCompassController>;
-export default PanoCompassPlugin;
-declare class PanoCompassController {
-    five: Five;
-    data?: PanoCompassPluginData;
-    config?: PanoCompassPluginParameterType;
-    private group;
-    private modelLoaded;
-    private roomInfoInstance?;
-    private roomInfoWrapperInstance?;
-    private compassMeshTween?;
-    private compassMesh?;
-    private entryDoorMesh?;
-    constructor(five: Five, config?: PanoCompassPluginParameterType);
-    load(data: PanoCompassPluginData): void;
-    dispose: () => void;
-    private onFiveFistPanoLoaded;
-    private init;
-    private loadCompassMesh;
-    private loadEntryDoorMesh;
-    private loadRoomInfo;
-    private onFivePanoWillArrive;
-    private onFivePanoArrived;
-    private onFiveCameraDirectionUpdate;
-}

package/libs/ItemLabelPlugin/ItemLabelComponent.svelte

@@ -1,251 +0,0 @@
-<script>import { Five } from '@realsee/five';
-import "./typings";
-import { beforeUpdate, onDestroy, onMount } from "svelte";
-import * as THREE from 'three';
-import ItemLabelItem from './ItemLabelItem.svelte';
-import "./events.type";
-import debounce from '../shared-utils/debounce';
-import { isImpacted } from "./utils/isImpacted";
-import { getStrokeLength } from "./utils/getStrokeLength";
-import { getLabelTransform } from './utils/getLabelTransform';
-import { transform2RenderData } from "./utils/transform2RenderData";
-const { Raycaster, Vector3 } = THREE;
-export let five;
-export let modelOcclusionEnable;
-export let onlyVisibleInPanorama;
-export let itemLabels;
-export let hooks;
-export let displayStrategyType;
-export let maxVisibleDistance;
-let curItemLabels = null;
-let renderItemLabels = null;
-let anchorEnabled = (five === null || five === void 0 ? void 0 : five.currentMode) === Five.Mode.Panorama;
-let containerWidth;
-let containerHeight;
-// 计算重叠
-let cssOffsetLists = [];
-let cssHeight = 26;
-let basicWidth = 11;
-// 动画过程中 itemsVisible 为 false
-let itemsVisible = true;
-/**
- * 可见性策略：
- * 1、当前楼层(假设先不考虑多楼层)
- * 2、模型未被遮挡（一个 box 有没有被遮挡的计算？ TODO）
- * */
-const judgeImpacted = (five, itemLabel) => {
-    // 虚拟 VR 仅有一层，不考虑楼层信息
-    const cameraPosition = five.camera.position.clone();
-    const modelPosition = new Vector3(itemLabel.modelPosition[0], itemLabel.modelPosition[1], itemLabel.modelPosition[2]);
-    // 计算点到相机的位置
-    const vectorDistance = modelPosition.distanceTo(cameraPosition);
-    // 判断距离，大于最大可见距离直接不可见 TODO 把距离计算和碰撞拆分开
-    if (maxVisibleDistance !== undefined && five.state.mode === Five.Mode.Panorama) {
-        if (vectorDistance > maxVisibleDistance) {
-            return false;
-        }
-    }
-    return isImpacted(five, modelPosition.clone().sub(cameraPosition).normalize(), cameraPosition, vectorDistance);
-};
-const judgeInViewport = (modelPoint) => {
-    const { camera, model } = five;
-    const { x: offsetXFromCenter, y: offsetYFromCenter, z: offsetZFromCenter, } = modelPoint.clone().project(camera);
-    const ratioFromLeft = (offsetXFromCenter + 1) / 2;
-    const ratioFromTop = (2 - (offsetYFromCenter + 1)) / 2;
-    const isFront = Math.abs(offsetZFromCenter) < 1;
-    const cssOffset = [ratioFromLeft, ratioFromTop];
-    // 只计算在前面就行
-    const isInViewport = isFront && cssOffset.every((ratio) => ratio < 1 && ratio >= 0);
-    return Boolean(isInViewport);
-};
-// cssOffset 获取
-const getLabelCssOffset = (five, itemLabel) => {
-    const modelPosition = new Vector3(itemLabel.modelPosition[0], itemLabel.modelPosition[1], itemLabel.modelPosition[2]);
-    const cssPosition = five.project2d(modelPosition);
-    const xOffset = cssPosition === null || cssPosition === void 0 ? void 0 : cssPosition.x;
-    const yOffset = cssPosition === null || cssPosition === void 0 ? void 0 : cssPosition.y;
-    return [xOffset, yOffset];
-};
-// 重叠计算
-const isOverlap = (cssOffset, widthOffset) => {
-    if (cssOffsetLists.length === 0) {
-        return false;
-    }
-    const hasOverlapPoint = cssOffsetLists.find(item => ((cssOffset[0] >= item[0] - widthOffset && cssOffset[0] <= item[0] + widthOffset)
-        || (cssOffset[1] >= item[1] - cssHeight && cssOffset[1] <= item[1] + cssHeight)));
-    return !!hasOverlapPoint;
-};
-const getFormatedItemLabels = (five, labels) => {
-    // 计算位置 & 可见性
-    const newLabels = labels.map(label => {
-        // 不在绑定点位则直接不可见
-        if (five.state.panoIndex !== label.panoIndex) {
-            return Object.assign(Object.assign({}, label), { visible: false });
-        }
-        const cssOffset = getLabelCssOffset(five, label);
-        const curLabelWidth = label.name.length * basicWidth;
-        const strokeLength = getStrokeLength(label.modelPosition[1], displayStrategyType);
-        // 是否加入碰撞检测
-        // 配置加入碰撞检测，则判断碰撞检测
-        // 在可见范围内， 仅在 Panorama 模态计算
-        const isInViewport = five.currentMode === Five.Mode.Panorama
-            ? judgeInViewport(new Vector3(label.position[0], label.position[1], label.position[2]))
-            : true;
-        // 碰撞
-        const isBlocked = modelOcclusionEnable
-            ? judgeImpacted(five, label)
-            : false;
-        const visible = isInViewport && !isBlocked;
-        // 关掉重叠计算
-        // const visible = naturalVisible && !isOverlap([cssOffset[0], cssOffset[1] + strokeLength], curLabelWidth)
-        if (!visible)
-            return Object.assign(Object.assign({}, label), { visible });
-        cssOffsetLists.push(cssOffset);
-        // position
-        const transform = getLabelTransform(cssOffset);
-        return Object.assign(Object.assign({}, label), { visible, transform, strokeLength });
-    });
-    const sortedItemLabelItems = newLabels
-        .filter(({ visible }) => visible)
-        .map(label => ({
-        itemLabelItem: label,
-        distance: new Vector3(label.modelPosition[0], label.modelPosition[1], label.modelPosition[2]).clone().distanceTo(five.camera.position)
-    }))
-        .sort((a, b) => a.distance - b.distance);
-    return newLabels.map(label => {
-        const sortIndex = sortedItemLabelItems.findIndex(item => item.itemLabelItem.id === label.id);
-        if (sortIndex !== undefined)
-            return Object.assign(Object.assign({}, label), { zIndex: sortIndex * 10 });
-        return label;
-    });
-};
-const onItemLabelUpdate = () => {
-    cssOffsetLists = [];
-    renderItemLabels = getFormatedItemLabels(five, renderItemLabels);
-};
-const handleCameraUpdateCallback = () => {
-    itemsVisible = false;
-    handleCameraUpdate();
-};
-const onFiveModeChange = (mode) => {
-    itemsVisible = false;
-    five.once('initAnimationEnded', (panoIndex, pose, userAction) => {
-        anchorEnabled = mode === Five.Mode.Panorama;
-        itemsVisible = true;
-        if (!userAction)
-            return;
-        else
-            onItemLabelUpdate();
-    });
-};
-const handleCameraUpdate = debounce(() => {
-    itemsVisible = true;
-    onItemLabelUpdate();
-}, 300);
-const onResize = () => {
-    five.once('renderFrame', onItemLabelUpdate);
-};
-const addResizeListener = () => {
-    window.addEventListener('resize', onResize, false);
-};
-const addDataUpdateListener = () => {
-    if (curItemLabels !== itemLabels) {
-        renderItemLabels = transform2RenderData(itemLabels);
-        curItemLabels = itemLabels;
-        onItemLabelUpdate();
-    }
-};
-const getNearObserverPano = (fromPositionVector, observers) => {
-    let candidates = [];
-    for (let i = 0; i < observers.length; i++) {
-        const { position: obVector, panoIndex } = observers[i];
-        const distance = fromPositionVector.distanceTo(obVector);
-        if (maxVisibleDistance === undefined || distance <= maxVisibleDistance || five.state.mode !== Five.Mode.Panorama) {
-            candidates.push({
-                panoIndex,
-                obVector,
-                distance
-            });
-        }
-    }
-    candidates = candidates.sort((a, b) => a.distance - b.distance);
-    let observerIndex;
-    for (let i = 0; i < candidates.length; i++) {
-        const { obVector, distance, panoIndex } = candidates[i];
-        const isImpactedRes = isImpacted(five, fromPositionVector, obVector, distance);
-        if (!isImpactedRes) {
-            observerIndex = panoIndex;
-            break;
-        }
-    }
-    return typeof observerIndex === "number" ? observers[observerIndex] : undefined;
-};
-const onIconClick = (itemLabel) => {
-    if (five.state.mode === Five.Mode.Panorama)
-        return;
-    const observers = five.work.observers;
-    const fromPositionVector = new Vector3().fromArray(itemLabel.position);
-    const observer = getNearObserverPano(fromPositionVector, observers);
-    if (observer) {
-        itemLabel.observerIndex = observer.panoIndex;
-    }
-    if (typeof itemLabel.observerIndex === "number") {
-        const observer = observers[itemLabel.observerIndex];
-        const direction = fromPositionVector.clone().sub(observer.position).normalize();
-        const cameraCoord = {
-            longitude: Math.PI + Math.atan2(direction.x, direction.z),
-            latitude: Math.acos(direction.y / direction.length()) - Math.PI / 2,
-        };
-        five.setState(Object.assign(Object.assign({}, cameraCoord), { mode: Five.Mode.Panorama, panoIndex: itemLabel.observerIndex }));
-        // 游走结束更新 render list
-        five.once('initAnimationEnded', () => {
-            renderItemLabels = renderItemLabels.map(item => {
-                return Object.assign(Object.assign({}, item), { isFold: item.id !== itemLabel.id });
-            });
-            five.once('cameraUpdate', () => {
-                renderItemLabels = renderItemLabels.map(item => {
-                    return Object.assign(Object.assign({}, item), { isFold: false });
-                });
-            });
-        });
-    }
-};
-beforeUpdate(() => {
-    addDataUpdateListener();
-});
-onMount(() => {
-    renderItemLabels = transform2RenderData(itemLabels);
-    curItemLabels = itemLabels;
-    onItemLabelUpdate();
-    addResizeListener();
-    five.on('cameraUpdate', handleCameraUpdateCallback);
-    // five.on('modeChange', onFiveModeChange)
-});
-onDestroy(() => {
-    five.off('cameraUpdate', handleCameraUpdateCallback);
-    // five.off('modeChange', onFiveModeChange)
-    window.removeEventListener('resize', onResize, false);
-});
-</script>
-
-<div class="item-labels-container" bind:clientWidth="{containerWidth}" bind:clientHeight="{containerHeight}"
-     style:opacity="{itemsVisible ? 1 : 0}">
-	{#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
-		{#if itemLabelItem.visible}
-			<ItemLabelItem
-					itemLabel="{itemLabelItem}"
-					hooks="{hooks}"
-					anchorEnabled="{anchorEnabled}"
-					onIconClick="{onIconClick}"
-			/>
-		{/if}
-	{/each}
-</div>
-
-<style>
-    .item-labels-container {
-        width: 100%;
-        height: 100%;
-        position: relative;
-    }
-</style>

package/libs/ItemLabelPlugin/ItemLabelItem.svelte

@@ -1,180 +0,0 @@
-<script>import "./events.type";
-import classNames from 'classnames';
-export let itemLabel;
-export let hooks;
-export let anchorEnabled;
-export let onIconClick;
-// const defaultIcon = '//vrlab-public.ljcdn.com/common/file/web/c8591aaa-e62b-4e31-8fed-671483ace37f.svg\n'
-function onClick() {
-    hooks.emit('onLabelClick', itemLabel);
-}
-let customElement;
-$: {
-    if (typeof itemLabel.render === 'function' && customElement) {
-        if (customElement.children.length === 0) {
-            const child = itemLabel.render(itemLabel);
-            if (child) {
-                customElement.appendChild(child);
-            }
-        }
-    }
-}
-</script>
-
-<div class={classNames("item-label-item", { fold: itemLabel.isFold })}
-     style:z-index="{itemLabel.zIndex}"
-     style:transform="{itemLabel.transform}"
->
-	<div class={classNames("item-label-item__text-wrap", { 'item-label-item__custom': Boolean(typeof itemLabel.render === 'function') })}
-	     style="bottom: {`${itemLabel.strokeLength}px`}"
-	     on:click="{onClick}"
-	>
-        {#if Boolean(typeof itemLabel.render === 'function')}
-            <div bind:this={customElement}></div>
-        {:else}
-            {#if itemLabel.icon}
-                <div class="icon-wrap"
-                    on:click="{(e) => onIconClick(itemLabel)}"
-                >
-                    <div class="icon" style={`background-image: url(${itemLabel.icon})`} ></div>
-                </div>
-            {/if}
-            <div class="item-label-text">
-                <span class="item-model">{itemLabel.code || itemLabel.id}</span>
-                <span class="item-name">{itemLabel.name}</span>
-            </div>
-        {/if}
-		
-	</div>
-	<div class={classNames("item-label-item__bar", { anchor: anchorEnabled })}
-	     style="height: {`${itemLabel.strokeLength}px`}">
-	</div>
-</div>
-
-<style>
-    .item-label-item {
-        position: absolute;
-        z-index: 0;
-        transform: none;
-        cursor: pointer;
-        pointer-events: none;
-        user-select: none;
-        animation: fadeIn .3s ease-in;
-    }
-
-    .item-label-item.fold >.item-label-item__text-wrap  {
-	    visibility: hidden;
-    }
-
-    .item-label-item.fold >.item-label-item__bar.anchor {
-	    visibility: hidden;
-    }
-
-    .item-label-item.fold >.item-label-item__bar.anchor:after  {
-	    visibility: visible;
-    }
-
-    .item-label-item__text-wrap {
-        height: fit-content;
-        padding: 12px 20px 12px 12px;
-        position: absolute;
-        width: max-content;
-        max-width: 473px;
-        min-height: 92px;
-        background-image: linear-gradient(269deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.60) 49%, rgba(31, 38, 46, 0.70) 100%);
-        border: 1.5px solid rgba(255, 255, 255, .65);
-        border-radius: 3px;
-        color: white;
-        transform: translate(-50%, 0);
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        box-sizing: border-box;
-        overflow: hidden;
-        pointer-events: all;
-    }
-
-    .item-label-item__custom {
-        padding: 12px;
-        max-width: unset;
-        min-height: unset;
-    }
-
-    .icon-wrap {
-        width: 68px;
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-content: center;
-    }
-
-    .icon {
-        width: 68px;
-        height: 68px;
-        background-repeat: no-repeat;
-        background-size: contain;
-        background-position: center;
-    }
-
-    .item-label-text {
-        margin-left: 12px;
-        padding-left: 12px;
-        min-height: 68px;
-        height: auto;
-        display: flex;
-        flex-flow: column;
-        justify-content: space-around;
-        align-content: flex-start;
-        border-left: solid rgba(255, 255, 255, .2) 1px;
-        border-top: solid rgba(255, 255, 255, .2) 0;
-        border-right: solid rgba(255, 255, 255, .2) 0;
-        border-bottom: solid rgba(255, 255, 255, .2) 0;
-        pointer-events: auto;
-    }
-
-    .item-model {
-        white-space: nowrap;
-        font-size: 22px;
-        font-weight: bold;
-        line-height: 30px;
-    }
-
-    .item-name {
-        height: auto;
-        word-wrap: break-word;
-        word-break: break-all;
-        font-size: 20px;
-        line-height: 28px;
-    }
-
-    .item-label-item__bar {
-        position: absolute;
-        bottom: 0;
-        width: 3px;
-        background-image: linear-gradient(to bottom, white, rgba(255, 255, 255, 0));
-        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.20);
-        pointer-events: none;
-    }
-
-    .item-label-item__bar.anchor:after {
-        content: '';
-        position: absolute;
-        bottom: 0;
-        width: 24px;
-        height: 24px;
-        background-image: url("//vrlab-public.ljcdn.com/common/file/web/67e7a198-28c9-47dc-879b-507bd3ae600c.png ");
-        background-position: center;
-        background-size: contain;
-        transform: translate(-10.5px, 50%);
-    }
-
-    @keyframes fadeIn {
-        from {
-            opacity: 0
-        }
-        to {
-            opacity: 1
-        }
-    }
-</style>
-