hayun-vite 0.11.2 → 0.13.0

package/src/Tympanogram/Tympanogram.js

@@ -6,150 +6,166 @@ const svgNS = "http://www.w3.org/2000/svg";
 
 export default class Tympanogram {
     constructor({ container, side, dims }) {
-        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;
         this.side = side
-        this.draw({dims})
+        this.dims = dims
+        this.draw({ dims })
     }
 
-    draw({ dims }) {
+    draw({ dims, extraCompliance = false }) {
         let width = dims.width;
         let height = dims.height;
         let x = dims.margin.left;
         let y = dims.margin.top;
         let style;
 
-        const { pressure, compliance, padding } = {
-            pressure: this.pressure,
-            compliance: this.compliance,
-            padding: this.padding,
-        }
+        const { pressure, padding, styles } = units
+
+        const compliance = extraCompliance ? units.compliance.extra : units.compliance.normal
 
-        let { styles, vbWidth, vbHeight } = units;
+
+        let { vbWidth, vbHeight } = units;
 
         // کل چارت
+        style = styles.svg
         vbHeight = (vbWidth * height) / width // متناسب سازی ارتفاع ویباکس با پهنا و ارتفاع ورودی
-        const viewBox = [-padding.left, -padding.top, vbWidth, vbHeight].join(' ');
-        const svg = putSVG({ x, y, width, height, viewBox })
+        const viewBox = [-padding.left, -padding.top, vbWidth, vbHeight].join(' ')
+        const svg = putSVG({ x, y, width, height, viewBox, style })
         // این خط شد دو خط کد طلایی که مشکل سایز فونت در دیسپلی و کاغذ رو حل کرد
         width = vbWidth; // ثابت می‌ماند همیشه
         height = vbHeight // با نسبت پهنا و ارتفاع ورودی تغییر میکند 
 
         const pressureAxiosLength = {
             dapa: pressure.max - pressure.min,
-            mm: width - padding.left - padding.right
+            mm: width - (padding.left + padding.right)
         }
 
         const complianceAxiosLength = {
             ml: compliance.max - compliance.min,
-            mm: height - padding.top - padding.bottom
+            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' });
-        // 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 = styles.caption;
-
-        putText({
-            container: svg, value: "Compliance (ml)", 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 = styles.label;
-        let color = (this.side === 'R') ? 'red' : 'blue';
-
-        putText({
-            container: svg, value: "ECV:", style: style,
-            x: getX(pressure.min), y: getY(compliance.min), dy: 10
-        });
-
-        putText({
-            container: svg, value: "", style: style + 'fill: ' + color, name: 'ECV',
-            x: getX(pressure.min), y: getY(compliance.min), dy: 10, dx: 11
-        });
-
-        putText({
-            container: svg, value: "MEP:", style: style,
-            x: getX(-300), y: getY(compliance.min), dy: 10
-        });
-
-        putText({
-            container: svg, value: "", style: style + 'fill: ' + color, name: 'MEP',
-            x: getX(-300), y: getY(compliance.min), dy: 10, dx: 11
-        });
-
-        putText({
-            container: svg, value: "SC:", style: style,
-            x: getX(0), y: getY(compliance.min), dy: 10
-        });
-
-        putText({
-            container: svg, value: "", style: style + 'fill: ' + color, name: 'SC',
-            x: getX(0), y: getY(compliance.min), dy: 10, dx: 8
-        });
-
-        putText({
-            container: svg, value: "G:", style: style,
-            x: getX(280), y: getY(compliance.min), dy: 10
-        });
-
-        putText({
-            container: svg, value: "", style: style + 'fill: ' + color, name: 'G',
-            x: getX(300), y: getY(compliance.min), dy: 10, dx: 4
-        });
-
-        style = styles.type;
-        putText({
-            container: svg, value: "Type", style: style + 'fill: ' + color,
-            x: getX(-500), y: getY(2.5),
-        });
-
-        putText({
-            container: svg, value: "", style: style + 'fill: ' + color, name: 'Type',
-            x: getX(-500), y: getY(2.5), dx: 9
-        });
+        // point({ container: svg, x: getX(pressure.min), y: getY(compliance.max), color: 'red' })
+        // point({ container: svg, x: getX(pressure.max), y: getY(compliance.min), color: 'green' })
+        // point({ container: svg, x: getX(pressure.min), y: getY(compliance.min), color: 'brown' })
+
+
+        // Drawing Chart Lines
+        {
+            // 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
+            })
+
+            // Compliance Axios (Vertical)
+            putLine({
+                x1: getX(pressure.min), y1: getY(compliance.min),
+                x2: getX(pressure.min), y2: getY(compliance.max), 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
+            })
+
+            // Compliance Zero Line
+            putLine({
+                x1: getX(pressure.min), y1: getY(0),
+                x2: getX(pressure.max), y2: getY(0), style
+            })
+        }
+
+        // Texts Chart (Captions & Labels)
+        {
+
+            // Captions:
+            style = styles.caption;
+
+            putText({
+                container: svg, value: "Compliance (ml)", 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,
+            })
+
+            // Lables
+            style = styles.label;
+
+            putText({
+                container: svg, value: "ECV:", style: style,
+                x: getX(pressure.min), y: getY(compliance.min), dy: 10
+            })
+
+            putText({
+                container: svg, value: "MEP:", style,
+                x: getX(-300), y: getY(compliance.min), dy: 10
+            })
+
+            putText({
+                container: svg, value: "SC:", style: style,
+                x: getX(0), y: getY(compliance.min), dy: 10
+            });
+
+
+            putText({
+                container: svg, value: "G:", style,
+                x: getX(280), y: getY(compliance.min), dy: 10
+            });
+
+            style = styles.type;
+            putText({
+                container: svg, value: "Type", style: style,
+                x: getX(-500), y: getY(2.5),
+            });
+        }
+
+        // Tympanogram Values (Inputs)
+        {
+            let color = (this.side === 'R') ? 'red' : 'blue';
+            style = styles.input
+
+            putText({
+                container: svg, value: "", style: style + 'fill: ' + color, name: 'ECV',
+                x: getX(pressure.min), y: getY(compliance.min), dy: 10, dx: 11
+            })
+
+            putText({
+                container: svg, value: "", style: style + 'fill: ' + color, name: 'MEP',
+                x: getX(-300), y: getY(compliance.min), dy: 10, dx: 11
+            })
+
+            putText({
+                container: svg, value: "", style: style + 'fill: ' + color, name: 'SC',
+                x: getX(0), y: getY(compliance.min), dy: 10, dx: 8
+            })
+
+            putText({
+                container: svg, value: "", style: style + 'fill: ' + color, name: 'G',
+                x: getX(300), y: getY(compliance.min), dy: 10, dx: 4
+            })
+
+            putText({
+                container: svg, value: "", style: style + 'fill: ' + color, name: 'Type',
+                x: getX(-500), y: getY(2.5), dx: 9
+            })
+        }
 
         // Compliance Axios digits
         style = styles.compliance;
@@ -157,7 +173,7 @@ export default class Tympanogram {
         for (let c = compliance.min + compliance.step; c <= compliance.max; c += compliance.step) {
             c = Math.round(c * 10) / 10 // برای اون پدیده اعشاری غیرمنتظر
             putText({
-                container: svg, value: c,
+                container: svg, value: c.toFixed(1),
                 x, y: getY(c), dx: -1,
                 style: style,
             });
@@ -173,7 +189,6 @@ export default class Tympanogram {
             });
         }
 
-        // console.log(this.container);
         // مربع احاطه‌کننده کل جدول برای راهنمای توسعه
         style = 'fill: transparent; stroke: green; stroke-width: 0.5;';
         // یک بوردر راهنمای توسعه برای اس‌ وی جی به تمام پهنا و ارتفاع رسم می‌کنیم
@@ -193,17 +208,13 @@ export default class Tympanogram {
 
         // تابع رسم خط
         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);
-
         }
 
         // تابع ایجاد و رسم نقطه نشانگر رنگی
@@ -218,13 +229,25 @@ export default class Tympanogram {
     }
 
     update(data) {
+        let { ECV, SC, MEP, G, extraCompliance } = data
+
+        // اگر اکسترا کامپلیانس بود چارت دوباره باید رسم شود و چارت قبلی پاک شود
+        if (extraCompliance) {
+            this.chart.remove()
+            this.draw({ dims: this.dims, extraCompliance })
+        }
+        
+        // تبدبل اعداد رشته ای به عدد با دو رقم اعشاری
+        ECV && (ECV = (+ECV).toFixed(2));
+        SC && (SC = (+SC).toFixed(2));
+        G && (G = (+G).toFixed(2));
 
         // جایگذاری مقادیر تمپانومتری در تکست‌باکس ها
-        this.chart.querySelector(`text[data-name="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 || "";
+        this.chart.querySelector(`text[data-name="Type"]`).innerHTML = data?.Type || "-";
+        this.chart.querySelector(`text[data-name="ECV"]`).innerHTML = ECV || "-";
+        this.chart.querySelector(`text[data-name="MEP"]`).innerHTML = data?.MEP || "-";
+        this.chart.querySelector(`text[data-name="SC"]`).innerHTML = SC || "-";
+        this.chart.querySelector(`text[data-name="G"]`).innerHTML = G || "-";
         // پاک کردن منحنی قبلی از کانتینر جاری
         this.chart.querySelector(`path[data-name="curve"]`)?.remove();
         // رسم منحنی
@@ -233,79 +256,91 @@ export default class Tympanogram {
 
     // توابع داخلی
     drawCurve(data) {
+        let { Type, ECV, SC, MEP, G, expanded } = data
+
+
         // Ensure to Convert to Numbers //
+        SC = +SC;
+        ECV = +ECV;
+        MEP = +MEP;
+        G = +G;
+
+        // اگر این مقادیر وجود نداشته باشه مقدار صفر میدیم بهشون که خطا در رسم منحنی نخوریم
+        SC || (SC = 0)
+        MEP || (MEP = 0)
+
+
         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 = 70; // جابجایی نقطه کنترل منحنی های راست و چپ روی محور افقی
+        let cp = 70 // جابجایی نقطه کنترل منحنی های راست و چپ روی محور افقی
         // let k = 0.5; // width and height change [0, 1]
-        let cpp = 5; //جابجایی نقطه کنترل قله ها روی محور افقی
+        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;
+        let k = (SC > 0.30) ? 0.5 : 0.1 // width and height change [0, 1]
+        k = (SC > 1.0) ? 0.2 : k
         // k = (data.SC < 1.0) ? 0 : k;
 
-        let pw = 20 * k; // نصف پهنای قله
-        let ph = 0.1 * 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 }
-
+        let RV = zone.normal
+        if (MEP <= -150 || MEP >= 100 || expanded) { RV = zone.expanded } else { RV = zone.normal }
 
-        const curve2 = {
+        const curve = {
             R: {
                 P1: { p: RV.max, c: 0 },
-                P2: { p: +data.MEP + pw, c: +data.SC - ph },
-                C: { p: +data.MEP + cp, c: 0 }
+                P2: { p: MEP + pw, c: SC - ph },
+                C: { p: MEP + cp, c: 0 }
             },
             RM: {
-                P2: { p: +data.MEP, c: +data.SC },
-                C: { p: +data.MEP + cpp, c: +data.SC }
+                P1: {}, // Define later
+                P2: { p: MEP, c: SC },
+                C: { p: MEP + cpp, c: SC }
             },
             LM: {
-                P2: { p: +data.MEP - pw, c: +data.SC - ph },
-                C: { p: +data.MEP - cpp, c: +data.SC }
+                P1: {}, // Define later
+                P2: { p: MEP - pw, c: SC - ph },
+                C: { p: MEP - cpp, c: SC }
             },
             L: {
-                P1: {},
+                P1: {}, // Define later
                 P2: { p: RV.min, c: 0 },
-                C: { p: +data.MEP - cp, c: 0 }
+                C: { p: MEP - cp, c: 0 }
             }
         }
 
         // به دست آوردن مختصات نقاط کنترل بر حسب مختصات پیک
-        curve2.RM.P1 = curve2.R.P2
-        curve2.LM.P1 = curve2.RM.P2
-        curve2.L.P1 = curve2.LM.P2
+        curve.RM.P1 = curve.R.P2
+        curve.LM.P1 = curve.RM.P2
+        curve.L.P1 = curve.LM.P2
+
+        let color = (this.side == "R") ? "red" : "blue";
         let path = document.createElementNS(svgNS, "path");
         path.setAttribute("fill", "none");
         path.setAttribute("data-name", "curve");
-        let color = (this.side == "R") ? "red" : "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)}
+            M ${ctg(curve.R.P1)}
+            Q ${ctg(curve.R.C)} ${ctg(curve.R.P2)}
+            M ${ctg(curve.RM.P1)}
+            Q ${ctg(curve.RM.C)} ${ctg(curve.RM.P2)}
+            M ${ctg(curve.LM.P1)}
+            Q ${ctg(curve.LM.C)} ${ctg(curve.LM.P2)}
+            M ${ctg(curve.L.P1)}
+            Q ${ctg(curve.L.C)} ${ctg(curve.L.P2)}
             `
         );
         container.appendChild(path);

package/src/Tympanogram/test.js

@@ -0,0 +1,34 @@
+import Tympanogram from "./Tympanogram";
+
+document.querySelector('#app').innerHTML = `
+    <div id="test"></div>
+`;
+
+const container = document.getElementById('test')
+
+const dims = {
+    "name": "RTympanogram",
+    "w": 100,
+    "h": 60,
+    "margin": {
+        "left": 2,
+        "top": 0,
+        "right": 2,
+        "bottom": 0
+    },
+    "display": "inline",
+    "width": 100 * 12,
+    "height": 60 * 12
+}
+const RTympanogram = new Tympanogram({ container, dims, side: 'R' })
+RTympanogram.update({
+    Type: "An",
+    ECV: '3',
+    SC: '1.5',
+    MEP: '-150',
+    G: 0.2,
+    expanded: false, // by default is false for expand pressure from -600 to +400
+    // extraCompliance: true // by default is false (0 - 3) and true is: (0 - 6)
+
+
+})

package/src/Tympanogram/units.js

@@ -11,55 +11,45 @@ const units = {
     width: 100,
     height: 60,
 
-    // این فاصله خطوط محورهای بالا و چپ ادیوگرام از لبه ها هست
-    chartPadding: { left: 40, top: 40, right: 30, bottom: 20 },
-    symbolDims: { width: 55, height: 55 },
-    symbolsChart: {
-        width: 240, height: 60
+    pressure: { min: -600, max: +400, step: 200 },
+    compliance: {
+        normal: { min: -0.50, max: 3, step: 0.50 },
+        extra: { min: -0.50, max: 6, step: 0.50 }
     },
-    // virtual frequency 
-    mainFrequencies: [125, 250, 500, 1000, 2000, 4000, 8000],
-   
-    intensity: { min: -20, max: 130, step: 10 },
-    
+    padding: { right: 5, left: 8, top: 7, bottom: 14 },
+
+
     styles: {
+        svg: 'user-select: none; direction: ltr !important; font-family: Vazir;',
         pressure: `
-            user-select: none;
-            direction: ltr !important;
-            font-family: Vazir;
             font-size: 3;
             text-anchor: middle; 
             dominant-baseline: hanging; 
         `,
         caption: `
-            user-select: none;
-            direction: ltr !important;
-            font-family: Vazir;
             font-size: 3;
             text-anchor: middle; 
             dominant-baseline: middle; 
         `,
         label: `
-            user-select: none;
-            direction: ltr !important;
-            font-family: Vazir;
-            font-size: 1mm;
+            font-size: 4.2;
+            font-weight: bold;
+            text-anchor: start;
+            dominant-baseline: middle;       
+        `,
+        input: `
+            font-size: 4.2;
+            font-weight: bold;
             text-anchor: start;
             dominant-baseline: middle;       
         `,
         type: `
-            user-select: none;
-            direction: ltr !important;
-            font-family: Vazir;
             font-size: 1mm;
             font-weight: bold;
             text-anchor: start;
             dominant-baseline: middle;   
         `,
         compliance: `
-            user-select: none;
-            direction: ltr !important;
-            font-family: Vazir;
             font-size: 0.7mm;
             text-anchor: end; 
             dominant-baseline: middle; 

package/src/common/putLine.js

@@ -2,7 +2,7 @@
 const svgNS = "http://www.w3.org/2000/svg";
 
 export default function putLine({ container, x1, y1, x2, y2, style = 'stroke: black; stroke-width: 0.3;', name }) {
-    
+
     let line = document.createElementNS(svgNS, "line");
     line.setAttribute("x1", x1);
     line.setAttribute("y1", y1);
@@ -10,8 +10,7 @@ export default function putLine({ container, x1, y1, x2, y2, style = 'stroke: bl
     line.setAttribute("y2", y2);
     line.setAttribute("style", style)
     line.setAttribute("data-name", name)
-    // line.setAttribute("stroke", "black");
-    // line.setAttribute("stroke-width", 0.5);
+
     container.appendChild(line);
 
 }

package/src/common/putRect.js

@@ -1,15 +1,25 @@
+// https://docs.google.com/document/d/19Pgsi0eHRDgsxjkbxweHLRKVB60jrH4fzV52I83-6CM/edit?tab=t.0#heading=h.5zc9gsazq7wu
 const svgNS = "http://www.w3.org/2000/svg";
 
-export default function putRect({ container, x, y, width, height, style = 'fill: transparent; stroke: green; stroke-width: 0.5;', name, className }) {
+
+export default function putRect({
+    container, x, y, cx, cy, dx = 0, dy = 0, rx, width, height,
+    style = 'fill: transparent; stroke: black; stroke-width: 0.2;', name, className
+}
+) {
     let rect = document.createElementNS(svgNS, "rect");
-    rect.setAttribute("x", x);
-    rect.setAttribute("y", y);
+    cx && rect.setAttribute("x", cx - width / 2 + dx);
+    cy && rect.setAttribute("y", cy - height / 2 + dy);
+    rx && rect.setAttribute("rx", rx);
+    x && rect.setAttribute("x", x + dx);
+    y && rect.setAttribute("y", y + dy);
     rect.setAttribute("width", width);
     rect.setAttribute("height", height);
     rect.setAttribute("style", style);
     className && rect.setAttribute("class", className);
-    rect.setAttribute("data-name", name);
-    container.appendChild(rect);
+    name && rect.setAttribute("data-name", name);
+    container && container.appendChild(rect);
+
     return rect;
 
 }

package/src/main.js

@@ -9,7 +9,6 @@ import Reflex from "./Reflex/Reflex.js";
 import MultiText from "./MultiText/MultiText.js";
 
 
-
 document.querySelector('#app').innerHTML = `
     <div id="test"></div>
     <div id="audiogram-div"></div>
@@ -195,7 +194,7 @@ dims = {
 //   side: 'R',
 // })
 
-const forms = new Forms({ container: document.getElementById('forms-div'), templates: [template], mode: 'production' });
+const forms = new Forms({ container: document.getElementById('forms-div'), templates: [template], mode: 'develop' });
 forms.update({ officeData, patientData, sessionIndex: 0 })