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

package/libs/PanoSpatialTagPlugin/Components/origins.svelte

@@ -1,58 +0,0 @@
-<script>import { currentTarget } from '../store';
-export let origins;
-const handleClick = (id) => {
-    currentTarget.update(() => `${id}-PanoSpatialTagPlugin-${Date.now()}`);
-};
-</script>
-
-{#each origins as origin}
-  <i 
-    class:PanoSpatialTagPlugin__tag-origin={true}
-    class:PanoSpatialTagPlugin__tag-origin-destroy={origin.destroying}
-    style:top="{origin.top}%"
-    style:left="{origin.left}%"
-    style:visibility="{origin.front ? 'visible' : 'hidden'}"
-    on:click="{() => handleClick(origin.id)}"
-  />
-{/each}
-
-<style>
-  .PanoSpatialTagPlugin__tag-origin {
-    position: absolute;
-    width: 0.5rem;
-    height: 0.5rem;
-    border-radius: 50%;
-    background: #fff;
-    box-shadow: 0 0 .6rem #fff;
-    transform: translate(-50%, -50%) scale(1);
-    transform-origin: center center;
-    animation: PanoSpatialTagPlugin__tag-origin 1.2s forwards;
-    pointer-events: auto;
-  }
-
-  .PanoSpatialTagPlugin__tag-origin:after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    height: 50%;
-    width: 2rem;
-    height: 2rem;
-    transform: translate(-50%, -50%);
-  }
-
-  .PanoSpatialTagPlugin__tag-origin-destroy {
-    transform: translate(-50%, -50%) scale(0.6);
-    animation: PanoSpatialTagPlugin__tag-origin-destroy 1.2s forwards .7s;
-  }
-
-  @keyframes PanoSpatialTagPlugin__tag-origin {
-    0% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
-    100% { transform: translate(-50%, -50%) scale(0.6); opacity: 1 }
-  }
-
-  @keyframes PanoSpatialTagPlugin__tag-origin-destroy {
-    0% { transform: translate(-50%, -50%) scale(0.6); opacity: 1; }
-    10% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
-    100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
-  }
-</style>

package/libs/PanoSpatialTagPlugin/Components/tag.svelte

@@ -1,292 +0,0 @@
-<script>import { onMount, onDestroy, afterUpdate } from 'svelte';
-import '../typings';
-import { currentTarget } from '../store';
-export let id;
-export let upsideDown;
-export let content;
-export let contentZoom;
-export let lineWidthZoom;
-export let lineHeightZoom;
-export let destroying = false;
-export let folded;
-export let dispose;
-export let events;
-export let hooks;
-let contentWidth = 0;
-let contentHeight = 0;
-let contentDom;
-let show;
-let timeoutId = setTimeout(() => {
-    if (!folded)
-        show = true;
-    timeoutId = undefined;
-}, 100);
-const handleClickContent = event => {
-    const eventsName = Object.keys(events);
-    let node = event.target;
-    while (node) {
-        const classNames = node.getAttribute('class');
-        if (!classNames) {
-            node = node.parentNode;
-            continue;
-        }
-        if (classNames.includes('PanoSpatialTagPlugin__tag-content')) {
-            node = null;
-            break;
-        }
-        eventsName.forEach(key => {
-            if (classNames.includes(key))
-                events[key](id);
-        });
-        node = node.parentNode;
-    }
-};
-onMount(() => {
-    hooks.emit('initTag', { id });
-});
-const unsubscribe = currentTarget.subscribe((str) => {
-    if (str === null)
-        return;
-    const [currentId, date] = str.split('-PanoSpatialTagPlugin-');
-    if (id === currentId) {
-        hooks.emit('clickOrigin', { id, show });
-        if (!timeoutId) {
-            show = folded;
-            folded = !folded;
-            timeoutId = setTimeout(() => {
-                timeoutId = undefined;
-            }, 1500);
-        }
-    }
-});
-afterUpdate(() => {
-    contentWidth = contentDom.offsetWidth;
-    contentHeight = contentDom.offsetHeight;
-    if (timeoutId)
-        return;
-    show = !folded;
-});
-onDestroy(() => {
-    hooks.emit('destroyTag', { id });
-    unsubscribe();
-    dispose();
-});
-</script>
-
-<div
-  class:PanoSpatialTagPlugin__tag-x={true}
-  class:PanoSpatialTagPlugin__tag-upside-down={upsideDown}
-  class:PanoSpatialTagPlugin__tag-show={show}
-  class:PanoSpatialTagPlugin__tag-hide={show === false || destroying}
-  id={'PanoSpatialTagPlugin__' + id}
-  style="height: {20 * lineHeightZoom}rem"
->
-  <div class="PanoSpatialTagPlugin__tag-shadow"
-    style="transform: translate({contentWidth / 2 * contentZoom * 3}px, {
-      contentHeight / 2 * (upsideDown ? -1 : 1) * contentZoom * 3
-    }px) scale({1 / contentZoom})"
-  />
-  <div class="PanoSpatialTagPlugin__tag-line">
-    <i class="PanoSpatialTagPlugin__tag-flagpole"
-      style="width: {lineWidthZoom}rem;"
-    />
-    <i class="PanoSpatialTagPlugin__tag-line1"/>
-    <i class="PanoSpatialTagPlugin__tag-line2"/>
-  </div>
-  <div class="PanoSpatialTagPlugin__tag-animate" style="transform: scale({contentZoom * 3})">
-    <div class="PanoSpatialTagPlugin__tag-content" on:click="{handleClickContent}" bind:this={contentDom}>
-      {@html content}
-    </div>
-  </div>
-</div>
-
-<style>
-  .PanoSpatialTagPlugin__tag-x {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: block;
-    white-space: nowrap;
-    box-sizing: border-box;
-    width: 25rem;
-    height: 14rem;
-    color: #FFF;
-    transform: translate(0, -100%);
-    transition: height .5s linear;
-  }
-
-  .PanoSpatialTagPlugin__tag-shadow {
-    content: '';
-    position: absolute;
-    width: 30rem;
-    height: 30rem;
-    top: -15rem;
-    left: -15rem;
-    z-index: -1;
-    opacity: 0;
-    transition: opacity .8s .6s;
-    background: url('https://vrlab-image4.ljcdn.com/release/web/PanoSpatialTagPlugin__blur.png');
-    background-size: 30rem 30rem;
-  }
-
-  .PanoSpatialTagPlugin__tag-line {
-    position: absolute;
-    left: -1rem;
-    width: 2rem;
-    height: 100%;
-    overflow: hidden;
-  }
-
-  .PanoSpatialTagPlugin__tag-flagpole {
-    position: absolute;
-    top: 0;
-    left: 1rem;
-    height: calc(100% - 1.5rem);
-    width: .15rem;
-    background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, .1));
-    box-shadow: 0 .1rem .5rem rgba(0, 0, 0, .2);
-    opacity: 0;
-    transform: translate(-50%, 60%) scaleY(0);
-    transition: transform .4s cubic-bezier(.44,.44,.74,.98) , opacity .4s cubic-bezier(.44,.44,.74,.98), width .5s linear, height .5s linear ;
-    transform-origin: center bottom;
-  }
-
-  .PanoSpatialTagPlugin__tag-line1 {
-    position: absolute;
-    top: 0;
-    left: 0.3rem;
-    height: 1.8rem;
-    width: .1rem;
-    background: #fff;
-    opacity: 0;
-    transform: translate(-50%, 200%) scaleY(0);
-    transform-origin: center top;
-  }
-
-  .PanoSpatialTagPlugin__tag-line2 {
-    position: absolute;
-    top: 0;
-    left: 0.5rem;
-    height: 1.8rem;
-    width: .1rem;
-    background: #fff;
-    opacity: 0;
-    transform: translate(-50%, 200%) scaleY(0);
-    transform-origin: center top;
-  }
-
-  .PanoSpatialTagPlugin__tag-show .PanoSpatialTagPlugin__tag-line1 {
-    animation: PanoSpatialTagPlugin__tag-line1 linear .5s forwards .45s;
-  }
-
-  .PanoSpatialTagPlugin__tag-show .PanoSpatialTagPlugin__tag-line2 {
-    animation: PanoSpatialTagPlugin__tag-line2 linear .5s forwards .65s;
-  }
-
-  .PanoSpatialTagPlugin__tag-x.PanoSpatialTagPlugin__tag-upside-down {
-    transform: translate(0, 0);
-  }
-
-  .PanoSpatialTagPlugin__tag-upside-down .PanoSpatialTagPlugin__tag-line {
-    transform: scaleY(-1);
-  }
-
-  .PanoSpatialTagPlugin__tag-animate {
-    position: relative;
-    height: 100%;
-    overflow: hidden;
-    transform-origin: left top;
-    transition: transform .5s linear;
-  }
-
-  .PanoSpatialTagPlugin__tag-upside-down .PanoSpatialTagPlugin__tag-animate{
-    transform-origin: left bottom;
-  }
-
-  .PanoSpatialTagPlugin__tag-content {
-    position: absolute;
-    display: inline-block;
-    transform: translate(-100%, 0);
-    transition: transform .9s cubic-bezier(0,.65,.16,1.08) .6s;
-    padding-left: .5rem;
-    font-size: 1rem;
-  }
-
-  .PanoSpatialTagPlugin__tag-upside-down .PanoSpatialTagPlugin__tag-content{
-    bottom: 0;
-  }
-
-  .PanoSpatialTagPlugin__tag-show .PanoSpatialTagPlugin__tag-flagpole {
-    opacity: 1;
-    transform: translate(-50%, 0) scaleY(1);
-  }
-
-  .PanoSpatialTagPlugin__tag-upside-down .PanoSpatialTagPlugin__tag-shadow {
-    top: unset;
-    bottom: -15rem;
-  }
-
-  .PanoSpatialTagPlugin__tag-show .PanoSpatialTagPlugin__tag-shadow {
-    opacity: .32;
-  }
-
-  .PanoSpatialTagPlugin__tag-show .PanoSpatialTagPlugin__tag-content {
-    transform: translate(0, 0);
-  }
-
-  .PanoSpatialTagPlugin__tag-hide .PanoSpatialTagPlugin__tag-flagpole {
-    opacity: 0;
-    transform: translate(-50%, 60%) scaleY(0);
-    transition: transform .5s .55s, opacity .4s .55s;
-  }
-
-  .PanoSpatialTagPlugin__tag-hide .PanoSpatialTagPlugin__tag-shadow {
-    opacity: 0;
-    transition: opacity .8s;
-  }
-
-  .PanoSpatialTagPlugin__tag-hide .PanoSpatialTagPlugin__tag-content {
-    transform: translate(-100%, 0);
-    transition: transform .6s cubic-bezier(.53,.06,.88,.59);
-  }
-
-  .PanoSpatialTagPlugin__tag-hide .PanoSpatialTagPlugin__tag-content * {
-    pointer-events: none;
-  }
-
-  .PanoSpatialTagPlugin__tag-hide .PanoSpatialTagPlugin__tag-line1 {
-    opacity: 0.5;
-    transform: translate(-50%, 10%) scaleY(0);
-    animation: PanoSpatialTagPlugin__tag-line1-hide linear .28s forwards .3s;
-  }
-
-  .PanoSpatialTagPlugin__tag-hide .PanoSpatialTagPlugin__tag-line2 {
-    opacity: 0.5;
-    transform: translate(-50%, 0) scaleY(0);
-    animation: PanoSpatialTagPlugin__tag-line2-hide linear .28s forwards .45s;
-  }
-
-  @keyframes PanoSpatialTagPlugin__tag-line1 {
-    0% { opacity: 0; transform: translate(-50%, 250%) scaleY(1); }
-    50% { opacity: 0.5; transform: translate(-50%, 135%) scaleY(1); }
-    100% { opacity: 0.5; transform: translate(-50%, 20%) scaleY(0); }
-  }
-
-  @keyframes PanoSpatialTagPlugin__tag-line2 {
-    0% { opacity: 0; transform: translate(-50%, 250%) scaleY(1); }
-    50% { opacity: 0.5; transform: translate(-50%, 125%) scaleY(1); }
-    100% { opacity: 0.5; transform: translate(-50%, 0) scaleY(0); }
-  }
-
-  @keyframes PanoSpatialTagPlugin__tag-line1-hide {
-    0% { opacity: 0.5; transform: translate(-50%, 10%) scaleY(0); }
-    50% { opacity: 0.2; transform: translate(-50%, 105%) scaleY(1); }
-    100% { opacity: 0; transform: translate(-50%, 200%) scaleY(0); }
-  }
-
-  @keyframes PanoSpatialTagPlugin__tag-line2-hide {
-    0% { opacity: 0.5; transform: translate(-50%, 0) scaleY(0); }
-    50% { opacity: 0.2; transform: translate(-50%, 100%) scaleY(1); }
-    100% { opacity: 0; transform: translate(-50%, 200%) scaleY(0); }
-  }
-</style>

package/libs/floorplan/Components/BaseImage.svelte

@@ -1,26 +0,0 @@
-<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

@@ -1,46 +0,0 @@
-<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

@@ -1,51 +0,0 @@
-<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

@@ -1,46 +0,0 @@
-<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

@@ -1,51 +0,0 @@
-<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

@@ -1,11 +0,0 @@
-<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

@@ -1,27 +0,0 @@
-<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

@@ -1,29 +0,0 @@
-<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>