fl-web-component 1.1.11 → 1.2.1

package/dist/fl-web-component.css

@@ -1 +1 @@
-@charset "UTF-8";#fl-model[data-v-090a926a],#konva-container[data-v-0a4da738]{width:100%;height:100%;cursor:pointer}#konva-container[data-v-0a4da738]{z-index:3;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-09d5c9d8]{cursor:pointer;height:100%;width:100%}
+@charset "UTF-8";#fl-model[data-v-b78ab6fa],#konva-container[data-v-4b99f9dc]{width:100%;height:100%;cursor:pointer}#konva-container[data-v-4b99f9dc]{z-index:3;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-09d5c9d8]{cursor:pointer;height:100%;width:100%}

package/package.json

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

package/packages/components/com-flcanvas/components/entityFormatting.js

@@ -290,7 +290,7 @@ function drawLine(recordDxf, entity, group, key, configParams) {
     entityId: key,
     isGroup: false,
     stroke: configParams ? configParams.color : "#000",
-    customColor: configParams ? configParams.color : "",
+    customColor: configParams ? configParams.color : "#000",
     strokeWidth: width,
     visible: configParams ? configParams.visible : true,
     oldstrokeLength:width,
@@ -334,7 +334,7 @@ function drawText(recordDxf, entity, group, key, configParams) {
     text: text,
     fontSize: fontSize,
     fill: configParams ? configParams.color : "#000",
-    customColor: configParams ? configParams.color : "",
+    customColor: configParams ? configParams.color : "#000",
     name: key.replace(/\s*/g, ""),
     entityId: key,
     fontFamily: "SimSun",
@@ -393,7 +393,7 @@ function drawLwLine(recordDxf, entity, group, key, configParams) {
       name: key.replace(/\s*/g, ""),
       entityId: key,
       stroke: configParams ? configParams.color : "#000",
-      customColor: configParams ? configParams.color : "",
+      customColor: configParams ? configParams.color : "#000",
       strokeWidth: width,
       visible: configParams ? configParams.visible : true,
       oldstrokeLength:width,
@@ -434,7 +434,7 @@ function drawSpline(recordDxf, entity, group, key, configParams) {
     entityId: key,
     isGroup: false,
     stroke: configParams ? configParams : "#000",
-    customColor: configParams ? configParams.color : "",
+    customColor: configParams ? configParams.color : "#000",
     strokeWidth: width,
     visible: configParams ? configParams.visible : true,
     oldstrokeLength: width

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

@@ -3,6 +3,8 @@
 </template>
 
 <script>
+var inspectionRect = null;
+var preTarget = [];
   function base64ToBlob(base64) {
     const byteCharacters = atob(base64);
     const byteArrays = [];
@@ -40,7 +42,6 @@
   import { formatEntity, handleFn, centering } from './components/entityFormatting';
   var konvaStage = null,
     konvaLayer = null;
-  var recordLayerConfig = {};
   export default {
     name: 'Fl2dcanvas',
     components: {},
@@ -50,6 +51,7 @@
     mounted() {
       //resize方法
       window.addEventListener('resize', () => {
+        console.log('resize');
         if (konvaStage) {
           const obj = document.getElementById('konva-container');
           konvaStage.setWidth(obj.clientWidth);
@@ -81,7 +83,6 @@
         var scaleBy = 1.5;
         //初始化缩放方法
         konvaStage.on('wheel', e => {
-          console.log(e);
           e.evt.preventDefault();
           var oldScale = konvaStage.scaleX();
           var pointer = konvaStage.getPointerPosition();
@@ -106,6 +107,31 @@
           };
           konvaStage.position(newPos);
         });
+        // 点击事件
+        konvaStage.on('click', e => {
+          let clickObj = null;
+          let position = konvaStage.getPointerPosition();
+          let x = (position.x- konvaStage.getX()) / konvaStage.scaleX();
+          let y = (position.y- konvaStage.getY()) / konvaStage.scaleY();
+          inspectionRect.setX(x);
+          inspectionRect.setY(y);
+          position = null;
+          if (
+            e.target.attrs.hasOwnProperty("className") &&
+            e.target.attrs.className === "stage"
+          ) {
+            let obj = this.getIntersects(inspectionRect.getClientRect());
+            console.log(obj);
+            clickObj = obj.length > 0 ? obj[obj.length - 1] : null;
+          } else {
+            clickObj = e.target.attrs;
+          }
+          if (e.evt.button === 0) {
+            this.$emit('leftClick', clickObj);
+          } else if (e.evt.button === 2)  {
+            this.$emit('rightClick', clickObj);
+          }
+        });
       });
 
       //create方法结束
@@ -113,26 +139,37 @@
     //销毁方法
 
     methods: {
-      loadDxf(data) {
-        console.log('ok');
-
+      loadDxf(data, layerConfigs = {}) {
+        konvaLayer.destroyChildren();
+        konvaStage.scale({
+          x: 1,
+          y: 1,
+        });
+        konvaStage.setX(0);
+        konvaStage.setY(0);
+        inspectionRect = null;
+        inspectionRect = new Konva.Rect({
+          width: 1.5,
+          height: 1.5,
+          x: 0,
+          y: 0,
+          stroke: "#000",
+          strokeWidth: 0.2,
+          name: "intersect-rect",
+          visible: false,
+          opacity: 0
+        });
+        konvaLayer.add(inspectionRect);
         const parser = new DxfParser();
         let dxf = parser.parse(data);
         let entities = formatEntity(dxf.entities);
-
-        console.log(entities);
-
         let layers = dxf.tables.layer.layers;
-        //加载图纸
-
-        console.log('layers');
-        console.log(layers);
 
         for (let key in layers) {
           if (entities[key]) {
             let group = [];
             let l = entities[key].length;
-            let layerConfig = recordLayerConfig[key];
+            let layerConfig = layerConfigs[key];
             let configParams =
               layerConfig && Object.keys(layerConfig).length > 0 ? layerConfig : null;
             for (let i = 0; i < l; i++) {
@@ -145,7 +182,7 @@
                 key,
                 configParams,
                 konvaLayer,
-                recordLayerConfig
+                layerConfigs
               );
             }
             if (!konvaLayer) return;
@@ -163,7 +200,7 @@
               name: key.replace(/\s*/g, ''),
               entityId: key,
               stroke: configParams ? configParams.color : '#000',
-              customColor: configParams ? configParams.color : '',
+              customColor: configParams ? configParams.color : '#000',
               visible: configParams ? configParams.visible : true,
               sceneFunc(context, shape) {
                 context.beginPath();
@@ -221,11 +258,10 @@
           scale = Number((boundingRect.width / boundingRect.height).toFixed(1));
           scale = scale < 2 ? 2 : scale;
         }
-        /*
-                konvaStage.scale({
-                  x: scale,
-                  y: scale,
-                })*/
+        konvaStage.scale({
+          x: scale,
+          y: scale,
+        })
         const boundingScale = konvaLayer.getClientRect();
         //平移视口
         const x =
@@ -235,12 +271,13 @@
           this.$refs.svgDraw.clientHeight / 2 -
           (Math.ceil(boundingScale.height) / 2 + boundingScale.y);
 
-        konvaStage.scale({
-          x: 2,
-          y: 2,
-        });
-        //  konvaStage.setX(x);
-        konvaStage.setY(750);
+        // konvaStage.scale({
+        //   x: 2,
+        //   y: 2,
+        // });
+        konvaStage.setX(x);
+        konvaStage.setY(y); // 750
+        this.$emit('loaded')
       },
       toPdf(name) {
         // get data URL with default settings
@@ -282,6 +319,72 @@
         konvaLayer = null;
         konvaStage = null;
       },
+      getIntersects(rect) {
+        let l = konvaLayer.children.length;
+        let intersects = [];
+        for (let index = 0; index < l; index++) {
+          const ele = konvaLayer.children[index];
+          if (ele.attrs.name !== "intersect-rect") {
+            const boundingRect = ele.getClientRect();
+            if (
+              !(
+                rect.x + rect.width < boundingRect.x ||
+                boundingRect.x + boundingRect.width < rect.x ||
+                rect.y + rect.height < boundingRect.y ||
+                boundingRect.y + boundingRect.height < rect.y
+              )
+            ) {
+
+              intersects.push(ele);
+            }
+          }
+        }
+        return intersects;
+      },
+      // 参数说明arr数组，每个元素为一个对象，对象包含id, color属性
+      highLight(arr) {
+        for (let index = 0; index < arr.length; index++) {
+          const element = arr[index];
+          let name = element.id.replace(/\s*/g, "")
+          let obj = konvaStage.find("." + name)
+          if (obj.length > 0) {
+            let lists = obj.filter((item) => !item.attrs.isGroup);
+            for (let i = 0; i < lists.length; i++) {
+              preTarget.push(lists[i]);
+              const ele = lists[i];
+              if (ele.className === "Text") {
+                ele.setFill(element.color);
+                ele.setStroke(element.color)
+              } else {
+                ele.setStroke(element.color);
+              }
+            }
+          }
+        }
+      },
+      resetHighLight() {
+        for (let index = 0; index < preTarget.length; index++) {
+          const element = preTarget[index];
+          if (element.className === "Text") {
+            element.setFill(element.attrs.customColor);
+            element.setStroke(element.attrs.customColor)
+          } else {
+            element.setStroke(element.attrs.customColor);
+          }
+        }
+        preTarget.splice(0);
+      },
+      // 居中定位
+      centering(id) {
+        let entityId = id.replace(/\s*/g, "");
+        let obj = konvaStage.find("." + entityId);
+        let scaleBy = 8;
+        if (obj.length > 0) {
+          konvaStage.scale({ x: scaleBy, y: scaleBy });
+          centering(obj, this.$refs.svgDraw, konvaStage, scaleBy)
+          obj = null;
+        }
+      },
       beforeDestroy() {
         this.clearCache();
       },

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

@@ -119,11 +119,32 @@
       this.initControl();
       this.initLight();
       this.initLabelRender();
-      renderer.domElement.addEventListener('mouseup', this.mouseClick, false);
-      renderer.domElement.addEventListener('mousedown', this.mouseDown, false);
+      // 判断是设备是手机还是电脑
+      let isMobileDevice = this.isMobileDevice();
+      if (isMobileDevice) {
+        renderer.domElement.addEventListener('pointerup', this.mouseClick, false);
+        renderer.domElement.addEventListener('pointerdown', this.mouseDown, false);
+      } else {
+        renderer.domElement.addEventListener('mouseup', this.mouseClick, false);
+        renderer.domElement.addEventListener('mousedown', this.mouseDown, false);
+      }
       this.animate();
     },
     methods: {
+      // 判断是设备是手机还是电脑
+      isMobileDevice() {
+        const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+        if (/windows phone/i.test(userAgent)) {
+          return true;
+        }
+        if (/android/i.test(userAgent)) {
+          return true;
+        }
+        if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
+          return true;
+        }
+        return false;
+      },
       initRender() {
         renderer = new this.THREE.WebGLRenderer({
           antialias: true,
@@ -307,8 +328,15 @@
         if (!measureFlag) {
           lastTime = new Date().getTime();
           if (lastTime - firstTime < 300) {
-            mouse.x = (event.clientX / instructions.offsetWidth) * 2 - 1;
-            mouse.y = -(event.clientY / instructions.offsetHeight) * 2 + 1;
+            // 获取元素在页面中的偏移位置
+            const rect = renderer.domElement.getBoundingClientRect();
+            const x = event.clientX - rect.left;
+            const y = event.clientY - rect.top;
+
+            // mouse.x = (event.clientX / instructions.offsetWidth) * 2 - 1;
+            // mouse.y = -(event.clientY / instructions.offsetHeight) * 2 + 1;
+            mouse.x = (x / rect.width) * 2 - 1;
+            mouse.y = -(y / rect.height) * 2 + 1;
             raycaster.setFromCamera(mouse, camera);
             const intersects = raycaster.intersectObjects(scene.children, true);
             let params = {};
@@ -443,8 +471,6 @@
                 });
                 break;
               case 'opacity':
-                // obj.material.opacity = ele.attr[key];
-                // obj.material.transparent = true;
                 targetObj.forEach(children => {
                   if (children.isMesh) {
                     const opacity = children.geometry.attributes.opacity.array;
@@ -533,7 +559,6 @@
           } else if (obj.isMesh) {
             this.setModelCenter(obj.parent);
           }
-          // cameraControls.fitToBox( obj, true);
         }
       },
       // 根据自定义参数修改模型
@@ -1431,6 +1456,24 @@
         }
         scenePass = null;
       },
+      // 获取中心点
+      getCenter(obj) {
+        console.log(obj)
+        let center = new this.THREE.Vector3();
+        obj.boundingBox.getCenter(center);
+        const mat4 = new this.THREE.Matrix4();
+        mat4.makeRotationX(-Math.PI / 2);
+        center.applyMatrix4(mat4)
+        return center;
+      },
+      getSize(obj) {
+        let size = new this.THREE.Vector3();
+        obj.boundingBox.getSize(size);
+        const mat4 = new this.THREE.Matrix4();
+        mat4.makeRotationX(-Math.PI / 2);
+        size.applyMatrix4(mat4)
+        return size;
+      },
       animate() {
         const delta = fpsClock.getDelta();
         timeStamp += delta;

package/src/utils/flgltf-parser.js

@@ -136,7 +136,7 @@ function parseData(input) {
     drawObjs: Array.from(drawObjMap.values()),
     instances: formatInstances,
   };
-  console.log('parseData', map);
+  // console.log('parseData', map);
   return map;
 }
 

package/src/utils/instance-parser.js

@@ -112,8 +112,8 @@ function handleInstancedMeshModel(
       }
     }
   }
-  console.log('modelGroup', modelGroup);
-  console.log('drawObjMapInstance', drawObjMapInstance);
+  // console.log('modelGroup', modelGroup);
+  // console.log('drawObjMapInstance', drawObjMapInstance);
   return modelGroup;
   // timeRender();
   // console.log('scene', scene)