modified: src/AddObjectForm.svelte

modified:   src/CustomShapeRendererModule.ts
	modified:   src/Diagram.svelte

src/AddObjectForm.svelte

@@ -38,7 +38,7 @@ const функцииПоТипу = {
       'ZДополнительный']};
 
 function addFunction() {
-  функции = [...функции, { тип: 'ВыполняемаяФункция', значение: 'Регистрация' }];
+  функции = [...функции, { тип: 'ВыполняемаяФункция', значение: 'Регистрация' }]
 }
 
 function removeFunction(index: number) {
@@ -47,7 +47,7 @@ function removeFunction(index: number) {
 
 let являетсяПаз = false;
 let ручной = false;
-let направление: 'Открывается' | 'Закрывается' | 'ОстаётсяНаМесте' | null = null;
+let направление: 'Открывается' | 'Закрывается' | 'ОстаётсяНаМесте' | null = null
 
 function handleSubmit() {
     const data =
@@ -74,10 +74,10 @@ function handleSubmit() {
             }
           };
 
-    console.log(величина);
+    console.log(to_svg(0,0));
 }
 
-function to_svg(x, y) {
+export function to_svg(x, y):SVGElement {
   const r = svgCreate('g');
   if (типОбъекта === 'ИсполнительныйМеханизм') {
     var circle = svgCreate('circle',
@@ -89,18 +89,34 @@ function to_svg(x, y) {
       stroke: "CanvasText",
     });
 
-    var line = svgCreate('line',
-    {
+    var lineAttrs: {
+      x1: any;
+      x2: any;
+      y1: any;
+      y2: number;
+      stroke: string;
+      "marker-start"?: string;
+      "marker-end"?: string;
+    } = {
       x1: x,
       x2: x,
       y1: y,
       y2: y - 42,
       stroke: "CanvasText",
-    })
+    }
 
-    svgAppend(r, circle);
-    svgAppend(r, line); // здесь НЕОБХОДИМО добавить стрелки в разных направлениях TODO
-    return r;
+    if (направление == "Открывается" || направление == "ОстаётсяНаМесте") {
+      lineAttrs["marker-start"] = "url(#arrow)"
+    }
+
+    if (направление == "Закрывается" || направление == "ОстаётсяНаМесте") {
+      lineAttrs["marker-end"] = "url(#arrow)"
+    }
+
+    const line = svgCreate("line", lineAttrs);
+    svgAppend(r, circle)
+    svgAppend(r, line)
+    return r
   }
   
   if (являетсяПаз) {

src/CustomShapeRendererModule.ts

@@ -7,7 +7,7 @@ import {
   attr as svgAttr,
   create as svgCreate
 } from 'tiny-svg';
-
+import to_svg from "./AddObjectForm.svelte"
 
 
 
@@ -29,35 +29,38 @@ class CustomShapeRenderer extends BaseRenderer {
 
 
   drawShape(visuals, element, attrs): SVGElement {
-    var circle = svgCreate('circle');
+    // var circle = svgCreate('circle');
 
-    svgAttr(circle, {
-      cx: `${element.width / 2}`,
-      cy: `${element.height / 2 - 52}`,
-      r: '2.5mm',
-      fill: "none",
-      stroke: "CanvasText",
-    });
+    // svgAttr(circle, {
+    //   cx: `${element.width / 2}`,
+    //   cy: `${element.height / 2 - 52}`,
+    //   r: '2.5mm',
+    //   fill: "none",
+    //   stroke: "CanvasText",
+    // });
 
-    var line = svgCreate('line');
-    svgAttr(line, {
-      x1: element.width / 2,
-      x2: element.width / 2,
-      y1: element.height/2,
-      y2: element.height/2 - 40 - 2,
-      stroke: "CanvasText",
+    // var line = svgCreate('line');
+    // svgAttr(line, {
+    //   x1: element.width / 2,
+    //   x2: element.width / 2,
+    //   y1: element.height/2,
+    //   y2: element.height/2 - 40 - 2,
+    //   stroke: "CanvasText",
       
-    })
+    // })
 
-    var g = svgCreate('g');
-    svgAppend(g, circle);
-    svgAppend(g, line);
+    // var g = svgCreate('g');
+    // svgAppend(g, circle);
+    // svgAppend(g, line);
 
-    svgAttr(g, assign({}, this.SHAPE_STYLE, attrs || {}));
-    svgAppend(visuals, g);
-    console.log(visuals);
+    // svgAttr(g, assign({}, this.SHAPE_STYLE, attrs || {}));
+    // svgAppend(visuals, g);
 
-  return g;
+    return to_svg(element.x, element.y);
+
+    //console.log(visuals);
+
+//  return g;
   }
 }
 

src/Diagram.svelte

@@ -17,6 +17,22 @@
   });
 </script>
 
+<svg>
+  <defs>
+    <marker
+    id="arrow"
+    refX="9"
+    refY="5"
+    fill="CanvasText"
+    markerHeight="6"
+    markerWidth="6"
+    orient="auto-start-reverse"
+    viewBox="0 0 297 210">
+      <path d="M 0 0 L 10 5 L 0 10 z"></path>
+    </marker>
+  </defs>
+</svg>
+
 <style>
   .container {
     width: 297mm;