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

package/libs/ItemLabelPlugin/ItemLabelItem.svelte

@@ -1,183 +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: 0;
-        max-width: unset;
-        min-height: unset;
-        background-image: unset;
-        border: 0;
-        border-radius: 0;
-    }
-
-    .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>
-

package/libs/ModelItemLabelPlugin/ItemLabelComponent.svelte

@@ -1,155 +0,0 @@
-<script>import { DISPLAY_STRATEGY_TYPE } from "./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';
-const { Raycaster, Vector3 } = THREE;
-export let five;
-export let modelOcclusionEnable;
-export let itemLabels;
-export let hooks;
-export let displayStrategyType;
-let curItemLabels = null;
-let renderItemLabels = null;
-let containerWidth;
-let containerHeight;
-// 计算重叠
-let cssOffsetLists = [];
-let cssHeight = 26;
-let basicWidth = 11;
-// 动画过程中 itemsVisible 为 false
-let itemsVisible = true;
-/**
- * 可见性策略：
- * 1、当前楼层(假设先不考虑多楼层)
- * 2、模型未被遮挡（一个 box 有没有被遮挡的计算？ TODO）
- * */
-const getLabelVisible = (five, itemLabel) => {
-    // 虚拟 VR 仅有一层，不考虑楼层信息
-    const raycaster = new Raycaster();
-    const cameraPosition = five.camera.position.clone();
-    const modelPosition = new Vector3().fromArray(itemLabel.modelPosition);
-    // 计算点到相机的位置
-    const vectorDistance = modelPosition.distanceTo(cameraPosition);
-    raycaster.set(cameraPosition.clone(), modelPosition.clone().sub(cameraPosition).normalize());
-    const [intersection] = five.model.intersectRaycaster(raycaster);
-    return !(intersection && intersection.distance + 1 < vectorDistance);
-};
-// 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 getLabelTransform = (cssOffset) => {
-    return `translate(${cssOffset[0]}px, ${cssOffset[1]}px)`;
-};
-// 重叠计算
-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;
-};
-function getStrokeLength(itemSpaceHeight, type) {
-    switch (type) {
-        case DISPLAY_STRATEGY_TYPE.SMALL:
-            return Math.ceil(-27.78 * itemSpaceHeight + 85);
-        case DISPLAY_STRATEGY_TYPE.MIDLLE:
-            return Math.ceil(-38.9 * itemSpaceHeight + 130);
-        case DISPLAY_STRATEGY_TYPE.LARGE:
-            return Math.ceil(-44.44 * itemSpaceHeight + 140);
-        case DISPLAY_STRATEGY_TYPE.EXTRA_LARGE:
-            return Math.ceil(-92.59 * itemSpaceHeight + 300);
-    }
-}
-const getFormatedItemLabels = (five, labels) => {
-    // 计算位置 & 可见性
-    const newLabels = labels.map(label => {
-        const cssOffset = getLabelCssOffset(five, label);
-        const curLabelWidth = label.name.length * basicWidth;
-        const strokeLength = getStrokeLength(label.modelPosition[1], displayStrategyType);
-        // 是否加入碰撞检测
-        const naturalVisible = modelOcclusionEnable ? getLabelVisible(five, label) : true;
-        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);
-};
-beforeUpdate(() => {
-    addDataUpdateListener();
-});
-const handleCameraUpdateCallback = () => {
-    itemsVisible = false;
-    handleCameraUpdate();
-};
-onMount(() => {
-    renderItemLabels = itemLabels;
-    curItemLabels = itemLabels;
-    onItemLabelUpdate();
-    addResizeListener();
-    five.on('cameraUpdate', handleCameraUpdateCallback);
-});
-const handleCameraUpdate = debounce(() => {
-    itemsVisible = true;
-    onItemLabelUpdate();
-}, 300);
-const addResizeListener = () => {
-    window.addEventListener('resize', onResize, false);
-};
-const addDataUpdateListener = () => {
-    if (curItemLabels !== itemLabels) {
-        renderItemLabels = itemLabels;
-        curItemLabels = itemLabels;
-        onItemLabelUpdate();
-    }
-};
-const onResize = () => {
-    five.once('renderFrame', onItemLabelUpdate);
-};
-onDestroy(() => {
-    five.off('cameraUpdate', handleCameraUpdateCallback);
-    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)}
-		<ItemLabelItem itemLabel="{itemLabelItem}" hooks="{hooks}" />
-	{/each}
-</div>
-
-<style>
-    .item-labels-container {
-        width: 100%;
-        height: 100%;
-        position: relative;
-    }
-</style>

package/libs/ModelItemLabelPlugin/ItemLabelItem.svelte

@@ -1,100 +0,0 @@
-<script>import "./events.type";
-import classNames from 'classnames';
-export let itemLabel;
-export let hooks;
-function onClick() {
-    console.log('__onclick___: ', itemLabel);
-    hooks.emit('onLabelClick', itemLabel);
-}
-</script>
-
-<div
-		class={classNames("item-label-item", { visible: itemLabel.visible })}
-		style:z-index="{itemLabel.zIndex}"
-		style:transform="{itemLabel.transform}"
->
-	<div
-			class="item-label-item__text-wrap"
-			style="top: {`-${itemLabel.strokeLength + 26}px`}"
-	>
-			<span
-					class="item-label-item__text"
-					on:click="{onClick}"
-			>{itemLabel.name.length > 6 ? `${itemLabel.name.slice(0, 6)}...` : itemLabel.name}</span>
-	</div>
-	<div
-			class="item-label-item__bar"
-			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;
-        opacity: 0;
-    }
-
-    .item-label-item.visible {
-        opacity: 1;
-        animation: fadeIn .3s ease-in;
-    }
-
-    .item-label-item__text-wrap::before {
-        content: '';
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0, 0, 0, .3);
-        filter: blur(16px);
-        z-index: -1;
-    }
-
-    .item-label-item__text-wrap {
-        padding: 6px 6px 0;
-        position: absolute;
-        height: 20px;
-        pointer-events: all;
-        background-size: 100% 100%;
-        background-repeat: no-repeat;
-        white-space: nowrap;
-        line-height: 10px;
-        font-size: 11px;
-        font-weight: bold;
-        color: #FFEAC0;
-        transform: translate(-50%, 0);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    .item-label-item__text {
-        padding-bottom: 4px;
-        border-top: 0 solid;
-        border-left: 0 solid;
-        border-right: 0 solid;
-        border-bottom: 1px solid;
-        border-image: linear-gradient(to right, rgba(234, 208, 154, 0), rgba(234, 208, 154, 100), rgba(234, 208, 154, 0)) 4.5 1 4.5;
-    }
-
-    .item-label-item__bar {
-        position: absolute;
-        bottom: 0;
-        width: 1px;
-        background-image: linear-gradient(to bottom, rgba(234, 208, 154, 0), rgba(234, 208, 154, 1));
-    }
-
-    @keyframes fadeIn {
-        from {
-            opacity: 0
-        }
-        to {
-            opacity: 1
-        }
-    }
-</style>
-

package/libs/ModelRoomLabelPlugin/RoomLabelItem.svelte

@@ -1,63 +0,0 @@
-<script>import { ROOM_LABEL_BG } from './Assets/roomLabelBg';
-export let five;
-export let roomLabel;
-function onClick() {
-    five.setState({ panoIndex: roomLabel.panoIndex, mode: 'Panorama', longitude: roomLabel.longitude });
-}
-</script>
-
-<div
-  class="room-label-item"
-  style:z-index="{roomLabel.zIndex}"
-  style:transform="{roomLabel.transform}"
-  style:opacity="{roomLabel.visible ? 1 : 0}"
->
-  <span
-    class="room-label-item__text"
-    class:wide="{roomLabel.name.length > 3}"
-    style="background-image: url({ROOM_LABEL_BG})"
-    on:click="{onClick}">{roomLabel.name}</span
-  >
-  <div class="room-label-item__bar"></div>
-</div>
-
-<style>
-  .room-label-item {
-    position: absolute;
-    font-size: 8px;
-    z-index: 0;
-    transform: none;
-    cursor: pointer;
-    pointer-events: none;
-    user-select: none;
-  }
-
-  .room-label-item__text {
-    position: absolute;
-    left: 0;
-    top: -64px;
-    transform: translate(-50%, 0);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 20px;
-    min-width: 32px;
-    padding: 0 6px;
-    pointer-events: all;
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    white-space: nowrap;
-  }
-
-  .room-label-item__bar {
-    position: absolute;
-    top: -44px;
-    height: 48px;
-    width: 1px;
-    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
-  }
-
-  .wide {
-    font-size: 10px;
-  }
-</style>

package/libs/ModelRoomLabelPlugin/RoomLabelItems.svelte

@@ -1,94 +0,0 @@
-<script>import { onDestroy } from 'svelte';
-import { Raycaster, Vector3 } from 'three';
-import RoomLabelItem from './RoomLabelItem.svelte';
-export let five;
-export let roomLabels;
-let containerWidth;
-let containerHeight;
-let shownFloor = null;
-$: rendererSize = { x: containerWidth, y: containerHeight };
-$: {
-    // rendererSize 变化时，触发 reRender
-    roomLabels = getFormatedRoomLabels(rendererSize);
-}
-$: {
-    // shownFloor 变化时，更新 item visible
-    roomLabels = roomLabels.map((item) => {
-        const isLabelInFloor = shownFloor === null || item.floorIndex === shownFloor;
-        const visible = isLabelInFloor ? item.visible : false;
-        return Object.assign(Object.assign({}, item), { visible });
-    });
-}
-function getLabelVisible(item) {
-    const raycaster = new Raycaster();
-    const cameraPosition = five.camera.position.clone();
-    const position = new Vector3(item.position.x, item.position.y, item.position.z);
-    const vectorDistance = position.distanceTo(cameraPosition);
-    raycaster.set(cameraPosition.clone(), position.clone().sub(cameraPosition).normalize());
-    const [intersection] = five.model.intersectRaycaster(raycaster);
-    if (intersection && intersection.distance + 1 < vectorDistance)
-        return false;
-    return true;
-}
-function getLabelTransform(item, rendererSize) {
-    const position = new Vector3(item.position.x, item.position.y, item.position.z);
-    const mouse = position.clone().project(five.camera);
-    const xOffset = Math.ceil(((mouse.x + 1) / 2) * rendererSize.x);
-    const yOffset = Math.ceil(((-mouse.y + 1) / 2) * rendererSize.y);
-    return `translate(${xOffset}px, ${yOffset}px)`;
-}
-function getFormatedRoomLabels(rendererSize) {
-    // 因为 item distance 需要重复计算，所以缓存一下
-    const distanceMap = new Map();
-    function getItemDistance(item) {
-        const cacheDistance = distanceMap.get(item.id);
-        if (cacheDistance)
-            return cacheDistance;
-        const { x, y, z } = item.position;
-        const distance = new Vector3(x, y, z).clone().distanceTo(five.camera.position);
-        distanceMap.set(item.id, distance);
-        return distance;
-    }
-    const formatedItems = roomLabels.map((item) => {
-        const visible = getLabelVisible(item);
-        const transform = visible ? getLabelTransform(item, rendererSize) : item.transform;
-        const itemDistance = getItemDistance(item);
-        // visible === true 的 item 中，distance 比自己小的 item 个数
-        const minItemLen = roomLabels.filter((item) => item.visible && getItemDistance(item) < itemDistance).length;
-        const zIndex = minItemLen * 10;
-        return Object.assign(Object.assign({}, item), { visible, transform, zIndex });
-    });
-    return formatedItems;
-}
-function onFiveCameraUpdate() {
-    roomLabels = getFormatedRoomLabels(rendererSize);
-}
-function onFiveModelShownFloorChange(floorIndex) {
-    shownFloor = floorIndex;
-}
-five.on('cameraUpdate', onFiveCameraUpdate);
-five.on('modelShownFloorChange', onFiveModelShownFloorChange);
-onDestroy(() => {
-    five.off('cameraUpdate', onFiveCameraUpdate);
-    five.off('modelShownFloorChange', onFiveModelShownFloorChange);
-});
-</script>
-
-<div
-  class="room-labels-container"
-  bind:clientWidth="{containerWidth}"
-  bind:clientHeight="{containerHeight}"
->
-  {#each roomLabels as roomLableItem (roomLableItem.id)}
-    <RoomLabelItem roomLabel="{roomLableItem}" five="{five}" />
-  {/each}
-</div>
-
-<style>
-  .room-labels-container {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    color: #fff;
-  }
-</style>