ui enhancements

src/addObjectForm.ts

@@ -113,35 +113,32 @@ export function createInstrumentForm(): HTMLElement {
   magnitudeLabel.innerText = 'Величина:'
   const magnitudeSelect = document.createElement('select')
   const choices = [
-    { value: 'A', label: 'Анализ, качество' },
-    { value: 'B', label: 'Пламя, горение' },
-    { value: 'C', label: 'Дополнительная величина (C)' },
-    { value: 'D', label: 'Дополнительная величина (D)' },
-    { value: 'E', label: 'Напряжение' },
-    { value: 'F', label: 'Расход' },
-    { value: 'G', label: 'Дополнительная величина (G)' },
-    { value: 'H', label: 'Ручное воздействие' },
-    { value: 'I', label: 'Ток' },
-    { value: 'J', label: 'Мощность' },
-    { value: 'K', label: 'Время' },
-    { value: 'L', label: 'Уровень' },
-    { value: 'M', label: 'Дополнительная величина (N)' },
-    { value: 'N', label: 'Дополнительная величина (N))' },
-    { value: 'O', label: 'Дополнительная величина (O)' },
-    { value: 'P', label: 'Давление' },
-    { value: 'Q', label: 'Количество' },
-    { value: 'E', label: 'Радиоактивность' },
-    { value: 'S', label: 'Скорость, частота' },
-    { value: 'T', label: 'Температура' },
-    { value: 'U', label: 'Разнородные величины' },
-    { value: 'V', label: 'Вибрация' },
-    { value: 'W', label: 'Вес' },
-    {
-      value: 'X',
-      label: 'Дополнительная величина (нерекомендованная буква X)',
-    },
-    { value: 'Y', label: 'Событие' },
-    { value: 'Z', label: 'Размер' },
+    { value: 'A', label: 'A: Анализ, качество' },
+    { value: 'B', label: 'B: Пламя, горение' },
+    { value: 'C', label: 'C: Дополнительная величина (C)' },
+    { value: 'D', label: 'D: Дополнительная величина (D)' },
+    { value: 'E', label: 'E: Напряжение' },
+    { value: 'F', label: 'F: Расход' },
+    { value: 'G', label: 'G: Дополнительная величина (G)' },
+    { value: 'H', label: 'H: Ручное воздействие' },
+    { value: 'I', label: 'I: Ток' },
+    { value: 'J', label: 'J: Мощность' },
+    { value: 'K', label: 'K: Время' },
+    { value: 'L', label: 'L: Уровень' },
+    { value: 'M', label: 'M: Дополнительная величина (M)' },
+    { value: 'N', label: 'N: Дополнительная величина (N)' },
+    { value: 'O', label: 'O: Дополнительная величина (O)' },
+    { value: 'P', label: 'P: Давление' },
+    { value: 'Q', label: 'Q: Количество' },
+    { value: 'E', label: 'R: Радиоактивность' },
+    { value: 'S', label: 'S: Скорость, частота' },
+    { value: 'T', label: 'T: Температура' },
+    { value: 'U', label: 'U: Разнородные величины' },
+    { value: 'V', label: 'V: Вибрация' },
+    { value: 'W', label: 'W: Вес' },
+    { value: 'X', label: 'X: Нерекомендованная буква' },
+    { value: 'Y', label: 'Y: Событие' },
+    { value: 'Z', label: 'Z: Размер' },
   ]
   choices.forEach((element) => {
     const opt = document.createElement('option')

src/modules/ShapeRendererModule.ts

@@ -22,7 +22,8 @@ class CustomShapeRenderer extends BaseRenderer {
     this.SHAPE_STYLE = styles.style({
       fill: 'Canvas',
       stroke: 'CanvasText',
-      strokeWidth: 2,
+      'font-size': 10,
+      'font-family': 'Arial',
     })
   }
 
@@ -47,32 +48,17 @@ class CustomShapeRenderer extends BaseRenderer {
 }
 
 function drawMechanism(shape: Shape): SVGGElement {
+  const pw = shape.width / 2
+  const ph = shape.height / 2
   var circle = svgCreate('circle')
 
-  svgAttr(circle, {
-    cx: `${shape.width / 2}`,
-    cy: `${shape.height / 2 - 52}`,
-    r: '2.5mm',
-    fill: 'none',
-    stroke: 'CanvasText',
-  })
+  svgAttr(circle, { cx: pw, cy: ph - 52, r: '2.5mm', fill: 'none', })
 
   var line = svgCreate('line')
-  svgAttr(line, {
-    x1: shape.width / 2,
-    x2: shape.width / 2,
-    y1: shape.height / 2,
-    y2: shape.height / 2 - 40 - 2,
-    stroke: 'CanvasText',
-  })
+  svgAttr(line, { x1: pw, x2: pw, y1: ph, y2: ph - 40 - 2 })
 
   var text = svgCreate('text')
-  svgAttr(text, {
-    x: shape.width / 2 - 4,
-    y: shape.height / 2 - 40 - 10,
-    'font-size': 10,
-    'font-family': 'Arial',
-  })
+  svgAttr(text, { x: pw - 4, y: ph - 40 - 10 })
   text.innerHTML = 'M'
 
   var g = svgCreate('g')
@@ -90,63 +76,28 @@ function drawText(x: any): string {
 }
 
 function drawInstrument(shape: Shape): SVGGElement {
+  const pw = shape.width / 2
+  const ph = shape.height / 2
   var g = svgCreate('g')
   if (!shape.obj.являетсяПАЗ) {
-    const circle = svgCreate('circle', {
-      cx: shape.width / 2,
-      cy: shape.height / 2,
-      r: '5mm',
-      stroke: 'CanvasText',
-      fill: 'Canvas',
-    })
+    const circle = svgCreate('circle', { cx: pw, cy: ph,  r: '5mm' })
     svgAppend(g, circle)
   } else {
     function diamond(w: number, h: number, x: number, y: number) {
       return svgCreate('polygon', {
-        points: `${x + w / 2}, ${y - h / 2}, ${x + w + w / 2}, ${y + h / 2}, ${x + w / 2}, ${y + h + h / 2}, ${x - w / 2}, ${y + h / 2}`,
-        stroke: 'CanvasText',
-        fill: 'Canvas',
+        points: `${x + pw}, ${y - ph}, ${x + w + pw}, ${y + ph}, ${x + pw}, ${y + h + ph}, ${x - pw}, ${y + ph}`,
       })
     }
 
     svgAppend(g, diamond(shape.width, shape.height, 0, 0))
-    svgAppend(
-      g,
-      svgCreate('rect', {
-        x: 0,
-        y: 0,
-        width: shape.width,
-        height: shape.height,
-        stroke: 'CanvasText',
-        fill: 'Canvas',
-      })
-    )
-
-    console.log(g)
+    svgAppend(g, svgCreate('rect', {x: 0, y: 0, width: shape.width, height: shape.height }))
   }
   if (shape.obj.фиксация == 'НаЩите') {
-    svgAppend(
-      g,
-      svgCreate('line', {
-        x1: shape.width / 2 - 20,
-        y1: shape.height / 2,
-        x2: shape.width / 2 + 20,
-        y2: shape.height / 2,
-        stroke: 'CanvasText',
-        fill: 'Canvas',
-      })
-    )
+    svgAppend(g, svgCreate('line', { x1: pw - 20, y1: ph, x2: pw + 20, y2: ph }))
   }
-  const label = svgCreate('text', {
-    x: shape.width / 2,
-    y: shape.height / 2 - 10,
-    'font-size': 10,
-    'font-family': 'Arial',
-    'text-anchor': 'middle',
-    'dominant-baseline': 'middle',
-  })
+  const label = svgCreate('text',
+    { x: pw, y: ph - 10, 'text-anchor': 'middle', 'dominant-baseline': 'middle' })
   label.innerHTML = drawText(shape.obj)
-  console.log(label.innerHTML)
   svgAppend(g, label)
 
   return g