@realsee/dnalogel 2.0.0-alpha.10 → 2.0.0-alpha.13

package/libs/ModelItemLabelPlugin/ItemLabelComponent.js

@@ -0,0 +1,422 @@
+/* generated by Svelte v3.47.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,
+	transition_in,
+	transition_out,
+	update_keyed_each
+} from "svelte/internal";
+
+import { DISPLAY_STRATEGY_TYPE } from "./typings";
+import { beforeUpdate, onDestroy, onMount } from "svelte";
+import * as THREE from 'three';
+import ItemLabelItem from './ItemLabelItem';
+import "./events.type";
+
+function add_css(target) {
+	append_styles(target, "svelte-rmdeb", ".item-labels-container.svelte-rmdeb{width:100%;height:100%;position:relative}");
+}
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[26] = list[i];
+	return child_ctx;
+}
+
+// (179:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
+function create_each_block(key_1, ctx) {
+	let first;
+	let itemlabelitem;
+	let current;
+
+	itemlabelitem = new ItemLabelItem({
+			props: {
+				itemLabel: /*itemLabelItem*/ ctx[26],
+				hooks: /*hooks*/ ctx[0]
+			}
+		});
+
+	return {
+		key: key_1,
+		first: null,
+		c() {
+			first = empty();
+			create_component(itemlabelitem.$$.fragment);
+			this.first = first;
+		},
+		m(target, anchor) {
+			insert(target, first, anchor);
+			mount_component(itemlabelitem, target, anchor);
+			current = true;
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+			const itemlabelitem_changes = {};
+			if (dirty & /*renderItemLabels*/ 2) itemlabelitem_changes.itemLabel = /*itemLabelItem*/ ctx[26];
+			if (dirty & /*hooks*/ 1) itemlabelitem_changes.hooks = /*hooks*/ ctx[0];
+			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) {
+			if (detaching) detach(first);
+			destroy_component(itemlabelitem, detaching);
+		}
+	};
+}
+
+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[26].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-rmdeb");
+			add_render_callback(() => /*div_elementresize_handler*/ ctx[9].call(div));
+		},
+		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[9].bind(div));
+			current = true;
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*renderItemLabels, hooks*/ 3) {
+				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();
+			}
+		},
+		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 { itemLabels } = $$props;
+	let { wrapper } = $$props;
+	let { hooks } = $$props;
+	let { displayStrategyType } = $$props;
+	let curItemLabels = null;
+	let renderItemLabels = null;
+	let wrapperSize = { width: 0, height: 0 };
+	let containerWidth;
+	let containerHeight;
+
+	// 计算重叠
+	let cssOffsetLists = [];
+
+	/**
+ * 可见性策略：
+ * 1、当前楼层(假设先不考虑多楼层)
+ * 2、模型未被遮挡（一个 box 有没有被遮挡的计算？ TODO）
+ * */
+	// 画辅助线
+	function addHelper(x, y, z, type, helper) {
+		let geometry, materials, mesh;
+
+		if (type === 'box') {
+			geometry = new THREE.BoxGeometry(0.6, 2.5, 1.010696);
+			let mats = [];
+
+			for (let i = 0; i < geometry.faces.length; i++) {
+				const material = new THREE.MeshBasicMaterial({
+						color: new THREE.Color(Math.random() * 0xffffff)
+					});
+
+				mats.push(material);
+			}
+
+			materials = mats;
+		} else if (type === 'ball') {
+			geometry = new THREE.SphereGeometry(0.02, 0.02, 64);
+			materials = new THREE.MeshBasicMaterial({ color: new THREE.Color(0xffffff) });
+		}
+
+		mesh = new THREE.Mesh(geometry, materials);
+
+		// y 轴需要加一半的高度，因为position是从地面开始的，或者我应该算偏移更合理
+		mesh.position.set(x, y, z);
+
+		if (helper) {
+			const helper = new THREE.AxesHelper(5);
+			mesh.add(helper);
+		}
+
+		five.scene.add(mesh);
+	}
+
+	const getLabelVisible = (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);
+	};
+
+	// 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 getLabelTransform = cssOffset => {
+		return `translate(${cssOffset[0]}px, ${cssOffset[1]}px)`;
+	};
+
+	// 重叠计算
+	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;
+	};
+
+	function getStrokeLength(itemSpaceHeight, type) {
+		switch (type) {
+			case DISPLAY_STRATEGY_TYPE.SMALL:
+				return Math.ceil(-27.78 * itemSpaceHeight + 85);
+			case DISPLAY_STRATEGY_TYPE.MIDLLE:
+				return Math.ceil(-38.9 * itemSpaceHeight + 130);
+			case DISPLAY_STRATEGY_TYPE.LARGE:
+				return Math.ceil(-44.44 * itemSpaceHeight + 140);
+		}
+	}
+
+	const getFormatedItemLabels = (five, labels) => {
+		// 计算位置 & 可见性
+		const newLabels = labels.map(label => {
+			const cssOffset = getLabelCssOffset(five, label);
+			const curLabelWidth = label.name.length * basicWidth;
+			const strokeLength = getStrokeLength(label.modelPosition[1], displayStrategyType);
+
+			// 是否加入碰撞检测
+			const naturalVisible = modelOcclusionEnable
+			? getLabelVisible(five, label)
+			: true;
+
+			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));
+	};
+
+	beforeUpdate(() => {
+		addDataUpdateListener();
+	});
+
+	onMount(() => {
+		$$invalidate(1, renderItemLabels = itemLabels);
+		curItemLabels = itemLabels;
+		onItemLabelUpdate();
+
+		// five.on('cameraUpdate', onItemLabelUpdate)
+		addResizeListener();
+	});
+
+	const addResizeListener = () => {
+		wrapperSize = {
+			width: wrapper.clientWidth,
+			height: wrapper.clientHeight
+		};
+
+		resizeObserver.observe(wrapper);
+	};
+
+	const addDataUpdateListener = () => {
+		if (curItemLabels !== itemLabels) {
+			$$invalidate(1, renderItemLabels = itemLabels);
+			curItemLabels = itemLabels;
+			console.log('--debug--update--');
+			onItemLabelUpdate();
+		}
+	};
+
+	const resizeObserver = new ResizeObserver(entries => {
+			const entry = entries[0];
+			const target = entry.target;
+			const curWidth = target.clientWidth;
+			const curHeight = target.clientHeight;
+
+			if (wrapperSize.width !== curWidth || wrapperSize.height !== curHeight) {
+				wrapperSize = { width: curWidth, height: curHeight };
+				onItemLabelUpdate();
+			}
+		});
+
+	onDestroy(() => {
+		// five.off('cameraUpdate', onItemLabelUpdate)
+		resizeObserver.unobserve(wrapper);
+
+		curItemLabels = null;
+		$$invalidate(1, renderItemLabels = null);
+		wrapperSize = { width: 0, height: 0 };
+	});
+
+	function div_elementresize_handler() {
+		containerWidth = this.clientWidth;
+		containerHeight = this.clientHeight;
+		$$invalidate(2, containerWidth);
+		$$invalidate(3, containerHeight);
+	}
+
+	$$self.$$set = $$props => {
+		if ('five' in $$props) $$invalidate(4, five = $$props.five);
+		if ('modelOcclusionEnable' in $$props) $$invalidate(5, modelOcclusionEnable = $$props.modelOcclusionEnable);
+		if ('itemLabels' in $$props) $$invalidate(6, itemLabels = $$props.itemLabels);
+		if ('wrapper' in $$props) $$invalidate(7, wrapper = $$props.wrapper);
+		if ('hooks' in $$props) $$invalidate(0, hooks = $$props.hooks);
+		if ('displayStrategyType' in $$props) $$invalidate(8, displayStrategyType = $$props.displayStrategyType);
+	};
+
+	return [
+		hooks,
+		renderItemLabels,
+		containerWidth,
+		containerHeight,
+		five,
+		modelOcclusionEnable,
+		itemLabels,
+		wrapper,
+		displayStrategyType,
+		div_elementresize_handler
+	];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+
+		init(
+			this,
+			options,
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{
+				five: 4,
+				modelOcclusionEnable: 5,
+				itemLabels: 6,
+				wrapper: 7,
+				hooks: 0,
+				displayStrategyType: 8
+			},
+			add_css
+		);
+	}
+}
+
+export default Component;

package/libs/ModelItemLabelPlugin/ItemLabelItem.js

@@ -0,0 +1,133 @@
+/* generated by Svelte v3.47.0 */
+import {
+	SvelteComponent,
+	append,
+	append_styles,
+	attr,
+	detach,
+	element,
+	init,
+	insert,
+	listen,
+	noop,
+	null_to_empty,
+	safe_not_equal,
+	set_data,
+	set_style,
+	space,
+	text
+} from "svelte/internal";
+
+import "./events.type";
+import classNames from 'classnames';
+
+function add_css(target) {
+	append_styles(target, "svelte-1mttyji", ".item-label-item.svelte-1mttyji{position:absolute;z-index:0;transform:none;cursor:pointer;pointer-events:none;user-select:none;opacity:0}.item-label-item.visible.svelte-1mttyji{opacity:1;animation:svelte-1mttyji-fadeIn .3s ease-in}.item-label-item__text-wrap.svelte-1mttyji::before{content:'';position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, .3);filter:blur(16px);z-index:-1}.item-label-item__text-wrap.svelte-1mttyji{padding:6px 6px 0;position:absolute;height:20px;pointer-events:all;background-size:100% 100%;background-repeat:no-repeat;white-space:nowrap;line-height:10px;font-size:11px;font-weight:bold;color:#FFEAC0;transform:translate(-50%, 0);display:flex;justify-content:center;align-items:center}.item-label-item__text.svelte-1mttyji{padding-bottom:4px;border-top:0 solid;border-left:0 solid;border-right:0 solid;border-bottom:1px solid;border-image:linear-gradient(to right, rgba(234, 208, 154, 0), rgba(234, 208, 154, 100), rgba(234, 208, 154, 0)) 4.5 1 4.5}.item-label-item__bar.svelte-1mttyji{position:absolute;bottom:0;width:1px;background-image:linear-gradient(to bottom, rgba(234, 208, 154, 0), rgba(234, 208, 154, 1))}@keyframes svelte-1mttyji-fadeIn{from{opacity:0\n        }to{opacity:1\n        }}");
+}
+
+function create_fragment(ctx) {
+	let div2;
+	let div0;
+	let span;
+
+	let t0_value = (/*itemLabel*/ ctx[0].name.length > 6
+	? `${/*itemLabel*/ ctx[0].name.slice(0, 6)}...`
+	: /*itemLabel*/ ctx[0].name) + "";
+
+	let t0;
+	let t1;
+	let div1;
+	let div2_class_value;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			div2 = element("div");
+			div0 = element("div");
+			span = element("span");
+			t0 = text(t0_value);
+			t1 = space();
+			div1 = element("div");
+			attr(span, "class", "item-label-item__text svelte-1mttyji");
+			attr(div0, "class", "item-label-item__text-wrap svelte-1mttyji");
+			set_style(div0, "top", `-${/*itemLabel*/ ctx[0].strokeLength + 26}px`);
+			attr(div1, "class", "item-label-item__bar svelte-1mttyji");
+			set_style(div1, "height", `${/*itemLabel*/ ctx[0].strokeLength}px`);
+			attr(div2, "class", div2_class_value = "" + (null_to_empty(classNames("item-label-item", { visible: /*itemLabel*/ ctx[0].visible })) + " svelte-1mttyji"));
+			set_style(div2, "z-index", /*itemLabel*/ ctx[0].zIndex, false);
+			set_style(div2, "transform", /*itemLabel*/ ctx[0].transform, false);
+		},
+		m(target, anchor) {
+			insert(target, div2, anchor);
+			append(div2, div0);
+			append(div0, span);
+			append(span, t0);
+			append(div2, t1);
+			append(div2, div1);
+
+			if (!mounted) {
+				dispose = listen(span, "click", /*onClick*/ ctx[1]);
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*itemLabel*/ 1 && t0_value !== (t0_value = (/*itemLabel*/ ctx[0].name.length > 6
+			? `${/*itemLabel*/ ctx[0].name.slice(0, 6)}...`
+			: /*itemLabel*/ ctx[0].name) + "")) set_data(t0, t0_value);
+
+			if (dirty & /*itemLabel*/ 1) {
+				set_style(div0, "top", `-${/*itemLabel*/ ctx[0].strokeLength + 26}px`);
+			}
+
+			if (dirty & /*itemLabel*/ 1) {
+				set_style(div1, "height", `${/*itemLabel*/ ctx[0].strokeLength}px`);
+			}
+
+			if (dirty & /*itemLabel*/ 1 && div2_class_value !== (div2_class_value = "" + (null_to_empty(classNames("item-label-item", { visible: /*itemLabel*/ ctx[0].visible })) + " svelte-1mttyji"))) {
+				attr(div2, "class", div2_class_value);
+			}
+
+			if (dirty & /*itemLabel*/ 1) {
+				set_style(div2, "z-index", /*itemLabel*/ ctx[0].zIndex, false);
+			}
+
+			if (dirty & /*itemLabel*/ 1) {
+				set_style(div2, "transform", /*itemLabel*/ ctx[0].transform, false);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div2);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { itemLabel } = $$props;
+	let { hooks } = $$props;
+
+	function onClick() {
+		console.log('__onclick___: ', itemLabel);
+		hooks.emit('onLabelClick', itemLabel);
+	}
+
+	$$self.$$set = $$props => {
+		if ('itemLabel' in $$props) $$invalidate(0, itemLabel = $$props.itemLabel);
+		if ('hooks' in $$props) $$invalidate(2, hooks = $$props.hooks);
+	};
+
+	return [itemLabel, onClick, hooks];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { itemLabel: 0, hooks: 2 }, add_css);
+	}
+}
+
+export default Component;

package/libs/ModelItemLabelPlugin/events.type.d.ts

@@ -0,0 +1,9 @@
+import { SubscribeEventMap } from '@realsee/five';
+import { ItemLabel } from "./typings";
+export interface ItemLabelEvent extends SubscribeEventMap {
+    /**
+     * 点击标签
+     */
+    onLabelClick: (itemLabel: ItemLabel) => void;
+}
+export declare type PluginEvent = ItemLabelEvent;

package/libs/ModelItemLabelPlugin/events.type.js

@@ -0,0 +1 @@
+export {};

package/libs/ModelItemLabelPlugin/index.d.ts

@@ -0,0 +1,4 @@
+import type { FivePlugin } from "@realsee/five";
+import { ModelItemLabelPluginExportReturnsType, ModelItemLabelPluginParametersType } from "./typings";
+export declare const ModelItemLabelPlugin: FivePlugin<ModelItemLabelPluginParametersType, ModelItemLabelPluginExportReturnsType>;
+export default ModelItemLabelPlugin;