fl-web-component 1.3.11 → 1.3.12

package/dist/fl-web-component.css

@@ -1 +1 @@
-@charset "UTF-8";#fl-model[data-v-67cfa148]{width:100%;height:100%;cursor:pointer}[data-v-67cfa148] .tips-label{width:60px;color:#000;font:12px Helvetica;margin-top:-3em;padding:5px;text-align:center;vertical-align:middle;background-color:khaki}[data-v-67cfa148] .measure-label{max-width:100px;margin-top:-1em;border:10px;border-radius:5px;padding:3px 10px;cursor:pointer;color:#009bea;background-color:#f4f4f4;box-shadow:0 1px 3px 1px rgba(0,0,0,.25)}[data-v-67cfa148] .circle-tag{width:10px;height:10px;margin-top:5px;border-radius:50%;background-color:#ff5000}[data-v-67cfa148] .measure-label-font{word-break:break-all}[data-v-67cfa148] .mark-label-img{padding-top:5px;width:20px;height:20px}#konva-container[data-v-2fa9e609]{z-index:3;width:100%;height:100%;cursor:pointer;overflow:hidden}span[data-v-f547d5c6]{font-weight:bolder}.text[data-v-f547d5c6]{margin-top:20px}.line[data-v-f547d5c6]{border-bottom:1px solid #dcdfe6;margin:20px 0}.center[data-v-f547d5c6]{display:flex;flex-direction:column;align-items:center}.center .cen span[data-v-f547d5c6],.center .top span[data-v-f547d5c6]{color:"#53a8ff";display:inline-block;width:30px;height:30px;text-align:center;line-height:30px;border:1px solid;padding:5px;margin-bottom:10px;background-color:#e9f3ff}.center .cen span[data-v-f547d5c6]{margin:10px}.button[data-v-f547d5c6]{display:flex;justify-content:end;margin-top:20px}@font-face{font-family:iconfont;src:url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.woff2?t=1646635700216) format("woff2"),url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.woff?t=1646635700216) format("woff"),url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.ttf?t=1646635700216) format("truetype")}.iconfont[data-v-f547d5c6]{font-family:iconfont!important;font-size:50px;font-style:normal;color:"#53a8ff";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-shubiao[data-v-f547d5c6]:before{content:""}#svg-tigger[data-v-0ec35ee4]{cursor:pointer;height:100%;width:100%}
+@charset "UTF-8";#fl-model[data-v-785e8966]{width:100%;height:100%;cursor:pointer}[data-v-785e8966] .tips-label{width:60px;color:#000;font:12px Helvetica;margin-top:-3em;padding:5px;text-align:center;vertical-align:middle;background-color:khaki}[data-v-785e8966] .measure-label{max-width:100px;margin-top:-1em;border:10px;border-radius:5px;padding:3px 10px;cursor:pointer;color:#009bea;background-color:#f4f4f4;box-shadow:0 1px 3px 1px rgba(0,0,0,.25)}[data-v-785e8966] .circle-tag{width:10px;height:10px;margin-top:5px;border-radius:50%;background-color:#ff5000}[data-v-785e8966] .measure-label-font{word-break:break-all}[data-v-785e8966] .mark-label-img{padding-top:5px;width:20px;height:20px}#konva-container[data-v-2fa9e609]{z-index:3;width:100%;height:100%;cursor:pointer;overflow:hidden}span[data-v-f547d5c6]{font-weight:bolder}.text[data-v-f547d5c6]{margin-top:20px}.line[data-v-f547d5c6]{border-bottom:1px solid #dcdfe6;margin:20px 0}.center[data-v-f547d5c6]{display:flex;flex-direction:column;align-items:center}.center .cen span[data-v-f547d5c6],.center .top span[data-v-f547d5c6]{color:"#53a8ff";display:inline-block;width:30px;height:30px;text-align:center;line-height:30px;border:1px solid;padding:5px;margin-bottom:10px;background-color:#e9f3ff}.center .cen span[data-v-f547d5c6]{margin:10px}.button[data-v-f547d5c6]{display:flex;justify-content:end;margin-top:20px}@font-face{font-family:iconfont;src:url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.woff2?t=1646635700216) format("woff2"),url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.woff?t=1646635700216) format("woff"),url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.ttf?t=1646635700216) format("truetype")}.iconfont[data-v-f547d5c6]{font-family:iconfont!important;font-size:50px;font-style:normal;color:"#53a8ff";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-shubiao[data-v-f547d5c6]:before{content:""}#svg-tigger[data-v-0ec35ee4]{cursor:pointer;height:100%;width:100%}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fl-web-component",
-  "version": "1.3.11",
+  "version": "1.3.12",
   "scripts": {
     "tip1": "仅调试本组件不涉及业务组件,请执行dev",
     "dev": "vue-cli-service serve",

package/packages/components/com-graphics/index.vue

@@ -1288,6 +1288,8 @@
             threeMeasure.start();
             break;
         }
+        // 添加键盘事件监听器
+        document.addEventListener('keydown', this.handleMeasureKeyDown, false);
       },
       // 关闭测量
       closeMeasure() {
@@ -1297,6 +1299,21 @@
           threeMeasure = null;
           // this.timeRender()
         }
+        // 移除键盘事件监听器
+        document.removeEventListener('keydown', this.handleMeasureKeyDown, false);
+      },
+      handleMeasureKeyDown(event) {
+        // 检查是否按下了ESC键
+        const keyParam = {
+          desc: event.key,
+          keyCode: event.keyCode,
+          event,
+        };
+        if (event.keyCode === 27) {
+          // ESC键的键码是27
+          this.closeMeasure();
+        }
+        this.$emit('keyDown', keyParam);
       },
       // 开启平移
       /*

package/src/utils/index.js

@@ -374,24 +374,6 @@ function miniDevtool() {
   if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', createPanel);
   } else createPanel();
-
-  // 是否支持 WebGL
-  function hasWebGL() {
-    console.log('flversion', window.FLVersion)
-    console.log('userAgent:', navigator.userAgent);
-    console.log('has WebGLRenderingContext:', !!window.WebGLRenderingContext);
-    const c = document.createElement('canvas');
-
-    try {
-      const g1 = c.getContext('webgl');
-      const g2 = c.getContext('experimental-webgl');
-      const g3 = c.getContext('webgl2');
-      console.log('webgl contexts:', { g1: !!g1, g2: !!g2, g3: !!g3 });
-    } catch (e) {
-      console.error('getContext error', e);
-    }
-  }
-  console.log('===========hasWebGL=======', hasWebGL());
 }
 
 export { screenshot, miniDevtool };

package/src/utils/threejs/measure-angle.js

@@ -21,6 +21,9 @@ var MeasureAngle = function (renderer, scene, camera, width, height) {
   this.width = width;
   this.height = height;
   this.firstTime = 0;
+  // 创建一个辅助平面来捕获鼠标事件
+  this.plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
+
   // this.POINT_MATERIAL = new THREE.PointsMaterial({ color: 0xff5000, size: 1, opacity: 0.6, transparent: true, depthWrite: false, depthTest: false })
   // this.LINE_MATERIAL = new THREE.LineBasicMaterial({ color: 0xff0000, linewidth: 3, opacity: 0.8, transparent: true, side: THREE.DoubleSide, depthWrite: false, depthTest: false })
 };
@@ -55,6 +58,12 @@ MeasureAngle.prototype = {
     if (intersects.length > 0) {
       return intersects[0].point;
     }
+    // 如果没有交点，则创建一个在相机视图平面上的点
+    const ray = new THREE.Ray();
+    _this.raycaster.ray.intersectPlane(_this.plane, ray.origin);
+    if (ray.origin) {
+      return ray.origin;
+    }
     return null;
   },
   createPoints(pos, config = { color: 0x009bea, size: 0.3 }) {

package/src/utils/threejs/measure-area.js

@@ -21,6 +21,9 @@ var MeasureArea = function (renderer, scene, camera, width, height) {
   this.width = width;
   this.height = height;
   this.firstTime = 0;
+
+  // 创建一个辅助平面来捕获鼠标事件
+  this.plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
 };
 
 MeasureArea.prototype = {
@@ -53,6 +56,13 @@ MeasureArea.prototype = {
     if (intersects.length > 0) {
       return intersects[0].point;
     }
+
+    // 如果没有交点，则创建一个在相机视图平面上的点
+    const ray = new THREE.Ray();
+    _this.raycaster.ray.intersectPlane(_this.plane, ray.origin);
+    if (ray.origin) {
+      return ray.origin;
+    }
     return null;
   },
   createLine(p1, p2, config = { color: 0xff0000 }) {

package/src/utils/threejs/measure-distance.js

@@ -19,6 +19,9 @@ var MeasureDistance = function (renderer, scene, camera, width, height) {
   this.width = width;
   this.height = height;
   this.firstTime = 0;
+
+  // 创建一个辅助平面来捕获鼠标事件
+  this.plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
 };
 
 MeasureDistance.prototype = {
@@ -51,6 +54,14 @@ MeasureDistance.prototype = {
     if (intersects.length > 0) {
       return intersects[0].point;
     }
+
+    // 如果没有交点，则创建一个在相机视图平面上的点
+    const ray = new THREE.Ray();
+    _this.raycaster.ray.intersectPlane(_this.plane, ray.origin);
+    if (ray.origin) {
+      return ray.origin;
+    }
+
     return null;
   },
   createLine(p1, p2, config = { color: 0xff0000 }) {