hayun-vite 0.3.1 → 0.4.0

package/package.json

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

package/src/Form/Form.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 = {};
@@ -67,11 +65,11 @@ 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) {
@@ -132,25 +130,24 @@ export default class Form {
         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 +240,17 @@ 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' })
+    }
+
+    // ایجاد دکمه تاگل خطوط مرزی فرم و سکشن و المان
+    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

@@ -4,97 +4,74 @@ 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');
         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 });
-
-        // یک دیو تعریف میکنیم که سمت ادیولاگ برای تعریف لیستنر استفاده می‌شود
-        this.div = document.createElement('div'); // این بخش فقط شامل بخش اس‌وی‌جی هست
-        container.appendChild(this.div)
+        const btns = [];
 
-        this.forms = []; // آرایه آبجکت های فرم های مختلف
-        this.forms.push(new Form({ container: this.div, template: rasaAud, image: rasaAudImage }));
-        this.forms.push(new Form({ container: this.div, template: combo }));
+        const forms = []; // آرایه آبجکت های فرم های مختلف
+        this.forms = forms;
 
-        // انتخاب فرم پیش‌فرض  
-        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'
+        // انتخاب فرم پیش‌فرض  
+        forms[1].form.style.display = 'block';
+        this.selectedForm = this.forms[1]
+        btns[1].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'
+                forms[index].form.style.display = 'block';
+                btns[index].style.backgroundColor = ' #1c15e1'
 
-            // this.forms[2].form.style.display = 'none'
-            this.forms[1].form.style.display = 'block';
-            btn[1].style.backgroundColor = ' #1c15e1'
+                this.selectedForm = forms[index];
+                this.update(this.allData);
 
-            this.selectedForm = this.forms[1];
-            // آپدیت فرم انتخاب شده
-            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();
+            })
+        })
     }
+
     // این تابع یک بار از بیرون کلاس فراخوانی میشه و یک بار وقتی از داخل تمپلت فرم را عوض میکنیم
     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');

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] || "";
+            }
+        }
     }
 }

package/src/Form/Sections.js

@@ -1,3 +1,5 @@
+import putRect from "../common/putRect";
+
 export default class Sections {
     constructor({ container, dims }) {
         this.dims = dims
@@ -44,17 +46,11 @@ export default class Sections {
             // نگهداری مختصات رسم بوردر هر سکشن برای استفاده در متد داخلی رسم بودر تاپ لایر 
             this.cords.push({ name: name, width: width, height: height, x: this.left, y: this.top });
 
-            // بوردر راهنما
-            let rect = document.createElementNS(svgNS, "rect");
-            rect.setAttribute("x", 0);
-            rect.setAttribute("y", 0);
-            rect.setAttribute("width", width);
-            rect.setAttribute("height", height);
-            rect.setAttribute("fill", "transparent");
-            rect.setAttribute("stroke", "blue");
-            rect.setAttribute("stroke-width", "0.1mm");
-            rect.setAttribute("data-name", "section-border");
-            svg.appendChild(rect);
+            putRect({
+                container: svg, x: 0, y: 0, width, height,
+                style: 'fill: transparent; stroke: blue; stroke-width: 0.2',
+                className: 'no-print'
+            })
             this[name] = svg;
             this.container.appendChild(svg)
 

package/src/Form/Speech.js

@@ -82,7 +82,6 @@ export default class Speech {
         // اینپوت‌ها
         style += 'text-anchor: middle; dominant-baseline: middle; /* تراز عمودی*/ ';
 
-
         // New
         if (!dims.forceInsert) {
             let index = 0;
@@ -102,7 +101,8 @@ export default class Speech {
         }
         // مربع احاطه‌کننده کل جدول برای راهنمای توسعه
         style = 'fill: transparent; stroke: green; stroke-width: 0.5;';
-        putRect({ container: svg, x: 0, y: 0, width, height, style, name: dims.name })
+        let className = 'no-print'
+        putRect({ container: svg, x: 0, y: 0, width, height, style, name: dims.name, className })
         this.chart = svg;
         this.container.appendChild(svg);
 

package/src/Form/TextBox.js

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

package/src/Form/Tympanogram.js

@@ -3,11 +3,12 @@ import putText from "../common/putText.js";
 const svgNS = "http://www.w3.org/2000/svg";
 
 export default class Tympanogram {
-    constructor({ container } = {}) {
+    constructor({ container, side }) {
         this.pressure = { min: -600, max: +400, step: 200 };
         this.compliance = { min: -0.50, max: 3, step: 0.50 };
         this.padding = { right: 5, left: 8, top: 7, bottom: 14 };
         this.container = container;
+        this.side = side
     }
 
     draw({ dims }) {
@@ -30,7 +31,7 @@ export default class Tympanogram {
         svg.setAttribute("x", x);
         svg.setAttribute("y", y);
         svg.setAttribute("viewBox", [-padding.left, -padding.top, width, height]);
-       
+
 
 
         const pressureAxiosLength = {
@@ -191,8 +192,8 @@ export default class Tympanogram {
         // console.log(this.container);
         // مربع احاطه‌کننده کل جدول برای راهنمای توسعه
         style = 'fill: transparent; stroke: green; stroke-width: 0.5;';
-         // یک بوردر راهنمای توسعه برای اس‌ وی جی به تمام پهنا و ارتفاع رسم می‌کنیم
-         putRect({ container: svg, x: -padding.left, y: -padding.top, width, height, name: dims.name, style })
+        // یک بوردر راهنمای توسعه برای اس‌ وی جی به تمام پهنا و ارتفاع رسم می‌کنیم
+        putRect({ container: svg, x: -padding.left, y: -padding.top, width, height, name: dims.name, style })
         this.chart = svg;
         this.container.appendChild(svg);
 
@@ -236,13 +237,10 @@ export default class Tympanogram {
 
         // جایگذاری مقادیر تمپانومتری در تکست‌باکس ها
         this.chart.querySelector(`text[data-name="Type"]`).innerHTML = data?.type || "";
-        // container.getElementById(container.id + "_Type").innerHTML = data?.Type || "";
         this.chart.querySelector(`text[data-name="ECV"]`).innerHTML = data?.ECV || "";
         this.chart.querySelector(`text[data-name="MEP"]`).innerHTML = data?.MEP || "";
         this.chart.querySelector(`text[data-name="SC"]`).innerHTML = data?.SC || "";
         this.chart.querySelector(`text[data-name="G"]`).innerHTML = data?.G || "";
-        // container.getElementById(container.id + "_SC").innerHTML = data?.SC || "";
-        // document.getElementById(container + "_G").innerHTML = data.G;
         // پاک کردن منحنی قبلی از کانتینر جاری
         this.chart.querySelector(`path[data-name="curve"]`)?.remove();
         // رسم منحنی
@@ -312,7 +310,7 @@ export default class Tympanogram {
         let path = document.createElementNS(svgNS, "path");
         path.setAttribute("fill", "none");
         path.setAttribute("data-name", "curve");
-        let color = ("R" == "R") ? "brown" : "blue";
+        let color = (this.side == "R") ? "red" : "blue";
         path.setAttribute("stroke", color);
         path.setAttribute("stroke-width", "0.5px");
         path.setAttribute(

package/src/Form/printForm.js

@@ -4,6 +4,7 @@ export default function printForm({ container }) {
   iframe.style.display = "block";
   let style = `
                 @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap');
+                font-display: auto;
 
                 @page {
 
@@ -42,7 +43,7 @@ export default function printForm({ container }) {
                         padding: 0;
                         break-inside: avoid;
                     }
-                    .non-print {
+                    .no-print {
                       display: none;
                     }
 

package/src/Form/templates/rasa_audiometry.js

@@ -1,10 +1,10 @@
-import audDims from "../../Audiogram/dims.js";
+import audDims from "../../Audiogram/dims.js"
+import image from './rasa_audiometry.jpg'
 
-
-const templateRasaAud = {
+const rasaAud = {
     name: 'rasa_audiometry',
     label: 'ادیومتری رسا',
-    backgroundImage: 'backgroundImage',
+    backgroundImage: image, // Just Path of image
     margin: { left: 0, top: 0, right: 0, bottom: 0 },
     paper: { type: 'A4', case: 'portrait', width: 209, height: 294.5 },
 
@@ -238,11 +238,11 @@ const templateRasaAud = {
 
 }
 
-templateRasaAud.calc1()
-templateRasaAud.calc2()
-templateRasaAud.calcSectionsArray()
+rasaAud.calc1()
+rasaAud.calc2()
+rasaAud.calcSectionsArray()
 
 // پهنا و ارتفاع قابل استفاده منهای پد ها میشه پهنا و ارتفاع اصلی
 
-export default templateRasaAud;
+export default rasaAud;
 

package/src/Form/templates/rasa_tymp_reflex.js

@@ -0,0 +1,199 @@
+import audDims from "../../Audiogram/dims.js"
+import image from './rasa_tymp_reflex.jpg'
+
+const rasaTymp = {
+    name: 'combo',
+    label: 'تمپانومتری رسا',
+    backgroundImage: image, // Just Path of image
+    margin: { left: 0, top: 0, right: 0, bottom: 0 },
+    paper: { type: 'A4', case: 'portrait', width: 209, height: 294.5 },
+
+    // Printable Dimention
+    calc1: function () {
+        this.width = this.paper.width - (this.margin.left + this.margin.right);
+        this.height = this.paper.height - (this.margin.top + this.margin.bottom);
+        let width = this.width;
+        // ابعاد و پدینگ المنت ها
+        // فضای خالی
+        this.blank = {
+            name: 'blank',
+            w: width, h: 20,
+            margin: { left: 0, top: 0, right: 0, bottom: 0 },
+            display: 'block',
+        }
+        this.header = {
+            // hideContext: true,
+            name: 'header',
+            w: width, h: 20,
+            margin: { left: 0, top: 0, right: 0, bottom: 0 },
+            display: 'block',
+        }
+        this.patient = {
+            name: 'patient',
+            w: width, h: 10,
+            margin: { left: 5, top: 1, right: 5, bottom: 1},
+            display: 'block',
+        }
+        this.history = {
+            name: 'history',
+            w: width, h: 10,
+            margin: { left: 1, top: 1, right: 1, bottom: 1 },
+            display: 'block',
+        }
+
+        this.RTympanogram = {
+            name: 'RTympanogram',
+            w: width / 2, h: 60,
+            margin: { left: 5, top: 2, right: 3, bottom: 2 },
+            display: 'inline',
+        }
+
+        this.LTympanogram = {
+            name: 'LTympanogram',
+            w: width / 2, h: 60,
+            margin: { left: 3, top: 2, right: 5, bottom: 2 },
+            display: 'block',
+        }
+        this.RReflex = {
+            name: 'RReflex',
+            w: width / 2, h: 30,
+            margin: { left: 5, top: 2, right: 3, bottom: 2 },
+            display: 'inline'
+        }
+
+        this.LReflex = {
+            name: 'LReflex',
+            w: width / 2, h: 30,
+            margin: { left: 3, top: 2, right: 5, bottom: 2 },
+            display: 'block'
+        }
+
+        this.report = {
+            name: 'report',
+            w: width, h: 20,
+            margin: { left: 1, top: 1, right: 1, bottom: 1 },
+            display: 'block'
+        }
+
+        this.footer = {
+            name: 'footer',
+            w: width, h: 10,
+            margin: { left: 1, top: 1, right: 1, bottom: 1 },
+            display: 'block'
+        }
+    },
+
+    calc2: function () {
+        // let dims = this.dims;
+        let width, height;
+
+        width = this.header.width = this.getWidth(this.header)
+        height = this.header.height = this.getHeight(this.header)
+
+        this.header.elements = [
+            { type: 'line', x1: 0, y1: height, x2: width, y2: height },
+            { type: 'text', x: 30, y: 5, value: 'تاریخ :' },
+        ]
+        this.header.inputs = [
+            { name: 'officeName', x: width - 20, y: height - 10 },
+            { name: 'date', x: 20, y: 5 },
+        ]
+
+        width = this.patient.width = this.getWidth(this.patient)
+        this.patient.height = this.getHeight(this.patient)
+        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 - 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 }
+        ]
+        this.patient.forceInputs = [
+            { name: 'name', x: width - 10, y: 4 },
+            { name: 'lastName', x: width - 47, y: 5 },
+            { name: 'age', x: width - 97, y: 5 },
+            { name: 'referrer', x: width - 142, y: 5 }
+        ]
+
+        width = this.history.width = this.getWidth(this.history)
+        this.history.height = this.getHeight(this.history)
+        this.history.elements = [
+            { type: 'line', x1: 0, y1: 20, x2: width, y2: 20 },
+            { type: 'text', x: width, y: 5, value: 'شرح حال:' },
+        ]
+        this.history.inputs = [
+            { name: 'description', x: width - 13, y: 5 },
+        ]
+
+        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.RReflex.width = this.getWidth(this.RReflex)
+        this.RReflex.height = this.getHeight(this.RReflex)
+        width = this.LReflex.width = this.getWidth(this.LReflex)
+        this.LReflex.height = this.getHeight(this.LReflex)
+
+        width = this.report.width = this.getWidth(this.report)
+        this.report.height = this.getHeight(this.report)
+        this.report.elements = [
+            { type: 'text', x: width, y: 5, value: 'گزارش:' },
+        ]
+        this.report.inputs = [
+            { name: 'description', x: width - 10, y: 5 },
+        ]
+
+        width = this.footer.width = this.getWidth(this.footer)
+        this.footer.height = this.getHeight(this.footer)
+        this.footer.elements = [
+            { type: 'line', x1: 0, y1: 0, x2: width, y2: 0 },
+            { type: 'text', x: width, y: 5, value: 'آدرس:' },
+            { type: 'text', x: width - 120, y: 5, value: 'تلفن:' },
+        ]
+        this.footer.inputs = [
+            { name: 'address', x: width - 10, y: 5 },
+            { name: 'tel', x: width - 128, y: 5 },
+        ]
+    },
+
+    getWidth: function (element) {
+        return (element.w - (element.margin.left + element.margin.right))
+    },
+    getHeight: function (element) {
+        return (element.h - (element.margin.top + element.margin.bottom))
+    },
+
+    calcSectionsArray: function () {
+        // این آرایه دقیقا ترتیب قرارگیری سکشن ها را بدون اون اوردر قبلی تعیین میکند
+        this.sections = [
+            this.blank,
+            this.patient,
+            // this.history,
+            // this.RAudiogram,
+            // this.LAudiogram,
+            // this.RSpeech,
+            // this.LSpeech,
+            this.RTympanogram, this.LTympanogram,
+            this.RReflex, this.LReflex,
+            // this.report,
+            // this.footer
+
+        ]
+    },
+
+}
+
+rasaTymp.calc1()
+rasaTymp.calc2()
+rasaTymp.calcSectionsArray()
+// پهنا و ارتفاع قابل استفاده منهای پد ها میشه پهنا و ارتفاع اصلی
+
+export default rasaTymp;
+

package/src/common/putRect.js

@@ -1,12 +1,13 @@
 const svgNS = "http://www.w3.org/2000/svg";
 
-export default function putRect({ container, x, y, width, height, style = 'fill: transparent; stroke: green; stroke-width: 0.5;', name }) {
+export default function putRect({ container, x, y, width, height, style = 'fill: transparent; stroke: green; stroke-width: 0.5;', name, className }) {
     let rect = document.createElementNS(svgNS, "rect");
     rect.setAttribute("x", x);
     rect.setAttribute("y", y);
     rect.setAttribute("width", width);
     rect.setAttribute("height", height);
     rect.setAttribute("style", style);
+    className && rect.setAttribute("class", className);
     rect.setAttribute("data-name", name);
     container.appendChild(rect);
     return rect;

package/src/style.css

@@ -1,8 +1,9 @@
 @font-face {
   font-family: vazirmatn;
   src:
-    url("./fonts/Vazirmatn-Regular.woff2") format("woff2"),
-    url('./fonts/Vazirmatn-Regular.woff') format('woff');
+    url("fonts/Vazirmatn-Regular.woff2") format("woff2"),
+    url('fonts/Vazirmatn-Regular.woff') format('woff');
+  font-display: swap;
 
 }
 
@@ -32,6 +33,28 @@
   font-weight: bold;
 }
 
+.container {
+  display: flex;
+  /* Use flexbox to align items */
+  align-items: center;
+  /* Center items vertically */
+}
+
+.left {
+  /* background-color: lightblue; */
+  padding: 20px;
+  margin-right: 10px;
+  /* Space between the two divs */
+}
+
+.right {
+  /* background-color: lightgreen; */
+  margin-left: 10px;
+  
+  /* padding: 20px; */
+}
+
+
 /* :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
@@ -149,4 +172,4 @@ button:focus-visible {
 
 /* body {
   font-family: vazirmatn;
-} */
+} */