@realsee/dnalogel 2.1.0-alpha.16 → 2.1.0-alpha.17

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,91 +0,0 @@
-<script>var _a;
-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 = (_a = five.model.shownFloor) !== null && _a !== void 0 ? _a : null;
-$: rendererSize = { x: containerWidth, y: containerHeight };
-$: {
-    // rendererSize 和 shownFloor 变化时，触发 reRender
-    roomLabels = getFormatedRoomLabels({ rendererSize, shownFloor });
-}
-function getLabelVisible(item) {
-    const isLabelInFloor = shownFloor === null || item.floorIndex === shownFloor;
-    if (!isLabelInFloor)
-        return false;
-    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(params) {
-    const { rendererSize, shownFloor } = params;
-    // 因为 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, shownFloor });
-}
-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>

package/libs/PanoDoorLabelPlugin/DoorLabelItem.svelte

@@ -1,200 +0,0 @@
-<script>import classnames from 'classnames';
-export let props;
-export let onClick;
-let divElement;
-let { left, top, inSight, transform, panoIndex, cameraToward, name } = props;
-let prevPanoIndexRef = 0;
-const initPanoIndex = () => {
-    if (!left || !top || !inSight) {
-        return;
-    }
-    if (!divElement)
-        return;
-    const _width = (divElement.current.clientWidth / window.innerWidth) * 100;
-    const _height = (divElement.current.clientHeight / window.innerHeight) * 100;
-    if (left <= _width / 2 || left >= 100 - _width / 2) {
-        return;
-    }
-    if (top <= _height / 2 || top >= 100 - _height / 2) {
-        return;
-    }
-    const prevPanoIndex = prevPanoIndexRef;
-    if (panoIndex !== prevPanoIndex) {
-        // 触发埋点
-        console.log('panoDoorLabelPlugin', panoIndex, '触发埋点');
-        // 这里触发曝光埋点
-        prevPanoIndexRef = panoIndex;
-    }
-};
-$: {
-    initPanoIndex();
-}
-</script>
-
-<template>
-  <div
-    bind:this="{divElement}"
-    style="{`left: ${left || 0}%;top: ${top || 0}%;opacity: ${inSight ? 1 : 0}`}"
-    class="plugin-DoorLabelPlugin-item"
-  >
-    <div
-      class="{classnames('plugin-DoorLabelPlugin-cnt', props.toward)}"
-      style="{`transform: ${transform || 'initial'};pointer-events: ${
-        inSight ? 'auto' : 'none'
-      };opacity: ${inSight ? 1 : 0}`}"
-      data-camera-toward="{cameraToward}"
-      on:click="{(e) => {
-        if (onClick) onClick()
-      }}"
-    >
-      <span class="plugin-DoorLabelPlugin-txt">{name}</span>
-      <i class="plugin-DoorLabelPlugin-icon"></i>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-  .plugin-DoorLabelPlugin-item {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 0;
-    height: 0;
-    pointer-events: none;
-    transition: opacity 0.3s ease;
-  }
-
-  .plugin-DoorLabelPlugin-cnt {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    border-radius: 2px;
-    background: rgba(0, 0, 0, 0.35);
-    line-height: 12px;
-    padding: 6px;
-    white-space: nowrap;
-    font-size: 12px;
-    font-style: normal;
-    // pointer-events: auto;
-    color: white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: transform ease 1s, background ease 0.3s, color ease 0.3s;
-    &::after {
-      content: '';
-      display: block;
-      position: absolute;
-      top: -1px;
-      left: -1px;
-      bottom: -1px;
-      right: -1px;
-      border-radius: 2px;
-      border: 1px solid rgba(0, 0, 0, 0);
-      border-image: url('//vrlab-image4.ljcdn.com/release/web/highlightCarouseal-border-image.14b51834.png')
-        4;
-      transition: opacity ease 0.3s;
-    }
-    &:active,
-    &:focus {
-      background: rgba(0, 0, 0, 0.5);
-      color: rgba(255, 255, 255, 0.5);
-    }
-  }
-
-  .plugin-DoorLabelPlugin-icon {
-    background: url('//vrlab-image4.ljcdn.com/release/web/DoorLabel-icon.de1304ae.svg') no-repeat;
-    background-size: 100%;
-    display: inline-block;
-    width: 10px;
-    height: 10px;
-    margin-left: 4px;
-    transform-origin: center;
-  }
-
-  .plugin-DoorLabelPlugin-cnt[data-camera-toward='forward'] {
-    &.left {
-      .plugin-DoorLabelPlugin-icon {
-        transform: rotate(90deg);
-      }
-    }
-    &.right {
-      .plugin-DoorLabelPlugin-txt {
-        order: 1;
-      }
-      .plugin-DoorLabelPlugin-icon {
-        transform: rotate(-90deg);
-        margin-left: 0;
-        margin-right: 4px;
-        order: 0;
-      }
-    }
-  }
-  .plugin-DoorLabelPlugin-cnt[data-camera-toward='right'] {
-    &.forward {
-      .plugin-DoorLabelPlugin-icon {
-        transform: rotate(90deg);
-      }
-    }
-    &.back {
-      .plugin-DoorLabelPlugin-txt {
-        order: 1;
-      }
-      .plugin-DoorLabelPlugin-icon {
-        transform: rotate(-90deg);
-        margin-left: 0;
-        margin-right: 4px;
-        order: 0;
-      }
-    }
-  }
-  .plugin-DoorLabelPlugin-cnt[data-camera-toward='left'] {
-    &.back {
-      .plugin-DoorLabelPlugin-icon {
-        transform: rotate(90deg);
-      }
-    }
-    &.forward {
-      .plugin-DoorLabelPlugin-txt {
-        order: 1;
-      }
-      .plugin-DoorLabelPlugin-icon {
-        transform: rotate(-90deg);
-        margin-left: 0;
-        margin-right: 4px;
-        order: 0;
-      }
-    }
-  }
-  .plugin-DoorLabelPlugin-cnt[data-camera-toward='back'] {
-    &.right {
-      .plugin-DoorLabelPlugin-icon {
-        transform: rotate(90deg);
-      }
-    }
-    &.left {
-      .plugin-DoorLabelPlugin-txt {
-        order: 1;
-      }
-      .plugin-DoorLabelPlugin-icon {
-        transform: rotate(-90deg);
-        margin-left: 0;
-        margin-right: 4px;
-        order: 0;
-      }
-    }
-  }
-
-  .plugin-DoorLabelPlugin-cnt--customBrand {
-    color: #f9eac1;
-    .plugin-DoorLabelPlugin-icon {
-      background: url('//vrlab-image4.ljcdn.com/release/web/arrow.6e8ec00e.svg') no-repeat;
-    }
-    &:active,
-    &:focus {
-      background: rgba(0, 0, 0, 0.5);
-      color: rgba(249, 234, 193, 0.5);
-    }
-  }
-</style>