@realsee/dnalogel 2.0.0-alpha.12 → 2.0.0-alpha.15

package/libs/CSS3DRenderPlugin/index.js

@@ -14,24 +14,25 @@ import createResizeObserver from './utils/createResizeObserver';
 export const CSS3DRenderPlugin = (five) => {
     const state = { disposeCallbacks: [] };
     const create3DDomContainer = (...params) => {
+        var _a, _b, _c;
         const points = params[0].map((point) => (point instanceof Vector3 ? point : transformPositionToVector3(point)));
         const config = params[1];
-        if (points?.length < 4)
+        if ((points === null || points === void 0 ? void 0 : points.length) < 4)
             return console.error('points must be equal or greater than than 4');
-        if (!five?.model?.loaded)
-            return console.error('five.model.loaded is: ', five?.model?.loaded);
+        if (!((_a = five === null || five === void 0 ? void 0 : five.model) === null || _a === void 0 ? void 0 : _a.loaded))
+            return console.error('five.model.loaded is: ', (_b = five === null || five === void 0 ? void 0 : five.model) === null || _b === void 0 ? void 0 : _b.loaded);
         const fiveElement = five.getElement();
         if (!fiveElement)
             return console.error('five.getElement() is ' + fiveElement);
         const disposers = [];
-        const ratio = config?.ratio || 0.00216;
+        const ratio = (config === null || config === void 0 ? void 0 : config.ratio) || 0.00216;
         if (ratio <= 0.00215)
             console.warn('if you need click css3DElement on safari, ratio must be greater than 0.00215');
-        const dpr = config?.dpr || 1;
-        const mode = config?.mode || 'front';
-        const autoRender = config?.autoRender ?? true;
-        const behindFiveContainer = config?.behindFiveContainer || fiveElement.parentElement || document.body;
-        const container = config?.container || document.createElement('div');
+        const dpr = (config === null || config === void 0 ? void 0 : config.dpr) || 1;
+        const mode = (config === null || config === void 0 ? void 0 : config.mode) || 'front';
+        const autoRender = (_c = config === null || config === void 0 ? void 0 : config.autoRender) !== null && _c !== void 0 ? _c : true;
+        const behindFiveContainer = (config === null || config === void 0 ? void 0 : config.behindFiveContainer) || fiveElement.parentElement || document.body;
+        const container = (config === null || config === void 0 ? void 0 : config.container) || document.createElement('div');
         container.classList.add('__Dnalogel-plugin--CSS3DRenderPlugin');
         // 获取css3DObject, 如果mode为behind的话，一起获取mesh
         const { css3DObject, mesh } = createObject(points, { ratio, dpr, container, mode });
@@ -69,8 +70,9 @@ export const CSS3DRenderPlugin = (five) => {
                     css3DRenderer.render(scene, five.camera);
                 };
                 return () => {
+                    var _a;
                     scene.add(css3DObject);
-                    resizeObserver?.observe?.();
+                    (_a = resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe) === null || _a === void 0 ? void 0 : _a.call(resizeObserver);
                     renderEveryFrame();
                     if (mode === 'behind' && mesh) {
                         five.scene.add(mesh);
@@ -94,7 +96,8 @@ export const CSS3DRenderPlugin = (five) => {
         }
         // ======= INIT END =======
         const dispose = () => {
-            disposers.forEach((d) => d?.());
+            var _a;
+            disposers.forEach((d) => d === null || d === void 0 ? void 0 : d());
             scene.remove(css3DObject);
             if (scene.children.length === 0) {
                 if (typeof stateMode.requestAnimationFrameId === 'number') {
@@ -106,7 +109,7 @@ export const CSS3DRenderPlugin = (five) => {
                 if (mode === 'behind')
                     state.behindMode = undefined;
                 if (!state.behindMode && !state.frontMode) {
-                    resizeObserver?.unobserve?.();
+                    (_a = resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.unobserve) === null || _a === void 0 ? void 0 : _a.call(resizeObserver);
                 }
             }
             return true;
@@ -171,7 +174,7 @@ export const CSS3DRenderPlugin = (five) => {
     return {
         create3DDomContainer,
         disposeAll: () => {
-            state.disposeCallbacks.forEach((d) => d?.());
+            state.disposeCallbacks.forEach((d) => d === null || d === void 0 ? void 0 : d());
             state.disposeCallbacks = [];
         },
     };

package/libs/CameraMovementPlugin/index.js

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { Five } from '@realsee/five';
 import * as TWEEN from '@tweenjs/tween.js';
 import { tweenProgress } from '../shared-utils/animationFrame/tween';
@@ -29,21 +38,21 @@ const getLongitudeParams = (from, to, rotation) => {
  */
 export const CameraMovementPlugin = (five) => {
     const state = {};
-    const move = async (args, duration, opts = { preload: true }) => {
+    const move = (args, duration, opts = { preload: true }) => __awaiter(void 0, void 0, void 0, function* () {
         if (state.interruptCallback) {
             state.interruptCallback(false);
         }
         if (opts.asyncStartCallback) {
-            await opts.asyncStartCallback();
+            yield opts.asyncStartCallback();
         }
         if (args.mode && args.mode !== five.currentMode) {
-            await five.changeMode(args.mode);
+            yield five.changeMode(args.mode);
         }
         if (opts.preload && args.panoIndex !== undefined && args.panoIndex !== five.panoIndex) {
-            await five.preloadPano(args.panoIndex);
+            yield five.preloadPano(args.panoIndex);
         }
         if (opts.asyncEndCallback) {
-            await opts.asyncEndCallback();
+            yield opts.asyncEndCallback();
         }
         if (args.panoIndex === undefined &&
             args.fov === undefined &&
@@ -51,7 +60,7 @@ export const CameraMovementPlugin = (five) => {
             args.longitude === undefined) {
             return true;
         }
-        return await new Promise((resolve, reject) => {
+        return yield new Promise((resolve, reject) => {
             const panoIndex = args.panoIndex !== undefined ? args.panoIndex : five.panoIndex;
             if (panoIndex !== undefined) {
                 five.moveToPano(panoIndex, Object.assign({
@@ -64,7 +73,7 @@ export const CameraMovementPlugin = (five) => {
                 reject(false);
             }
         });
-    };
+    });
     const getAnimeParams = (args) => {
         const currentFiveState = five.state;
         // latitude
@@ -80,20 +89,20 @@ export const CameraMovementPlugin = (five) => {
             to: { latitude: toLatitude, longitude: toLongitude, fov: toFov },
         };
     };
-    const rotate = async (args, duration, opts = {}) => {
+    const rotate = (args, duration, opts = {}) => __awaiter(void 0, void 0, void 0, function* () {
         if (state.interruptCallback) {
             state.interruptCallback(false);
         }
         if (opts.asyncStartCallback) {
-            await opts.asyncStartCallback();
+            yield opts.asyncStartCallback();
         }
         if (five.currentMode !== Five.Mode.Panorama) {
-            await five.changeMode(Five.Mode.Panorama);
+            yield five.changeMode(Five.Mode.Panorama);
         }
         if (args.panoIndex !== undefined && args.panoIndex !== five.panoIndex) {
             if (opts.preload)
-                await five.preloadPano(args.panoIndex);
-            await new Promise((resolve, reject) => {
+                yield five.preloadPano(args.panoIndex);
+            yield new Promise((resolve, reject) => {
                 if (!args.panoIndex) {
                     resolve(true);
                     return;
@@ -105,10 +114,10 @@ export const CameraMovementPlugin = (five) => {
             });
         }
         if (opts.asyncEndCallback) {
-            await opts.asyncEndCallback();
+            yield opts.asyncEndCallback();
         }
         const { from, to } = getAnimeParams(args);
-        return await new Promise((resolve) => {
+        return yield new Promise((resolve) => {
             const onUpdate = ({ progress }) => {
                 const state = {};
                 state.longitude = progressNumber(from.longitude, to.longitude, progress);
@@ -150,7 +159,7 @@ export const CameraMovementPlugin = (five) => {
                     state.interruptCallback(true);
             }, duration);
         });
-    };
+    });
     return {
         move,
         rotate,

package/libs/ModelChassisCompassPlugin/index.js

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import * as THREE from 'three';
 import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
 import object3d2LocalMatrix from '../shared-utils/object3d2LocalMatrix';
@@ -10,9 +19,9 @@ export const ModelChassisCompassPlugin = (five, params) => {
     const defaultNorthRad = params.north_rad || undefined;
     // 局部状态
     const state = {};
-    const load = async (data) => {
-        const fbxUrl = data?.fbx_url || defaultFbxUrl;
-        const northRad = data?.north_rad || defaultNorthRad;
+    const load = (data) => __awaiter(void 0, void 0, void 0, function* () {
+        const fbxUrl = (data === null || data === void 0 ? void 0 : data.fbx_url) || defaultFbxUrl;
+        const northRad = (data === null || data === void 0 ? void 0 : data.north_rad) || defaultNorthRad;
         if (!northRad) {
             throw new Error('"northRad"配置参数缺失：未配置指南针指向！');
         }
@@ -21,7 +30,7 @@ export const ModelChassisCompassPlugin = (five, params) => {
         const zOffset = bounding.max.z - bounding.min.z;
         const maxOffset = Math.max(xOffset, zOffset);
         const fbxLoader = new FBXLoader();
-        const object = await fbxLoader.loadAsync(fbxUrl);
+        const object = yield fbxLoader.loadAsync(fbxUrl);
         transfromToMeshBasicMaterial(object, {
             transparent: true,
             side: THREE.DoubleSide,
@@ -35,7 +44,7 @@ export const ModelChassisCompassPlugin = (five, params) => {
         object3d2LocalMatrix(object, { position, rotation, scale });
         state.object = object;
         return true;
-    };
+    });
     const onCameraUpdate = ({ latitude }) => {
         if (!state.object)
             return;

package/libs/ModelEntryDoorGuidePlugin/index.js

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { AnimationMixer, MeshBasicMaterial } from 'three';
 import * as THREE from 'three';
 import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
@@ -8,31 +17,33 @@ import transfromToMeshBasicMaterial from '../shared-utils/three/transfromToMeshB
  * 模型入户门引导插件
  */
 export const ModelEntryDoorGuidePlugin = (five, params) => {
+    var _a, _b, _c;
     // 局部状态
     const state = {};
-    const defaultAnimationEnable = params.animationEnabled ?? true;
-    const defaultModelPosition = params.position ?? undefined;
-    const defaultRad = params.rad ?? undefined;
+    const defaultAnimationEnable = (_a = params.animationEnabled) !== null && _a !== void 0 ? _a : true;
+    const defaultModelPosition = (_b = params.position) !== null && _b !== void 0 ? _b : undefined;
+    const defaultRad = (_c = params.rad) !== null && _c !== void 0 ? _c : undefined;
     const defaultFbxUrl = params.fbx_url || '//vrlab-image4.ljcdn.com/release/web/entryDoorMini/Anim_Door1.fbx';
     const mixers = [];
-    const load = async (data) => {
-        const position = data?.position ?? defaultModelPosition;
+    const load = (data) => __awaiter(void 0, void 0, void 0, function* () {
+        var _d, _e, _f, _g, _h, _j, _k;
+        const position = (_d = data === null || data === void 0 ? void 0 : data.position) !== null && _d !== void 0 ? _d : defaultModelPosition;
         if (!position)
             return Promise.reject(`ModelEntryDoorGuidePlugin.load(): position is undefined`);
         const modelPosition = transformPositionToVector3(position);
-        const rad = data?.rad ?? defaultRad;
-        const fbxUrl = data?.fbx_url ?? defaultFbxUrl;
+        const rad = (_e = data === null || data === void 0 ? void 0 : data.rad) !== null && _e !== void 0 ? _e : defaultRad;
+        const fbxUrl = (_f = data === null || data === void 0 ? void 0 : data.fbx_url) !== null && _f !== void 0 ? _f : defaultFbxUrl;
         state.rad = rad;
         if (rad === undefined)
             return Promise.reject(`ModelEntryDoorGuidePlugin.load(): rad is ${rad}`);
         // 加载模型
-        const object = await new FBXLoader().loadAsync(fbxUrl);
+        const object = yield new FBXLoader().loadAsync(fbxUrl);
         // 设置位置
         object.position.copy(modelPosition);
         object.rotation.z = rad;
         object.scale.set(0.8, 0.8, 0.8);
         transfromToMeshBasicMaterial(object, { transparent: true, side: THREE.DoubleSide });
-        const textMesh = object.children?.[0]?.children?.[3]?.clone();
+        const textMesh = (_k = (_j = (_h = (_g = object.children) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.children) === null || _j === void 0 ? void 0 : _j[3]) === null || _k === void 0 ? void 0 : _k.clone();
         if (!textMesh)
             return Promise.reject(`ModelEntryDoorGuidePlugin.load(): textMesh is ${textMesh}`);
         textMesh.material = new MeshBasicMaterial({ transparent: true, map: createCanvasTextTexture('入户门') });
@@ -40,7 +51,7 @@ export const ModelEntryDoorGuidePlugin = (five, params) => {
         object.children[0].add(textMesh);
         state.object = object;
         return true;
-    };
+    });
     const initAnimation = () => {
         if (state.animation)
             return;
@@ -84,16 +95,17 @@ export const ModelEntryDoorGuidePlugin = (five, params) => {
         };
         const stop = () => {
             action.stop();
-            stopAnimation?.();
+            stopAnimation === null || stopAnimation === void 0 ? void 0 : stopAnimation();
             stopAnimation = undefined;
         };
         const animation = { play, stop };
         state.animation = animation;
     };
     const show = (config) => {
+        var _a;
         if (!state.object)
             return console.error('ModelEntryDoorGuidePlugin.enable(): object is ', state.object);
-        const animationEnable = config?.animationEnable ?? defaultAnimationEnable;
+        const animationEnable = (_a = config === null || config === void 0 ? void 0 : config.animationEnable) !== null && _a !== void 0 ? _a : defaultAnimationEnable;
         if (animationEnable) {
             if (!state.animation)
                 initAnimation();

package/libs/ModelItemLabelPlugin/ItemLabelComponent.js

@@ -17,6 +17,7 @@ import {
 	mount_component,
 	outro_and_destroy_block,
 	safe_not_equal,
+	set_style,
 	transition_in,
 	transition_out,
 	update_keyed_each
@@ -27,6 +28,7 @@ import { beforeUpdate, onDestroy, onMount } from "svelte";
 import * as THREE from 'three';
 import ItemLabelItem from './ItemLabelItem';
 import "./events.type";
+import debounce from '../shared-utils/debounce';
 
 function add_css(target) {
 	append_styles(target, "svelte-rmdeb", ".item-labels-container.svelte-rmdeb{width:100%;height:100%;position:relative}");
@@ -34,11 +36,11 @@ function add_css(target) {
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[26] = list[i];
+	child_ctx[27] = list[i];
 	return child_ctx;
 }
 
-// (179:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
+// (159:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
 function create_each_block(key_1, ctx) {
 	let first;
 	let itemlabelitem;
@@ -46,7 +48,7 @@ function create_each_block(key_1, ctx) {
 
 	itemlabelitem = new ItemLabelItem({
 			props: {
-				itemLabel: /*itemLabelItem*/ ctx[26],
+				itemLabel: /*itemLabelItem*/ ctx[27],
 				hooks: /*hooks*/ ctx[0]
 			}
 		});
@@ -67,7 +69,7 @@ function create_each_block(key_1, ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 			const itemlabelitem_changes = {};
-			if (dirty & /*renderItemLabels*/ 2) itemlabelitem_changes.itemLabel = /*itemLabelItem*/ ctx[26];
+			if (dirty & /*renderItemLabels*/ 2) itemlabelitem_changes.itemLabel = /*itemLabelItem*/ ctx[27];
 			if (dirty & /*hooks*/ 1) itemlabelitem_changes.hooks = /*hooks*/ ctx[0];
 			itemlabelitem.$set(itemlabelitem_changes);
 		},
@@ -94,7 +96,7 @@ function create_fragment(ctx) {
 	let div_resize_listener;
 	let current;
 	let each_value = /*renderItemLabels*/ ctx[1];
-	const get_key = ctx => /*itemLabelItem*/ ctx[26].id;
+	const get_key = ctx => /*itemLabelItem*/ ctx[27].id;
 
 	for (let i = 0; i < each_value.length; i += 1) {
 		let child_ctx = get_each_context(ctx, each_value, i);
@@ -111,7 +113,8 @@ function create_fragment(ctx) {
 			}
 
 			attr(div, "class", "item-labels-container svelte-rmdeb");
-			add_render_callback(() => /*div_elementresize_handler*/ ctx[9].call(div));
+			add_render_callback(() => /*div_elementresize_handler*/ ctx[10].call(div));
+			set_style(div, "opacity", /*itemsVisible*/ ctx[4] ? 1 : 0, false);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -120,7 +123,7 @@ function create_fragment(ctx) {
 				each_blocks[i].m(div, null);
 			}
 
-			div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[9].bind(div));
+			div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[10].bind(div));
 			current = true;
 		},
 		p(ctx, [dirty]) {
@@ -130,6 +133,10 @@ function create_fragment(ctx) {
 				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*/ 16) {
+				set_style(div, "opacity", /*itemsVisible*/ ctx[4] ? 1 : 0, false);
+			}
 		},
 		i(local) {
 			if (current) return;
@@ -179,46 +186,14 @@ function instance($$self, $$props, $$invalidate) {
 	// 计算重叠
 	let cssOffsetLists = [];
 
+	// 动画过程中 itemsVisible 为 false
+	let itemsVisible = true;
+
 	/**
  * 可见性策略：
  * 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();
@@ -238,8 +213,15 @@ function instance($$self, $$props, $$invalidate) {
 	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?.x;
-		const yOffset = cssPosition?.y;
+
+		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];
 	};
 
@@ -281,18 +263,13 @@ function instance($$self, $$props, $$invalidate) {
 			: true;
 
 			const visible = naturalVisible && !isOverlap([cssOffset[0], cssOffset[1] + strokeLength], curLabelWidth);
-			if (!visible) return { ...label, visible };
+			if (!visible) return Object.assign(Object.assign({}, label), { visible });
 			cssOffsetLists.push(cssOffset);
 
 			// position
 			const transform = getLabelTransform(cssOffset);
 
-			return {
-				...label,
-				visible,
-				transform,
-				strokeLength
-			};
+			return Object.assign(Object.assign({}, label), { visible, transform, strokeLength });
 		});
 
 		const sortedItemLabelItems = newLabels.filter(({ visible }) => visible).map(label => ({
@@ -302,7 +279,7 @@ function instance($$self, $$props, $$invalidate) {
 
 		return newLabels.map(label => {
 			const sortIndex = sortedItemLabelItems.findIndex(item => item.itemLabelItem.id === label.id);
-			if (sortIndex !== undefined) return { ...label, zIndex: sortIndex * 10 };
+			if (sortIndex !== undefined) return Object.assign(Object.assign({}, label), { zIndex: sortIndex * 10 });
 			return label;
 		});
 	};
@@ -320,11 +297,22 @@ function instance($$self, $$props, $$invalidate) {
 		$$invalidate(1, renderItemLabels = itemLabels);
 		curItemLabels = itemLabels;
 		onItemLabelUpdate();
-
-		// five.on('cameraUpdate', onItemLabelUpdate)
 		addResizeListener();
+
+		five.on('cameraUpdate', () => {
+			$$invalidate(4, itemsVisible = false);
+			handleCameraUpdate();
+		});
 	});
 
+	const handleCameraUpdate = debounce(
+		() => {
+			$$invalidate(4, itemsVisible = true);
+			onItemLabelUpdate();
+		},
+		300
+	);
+
 	const addResizeListener = () => {
 		wrapperSize = {
 			width: wrapper.clientWidth,
@@ -338,7 +326,6 @@ function instance($$self, $$props, $$invalidate) {
 		if (curItemLabels !== itemLabels) {
 			$$invalidate(1, renderItemLabels = itemLabels);
 			curItemLabels = itemLabels;
-			console.log('--debug--update--');
 			onItemLabelUpdate();
 		}
 	};
@@ -356,9 +343,8 @@ function instance($$self, $$props, $$invalidate) {
 		});
 
 	onDestroy(() => {
-		// five.off('cameraUpdate', onItemLabelUpdate)
+		five.off('cameraUpdate');
 		resizeObserver.unobserve(wrapper);
-
 		curItemLabels = null;
 		$$invalidate(1, renderItemLabels = null);
 		wrapperSize = { width: 0, height: 0 };
@@ -372,12 +358,12 @@ function instance($$self, $$props, $$invalidate) {
 	}
 
 	$$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 ('five' in $$props) $$invalidate(5, 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(0, hooks = $$props.hooks);
-		if ('displayStrategyType' in $$props) $$invalidate(8, displayStrategyType = $$props.displayStrategyType);
+		if ('displayStrategyType' in $$props) $$invalidate(9, displayStrategyType = $$props.displayStrategyType);
 	};
 
 	return [
@@ -385,6 +371,7 @@ function instance($$self, $$props, $$invalidate) {
 		renderItemLabels,
 		containerWidth,
 		containerHeight,
+		itemsVisible,
 		five,
 		modelOcclusionEnable,
 		itemLabels,
@@ -405,12 +392,12 @@ class Component extends SvelteComponent {
 			create_fragment,
 			safe_not_equal,
 			{
-				five: 4,
-				modelOcclusionEnable: 5,
-				itemLabels: 6,
-				wrapper: 7,
+				five: 5,
+				modelOcclusionEnable: 6,
+				itemLabels: 7,
+				wrapper: 8,
 				hooks: 0,
-				displayStrategyType: 8
+				displayStrategyType: 9
 			},
 			add_css
 		);