@realsee/dnalogel 2.0.0-alpha.30-beta → 2.0.0-alpha.31

package/libs/ItemLabelPlugin/ItemLabelComponent.js

@@ -24,12 +24,16 @@ import {
 } from "svelte/internal";
 
 import { Five } from '@realsee/five';
-import { ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE } from "./typings";
+import "./typings";
 import { beforeUpdate, onDestroy, onMount } from "svelte";
 import * as THREE from 'three';
 import ItemLabelItem from './ItemLabelItem';
 import "./events.type";
 import debounce from '../shared-utils/debounce';
+import { isImpacted } from "./utils/isImpacted";
+import { getStrokeLength } from "./utils/getStrokeLength";
+import { getLabelTransform } from './utils/getLabelTransform';
+import { transform2RenderData } from "./utils/transform2RenderData";
 
 function add_css(target) {
 	append_styles(target, "svelte-rmdeb", ".item-labels-container.svelte-rmdeb{width:100%;height:100%;position:relative}");
@@ -37,57 +41,115 @@ function add_css(target) {
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[28] = list[i];
+	child_ctx[32] = list[i];
 	return child_ctx;
 }
 
-// (163:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
-function create_each_block(key_1, ctx) {
-	let first;
+// (248:2) {#if itemLabelItem.visible}
+function create_if_block(ctx) {
 	let itemlabelitem;
 	let current;
 
 	itemlabelitem = new ItemLabelItem({
 			props: {
-				itemLabel: /*itemLabelItem*/ ctx[28],
-				hooks: /*hooks*/ ctx[1],
-				anchorEnabled: /*five*/ ctx[0].currentMode === Five.Mode.Panorama
+				itemLabel: /*itemLabelItem*/ ctx[32],
+				hooks: /*hooks*/ ctx[0],
+				anchorEnabled: /*anchorEnabled*/ ctx[2],
+				onIconClick: /*onIconClick*/ ctx[6]
 			}
 		});
 
+	return {
+		c() {
+			create_component(itemlabelitem.$$.fragment);
+		},
+		m(target, anchor) {
+			mount_component(itemlabelitem, target, anchor);
+			current = true;
+		},
+		p(ctx, dirty) {
+			const itemlabelitem_changes = {};
+			if (dirty[0] & /*renderItemLabels*/ 2) itemlabelitem_changes.itemLabel = /*itemLabelItem*/ ctx[32];
+			if (dirty[0] & /*hooks*/ 1) itemlabelitem_changes.hooks = /*hooks*/ ctx[0];
+			if (dirty[0] & /*anchorEnabled*/ 4) itemlabelitem_changes.anchorEnabled = /*anchorEnabled*/ ctx[2];
+			itemlabelitem.$set(itemlabelitem_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(itemlabelitem.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(itemlabelitem.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			destroy_component(itemlabelitem, detaching);
+		}
+	};
+}
+
+// (247:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
+function create_each_block(key_1, ctx) {
+	let first;
+	let if_block_anchor;
+	let current;
+	let if_block = /*itemLabelItem*/ ctx[32].visible && create_if_block(ctx);
+
 	return {
 		key: key_1,
 		first: null,
 		c() {
 			first = empty();
-			create_component(itemlabelitem.$$.fragment);
+			if (if_block) if_block.c();
+			if_block_anchor = empty();
 			this.first = first;
 		},
 		m(target, anchor) {
 			insert(target, first, anchor);
-			mount_component(itemlabelitem, target, anchor);
+			if (if_block) if_block.m(target, anchor);
+			insert(target, if_block_anchor, anchor);
 			current = true;
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
-			const itemlabelitem_changes = {};
-			if (dirty & /*renderItemLabels*/ 4) itemlabelitem_changes.itemLabel = /*itemLabelItem*/ ctx[28];
-			if (dirty & /*hooks*/ 2) itemlabelitem_changes.hooks = /*hooks*/ ctx[1];
-			if (dirty & /*five*/ 1) itemlabelitem_changes.anchorEnabled = /*five*/ ctx[0].currentMode === Five.Mode.Panorama;
-			itemlabelitem.$set(itemlabelitem_changes);
+
+			if (/*itemLabelItem*/ ctx[32].visible) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+
+					if (dirty[0] & /*renderItemLabels*/ 2) {
+						transition_in(if_block, 1);
+					}
+				} else {
+					if_block = create_if_block(ctx);
+					if_block.c();
+					transition_in(if_block, 1);
+					if_block.m(if_block_anchor.parentNode, if_block_anchor);
+				}
+			} else if (if_block) {
+				group_outros();
+
+				transition_out(if_block, 1, 1, () => {
+					if_block = null;
+				});
+
+				check_outros();
+			}
 		},
 		i(local) {
 			if (current) return;
-			transition_in(itemlabelitem.$$.fragment, local);
+			transition_in(if_block);
 			current = true;
 		},
 		o(local) {
-			transition_out(itemlabelitem.$$.fragment, local);
+			transition_out(if_block);
 			current = false;
 		},
 		d(detaching) {
 			if (detaching) detach(first);
-			destroy_component(itemlabelitem, detaching);
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(if_block_anchor);
 		}
 	};
 }
@@ -98,8 +160,8 @@ function create_fragment(ctx) {
 	let each_1_lookup = new Map();
 	let div_resize_listener;
 	let current;
-	let each_value = /*renderItemLabels*/ ctx[2];
-	const get_key = ctx => /*itemLabelItem*/ ctx[28].id;
+	let each_value = /*renderItemLabels*/ ctx[1];
+	const get_key = ctx => /*itemLabelItem*/ ctx[32].id;
 
 	for (let i = 0; i < each_value.length; i += 1) {
 		let child_ctx = get_each_context(ctx, each_value, i);
@@ -116,7 +178,7 @@ function create_fragment(ctx) {
 			}
 
 			attr(div, "class", "item-labels-container svelte-rmdeb");
-			add_render_callback(() => /*div_elementresize_handler*/ ctx[10].call(div));
+			add_render_callback(() => /*div_elementresize_handler*/ ctx[13].call(div));
 			set_style(div, "opacity", /*itemsVisible*/ ctx[5] ? 1 : 0, false);
 		},
 		m(target, anchor) {
@@ -126,18 +188,18 @@ function create_fragment(ctx) {
 				each_blocks[i].m(div, null);
 			}
 
-			div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[10].bind(div));
+			div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[13].bind(div));
 			current = true;
 		},
-		p(ctx, [dirty]) {
-			if (dirty & /*renderItemLabels, hooks, five, Five*/ 7) {
-				each_value = /*renderItemLabels*/ ctx[2];
+		p(ctx, dirty) {
+			if (dirty[0] & /*renderItemLabels, hooks, anchorEnabled, onIconClick*/ 71) {
+				each_value = /*renderItemLabels*/ ctx[1];
 				group_outros();
 				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div, outro_and_destroy_block, create_each_block, null, get_each_context);
 				check_outros();
 			}
 
-			if (dirty & /*itemsVisible*/ 32) {
+			if (dirty[0] & /*itemsVisible*/ 32) {
 				set_style(div, "opacity", /*itemsVisible*/ ctx[5] ? 1 : 0, false);
 			}
 		},
@@ -180,8 +242,14 @@ function instance($$self, $$props, $$invalidate) {
 	let { wrapper } = $$props;
 	let { hooks } = $$props;
 	let { displayStrategyType } = $$props;
+	let { maxVisibleDistance } = $$props;
 	let curItemLabels = null;
 	let renderItemLabels = null;
+
+	let anchorEnabled = (five === null || five === void 0
+	? void 0
+	: five.currentMode) === Five.Mode.Panorama;
+
 	let wrapperSize = { width: 0, height: 0 };
 	let containerWidth;
 	let containerHeight;
@@ -197,19 +265,36 @@ function instance($$self, $$props, $$invalidate) {
  * 1、当前楼层(假设先不考虑多楼层)
  * 2、模型未被遮挡（一个 box 有没有被遮挡的计算？ TODO）
  * */
-	const getLabelVisible = (five, itemLabel) => {
+	const judgeImpacted = (five, itemLabel) => {
 		// 虚拟 VR 仅有一层，不考虑楼层信息
-		const raycaster = new Raycaster();
-
 		const cameraPosition = five.camera.position.clone();
+
 		const modelPosition = new Vector3(itemLabel.modelPosition[0], itemLabel.modelPosition[1], itemLabel.modelPosition[2]);
 
 		// 计算点到相机的位置
 		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);
+		// 判断距离，大于最大可见距离直接不可见 TODO 把距离计算和碰撞拆分开
+		if (maxVisibleDistance !== undefined && five.state.mode === Five.Mode.Panorama) {
+			if (vectorDistance > maxVisibleDistance) {
+				return false;
+			}
+		}
+
+		return isImpacted(five, modelPosition.clone().sub(cameraPosition).normalize(), cameraPosition, vectorDistance);
+	}; // raycaster.set(cameraPosition.clone(), modelPosition.clone().sub(cameraPosition).normalize())
+	// const [intersection] = five.model.intersectRaycaster(raycaster)
+	// return !(intersection && intersection.distance + 1 < vectorDistance);
+
+	const judgeInViewport = modelPoint => {
+		const { camera, model } = five;
+		const { x: offsetXFromCenter, y: offsetYFromCenter, z: offsetZFromCenter } = modelPoint.clone().project(camera);
+		const ratioFromLeft = (offsetXFromCenter + 1) / 2;
+		const ratioFromTop = (2 - (offsetYFromCenter + 1)) / 2;
+		const isFront = Math.abs(offsetZFromCenter) < 1;
+		const cssOffset = [ratioFromLeft, ratioFromTop];
+		const isInViewport = isFront && cssOffset.every(ratio => ratio < 1 && ratio >= 0);
+		return Boolean(isInViewport);
 	};
 
 	// cssOffset 获取
@@ -228,10 +313,6 @@ function instance($$self, $$props, $$invalidate) {
 		return [xOffset, yOffset];
 	};
 
-	const getLabelTransform = cssOffset => {
-		return `translate(${cssOffset[0]}px, ${cssOffset[1]}px)`;
-	};
-
 	// 重叠计算
 	const isOverlap = (cssOffset, widthOffset) => {
 		if (cssOffsetLists.length === 0) {
@@ -242,19 +323,6 @@ function instance($$self, $$props, $$invalidate) {
 		return !!hasOverlapPoint;
 	};
 
-	function getStrokeLength(itemSpaceHeight, type) {
-		switch (type) {
-			case ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE.SMALL:
-				return Math.ceil(-27.78 * itemSpaceHeight + 85);
-			case ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE.MIDLLE:
-				return Math.ceil(-38.9 * itemSpaceHeight + 130);
-			case ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE.LARGE:
-				return Math.ceil(-44.44 * itemSpaceHeight + 140);
-			case ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE.EXTRA_LARGE:
-				return Math.ceil(-92.59 * itemSpaceHeight + 300);
-		}
-	}
-
 	const getFormatedItemLabels = (five, labels) => {
 		// 计算位置 & 可见性
 		const newLabels = labels.map(label => {
@@ -263,11 +331,18 @@ function instance($$self, $$props, $$invalidate) {
 			const strokeLength = getStrokeLength(label.modelPosition[1], displayStrategyType);
 
 			// 是否加入碰撞检测
-			const naturalVisible = modelOcclusionEnable
-			? getLabelVisible(five, label)
+			// 配置加入碰撞检测，则判断碰撞检测
+			// 在可见范围内， 仅在 Panorama 模态计算
+			const isInViewport = five.currentMode === Five.Mode.Panorama
+			? judgeInViewport(new Vector3(label.position[0], label.position[1], label.position[2]))
 			: true;
 
-			const visible = naturalVisible;
+			// 碰撞
+			const isBlocked = modelOcclusionEnable
+			? judgeImpacted(five, label)
+			: false;
+
+			const visible = isInViewport && !isBlocked;
 
 			// 关掉重叠计算
 			// const visible = naturalVisible && !isOverlap([cssOffset[0], cssOffset[1] + strokeLength], curLabelWidth)
@@ -295,25 +370,23 @@ function instance($$self, $$props, $$invalidate) {
 
 	const onItemLabelUpdate = () => {
 		cssOffsetLists = [];
-		$$invalidate(2, renderItemLabels = getFormatedItemLabels(five, renderItemLabels));
+		$$invalidate(1, renderItemLabels = getFormatedItemLabels(five, renderItemLabels));
 	};
 
-	beforeUpdate(() => {
-		addDataUpdateListener();
-	});
-
 	const handleCameraUpdateCallback = () => {
 		$$invalidate(5, itemsVisible = false);
 		handleCameraUpdate();
 	};
 
-	onMount(() => {
-		$$invalidate(2, renderItemLabels = itemLabels);
-		curItemLabels = itemLabels;
-		onItemLabelUpdate();
-		addResizeListener();
-		five.on('cameraUpdate', handleCameraUpdateCallback);
-	});
+	const onFiveModeChange = mode => {
+		$$invalidate(5, itemsVisible = false);
+
+		five.once('initAnimationEnded', (panoIndex, pose, userAction) => {
+			$$invalidate(2, anchorEnabled = mode === Five.Mode.Panorama);
+			$$invalidate(5, itemsVisible = true);
+			if (!userAction) return; else onItemLabelUpdate();
+		});
+	};
 
 	const handleCameraUpdate = debounce(
 		() => {
@@ -334,7 +407,7 @@ function instance($$self, $$props, $$invalidate) {
 
 	const addDataUpdateListener = () => {
 		if (curItemLabels !== itemLabels) {
-			$$invalidate(2, renderItemLabels = itemLabels);
+			$$invalidate(1, renderItemLabels = transform2RenderData(itemLabels));
 			curItemLabels = itemLabels;
 			onItemLabelUpdate();
 		}
@@ -352,8 +425,92 @@ function instance($$self, $$props, $$invalidate) {
 			}
 		});
 
+	const getNearObserverPano = (fromPositionVector, observers) => {
+		let candidates = [];
+
+		for (let i = 0; i < observers.length; i++) {
+			const { position: obVector, panoIndex } = observers[i];
+			const distance = fromPositionVector.distanceTo(obVector);
+
+			if (maxVisibleDistance === undefined || distance <= maxVisibleDistance || five.state.mode !== Five.Mode.Panorama) {
+				candidates.push({ panoIndex, obVector, distance });
+			}
+		}
+
+		candidates = candidates.sort((a, b) => a.distance - b.distance);
+		let observerIndex;
+
+		for (let i = 0; i < candidates.length; i++) {
+			const { obVector, distance, panoIndex } = candidates[i];
+			const isImpactedRes = isImpacted(five, fromPositionVector, obVector, distance);
+
+			if (!isImpactedRes) {
+				observerIndex = panoIndex;
+				break;
+			}
+		}
+
+		return typeof observerIndex === "number"
+		? observers[observerIndex]
+		: undefined;
+	};
+
+	const onIconClick = itemLabel => {
+		if (five.state.mode === Five.Mode.Panorama) return;
+		const observers = five.work.observers;
+		const fromPositionVector = new Vector3(itemLabel.position[0], itemLabel.position[1], itemLabel.position[2]);
+		const observer = getNearObserverPano(fromPositionVector, observers);
+
+		if (observer) {
+			console.log('--has observer--');
+			itemLabel.observerIndex = observer.panoIndex;
+		}
+
+		if (typeof itemLabel.observerIndex === "number") {
+			const observer = observers[itemLabel.observerIndex];
+			const direction = fromPositionVector.clone().sub(observer.position).normalize();
+
+			const cameraCoord = {
+				longitude: Math.PI + Math.atan2(direction.x, direction.z),
+				latitude: Math.acos(direction.y / direction.length()) - Math.PI / 2
+			};
+
+			five.setState(Object.assign(Object.assign({}, cameraCoord), {
+				mode: Five.Mode.Panorama,
+				panoIndex: itemLabel.observerIndex
+			}));
+
+			// 游走结束更新 render list
+			five.once('initAnimationEnded', () => {
+				$$invalidate(1, renderItemLabels = renderItemLabels.map(item => {
+					return Object.assign(Object.assign({}, item), { isFold: item.id !== itemLabel.id });
+				}));
+
+				five.once('cameraUpdate', () => {
+					$$invalidate(1, renderItemLabels = renderItemLabels.map(item => {
+						return Object.assign(Object.assign({}, item), { isFold: false });
+					}));
+				});
+			});
+		}
+	};
+
+	beforeUpdate(() => {
+		addDataUpdateListener();
+	});
+
+	onMount(() => {
+		$$invalidate(1, renderItemLabels = transform2RenderData(itemLabels));
+		curItemLabels = itemLabels;
+		onItemLabelUpdate();
+		addResizeListener();
+		five.on('cameraUpdate', handleCameraUpdateCallback);
+		five.on('modeChange', onFiveModeChange);
+	});
+
 	onDestroy(() => {
 		five.off('cameraUpdate', handleCameraUpdateCallback);
+		five.off('modeChange', onFiveModeChange);
 		resizeObserver.unobserve(wrapper);
 	});
 
@@ -365,25 +522,29 @@ function instance($$self, $$props, $$invalidate) {
 	}
 
 	$$self.$$set = $$props => {
-		if ('five' in $$props) $$invalidate(0, five = $$props.five);
-		if ('modelOcclusionEnable' in $$props) $$invalidate(6, modelOcclusionEnable = $$props.modelOcclusionEnable);
-		if ('itemLabels' in $$props) $$invalidate(7, itemLabels = $$props.itemLabels);
-		if ('wrapper' in $$props) $$invalidate(8, wrapper = $$props.wrapper);
-		if ('hooks' in $$props) $$invalidate(1, hooks = $$props.hooks);
-		if ('displayStrategyType' in $$props) $$invalidate(9, displayStrategyType = $$props.displayStrategyType);
+		if ('five' in $$props) $$invalidate(7, five = $$props.five);
+		if ('modelOcclusionEnable' in $$props) $$invalidate(8, modelOcclusionEnable = $$props.modelOcclusionEnable);
+		if ('itemLabels' in $$props) $$invalidate(9, itemLabels = $$props.itemLabels);
+		if ('wrapper' in $$props) $$invalidate(10, wrapper = $$props.wrapper);
+		if ('hooks' in $$props) $$invalidate(0, hooks = $$props.hooks);
+		if ('displayStrategyType' in $$props) $$invalidate(11, displayStrategyType = $$props.displayStrategyType);
+		if ('maxVisibleDistance' in $$props) $$invalidate(12, maxVisibleDistance = $$props.maxVisibleDistance);
 	};
 
 	return [
-		five,
 		hooks,
 		renderItemLabels,
+		anchorEnabled,
 		containerWidth,
 		containerHeight,
 		itemsVisible,
+		onIconClick,
+		five,
 		modelOcclusionEnable,
 		itemLabels,
 		wrapper,
 		displayStrategyType,
+		maxVisibleDistance,
 		div_elementresize_handler
 	];
 }
@@ -399,14 +560,16 @@ class Component extends SvelteComponent {
 			create_fragment,
 			safe_not_equal,
 			{
-				five: 0,
-				modelOcclusionEnable: 6,
-				itemLabels: 7,
-				wrapper: 8,
-				hooks: 1,
-				displayStrategyType: 9
+				five: 7,
+				modelOcclusionEnable: 8,
+				itemLabels: 9,
+				wrapper: 10,
+				hooks: 0,
+				displayStrategyType: 11,
+				maxVisibleDistance: 12
 			},
-			add_css
+			add_css,
+			[-1, -1]
 		);
 	}
 }