hayun-vite 0.10.0 → 0.11.0

package/src/{Form → Tympanogram}/Tympanogram.js

@@ -1,5 +1,7 @@
 import putRect from "../common/putRect.js";
+import putSVG from "../common/putSVG.js";
 import putText from "../common/putText.js";
+import units from "./units.js";
 const svgNS = "http://www.w3.org/2000/svg";
 
 export default class Tympanogram {
@@ -16,23 +18,23 @@ export default class Tympanogram {
         let height = dims.height;
         let x = dims.margin.left;
         let y = dims.margin.top;
-        // const labels = items.labels;
+        let style;
 
         const { pressure, compliance, padding } = {
             pressure: this.pressure,
             compliance: this.compliance,
             padding: this.padding,
+        }
 
-        };
-        const svg = document.createElementNS(svgNS, "svg");
-        svg.setAttribute("data-name", "R_Tymp");
-        svg.setAttribute("width", width);
-        svg.setAttribute("height", height);
-        svg.setAttribute("x", x);
-        svg.setAttribute("y", y);
-        svg.setAttribute("viewBox", [-padding.left, -padding.top, width, height]);
-
+        let { styles, vbWidth, vbHeight } = units;
 
+        // کل چارت
+        vbHeight = (vbWidth * height) / width // متناسب سازی ارتفاع ویباکس با پهنا و ارتفاع ورودی
+        const viewBox = [-padding.left, -padding.top, vbWidth, vbHeight].join(' ');
+        const svg = putSVG({ x, y, width, height, viewBox })
+        // این خط شد دو خط کد طلایی که مشکل سایز فونت در دیسپلی و کاغذ رو حل کرد
+        width = vbWidth; // ثابت می‌ماند همیشه
+        height = vbHeight // با نسبت پهنا و ارتفاع ورودی تغییر میکند 
 
         const pressureAxiosLength = {
             dapa: pressure.max - pressure.min,
@@ -44,17 +46,16 @@ export default class Tympanogram {
             mm: height - padding.top - padding.bottom
         }
 
-        this.chartInfo = { pressure, compliance, padding, pressureAxiosLength, complianceAxiosLength };
+        this.chartInfo = { pressure, compliance, padding, pressureAxiosLength, complianceAxiosLength }
 
         // point({ this.container: svg, x: getX(pressure.min), y: getY(compliance.max), color: 'red' });
         // point({ this.container: svg, x: getX(pressure.max), y: getY(compliance.min), color: 'green' });
         // point({ this.container: svg, x: getX(pressure.min), y: getY(compliance.min), color: 'brown' });
-        let style;
         // Pressure Axios (Horizontal)
         style = `
           stroke-width: 0.15mm;
           stroke: black;
-      `;
+        `;
         putLine({
             x1: getX(pressure.min), y1: getY(compliance.min),
             x2: getX(pressure.max), y2: getY(compliance.min), style: style
@@ -70,109 +71,87 @@ export default class Tympanogram {
           stroke: black;
           stroke-dasharray: 0.4;
           stroke-opacity: 0.5;
-      `;
+        `;
         putLine({
             x1: getX(0), y1: getY(compliance.min),
             x2: getX(0), y2: getY(compliance.max), style: style
-        })
+        });
+
         // Compliance Zero Line
         putLine({
             x1: getX(pressure.min), y1: getY(0),
             x2: getX(pressure.max), y2: getY(0), style: style
-        })
+        });
 
         // Captions:
-        style = `
-        user-select: none;
-        direction: ltr !important;
-        /* text-align: center; */
-        font-family: Arial, Helvetica, sans-serif !important;
-        font-size: 0.8mm;
-        text-anchor: middle; /*تراز افقی*/
-        dominant-baseline: middle; /* تراز عمودی*/       
-      `;
+        style = styles.caption;
+
         putText({
-            container: svg, value: "Compliance (ml)", style: style,
+            container: svg, value: "Compliance (ml)", style,
             x: getX(pressure.min), y: getY(compliance.max), dx: 5, dy: -3
         });
+
         putText({
             container: svg, value: "Pressure (dapa)", style: style,
             x: getX(pressure.max), y: getY(compliance.min), dx: -8, dy: 6,
         });
-        style = `
-            user-select: none;
-            direction: ltr !important;
-            /* text-align: center; */
-            font-family: Arial, Helvetica, sans-serif !important;
-            font-size: 1mm;
-            text-anchor: start; /*تراز افقی*/
-            dominant-baseline: middle; /* تراز عمودی*/       
-        `;
+
+        style = styles.label;
         let color = (this.side === 'R') ? 'red' : 'blue';
 
         putText({
             container: svg, value: "ECV:", style: style,
             x: getX(pressure.min), y: getY(compliance.min), dy: 10
         });
+
         putText({
             container: svg, value: "", style: style + 'fill: ' + color, name: 'ECV',
             x: getX(pressure.min), y: getY(compliance.min), dy: 10, dx: 11
         });
+
         putText({
             container: svg, value: "MEP:", style: style,
             x: getX(-300), y: getY(compliance.min), dy: 10
         });
+
         putText({
             container: svg, value: "", style: style + 'fill: ' + color, name: 'MEP',
             x: getX(-300), y: getY(compliance.min), dy: 10, dx: 11
         });
+
         putText({
             container: svg, value: "SC:", style: style,
             x: getX(0), y: getY(compliance.min), dy: 10
         });
+
         putText({
             container: svg, value: "", style: style + 'fill: ' + color, name: 'SC',
             x: getX(0), y: getY(compliance.min), dy: 10, dx: 8
         });
+
         putText({
             container: svg, value: "G:", style: style,
             x: getX(280), y: getY(compliance.min), dy: 10
         });
+
         putText({
             container: svg, value: "", style: style + 'fill: ' + color, name: 'G',
             x: getX(300), y: getY(compliance.min), dy: 10, dx: 4
         });
 
-        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: start; /*تراز افقی*/
-            dominant-baseline: middle; /* تراز عمودی*/       
-        `;
+        style = styles.type;
         putText({
             container: svg, value: "Type", style: style + 'fill: ' + color,
             x: getX(-500), y: getY(2.5),
         });
+
         putText({
             container: svg, value: "", style: style + 'fill: ' + color, name: 'Type',
             x: getX(-500), y: getY(2.5), dx: 9
         });
 
         // Compliance Axios digits
-        style = `
-      user-select: none;
-      direction: ltr !important;
-      /* text-align: center; */
-      font-family: Arial, Helvetica, sans-serif !important;
-      font-size: 0.7mm;
-      text-anchor: end; /*تراز افقی*/
-      dominant-baseline: middle; /* تراز عمودی*/
-      
-      `;
+        style = styles.compliance;
         x = getX(pressure.min);
         for (let c = compliance.min + compliance.step; c <= compliance.max; c += compliance.step) {
             c = Math.round(c * 10) / 10 // برای اون پدیده اعشاری غیرمنتظر
@@ -184,22 +163,13 @@ export default class Tympanogram {
         }
 
         // Pressure Axios digits
-        style = `
-      user-select: none;
-      direction: ltr !important;
-      /* text-align: center; */
-      font-family: Arial, Helvetica, sans-serif !important;
-      font-size: 0.7mm;
-      text-anchor: middle; /*تراز افقی*/
-      dominant-baseline: hanging; /* تراز عمودی*/
-      `;
+        style = styles.pressure;
         for (let p = pressure.min; p <= pressure.max; p += pressure.step) {
             putText({
                 container: svg, value: p,
                 x: getX(p), y: getY(compliance.min), dy: 1,
-                style: style,
+                style,
             });
-
         }
 
         // console.log(this.container);
@@ -258,7 +228,6 @@ export default class Tympanogram {
         this.chart.querySelector(`path[data-name="curve"]`)?.remove();
         // رسم منحنی
         this.drawCurve(data);
-
     }
 
     // توابع داخلی
@@ -274,7 +243,7 @@ export default class Tympanogram {
         // data.SC = 0.5;
         // data.MEP = -75;
         // با توجه به اندازه اس ‌سی میشه برای مقادیر زیر یک سری رل گذاشت با منحنی قشنگ تر باشد
-        let cp = 50; // جابجایی نقطه کنترل منحنی های راست و چپ روی محور افقی
+        let cp = 70; // جابجایی نقطه کنترل منحنی های راست و چپ روی محور افقی
         // let k = 0.5; // width and height change [0, 1]
         let cpp = 5; //جابجایی نقطه کنترل قله ها روی محور افقی
         // رل‌هایی برای تغییر مقادیر بالا برای زیبایی بیشتر منحنی در نقطه قله

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/src/styles.css

@@ -1,11 +1,71 @@
 @font-face {
+  font-family: 'Vazir';
+  src: url('/fonts/Vazir-Black-UI.woff2') format('woff2'),
+    url('/fonts/Vazir-Black-UI.woff') format('woff'),
+    url('/fonts/Vazir-Black-UI.eot') format('embedded-opentype');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Vazir';
+  src: url('/fonts/Vazir-Bold-UI.woff2') format('woff2'),
+    url('/fonts/Vazir-Bold-UI.woff') format('woff'),
+    url('/fonts/Vazir-Bold-UI.eot') format('embedded-opentype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Vazir';
+  src: url('/fonts/Vazir-Medium-UI.woff2') format('woff2'),
+    url('/fonts/Vazir-Medium-UI.woff') format('woff'),
+    url('/fonts/Vazir-Medium-UI.eot') format('embedded-opentype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Vazir';
+  src: url('/fonts/Vazir-Regular-UI.woff2') format('woff2'),
+    url('/fonts/Vazir-Regular-UI.woff') format('woff'),
+    url('/fonts/Vazir-Regular-UI.eot') format('embedded-opentype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Vazir';
+  src: url('/fonts/Vazir-Light-UI.woff2') format('woff2'),
+    url('/fonts/Vazir-Light-UI.woff') format('woff'),
+    url('/fonts/Vazir-Light-UI.eot') format('embedded-opentype');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Vazir';
+  src: url('/fonts/Vazir-Thin-UI.woff2') format('woff2'),
+    url('/fonts/Vazir-Thin-UI.woff') format('woff'),
+    url('/fonts/Vazir-Thin-UI.eot') format('embedded-opentype');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* @font-face {
   font-family: 'Vazirmatn';
   src: url('fonts/webfonts/Vazirmatn[wght].woff2') format('woff2 supports variations'),
        url('fonts/webfonts/Vazirmatn[wght].woff2') format('woff2-variations');
   font-weight: 100 900;
   font-style: normal;
   font-display: swap;
-}
+} */
 
 /* @font-face {
   font-family: vazirmatn;
@@ -25,7 +85,7 @@
 }
 
 .persian {
-  font-family: vazirmatn;
+  font-family: Vazir;
   /* font-size: 0.8mm; */
   /* text-anchor: start; */
 
@@ -58,7 +118,7 @@
 .right {
   /* background-color: lightgreen; */
   margin-left: 10px;
-  
+
   /* padding: 20px; */
 }