fl-web-component 1.2.19 → 1.3.1

package/dist/fl-web-component.css

@@ -1 +1 @@
-@charset "UTF-8";#fl-model[data-v-0efcff2f]{width:100%;height:100%;cursor:pointer}[data-v-0efcff2f] .tips-label{width:50px;color:#000;font:12px Helvetica;padding:5px;text-align:center;vertical-align:middle;background-color:khaki}[data-v-0efcff2f] .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-0efcff2f] .circle-tag{width:10px;height:10px;border-radius:50%;background-color:#ff5000}[data-v-0efcff2f] .measure-label-font{word-break:break-all}[data-v-0efcff2f] .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.2.19",
+  "version": "1.3.1",
   "scripts": {
     "tip1": "仅调试本组件不涉及业务组件,请执行dev",
     "dev": "vue-cli-service serve",
@@ -12,12 +12,12 @@
     "build": "npm run lint && vue-cli-service build --target lib --name fl-web-component --formats commonjs ./src/main.js",
     "build:test": "vue-cli-service build --target lib --name fl-web-component --formats commonjs ./src/main.js",
     "registry:npm": "npm config set registry https://registry.npmjs.org/",
-    "publish:base": "npm run build && npm publish",
+    "publish:base": "npm run build && npm run registry:npm && npm publish",
     "==": "=============================================================",
     "tip3": "发版注意: 【修改bug执行publish:fix】【新增功能执行publish:feat】【新特性执行publish:perf】",
-    "publish:fix": "npm run registry:npm && npm version patch && npm run publish:base",
-    "publish:feat": "npm run registry:npm && npm version minor && npm run publish:base",
-    "publish:perf": "npm run registry:npm && npm version major && npm run publish:base"
+    "publish:fix": "npm version patch && npm run publish:base",
+    "publish:feat": "npm version minor && npm run publish:base",
+    "publish:perf": "npm version major && npm run publish:base"
   },
   "files": [
     "dist",

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

@@ -157,8 +157,9 @@
           powerPreference: 'high-performance',
           preserveDrawingBuffer: true, //保留图形缓冲区 TODO 临时截图使用
         });
-        renderer.setPixelRatio(window.devicePixelRatio * 2);
-        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.setPixelRatio(window.devicePixelRatio);
+        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/static/question.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1581238842264" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1409" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 0C229.233778 0 0 229.233778 0 512s229.233778 512 512 512 512-229.233778 512-512A512 512 0 0 0 512 0z m0 938.666667C276.366222 938.666667 85.333333 747.633778 85.333333 512 85.333333 276.366222 276.366222 85.333333 512 85.333333c235.633778 0 426.666667 191.032889 426.666667 426.666667a426.666667 426.666667 0 0 1-426.666667 426.666667z m0-717.653334a170.666667 170.666667 0 0 0-170.666667 170.666667 42.666667 42.666667 0 0 0 85.333334 0 85.333333 85.333333 0 1 1 85.333333 85.333333 42.666667 42.666667 0 0 0-42.666667 42.666667v111.36a42.666667 42.666667 0 0 0 85.333334 0v-74.24A170.666667 170.666667 0 0 0 512 221.013333z m-42.666667 542.293334a42.666667 42.666667 0 1 0 85.333334 0 42.666667 42.666667 0 0 0-85.333334 0z" p-id="1410"></path></svg>

package/src/utils/flgltf-parser.js

@@ -99,7 +99,8 @@ function parseData(input) {
   });
 
   const formatInstances = [];
-  const rootInstances = parseNode(input.node);
+  const preNode = input.node ? input.node : generateNode(input.mesh);
+  const rootInstances = parseNode(preNode);
   flattenAndComputeWorldMatrices(rootInstances, formatInstances);
 
   const map = {
@@ -166,5 +167,24 @@ function parseNode(node) {
 
   return rootInstances;
 }
+// 生成默认node节点
+function generateNode(mesh) {
+  let nodes = [];
+  mesh.forEach(item => {
+    if (item.primitives.length) {
+      let tempNode = {
+        id: item.id,
+        _batchId: item.id,
+        name: item.id,
+        mesh: item.id,
+        matrix: {},
+        nodeType: 3,
+      };
+      nodes.push(tempNode);
+    }
+  });
+
+  return nodes;
+}
 
 export { parseData, parseNode };

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) {