hayun-vite 0.1.3 → 0.3.0

package/package.json

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

package/src/Audiogram/Audiogram.js

@@ -2,14 +2,11 @@ import putLine from "../common/putLine.js";
 import putPoint from "../common/putPoint.js";
 import putRect from "../common/putRect.js";
 import getAllSymbolsSVG from "../Symbol/getAllSymbolsSVG.js";
-
 const svgNS = "http://www.w3.org/2000/svg";
 
 export default class AudiogramChart {
   constructor({ container, side, x = 0, y = 0, pname, events = true, dims }) {
-    
     const { width, height, chartPadding, symbolDims, vFrequency, vToFreq, freqToV, intensity, styles } = dims;
-
     x = dims.margin.left
     y = dims.margin.top
 
@@ -25,100 +22,76 @@ export default class AudiogramChart {
     this.side = side;
     let style;
 
-
     const xArea = { min: chartPadding.left, max: width - (chartPadding.right) }
-
     const yArea = { min: chartPadding.top, max: height - (chartPadding.bottom) }
     const xAxiosLength = { mm: width - (chartPadding.left + chartPadding.right), hz: 14 }
     const yAxiosLength = height
-
     const vFrequencyAxiosLength = {
       mm: width - (chartPadding.left + chartPadding.right),
       hz: vFrequency.max - vFrequency.min
     }
     this.vFrequencyAxiosLength = vFrequencyAxiosLength;
-
     const intensityAxiosLength = {
       mm: height - (chartPadding.top + chartPadding.bottom),
       db: intensity.max - intensity.min,
     }
     this.intensityAxiosLength = intensityAxiosLength;
-
     const svg = document.createElementNS(svgNS, "svg");
-    this.svg = svg;
-    
+    this.svg = svg; // کل نودی که به کانتینر اپند میشه
     svg.setAttribute("width", width);
     svg.setAttribute("height", height);
     svg.setAttribute("x", x);
     svg.setAttribute("y", y);
     svg.setAttribute("viewBox", [-chartPadding.left, -chartPadding.top, width, height]);
 
-    // محدوده مختصات خطوط جدول
-    const chartArea = putRect({
-      container: svg,
-      x: this.getX(vFrequency.min), y: this.getY(intensity.min),
-      width: vFrequencyAxiosLength.mm, height: intensityAxiosLength.mm,
-      style: 'stroke-width: 0.4; stroke: gray; fill: transparent'
-    })
 
     const currentPointer = putPoint({ container: svg, x: 0, y: 0, r: 4, color: 'black' });
     this.currentPointer = currentPointer;
-
-    // رسم خطوط افقی از بالا به پایین
-    let x1 = this.getX(vFrequency.min);
-    let x2 = this.getX(vFrequency.max);
-    for (let i = intensity.min; i <= intensity.max; i += intensity.step) {
-      const y1 = this.getY(i)
-      const y2 = y1
-      putLine({ container: svg, x1, y1, x2, y2, style: styles.line })
-    }
-
-    // رسم خطوط عمودی از چپ به راست
-    let y1 = this.getY(intensity.min)
-    let y2 = this.getY(intensity.max)
-    for (let f = vFrequency.min; f <= vFrequency.max; f += vFrequency.step) {
-      const x1 = this.getX(f)
-      const x2 = x1
-      putLine({ container: svg, x1, y1, x2, y2, style: styles.line })
+    // برای فرم‌های پیش چاپ شده
+    if (!dims.blank) {
+      // محدوده مختصات خطوط جدول
+      const chartArea = putRect({
+        container: svg,
+        x: this.getX(vFrequency.min), y: this.getY(intensity.min),
+        width: vFrequencyAxiosLength.mm, height: intensityAxiosLength.mm,
+        style: 'stroke-width: 0.4; stroke: gray; fill: transparent'
+      })
+      // رسم خطوط افقی از بالا به پایین
+      let x1 = this.getX(vFrequency.min);
+      let x2 = this.getX(vFrequency.max);
+      for (let i = intensity.min; i <= intensity.max; i += intensity.step) {
+        const y1 = this.getY(i)
+        const y2 = y1
+        putLine({ container: svg, x1, y1, x2, y2, style: styles.line })
+      }
+      // رسم خطوط عمودی از چپ به راست
+      let y1 = this.getY(intensity.min)
+      let y2 = this.getY(intensity.max)
+      for (let f = vFrequency.min; f <= vFrequency.max; f += vFrequency.step) {
+        const x1 = this.getX(f)
+        const x2 = x1
+        putLine({ container: svg, x1, y1, x2, y2, style: styles.line })
+      }
     }
-
     // یک بوردر راهنمای توسعه برای اس‌ وی جی به تمام پهنا و ارتفاع رسم می‌کنیم
     // این مربع مرزی را آخرین ایجاد میکنیم تا بالاترین لایه باشد و روی ریودادها درست عمل کند
-    const borderRect = putRect({ container: svg, x: -chartPadding.left, y: -chartPadding.top, width, height, name: 'RAudiogram' });
+    const borderRect = putRect({ container: svg, x: -chartPadding.left, y: -chartPadding.top, width, height, name: 'RAudiogram', style: style = 'fill: transparent;' });
     this.borderRect = borderRect;
-
     // ایجاد رویدادها روی فقط چارت جدول
     borderRect.addEventListener('mousemove', (e) => {
       const x = e.offsetX
       const y = e.offsetY
-
       currentPointer.setAttribute('cx', x - chartPadding.left)
       currentPointer.setAttribute('cy', y - chartPadding.top)
       console.log('x:', x, 'f:', getFreq(x));
-      // تبدیل مختصات به مختصات فرکانس و شدت
-
     })
 
+    container && container.appendChild(svg);
+
     // تبدیل مقدار ایکس مختصات به فرکانس 
     function getFreq(x) {
       return vToFreq[Math.round((x - xArea.min) * (xAxiosLength.hz / xAxiosLength.mm))]
     }
-
-    container && container.appendChild(svg);
-
-    // تست تابع آپدیت
-    // this.update({
-    //   data: {
-    //     // R_AC_M: { 8000: 25, 2000: 5, 1500: 0, },
-    //     R_AC: { 1000: 25, 500: 15, 750: 20, 250: 10, 6000: 35, 2000: 45 },
-    //     R_AC_NR: { 1500: 85 },
-    //     R_BC_M: { 2000: 25, 6000: 25 },
-    //     R_BC_M_NR: { 3000: 85 },
-    //     R_BC: { 1000: 20, 500: 10, 750: 15, 250: 5, 4000: 20 },
-    //   },
-    //   side: this.side,
-    // })
-
   }
 
   getX(f) {
@@ -132,12 +105,15 @@ export default class AudiogramChart {
   }
 
   update({ data, side }) {
+    // پاک کردن نودهای سمبل دیتای قبلی در صورت وجود از نود مربوطه
+    this.svg.querySelectorAll('[data-name=symbol]').forEach(symbol => symbol.remove())
+    // پاک کردن خطوط اتصال دیتای قبلی در صورت وجود از نود مربوطه
+    this.svg.querySelectorAll('[data-name=junction]').forEach(symbol => symbol.remove())
+
+
     const junctions = { AC: {}, BC: {}, side };
     this.junctions = junctions;
-    // console.log(data);
-
     for (const symbolName in data) {
-
       for (const freq in data[symbolName]) {
         const x = this.getX(this.freqToV[freq]);
         const y = this.getY(data[symbolName][freq]);
@@ -150,10 +126,8 @@ export default class AudiogramChart {
       }
     }
     this.drawJunctions();
-
     // بالا آوردن مستطیل احاطه کننده به بالاترین لایه برای دریافت صحیح رویدادهای موس
     this.svg.appendChild(this.borderRect)
-
   }
 
   drawJunctions() {
@@ -173,7 +147,7 @@ export default class AudiogramChart {
           type === "BC"
             ? this.styles.juncDashLine + `stroke: ${color}`
             : this.styles.juncLine + `stroke: ${color}`;
-        x1 && !NR1 && !NR2 && putLine({ container: this.svg, x1, y1, x2, y2, style });
+        x1 && !NR1 && !NR2 && putLine({ container: this.svg, x1, y1, x2, y2, style, name: 'junction' });
       }
     }
   }

package/src/Audiogram/dims.js

@@ -43,7 +43,8 @@ const dims = {
             juncLine: `stroke-width: 1; stroke-opacity: 0.8;`,
         }
     },
-    rasa: {
+    rasa_audiometry: {
+        blank: true, // define Blank Chart for PrePrinted Chart, Lines do not draw
         // width: 70.6,
         // height: 70,
         // margin: { left: 17, top: 18.5, },

package/src/Form/Form.js

@@ -142,7 +142,7 @@ export default class Form {
             image.setAttribute('height', height);
 
             image.setAttribute('x', 0)
-            image.setAttribute('y', 0)
+            image.setAttribute('y', -0.6)
             // image.setAttribute('height', height);
             image.setAttribute('href', this.image);
             
@@ -174,6 +174,7 @@ export default class Form {
                     gender: patientData?.gender,
                     age: patientData.sessions[sessionIndex]?.age,
                     referrer: patientData.sessions[sessionIndex]?.referrer,
+                    date: new Date().toLocaleDateString('fa-IR'),
 
                 },
                 footer: {

package/src/Form/Forms.js

@@ -3,8 +3,10 @@ const svgNS = "http://www.w3.org/2000/svg";
 import printForm from "./printForm.js";
 import Form from "./Form.js";
 import combo from "./templates/combo.js"; // این در حقیقیت یک تمپلت هست
-import rasaAud from "./templates/rasaAud.js";
-import rasaAudImage from './templates/rasaAud.png'
+import rasaAud from "./templates/rasa_audiometry.js";
+// import rasaAudImage from './templates/rasaAud.png'
+import rasaAudImage from './templates/rasa_audiometry.png'
+
 // خط کد زیر لازم هست
 import '../fonts/Vazirmatn-Regular.woff2'
 import '../style.css'
@@ -32,10 +34,9 @@ export default class Forms {
         this.forms.push(new Form({ container: this.div, template: combo }));
 
         // انتخاب فرم پیش‌فرض  
-        this.forms[1].form.style.display = 'block';
-        this.selectedForm = this.forms[1]
-        btn[1].style.backgroundColor = ' #1c15e1'
-
+        this.forms[0].form.style.display = 'block';
+        this.selectedForm = this.forms[0]
+        btn[0].style.backgroundColor = ' #1c15e1'
 
         // تعریف رویداد دکمه چاپ فرم نمایشی
         printBtn.addEventListener('click', () => { printForm({ container: this.selectedForm.form }) })
@@ -76,13 +77,7 @@ export default class Forms {
 
         // });
         // for Develop
-        this.event();
-    }
-
-    event() {
-        this.div.addEventListener('click', (e) => {
-            console.log(e.target);
-        })
+        // this.event();
     }
     // این تابع یک بار از بیرون کلاس فراخوانی میشه و یک بار وقتی از داخل تمپلت فرم را عوض میکنیم
     update({ data, officeData, patientData, sessionIndex = 0 }) {
@@ -102,21 +97,11 @@ export default class Forms {
     }
     // توابع داخلی ایجاد دکمه و لینک های بالای فرم
     putButton({ container, id, text, className }) {
-
         const button = document.createElement('button');
         button.setAttribute('id', id);
         className && button.setAttribute('class', className);
         button.innerHTML = text;
-
-        // button.addEventListener('mouseenter', () => {
-        //     button.style.backgroundColor = 'rgb(54, 115, 115)'; // Change color on hover
-        // });
-        // button.addEventListener('mouseleave', () => {
-        //     button.style.backgroundColor = 'rgb(0, 149, 149)'; // Revert color when not hovering
-        // });
-
         container.appendChild(button);
         return button;
-
     }
 }

package/src/Form/templates/{rasaAud.js → rasa_audiometry.js}

@@ -2,11 +2,11 @@ import audDims from "../../Audiogram/dims.js";
 
 
 const templateRasaAud = {
-    name: 'rasa',
+    name: 'rasa_audiometry',
     label: 'ادیومتری رسا',
     backgroundImage: 'backgroundImage',
     margin: { left: 0, top: 0, right: 0, bottom: 0 },
-    paper: { type: 'A4', case: 'portrait', width: 210, height: 296 },
+    paper: { type: 'A4', case: 'portrait', width: 209, height: 294.5 },
 
     // Printable Dimention
     calc1: function () {
@@ -55,8 +55,8 @@ const templateRasaAud = {
             audDims[this.name],
             {
                 name: 'RAudiogram',
-                w: width / 2, h: 100,
-                margin: { left: 17, top: 18.5, right: 17.2, bottom: 11.5 },
+                w: width / 2, h: 99,
+                margin: { left: 18.1, top: 18.5, right: 16.4, bottom: 11.2 },
                 display: 'inline',
             });
 
@@ -65,8 +65,8 @@ const templateRasaAud = {
             audDims[this.name],
             {
                 name: 'LAudiogram',
-                w: width / 2, h: 100, // پهنای سکشن هست
-                margin: { left: 17.7, top: 18.5, right: 16.8, bottom: 11.5 },
+                w: width / 2, h: 99, // پهنای سکشن هست
+                margin: { left: 18.2, top: 18.5, right: 16.4, bottom: 11.2 },
                 display: 'block',
             });
 
@@ -74,7 +74,7 @@ const templateRasaAud = {
 
         this.RSpeech = {
             name: 'RSpeech',
-            w: width / 2, h: 38.2,
+            w: width / 2, h: 37.6,
             margin: { left: 0, top: 0, right: 0, bottom: 0 },
             display: 'inline',
             hideContext: true,
@@ -82,39 +82,16 @@ const templateRasaAud = {
         }
         this.LSpeech = {
             name: 'LSpeech',
-            w: width / 2, h: 38.2,
+            w: width / 2, h: 37.6,
             margin: { left: 0, top: 0, right: 0, bottom: 0 },
             display: 'block',
             hideContext: true,
             forceInsert: true,
         }
-        this.RTympanogram = {
-            name: 'RTympanogram',
-            w: width / 2, h: 60,
-            margin: { left: 2, top: 2, right: 2, bottom: 2 },
-            display: 'inline',
-        }
-        this.LTympanogram = {
-            name: 'LTympanogram',
-            w: width / 2, h: 60,
-            margin: { left: 2, top: 2, right: 2, bottom: 2 },
-            display: 'block',
-        }
-        this.RReflex = {
-            name: 'RReflex',
-            w: width / 2, h: 30,
-            margin: { left: 2, top: 2, right: 2, bottom: 2 },
-            display: 'inline'
-        }
-        this.LReflex = {
-            name: 'LReflex',
-            w: width / 2, h: 30,
-            margin: { left: 2, top: 2, right: 2, bottom: 2 },
-            display: 'block'
-        }
+
         this.report = {
             name: 'report',
-            w: width, h: 37.4,
+            w: width, h: 36.9,
             margin: { left: 0, top: 0, right: 0, bottom: 0 },
             display: 'block',
             hideContext: true,
@@ -131,13 +108,7 @@ const templateRasaAud = {
     calc2: function () {
         // let dims = this.dims;
         let width, height;
-        //آیتم های روی این تمپلت
-        // روش جدید محاسبه ابعاد منطقی تر و تمیز تر
-        // Object.assign(this.header, {
-        //     width: this.getWidth(this.header),
-        //     height: this.getHeight(this.header),
-        // })
-        // New
+
         width = this.header.width = this.getWidth(this.header)
         height = this.header.height = this.getHeight(this.header)
 
@@ -169,7 +140,8 @@ const templateRasaAud = {
             { name: 'name', x: width - 45, y: 12 },
             { name: 'lastName', x: width - 75, y: 12 },
             { name: 'age', x: width - 105, y: 12 },
-            { name: 'referrer', x: width - 150, y: 12 }
+            { name: 'referrer', x: width - 150, y: 12 },
+            { name: 'date', x: width - 185, y: 12 }
         ]
 
         width = this.history.width = this.getWidth(this.history)
@@ -192,32 +164,22 @@ const templateRasaAud = {
         this.RSpeech.height = this.getHeight(this.RSpeech)
         this.RSpeech.labels = ["SRT", "MCL", "SDS", 'UCL']
         this.RSpeech.forceInputs = [
-            { name: 'SRT', x: 23, y: 26 },
-            { name: 'MCL', x: 35, y: 26 },
-            { name: 'SDS', x: 47, y: 26 },
-            { name: 'UCL', x: 59, y: 26 },
+            { name: 'SRT', x: 24, y: 26 },
+            { name: 'MCL', x: 36, y: 26 },
+            { name: 'SDS', x: 48, y: 26 },
+            { name: 'UCL', x: 60, y: 26 },
         ]
 
         width = this.LSpeech.width = this.getWidth(this.LSpeech)
         this.LSpeech.height = this.getHeight(this.LSpeech)
         this.LSpeech.labels = ["SRT", "MCL", "SDS", 'UCL']
         this.LSpeech.forceInputs = [
-            { name: 'SRT', x: 33, y: 26 },
-            { name: 'MCL', x: 45, y: 26 },
-            { name: 'SDS', x: 57, y: 26 },
-            { name: 'UCL', x: 69, y: 26 },
+            { name: 'SRT', x: 34, y: 26 },
+            { name: 'MCL', x: 46, y: 26 },
+            { name: 'SDS', x: 58, y: 26 },
+            { name: 'UCL', x: 70, y: 26 },
         ]
 
-        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 = [
@@ -231,7 +193,6 @@ const templateRasaAud = {
 
         ]
 
-
         width = this.footer.width = this.getWidth(this.footer)
         this.footer.height = this.getHeight(this.footer)
         this.footer.elements = [

package/src/style.css

@@ -105,7 +105,7 @@ a:hover {
   padding: 0.6em 1.2em;
   font-size: 1em;
   font-weight: 500;
-  font-family: inherit;
+  /* font-family: inherit; */
   background-color: #7472e2;
   color: #ffffff;
   cursor: pointer;

package/src/counter.js

@@ -1,9 +0,0 @@
-export function setupCounter(element) {
-  let counter = 0
-  const setCounter = (count) => {
-    counter = count
-    element.innerHTML = `count is ${counter}`
-  }
-  element.addEventListener('click', () => setCounter(counter + 1))
-  setCounter(0)
-}

package/src/javascript.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path><path d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574"></path></svg>