hayun-vite 0.4.0 → 0.5.0

package/src/Audiogram/dims.js

@@ -1,85 +1,125 @@
-// for 
 const dims = {
     name: 'Audiogram',
-    // پس از اضافه کردن هر آیتم در زیر این تمپلت رو هم آپدیت کنید
-    template: {
-        margin: { left: 0, top: 0, }, // در کانتینر دیو این عمل نمیکنه. مگر در کانتینر اس وی جی بذاریم
-
-        width: 700,
-        height: 700,
-
-        chartPadding: { left: 30, top: 45, right: 30, bottom: 10 },
-        symbolDims: { width: 55, height: 55 },
-        // virtual frequency 
-        vFrequency: { min: 0, max: 14, step: 1 },
-        vToFreq: { 0: 125, 2: 250, 4: 500, 5: 750, 6: 1000, 7: 1500, 8: 2000, 9: 3000, 10: 4000, 11: 6000, 12: 8000, 13: 12000, 14: 16000 },
-        freqToV: { 125: 0, 250: 2, 500: 4, 750: 5, 1000: 6, 1500: 7, 2000: 8, 3000: 9, 4000: 10, 6000: 11, 8000: 12, 12000: 13, 16000: 14 },
-        intensity: { min: -20, max: 120, step: 10 },
-
-        styles: {
-            line: ``,
-            juncDashLine: ``,
-            juncLine: ``,
-        }
-    },
+    margin: { left: 0, top: 0, }, // در کانتینر دیو این عمل نمیکنه. مگر در کانتینر اس وی جی بذاریم
+
+    // واحد ویوباکس - بدون واحد
+    vbWidth: 700, // برای اینکه ضخامت خطوط تغییری ناهنجار نکند این ثابت میماند 
+    vbHeight: 750, // این به نسبت تغییر می‌کند
 
-    display: {
-        margin: { left: 0, top: 0, }, // در کانتینر دیو این عمل نمیکنه. مگر در کانتینر اس وی جی بذاریم
-
-        width: 700,
-        height: 700,
-
-        chartPadding: { left: 30, top: 45, right: 30, bottom: 10 }, // این فاصله خطوط جدول از لبه ها هست
-        symbolDims: { width: 55, height: 55 },
-        // virtual frequency 
-        vFrequency: { min: 0, max: 14, step: 1 },
-        vToFreq: { 0: 125, 2: 250, 4: 500, 5: 750, 6: 1000, 7: 1500, 8: 2000, 9: 3000, 10: 4000, 11: 6000, 12: 8000, 13: 12000, 14: 16000 },
-        freqToV: { 125: 0, 250: 2, 500: 4, 750: 5, 1000: 6, 1500: 7, 2000: 8, 3000: 9, 4000: 10, 6000: 11, 8000: 12, 12000: 13, 16000: 14 },
-        intensity: { min: -20, max: 130, step: 10 },
-
-        styles: {
-            line: `stroke: black; stroke-width: 1;`,
-            juncDashLine: `stroke-width: 1 ; stroke-opacity: 0.8; stroke-dasharray: 4;`,
-            juncLine: `stroke-width: 1; stroke-opacity: 0.8;`,
-        }
+    // واحد پیکسل، میلیمتر، ...
+    // اگر واحد پایینی توسط بیرون تغییر کرد واحدهای بالایی باید با نسبت پایینی تغییر کنند
+    width: 700,
+    height: 700 ,
+
+    // این فاصله خطوط محورهای بالا و چپ ادیوگرام از لبه ها هست
+    chartPadding: { left: 40, top: 40, right: 30, bottom: 20 },
+    symbolDims: { width: 55, height: 55 },
+    symbolsChart: {
+        width: 240, height: 60
     },
-    rasa_audiometry: {
-        blank: true, // define Blank Chart for PrePrinted Chart, Lines do not draw
-        // width: 70.6,
-        // height: 70,
-        // margin: { left: 17, top: 18.5, },
-        chartPadding: { left: 0, top: 0, right: 0, bottom: 0 },
-        symbolDims: { width: 8, height: 8 },
-        // virtual frequency 
-        vFrequency: { min: 0, max: 14, step: 1 },
-        vToFreq: { 0: 125, 2: 250, 4: 500, 5: 750, 6: 1000, 7: 1500, 8: 2000, 9: 3000, 10: 4000, 11: 6000, 12: 8000, 13: 12000, 14: 16000 },
-        freqToV: { 125: 0, 250: 2, 500: 4, 750: 5, 1000: 6, 1500: 7, 2000: 8, 3000: 9, 4000: 10, 6000: 11, 8000: 12, 12000: 13, 16000: 14 },
-        intensity: { min: -20, max: 120, step: 10 },
-
-        styles: {
-            line: `stroke: black; stroke-width: 0.1;`,
-            juncDashLine: `stroke-width: 0.1 ; stroke-opacity: 0.8; stroke-dasharray: 0.5;`,
-            juncLine: `stroke-width: 0.2; stroke-opacity: 0.8;`,
-        }
+    // virtual frequency 
+    mainFrequencies: [125, 250, 500, 1000, 2000, 4000, 8000],
+    frequencies: [
+        { f: 125, vf: 0, label: false }, { f: 250, vf: 2 },
+        { f: 500, vf: 4 }, { f: 750, vf: 5.2, semiOctav: true },
+        { f: 1000, vf: 6 }, { f: 1500, vf: 7.2, semiOctav: true },
+        { f: 2000, vf: 8 }, { f: 3000, vf: 9.2, semiOctav: true },
+        { f: 4000, vf: 10 }, { f: 6000, vf: 11.2, semiOctav: true },
+        { f: 8000, vf: 12 }, { f: 16000, vf: 14 },
+    ],
+
+    vf: { min: 0, max: 14, step: 1 }, // virtual frequency
+    vfArray: [0, 2, 4, 5.2, 6, 7.2, 8, 9.2, 10, 11.2, 12],
+    vfToF: { 0: 125, 2: 250, 4: 500, 5.2: 750, 6: 1000, 7.2: 1500, 8: 2000, 9.2: 3000, 10: 4000, 11.2: 6000, 12: 8000, 13: 12000, 14: 16000 },
+    fToVf: { 125: 0, 250: 2, 500: 4, 750: 5.2, 1000: 6, 1500: 7.2, 2000: 8, 3000: 9.2, 4000: 10, 6000: 11.2, 8000: 12, 12000: 13.2, 16000: 14 },
+    intensity: { min: -20, max: 130, step: 10 },
+    styles: {
+        frequency: `text-anchor: middle; dominant-baseline: hanging;
+             font: 1.3em Verdana, Helvetica, Arial, sans-serif; user-select: none;font-weight:bold;`,
+        intensity: `text-anchor: end; dominant-baseline: middle;
+             font: 1.3em Verdana, Helvetica, Arial, sans-serif; user-select: none;font-weight:bold;`,
+        mainFreqline: `stroke: black; stroke-width: 1;`,
+        semiOctavFreqline: `stroke: black; stroke-width: 1;  stroke-dasharray: 4;`,
+        boldLine: 'stroke: black; stroke-width: 3;',
+
+        juncDashLine: `stroke-width: 1 ; stroke-opacity: 0.8; stroke-dasharray: 4;`,
+        juncLine: `stroke-width: 1; stroke-opacity: 0.8;`,
     },
-    combo: {
-        // width: 50,
-        // height: 40,
-        // margin: { left: 5, top: 5, right: 5, bottom: 5 },
-        chartPadding: { left: 8, top: 8, right: 5, bottom: 3 },
-        symbolDims: { width: 8, height: 8 },
-        // virtual frequency 
-        vFrequency: { min: 0, max: 14, step: 1 },
-        vToFreq: { 0: 125, 2: 250, 4: 500, 5: 750, 6: 1000, 7: 1500, 8: 2000, 9: 3000, 10: 4000, 11: 6000, 12: 8000, 13: 12000, 14: 16000 },
-        freqToV: { 125: 0, 250: 2, 500: 4, 750: 5, 1000: 6, 1500: 7, 2000: 8, 3000: 9, 4000: 10, 6000: 11, 8000: 12, 12000: 13, 16000: 14 },
-        intensity: { min: -20, max: 120, step: 10 },
-
-        styles: {
-            line: `stroke: black; stroke-width: 0.1;`,
-            juncDashLine: `stroke-width: 0.1 ; stroke-opacity: 0.8; stroke-dasharray: 0.5;`,
-            juncLine: `stroke-width: 0.2; stroke-opacity: 0.8;`,
-        }
-    }
+
+    // پس از اضافه کردن هر آیتم در زیر این تمپلت رو هم آپدیت کنید
+    // template: {
+    //     margin: { left: 0, top: 0, }, // در کانتینر دیو این عمل نمیکنه. مگر در کانتینر اس وی جی بذاریم
+
+    //     width: 700,
+    //     height: 700,
+
+    //     chartPadding: { left: 40, top: 50, right: 30, bottom: 10 },
+    //     symbolDims: { width: 55, height: 55 },
+    //     // virtual frequency 
+    //     frequencies: [{ value: 125, x: 0 }, { value: 250, x: 2 }, { value: 500, x: 4 }, { value: 750, x: 5 }],
+
+    //     iFrequency: { min: 0, max: 14, step: 1 },
+    //     iToFreq: { 0: 125, 2: 250, 4: 500, 5: 750, 6: 1000, 7: 1500, 8: 2000, 9: 3000, 10: 4000, 11: 6000, 12: 8000, 13: 12000, 14: 16000 },
+    //     fToVf: { 125: 0, 250: 2, 500: 4, 750: 5, 1000: 6, 1500: 7, 2000: 8, 3000: 9, 4000: 10, 6000: 11, 8000: 12, 12000: 13, 16000: 14 },
+    //     intensity: { min: -20, max: 120, step: 10 },
+
+    //     styles: {
+    //         freq: ``,
+    //         line: ``,
+    //         juncDashLine: ``,
+    //         juncLine: ``,
+    //     }
+    // },
+
+    // display: {
+    //     width: 800,
+    //     height: 600,
+
+
+    // },
+    // rasa_audiometry: {
+    //     blank: true, // define Blank Chart for PrePrinted Chart, Lines do not draw
+    //     // width: 70.6,
+    //     // height: 70,
+    //     // margin: { left: 17, top: 18.5, },
+    //     chartPadding: { left: 0, top: 0, right: 0, bottom: 0 },
+    //     symbolDims: { width: 8, height: 8 },
+    //     // virtual frequency 
+    //     frequencies: [{ value: 125, x: 0 }, { value: 250, x: 2 }, { value: 500, x: 4 }, { value: 750, x: 5 }],
+
+    //     iFrequency: { min: 0, max: 14, step: 1 },
+    //     iToFreq: { 0: 125, 2: 250, 4: 500, 5: 750, 6: 1000, 7: 1500, 8: 2000, 9: 3000, 10: 4000, 11: 6000, 12: 8000, 13: 12000, 14: 16000 },
+    //     fTovf: { 125: 0, 250: 2, 500: 4, 750: 5.2, 1000: 6, 1500: 7.2, 2000: 8, 3000: 9.2, 4000: 10, 6000: 11.2, 8000: 12, 12000: 13.2, 16000: 14 },
+    //     intensity: { min: -20, max: 120, step: 10 },
+
+    //     styles: {
+    //         freq: ``,
+    //         line: `stroke: black; stroke-width: 0.1;`,
+    //         juncDashLine: `stroke-width: 0.1 ; stroke-opacity: 0.8; stroke-dasharray: 0.5;`,
+    //         juncLine: `stroke-width: 0.2; stroke-opacity: 0.8;`,
+    //     }
+    // },
+    // combo: {
+    //     // width: 50,
+    //     // height: 40,
+    //     // margin: { left: 5, top: 5, right: 5, bottom: 5 },
+    //     chartPadding: { left: 8, top: 8, right: 5, bottom: 3 },
+    //     symbolDims: { width: 8, height: 8 },
+    //     // virtual frequency 
+    //     frequencies: [{ value: 125, x: 0 }, { value: 250, x: 2 }, { value: 500, x: 4 }, { value: 750, x: 5 }],
+
+    //     iFrequency: { min: 0, max: 14, step: 1 },
+    //     iToFreq: { 0: 125, 2: 250, 4: 500, 5: 750, 6: 1000, 7: 1500, 8: 2000, 9: 3000, 10: 4000, 11: 6000, 12: 8000, 13: 12000, 14: 16000 },
+    //     freqToi: { 125: 0, 250: 2, 500: 4, 750: 5, 1000: 6, 1500: 7, 2000: 8, 3000: 9, 4000: 10, 6000: 11, 8000: 12, 12000: 13, 16000: 14 },
+    //     intensity: { min: -20, max: 120, step: 10 },
+
+    //     styles: {
+    //         freq: ``,
+    //         line: `stroke: black; stroke-width: 0.1;`,
+    //         juncDashLine: `stroke-width: 0.1 ; stroke-opacity: 0.8; stroke-dasharray: 0.5;`,
+    //         juncLine: `stroke-width: 0.2; stroke-opacity: 0.8;`,
+    //     }
+    // }
 }
 
 export default dims;

package/src/Form/Form.js

@@ -1,4 +1,4 @@
-import Symbols from "../Symbol/Symbols.js";
+// import Symbols from "../Symbol/Symbols.js";
 import TextBox from "./TextBox.js";
 import Header from "./Header.js";
 import Reflex from "./Reflex.js";
@@ -34,26 +34,26 @@ export default class Form {
             this.patient.draw({ dims: template.patient });
         }
 
-
         if (sections.history) {
             this.history = new TextBox({ container: sections.history })
             this.history.draw({ dims: template.history });
         }
 
-        this.symbols = new Symbols();
-
         if (sections.RAudiogram) {
             this.RAudiogram = new AudiogramChart({
                 container: sections.RAudiogram,
                 dims: template.RAudiogram,
                 side: 'R',
+                events: false
             });
         }
+        
         if (sections.LAudiogram) {
             this.LAudiogram = new AudiogramChart({
                 container: sections.LAudiogram,
                 dims: template.LAudiogram,
                 side: 'L',
+                events: false
             });
         }
         if (sections.RSpeech) {
@@ -73,11 +73,11 @@ export default class Form {
             this.LTympanogram.draw({ dims: template.LTympanogram });
         }
         if (sections.RReflex) {
-            this.RReflex = new Reflex({ container: sections.RReflex, dims: template.RReflex })
+            this.RReflex = new Reflex({ container: sections.RReflex, side: 'R' })
             this.RReflex.draw({ dims: template.RReflex });
         }
         if (sections.LReflex) {
-            this.LReflex = new Reflex({ container: sections.LReflex, dims: template.LReflex })
+            this.LReflex = new Reflex({ container: sections.LReflex, side: 'L' })
             this.LReflex.draw({ dims: template.LReflex });
         }
         if (sections.report) {
@@ -85,45 +85,13 @@ export default class Form {
             this.report.draw({ dims: template.report });
         }
         if (sections.footer) {
-
             this.footer = new TextBox({ container: sections.footer })
             this.footer.draw({ dims: template.footer });
         }
 
         this.container.appendChild(this.form);
-
     }
 
-    draw() {
-
-        let pad;
-        let style = `
-            user-select: none;
-            direction: ltr !important;
-            /* text-align: center; */
-            font-family: Arial, Helvetica, sans-serif !important;
-            font-size: 1.3mm;
-            font-weight: bold;
-            color: red;
-             text-anchor: middle; /*تراز افقی*/
-             dominant-baseline: middle; /* تراز عمودی*/       
-        `;
-        // Draw Titles first
-        // putText({ container: this.sections.audiograms, value: "Right Ear", x: 42.5, y: 4, style: style })
-        // putText({ container: this.sections.speechs, value: "Speech Tests", x: this.sectionWidth / 2, y: 4, style: style })
-        // putText({ container: this.sections.tympanograms, value: "Tympanometry", x: this.sectionWidth / 2, y: 4, style: style })
-        // putText({ container: this.sections.reflexes, value: "Acoustic Reflexes", x: this.sectionWidth / 2, y: 4, style: style })
-
-
-        // برای مخفی کردن بوردرها تابع تاگل بوردر همین جا فراخوانی شود
-        // this.toggleBorders({ container: 'form' })
-        // this.toggleBorders({ container: 'section' })
-        // this.toggleBorders({ container: 'element' })
-
-
-        // بعد از رسم همه المنت ها یک المنت مستطیل تاپ لایر
-        // drawTopLayer({ container: this.form, dims: this.sections.dims });
-    }
 
     create({ paper, margin }) {
         const { width, height } = paper;
@@ -242,15 +210,4 @@ export default class Form {
         `;
         putRect({ container, x: 0, y: 0, width, height, style, className: 'no-print' })
     }
-
-    // ایجاد دکمه تاگل خطوط مرزی فرم و سکشن و المان
-    toggleBorders({ activeForm, container = 'form' }) {
-        const borders = activeForm.querySelectorAll(`[data-name="${container}-border"]`);
-        // آبجکت نگهداری رنگ بوردرها
-        const color = { form: 'black', section: 'blue', element: 'green' }
-        borders.forEach(border => {
-            // console.log(border.style.stroke);
-            border.style.stroke = (border.style.stroke === 'transparent') ? color[container] : 'transparent';
-        })
-    }
 }

package/src/Form/Forms.js

@@ -22,6 +22,10 @@ export default class Forms {
         const container = this.container
         // ایجاد یک دیو برای قرار دادن دکمه ها و لینک های فرم
         const div = document.createElement('div');
+        container.addEventListener('click', e => {
+            console.log(e.target);
+        })
+
         div.style = 'border: 1px solid brown; margin: 0; padding: 0;'
         container.appendChild(div);
 
@@ -38,13 +42,16 @@ export default class Forms {
         });
 
         const printBtn = this.putButton({ container: div, text: 'چاپ', className });
+        
         // تعریف رویداد دکمه چاپ فرم نمایشی
         printBtn.addEventListener('click', () => { printForm({ container: this.selectedForm.form }) });
 
         // انتخاب فرم پیش‌فرض  
-        forms[1].form.style.display = 'block';
-        this.selectedForm = this.forms[1]
-        btns[1].style.backgroundColor = ' #1c15e1'
+        let selectedIndex = 1
+        forms[selectedIndex].form.style.display = 'block';
+        this.selectedForm = this.forms[selectedIndex]
+        btns[selectedIndex].style.backgroundColor = ' #1c15e1'
+
 
         btns.forEach((btn, index) => {
             btn.addEventListener('click', () => {
@@ -59,10 +66,13 @@ export default class Forms {
                 btns[index].style.backgroundColor = ' #1c15e1'
 
                 this.selectedForm = forms[index];
+                selectedIndex = index
                 this.update(this.allData);
-
             })
         })
+
+        this.putButton({ container: div, text: 'Show/Hide', className })
+            .addEventListener('click', () => { this.toggleDisplay({ container: forms[selectedIndex].form }) });
     }
 
     // این تابع یک بار از بیرون کلاس فراخوانی میشه و یک بار وقتی از داخل تمپلت فرم را عوض میکنیم
@@ -81,4 +91,13 @@ export default class Forms {
         container.appendChild(button);
         return button;
     }
+
+    // تابع تاگل نمایش و مخفی کردن خطوط راهنمای طراحی
+    toggleDisplay({ container }) {
+        container.querySelectorAll(`[data-name='guide-border']`)
+            .forEach(element => {
+                element.style.display = (element.style.display === '') ? 'none' : '';
+            });
+
+    }
 }

package/src/Form/Reflex.js

@@ -4,8 +4,9 @@ import putText from "../common/putText.js";
 const svgNS = "http://www.w3.org/2000/svg";
 
 export default class Reflex {
-    constructor({ container }) {
+    constructor({ container, side }) {
         this.container = container;
+        this.side = side; // این برای تعیین رنگ راست و چپ استفاده می‌شود
     }
 
     draw({ dims }) {
@@ -84,8 +85,11 @@ export default class Reflex {
             font-family: Arial, Helvetica, sans-serif !important;
             font-size: 0.8mm;
             text-anchor: middle; /*تراز افقی*/
-            dominant-baseline: middle; /* تراز عمودی*/       
+            dominant-baseline: middle; /* تراز عمودی*/
         `;
+        // اضافه کردن رنگ قرمز یا آبی به استایل بر اساس جهت
+        style += (this.side === 'R') ? 'fill: red;' : 'fill: blue;';
+
         let names = ["IPSI_500", "IPSI_1000", "IPSI_2000", "IPSI_4000"];
         for (let index = 0; index < 4; index++) {
             x = cw1 / 2 + cw1 * (index + 1);
@@ -122,7 +126,9 @@ export default class Reflex {
         }
     }
 
+    // جایگذاری داده های رفلکس
     update(data) {
+
         for (const key in data) {
             for (const freq in data[key]) {
                 this.chart.querySelector(`text[data-name=${key}_${freq}]`).innerHTML = data?.[key]?.[freq] || "";

package/src/Form/Sections.js

@@ -49,7 +49,7 @@ export default class Sections {
             putRect({
                 container: svg, x: 0, y: 0, width, height,
                 style: 'fill: transparent; stroke: blue; stroke-width: 0.2',
-                className: 'no-print'
+                className: 'no-print', name: 'guide-border'
             })
             this[name] = svg;
             this.container.appendChild(svg)

package/src/Form/TextBox.js

@@ -50,7 +50,11 @@ export default class TextBox {
         });
 
         // مربع احاطه‌کننده کل جدول برای راهنمای توسعه
-        const borderRect = putRect({ container: svg, x: 0, y: 0, width, height, name: dims.name, className: 'no-print' });
+        const borderRect = putRect({
+            container: svg, x: 0, y: 0, width, height,
+            name: dims.name, className: 'no-print',
+            style: 'stroke: transparent; fill: transparent '
+        });
         this.borderRect = borderRect;
         // console.log(dims);
 

package/src/Form/templates/combo.js

@@ -42,17 +42,16 @@ const combo = {
 
         this.RAudiogram = {}
         Object.assign(this.RAudiogram,
-            audDims[this.name],
             {
+                blank: false,
                 name: 'RAudiogram',
-                w: width / 2, h: 100,
+                w: width / 2, h: 100, // ابعاد سکشن ادیوگرام 
                 margin: { left: 1, top: 1, right: 1, bottom: 1 },
                 display: 'inline',
             });
 
         this.LAudiogram = {}
         Object.assign(this.LAudiogram,
-            audDims[this.name],
             {
                 name: 'LAudiogram',
                 w: width / 2, h: 100, // پهنای سکشن هست

package/src/Form/templates/rasa_audiometry.js

@@ -52,25 +52,34 @@ const rasaAud = {
 
         this.RAudiogram = {}
         Object.assign(this.RAudiogram,
-            audDims[this.name],
             {
+                blank: true,
+                chartPadding: { left: 0, top: 0, right: 0, bottom: 0 },
+
                 name: 'RAudiogram',
-                w: width / 2, h: 99,
+                w: width / 2, h: 99, // این پهنا و ارتفاع سکشن هست
                 margin: { left: 18.1, top: 18.5, right: 16.4, bottom: 11.2 },
+                intensity: { min: -20, max: 120, step: 10 },
+                // بعدا از مقادیر بالا برای محاسبه اتومات پهنا و ارتفاع استفاده میشود
+               
                 display: 'inline',
-            });
+            }
+        );
 
         this.LAudiogram = {}
         Object.assign(this.LAudiogram,
-            audDims[this.name],
             {
                 name: 'LAudiogram',
+                blank: true,
+
+                chartPadding: { left: 0, top: 0, right: 0, bottom: 0 },
+                intensity: { min: -20, max: 120, step: 10 },
+                
                 w: width / 2, h: 99, // پهنای سکشن هست
                 margin: { left: 18.2, top: 18.5, right: 16.4, bottom: 11.2 },
                 display: 'block',
-            });
-
-
+            }
+        );
 
         this.RSpeech = {
             name: 'RSpeech',

package/src/Symbol/createSymbolSVG.js

@@ -19,7 +19,7 @@ export default function createSymbolSVG({ side = "R", type = "AC", masked = fals
   svg.setAttribute("data-side", side);
   svg.setAttribute("data-type", type);
   svg.setAttribute("data-masked", masked);
-  svg.setAttribute("data-NR", NR);
+  svg.setAttribute("data-nr", NR);
 
 
   if (side == "R" && type == "AC" && !masked) {

package/src/common/putSVG.js

@@ -0,0 +1,13 @@
+const svgNS = "http://www.w3.org/2000/svg";
+
+export default function putSVG({ container, x, y, width, height, viewBox }) {
+    const svg = document.createElementNS(svgNS, "svg");
+    width && svg.setAttribute("width", width);
+    height && svg.setAttribute("height", height);
+    x && svg.setAttribute("x", x);
+    y && svg.setAttribute("y", y);
+    viewBox && svg.setAttribute("viewBox", viewBox);
+    container.appendChild(svg);
+    return svg;
+
+}

package/src/common/putText.js

@@ -1,7 +1,8 @@
 const svgNS = "http://www.w3.org/2000/svg";
 
 // متن اس‌وی‌جی
-export default function putText({ container, value = '', x, y, id, dx = 0, dy = 0, style, name, className }) {
+export default function putText({ container, value = '', x, y, id,
+    dx = 0, dy = 0, style, name, className }) {
     let text = document.createElementNS(svgNS, "text");
     name && text.setAttribute("data-name", name)
     className && text.setAttribute("class", className);

package/src/main.js

@@ -1,62 +1,19 @@
 // import './style.css'
-
-import AudiogramChart from "./Audiogram/Audiogram.js"
-import dims from './Audiogram/dims.js'
+import Audiogram from "./Audiogram/Audiogram.js"
 import Forms from "./Form/Forms.js";
 import { officeData, patientData } from "../data/sampleData.js"
 
-
-
-// import javascriptLogo from './javascript.svg'
-// import viteLogo from '/vite.svg'
-// import { setupCounter } from './counter.js'
-
-// document.querySelector('#app').innerHTML = `
-//   <div>
-//     <a href="https://vite.dev" target="_blank">
-//       <img src="${viteLogo}" class="logo" alt="Vite logo" />
-//     </a>
-//     <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
-//       <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
-//     </a>
-//     <h1>Hello Vite!</h1>
-//     <div class="card">
-//       <button id="counter" type="button"></button>
-//     </div>
-//     <p class="read-the-docs">
-//       Click on the Vite logo to learn more
-//     </p>
-//   </div>
-// `
-
-// setupCounter(document.querySelector('#counter'))
-
-
 document.querySelector('#app').innerHTML = `
-    <button>Ok</button>
-    <button>Tok</button>
-    <p>Mahdi</p>
-    <h1>مهدی جاویدی پرنده پرکلاغی</h1>
-    <div id="forms-div"></div>
     <div id="audiogram-div"></div>
- `
-
-const forms = new Forms({ container: document.getElementById('forms-div'), name: 'form1' });
-forms.update({ officeData, patientData, sessionIndex: 0 })
-
-
-const RAudiogram = new AudiogramChart({
-  container: document.getElementById('audiogram-div'),
-  dims: dims.display,
-  side: 'R', x: 0, y: 0,
-  width: 700, height: 800, events: true
+    <div id="forms-div"></div>
+`
+/*
+const RAudiogram = new Audiogram({
+  container: document.getElementById('audiogram-div'), side: 'R',
 })
 
-const LAudiogram = new AudiogramChart({
-  container: document.getElementById('audiogram-div'),
-  dims: dims.display,
-  side: 'L', x: 0, y: 0,
-  width: 700, height: 800, events: true
+const LAudiogram = new Audiogram({
+  container: document.getElementById('audiogram-div'), side: 'L', 
 })
 
 RAudiogram.update({
@@ -74,15 +31,40 @@ RAudiogram.update({
 LAudiogram.update({
   data: {
     // R_AC_M: { 8000: 25, 2000: 5, 1500: 0, },
-    L_AC: { 1000: 25, 500: 15, 750: 20, 250: 10, 6000: 35, 2000: 45 },
-    L_AC_NR: { 1500: 85 },
+    L_AC: { 1000: 30, 500: 20, 750: 30, 250: 5, 6000: 35, 2000: 45 },
     L_BC_M: { 2000: 25, 6000: 25 },
-    L_BC_M_NR: { 3000: 85 },
     L_BC: { 1000: 20, 500: 10, 750: 15, 250: 5, 4000: 20 },
   },
   side: 'L',
 })
 
+*/
+const forms = new Forms({ container: document.getElementById('forms-div'), name: 'form1' });
+forms.update({ officeData, patientData, sessionIndex: 0 })
+
+
+// import javascriptLogo from './javascript.svg'
+// import viteLogo from '/vite.svg'
+// import { setupCounter } from './counter.js'
+
+// document.querySelector('#app').innerHTML = `
+//   <div>
+//     <a href="https://vite.dev" target="_blank">
+//       <img src="${viteLogo}" class="logo" alt="Vite logo" />
+//     </a>
+//     <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
+//       <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
+//     </a>
+//     <h1>Hello Vite!</h1>
+//     <div class="card">
+//       <button id="counter" type="button"></button>
+//     </div>
+//     <p class="read-the-docs">
+//       Click on the Vite logo to learn more
+//     </p>
+//   </div>
+// `
 
+// setupCounter(document.querySelector('#counter'))