hayun-vite 0.11.1 → 0.12.0

package/assets/templates/mainTemplate.js

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

package/assets/templates/template_combo.js

@@ -4,6 +4,7 @@ const template_combo = {
     // backgroundImage: 'backgroundImage',
     // تعیین نمایش بوردرهای سکشن ها
     sectionBorders: 'display', // display || none
+    boxBorders: 'none', // display || none
     margin: { left: 5, top: 5, right: 5, bottom: 5 },
     paper: { type: 'A4', case: 'portrait', width: 210, height: 297 },
 
@@ -36,6 +37,7 @@ const template_combo = {
             w: width, h: 8,
             margin: { left: 1, top: 0, right: 1, bottom: 0 },
             display: 'block',
+            boxBorder: 'none' // display || none default: none
         }
 
         this.history = {
@@ -43,6 +45,7 @@ const template_combo = {
             w: width, h: 14,
             margin: { left: 1, top: 0, right: 1, bottom: 0 },
             display: 'block',
+            boxBorder: 'none' // display || none
         }
 
         // Titles Common Object
@@ -92,7 +95,7 @@ const template_combo = {
         this.RSpeech = {
             name: 'RSpeech',
             w: width / 2, h: 15,
-            margin: { left: 1, top: 0, right: 2, bottom: 0 },
+            margin: { left: 1, top: 0, right: 10, bottom: 0 },
             display: 'inline',
             stroke: true,
         }
@@ -100,7 +103,7 @@ const template_combo = {
         this.LSpeech = {
             name: 'LSpeech',
             w: width / 2, h: 15,
-            margin: { left: 2, top: 0, right: 1, bottom: 0 },
+            margin: { left: 10, top: 0, right: 1, bottom: 0 },
             display: 'block',
             stroke: true
         }
@@ -116,14 +119,14 @@ const template_combo = {
         this.RTympanogram = {
             name: 'RTympanogram',
             w: width / 2, h: 60,
-            margin: { left: 1, top: 0, right: 2, bottom: 0 },
+            margin: { left: 1, top: 0, right: 10, bottom: 0 },
             display: 'inline',
         }
 
         this.LTympanogram = {
             name: 'LTympanogram',
             w: width / 2, h: 60,
-            margin: { left: 2, top: 0, right: 1, bottom: 0 },
+            margin: { left: 10, top: 0, right: 1, bottom: 0 },
             display: 'block',
         }
 
@@ -138,14 +141,14 @@ const template_combo = {
         this.RReflex = {
             name: 'RReflex',
             w: width / 2, h: 26,
-            margin: { left: 1, top: 0, right: 2, bottom: 1 },
+            margin: { left: 1, top: 0, right: 10, bottom: 1 },
             display: 'inline'
         }
 
         this.LReflex = {
             name: 'LReflex',
             w: width / 2, h: 26,
-            margin: { left: 2, top: 0, right: 1, bottom: 1 },
+            margin: { left: 10, top: 0, right: 1, bottom: 1 },
             display: 'block'
         }
 

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.1",
+  "version": "0.12.0",
   "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

@@ -14,13 +14,13 @@ export default class Form {
         this.container = container;
         this.data = {};
         let { width, height, margin, paper } = template;
-        this.form = this.create({ paper, margin });
-        this.form.style.display = 'none';
+        this.page = this.create({ paper, margin });
+        this.page.style.display = 'none';
         let dims;
         // رسم مارجین های فرم
-        this.drawMarginLines({ container: this.form, width, height });
+        this.drawMarginLines({ container: this.page, width, height });
 
-        const sections = new Sections({ container: this.form, dims: template });
+        const sections = new Sections({ container: this.page, dims: template });
         this.sections = sections;
 
         if (sections.header) {
@@ -101,7 +101,7 @@ export default class Form {
             this.footer = new MultiText({ container: sections.footer, dims})
         }
 
-        this.container.appendChild(this.form);
+        this.container.appendChild(this.page);
     }
 
 

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/Sections.js

@@ -46,7 +46,7 @@ export default class Sections {
                 putRect({
                     container: svg, x: 0, y: 0, width, height,
                     style: 'fill: transparent; stroke: blue; stroke-width: 0.2',
-                    className: 'no-print', name: 'guide-border'
+                    className: 'no-print', name: 'section-border'
                 });
 
             this[name] = svg;

package/src/Form/Sections_N.js

@@ -46,7 +46,7 @@ export default class Sections {
                 putRect({
                     container: svg, x: 0, y: 0, width, height,
                     style: 'fill: transparent; stroke: blue; stroke-width: 0.2',
-                    className: 'no-print', name: 'guide-border'
+                    className: 'no-print', name: 'section-border'
                 });
 
             this[name] = svg;

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'
@@ -9,6 +9,7 @@ import Form from "./Form.js";
 // خط کد زیر لازم هست
 // import '/fonts/webfonts/Vazirmatn-Regular.woff2'
 import '../styles.css'
+import putLine from "../common/putLine.js";
 
 // کلاس جدید که فرم‌های مختلف را نمایش میدهد
 export default class Forms {
@@ -34,16 +35,17 @@ export default class Forms {
 
         const forms = []; // آرایه آبجکت های فرم های مختلف
         this.forms = forms;
-        this.pages = 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 }));
-        });
+        templates.
+            forEach((template, index) => {
+                this.mode == 'develop' &&
+                    (btns[index] = this.putButton({ container: div, text: template.label, className }));
+                this.forms.push(new Form({ container, template }));
+            });
 
         // انتخاب فرم پیش‌فرض  
         let selectedIndex = defaultTemplateIndex;
-        forms[selectedIndex].form.style.display = 'block';
+        forms[selectedIndex].page.style.display = 'block';
         this.selectedForm = this.forms[selectedIndex];
         (this.mode == 'develop') && (btns[selectedIndex].style.backgroundColor = ' #1c15e1');
 
@@ -51,18 +53,18 @@ export default class Forms {
 
             const printBtn = this.putButton({ container: div, text: 'چاپ', className });
             // تعریف رویداد دکمه چاپ فرم نمایشی
-            printBtn.addEventListener('click', () => { printForm({ container: this.selectedForm.form }) });
+            printBtn.addEventListener('click', () => { printForm({ container: this.selectedForm.page }) });
 
             btns.forEach((btn, index) => {
                 btn.addEventListener('click', () => {
                     // Hide All forms
                     forms.forEach((form, i) => {
-                        form.form.style.display = 'none'
+                        form.page.style.display = 'none'
                         btns[i].style.backgroundColor = ' #7472e2'
 
                     });
 
-                    forms[index].form.style.display = 'block';
+                    forms[index].page.style.display = 'block';
                     btns[index].style.backgroundColor = ' #1c15e1'
 
                     this.selectedForm = forms[index];
@@ -71,11 +73,56 @@ export default class Forms {
                 })
             })
 
-            this.putButton({ container: div, text: 'Show/Hide', className })
-                .addEventListener('click', () => { this.toggleDisplay({ container: forms[selectedIndex].form }) });
+            // دکمه نمایش و پنهان خطوط سکشن
+            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 })
         }
     }
 
+    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
+
+        // رسم خطوط افقی
+        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
+
+        for (let y1 = yStart; y1 <= yEnd; y1 += yStep) {
+            y2 = y1
+            putLine({ container, x1, y1, x2, y2, style, name: 'grid' })
+        }
+
+        // رسم خطوط عمودی
+        y1 = yStart
+        for (x1 = xStart; x1 <= xEnd; x1 += xStep) {
+            const x2 = x1
+            putLine({ container, x1, y1, x2, y2, style, name: 'grid' })
+        }
+
+
+    }
+
     // این تابع یک بار از بیرون کلاس فراخوانی میشه و یک بار وقتی از داخل تمپلت فرم را عوض میکنیم
     update({ data, officeData, patientData, sessionIndex = 0 }) {
         // ذخیره کل دیتا برای استفاده داخلی آپدیت فرم انتخاب شده
@@ -94,8 +141,8 @@ export default class Forms {
     }
 
     // تابع تاگل نمایش و مخفی کردن خطوط راهنمای طراحی
-    toggleDisplay({ container }) {
-        container.querySelectorAll(`[data-name='guide-border']`)
+    toggleDisplay({ container, borderName }) {
+        container.querySelectorAll(`[data-name=${borderName}]`)
             .forEach(element => {
                 element.style.display = (element.style.display === '') ? 'none' : '';
             });

package/src/MultiText/MultiText.js

@@ -62,11 +62,23 @@ export default class MultiText {
         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;'
+            style: 'stroke: transparent; fill: transparent; stroke-width: 0.3;'
         });
-
         this.borderRect = borderRect;
         this.container.appendChild(svg)
+
+        // Box Border for Design guid with Brown Color
+        dims.boxBorder === 'display' && putRect({
+            container: svg, x: 0, y: 0, width, height,
+            style: 'fill: transparent; stroke-width: 0.3; stroke: brown;',
+            name: 'box-border',
+            className: 'no-print',
+        })
+
+        this.container.appendChild(svg)
+
+
+
     }
 
     update(data) {

package/src/Reflex/Reflex.js

@@ -1,14 +1,13 @@
 import putRect from "../common/putRect.js";
 import putSVG from "../common/putSVG.js";
 import putText from "../common/putText.js";
-import putCell from "../common/putCell.js";
 import units from "./units.js";
 
 export default class Reflex {
     constructor({ container, side, dims }) {
         this.container = container;
         this.side = side; // این برای تعیین رنگ راست و چپ استفاده می‌شود
-        this.draw({dims})
+        this.draw({ dims })
     }
 
     draw({ dims }) {
@@ -22,54 +21,35 @@ export default class Reflex {
         // کل چارت
         // const svg = putSVG({ x, y, width, height, className: 'reflex' })
         let { styles, vbWidth, vbHeight } = units;
-        
+
         // کل چارت
+        style = styles.svg
         vbHeight = (vbWidth * height) / width // متناسب سازی ارتفاع ویباکس با پهنا و ارتفاع ورودی
         const viewBox = [0, 0, vbWidth, vbHeight].join(' ');
-        const svg = putSVG({ x, y, width, height, viewBox })
+        const svg = putSVG({ x, y, width, height, viewBox, style })
         // این خط شد دو خط کد طلایی که مشکل سایز فونت در دیسپلی و کاغذ رو حل کرد
         width = vbWidth; // ثابت می‌ماند همیشه
         height = vbHeight // با نسبت پهنا و ارتفاع ورودی تغییر میکند 
 
 
-
+        // چاپ برچسب‌های سطر اول
+        style = styles.numberlabel;
         let lable = ["", "500", "1000", "2000", "4000"]; // مقادیر برچسب‌های سطر اول
         // جدولی با ۳ سطر و ۵ ستون
         let cw1 = width / 5; // پهنای خانه‌های سطر اول
         let ch1 = height / 3; // ارتفاع خانه‌های سطر اول
         let ch2 = height / 3; // ارتفاع خانه‌های سطر دوم
 
-        // چاپ برچسب‌های سطر اول
-        style = `
-            user-select: none;
-            direction: ltr !important;
-            /* text-align: center; */
-            font-family: Arial, Helvetica, sans-serif !important;
-            font-size: 1mm;
-            font-weight: bold;
-            text-anchor: middle; /*تراز افقی*/
-            dominant-baseline: middle; /* تراز عمودی*/       
-        `;
         lable.forEach((value, i) => {
             if (value != "") {
                 let x = cw1 / 2 + cw1 * i;
                 let y = ch1 / 2;
-                // putText(value, x, y, "", "middle", "middle"); // با استایل تراز عمودی پایین نسبت به خط پایه
                 putText({ container: svg, value, x, y, style })
             }
         });
 
         // مقادیر برچسب‌های ستون اول
-        style = `
-            user-select: none;
-            direction: ltr !important;
-            /* text-align: center; */
-            font-family: Arial, Helvetica, sans-serif !important;
-            font-size: 1mm;
-            font-weight: bold;
-            text-anchor: end; /*تراز افقی*/
-            dominant-baseline: middle; /* تراز عمودی*/       
-        `;
+        style = styles.textLable
         lable = ["Freq", "IPSI", "CONTRA"];
         // چاپ برچسب‌های ستون اول
         putText({ container: svg, value: "Freq", x: cw1, y: ch1 / 2, style: style })
@@ -77,24 +57,27 @@ export default class Reflex {
         putText({ container: svg, value: "CONTRA", x: cw1, y: ch1 * 5 / 2, style: style })
 
         //چاپ ده باکس سطر دوم و سوم
+        const inputBox = {
+            width: width / 5 * 0.80, height: height / 3 * 0.8,
+            rx: width / 100
+        }
+        // محاسبه کمان گردی بر اساس مقدار پهنا
+        inputBox.rx = inputBox.width / 10
+
         for (let j = 1; j <= 2; j++) {
             for (let i = 1; i <= 4; i++) {
-                let x = cw1 / 2 + cw1 * i;
-                let y = ch1 * j + ch2 / 2;
+                let cx = cw1 / 2 + cw1 * i;
+                let cy = ch1 * j + ch2 / 2;
                 //رسم باکس با مختصات مرکز باکس
-                putCell({ container: svg, x, y, dx: 0, dy: -1, width: 13, height: 7, rx: 1 });
+                putRect({
+                    container: svg, cx, cy,
+                    width: inputBox.width, height: inputBox.height, rx: inputBox.rx
+                });
             }
         }
 
-        style = `
-            user-select: none;
-            direction: ltr !important;
-            /* text-align: center; */
-            font-family: Arial, Helvetica, sans-serif !important;
-            font-size: 1mm;
-            text-anchor: middle; /*تراز افقی*/
-            dominant-baseline: middle; /* تراز عمودی*/
-        `;
+        // مقادیر ورودی عددی
+        style = styles.inputNumber
         // اضافه کردن رنگ قرمز یا آبی به استایل بر اساس جهت
         style += (this.side === 'R') ? 'fill: red;' : 'fill: blue;';
 
@@ -102,7 +85,7 @@ export default class Reflex {
         for (let index = 0; index < 4; index++) {
             x = cw1 / 2 + cw1 * (index + 1);
             y = ch1 + ch2 / 2;
-            putText({ container: svg, value: "", x, y, dx: 0, dy: -1, style, name: names[index] })
+            putText({ container: svg, value: "", x, y, style, name: names[index] })
         }
 
         // المنت‌های تکست خالی با آیدی یکتا در سطر سوم
@@ -113,7 +96,7 @@ export default class Reflex {
             // const idValue = idValues[index];
             x = cw1 / 2 + cw1 * (index + 1);
             y = ch1 * 2 + ch2 / 2;
-            putText({ container: svg, value: "", x, y, dx: 0, dy: -1, style, name: names[index] })
+            putText({ container: svg, value: "", x, y, style, name: names[index] })
         }
         // مربع احاطه‌کننده کل جدول برای راهنمای توسعه و دریافت رویداد کلیک روی فرم
         style = 'fill: transparent; stroke: green; stroke-width: 0.5;';

package/src/Reflex/units.js

@@ -12,53 +12,25 @@ const units = {
     height: 30,
 
     styles: {
-        pressure: `
-            user-select: none;
-            direction: ltr !important;
-            font-family: Vazir;
-            font-size: 3;
-            text-anchor: middle; 
-            dominant-baseline: hanging; 
-        `,
-        caption: `
-            user-select: none;
-            direction: ltr !important;
-            font-family: Vazir;
-            font-size: 3;
-            text-anchor: middle; 
+        svg: 'user-select: none; direction: ltr !important; font-family: Vazir;',
+        textLable: `
+            font-size: 4.2;
+            font-weight: bold;
+            text-anchor: end;
             dominant-baseline: middle; 
         `,
-        label: `
-            user-select: none;
-            direction: ltr !important;
-            font-family: Vazir;
-            font-size: 1mm;
-            text-anchor: start;
-            dominant-baseline: middle;       
-        `,
-        type: `
-            user-select: none;
-            direction: ltr !important;
-            font-family: Vazir;
-            font-size: 1mm;
-            font-weight: bold;
-            text-anchor: start;
+        numberlabel: `
+            font-size: 4.2;
+            font-weight: 700;
+            text-anchor: middle;   
             dominant-baseline: middle;   
         `,
-        compliance: `
-            user-select: none;
-            direction: ltr !important;
-            font-family: Vazir;
-            font-size: 0.7mm;
-            text-anchor: end; 
-            dominant-baseline: middle; 
+        inputNumber: `
+            font-size: 4.2;
+            font-weight: 700;
+            text-anchor: middle;   
+            dominant-baseline: middle;  
         `,
-        mainFreqline: `stroke: black; stroke-width: 1;`,
-        semiOctavFreqline: `stroke: black; stroke-width: 1;  stroke-dasharray: 4;`,
-        boldLine: 'stroke: black; stroke-width: 3;',
-
-        juncDashLine: `stroke-width: 1 ; stroke-opacity: 0.8; stroke-dasharray: 4;`,
-        juncLine: `stroke-width: 1; stroke-opacity: 0.8;`,
     },
 }
 

package/src/Speech/Speech.js

@@ -1,4 +1,4 @@
-import putCell from "../common/putCell.js";
+// https://docs.google.com/document/d/19Pgsi0eHRDgsxjkbxweHLRKVB60jrH4fzV52I83-6CM/edit?tab=t.977lyzmcu5uu#heading=h.sd8yc08kbsfo
 import putRect from "../common/putRect.js";
 import putText from "../common/putText.js";
 import putSVG from "../common/putSVG.js";
@@ -9,11 +9,10 @@ export default class Speech {
     constructor({ container, side = 'R', dims }) {
         this.container = container;
         this.side = side;
-        this.draw({dims})
+        this.draw({ dims })
     }
 
     draw({ dims }) {
-        // console.log(dims);
 
         // دریافت اطلاعات مختصات چاپ ورودی ها به جز عادی محاسبه شده 
         this.inputs = (dims.forceInsert) ? dims.forceInputs : dims.inputs
@@ -23,6 +22,7 @@ export default class Speech {
         let x = dims.margin.left;
         let y = dims.margin.top;
         let { styles, vbWidth, vbHeight } = units;
+        let cx, cy;
 
         // کل چارت
         vbHeight = (vbWidth * height) / width // متناسب سازی ارتفاع ویباکس با پهنا و ارتفاع ورودی
@@ -32,7 +32,6 @@ export default class Speech {
         width = vbWidth; // ثابت می‌ماند همیشه
         height = vbHeight // با نسبت پهنا و ارتفاع ورودی تغییر میکند 
 
-
         const labels = dims.labels;
         this.labels = labels;
         // یک جدول 6*2  - ۲ سطر و ۶ ستون
@@ -57,11 +56,11 @@ export default class Speech {
         ];
 
         for (let i = 0; i < rows; i++) {
-            x = cw / 2;
-            y = ch / 2 + ch * i;
+            cx = cw / 2;
+            cy = ch / 2 + ch * i;
             for (let j = 0; j < columns; j++) {
-                matrix[i][j] = { i, j, x, y };
-                x += cw;
+                matrix[i][j] = { i, j, cx, cy };
+                cx += cw;
             }
         }
 
@@ -70,12 +69,15 @@ export default class Speech {
         // برای فرم های پیش چاپ شده انجام نمیشود
         !dims.hideContext &&
             matrix[0].forEach((cell, index) =>
-                putText({ container: svg, value: labels[index], x: cell.x, y: cell.y, dx: 0, dy: 1, style }));
+                putText({
+                    container: svg, value: labels[index],
+                    x: cell.cx, y: cell.cy, dx: 0, dy: 1, style
+                }));
 
         style += (this.side === 'R') ? 'fill: red;' : 'fill: blue;';
 
         const inputBox = {
-            width: width / 5 * 0.70, height: height / 2 * 0.85,
+            width: width / 5 * 0.80, height: height / 2 * 0.95,
             rx: width / 100
         }
         // محاسبه کمان گردی بر اساس مقدار پهنا
@@ -85,14 +87,14 @@ export default class Speech {
         matrix[1].forEach((cell, index) => {
             // برای فرم های پیش چاپ شده باکس رسم نمیشود
             !dims.hideContext &&
-                putCell({
-                    container: svg, x: cell.x, y: cell.y, dy: -1,
+                putRect({
+                    container: svg, cx: cell.cx, cy: cell.cy, dy: -1,
                     width: inputBox.width, height: inputBox.height,
                     rx: inputBox.rx,
                 });
             // مقدار نگه دارها
             if (!dims.forceInsert) {
-                putText({ container: svg, value: "", x: cell.x, y: cell.y, style, name: labels[index] });
+                putText({ container: svg, value: "", x: cell.cx, y: cell.cy, style, name: labels[index] });
             } else {
                 // برای فرم های مثل رسا استفاده میشود
                 let name;

package/src/Speech/{Speech_N.js → Speech_box.js}

@@ -1,4 +1,3 @@
-import putCell from "../common/putCell.js";
 import putRect from "../common/putRect.js";
 import putText from "../common/putText.js";
 import putSVG from "../common/putSVG.js";
@@ -7,13 +6,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 +48,6 @@ export default class Speech {
             }
         }
 
-
         // ایجاد ماتریکس سلول های چارت که آدرس و مختصات مرکز هر سلول را نگهداری میکند
         const matrix = [
             [],
@@ -69,7 +64,6 @@ export default class Speech {
         }
 
         style = styles.label;
-
         // برچسب های سطر اول
         // برای فرم های پیش چاپ شده انجام نمیشود
         // !dims.hideContext &&
@@ -89,8 +83,8 @@ export default class Speech {
         matrix[1].forEach((cell, index) => {
             // برای فرم های پیش چاپ شده باکس رسم نمیشود
             // !dims.hideContext &&
-            putCell({
-                container, x: cell.x, y: cell.y, dy: -1,
+            putRect({
+                container, cx: cell.x, cy: cell.y, dy: -1,
                 width: inputBox.width, height: inputBox.height,
                 rx: inputBox.rx,
             });

package/src/common/putLine.js

@@ -2,7 +2,7 @@
 const svgNS = "http://www.w3.org/2000/svg";
 
 export default function putLine({ container, x1, y1, x2, y2, style = 'stroke: black; stroke-width: 0.3;', name }) {
-    
+
     let line = document.createElementNS(svgNS, "line");
     line.setAttribute("x1", x1);
     line.setAttribute("y1", y1);
@@ -10,8 +10,7 @@ export default function putLine({ container, x1, y1, x2, y2, style = 'stroke: bl
     line.setAttribute("y2", y2);
     line.setAttribute("style", style)
     line.setAttribute("data-name", name)
-    // line.setAttribute("stroke", "black");
-    // line.setAttribute("stroke-width", 0.5);
+
     container.appendChild(line);
 
 }

package/src/common/putRect.js

@@ -1,15 +1,25 @@
+// https://docs.google.com/document/d/19Pgsi0eHRDgsxjkbxweHLRKVB60jrH4fzV52I83-6CM/edit?tab=t.0#heading=h.5zc9gsazq7wu
 const svgNS = "http://www.w3.org/2000/svg";
 
-export default function putRect({ container, x, y, width, height, style = 'fill: transparent; stroke: green; stroke-width: 0.5;', name, className }) {
+
+export default function putRect({
+    container, x, y, cx, cy, dx = 0, dy = 0, rx, width, height,
+    style = 'fill: transparent; stroke: black; stroke-width: 0.2;', name, className
+}
+) {
     let rect = document.createElementNS(svgNS, "rect");
-    rect.setAttribute("x", x);
-    rect.setAttribute("y", y);
+    cx && rect.setAttribute("x", cx - width / 2 + dx);
+    cy && rect.setAttribute("y", cy - height / 2 + dy);
+    rx && rect.setAttribute("rx", rx);
+    x && rect.setAttribute("x", x + dx);
+    y && rect.setAttribute("y", y + dy);
     rect.setAttribute("width", width);
     rect.setAttribute("height", height);
     rect.setAttribute("style", style);
     className && rect.setAttribute("class", className);
-    rect.setAttribute("data-name", name);
-    container.appendChild(rect);
+    name && rect.setAttribute("data-name", name);
+    container && container.appendChild(rect);
+
     return rect;
 
 }

package/src/main.js

@@ -1,6 +1,6 @@
 // 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";
@@ -163,7 +163,7 @@ dims = {
   ]
 }
 
-const patient = new MultiText({ container, dims })
+// const patient = new MultiText({ container, dims })
 
 dims = {
   "blank": false,

package/src/Form/grid/drawGrid.js

@@ -1,84 +0,0 @@
-// import { svgNS } from "../../globalinfo.js";
-const svgNS = "http://www.w3.org/2000/svg";
-
-// پهنا و ارتفاع ظرف را پیدا کن و آنرا شطرنجی کن
-export default function drawGrid(container) {
-  const viewBox = container.getAttribute("viewBox");
-  const w = container.getAttribute("width");
-  const h = container.getAttribute("height");
-  const svg = document.createElementNS(svgNS, "svg");
-  svg.setAttribute("viewBox", viewBox);
-  // svg.setAttribute("width", 210);
-  // svg.setAttribute("height", 297);
-  
-  // مربع احاطه‌کننده کل جدول برای راهنمای توسعه
-  let rect = document.createElementNS(svgNS, "rect");
-  rect.setAttribute("x", 0);
-  rect.setAttribute("y", 0);
-  rect.setAttribute("width", 210);
-  rect.setAttribute("height", 297);
-  rect.setAttribute("style", "fill: transparent; stroke-width: 1;");
-  svg.appendChild(rect);
-
-  let line,
-    x,
-    y = 0;
-  // رسم خطوط افقی با فاصله واحد ویوباکس
-  for (y = 1; y <= 296; y++) {
-    line = document.createElementNS(svgNS, "line");
-    line.setAttribute("x1", 1);
-    line.setAttribute("y1", y);
-    line.setAttribute("x2", 209);
-    line.setAttribute("y2", y);
-    line.setAttribute(
-      "style",
-      "stroke: black; stroke-width: 0.1; stroke-opacity: 0.5; stroke-dasharray: 0.1;"
-    );
-    line.setAttribute("class", "gridLines");
-    svg.appendChild(line);
-  }
-
-  // رسم خطوط عمودی با فاصله واحد ویوباکس
-  for (x = 1; x <= 209; x++) {
-    line = document.createElementNS(svgNS, "line");
-    line.setAttribute("x1", x);
-    line.setAttribute("y1", 1);
-    line.setAttribute("x2", x);
-    line.setAttribute("y2", 296);
-    line.setAttribute(
-      "style",
-      "stroke: black; stroke-width: 0.1; stroke-opacity: 0.5; stroke-dasharray: 0.1;"
-    );
-    line.setAttribute("class", "gridLines");
-
-    svg.appendChild(line);
-  }
-  // رسم خط میانی افقی 
-  line = document.createElementNS(svgNS, "line");
-  line.setAttribute("x1", 1);
-  line.setAttribute("y1", 297/2);
-  line.setAttribute("x2", 209);
-  line.setAttribute("y2", 297/2);
-  line.setAttribute(
-    "style",
-    "stroke: black; stroke-width: 0.2; stroke-opacity: 0.8;"
-  );
-  line.setAttribute("class", "gridLines");
-
-  svg.appendChild(line);
-
-  // رسم خط میانی عمودی
-  line = document.createElementNS(svgNS, "line");
-    line.setAttribute("x1", 105);
-    line.setAttribute("y1", 1);
-    line.setAttribute("x2", 105);
-    line.setAttribute("y2", 296);
-    line.setAttribute(
-      "style",
-      "stroke: black; stroke-width: 0.2; stroke-opacity: 0.8;"
-    );
-    line.setAttribute("class", "gridLines");
-
-    svg.appendChild(line);  
-  container.appendChild(svg);
-}

package/src/Form/grid/hideGrid.js

@@ -1,9 +0,0 @@
-export default function hideGrid() {
-
-  let gridLines = document.getElementsByClassName("gridLines");
-
-  for (const line of gridLines) {
-    line.style = "stroke: transparent; fill: transparent;"
-  }
-
-}

package/src/common/putCell.js

@@ -1,18 +0,0 @@
-const svgNS = "http://www.w3.org/2000/svg";
-
-export default function putCell(
-    {
-        container, x, y, dx = 0, dy= 0 , width, height, rx,
-        style = "fill: transparent; stroke: black; stroke-width: 0.2;",
-    }) {
-    let rect = document.createElementNS(svgNS, "rect");
-    rect.setAttribute("x", x - width / 2 + dx);
-    rect.setAttribute("y", y - height / 2 + dy);
-    rect.setAttribute("rx", rx);
-
-    rect.setAttribute("width", width);
-    rect.setAttribute("height", height);
-    rect.setAttribute("style", style);
-    container.appendChild(rect);
-
-}