fl-web-component 1.1.7 → 1.1.9

package/dist/fl-web-component.css

@@ -1 +1 @@
-@charset "UTF-8";#fl-model[data-v-574500c1],#konva-container[data-v-300b3063]{width:100%;height:100%;cursor:pointer}#konva-container[data-v-300b3063]{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-51e374ea]{cursor:pointer;height:100%;width:100%}
+@charset "UTF-8";#fl-model[data-v-097943ab],#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%}

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "fl-web-component",
-  "version": "1.1.7",
+  "version": "1.1.9",
   "scripts": {
-    "tip1": "仅调试本组件不涉及业务组件,请执行npm run dev",
+    "tip1": "仅调试本组件不涉及业务组件,请执行dev",
     "dev": "vue-cli-service serve",
     "lint": "eslint \"{src,packages}/**/*.{vue,js}\" --fix",
     "prettier": "prettier --write  \"packages/**/*.{js,css,less,scss,vue,html}\"",
-    "tip2": "同时调试本组件与业务组件,请执行npm run watch",
+    "tip2": "同时调试本组件与业务组件,请执行watch",
     "watch": "vue-cli-service build --watch --mode production --target lib --name fl-web-component --formats commonjs ./src/main.js",
     "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",
     "publish:base": "npm run build && npm publish",
-    "tip3": "发版注意: 小版本执行publish:patch,中版本执行publish:minor,大版本执行publish:major",
-    "publish:patch": "npm version patch && npm run publish:base",
-    "publish:minor": "npm version minor && npm run publish:base",
-    "publish:major": "npm version major && npm run publish:base"
+    "tip3": "发版注意: 小版本执行publish:fix,中版本执行publish:feat,大版本执行publish:perf",
+    "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

@@ -1,308 +1,299 @@
 <template>
-
-    <div  ref="svgDraw" id="konva-container" style="height:100%"></div>
+  <div ref="svgDraw" id="konva-container" style="height: 100%"></div>
 </template>
 
 <script>
-    function base64ToBlob(base64) {
-        const byteCharacters = atob(base64);
-        const byteArrays = [];
-
-        for (let offset = 0; offset < byteCharacters.length; offset += 512) {
-            const slice = byteCharacters.slice(offset, offset + 512);
-            const byteNumbers = new Array(slice.length);
-            for (let i = 0; i < slice.length; i++) {
-                byteNumbers[i] = slice.charCodeAt(i);
-            }
-            const byteArray = new Uint8Array(byteNumbers);
-            byteArrays.push(byteArray);
-        }
-        return new Blob(byteArrays, { type: 'application/pdf' });
+  function base64ToBlob(base64) {
+    const byteCharacters = atob(base64);
+    const byteArrays = [];
+
+    for (let offset = 0; offset < byteCharacters.length; offset += 512) {
+      const slice = byteCharacters.slice(offset, offset + 512);
+      const byteNumbers = new Array(slice.length);
+      for (let i = 0; i < slice.length; i++) {
+        byteNumbers[i] = slice.charCodeAt(i);
+      }
+      const byteArray = new Uint8Array(byteNumbers);
+      byteArrays.push(byteArray);
     }
+    return new Blob(byteArrays, { type: 'application/pdf' });
+  }
+
+  function createObjectURL(blob) {
+    return URL.createObjectURL(blob);
+  }
+
+  function downloadPDF(base64, fileName) {
+    const blob = base64ToBlob(base64);
+    const url = createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = fileName || 'downloaded_pdf.pdf'; // 设置下载文件名，如果没有提供文件名，则默认为'downloaded_pdf.pdf'
+    document.body.appendChild(link); // 添加到DOM树中以便触发下载
+    link.click(); // 模拟点击下载
+    document.body.removeChild(link); // 下载完成后移除元素
+    URL.revokeObjectURL(url); // 释放URL对象
+  }
+  import Konva from 'konva';
+  import DxfParser from 'dxf-parser';
+  import jsPDF from 'jspdf';
+  import { formatEntity, handleFn, centering } from './components/entityFormatting';
+  var konvaStage = null,
+    konvaLayer = null;
+  var recordLayerConfig = {};
+  export default {
+    name: 'Fl2dcanvas',
+    components: {},
+    data() {
+      return {};
+    },
+    mounted() {
+      //resize方法
+      window.addEventListener('resize', () => {
+        if (konvaStage) {
+          const obj = document.getElementById('konva-container');
+          konvaStage.setWidth(obj.clientWidth);
+          konvaStage.setHeight(obj.clientHeight);
+          konvaStage._resizeDOM();
+        }
+      });
+
+      this.$nextTick(() => {
+        console.log(document.getElementById('konva-container'));
+        console.log(this.$refs.svgDraw);
+        konvaStage = new Konva.Stage({
+          className: 'stage',
+          container: 'konva-container',
+          width: this.$refs.svgDraw.clientWidth,
+          height: this.$refs.svgDraw.clientHeight,
+          draggable: true,
+        });
+        //init layer
+        konvaLayer = new Konva.Layer({
+          name: 'konva-layer',
+          x: 0,
+          y: 0,
+        });
+        //设置清晰度
+        konvaLayer.getCanvas().setPixelRatio(2);
+        konvaStage.add(konvaLayer);
+        konvaLayer.draw();
+        var scaleBy = 1.5;
+        //初始化缩放方法
+        konvaStage.on('wheel', e => {
+          console.log(e);
+          e.evt.preventDefault();
+          var oldScale = konvaStage.scaleX();
+          var pointer = konvaStage.getPointerPosition();
+          var mousePointTo = {
+            x: (pointer.x - konvaStage.x()) / oldScale,
+            y: (pointer.y - konvaStage.y()) / oldScale,
+          };
+          // how to scale? Zoom in? Or zoom out?
+          let direction = e.evt.deltaY > 0 ? -1 : 1;
+          if (e.evt.ctrlKey) {
+            direction = -direction;
+          }
+          var newScale = direction > 0 ? oldScale * scaleBy : oldScale / scaleBy;
+          this.scaleRatio = Math.ceil(newScale);
+          // 判断比例尺百分比
+          if (this.scaleRatio <= 1 || this.scaleRatio >= 100) return;
+          // 设置放大缩小多少倍
+          konvaStage.scale({ x: newScale, y: newScale });
+          var newPos = {
+            x: pointer.x - mousePointTo.x * newScale,
+            y: pointer.y - mousePointTo.y * newScale,
+          };
+          konvaStage.position(newPos);
+        });
+      });
+
+      //create方法结束
+    },
+    //销毁方法
+
+    methods: {
+      loadDxf(data) {
+        console.log('ok');
+
+        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 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,
+                konvaLayer,
+                recordLayerConfig
+              );
+            }
+            if (!konvaLayer) return;
+            for (let i = 0; i < group.length; i++) {
+              let entity = group[i];
+              if (entity.type === 'text') {
+                if (konvaLayer) konvaLayer.add(entity.obj);
+              }
+            }
 
-
-    function createObjectURL(blob) {
-        return URL.createObjectURL(blob);
-    }
-
-
-
-    function downloadPDF(base64, fileName) {
-        const blob = base64ToBlob(base64);
-        const url = createObjectURL(blob);
-        const link = document.createElement('a');
-        link.href = url;
-        link.download = fileName || 'downloaded_pdf.pdf'; // 设置下载文件名，如果没有提供文件名，则默认为'downloaded_pdf.pdf'
-        document.body.appendChild(link); // 添加到DOM树中以便触发下载
-        link.click(); // 模拟点击下载
-        document.body.removeChild(link); // 下载完成后移除元素
-        URL.revokeObjectURL(url); // 释放URL对象
-    }
-    import Konva from 'konva'
-    import DxfParser from "dxf-parser";
-    import jsPDF from 'jspdf'
-    import { formatEntity, handleFn, centering } from './components/entityFormatting'
-    var konvaStage = null, konvaLayer = null;
-    var recordLayerConfig = {}
-    export default {
-        name: "Fl2dcanvas",
-        components: {},
-        data() {
-            return {
-
-            };
-        },
-        created() {
-            //resize方法
-            window.addEventListener('resize', () => {
-                if (konvaStage) {
-                    const obj = document.getElementById('konva-container')
-                    konvaStage.setWidth(obj.clientWidth)
-                    konvaStage.setHeight(obj.clientHeight)
-                    konvaStage._resizeDOM()
-                }
-            });
-
-
-            this.$nextTick(() => {
-                console.log(document.getElementById('konva-container'));
-                console.log(this.$refs.svgDraw);
-                konvaStage = new Konva.Stage({
-                    className: "stage",
-                    container: "konva-container",
-                    width: this.$refs.svgDraw.clientWidth,
-                    height: this.$refs.svgDraw.clientHeight,
-                    draggable: true,
-                });
-                //init layer
-                konvaLayer = new Konva.Layer({
-                    name: "konva-layer",
-                    x: 0,
-                    y: 0,
-                });
-                //设置清晰度
-                konvaLayer.getCanvas().setPixelRatio(2);
-                konvaStage.add(konvaLayer);
-                konvaLayer.draw();
-                var scaleBy = 1.5;
-                //初始化缩放方法
-                konvaStage.on("wheel", (e) => {
-                    console.log(e)
-                    e.evt.preventDefault();
-                    var oldScale = konvaStage.scaleX();
-                    var pointer = konvaStage.getPointerPosition();
-                    var mousePointTo = {
-                        x: (pointer.x - konvaStage.x()) / oldScale,
-                        y: (pointer.y - konvaStage.y()) / oldScale,
-                    };
-                    // how to scale? Zoom in? Or zoom out?
-                    let direction = e.evt.deltaY > 0 ? -1 : 1;
-                    if (e.evt.ctrlKey) {
-                        direction = -direction;
+            let customShape = new Konva.Shape({
+              x: 0,
+              y: 0,
+              strokeWidth: 0.2,
+              name: key.replace(/\s*/g, ''),
+              entityId: key,
+              stroke: configParams ? configParams.color : '#000',
+              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') {
+                    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));
                     }
-                    var newScale = direction > 0 ? oldScale * scaleBy : oldScale / scaleBy;
-                    this.scaleRatio = Math.ceil(newScale)
-                    // 判断比例尺百分比
-                    if (this.scaleRatio <= 1 || this.scaleRatio >= 100) return
-                    // 设置放大缩小多少倍
-                    konvaStage.scale({ x: newScale, y: newScale });
-                    var newPos = {
-                        x: pointer.x - mousePointTo.x * newScale,
-                        y: pointer.y - mousePointTo.y * newScale,
-                    };
-                    konvaStage.position(newPos);
-                });
-            });
-
-            //create方法结束
-        },
-        //销毁方法
-
-        methods: {
-            loadDxf(data){
-
-                console.log("ok");
-
-                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 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, konvaLayer, recordLayerConfig)
+                  }
+                  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];
+                        if (j === 0) {
+                          context.moveTo(x, y);
+                        } else {
+                          context.lineTo(x, y);
                         }
-                        if (!konvaLayer) return
-                        for(let i = 0; i < group.length;i++) {
-                            let entity = group[i];
-                            if (entity.type === 'text') {
-                                if (konvaLayer) konvaLayer.add(entity.obj);
-                            }
-                        }
-
-
-                        let  customShape = new Konva.Shape({
-                            x: 0,
-                            y: 0,
-                            strokeWidth: 0.2,
-                            name: key.replace(/\s*/g, ""),
-                            entityId: key,
-                            stroke: configParams ? configParams.color : "#000",
-                            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'){
-                                        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"){
-                                        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 (konvaLayer) konvaLayer.add(customShape);
+                      if (closed) {
+                        if (j === points.length - 1) {
+                          context.lineTo(points[0], points[1]);
+                        }
+                      }
                     }
+                  }
                 }
-                //缩放视口
-                let scale = 1;
-                const boundingRect = 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
-                }
-                /*
+                // context.closePath();
+                context.fillStrokeShape(shape);
+              },
+            });
+            if (konvaLayer) konvaLayer.add(customShape);
+          }
+        }
+        //缩放视口
+        let scale = 1;
+        const boundingRect = 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;
+        }
+        /*
                 konvaStage.scale({
                   x: scale,
                   y: scale,
                 })*/
-                const boundingScale = 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);
-
-                konvaStage.scale({
-                    x:2,
-                    y:2
-                })
-                //  konvaStage.setX(x);
-                konvaStage.setY(750);
-
-
-
-
-            },
-            toPdf(name){
-                // get data URL with default settings
-
-                // open in new window
-                konvaLayer.getCanvas().setPixelRatio(1);
-                const jpegURL = konvaStage.toDataURL({
-                    mimeType: 'image/jpeg',
-                    quality:1.0
-                });
-
-                let pageData=konvaLayer.canvas.toDataURL('image/jpeg', 1.0);
-
-                console.log(pageData);
-
-                let img = new Image();
-                img.src=jpegURL;
-                const pdf = new jsPDF('l', 'px', [konvaStage.width(), konvaStage.height()]);
-
-                pdf.addImage(
-                    konvaStage.toDataURL({ pixelRatio: 2 }),
-                    0,
-                    0,
-                    konvaStage.width(),
-                    konvaStage.height()
-                );
-
-                pdf.save(name+".pdf");
-                // var imgData = canvas.toDataURL('image/png');
-                //doc.text("Hello world!", 10, 10);
-                //doc.save("a4.pdf");
-            },
-            clearCache(){
-                konvaLayer && konvaLayer.destroyChildren()
-                konvaLayer && konvaLayer.destroy()
-                konvaLayer && konvaLayer.clear()
-                konvaStage && konvaStage.destroy()
-                konvaStage && konvaStage.clearCache()
-                konvaLayer = null
-                konvaStage = null
-            },
-            beforeDestroy() {
-                this.clearCache()
-            }
-        }
-    };
+        const boundingScale = 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);
+
+        konvaStage.scale({
+          x: 2,
+          y: 2,
+        });
+        //  konvaStage.setX(x);
+        konvaStage.setY(750);
+      },
+      toPdf(name) {
+        // get data URL with default settings
+
+        // open in new window
+        konvaLayer.getCanvas().setPixelRatio(1);
+        const jpegURL = konvaStage.toDataURL({
+          mimeType: 'image/jpeg',
+          quality: 1.0,
+        });
+
+        let pageData = konvaLayer.canvas.toDataURL('image/jpeg', 1.0);
+
+        console.log(pageData);
+
+        let img = new Image();
+        img.src = jpegURL;
+        const pdf = new jsPDF('l', 'px', [konvaStage.width(), konvaStage.height()]);
+
+        pdf.addImage(
+          konvaStage.toDataURL({ pixelRatio: 2 }),
+          0,
+          0,
+          konvaStage.width(),
+          konvaStage.height()
+        );
+
+        pdf.save(name + '.pdf');
+        // var imgData = canvas.toDataURL('image/png');
+        //doc.text("Hello world!", 10, 10);
+        //doc.save("a4.pdf");
+      },
+      clearCache() {
+        konvaLayer && konvaLayer.destroyChildren();
+        konvaLayer && konvaLayer.destroy();
+        konvaLayer && konvaLayer.clear();
+        konvaStage && konvaStage.destroy();
+        konvaStage && konvaStage.clearCache();
+        konvaLayer = null;
+        konvaStage = null;
+      },
+      beforeDestroy() {
+        this.clearCache();
+      },
+    },
+  };
 </script>
 <style lang="scss" scoped>
-    #konva-container {
-        z-index: 3;
-        width: 100%;
-        height: 100%;
-        cursor: pointer;
-        overflow: hidden;
-    }
+  #konva-container {
+    z-index: 3;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    overflow: hidden;
+  }
 </style>