hayun-vite 0.11.0 → 0.11.1

package/package.json

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

package/src/Form/Form.js

@@ -1,5 +1,3 @@
-// import Symbols from "../Symbol/Symbols.js";
-import Box from "../Box/Box.js";
 import Header from "../Header/Header.js";
 import Reflex from "../Reflex/Reflex.js";
 import Sections from "./Sections.js";
@@ -7,9 +5,9 @@ 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,9 +46,7 @@ export default class Form {
                 dims: template.RAudiogram,
                 side: 'R',
                 events: false
-            });
-            console.log(template.RAudiogram);
-            
+            })
         }
         if (sections.LAudiogram) {
             this.LAudiogram = new AudiogramChart({
@@ -58,51 +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/MultiText/MultiText.js

@@ -1,37 +1,99 @@
-export default class MultiText {
-    constructor({ box }) {
-        this.box = box;
-        this.container = box.container;
-        // this.draw({ box })
+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 MultiText {
+    constructor({ container, dims }) {
+        this.container = container;
+        this.draw({ dims })
     }
 
+    draw({ dims }) {
+        // دریافت اطلاعات مختصات چاپ ورودی ها به جز عادی محاسبه شده 
+        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, className;
+        style = `
+        font-family: Vazir; 
+        font-size: 1mm;
+        white-space: break-spaces;
+        /* font-weight: bold; */
+        direction: rtl !important;
+        user-select: none;
+        dominant-baseline: middle;
+        `;
+        const svg = putSVG({ x, y, width, height, style })
 
-    draw({ box }) {
-        // همه چیز را توی کانتینر باکس آبجکت رسم کن
-        const { container, elements, width, height } = box
-        console.log(box);
+        // اگر مقدار استروک درست بود لیبل ها را چاپ کن
+        if (!dims.hideContext) {
+            dims.elements
+                .forEach(
+                    element => {
+                        switch (element.type) {
+                            case 'text':
+                                ({ x, y, value, style } = element);
+                                putText({ container: svg, value, x, y, style, className: 'persian bold' });
+                                break;
+                            case 'line':
+                                let { x1, y1, x2, y2 } = element;
+                                putLine({ container: svg, x1, y1, x2, y2 });
+                                break;
+                        }
+                    });
+        }
 
-        elements.forEach(element => {
-            const { name, value, x, y, style } = element;
+        // محل اینپوت‌های دیتا
+        let name;
+        this.inputs && this.inputs.
+            forEach(input => {
+                ({ name, x, y } = input);
+                putText({ container: svg, x, y, className: 'persian', name });
+            });
 
-            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 });
+        // مربع احاطه‌کننده کل جدول برای راهنمای توسعه
+        const borderRect = putRect({
+            container: svg, x: 0, y: 0, width, height,
+            name: dims.name, className: 'no-print',
+            style: 'stroke: green; fill: transparent; stroke-width: 0.3;'
+        });
 
-                    break;
-                default:
-                    break;
-            }
+        this.borderRect = borderRect;
+        this.container.appendChild(svg)
+    }
 
-        });
+    update(data) {
+        this.inputs.forEach(input => {
+            let value = data?.[input.name];
+            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 || "";
+        });
     }
+}
 
+function putTspan({ container, value, x, y = 5, dx = 0, dy = 0, style }) {
+    const tspan = document.createElementNS(svgNS, "tspan");
+    tspan.setAttribute('x', x);
+    tspan.setAttribute('y', y)
+    tspan.textContent = value;
+    container && container.appendChild(tspan)
+    return tspan;
 }

package/src/MultiText/MultiText_N.js

@@ -0,0 +1,37 @@
+export default class MultiText {
+    constructor({ box }) {
+        this.box = box;
+        this.container = box.container;
+        // this.draw({ box })
+
+    }
+
+
+
+
+    draw({ box }) {
+        // همه چیز را توی کانتینر باکس آبجکت رسم کن
+        const { container, elements, width, height } = box
+        console.log(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;
+            }
+
+        });
+
+    }
+
+}

package/src/Reflex/Reflex.js

@@ -5,9 +5,10 @@ import putCell from "../common/putCell.js";
 import units from "./units.js";
 
 export default class Reflex {
-    constructor({ container, side }) {
+    constructor({ container, side, dims }) {
         this.container = container;
         this.side = side; // این برای تعیین رنگ راست و چپ استفاده می‌شود
+        this.draw({dims})
     }
 
     draw({ dims }) {

package/src/Speech/Speech.js

@@ -6,9 +6,10 @@ import units from "./units.js";
 const svgNS = "http://www.w3.org/2000/svg";
 
 export default class Speech {
-    constructor({ container, side = 'R' }) {
+    constructor({ container, side = 'R', dims }) {
         this.container = container;
         this.side = side;
+        this.draw({dims})
     }
 
     draw({ dims }) {
@@ -49,7 +50,6 @@ export default class Speech {
             }
         }
 
-
         // ایجاد ماتریکس سلول های چارت که آدرس و مختصات مرکز هر سلول را نگهداری میکند
         const matrix = [
             [],

package/src/Tympanogram/Tympanogram.js

@@ -5,12 +5,13 @@ import units from "./units.js";
 const svgNS = "http://www.w3.org/2000/svg";
 
 export default class Tympanogram {
-    constructor({ container, side }) {
+    constructor({ container, side, dims }) {
         this.pressure = { min: -600, max: +400, step: 200 };
         this.compliance = { min: -0.50, max: 3, step: 0.50 };
         this.padding = { right: 5, left: 8, top: 7, bottom: 14 };
         this.container = container;
         this.side = side
+        this.draw({dims})
     }
 
     draw({ dims }) {

package/src/main.js

@@ -6,7 +6,8 @@ import template from "../assets/templates/template_combo.js";
 import Tympanogram from "./Tympanogram/Tympanogram.js";
 import Speech from "./Speech/Speech.js";
 import Reflex from "./Reflex/Reflex.js";
-import Box from "./Box/Box.js";
+import MultiText from "./MultiText/MultiText.js";
+
 
 
 document.querySelector('#app').innerHTML = `
@@ -40,9 +41,8 @@ let dims = {
   ]
 }
 
-const RSpeech = new Speech({ container, side: 'R' })
-RSpeech.draw({ dims })
-RSpeech.update({ MCL: '55', SAT: '25', SDS: '98', UCL: '120', SRT: '30' })
+// const RSpeech = new Speech({ container, side: 'R' , dims})
+// RSpeech.update({ MCL: '55', SAT: '25', SDS: '98', UCL: '120', SRT: '30' })
 
 dims = {
   "name": "RTympanogram",
@@ -59,8 +59,7 @@ dims = {
   "height": 60 * 6
 }
 
-const RTympanogram = new Tympanogram({ container, side: 'R' })
-RTympanogram.draw({ dims });
+// const RTympanogram = new Tympanogram({ container, side: 'R', dims })
 
 dims = {
   "name": "RReflex",
@@ -77,13 +76,12 @@ dims = {
   "height": 30 * 6
 }
 
-const RReflex = new Reflex({ container, side: 'R' })
-RReflex.draw({ dims });
+// const RReflex = new Reflex({ container, side: 'R' , dims})
 
 dims = {
-  "name": "report",
+  "name": "patient",
   "w": 200,
-  "h": 20,
+  "h": 8,
   "margin": {
     "left": 1,
     "top": 0,
@@ -92,26 +90,80 @@ dims = {
   },
   "display": "block",
   "width": 198,
-  "height": 20,
+  "height": 8,
   "elements": [
     {
       "type": "text",
       "x": 198,
       "y": 5,
-      "value": "گزارش:"
+      "value": "نام:"
+    },
+    {
+      "type": "text",
+      "x": 160,
+      "y": 5,
+      "value": "نام خانوادگی:"
+    },
+    {
+      "type": "text",
+      "x": 108,
+      "y": 5,
+      "value": "سن:"
+    },
+    {
+      "type": "text",
+      "x": 68,
+      "y": 5,
+      "value": "ارجاع از:"
     }
   ],
   "inputs": [
     {
-      "name": "description",
-      "x": 186,
+      "name": "name",
+      "x": 191,
+      "y": 5
+    },
+    {
+      "name": "lastName",
+      "x": 139,
+      "y": 5
+    },
+    {
+      "name": "age",
+      "x": 100,
+      "y": 5
+    },
+    {
+      "name": "referrer",
+      "x": 55,
+      "y": 5
+    }
+  ],
+  "forceInputs": [
+    {
+      "name": "name",
+      "x": 188,
+      "y": 4
+    },
+    {
+      "name": "lastName",
+      "x": 151,
+      "y": 5
+    },
+    {
+      "name": "age",
+      "x": 101,
+      "y": 5
+    },
+    {
+      "name": "referrer",
+      "x": 56,
       "y": 5
     }
   ]
 }
 
-// const report = new Box({ container })
-// report.draw({ dims });
+const patient = new MultiText({ container, dims })
 
 dims = {
   "blank": false,
@@ -130,7 +182,7 @@ dims = {
   "height": 600
 }
 
-const RAudiogram = new Audiogram({ container, side: 'R', dims })
+// const RAudiogram = new Audiogram({ container, side: 'R', dims })
 // RAudiogram.update({
 //   data: {
 //     // R_AC_M: { 8000: 25, 2000: 5, 1500: 0, },

package/src/Box/Box.js

@@ -1,105 +0,0 @@
-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 Box {
-    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, className;
-        style = `
-        /* font-family: Arial, Helvetica, sans-serif !important; */
-        font-size: 1mm;
-        white-space: break-spaces;
-        /* font-weight: bold; */
-        direction: rtl !important;
-        user-select: none;
-        /* dominant-baseline: middle; /* تراز عمودی*/
-        `;
-        // بوردر کل چارت
-        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', style)
-        // svg.setAttribute('class', 'text-box')
-
-        // اگر مقدار استروک درست بود لیبل ها را چاپ کن
-        if (!dims.hideContext) {
-            dims.elements
-                .forEach(
-                    element => {
-                        switch (element.type) {
-                            case 'text':
-                                ({ x, y, value, style } = element);
-                                putText({ container: svg, value, x, y, style, className: 'persian bold' });
-                                break;
-                            case 'line':
-                                let { x1, y1, x2, y2 } = element;
-                                putLine({ container: svg, x1, y1, x2, y2 });
-                                break;
-                        }
-                    });
-        }
-
-        // محل اینپوت‌های دیتا
-        let name;
-        this.inputs && this.inputs.forEach(input => {
-            ({ name, x, y } = input);
-            putText({ container: svg, x, y, className: 'persian', name });
-        });
-
-        // مربع احاطه‌کننده کل جدول برای راهنمای توسعه
-        const borderRect = putRect({
-            container: svg, x: 0, y: 0, width, height,
-            name: dims.name, className: 'no-print',
-            style: 'stroke: transparent; fill: transparent '
-        });
-        this.borderRect = borderRect;
-        // console.log(dims);
-
-        this.container.appendChild(svg)
-        // this.patient = svg;
-
-    }
-
-    update(data) {
-        this.inputs.forEach(input => {
-            let value = data?.[input.name];
-            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 || "";
-        });
-    }
-}
-
-function putTspan({ container, value, x , y = 5, dx = 0, dy = 0, style }) {
-    const tspan = document.createElementNS(svgNS, "tspan");
-    tspan.setAttribute('x', x);
-    tspan.setAttribute('y', y)
-    tspan.textContent = value;
-    container && container.appendChild(tspan)
-    return tspan;
-}