hayun-vite 0.10.1 → 0.11.0

package/src/Tympanogram/units.js

@@ -0,0 +1,76 @@
+const units = {
+    name: 'Tympanogram',
+    margin: { left: 0, top: 0, }, // در کانتینر دیو این عمل نمیکنه. مگر در کانتینر اس وی جی بذاریم
+
+    // واحد ویوباکس - بدون واحد
+    vbWidth: 100, // برای اینکه ضخامت خطوط تغییری ناهنجار نکند این ثابت میماند 
+    vbHeight: 60, // این به نسبت تغییر می‌کند
+
+    // واحد پیکسل، میلیمتر، ...
+    // اگر واحد پایینی توسط بیرون تغییر کرد واحدهای بالایی باید با نسبت پایینی تغییر کنند
+    width: 100,
+    height: 60,
+
+    // این فاصله خطوط محورهای بالا و چپ ادیوگرام از لبه ها هست
+    chartPadding: { left: 40, top: 40, right: 30, bottom: 20 },
+    symbolDims: { width: 55, height: 55 },
+    symbolsChart: {
+        width: 240, height: 60
+    },
+    // virtual frequency 
+    mainFrequencies: [125, 250, 500, 1000, 2000, 4000, 8000],
+   
+    intensity: { min: -20, max: 130, step: 10 },
+    
+    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; 
+            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;
+            dominant-baseline: middle;   
+        `,
+        compliance: `
+            user-select: none;
+            direction: ltr !important;
+            font-family: Vazir;
+            font-size: 0.7mm;
+            text-anchor: end; 
+            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;`,
+    },
+}
+
+export default units;

package/src/common/{putTextBox.js → putCell.js}

@@ -1,17 +1,17 @@
 const svgNS = "http://www.w3.org/2000/svg";
 
-export default function putTextBox(
+export default function putCell(
     {
-        container, x, y, dx = 0, dy= 0 , w, h, rx,
+        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 - w / 2 + dx);
-    rect.setAttribute("y", y - h / 2 + dy);
+    rect.setAttribute("x", x - width / 2 + dx);
+    rect.setAttribute("y", y - height / 2 + dy);
     rect.setAttribute("rx", rx);
 
-    rect.setAttribute("width", w);
-    rect.setAttribute("height", h);
+    rect.setAttribute("width", width);
+    rect.setAttribute("height", height);
     rect.setAttribute("style", style);
     container.appendChild(rect);
 

package/src/common/putG.js

@@ -0,0 +1,10 @@
+const svgNS = "http://www.w3.org/2000/svg";
+
+export default function putG({ container, viewBox, className, style }) {
+    const svg = document.createElementNS(svgNS, "g");
+    viewBox && svg.setAttribute("viewBox", viewBox);
+    style && svg.setAttribute("style", style);
+    className && svg.setAttribute("class", className);
+    container && container.appendChild(svg);
+    return svg;
+}

package/src/common/putLine.js

@@ -1,7 +1,7 @@
 // تابع رسم خط
 const svgNS = "http://www.w3.org/2000/svg";
 
-export default function putLine({ container, x1, y1, x2, y2, style = 'stroke: black; stroke-width: 0.5;', name }) {
+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);

package/src/common/putText.js

@@ -3,16 +3,17 @@ const svgNS = "http://www.w3.org/2000/svg";
 // متن اس‌وی‌جی
 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);
     style && text.setAttribute("style", style);
-    // text.setAttribute("dominant-baseline", "middle"); // تراز عمودی
-    // text.setAttribute("fill", color);
     text.setAttribute("x", x + dx);
     text.setAttribute("y", y + dy);
-    // آی دی برای تکست ها میذاریم و خط پایین میره داخل تابع آپدیت دیتای اسپیچ
-    text.innerHTML = value;
+    text.textContent = value;
     container.appendChild(text);
     return text;
 }
+
+
+

package/src/main.js

@@ -2,37 +2,157 @@
 import Audiogram from "./Audiogram/Audiogram.js"
 import Forms from "./Form/Forms.js";
 import { officeData, patientData } from "../assets/data/sampleData.js"
-import template_combo from "../assets/templates/template_combo.js";
+import template from "../assets/templates/template_combo.js";
+import Tympanogram from "./Tympanogram/Tympanogram.js";
+import Speech from "./Speech/Speech.js";
+import Reflex from "./Reflex/Reflex.js";
+import Box from "./Box/Box.js";
 
 
 document.querySelector('#app').innerHTML = `
+    <div id="test"></div>
     <div id="audiogram-div"></div>
     <div id="forms-div"></div>
 `;
 
-const forms = new Forms({ container: document.getElementById('forms-div'), templates: [template_combo], mode: 'develop' });
+const container = document.getElementById('test')
+
+let dims = {
+  "name": "RSpeech",
+  "w": 100,
+  "h": 15,
+  "margin": {
+    "left": 2,
+    "top": 0,
+    "right": 12,
+    "bottom": 0
+  },
+  "display": "inline",
+  "stroke": true,
+  "width": 100 * 6,
+  "height": 20 * 6,
+  "labels": [
+    "SAT",
+    "SRT",
+    "MCL",
+    "UCL",
+    "SDS"
+  ]
+}
+
+const RSpeech = new Speech({ container, side: 'R' })
+RSpeech.draw({ dims })
+RSpeech.update({ MCL: '55', SAT: '25', SDS: '98', UCL: '120', SRT: '30' })
+
+dims = {
+  "name": "RTympanogram",
+  "w": 100,
+  "h": 60,
+  "margin": {
+    "left": 2,
+    "top": 0,
+    "right": 2,
+    "bottom": 0
+  },
+  "display": "inline",
+  "width": 100 * 6,
+  "height": 60 * 6
+}
+
+const RTympanogram = new Tympanogram({ container, side: 'R' })
+RTympanogram.draw({ dims });
+
+dims = {
+  "name": "RReflex",
+  "w": 100,
+  "h": 28,
+  "margin": {
+    "left": 2,
+    "top": 2,
+    "right": 2,
+    "bottom": 0
+  },
+  "display": "inline",
+  "width": 100 * 6,
+  "height": 30 * 6
+}
+
+const RReflex = new Reflex({ container, side: 'R' })
+RReflex.draw({ dims });
+
+dims = {
+  "name": "report",
+  "w": 200,
+  "h": 20,
+  "margin": {
+    "left": 1,
+    "top": 0,
+    "right": 1,
+    "bottom": 0
+  },
+  "display": "block",
+  "width": 198,
+  "height": 20,
+  "elements": [
+    {
+      "type": "text",
+      "x": 198,
+      "y": 5,
+      "value": "گزارش:"
+    }
+  ],
+  "inputs": [
+    {
+      "name": "description",
+      "x": 186,
+      "y": 5
+    }
+  ]
+}
+
+// const report = new Box({ container })
+// report.draw({ dims });
+
+dims = {
+  "blank": false,
+  "name": "RAudiogram",
+  "w": 100,
+  "h": 90,
+  "margin": {
+    "left": 1,
+    "top": 1,
+    "right": 1,
+    "bottom": 1
+  },
+  "display": "inline",
+  "borderBox": "display",
+  "width": 600,
+  "height": 600
+}
+
+const RAudiogram = new Audiogram({ container, side: 'R', dims })
+// RAudiogram.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: 'R',
+// })
+
+const forms = new Forms({ container: document.getElementById('forms-div'), templates: [template], mode: 'develop' });
 forms.update({ officeData, patientData, sessionIndex: 0 })
 
+
+
+
 /*
-const RAudiogram = new Audiogram({
-  container: document.getElementById('audiogram-div'), side: 'R',
-})
+const LAudiogram = new Audiogram({  container: document.getElementById('audiogram-div'), side: 'L', })
 
-const LAudiogram = new Audiogram({
-  container: document.getElementById('audiogram-div'), side: 'L', 
-})
 
-RAudiogram.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: 'R',
-})
 
 LAudiogram.update({
   data: {
@@ -48,3 +168,4 @@ LAudiogram.update({
 
 
 
+

package/assets/styles-test.css

@@ -1,86 +0,0 @@
-
-.header1 {
-  user-select: none;
-  /* direction: rtl; */
-  /* text-align: center; */
-  font-family: Vazir;
-  font-size: 1.6mm;
-  font-weight: bolder;
-}
-.header2 {
-  user-select: none;
-  direction: rtl;
-  /* text-align: center; */
-  text-anchor: middle;
-  /* font-family: sans-serif, Helvetica, Arial;*/
-  /* font-family: Verdana, Geneva, Tahoma, sans-serif; */
-  font-family: sans-serif !important;
-  font-family: 'Courier New', Courier, monospace;
-  font-size: 1.1mm;
-  font-weight: bold;
-}
-
-.header3 {
-  user-select: none;
-  /* direction: rtl; */
-  /* text-align: center; */
-  font-family: sans-serif !important;
-
-  /* font-family: Vazir; */
-  font-size: 1mm;
-  font-weight: bold;
-}
-.header4 {
-  user-select: none;
-  direction: rtl;
-  /* text-align: center; */
-  font-family: Vazir;
-  font-size: 1mm;
-  /* font-weight: bold; */
-}
-.tymp1 {
-  user-select: none;
-  direction: ltr !important;
-  /* text-align: center; */
-  font-family: Arial, Helvetica, sans-serif !important;
-  font-size: 1mm;
-  /* font-weight: bold; */
-}
-
-.tymp2 {
-  user-select: none;
-  direction: ltr !important;
-  /* text-align: center; */
-  font-family: Arial, Helvetica, sans-serif !important;
-  font-size: 0.8mm;
-  /* font-weight: bold; */
-}
-.mizoon {
-  display: table;
-  margin-right: auto;
-  margin-left: auto;
-  /* display: flex; */
-  /* justify-content: center; */
-}
-
-.symbol_square {
-  stroke-opacity: 100;
-}
-
-input {
-  display: block;
-  width: 60%;
-  border: 1px solid antiquewhite;
-  padding: 10px 10px;
-  margin: 10px auto 10px auto;
-}
-
-.header5 {
-  /* font: 1.5px Verdana, Helvetica, Arial, sans-serif; */
-  user-select: none;
-  direction: rtl;
-  text-align: right;
-  font-family: Vazir;
-  font-size: 0.9mm;
-  font-weight: bold;
-}

package/assets/styles.css

@@ -1,86 +0,0 @@
-
-.header1 {
-  user-select: none;
-  /* direction: rtl; */
-  /* text-align: center; */
-  font-family: Vazir;
-  font-size: 1.6mm;
-  font-weight: bolder;
-}
-.header2 {
-  user-select: none;
-  direction: rtl;
-  /* text-align: center; */
-  text-anchor: middle;
-  /* font-family: sans-serif, Helvetica, Arial;*/
-  /* font-family: Verdana, Geneva, Tahoma, sans-serif; */
-  font-family: sans-serif !important;
-  font-family: 'Courier New', Courier, monospace;
-  font-size: 1.1mm;
-  font-weight: bold;
-}
-
-.header3 {
-  user-select: none;
-  /* direction: rtl; */
-  /* text-align: center; */
-  font-family: sans-serif !important;
-
-  /* font-family: Vazir; */
-  font-size: 1mm;
-  font-weight: bold;
-}
-.header4 {
-  user-select: none;
-  direction: rtl;
-  /* text-align: center; */
-  font-family: Vazir;
-  font-size: 1mm;
-  /* font-weight: bold; */
-}
-.tymp1 {
-  user-select: none;
-  direction: ltr !important;
-  /* text-align: center; */
-  font-family: Arial, Helvetica, sans-serif !important;
-  font-size: 1mm;
-  /* font-weight: bold; */
-}
-
-.tymp2 {
-  user-select: none;
-  direction: ltr !important;
-  /* text-align: center; */
-  font-family: Arial, Helvetica, sans-serif !important;
-  font-size: 0.8mm;
-  /* font-weight: bold; */
-}
-.mizoon {
-  display: table;
-  margin-right: auto;
-  margin-left: auto;
-  /* display: flex; */
-  /* justify-content: center; */
-}
-
-.symbol_square {
-  stroke-opacity: 100;
-}
-
-input {
-  display: block;
-  width: 60%;
-  border: 1px solid antiquewhite;
-  padding: 10px 10px;
-  margin: 10px auto 10px auto;
-}
-
-.header5 {
-  /* font: 1.5px Verdana, Helvetica, Arial, sans-serif; */
-  user-select: none;
-  direction: rtl;
-  text-align: right;
-  font-family: Vazir;
-  font-size: 0.9mm;
-  font-weight: bold;
-}

package/src/Form/Reflex.js

@@ -1,145 +0,0 @@
-import putRect from "../common/putRect.js";
-import putText from "../common/putText.js";
-
-const svgNS = "http://www.w3.org/2000/svg";
-
-export default class Reflex {
-    constructor({ container, side }) {
-        this.container = container;
-        this.side = side; // این برای تعیین رنگ راست و چپ استفاده می‌شود
-    }
-
-    draw({ dims }) {
-
-        let width = dims.width;
-        let height = dims.height;
-        let x = dims.margin.left;
-        let y = dims.margin.top;
-        let style;
-
-        // x = 10
-        // y=1
-        // width= 80
-        // height = 24
-
-        const svg = document.createElementNS(svgNS, "svg");
-        svg.setAttribute("x", x);
-        svg.setAttribute("y", y);
-        svg.setAttribute("width", width);
-        svg.setAttribute("height", height);
-        svg.setAttribute("class", "reflex");
-
-        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; /* تراز عمودی*/       
-        `;
-        lable = ["Freq", "IPSI", "CONTRA"];
-        // چاپ برچسب‌های ستون اول
-        putText({ container: svg, value: "Freq", x: cw1, y: ch1 / 2, style: style })
-        putText({ container: svg, value: "IPSI", x: cw1, y: ch1 * 3 / 2, style: style })
-        putText({ container: svg, value: "CONTRA", x: cw1, y: ch1 * 5 / 2, style: style })
-
-        //چاپ ده باکس سطر دوم و سوم
-        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 bw = cw1 * 0.8; // پهنای هر باکس
-                let bh = ch2 * 0.7; // ارتفاع هر باکس
-                //رسم باکس با مختصات مرکز باکس
-                putBox(x, y, bw, bh);
-            }
-        }
-
-        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 += (this.side === 'R') ? 'fill: red;' : 'fill: blue;';
-
-        let names = ["IPSI_500", "IPSI_1000", "IPSI_2000", "IPSI_4000"];
-        for (let index = 0; index < 4; index++) {
-            x = cw1 / 2 + cw1 * (index + 1);
-            y = ch1 + ch2 / 2;
-            putText({ container: svg, value: "", x: x, y: y, style: style, name: names[index] })
-        }
-
-        // المنت‌های تکست خالی با آیدی یکتا در سطر سوم
-        // آرایه نام آیدی یکتا برای المنت تکست مقادیر برای استفاده تابع آپدیت
-        names = ["CONTRA_500", "CONTRA_1000", "CONTRA_2000", "CONTRA_4000"];
-
-        for (let index = 0; index < 4; index++) {
-            // const idValue = idValues[index];
-            x = cw1 / 2 + cw1 * (index + 1);
-            y = ch1 * 2 + ch2 / 2;
-            putText({ container: svg, value: "", x: x, y: y, style: style, name: names[index] })
-        }
-        // مربع احاطه‌کننده کل جدول برای راهنمای توسعه و دریافت رویداد کلیک روی فرم
-        style = 'fill: transparent; stroke: green; stroke-width: 0.5;';
-        putRect({ container: svg, x: 0, y: 0, width, height, style, name: dims.name })
-        this.container.appendChild(svg);
-        this.chart = svg;
-        // return svg;
-
-        // توابع داخلی مورد نیاز
-        function putBox(x, y, w, h) {
-            let rect = document.createElementNS(svgNS, "rect");
-            rect.setAttribute("x", x - w / 2);
-            rect.setAttribute("y", y - h / 2);
-            rect.setAttribute("width", w);
-            rect.setAttribute("height", h);
-            rect.setAttribute("rx", 1.5)
-            rect.setAttribute("style", "fill: transparent; stroke: black; stroke-width: 0.2;");
-            svg.appendChild(rect);
-        }
-    }
-
-    // جایگذاری داده های رفلکس
-    update(data) {
-
-        for (const key in data) {
-            for (const freq in data[key]) {
-                this.chart.querySelector(`text[data-name=${key}_${freq}]`).innerHTML = data?.[key]?.[freq] || "";
-            }
-        }
-    }
-}