hayun-vite 0.0.0 → 0.0.2

package/src/Form/Tympanogram.js

@@ -0,0 +1,356 @@
+import putRect from "../common/putRect.js";
+import putText from "../common/putText.js";
+const svgNS = "http://www.w3.org/2000/svg";
+
+export default class Tympanogram {
+    constructor({ container } = {}) {
+        this.pressure = { min: -600, max: +400, step: 200 };
+        this.compliance = { min: -0.50, max: 3, step: 0.50 };
+        this.padding = { right: 5, left: 8, top: 7, bottom: 14 };
+        this.container = container;
+    }
+
+    draw({ dims }) {
+        let width = dims.width;
+        let height = dims.height;
+        let x = dims.margin.left;
+        let y = dims.margin.top;
+        // const labels = items.labels;
+
+        const { pressure, compliance, padding } = {
+            pressure: this.pressure,
+            compliance: this.compliance,
+            padding: this.padding,
+
+        };
+        const svg = document.createElementNS(svgNS, "svg");
+        svg.setAttribute("data-name", "R_Tymp");
+        svg.setAttribute("width", width);
+        svg.setAttribute("height", height);
+        svg.setAttribute("x", x);
+        svg.setAttribute("y", y);
+        svg.setAttribute("viewBox", [-padding.left, -padding.top, width, height]);
+       
+
+
+        const pressureAxiosLength = {
+            dapa: pressure.max - pressure.min,
+            mm: width - padding.left - padding.right
+        }
+
+        const complianceAxiosLength = {
+            ml: compliance.max - compliance.min,
+            mm: height - padding.top - padding.bottom
+        }
+
+        this.chartInfo = { pressure, compliance, padding, pressureAxiosLength, complianceAxiosLength };
+
+        // point({ this.container: svg, x: getX(pressure.min), y: getY(compliance.max), color: 'red' });
+        // point({ this.container: svg, x: getX(pressure.max), y: getY(compliance.min), color: 'green' });
+        // point({ this.container: svg, x: getX(pressure.min), y: getY(compliance.min), color: 'brown' });
+        let style;
+        // Pressure Axios (Horizontal)
+        style = `
+          stroke-width: 0.15mm;
+          stroke: black;
+      `;
+        putLine({
+            x1: getX(pressure.min), y1: getY(compliance.min),
+            x2: getX(pressure.max), y2: getY(compliance.min), style: style
+        })
+        // Compliance Axios (Vertical)
+        putLine({
+            x1: getX(pressure.min), y1: getY(compliance.min),
+            x2: getX(pressure.min), y2: getY(compliance.max), style: style
+        })
+        // Pressure Zero Line
+        style = `
+          stroke-width: 0.07mm;
+          stroke: black;
+          stroke-dasharray: 0.4;
+          stroke-opacity: 0.5;
+      `;
+        putLine({
+            x1: getX(0), y1: getY(compliance.min),
+            x2: getX(0), y2: getY(compliance.max), style: style
+        })
+        // Compliance Zero Line
+        putLine({
+            x1: getX(pressure.min), y1: getY(0),
+            x2: getX(pressure.max), y2: getY(0), style: style
+        })
+
+        // Captions:
+        style = `
+        user-select: none;
+        direction: ltr !important;
+        /* text-align: center; */
+        font-family: Arial, Helvetica, sans-serif !important;
+        font-size: 0.8mm;
+        text-anchor: middle; /*تراز افقی*/
+        dominant-baseline: middle; /* تراز عمودی*/       
+      `;
+        putText({
+            container: svg, value: "Compliance (ml)", style: style,
+            x: getX(pressure.min), y: getY(compliance.max), dx: 5, dy: -3
+        });
+        putText({
+            container: svg, value: "Pressure (dapa)", style: style,
+            x: getX(pressure.max), y: getY(compliance.min), dx: -8, dy: 6,
+        });
+        style = `
+            user-select: none;
+            direction: ltr !important;
+            /* text-align: center; */
+            font-family: Arial, Helvetica, sans-serif !important;
+            font-size: 0.8mm;
+            text-anchor: start; /*تراز افقی*/
+            dominant-baseline: middle; /* تراز عمودی*/       
+        `;
+        putText({
+            container: svg, value: "ECV :", style: style,
+            x: getX(pressure.min), y: getY(compliance.min), dy: 10
+        });
+        putText({
+            container: svg, value: "", style: style, name: 'ECV',
+            x: getX(pressure.min), y: getY(compliance.min), dy: 10, dx: 9
+        });
+        putText({
+            container: svg, value: "MEP :", style: style,
+            x: getX(-300), y: getY(compliance.min), dy: 10
+        });
+        putText({
+            container: svg, value: "", style: style, name: 'MEP',
+            x: getX(-300), y: getY(compliance.min), dy: 10, dx: 9
+        });
+        putText({
+            container: svg, value: "SC:", style: style,
+            x: getX(0), y: getY(compliance.min), dy: 10
+        });
+        putText({
+            container: svg, value: "", style: style, name: 'SC',
+            x: getX(0), y: getY(compliance.min), dy: 10, dx: 6
+        });
+        putText({
+            container: svg, value: "G:", style: style,
+            x: getX(300), y: getY(compliance.min), dy: 10
+        });
+        putText({
+            container: svg, value: "", style: style, name: 'G',
+            x: getX(300), y: getY(compliance.min), dy: 10, dx: 4
+        });
+        putText({
+            container: svg, value: "Type", style: style,
+            x: getX(-500), y: getY(2.5),
+        });
+        putText({
+            container: svg, value: "", style: style, name: 'Type',
+            x: getX(-500), y: getY(2.5), dx: 8
+        });
+
+        // Compliance Axios digits
+        style = `
+      user-select: none;
+      direction: ltr !important;
+      /* text-align: center; */
+      font-family: Arial, Helvetica, sans-serif !important;
+      font-size: 0.7mm;
+      text-anchor: end; /*تراز افقی*/
+      dominant-baseline: middle; /* تراز عمودی*/
+      
+      `;
+        x = getX(pressure.min);
+        for (let c = compliance.min + compliance.step; c <= compliance.max; c += compliance.step) {
+            c = Math.round(c * 10) / 10 // برای اون پدیده اعشاری غیرمنتظر
+            putText({
+                container: svg, value: c,
+                x, y: getY(c), dx: -1,
+                style: style,
+            });
+        }
+
+        // Pressure Axios digits
+        style = `
+      user-select: none;
+      direction: ltr !important;
+      /* text-align: center; */
+      font-family: Arial, Helvetica, sans-serif !important;
+      font-size: 0.7mm;
+      text-anchor: middle; /*تراز افقی*/
+      dominant-baseline: hanging; /* تراز عمودی*/
+      `;
+        for (let p = pressure.min; p <= pressure.max; p += pressure.step) {
+            putText({
+                container: svg, value: p,
+                x: getX(p), y: getY(compliance.min), dy: 1,
+                style: style,
+            });
+
+        }
+
+        // console.log(this.container);
+        // مربع احاطه‌کننده کل جدول برای راهنمای توسعه
+        style = 'fill: transparent; stroke: green; stroke-width: 0.5;';
+         // یک بوردر راهنمای توسعه برای اس‌ وی جی به تمام پهنا و ارتفاع رسم می‌کنیم
+         putRect({ container: svg, x: -padding.left, y: -padding.top, width, height, name: dims.name, style })
+        this.chart = svg;
+        this.container.appendChild(svg);
+
+        // بلاک توابع داخلی مورد نیاز تابع اصلی
+        // توابع تبدیل فشار و کامپلیانس به مختصات میلیمتر
+        function getX(p) {
+            return (p - pressure.min) * (pressureAxiosLength.mm / pressureAxiosLength.dapa)
+        }
+
+        function getY(c) {
+            return (compliance.max - c) * (complianceAxiosLength.mm / complianceAxiosLength.ml)
+        }
+
+        // تابع رسم خط
+        function putLine({ x1, y1, x2, y2, style }) {
+
+            let line = document.createElementNS(svgNS, "line");
+            line.setAttribute("x1", x1);
+            line.setAttribute("y1", y1);
+            line.setAttribute("x2", x2);
+            line.setAttribute("y2", y2);
+            line.setAttribute("style", style)
+            // line.setAttribute("stroke", "black");
+            // line.setAttribute("stroke-width", "0.1px");
+            svg.appendChild(line);
+
+        }
+
+        // تابع ایجاد و رسم نقطه نشانگر رنگی
+        function point({ container, x, y, color }) {
+            let circle = document.createElementNS(svgNS, "circle");
+            circle.setAttribute("cx", x);
+            circle.setAttribute("cy", y);
+            circle.setAttribute("r", '0.3mm');
+            circle.setAttribute("stroke", color);
+            container.appendChild(circle);
+        }
+    }
+
+    update(data) {
+
+        // جایگذاری مقادیر تمپانومتری در تکست‌باکس ها
+        this.chart.querySelector(`text[data-name="Type"]`).innerHTML = data?.type || "";
+        // container.getElementById(container.id + "_Type").innerHTML = data?.Type || "";
+        this.chart.querySelector(`text[data-name="ECV"]`).innerHTML = data?.ECV || "";
+        this.chart.querySelector(`text[data-name="MEP"]`).innerHTML = data?.MEP || "";
+        this.chart.querySelector(`text[data-name="SC"]`).innerHTML = data?.SC || "";
+        this.chart.querySelector(`text[data-name="G"]`).innerHTML = data?.G || "";
+        // container.getElementById(container.id + "_SC").innerHTML = data?.SC || "";
+        // document.getElementById(container + "_G").innerHTML = data.G;
+        // پاک کردن منحنی قبلی از کانتینر جاری
+        this.chart.querySelector(`path[data-name="curve"]`)?.remove();
+        // رسم منحنی
+        this.drawCurve(data);
+
+    }
+
+    // توابع داخلی
+    drawCurve(data) {
+        // Ensure to Convert to Numbers //
+        const container = this.chart
+        const { pressure, compliance, pressureAxiosLength, complianceAxiosLength } = this.chartInfo;
+
+        // تمرین پیدا کردن نقاط
+        point({ x: getX(-400), y: getY(5), color: 'green' })
+
+        // مقداردهی دستی برای تست شکل منحنی
+        // data.SC = 0.5;
+        // data.MEP = -75;
+        // با توجه به اندازه اس ‌سی میشه برای مقادیر زیر یک سری رل گذاشت با منحنی قشنگ تر باشد
+        let cp = 50; // جابجایی نقطه کنترل منحنی های راست و چپ روی محور افقی
+        // let k = 0.5; // width and height change [0, 1]
+        let cpp = 5; //جابجایی نقطه کنترل قله ها روی محور افقی
+        // رل‌هایی برای تغییر مقادیر بالا برای زیبایی بیشتر منحنی در نقطه قله
+        // (data.SC <= 0.30)? k=0
+        let k = (+data.SC > 0.30) ? 0.5 : 0.1; // width and height change [0, 1]
+        k = (+data.SC > 1.0) ? 0.2 : k;
+        // k = (data.SC < 1.0) ? 0 : k;
+
+        let pw = 20 * k; // نصف پهنای قله
+        let ph = 0.1 * k; // ارتفاع قله
+
+        let zone = {
+            normal: { min: -300, max: 250 },
+            expanded: { min: -600, max: 400 },
+        }
+        // تعیین کرانه‌های منحنی بر حسب فشار گوش میانی
+        let RV = zone.normal;
+        if (+data.MEP > -250 && +data.MEP < 200) { RV = zone.normal } else { RV = zone.expanded }
+
+
+        const curve2 = {
+            R: {
+                P1: { p: RV.max, c: 0 },
+                P2: { p: +data.MEP + pw, c: +data.SC - ph },
+                C: { p: +data.MEP + cp, c: 0 }
+            },
+            RM: {
+                P2: { p: +data.MEP, c: +data.SC },
+                C: { p: +data.MEP + cpp, c: +data.SC }
+            },
+            LM: {
+                P2: { p: +data.MEP - pw, c: +data.SC - ph },
+                C: { p: +data.MEP - cpp, c: +data.SC }
+            },
+            L: {
+                P1: {},
+                P2: { p: RV.min, c: 0 },
+                C: { p: +data.MEP - cp, c: 0 }
+            }
+        }
+
+        // به دست آوردن مختصات نقاط کنترل بر حسب مختصات پیک
+        curve2.RM.P1 = curve2.R.P2
+        curve2.LM.P1 = curve2.RM.P2
+        curve2.L.P1 = curve2.LM.P2
+        let path = document.createElementNS(svgNS, "path");
+        path.setAttribute("fill", "none");
+        path.setAttribute("data-name", "curve");
+        let color = ("R" == "R") ? "brown" : "blue";
+        path.setAttribute("stroke", color);
+        path.setAttribute("stroke-width", "0.5px");
+        path.setAttribute(
+            "d", `
+            M ${ctg(curve2.R.P1)}
+            Q ${ctg(curve2.R.C)} ${ctg(curve2.R.P2)}
+            M ${ctg(curve2.RM.P1)}
+            Q ${ctg(curve2.RM.C)} ${ctg(curve2.RM.P2)}
+            M ${ctg(curve2.LM.P1)}
+            Q ${ctg(curve2.LM.C)} ${ctg(curve2.LM.P2)}
+            M ${ctg(curve2.L.P1)}
+            Q ${ctg(curve2.L.C)} ${ctg(curve2.L.P2)}
+            `
+        );
+        container.appendChild(path);
+
+
+        // تابع ایجاد و رسم نقطه نشانگر رنگی
+        function point({ x, y, color }) {
+            let circle = document.createElementNS(svgNS, "circle");
+            circle.setAttribute("cx", x);
+            circle.setAttribute("cy", y);
+            circle.setAttribute("r", 0.1);
+            circle.setAttribute("stroke", color);
+            container.appendChild(circle);
+        }
+
+        // تابعی که آبجکت مختصات را میگیرد و تبدیل به یک رشته با ترکیب دو عدد با ویرگول میکند
+        function ctg(pc) {
+            return `${getX(pc.p)} ${getY(pc.c)}`
+        }
+
+        function getX(p) {
+            return (p - pressure.min) * (pressureAxiosLength.mm / pressureAxiosLength.dapa)
+        }
+
+        function getY(c) {
+            return (compliance.max - c) * (complianceAxiosLength.mm / complianceAxiosLength.ml)
+        }
+    }
+}

package/src/Form/formStyles.css

@@ -0,0 +1,122 @@
+@font-face {
+  /* src: url("../fonts/Vazirmatn-Regular.woff2") format("woff2"); */
+  src: url("/fonts/Vazirmatn-Regular.woff2") format("woff2");
+  font-family: vazirmatn;
+}
+
+
+button {
+  background-color: #4CAF50;
+  /* Green background */
+  border: none;
+  /* Remove borders */
+  color: white;
+  /* White text */
+  padding: 15px 32px;
+  /* Some padding */
+  text-align: center;
+  /* Centered text */
+  text-decoration: none;
+  /* Remove underline */
+  display: inline-block;
+  /* Make the button inline */
+  font-size: 16px;
+  /* Increase font size */
+  margin: 4px 2px;
+  /* Add some margin */
+  cursor: pointer;
+  /* Pointer cursor on hover */
+  border-radius: 8px;
+  /* Rounded corners */
+  transition: background-color 0.3s;
+  /* Smooth transition */
+}
+
+button:hover {
+  background-color: #45a049;
+  /* Darker green on hover */
+}
+
+button:active {
+  background-color: #3e8e41;
+  /* Even darker green when clicked */
+}
+
+
+.header1 {
+  user-select: none;
+  /* direction: rtl; */
+  /* text-align: center; */
+  font-family: vazirmatn;
+  font-size: 1.6mm;
+  font-weight: bolder;
+}
+.header2 {
+  user-select: none;
+  direction: rtl;
+  /* text-align: center; */
+  text-anchor: middle;
+  /* font-family: sans-serif, Helvetica, Arial;*/
+  /* font-family: Verdana, Geneva, Tahoma, sans-serif; */
+  font-family: sans-serif !important;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 1.1mm;
+  font-weight: bold;
+}
+.header3 {
+  user-select: none;
+  /* direction: rtl; */
+  /* text-align: center; */
+  font-family: sans-serif !important;
+
+  /* font-family: vazirmatn; */
+  font-size: 1mm;
+  font-weight: bold;
+}
+.header4 {
+  user-select: none;
+  direction: rtl;
+  /* text-align: center; */
+  font-family: vazirmatn;
+  font-size: 1mm;
+  /* font-weight: bold; */
+}
+.tymp1 {
+  user-select: none;
+  direction: ltr !important;
+  /* text-align: center; */
+  font-family: Arial, Helvetica, sans-serif !important;
+  font-size: 1mm;
+  /* font-weight: bold; */
+}
+.tymp2 {
+  user-select: none;
+  direction: ltr !important;
+  /* text-align: center; */
+  font-family: Arial, Helvetica, sans-serif !important;
+  font-size: 0.8mm;
+  /* font-weight: bold; */
+}
+/* .mizoon {
+  display: table;
+  margin-right: auto;
+  margin-left: auto;
+ 
+} */
+
+/* input {
+  display: block;
+  width: 60%;
+  border: 1px solid antiquewhite;
+  padding: 10px 10px;
+  margin: 10px auto 10px auto;
+} */
+.header5 {
+  /* font: 1.5px Verdana, Helvetica, Arial, sans-serif; */
+  user-select: none;
+  direction: rtl;
+  text-align: right;
+  font-family: vazirmatn;
+  font-size: 0.9mm;
+  font-weight: bold;
+}

package/src/Form/globalinfo.js

@@ -0,0 +1,68 @@
+const svgNS = "http://www.w3.org/2000/svg";
+
+// تعریف آبجکت مختصات ایکس - فرکانس در تیبل ادیوگرام
+const xFrequency = {
+  // مقدار کلید برابر با مختصات محلی فرکانس هست
+  20: 250,
+  40: 500,
+  53: 750,
+  60: 1000,
+  73: 1500,
+  80: 2000,
+  93: 3000,
+  100: 4000,
+  113: 6000,
+  120: 8000,
+};
+const freqToXObj = {
+  // آبجکت تبدیل فرکانس به مختصات ایکس جدول ادیوگرام
+  250: 20,
+  500: 40,
+  750: 53,
+  1000: 60,
+  1500: 73,
+  2000: 80,
+  3000: 93,
+  4000: 100,
+  6000: 113,
+  8000: 120,
+};
+// تعریف آبجکت مختصات ایگرگ - شدت در تیبل ادیوگرام
+const yIntensity = {
+  5: -15,
+  10: -10,
+  15: -5,
+  20: 0,
+  25: 5,
+  30: 10,
+  35: 15,
+  40: 20,
+  45: 25,
+  50: 30,
+  55: 35,
+  60: 40,
+  65: 45,
+  70: 50,
+  75: 55,
+  80: 60,
+  85: 65,
+  90: 70,
+  95: 75,
+  100: 80,
+  105: 85,
+  110: 90,
+  115: 95,
+  120: 100,
+  125: 105,
+  130: 110,
+  135: 115,
+  140: 120,
+  145: 125,
+};
+
+export {
+  svgNS,
+  xFrequency,
+  yIntensity,
+  freqToXObj,
+};

package/src/Form/grid/drawGrid.js

@@ -0,0 +1,84 @@
+// import { svgNS } from "../../globalinfo.js";
+const svgNS = "http://www.w3.org/2000/svg";
+
+// پهنا و ارتفاع ظرف را پیدا کن و آنرا شطرنجی کن
+export default function drawGrid(container) {
+  const viewBox = container.getAttribute("viewBox");
+  const w = container.getAttribute("width");
+  const h = container.getAttribute("height");
+  const svg = document.createElementNS(svgNS, "svg");
+  svg.setAttribute("viewBox", viewBox);
+  // svg.setAttribute("width", 210);
+  // svg.setAttribute("height", 297);
+  
+  // مربع احاطه‌کننده کل جدول برای راهنمای توسعه
+  let rect = document.createElementNS(svgNS, "rect");
+  rect.setAttribute("x", 0);
+  rect.setAttribute("y", 0);
+  rect.setAttribute("width", 210);
+  rect.setAttribute("height", 297);
+  rect.setAttribute("style", "fill: transparent; stroke-width: 1;");
+  svg.appendChild(rect);
+
+  let line,
+    x,
+    y = 0;
+  // رسم خطوط افقی با فاصله واحد ویوباکس
+  for (y = 1; y <= 296; y++) {
+    line = document.createElementNS(svgNS, "line");
+    line.setAttribute("x1", 1);
+    line.setAttribute("y1", y);
+    line.setAttribute("x2", 209);
+    line.setAttribute("y2", y);
+    line.setAttribute(
+      "style",
+      "stroke: black; stroke-width: 0.1; stroke-opacity: 0.5; stroke-dasharray: 0.1;"
+    );
+    line.setAttribute("class", "gridLines");
+    svg.appendChild(line);
+  }
+
+  // رسم خطوط عمودی با فاصله واحد ویوباکس
+  for (x = 1; x <= 209; x++) {
+    line = document.createElementNS(svgNS, "line");
+    line.setAttribute("x1", x);
+    line.setAttribute("y1", 1);
+    line.setAttribute("x2", x);
+    line.setAttribute("y2", 296);
+    line.setAttribute(
+      "style",
+      "stroke: black; stroke-width: 0.1; stroke-opacity: 0.5; stroke-dasharray: 0.1;"
+    );
+    line.setAttribute("class", "gridLines");
+
+    svg.appendChild(line);
+  }
+  // رسم خط میانی افقی 
+  line = document.createElementNS(svgNS, "line");
+  line.setAttribute("x1", 1);
+  line.setAttribute("y1", 297/2);
+  line.setAttribute("x2", 209);
+  line.setAttribute("y2", 297/2);
+  line.setAttribute(
+    "style",
+    "stroke: black; stroke-width: 0.2; stroke-opacity: 0.8;"
+  );
+  line.setAttribute("class", "gridLines");
+
+  svg.appendChild(line);
+
+  // رسم خط میانی عمودی
+  line = document.createElementNS(svgNS, "line");
+    line.setAttribute("x1", 105);
+    line.setAttribute("y1", 1);
+    line.setAttribute("x2", 105);
+    line.setAttribute("y2", 296);
+    line.setAttribute(
+      "style",
+      "stroke: black; stroke-width: 0.2; stroke-opacity: 0.8;"
+    );
+    line.setAttribute("class", "gridLines");
+
+    svg.appendChild(line);  
+  container.appendChild(svg);
+}

package/src/Form/grid/hideGrid.js

@@ -0,0 +1,9 @@
+export default function hideGrid() {
+
+  let gridLines = document.getElementsByClassName("gridLines");
+
+  for (const line of gridLines) {
+    line.style = "stroke: transparent; fill: transparent;"
+  }
+
+}