hayun-vite 0.0.0 → 0.0.2

package/src/Form/Forms.js

@@ -0,0 +1,135 @@
+const svgNS = "http://www.w3.org/2000/svg";
+
+import printForm from "./printForm.js";
+import Form from "./Form.js";
+import combo from "./templates/combo.js"; // این در حقیقیت یک تمپلت هست
+import rasaAud from "./templates/rasaAud.js";
+import rasaAudImage from './templates/rasaAud.png'
+import '../fonts/Vazirmatn-Regular.woff2'
+import '../style.css'
+ 
+// کلاس جدید که فرم‌های مختلف را نمایش میدهد
+export default class Forms {
+    constructor({ assets, container } = {}) {
+        // ایجاد یک دیو برای قرار دادن دکمه ها و لینک های فرم
+        const div = document.createElement('div');
+        div.style = 'border: 1px solid brown; margin: 0; padding: 0;'
+        container.appendChild(div);
+        // اضافه کردن دکمه به دیو فرم
+        const btn1 = this.putButton({ container: div, text: 'پرنده پرپر' });
+        const btn2 = this.putButton({ container: div, text: combo.label });
+        const printBtn = this.putButton({ container: div, text: 'Print', id: 'print' });
+
+        // یک دیو تعریف میکنیم که سمت ادیولاگ برای تعریف لیستنر استفاده می‌شود
+        this.div = document.createElement('div'); // این بخش فقط شامل بخش اس‌وی‌جی هست
+        container.appendChild(this.div)
+
+        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]
+
+        // تعریف رویداد دکمه چاپ فرم نمایشی
+        printBtn.addEventListener('click', () => { printForm({ container: this.selectedForm.form }) })
+
+        btn1.addEventListener('click', () => {
+            this.forms[1].form.style.display = 'none'
+            // this.forms[2].form.style.display = 'none'
+            this.forms[0].form.style.display = 'block';
+            this.selectedForm = this.forms[0];
+            this.update(this.allData);
+
+        });
+
+        btn2.addEventListener('click', () => {
+            this.forms[0].form.style.display = 'none'
+            // this.forms[2].form.style.display = 'none'
+            this.forms[1].form.style.display = 'block';
+            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();
+    }
+
+    event() {
+        this.div.addEventListener('click', (e) => {
+            console.log(e.target);
+        })
+    }
+    // این تابع یک بار از بیرون کلاس فراخوانی میشه و یک بار وقتی از داخل تمپلت فرم را عوض میکنیم
+    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, }) {
+        let style
+        //     style = `
+        //     background-color:rgb(0, 149, 149);
+        //     /* Green background */
+        //     border: none;
+        //     /* Remove borders */
+        //     color: white;
+        //     /* White text */
+        //     padding: 15px 32px;
+        //     /* Some padding */
+        //     text-align: center;
+        //     /* Centered text */
+        //     text-decoration: none;
+        //     /* Remove underline */
+        //     display: inline-block;
+        //     /* Make the button inline */
+        //     font-size: 16px;
+        //     /* Increase font size */
+        //     margin: 4px 2px;
+        //     /* Add some margin */
+        //     cursor: pointer;
+        //     /* Pointer cursor on hover */
+        //     border-radius: 8px;
+        //     /* Rounded corners */
+        //     transition: background-color 0.3s;
+        //     /* Smooth transition */
+        // `;
+        const button = document.createElement('button');
+        button.setAttribute('id', id);
+        button.setAttribute('style', style);
+        button.innerHTML = text;
+
+        // button.addEventListener('mouseenter', () => {
+        //     button.style.backgroundColor = 'rgb(54, 115, 115)'; // Change color on hover
+        // });
+        // button.addEventListener('mouseleave', () => {
+        //     button.style.backgroundColor = 'rgb(0, 149, 149)'; // Revert color when not hovering
+        // });
+
+        container.appendChild(button);
+        return button;
+
+    }
+}

package/src/Form/Header.js

@@ -0,0 +1,92 @@
+import putLine from "../common/putLine.js";
+import putRect from "../common/putRect.js";
+import putText from "../common/putText.js";
+const svgNS = "http://www.w3.org/2000/svg";
+
+export default class Header {
+    constructor({ container }) {
+        this.container = container;
+    }
+
+    draw({ dims, stroke = true }) {
+
+        this.inputs = dims.inputs
+        let value;
+        let width = dims.width;
+        let height = dims.height;
+        let x = dims.margin.left;
+        let y = dims.margin.top;
+
+        const svg = document.createElementNS(svgNS, "svg");
+        svg.setAttribute("x", x);
+        svg.setAttribute("y", y);
+        svg.setAttribute("width", width);
+        svg.setAttribute("height", height);
+        svg.setAttribute('style', 'direction: rtl !important; user-select: none;')
+
+        // Logo 
+        let image = document.createElementNS(svgNS, "image");
+        image.setAttribute("data-name", "officeLogo")
+        image.setAttribute("width", "17");
+        image.setAttribute("height", "17");
+        image.setAttribute("x", width - 16);
+        image.setAttribute("y", 0.5);
+        svg.appendChild(image);
+
+        let style = `
+            user-select: none;
+            direction: rtl;
+            /* text-align: center; */
+            font-family: vazirmatn;
+            font-size: 0.8mm;
+            font-weight: bolder;
+            text-anchor: start; /*تراز افقی*/
+            dominant-baseline: auto; /* تراز عمودی*/  
+        `;
+
+        // اگر مقدار استروک درست بود لیبل ها را چاپ کن
+        if (!dims.hideContext) {
+            dims.elements.forEach(element => {
+                switch (element.type) {
+                    case 'text':
+                        ({ x, y, value } = element);
+
+                        putText({ container: svg, value, x, y, style: style });
+                        break;
+                    case 'line':
+                        let { x1, y1, x2, y2 } = element;
+                        putLine({ container: svg, x1, y1, x2, y2 });
+                        break;
+                }
+            });
+        }
+
+        style = `
+            font-family: Arial, Helvetica, sans-serif !important;
+            font-size: 0.8mm;
+            font-weight: bold;
+            text-anchor: start; /*تراز افقی*/
+            /* dominant-baseline: middle; /* تراز عمودی*/       
+        `;
+        // محل اینپوت‌های دیتا
+        let name;
+        dims.inputs.forEach(input => {
+            ({ name, x, y } = input);
+            putText({ container: svg, x, y, style: style, name });
+        });
+
+        // مربع احاطه‌کننده کل جدول برای راهنمای توسعه
+        const borderRect = putRect({ container: svg, x: 0, y: 0, width, height, name: "header" });;
+        this.borderRect = borderRect;
+        this.container.appendChild(svg);
+        // this.header = svg;
+    }
+
+    update(data) {
+        this.container.querySelector("[data-name=officeName]").innerHTML = data?.officeName || "";
+        this.container.querySelector("[data-name=date]").innerHTML = data?.createDate || "";
+        this.container.querySelector("[data-name=officeLogo]").setAttribute("href", data?.officeLogo || "");
+
+    }
+
+}

package/src/Form/Reflex.js

@@ -0,0 +1,142 @@
+import putRect from "../common/putRect.js";
+import putText from "../common/putText.js";
+
+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 }) {
+        let width = dims.width;
+        let height = dims.height;
+        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);
+        svg.setAttribute("height", height);
+        svg.setAttribute("class", "reflex");
+
+        let lable = ["", "500", "1000", "2000", "4000"]; // مقادیر برچسب‌های سطر اول
+        let cw1 = width / 6; // پهنای خانه‌های سطر اول
+        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: 0.8mm;
+            font-weight: bold;
+            text-anchor: middle; /*تراز افقی*/
+            dominant-baseline: middle; /* تراز عمودی*/       
+        `;
+        lable.forEach((value, i) => {
+            if (value != "") {
+                let x = cw1 / 2 + cw1 * (i + 1);
+                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: 0.8mm;
+            font-weight: bold;
+            text-anchor: end; /*تراز افقی*/
+            dominant-baseline: middle; /* تراز عمودی*/       
+        `;
+        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 })
+
+        //چاپ ده باکس سطر دوم و سوم
+        for (let j = 1; j <= 2; j++) {
+            for (let i = 2; i <= 5; i++) {
+                let x = cw1 / 2 + cw1 * i;
+                let y = ch1 * j + ch2 / 2;
+                let bw = cw1 * 0.80; // پهنای هر باکس
+                let bh = ch2 * 0.80; // ارتفاع هر باکس
+                //رسم باکس با مختصات مرکز باکس
+                putBox(x, y, bw, bh);
+            }
+        }
+
+        style = `
+            user-select: none;
+            direction: ltr !important;
+            /* text-align: center; */
+            font-family: Arial, Helvetica, sans-serif !important;
+            font-size: 0.8mm;
+            text-anchor: middle; /*تراز افقی*/
+            dominant-baseline: middle; /* تراز عمودی*/       
+        `;
+        let names = ["IPSI_500", "IPSI_1000", "IPSI_2000", "IPSI_4000"];
+        for (let index = 0; index < 4; index++) {
+            x = cw1 / 2 + cw1 * (index + 2);
+            y = ch1 + ch2 / 2;
+            putText({ container: svg, value: "", x: x, y: y, style: 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 + 2);
+            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);
+        this.chart = svg;
+        // return svg;
+
+        // توابع داخلی مورد نیاز
+        function putBox(x, y, w, h) {
+            let rect = document.createElementNS(svgNS, "rect");
+            rect.setAttribute("x", x - w / 2);
+            rect.setAttribute("y", y - h / 2);
+            rect.setAttribute("width", w);
+            rect.setAttribute("height", h);
+            rect.setAttribute("style", "fill: transparent; stroke: black; stroke-width: 0.2;");
+            svg.appendChild(rect);
+        }
+    }
+
+    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"] || "";
+    }
+}

package/src/Form/Sections.js

@@ -0,0 +1,72 @@
+export default class Sections {
+    constructor({ container, dims }) {
+        this.dims = dims
+        // console.log(this.dims.sections);
+        this.container = container;
+        this.margins = dims.margin;
+
+        this.width = dims.width;
+        this.height = dims.height;
+
+        this.left = 0; // برای این فعلا برنامه ای ندارم وقتی دو سکشن در یک خط لازم شد میام سراغش
+        this.top = 0;
+        // از پایینی برای رسم تاپ لایر استفاده میکنم
+        this.cords = []; // آرایه نگهداری مختصات و طول و عرض هر سکشن
+
+        // یک حلقه آرایه ایجاد میکنیم همه سکشن ها رسم شود
+        this.create()
+
+
+
+    }
+    // ایجاد سکشن‌ها
+    create() {
+        // console.log(this.dims.sections);
+        const margins = this.margins;
+
+        this.dims.sections.forEach(section => {
+            let name = section.name;
+            let width = section.w;
+            let height = section.h;
+            const display = section.display;
+            // اگر مقدار دیسپلی اینلاین بود به بلوک بعد نمیره
+
+            // یک کادر چهارگوش با نام 
+            const svgNS = "http://www.w3.org/2000/svg";
+            // const w = dims.header.width, h = dims.header.height;
+            const svg = document.createElementNS(svgNS, "svg");
+            svg.setAttribute("data-name", name);
+            svg.setAttribute("width", width);
+            svg.setAttribute("height", height);
+            svg.setAttribute("x", this.left);
+            svg.setAttribute("y", this.top);
+
+            // نگهداری مختصات رسم بوردر هر سکشن برای استفاده در متد داخلی رسم بودر تاپ لایر 
+            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);
+            this[name] = svg;
+            this.container.appendChild(svg)
+
+            // به روز کردن ارتفاع نقطه خالی برای رسم سکشن بعدی
+            // با توجه بلاک یا اینلاین بودن سکشن بالا و چپ را تغییر بده
+            // else { this.left = margins.left; this.top += height; }
+            if (display === 'block') { this.left = 0; this.top += height; }
+            if (display === 'inline') { this.left += width; }
+
+
+            // if (this.left >= this.width) { this.left = margins.left; this.top += height; }
+        });
+    }
+
+}

package/src/Form/Speech.js

@@ -0,0 +1,133 @@
+import putRect from "../common/putRect.js";
+import putText from "../common/putText.js";
+
+const svgNS = "http://www.w3.org/2000/svg";
+
+export default class Speech {
+    constructor({ container, side = 'R' }) {
+        this.container = container;
+    }
+
+    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;
+        // const inputs = dims.inputs;
+        const cn = labels.length;
+
+        this.labels = labels;
+
+
+
+        let sideCaption = this.side === "R" ? "Right" : "Left";
+        // یک جدول 6*2  - ۲ سطر و ۶ ستون
+        // const cw = width / 6; // پهنای هر خانه
+        const cw = width / (cn + 1); // پهنای هر خانه
+        const ch = height / 2; // ارتفاع هر خانه
+        // بوردر کل چارت
+        const svg = document.createElementNS(svgNS, "svg");
+        // svg.setAttribute("id", id);
+        svg.setAttribute("x", x);
+        svg.setAttribute("y", y);
+        svg.setAttribute("width", width);
+        svg.setAttribute("height", height);
+        svg.setAttribute("class", "speach");
+
+        style = `
+                user-select: none;
+                direction: ltr !important;
+                /* text-align: center; */
+                font-family: Arial, Helvetica, sans-serif !important;
+                font-size: 0.8mm;
+                font-weight: bold;
+                text-anchor: middle; /*تراز افقی*/
+                dominant-baseline: hanging; /* تراز عمودی*/       
+            `;
+        // const lables = ["SAT", "SRT", "MCL", "UCL", "SDS"]; // مقادیر برچسب‌های سطر اول
+        // let cw1 = width / 6; // پهنای خانه‌های سطر اول
+        let cw1 = width / (cn + 1); // پهنای خانه‌های سطر اول
+        let ch1 = height / 2; // ارتفاع خانه‌های سطر اول
+        let ch2 = height / 2; // ارتفاع خانه‌های سطر دوم
+
+        if (!dims.hideContext) {
+            // چاپ برچسب‌های سطر اول
+            labels.forEach((value, i) => {
+                let x = cw1 / 2 + cw1 * (i + 1);
+                let y = ch1 / 2;
+                putText({ container: svg, value, x, y, style });
+            })
+            //چاپ پنج باکس سطر دوم
+            for (let i = 1; i <= 5; i++) {
+                let x = cw1 / 2 + cw1 * i;
+                let y = ch1 + ch2 / 2;
+                let bw = cw1 * 0.80; // پهنای هر باکس
+                let bh = ch2 * 0.80; // ارتفاع هر باکس
+                //رسم باکس با مختصات مرکز باکس
+                putBox({ x, y, w: bw, h: bh });
+            }
+
+            style += 'text-anchor: start; dominant-baseline: middle; /* تراز عمودی*/ ';
+            // برچسب راست و چپ سطر دوم
+            putText({ container: svg, value: sideCaption, x: cw1 / 2, y: ch1 + ch2 / 2, style: style }); //با استایل تراز عمودی وسط  نسبت به خط پایه
+        }
+        // در سطر دوم
+        // اینپوت‌ها
+        style += 'text-anchor: middle; dominant-baseline: middle; /* تراز عمودی*/ ';
+
+
+        // New
+        if (!dims.forceInsert) {
+            let index = 0;
+            labels.forEach(label => {
+                index++
+                x = cw1 / 2 + cw1 * index;
+                y = ch1 + ch2 / 2;
+                putText({ container: svg, value: "", x: x, y: y, style: style, name: label })
+            })
+        } 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;';
+        putRect({ container: svg, x: 0, y: 0, width, height, style, name: dims.name })
+        this.chart = svg;
+        this.container.appendChild(svg);
+
+        // توابع داخلی مورد نیاز
+        // تابع رسم نقطه برای راهنمای نقاط
+        function putBox({ x, y, w, h, style }) {
+            let rect = document.createElementNS(svgNS, "rect");
+            rect.setAttribute("x", x - w / 2);
+            rect.setAttribute("y", y - h / 2);
+            rect.setAttribute("width", w);
+            rect.setAttribute("height", h);
+            rect.setAttribute("style", "fill: transparent; stroke: black; stroke-width: 0.2;");
+            svg.appendChild(rect);
+        }
+    }
+
+    update(data) {
+        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/TextBox.js

@@ -0,0 +1,81 @@
+import putLine from "../common/putLine.js";
+import putRect from "../common/putRect.js";
+import putText from "../common/putText.js";
+const svgNS = "http://www.w3.org/2000/svg";
+
+export default class TextBox {
+    constructor({ container }) {
+        this.container = container;
+    }
+    draw({ dims, stroke = true }) {
+        // دریافت اطلاعات مختصات چاپ ورودی ها به جز عادی محاسبه شده 
+        this.inputs = (dims.forceInsert) ? dims.forceInputs : dims.inputs
+
+        let value;
+        let width = dims.width;
+        let height = dims.height;
+        let x = dims.margin.left;
+        let y = dims.margin.top;
+
+        let style;
+        // بوردر کل چارت
+        const svg = document.createElementNS(svgNS, "svg");
+        svg.setAttribute("x", x);
+        svg.setAttribute("y", y);
+        svg.setAttribute("width", width);
+        svg.setAttribute("height", height);
+        svg.setAttribute('style', 'direction: rtl !important; user-select: none;')
+
+        style = `
+            font-family: Arial, Helvetica, sans-serif !important;
+            font-size: 0.8mm;
+            font-weight: bold;
+            text-anchor: start; /*تراز افقی*/
+            /* dominant-baseline: middle; /* تراز عمودی*/       
+        `;
+        // اگر مقدار استروک درست بود لیبل ها را چاپ کن
+        if (!dims.hideContext) {
+            dims.elements.forEach(element => {
+                switch (element.type) {
+                    case 'text':
+                        ({ x, y, value } = element);
+                        putText({ container: svg, value, x, y, style: style });
+                        break;
+                    case 'line':
+                        let { x1, y1, x2, y2 } = element;
+                        putLine({ container: svg, x1, y1, x2, y2 });
+                        break;
+                }
+            });
+        }
+
+        style = `
+            font-family: Arial, Helvetica, sans-serif !important;
+            font-size: 0.8mm;
+            text-anchor: start; /*تراز افقی*/
+            /* dominant-baseline: middle; /* تراز عمودی*/       
+        `;
+        // محل اینپوت‌های دیتا
+
+        let name;
+        this.inputs.forEach(input => {
+            ({ name, x, y } = input);
+            putText({ container: svg, x, y, style: style, name });
+        });
+
+        // مربع احاطه‌کننده کل جدول برای راهنمای توسعه
+        const borderRect = putRect({ container: svg, x: 0, y: 0, width, height, name: dims.name });
+        this.borderRect = borderRect;
+        // console.log(dims);
+        
+        this.container.appendChild(svg)
+        // this.patient = svg;
+
+    }
+
+    update(data) {
+        this.inputs.forEach(input => {
+            this.container.querySelector(`text[data-name=${input.name}]`).innerHTML = data?.[input.name] || "";
+        });
+    }
+}