@realsee/dnalogel 2.0.2-alpha → 2.0.3

package/dist/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('three'), require('three/examples/jsm/renderers/CSS3DRenderer'), require('@realsee/five/line'), require('svelte/internal'), require('svelte'), require('svelte/easing'), require('svelte/transition'), require('svelte/store'), require('@realsee/five'), require('three/examples/jsm/loaders/FBXLoader'), require('@tweenjs/tween.js'), require('hammerjs'), require('classnames')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'three', 'three/examples/jsm/renderers/CSS3DRenderer', '@realsee/five/line', 'svelte/internal', 'svelte', 'svelte/easing', 'svelte/transition', 'svelte/store', '@realsee/five', 'three/examples/jsm/loaders/FBXLoader', '@tweenjs/tween.js', 'hammerjs', 'classnames'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.dnalogel = {}, global.THREE, global.CSS3DRenderer, global.FiveSDK_Line, global.internal, global.svelte, global.easing, global.transition, global.store, global.five, global.FBXLoader, global.TWEEN, global.Hammer, global.classNames));
-})(this, (function (exports, THREE, CSS3DRenderer, line, internal, svelte, easing, transition, store, five, FBXLoader, TWEEN, Hammer, classNames) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@realsee/five'), require('three'), require('three/examples/jsm/renderers/CSS3DRenderer'), require('@realsee/five/line'), require('svelte/internal'), require('svelte'), require('svelte/easing'), require('svelte/transition'), require('svelte/store'), require('three/examples/jsm/loaders/FBXLoader'), require('@tweenjs/tween.js'), require('hammerjs'), require('classnames')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@realsee/five', 'three', 'three/examples/jsm/renderers/CSS3DRenderer', '@realsee/five/line', 'svelte/internal', 'svelte', 'svelte/easing', 'svelte/transition', 'svelte/store', 'three/examples/jsm/loaders/FBXLoader', '@tweenjs/tween.js', 'hammerjs', 'classnames'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.dnalogel = {}, global.five, global.THREE, global.CSS3DRenderer, global.FiveSDK_Line, global.internal, global.svelte, global.easing, global.transition, global.store, global.FBXLoader, global.TWEEN, global.Hammer, global.classNames));
+})(this, (function (exports, five, THREE, CSS3DRenderer, line, internal, svelte, easing, transition, store, FBXLoader, TWEEN, Hammer, classNames) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -34,12 +34,21 @@
      * Five 模型插件
      * @template ExportType 导出方法
      */
-    const ModelViewPlugin = (five) => {
+    const ModelViewPlugin = (five$1, params) => {
         let needsRender = true;
         let renderer = null;
+        const defaultConfig = {
+            lookAtCurrentCamera: false,
+            lockedPanoIndex: null,
+            lockedLatitude: null,
+            lockedLongitude: null,
+        };
+        const config = Object.assign(Object.assign({}, defaultConfig), params === null || params === void 0 ? void 0 : params.config);
         const scene = new THREE__namespace.Scene();
-        const camera = new THREE__namespace.PerspectiveCamera(60, 1, 0.1, 1000);
+        const camera = new five.Camera(60);
         let model = new THREE__namespace.Object3D();
+        let distance;
+        let offset;
         {
             const light = new THREE__namespace.DirectionalLight(0xffffff, 0.5);
             light.position.copy(new THREE__namespace.Vector3(1, 1, 1));
@@ -55,11 +64,11 @@
         }
         scene.add(model);
         const initRendererIfNeeds = () => {
-            if (!five.renderer)
+            if (!five$1.renderer)
                 return;
             if (!renderer) {
                 renderer = new THREE__namespace.WebGLRenderer({ antialias: false, alpha: true });
-                renderer.setPixelRatio(five.renderer.getPixelRatio());
+                renderer.setPixelRatio(five$1.renderer.getPixelRatio());
                 renderer.outputEncoding = THREE__namespace.sRGBEncoding;
                 renderer.setClearColor(0x181a1c, 0);
                 renderer.autoClear = true;
@@ -79,6 +88,8 @@
             update();
         };
         const handleModelLoaded = () => {
+            distance = getDistanceFromModel(five$1.model, camera.fov, camera.aspect);
+            offset = five$1.model.bounding.getCenter(new THREE__namespace.Vector3());
             function cloneMaterial(_material) {
                 const material = _material.clone();
                 material.uniforms.modelAlpha.value = 1;
@@ -107,7 +118,7 @@
                 }
             }
             scene.remove(model);
-            model = cloneModel(five.model);
+            model = cloneModel(five$1.model);
             scene.add(model);
             update();
         };
@@ -138,29 +149,36 @@
             }
             update();
         };
-        const cameraDistance = () => {
-            const bounding = five.model.bounding;
-            const { fov, aspect } = camera;
-            const radius = Math.sqrt(Math.pow(bounding.max.x - bounding.min.x + 2, 2) +
-                Math.pow(bounding.max.y - bounding.min.y + 2, 2) +
-                Math.pow(bounding.max.z - bounding.min.z + 2, 2));
+        function getDistanceFromModel(model, fov, aspect) {
+            const bounding = model.bounding;
+            const radius = Math.pow(Math.pow(bounding.max.x - bounding.min.x + 1, 2) +
+                Math.pow(bounding.max.y - bounding.min.y + 1, 2) +
+                Math.pow(bounding.max.z - bounding.min.z + 1, 2), 1 / 2);
             // fit screen
             let distance = radius / 2 / Math.tan((Math.PI * fov) / 360);
             if (aspect < 1)
                 distance = distance / aspect;
             return isNaN(distance) ? radius : distance;
-        };
+        }
+        function getOffsetFromPanoIndex(panoIndex) {
+            return five$1.work.observers[panoIndex].standingPosition.clone();
+        }
         const update = () => {
-            const { longitude, latitude } = five.getPose();
-            const distance = cameraDistance();
-            const lookAt = five.model.bounding.getCenter(new THREE__namespace.Vector3());
-            const longitudeDistance = distance * Math.cos(latitude);
-            const cameraPosition = new THREE__namespace.Vector3();
-            cameraPosition.x = Math.sin(longitude) * longitudeDistance + lookAt.x;
-            cameraPosition.z = Math.cos(longitude) * longitudeDistance + lookAt.z;
-            cameraPosition.y = Math.sin(latitude) * distance + lookAt.y;
-            camera.position.copy(cameraPosition);
-            camera.lookAt(lookAt);
+            if (!distance || !offset)
+                return;
+            const pose = five$1.getPose();
+            pose.fov = camera.fov;
+            pose.offset = offset;
+            pose.distance = distance;
+            if (typeof config.lockedLatitude === 'number')
+                pose.latitude = config.lockedLatitude;
+            if (typeof config.lockedLongitude === 'number')
+                pose.longitude = config.lockedLongitude;
+            if (typeof config.lockedPanoIndex === 'number')
+                pose.offset = getOffsetFromPanoIndex(config.lockedPanoIndex);
+            if (config.lookAtCurrentCamera)
+                pose.offset = five$1.camera.position.clone().setY(five$1.camera.position.y + 1);
+            camera.setFromPose(pose);
             needsRender = true;
         };
         const render = () => {
@@ -181,12 +199,18 @@
                 renderer.dispose();
             renderer = null;
         };
-        five.on('modelLoaded', handleModelLoaded);
-        five.on('modelWillLoad', handleModelWillLoad);
-        five.on('cameraDirectionUpdate', update);
-        five.on('dispose', dispose);
-        five.on('renderFrame', render);
-        return { appendTo, refresh };
+        const changeConfigs = (userConfig) => {
+            Object.assign(config, userConfig);
+            update();
+        };
+        Object.assign(window, { camera });
+        five$1.on('modelLoaded', handleModelLoaded);
+        five$1.on('modelWillLoad', handleModelWillLoad);
+        five$1.on('cameraDirectionUpdate', update);
+        five$1.on('dispose', dispose);
+        five$1.on('renderFrame', render);
+        five$1.on('cameraPositionUpdate', update);
+        return { appendTo, refresh, changeConfigs };
     };
 
     function evenNumber(num, config) {
@@ -587,11 +611,11 @@
 
     function get_each_context$c(ctx, list, i) {
     	const child_ctx = ctx.slice();
-    	child_ctx[12] = list[i];
+    	child_ctx[13] = list[i];
     	return child_ctx;
     }
 
-    // (82:2) {#each roomLabels as roomLableItem (roomLableItem.id)}
+    // (79:2) {#each roomLabels as roomLableItem (roomLableItem.id)}
     function create_each_block$c(key_1, ctx) {
     	let first;
     	let roomlabelitem;
@@ -599,7 +623,7 @@
 
     	roomlabelitem = new RoomLabelItem({
     			props: {
-    				roomLabel: /*roomLableItem*/ ctx[12],
+    				roomLabel: /*roomLableItem*/ ctx[13],
     				five: /*five*/ ctx[1]
     			}
     		});
@@ -620,7 +644,7 @@
     		p(new_ctx, dirty) {
     			ctx = new_ctx;
     			const roomlabelitem_changes = {};
-    			if (dirty & /*roomLabels*/ 1) roomlabelitem_changes.roomLabel = /*roomLableItem*/ ctx[12];
+    			if (dirty & /*roomLabels*/ 1) roomlabelitem_changes.roomLabel = /*roomLableItem*/ ctx[13];
     			if (dirty & /*five*/ 2) roomlabelitem_changes.five = /*five*/ ctx[1];
     			roomlabelitem.$set(roomlabelitem_changes);
     		},
@@ -647,7 +671,7 @@
     	let div_resize_listener;
     	let current;
     	let each_value = /*roomLabels*/ ctx[0];
-    	const get_key = ctx => /*roomLableItem*/ ctx[12].id;
+    	const get_key = ctx => /*roomLableItem*/ ctx[13].id;
 
     	for (let i = 0; i < each_value.length; i += 1) {
     		let child_ctx = get_each_context$c(ctx, each_value, i);
@@ -714,13 +738,19 @@
 
     function instance$u($$self, $$props, $$invalidate) {
     	let rendererSize;
+    	var _a;
     	let { five } = $$props;
     	let { roomLabels } = $$props;
     	let containerWidth;
     	let containerHeight;
-    	let shownFloor = null;
+
+    	let shownFloor = (_a = five.model.shownFloor) !== null && _a !== void 0
+    	? _a
+    	: null;
 
     	function getLabelVisible(item) {
+    		const isLabelInFloor = shownFloor === null || item.floorIndex === shownFloor;
+    		if (!isLabelInFloor) return false;
     		const raycaster = new THREE.Raycaster();
     		const cameraPosition = five.camera.position.clone();
     		const position = new THREE.Vector3(item.position.x, item.position.y, item.position.z);
@@ -739,7 +769,9 @@
     		return `translate(${xOffset}px, ${yOffset}px)`;
     	}
 
-    	function getFormatedRoomLabels(rendererSize) {
+    	function getFormatedRoomLabels(params) {
+    		const { rendererSize, shownFloor } = params;
+
     		// 因为 item distance 需要重复计算，所以缓存一下
     		const distanceMap = new Map();
 
@@ -772,7 +804,7 @@
     	}
 
     	function onFiveCameraUpdate() {
-    		$$invalidate(0, roomLabels = getFormatedRoomLabels(rendererSize));
+    		$$invalidate(0, roomLabels = getFormatedRoomLabels({ rendererSize, shownFloor }));
     	}
 
     	function onFiveModelShownFloorChange(floorIndex) {
@@ -804,21 +836,10 @@
     			$$invalidate(5, rendererSize = { x: containerWidth, y: containerHeight });
     		}
 
-    		if ($$self.$$.dirty & /*rendererSize*/ 32) {
+    		if ($$self.$$.dirty & /*rendererSize, shownFloor*/ 48) {
     			{
-    				// rendererSize 变化时，触发 reRender
-    				$$invalidate(0, roomLabels = getFormatedRoomLabels(rendererSize));
-    			}
-    		}
-
-    		if ($$self.$$.dirty & /*roomLabels, shownFloor*/ 17) {
-    			{
-    				// shownFloor 变化时，更新 item visible
-    				$$invalidate(0, roomLabels = roomLabels.map(item => {
-    					const isLabelInFloor = shownFloor === null || item.floorIndex === shownFloor;
-    					const visible = isLabelInFloor ? item.visible : false;
-    					return Object.assign(Object.assign({}, item), { visible });
-    				}));
+    				// rendererSize 和 shownFloor 变化时，触发 reRender
+    				$$invalidate(0, roomLabels = getFormatedRoomLabels({ rendererSize, shownFloor }));
     			}
     		}
     	};
@@ -6141,6 +6162,8 @@
                 attachedTo: exports.FLOOR_PLAN_ATTACHED_TO.BOUNDING_CENTER,
                 getLabelElement: undefined,
                 adaptiveRoomLabelVisibleEnable: true,
+                getRoomAreaText: (size) => (size / 1000000).toFixed(1) + '㎡',
+                getRuleDistanceText: (distance) => distance.toString()
             };
             const paramsConfig = params ? omit(params, ['selector', 'scale']) : {};
             const config = Object.assign(Object.assign({}, baseConfig), paramsConfig);
@@ -6214,6 +6237,10 @@
                 state.visible ? this._show(options) : this._hide(options);
             }
         }
+        changeConfigs(config, userAction = true) {
+            this.updateState({ config }, userAction);
+            this.render();
+        }
         /** 更新户型图位置 */
         updatePosition() {
             var _a;
@@ -6232,7 +6259,8 @@
         }
         updateState(state, userAction) {
             const prevState = this.state;
-            this.state = Object.assign(Object.assign({}, this.state), state);
+            const config = state.config ? Object.assign(Object.assign({}, prevState.config), state.config) : prevState.config;
+            this.state = Object.assign(Object.assign(Object.assign({}, this.state), state), { config });
             if (equal(this.state, prevState, { deep: true }))
                 return;
             this.hooks.emit('stateChange', { state: this.state, prevState, userAction });
@@ -6569,6 +6597,8 @@
                 attachedTo: exports.FLOOR_PLAN_ATTACHED_TO.BOUNDING_CENTER,
                 getLabelElement: undefined,
                 adaptiveRoomLabelVisibleEnable: true,
+                getRoomAreaText: (size) => (size / 1000000).toFixed(1) + '㎡',
+                getRuleDistanceText: (distance) => distance.toString()
             };
             const paramsConfig = params ? omit(params, ['selector', 'scale']) : {};
             const config = Object.assign(Object.assign({}, baseConfig), paramsConfig);
@@ -6670,6 +6700,10 @@
                 state.visible ? this._show(options) : this._hide(options);
             }
         }
+        changeConfigs(config, userAction = true) {
+            this.updateState({ config }, userAction);
+            this.render();
+        }
         async formatData(serverData) {
             return await formatData(serverData.data);
         }
@@ -6678,7 +6712,7 @@
                 return;
             this.isHiddenByHideFunc = false;
             const { userAction } = options;
-            this.hooks.emit('show', { userAction });
+            this.hooks.emit('show', { userAction, auto: false });
             if (this.five.getCurrentState().mode !== 'Topview') {
                 await changeMode(this.five, ['Topview', undefined, undefined, userAction]);
             }
@@ -6688,14 +6722,14 @@
             const renderDuration = 500;
             const modelOpacity = this.state.config.modelOpacity;
             changeModelCanvasOpacity(this.five, modelOpacity, renderDuration);
-            this.hooks.emit('showAnimationEnded', { userAction });
+            this.hooks.emit('showAnimationEnded', { userAction, auto: false });
             this.render();
         }
         async _hide(options) {
             if (!this.state.enabled)
                 return;
             const { userAction } = options;
-            this.hooks.emit('hide', { userAction });
+            this.hooks.emit('hide', { userAction, auto: false });
             const modelOpacity = 1;
             const renderDuration = 0;
             changeModelCanvasOpacity(this.five, modelOpacity, renderDuration);
@@ -6712,7 +6746,8 @@
         }
         updateState(state, userAction) {
             const prevState = this.state;
-            this.state = Object.assign(Object.assign({}, this.state), state);
+            const config = state.config ? Object.assign(Object.assign({}, prevState.config), state.config) : prevState.config;
+            this.state = Object.assign(Object.assign(Object.assign({}, this.state), state), { config });
             if (equal(this.state, prevState, { deep: true }))
                 return;
             this.hooks.emit('stateChange', { state: this.state, prevState, userAction });