fl-web-component 1.3.16 → 1.3.17

package/dist/fl-web-component.css

@@ -1 +1 @@
-@charset "UTF-8";#fl-model[data-v-c496e868]{width:100%;height:100%;cursor:pointer}[data-v-c496e868] .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-c496e868] .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-c496e868] .circle-tag{width:10px;height:10px;margin-top:5px;border-radius:50%;background-color:#ff5000}[data-v-c496e868] .measure-label-font{word-break:break-all}[data-v-c496e868] .mark-label-img{padding-top:5px;width:20px;height:20px}.lil-gui{background:hsla(0,0%,100%,.95)!important;border:1px solid #e0e0e0!important;border-radius:8px!important;box-shadow:0 4px 12px rgba(0,0,0,.15)!important;backdrop-filter:blur(10px)!important;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif!important}.lil-gui .title{background:linear-gradient(135deg,#f8f9fa,#e9ecef)!important;color:#495057!important;border-bottom:1px solid #dee2e6!important;font-weight:600!important;padding:0 12px!important;border-radius:8px 8px 0 0!important}.lil-gui .controller{border-bottom:1px solid #f1f3f4!important;background:transparent!important}.lil-gui .controller:last-child{border-bottom:none!important}.lil-gui .controller .name{color:#495057!important;font-weight:500!important;font-size:12px!important}.lil-gui .controller .widget{background:#f8f9fa!important;border:1px solid #ced4da!important;border-radius:4px!important;color:#495057!important}.lil-gui .controller .widget:focus,.lil-gui .controller .widget:hover{border-color:#80bdff!important;box-shadow:0 0 0 2px rgba(0,123,255,.25)!important}.lil-gui .controller .widget:focus{outline:none!important}.lil-gui .controller input[type=range]{background:#e9ecef!important;height:4px!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;border-radius:2px!important}.lil-gui .controller.number .fill{border-right:solid #008de9}.lil-gui .controller input[type=range]::-webkit-slider-thumb{background:#007bff!important;border:2px solid #fff!important;box-shadow:0 2px 4px rgba(0,0,0,.2)!important;width:16px!important;height:16px!important;border-radius:50%!important;-webkit-appearance:none!important;appearance:none!important;cursor:pointer!important}.lil-gui .controller input[type=range]::-moz-range-thumb{background:#007bff!important;border:2px solid #fff!important;box-shadow:0 2px 4px rgba(0,0,0,.2)!important;width:16px!important;height:16px!important;border-radius:50%!important;cursor:pointer!important}.lil-gui .controller .option{background:#fff!important;color:#495057!important;border-bottom:1px solid #f1f3f4!important}.lil-gui .controller .option:hover{background:#f8f9fa!important}.lil-gui .controller .option:last-child{border-bottom:none!important}.lil-gui input:active{background:#e6eff4}.lil-gui .controller button{background:linear-gradient(135deg,#007bff,#0056b3)!important;color:#fff!important;border:none!important;border-radius:4px!important;font-weight:500!important;transition:all .2s ease!important}.lil-gui .controller button:hover{background:linear-gradient(135deg,#0056b3,#004085)!important;transform:translateY(-1px)!important;box-shadow:0 4px 8px rgba(0,123,255,.3)!important}.lil-gui .controller .color{border:2px solid #fff!important;border-radius:4px!important;box-shadow:0 2px 4px rgba(0,0,0,.1)!important}.lil-gui .controller.number .slider,.lil-gui .controller.number .slider:hover{background-color:#e6eff4}.lil-gui input,.lil-gui input:hover,.lil-gui input[type=number]:focus,.lil-gui input[type=text]:focus{background:#e6eff4}.lil-gui .controller>.name{min-width:25px}.lil-gui .controller.number input{color:#2e3136}.lil-gui .controller.number .slider:active{background-color:#e6eff4}.lil-gui .folder>.title{background:linear-gradient(135deg,#f1f3f4,#e9ecef)!important;color:#495057!important;border-bottom:1px solid #dee2e6!important}.lil-gui .folder>.title:before{color:#6c757d!important}.lil-gui .folder.closed>.children{display:none!important}#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%}
+@charset "UTF-8";#fl-model[data-v-c496e868]{width:100%;height:100%;cursor:pointer}[data-v-c496e868] .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-c496e868] .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-c496e868] .circle-tag{width:10px;height:10px;margin-top:5px;border-radius:50%;background-color:#ff5000}[data-v-c496e868] .measure-label-font{word-break:break-all}[data-v-c496e868] .mark-label-img{padding-top:5px;width:20px;height:20px}.lil-gui{background:hsla(0,0%,100%,.95)!important;border:1px solid #e0e0e0!important;border-radius:8px!important;box-shadow:0 4px 12px rgba(0,0,0,.15)!important;backdrop-filter:blur(10px)!important;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif!important}.lil-gui .title{background:linear-gradient(135deg,#f8f9fa,#e9ecef)!important;color:#495057!important;border-bottom:1px solid #dee2e6!important;font-weight:600!important;padding:0 12px!important;border-radius:8px 8px 0 0!important}.lil-gui .controller{border-bottom:1px solid #f1f3f4!important;background:transparent!important}.lil-gui .controller:last-child{border-bottom:none!important}.lil-gui .controller .name{color:#495057!important;font-weight:500!important;font-size:12px!important}.lil-gui .controller .widget{background:#f8f9fa!important;border:1px solid #ced4da!important;border-radius:4px!important;color:#495057!important}.lil-gui .controller .widget:focus,.lil-gui .controller .widget:hover{border-color:#80bdff!important;box-shadow:0 0 0 2px rgba(0,123,255,.25)!important}.lil-gui .controller .widget:focus{outline:none!important}.lil-gui .controller input[type=range]{background:#e9ecef!important;height:4px!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;border-radius:2px!important}.lil-gui .controller.number .fill{border-right:solid #008de9}.lil-gui .controller input[type=range]::-webkit-slider-thumb{background:#007bff!important;border:2px solid #fff!important;box-shadow:0 2px 4px rgba(0,0,0,.2)!important;width:16px!important;height:16px!important;border-radius:50%!important;-webkit-appearance:none!important;appearance:none!important;cursor:pointer!important}.lil-gui .controller input[type=range]::-moz-range-thumb{background:#007bff!important;border:2px solid #fff!important;box-shadow:0 2px 4px rgba(0,0,0,.2)!important;width:16px!important;height:16px!important;border-radius:50%!important;cursor:pointer!important}.lil-gui .controller .option{background:#fff!important;color:#495057!important;border-bottom:1px solid #f1f3f4!important}.lil-gui .controller .option:hover{background:#f8f9fa!important}.lil-gui .controller .option:last-child{border-bottom:none!important}.lil-gui input:active{background:#e6eff4}.lil-gui .controller button{background:linear-gradient(135deg,#007bff,#0056b3)!important;color:#fff!important;border:none!important;border-radius:4px!important;font-weight:500!important;transition:all .2s ease!important}.lil-gui .controller button:hover{background:linear-gradient(135deg,#0056b3,#004085)!important;transform:translateY(-1px)!important;box-shadow:0 4px 8px rgba(0,123,255,.3)!important}.lil-gui .controller .color{border:2px solid #fff!important;border-radius:4px!important;box-shadow:0 2px 4px rgba(0,0,0,.1)!important}.lil-gui .controller.number .slider,.lil-gui .controller.number .slider:hover{background-color:#e6eff4}.lil-gui input,.lil-gui input:hover,.lil-gui input[type=number]:focus,.lil-gui input[type=text]:focus{background:#e6eff4}.lil-gui .controller>.name{min-width:25px}.lil-gui .controller.number input{color:#2e3136}.lil-gui .controller.number .slider:active{background-color:#e6eff4}.lil-gui .folder>.title{background:linear-gradient(135deg,#f1f3f4,#e9ecef)!important;color:#495057!important;border-bottom:1px solid #dee2e6!important}.lil-gui .folder>.title:before{color:#6c757d!important}.lil-gui .folder.closed>.children{display:none!important}#konva-container[data-v-3507a900]{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.16",
+  "version": "1.3.17",
   "scripts": {
     "tip1": "仅调试本组件不涉及业务组件,请执行dev",
     "dev": "vue-cli-service serve",

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

@@ -2,25 +2,29 @@ import bSpline from "./bspline";
 import * as THREE from "three";
 
 export function handleFn(functionName, recordDxf, entity, group, key, configParams, konvaLayer) {
+  console.log(functionName);
+
   switch (functionName) {
     case 'LINE': drawLine(recordDxf, entity, group, key, configParams)
-     break;
-     case 'TEXT': drawText(recordDxf, entity, group, key, configParams)
-     break;
-     case 'LWPOLYLINE': drawLwLine(recordDxf, entity, group, key, configParams)
-     break;
-     case 'ARC': drawArc(recordDxf, entity, group, key, configParams)
-     break;
-     case 'CIRCLE': drawArc(recordDxf, entity, group, key, configParams)
-     break;
-     case 'ELLIPSE': drawEllpse(recordDxf, entity, group, key, configParams)
-     break;
-     //case 'MTEXT': drawMtext(recordDxf, entity, group, key, configParams)
-     //break;
-     case 'SPLINE': drawSpline(recordDxf, entity, group, key, configParams)
-     break;
-    //  case 'INSERT': drawInsert(recordDxf, entity, group, key, configParams, konvaLayer)
-    //  break;
+      break;
+    case 'TEXT': drawText(recordDxf, entity, group, key, configParams)
+      break;
+    case 'LWPOLYLINE': drawLwLine(recordDxf, entity, group, key, configParams)
+      break;
+    case 'ARC': drawArc(recordDxf, entity, group, key, configParams)
+      break;
+    case 'CIRCLE': drawArc(recordDxf, entity, group, key, configParams)
+      break;
+    case 'ELLIPSE': drawEllpse(recordDxf, entity, group, key, configParams)
+      break;
+    case 'HATCH':drawHatch(recordDxf, entity, group, key, configParams)
+      break;
+      //case 'MTEXT': drawMtext(recordDxf, entity, group, key, configParams)
+      //break;
+    case 'SPLINE': drawSpline(recordDxf, entity, group, key, configParams)
+      break;
+      //  case 'INSERT': drawInsert(recordDxf, entity, group, key, configParams, konvaLayer)
+      //  break;
   }
 }
 export function  formatEntity(entities) {
@@ -67,8 +71,6 @@ export function centering(obj, container, konvaStage, scaleBy) {
       } else if (target[0].className === "Line") {
         const p = getAbsolutePoints(target[0].getPoints());
         computedCenter(p.x, p.y, container, konvaStage, scaleBy)
-      } else {
-        computedCenter(target[0].px, target[0].py, container, konvaStage, scaleBy)
       }
     }
   } else {
@@ -78,24 +80,22 @@ export function centering(obj, container, konvaStage, scaleBy) {
     } else if (target[0].className === "Line") {
       const p = getAbsolutePoints(target[0].getPoints());
       computedCenter(p.x, p.y, container, konvaStage, scaleBy)
-    } else {
-      computedCenter(target[0].px, target[0].py, container, konvaStage, scaleBy)
     }
   }
 }
 // 计算居中位置
 function computedCenter(x, y, container, konvaStage, scaleBy) {
-let newX = container.clientWidth / 2 - x * scaleBy;
-let newY = container.clientHeight / 2 -y * scaleBy;
-konvaStage.position({ x: newX, y: newY });
+  let newX = container.clientWidth / 2 - x * scaleBy;
+  let newY = container.clientHeight / 2 -y * scaleBy;
+  konvaStage.position({ x: newX, y: newY });
 }
 
 function getBSplinePolyline(
-  controlPoints,
-  degree,
-  knots,
-  interpolationsPerSplineSegment,
-  weights
+    controlPoints,
+    degree,
+    knots,
+    interpolationsPerSplineSegment,
+    weights
 ) {
   const polyline = [];
   const controlPointsForLib = controlPoints.map(function (p) {
@@ -124,9 +124,9 @@ function getBSplinePolyline(
   return polyline;
 }
 function mtextContentAndFormattingToTextAndStyle(
-  textAndControlChars,
-  entity,
-  configParams
+    textAndControlChars,
+    entity,
+    configParams
 ) {
   let activeStyle = {
     horizontalAlignment: "left",
@@ -149,9 +149,9 @@ function mtextContentAndFormattingToTextAndStyle(
       }
     } else if (Array.isArray(item)) {
       var nestedFormat = mtextContentAndFormattingToTextAndStyle(
-        item,
-        entity,
-        configParams
+          item,
+          entity,
+          configParams
       );
       text.push(nestedFormat.text);
     } else if (typeof item === "object") {
@@ -178,11 +178,11 @@ function drawArc(recordDxf, entity, group, key, configParams) {
     endAngle = entity.endAngle;
   }
   let curve = new THREE.ArcCurve(
-    entity.center.x,
-    parseFloat(entity.center.y),
-    entity.radius,
-    startAngle,
-    endAngle
+      entity.center.x,
+      parseFloat(entity.center.y),
+      entity.radius,
+      startAngle,
+      endAngle
   );
   let points = curve.getPoints(32);
 
@@ -225,24 +225,25 @@ function drawArc(recordDxf, entity, group, key, configParams) {
 
 function drawEllpse(recordDxf, entity, group, key, configParams) {
   let xrad = Math.sqrt(
-    Math.pow(parseFloat(entity.majorAxisEndPoint.x), 2) +
-     Math.pow(parseFloat(entity.majorAxisEndPoint.y), 2)
+      Math.pow(parseFloat(entity.majorAxisEndPoint.x), 2) +
+      Math.pow(parseFloat(entity.majorAxisEndPoint.y), 2)
   );
   let yrad = xrad * parseFloat(entity.axisRatio);
   let rotation = Math.atan2(
-    parseFloat(entity.majorAxisEndPoint.y),
-    parseFloat(entity.majorAxisEndPoint.x)
+      parseFloat(entity.majorAxisEndPoint.y),
+      parseFloat(entity.majorAxisEndPoint.x)
   );
-
+  console.log(entity.startAngle);
+  console.log(entity.endAngle);
   let curve = new THREE.EllipseCurve(
-    parseFloat(entity.center.x),
-    parseFloat(entity.center.y),
-    xrad,
-    yrad,
-    parseFloat(entity.startAngle),
-    parseFloat(entity.endAngle),
-    false, // Always counterclockwise
-    rotation
+      parseFloat(entity.center.x),
+      parseFloat(entity.center.y),
+      xrad,
+      yrad,
+      parseFloat(entity.startAngle),
+      parseFloat(entity.endAngle),
+      false, // Always counterclockwise
+      rotation
   );
   let points = curve.getPoints(200);
   let list = [];
@@ -251,6 +252,9 @@ function drawEllpse(recordDxf, entity, group, key, configParams) {
     list.push(-parseFloat(points[i].y));
   }
   let width = 0.2;
+
+
+
   group.push({
     type:'polyline',
     points:list,
@@ -294,7 +298,7 @@ function drawLine(recordDxf, entity, group, key, configParams) {
     entityId: key,
     isGroup: false,
     stroke: configParams ? configParams.color : "#000",
-    customColor: configParams ? configParams.color : "#000",
+    customColor: configParams ? configParams.color : "",
     strokeWidth: width,
     visible: configParams ? configParams.visible : true,
     oldstrokeLength:width,
@@ -329,6 +333,8 @@ function drawText(recordDxf, entity, group, key, configParams) {
   }else{
     fontSize=entity.textHeight+0.35;
   }
+
+
   let startPoint = entity.startPoint;
   let x = startPoint.x;
   let y = startPoint.y;
@@ -338,7 +344,7 @@ function drawText(recordDxf, entity, group, key, configParams) {
     text: text,
     fontSize: fontSize,
     fill: configParams ? configParams.color : "#000",
-    customColor: configParams ? configParams.color : "#000",
+    customColor: configParams ? configParams.color : "",
     name: key.replace(/\s*/g, ""),
     entityId: key,
     fontFamily: "SimSun",
@@ -347,36 +353,50 @@ function drawText(recordDxf, entity, group, key, configParams) {
     strokeWidth:0.1,
   });
   if (entity.rotation) {
-
-      if(entity.rotation==90||parseInt(entity.rotation)==90||parseInt(entity.rotation)==89||parseInt(entity.rotation)==450) {
-        dim.attrs.x = parseFloat(x) - fontSize;
-      }
-      if(entity.rotation==270||parseInt(entity.rotation)==270)
-      {
-        dim.attrs.x = parseFloat(x) + fontSize;
-      }
-      if(entity.rotation==180||parseInt(entity.rotation)==180){
-        dim.attrs.y=  -parseFloat(y) - fontSize;
-      }
-      if(entity.rotation==360||parseFloat(entity.rotation)==360){
-        dim.attrs.y=  -parseFloat(y) - fontSize;
-      }
-
-
-      dim.attrs.rotation = 360-entity.rotation ;
-
+    if(entity.rotation==90||parseInt(entity.rotation)==90||parseInt(entity.rotation)==89||parseInt(entity.rotation)==450) {
+      dim.attrs.x = parseFloat(x) - fontSize;
+    }
+    if(entity.rotation==270||parseInt(entity.rotation)==270)
+    {
+      dim.attrs.x = parseFloat(x) + fontSize;
+    }
+    if(entity.rotation==180||parseInt(entity.rotation)==180){
+      dim.attrs.y=  -parseFloat(y) - fontSize;
+    }
+    if(entity.rotation==360||parseFloat(entity.rotation)==360){
+      dim.attrs.y=  -parseFloat(y) - fontSize;
+    }
+    dim.attrs.rotation = 360-entity.rotation ;
   }else{
     dim.attrs.y=  -parseFloat(y) - fontSize;
   }
   if (entity.xScale) {
     dim.attrs.fontSize =(fontSize+0.35)* entity.xScale;
   }
+
+  let width=dim.getTextWidth()
+  //let clientRect=dim.getClientRect()
+  //let clientWidth=clientRect.width;
+
+  if(entity.halign){
+    if(entity.halign==1){
+      dim.attrs.x= dim.attrs.x-(width*1.15/2);
+
+    }
+  }
+  //dim.attrs.x= dim.attrs.x-parseFloat(2);
   group.push({
     "type":'text',
     'obj':dim,
   })
   // group.add(dim);
 }
+
+function drawHatch(recordDxf,entity,group,key,configParams){
+
+  console.log("hatch");
+}
+
 function drawLwLine(recordDxf, entity, group, key, configParams) {
   let closed = entity.shape;
   let list=[];
@@ -385,23 +405,23 @@ function drawLwLine(recordDxf, entity, group, key, configParams) {
     list.push(-parseFloat(entity.vertices[i].y));
   }
   let width = 0.2;
-    if(entity.width){
-      width=width+parseFloat(entity.width);
-    }else{
-      width=0.2;
-    }
-    group.push({
-      type:"polyline",
-      points:list,
-      closed:closed,
-      name: key.replace(/\s*/g, ""),
-      entityId: key,
-      stroke: configParams ? configParams.color : "#000",
-      customColor: configParams ? configParams.color : "#000",
-      strokeWidth: width,
-      visible: configParams ? configParams.visible : true,
-      oldstrokeLength:width,
-    })
+  if(entity.width){
+    width=width+parseFloat(entity.width);
+  }else{
+    width=0.2;
+  }
+  group.push({
+    type:"polyline",
+    points:list,
+    closed:closed,
+    name: key.replace(/\s*/g, ""),
+    entityId: key,
+    stroke: configParams ? configParams.color : "#000",
+    customColor: configParams ? configParams.color : "",
+    strokeWidth: width,
+    visible: configParams ? configParams.visible : true,
+    oldstrokeLength:width,
+  })
   // let line = new Konva.Line({
   //   name: key.replace(/\s*/g, ""),
   //   entityId: key,
@@ -420,10 +440,10 @@ function drawLwLine(recordDxf, entity, group, key, configParams) {
 }
 function drawSpline(recordDxf, entity, group, key, configParams) {
   let points = getBSplinePolyline(
-    entity.controlPoints,
-    entity.degreeOfSplineCurve,
-    entity.knotValues,
-    100
+      entity.controlPoints,
+      entity.degreeOfSplineCurve,
+      entity.knotValues,
+      100
   );
   let list = [];
   for (let i = 0; i < points.length; i++) {
@@ -438,7 +458,7 @@ function drawSpline(recordDxf, entity, group, key, configParams) {
     entityId: key,
     isGroup: false,
     stroke: configParams ? configParams : "#000",
-    customColor: configParams ? configParams.color : "#000",
+    customColor: configParams ? configParams.color : "",
     strokeWidth: width,
     visible: configParams ? configParams.visible : true,
     oldstrokeLength: width
@@ -487,13 +507,13 @@ function drawInsert(recordDxf, entities, group, key, configParams, konvaLayer) {
       group2.attrs.y = -parseFloat(entity.position.y);
     }
     if(entity.position.x<0){
-     group2.attrs.x = parseFloat(entity.position.x)*-1;
-     if(entity.xScale<0){
-       group2.scale({ x: Math.abs(entity.xScale), y: entity.yScale });
-     }
+      group2.attrs.x = parseFloat(entity.position.x)*-1;
+      if(entity.xScale<0){
+        group2.scale({ x: Math.abs(entity.xScale), y: entity.yScale });
+      }
     }
     if(block.entities==undefined){
-        return ;
+      return ;
     }
     for (let j = 0; j < block.entities.length; j++) {
       let type = block.entities[j].type;
@@ -505,3 +525,262 @@ function drawInsert(recordDxf, entities, group, key, configParams, konvaLayer) {
     konvaLayer.add(group)
   }
 }
+
+let color= [
+  '0,0,0',//1
+  '255,0,0',//2
+  '255,255,0',//3
+  '0,255,0',//4
+  '0,255,255',//5
+  '0,0,255',//6
+  '255,0,255',//7
+  '255,255,255',//8
+  '128,128,128',//9
+  '192,192,192',//10
+  '255,0,0',//11
+  '255,120,112',//12
+  '192,0,0',//13
+  '207,103,96',//14
+  '144,0,0',//15
+  '144,72,79',//16
+  '127,0,0',//17
+  '112,56,48',//18
+  '79,0,0',//19
+  '79,39,32',//20
+  '255,56,0',//21
+  '255,159,127',//22
+  '192,48,0',//23
+  '207,127,96',//24
+  '144,32,0',//25
+  '144,88,64',// 26
+  '112,24,0',//27
+  '127,72,63',//28
+  '79,16,0',//29
+  '64,40,31',//30
+  '255,127,0',//31
+  '255,191,127',//32
+  '207,103,0',//33
+  '192,151,96',//34
+  '159,72,0',//35
+  '144,112,79',//36
+  '127,63,0',//37
+  '127,95,63',//38
+  '64,32,0',//39
+  '64,55,31',//40
+  '255,191,0',// 41
+  '255,216,127',//42
+  '207,152,0',//43
+  '192,175,96',//44
+  '144,112,0',//45
+  '144,128,64',//46
+  '112,88,0',//47
+  '127,111,63',//48
+  '64,55,0',//49
+  '64,63,31',//50
+  '255,255,0',//51
+  '255,255,112',//52
+  '207,200,0',//53
+  '192,200,96',//54
+  '144,151,0',//55
+  '144,151,64',//56
+  '144,152,0',//57
+  '127,120,63',//58
+  '79,72,0',//59
+  '79,72,32',//60
+  '191,255,0',//61
+  '208,255,112',//62
+  '144,200,0',//63
+  '176,200,96',//64
+  '111,151,0',//65
+  '128,151,79',//66
+  '95,127,0',//67
+  '111,127,63',//68
+  '48,72,0',//69
+  '63,72,31',//70
+  '127,255,0',//71
+  '191,255,127',//72
+  '95,200,0',//73
+  '159,200,96',//74
+  '64,151,0',//75
+  '111,151,64',//76
+  '63,120,0',//77
+  '95,127,63',//78
+  '31,72,0',//79
+  '48,72,32',//80
+  '63,255,0',//81
+  '159,255,127',//82
+  '47,200,0',//83
+  '127,200,96',//84
+  '31,151,0',//85
+  '80,151,64',//86
+  '31,127,0',//87
+  '79,127,63',//88
+  '15,72,0',//89
+  '47,72,32',//90
+  '0,255,0',//91
+  '127,255,127',//92
+  '0,200,0',//93
+  '95,200,95',//94
+  '0,151,0',//95
+  '79,151,79',//96
+  '0,127,0',//97
+  '63,127,63',//98
+  '0,72,0',//99
+  '32,72,32',//100
+  '0,255,63',//101
+  '127,255,159',//102
+  '0,200,47',//103
+  '95,200,112',//104
+  '0,151,32',//105
+  '64,151,95',//106
+  '0,120,31',//107
+  '63,127,79',//108
+  '0,72,15',//109
+  '32,72,47',//110
+  '0,255,127',//111
+  '127,255,191',//112
+  '0,200,96',//113
+  '95,200,144',//114
+  '0,151,64',//115
+  '79,151,111',//116
+  '0,127,63',//117
+  '63,127,95',//118
+  '0,72,32',//119
+  '31,72,48',//120
+  '0,255,191',//121
+  '127,255,223',//122
+  '0,200,144',//123
+  '95,200,175',//124
+  '0,151,111',//125
+  '79,151,128',//126
+  '0,120,95',//127
+  '63,127,111',//128
+  '0,72,48',//129
+  '32,72,63',//130
+  '0,255,255',//131
+  '127,255,255',//132
+  '0,200,207',//133
+  '96,200,207',//134
+  '0,151,144',//135
+  '64,151,144',//136
+  '0,127,127',//137
+  '63,127,127',//138
+  '0,72,79',//139
+  '32,72,79',//140
+  '0,191,255',//141
+  '127,223,255',//142
+  '0,152,207',//143
+  '96,176,207',//144
+  '0,111,144',//145
+  '64,128,144',//146
+  '0,95,127',//147
+  '63,111,127',//148
+  '0,55,64',//149
+  '31,63,64',//150
+  '0,127,255',//151
+  '112,184,255',//152
+  '0,96,192',//153
+  '96,151,207',//154
+  '0,72,159',//155
+  '79,112,144',//156
+  '0,63,127',//157
+  '63,95,127',//158
+  '0,39,79',//159
+  '32,56,79',//160
+  '0,63,255',//161
+  '127,159,255',//162
+  '0,48,207',//163
+  '96,127,207',//164
+  '0,39,159',//165
+  '64,95,144',//166
+  '0,24,127',//167
+  '63,79,127',//168
+  '0,15,64',//169
+  '32,47,79',//170
+  '0,0,255',//171
+  '127,127,255',//172
+  '0,0,207',//173
+  '95,96,192',//174
+  '0,0,144',//175
+  '79,72,159',//176
+  '0,0,127',//177
+  '63,63,127',//178
+  '0,0,64',//179
+  '32,39,79',//180
+  '63,0,255',//181
+  '159,127,255',//182
+  '47,0,192',//183
+  '127,103,207',//184
+  '32,0,144',//185
+  '80,72,144',//186
+  '31,0,127',//187
+  '79,63,127',//188
+  '15,0,79',//189
+  '47,39,79',//190
+  '127,0,255',//191
+  '191,127,255',//192
+  '96,0,207',//193
+  '144,103,207',//194
+  '79,0,144',//195
+  '111,72,144',//196
+  '63,0,127',//197
+  '95,63,127',//198
+  '31,0,64',//199
+  '48,39,79',//200
+  '191,0,255',//201
+  '223,127,255',//202
+  '144,0,207',//203
+  '175,96,192',//204
+  '111,0,144',//205
+  '128,72,159',//206
+  '95,0,127',//207
+  '96,56,112',//208
+  '48,0,64',//209
+  '64,39,79',//210
+  '255,0,255',//211
+  '255,127,255',//212
+  '192,0,192',//213
+  '192,96,192',//214
+  '144,0,144',//215
+  '144,72,144',//216
+  '127,0,127',//217
+  '127,63,127',//218
+  '79,0,79',//219
+  '64,32,64',//220
+  '255,0,191',//221
+  '255,127,223',//222
+  '192,0,144',//223
+  '192,96,175',//224
+  '144,0,111',//225
+  '144,72,128',//226
+  '127,0,95',//227
+  '127,56,111',//228
+  '64,0,48',//229
+  '79,39,63',//230
+  '255,0,127',//231
+  '255,127,191',//232
+  '192,0,95',//233
+  '192,96,144',//234
+  '159,0,79',//235
+  '144,72,111',//236
+  '127,0,63',//237
+  '127,63,95',//238
+  '64,0,31',//239
+  '64,32,48',//240
+  '255,0,63',//241
+  '255,127,159',//242
+  '207,0,48',//243
+  '207,103,127',//244
+  '144,0,32',//245
+  '144,72,95',//246
+  '127,0,31',//247
+  '127,63,79',//248
+  '79,0,15',//249
+  '64,32,47',//250
+  '47,47,47',//251
+  '80,88,80',//252
+  '128,128,128',//253
+  '175,175,175',//254
+  '208,215,208',//255
+  '255,255,255'//256
+];