svg insert shape string bug

svg insert shape string bug

not support custom areaProps attributes ???

const svg = document.querySelector(`[data-uuid="live_map_svg"]`);

svg.insertAdjacentHTML(`beforeend`, svgPolygon);

svgPolygon = `<polygon stroke="" fill="#DB524F" points="454.99798583984375 586.333984375 534.9979858398438 586.333984375 534.9979858398438 719.6680297851562 454.99798583984375 719.6680297851562" center='{"x":494.99798583984375,"y":653.0010070800781}' areaprops='{"id":10202,"activityEventId":2801,"ticketCategoryId":11201,"desc":"_贵宾区","name":"贵宾区","floor":0,"sort":0,"status":1} uuid="polygon_1583483461614_10045"></polygon>`

// "<polygon stroke="" fill="#DB524F" points="454.99798583984375 586.333984375 534.9979858398438 586.333984375 534.9979858398438 719.6680297851562 454.99798583984375 719.6680297851562" center='{"x":494.99798583984375,"y":653.0010070800781}' areaprops='{"id":10202,"activityEventId":2801,"ticketCategoryId":11201,"desc":"_贵宾区","name":"贵宾区","floor":0,"sort":0,"status":1} uuid="polygon_1583483461614_10045"></polygon>"

svg.insertAdjacentHTML(`beforeend`, svgPolygon);

svgPolygon = `<polygon stroke="" fill="#DB524F" points="454.99798583984375 586.333984375 534.9979858398438 586.333984375 534.9979858398438 719.6680297851562 454.99798583984375 719.6680297851562"  uuid="polygon_1583483461614_10045"></polygon>`
// "<polygon stroke="" fill="#DB524F" points="454.99798583984375 586.333984375 534.9979858398438 586.333984375 534.9979858398438 719.6680297851562 454.99798583984375 719.6680297851562"  uuid="polygon_1583483461614_10045"></polygon>"

svg.insertAdjacentHTML(`beforeend`, svgPolygon);

svgPolygon = `<text x="494.99798583984375" y="653.0010070800781" fill="#000" uuid="area_1583483461614_10045">贵宾区</text>`
// "<text x="494.99798583984375" y="653.0010070800781" fill="#000" uuid="area_1583483461614_10045">贵宾区</text>"

svg.insertAdjacentHTML(`beforeend`, svgPolygon);

---

solution

missing ' single quote bug ️

OK

const computePolygonCenterPoint = (points = []) => {
  // 设置旋转的 origin，为 polygon 的中心，旋转偏移量
  let [top, left, right, bottom] = ["", "", "", ""];
  points.forEach(([x, y], i) => {
    if (i === 0) {
      top = y;
      bottom = y;
      left = x;
      right = x;
    } else {
      top = Math.min(top, y);
      bottom = Math.max(bottom, y);
      left = Math.min(left, x);
      right = Math.max(right, x);
    }
  });
  const point = {
    cx: (left + right) / 2,
    cy: (top + bottom) / 2,
  };
  return point;
}

const polygonGenerator = (feature = {}, uuid = ``, areaUuid, offsetFlag = false) => {
  const {
    properties: {
      labelPoint,
      fill,
      stroke,
      type,
      // text === name / desc,
      id,
      activityEventId,
      ticketCategoryId,
      desc,
      name,
      floor,
      sort,
      status,
    },
    geometry: {
      coordinates,
    },
  } = feature;
  const points = coordinates.flat(3).join(` `);
  const points_arr = coordinates[0];
  let x = 0;
  let y = 0;
  if(!labelPoint) {
    const {
      cx,
      cy,
    } = computePolygonCenterPoint(points_arr);
    x = cx;
    y = cy;
  } else {
    const {
      x: cx,
      y: cy,
    } = labelPoint;
    x = cx;
    y = cy;
  }
  // svg 绑定区域的 text 偏移量优化 ??? offsetFlag ? +number : -number
  const xOffset = 20;
  const yOffset = -10;
  x = x - xOffset;
  y = y - yOffset;
  const center = JSON.stringify({
    x,
    y,
  });
  let result = ``;
  //  true && number !== boolean
  // if (type === "section" && (name.length ? true : false)) {
  if (type === "section" && name.length > 0) {
    const ticketArea = {
      id,
      activityEventId,
      ticketCategoryId,
      desc,
      name,
      floor,
      sort,
      status,
    };
    const areaProps = JSON.stringify(ticketArea);
    // areaprops  areaProps auto convert to lowercase bug
    result = `
      <polygon stroke="${stroke || ''}" fill="${fill || polygonFillColor}" points="${points}" center='${center}' areaprops='${areaProps}' uuid="${uuid}"></polygon>
      <text x="${x || ''}" y="${y || ''}" fill="${textFillColor}" uuid="${areaUuid}">${name}</text>
    `;
  } else {
    result = `
      <polygon stroke="${stroke || ''}" fill="${fill || polygonFillColor}" points="${points}" center='${center}' uuid="${uuid}"></polygon>
    `;
  }
  return result.trim();
}

---