fl-web-component 0.1.0 → 1.0.0

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

@@ -0,0 +1,503 @@
+import bSpline from "./bspline";
+import * as THREE from "three";
+
+export function handleFn(functionName, recordDxf, entity, group, key, configParams, konvaLayer) {
+  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;
+  }
+}
+export function  formatEntity(entities) {
+  var obj = {}
+  for (let i = 0; i < entities.length; i++) {
+    if (obj.hasOwnProperty(entities[i].layer)) {
+      obj[entities[i].layer].push(entities[i])
+    } else {
+      obj[entities[i].layer] = []
+      obj[entities[i].layer].push(entities[i])
+    }
+  }
+  return obj
+}
+export function getAbsolutePoints(points) {
+  let x = 0;
+  let y = 0;
+  points.forEach((point, index) => {
+    if (index % 2 === 0) {
+      x = x + point;
+    } else {
+      y = y + point;
+    }
+  });
+  return {
+    x: Math.ceil(x / (points.length / 2)),
+    y: Math.ceil(y / (points.length / 2)),
+  };
+}
+export function getColors() {
+  return colors;
+}
+// 居中定位
+export function centering(obj, container, konvaStage, scaleBy) {
+  // 由于图纸结构解析的变更 可能最外层的group x y 都是0所以 需要拿到x y有值的group
+  const filterGroup = obj.filter(item => item.attrs.isGroup && !item.attrs.isMix)
+  if (filterGroup.length > 0) {
+    if (filterGroup[0].attrs.hasOwnProperty('isBlock') && filterGroup[0].attrs.isBlock) {
+      computedCenter(filterGroup[0].attrs.x, filterGroup[0].attrs.y, container, konvaStage, scaleBy)
+    } else {
+      const target = obj.filter((item) => !item.attrs.isGroup);
+      if (target[0].className === "Text") {
+        computedCenter(target[0].x(), target[0].y(), container, konvaStage, scaleBy)
+      } else if (target[0].className === "Line") {
+        const p = getAbsolutePoints(target[0].getPoints());
+        computedCenter(p.x, p.y, container, konvaStage, scaleBy)
+      }
+    }
+  } else {
+    const target = obj.filter((item) => !item.attrs.isGroup);
+    if (target[0].className === "Text") {
+      computedCenter(target[0].x(), target[0].y(), container, konvaStage, scaleBy)
+    } else if (target[0].className === "Line") {
+      const p = getAbsolutePoints(target[0].getPoints());
+      computedCenter(p.x, p.y, 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 });
+}
+
+function getBSplinePolyline(
+  controlPoints,
+  degree,
+  knots,
+  interpolationsPerSplineSegment,
+  weights
+) {
+  const polyline = [];
+  const controlPointsForLib = controlPoints.map(function (p) {
+    return [p.x, p.y];
+  });
+  const segmentTs = [knots[degree]];
+  const domain = [knots[degree], knots[knots.length - 1 - degree]];
+  for (let k = degree + 1; k < knots.length - degree; ++k) {
+    if (segmentTs[segmentTs.length - 1] !== knots[k]) {
+      segmentTs.push(knots[k]);
+    }
+  }
+  interpolationsPerSplineSegment = interpolationsPerSplineSegment || 25;
+  for (let i = 1; i < segmentTs.length; ++i) {
+    const uMin = segmentTs[i - 1];
+    const uMax = segmentTs[i];
+    for (let k = 0; k <= interpolationsPerSplineSegment; ++k) {
+      const u = (k / interpolationsPerSplineSegment) * (uMax - uMin) + uMin;
+      let t = (u - domain[0]) / (domain[1] - domain[0]);
+      t = Math.max(t, 0);
+      t = Math.min(t, 1);
+      const p = bSpline(t, degree, controlPointsForLib, knots, weights);
+      polyline.push(new THREE.Vector2(p[0], p[1]));
+    }
+  }
+  return polyline;
+}
+function mtextContentAndFormattingToTextAndStyle(
+  textAndControlChars,
+  entity,
+  configParams
+) {
+  let activeStyle = {
+    horizontalAlignment: "left",
+    textHeight: entity.height,
+  };
+  var text = [];
+  for (let item of textAndControlChars) {
+    if (typeof item === "string") {
+      if (item.startsWith("pxq") && item.endsWith(";")) {
+        if (item.indexOf("c") !== -1)
+          activeStyle.horizontalAlignment = "center";
+        else if (item.indexOf("l") !== -1)
+          activeStyle.horizontalAlignment = "left";
+        else if (item.indexOf("r") !== -1)
+          activeStyle.horizontalAlignment = "right";
+        else if (item.indexOf("j") !== -1)
+          activeStyle.horizontalAlignment = "justify";
+      } else {
+        text.push(item);
+      }
+    } else if (Array.isArray(item)) {
+      var nestedFormat = mtextContentAndFormattingToTextAndStyle(
+        item,
+        entity,
+        configParams
+      );
+      text.push(nestedFormat.text);
+    } else if (typeof item === "object") {
+      if (item["S"] && item["S"].length === 3) {
+        text.push(item["S"][0] + "/" + item["S"][2]);
+      } else {
+        // not yet supported.
+      }
+    }
+  }
+  return {
+    text: text.join(),
+    style: activeStyle,
+  };
+}
+
+function drawArc(recordDxf, entity, group, key, configParams) {
+  let startAngle, endAngle;
+  if (entity.type === "CIRCLE") {
+    startAngle = entity.startAngle || 0;
+    endAngle = startAngle + 2 * Math.PI;
+  } else {
+    startAngle = entity.startAngle;
+    endAngle = entity.endAngle;
+  }
+  let curve = new THREE.ArcCurve(
+    entity.center.x,
+    parseFloat(entity.center.y),
+    entity.radius,
+    startAngle,
+    endAngle
+  );
+  let points = curve.getPoints(32);
+
+  let list = [];
+  for (let i = 0; i < points.length; i++) {
+    list.push(points[i].x);
+    list.push(-parseFloat(points[i].y));
+  }
+  let width = 0.2;
+  group.push({
+    type:'polyline',
+    points:list,
+    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
+  });
+  // if(group.attrs.isBlock){
+  //   let scale=group.scale();
+  //   width=width/Math.abs(scale.x);
+  // }
+  // let line = new Konva.Line({
+  //   name: key.replace(/\s*/g, ""),
+  //   entityId: key,
+  //   isGroup: false,
+  //   points: list,
+  //   stroke: configParams ? configParams.color : "#000",
+  //   customColor: configParams ? configParams.color : "",
+  //   strokeWidth: width,
+  //   lineCap: "round",
+  //   lineJoin: "round",
+  //   visible: configParams ? configParams.visible :true,
+  //   oldstrokeLength:width
+  // });
+  // group.add(line);
+}
+
+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)
+  );
+  let yrad = xrad * parseFloat(entity.axisRatio);
+  let rotation = Math.atan2(
+    parseFloat(entity.majorAxisEndPoint.y),
+    parseFloat(entity.majorAxisEndPoint.x)
+  );
+
+  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
+  );
+  let points = curve.getPoints(200);
+  let list = [];
+  for (let i = 0; i < points.length; i++) {
+    list.push(points[i].x);
+    list.push(-parseFloat(points[i].y));
+  }
+  let width = 0.2;
+  group.push({
+    type:'polyline',
+    points:list,
+    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,
+  //   isGroup: false,
+  //   points: list,
+  //   stroke: configParams ? configParams.color : "#000",
+  //   customColor: configParams ? configParams.color : "",
+  //   strokeWidth: width,
+  //   lineCap: "round",
+  //   lineJoin: "round",
+  //   visible: configParams ? configParams.visible : true,
+  //   oldstrokeLength:width
+
+  // });
+  // group.add(line);
+}
+function drawLine(recordDxf, entity, group, key, configParams) {
+  let x1 = entity.vertices[0].x;
+  let y1 = entity.vertices[0].y;
+  let x2 = entity.vertices[1].x;
+  let y2 = entity.vertices[1].y;
+  let width = 0.2;
+  group.push({
+    type:"line",
+    x1:x1,
+    x2:x2,
+    y1:y1,
+    y2:y2,
+    name: key.replace(/\s*/g, ""),
+    entityId: key,
+    isGroup: false,
+    stroke: configParams ? configParams.color : "#000",
+    customColor: configParams ? configParams.color : "",
+    strokeWidth: width,
+    visible: configParams ? configParams.visible : true,
+    oldstrokeLength:width,
+  });
+  // if(group.attrs.isBlock){
+  //     let scale=group.scale();
+  //     width=width/Math.abs(scale.x);
+  // }
+  // let line = new Konva.Line({
+  //   name: key.replace(/\s*/g, ""),
+  //   entityId: key,
+  //   isGroup: false,
+  //   points: [x1, -parseFloat(y1), parseFloat(x2), -parseFloat(y2)],
+  //   stroke: configParams ? configParams.color : "#000",
+  //   customColor: configParams ? configParams.color : "",
+  //   strokeWidth: width,
+  //   //lineCap: "round",
+  //   //lineJoin: "round",
+  //   visible: configParams ? configParams.visible : true,
+  //   oldstrokeLength:width,
+  //   handle:entity.handle
+
+  // });
+
+  // group.add(line);
+}
+function drawText(recordDxf, entity, group, key, configParams) {
+  let text = entity.text;
+  let fontSize=0;
+  if(key==0){
+    fontSize=entity.textHeight+0.35;
+  }else{
+    fontSize=entity.textHeight+0.35;
+  }
+  let startPoint = entity.startPoint;
+  let x = startPoint.x;
+  let y = startPoint.y;
+  let dim = new Konva.Text({
+    x: parseFloat(x),
+    y: -parseFloat(y),
+    text: text,
+    fontSize: fontSize,
+    fill: configParams ? configParams.color : "#000",
+    customColor: configParams ? configParams.color : "",
+    name: key.replace(/\s*/g, ""),
+    entityId: key,
+    fontFamily: "SimSun",
+    visible: configParams ? configParams.visible : true,
+    stroke: configParams ? configParams.color : "#000",
+    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 ;
+
+  }else{
+    dim.attrs.y=  -parseFloat(y) - fontSize;
+  }
+  if (entity.xScale) {
+    dim.attrs.fontSize =(fontSize+0.35)* entity.xScale;
+  }
+  group.push({
+    "type":'text',
+    'obj':dim,
+  })
+  // group.add(dim);
+}
+function drawLwLine(recordDxf, entity, group, key, configParams) {
+  let closed = entity.shape;
+  let list=[];
+  for(let i =0;i<entity.vertices.length;i++){
+    list.push(entity.vertices[i].x);
+    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 : "",
+      strokeWidth: width,
+      visible: configParams ? configParams.visible : true,
+      oldstrokeLength:width,
+    })
+  // let line = new Konva.Line({
+  //   name: key.replace(/\s*/g, ""),
+  //   entityId: key,
+  //   isGroup: false,
+  //   points: list,
+  //   stroke: configParams ? configParams.color : "#000",
+  //   customColor: configParams ? configParams.color : "",
+  //   strokeWidth: width,
+  //   visible: configParams ? configParams.visible : true,
+  //   closed:closed,
+  //   oldstrokeLength:width,
+  //   handle:entity.handle
+
+  // });
+  // group.add(line);
+}
+function drawSpline(recordDxf, entity, group, key, configParams) {
+  let points = getBSplinePolyline(
+    entity.controlPoints,
+    entity.degreeOfSplineCurve,
+    entity.knotValues,
+    100
+  );
+  let list = [];
+  for (let i = 0; i < points.length; i++) {
+    list.push(points[i].x);
+    list.push(-parseFloat(points[i].y));
+  }
+  let width = 0.1;
+  group.push({
+    type:'polyline',
+    points: list,
+    name: key.replace(/\s*/g, ""),
+    entityId: key,
+    isGroup: false,
+    stroke: configParams ? configParams : "#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,
+  //   isGroup: false,
+  //   points: list,
+  //   stroke: configParams ? configParams : "#000",
+  //   customColor: configParams ? configParams.color : "",
+  //   strokeWidth: width,
+  //   lineCap: "round",
+  //   lineJoin: "round",
+  //   visible: configParams ? configParams.visible : true,
+  //   oldstrokeLength:width
+  // });
+  // group.add(line);
+}
+function drawInsert(recordDxf, entities, group, key, configParams, konvaLayer) {
+  if (recordDxf.blocks[entities.name]) {
+    let group2 = new Konva.Group({
+      x: 0,
+      y: 0,
+      name: key.replace(/\s*/g, ""),
+      isBlock: true,
+      blockName: entities.name,
+      entityId: key,
+      isGroup: true,
+      visible: true,
+    });
+    let entity = entities;
+    let block = recordDxf.blocks[entities.name];
+    if (entity.rotation) {
+      group2.rotation(360-entity.rotation);
+    }
+
+    if (entity.xScale) {
+      group2.scale({ x: entity.xScale, y: entity.yScale });
+    }
+    if (entity.yScale) {
+      group2.scale({ x: entity.xScale, y: entity.yScale });
+    }
+    if (entity.position) {
+      group2.attrs.x = parseFloat(entity.position.x);
+      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 });
+     }
+    }
+    if(block.entities==undefined){
+        return ;
+    }
+    for (let j = 0; j < block.entities.length; j++) {
+      let type = block.entities[j].type;
+      handleFn(type, recordDxf, block.entities[j], group2, key, configParams, konvaLayer)
+    }
+    group.add(group2)
+    // 区分块 因为有的块里面包含块 不区分会对点击定位有影响
+    group.attrs.isMix = true
+    konvaLayer.add(group)
+  }
+}

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

@@ -0,0 +1,24 @@
+// This is based on the example code found from:
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor
+// Example code on MDN is public domain or CC0 (your preference) or MIT depending when the
+// example code was added:
+// https://developer.mozilla.org/en-US/docs/MDN/About
+
+export default (value, exp) => {
+    // If the exp is undefined or zero...
+    if (typeof exp === 'undefined' || +exp === 0) {
+      return Math.round(value)
+    }
+    value = +value
+    exp = +exp
+    // If the value is not a number or the exp is not an integer...
+    if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) {
+      return NaN
+    }
+    // Shift
+    value = value.toString().split('e')
+    value = Math.round(+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)))
+    // Shift back
+    value = value.toString().split('e')
+    return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp))
+  }