hayun-vite 0.3.1 → 0.4.1

package/src/Form/Sections.js

@@ -1,3 +1,5 @@
+import putRect from "../common/putRect";
+
 export default class Sections {
     constructor({ container, dims }) {
         this.dims = dims
@@ -44,17 +46,11 @@ export default class Sections {
             // نگهداری مختصات رسم بوردر هر سکشن برای استفاده در متد داخلی رسم بودر تاپ لایر 
             this.cords.push({ name: name, width: width, height: height, x: this.left, y: this.top });
 
-            // بوردر راهنما
-            let rect = document.createElementNS(svgNS, "rect");
-            rect.setAttribute("x", 0);
-            rect.setAttribute("y", 0);
-            rect.setAttribute("width", width);
-            rect.setAttribute("height", height);
-            rect.setAttribute("fill", "transparent");
-            rect.setAttribute("stroke", "blue");
-            rect.setAttribute("stroke-width", "0.1mm");
-            rect.setAttribute("data-name", "section-border");
-            svg.appendChild(rect);
+            putRect({
+                container: svg, x: 0, y: 0, width, height,
+                style: 'fill: transparent; stroke: blue; stroke-width: 0.2',
+                className: 'no-print', name: 'guide-border'
+            })
             this[name] = svg;
             this.container.appendChild(svg)
 

package/src/Form/Speech.js

@@ -82,7 +82,6 @@ export default class Speech {
         // اینپوت‌ها
         style += 'text-anchor: middle; dominant-baseline: middle; /* تراز عمودی*/ ';
 
-
         // New
         if (!dims.forceInsert) {
             let index = 0;
@@ -102,7 +101,8 @@ export default class Speech {
         }
         // مربع احاطه‌کننده کل جدول برای راهنمای توسعه
         style = 'fill: transparent; stroke: green; stroke-width: 0.5;';
-        putRect({ container: svg, x: 0, y: 0, width, height, style, name: dims.name })
+        let className = 'no-print'
+        putRect({ container: svg, x: 0, y: 0, width, height, style, name: dims.name, className })
         this.chart = svg;
         this.container.appendChild(svg);
 

package/src/Form/TextBox.js

@@ -50,7 +50,11 @@ export default class TextBox {
         });
 
         // مربع احاطه‌کننده کل جدول برای راهنمای توسعه
-        const borderRect = putRect({ container: svg, x: 0, y: 0, width, height, name: dims.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);
 

package/src/Form/Tympanogram.js

@@ -3,11 +3,12 @@ import putText from "../common/putText.js";
 const svgNS = "http://www.w3.org/2000/svg";
 
 export default class Tympanogram {
-    constructor({ container } = {}) {
+    constructor({ container, side }) {
         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
     }
 
     draw({ dims }) {
@@ -30,7 +31,7 @@ export default class Tympanogram {
         svg.setAttribute("x", x);
         svg.setAttribute("y", y);
         svg.setAttribute("viewBox", [-padding.left, -padding.top, width, height]);
-       
+
 
 
         const pressureAxiosLength = {
@@ -191,8 +192,8 @@ export default class Tympanogram {
         // console.log(this.container);
         // مربع احاطه‌کننده کل جدول برای راهنمای توسعه
         style = 'fill: transparent; stroke: green; stroke-width: 0.5;';
-         // یک بوردر راهنمای توسعه برای اس‌ وی جی به تمام پهنا و ارتفاع رسم می‌کنیم
-         putRect({ container: svg, x: -padding.left, y: -padding.top, width, height, name: dims.name, style })
+        // یک بوردر راهنمای توسعه برای اس‌ وی جی به تمام پهنا و ارتفاع رسم می‌کنیم
+        putRect({ container: svg, x: -padding.left, y: -padding.top, width, height, name: dims.name, style })
         this.chart = svg;
         this.container.appendChild(svg);
 
@@ -236,13 +237,10 @@ export default class Tympanogram {
 
         // جایگذاری مقادیر تمپانومتری در تکست‌باکس ها
         this.chart.querySelector(`text[data-name="Type"]`).innerHTML = data?.type || "";
-        // container.getElementById(container.id + "_Type").innerHTML = data?.Type || "";
         this.chart.querySelector(`text[data-name="ECV"]`).innerHTML = data?.ECV || "";
         this.chart.querySelector(`text[data-name="MEP"]`).innerHTML = data?.MEP || "";
         this.chart.querySelector(`text[data-name="SC"]`).innerHTML = data?.SC || "";
         this.chart.querySelector(`text[data-name="G"]`).innerHTML = data?.G || "";
-        // container.getElementById(container.id + "_SC").innerHTML = data?.SC || "";
-        // document.getElementById(container + "_G").innerHTML = data.G;
         // پاک کردن منحنی قبلی از کانتینر جاری
         this.chart.querySelector(`path[data-name="curve"]`)?.remove();
         // رسم منحنی
@@ -312,7 +310,7 @@ export default class Tympanogram {
         let path = document.createElementNS(svgNS, "path");
         path.setAttribute("fill", "none");
         path.setAttribute("data-name", "curve");
-        let color = ("R" == "R") ? "brown" : "blue";
+        let color = (this.side == "R") ? "red" : "blue";
         path.setAttribute("stroke", color);
         path.setAttribute("stroke-width", "0.5px");
         path.setAttribute(

package/src/Form/printForm.js

@@ -4,6 +4,7 @@ export default function printForm({ container }) {
   iframe.style.display = "block";
   let style = `
                 @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap');
+                font-display: auto;
 
                 @page {
 
@@ -42,7 +43,7 @@ export default function printForm({ container }) {
                         padding: 0;
                         break-inside: avoid;
                     }
-                    .non-print {
+                    .no-print {
                       display: none;
                     }
 

package/src/Form/templates/combo.js

@@ -42,17 +42,16 @@ const combo = {
 
         this.RAudiogram = {}
         Object.assign(this.RAudiogram,
-            audDims[this.name],
             {
+                blank: false,
                 name: 'RAudiogram',
-                w: width / 2, h: 100,
+                w: width / 2, h: 100, // ابعاد سکشن ادیوگرام 
                 margin: { left: 1, top: 1, right: 1, bottom: 1 },
                 display: 'inline',
             });
 
         this.LAudiogram = {}
         Object.assign(this.LAudiogram,
-            audDims[this.name],
             {
                 name: 'LAudiogram',
                 w: width / 2, h: 100, // پهنای سکشن هست

package/src/Form/templates/rasa_audiometry.js

@@ -1,10 +1,10 @@
-import audDims from "../../Audiogram/dims.js";
+import audDims from "../../Audiogram/dims.js"
+import image from './rasa_audiometry.jpg'
 
-
-const templateRasaAud = {
+const rasaAud = {
     name: 'rasa_audiometry',
     label: 'ادیومتری رسا',
-    backgroundImage: 'backgroundImage',
+    backgroundImage: image, // Just Path of image
     margin: { left: 0, top: 0, right: 0, bottom: 0 },
     paper: { type: 'A4', case: 'portrait', width: 209, height: 294.5 },
 
@@ -52,25 +52,34 @@ const templateRasaAud = {
 
         this.RAudiogram = {}
         Object.assign(this.RAudiogram,
-            audDims[this.name],
             {
+                blank: true,
+                chartPadding: { left: 0, top: 0, right: 0, bottom: 0 },
+
                 name: 'RAudiogram',
-                w: width / 2, h: 99,
+                w: width / 2, h: 99, // این پهنا و ارتفاع سکشن هست
                 margin: { left: 18.1, top: 18.5, right: 16.4, bottom: 11.2 },
+                intensity: { min: -20, max: 120, step: 10 },
+                // بعدا از مقادیر بالا برای محاسبه اتومات پهنا و ارتفاع استفاده میشود
+               
                 display: 'inline',
-            });
+            }
+        );
 
         this.LAudiogram = {}
         Object.assign(this.LAudiogram,
-            audDims[this.name],
             {
                 name: 'LAudiogram',
+                blank: true,
+
+                chartPadding: { left: 0, top: 0, right: 0, bottom: 0 },
+                intensity: { min: -20, max: 120, step: 10 },
+                
                 w: width / 2, h: 99, // پهنای سکشن هست
                 margin: { left: 18.2, top: 18.5, right: 16.4, bottom: 11.2 },
                 display: 'block',
-            });
-
-
+            }
+        );
 
         this.RSpeech = {
             name: 'RSpeech',
@@ -238,11 +247,11 @@ const templateRasaAud = {
 
 }
 
-templateRasaAud.calc1()
-templateRasaAud.calc2()
-templateRasaAud.calcSectionsArray()
+rasaAud.calc1()
+rasaAud.calc2()
+rasaAud.calcSectionsArray()
 
 // پهنا و ارتفاع قابل استفاده منهای پد ها میشه پهنا و ارتفاع اصلی
 
-export default templateRasaAud;
+export default rasaAud;
 

package/src/Form/templates/rasa_tymp_reflex.js

@@ -0,0 +1,199 @@
+import audDims from "../../Audiogram/dims.js"
+import image from './rasa_tymp_reflex.jpg'
+
+const rasaTymp = {
+    name: 'combo',
+    label: 'تمپانومتری رسا',
+    backgroundImage: image, // Just Path of image
+    margin: { left: 0, top: 0, right: 0, bottom: 0 },
+    paper: { type: 'A4', case: 'portrait', width: 209, height: 294.5 },
+
+    // Printable Dimention
+    calc1: function () {
+        this.width = this.paper.width - (this.margin.left + this.margin.right);
+        this.height = this.paper.height - (this.margin.top + this.margin.bottom);
+        let width = this.width;
+        // ابعاد و پدینگ المنت ها
+        // فضای خالی
+        this.blank = {
+            name: 'blank',
+            w: width, h: 20,
+            margin: { left: 0, top: 0, right: 0, bottom: 0 },
+            display: 'block',
+        }
+        this.header = {
+            // hideContext: true,
+            name: 'header',
+            w: width, h: 20,
+            margin: { left: 0, top: 0, right: 0, bottom: 0 },
+            display: 'block',
+        }
+        this.patient = {
+            name: 'patient',
+            w: width, h: 10,
+            margin: { left: 5, top: 1, right: 5, bottom: 1},
+            display: 'block',
+        }
+        this.history = {
+            name: 'history',
+            w: width, h: 10,
+            margin: { left: 1, top: 1, right: 1, bottom: 1 },
+            display: 'block',
+        }
+
+        this.RTympanogram = {
+            name: 'RTympanogram',
+            w: width / 2, h: 60,
+            margin: { left: 5, top: 2, right: 3, bottom: 2 },
+            display: 'inline',
+        }
+
+        this.LTympanogram = {
+            name: 'LTympanogram',
+            w: width / 2, h: 60,
+            margin: { left: 3, top: 2, right: 5, bottom: 2 },
+            display: 'block',
+        }
+        this.RReflex = {
+            name: 'RReflex',
+            w: width / 2, h: 30,
+            margin: { left: 5, top: 2, right: 3, bottom: 2 },
+            display: 'inline'
+        }
+
+        this.LReflex = {
+            name: 'LReflex',
+            w: width / 2, h: 30,
+            margin: { left: 3, top: 2, right: 5, bottom: 2 },
+            display: 'block'
+        }
+
+        this.report = {
+            name: 'report',
+            w: width, h: 20,
+            margin: { left: 1, top: 1, right: 1, bottom: 1 },
+            display: 'block'
+        }
+
+        this.footer = {
+            name: 'footer',
+            w: width, h: 10,
+            margin: { left: 1, top: 1, right: 1, bottom: 1 },
+            display: 'block'
+        }
+    },
+
+    calc2: function () {
+        // let dims = this.dims;
+        let width, height;
+
+        width = this.header.width = this.getWidth(this.header)
+        height = this.header.height = this.getHeight(this.header)
+
+        this.header.elements = [
+            { type: 'line', x1: 0, y1: height, x2: width, y2: height },
+            { type: 'text', x: 30, y: 5, value: 'تاریخ :' },
+        ]
+        this.header.inputs = [
+            { name: 'officeName', x: width - 20, y: height - 10 },
+            { name: 'date', x: 20, y: 5 },
+        ]
+
+        width = this.patient.width = this.getWidth(this.patient)
+        this.patient.height = this.getHeight(this.patient)
+        this.patient.elements = [
+            { type: 'line', x1: 0, y1: 20, x2: width, y2: 20 },
+            { type: 'text', x: width, y: 5, value: 'نام:' },
+            { type: 'text', x: width - 30, y: 5, value: 'نام خانوادگی:' },
+            { type: 'text', x: width - 90, y: 5, value: 'سن:' },
+            { type: 'text', x: width - 130, y: 5, value: 'ارجاع از:' }
+        ]
+        this.patient.inputs = [
+            { name: 'name', x: width - 5, y: 5 },
+            { name: 'lastName', x: width - 47, y: 5 },
+            { name: 'age', x: width - 97, y: 5 },
+            { name: 'referrer', x: width - 142, y: 5 }
+        ]
+        this.patient.forceInputs = [
+            { name: 'name', x: width - 10, y: 4 },
+            { name: 'lastName', x: width - 47, y: 5 },
+            { name: 'age', x: width - 97, y: 5 },
+            { name: 'referrer', x: width - 142, y: 5 }
+        ]
+
+        width = this.history.width = this.getWidth(this.history)
+        this.history.height = this.getHeight(this.history)
+        this.history.elements = [
+            { type: 'line', x1: 0, y1: 20, x2: width, y2: 20 },
+            { type: 'text', x: width, y: 5, value: 'شرح حال:' },
+        ]
+        this.history.inputs = [
+            { name: 'description', x: width - 13, y: 5 },
+        ]
+
+        width = this.RTympanogram.width = this.getWidth(this.RTympanogram)
+        this.RTympanogram.height = this.getHeight(this.RTympanogram)
+        width = this.LTympanogram.width = this.getWidth(this.LTympanogram)
+        this.LTympanogram.height = this.getHeight(this.LTympanogram)
+
+        width = this.RReflex.width = this.getWidth(this.RReflex)
+        this.RReflex.height = this.getHeight(this.RReflex)
+        width = this.LReflex.width = this.getWidth(this.LReflex)
+        this.LReflex.height = this.getHeight(this.LReflex)
+
+        width = this.report.width = this.getWidth(this.report)
+        this.report.height = this.getHeight(this.report)
+        this.report.elements = [
+            { type: 'text', x: width, y: 5, value: 'گزارش:' },
+        ]
+        this.report.inputs = [
+            { name: 'description', x: width - 10, y: 5 },
+        ]
+
+        width = this.footer.width = this.getWidth(this.footer)
+        this.footer.height = this.getHeight(this.footer)
+        this.footer.elements = [
+            { type: 'line', x1: 0, y1: 0, x2: width, y2: 0 },
+            { type: 'text', x: width, y: 5, value: 'آدرس:' },
+            { type: 'text', x: width - 120, y: 5, value: 'تلفن:' },
+        ]
+        this.footer.inputs = [
+            { name: 'address', x: width - 10, y: 5 },
+            { name: 'tel', x: width - 128, y: 5 },
+        ]
+    },
+
+    getWidth: function (element) {
+        return (element.w - (element.margin.left + element.margin.right))
+    },
+    getHeight: function (element) {
+        return (element.h - (element.margin.top + element.margin.bottom))
+    },
+
+    calcSectionsArray: function () {
+        // این آرایه دقیقا ترتیب قرارگیری سکشن ها را بدون اون اوردر قبلی تعیین میکند
+        this.sections = [
+            this.blank,
+            this.patient,
+            // this.history,
+            // this.RAudiogram,
+            // this.LAudiogram,
+            // this.RSpeech,
+            // this.LSpeech,
+            this.RTympanogram, this.LTympanogram,
+            this.RReflex, this.LReflex,
+            // this.report,
+            // this.footer
+
+        ]
+    },
+
+}
+
+rasaTymp.calc1()
+rasaTymp.calc2()
+rasaTymp.calcSectionsArray()
+// پهنا و ارتفاع قابل استفاده منهای پد ها میشه پهنا و ارتفاع اصلی
+
+export default rasaTymp;
+

package/src/Symbol/createSymbolSVG.js

@@ -19,7 +19,7 @@ export default function createSymbolSVG({ side = "R", type = "AC", masked = fals
   svg.setAttribute("data-side", side);
   svg.setAttribute("data-type", type);
   svg.setAttribute("data-masked", masked);
-  svg.setAttribute("data-NR", NR);
+  svg.setAttribute("data-nr", NR);
 
 
   if (side == "R" && type == "AC" && !masked) {

package/src/common/putRect.js

@@ -1,12 +1,13 @@
 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 }) {
+export default function putRect({ container, x, y, width, height, style = 'fill: transparent; stroke: green; stroke-width: 0.5;', name, className }) {
     let rect = document.createElementNS(svgNS, "rect");
     rect.setAttribute("x", x);
     rect.setAttribute("y", y);
     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);
     return rect;

package/src/common/putSVG.js

@@ -0,0 +1,13 @@
+const svgNS = "http://www.w3.org/2000/svg";
+
+export default function putSVG({ container, x, y, width, height, viewBox }) {
+    const svg = document.createElementNS(svgNS, "svg");
+    width && svg.setAttribute("width", width);
+    height && svg.setAttribute("height", height);
+    x && svg.setAttribute("x", x);
+    y && svg.setAttribute("y", y);
+    viewBox && svg.setAttribute("viewBox", viewBox);
+    container.appendChild(svg);
+    return svg;
+
+}

package/src/common/putText.js

@@ -1,7 +1,8 @@
 const svgNS = "http://www.w3.org/2000/svg";
 
 // متن اس‌وی‌جی
-export default function putText({ container, value = '', x, y, id, dx = 0, dy = 0, style, name, className }) {
+export default function putText({ container, value = '', x, y, id,
+    dx = 0, dy = 0, style, name, className }) {
     let text = document.createElementNS(svgNS, "text");
     name && text.setAttribute("data-name", name)
     className && text.setAttribute("class", className);

package/src/main.js

@@ -1,62 +1,20 @@
 // import './style.css'
-
-import AudiogramChart from "./Audiogram/Audiogram.js"
+import Audiogram from "./Audiogram/Audiogram.js"
 import dims from './Audiogram/dims.js'
 import Forms from "./Form/Forms.js";
 import { officeData, patientData } from "../data/sampleData.js"
 
-
-
-// import javascriptLogo from './javascript.svg'
-// import viteLogo from '/vite.svg'
-// import { setupCounter } from './counter.js'
-
-// document.querySelector('#app').innerHTML = `
-//   <div>
-//     <a href="https://vite.dev" target="_blank">
-//       <img src="${viteLogo}" class="logo" alt="Vite logo" />
-//     </a>
-//     <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
-//       <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
-//     </a>
-//     <h1>Hello Vite!</h1>
-//     <div class="card">
-//       <button id="counter" type="button"></button>
-//     </div>
-//     <p class="read-the-docs">
-//       Click on the Vite logo to learn more
-//     </p>
-//   </div>
-// `
-
-// setupCounter(document.querySelector('#counter'))
-
-
 document.querySelector('#app').innerHTML = `
-    <button>Ok</button>
-    <button>Tok</button>
-    <p>Mahdi</p>
-    <h1>مهدی جاویدی پرنده پرکلاغی</h1>
+    <div id="audiogram-div" style=""></div>
     <div id="forms-div"></div>
-    <div id="audiogram-div"></div>
- `
-
-const forms = new Forms({ container: document.getElementById('forms-div'), name: 'form1' });
-forms.update({ officeData, patientData, sessionIndex: 0 })
+`
 
-
-const RAudiogram = new AudiogramChart({
-  container: document.getElementById('audiogram-div'),
-  dims: dims.display,
-  side: 'R', x: 0, y: 0,
-  width: 700, height: 800, events: true
+const RAudiogram = new Audiogram({
+  container: document.getElementById('audiogram-div'), side: 'R',
 })
 
-const LAudiogram = new AudiogramChart({
-  container: document.getElementById('audiogram-div'),
-  dims: dims.display,
-  side: 'L', x: 0, y: 0,
-  width: 700, height: 800, events: true
+const LAudiogram = new Audiogram({
+  container: document.getElementById('audiogram-div'), side: 'L', 
 })
 
 RAudiogram.update({
@@ -74,15 +32,39 @@ RAudiogram.update({
 LAudiogram.update({
   data: {
     // R_AC_M: { 8000: 25, 2000: 5, 1500: 0, },
-    L_AC: { 1000: 25, 500: 15, 750: 20, 250: 10, 6000: 35, 2000: 45 },
-    L_AC_NR: { 1500: 85 },
+    L_AC: { 1000: 30, 500: 20, 750: 30, 250: 5, 6000: 35, 2000: 45 },
     L_BC_M: { 2000: 25, 6000: 25 },
-    L_BC_M_NR: { 3000: 85 },
     L_BC: { 1000: 20, 500: 10, 750: 15, 250: 5, 4000: 20 },
   },
   side: 'L',
 })
 
+const forms = new Forms({ container: document.getElementById('forms-div'), name: 'form1' });
+forms.update({ officeData, patientData, sessionIndex: 0 })
+
 
+// import javascriptLogo from './javascript.svg'
+// import viteLogo from '/vite.svg'
+// import { setupCounter } from './counter.js'
+
+// document.querySelector('#app').innerHTML = `
+//   <div>
+//     <a href="https://vite.dev" target="_blank">
+//       <img src="${viteLogo}" class="logo" alt="Vite logo" />
+//     </a>
+//     <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
+//       <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
+//     </a>
+//     <h1>Hello Vite!</h1>
+//     <div class="card">
+//       <button id="counter" type="button"></button>
+//     </div>
+//     <p class="read-the-docs">
+//       Click on the Vite logo to learn more
+//     </p>
+//   </div>
+// `
+
+// setupCounter(document.querySelector('#counter'))
 
 

package/src/{note.css → note.html}

@@ -5,7 +5,6 @@
         url('../fonts/Vazirmatn-Regular.woff') format('woff');
 }
 @page {
-
     size: a4;
     margin: 0;
     padding: 0;
@@ -23,6 +22,9 @@
     }
 
     svg {
+        max-width: 400px;
+        scrollbar-width: 400px;  
+        overflow-block:scroll;      
         margin: 0;
         padding: 0;
         break-inside: avoid;

package/src/style.css

@@ -1,8 +1,9 @@
 @font-face {
   font-family: vazirmatn;
   src:
-    url("./fonts/Vazirmatn-Regular.woff2") format("woff2"),
-    url('./fonts/Vazirmatn-Regular.woff') format('woff');
+    url("fonts/Vazirmatn-Regular.woff2") format("woff2"),
+    url('fonts/Vazirmatn-Regular.woff') format('woff');
+  font-display: swap;
 
 }
 
@@ -32,6 +33,28 @@
   font-weight: bold;
 }
 
+.container {
+  display: flex;
+  /* Use flexbox to align items */
+  align-items: center;
+  /* Center items vertically */
+}
+
+.left {
+  /* background-color: lightblue; */
+  padding: 20px;
+  margin-right: 10px;
+  /* Space between the two divs */
+}
+
+.right {
+  /* background-color: lightgreen; */
+  margin-left: 10px;
+  
+  /* padding: 20px; */
+}
+
+
 /* :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
@@ -149,4 +172,4 @@ button:focus-visible {
 
 /* body {
   font-family: vazirmatn;
-} */
+} */