@realsee/dnalogel 2.0.0-alpha.36 → 2.0.0-alpha.39

package/libs/ItemLabelPlugin/ItemLabelComponent.js

@@ -41,18 +41,18 @@ function add_css(target) {
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[30] = list[i];
+	child_ctx[31] = list[i];
 	return child_ctx;
 }
 
-// (229:2) {#if itemLabelItem.visible}
+// (235:2) {#if itemLabelItem.visible}
 function create_if_block(ctx) {
 	let itemlabelitem;
 	let current;
 
 	itemlabelitem = new ItemLabelItem({
 			props: {
-				itemLabel: /*itemLabelItem*/ ctx[30],
+				itemLabel: /*itemLabelItem*/ ctx[31],
 				hooks: /*hooks*/ ctx[0],
 				anchorEnabled: /*anchorEnabled*/ ctx[2],
 				onIconClick: /*onIconClick*/ ctx[6]
@@ -69,7 +69,7 @@ function create_if_block(ctx) {
 		},
 		p(ctx, dirty) {
 			const itemlabelitem_changes = {};
-			if (dirty[0] & /*renderItemLabels*/ 2) itemlabelitem_changes.itemLabel = /*itemLabelItem*/ ctx[30];
+			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);
@@ -89,12 +89,12 @@ function create_if_block(ctx) {
 	};
 }
 
-// (228:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
+// (234: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[30].visible && create_if_block(ctx);
+	let if_block = /*itemLabelItem*/ ctx[31].visible && create_if_block(ctx);
 
 	return {
 		key: key_1,
@@ -114,7 +114,7 @@ function create_each_block(key_1, ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
-			if (/*itemLabelItem*/ ctx[30].visible) {
+			if (/*itemLabelItem*/ ctx[31].visible) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 
@@ -161,7 +161,7 @@ function create_fragment(ctx) {
 	let div_resize_listener;
 	let current;
 	let each_value = /*renderItemLabels*/ ctx[1];
-	const get_key = ctx => /*itemLabelItem*/ ctx[30].id;
+	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);
@@ -178,7 +178,7 @@ function create_fragment(ctx) {
 			}
 
 			attr(div, "class", "item-labels-container svelte-rmdeb");
-			add_render_callback(() => /*div_elementresize_handler*/ ctx[12].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) {
@@ -188,7 +188,7 @@ function create_fragment(ctx) {
 				each_blocks[i].m(div, null);
 			}
 
-			div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[12].bind(div));
+			div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[13].bind(div));
 			current = true;
 		},
 		p(ctx, dirty) {
@@ -238,6 +238,7 @@ 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;
@@ -289,7 +290,10 @@ function instance($$self, $$props, $$invalidate) {
 		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);
 	};
 
@@ -320,8 +324,15 @@ function instance($$self, $$props, $$invalidate) {
 	};
 
 	const getFormatedItemLabels = (five, labels) => {
+		console.log(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);
@@ -441,11 +452,10 @@ function instance($$self, $$props, $$invalidate) {
 	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 fromPositionVector = new Vector3().fromArray(itemLabel.position);
 		const observer = getNearObserverPano(fromPositionVector, observers);
 
 		if (observer) {
-			console.log('--has observer--');
 			itemLabel.observerIndex = observer.panoIndex;
 		}
 
@@ -488,12 +498,12 @@ function instance($$self, $$props, $$invalidate) {
 		onItemLabelUpdate();
 		addResizeListener();
 		five.on('cameraUpdate', handleCameraUpdateCallback);
-		five.on('modeChange', onFiveModeChange);
-	});
+	}); // five.on('modeChange', onFiveModeChange)
 
 	onDestroy(() => {
 		five.off('cameraUpdate', handleCameraUpdateCallback);
-		five.off('modeChange', onFiveModeChange);
+
+		// five.off('modeChange', onFiveModeChange)
 		window.removeEventListener('resize', onResize, false);
 	});
 
@@ -507,10 +517,11 @@ function instance($$self, $$props, $$invalidate) {
 	$$self.$$set = $$props => {
 		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 ('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(10, displayStrategyType = $$props.displayStrategyType);
-		if ('maxVisibleDistance' in $$props) $$invalidate(11, maxVisibleDistance = $$props.maxVisibleDistance);
+		if ('displayStrategyType' in $$props) $$invalidate(11, displayStrategyType = $$props.displayStrategyType);
+		if ('maxVisibleDistance' in $$props) $$invalidate(12, maxVisibleDistance = $$props.maxVisibleDistance);
 	};
 
 	return [
@@ -523,6 +534,7 @@ function instance($$self, $$props, $$invalidate) {
 		onIconClick,
 		five,
 		modelOcclusionEnable,
+		onlyVisibleInPanorama,
 		itemLabels,
 		displayStrategyType,
 		maxVisibleDistance,
@@ -543,10 +555,11 @@ class Component extends SvelteComponent {
 			{
 				five: 7,
 				modelOcclusionEnable: 8,
-				itemLabels: 9,
+				onlyVisibleInPanorama: 9,
+				itemLabels: 10,
 				hooks: 0,
-				displayStrategyType: 10,
-				maxVisibleDistance: 11
+				displayStrategyType: 11,
+				maxVisibleDistance: 12
 			},
 			add_css,
 			[-1, -1]

package/libs/ItemLabelPlugin/Plugin.js

@@ -1,10 +1,10 @@
-import { Subscribe } from "@realsee/five";
+import { Five, Subscribe } from "@realsee/five";
 import ItemLabelComponent from './ItemLabelComponent';
 import { ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE } from "./typings";
 import { parseItemLabelPluginData } from "./utils/parseData";
 const defaultMaxVisibleDistance = undefined;
 export const Plugin = (five, params) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const pluginState = {
         container: document.createElement('div'),
         data: null,
@@ -15,8 +15,9 @@ export const Plugin = (five, params) => {
         app: undefined,
         hooks: new Subscribe(),
         modelOcclusionEnable: (_a = params === null || params === void 0 ? void 0 : params.modelOcclusionEnable) !== null && _a !== void 0 ? _a : true,
-        displayStrategyType: (_b = params === null || params === void 0 ? void 0 : params.displayStrategyType) !== null && _b !== void 0 ? _b : ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE.SMALL,
-        maxVisibleDistance: (_c = params === null || params === void 0 ? void 0 : params.maxVisibleDistance) !== null && _c !== void 0 ? _c : defaultMaxVisibleDistance,
+        onlyVisibleInPanorama: (_b = params === null || params === void 0 ? void 0 : params.onlyVisibleInPanorama) !== null && _b !== void 0 ? _b : true,
+        displayStrategyType: (_c = params === null || params === void 0 ? void 0 : params.displayStrategyType) !== null && _c !== void 0 ? _c : ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE.SMALL,
+        maxVisibleDistance: (_d = params === null || params === void 0 ? void 0 : params.maxVisibleDistance) !== null && _d !== void 0 ? _d : defaultMaxVisibleDistance,
     };
     pluginState.container.setAttribute('class', 'item-label-plugin-container');
     pluginState.container.style.cssText = `
@@ -73,6 +74,7 @@ export const Plugin = (five, params) => {
                 props: {
                     five: five,
                     modelOcclusionEnable: pluginState.modelOcclusionEnable,
+                    onlyVisibleInPanorama: pluginState.onlyVisibleInPanorama,
                     itemLabels: pluginState.itemLabels,
                     wrapper: pluginState.wrapper,
                     hooks: pluginState.hooks,
@@ -90,21 +92,25 @@ export const Plugin = (five, params) => {
     };
     // 添加 five 监听
     const addListener4Five = () => {
-        // five.on('modeChange', onFiveModeChange)
+        five.on('modeChange', onFiveModeChange);
         five.once('dispose', dispose);
     };
     // 取消 five 监听
     const removeListener4Five = () => {
-        // five.off('modeChange', onFiveModeChange)
+        five.off('modeChange', onFiveModeChange);
     };
     const onFiveModeChange = (mode) => {
-        if (!pluginState.enabled)
+        // if (!pluginState.enabled) return
+        if (mode !== Five.Mode.Panorama) {
+            pluginState.fiveModeEnabled = false;
+            disable();
             return;
-        pluginState.fiveModeEnabled = false;
-        render();
+        }
+        // pluginState.fiveModeEnabled = false
+        // render()
         five.once('initAnimationEnded', () => {
             pluginState.fiveModeEnabled = true;
-            render();
+            enable();
         });
     };
     addListener4Five();

package/libs/ItemLabelPlugin/typings.d.ts

@@ -10,10 +10,12 @@ export declare enum ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE {
 export interface ItemLabelPluginParametersType {
     maxVisibleDistance?: number;
     modelOcclusionEnable?: boolean;
+    onlyVisibleInPanorama?: boolean;
     displayStrategyType?: Partial<ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE>;
 }
 export interface ItemLabelPluginData {
     item_labels: Readonly<{
+        panoIndex: number;
         id: string;
         code: string;
         name: string;
@@ -24,6 +26,7 @@ export interface ItemLabelPluginData {
     }>[];
 }
 export interface ItemLabel {
+    panoIndex: number;
     id: string;
     code: string;
     name: string;
@@ -54,6 +57,7 @@ export interface ItemLabelPluginState {
     app?: ItemLabelComponent | undefined;
     hooks: Subscribe<PluginEvent>;
     modelOcclusionEnable: boolean;
+    onlyVisibleInPanorama: boolean;
     displayStrategyType: Partial<ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE>;
     maxVisibleDistance: number | undefined;
 }

package/libs/ItemLabelPlugin/utils/parseData.js

@@ -1,4 +1,4 @@
 /** @description 转成内部所需数据 */
 export function parseItemLabelPluginData(data) {
-    return data.item_labels.map(label => (Object.assign({ modelPosition: [label.position[0], label.position[1], label.position[2]], observerIndex: undefined }, label)));
+    return data.item_labels.map(label => (Object.assign(Object.assign({}, label), { modelPosition: [label.position[0], label.position[1], label.position[2]], observerIndex: undefined })));
 }

package/libs/ModelViewPlugin/Plugin.d.ts

@@ -1,13 +1,13 @@
 import type { FivePlugin } from '@realsee/five';
 export interface ModelViewPluginExportType {
-    appendTo(element: HTMLElement, size?: {
+    appendTo: (element: HTMLElement, size?: {
         width?: number;
         height?: number;
-    }): void;
-    refresh(size?: {
+    }) => void;
+    refresh: (size?: {
         width?: number;
         height?: number;
-    }): void;
+    }) => void;
 }
 /**
  * Five 模型插件

package/libs/ModelViewPlugin/Plugin.js

@@ -49,8 +49,7 @@ export const ModelViewPlugin = (five) => {
     };
     const handleModelLoaded = () => {
         function cloneMaterial(material) {
-            material = material.clone();
-            material.uniforms.modelAlpha.value = 1;
+            material.clone().uniforms.modelAlpha.value = 1;
             if (material.uniforms.map.value) {
                 material.uniforms.map.value.needsUpdate = true;
             }
@@ -98,7 +97,7 @@ export const ModelViewPlugin = (five) => {
             return;
         const element = renderer.domElement;
         const container = element.parentNode;
-        if (container && container.nodeName) {
+        if (container === null || container === void 0 ? void 0 : container.nodeName) {
             const { width = container.offsetWidth, height = container.offsetHeight } = size;
             renderer.setSize(width, height);
             // 修改摄像机 aspect 比值

package/libs/PanoRulerProPlugin/Controller.d.ts

@@ -0,0 +1,15 @@
+import type { Five } from '@realsee/five';
+import type { PanoRulerProPluginDatas, PanoRulerProPluginParameterType, PanoRulerProPluginState } from './typings';
+export default class Controller {
+    private five;
+    private container;
+    private panoRulerProData;
+    private rulerItems;
+    state: PanoRulerProPluginState;
+    constructor(five: Five, params: PanoRulerProPluginParameterType);
+    load(serverData: PanoRulerProPluginDatas): Promise<void>;
+    enable(): boolean;
+    disable(): boolean;
+    private render;
+    private dispose;
+}

package/libs/PanoRulerProPlugin/Controller.js

@@ -0,0 +1,110 @@
+import RulerItems from './RulerItems';
+export default class Controller {
+    constructor(five, params) {
+        var _a, _b;
+        Object.defineProperty(this, "five", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "container", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: document.createElement('div')
+        });
+        Object.defineProperty(this, "panoRulerProData", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "rulerItems", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {
+                enabled: false,
+                loaded: false,
+                options: {
+                    className: '',
+                    distanceText: (distance) => `${distance.toFixed(1)}m`,
+                },
+            }
+        });
+        this.five = five;
+        this.container.classList.add('panoRulerProPlugin-container');
+        this.container.setAttribute('style', `position: absolute;pointer-events: none;width: 100%;height: 100%;left: 0;top: 0;overflow: hidden;`);
+        if (params) {
+            if (params.data) {
+                this.load(params.data);
+            }
+            this.state.options = Object.assign(Object.assign({}, this.state.options), (params.options || {}));
+            if ((_a = params.options) === null || _a === void 0 ? void 0 : _a.className)
+                this.container.classList.add((_b = params.options) === null || _b === void 0 ? void 0 : _b.className);
+        }
+        this.five.once('modelLoaded', async () => {
+            var _a, _b;
+            (_b = (_a = this.five.getElement()) === null || _a === void 0 ? void 0 : _a.parentNode) === null || _b === void 0 ? void 0 : _b.append(this.container);
+        });
+        this.five.once('dispose', () => this.dispose());
+    }
+    async load(serverData) {
+        if (!this.five.work)
+            return;
+        const data = serverData.data;
+        if (!data)
+            throw new Error('标尺数据依赖不齐全！');
+        this.panoRulerProData = data;
+        this.state.loaded = true;
+    }
+    enable() {
+        if (!this.state.loaded)
+            return false;
+        if (this.state.enabled)
+            return true;
+        this.state.enabled = true;
+        this.render();
+        return true;
+    }
+    disable() {
+        if (!this.state.enabled)
+            return true;
+        this.state.enabled = false;
+        this.render();
+        return true;
+    }
+    async render() {
+        var _a;
+        if (this.state.enabled) {
+            if (!this.panoRulerProData || !this.container)
+                return;
+            this.rulerItems = new RulerItems({
+                target: this.container,
+                props: {
+                    five: this.five,
+                    rulerDatas: this.panoRulerProData,
+                    options: this.state.options,
+                },
+            });
+        }
+        else {
+            (_a = this.rulerItems) === null || _a === void 0 ? void 0 : _a.$destroy();
+            this.rulerItems = undefined;
+        }
+    }
+    dispose() {
+        if (this.container) {
+            this.rulerItems.$destroy();
+            this.rulerItems = undefined;
+        }
+        this.container.remove();
+    }
+}