@realsee/dnalogel 2.0.0-alpha.35-beta2 → 2.0.0-alpha.35

package/libs/PanoSpatialTagPlugin/Components/tag.js

@@ -57,7 +57,7 @@ function create_fragment(ctx) {
 			div3 = element("div");
 			div2 = element("div");
 			attr(div0, "class", "PanoSpatialTagPlugin__tag-shadow svelte-8ki8yx");
-			set_style(div0, "transform", "translate(" + /*contentWidth*/ ctx[7] / 2 * /*contentZoom*/ ctx[3] * 3 + "px, " + /*contentHeight*/ ctx[8] / 2 * (/*upsideDown*/ ctx[1] ? -1 : 1) * /*contentZoom*/ ctx[3] * 3 + "px)");
+			set_style(div0, "transform", "translate(" + /*contentWidth*/ ctx[7] / 2 * /*contentZoom*/ ctx[3] * 3 + "px, " + /*contentHeight*/ ctx[8] / 2 * (/*upsideDown*/ ctx[1] ? -1 : 1) * /*contentZoom*/ ctx[3] * 3 + "px) scale(" + 1 / /*contentZoom*/ ctx[3] + ")");
 			attr(i0, "class", "PanoSpatialTagPlugin__tag-flagpole svelte-8ki8yx");
 			set_style(i0, "width", /*lineWidthZoom*/ ctx[4] + "rem");
 			attr(i1, "class", "PanoSpatialTagPlugin__tag-line1 svelte-8ki8yx");
@@ -97,7 +97,7 @@ function create_fragment(ctx) {
 		},
 		p(ctx, [dirty]) {
 			if (dirty & /*contentWidth, contentZoom, contentHeight, upsideDown*/ 394) {
-				set_style(div0, "transform", "translate(" + /*contentWidth*/ ctx[7] / 2 * /*contentZoom*/ ctx[3] * 3 + "px, " + /*contentHeight*/ ctx[8] / 2 * (/*upsideDown*/ ctx[1] ? -1 : 1) * /*contentZoom*/ ctx[3] * 3 + "px)");
+				set_style(div0, "transform", "translate(" + /*contentWidth*/ ctx[7] / 2 * /*contentZoom*/ ctx[3] * 3 + "px, " + /*contentHeight*/ ctx[8] / 2 * (/*upsideDown*/ ctx[1] ? -1 : 1) * /*contentZoom*/ ctx[3] * 3 + "px) scale(" + 1 / /*contentZoom*/ ctx[3] + ")");
 			}
 
 			if (dirty & /*lineWidthZoom*/ 16) {

package/libs/PanoSpatialTagPlugin/Plugin.d.ts

@@ -15,6 +15,8 @@ export interface PanoSpatialTagPluginParameterType {
     minRad?: number;
     nearTolerance?: number;
     upsideHeight?: number;
+    minDistance?: number;
+    maxDistance?: number;
 }
 export interface PanoSpatialTagPluginExportType {
     load: (data: PanoSpatialTagPluginData) => void;

package/libs/PanoSpatialTagPlugin/Plugin.js

@@ -8,13 +8,11 @@ import render from '../shared-utils/tinyEJSrender';
 const MESH_SIZE = 0.001;
 const RAY_TOLERANT_DISTANCE = 0.01;
 const BLUR_IMAGE_URL = 'https://vrlab-image4.ljcdn.com/release/web/PanoSpatialTagPlugin__blur.png';
-const MIN_DISTANCE = 1.2;
-const MAX_DISTANCE = 3.5;
 /**
  * 空间游走标签插件
  */
 export const PanoSpatialTagPlugin = (five, params) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     let wrapper = params === null || params === void 0 ? void 0 : params.container;
     let centerY = 1.4;
     const wait = (_a = params === null || params === void 0 ? void 0 : params.wait) !== null && _a !== void 0 ? _a : 200;
@@ -22,6 +20,8 @@ export const PanoSpatialTagPlugin = (five, params) => {
     const minRad = (_c = params === null || params === void 0 ? void 0 : params.minRad) !== null && _c !== void 0 ? _c : Math.PI / 4;
     const nearTolerance = (_d = params === null || params === void 0 ? void 0 : params.nearTolerance) !== null && _d !== void 0 ? _d : 100;
     const upsideHeight = (_e = params === null || params === void 0 ? void 0 : params.upsideHeight) !== null && _e !== void 0 ? _e : 1.6;
+    const minDistance = (_f = params === null || params === void 0 ? void 0 : params.minDistance) !== null && _f !== void 0 ? _f : 1.2;
+    const maxDistance = (_g = params === null || params === void 0 ? void 0 : params.maxDistance) !== null && _g !== void 0 ? _g : 3.5;
     // const foldPercent = params?.foldPercent ?? 20
     const css3DRender = CSS3DRenderPlugin(five);
     const container = document.createElement('div');
@@ -76,7 +76,7 @@ export const PanoSpatialTagPlugin = (five, params) => {
         frustum.setFromProjectionMatrix(projScreenMatrix);
         state.tags.forEach(tag => {
             const distance = camera.position.clone().setY(centerY).distanceTo(tag.position);
-            if (distance < MIN_DISTANCE || distance > MAX_DISTANCE)
+            if (distance < minDistance || distance > maxDistance)
                 return tag.destroying = true;
             if (!frustum.containsPoint(tag.position))
                 return tag.destroying = true;
@@ -88,16 +88,16 @@ export const PanoSpatialTagPlugin = (five, params) => {
         state.tags.forEach(tag => {
             if (tag.destroying) {
                 tag.app.$set({
-                    contentZoom: 0.1 + camera.position.distanceTo(tag.position) / MAX_DISTANCE,
-                    lineWidthZoom: 0.38 * (0.01 + camera.position.distanceTo(tag.position) / MAX_DISTANCE),
+                    contentZoom: 0.1 + camera.position.distanceTo(tag.position) / maxDistance,
+                    lineWidthZoom: 0.38 * (0.01 + camera.position.distanceTo(tag.position) / maxDistance),
                     destroying: tag.destroying,
                 });
             }
             else {
                 tag.app.$set({
-                    lineWidthZoom: 0.38 * (0.01 + camera.position.distanceTo(tag.position) / MAX_DISTANCE),
-                    lineHeightZoom: 0.4 + (camera.position.distanceTo(tag.position) - MIN_DISTANCE) / MAX_DISTANCE * 0.6,
-                    contentZoom: 0.1 + camera.position.distanceTo(tag.position) / MAX_DISTANCE,
+                    lineWidthZoom: 0.38 * (0.01 + camera.position.distanceTo(tag.position) / maxDistance),
+                    lineHeightZoom: 0.4 + (camera.position.distanceTo(tag.position) - minDistance) / maxDistance * 0.6,
+                    contentZoom: 0.1 + camera.position.distanceTo(tag.position) / maxDistance,
                 });
             }
         });
@@ -171,7 +171,7 @@ export const PanoSpatialTagPlugin = (five, params) => {
             if (state.tags.find(tag => point.id === tag.id && !tag.destroying))
                 return result;
             const distance = camera.position.clone().setY(centerY).distanceTo(point.position);
-            if (distance < MIN_DISTANCE || distance > MAX_DISTANCE)
+            if (distance < minDistance || distance > maxDistance)
                 return result;
             if (!frustum.containsPoint(point.position))
                 return result;
@@ -256,9 +256,9 @@ export const PanoSpatialTagPlugin = (five, params) => {
                     props: {
                         id,
                         content: state.render(state.template, replacement),
-                        lineWidthZoom: 0.38 * (0.01 + camera.position.distanceTo(position) / MAX_DISTANCE),
-                        lineHeightZoom: 0.4 + (camera.position.distanceTo(position) - MIN_DISTANCE) / MAX_DISTANCE * 0.6,
-                        contentZoom: 0.1 + camera.position.distanceTo(position) / MAX_DISTANCE,
+                        lineWidthZoom: 0.38 * (0.01 + camera.position.distanceTo(position) / maxDistance),
+                        lineHeightZoom: 0.4 + (camera.position.distanceTo(position) - minDistance) / maxDistance * 0.6,
+                        contentZoom: 0.1 + camera.position.distanceTo(position) / maxDistance,
                         upsideDown: position.y > upsideHeight,
                         folded: state.folded,
                         events: state.events,
@@ -369,6 +369,22 @@ export const PanoSpatialTagPlugin = (five, params) => {
                 tag.app.$set({ folded: true });
         });
     };
+    const onResize = () => {
+        five.once('renderFrame', updateOrigins);
+    };
+    const onModelLoaded = () => {
+        if (!wrapper)
+            wrapper = five.getElement().parentElement;
+        if (wrapper)
+            wrapper.appendChild(container);
+        state.forbidden = false;
+        centerY = five.model.bounding.getCenter(new THREE.Vector3()).y;
+        updateTags();
+        five.on('panoWillArrive', onPanoWillArrive);
+        five.on('panoArrived', onPanoArrived);
+        five.on('modeChange', onModeChange);
+        five.on('cameraUpdate', onCameraUpdate);
+    };
     const dispose = () => {
         blurImage = null;
         css3DRender.disposeAll();
@@ -379,41 +395,20 @@ export const PanoSpatialTagPlugin = (five, params) => {
         });
         state.origins = [];
         state.tags = [];
+        five.off('modelLoaded', onModelLoaded);
+        five.off('renderFrame', updateOrigins);
         five.off('panoWillArrive', onPanoWillArrive);
         five.off('panoArrived', onPanoArrived);
         five.off('modeChange', onModeChange);
         five.off('cameraUpdate', onCameraUpdate);
-        window.removeEventListener('resize', updateOrigins, false);
+        five.off('dispose', dispose);
+        window.removeEventListener('resize', onResize, false);
     };
-    window.addEventListener('resize', updateOrigins, false);
-    if ((_f = five === null || five === void 0 ? void 0 : five.model) === null || _f === void 0 ? void 0 : _f.loaded) {
-        if (!wrapper)
-            wrapper = five.getElement().parentElement;
-        if (wrapper)
-            wrapper.appendChild(container);
-        state.forbidden = false;
-        centerY = five.model.bounding.getCenter(new THREE.Vector3()).y;
-        updateTags();
-        five.on('panoWillArrive', onPanoWillArrive);
-        five.on('panoArrived', onPanoArrived);
-        five.on('modeChange', onModeChange);
-        five.on('cameraUpdate', onCameraUpdate);
-    }
-    else {
-        five.once('modelLoaded', () => {
-            if (!wrapper)
-                wrapper = five.getElement().parentElement;
-            if (wrapper)
-                wrapper.appendChild(container);
-            centerY = five.model.bounding.getCenter(new THREE.Vector3()).y;
-            state.forbidden = false;
-            updateTags();
-            five.on('panoWillArrive', onPanoWillArrive);
-            five.on('panoArrived', onPanoArrived);
-            five.on('modeChange', onModeChange);
-            five.on('cameraUpdate', onCameraUpdate);
-        });
-    }
+    window.addEventListener('resize', onResize, false);
+    if ((_h = five === null || five === void 0 ? void 0 : five.model) === null || _h === void 0 ? void 0 : _h.loaded)
+        onModelLoaded();
+    else
+        five.once('modelLoaded', onModelLoaded);
     five.on('dispose', dispose);
     return {
         load,

package/package.json

@@ -8,7 +8,7 @@
   "repository": "https://github.com/realsee-developer/dnalogel.git",
   "description": "如视 VR 看房插件合集",
   "private": false,
-  "version": "2.0.0-alpha.35-beta2",
+  "version": "2.0.0-alpha.35",
   "license": "SEE LICENSE IN TERMS.txt",
   "scripts": {
     "build": "yarn run tsb && yarn run build:rollup && yarn run build:components && yarn build:docs",