fl-web-component 1.3.11 → 1.3.13

package/dist/fl-web-component.css

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

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

@@ -1,10 +1,9 @@
 <template>
-  <div ref="svgDraw" id="konva-container" style="height: 100%"></div>
+
+    <div  ref="svgDraw" id="konva-container" style="height:100%"></div>
 </template>
 
 <script>
-var inspectionRect = null;
-var preTarget = [];
   function base64ToBlob(base64) {
     const byteCharacters = atob(base64);
     const byteArrays = [];
@@ -21,10 +20,13 @@ var preTarget = [];
     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);
@@ -36,106 +38,90 @@ var preTarget = [];
     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 activedSvgPan = {
-  x: 0,
-  y: 0,
-  zoom: {
-    x: 1,
-    y: 1,
-  },
-};
+  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 = {}
+  var activedSvgPan = {
+    x: 0,
+    y: 0,
+    zoom: {
+      x: 1,
+      y: 1,
+    },
+  };
   export default {
-    name: 'Fl2dcanvas',
+    name: "Fl2dcanvas",
     components: {},
     data() {
-      return {};
+      return {
+
+      };
     },
-    mounted() {
+    created() {
       //resize方法
       window.addEventListener('resize', () => {
         if (konvaStage) {
-          const obj = document.getElementById('konva-container');
-          konvaStage.setWidth(obj.clientWidth);
-          konvaStage.setHeight(obj.clientHeight);
-          konvaStage._resizeDOM();
+          const obj = document.getElementById('konva-container')
+          konvaStage.setWidth(obj.clientWidth)
+          konvaStage.setHeight(obj.clientHeight)
+          konvaStage._resizeDOM()
         }
       });
 
+
       this.$nextTick(() => {
-        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 => {
-          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);
-        });
-        // 点击事件
-        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());
-            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);
-          }
-        });
+        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.1;
+      //初始化缩放方法
+      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)
+        console.log(this.scaleRatio);
+        // 判断比例尺百分比
+        console.log(this.scaleRatio);
+        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方法结束
@@ -143,178 +129,170 @@ var activedSvgPan = {
     //销毁方法
 
     methods: {
-      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);
-        let layers = dxf.tables.layer.layers;
-
-        for (let key in entities) {
-          if (entities[key]) {
-            let group = [];
-            let l = entities[key].length;
-            let layerConfig = layerConfigs[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,
-                layerConfigs
-              );
-            }
-            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);
+        loadDxf(data){
+
+
+
+
+          const parser = new DxfParser();
+          let dxf = parser.parse(data);
+          let entities = formatEntity(dxf.entities);
+
+
+          let layers = dxf.tables.layer.layers;
+          //加载图纸
+          console.log(layers);
+
+          for (let key in entities) {
+
+
+
+            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);
+                }
+              }
+
+
 
-            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 : '#000',
-              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));
+              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));
+                      }
                     }
-                    shape.px = entity.x1
-                    shape.py = -entity.y1
-                  }
-                  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(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]);
+                        if(closed) {
+                          if (j === points.length - 1) {
+                            context.lineTo(points[0], points[1]);
+                          }
                         }
                       }
                     }
-                    shape.px = points[0]
-                    shape.py = points[1]
                   }
+                  // context.closePath();
+                  context.fillStrokeShape(shape);
                 }
-                // context.closePath();
-                context.fillStrokeShape(shape);
-              },
-            });
-            if (konvaLayer) konvaLayer.add(customShape);
+              });
+              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(y); // 750
-
-        activedSvgPan.zoom.x = scale;
-        activedSvgPan.zoom.y = scale;
-        activedSvgPan.x = x;
-        activedSvgPan.y = y;
-        setTimeout(() => {
-          this.$emit('loaded')
-        }, 100)
-      },
-      toPdf(name) {
+          //缩放视口
+          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(0);
+          konvaStage.setY(750); // 750
+
+          activedSvgPan.zoom.x = 0;
+          activedSvgPan.zoom.y = 750;
+          activedSvgPan.x = x;
+          activedSvgPan.y = x;
+          setTimeout(() => {
+            this.$emit('loaded')
+          }, 100)
+
+
+
+        },
+      toPdf(name){
+        //konvaStage.scale({
+          //x: activedSvgPan.zoom.x,
+          //y: activedSvgPan.zoom.y,
+        //});
+        //konvaStage.setX(activedSvgPan.x);
+        //konvaStage.setY(activedSvgPan.y);
         // get data URL with default settings
-        konvaStage.scale({
-          x: activedSvgPan.zoom.x,
-          y: activedSvgPan.zoom.y,
-        });
-        konvaStage.setX(activedSvgPan.x);
-        konvaStage.setY(activedSvgPan.y);
+
         // open in new window
         konvaLayer.getCanvas().setPixelRatio(1);
         const jpegURL = konvaStage.toDataURL({
           mimeType: 'image/jpeg',
-          quality: 1.0,
+          quality:1.0
         });
 
-        let pageData = konvaLayer.canvas.toDataURL('image/jpeg', 1.0);
+        let pageData=konvaLayer.canvas.toDataURL('image/jpeg', 1.0);
 
-        console.log(pageData);
 
         let img = new Image();
-        img.src = jpegURL;
+        img.src=jpegURL;
         const pdf = new jsPDF('l', 'px', [konvaStage.width(), konvaStage.height()]);
 
         pdf.addImage(
@@ -325,95 +303,24 @@ var activedSvgPan = {
           konvaStage.height()
         );
 
-        pdf.save(name + '.pdf');
-        // var imgData = canvas.toDataURL('image/png');
+        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;
-      },
-      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;
-        }
-      },
-      resize(width, height) {
-        konvaStage.setWidth(width);
-        konvaStage.setHeight(height);
-        konvaStage._resizeDOM();
+      clearCache(){
+        konvaLayer && konvaLayer.destroyChildren()
+        konvaLayer && konvaLayer.destroy()
+        konvaLayer && konvaLayer.clear()
+        konvaStage && konvaStage.destroy()
+        konvaStage && konvaStage.clearCache()
+        konvaLayer = null
+        konvaStage = null
       },
       beforeDestroy() {
-        this.clearCache();
-      },
-    },
+        this.clearCache()
+      }
+    }
   };
 </script>
 <style lang="scss" scoped>