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

package/libs/PanoTagPlugin/Components/TagWrapper.js

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.51.0 */
+/* generated by Svelte v3.52.0 */
 import {
 	SvelteComponent,
 	append,
@@ -148,9 +148,9 @@ function create_fragment(ctx) {
 			attr(div, "data-id", div_data_id_value = /*tag*/ ctx[1].id);
 			toggle_class(div, "hide", /*hide*/ ctx[10]);
 			toggle_class(div, "unfolded", /*unfolded*/ ctx[6]);
-			set_style(div, "left", /*left*/ ctx[9], false);
-			set_style(div, "top", /*top*/ ctx[8], false);
-			set_style(div, "z-index", /*zIndex*/ ctx[7], false);
+			set_style(div, "left", /*left*/ ctx[9]);
+			set_style(div, "top", /*top*/ ctx[8]);
+			set_style(div, "z-index", /*zIndex*/ ctx[7]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -219,15 +219,15 @@ function create_fragment(ctx) {
 			}
 
 			if (dirty & /*left*/ 512) {
-				set_style(div, "left", /*left*/ ctx[9], false);
+				set_style(div, "left", /*left*/ ctx[9]);
 			}
 
 			if (dirty & /*top*/ 256) {
-				set_style(div, "top", /*top*/ ctx[8], false);
+				set_style(div, "top", /*top*/ ctx[8]);
 			}
 
 			if (dirty & /*zIndex*/ 128) {
-				set_style(div, "z-index", /*zIndex*/ ctx[7], false);
+				set_style(div, "z-index", /*zIndex*/ ctx[7]);
 			}
 		},
 		i(local) {

package/libs/PanoTagPlugin/Components/TagWrapper.svelte

@@ -0,0 +1,64 @@
+<script>var _a, _b, _c, _d, _e;
+import { noTypecheck } from '../utils';
+import { DimensionType, ContentType, PointType } from '../typings';
+import TagContent from './Tag/index.svelte';
+import TagPoint from './Common/Point/PointSwitch.svelte';
+import 'svelte';
+export let withAnimation = false;
+export let tag;
+export let hooks;
+export let state;
+export let mediaStore;
+export let temporaryState;
+$: show = (_a = tag.state) === null || _a === void 0 ? void 0 : _a.visible;
+$: hide = !show;
+$: unfolded = (_b = tag.state) === null || _b === void 0 ? void 0 : _b.unfolded;
+$: left = ((_c = tag.pointTagStyle) === null || _c === void 0 ? void 0 : _c.leftPercent) + '%';
+$: top = ((_d = tag.pointTagStyle) === null || _d === void 0 ? void 0 : _d.topPercent) + '%';
+$: zIndex = tag.contentType === ContentType.Link ? 20 : ((_e = tag.state) === null || _e === void 0 ? void 0 : _e.unfolded) ? 10 : 0;
+let timeout;
+let animating = false;
+function setAnimating(trigger) {
+    if (timeout !== undefined)
+        clearTimeout(timeout);
+    animating = true;
+    timeout = setTimeout(() => {
+        animating = false;
+    }, 800);
+}
+$: setAnimating(unfolded);
+const handlePointClick = (event) => {
+    if (animating)
+        return;
+    hooks.emit('click', { event, target: 'TagPoint', tag });
+};
+</script>
+
+<div class="wrapper" class:hide class:unfolded style:left style:top style:z-index={zIndex} data-id={tag.id}>
+  {#if tag.dimensionType === DimensionType.Two}
+    <TagContent {mediaStore} {withAnimation} tag={noTypecheck(tag)} {hooks} {state} {temporaryState} />
+  {/if}
+  {#if tag.pointType === PointType.PointTag && tag.style?.point?.style !== 'noPoint'}
+    <div class="point" on:click|stopPropagation={handlePointClick}>
+      <TagPoint {tag} />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .wrapper {
+    position: absolute;
+    width: 0px;
+    height: 0px;
+    overflow: visible;
+    pointer-events: auto;
+  }
+
+  .point {
+    -webkit-tap-highlight-color: transparent;
+    position: absolute;
+    transform: translate(-50%, -50%);
+    left: 50%;
+    top: 50%;
+  }
+</style>

package/libs/PanoTagPlugin/controller/index.js

@@ -2,8 +2,8 @@ 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 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';
@@ -219,7 +219,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 = [];
@@ -349,7 +349,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;
         });
     }
@@ -483,7 +483,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/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';

package/libs/floorplan/Components/BaseImage.js

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.51.0 */
+/* generated by Svelte v3.52.0 */
 import {
 	SvelteComponent,
 	append_styles,

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.js

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.51.0 */
+/* generated by Svelte v3.52.0 */
 import {
 	SvelteComponent,
 	append,
@@ -30,15 +30,15 @@ function create_fragment(ctx) {
 			div0 = element("div");
 			attr(div0, "class", "floorplan__camera-rotate svelte-17cl35n");
 			set_style(div0, "background-image", `url(${/*cameraImageUrl*/ ctx[0] || CAMERA_IMAGE})`);
-			set_style(div0, "width", /*domSizeStyle*/ ctx[4], false);
-			set_style(div0, "height", /*domSizeStyle*/ ctx[4], false);
-			set_style(div0, "left", '-' + /*domSizeStyle*/ ctx[4], false);
-			set_style(div0, "top", '-' + /*domSizeStyle*/ ctx[4], false);
-			set_style(div0, "transform", `rotate(${/*rotate*/ ctx[3]}deg)`, false);
-			set_style(div0, "transform-origin", `${/*domSizeStyle*/ ctx[4]} ${/*domSizeStyle*/ ctx[4]}`, false);
+			set_style(div0, "width", /*domSizeStyle*/ ctx[4]);
+			set_style(div0, "height", /*domSizeStyle*/ ctx[4]);
+			set_style(div0, "left", '-' + /*domSizeStyle*/ ctx[4]);
+			set_style(div0, "top", '-' + /*domSizeStyle*/ ctx[4]);
+			set_style(div0, "transform", `rotate(${/*rotate*/ ctx[3]}deg)`);
+			set_style(div0, "transform-origin", `${/*domSizeStyle*/ ctx[4]} ${/*domSizeStyle*/ ctx[4]}`);
 			attr(div1, "class", "floorplan__camera-position svelte-17cl35n");
-			set_style(div1, "left", /*positionLeft*/ ctx[1], false);
-			set_style(div1, "top", /*positionTop*/ ctx[2], false);
+			set_style(div1, "left", /*positionLeft*/ ctx[1]);
+			set_style(div1, "top", /*positionTop*/ ctx[2]);
 		},
 		m(target, anchor) {
 			insert(target, div1, anchor);

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.js

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.51.0 */
+/* generated by Svelte v3.52.0 */
 import {
 	SvelteComponent,
 	append,
@@ -42,7 +42,7 @@ function create_if_block(ctx) {
 			set_style(div0, "background-image", `url(${COMPASS_IMAGE})`);
 			attr(span, "class", "floorplan-plugin__compass-text svelte-rpkaro");
 			attr(div1, "class", "floorplan-plugin__compass svelte-rpkaro");
-			set_style(div1, "transform", /*compassTransformStyle*/ ctx[2], false);
+			set_style(div1, "transform", /*compassTransformStyle*/ ctx[2]);
 		},
 		m(target, anchor) {
 			insert(target, div1, anchor);

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.js

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.51.0 */
+/* generated by Svelte v3.52.0 */
 import {
 	SvelteComponent,
 	append,

package/libs/floorplan/Components/CurrentFloor.svelte

@@ -0,0 +1,57 @@
+<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 getRoomAreaText;
+export let getLabelElement;
+export let getRuleDistanceText;
+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,
+        getRoomAreaText,
+        getLabelElement,
+        hoveredRoom,
+        adaptiveRoomLabelVisibleEnable,
+      }}
+    />
+  {/if}
+  {#if ruleLabelsEnable}
+    <RuleLabels {...{ floorplanData, floorIndex, getRuleDistanceText }} />
+  {/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.js

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.51.0 */
+/* generated by Svelte v3.52.0 */
 import {
 	SvelteComponent,
 	add_render_callback,

package/libs/floorplan/Components/Main.svelte

@@ -0,0 +1,55 @@
+<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 getRoomAreaText;
+export let getLabelElement;
+export let getRuleDistanceText;
+export let adaptiveRoomLabelVisibleEnable;
+</script>
+
+{#if visible}
+  <div class="floorplan-main" in:fade={{ duration, easing: linear }}>
+    {#each floorplanData.floorDatas as floorData}
+      <CurrentFloor
+        {...{
+          hoverEnable,
+          floorplanData,
+          getRoomAreaText,
+          getLabelElement,
+          getRuleDistanceText,
+          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.js

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.51.0 */
+/* generated by Svelte v3.52.0 */
 import {
 	SvelteComponent,
 	append_styles,

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.js

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.51.0 */
+/* generated by Svelte v3.52.0 */
 import {
 	SvelteComponent,
 	append_styles,

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.js

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.51.0 */
+/* generated by Svelte v3.52.0 */
 import {
 	SvelteComponent,
 	append,

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.js

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.51.0 */
+/* generated by Svelte v3.52.0 */
 import {
 	HtmlTag,
 	SvelteComponent,
@@ -105,10 +105,10 @@ function create_fragment(ctx) {
 			div = element("div");
 			if (if_block) if_block.c();
 			attr(div, "class", "floorplan-plugin__room-label-item svelte-12pzct5");
-			set_style(div, "left", /*left*/ ctx[6], false);
-			set_style(div, "top", /*top*/ ctx[7], false);
-			set_style(div, "font-size", /*fontSize*/ ctx[8], false);
-			set_style(div, "opacity", /*labelVisible*/ ctx[3] ? '1' : '0', false);
+			set_style(div, "left", /*left*/ ctx[6]);
+			set_style(div, "top", /*top*/ ctx[7]);
+			set_style(div, "font-size", /*fontSize*/ ctx[8]);
+			set_style(div, "opacity", /*labelVisible*/ ctx[3] ? '1' : '0');
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -129,7 +129,7 @@ function create_fragment(ctx) {
 			}
 
 			if (dirty & /*labelVisible*/ 8) {
-				set_style(div, "opacity", /*labelVisible*/ ctx[3] ? '1' : '0', false);
+				set_style(div, "opacity", /*labelVisible*/ ctx[3] ? '1' : '0');
 			}
 		},
 		i: noop,