hayun-vite 0.11.0 → 0.11.2

package/assets/templates/mainTemplate.js

@@ -16,6 +16,7 @@ const mainTemplate = {
     },
 
     defSections: function () {
+        
         this['Header'] = {
             name: 'header', container: '',
             width: this.width, height: 20,

package/index.js

@@ -1,7 +1,7 @@
 import Audiogram from './src/Audiogram/Audiogram'
 import dims from './src/Audiogram/dims'
 import { officeData, patientData } from './assets/data/sampleData'
-import Forms from './src/Form/Forms'
+import Forms from './src/Forms/Forms'
 import combo_template from './assets/templates/template_combo'
 // import rasa_aud_template from './assets/templates/rasa_audiometry'
 // import rasa_tymp_reflex_template from './assets/templates/rasa_tymp_reflex'

package/package.json

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

package/src/Audiogram/Audiogram_box.js

@@ -1,43 +1,42 @@
+import putG from "../common/putG.js";
 import putLine from "../common/putLine.js";
 import putPoint from "../common/putPoint.js";
 import putRect from "../common/putRect.js";
 import putSVG from "../common/putSVG.js";
 import putText from "../common/putText.js";
 import getAllSymbolsSVG from "../Symbol/getAllSymbolsSVG.js";
-import mainDims from './dims_N.js';
+import mainDims from './dims.js';
 
 export default class Audiogram {
-  constructor({ box, side, events = true }) {
+  constructor({ box, container, side, dims, events = true }) {
+    console.log(box);
+    
+    this.container = container;
+    this.dims = {}
+    Object.assign(this.dims, mainDims)
+    // dims = { blank: false }
+    // اضافه کردن ابعاد جایگزین و یا اختصاصی دیگر به آبجکت ابعاد
+    dims && Object.assign(this.dims, dims);
+    // console.log(dims);
 
-    // this.container = container;
 
     this.events = events;
     this.side = side;
     this.data = {};
     const symbols = getAllSymbolsSVG();
     this.symbols = symbols;
-    this.draw({ box });
+    this.draw();
     events && this.addEvents();
   }
 
-  draw({ box }) {
-
-    const { container, width, height, margin, elements, name } = box
-
-    // this.dims = {}
-    // Object.assign(this.dims, mainDims)
-
-    // اضافه کردن ابعاد جایگزین و یا اختصاصی دیگر به آبجکت ابعاد
-    // dims && Object.assign(this.dims, dims);
-
-
-    // const [container, dims] = [this.container, this.dims]
+  draw() {
+    const [container, dims] = [this.container, this.dims]
     let
       {
-        vbWidth, vbHeight, chartPadding, symbolDims, vf, vfArray,
+        vbWidth, vbHeight, width, height, chartPadding, symbolDims, vf, vfArray,
         vfToF, fToVf, intensity, styles, frequencies
       }
-        = mainDims;
+        = dims;
     // متناسب سازی مقدار ارتفاع ویوباکس بر حسب نسبت طول و عرض پیکسلی
     const
       kpx = height / width,
@@ -45,8 +44,8 @@ export default class Audiogram {
 
     vbHeight = vbHeight * kpx * kvb;
 
-    let x = margin.left
-    let y = margin.top
+    let x = dims.margin.left
+    let y = dims.margin.top
 
     this.symbolDims = symbolDims;
     this.vf = vf;
@@ -75,64 +74,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({
-      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 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 })
-    }
+    if (!dims.blank) {
+      // محدوده مختصات خطوط جدول
+      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: g, x1, y1, x2, y2, style })
+      }
 
-    // رسم خطوط عمودی از چپ به راست
-    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 })
-    })
-    // برچسب های اعداد فرکانس
-    style = styles.frequency
-    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 });
-    })
+      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: 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: 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: g, x, y, value })
+      }
+
+      svg.appendChild(g);
 
-    // رسم اعداد شدت محور عمودی
-    style = styles.intensity
-    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 })
     }
-    // }
     // یک بوردر راهنمای توسعه برای اس‌ وی جی به تمام پهنا و ارتفاع رسم می‌کنیم
     // این مربع مرزی را آخرین ایجاد میکنیم تا بالاترین لایه باشد و روی ریودادها درست عمل کند
     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;
 

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/Form/{Form_N.js → Form_box.js}

@@ -1,14 +1,10 @@
-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 Header from "../Header/Header_box.js";
+import Speech from "../Speech/Speech_box.js";
 import putRect from "../common/putRect.js";
-import Audiogram from "../Audiogram/Audiogram_N.js";
+import Audiogram from "../Audiogram/Audiogram_box.js";
 import mainTemplate from "../../assets/templates/mainTemplate.js";
 import putSVG from "../common/putSVG.js";
-import MultiText from "../MultiText/MultiText.js";
+import MultiText from "../MultiText/MultiText_box.js";
 const svgNS = "http://www.w3.org/2000/svg";
 
 export default class Form {
@@ -40,7 +36,7 @@ export default class Form {
                 case 'history':
                     break;
                 case 'RAudiogram':
-                    const RAudiogram = new Audiogram({ box, side: 'R', events: false })
+                    const RAudiogram = new Audiogram({ box, container: box.container, side: 'R', events: false })
                     break;
                 case 'LAudiogram':
                     // const LAudiogram = new Audiogram({ container: box.container, side: 'L', dims: box, events: false })

package/src/{Form → Forms}/Forms.js

@@ -1,7 +1,7 @@
 const svgNS = "http://www.w3.org/2000/svg";
 
 import printForm from "./printForm.js";
-import Form from "./Form.js";
+import Form from "../Form/Form.js";
 // import combo from "./templates/combo.js"; // این در حقیقیت یک تمپلت هست
 // import rasaAud from "./templates/rasa_audiometry.js";
 // import rasaTymp from './templates/rasa_tymp_reflex.js'
@@ -22,9 +22,9 @@ export default class Forms {
     // افزودن فرم 
     addForms({ templates, defaultTemplateIndex }) {
         const container = this.container
+        
         // ایجاد یک دیو برای قرار دادن دکمه ها و لینک های فرم
         const div = document.createElement('div');
-
         div.style = 'border: 1px solid brown; margin: 0; padding: 0;'
         container.appendChild(div);
 
@@ -37,7 +37,8 @@ export default class Forms {
         this.pages = forms
 
         templates.forEach((template, index) => {
-            (this.mode == 'develop') && (btns[index] = this.putButton({ container: div, text: template.label, className }));
+            (this.mode == 'develop') &&
+                (btns[index] = this.putButton({ container: div, text: template.label, className }));
             this.forms.push(new Form({ container, template }));
         });
 
@@ -76,6 +77,8 @@ export default class Forms {
         }
     }
 
+
+
     // این تابع یک بار از بیرون کلاس فراخوانی میشه و یک بار وقتی از داخل تمپلت فرم را عوض میکنیم
     update({ data, officeData, patientData, sessionIndex = 0 }) {
         // ذخیره کل دیتا برای استفاده داخلی آپدیت فرم انتخاب شده

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_box.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/Speech/{Speech_N.js → Speech_box.js}

@@ -7,13 +7,10 @@ const svgNS = "http://www.w3.org/2000/svg";
 
 export default class Speech {
     constructor({ box, side = 'R' }) {
-        console.log(box);
-
         // const { container, width, height, elements } = box
         // this.container = container;
         this.side = side;
         this.draw({ box })
-
     }
 
     draw({ box }) {
@@ -52,7 +49,6 @@ export default class Speech {
             }
         }
 
-
         // ایجاد ماتریکس سلول های چارت که آدرس و مختصات مرکز هر سلول را نگهداری میکند
         const matrix = [
             [],
@@ -69,7 +65,6 @@ export default class Speech {
         }
 
         style = styles.label;
-
         // برچسب های سطر اول
         // برای فرم های پیش چاپ شده انجام نمیشود
         // !dims.hideContext &&

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

@@ -1,12 +1,13 @@
 // import './style.css'
 import Audiogram from "./Audiogram/Audiogram.js"
-import Forms from "./Form/Forms.js";
+import Forms from "./Forms/Forms.js";
 import { officeData, patientData } from "../assets/data/sampleData.js"
 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, },
@@ -143,7 +195,7 @@ const RAudiogram = new Audiogram({ container, side: 'R', dims })
 //   side: 'R',
 // })
 
-const forms = new Forms({ container: document.getElementById('forms-div'), templates: [template], mode: 'develop' });
+const forms = new Forms({ container: document.getElementById('forms-div'), templates: [template], mode: 'production' });
 forms.update({ officeData, patientData, sessionIndex: 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;
-}