hayun-vite 0.3.1 → 0.4.1

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";
@@ -11,9 +11,7 @@ const svgNS = "http://www.w3.org/2000/svg";
 
 
 export default class Form {
-    constructor({ container, template, image } = {}) {
-        this.image = image;
-        // const dims = template;
+    constructor({ container, template } = {}) {
         this.template = template;
         this.container = container;
         this.data = {};
@@ -36,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) {
@@ -67,19 +65,19 @@ export default class Form {
             this.LSpeech.draw({ dims: template.LSpeech, });
         }
         if (sections.RTympanogram) {
-            this.RTympanogram = new Tympanogram({ container: sections.RTympanogram, dims: template.RTympanogram })
+            this.RTympanogram = new Tympanogram({ container: sections.RTympanogram, side: 'R' })
             this.RTympanogram.draw({ dims: template.RTympanogram });
         }
         if (sections.LTympanogram) {
-            this.LTympanogram = new Tympanogram({ container: sections.LTympanogram, dims: template.LTympanogram })
+            this.LTympanogram = new Tympanogram({ container: sections.LTympanogram, side: 'L' })
             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 })
             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 })
             this.LReflex.draw({ dims: template.LReflex });
         }
         if (sections.report) {
@@ -87,70 +85,37 @@ 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;
         const { left, top } = margin;
 
         const backgroundImage = this.template.backgroundImage;
+
         let svg = document.createElementNS(svgNS, "svg");
         svg.setAttribute("viewBox", [-left, -top, width, height])
         svg.setAttribute("style", "background-color: BlanchedAlmond");
-        if (this.image) {
-            let image = document.createElementNS(svgNS, "image");
-            image.setAttribute('class', 'non-print')
-            image.setAttribute('width', width);
-            image.setAttribute('height', height);
+        if (backgroundImage) {
+            let image = document.createElementNS(svgNS, "image")
+            image.setAttribute('class', 'no-print')
+            image.setAttribute('width', width)
+            // image.setAttribute('height', height)
 
             image.setAttribute('x', 0)
-            image.setAttribute('y', -0.6)
+            image.setAttribute('y', 0)
             // image.setAttribute('height', height);
-            image.setAttribute('href', this.image);
-            
-            svg.appendChild(image);
-        }
+            image.setAttribute('href', backgroundImage)
 
-        // div.appendChild(svg);
-        return svg;
+            svg.appendChild(image)
+        }
+        return svg
     }
 
     update({ data, officeData, patientData, sessionIndex = 0 }) {
@@ -243,29 +208,6 @@ export default class Form {
             stroke-dasharray: 0.5;
             fill: transparent;
         `;
-        putRect({ container, x: 0, y: 0, width, height, style })
-        // Horizontal Lines
-        // putLine({
-        //     container: container, x1: 0, y1: margin.top,
-        //     x2: width, y2: margin.top, style: style, name: 'form-border'
-        // })
-        // putLine({
-        //     container: container, x1: 0, y1: height - margin.bottom,
-        //     x2: width, y2: height - margin.bottom, style: style, name: 'form-border'
-        // })
-        // // Vertical Lines
-        // putLine({
-        //     container: container, x1: margin.left, y1: 0,
-        //     x2: margin.left, y2: height, style: style, name: 'form-border'
-        // })
-        // putLine({
-        //     container: container, x1: width - margin.right, y1: 0,
-        //     x2: width - margin.right, y2: height, style: style, name: 'form-border'
-        // })
-        // // Middle Line
-        // putLine({
-        //     container: container, x1: width / 2, y1: 0,
-        //     x2: width / 2, y2: height, style: style, name: 'form-border'
-        // })
+        putRect({ container, x: 0, y: 0, width, height, style, className: 'no-print' })
     }
 }

package/src/Form/Forms.js

@@ -4,97 +4,83 @@ import printForm from "./printForm.js";
 import Form from "./Form.js";
 import combo from "./templates/combo.js"; // این در حقیقیت یک تمپلت هست
 import rasaAud from "./templates/rasa_audiometry.js";
-// import rasaAudImage from './templates/rasaAud.png'
-import rasaAudImage from './templates/rasa_audiometry.jpg'
+import rasaTymp from './templates/rasa_tymp_reflex.js'
 
 // خط کد زیر لازم هست
-import '../fonts/Vazirmatn-Regular.woff2'
+import './fonts/Vazirmatn-Regular.woff2'
 import '../style.css'
 
 // کلاس جدید که فرم‌های مختلف را نمایش میدهد
 export default class Forms {
     constructor({ assets, container } = {}) {
+        this.container = container
+        this.addForms({ templates: [rasaAud, rasaTymp, combo] })
+    }
+
+    // افزودن فرم 
+    addForms({ templates }) {
+        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);
+
         // اضافه کردن دکمه به دیو فرم
         let className = 'button-form persian';
-        const btn = [];
-        btn[0] = this.putButton({ container: div, text: rasaAud.label, className });
-        btn[1] = this.putButton({ container: div, text: combo.label, className });
-        const printBtn = this.putButton({ container: div, text: 'چاپ', className });
+        const btns = [];
 
-        // یک دیو تعریف میکنیم که سمت ادیولاگ برای تعریف لیستنر استفاده می‌شود
-        this.div = document.createElement('div'); // این بخش فقط شامل بخش اس‌وی‌جی هست
-        container.appendChild(this.div)
+        const forms = []; // آرایه آبجکت های فرم های مختلف
+        this.forms = forms;
 
-        this.forms = []; // آرایه آبجکت های فرم های مختلف
-        this.forms.push(new Form({ container: this.div, template: rasaAud, image: rasaAudImage }));
-        this.forms.push(new Form({ container: this.div, template: combo }));
-
-        // انتخاب فرم پیش‌فرض  
-        this.forms[0].form.style.display = 'block';
-        this.selectedForm = this.forms[0]
-        btn[0].style.backgroundColor = ' #1c15e1'
+        templates.forEach((template, index) => {
+            btns[index] = this.putButton({ container: div, text: template.label, className });
+            this.forms.push(new Form({ container, template }));
+        });
 
+        const printBtn = this.putButton({ container: div, text: 'چاپ', className });
         // تعریف رویداد دکمه چاپ فرم نمایشی
-        printBtn.addEventListener('click', () => { printForm({ container: this.selectedForm.form }) })
-
-        btn[0].addEventListener('click', () => {
-            this.forms[1].form.style.display = 'none'
-            btn[1].style.backgroundColor = ' #7472e2'
+        printBtn.addEventListener('click', () => { printForm({ container: this.selectedForm.form }) });
 
-            // this.forms[2].form.style.display = 'none'
-            this.forms[0].form.style.display = 'block';
-            btn[0].style.backgroundColor = ' #1c15e1'
+        // انتخاب فرم پیش‌فرض  
+        let selectedIndex = 0
+        forms[selectedIndex].form.style.display = 'block';
+        this.selectedForm = this.forms[selectedIndex]
+        btns[selectedIndex].style.backgroundColor = ' #1c15e1'
 
-            this.selectedForm = this.forms[0];
-            this.update(this.allData);
 
-        });
+        btns.forEach((btn, index) => {
+            btn.addEventListener('click', () => {
+                // Hide All forms
+                forms.forEach((form, i) => {
+                    form.form.style.display = 'none'
+                    btns[i].style.backgroundColor = ' #7472e2'
 
-        btn[1].addEventListener('click', () => {
-            this.forms[0].form.style.display = 'none'
-            btn[0].style.backgroundColor = ' #7472e2'
+                });
 
-            // this.forms[2].form.style.display = 'none'
-            this.forms[1].form.style.display = 'block';
-            btn[1].style.backgroundColor = ' #1c15e1'
+                forms[index].form.style.display = 'block';
+                btns[index].style.backgroundColor = ' #1c15e1'
 
-            this.selectedForm = this.forms[1];
-            // آپدیت فرم انتخاب شده
-            this.update(this.allData);
-        });
+                this.selectedForm = forms[index];
+                selectedIndex = index
+                this.update(this.allData);
+            })
+        })
 
-        // btn3.addEventListener('click', () => {
-        //     this.forms[0].form.style.display = 'none'
-        //     this.forms[1].form.style.display = 'none'
-        //     this.forms[2].form.style.display = 'block';
-        //     this.selectedForm = this.forms[2]
-        //     // آپدیت فرم انتخاب شده
-        //     this.update(this.allData);
-
-        // });
-        // for Develop
-        // this.event();
+        this.putButton({ container: div, text: 'Show/Hide', className })
+            .addEventListener('click', () => { this.toggleDisplay({ container: forms[selectedIndex].form }) });
     }
+
     // این تابع یک بار از بیرون کلاس فراخوانی میشه و یک بار وقتی از داخل تمپلت فرم را عوض میکنیم
     update({ data, officeData, patientData, sessionIndex = 0 }) {
         // ذخیره کل دیتا برای استفاده داخلی آپدیت فرم انتخاب شده
         this.allData = { data, officeData, patientData, sessionIndex }
         this.selectedForm.update({ data, officeData, patientData, sessionIndex })
     }
-    // ایجاد دکمه تاگل خطوط مرزی فرم و سکشن و المان
-    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';
-        })
-    }
+
     // توابع داخلی ایجاد دکمه و لینک های بالای فرم
     putButton({ container, id, text, className }) {
         const button = document.createElement('button');
@@ -104,4 +90,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

@@ -6,8 +6,6 @@ const svgNS = "http://www.w3.org/2000/svg";
 export default class Reflex {
     constructor({ container }) {
         this.container = container;
-        // this.left = dims.pad.left;
-        // this.top = dims.pad.top;
     }
 
     draw({ dims }) {
@@ -16,14 +14,8 @@ export default class Reflex {
         let x = dims.margin.left;
         let y = dims.margin.top;
         let style;
-        // جدولی با ۳ سطر و ۵ ستون
-
-        // تقسیم بر ۶ کردم تا با عرض باکس‌های گفتار یکی باشه. وگرنه اینجا ۵ تا ستون داریم. یک ستون میدیم کپشن عمودی ستون اول
-        const cw = width / 6; // پهنای هر خانه
-        const ch = height / 3; // ارتفاع هر خانه
 
         const svg = document.createElementNS(svgNS, "svg");
-        // svg.setAttribute("id", id);
         svg.setAttribute("x", x);
         svg.setAttribute("y", y);
         svg.setAttribute("width", width);
@@ -31,7 +23,8 @@ export default class Reflex {
         svg.setAttribute("class", "reflex");
 
         let lable = ["", "500", "1000", "2000", "4000"]; // مقادیر برچسب‌های سطر اول
-        let cw1 = width / 6; // پهنای خانه‌های سطر اول
+        // جدولی با ۳ سطر و ۵ ستون
+        let cw1 = width / 5; // پهنای خانه‌های سطر اول
         let ch1 = height / 3; // ارتفاع خانه‌های سطر اول
         let ch2 = height / 3; // ارتفاع خانه‌های سطر دوم
 
@@ -48,7 +41,7 @@ export default class Reflex {
         `;
         lable.forEach((value, i) => {
             if (value != "") {
-                let x = cw1 / 2 + cw1 * (i + 1);
+                let x = cw1 / 2 + cw1 * i;
                 let y = ch1 / 2;
                 // putText(value, x, y, "", "middle", "middle"); // با استایل تراز عمودی پایین نسبت به خط پایه
                 putText({ container: svg, value, x, y, style })
@@ -68,13 +61,13 @@ export default class Reflex {
         `;
         lable = ["Freq", "IPSI", "CONTRA"];
         // چاپ برچسب‌های ستون اول
-        putText({ container: svg, value: "Freq", x: cw1 * 2, y: ch1 / 2, style: style })
-        putText({ container: svg, value: "IPSI", x: cw1 * 2, y: ch1 * 3 / 2, style: style })
-        putText({ container: svg, value: "CONTRA", x: cw1 * 2, y: ch1 * 5 / 2, style: style })
+        putText({ container: svg, value: "Freq", x: cw1, y: ch1 / 2, style: style })
+        putText({ container: svg, value: "IPSI", x: cw1, y: ch1 * 3 / 2, style: style })
+        putText({ container: svg, value: "CONTRA", x: cw1, y: ch1 * 5 / 2, style: style })
 
         //چاپ ده باکس سطر دوم و سوم
         for (let j = 1; j <= 2; j++) {
-            for (let i = 2; i <= 5; i++) {
+            for (let i = 1; i <= 4; i++) {
                 let x = cw1 / 2 + cw1 * i;
                 let y = ch1 * j + ch2 / 2;
                 let bw = cw1 * 0.80; // پهنای هر باکس
@@ -95,7 +88,7 @@ export default class Reflex {
         `;
         let names = ["IPSI_500", "IPSI_1000", "IPSI_2000", "IPSI_4000"];
         for (let index = 0; index < 4; index++) {
-            x = cw1 / 2 + cw1 * (index + 2);
+            x = cw1 / 2 + cw1 * (index + 1);
             y = ch1 + ch2 / 2;
             putText({ container: svg, value: "", x: x, y: y, style: style, name: names[index] })
         }
@@ -106,11 +99,11 @@ export default class Reflex {
 
         for (let index = 0; index < 4; index++) {
             // const idValue = idValues[index];
-            x = cw1 / 2 + cw1 * (index + 2);
+            x = cw1 / 2 + cw1 * (index + 1);
             y = ch1 * 2 + ch2 / 2;
             putText({ container: svg, value: "", x: x, y: y, style: style, name: names[index] })
         }
-        // مربع احاطه‌کننده کل جدول برای راهنمای توسعه
+        // مربع احاطه‌کننده کل جدول برای راهنمای توسعه و دریافت رویداد کلیک روی فرم
         style = 'fill: transparent; stroke: green; stroke-width: 0.5;';
         putRect({ container: svg, x: 0, y: 0, width, height, style, name: dims.name })
         this.container.appendChild(svg);
@@ -130,13 +123,10 @@ export default class Reflex {
     }
 
     update(data) {
-        this.chart.querySelector(`text[data-name="IPSI_500"]`).innerHTML = data?.IPSI?.["500"] || "";
-        this.chart.querySelector(`text[data-name="IPSI_1000"]`).innerHTML = data?.IPSI?.["1000"] || "";
-        this.chart.querySelector(`text[data-name="IPSI_2000"]`).innerHTML = data?.IPSI?.["2000"] || "";
-        this.chart.querySelector(`text[data-name="IPSI_4000"]`).innerHTML = data?.IPSI?.["4000"] || "";
-        this.chart.querySelector(`text[data-name="CONTRA_500"]`).innerHTML = data?.CONTRA?.["500"] || "";
-        this.chart.querySelector(`text[data-name="CONTRA_1000"]`).innerHTML = data?.CONTRA?.["1000"] || "";
-        this.chart.querySelector(`text[data-name="CONTRA_2000"]`).innerHTML = data?.CONTRA?.["2000"] || "";
-        this.chart.querySelector(`text[data-name="CONTRA_4000"]`).innerHTML = data?.CONTRA?.["4000"] || "";
+        for (const key in data) {
+            for (const freq in data[key]) {
+                this.chart.querySelector(`text[data-name=${key}_${freq}]`).innerHTML = data?.[key]?.[freq] || "";
+            }
+        }
     }
 }