hayun-vite 0.10.1 → 0.11.0

package/src/Audiogram/Audiogram_box.js

@@ -0,0 +1,483 @@
+import putLine from "../common/putLine.js";
+import putPoint from "../common/putPoint.js";
+import putRect from "../common/putRect.js";
+import putSVG from "../common/putSVG.js";
+import putText from "../common/putText.js";
+import getAllSymbolsSVG from "../Symbol/getAllSymbolsSVG.js";
+import mainDims from './dims_N.js';
+
+export default class Audiogram {
+  constructor({ box, side, events = true }) {
+
+    // this.container = container;
+
+    this.events = events;
+    this.side = side;
+    this.data = {};
+    const symbols = getAllSymbolsSVG();
+    this.symbols = symbols;
+    this.draw({ box });
+    events && this.addEvents();
+  }
+
+  draw({ box }) {
+
+    const { container, width, height, margin, elements, name } = box
+
+    // this.dims = {}
+    // Object.assign(this.dims, mainDims)
+
+    // اضافه کردن ابعاد جایگزین و یا اختصاصی دیگر به آبجکت ابعاد
+    // dims && Object.assign(this.dims, dims);
+
+
+    // const [container, dims] = [this.container, this.dims]
+    let
+      {
+        vbWidth, vbHeight, chartPadding, symbolDims, vf, vfArray,
+        vfToF, fToVf, intensity, styles, frequencies
+      }
+        = mainDims;
+    // متناسب سازی مقدار ارتفاع ویوباکس بر حسب نسبت طول و عرض پیکسلی
+    const
+      kpx = height / width,
+      kvb = vbWidth / vbHeight;
+
+    vbHeight = vbHeight * kpx * kvb;
+
+    let x = margin.left
+    let y = margin.top
+
+    this.symbolDims = symbolDims;
+    this.vf = vf;
+    this.vfArray = vfArray;
+    this.fToVf = fToVf; // index of coresponding frequency
+    this.vfToF = vfToF;
+    this.intensity = intensity;
+    this.styles = styles;
+    this.chartPadding = chartPadding;
+
+    let style;
+    const xArea = { min: chartPadding.left, max: vbWidth - (chartPadding.right) }
+    this.xArea = xArea
+    const yArea = { min: chartPadding.top, max: vbHeight - (chartPadding.bottom) }
+
+    const xAxisLength = {
+      vb: vbWidth - (chartPadding.left + chartPadding.right),
+      hzi: vf.max - vf.min // 0, 1, 2, ... instead 125, ...
+    }
+    this.xAxisLength = xAxisLength
+
+    const yAxisLength = {
+      vb: vbHeight - (chartPadding.top + chartPadding.bottom),
+      db: intensity.max - intensity.min
+    }
+    this.yAxisLength = yAxisLength
+
+    // Main SVG for Audiogram
+    const viewBox = [-chartPadding.left, -chartPadding.top, vbWidth, vbHeight]
+    const svg = putSVG({ container, x, y, width, height, viewBox })
+    this.svg = svg; // کل نودی که به کانتینر اپند میشه
+
+    // برای فرم‌های پیش چاپ نشده
+    // if (!dims.blank) {
+    // محدوده مختصات خطوط جدول
+    const chartArea = putRect({
+      container: svg,
+      x: this.getX(vf.min), y: this.getY(intensity.min),
+      width: xAxisLength.vb, height: yAxisLength.vb,
+      style: 'stroke-width: 0.4; stroke: gray; fill: transparent'
+    })
+    // رسم خطوط افقی از بالا به پایین
+    let x1 = this.getX(vf.min);
+    let x2 = this.getX(vf.max);
+    for (let i = intensity.min; i <= intensity.max; i += intensity.step) {
+      const y1 = this.getY(i)
+      const y2 = y1;
+      style = (i === 0) ? styles.boldLine : styles.line;
+      putLine({ container: svg, x1, y1, x2, y2, style })
+    }
+
+    // رسم خطوط عمودی از چپ به راست
+    let y1 = this.getY(intensity.min)
+    let y2 = this.getY(intensity.max)
+    frequencies.forEach(item => {
+      const x1 = this.getX(item.vf)
+      const x2 = x1
+      style = (item.semiOctav) ? styles.semiOctavFreqline : styles.mainFreqline;
+      (item.f === 1000) && (style = styles.boldLine);
+      putLine({ container: svg, x1, y1, x2, y2, style })
+    })
+    // برچسب های اعداد فرکانس
+    style = styles.frequency
+    const y = this.getY(-25)
+    frequencies.forEach(item => {
+      const value = item.f
+      const x = this.getX(item.vf)
+      !item.semiOctav && item.f != 125 && item.f != 16000 &&
+        putText({ container: svg, value, x, y, style });
+    })
+
+    // رسم اعداد شدت محور عمودی
+    style = styles.intensity
+    const x = this.getX(-0.1)
+    for (let i = -10; i <= 120; i += 10) {
+      const y = this.getY(i)
+      const value = i
+      putText({ container: svg, x, y, value, style })
+    }
+    // }
+    // یک بوردر راهنمای توسعه برای اس‌ وی جی به تمام پهنا و ارتفاع رسم می‌کنیم
+    // این مربع مرزی را آخرین ایجاد میکنیم تا بالاترین لایه باشد و روی ریودادها درست عمل کند
+    const borderRect = putRect({
+      container: svg, x: -chartPadding.left, y: -chartPadding.top,
+      width: vbWidth, height: vbHeight, name: '',
+      style: 'fill: transparent; stroke: transparent;',
+    });
+    this.borderRect = borderRect;
+
+    const lastCordinate = { f: 125, i: -20 }
+    this.lastCordinate = lastCordinate
+    const currentCordinate = { f: 125, i: -20 }
+    this.currentCordinate = currentCordinate
+
+    const chartArea = putRect({
+      container: svg, x: 0, y: 0,
+      width: xAxisLength.vb, height: yAxisLength.vb,
+      style: 'fill: transparent; stroke: transparent;',
+      name: 'RAudiogram',
+    });
+
+    this.chartArea = chartArea
+    this.events && this.drawSymbolsChart();
+    container.appendChild(svg);
+  }
+
+  addEvents() {
+    // برای قابل فوکوس کردن چارت ادیوگرام و دریافت رویدادهای صفحه کلید
+    this.svg.setAttribute('tabindex', 1)
+    this.svg.focus({ focusVisible: true });
+
+    this.svg.style.outline = 'none';
+
+
+    // نقطه راهنما
+    const pointer = putPoint({ container: this.svg, x: 0, y: 0, r: 4, color: 'black' });
+    this.pointer = pointer;
+    this.mouseMove();
+    this.click();
+    this.mouseEnter();
+    this.mouseLeave();
+    this.keyboard();
+
+
+  }
+
+  keyboard() {
+    this.svg.addEventListener('keydown', e => {
+      e.preventDefault();
+      console.log(e.code)
+      let f, vf, i, x, y, index
+      switch (e.code) {
+        case 'ArrowDown':
+          i = this.currentCordinate.i;
+          (this.currentCordinate.i != 125) && (i = this.currentCordinate.i += 5);
+          y = this.getY(i)
+          this.pointer.setAttribute('cy', y)
+          break;
+        case 'ArrowUp':
+          i = this.currentCordinate.i;
+          (this.currentCordinate.i != -15) && (i = this.currentCordinate.i -= 5);
+          y = this.getY(i)
+          this.pointer.setAttribute('cy', y)
+          break;
+        case 'ArrowRight':
+          f = this.currentCordinate.f;
+          vf = this.fToVf[f];
+          index = this.vfArray.indexOf(vf);
+          (f != 8000) && index++;
+          vf = this.vfArray[index]
+          this.currentCordinate.f = this.vfToF[vf]
+          x = this.getX(vf)
+          this.pointer.setAttribute('cx', x)
+          break;
+        case 'ArrowLeft':
+          f = this.currentCordinate.f;
+          vf = this.fToVf[f];
+          index = this.vfArray.indexOf(vf);
+          (f != 250) && index--;
+          vf = this.vfArray[index]
+          this.currentCordinate.f = this.vfToF[vf]
+          x = this.getX(vf)
+          this.pointer.setAttribute('cx', x)
+          break;
+        case 'Space':
+          this.updateFreqLine({ shiftKey: e.shiftKey })
+          break;
+        case 'Delete':
+          const container = this.svg
+          const dataset = { f: this.currentCordinate.f, i: this.currentCordinate.i }
+          this.removeSymbol({ container, dataset })
+          break;
+        default:
+          break;
+      }
+    })
+
+  }
+
+  drawSymbolsChart() {
+    const { width, height } = this.dims.symbolsChart
+    let style;
+    let x = 0
+    let y = 0
+
+    const symbolsChart = putSVG({ container: this.container, width, height, x, y });
+    symbolsChart.style.cursor = 'pointer'; // Change to pointer cursor
+    let container = symbolsChart
+    style = 'fill: none;'
+    putRect({ container, x, y, width, height, style });
+
+    const
+      dw = width / 4 - 1,
+      dh = height - 2,
+      rect = {};
+    x = 1; y = 1;
+    style = 'fill: none; stroke: brown;';
+
+    (this.side === 'R' ? ['R_AC', 'R_BC', 'R_AC_M', 'R_BC_M'] : ['L_AC', 'L_BC', 'L_AC_M', 'L_BC_M'])
+      .forEach(symbolName => {
+        const [width, height] = [dw, dh];
+        rect[symbolName] = putRect({ container, x, y, width, height, name: symbolName, style });
+        this.insertSymbol({ container, symbolName, x: x + dw / 2, y: dh / 2 })
+        x += dw;
+      });
+
+    // تعیین سمبل پیش‌فرض
+    this.currentSymbolName = this.side + '_AC';
+    this.symbol = { current: { side: this.side, type: 'AC' }, last: {} }
+    this.lastSymbolName = this.currentSymbolName;
+    rect[this.currentSymbolName].style = 'fill: yellow; stroke: brown;'
+
+    symbolsChart.onclick = (e) => {
+      this.currentSymbolName = e.target.dataset.name
+      // رنگی کردن مربع دور سمبل
+      rect[this.lastSymbolName].style = 'fill: none; stroke: brown;'
+      rect[this.currentSymbolName].style = 'fill: yellow; stroke: brown;'
+      this.lastSymbolName = this.currentSymbolName
+    }
+  }
+
+  mouseMove() {
+    // وقتی کاربر صفحه را ریسایز می‌کند مختصات آفست تغییر میکند گه با تابع زیر همیشه این مختصات چک می‌شود
+    const calcK = () => {
+      // دریافت ابعاد بر مبنای پیکسل آفست و صفحه نمایش
+      const clientDims = this.chartArea.getBoundingClientRect()
+      // ادریافت ابعاد در واحد ویوباکس
+      const vbDims = this.chartArea.getBBox()
+      const kx = vbDims.width / clientDims.width
+      const ky = vbDims.height / clientDims.height
+      return { kx, ky }
+    }
+
+    this.chartArea.addEventListener('mousemove', (e) => {
+      const { kx, ky } = calcK();
+      let x = e.offsetX * kx
+      let y = e.offsetY * ky
+      const f = this.currentCordinate.f = +this.getFreq(x).f;
+      const vf = this.getFreq(x).vf;
+      const i = this.currentCordinate.i = this.getIntensity(y)
+
+      if (
+        f >= 250 && i >= -15 && i <= 125 &&
+        (
+          this.lastCordinate.f != this.currentCordinate.f ||
+          this.lastCordinate.i != this.currentCordinate.i
+        )
+      ) {
+        x = this.getX(vf)
+        this.pointer.setAttribute('cx', x)
+        y = this.getY(i)
+        this.pointer.setAttribute('cy', y)
+      }
+
+      this.lastCordinate.f = this.currentCordinate.f
+      this.lastCordinate.i = this.currentCordinate.i
+    })
+  }
+
+  // تبدیل مقدار ایکس مختصات به فرکانس 
+  getFreq(x) {
+    let vf = ((x - this.xArea.min) * (this.xAxisLength.hzi / this.xAxisLength.vb));
+    // یافتن نزدیک ترین 
+    // const vfArray = [0, 2, 4, 5.2, 6, 7.2, 8, 9.2, 10, 11.2, 12];
+    let i = 0;
+    while (vf > this.vfArray[i]) {
+      i++;
+    }
+    // حالا بین دو ایندکس پیدا شده
+    const index = ((vf - this.vfArray[i - 1]) > (this.vfArray[i] - vf)) ? i : i - 1;
+    return { f: this.vfToF[this.vfArray[index]], vf: this.vfArray[index] };
+  }
+
+  click() {
+    // رویداد کلیک برای فراخوانی تابع نشاندن سمبل انتخاب شده
+    this.chartArea.addEventListener('click', (e) => {
+      const shiftKey = e.shiftKey
+      this.updateFreqLine({ shiftKey })
+    })
+  }
+
+  updateFreqLine({ shiftKey }) {
+    const nr = shiftKey;
+    let symbolname = this.currentSymbolName;
+    const f = this.currentCordinate.f
+    const i = this.currentCordinate.i
+    // console.log(f,i);
+
+    const type = symbolname.slice(2, 4)
+    const side = symbolname[0]
+    const masked = symbolname[5] === 'M' ? true : false;
+    nr && (symbolname += '_NR');
+
+
+    const x = this.getX(this.fToVf[f])
+    const y = this.getY(i)
+    let dataset = { f, type }
+    // اینجا رل های رسم را چک میکنیم 
+    // اگر در این خط فرکانسی سمبل با تایپ مشابه داریم اول اون رو پاک کن
+    // دیتا رو چک ببین این فرکانس هست
+    this.removeSymbol({ container: this.svg, dataset })
+    dataset = { f, i, symbolname, type, side, masked, nr }
+    this.insertSymbol({ container: this.svg, symbolName: symbolname, x, y, dataset })
+    // بالا آوردن لایه آخر برای دریافت رویدادهای موس
+    this.svg.appendChild(this.chartArea)
+
+    if (this.data[symbolname] === undefined) this.data[symbolname] = {}
+    this.data[symbolname][f] = i
+
+  }
+
+  removeSymbol({ container, dataset }) {
+    const { side, type, f, i, masked } = dataset
+    // ساخت رشته کوئری با توجه به پارامترها
+    let query = '';
+    side && (query += `[data-side='${side}']`);
+    type && (query += `[data-type='${type}']`);
+    f && (query += `[data-f='${f}']`);
+    i && (query += `[data-i='${i}']`);
+    const symbol = container.querySelector(query);
+    if (symbol) {
+      const symbolname = symbol.dataset.symbolname;
+      delete this.data[symbolname][f]
+      symbol.remove();
+    }
+  }
+
+  // ناپدید شدن خطوط
+  mouseEnter() {
+    this.chartArea.addEventListener('mouseenter', () => {
+      this.svg.focus()
+      this.svg.querySelectorAll('[data-name=junction]')
+        .forEach(elem => elem.style.display = 'none');
+    })
+  }
+
+  // آپدیت با دیتای جدید
+  mouseLeave() {
+    this.svg.addEventListener('mouseleave', () => {
+      this.update({ data: this.data, side: this.side })
+    })
+  }
+
+  // تبدیل مختصات ایگرگ سیستمی به مقدار شدت
+  getIntensity(y) {
+    let i = (this.intensity.min) + (y - this.chartPadding.top) * (this.yAxisLength.db / this.yAxisLength.vb)
+    // رند کردن مقدار شدت با محدوده عدد پنج
+    const roundStep = 5
+    // console.log(Math.round(i / roundStep) * roundStep);
+
+    return (Math.round(i / roundStep) * roundStep)
+  }
+  // vf = f index ~ 125: 0, 250: 2, 500: 4, 750:5, ...
+  getX(vf) {
+    return ((vf - this.vf.min) * (this.xAxisLength.vb / this.xAxisLength.hzi)
+    )
+  }
+  // تبدیل مقدار شدت به دسی بل به مقدار مختصات ایگرگ سیستم
+  getY(i) {
+    return ((i - this.intensity.min) * (this.yAxisLength.vb / this.yAxisLength.db)
+    )
+  }
+
+  update({ data, side }) {
+    this.data = data
+    // پاک کردن نودهای سمبل دیتای قبلی در صورت وجود از نود مربوطه
+    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;
+    for (const symbolName in data) {
+      for (const f in data[symbolName]) {
+        const i = data[symbolName][f];
+        const x = this.getX(this.fToVf[f]);
+        const y = this.getY(i);
+        const dataset = { f: f, i: i, symbolname: symbolName }
+        this.insertSymbol({ container: this.svg, symbolName, x, y, dataset });
+        // جمع آوری مختصات برای رسم خط بین سمبل ها اینجا انجام می‌شود
+        // پراپرتی تایپ فقط راهنمای دیباگ هست و کاربردی ندارد
+        let NR = (symbolName.at(-1) === 'R') ? true : false;
+        (symbolName.slice(2, 4) === 'AC') && (junctions.AC[f] = { x, y, NR, type: symbolName });
+        (symbolName.slice(2, 4) === 'BC') && (junctions.BC[f] = { x, y, NR, type: symbolName });
+      }
+    }
+    this.drawJunctions();
+    // بالا آوردن مستطیل احاطه کننده به بالاترین لایه برای دریافت صحیح رویدادهای موس
+    this.svg.appendChild(this.chartArea)
+  }
+
+  drawJunctions() {
+    // console.log(this.junctions);
+    // رسم خط بین نقاط
+    const junctions = this.junctions
+    let color = (junctions.side === 'R') ? 'red' : 'blue';
+
+    for (const type in junctions) {
+      let x1, y1, x2, y2, NR1, NR2;
+      for (const freq in junctions[type]) {
+        x1 = x2; y1 = y2; NR1 = NR2
+        x2 = junctions[type][freq].x
+        y2 = junctions[type][freq].y
+        NR2 = junctions[type][freq].NR
+        let style =
+          type === "BC"
+            ? this.styles.juncDashLine + `stroke: ${color}`
+            : this.styles.juncLine + `stroke: ${color}`;
+        x1 && !NR1 && !NR2 && putLine({ container: this.svg, x1, y1, x2, y2, style, name: 'junction' });
+      }
+    }
+  }
+
+  insertSymbol({ container, symbolName, x, y, dataset }) {
+
+    const width = this.symbolDims.width
+    const symbol = this.getSymbol(symbolName);
+    symbol.setAttribute('x', x - width / 2)
+    symbol.setAttribute('y', y - width / 2)
+    symbol.setAttribute('width', width)
+    symbol.setAttribute('height', width)
+    // مقادیر دیتاست را در پراپرتی های دیتا بذار
+    for (const key in dataset) {
+      symbol.setAttribute('data-' + key, dataset[key])
+    }
+
+    container.appendChild(symbol)
+  }
+
+  getSymbol(symbolName) {
+    const point = this.symbols[symbolName].cloneNode(true);
+    return point
+  }
+}

package/src/Audiogram/dims.js

@@ -9,7 +9,7 @@ const dims = {
     // واحد پیکسل، میلیمتر، ...
     // اگر واحد پایینی توسط بیرون تغییر کرد واحدهای بالایی باید با نسبت پایینی تغییر کنند
     width: 700,
-    height: 700 ,
+    height: 700,
 
     // این فاصله خطوط محورهای بالا و چپ ادیوگرام از لبه ها هست
     chartPadding: { left: 40, top: 40, right: 30, bottom: 20 },
@@ -34,92 +34,16 @@ const dims = {
     fToVf: { 125: 0, 250: 2, 500: 4, 750: 5.2, 1000: 6, 1500: 7.2, 2000: 8, 3000: 9.2, 4000: 10, 6000: 11.2, 8000: 12, 12000: 13.2, 16000: 14 },
     intensity: { min: -20, max: 130, step: 10 },
     styles: {
-        frequency: `text-anchor: middle; dominant-baseline: hanging;
-             font: 1.3em Verdana, Helvetica, Arial, sans-serif; user-select: none;font-weight:bold;`,
-        intensity: `text-anchor: end; dominant-baseline: middle;
-             font: 1.3em Verdana, Helvetica, Arial, sans-serif; user-select: none;font-weight:bold;`,
+        svg: 'user-select: none; font-family: Vazir ',
+        frequency: `text-anchor: middle; dominant-baseline: hanging; font-size: 1.4em; font-weight:bold;`,
+        intensity: `text-anchor: end; dominant-baseline: middle; font-size: 1.3em; font-weight:bold;`,
         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;`,
     },
 
-    // پس از اضافه کردن هر آیتم در زیر این تمپلت رو هم آپدیت کنید
-    // template: {
-    //     margin: { left: 0, top: 0, }, // در کانتینر دیو این عمل نمیکنه. مگر در کانتینر اس وی جی بذاریم
-
-    //     width: 700,
-    //     height: 700,
-
-    //     chartPadding: { left: 40, top: 50, right: 30, bottom: 10 },
-    //     symbolDims: { width: 55, height: 55 },
-    //     // virtual frequency 
-    //     frequencies: [{ value: 125, x: 0 }, { value: 250, x: 2 }, { value: 500, x: 4 }, { value: 750, x: 5 }],
-
-    //     iFrequency: { min: 0, max: 14, step: 1 },
-    //     iToFreq: { 0: 125, 2: 250, 4: 500, 5: 750, 6: 1000, 7: 1500, 8: 2000, 9: 3000, 10: 4000, 11: 6000, 12: 8000, 13: 12000, 14: 16000 },
-    //     fToVf: { 125: 0, 250: 2, 500: 4, 750: 5, 1000: 6, 1500: 7, 2000: 8, 3000: 9, 4000: 10, 6000: 11, 8000: 12, 12000: 13, 16000: 14 },
-    //     intensity: { min: -20, max: 120, step: 10 },
-
-    //     styles: {
-    //         freq: ``,
-    //         line: ``,
-    //         juncDashLine: ``,
-    //         juncLine: ``,
-    //     }
-    // },
-
-    // display: {
-    //     width: 800,
-    //     height: 600,
-
-
-    // },
-    // 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, },
-    //     chartPadding: { left: 0, top: 0, right: 0, bottom: 0 },
-    //     symbolDims: { width: 8, height: 8 },
-    //     // virtual frequency 
-    //     frequencies: [{ value: 125, x: 0 }, { value: 250, x: 2 }, { value: 500, x: 4 }, { value: 750, x: 5 }],
-
-    //     iFrequency: { min: 0, max: 14, step: 1 },
-    //     iToFreq: { 0: 125, 2: 250, 4: 500, 5: 750, 6: 1000, 7: 1500, 8: 2000, 9: 3000, 10: 4000, 11: 6000, 12: 8000, 13: 12000, 14: 16000 },
-    //     fTovf: { 125: 0, 250: 2, 500: 4, 750: 5.2, 1000: 6, 1500: 7.2, 2000: 8, 3000: 9.2, 4000: 10, 6000: 11.2, 8000: 12, 12000: 13.2, 16000: 14 },
-    //     intensity: { min: -20, max: 120, step: 10 },
-
-    //     styles: {
-    //         freq: ``,
-    //         line: `stroke: black; stroke-width: 0.1;`,
-    //         juncDashLine: `stroke-width: 0.1 ; stroke-opacity: 0.8; stroke-dasharray: 0.5;`,
-    //         juncLine: `stroke-width: 0.2; stroke-opacity: 0.8;`,
-    //     }
-    // },
-    // combo: {
-    //     // width: 50,
-    //     // height: 40,
-    //     // margin: { left: 5, top: 5, right: 5, bottom: 5 },
-    //     chartPadding: { left: 8, top: 8, right: 5, bottom: 3 },
-    //     symbolDims: { width: 8, height: 8 },
-    //     // virtual frequency 
-    //     frequencies: [{ value: 125, x: 0 }, { value: 250, x: 2 }, { value: 500, x: 4 }, { value: 750, x: 5 }],
-
-    //     iFrequency: { min: 0, max: 14, step: 1 },
-    //     iToFreq: { 0: 125, 2: 250, 4: 500, 5: 750, 6: 1000, 7: 1500, 8: 2000, 9: 3000, 10: 4000, 11: 6000, 12: 8000, 13: 12000, 14: 16000 },
-    //     freqToi: { 125: 0, 250: 2, 500: 4, 750: 5, 1000: 6, 1500: 7, 2000: 8, 3000: 9, 4000: 10, 6000: 11, 8000: 12, 12000: 13, 16000: 14 },
-    //     intensity: { min: -20, max: 120, step: 10 },
-
-    //     styles: {
-    //         freq: ``,
-    //         line: `stroke: black; stroke-width: 0.1;`,
-    //         juncDashLine: `stroke-width: 0.1 ; stroke-opacity: 0.8; stroke-dasharray: 0.5;`,
-    //         juncLine: `stroke-width: 0.2; stroke-opacity: 0.8;`,
-    //     }
-    // }
 }
 
 export default dims;

package/src/Audiogram/dims_100.js

@@ -0,0 +1,51 @@
+const units = {
+    name: 'Audiogram',
+    margin: { left: 0, top: 0, }, // در کانتینر دیو این عمل نمیکنه. مگر در کانتینر اس وی جی بذاریم
+    // این فاصله خطوط محورهای بالا و چپ ادیوگرام از لبه ها هست
+    chartPadding: { left: 4, top: 4, right: 3, bottom: 1 },
+    // واحد ویوباکس - بدون واحد
+    vbWidth: 70, // برای اینکه ضخامت خطوط تغییری ناهنجار نکند این ثابت میماند 
+    vbHeight: 70, // این به نسبت تغییر می‌کند
+    // پایینی شکل آبجکت بالایی هست
+    // viewBoxObj: { 'min-x': -40, 'min-y': -40, width: 700, height: 700 },
+    // viewBox: '-40 -40 700 700',
+    // واحد پیکسل، میلیمتر، ...
+    // اگر واحد پایینی توسط بیرون تغییر کرد ارتفاع ویوباکس  باید با نسبت پایینی تغییر کنند
+    width: 700,
+    height: 700,
+
+
+    symbolDims: { width: 7, height: 7 },
+    symbolsChart: {
+        width: 240, height: 60
+    },
+    // virtual frequency 
+    mainFrequencies: [125, 250, 500, 1000, 2000, 4000, 8000],
+    frequencies: [
+        { f: 125, vf: 0, label: false }, { f: 250, vf: 2 },
+        { f: 500, vf: 4 }, { f: 750, vf: 5.2, semiOctav: true },
+        { f: 1000, vf: 6 }, { f: 1500, vf: 7.2, semiOctav: true },
+        { f: 2000, vf: 8 }, { f: 3000, vf: 9.2, semiOctav: true },
+        { f: 4000, vf: 10 }, { f: 6000, vf: 11.2, semiOctav: true },
+        { f: 8000, vf: 12 }, { f: 16000, vf: 14 },
+    ],
+
+    vf: { min: 0, max: 14, step: 1 }, // virtual frequency
+    vfArray: [0, 2, 4, 5.2, 6, 7.2, 8, 9.2, 10, 11.2, 12],
+    vfToF: { 0: 125, 2: 250, 4: 500, 5.2: 750, 6: 1000, 7.2: 1500, 8: 2000, 9.2: 3000, 10: 4000, 11.2: 6000, 12: 8000, 13: 12000, 14: 16000 },
+    fToVf: { 125: 0, 250: 2, 500: 4, 750: 5.2, 1000: 6, 1500: 7.2, 2000: 8, 3000: 9.2, 4000: 10, 6000: 11.2, 8000: 12, 12000: 13.2, 16000: 14 },
+    intensity: { min: -20, max: 130, step: 10 },
+    styles: {
+        frequency: ['text-anchor: middle', 'dominant-baseline: hanging', 'font: 2px Vazir', 'user-select: none', 'font-weight:bold'].join('; '),
+        intensity: ['text-anchor: end', 'dominant-baseline: middle', 'font: 2px Vazir', 'user-select: none', 'font-weight:bold'].join('; '),
+        mainFreqline: ['stroke: black', 'stroke-width: 0.1'].join('; '),
+        semiOctavFreqline: ['stroke: black', 'stroke-width: 0.1', 'stroke-dasharray: 0.5'].join('; '),
+        line: 'stroke: black; stroke-width: 0.1;',
+        boldLine: 'stroke: black; stroke-width: 0.3;',
+        juncDashLine: 'stroke-width: 0.1; stroke-opacity: 0.8; stroke-dasharray: 0.5;',
+        juncLine: 'stroke-width: 0.1; stroke-opacity: 0.8;',
+    },
+
+}
+
+export default units;