hayun-vite 0.13.0 → 0.15.0

package/src/Tympanogram/Tympanogram.js

@@ -12,25 +12,31 @@ export default class Tympanogram {
         this.draw({ dims })
     }
 
-    draw({ dims, extraCompliance = false }) {
-        let width = dims.width;
-        let height = dims.height;
+    draw({ dims }) {
+        // پاک کردن چارت قبلی اگر وجود دارد
+        this.chart && this.chart.remove()
+
+        // داده‌های یونتیت خوانده میشود و بعد داده‌های دیمز به آن اضافه می‌‌شودکه می‌تواند جایگزین داده‌های قبلی یونیتز شود
+        dims = { ...units, ...dims }
+
+        let { width, height } = dims
         let x = dims.margin.left;
         let y = dims.margin.top;
-        let style;
+        const { extraCompliance, compensated } = dims
 
         const { pressure, padding, styles } = units
 
         const compliance = extraCompliance ? units.compliance.extra : units.compliance.normal
 
-
         let { vbWidth, vbHeight } = units;
 
         // کل چارت
+        let style
         style = styles.svg
         vbHeight = (vbWidth * height) / width // متناسب سازی ارتفاع ویباکس با پهنا و ارتفاع ورودی
         const viewBox = [-padding.left, -padding.top, vbWidth, vbHeight].join(' ')
         const svg = putSVG({ x, y, width, height, viewBox, style })
+        this.chart = svg;
         // این خط شد دو خط کد طلایی که مشکل سایز فونت در دیسپلی و کاغذ رو حل کرد
         width = vbWidth; // ثابت می‌ماند همیشه
         height = vbHeight // با نسبت پهنا و ارتفاع ورودی تغییر میکند 
@@ -45,7 +51,10 @@ export default class Tympanogram {
             mm: height - (padding.top + padding.bottom)
         }
 
-        this.chartInfo = { pressure, compliance, padding, pressureAxiosLength, complianceAxiosLength }
+        this.chartInfo = {
+            pressure, compliance, padding,
+            pressureAxiosLength, complianceAxiosLength, compensated,
+        }
 
         // 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' })
@@ -175,7 +184,7 @@ export default class Tympanogram {
             putText({
                 container: svg, value: c.toFixed(1),
                 x, y: getY(c), dx: -1,
-                style: style,
+                style,
             });
         }
 
@@ -193,8 +202,9 @@ export default class Tympanogram {
         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);
+        // اگر آبجکت از قبل دیتایی دارد اون رو آپدیت کن
+        this.data && this.update(this.data)
 
         // بلاک توابع داخلی مورد نیاز تابع اصلی
         // توابع تبدیل فشار و کامپلیانس به مختصات میلیمتر
@@ -229,14 +239,11 @@ export default class Tympanogram {
     }
 
     update(data) {
-        let { ECV, SC, MEP, G, extraCompliance } = data
-
-        // اگر اکسترا کامپلیانس بود چارت دوباره باید رسم شود و چارت قبلی پاک شود
-        if (extraCompliance) {
-            this.chart.remove()
-            this.draw({ dims: this.dims, extraCompliance })
-        }
+        this.data = data
+        console.log(data);
         
+        let { ECV, SC, MEP, G } = data
+
         // تبدبل اعداد رشته ای به عدد با دو رقم اعشاری
         ECV && (ECV = (+ECV).toFixed(2));
         SC && (SC = (+SC).toFixed(2));
@@ -256,33 +263,38 @@ export default class Tympanogram {
 
     // توابع داخلی
     drawCurve(data) {
-        let { Type, ECV, SC, MEP, G, expanded } = data
-
+        let { Type, ECV, SC, MEP, G, expanded, cp, cpp } = data
 
         // Ensure to Convert to Numbers //
-        SC = +SC;
-        ECV = +ECV;
-        MEP = +MEP;
-        G = +G;
+        SC = +SC
+        ECV = +ECV
+        MEP = +MEP
+        G = +G
+        cp = +cp
+        cpp = +cpp
 
         // اگر این مقادیر وجود نداشته باشه مقدار صفر میدیم بهشون که خطا در رسم منحنی نخوریم
         SC || (SC = 0)
         MEP || (MEP = 0)
 
-
         const container = this.chart
-        const { pressure, compliance, pressureAxiosLength, complianceAxiosLength } = this.chartInfo;
+        const { pressure, compliance, pressureAxiosLength, complianceAxiosLength, compensated } = this.chartInfo;
+
+        let cmp = 0 // for non-compensated
+        compensated && (cmp = ECV)
 
         // مقداردهی دستی برای تست شکل منحنی
         // data.SC = 0.5;
         // data.MEP = -75;
         // با توجه به اندازه اس ‌سی میشه برای مقادیر زیر یک سری رل گذاشت با منحنی قشنگ تر باشد
-        let cp = 70 // جابجایی نقطه کنترل منحنی های راست و چپ روی محور افقی
+        // let cp = 70 // جابجایی نقطه کنترل منحنی های راست و چپ روی محور افقی
+        !cp && (cp = 70)
         // let k = 0.5; // width and height change [0, 1]
-        let cpp = 5 //جابجایی نقطه کنترل قله ها روی محور افقی
+        !cpp && (cpp = 5) //جابجایی نقطه کنترل قله ها روی محور افقی
         // رل‌هایی برای تغییر مقادیر بالا برای زیبایی بیشتر منحنی در نقطه قله
         // (data.SC <= 0.30)? k=0
-        let k = (SC > 0.30) ? 0.5 : 0.1 // width and height change [0, 1]
+        let k
+        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;
 
@@ -299,24 +311,24 @@ export default class Tympanogram {
 
         const curve = {
             R: {
-                P1: { p: RV.max, c: 0 },
-                P2: { p: MEP + pw, c: SC - ph },
-                C: { p: MEP + cp, c: 0 }
+                P1: { p: RV.max, c: cmp },
+                P2: { p: MEP + pw, c: cmp + SC - ph },
+                C: { p: MEP + cp, c: cmp }
             },
             RM: {
                 P1: {}, // Define later
-                P2: { p: MEP, c: SC },
-                C: { p: MEP + cpp, c: SC }
+                P2: { p: MEP, c: cmp + SC },
+                C: { p: MEP + cpp, c: cmp + SC }
             },
             LM: {
                 P1: {}, // Define later
-                P2: { p: MEP - pw, c: SC - ph },
-                C: { p: MEP - cpp, c: SC }
+                P2: { p: MEP - pw, c: cmp + SC - ph },
+                C: { p: MEP - cpp, c: cmp + SC }
             },
             L: {
                 P1: {}, // Define later
-                P2: { p: RV.min, c: 0 },
-                C: { p: MEP - cp, c: 0 }
+                P2: { p: RV.min, c: cmp },
+                C: { p: MEP - cp, c: cmp }
             }
         }
 

package/src/Tympanogram/test.js

@@ -2,11 +2,23 @@ import Tympanogram from "./Tympanogram";
 
 document.querySelector('#app').innerHTML = `
     <div id="test"></div>
+    <p>Curve settings:</p>
+    <div>
+      <input type="range" id="cp" name="cp" min="10" max="150" value="70" step="5" />
+      <label for="cp">cp</label>
+      <input type="range" id="cpp" name="cpp" min="1" max="10" value="5" step="1" />
+      <label for="cpp">cpp</label>
+      <div>
+        <input type="checkbox" name="extra-sc" id="extra-sc">
+        <label for="extra-sc">Extra SC</label>
+      </div>
+      <div>
+        <input type="checkbox" name="compensated" id="compensated">
+        <label for="compensated">Compensated</label>
+      </div>
+    </div>
 `;
-
-const container = document.getElementById('test')
-
-const dims = {
+let dims = {
     "name": "RTympanogram",
     "w": 100,
     "h": 60,
@@ -18,17 +30,56 @@ const dims = {
     },
     "display": "inline",
     "width": 100 * 12,
-    "height": 60 * 12
+    "height": 60 * 12,
 }
-const RTympanogram = new Tympanogram({ container, dims, side: 'R' })
-RTympanogram.update({
+let data = {
     Type: "An",
-    ECV: '3',
-    SC: '1.5',
-    MEP: '-150',
+    ECV: '1.30',
+    SC: '0.80',
+    MEP: '-130',
     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)
 
+}
+let cp = 70, cpp = 5, extraCompliance, compensated
+
+document.querySelector("#compensated").addEventListener("input", e => {
+    compensated = e.target.checked
+    console.log(e.target.checked);
+    dims = { ...dims, compensated }
+    RTympanogram.draw({ dims })
+
+})
+
+document.querySelector("#extra-sc").addEventListener("input", e => {
+    extraCompliance = e.target.checked
+    console.log(e.target.checked);
+    dims = { ...dims, extraCompliance }
+    RTympanogram.draw({ dims })
+
+})
+
+document.querySelector("#cp")
+    .addEventListener("input", e => {
+        cp = e.target.value
+        console.log(cp);
+        data = {...data, cp}
+        
+        RTympanogram.update(data)
+    })
+
+
+document.querySelector("#cpp")
+    .addEventListener("input", e => {
+        cpp = e.target.value
+        console.log(cpp);
+        data = {...data, cpp}
+
+        RTympanogram.update(data)
+    })
+
+const container = document.getElementById('test')
+
+const RTympanogram = new Tympanogram({ container, dims, side: 'R' })
+RTympanogram.update(data)
 
-})

package/src/Tympanogram/units.js

@@ -17,7 +17,8 @@ const units = {
         extra: { min: -0.50, max: 6, step: 0.50 }
     },
     padding: { right: 5, left: 8, top: 7, bottom: 14 },
-
+    extraCompliance: false, // default is false (0-3) | true (0-6)
+    compensated: false, // default is false | true
 
     styles: {
         svg: 'user-select: none; direction: ltr !important; font-family: Vazir;',

package/src/common/putGrid.js

@@ -0,0 +1,31 @@
+import putLine from "./putLine";
+
+export default function putGrid({ container }) {
+       const {x, y, width, height} = container.viewBox.baseVal
+        console.log(x, y, width, height);
+
+        const cord = { xStart: x, yStart: y, xEnd: width + x, yEnd: height + y, xStep: 1, yStep: 1 }
+        let { xStart, yStart, xEnd, yEnd, xStep, yStep } = cord
+
+        // رسم خطوط افقی
+        let style = 'stroke: blue; stroke-width: 0.05 ; stroke-opacity: 0.8; stroke-dasharray: 0.2;'
+        let x1 = xStart
+        let y1 
+
+        let x2 = xEnd
+        let y2
+
+        for (let y1 = yStart; y1 <= yEnd; y1 += yStep) {
+            y2 = y1
+            putLine({ container, x1, y1, x2, y2, style, name: 'grid' })
+        }
+
+        // رسم خطوط عمودی
+        y1 = yStart
+        for (x1 = xStart; x1 <= xEnd; x1 += xStep) {
+            const x2 = x1
+            putLine({ container, x1, y1, x2, y2, style, name: 'grid' })
+        }
+
+
+    }

package/src/main.js

@@ -2,7 +2,7 @@
 import Audiogram from "./Audiogram/Audiogram.js"
 import Forms from "./Forms/Forms.js";
 import { officeData, patientData } from "../assets/data/sampleData.js"
-import template from "../assets/templates/template_combo.js";
+import template from "../assets/templates/templCombo.js";
 import Tympanogram from "./Tympanogram/Tympanogram.js";
 import Speech from "./Speech/Speech.js";
 import Reflex from "./Reflex/Reflex.js";