fl-web-component 1.3.0 → 1.3.1

package/dist/fl-web-component.css

@@ -1 +1 @@
-@charset "UTF-8";#fl-model[data-v-416e2bff]{width:100%;height:100%;cursor:pointer}[data-v-416e2bff] .tips-label{width:50px;color:#000;font:12px Helvetica;padding:5px;text-align:center;vertical-align:middle;background-color:khaki}[data-v-416e2bff] .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-416e2bff] .circle-tag{width:10px;height:10px;border-radius:50%;background-color:#ff5000}[data-v-416e2bff] .measure-label-font{word-break:break-all}[data-v-416e2bff] .mark-label-img{padding-top:5px;width:20px;height:20px}#konva-container[data-v-4458f11e]{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-070832d8]{width:100%;height:100%;cursor:pointer}[data-v-070832d8] .tips-label{width:50px;color:#000;font:12px Helvetica;padding:5px;text-align:center;vertical-align:middle;background-color:khaki}[data-v-070832d8] .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-070832d8] .circle-tag{width:10px;height:10px;margin-top:5px;border-radius:50%;background-color:#ff5000}[data-v-070832d8] .measure-label-font{word-break:break-all}[data-v-070832d8] .mark-label-img{padding-top:5px;width:20px;height:20px}#konva-container[data-v-59765f1d]{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.0",
+  "version": "1.3.1",
   "scripts": {
     "tip1": "仅调试本组件不涉及业务组件,请执行dev",
     "dev": "vue-cli-service serve",

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

@@ -161,7 +161,7 @@ var preTarget = [];
         let entities = formatEntity(dxf.entities);
         let layers = dxf.tables.layer.layers;
 
-        for (let key in layers) {
+        for (let key in entities) {
           if (entities[key]) {
             let group = [];
             let l = entities[key].length;

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

@@ -158,7 +158,8 @@
           preserveDrawingBuffer: true, //保留图形缓冲区 TODO 临时截图使用
         });
         renderer.setPixelRatio(window.devicePixelRatio);
-        renderer.setSize(instructions.clientWidth, instructions.clientHeight);
+        const rect = instructions.getBoundingClientRect();
+        renderer.setSize(rect.width, rect.height);
         renderer.domElement.id = 'three-model';
         renderer.shadowMap.enabled = true;
         // 暂时注释这句 还有worker里面的 这跟渲染出的模型浅或暗有关系
@@ -205,9 +206,11 @@
       // 初始化文字画布
       initLabelRender() {
         labelRenderer = new CSS2DRenderer();
-        labelRenderer.setSize(window.innerWidth, window.innerHeight);
+        const rect = instructions.getBoundingClientRect();
+        labelRenderer.setSize(rect.width, rect.height);
         labelRenderer.domElement.style.position = 'absolute';
-        labelRenderer.domElement.style.top = '0px';
+
+        labelRenderer.domElement.style.top = `${rect.top}px`;
         labelRenderer.domElement.style.pointerEvents = 'none';
         instructions.appendChild(labelRenderer.domElement);
       },
@@ -1564,6 +1567,7 @@
 ::v-deep .circle-tag {
   width: 10px;
   height: 10px;
+  margin-top: 5px;
   border-radius: 50%;
   background-color: #ff5000;
 }

package/src/main.js

@@ -3,30 +3,26 @@ import Fl2dcanvas from '../packages/components/com-flcanvas/index.vue';
 import FLPerControl from '../packages/components/com-graphics/per-control.vue';
 import FlSvg from '../packages/components/com-graphics/pid.vue';
 import * as THREE from 'three';
+import pkg from '../package.json';
 
-const components = [
-    FlModel,
-    Fl2dcanvas,
-    FLPerControl,
-    FlSvg
-];
+const components = [FlModel, Fl2dcanvas, FLPerControl, FlSvg];
 
-const install = (Vue) => {
-    Vue.prototype.THREE = THREE;
-    components.forEach(component => {
-        Vue.component(component.name, component);
-    });
+const install = Vue => {
+  Vue.prototype.THREE = THREE;
+  components.forEach(component => {
+    Vue.component(component.name, component);
+  });
 };
 
 // 支持浏览器环境直接引入
-if (typeof window !== 'undefined' && window.Vue) {
-    install(window.Vue);
+if (typeof window !== 'undefined') {
+  window.FLVersion = pkg.version;
 }
 
 export default {
-    install,
-    FlModel,
-    FlSvg,
-    Fl2dcanvas,
-    FLPerControl
+  install,
+  FlModel,
+  FlSvg,
+  Fl2dcanvas,
+  FLPerControl,
 };

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

@@ -42,9 +42,14 @@ MeasureAngle.prototype = {
     this.height = height
   },
   getPosition(e) {
-    const mouse = new THREE.Vector2()
-    mouse.x = (e.clientX / _this.width) * 2 - 1
-    mouse.y = -(e.clientY / _this.height) * 2 + 1
+    const mouse = new THREE.Vector2();
+    const elRect = this.renderer.domElement.getBoundingClientRect();
+    const canvasX = e.clientX - elRect.left;
+    const canvasY = e.clientY - elRect.top;
+
+    mouse.x = (canvasX / elRect.width) * 2.0 - 1.0;
+    mouse.y = -(canvasY / elRect.height) * 2.0 + 1.0;
+
     _this.raycaster.setFromCamera(mouse, this.camera)
     let intersects = _this.raycaster.intersectObjects(_this.scene.children, true)
     if(intersects.length > 0) {
@@ -139,7 +144,7 @@ MeasureAngle.prototype = {
   },
   click(e) {
     let lastTime = new Date().getTime();
-    if (lastTime = this.firstTime < 300) {
+    if (lastTime - this.firstTime < 300) {
       if (_this.isCompleted) {
         _this.renderer.domElement.addEventListener('mousemove', _this.mousemove)
       }

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

@@ -40,9 +40,14 @@ MeasureArea.prototype = {
     this.height = height
   },
   getPosition(e) {
-    const mouse = new THREE.Vector2()
-    mouse.x = (e.clientX / _this.width) * 2 - 1
-    mouse.y = -(e.clientY / _this.height) * 2 + 1
+    const mouse = new THREE.Vector2();
+    const elRect = this.renderer.domElement.getBoundingClientRect();
+    const canvasX = e.clientX - elRect.left;
+    const canvasY = e.clientY - elRect.top;
+
+    mouse.x = (canvasX / elRect.width) * 2.0 - 1.0;
+    mouse.y = -(canvasY / elRect.height) * 2.0 + 1.0;
+
     _this.raycaster.setFromCamera(mouse, _this.camera)
     let intersects =_this.raycaster.intersectObjects(_this.scene.children, true)
     if(intersects.length > 0) {

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

@@ -38,9 +38,14 @@ MeasureDistance.prototype = {
     this.height = height
   },
   getPosition(e) {
-    const mouse = new THREE.Vector2()
-    mouse.x = (e.clientX / _this.width) * 2 - 1
-    mouse.y = -(e.clientY / _this.height) * 2 + 1
+    const mouse = new THREE.Vector2();
+    const elRect = this.renderer.domElement.getBoundingClientRect();
+    const canvasX = e.clientX - elRect.left;
+    const canvasY = e.clientY - elRect.top;
+
+    mouse.x = (canvasX / elRect.width) * 2.0 - 1.0;
+    mouse.y = -(canvasY / elRect.height) * 2.0 + 1.0;
+
     _this.raycaster.setFromCamera(mouse, this.camera)
     let intersects = _this.raycaster.intersectObjects(_this.scene.children, true)
     if(intersects.length > 0) {