hayun-vite 0.11.2 → 0.12.0

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/package.json

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

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

@@ -9,6 +9,7 @@ import Form from "../Form/Form.js";
 // خط کد زیر لازم هست
 // import '/fonts/webfonts/Vazirmatn-Regular.woff2'
 import '../styles.css'
+import putLine from "../common/putLine.js";
 
 // کلاس جدید که فرم‌های مختلف را نمایش میدهد
 export default class Forms {
@@ -22,9 +23,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);
 
@@ -34,17 +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');
 
@@ -52,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];
@@ -72,13 +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 }) {
         // ذخیره کل دیتا برای استفاده داخلی آپدیت فرم انتخاب شده
@@ -97,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_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";
@@ -84,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

@@ -195,7 +195,7 @@ dims = {
 //   side: 'R',
 // })
 
-const forms = new Forms({ container: document.getElementById('forms-div'), templates: [template], mode: 'production' });
+const forms = new Forms({ container: document.getElementById('forms-div'), templates: [template], mode: 'develop' });
 forms.update({ officeData, patientData, sessionIndex: 0 })
 
 

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);
-
-}