@realsee/dnalogel 2.0.0-alpha.26-beta → 2.0.0-alpha.28-beta

package/dist/index.es.js

@@ -2,7 +2,7 @@ import * as THREE from 'three';
 import { Vector3, Scene, Group, Raycaster, MeshBasicMaterial, CanvasTexture, AnimationMixer, Vector2, Color, TextureLoader, PlaneGeometry, sRGBEncoding, Mesh, CurvePath, LineCurve3, TubeGeometry, DoubleSide, SphereGeometry } from 'three';
 import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
 import { Line as Line$1 } from '@realsee/five/line';
-import { SvelteComponent, init, safe_not_equal, append_styles, element, text, space, attr, set_style, toggle_class, insert, append, listen, set_data, noop, detach, empty, create_component, mount_component, transition_in, transition_out, destroy_component, add_render_callback, add_resize_listener, group_outros, update_keyed_each, outro_and_destroy_block, check_outros, src_url_equal, HtmlTag, get_spread_update, assign, destroy_block, destroy_each, svg_element, null_to_empty, create_in_transition, binding_callbacks } from 'svelte/internal';
+import { SvelteComponent, init, safe_not_equal, append_styles, element, text, space, attr, set_style, toggle_class, insert, append, listen, set_data, noop, detach, empty, create_component, mount_component, transition_in, transition_out, destroy_component, add_render_callback, add_resize_listener, group_outros, update_keyed_each, outro_and_destroy_block, check_outros, globals, src_url_equal, HtmlTag, get_spread_update, assign, destroy_block, destroy_each, svg_element, null_to_empty, create_in_transition, binding_callbacks } from 'svelte/internal';
 import { onDestroy, onMount, afterUpdate, beforeUpdate } from 'svelte';
 import { linear } from 'svelte/easing';
 import { fade } from 'svelte/transition';
@@ -562,17 +562,19 @@ class RoomLabelItem extends SvelteComponent {
 
 /* src/ModelRoomLabelPlugin/RoomLabelItems.svelte generated by Svelte v3.47.0 */
 
+const { Map: Map_1 } = globals;
+
 function add_css$l(target) {
 	append_styles(target, "svelte-9eg4zi", ".room-labels-container.svelte-9eg4zi{width:100%;height:100%;position:relative;color:#fff}");
 }
 
 function get_each_context$9(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[9] = list[i];
+	child_ctx[12] = list[i];
 	return child_ctx;
 }
 
-// (70:2) {#each roomLabels as roomLableItem (roomLableItem.id)}
+// (82:2) {#each roomLabels as roomLableItem (roomLableItem.id)}
 function create_each_block$9(key_1, ctx) {
 	let first;
 	let roomlabelitem;
@@ -580,7 +582,7 @@ function create_each_block$9(key_1, ctx) {
 
 	roomlabelitem = new RoomLabelItem({
 			props: {
-				roomLabel: /*roomLableItem*/ ctx[9],
+				roomLabel: /*roomLableItem*/ ctx[12],
 				five: /*five*/ ctx[1]
 			}
 		});
@@ -601,7 +603,7 @@ function create_each_block$9(key_1, ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 			const roomlabelitem_changes = {};
-			if (dirty & /*roomLabels*/ 1) roomlabelitem_changes.roomLabel = /*roomLableItem*/ ctx[9];
+			if (dirty & /*roomLabels*/ 1) roomlabelitem_changes.roomLabel = /*roomLableItem*/ ctx[12];
 			if (dirty & /*five*/ 2) roomlabelitem_changes.five = /*five*/ ctx[1];
 			roomlabelitem.$set(roomlabelitem_changes);
 		},
@@ -624,11 +626,11 @@ function create_each_block$9(key_1, ctx) {
 function create_fragment$p(ctx) {
 	let div;
 	let each_blocks = [];
-	let each_1_lookup = new Map();
+	let each_1_lookup = new Map_1();
 	let div_resize_listener;
 	let current;
 	let each_value = /*roomLabels*/ ctx[0];
-	const get_key = ctx => /*roomLableItem*/ ctx[9].id;
+	const get_key = ctx => /*roomLableItem*/ ctx[12].id;
 
 	for (let i = 0; i < each_value.length; i += 1) {
 		let child_ctx = get_each_context$9(ctx, each_value, i);
@@ -645,7 +647,7 @@ function create_fragment$p(ctx) {
 			}
 
 			attr(div, "class", "room-labels-container svelte-9eg4zi");
-			add_render_callback(() => /*div_elementresize_handler*/ ctx[4].call(div));
+			add_render_callback(() => /*div_elementresize_handler*/ ctx[6].call(div));
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -654,7 +656,7 @@ function create_fragment$p(ctx) {
 				each_blocks[i].m(div, null);
 			}
 
-			div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[4].bind(div));
+			div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[6].bind(div));
 			current = true;
 		},
 		p(ctx, [dirty]) {
@@ -694,22 +696,17 @@ function create_fragment$p(ctx) {
 }
 
 function instance$p($$self, $$props, $$invalidate) {
+	let rendererSize;
 	let { five } = $$props;
 	let { roomLabels } = $$props;
 	let containerWidth;
 	let containerHeight;
+	let shownFloor = null;
 
-	function getLabelVisible(five, roomLabelItem) {
-		// 先看是不是在当前展示的楼层上
-		const isLabelInFloor = five.model.shownFloor === null || roomLabelItem.floorIndex === five.model.shownFloor;
-
-		if (!isLabelInFloor) return false;
-
-		// 再看是不是被模型遮挡
+	function getLabelVisible(item) {
 		const raycaster = new Raycaster();
-
 		const cameraPosition = five.camera.position.clone();
-		const position = new Vector3(roomLabelItem.position.x, roomLabelItem.position.y, roomLabelItem.position.z);
+		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);
@@ -717,53 +714,60 @@ function instance$p($$self, $$props, $$invalidate) {
 		return true;
 	}
 
-	function getLabelTransform(five, roomLabelItem) {
-		const position = new Vector3(roomLabelItem.position.x, roomLabelItem.position.y, roomLabelItem.position.z);
+	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 * containerWidth);
-		const yOffset = Math.ceil((-mouse.y + 1) / 2 * containerHeight);
+		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(five, labels) {
-		const newLabels = labels.map(roomLabelItem => {
-			// 计算是否可见，如果不可见，不会更新位置
-			const visible = getLabelVisible(five, roomLabelItem);
+	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;
+		}
 
-			if (!visible) return Object.assign(Object.assign({}, roomLabelItem), { visible });
+		const formatedItems = roomLabels.map(item => {
+			const visible = getLabelVisible(item);
 
-			// 更新位置
-			const transform = getLabelTransform(five, roomLabelItem);
+			const transform = visible
+			? getLabelTransform(item, rendererSize)
+			: item.transform;
 
-			return Object.assign(Object.assign({}, roomLabelItem), { visible, transform });
-		});
+			const itemDistance = getItemDistance(item);
 
-		const sortedRoomLabelItems = newLabels.filter(({ visible }) => visible).map(roomLabelItem => ({
-			roomLabelItem,
-			distance: new Vector3(...Object.values(roomLabelItem.position)).clone().distanceTo(five.camera.position)
-		})).sort((a, b) => a.distance - b.distance);
+			// visible === true 的 item 中，distance 比自己小的 item 个数
+			const minItemLen = roomLabels.filter(item => item.visible && getItemDistance(item) < itemDistance).length;
 
-		return newLabels.map(roomLabelItem => {
-			const sortIndex = sortedRoomLabelItems.findIndex(item => item.roomLabelItem.id === roomLabelItem.id);
-			if (sortIndex !== undefined) return Object.assign(Object.assign({}, roomLabelItem), { zIndex: sortIndex * 10 });
-			return roomLabelItem;
+			const zIndex = minItemLen * 10;
+			return Object.assign(Object.assign({}, item), { visible, transform, zIndex });
 		});
+
+		return formatedItems;
 	}
 
 	function onFiveCameraUpdate() {
-		$$invalidate(0, roomLabels = getFormatedRoomLabels(five, roomLabels));
+		$$invalidate(0, roomLabels = getFormatedRoomLabels(rendererSize));
+	}
+
+	function onFiveModelShownFloorChange(floorIndex) {
+		$$invalidate(4, shownFloor = floorIndex);
 	}
 
 	five.on('cameraUpdate', onFiveCameraUpdate);
-	five.on('modelShownFloorChange', onFiveCameraUpdate);
+	five.on('modelShownFloorChange', onFiveModelShownFloorChange);
 
 	onDestroy(() => {
 		five.off('cameraUpdate', onFiveCameraUpdate);
-		five.off('modelShownFloorChange', onFiveCameraUpdate);
-	});
-
-	onMount(() => {
-		onFiveCameraUpdate();
+		five.off('modelShownFloorChange', onFiveModelShownFloorChange);
 	});
 
 	function div_elementresize_handler() {
@@ -778,7 +782,39 @@ function instance$p($$self, $$props, $$invalidate) {
 		if ('roomLabels' in $$props) $$invalidate(0, roomLabels = $$props.roomLabels);
 	};
 
-	return [roomLabels, five, containerWidth, containerHeight, div_elementresize_handler];
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*containerWidth, containerHeight*/ 12) {
+			$$invalidate(5, rendererSize = { x: containerWidth, y: containerHeight });
+		}
+
+		if ($$self.$$.dirty & /*rendererSize*/ 32) {
+			{
+				// rendererSize 变化时，触发 reRender
+				$$invalidate(0, roomLabels = getFormatedRoomLabels(rendererSize));
+			}
+		}
+
+		if ($$self.$$.dirty & /*roomLabels, shownFloor*/ 17) {
+			{
+				// shownFloor 变化时，更新 item visible
+				$$invalidate(0, roomLabels = roomLabels.map(item => {
+					const isLabelInFloor = shownFloor === null || item.floorIndex === shownFloor;
+					const visible = isLabelInFloor ? item.visible : false;
+					return Object.assign(Object.assign({}, item), { visible });
+				}));
+			}
+		}
+	};
+
+	return [
+		roomLabels,
+		five,
+		containerWidth,
+		containerHeight,
+		shownFloor,
+		rendererSize,
+		div_elementresize_handler
+	];
 }
 
 class RoomLabelItems extends SvelteComponent {
@@ -947,6 +983,10 @@ class ModelRoomLabelController {
 const ModelRoomLabelPlugin = (five) => {
     return new ModelRoomLabelController(five);
 };
+const modelRoomLabelPluginServerParams = {
+    name: 'ModelRoomLabelPlugin',
+    version: 0,
+};
 
 var FLOOR_PLAN_ATTACHED_TO;
 (function (FLOOR_PLAN_ATTACHED_TO) {
@@ -7769,6 +7809,11 @@ class PanoCompassController {
     }
 }
 
+const panoCompassPluginServerParams = {
+    name: 'PanoCompassPlugin',
+    version: 0,
+};
+
 /** 交换数组元素 */
 function exchange(array, index1, index2) {
     const value = array[index1];
@@ -14058,7 +14103,9 @@ const PanoSpatialTagPlugin = (five, params) => {
             }))
                 continue;
             const raycaster = new THREE.Raycaster(camera.position.clone().setY(RAY_ORIGIN_Y), point.position.clone().sub(camera.position.clone().setY(RAY_ORIGIN_Y)).normalize(), 0, point.distance + RAY_TOLERANT_DISTANCE);
-            const [intersect] = five.model.intersectRaycaster(raycaster);
+            const [intersect] = five.model.bvhs.loaded ?
+                five.model.intersectRaycaster(raycaster) :
+                raycaster.intersectObjects(five.model.children, true);
             if (!intersect)
                 continue;
             if (point.distance - intersect.distance < RAY_TOLERANT_DISTANCE) {
@@ -14099,10 +14146,10 @@ const PanoSpatialTagPlugin = (five, params) => {
         return newTags;
     };
     /** 标签数据加载
-    * @param data.points {Array} 标签数据
-    * @param data.enabled {Boolean} 插件是否启用
-    * @param data.folded {Boolean} 标签是否默认展开
-    */
+     * @param data.points {Array} 标签数据
+     * @param data.enabled {Boolean} 插件是否启用
+     * @param data.folded {Boolean} 标签是否默认展开
+     */
     const load = (data) => {
         state.points = data.points.map(point => {
             var _a, _b;
@@ -14126,16 +14173,16 @@ const PanoSpatialTagPlugin = (five, params) => {
             state.folded = data.folded;
     };
     /** 标签启用
-    * 启用插件并重新计算展示标签
-    */
+     * 启用插件并重新计算展示标签
+     */
     const enable = () => {
         state.enabled = true;
         updateTags();
     };
     /** 插件禁用
-    * 1. 禁用同时会清除已展示的标签
-    * 2. 再次启用时会重新计算展示标签
-    */
+     * 1. 禁用同时会清除已展示的标签
+     * 2. 再次启用时会重新计算展示标签
+     */
     const disable = () => {
         state.enabled = false;
         origins.$set({ origins: [] });
@@ -14147,9 +14194,9 @@ const PanoSpatialTagPlugin = (five, params) => {
         state.tags = [];
     };
     /** 展开所有标签
-    * 1. 展开所有收起的标签
-    * 2. 新标签会默认展开
-    */
+     * 1. 展开所有收起的标签
+     * 2. 新标签会默认展开
+     */
     const unfoldAll = () => {
         state.folded = false;
         state.tags.forEach(tag => {
@@ -14157,9 +14204,9 @@ const PanoSpatialTagPlugin = (five, params) => {
         });
     };
     /** 收起所有标签
-    * 1. 收起所有展开的标签
-    * 2. 新标签会默认收起
-    */
+     * 1. 收起所有展开的标签
+     * 2. 新标签会默认收起
+     */
     const foldAll = () => {
         state.folded = true;
         state.tags.forEach(tag => {
@@ -14167,8 +14214,8 @@ const PanoSpatialTagPlugin = (five, params) => {
         });
     };
     /** 展开单个标签
-    * @param id {Number | String} 标签ID
-    */
+     * @param id {Number | String} 标签ID
+     */
     const unfold = (id) => {
         state.tags.forEach(tag => {
             if (tag.id === id)
@@ -14176,8 +14223,8 @@ const PanoSpatialTagPlugin = (five, params) => {
         });
     };
     /** 收起单个标签
-    * @param id {Number | String} 标签ID
-    */
+     * @param id {Number | String} 标签ID
+     */
     const fold = (id) => {
         state.tags.forEach(tag => {
             if (tag.id === id)
@@ -14211,7 +14258,7 @@ const PanoSpatialTagPlugin = (five, params) => {
         five.on('cameraUpdate', onCameraUpdate);
     }
     else {
-        five.once('modelBvhLoaded', () => {
+        five.once('modelLoaded', () => {
             if (!wrapper)
                 wrapper = five.getElement().parentElement;
             wrapper.appendChild(container);
@@ -14383,7 +14430,7 @@ function get_each_context(ctx, list, i) {
 	return child_ctx;
 }
 
-// (162:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
+// (163:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
 function create_each_block(key_1, ctx) {
 	let first;
 	let itemlabelitem;
@@ -14870,6 +14917,11 @@ const ModelItemLabelPlugin = (five, params) => {
     };
 };
 
+const modelItemLabelPluginServerParams = {
+    name: 'ModelItemLabelPlugin',
+    version: 0,
+};
+
 var DIRECTION;
 (function (DIRECTION) {
     DIRECTION["TOP_LEFT"] = "topLeft";
@@ -15143,4 +15195,4 @@ const ModelTVVideoPlugin = (five, { videoElement }) => {
     return { enable, disable, load, dispose };
 };
 
-export { CSS3DRenderPlugin, CameraMovementPlugin, FLOOR_PLAN_ATTACHED_TO, ModelChassisCompassPlugin, ModelEntryDoorGuidePlugin, ModelFloorplanPlugin, ModelItemLabelPlugin, ModelRoomLabelPlugin, ModelTVVideoPlugin, ModelViewPlugin, PanoCompassPlugin, PanoCursorRaycasterPlugin, PanoFloorplanRadarPlugin, PanoMeasurePlugin, PanoRulerPlugin, PanoSpatialTagPlugin, TopviewFloorplanPlugin };
+export { CSS3DRenderPlugin, CameraMovementEffect, CameraMovementPlugin, DIRECTION, DISPLAY_STRATEGY_TYPE, FLOOR_PLAN_ATTACHED_TO, ModelChassisCompassPlugin, ModelEntryDoorGuidePlugin, ModelFloorplanPlugin, ModelItemLabelPlugin, ModelRoomLabelPlugin, ModelTVVideoPlugin, ModelViewPlugin, PanoCompassPlugin, PanoCursorRaycasterPlugin, PanoFloorplanRadarPlugin, PanoMeasurePlugin, PanoRulerPlugin, PanoSpatialTagPlugin, Rotation, TopviewFloorplanPlugin, modelItemLabelPluginServerParams, modelRoomLabelPluginServerParams, panoCompassPluginServerParams };