fl-web-component 2.1.2 → 2.1.4

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

@@ -177,6 +177,7 @@ export default {
       });
       this.konvaStage.on('click', e => {
         let target = this.konvaStage.mouseClickEndShape;
+        console.log(e)
         this.$emit('leftClick', target ? target.attrs : null);
       });
     });
@@ -197,7 +198,7 @@ export default {
         this.konvaStage.position({ x: x, y: y });
         this.konvaStage.scale({ x: scale, y: scale });
 
-        this.konvaStage.batchDraw();
+        // this.konvaStage.batchDraw();
       }
     },
     calculateScaleAndPosition(contentBounds, stageWidth, stageHeight, padding = 0.1) {
@@ -260,12 +261,14 @@ export default {
     },
     updateBounds1(v) {
       if (this.bounds1 === null) {
-        this.bounds1 = { minX: v.x, maxX: v.x, minY: v.y, maxY: v.y };
+        this.bounds1 = { minX: v.x, maxX: v.x, minY: v.y, maxY: v.y }
       } else {
         if (v.x < this.bounds1.minX) {
           this.bounds1.minX = v.x;
+         
         } else if (v.x > this.bounds1.maxX) {
           this.bounds1.maxX = v.x;
+         
         }
         if (v.y < this.bounds1.minY) {
           this.bounds1.minY = v.y;
@@ -276,20 +279,104 @@ export default {
     },
     //思路是计算居中包围盒，然后排除脏数据。
     loadDxf(data) {
-      let _this = this;
       this.bounds = null;
       this.konvaLayer.destroyChildren();
-      const parser = new DxfParser();
-      let dxf = parser.parse(data);
-      // 在这里处理数据为空的时候
-      if (dxf.entities.length === 0) {
+      let flag = this.formatDrawData(data, 'updateBounds')
+      if (!flag) {
         this.$emit('error', {
           type: 'entityEmpty'
         })
         return
       }
+
+      //缩放视口
+      let scale = 1;
+      const boundingRect = this.konvaLayer.getClientRect();
+      let ratio = Number((this.$refs.svgDraw?.clientWidth / boundingRect.width).toFixed(1));
+      if (ratio > 2) {
+        scale = Number((boundingRect.width / boundingRect.height).toFixed(1));
+        scale = scale < 2 ? 2 : scale;
+      }
+
+      const boundingScale = this.konvaLayer.getClientRect();
+      //平移视口
+      const x =
+        this.$refs.svgDraw?.clientWidth / 2 -
+        (Math.ceil(boundingScale.width) / 2 + boundingScale.x / 2);
+      const y =
+        this.$refs.svgDraw.clientHeight / 2 -
+        (Math.ceil(boundingScale.height) / 2 + boundingScale.y);
+
+      // this.konvaStage.scale({
+      //   x: 2,
+      //   y: 2,
+      // });
+      // this.konvaStage.setX(0);
+      // this.konvaStage.setY(750); // 750
+
+      // this.activedSvgPan.zoom.x = 0;
+      // this.activedSvgPan.zoom.y = 750;
+      // this.activedSvgPan.x = x;
+      // this.activedSvgPan.y = x;
+      setTimeout(() => {
+        this.centerDraw();
+        this.$emit('loaded');
+      }, 100);
+    },
+    toPdf(name) {
+      //this.konvaStage.scale({
+      //x: this.activedSvgPan.zoom.x,
+      //y: this.activedSvgPan.zoom.y,
+      //});
+      //this.konvaStage.setX(this.activedSvgPan.x);
+      //this.konvaStage.setY(this.activedSvgPan.y);
+      // get data URL with default settings
+
+      // open in new window
+      this.konvaLayer.getCanvas().setPixelRatio(2);
+      const jpegURL = this.konvaStage.toDataURL({
+        mimeType: 'image/jpeg',
+        quality: 1,
+        pixelRatio: 2,
+      });
+
+      let pageData = this.konvaLayer.canvas.toDataURL('image/jpeg', 2);
+
+      let img = new Image();
+      img.src = jpegURL;
+      const pdf = new jsPDF('l', 'px', [this.konvaStage.width(), this.konvaStage.height()]);
+
+      pdf.addImage(
+        this.konvaStage.toDataURL({ pixelRatio: 2 }),
+        0,
+        0,
+        this.konvaStage.width(),
+        this.konvaStage.height()
+      );
+
+      pdf.save(name + '.pdf');
+      // var imgData = canvas.toDataURL('image/png');
+      //doc.text("Hello world!", 10, 10);
+      //doc.save("a4.pdf");
+    },
+    // 处理图纸数据
+    formatDrawData(data, fn) {
+      let _this = this;
       const parser2 = new DxfParser2();
       let dxf2 = parser2.parseSync(data);
+      // const parser = new DxfParser();
+      // let dxf = parser.parse(data);
+      // 在这里处理数据为空的时候
+      // if (dxf.entities.length === 0) {
+      //   this.$emit('error', {
+      //     type: 'entityEmpty'
+      //   })
+      //   return
+      // }
+      if (dxf2.entities.length === 0) {
+        return false
+      }
+      console.log(dxf2)
       let hatchEntitys = dxf2.entities.filter(item => item.type === 'HATCH');
       // 处理HATCH部分
       for (let i = 0; i < hatchEntitys.length; i++) {
@@ -425,7 +512,7 @@ export default {
         // }
       }
       //加载图纸
-      let entities = formatEntity(dxf.entities);
+      let entities = formatEntity(dxf2.entities);
       for (let key in entities) {
         if (entities[key]) {
           let group = [];
@@ -437,13 +524,13 @@ export default {
             let type = entities[key][i].type;
             handleFn(
               type,
-              dxf,
+              dxf2,
               entities[key][i],
               group,
               key,
               configParams,
               this.konvaLayer,
-              dxf.tables.lineType.lineTypes
+              dxf2.tables.lineType.lineTypes
               // this.recordLayerConfig
             );
           }
@@ -456,9 +543,6 @@ export default {
           }
           let shapeGroup = group.filter(item => item.type !== 'text')
           if (shapeGroup.length > 0) {
-            // if (group[0]?.stroke) {
-            //   group[0].stroke = '#000';
-            // }
             // 根据颜色分组
             let colorGroup = _.groupBy(shapeGroup, 'stroke');
             for (const colorKey in colorGroup) {
@@ -492,8 +576,8 @@ export default {
                       let v2 = {};
                       v2.x = x2;
                       v2.y = y2;
-                      _this.updateBounds(v1);
-                      _this.updateBounds(v2);
+                      _this[fn](v1);
+                      _this[fn](v2);
                     }
                     if (entity.type === 'polyline') {
                       context.strokeStyle = entity.stroke;
@@ -512,7 +596,7 @@ export default {
                           let point = {};
                           point.x = x;
                           point.y = y;
-                          _this.updateBounds(point);
+                          _this[fn](point);
 
                           if (j === 0) {
                             context.moveTo(x, y);
@@ -537,269 +621,43 @@ export default {
                 },
                 shapeType: 'shape',
               });
-              if (this.konvaLayer) this.konvaLayer.add(customShape);
+              if (this.konvaLayer) {
+                this.konvaLayer.add(customShape);
+                // 直接在这里调用draw 能拿到最新数据 不执行的话 就会导致最后执行 导致bounds的数据出错
+                this.konvaLayer.draw()
+              };
             }
-
           }
 
         }
       }
-      //缩放视口
-      let scale = 1;
-      const boundingRect = this.konvaLayer.getClientRect();
-      let ratio = Number((this.$refs.svgDraw?.clientWidth / boundingRect.width).toFixed(1));
-      if (ratio > 2) {
-        scale = Number((boundingRect.width / boundingRect.height).toFixed(1));
-        scale = scale < 2 ? 2 : scale;
-      }
-      // this.konvaStage.scale({
-      //  x: scale,
-      // y: scale,
-      //})
-      const boundingScale = this.konvaLayer.getClientRect();
-      //平移视口
-      const x =
-        this.$refs.svgDraw?.clientWidth / 2 -
-        (Math.ceil(boundingScale.width) / 2 + boundingScale.x / 2);
-      const y =
-        this.$refs.svgDraw.clientHeight / 2 -
-        (Math.ceil(boundingScale.height) / 2 + boundingScale.y);
-
-      // this.konvaStage.scale({
-      //   x: 2,
-      //   y: 2,
-      // });
-      // this.konvaStage.setX(0);
-      // this.konvaStage.setY(750); // 750
-
-      // this.activedSvgPan.zoom.x = 0;
-      // this.activedSvgPan.zoom.y = 750;
-      // this.activedSvgPan.x = x;
-      // this.activedSvgPan.y = x;
-      setTimeout(() => {
-        this.centerDraw();
-        this.$emit('loaded');
-      }, 100);
-    },
-    toPdf(name) {
-      //this.konvaStage.scale({
-      //x: this.activedSvgPan.zoom.x,
-      //y: this.activedSvgPan.zoom.y,
-      //});
-      //this.konvaStage.setX(this.activedSvgPan.x);
-      //this.konvaStage.setY(this.activedSvgPan.y);
-      // get data URL with default settings
-
-      // open in new window
-      this.konvaLayer.getCanvas().setPixelRatio(2);
-      const jpegURL = this.konvaStage.toDataURL({
-        mimeType: 'image/jpeg',
-        quality: 1,
-        pixelRatio: 2,
-      });
-
-      let pageData = this.konvaLayer.canvas.toDataURL('image/jpeg', 2);
-
-      let img = new Image();
-      img.src = jpegURL;
-      const pdf = new jsPDF('l', 'px', [this.konvaStage.width(), this.konvaStage.height()]);
-
-      pdf.addImage(
-        this.konvaStage.toDataURL({ pixelRatio: 2 }),
-        0,
-        0,
-        this.konvaStage.width(),
-        this.konvaStage.height()
-      );
-
-      pdf.save(name + '.pdf');
-      // var imgData = canvas.toDataURL('image/png');
-      //doc.text("Hello world!", 10, 10);
-      //doc.save("a4.pdf");
+      return true
     },
     toPdfs(list) {
-      let _this = this;
-      return new Promise((resolve, reject) => {
+      return new Promise( (resolve, reject) => {
         const pdf = new jsPDF('l', 'px', [this.konvaStage.width(), this.konvaStage.height()]);
         const exportPixelRatio = 2; // 可以 2/3/4 自己调
         let index = 0;
-        for (let pageIdx = 0; pageIdx < list.length; pageIdx++) {
-          let data = list[pageIdx];
+        let length = list.length;
+        do {
+          let data = list[index];
           //先绘制图面
+          
           this.konvaLayer.destroyChildren();
-          const parser = new DxfParser();
-          let dxf = parser.parse(data);
-          if (dxf.entities.length > 0) {
-            let entities = formatEntity(dxf.entities);
-            let layers = dxf.tables.layer.layers;
-            //先计算包围
-            for (let key in entities) {
-              if (entities[key]) {
-                let group = [];
-                let l = entities[key].length;
-                let layerConfig = this.recordLayerConfig[key];
-                let configParams =
-                  layerConfig && Object.keys(layerConfig).length > 0 ? layerConfig : null;
-                for (let i = 0; i < l; i++) {
-                  let type = entities[key][i].type;
-                  handleFn(
-                    type,
-                    dxf,
-                    entities[key][i],
-                    group,
-                    key,
-                    configParams,
-                    this.konvaLayer,
-                    this.recordLayerConfig
-                  );
-                }
-
-                for (let i = 0; i < group.length; i++) {
-                  let entity = group[i];
-                  if (entity.type === 'line') {
-                    let x1 = entity.x1;
-                    let y1 = entity.y1;
-                    let x2 = entity.x2;
-                    let y2 = entity.y2;
-                    let v1 = {};
-                    v1.x = x1;
-                    v1.y = y1;
-                    let v2 = {};
-                    v2.x = x2;
-                    v2.y = y2;
-                    _this.updateBounds1(v1);
-                    _this.updateBounds1(v2);
-                  }
-                  if (entity.type === 'polyline') {
-                    let flag = false;
-                    let points = entity.points;
-                    let closed = entity.closed;
-
-                    for (let j = 0; j < points.length; j++) {
-                      let index = j % 2;
-                      if (index === 0) {
-                        let x = points[j];
-                        let y = points[j + 1];
-                        let point = {};
-                        point.x = x;
-                        point.y = y;
-                        _this.updateBounds1(point);
-                      }
-                    }
-                  }
-                }
-              }
-            }
-
-            for (let key in entities) {
-              if (entities[key]) {
-                let group = [];
-                let l = entities[key].length;
-                let layerConfig = this.recordLayerConfig[key];
-                let configParams =
-                  layerConfig && Object.keys(layerConfig).length > 0 ? layerConfig : null;
-                for (let i = 0; i < l; i++) {
-                  let type = entities[key][i].type;
-                  handleFn(
-                    type,
-                    dxf,
-                    entities[key][i],
-                    group,
-                    key,
-                    configParams,
-                    this.konvaLayer,
-                    this.recordLayerConfig
-                  );
-                }
-                if (!this.konvaLayer) return;
-                for (let i = 0; i < group.length; i++) {
-                  let entity = group[i];
-                  if (entity.type === 'text') {
-                    if (this.konvaLayer) this.konvaLayer.add(entity.obj);
-                  }
-                }
-
-                if (group.length > 0) {
-                  if (group[0]?.stroke) {
-                    group[0].stroke = '#000';
-                  }
-
-                  let customShape = new Konva.Shape({
-                    x: 0,
-                    y: 0,
-                    strokeWidth: 0.2,
-                    name: key.replace(/\s*/g, ''),
-                    entityId: key,
-                    stroke: group[0].stroke,
-                    customColor: configParams ? configParams.color : '',
-                    //visible: configParams ? configParams.visible :true,
-                    sceneFunc(context, shape) {
-                      context.beginPath();
-                      for (let i = 0; i < group.length; i++) {
-                        let entity = group[i];
-
-                        if (entity.type === 'line') {
-                          context.strokeStyle = entity.stroke;
-                          let x1 = entity.x1;
-                          let y1 = entity.y1;
-                          let x2 = entity.x2;
-                          let y2 = entity.y2;
-                          if (x1 != undefined && y1 != undefined && x2 != undefined && y2 != undefined) {
-                            context.moveTo(x1, -parseFloat(y1));
-                            context.lineTo(x2, -parseFloat(y2));
-                          }
-                        }
-                        if (entity.type === 'polyline') {
-                          context.strokeStyle = entity.stroke;
-
-                          let flag = false;
-
-                          let points = entity.points;
-                          let closed = entity.closed;
-
-                          for (let j = 0; j < points.length; j++) {
-                            let index = j % 2;
-                            if (index === 0) {
-                              let x = points[j];
-                              let y = points[j + 1];
-
-                              if (j === 0) {
-                                context.moveTo(x, y);
-                              } else {
-                                context.lineTo(x, y);
-                              }
-                            }
-
-                            if (closed) {
-                              if (j === points.length - 1) {
-                                context.lineTo(points[0], points[1]);
-                              }
-                            }
-                          }
-                        }
-                      }
-                      // context.closePath();
-                      context.fillStrokeShape(shape);
-                    },
-                  });
-                  if (this.konvaLayer) this.konvaLayer.add(customShape);
-                }
-              }
-            }
-
+          let flag = this.formatDrawData(data, 'updateBounds1')
+          // 这步还没执行完就执行下面的代码了
+          if (flag) {
             const { scale, x, y } = this.calculateScaleAndPosition(
-              _this.bounds1,
+              this.bounds1,
               this.konvaStage.width(),
               this.konvaStage.height(),
               0.05 // 5% 边距
             );
-
-            _this.bounds1 = null;
-
+            this.bounds1 = null;
             this.konvaStage.position({ x: x, y: y });
             this.konvaStage.scale({ x: scale, y: scale });
 
-            this.konvaStage.batchDraw();
+            // this.konvaStage.batchDraw();
             //添加成功移动视口位置 pageIdx === 0
 
             if (index === 0) {
@@ -822,8 +680,49 @@ export default {
             }
             index++
           }
+        } while (index < length)
+        // for (let pageIdx = 0; pageIdx < list.length; pageIdx++) {
+        //   let data = list[pageIdx];
+        //   //先绘制图面
+        //   this.bounds1 = null;
+        //   this.konvaLayer.destroyChildren();
+        //   let flag = this.formatDrawData(data, 'updateBounds1')
+        //   // 这步还没执行完就执行下面的代码了
+        //   if (flag) {
+        //     const { scale, x, y } = this.calculateScaleAndPosition(
+        //       this.bounds1,
+        //       this.konvaStage.width(),
+        //       this.konvaStage.height(),
+        //       0.05 // 5% 边距
+        //     );
+        //     this.konvaStage.position({ x: x, y: y });
+        //     this.konvaStage.scale({ x: scale, y: scale });
+
+        //     this.konvaStage.batchDraw();
+        //     //添加成功移动视口位置 pageIdx === 0
+
+        //     if (index === 0) {
+        //       pdf.addImage(
+        //         this.konvaStage.toDataURL({ pixelRatio: 2 }),
+        //         0,
+        //         0,
+        //         this.konvaStage.width(),
+        //         this.konvaStage.height()
+        //       );
+        //     } else {
+        //       pdf.addPage();
+        //       pdf.addImage(
+        //         this.konvaStage.toDataURL({ pixelRatio: 2 }),
+        //         0,
+        //         0,
+        //         this.konvaStage.width(),
+        //         this.konvaStage.height()
+        //       );
+        //     }
+        //     index++
+        //   }
 
-        }
+        // }
         if (index > 0) {
           pdf.save('批量导出.pdf');
           resolve()