hayun-vite 0.0.3 → 0.1.1

package/src/Symbol/createSymbolSVG.js

@@ -1,240 +1,240 @@
-// ساخت اس‌وی‌جی شانزده سمبل
-const svgNS = "http://www.w3.org/2000/svg";
-export default function createSymbolSVG({ side = "R", type = "AC", masked = false, NR = false }) {
-  let r = 12 / 5; //
-  let
-    dot = [],
-    points = [],
-    dx,
-    xNR,
-    yNR,
-    polyline,
-    circle;
-
-  const svg = document.createElementNS(svgNS, "svg");
-  svg.setAttribute("viewBox", "-6 -6 12 12");
-
-  //افزودن اتریبیوت‌های دیتای سمبل
-  svg.setAttribute("data-name", "symbol");
-  svg.setAttribute("data-side", side);
-  svg.setAttribute("data-type", type);
-  svg.setAttribute("data-masked", masked);
-  svg.setAttribute("data-NR", NR);
-
-
-  if (side == "R" && type == "AC" && !masked) {
-    // case "R_AC_NR":
-    dot = [0, 0];
-    //مختصات نقطه اول سمبل عدم پاسخ
-    xNR = r * Math.sin(Math.PI / 4);
-    yNR = xNR;
-    xNR *= -1;
-
-    circle = document.createElementNS(svgNS, "circle");
-    circle.setAttribute("stroke", "red");
-    circle.setAttribute("stroke-width", "0.6px");
-    circle.setAttribute("fill", "transparent");
-    circle.setAttribute("cx", 0);
-    circle.setAttribute("cy", 0);
-    circle.setAttribute("r", r);
-
-    svg.appendChild(circle);
-  }
-
-  if (side == "R" && type == "AC" && masked) {
-    dx = 2 * r * Math.tan(Math.PI / 6);
-
-    points = [0, -r, dx, r, -dx, r, 0, -r];
-
-    polyline = document.createElementNS(svgNS, "polyline");
-    polyline.setAttribute("stroke-width", "0.6px");
-    polyline.setAttribute("stroke-linecap", "round");
-    polyline.setAttribute("stroke-miterlimit", "0");
-    polyline.setAttribute("fill", "transparent");
-    polyline.setAttribute("stroke", "red");
-    polyline.setAttribute("points", points);
-    svg.appendChild(polyline);
-
-    //مختصات نقطه اول سمبل عدم پاسخ
-    xNR = -dx;
-    yNR = r;
-  }
-
-  if (side == "R" && type == "BC" && !masked) {
-    // مقدار جابجایی سمبل از مرکز
-    dx = -r / 1.5;
-
-    //مختصات نقطه اول سمبل عدم پاسخ
-    xNR = dx;
-    yNR = r;
-
-    dot = [0, -r, -r, 0, 0, r];
-    points = [dot[0] + dx, dot[1], dot[2] + dx, dot[3], dot[4] + dx, dot[5]];
-    polyline = document.createElementNS(svgNS, "polyline");
-    polyline.setAttribute("stroke-width", "0.6px");
-    polyline.setAttribute("fill", "transparent");
-    polyline.setAttribute("stroke", "red");
-    polyline.setAttribute("points", points);
-    svg.appendChild(polyline);
-  }
-
-  if (side == "R" && type == "BC" && masked) {
-    // مقدار جابجایی سمبل از مرکز
-    dx = -r / 1.5;
-
-    dot = [0, -r, -r, -r, -r, r, 0, r];
-
-    points = `${dot[0] + dx}, ${dot[1]}, 
-      ${dot[2] + dx}, ${dot[3]}, 
-      ${dot[4] + dx}, ${dot[5]}, 
-      ${dot[6] + dx}, ${dot[7]} 
-      `;
-    polyline = document.createElementNS(svgNS, "polyline");
-    polyline.setAttribute("stroke-width", "0.6px");
-    polyline.setAttribute("fill", "transparent");
-    polyline.setAttribute("stroke", "red");
-    polyline.setAttribute("points", points);
-    svg.appendChild(polyline);
-    //مختصات نقطه اول سمبل عدم پاسخ
-    xNR = -r + dx;
-    yNR = r;
-  }
-
-  if (side == "L" && type == "AC" && !masked) {
-    //مختصات نقطه اول سمبل عدم پاسخ
-    xNR = r;
-    yNR = r;
-
-    // const x1 = (Math.sqrt(2) / 2) * r;
-    // const y1 = -x1;
-    // dot = [x1, y1, -x1, -y1, -x1, y1, x1, -y1];
-
-    points = [-r, -r, r, r];
-
-    polyline = document.createElementNS(svgNS, "polyline");
-    polyline.setAttribute("stroke-width", "0.6px");
-    polyline.setAttribute("fill", "transparent");
-    polyline.setAttribute("stroke", "blue");
-    polyline.setAttribute("points", points);
-    svg.appendChild(polyline);
-
-    points = [r, -r, -r, r];
-    polyline = document.createElementNS(svgNS, "polyline");
-    polyline.setAttribute("stroke-width", "0.6px");
-    polyline.setAttribute("fill", "transparent");
-    polyline.setAttribute("stroke", "blue");
-    polyline.setAttribute("points", points);
-    svg.appendChild(polyline);
-  }
-
-  if (side == "L" && type == "AC" && masked) {
-    dot = [0, 0];
-    //مختصات نقطه اول سمبل عدم پاسخ
-    xNR = r;
-    yNR = r;
-
-    // مختصات چهار نقطه مربع سمبل
-    dot = [-r, -r, r, -r, r, r, -r, r, -r, -r];
-    polyline = document.createElementNS(svgNS, "polyline");
-    polyline.setAttribute("stroke-width", "0.6px");
-    polyline.setAttribute("fill", "transparent");
-    polyline.setAttribute("stroke-linecap", "round");
-    polyline.setAttribute("stroke", "blue");
-    polyline.setAttribute("points", dot);
-    svg.appendChild(polyline);
-  }
-
-  if (side == "L" && type == "BC" && !masked) {
-    // مقدار جابجایی سمبل از مرکز
-    dx = r / 1.5;
-
-    //مختصات نقطه اول سمبل عدم پاسخ
-    xNR = dx;
-    yNR = r;
-
-    dot = [0, -r, r, 0, 0, r];
-    points = [dot[0] + dx, dot[1], dot[2] + dx, dot[3], dot[4] + dx, dot[5]];
-    polyline = document.createElementNS(svgNS, "polyline");
-    polyline.setAttribute("stroke-width", "0.6px");
-    polyline.setAttribute("fill", "transparent");
-    polyline.setAttribute("stroke", "blue");
-    polyline.setAttribute("points", points);
-    svg.appendChild(polyline);
-  }
-
-  if (side == "L" && type == "BC" && masked) {
-    // مقدار جابجایی سمبل از مرکز
-    dx = r / 1.5;
-
-    //مختصات نقطه اول سمبل عدم پاسخ
-    xNR = r + dx;
-    yNR = r;
-
-    dot = [0, -r, r, -r, r, r, 0, r];
-    points = `${dot[0] + dx}, ${dot[1]},
-      ${dot[2] + dx}, ${dot[3]},
-      ${dot[4] + dx}, ${dot[5]},
-      ${dot[6] + dx}, ${dot[7]}
-    `;
-    polyline = document.createElementNS(svgNS, "polyline");
-    polyline.setAttribute("stroke-width", "0.6px");
-    polyline.setAttribute("fill", "transparent");
-    polyline.setAttribute("stroke", "blue");
-    polyline.setAttribute("points", points);
-    svg.appendChild(polyline);
-  }
-
-
-  //رسم قسمت NR
-  if (NR) {
-    svg.appendChild(createNRSVG(side, xNR, yNR));
-    // تابع ایجاد تصویر عدم پاسخ
-    function createNRSVG(side, x, y) {
-      let symColor = side === "R" ? "red" : "blue";
-      let angle = side === "R" ? "135" : "45";
-      const a = r / 2;
-      const x1 = a * Math.cos(Math.PI / 6);
-      const y1 = a * Math.sin(Math.PI / 6);
-      // مختصات سه نقطه فلش
-      //A, B, C
-      let points = [-x1 + r + x, -y1 + y, r + x, y, -x1 + x + r, y1 + y];
-      const g = document.createElementNS(svgNS, "g");
-      let polyline = document.createElementNS(svgNS, "polyline");
-      polyline.setAttribute("stroke-width", "0.4px");
-      polyline.setAttribute("fill", "transparent");
-      polyline.setAttribute("stroke", symColor);
-      polyline.setAttribute("points", points);
-      g.appendChild(polyline);
-      // مختصات خط فلش
-      points = [x, y, x + r, y];
-      polyline = document.createElementNS(svgNS, "polyline");
-      polyline.setAttribute("stroke-width", "0.4px");
-      polyline.setAttribute("fill", "transparent");
-      polyline.setAttribute("stroke", symColor);
-      polyline.setAttribute("points", points);
-      g.setAttribute("transform", `rotate(${angle} ${x} ${y})`);
-      g.appendChild(polyline);
-      return g;
-    }
-  }
-  // این رویی ترین اس‌وی‌جی برای اینکه تارگت کلیک روی محدوده سمبل رو بتونیم پیدا کنیم
-  // یک بوردر برای اس‌ وی جی به تمام پهنا و ارتفاع رسم می‌کنیم
-  const rect = document.createElementNS(svgNS, "rect");
-  rect.setAttribute("x", -6);
-  rect.setAttribute("y", -6);
-  rect.setAttribute("width", 12);
-  rect.setAttribute("height", 12);
-  rect.setAttribute("fill", "transparent");
-  //
-  //
-  //
-  // با حذف پایینی برای یافتن سمبل ها در دام به مشکل خواهیم خورد و باید راه حل جدید براش ایجاد کنیم
-  let symbolName = side + "_" + type;
-  if (masked) symbolName += "_M";
-  if (NR) symbolName += "_NR";
-  rect.setAttribute("data-name", symbolName);
-  // rect.setAttribute("stroke-width", "0.5px");
-  // rect.setAttribute("stroke", "green");
-  svg.appendChild(rect);
-  return svg;
-}
+// ساخت اس‌وی‌جی شانزده سمبل
+const svgNS = "http://www.w3.org/2000/svg";
+export default function createSymbolSVG({ side = "R", type = "AC", masked = false, NR = false }) {
+  let r = 12 / 5; //
+  let
+    dot = [],
+    points = [],
+    dx,
+    xNR,
+    yNR,
+    polyline,
+    circle;
+
+  const svg = document.createElementNS(svgNS, "svg");
+  svg.setAttribute("viewBox", "-6 -6 12 12");
+
+  //افزودن اتریبیوت‌های دیتای سمبل
+  svg.setAttribute("data-name", "symbol");
+  svg.setAttribute("data-side", side);
+  svg.setAttribute("data-type", type);
+  svg.setAttribute("data-masked", masked);
+  svg.setAttribute("data-NR", NR);
+
+
+  if (side == "R" && type == "AC" && !masked) {
+    // case "R_AC_NR":
+    dot = [0, 0];
+    //مختصات نقطه اول سمبل عدم پاسخ
+    xNR = r * Math.sin(Math.PI / 4);
+    yNR = xNR;
+    xNR *= -1;
+
+    circle = document.createElementNS(svgNS, "circle");
+    circle.setAttribute("stroke", "red");
+    circle.setAttribute("stroke-width", "0.6px");
+    circle.setAttribute("fill", "transparent");
+    circle.setAttribute("cx", 0);
+    circle.setAttribute("cy", 0);
+    circle.setAttribute("r", r);
+
+    svg.appendChild(circle);
+  }
+
+  if (side == "R" && type == "AC" && masked) {
+    dx = 2 * r * Math.tan(Math.PI / 6);
+
+    points = [0, -r, dx, r, -dx, r, 0, -r];
+
+    polyline = document.createElementNS(svgNS, "polyline");
+    polyline.setAttribute("stroke-width", "0.6px");
+    polyline.setAttribute("stroke-linecap", "round");
+    polyline.setAttribute("stroke-miterlimit", "0");
+    polyline.setAttribute("fill", "transparent");
+    polyline.setAttribute("stroke", "red");
+    polyline.setAttribute("points", points);
+    svg.appendChild(polyline);
+
+    //مختصات نقطه اول سمبل عدم پاسخ
+    xNR = -dx;
+    yNR = r;
+  }
+
+  if (side == "R" && type == "BC" && !masked) {
+    // مقدار جابجایی سمبل از مرکز
+    dx = -r / 1.5;
+
+    //مختصات نقطه اول سمبل عدم پاسخ
+    xNR = dx;
+    yNR = r;
+
+    dot = [0, -r, -r, 0, 0, r];
+    points = [dot[0] + dx, dot[1], dot[2] + dx, dot[3], dot[4] + dx, dot[5]];
+    polyline = document.createElementNS(svgNS, "polyline");
+    polyline.setAttribute("stroke-width", "0.6px");
+    polyline.setAttribute("fill", "transparent");
+    polyline.setAttribute("stroke", "red");
+    polyline.setAttribute("points", points);
+    svg.appendChild(polyline);
+  }
+
+  if (side == "R" && type == "BC" && masked) {
+    // مقدار جابجایی سمبل از مرکز
+    dx = -r / 1.5;
+
+    dot = [0, -r, -r, -r, -r, r, 0, r];
+
+    points = `${dot[0] + dx}, ${dot[1]}, 
+      ${dot[2] + dx}, ${dot[3]}, 
+      ${dot[4] + dx}, ${dot[5]}, 
+      ${dot[6] + dx}, ${dot[7]} 
+      `;
+    polyline = document.createElementNS(svgNS, "polyline");
+    polyline.setAttribute("stroke-width", "0.6px");
+    polyline.setAttribute("fill", "transparent");
+    polyline.setAttribute("stroke", "red");
+    polyline.setAttribute("points", points);
+    svg.appendChild(polyline);
+    //مختصات نقطه اول سمبل عدم پاسخ
+    xNR = -r + dx;
+    yNR = r;
+  }
+
+  if (side == "L" && type == "AC" && !masked) {
+    //مختصات نقطه اول سمبل عدم پاسخ
+    xNR = r;
+    yNR = r;
+
+    // const x1 = (Math.sqrt(2) / 2) * r;
+    // const y1 = -x1;
+    // dot = [x1, y1, -x1, -y1, -x1, y1, x1, -y1];
+
+    points = [-r, -r, r, r];
+
+    polyline = document.createElementNS(svgNS, "polyline");
+    polyline.setAttribute("stroke-width", "0.6px");
+    polyline.setAttribute("fill", "transparent");
+    polyline.setAttribute("stroke", "blue");
+    polyline.setAttribute("points", points);
+    svg.appendChild(polyline);
+
+    points = [r, -r, -r, r];
+    polyline = document.createElementNS(svgNS, "polyline");
+    polyline.setAttribute("stroke-width", "0.6px");
+    polyline.setAttribute("fill", "transparent");
+    polyline.setAttribute("stroke", "blue");
+    polyline.setAttribute("points", points);
+    svg.appendChild(polyline);
+  }
+
+  if (side == "L" && type == "AC" && masked) {
+    dot = [0, 0];
+    //مختصات نقطه اول سمبل عدم پاسخ
+    xNR = r;
+    yNR = r;
+
+    // مختصات چهار نقطه مربع سمبل
+    dot = [-r, -r, r, -r, r, r, -r, r, -r, -r];
+    polyline = document.createElementNS(svgNS, "polyline");
+    polyline.setAttribute("stroke-width", "0.6px");
+    polyline.setAttribute("fill", "transparent");
+    polyline.setAttribute("stroke-linecap", "round");
+    polyline.setAttribute("stroke", "blue");
+    polyline.setAttribute("points", dot);
+    svg.appendChild(polyline);
+  }
+
+  if (side == "L" && type == "BC" && !masked) {
+    // مقدار جابجایی سمبل از مرکز
+    dx = r / 1.5;
+
+    //مختصات نقطه اول سمبل عدم پاسخ
+    xNR = dx;
+    yNR = r;
+
+    dot = [0, -r, r, 0, 0, r];
+    points = [dot[0] + dx, dot[1], dot[2] + dx, dot[3], dot[4] + dx, dot[5]];
+    polyline = document.createElementNS(svgNS, "polyline");
+    polyline.setAttribute("stroke-width", "0.6px");
+    polyline.setAttribute("fill", "transparent");
+    polyline.setAttribute("stroke", "blue");
+    polyline.setAttribute("points", points);
+    svg.appendChild(polyline);
+  }
+
+  if (side == "L" && type == "BC" && masked) {
+    // مقدار جابجایی سمبل از مرکز
+    dx = r / 1.5;
+
+    //مختصات نقطه اول سمبل عدم پاسخ
+    xNR = r + dx;
+    yNR = r;
+
+    dot = [0, -r, r, -r, r, r, 0, r];
+    points = `${dot[0] + dx}, ${dot[1]},
+      ${dot[2] + dx}, ${dot[3]},
+      ${dot[4] + dx}, ${dot[5]},
+      ${dot[6] + dx}, ${dot[7]}
+    `;
+    polyline = document.createElementNS(svgNS, "polyline");
+    polyline.setAttribute("stroke-width", "0.6px");
+    polyline.setAttribute("fill", "transparent");
+    polyline.setAttribute("stroke", "blue");
+    polyline.setAttribute("points", points);
+    svg.appendChild(polyline);
+  }
+
+
+  //رسم قسمت NR
+  if (NR) {
+    svg.appendChild(createNRSVG(side, xNR, yNR));
+    // تابع ایجاد تصویر عدم پاسخ
+    function createNRSVG(side, x, y) {
+      let symColor = side === "R" ? "red" : "blue";
+      let angle = side === "R" ? "135" : "45";
+      const a = r / 2;
+      const x1 = a * Math.cos(Math.PI / 6);
+      const y1 = a * Math.sin(Math.PI / 6);
+      // مختصات سه نقطه فلش
+      //A, B, C
+      let points = [-x1 + r + x, -y1 + y, r + x, y, -x1 + x + r, y1 + y];
+      const g = document.createElementNS(svgNS, "g");
+      let polyline = document.createElementNS(svgNS, "polyline");
+      polyline.setAttribute("stroke-width", "0.4px");
+      polyline.setAttribute("fill", "transparent");
+      polyline.setAttribute("stroke", symColor);
+      polyline.setAttribute("points", points);
+      g.appendChild(polyline);
+      // مختصات خط فلش
+      points = [x, y, x + r, y];
+      polyline = document.createElementNS(svgNS, "polyline");
+      polyline.setAttribute("stroke-width", "0.4px");
+      polyline.setAttribute("fill", "transparent");
+      polyline.setAttribute("stroke", symColor);
+      polyline.setAttribute("points", points);
+      g.setAttribute("transform", `rotate(${angle} ${x} ${y})`);
+      g.appendChild(polyline);
+      return g;
+    }
+  }
+  // این رویی ترین اس‌وی‌جی برای اینکه تارگت کلیک روی محدوده سمبل رو بتونیم پیدا کنیم
+  // یک بوردر برای اس‌ وی جی به تمام پهنا و ارتفاع رسم می‌کنیم
+  const rect = document.createElementNS(svgNS, "rect");
+  rect.setAttribute("x", -6);
+  rect.setAttribute("y", -6);
+  rect.setAttribute("width", 12);
+  rect.setAttribute("height", 12);
+  rect.setAttribute("fill", "transparent");
+  //
+  //
+  //
+  // با حذف پایینی برای یافتن سمبل ها در دام به مشکل خواهیم خورد و باید راه حل جدید براش ایجاد کنیم
+  let symbolName = side + "_" + type;
+  if (masked) symbolName += "_M";
+  if (NR) symbolName += "_NR";
+  rect.setAttribute("data-name", symbolName);
+  // rect.setAttribute("stroke-width", "0.5px");
+  // rect.setAttribute("stroke", "green");
+  svg.appendChild(rect);
+  return svg;
+}

package/src/Symbol/getAllSymbolsSVG.js

@@ -1,22 +1,22 @@
-import createSymbolSVG from "./createSymbolSVG.js"
-export default function getAllSymbolsSVG() {
-    return {
-        R_AC: createSymbolSVG({ side: "R", type: "AC" }),
-        R_AC_NR: createSymbolSVG({ side: "R", type: "AC", NR: true }),
-        R_AC_M: createSymbolSVG({ side: "R", type: "AC", masked: true }),
-        R_AC_M_NR: createSymbolSVG({ side: "R", type: "AC", masked: true, NR: true }),
-        R_BC: createSymbolSVG({ side: "R", type: "BC" }),
-        R_BC_NR: createSymbolSVG({ side: "R", type: "BC", NR: true }),
-        R_BC_M: createSymbolSVG({ side: "R", type: "BC", masked: true }),
-        R_BC_M_NR: createSymbolSVG({ side: "R", type: "BC", masked: true, NR: true }),
-        L_AC: createSymbolSVG({ side: "L", type: "AC" }),
-        L_AC_NR: createSymbolSVG({ side: "L", type: "AC", NR: true }),
-        L_AC_M: createSymbolSVG({ side: "L", type: "AC", masked: true }),
-        L_AC_M_NR: createSymbolSVG({ side: "L", type: "AC", masked: true, NR: true }),
-        L_BC: createSymbolSVG({ side: "L", type: "BC" }),
-        L_BC_NR: createSymbolSVG({ side: "L", type: "BC", NR: true }),
-        L_BC_M: createSymbolSVG({ side: "L", type: "BC", masked: true }),
-        L_BC_M_NR: createSymbolSVG({ side: "L", type: "BC", masked: true, NR: true }),
-
-    }
+import createSymbolSVG from "./createSymbolSVG.js"
+export default function getAllSymbolsSVG() {
+    return {
+        R_AC: createSymbolSVG({ side: "R", type: "AC" }),
+        R_AC_NR: createSymbolSVG({ side: "R", type: "AC", NR: true }),
+        R_AC_M: createSymbolSVG({ side: "R", type: "AC", masked: true }),
+        R_AC_M_NR: createSymbolSVG({ side: "R", type: "AC", masked: true, NR: true }),
+        R_BC: createSymbolSVG({ side: "R", type: "BC" }),
+        R_BC_NR: createSymbolSVG({ side: "R", type: "BC", NR: true }),
+        R_BC_M: createSymbolSVG({ side: "R", type: "BC", masked: true }),
+        R_BC_M_NR: createSymbolSVG({ side: "R", type: "BC", masked: true, NR: true }),
+        L_AC: createSymbolSVG({ side: "L", type: "AC" }),
+        L_AC_NR: createSymbolSVG({ side: "L", type: "AC", NR: true }),
+        L_AC_M: createSymbolSVG({ side: "L", type: "AC", masked: true }),
+        L_AC_M_NR: createSymbolSVG({ side: "L", type: "AC", masked: true, NR: true }),
+        L_BC: createSymbolSVG({ side: "L", type: "BC" }),
+        L_BC_NR: createSymbolSVG({ side: "L", type: "BC", NR: true }),
+        L_BC_M: createSymbolSVG({ side: "L", type: "BC", masked: true }),
+        L_BC_M_NR: createSymbolSVG({ side: "L", type: "BC", masked: true, NR: true }),
+
+    }
 }

package/src/Symbol/insertSymbol.js

@@ -1,10 +1,10 @@
-// تابع قرار دادن سمبل انتخاب شده در نقطه مورد نظر
-export default function insertSymbol({ container, symbolNode, x, y, w, h, freq, intens }) {
-  symbolNode.setAttribute("x", x - w / 2);
-  symbolNode.setAttribute("y", y - h / 2);
-  symbolNode.setAttribute("width", w);
-  symbolNode.setAttribute("height", h);
-  symbolNode.setAttribute("data-freq", freq);
-  symbolNode.setAttribute("data-intens", intens);
-  container.appendChild(symbolNode);
-}
+// تابع قرار دادن سمبل انتخاب شده در نقطه مورد نظر
+export default function insertSymbol({ container, symbolNode, x, y, w, h, freq, intens }) {
+  symbolNode.setAttribute("x", x - w / 2);
+  symbolNode.setAttribute("y", y - h / 2);
+  symbolNode.setAttribute("width", w);
+  symbolNode.setAttribute("height", h);
+  symbolNode.setAttribute("data-freq", freq);
+  symbolNode.setAttribute("data-intens", intens);
+  container.appendChild(symbolNode);
+}

package/src/Symbol/symbolChart.js

@@ -1,47 +1,47 @@
-// وارد کردن داده‌های سراسری
-// import { r, svgNS } from "../../globalinfo.js";
-import insertSymbol from "./insertSymbol.js";
-// رسم پنل سمبل ها
-const svgNS = "http://www.w3.org/2000/svg";
-
-export default function symbolChart({ container, side = "R", x, y, symbols }) {
-
-    const w = 240;
-    const h = 60;
-    const svg = document.createElementNS(svgNS, "svg");
-    // svg.setAttribute("id", id);
-    svg.setAttribute("width", w);
-    svg.setAttribute("height", h);
-    svg.setAttribute("viewBox", "-6 -6 48 12");
-    svg.setAttribute("style", "border: 1px solid blue; user-select: none;");
-
-    let dx = 12
-    x = 0;
-    y = 0;
-   
-    const symbolNames = {
-        R: ["R_AC", "R_BC", "R_AC_M", "R_BC_M"],
-        L: ["L_AC", "L_BC", "L_AC_M", "L_BC_M"]
-    };
-    const metadata = side + "SymbolChart";
-    // اجرای تابع رسم سمبل در چارت در یک حلقه تکرار
-    for (let i = 0; i < 4; i++) {
-        const id = `${symbolNames[side][i]}-SymbolChart`;
-
-        insertSymbol({ container: svg, symbolNode: symbols[symbolNames[side][i]], x: x, y: y, w: 12, h: 12 })
-        // insertSymbol({
-        //     container: svg, metadata: metadata,
-        //     dataID: id, id: id, class: symbolNames[side][i], symbol: symbolNames[side][i],
-        //     x: x, y: y, w: 12, h: 12
-        // });
-        x += dx;
-    }
-
-    container.appendChild(svg);
-
-    return svg;
-}
-
-
-
-
+// وارد کردن داده‌های سراسری
+// import { r, svgNS } from "../../globalinfo.js";
+import insertSymbol from "./insertSymbol.js";
+// رسم پنل سمبل ها
+const svgNS = "http://www.w3.org/2000/svg";
+
+export default function symbolChart({ container, side = "R", x, y, symbols }) {
+
+    const w = 240;
+    const h = 60;
+    const svg = document.createElementNS(svgNS, "svg");
+    // svg.setAttribute("id", id);
+    svg.setAttribute("width", w);
+    svg.setAttribute("height", h);
+    svg.setAttribute("viewBox", "-6 -6 48 12");
+    svg.setAttribute("style", "border: 1px solid blue; user-select: none;");
+
+    let dx = 12
+    x = 0;
+    y = 0;
+   
+    const symbolNames = {
+        R: ["R_AC", "R_BC", "R_AC_M", "R_BC_M"],
+        L: ["L_AC", "L_BC", "L_AC_M", "L_BC_M"]
+    };
+    const metadata = side + "SymbolChart";
+    // اجرای تابع رسم سمبل در چارت در یک حلقه تکرار
+    for (let i = 0; i < 4; i++) {
+        const id = `${symbolNames[side][i]}-SymbolChart`;
+
+        insertSymbol({ container: svg, symbolNode: symbols[symbolNames[side][i]], x: x, y: y, w: 12, h: 12 })
+        // insertSymbol({
+        //     container: svg, metadata: metadata,
+        //     dataID: id, id: id, class: symbolNames[side][i], symbol: symbolNames[side][i],
+        //     x: x, y: y, w: 12, h: 12
+        // });
+        x += dx;
+    }
+
+    container.appendChild(svg);
+
+    return svg;
+}
+
+
+
+