@realsee/dnalogel 2.0.0-alpha.9 → 2.0.0

package/libs/ItemLabelPlugin/ItemLabelComponent.js

@@ -0,0 +1,568 @@
+/* generated by Svelte v3.49.0 */
+import {
+	SvelteComponent,
+	add_render_callback,
+	add_resize_listener,
+	append_styles,
+	attr,
+	check_outros,
+	create_component,
+	destroy_component,
+	detach,
+	element,
+	empty,
+	group_outros,
+	init,
+	insert,
+	mount_component,
+	outro_and_destroy_block,
+	safe_not_equal,
+	set_style,
+	transition_in,
+	transition_out,
+	update_keyed_each
+} from "svelte/internal";
+
+import { Five } from '@realsee/five';
+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-gk8s47", ".item-labels-container.svelte-gk8s47{width:100%;height:100%;position:relative}");
+}
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[31] = list[i];
+	return child_ctx;
+}
+
+// (234:2) {#if itemLabelItem.visible}
+function create_if_block(ctx) {
+	let itemlabelitem;
+	let current;
+
+	itemlabelitem = new ItemLabelItem({
+			props: {
+				itemLabel: /*itemLabelItem*/ ctx[31],
+				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[31];
+			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);
+		}
+	};
+}
+
+// (233: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[31].visible && create_if_block(ctx);
+
+	return {
+		key: key_1,
+		first: null,
+		c() {
+			first = empty();
+			if (if_block) if_block.c();
+			if_block_anchor = empty();
+			this.first = first;
+		},
+		m(target, anchor) {
+			insert(target, first, anchor);
+			if (if_block) if_block.m(target, anchor);
+			insert(target, if_block_anchor, anchor);
+			current = true;
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+
+			if (/*itemLabelItem*/ ctx[31].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(if_block);
+			current = true;
+		},
+		o(local) {
+			transition_out(if_block);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(first);
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(if_block_anchor);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let div;
+	let each_blocks = [];
+	let each_1_lookup = new Map();
+	let div_resize_listener;
+	let current;
+	let each_value = /*renderItemLabels*/ ctx[1];
+	const get_key = ctx => /*itemLabelItem*/ ctx[31].id;
+
+	for (let i = 0; i < each_value.length; i += 1) {
+		let child_ctx = get_each_context(ctx, each_value, i);
+		let key = get_key(child_ctx);
+		each_1_lookup.set(key, each_blocks[i] = create_each_block(key, child_ctx));
+	}
+
+	return {
+		c() {
+			div = element("div");
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			attr(div, "class", "item-labels-container svelte-gk8s47");
+			add_render_callback(() => /*div_elementresize_handler*/ ctx[13].call(div));
+			set_style(div, "opacity", /*itemsVisible*/ ctx[5] ? 1 : 0, false);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(div, null);
+			}
+
+			div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[13].bind(div));
+			current = true;
+		},
+		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[0] & /*itemsVisible*/ 32) {
+				set_style(div, "opacity", /*itemsVisible*/ ctx[5] ? 1 : 0, false);
+			}
+		},
+		i(local) {
+			if (current) return;
+
+			for (let i = 0; i < each_value.length; i += 1) {
+				transition_in(each_blocks[i]);
+			}
+
+			current = true;
+		},
+		o(local) {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				transition_out(each_blocks[i]);
+			}
+
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].d();
+			}
+
+			div_resize_listener();
+		}
+	};
+}
+
+let cssHeight = 26;
+let basicWidth = 11;
+
+function instance($$self, $$props, $$invalidate) {
+	const { Raycaster, Vector3 } = THREE;
+	let { five } = $$props;
+	let { modelOcclusionEnable } = $$props;
+	let { onlyVisibleInPanorama } = $$props;
+	let { itemLabels } = $$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 containerWidth;
+	let containerHeight;
+
+	// 计算重叠
+	let cssOffsetLists = [];
+
+	// 动画过程中 itemsVisible 为 false
+	let itemsVisible = true;
+
+	/**
+ * 可见性策略：
+ * 1、当前楼层(假设先不考虑多楼层)
+ * 2、模型未被遮挡（一个 box 有没有被遮挡的计算？ TODO）
+ * */
+	const judgeImpacted = (five, itemLabel) => {
+		// 虚拟 VR 仅有一层，不考虑楼层信息
+		const cameraPosition = five.camera.position.clone();
+
+		const modelPosition = new Vector3(itemLabel.modelPosition[0], itemLabel.modelPosition[1], itemLabel.modelPosition[2]);
+
+		// 计算点到相机的位置
+		const vectorDistance = modelPosition.distanceTo(cameraPosition);
+
+		// 判断距离，大于最大可见距离直接不可见 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);
+	};
+
+	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 获取
+	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 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;
+	};
+
+	const getFormatedItemLabels = (five, labels) => {
+		// 计算位置 & 可见性
+		const newLabels = labels.map(label => {
+			// 不在绑定点位则直接不可见
+			if (five.state.panoIndex !== label.panoIndex) {
+				return Object.assign(Object.assign({}, label), { visible: false });
+			}
+
+			const cssOffset = getLabelCssOffset(five, label);
+			const curLabelWidth = label.name.length * basicWidth;
+			const strokeLength = getStrokeLength(label.modelPosition[1], displayStrategyType);
+
+			// 是否加入碰撞检测
+			// 配置加入碰撞检测，则判断碰撞检测
+			// 在可见范围内， 仅在 Panorama 模态计算
+			const isInViewport = five.currentMode === Five.Mode.Panorama
+			? judgeInViewport(new Vector3(label.position[0], label.position[1], label.position[2]))
+			: true;
+
+			// 碰撞
+			const isBlocked = modelOcclusionEnable
+			? judgeImpacted(five, label)
+			: false;
+
+			const visible = isInViewport && !isBlocked;
+
+			// 关掉重叠计算
+			// 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 = [];
+		$$invalidate(1, renderItemLabels = getFormatedItemLabels(five, renderItemLabels));
+	};
+
+	const handleCameraUpdateCallback = () => {
+		$$invalidate(5, itemsVisible = false);
+		handleCameraUpdate();
+	};
+
+	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(
+		() => {
+			$$invalidate(5, itemsVisible = true);
+			onItemLabelUpdate();
+		},
+		300
+	);
+
+	const onResize = () => {
+		five.once('renderFrame', onItemLabelUpdate);
+	};
+
+	const addResizeListener = () => {
+		window.addEventListener('resize', onResize, false);
+	};
+
+	const addDataUpdateListener = () => {
+		if (curItemLabels !== itemLabels) {
+			$$invalidate(1, renderItemLabels = transform2RenderData(itemLabels));
+			curItemLabels = itemLabels;
+			onItemLabelUpdate();
+		}
+	};
+
+	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().fromArray(itemLabel.position);
+		const observer = getNearObserverPano(fromPositionVector, observers);
+
+		if (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)
+		window.removeEventListener('resize', onResize, false);
+	});
+
+	function div_elementresize_handler() {
+		containerWidth = this.clientWidth;
+		containerHeight = this.clientHeight;
+		$$invalidate(3, containerWidth);
+		$$invalidate(4, containerHeight);
+	}
+
+	$$self.$$set = $$props => {
+		if ('five' in $$props) $$invalidate(7, five = $$props.five);
+		if ('modelOcclusionEnable' in $$props) $$invalidate(8, modelOcclusionEnable = $$props.modelOcclusionEnable);
+		if ('onlyVisibleInPanorama' in $$props) $$invalidate(9, onlyVisibleInPanorama = $$props.onlyVisibleInPanorama);
+		if ('itemLabels' in $$props) $$invalidate(10, itemLabels = $$props.itemLabels);
+		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 [
+		hooks,
+		renderItemLabels,
+		anchorEnabled,
+		containerWidth,
+		containerHeight,
+		itemsVisible,
+		onIconClick,
+		five,
+		modelOcclusionEnable,
+		onlyVisibleInPanorama,
+		itemLabels,
+		displayStrategyType,
+		maxVisibleDistance,
+		div_elementresize_handler
+	];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+
+		init(
+			this,
+			options,
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{
+				five: 7,
+				modelOcclusionEnable: 8,
+				onlyVisibleInPanorama: 9,
+				itemLabels: 10,
+				hooks: 0,
+				displayStrategyType: 11,
+				maxVisibleDistance: 12
+			},
+			add_css,
+			[-1, -1]
+		);
+	}
+}
+
+export default Component;