hayun-vite 0.10.1 → 0.11.0

package/assets/data/sampleData.js

@@ -46,7 +46,11 @@ const patientData = {
             updateDates: ["2025/6/5,16:32", "2025/6/5,16:32"], // آرایه تاریخ و ساعت بروزرسانی ها
             age: 77, //سن بیمار در این نشست
             referrer: "دکتر سید علی سرابی ", //ارجاع‌دهنده
-            history: { description: "وزوز گوش گهگاهی  - سرگیجه گهگاهی - درد در ناحیه گردن - سابقه سرگیجه ۵ سال قبل" },
+            history: {
+                description:
+                    `کاهش شنوایی حسی عصبی ملایم تا متوسط در فرکانس بم تامیانه در گوش راست.
+کاهش شنوایی آمیخته متوسط تا شدید در گوش چپ.`,
+            },
 
             // history, // رشته متن شرح‌حال بیمار
 
@@ -79,7 +83,11 @@ const patientData = {
                     CONTRA: { 500: "80", 1000: "90", 2000: "NR", 4000: '95' }
                 },
             },
-            report: { description: "کاهش شنوایی ملایم در فرکاس های زیر هر دو گوش - تکرار آزمون سالانه توصیه شد." },
+            report: {
+                description:
+                    `کاهش شنوایی حسی عصبی ملایم تا متوسط در فرکانس بم تامیانه در گوش راست
+کاهش شنوایی آمیخته متوسط تا شدید در گوش چپ`,
+            },
 
         },
         {

package/assets/templates/mainTemplate.js

@@ -0,0 +1,128 @@
+// 'Printable Area'
+const mainTemplate = {
+    name: 'Main Template',
+    label: 'ادیومتری و تمپانوتری',
+    // backgroundImage: 'backgroundImage',
+    // تعیین نمایش بوردرهای سکشن ها
+    showSectionBorders: true, // treu || false
+
+    paper: { type: 'A4', width: 210, height: 297, orientation: 'portrait' },
+    margin: { left: 5, top: 5, right: 5, bottom: 5 },
+
+
+    calcDims: function () {
+        this.width = this.paper.width - (this.margin.left + this.margin.right);
+        this.height = this.paper.height - (this.margin.top + this.margin.bottom);
+    },
+
+    defSections: function () {
+        this['Header'] = {
+            name: 'header', container: '',
+            width: this.width, height: 20,
+            box: { container: '', margin: { top: 2, right: 2, bottom: 2, left: 2 } },
+        }
+        this['Patient Info'] = {
+            name: 'patientInfo', container: '',
+            width: this.width, height: 15,
+            box: { container: '', margin: { top: 2, right: 2, bottom: 2, left: 2 } },
+        }
+        this['History'] = {
+            name: 'history', container: '',
+            width: this.width, height: 25,
+            box: { container: '', margin: { top: 2, right: 2, bottom: 2, left: 2 } },
+        }
+        this['Right Audiogram'] = {
+            name: 'RAudiogram', container: '',
+            width: this.width / 2, height: 90,
+            box: { container: '', margin: { top: 2, right: 2, bottom: 2, left: 2 } },
+            display: 'inline',
+        }
+        this['Left Audiogram'] = {
+            name: 'LAudiogram', container: '',
+            width: this.width / 2, height: 90,
+            box: { container: '', margin: { top: 2, right: 2, bottom: 2, left: 2 } },
+        }
+        this['Right Speech'] = {
+            name: 'RSpeech', container: '',
+            width: this.width / 2, height: 20,
+            display: 'inline',
+            container: '', // later SVG node Section
+            box: { container: '', margin: { top: 2, right: 2, bottom: 2, left: 2 } },
+        }
+        this['Left Speech'] = {
+            name: 'LSpeech', container: '',
+            width: this.width / 2, height: 20,
+            box: { container: '', margin: { top: 2, right: 2, bottom: 2, left: 2 } },
+        }
+
+    },
+
+    defSectionsAray: function () { // تعریف آرایه سکشن‌ها
+        this.sections = [
+            this['Header'], this['Patient Info'], this['History'],
+            this['Right Audiogram'], this['Left Audiogram'],
+            this['Right Speech'], this['Left Speech']
+
+        ];
+
+    },
+
+    calcSectionTopLeft: function () { // محاسبه فاصله از بالا و چپ هر سکشن از محدوده قابل چاپ
+        let top = 0;
+        let left = 0;
+
+        this.sections.forEach(section => {
+            section.top = top
+            section.left = left
+            if (section.display !== 'inline') {
+                top += section.height;
+                left = 0
+            } else left += section.width;
+        });
+    },
+
+    defBoxes: function () {
+        // let section = this['Header']
+        // section.box.width = section.width - (section.box.margin.left + section.box.margin.right)
+        // section.box.height = section.height - (section.box.margin.top + section.box.margin.bottom)
+        this.sections.forEach(section => {
+            const { box, width, height } = section
+            const { margin } = box
+            box.width = width - (margin.left + margin.right)
+            box.height = height - (margin.top + margin.bottom)
+        })
+
+    },
+
+    defElements: function () {
+        let box = this['Header'].box
+        let style = ['user-select: none', 'direction: rtl', 'font-family: Vazir', 'font-size: 1mm'].join('; ')
+        box.elements = [
+            { type: 'image', x: 10, y: 30 },
+            { type: 'line', x1: 0, y1: box.height, x2: box.width, y2: box.height },
+            { type: 'label', x: 30, y: 5, value: 'تاریخ :', style },
+            { type: 'input', name: 'officeName', x: box.width - 16, y: box.height - 6, style },
+            { type: 'input', name: 'date', x: 20, y: 5, style: style + ' font-size: 0.8mm;' },
+        ];
+
+        box = this['Right Speech'].box
+        box.elements = ["SAT", "SRT", "MCL", "UCL", "SDS"];
+        box.name = this['Right Speech'].name;
+
+
+    },
+
+
+}
+
+// تعریف همه پراپرتی‌های آبجکت با فراخوانی توابع به ترتیب
+mainTemplate.calcDims();
+mainTemplate.defSections();
+mainTemplate.defSectionsAray();
+mainTemplate.calcSectionTopLeft();
+mainTemplate.defBoxes();
+mainTemplate.defElements();
+
+
+
+export default mainTemplate

package/assets/templates/template_combo.js

@@ -3,16 +3,18 @@ const template_combo = {
     label: 'ادیومتری و تمپانوتری',
     // backgroundImage: 'backgroundImage',
     // تعیین نمایش بوردرهای سکشن ها
-    sectionBorders: 'none', // display || none
+    sectionBorders: 'display', // display || none
     margin: { left: 5, top: 5, right: 5, bottom: 5 },
     paper: { type: 'A4', case: 'portrait', width: 210, height: 297 },
 
     // 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',
@@ -20,6 +22,7 @@ const template_combo = {
             margin: { left: 0, top: 0, right: 0, bottom: 0 },
             display: 'block',
         }
+
         this.header = {
             // hideContext: true,
             name: 'header',
@@ -27,25 +30,32 @@ const template_combo = {
             margin: { left: 0, top: 0, right: 0, bottom: 0 },
             display: 'block',
         }
+
         this.patient = {
             name: 'patient',
-            w: width, h: 10,
-            margin: { left: 1, top: 1, right: 1, bottom: 1 },
+            w: width, h: 8,
+            margin: { left: 1, top: 0, right: 1, bottom: 0 },
             display: 'block',
         }
+
         this.history = {
             name: 'history',
-            w: width, h: 10,
-            margin: { left: 1, top: 1, right: 1, bottom: 1 },
+            w: width, h: 14,
+            margin: { left: 1, top: 0, right: 1, bottom: 0 },
+            display: 'block',
+        }
+
+        // Titles Common Object
+        this['Title'] = {
+            w: width, h: 7, // پهنا و ارتفاع سکشن
+            margin: { left: 0, top: 0, right: 0, bottom: 0 },
             display: 'block',
         }
 
         // Audiogram Titles 
         this['Audiogram Titles'] = {
+            ...this['Title'],
             name: 'Audiogram Titles',
-            w: width, h: 8, // پهنا و ارتفاع سکشن
-            margin: { left: 5, top: 1, right: 5, bottom: 1 },
-            display: 'block',
             stroke: true,
             // محاسبه پهنا  ارتفاع در تابع calc2 
         }
@@ -55,26 +65,26 @@ const template_combo = {
             {
                 blank: false,
                 name: 'RAudiogram',
-                w: width / 2, h: 90, // ابعاد سکشن ادیوگرام 
-                margin: { left: 1, top: 0, right: 1, bottom: 0 },
+                w: width / 2, h: 95, // ابعاد سکشن ادیوگرام 
+                margin: { left: 1, top: 0, right: 2, bottom: 0 }, // در مدل باکس این برای باکس هست
                 display: 'inline',
+                borderBox: 'display', // display | none default: none بوردر 
             });
 
         this.LAudiogram = {}
         Object.assign(this.LAudiogram,
             {
                 name: 'LAudiogram',
-                w: width / 2, h: 90, // پهنای سکشن هست
-                margin: { left: 1, top: 0, right: 1, bottom: 0 },
+                w: width / 2, h: 95, // پهنای سکشن هست
+                margin: { left: 2, top: 0, right: 1, bottom: 0 },
                 display: 'block',
+                // borderBox: 'none', // display | none default: none بوردر 
             });
 
         // Speech Titles 
         this['Speech Titles'] = {
             name: 'Speech Titles',
-            w: width, h: 8, // پهنا و ارتفاع سکشن
-            margin: { left: 5, top: 0.5, right: 5, bottom: 1 },
-            display: 'block',
+            ...this['Title'],
             stroke: true,
             // محاسبه پهنا  ارتفاع در تابع calc2 
         }
@@ -82,7 +92,7 @@ const template_combo = {
         this.RSpeech = {
             name: 'RSpeech',
             w: width / 2, h: 15,
-            margin: { left: 2, top: 0, right: 12, bottom: 0 },
+            margin: { left: 1, top: 0, right: 2, bottom: 0 },
             display: 'inline',
             stroke: true,
         }
@@ -90,7 +100,7 @@ const template_combo = {
         this.LSpeech = {
             name: 'LSpeech',
             w: width / 2, h: 15,
-            margin: { left: 12, top: 0, right: 2, bottom: 0 },
+            margin: { left: 2, top: 0, right: 1, bottom: 0 },
             display: 'block',
             stroke: true
         }
@@ -98,9 +108,7 @@ const template_combo = {
         // Tympanogram Titles 
         this['Tympanogram Titles'] = {
             name: 'Tympanogram Titles',
-            w: width, h: 8, // پهنا و ارتفاع سکشن
-            margin: { left: 5, top: 1, right: 5, bottom: 1 },
-            display: 'block',
+            ...this['Title'],
             stroke: true,
             // محاسبه پهنا  ارتفاع در تابع calc2 
         }
@@ -108,53 +116,50 @@ const template_combo = {
         this.RTympanogram = {
             name: 'RTympanogram',
             w: width / 2, h: 60,
-            margin: { left: 2, top: 0, right: 2, bottom: 0 },
+            margin: { left: 1, top: 0, right: 2, bottom: 0 },
             display: 'inline',
         }
 
         this.LTympanogram = {
             name: 'LTympanogram',
             w: width / 2, h: 60,
-            margin: { left: 2, top: 0, right: 2, bottom: 0 },
+            margin: { left: 2, top: 0, right: 1, bottom: 0 },
             display: 'block',
         }
 
         // Reflex Titles 
         this['Reflex Titles'] = {
             name: 'Reflex Titles',
-            w: width, h: 8, // پهنا و ارتفاع سکشن
-            margin: { left: 5, top: 1, right: 5, bottom: 1 },
-            display: 'block',
+            ...this['Title'],
             stroke: true,
             // محاسبه پهنا  ارتفاع در تابع calc2 
         }
 
-
         this.RReflex = {
             name: 'RReflex',
-            w: width / 2, h: 30,
-            margin: { left: 2, top: 2, right: 2, bottom: 2 },
+            w: width / 2, h: 26,
+            margin: { left: 1, top: 0, right: 2, bottom: 1 },
             display: 'inline'
         }
 
         this.LReflex = {
             name: 'LReflex',
-            w: width / 2, h: 30,
-            margin: { left: 2, top: 2, right: 2, bottom: 2 },
+            w: width / 2, h: 26,
+            margin: { left: 2, top: 0, right: 1, bottom: 1 },
             display: 'block'
         }
 
         this.report = {
             name: 'report',
-            w: width, h: 15,
-            margin: { left: 1, top: 1, right: 1, bottom: 1 },
+            w: width, h: 20,
+            margin: { left: 1, top: 0, right: 1, bottom: 0 },
             display: 'block'
         }
 
         this.footer = {
             name: 'footer',
             w: width, h: 10,
-            margin: { left: 1, top: 1, right: 1, bottom: 1 },
+            margin: { left: 0, top: 0, right: 0, bottom: 0 },
             display: 'block'
         }
     },
@@ -181,13 +186,13 @@ const template_combo = {
         ]
         this.header.inputs = [
             { name: 'officeName', x: width - 16, y: height - 6, style },
-            { name: 'date', x: 20, y: 5, style: style + ' font-size: 0.8mm;'  },
+            { name: 'date', x: 20, y: 5, style: style + ' font-size: 0.8mm;' },
         ]
 
         width = this.patient.width = this.getWidth(this.patient)
-        this.patient.height = this.getHeight(this.patient)
+        height = this.patient.height = this.getHeight(this.patient)
         this.patient.elements = [
-            { type: 'line', x1: 0, y1: 20, x2: width, y2: 20 },
+            // { type: 'line', x1: 0, y1: height, x2: width, y2: height },
             { type: 'text', x: width, y: 5, value: 'نام:' },
             { type: 'text', x: width - 38, y: 5, value: 'نام خانوادگی:' },
             { type: 'text', x: width - 90, y: 5, value: 'سن:' },
@@ -207,9 +212,9 @@ const template_combo = {
         ]
 
         width = this.history.width = this.getWidth(this.history)
-        this.history.height = this.getHeight(this.history)
+        height = this.history.height = this.getHeight(this.history)
         this.history.elements = [
-            { type: 'line', x1: 0, y1: 20, x2: width, y2: 20 },
+            { type: 'line', x1: 0, y1: height, x2: width, y2: height },
             { type: 'text', x: width, y: 5, value: 'شرح حال:' },
         ]
         this.history.inputs = [
@@ -220,12 +225,12 @@ const template_combo = {
         height = this['Audiogram Titles'].height = this.getHeight(this['Audiogram Titles'])
         style = `
             text-anchor: middle;
+            dominant-baseline: middle;
             font-size: 1.2mm
         `;
-
         this['Audiogram Titles'].elements = [
             // { type: 'line', x1: 0, y1: 0, x2: width, y2: 0 },
-            { type: 'text', x: width / 2, y: 5, value: 'Audiograms', style },
+            { type: 'text', x: width / 2, y: height / 2, value: 'Audiograms', style },
             { type: 'text', x: width / 4, y: 5, value: 'Right', style: 'fill: red' },
             { type: 'text', x: width * 3 / 4, y: 5, value: 'Left', style: 'fill: blue' },
         ]
@@ -240,7 +245,7 @@ const template_combo = {
         height = this['Speech Titles'].height = this.getHeight(this['Speech Titles'])
         this['Speech Titles'].elements = [
             // { type: 'line', x1: 0, y1: 0, x2: width, y2: 0 },
-            { type: 'text', x: width / 2, y: 4, value: 'Speech Tests', style },
+            { type: 'text', x: width / 2, y: height / 2, value: 'Speech Tests', style },
             { type: 'text', x: width / 4, y: 5, value: 'Right', style: 'fill: red' },
             { type: 'text', x: width * 3 / 4, y: 5, value: 'Left', style: 'fill: blue' },
         ]
@@ -257,7 +262,7 @@ const template_combo = {
         height = this['Tympanogram Titles'].height = this.getHeight(this['Tympanogram Titles'])
         this['Tympanogram Titles'].elements = [
             // { type: 'line', x1: 0, y1: 0, x2: width, y2: 0 },
-            { type: 'text', x: width / 2, y: 5, value: 'Tympanograms', style },
+            { type: 'text', x: width / 2, y: height / 2, value: 'Tympanograms', style },
             // { type: 'text', x: width / 4, y: 5, value: 'Right', style: 'fill: red' },
             // { type: 'text', x: width * 3 / 4, y: 5, value: 'Left', style: 'fill: blue' },
         ]
@@ -271,7 +276,7 @@ const template_combo = {
         height = this['Reflex Titles'].height = this.getHeight(this['Reflex Titles'])
         this['Reflex Titles'].elements = [
             // { type: 'line', x1: 0, y1: 0, x2: width, y2: 0 },
-            { type: 'text', x: width / 2, y: 5, value: 'Acoustic Reflexes', style },
+            { type: 'text', x: width / 2, y: height / 2, value: 'Acoustic Reflexes', style },
             { type: 'text', x: width / 4, y: 5, value: 'Probe in the Right Ear', style: 'fill: red; text-anchor: middle' },
             { type: 'text', x: width * 3 / 4, y: 5, value: 'Probe in the Left Ear', style: 'fill: blue; text-anchor: middle' },
         ]
@@ -287,7 +292,7 @@ const template_combo = {
             { type: 'text', x: width, y: 5, value: 'گزارش:' },
         ]
         this.report.inputs = [
-            { name: 'description', x: width - 10, y: 5 },
+            { name: 'description', x: width - 12, y: 5 },
         ]
 
         width = this.footer.width = this.getWidth(this.footer)

package/package.json

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

package/src/Audiogram/Audiogram.js

@@ -1,3 +1,4 @@
+import putG from "../common/putG.js";
 import putLine from "../common/putLine.js";
 import putPoint from "../common/putPoint.js";
 import putRect from "../common/putRect.js";
@@ -15,7 +16,7 @@ export default class Audiogram {
     // اضافه کردن ابعاد جایگزین و یا اختصاصی دیگر به آبجکت ابعاد
     dims && Object.assign(this.dims, dims);
     // console.log(dims);
-    
+
 
     this.events = events;
     this.side = side;
@@ -71,67 +72,88 @@ export default class Audiogram {
     this.yAxisLength = yAxisLength
 
     // Main SVG for Audiogram
+    style = styles.svg;
     const viewBox = [-chartPadding.left, -chartPadding.top, vbWidth, vbHeight]
-    const svg = putSVG({ container, x, y, width, height, viewBox })
+    const svg = putSVG({ container, x, y, width, height, viewBox, style })
     this.svg = svg; // کل نودی که به کانتینر اپند میشه
 
     // برای فرم‌های پیش چاپ نشده
     if (!dims.blank) {
       // محدوده مختصات خطوط جدول
-      const chartArea = putRect({
+      putRect({
         container: svg,
         x: this.getX(vf.min), y: this.getY(intensity.min),
         width: xAxisLength.vb, height: yAxisLength.vb,
         style: 'stroke-width: 0.4; stroke: gray; fill: transparent'
       })
+
       // رسم خطوط افقی از بالا به پایین
+      let g = putG({ container: svg });
+
       let x1 = this.getX(vf.min);
       let x2 = this.getX(vf.max);
+
       for (let i = intensity.min; i <= intensity.max; i += intensity.step) {
         const y1 = this.getY(i)
         const y2 = y1;
         style = (i === 0) ? styles.boldLine : styles.line;
-        putLine({ container: svg, x1, y1, x2, y2, style })
+        putLine({ container: g, x1, y1, x2, y2, style })
       }
 
+      svg.appendChild(g);
+
       // رسم خطوط عمودی از چپ به راست
+      g = putG({ container: svg });
+
       let y1 = this.getY(intensity.min)
       let y2 = this.getY(intensity.max)
-      frequencies.forEach(item => {
-        const x1 = this.getX(item.vf)
-        const x2 = x1
-        style = (item.semiOctav) ? styles.semiOctavFreqline : styles.mainFreqline;
-        (item.f === 1000) && (style = styles.boldLine);
-        putLine({ container: svg, x1, y1, x2, y2, style })
-      })
+
+      frequencies.
+        forEach(item => {
+          const x1 = this.getX(item.vf)
+          const x2 = x1
+          style = (item.semiOctav) ? styles.semiOctavFreqline : styles.mainFreqline;
+          (item.f === 1000) && (style = styles.boldLine);
+          putLine({ container: g, x1, y1, x2, y2, style })
+        });
+
+      svg.appendChild(g);
+
       // برچسب های اعداد فرکانس
       style = styles.frequency
+      g = putG({ container: svg, style });
       const y = this.getY(-25)
-      frequencies.forEach(item => {
-        const value = item.f
-        const x = this.getX(item.vf)
-        !item.semiOctav && item.f != 125 && item.f != 16000 &&
-          putText({ container: svg, value, x, y, style });
-      })
+
+      frequencies.
+        forEach(item => {
+          const value = item.f
+          const x = this.getX(item.vf)
+          !item.semiOctav && item.f != 125 && item.f != 16000 &&
+            putText({ container: g, value, x, y, });
+        });
+
+      svg.appendChild(g);
 
       // رسم اعداد شدت محور عمودی
       style = styles.intensity
+      g = putG({ container: svg, style });
       const x = this.getX(-0.1)
+
       for (let i = -10; i <= 120; i += 10) {
         const y = this.getY(i)
         const value = i
-        putText({ container: svg, x, y, value, style })
-
-
+        putText({ container: g, x, y, value })
       }
 
+      svg.appendChild(g);
+
     }
     // یک بوردر راهنمای توسعه برای اس‌ وی جی به تمام پهنا و ارتفاع رسم می‌کنیم
     // این مربع مرزی را آخرین ایجاد میکنیم تا بالاترین لایه باشد و روی ریودادها درست عمل کند
     const borderRect = putRect({
       container: svg, x: -chartPadding.left, y: -chartPadding.top,
       width: vbWidth, height: vbHeight, name: '',
-      style: 'fill: transparent; stroke: transparent;',
+      style: 'fill: transparent; stroke: green;',
     });
     this.borderRect = borderRect;