hayun-vite 0.7.3 → 0.8.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hayun-vite",
   "private": false,
-  "version": "0.7.3",
+  "version": "0.8.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/Form/{TextBox.js → Box.js}

@@ -37,23 +37,25 @@ export default class TextBox {
 
         // اگر مقدار استروک درست بود لیبل ها را چاپ کن
         if (!dims.hideContext) {
-            dims.elements.forEach(element => {
-                switch (element.type) {
-                    case 'text':
-                        ({ x, y, value } = element);
-                        putText({ container: svg, value, x, y, className: 'persian bold' });
-                        break;
-                    case 'line':
-                        let { x1, y1, x2, y2 } = element;
-                        putLine({ container: svg, x1, y1, x2, y2 });
-                        break;
-                }
-            });
+            dims.elements
+                .forEach(
+                    element => {
+                        switch (element.type) {
+                            case 'text':
+                                ({ x, y, value, style } = element);
+                                putText({ container: svg, value, x, y, style, className: 'persian bold' });
+                                break;
+                            case 'line':
+                                let { x1, y1, x2, y2 } = element;
+                                putLine({ container: svg, x1, y1, x2, y2 });
+                                break;
+                        }
+                    });
         }
 
         // محل اینپوت‌های دیتا
         let name;
-        this.inputs.forEach(input => {
+        this.inputs && this.inputs.forEach(input => {
             ({ name, x, y } = input);
             putText({ container: svg, x, y, className: 'persian', name });
         });

package/src/Form/Form.js

@@ -1,9 +1,9 @@
 // import Symbols from "../Symbol/Symbols.js";
-import TextBox from "./TextBox.js";
+import Box from "./Box.js";
 import Header from "./Header.js";
-import Reflex from "./Reflex.js";
+import Reflex from "./Reflex_N.js";
 import Sections from "./Sections.js";
-import Speech from "./Speech.js";
+import Speech from "./Speech_N.js";
 import Tympanogram from "./Tympanogram.js";
 import putRect from "../common/putRect.js";
 import AudiogramChart from "../Audiogram/Audiogram.js";
@@ -20,28 +20,28 @@ export default class Form {
         this.form.style.display = 'none';
         // رسم مارجین های فرم
         this.drawMarginLines({ container: this.form, width, height });
-        
+
         const sections = new Sections({ container: this.form, dims: template });
         this.sections = sections;
-        
-        
+
         if (sections.header) {
             this.header = new Header({ container: sections.header })
             this.header.draw({ dims: template.header });
         }
-
         if (sections.patient) {
-        // (template.label === 'تمپانومتری رسا') && console.log(template.patient);
+            // (template.label === 'تمپانومتری رسا') && console.log(template.patient);
 
-            this.patient = new TextBox({ container: sections.patient });
+            this.patient = new Box({ container: sections.patient });
             this.patient.draw({ dims: template.patient });
         }
-
         if (sections.history) {
-            this.history = new TextBox({ container: sections.history })
+            this.history = new Box({ container: sections.history })
             this.history.draw({ dims: template.history });
         }
-
+        if (sections['Audiogram Titles']) {
+            const titles = new Box({ container: sections['Audiogram Titles'] });
+            titles.draw({ dims: template['Audiogram Titles'] });
+        }
         if (sections.RAudiogram) {
             this.RAudiogram = new AudiogramChart({
                 container: sections.RAudiogram,
@@ -50,7 +50,6 @@ export default class Form {
                 events: false
             });
         }
-        
         if (sections.LAudiogram) {
             this.LAudiogram = new AudiogramChart({
                 container: sections.LAudiogram,
@@ -59,7 +58,11 @@ export default class Form {
                 events: false
             });
         }
-        if (sections.RSpeech) {
+        if (sections['Speech Titles']) {
+            const titles = new Box({ container: sections['Speech Titles'] });
+            titles.draw({ dims: template['Speech Titles'] });
+        }
+        if (sections['RSpeech']) {
             this.RSpeech = new Speech({ container: sections.RSpeech, side: 'R' })
             this.RSpeech.draw({ dims: template.RSpeech, })
         }
@@ -67,6 +70,10 @@ export default class Form {
             this.LSpeech = new Speech({ container: sections.LSpeech, side: 'L' })
             this.LSpeech.draw({ dims: template.LSpeech, });
         }
+        if (sections['Tympanogram Titles']) {
+            const titles = new Box({ container: sections['Tympanogram Titles'] });
+            titles.draw({ dims: template['Tympanogram Titles'] });
+        }
         if (sections.RTympanogram) {
             this.RTympanogram = new Tympanogram({ container: sections.RTympanogram, side: 'R' })
             this.RTympanogram.draw({ dims: template.RTympanogram });
@@ -75,6 +82,12 @@ export default class Form {
             this.LTympanogram = new Tympanogram({ container: sections.LTympanogram, side: 'L' })
             this.LTympanogram.draw({ dims: template.LTympanogram });
         }
+
+         if (sections['Reflex Titles']) {
+            const titles = new Box({ container: sections['Reflex Titles'] });
+            titles.draw({ dims: template['Reflex Titles'] });
+        }
+
         if (sections.RReflex) {
             this.RReflex = new Reflex({ container: sections.RReflex, side: 'R' })
             this.RReflex.draw({ dims: template.RReflex });
@@ -84,11 +97,11 @@ export default class Form {
             this.LReflex.draw({ dims: template.LReflex });
         }
         if (sections.report) {
-            this.report = new TextBox({ container: sections.report })
+            this.report = new Box({ container: sections.report })
             this.report.draw({ dims: template.report });
         }
         if (sections.footer) {
-            this.footer = new TextBox({ container: sections.footer })
+            this.footer = new Box({ container: sections.footer })
             this.footer.draw({ dims: template.footer });
         }
 

package/src/Form/Forms.js

@@ -7,14 +7,15 @@ import rasaAud from "./templates/rasa_audiometry.js";
 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, defaultFormIndex = 1 } = {}) {
+    constructor({ assets, container, defaultFormIndex = 0 } = {}) {
         this.container = container
-        this.addForms({ templates: [rasaAud, rasaTymp, combo], defaultFormIndex })
+        // this.addForms({ templates: [rasaAud, rasaTymp, combo], defaultFormIndex })
+        this.addForms({ templates: [combo], defaultFormIndex })
     }
 
     // افزودن فرم 

package/src/Form/Reflex.js

@@ -10,13 +10,18 @@ export default class Reflex {
     }
 
     draw({ dims }) {
-  
+
         let width = dims.width;
         let height = dims.height;
         let x = dims.margin.left;
         let y = dims.margin.top;
         let style;
 
+        // x = 10
+        // y=1
+        // width= 80
+        // height = 24
+
         const svg = document.createElementNS(svgNS, "svg");
         svg.setAttribute("x", x);
         svg.setAttribute("y", y);
@@ -36,7 +41,7 @@ export default class Reflex {
             direction: ltr !important;
             /* text-align: center; */
             font-family: Arial, Helvetica, sans-serif !important;
-            font-size: 0.9mm;
+            font-size: 1mm;
             font-weight: bold;
             text-anchor: middle; /*تراز افقی*/
             dominant-baseline: middle; /* تراز عمودی*/       
@@ -56,7 +61,7 @@ export default class Reflex {
             direction: ltr !important;
             /* text-align: center; */
             font-family: Arial, Helvetica, sans-serif !important;
-            font-size: 0.9mm;
+            font-size: 1mm;
             font-weight: bold;
             text-anchor: end; /*تراز افقی*/
             dominant-baseline: middle; /* تراز عمودی*/       
@@ -122,6 +127,7 @@ export default class Reflex {
             rect.setAttribute("y", y - h / 2);
             rect.setAttribute("width", w);
             rect.setAttribute("height", h);
+            rect.setAttribute("rx", 1.5)
             rect.setAttribute("style", "fill: transparent; stroke: black; stroke-width: 0.2;");
             svg.appendChild(rect);
         }

package/src/Form/Reflex_N.js

@@ -0,0 +1,121 @@
+import putRect from "../common/putRect.js";
+import putSVG from "../common/putSVG.js";
+import putText from "../common/putText.js";
+import putTextBox from "../common/putTextBox.js";
+
+export default class Reflex {
+    constructor({ container, side }) {
+        this.container = container;
+        this.side = side; // این برای تعیین رنگ راست و چپ استفاده می‌شود
+    }
+
+    draw({ dims }) {
+
+        let width = dims.width;
+        let height = dims.height;
+        let x = dims.margin.left;
+        let y = dims.margin.top;
+        let style;
+
+        // کل چارت
+        const svg = putSVG({ x, y, width, height, className: 'reflex' })
+
+        let lable = ["", "500", "1000", "2000", "4000"]; // مقادیر برچسب‌های سطر اول
+        // جدولی با ۳ سطر و ۵ ستون
+        let cw1 = width / 5; // پهنای خانه‌های سطر اول
+        let ch1 = height / 3; // ارتفاع خانه‌های سطر اول
+        let ch2 = height / 3; // ارتفاع خانه‌های سطر دوم
+
+        // چاپ برچسب‌های سطر اول
+        style = `
+            user-select: none;
+            direction: ltr !important;
+            /* text-align: center; */
+            font-family: Arial, Helvetica, sans-serif !important;
+            font-size: 1mm;
+            font-weight: bold;
+            text-anchor: middle; /*تراز افقی*/
+            dominant-baseline: middle; /* تراز عمودی*/       
+        `;
+        lable.forEach((value, i) => {
+            if (value != "") {
+                let x = cw1 / 2 + cw1 * i;
+                let y = ch1 / 2;
+                // putText(value, x, y, "", "middle", "middle"); // با استایل تراز عمودی پایین نسبت به خط پایه
+                putText({ container: svg, value, x, y, style })
+            }
+        });
+
+        // مقادیر برچسب‌های ستون اول
+        style = `
+            user-select: none;
+            direction: ltr !important;
+            /* text-align: center; */
+            font-family: Arial, Helvetica, sans-serif !important;
+            font-size: 1mm;
+            font-weight: bold;
+            text-anchor: end; /*تراز افقی*/
+            dominant-baseline: middle; /* تراز عمودی*/       
+        `;
+        lable = ["Freq", "IPSI", "CONTRA"];
+        // چاپ برچسب‌های ستون اول
+        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 = 1; i <= 4; i++) {
+                let x = cw1 / 2 + cw1 * i;
+                let y = ch1 * j + ch2 / 2;
+                //رسم باکس با مختصات مرکز باکس
+                putTextBox({ container: svg, x, y, dx: 0, dy: -1, w: 13, h: 7, rx: 1 });
+            }
+        }
+
+        style = `
+            user-select: none;
+            direction: ltr !important;
+            /* text-align: center; */
+            font-family: Arial, Helvetica, sans-serif !important;
+            font-size: 1mm;
+            text-anchor: 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);
+            y = ch1 + ch2 / 2;
+            putText({ container: svg, value: "", x, y, dx: 0, dy: -1, style, name: names[index] })
+        }
+
+        // المنت‌های تکست خالی با آیدی یکتا در سطر سوم
+        // آرایه نام آیدی یکتا برای المنت تکست مقادیر برای استفاده تابع آپدیت
+        names = ["CONTRA_500", "CONTRA_1000", "CONTRA_2000", "CONTRA_4000"];
+
+        for (let index = 0; index < 4; index++) {
+            // const idValue = idValues[index];
+            x = cw1 / 2 + cw1 * (index + 1);
+            y = ch1 * 2 + ch2 / 2;
+            putText({ container: svg, value: "", x, y, dx: 0, dy: -1, 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);
+        this.chart = svg;
+
+    }
+
+    // جایگذاری داده های رفلکس
+    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

@@ -17,9 +17,6 @@ export default class Sections {
 
         // یک حلقه آرایه ایجاد میکنیم همه سکشن ها رسم شود
         this.create()
-
-
-
     }
     // ایجاد سکشن‌ها
     create() {
@@ -44,13 +41,14 @@ export default class Sections {
             svg.setAttribute("y", this.top);
 
             // نگهداری مختصات رسم بوردر هر سکشن برای استفاده در متد داخلی رسم بودر تاپ لایر 
-            this.cords.push({ name: name, width: width, height: height, x: this.left, y: this.top });
+            this.cords.push({ name, width, height, x: this.left, y: this.top });
 
             putRect({
                 container: svg, x: 0, y: 0, width, height,
                 style: 'fill: transparent; stroke: blue; stroke-width: 0.2',
                 className: 'no-print', name: 'guide-border'
-            })
+            });
+            
             this[name] = svg;
             this.container.appendChild(svg)
 

package/src/Form/Speech.js

@@ -9,24 +9,18 @@ export default class Speech {
     }
 
     draw({ dims, stroke = true }) {
+        console.log(dims);
+        
         // دریافت اطلاعات مختصات چاپ ورودی ها به جز عادی محاسبه شده 
         this.inputs = (dims.forceInsert) ? dims.forceInputs : dims.inputs
-
         let style;
-
         let width = dims.width;
         let height = dims.height;
         let x = dims.margin.left;
         let y = dims.margin.top;
-
         const labels = dims.labels;
-        // const inputs = dims.inputs;
         const cn = labels.length;
-
         this.labels = labels;
-
-
-
         let sideCaption = this.side === "R" ? "Right" : "Left";
         // یک جدول 6*2  - ۲ سطر و ۶ ستون
         // const cw = width / 6; // پهنای هر خانه
@@ -123,11 +117,5 @@ export default class Speech {
         this.labels.forEach((label) => {
             this.chart.querySelector(`text[data-name=${label}]`).innerHTML = data?.[label] || "";
         })
-        // this.chart.querySelector(`text[data-name="SAT"]`).innerHTML = data?.SAT || "";
-        // this.chart.querySelector(`text[data-name="SRT"]`).innerHTML = data?.SRT || "";
-        // this.chart.querySelector(`text[data-name="MCL"]`).innerHTML = data?.MCL || "";
-        // this.chart.querySelector(`text[data-name="UCL"]`).innerHTML = data?.UCL || "";
-        // this.chart.querySelector(`text[data-name="SDS"]`).innerHTML = data?.SDS || "";
     }
-
 }

package/src/Form/Speech_N.js

@@ -0,0 +1,103 @@
+import putTextBox from "../common/putTextBox.js";
+import putRect from "../common/putRect.js";
+import putText from "../common/putText.js";
+import putSVG from "../common/putSVG.js";
+import putPoint from "../common/putPoint.js";
+
+
+
+
+const svgNS = "http://www.w3.org/2000/svg";
+
+export default class Speech {
+    constructor({ container, side = 'R' }) {
+        this.container = container;
+        this.side = side;
+    }
+
+    draw({ dims, stroke = true }) {
+
+        // دریافت اطلاعات مختصات چاپ ورودی ها به جز عادی محاسبه شده 
+        this.inputs = (dims.forceInsert) ? dims.forceInputs : dims.inputs
+        let style;
+        let width = dims.width;
+        let height = dims.height;
+        let x = dims.margin.left;
+        let y = dims.margin.top;
+        const labels = dims.labels;
+        this.labels = labels;
+        // const cn = labels.length;
+        let sideCaption = this.side === "R" ? "Right" : "Left";
+        // یک جدول 6*2  - ۲ سطر و ۶ ستون
+        const rows = 2;
+        const column = labels.length;
+
+        const cw = width / column; // پهنای هر خانه
+        const ch = height / rows; // ارتفاع هر خانه
+
+        // کل چارت
+        const svg = putSVG({ x, y, width, height, className: 'speach' })
+
+        const matrix = [
+            [],
+            []
+        ];
+
+        for (let i = 0; i < 2; i++) {
+            x = cw / 2;
+            y = ch / 2 + ch * i;
+            for (let j = 0; j < 5; j++) {
+                matrix[i][j] = { i, j, x, y };
+                x += cw;
+            }
+        }
+        style = `
+            user-select: none;
+            direction: ltr !important;
+            /* text-align: center; */
+            font-family: Arial, Helvetica, sans-serif !important;
+            font-size: 1mm;
+            font-weight: bold;
+            text-anchor: middle; /*تراز افقی*/
+        `;
+
+        // برچسب های سطر اول
+        // برای فرم های پیش چاپ شده انجام نمیشود
+        !dims.hideContext &&
+            matrix[0].forEach((cell, index) =>
+                putText({ container: svg, value: labels[index], x: cell.x, y: cell.y, dx: 0, dy: 1, style }));
+
+        style += (this.side === 'R') ? 'fill: red;' : 'fill: blue;';
+
+        // باکس و تکست مقادیر
+        matrix[1].forEach((cell, index) => {
+            // برای فرم های پیش چاپ شده باکس رسم نمیشود
+            !dims.hideContext && putTextBox({ container: svg, x: cell.x, y: cell.y, dy: -1, w: 13, h: 7, rx: 1, });
+            // مقدار نگه دارها
+            if (!dims.forceInsert) {
+                putText({ container: svg, value: "", x: cell.x, y: cell.y, style: style, name: labels[index] });
+            } else {
+                // برای فرم های مثل رسا استفاده میشود
+                let name;
+                this.inputs.forEach(input => {
+                    ({ name, x, y } = input);
+                    putText({ container: svg, x, y, style: style, name });
+                });
+            }
+        }
+        );
+
+        // مربع احاطه‌کننده کل جدول برای راهنمای توسعه
+        style = 'fill: transparent; stroke: green; stroke-width: 0.5;';
+        let className = 'no-print'
+        putRect({ container: svg, x: 0, y: 0, width, height, style, name: dims.name })
+        this.chart = svg;
+        this.container.appendChild(svg);
+    }
+
+    update(data) {
+        this.labels.forEach((label) => {
+            this.chart.querySelector(`text[data-name=${label}]`).innerHTML = data?.[label] || "";
+        })
+    }
+}

package/src/Form/printForm.js

@@ -3,8 +3,13 @@ export default function printForm({ container }) {
   iframe.onload = setPrint;
   iframe.style.display = "block";
   let style = `
-                @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap');
-                font-display: auto;
+                @font-face {
+                font-family: vazirmatn;
+                src:
+                    url("/fonts/Vazirmatn-Regular.woff2") format("woff2"),
+                    url('/fonts/Vazirmatn-Regular.woff') format('woff');
+                font-display: swap;
+                }
 
                 @page {
 

package/src/Form/templates/combo.js

@@ -23,7 +23,7 @@ const combo = {
         this.header = {
             // hideContext: true,
             name: 'header',
-            w: width, h: 20,
+            w: width, h: 15,
             margin: { left: 1, top: 1, right: 1, bottom: 1 },
             display: 'block',
         }
@@ -40,13 +40,23 @@ const combo = {
             display: 'block',
         }
 
+        // Audiogram Titles 
+        this['Audiogram Titles'] = {
+            name: 'Audiogram Titles',
+            w: width, h: 8, // پهنا و ارتفاع سکشن
+            margin: { left: 5, top: 1, right: 5, bottom: 1 },
+            display: 'block',
+            stroke: true,
+            // محاسبه پهنا  ارتفاع در تابع calc2 
+        }
+
         this.RAudiogram = {}
         Object.assign(this.RAudiogram,
             {
                 blank: false,
                 name: 'RAudiogram',
-                w: width / 2, h: 100, // ابعاد سکشن ادیوگرام 
-                margin: { left: 1, top: 1, right: 1, bottom: 1 },
+                w: width / 2, h: 90, // ابعاد سکشن ادیوگرام 
+                margin: { left: 1, top: 0, right: 1, bottom: 0 },
                 display: 'inline',
             });
 
@@ -54,15 +64,25 @@ const combo = {
         Object.assign(this.LAudiogram,
             {
                 name: 'LAudiogram',
-                w: width / 2, h: 100, // پهنای سکشن هست
-                margin: { left: 1, top: 1, right: 1, bottom: 1 },
+                w: width / 2, h: 90, // پهنای سکشن هست
+                margin: { left: 1, top: 0, right: 1, bottom: 0 },
                 display: 'block',
             });
 
+        // Speech Titles 
+        this['Speech Titles'] = {
+            name: 'Speech Titles',
+            w: width, h: 8, // پهنا و ارتفاع سکشن
+            margin: { left: 5, top: 0.5, right: 5, bottom: 1 },
+            display: 'block',
+            stroke: true,
+            // محاسبه پهنا  ارتفاع در تابع calc2 
+        }
+
         this.RSpeech = {
             name: 'RSpeech',
             w: width / 2, h: 15,
-            margin: { left: 5, top: 1, right: 5, bottom: 1 },
+            margin: { left: 5, top: 0, right: 10, bottom: 0 },
             display: 'inline',
             stroke: true,
         }
@@ -70,24 +90,52 @@ const combo = {
         this.LSpeech = {
             name: 'LSpeech',
             w: width / 2, h: 15,
-            margin: { left: 5, top: 1, right: 5, bottom: 1 },
+            margin: { left: 10, top: 0, right: 5, bottom: 0 },
             display: 'block',
             stroke: true
         }
 
+        // Tympanogram Titles 
+        this['Tympanogram Titles'] = {
+            name: 'Tympanogram Titles',
+            w: width, h: 8, // پهنا و ارتفاع سکشن
+            margin: { left: 5, top: 1, right: 5, bottom: 1 },
+            display: 'block',
+            stroke: true,
+            // محاسبه پهنا  ارتفاع در تابع calc2 
+        }
+
         this.RTympanogram = {
             name: 'RTympanogram',
             w: width / 2, h: 60,
-            margin: { left: 2, top: 2, right: 2, bottom: 2 },
+            margin: { left: 2, top: 0, right: 2, bottom: 0 },
             display: 'inline',
         }
 
         this.LTympanogram = {
             name: 'LTympanogram',
             w: width / 2, h: 60,
-            margin: { left: 2, top: 2, right: 2, bottom: 2 },
+            margin: { left: 2, top: 0, right: 2, bottom: 0 },
             display: 'block',
         }
+
+        // Reflex Titles 
+        this['Reflex Titles'] = {
+            name: 'Reflex Titles',
+            w: width, h: 8, // پهنا و ارتفاع سکشن
+            margin: { left: 5, top: 1, right: 5, bottom: 1 },
+            display: 'block',
+            stroke: true,
+            // محاسبه پهنا  ارتفاع در تابع calc2 
+        }
+
+        this.Reflexes = {
+            name: 'Reflexes',
+            w: width, h: 30,
+            margin: { left: 2, top: 2, right: 2, bottom: 2 },
+            display: 'block'
+        }
+
         this.RReflex = {
             name: 'RReflex',
             w: width / 2, h: 30,
@@ -98,13 +146,13 @@ const combo = {
         this.LReflex = {
             name: 'LReflex',
             w: width / 2, h: 30,
-            margin: { left: 2, top: 2, right: 2, bottom: 2 },
+            margin: { left: 2, top: 2, right: 5, bottom: 2 },
             display: 'block'
         }
 
         this.report = {
             name: 'report',
-            w: width, h: 20,
+            w: width, h: 15,
             margin: { left: 1, top: 1, right: 1, bottom: 1 },
             display: 'block'
         }
@@ -117,9 +165,10 @@ const combo = {
         }
     },
 
+    // محاسبه پهنا و ارتفاع رسمی بخش های فرم از روی مارجین و ابعاد کاغذ
     calc2: function () {
         // let dims = this.dims;
-        let width, height;
+        let width, height, style;
 
         width = this.header.width = this.getWidth(this.header)
         height = this.header.height = this.getHeight(this.header)
@@ -138,15 +187,15 @@ const combo = {
         this.patient.elements = [
             { type: 'line', x1: 0, y1: 20, x2: width, y2: 20 },
             { type: 'text', x: width, y: 5, value: 'نام:' },
-            { type: 'text', x: width - 30, y: 5, value: 'نام خانوادگی:' },
+            { type: 'text', x: width - 38, y: 5, value: 'نام خانوادگی:' },
             { type: 'text', x: width - 90, y: 5, value: 'سن:' },
             { type: 'text', x: width - 130, y: 5, value: 'ارجاع از:' }
         ]
         this.patient.inputs = [
-            { name: 'name', x: width - 5, y: 5 },
-            { name: 'lastName', x: width - 47, y: 5 },
-            { name: 'age', x: width - 97, y: 5 },
-            { name: 'referrer', x: width - 142, y: 5 }
+            { name: 'name', x: width - 7, y: 5 },
+            { name: 'lastName', x: width - 59, y: 5 },
+            { name: 'age', x: width - 98, y: 5 },
+            { name: 'referrer', x: width - 143, y: 5 }
         ]
         this.patient.forceInputs = [
             { name: 'name', x: width - 10, y: 4 },
@@ -162,7 +211,21 @@ const combo = {
             { type: 'text', x: width, y: 5, value: 'شرح حال:' },
         ]
         this.history.inputs = [
-            { name: 'description', x: width - 13, y: 5 },
+            { name: 'description', x: width - 16, y: 5 },
+        ]
+
+        width = this['Audiogram Titles'].width = this.getWidth(this['Audiogram Titles'])
+        height = this['Audiogram Titles'].height = this.getHeight(this['Audiogram Titles'])
+        style = `
+            text-anchor: middle;
+            font-size: 1.2mm
+        `;
+
+        this['Audiogram Titles'].elements = [
+            // { type: 'line', x1: 0, y1: 0, x2: width, y2: 0 },
+            { type: 'text', x: width / 2, y: 5, value: 'Audiograms', style },
+            { type: 'text', x: width / 4, y: 5, value: 'Right', style: 'fill: red' },
+            { type: 'text', x: width * 3 / 4, y: 5, value: 'Left', style: 'fill: blue' },
         ]
 
         width = this.RAudiogram.width = this.getWidth(this.RAudiogram)
@@ -171,6 +234,15 @@ const combo = {
         width = this.LAudiogram.width = this.getWidth(this.LAudiogram)
         this.LAudiogram.height = this.getHeight(this.LAudiogram)
 
+        width = this['Speech Titles'].width = this.getWidth(this['Speech Titles'])
+        height = this['Speech Titles'].height = this.getHeight(this['Speech Titles'])
+        this['Speech Titles'].elements = [
+            // { type: 'line', x1: 0, y1: 0, x2: width, y2: 0 },
+            { type: 'text', x: width / 2, y: 4, value: 'Speech Tests', style },
+            { type: 'text', x: width / 4, y: 5, value: 'Right', style: 'fill: red' },
+            { type: 'text', x: width * 3 / 4, y: 5, value: 'Left', style: 'fill: blue' },
+        ]
+
         width = this.RSpeech.width = this.getWidth(this.RSpeech)
         this.RSpeech.height = this.getHeight(this.RSpeech)
         this.RSpeech.labels = ["SAT", "SRT", "MCL", "UCL", "SDS"]
@@ -179,11 +251,29 @@ const combo = {
         this.LSpeech.height = this.getHeight(this.LSpeech)
         this.LSpeech.labels = ["SAT", "SRT", "MCL", "UCL", "SDS"]
 
+        width = this['Tympanogram Titles'].width = this.getWidth(this['Tympanogram Titles'])
+        height = this['Tympanogram Titles'].height = this.getHeight(this['Tympanogram Titles'])
+        this['Tympanogram Titles'].elements = [
+            // { type: 'line', x1: 0, y1: 0, x2: width, y2: 0 },
+            { type: 'text', x: width / 2, y: 5, value: 'Tympanograms', style },
+            // { type: 'text', x: width / 4, y: 5, value: 'Right', style: 'fill: red' },
+            // { type: 'text', x: width * 3 / 4, y: 5, value: 'Left', style: 'fill: blue' },
+        ]
+
         width = this.RTympanogram.width = this.getWidth(this.RTympanogram)
         this.RTympanogram.height = this.getHeight(this.RTympanogram)
         width = this.LTympanogram.width = this.getWidth(this.LTympanogram)
         this.LTympanogram.height = this.getHeight(this.LTympanogram)
 
+        width = this['Reflex Titles'].width = this.getWidth(this['Reflex Titles'])
+        height = this['Reflex Titles'].height = this.getHeight(this['Reflex Titles'])
+        this['Reflex Titles'].elements = [
+            // { type: 'line', x1: 0, y1: 0, x2: width, y2: 0 },
+            { type: 'text', x: width / 2, y: 5, value: 'Acoustic Reflexes', style },
+            { type: 'text', x: width / 4, y: 5, value: 'Probe in the Right Ear', style: 'fill: red; text-anchor: middle' },
+            { type: 'text', x: width * 3 / 4, y: 5, value: 'Probe in the Left Ear', style: 'fill: blue; text-anchor: middle' },
+        ]
+
         width = this.RReflex.width = this.getWidth(this.RReflex)
         this.RReflex.height = this.getHeight(this.RReflex)
         width = this.LReflex.width = this.getWidth(this.LReflex)
@@ -224,11 +314,15 @@ const combo = {
             this.header,
             this.patient,
             this.history,
+            this['Audiogram Titles'],
             this.RAudiogram,
             this.LAudiogram,
+            this['Speech Titles'],
             this.RSpeech,
             this.LSpeech,
+            this['Tympanogram Titles'],
             this.RTympanogram, this.LTympanogram,
+            this['Reflex Titles'],
             this.RReflex, this.LReflex,
             this.report,
             this.footer

package/src/common/putSVG.js

@@ -1,13 +1,13 @@
 const svgNS = "http://www.w3.org/2000/svg";
 
-export default function putSVG({ container, x, y, width, height, viewBox }) {
+export default function putSVG({ container, x, y, width, height, viewBox, className }) {
     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);
+    className && svg.setAttribute("class", className);
+    container && container.appendChild(svg);
     return svg;
-
 }

package/src/common/putText.js

@@ -1,8 +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/common/putTextBox.js

@@ -0,0 +1,18 @@
+const svgNS = "http://www.w3.org/2000/svg";
+
+export default function putTextBox(
+    {
+        container, x, y, dx = 0, dy= 0 , w, h, rx,
+        style = "fill: transparent; stroke: black; stroke-width: 0.2;",
+    }) {
+    let rect = document.createElementNS(svgNS, "rect");
+    rect.setAttribute("x", x - w / 2 + dx);
+    rect.setAttribute("y", y - h / 2 + dy);
+    rect.setAttribute("rx", rx);
+
+    rect.setAttribute("width", w);
+    rect.setAttribute("height", h);
+    rect.setAttribute("style", style);
+    container.appendChild(rect);
+
+}

package/src/main.js

@@ -6,7 +6,11 @@ import { officeData, patientData } from "../data/sampleData.js"
 document.querySelector('#app').innerHTML = `
     <div id="audiogram-div"></div>
     <div id="forms-div"></div>
-`
+`;
+
+const forms = new Forms({ container: document.getElementById('forms-div') });
+forms.update({ officeData, patientData, sessionIndex: 0 })
+
 /*
 const RAudiogram = new Audiogram({
   container: document.getElementById('audiogram-div'), side: 'R',
@@ -39,32 +43,6 @@ LAudiogram.update({
 })
 
 */
-const forms = new Forms({ container: document.getElementById('forms-div') });
-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'))