hayun-vite 0.13.0 → 0.15.0

package/src/Form/Form.js

@@ -9,18 +9,19 @@ import MultiText from "../MultiText/MultiText.js";
 const svgNS = "http://www.w3.org/2000/svg";
 
 export default class Form {
-    constructor({ container, template } = {}) {
+    constructor({ container, template, mode = "production" } = {}) {
         this.template = template;
         this.container = container;
+        this.mode = mode;
         this.data = {};
         let { width, height, margin, paper } = template;
-        this.page = this.create({ paper, margin });
-        this.page.style.display = 'none';
+        this.svg = this.create({ paper, margin }); // اس‌وی‌جی مادر فرم را صفحه نامگذاری میکنیم بذاریم همون اس‌وی‌جی؟
+        this.svg.style.display = 'none';
         let dims;
         // رسم مارجین های فرم
-        this.drawMarginLines({ container: this.page, width, height });
+        this.drawMarginLines({ container: this.svg, width, height });
 
-        const sections = new Sections({ container: this.page, dims: template });
+        const sections = new Sections({ container: this.svg, dims: template });
         this.sections = sections;
 
         if (sections.header) {
@@ -57,53 +58,54 @@ export default class Form {
             })
         }
         if (sections['Speech Titles']) {
-            dims= template['Speech Titles'];
+            dims = template['Speech Titles'];
             const titles = new MultiText({ container: sections['Speech Titles'], dims });
         }
         if (sections['RSpeech']) {
-            dims= template.RSpeech
-            this.RSpeech = new Speech({ container: sections.RSpeech, side: 'R', dims})
+            dims = template.RSpeech
+            this.RSpeech = new Speech({ container: sections.RSpeech, side: 'R', dims })
         }
         if (sections.LSpeech) {
-            dims= template.LSpeech
+            dims = template.LSpeech
             this.LSpeech = new Speech({ container: sections.LSpeech, side: 'L', dims })
         }
         if (sections['Tympanogram Titles']) {
-            dims= template['Tympanogram Titles'];
+            dims = template['Tympanogram Titles'];
             new MultiText({ container: sections['Tympanogram Titles'], dims });
         }
         if (sections.RTympanogram) {
-            dims= template.RTympanogram 
+            dims = template.RTympanogram
             this.RTympanogram = new Tympanogram({ container: sections.RTympanogram, side: 'R', dims })
         }
         if (sections.LTympanogram) {
-            dims= template.LTympanogram
+            dims = template.LTympanogram
             this.LTympanogram = new Tympanogram({ container: sections.LTympanogram, side: 'L', dims })
         }
         if (sections['Reflex Titles']) {
-            dims= template['Reflex Titles'];
+            dims = template['Reflex Titles'];
             const titles = new MultiText({ container: sections['Reflex Titles'], dims });
         }
         if (sections.RReflex) {
-            dims= template.RReflex
+            dims = template.RReflex
             this.RReflex = new Reflex({ container: sections.RReflex, side: 'R', dims })
         }
         if (sections.LReflex) {
-            dims= template.LReflex
+            dims = template.LReflex
             this.LReflex = new Reflex({ container: sections.LReflex, side: 'L', dims })
         }
         if (sections.report) {
-            dims= template.report;
+            dims = template.report;
             this.report = new MultiText({ container: sections.report, dims })
         }
         if (sections.footer) {
-            dims= template.footer;
-            this.footer = new MultiText({ container: sections.footer, dims})
+            dims = template.footer;
+            this.footer = new MultiText({ container: sections.footer, dims })
         }
 
-        this.container.appendChild(this.page);
-    }
+        this.container.appendChild(this.svg);
 
+        this.addEvent()
+    }
 
     create({ paper, margin }) {
         const { width, height } = paper;
@@ -130,85 +132,91 @@ export default class Form {
         return svg
     }
 
-    update({ data, officeData, patientData, sessionIndex = 0 }) {
+    update({ 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: {} }
-        }
-        // find which data reach and then call corresponding update function
-        // get array of keys (audiogram, header, footer, ...)
-        let keys = Object.keys(data)
+
+        let data = {
+            header: {
+                officeName: officeData.name,
+                officeLogo: officeData.logos[officeData.selectedLogoIndex],
+                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,
+        };
+
+        // let keys = Object.keys(data)
         // if (keys.includes("header")) {
 
-        this.header?.update(data.header)
+        console.log(JSON.stringify(this.data.header) !== JSON.stringify(data.header));
+
+        // console.log(this.data.header, data.header);
+
+        JSON.stringify(this.data.header) !== JSON.stringify(data.header) &&
+            this.header?.update(data.header)
+        this.data.header = data.header
         // }
         // if (keys.includes("patient")) {
-        this.patient?.update(data.patient)
+        JSON.stringify(this.data.patient) !== JSON.stringify(data.patient) &&
+            this.patient?.update(data.patient)
+        this.data.patient = data.patient
         // }
         // if (keys.includes("history")) {
-
-        this.history?.update(session?.history)
+        JSON.stringify(this.data.history) !== JSON.stringify(data.history) &&
+            this.history?.update(session?.history)
         this.data.history = session.history;
         // }
         // if (keys.includes("audiogram")) {
-        this.RAudiogram?.update({ data: session.audiogram?.R, side: 'R' })
-        this.LAudiogram?.update({ data: session.audiogram?.L, side: 'L' })
+        if (JSON.stringify(this.data.audiogram) !== JSON.stringify(data.audiogram)) {
+            this.RAudiogram?.update({ data: session.audiogram?.R, side: 'R' })
+            this.LAudiogram?.update({ data: session.audiogram?.L, side: 'L' })
+        }
         this.data.audiogram = session.audiogram
         // }
         // if (keys.includes("speech")) {
-        this.RSpeech?.update(session.speech?.R)
-        this.LSpeech?.update(session.speech?.L)
+        if (JSON.stringify(this.data.speech) !== JSON.stringify(data.speech)) {
+            this.RSpeech?.update(session.speech?.R)
+            this.LSpeech?.update(session.speech?.L)
+        }
         this.data.speech = session.speech
         // }
         // if (keys.includes("tympanogram")) {
-        this.RTympanogram?.update(session.tympanogram?.R)
-        this.LTympanogram?.update(session.tympanogram?.L)
+        if (JSON.stringify(this.data.tympanogram) !== JSON.stringify(data.tympanogram) && data.tympanogram) {
+            this.RTympanogram?.update(session.tympanogram?.R)
+            this.LTympanogram?.update(session.tympanogram?.L)
+        }
         this.data.tympanogram = session.tympanogram;
         // }
         // if (keys.includes("reflex")) {
-        this.RReflex?.update(session.reflex?.R)
-        this.LReflex?.update(session.reflex?.L)
-        this.data.tympanogram = session.reflex;
+        if (JSON.stringify(this.data.reflex) !== JSON.stringify(data.reflex)) {
+            this.RReflex?.update(session.reflex?.R)
+            this.LReflex?.update(session.reflex?.L)
+        }
+        this.data.reflex = session.reflex;
         // }
         // if (keys.includes("report")) {
-        this.report?.update(session.report)
+        JSON.stringify(this.data.report) !== JSON.stringify(data.report) &&
+            this.report?.update(session.report)
         this.data.report = session.report;
         // }
         // if (keys.includes("footer")) {
-        // console.log("footer Data:", data?.footer);
-
-        this.footer?.update(data?.footer)
+        JSON.stringify(this.data.footer) !== JSON.stringify(data.footer) &&
+            this.footer?.update(data?.footer)
         this.data.footer = data.footer;
-        // }
     }
 
     // خطوط نقطه چین مارجین فرم
@@ -224,4 +232,12 @@ export default class Form {
         `;
         putRect({ container, x: 0, y: 0, width, height, style, className: 'no-print' })
     }
+
+    // افزودن رویداد کلیک روی فرم
+    addEvent({ } = {}) {
+        this.svg.addEventListener("click", e => {
+            console.log(e.target.dataset['name']);
+
+        })
+    }
 }

package/src/Forms/Forms.js

@@ -1,32 +1,28 @@
 // import '../styles.css' // برای تست منتقل شد به فایل ایندکس اصلی اچ‌تی‌ام‌ال  و برای توسعه منتقل شده به ایندکس جی اس
-import putLine from "../common/putLine.js";
-import printForm from "./printForm.js";
-import Form from "../Form/Form.js";
+import printForm from "./printForm.js"
+import Form from "../Form/Form.js"
+import putGrid from "../common/putGrid.js"
 
-const svgNS = "http://www.w3.org/2000/svg";
+const svgNS = "http://www.w3.org/2000/svg"
 
-// import combo from "./templates/combo.js"; // این در حقیقیت یک تمپلت هست
-// import rasaAud from "./templates/rasa_audiometry.js";
-// import rasaTymp from './templates/rasa_tymp_reflex.js'
-
-// خط کد زیر لازم هست
-// import '/fonts/webfonts/Vazirmatn-Regular.woff2'
+import templCombo from "../../assets/templates/templCombo.js"  // این در حقیقیت یک تمپلت هست
+import templAudiometry from "../../assets/templates/templAudiometry.js"
 
 // کلاس جدید که فرم‌های مختلف را نمایش میدهد
 export default class Forms {
     constructor({ assets, container, templates, defaultTemplateIndex = 0, mode = 'production' } = {}) {
         this.container = container
         this.mode = mode;
-        // this.addForms({ templates: [rasaAud, rasaTymp, combo], defaultTemplateIndex })
+        this.forms = [] // آرایه آبجکت های فرم های مختلف
         this.addForms({ templates, defaultTemplateIndex })
     }
 
     // افزودن فرم 
     addForms({ templates, defaultTemplateIndex }) {
+        const forms = this.forms;
         const container = this.container
         // ایجاد یک دیو برای قرار دادن دکمه ها و لینک های فرم
         const div = document.createElement('div');
-
         div.style = 'border: 1px solid brown; margin: 0; padding: 0;'
         container.appendChild(div);
 
@@ -34,101 +30,88 @@ export default class Forms {
         let className = 'button-form persian';
         const btns = [];
 
-        const forms = []; // آرایه آبجکت های فرم های مختلف
-        this.forms = forms;
-
         templates.
             forEach((template, index) => {
+
                 this.mode == 'develop' &&
-                    (btns[index] = this.putButton({ container: div, text: template.label, className }));
-                this.forms.push(new Form({ container, template }));
-            });
+                    (btns[index] = this.putButton({ container: div, text: template.label, className }))
+                this.forms.push(new Form({ container, template, mode: this.mode }))
+            })
+
 
         // انتخاب فرم پیش‌فرض  
-        let selectedIndex = defaultTemplateIndex;
-        forms[selectedIndex].page.style.display = 'block';
-        this.selectedForm = this.forms[selectedIndex];
-        (this.mode == 'develop') && (btns[selectedIndex].style.backgroundColor = ' #1c15e1');
+        let selectedIndex = defaultTemplateIndex
+        this.selectedIndex = selectedIndex // برای استفاده در متد آپدیت
 
-        if (this.mode == 'develop') {
+        forms[selectedIndex].svg.style.display = 'block'
+        // this.selectedForm = this.forms[selectedIndex] // سمی‌کالن واجب
 
-            const printBtn = this.putButton({ container: div, text: 'چاپ', className });
-            // تعریف رویداد دکمه چاپ فرم نمایشی
-            printBtn.addEventListener('click', () => { printForm({ container: this.selectedForm.page }) });
+        this.mode == 'develop' &&
+            (btns[selectedIndex].style.backgroundColor = ' #1c15e1')  // اگر عبارت اول توی پرانتز باشه سمی‌کالن واجب
 
+        // به ازای هر فرم یک دکمه هم به دیو بالای فرم اضافه میکند در حالت دولوپ
+        // افزودن  دکمه مربوطه به فرمها به دام
+        this.mode == 'develop' &&
             btns.forEach((btn, index) => {
                 btn.addEventListener('click', () => {
                     // Hide All forms
                     forms.forEach((form, i) => {
-                        form.page.style.display = 'none'
+                        form.svg.style.display = 'none'
                         btns[i].style.backgroundColor = ' #7472e2'
+                    })
 
-                    });
-
-                    forms[index].page.style.display = 'block';
+                    forms[index].svg.style.display = 'block'
                     btns[index].style.backgroundColor = ' #1c15e1'
 
-                    this.selectedForm = forms[index];
+                    // this.selectedForm = forms[index]
                     selectedIndex = index
-                    this.update(this.allData);
+                    this.selectedIndex = selectedIndex
+                    this.update(this.dataParams)
                 })
-            })
+            }) // سمی‌کالن واجب
 
-            // دکمه نمایش و پنهان خطوط سکشن
-            this.putButton({ container: div, text: 'Show/Hide Section Borders', className })
-                .addEventListener('click', () => {
-                    this.toggleDisplay({ container: forms[selectedIndex].page, borderName: 'section-border' })
-                });
-
-            // دکمه نمایش و پنهان خطوط بوردر
-            this.putButton({ container: div, text: 'Show/Hide Box Borders', className })
-                .addEventListener('click', () => {
-                    this.toggleDisplay({ container: forms[selectedIndex].page, borderName: 'box-border' })
-                });
-
-            // دکمه نمایش و پنهان شطرنجی
-            this.putButton({ container: div, text: 'Show/Hide Grid', className })
-                .addEventListener('mouseenter', () => {
-                    this.grid({ container: forms[selectedIndex].page })
-                });
-            // فراخوانی تابع شطرنجی در اولین اجرا
-            this.grid({ container: forms[selectedIndex].page })
-        }
+        // افزودن چهار دکمه چاپ صفحه فرم انتخاب شده و تاگل پنهان یا نمایش
+        this.mode == 'develop' &&
+            this.addButtons({ container: div, className, svg: forms[selectedIndex].svg })
     }
 
-    grid({ container }) {
-        console.log(container);
-        const cord = { xStart: -5, yStart: -5, xEnd: 210 - 5, yEnd: 297 - 5, xStep: 1, yStep: 1 }
-        let { xStart, yStart, xEnd, yEnd, xStep, yStep } = cord
+    // افزودن چهار دکمه چاپ صفحه فرم انتخاب شده و تاگل پنهان یا نمایش
+    addButtons({ container, className, svg }) {
 
-        // رسم خطوط افقی
-        let style = 'stroke: blue; stroke-width: 0.05 ; stroke-opacity: 0.8; stroke-dasharray: 0.2;'
-        let x1 = xStart
-        let y1 
-
-        let x2 = xEnd
-        let y2
+        // تعریف دکمه و رویداد دکمه چاپ صفحه فرم نمایشی
+        this.putButton({ container, text: 'چاپ', className })
+            .addEventListener('click', () => {
+                printForm({ container: this.forms[this.selectedIndex].svg })
+            });
 
-        for (let y1 = yStart; y1 <= yEnd; y1 += yStep) {
-            y2 = y1
-            putLine({ container, x1, y1, x2, y2, style, name: 'grid' })
-        }
+        // دکمه و رویداد نمایش و پنهان خطوط سکشن
+        this.putButton({ container, text: 'Show/Hide Section Borders', className })
+            .addEventListener('click', () => {
+                this.toggleDisplay({ container: svg, borderName: 'section-border' })
+            });
 
-        // رسم خطوط عمودی
-        y1 = yStart
-        for (x1 = xStart; x1 <= xEnd; x1 += xStep) {
-            const x2 = x1
-            putLine({ container, x1, y1, x2, y2, style, name: 'grid' })
-        }
+        // دکمه و رویداد نمایش و پنهان خطوط بوردر
+        this.putButton({ container, text: 'Show/Hide Box Borders', className })
+            .addEventListener('click', () => {
+                this.toggleDisplay({ container: svg, borderName: 'box-border' })
+            });
 
+        // دکمه نمایش و پنهان شطرنجی
+        this.putButton({ container, text: 'Show/Hide Grid', className })
+            .addEventListener('mouseenter', () => {
+                putGrid({ container: svg })
+            });
+        // فراخوانی تابع شطرنجی در اولین اجرا
+        // putGrid({ container: forms[selectedIndex].svg })
 
     }
 
     // این تابع یک بار از بیرون کلاس فراخوانی میشه و یک بار وقتی از داخل تمپلت فرم را عوض میکنیم
-    update({ data, officeData, patientData, sessionIndex = 0 }) {
+    update({ officeData, patientData, sessionIndex = 0 }) {
         // ذخیره کل دیتا برای استفاده داخلی آپدیت فرم انتخاب شده
-        this.allData = { data, officeData, patientData, sessionIndex }
-        this.selectedForm.update({ data, officeData, patientData, sessionIndex })
+        this.dataParams = { officeData, patientData, sessionIndex }
+        // this.selectedForm.update({ officeData, patientData, sessionIndex })
+        this.forms[this.selectedIndex].update(this.dataParams)
     }
 
     // توابع داخلی ایجاد دکمه و لینک های بالای فرم

package/src/Forms/test.js

@@ -0,0 +1,37 @@
+import { officeData, patientData } from "../../assets/data/sampleData";
+import templAudiometry from "../../assets/templates/templAudiometry";
+import templCombo from "../../assets/templates/templCombo";
+import Forms from "./Forms";
+
+document.querySelector('#app').innerHTML = `
+    <div id="test"></div>
+`;
+
+const container = document.getElementById('test')
+
+const forms = new Forms({ container, templates: [templCombo,], mode: 'develop' });
+
+// forms.update({ officeData, patientData, sessionIndex: 0 })
+forms.update({ officeData, patientData, sessionIndex: 1 })
+
+// forms.update({ officeData, patientData, sessionIndex: 1 })
+// forms.update({ officeData, patientData, sessionIndex: 1 })
+// forms.update({ officeData, patientData, sessionIndex: 1 })
+// forms.update({ officeData, patientData, sessionIndex: 1 })
+// forms.update({ officeData, patientData, sessionIndex: 1 })
+// forms.update({ officeData, patientData, sessionIndex: 1 })
+// forms.update({ officeData, patientData, sessionIndex: 1 })
+// forms.update({ officeData, patientData, sessionIndex: 1 })
+// forms.update({ officeData, patientData, sessionIndex: 1 })
+// forms.update({ officeData, patientData, sessionIndex: 1 })
+// forms.update({ officeData, patientData, sessionIndex: 1 })
+// forms.update({ officeData, patientData, sessionIndex: 1 })
+// forms.update({ officeData, patientData, sessionIndex: 1 })
+// forms.update({ officeData, patientData, sessionIndex: 1 })
+// forms.update({ officeData, patientData, sessionIndex: 0 })
+// forms.update({ officeData, patientData, sessionIndex: 0 })
+// forms.update({ officeData, patientData, sessionIndex: 0 })
+
+// خط برای کپی پیست نقشی در کد ندارد
+
+

package/src/Header/Header.js

@@ -6,6 +6,7 @@ const svgNS = "http://www.w3.org/2000/svg";
 
 export default class Header {
     constructor({ container }) {
+        
         this.container = container;
     }
 
@@ -18,11 +19,11 @@ export default class Header {
         let x = dims.margin.left;
         let y = dims.margin.top;
 
-        const svg = putSVG({ x, y, width, height, style: 'direction: rtl !important; user-select: none;' })
+        const svg = putSVG({ x, y, width, height, style: 'font-family: Vazir; direction: rtl !important; user-select: none;' })
 
         // Logo 
         let image = document.createElementNS(svgNS, "image");
-        image.setAttribute("data-name", "officeLogo")
+        image.setAttribute("data-name", "officeLogo") // برای تابع آپدیت استفاده می‌شود
         image.setAttribute("width", "17");
         image.setAttribute("height", height - 1);
         image.setAttribute("x", width - 16);
@@ -30,14 +31,10 @@ export default class Header {
         svg.appendChild(image);
 
         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; /* تراز عمودی*/  
+            text-anchor: start; 
+            dominant-baseline: auto; 
         `;
 
         // اگر مقدار استروک درست بود لیبل ها را چاپ کن
@@ -72,6 +69,8 @@ export default class Header {
     }
 
     update(data) {
+        console.log('I`m from header.update');
+        
         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/MultiText/MultiText.js

@@ -76,9 +76,6 @@ export default class MultiText {
         })
 
         this.container.appendChild(svg)
-
-
-
     }
 
     update(data) {
@@ -87,16 +84,21 @@ export default class MultiText {
             const textInput = this.container.querySelector(`text[data-name=${input.name}]`)
 
             // پیدا کردن کاراکترهای رفتن به سرخط در متن
-            const textLines = value.toString().split(/\n|\r|\r\n/);
-            const x = textInput.getAttribute('x')
-            // اگر متن چند خطی بود 
-            if (textLines.length >= 2) {
-                let y = 5;
-                textLines.forEach(value => {
-                    putTspan({ container: textInput, value, x, y });
-                    y += 6;
-                })
-            } else textInput.innerHTML = value || "";
+            if (value) {
+                const textLines = value.toString().split(/\n|\r|\r\n/);
+                const x = textInput.getAttribute('x')
+                // اگر متن چند خطی بود 
+                if (textLines.length >= 2) {
+                    // اول از همه هر چی تی‌اسپن از قبل توی این تکست اینپوت هست پاک کن
+                    textInput.textContent = ""
+
+                    let y = 5;
+                    textLines.forEach(value => {
+                        putTspan({ container: textInput, value, x, y });
+                        y += 6;
+                    })
+                } else textInput.textContent = value || "";
+            }
         });
     }
 }

package/src/Speech/Speech.js

@@ -7,6 +7,7 @@ const svgNS = "http://www.w3.org/2000/svg";
 
 export default class Speech {
     constructor({ container, side = 'R', dims }) {
+        
         this.container = container;
         this.side = side;
         this.draw({ dims })