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

package/dist/ItemLabelPlugin/index.js

@@ -304,18 +304,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]
@@ -332,7 +332,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);
@@ -352,12 +352,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,
@@ -377,7 +377,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);
 
@@ -424,7 +424,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);
@@ -441,7 +441,7 @@ function create_fragment(ctx) {
 			}
 
 			internal.attr(div, "class", "item-labels-container svelte-gk8s47");
-			internal.add_render_callback(() => /*div_elementresize_handler*/ ctx[12].call(div));
+			internal.add_render_callback(() => /*div_elementresize_handler*/ ctx[13].call(div));
 			internal.set_style(div, "opacity", /*itemsVisible*/ ctx[5] ? 1 : 0, false);
 		},
 		m(target, anchor) {
@@ -451,7 +451,7 @@ function create_fragment(ctx) {
 				each_blocks[i].m(div, null);
 			}
 
-			div_resize_listener = internal.add_resize_listener(div, /*div_elementresize_handler*/ ctx[12].bind(div));
+			div_resize_listener = internal.add_resize_listener(div, /*div_elementresize_handler*/ ctx[13].bind(div));
 			current = true;
 		},
 		p(ctx, dirty) {
@@ -499,6 +499,7 @@ function instance($$self, $$props, $$invalidate) {
 	const { Raycaster, Vector3 } = THREE__namespace;
 	let { five: five$1 } = $$props;
 	let { modelOcclusionEnable } = $$props;
+	let { onlyVisibleInPanorama } = $$props;
 	let { itemLabels } = $$props;
 	let { hooks } = $$props;
 	let { displayStrategyType } = $$props;
@@ -550,7 +551,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);
 	};
 
@@ -571,8 +575,15 @@ function instance($$self, $$props, $$invalidate) {
 	};
 
 	const getFormatedItemLabels = (five$1, labels) => {
+		console.log(labels);
+
 		// 计算位置 & 可见性
 		const newLabels = labels.map(label => {
+			// 不在绑定点位则直接不可见
+			if (five$1.state.panoIndex !== label.panoIndex) {
+				return Object.assign(Object.assign({}, label), { visible: false });
+			}
+
 			const cssOffset = getLabelCssOffset(five$1, label);
 			label.name.length * basicWidth;
 			const strokeLength = getStrokeLength(label.modelPosition[1], displayStrategyType);
@@ -625,16 +636,6 @@ function instance($$self, $$props, $$invalidate) {
 		handleCameraUpdate();
 	};
 
-	const onFiveModeChange = mode => {
-		$$invalidate(5, itemsVisible = false);
-
-		five$1.once('initAnimationEnded', (panoIndex, pose, userAction) => {
-			$$invalidate(2, anchorEnabled = mode === five.Five.Mode.Panorama);
-			$$invalidate(5, itemsVisible = true);
-			if (!userAction) return; else onItemLabelUpdate();
-		});
-	};
-
 	const handleCameraUpdate = debounce(
 		() => {
 			$$invalidate(5, itemsVisible = true);
@@ -692,11 +693,10 @@ function instance($$self, $$props, $$invalidate) {
 	const onIconClick = itemLabel => {
 		if (five$1.state.mode === five.Five.Mode.Panorama) return;
 		const observers = five$1.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;
 		}
 
@@ -739,12 +739,12 @@ function instance($$self, $$props, $$invalidate) {
 		onItemLabelUpdate();
 		addResizeListener();
 		five$1.on('cameraUpdate', handleCameraUpdateCallback);
-		five$1.on('modeChange', onFiveModeChange);
-	});
+	}); // five.on('modeChange', onFiveModeChange)
 
 	svelte.onDestroy(() => {
 		five$1.off('cameraUpdate', handleCameraUpdateCallback);
-		five$1.off('modeChange', onFiveModeChange);
+
+		// five.off('modeChange', onFiveModeChange)
 		window.removeEventListener('resize', onResize, false);
 	});
 
@@ -758,10 +758,11 @@ function instance($$self, $$props, $$invalidate) {
 	$$self.$$set = $$props => {
 		if ('five' in $$props) $$invalidate(7, five$1 = $$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 [
@@ -774,6 +775,7 @@ function instance($$self, $$props, $$invalidate) {
 		onIconClick,
 		five$1,
 		modelOcclusionEnable,
+		onlyVisibleInPanorama,
 		itemLabels,
 		displayStrategyType,
 		maxVisibleDistance,
@@ -794,10 +796,11 @@ class ItemLabelComponent extends internal.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]
@@ -807,12 +810,12 @@ class ItemLabelComponent extends internal.SvelteComponent {
 
 /** @description 转成内部所需数据 */
 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 })));
 }
 
 const defaultMaxVisibleDistance = undefined;
 const Plugin = (five$1, params) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const pluginState = {
         container: document.createElement('div'),
         data: null,
@@ -823,8 +826,9 @@ const Plugin = (five$1, params) => {
         app: undefined,
         hooks: new five.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 : exports.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 : exports.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 = `
@@ -861,6 +865,7 @@ const Plugin = (five$1, params) => {
         return true;
     };
     const dispose = () => {
+        removeListener4Five();
         pluginState.container.remove();
     };
     const render = () => {
@@ -880,6 +885,7 @@ const Plugin = (five$1, params) => {
                 props: {
                     five: five$1,
                     modelOcclusionEnable: pluginState.modelOcclusionEnable,
+                    onlyVisibleInPanorama: pluginState.onlyVisibleInPanorama,
                     itemLabels: pluginState.itemLabels,
                     wrapper: pluginState.wrapper,
                     hooks: pluginState.hooks,
@@ -897,9 +903,27 @@ const Plugin = (five$1, params) => {
     };
     // 添加 five 监听
     const addListener4Five = () => {
-        // five.on('modeChange', onFiveModeChange)
+        five$1.on('modeChange', onFiveModeChange);
         five$1.once('dispose', dispose);
     };
+    // 取消 five 监听
+    const removeListener4Five = () => {
+        five$1.off('modeChange', onFiveModeChange);
+    };
+    const onFiveModeChange = (mode) => {
+        // if (!pluginState.enabled) return
+        if (mode !== five.Five.Mode.Panorama) {
+            pluginState.fiveModeEnabled = false;
+            disable();
+            return;
+        }
+        // pluginState.fiveModeEnabled = false
+        // render()
+        five$1.once('initAnimationEnded', () => {
+            pluginState.fiveModeEnabled = true;
+            enable();
+        });
+    };
     addListener4Five();
     return {
         appendTo,

package/dist/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/dist/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/dist/ModelViewPlugin/index.js

@@ -74,8 +74,7 @@ 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;
             }
@@ -123,7 +122,7 @@ 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/dist/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/dist/PanoRulerProPlugin/index.d.ts

@@ -0,0 +1,8 @@
+import type { FivePlugin } from '@realsee/five';
+import type { PanoRulerProPluginParameterType, PanoRulerProPluginExportType } from './typings';
+/**
+ * 全景标尺插件
+ */
+export declare const PanoRulerProPlugin: FivePlugin<PanoRulerProPluginParameterType, PanoRulerProPluginExportType>;
+export default PanoRulerProPlugin;
+export type { PanoRulerProPluginParameterType, PanoRulerProPluginExportType, PanoRulerProPluginOptions, PanoRulerProPluginState, } from './typings';