hayun-vite 0.10.1 → 0.11.0

package/src/{Form/Reflex_N.js → Reflex/Reflex.js}

@@ -1,7 +1,8 @@
 import putRect from "../common/putRect.js";
 import putSVG from "../common/putSVG.js";
 import putText from "../common/putText.js";
-import putTextBox from "../common/putTextBox.js";
+import putCell from "../common/putCell.js";
+import units from "./units.js";
 
 export default class Reflex {
     constructor({ container, side }) {
@@ -18,7 +19,18 @@ export default class Reflex {
         let style;
 
         // کل چارت
-        const svg = putSVG({ x, y, width, height, className: 'reflex' })
+        // const svg = putSVG({ x, y, width, height, className: 'reflex' })
+        let { styles, vbWidth, vbHeight } = units;
+        
+        // کل چارت
+        vbHeight = (vbWidth * height) / width // متناسب سازی ارتفاع ویباکس با پهنا و ارتفاع ورودی
+        const viewBox = [0, 0, vbWidth, vbHeight].join(' ');
+        const svg = putSVG({ x, y, width, height, viewBox })
+        // این خط شد دو خط کد طلایی که مشکل سایز فونت در دیسپلی و کاغذ رو حل کرد
+        width = vbWidth; // ثابت می‌ماند همیشه
+        height = vbHeight // با نسبت پهنا و ارتفاع ورودی تغییر میکند 
+
+
 
         let lable = ["", "500", "1000", "2000", "4000"]; // مقادیر برچسب‌های سطر اول
         // جدولی با ۳ سطر و ۵ ستون
@@ -69,7 +81,7 @@ export default class Reflex {
                 let x = cw1 / 2 + cw1 * i;
                 let y = ch1 * j + ch2 / 2;
                 //رسم باکس با مختصات مرکز باکس
-                putTextBox({ container: svg, x, y, dx: 0, dy: -1, w: 13, h: 7, rx: 1 });
+                putCell({ container: svg, x, y, dx: 0, dy: -1, width: 13, height: 7, rx: 1 });
             }
         }
 

package/src/Reflex/units.js

@@ -0,0 +1,65 @@
+const units = {
+    name: 'Acoustic Reflexes',
+    margin: { left: 0, top: 0, }, // در کانتینر دیو این عمل نمیکنه. مگر در کانتینر اس وی جی بذاریم
+
+    // واحد ویوباکس - بدون واحد
+    vbWidth: 100, // برای اینکه ضخامت خطوط تغییری ناهنجار نکند این ثابت میماند 
+    vbHeight: 30, // این به نسبت تغییر می‌کند
+
+    // واحد پیکسل، میلیمتر، ...
+    // اگر واحد پایینی توسط بیرون تغییر کرد واحدهای بالایی باید با نسبت پایینی تغییر کنند
+    width: 100,
+    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; 
+            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/{Form/Speech_N.js → Speech/Speech.js}

@@ -1,12 +1,8 @@
-import putTextBox from "../common/putTextBox.js";
+import putCell from "../common/putCell.js";
 import putRect from "../common/putRect.js";
 import putText from "../common/putText.js";
 import putSVG from "../common/putSVG.js";
-import putPoint from "../common/putPoint.js";
-
-
-
-
+import units from "./units.js";
 const svgNS = "http://www.w3.org/2000/svg";
 
 export default class Speech {
@@ -15,7 +11,8 @@ export default class Speech {
         this.side = side;
     }
 
-    draw({ dims, stroke = true }) {
+    draw({ dims }) {
+        // console.log(dims);
 
         // دریافت اطلاعات مختصات چاپ ورودی ها به جز عادی محاسبه شده 
         this.inputs = (dims.forceInsert) ? dims.forceInputs : dims.inputs
@@ -24,43 +21,51 @@ export default class Speech {
         let height = dims.height;
         let x = dims.margin.left;
         let y = dims.margin.top;
+        let { styles, vbWidth, vbHeight } = units;
+
+        // کل چارت
+        vbHeight = (vbWidth * height) / width // متناسب سازی ارتفاع ویباکس با پهنا و ارتفاع ورودی
+        const viewBox = [0, 0, vbWidth, vbHeight].join(' ');
+        const svg = putSVG({ x, y, width, height, viewBox })
+        // این خط شد دو خط کد طلایی که مشکل سایز فونت در دیسپلی و کاغذ رو حل کرد
+        width = vbWidth; // ثابت می‌ماند همیشه
+        height = vbHeight // با نسبت پهنا و ارتفاع ورودی تغییر میکند 
+
+
         const labels = dims.labels;
         this.labels = labels;
-        // const cn = labels.length;
-        let sideCaption = this.side === "R" ? "Right" : "Left";
         // یک جدول 6*2  - ۲ سطر و ۶ ستون
         const rows = 2;
-        const column = labels.length;
-
-        const cw = width / column; // پهنای هر خانه
+        const columns = labels.length;
+        const cw = width / columns; // پهنای هر خانه
         const ch = height / rows; // ارتفاع هر خانه
+        // تعریف آبجکتی چارت
+        const chart = {
+            width, height,
+            rows: 2, column: labels.length,
+            cell: { width: 1, height: 1 },
+            calc1: function () {
+                this.cell.width = this.width / this.column
+            }
+        }
 
-        // کل چارت
-        const svg = putSVG({ x, y, width, height, className: 'speach' })
 
+        // ایجاد ماتریکس سلول های چارت که آدرس و مختصات مرکز هر سلول را نگهداری میکند
         const matrix = [
             [],
             []
         ];
 
-        for (let i = 0; i < 2; i++) {
+        for (let i = 0; i < rows; i++) {
             x = cw / 2;
             y = ch / 2 + ch * i;
-            for (let j = 0; j < 5; j++) {
+            for (let j = 0; j < columns; j++) {
                 matrix[i][j] = { i, j, x, y };
                 x += cw;
             }
         }
-        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; /*تراز افقی*/
-        `;
 
+        style = styles.label;
         // برچسب های سطر اول
         // برای فرم های پیش چاپ شده انجام نمیشود
         !dims.hideContext &&
@@ -69,19 +74,31 @@ export default class Speech {
 
         style += (this.side === 'R') ? 'fill: red;' : 'fill: blue;';
 
+        const inputBox = {
+            width: width / 5 * 0.70, height: height / 2 * 0.85,
+            rx: width / 100
+        }
+        // محاسبه کمان گردی بر اساس مقدار پهنا
+        inputBox.rx = inputBox.width / 10
+
         // باکس و تکست مقادیر
         matrix[1].forEach((cell, index) => {
             // برای فرم های پیش چاپ شده باکس رسم نمیشود
-            !dims.hideContext && putTextBox({ container: svg, x: cell.x, y: cell.y, dy: -1, w: 13, h: 7, rx: 1, });
+            !dims.hideContext &&
+                putCell({
+                    container: svg, x: cell.x, y: cell.y, 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: style, name: labels[index] });
+                putText({ container: svg, value: "", x: cell.x, y: cell.y, style, name: labels[index] });
             } else {
                 // برای فرم های مثل رسا استفاده میشود
                 let name;
                 this.inputs.forEach(input => {
                     ({ name, x, y } = input);
-                    putText({ container: svg, x, y, style: style, name });
+                    putText({ container: svg, x, y, style, name });
                 });
             }
         }

package/src/Speech/Speech_N.js

@@ -0,0 +1,125 @@
+import putCell from "../common/putCell.js";
+import putRect from "../common/putRect.js";
+import putText from "../common/putText.js";
+import putSVG from "../common/putSVG.js";
+import units from "./units.js";
+const svgNS = "http://www.w3.org/2000/svg";
+
+export default class Speech {
+    constructor({ box, side = 'R' }) {
+        console.log(box);
+
+        // const { container, width, height, elements } = box
+        // this.container = container;
+        this.side = side;
+        this.draw({ box })
+
+    }
+
+    draw({ box }) {
+        const { container, width, height, margin, elements, name} = box
+
+        // console.log(dims);
+
+        // دریافت اطلاعات مختصات چاپ ورودی ها به جز عادی محاسبه شده 
+        // this.inputs = (dims.forceInsesrt) ? dims.forceInputs : dims.inputs
+        let style;
+        // let width = dims.width;
+        // let height = dims.height;
+        let x = margin.left;
+        let y = margin.top;
+
+        // کل چارت
+        // const svg = putSVG({ x, y, width, height, viewBox: [0, 0, width, height] })
+
+
+
+        const labels = elements;
+        this.labels = labels;
+        let { styles } = units;
+        // یک جدول 6*2  - ۲ سطر و ۶ ستون
+        const rows = 2;
+        const columns = labels.length;
+        const cw = width / columns; // پهنای هر خانه
+        const ch = height / rows; // ارتفاع هر خانه
+        // تعریف آبجکتی چارت
+        const chart = {
+            width, height,
+            rows: 2, column: labels.length,
+            cell: { width: 1, height: 1 },
+            calc1: function () {
+                this.cell.width = this.width / this.column
+            }
+        }
+
+
+        // ایجاد ماتریکس سلول های چارت که آدرس و مختصات مرکز هر سلول را نگهداری میکند
+        const matrix = [
+            [],
+            []
+        ];
+
+        for (let i = 0; i < rows; i++) {
+            x = cw / 2;
+            y = ch / 2 + ch * i;
+            for (let j = 0; j < columns; j++) {
+                matrix[i][j] = { i, j, x, y };
+                x += cw;
+            }
+        }
+
+        style = styles.label;
+
+        // برچسب های سطر اول
+        // برای فرم های پیش چاپ شده انجام نمیشود
+        // !dims.hideContext &&
+        matrix[0].forEach((cell, index) =>
+            putText({ container, value: labels[index], x: cell.x, y: cell.y, dx: 0, dy: 1, style }));
+
+        style += (this.side === 'R') ? 'fill: red;' : 'fill: blue;';
+
+        const inputBox = {
+            width: width / 5 * 0.78, height: height / 2 * 0.85,
+            rx: width / 100
+        }
+        // محاسبه کمان گردی بر اساس مقدار پهنا
+        inputBox.rx = inputBox.width / 10
+
+        // باکس و تکست مقادیر
+        matrix[1].forEach((cell, index) => {
+            // برای فرم های پیش چاپ شده باکس رسم نمیشود
+            // !dims.hideContext &&
+            putCell({
+                container, x: cell.x, y: cell.y, dy: -1,
+                width: inputBox.width, height: inputBox.height,
+                rx: inputBox.rx,
+            });
+            // مقدار نگه دارها
+            // if (!dims.forceInsert) {
+            putText({ container, value: "", x: cell.x, y: cell.y, style, name: labels[index] });
+            // } else {
+            //     // برای فرم های مثل رسا استفاده میشود
+            //     let name;
+            //     this.inputs.forEach(input => {
+            //         ({ name, x, y } = input);
+            //         putText({ container: svg, x, y, style, name });
+            //     });
+            // }
+        }
+        );
+
+
+        // مربع احاطه‌کننده کل جدول برای راهنمای توسعه
+        style = 'fill: transparent; stroke: green; stroke-width: 0.5;';
+        let className = 'no-print'
+        putRect({ container, x: 0, y: 0, width, height, style, name })
+        // this.chart = svg;
+        // container.appendChild(svg);
+    }
+
+    update(data) {
+        this.labels.forEach((label) => {
+            this.chart.querySelector(`text[data-name=${label}]`).innerHTML = data?.[label] || "";
+        })
+    }
+}

package/src/Speech/units.js

@@ -0,0 +1,31 @@
+const units = {
+
+    name: 'Speech',
+    margin: { left: 0, top: 0, }, // در کانتینر دیو این عمل نمیکنه. مگر در کانتینر اس وی جی بذاریم
+    // اگر واحد پایینی توسط بیرون تغییر کرد ارتفاع ویوباکس  باید با نسبت پایینی تغییر کنند
+    width: 100,
+    height: 20,
+    // این فاصله خطوط محورهای بالا و چپ ادیوگرام از لبه ها هست
+    chartPadding: { left: 0, top: 0, right: 0, bottom: 0 },
+    // واحد ویوباکس - بدون واحد
+    vbWidth: 100, // برای اینکه ضخامت خطوط تغییری ناهنجار نکند این ثابت میماند 
+    vbHeight: 20, // این به نسبت تغییر می‌کند
+    // پایینی شکل آبجکت بالایی هست
+    // viewBoxObj: { 'min-x': -0, 'min-y': 0, width: 100, height: 20 },
+    // viewBox: [0, 0, 100, 20],
+    // واحد پیکسل، میلیمتر، ...
+
+
+    styles: {
+        label: `
+            user-select: none;
+            direction: ltr;
+            font-family: Vazir;
+            font-size: ${4.2};
+            font-weight: 700;
+            text-anchor: middle;
+        `,
+    }
+}
+
+export default units

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; //جابجایی نقطه کنترل قله ها روی محور افقی
         // رل‌هایی برای تغییر مقادیر بالا برای زیبایی بیشتر منحنی در نقطه قله