hayun-vite 0.10.1 → 0.11.1

package/src/Audiogram/dims_box.js

@@ -0,0 +1,125 @@
+const dims = {
+    name: 'Audiogram',
+    margin: { left: 0, top: 0, }, // در کانتینر دیو این عمل نمیکنه. مگر در کانتینر اس وی جی بذاریم
+
+    // واحد ویوباکس - بدون واحد
+    vbWidth: 700, // برای اینکه ضخامت خطوط تغییری ناهنجار نکند این ثابت میماند 
+    vbHeight: 750, // این به نسبت تغییر می‌کند
+
+    // واحد پیکسل، میلیمتر، ...
+    // اگر واحد پایینی توسط بیرون تغییر کرد واحدهای بالایی باید با نسبت پایینی تغییر کنند
+    width: 700,
+    height: 700 ,
+
+    // این فاصله خطوط محورهای بالا و چپ ادیوگرام از لبه ها هست
+    chartPadding: { left: 40, top: 40, right: 30, bottom: 20 },
+    symbolDims: { width: 55, height: 55 },
+    symbolsChart: {
+        width: 240, height: 60
+    },
+    // 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;`,
+    },
+
+    // پس از اضافه کردن هر آیتم در زیر این تمپلت رو هم آپدیت کنید
+    // 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,15 +1,13 @@
-// import Symbols from "../Symbol/Symbols.js";
-import Box from "./Box.js";
-import Header from "./Header.js";
-import Reflex from "./Reflex_N.js";
+import Header from "../Header/Header.js";
+import Reflex from "../Reflex/Reflex.js";
 import Sections from "./Sections.js";
-import Speech from "./Speech_N.js";
-import Tympanogram from "./Tympanogram.js";
+import Speech from "../Speech/Speech.js";
+import Tympanogram from "../Tympanogram/Tympanogram.js";
 import putRect from "../common/putRect.js";
 import AudiogramChart from "../Audiogram/Audiogram.js";
+import MultiText from "../MultiText/MultiText.js";
 const svgNS = "http://www.w3.org/2000/svg";
 
-
 export default class Form {
     constructor({ container, template } = {}) {
         this.template = template;
@@ -18,6 +16,7 @@ export default class Form {
         let { width, height, margin, paper } = template;
         this.form = this.create({ paper, margin });
         this.form.style.display = 'none';
+        let dims;
         // رسم مارجین های فرم
         this.drawMarginLines({ container: this.form, width, height });
 
@@ -29,18 +28,17 @@ export default class Form {
             this.header.draw({ dims: template.header });
         }
         if (sections.patient) {
-            // (template.label === 'تمپانومتری رسا') && console.log(template.patient);
-
-            this.patient = new Box({ container: sections.patient });
-            this.patient.draw({ dims: template.patient });
+            dims = template.patient;
+            this.patient = new MultiText({ container: sections.patient, dims });
         }
         if (sections.history) {
-            this.history = new Box({ container: sections.history })
-            this.history.draw({ dims: template.history });
+            dims = template.history;
+            this.history = new MultiText({ container: sections.history, dims })
+            // this.history.draw({ dims: template.history });
         }
         if (sections['Audiogram Titles']) {
-            const titles = new Box({ container: sections['Audiogram Titles'] });
-            titles.draw({ dims: template['Audiogram Titles'] });
+            dims = template['Audiogram Titles'];
+            new MultiText({ container: sections['Audiogram Titles'], dims });
         }
         if (sections.RAudiogram) {
             this.RAudiogram = new AudiogramChart({
@@ -48,7 +46,7 @@ export default class Form {
                 dims: template.RAudiogram,
                 side: 'R',
                 events: false
-            });
+            })
         }
         if (sections.LAudiogram) {
             this.LAudiogram = new AudiogramChart({
@@ -56,53 +54,51 @@ export default class Form {
                 dims: template.LAudiogram,
                 side: 'L',
                 events: false
-            });
+            })
         }
         if (sections['Speech Titles']) {
-            const titles = new Box({ container: sections['Speech Titles'] });
-            titles.draw({ dims: template['Speech Titles'] });
+            dims= template['Speech Titles'];
+            const titles = new MultiText({ container: sections['Speech Titles'], dims });
         }
         if (sections['RSpeech']) {
-            this.RSpeech = new Speech({ container: sections.RSpeech, side: 'R' })
-            this.RSpeech.draw({ dims: template.RSpeech, })
+            dims= template.RSpeech
+            this.RSpeech = new Speech({ container: sections.RSpeech, side: 'R', dims})
         }
         if (sections.LSpeech) {
-            this.LSpeech = new Speech({ container: sections.LSpeech, side: 'L' })
-            this.LSpeech.draw({ dims: template.LSpeech, });
+            dims= template.LSpeech
+            this.LSpeech = new Speech({ container: sections.LSpeech, side: 'L', dims })
         }
         if (sections['Tympanogram Titles']) {
-            const titles = new Box({ container: sections['Tympanogram Titles'] });
-            titles.draw({ dims: template['Tympanogram Titles'] });
+            dims= template['Tympanogram Titles'];
+            new MultiText({ container: sections['Tympanogram Titles'], dims });
         }
         if (sections.RTympanogram) {
-            this.RTympanogram = new Tympanogram({ container: sections.RTympanogram, side: 'R' })
-            this.RTympanogram.draw({ dims: template.RTympanogram });
+            dims= template.RTympanogram 
+            this.RTympanogram = new Tympanogram({ container: sections.RTympanogram, side: 'R', dims })
         }
         if (sections.LTympanogram) {
-            this.LTympanogram = new Tympanogram({ container: sections.LTympanogram, side: 'L' })
-            this.LTympanogram.draw({ dims: template.LTympanogram });
+            dims= template.LTympanogram
+            this.LTympanogram = new Tympanogram({ container: sections.LTympanogram, side: 'L', dims })
         }
-
-         if (sections['Reflex Titles']) {
-            const titles = new Box({ container: sections['Reflex Titles'] });
-            titles.draw({ dims: template['Reflex Titles'] });
+        if (sections['Reflex Titles']) {
+            dims= template['Reflex Titles'];
+            const titles = new MultiText({ container: sections['Reflex Titles'], dims });
         }
-
         if (sections.RReflex) {
-            this.RReflex = new Reflex({ container: sections.RReflex, side: 'R' })
-            this.RReflex.draw({ dims: template.RReflex });
+            dims= template.RReflex
+            this.RReflex = new Reflex({ container: sections.RReflex, side: 'R', dims })
         }
         if (sections.LReflex) {
-            this.LReflex = new Reflex({ container: sections.LReflex, side: 'L' })
-            this.LReflex.draw({ dims: template.LReflex });
+            dims= template.LReflex
+            this.LReflex = new Reflex({ container: sections.LReflex, side: 'L', dims })
         }
         if (sections.report) {
-            this.report = new Box({ container: sections.report })
-            this.report.draw({ dims: template.report });
+            dims= template.report;
+            this.report = new MultiText({ container: sections.report, dims })
         }
         if (sections.footer) {
-            this.footer = new Box({ container: sections.footer })
-            this.footer.draw({ dims: template.footer });
+            dims= template.footer;
+            this.footer = new MultiText({ container: sections.footer, dims})
         }
 
         this.container.appendChild(this.form);

package/src/Form/Form_N.js

@@ -0,0 +1,194 @@
+import Box from "./Box.js";
+import Header from "../Header/Header_N.js";
+import Reflex from "../Reflex/Reflex.js";
+import Sections from "./Sections_N.js";
+import Speech from "../Speech/Speech_N.js";
+import Tympanogram from "../Tympanogram/Tympanogram.js";
+import putRect from "../common/putRect.js";
+import Audiogram from "../Audiogram/Audiogram_N.js";
+import mainTemplate from "../../assets/templates/mainTemplate.js";
+import putSVG from "../common/putSVG.js";
+import MultiText from "../MultiText/MultiText.js";
+const svgNS = "http://www.w3.org/2000/svg";
+
+export default class Form {
+    constructor({ container, template } = {}) {
+        this.template = mainTemplate;
+        this.container = container;
+        this.data = {};
+        let { width, height, margin, paper, sections } = mainTemplate;
+
+        this.form = this.create({ paper, margin }); // Printable Area
+
+        this.form.style.display = 'none'; // فرم نامرئی ایجاد میشود و بعدا مرئی می‌شود
+        // رسم مارجین های فرم
+        this.drawMarginLines({ container: this.form, width, height });
+
+        sections.forEach(section => {
+            this.createSection(section)
+            this.createBox(section)
+
+            const box = section.box
+
+            switch (section.name) {
+                case 'header':
+                    const header = new Header({ box })
+                    break;
+                case 'patientInfo':
+                    const patientInfo = new MultiText({ box })
+                    break;
+                case 'history':
+                    break;
+                case 'RAudiogram':
+                    const RAudiogram = new Audiogram({ box, side: 'R', events: false })
+                    break;
+                case 'LAudiogram':
+                    // const LAudiogram = new Audiogram({ container: box.container, side: 'L', dims: box, events: false })
+                    break;
+                case 'RSpeech':
+                    const RSpeech = new Speech({ box })
+                    break;
+
+                default:
+                    break;
+            }
+        });
+
+        // this.createBox(sections[0])
+        // this.createElements(sections[0].box)
+        // let box = sections[0].box
+
+        // const header = new Header({ box })
+
+        // box = sections[1].box
+
+
+
+        this.container.appendChild(this.form);
+    }
+
+    // Sections With Brown Color Border
+    createSection(section) {
+        // console.log(dims);
+        const { width, height, top, left } = section;
+        const style = ['fill: transparent', 'stroke: brown', 'stroke-width: 0.2'].join(';')
+        const container = putSVG({ container: this.form, x: left, y: top, width, height })
+
+        putRect({ container, x: 0, y: 0, width, height, style })
+        // اضافه کردن پراپرتی اس‌وی‌جی به آبجکت سکشن
+        section['container'] = container;
+        // console.log(section);
+
+    }
+
+    // Boxes Width Blue Color Border
+    createBox(section) {
+        const { width, height, margin } = section.box
+        const style = ['fill: transparent', 'stroke: blue', 'stroke-width: 0.2'].join(';')
+        const container = putSVG({ container: section.container, x: margin.left, y: margin.top, width, height })
+        putRect({ container, x: 0, y: 0, width, height, style })
+
+        section.box.container = container
+    }
+
+
+
+    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 (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)
+            // image.setAttribute('height', height);
+            image.setAttribute('href', backgroundImage)
+
+            svg.appendChild(image)
+        }
+        return svg
+    }
+
+    update({ data, officeData, patientData, sessionIndex = 0 }) {
+
+        /*
+        const session = patientData.sessions[sessionIndex]
+        // Prevent undefined error 
+        if (!data) {
+            data = {
+                common: {
+                    audiometer: "",
+                    tympanometers: "",
+                },
+                header: {
+                    officeName: officeData.name,
+                    officeLogo: officeData.logo,
+                    createDate: patientData.sessions[sessionIndex]?.createDate,
+                },
+                patient: {
+                    name: patientData.name,
+                    lastName: patientData.lastName,
+                    gender: patientData?.gender,
+                    // خط زیر محاسبه درست سن هست. موقتا کامنت می‌شود تا در اپ اصلی فیلد سن رو در سشن ها قرار دهیم
+                    // age: patientData.sessions[sessionIndex]?.age,
+                    age: patientData?.age,
+                    referrer: patientData.sessions[sessionIndex]?.referrer,
+                    date: new Date().toLocaleDateString('fa-IR'),
+
+                },
+                footer: {
+                    address: officeData.addresses[0],
+                    tel: officeData.tels[0],
+                },
+                id: +sessionIndex + 1,
+            };
+            // data = { audiogram: {}, common: {}, footer: {}, header: {}, patient: {}, reflex: {}, report: {}, speech: {}, tympanometry: {} }
+        }
+        // get array of keys (audiogram, header, footer, ...)
+        let keys = Object.keys(data)
+        this.header?.update(data.header)
+        this.patient?.update(data.patient)
+        this.history?.update(session?.history)
+        this.data.history = session.history;
+        this.RAudiogram?.update({ data: session.audiogram?.R, side: 'R' })
+        this.LAudiogram?.update({ data: session.audiogram?.L, side: 'L' })
+        this.data.audiogram = session.audiogram
+        this.RSpeech?.update(session.speech?.R)
+        this.LSpeech?.update(session.speech?.L)
+        this.data.speech = session.speech
+        this.RTympanogram?.update(session.tympanogram?.R)
+        this.LTympanogram?.update(session.tympanogram?.L)
+        this.data.tympanogram = session.tympanogram;
+        this.RReflex?.update(session.reflex?.R)
+        this.LReflex?.update(session.reflex?.L)
+        this.data.tympanogram = session.reflex;
+        this.report?.update(session.report)
+        this.data.report = session.report;
+        this.footer?.update(data?.footer)
+        this.data.footer = data.footer;
+        */
+    }
+
+    // خطوط نقطه چین مارجین فرم
+    drawMarginLines({ container, width, height }) {
+
+        const style = `
+            stroke: black;
+			stroke-width: 0.3;
+			stroke-opacity: 0.5;
+            stroke-dasharray: 0.5;
+            fill: transparent;
+        `;
+
+        putRect({ container, x: 0, y: 0, width, height, style, className: 'no-print' })
+    }
+}

package/src/Form/Forms.js

@@ -47,8 +47,6 @@ export default class Forms {
         this.selectedForm = this.forms[selectedIndex];
         (this.mode == 'develop') && (btns[selectedIndex].style.backgroundColor = ' #1c15e1');
 
-        console.log(this.mode);
-
         if (this.mode == 'develop') {
 
             const printBtn = this.putButton({ container: div, text: 'چاپ', className });

package/src/Form/Sections.js

@@ -6,19 +6,13 @@ export default class Sections {
         // 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.sectionBorders = dims.sectionBorders;
-        console.log(this.sectionBorders);
-
-
         // یک حلقه آرایه ایجاد میکنیم همه سکشن ها رسم شود
         this.create()
     }

package/src/Form/Sections_N.js

@@ -0,0 +1,66 @@
+import putRect from "../common/putRect";
+
+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.sectionBorders = dims.sectionBorders;
+        // یک حلقه آرایه ایجاد میکنیم همه سکشن ها رسم شود
+        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, width, height, x: this.left, y: this.top });
+
+            // Section Border
+            (this.sectionBorders == 'display') &&
+                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)
+
+            // به روز کردن ارتفاع نقطه خالی برای رسم سکشن بعدی
+            // با توجه بلاک یا اینلاین بودن سکشن بالا و چپ را تغییر بده
+            // 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 → Header}/Header.js

@@ -4,13 +4,12 @@ import putSVG from "../common/putSVG.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 }) {
+    draw({ dims }) {
 
         this.inputs = dims.inputs
         let value;
@@ -76,7 +75,5 @@ export default class Header {
         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/Header/Header_N.js

@@ -0,0 +1,72 @@
+import putLine from "../common/putLine.js";
+import putRect from "../common/putRect.js";
+import putSVG from "../common/putSVG.js";
+import putText from "../common/putText.js";
+const svgNS = "http://www.w3.org/2000/svg";
+
+
+export default class Header {
+    constructor({ box }) {
+        this.box = box;
+        this.container = box.container;
+        this.draw({ box })
+
+    }
+
+    draw({ box }) {
+        // همه چیز را توی کانتینر باکس آبجکت رسم کن
+        const { container, elements, width, height } = box
+
+        elements.forEach(element => {
+            const { name, value, x, y, style } = element;
+
+            switch (element.type) {
+                case 'label':
+                    // const { value, x, y, style } = element
+                    putText({ container, value, x, y, style })
+                    break;
+                case 'input':
+                    putText({ container, x, y, style, name });
+
+                    break;
+                default:
+                    break;
+            }
+
+        });
+
+
+
+
+        // Logo 
+        let image = document.createElementNS(svgNS, "image");
+        image.setAttribute("data-name", "officeLogo")
+        image.setAttribute("width", "17");
+        image.setAttribute("height", height - 1);
+        image.setAttribute("x", width - 16);
+        image.setAttribute("y", 0.5);
+        this.container.appendChild(image);
+
+        this.update({ officeName: 'دفتر ارزیابی شنوایی و خدمات سمعک سروش' })
+
+
+        let style = `
+            user-select: none;
+            direction: rtl;
+            /* text-align: center; */
+            font-family: Vazir;
+            font-size: 0.8mm;
+            font-weight: bolder;
+            text-anchor: start; /*تراز افقی*/
+            dominant-baseline: auto; /* تراز عمودی*/  
+        `;
+
+        // this.container.appendChild(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 || "");
+    }
+}