refactoring

src/App.svelte

@@ -1,5 +1,5 @@
 <script>
-  import Diagram from './Diagram.svelte'; // Подключаем компонент с diagram-js
+  import Diagram from './Diagram.svelte';
 </script>
 
 <main>

src/CustomPaletteModule.ts

@@ -1,4 +1,14 @@
-function PalettePlugin(palette, lassoTool, create, elementFactory, globalConnect) {
+import ElementFactory from "diagram-js/lib/core/ElementFactory";
+import Palette from "diagram-js/lib/features/palette/Palette";
+import LassoTool from "diagram-js/lib/features/lasso-tool/LassoTool";
+import Create from "diagram-js/lib/features/create/Create";
+import GlobalConnect from "diagram-js/lib/features/global-connect/GlobalConnect";
+
+function PalettePlugin (create: Create,
+                        elementFactory:ElementFactory,
+                        globalConnect: GlobalConnect,
+                        lassoTool: LassoTool,
+                        palette: Palette) {
     palette.registerProvider({
         getPaletteEntries: () => ({
           'hand-tool': {
@@ -6,7 +16,7 @@ function PalettePlugin(palette, lassoTool, create, elementFactory, globalConnect
             className: 'icon-hand-tool',
             title: 'Hand Tool',
             action: {
-              click: function(event) {
+              click: function() {
                 console.log("Hello");
               }
             }
@@ -17,13 +27,14 @@ function PalettePlugin(palette, lassoTool, create, elementFactory, globalConnect
             title: 'Lasso Tool',
             action: {
               click: function(event) {
-                lassoTool.activateSelection(event);
+                lassoTool.activateSelection(event as MouseEvent);
               }
             }
           },
           'tool-separator': {
             group: 'tools',
-            separator: true
+            separator: true,
+            action: {}
           },
           'create-shape': {
             group: 'create',
@@ -47,7 +58,7 @@ function PalettePlugin(palette, lassoTool, create, elementFactory, globalConnect
             title: 'Create Connection',
             action: {
               click: (event) => {
-                globalConnect.start(event);
+                globalConnect.start(event, false);
               }
             }
           }

src/Diagram.svelte

@@ -1,37 +1,18 @@
 <script lang="ts">
 import { connectPoints } from 'diagram-js/lib/layout/ManhattanLayout';
   import { onMount } from "svelte";
-  import Diagram from "diagram-js";
   import Canvas from "diagram-js/lib/core/Canvas";
-  import LassoTool from "diagram-js/lib/features/lasso-tool"
+  import ElementFactory from 'diagram-js/lib/core/ElementFactory';
   import Editor from './editor.ts'
   import 'diagram-js/assets/diagram-js.css';
 
   let container: HTMLDivElement | null = null;
 
-  function createAction(type, group, className, title, options) {
-
-    function createListener(event) {
-      var shape = elementFactory.createShape(assign({ type: type }, options));
-      create.start(event, shape);
-    }
-
-    return {
-      group: group,
-      className: className,
-      title: title,
-      action: {
-        dragstart: createListener,
-        click: createListener
-      }
-    };
-  }
-
   onMount(() => {
     if (container === null) return;
-    const diagram = new Editor({ container });
+    const diagram = Editor({ container });
     const canvas = diagram.get<Canvas>("canvas");
-    const elementFactory = diagram.get('elementFactory');
+    const elementFactory = diagram.get<ElementFactory>('elementFactory');
     var root = elementFactory.createRoot();
 
 
@@ -74,8 +55,8 @@ import { connectPoints } from 'diagram-js/lib/layout/ManhattanLayout';
     canvas.addShape(shape4, root);
 
     const manhattanLayout = connectPoints(
-    { x: shape1.x + shape1.width / 2, y: shape1.y + shape1.height / 2 }, // Начальная точка
-    { x: shape2.x + shape2.width / 2, y: shape2.y + shape2.height / 2 } // Конечная точка
+    { x: shape1.x + shape1.width / 2, y: shape1.y + shape1.height / 2 },
+    { x: shape2.x + shape2.width / 2, y: shape2.y + shape2.height / 2 }
     );
     var connection1 = elementFactory.createConnection({
       waypoints: manhattanLayout,

src/ManhattanConnectionModule.ts

@@ -1,7 +1,10 @@
 
 import { connectPoints } from 'diagram-js/lib/layout/ManhattanLayout';
+import Modeling from 'diagram-js/lib/features/modeling/Modeling';
+import EventBus from 'diagram-js/lib/core/EventBus';
+import { Connection } from 'diagram-js/lib/model/Types';
 
-export function updateWaypointsByManhattan (connection, modeling) {
+export function updateWaypointsByManhattan (connection: Connection, modeling: Modeling ): void {
   if (connection.source && connection.target) {
       const x0 = connection.source.x + connection.source.width / 2;
       const x1 = connection.target.x + connection.target.width / 2;
@@ -21,22 +24,23 @@ export function updateWaypointsByManhattan (connection, modeling) {
   }
 }
 
-function ManhattanLayoutPlugin(eventBus, modeling) {
+function ManhattanLayoutPlugin(eventBus: EventBus, modeling: Modeling) {
     eventBus.on('connection.added', (event) => {
-    var connection = event.element;
+    var connection = (event as any).element;
     updateWaypointsByManhattan(connection, modeling);
     });
 
     eventBus.on("shape.move.end", (event) => {
-        console.log(event.shape);
-        if (event.shape.incoming) {
-          event.shape.incoming.forEach(element => {
+        var shape = (event as any).shape;
+        console.log((event as any).shape);
+        if (shape.incoming) {
+          shape.incoming.forEach((element: Connection) => {
             updateWaypointsByManhattan(element, modeling);
           });
         }
   
-        if (event.shape.outgoing) {
-          event.shape.outgoing.forEach(element => {
+        if (shape.outgoing) {
+          shape.outgoing.forEach((element: Connection) => {
             updateWaypointsByManhattan(element, modeling);
           });
         }

src/customConnectionModule.ts

@@ -1,55 +0,0 @@
-const CustomConnectionModule = {
-  __init__: [
-    [
-      'eventBus',
-      'modeling',
-      function (eventBus: any, modeling: any) {
-        console.log('CustomConnectionModule initialized');
-
-        // Регистрируем обработчик событий
-
-        eventBus.on('connection.changed', (event: any) => {
-          const connection = event.element;
-
-          if (connection.source && connection.target) {
-            const waypoints = calculateWaypoints(connection);
-
-            // Проверяем изменения
-            if (JSON.stringify(connection.waypoints) != JSON.stringify(waypoints)) {
-              modeling.updateWaypoints(connection, waypoints);
-              console.log('Waypoints updated', waypoints);
-            }
-          }
-        });
-      }
-    ]
-  ]
-};
-
-/**
- * Функция для вычисления новых точек маршрута соединений.
- */
-function calculateWaypoints(connection: any): { x: number; y: number }[] {
-  const x0 = connection.source.x + connection.source.width / 2;
-  const y0 = connection.source.y + connection.source.height / 2;
-
-  const x1 = connection.target.x + connection.target.width / 2;
-  const y1 = connection.target.y + connection.target.height / 2;
-
-  const x2 = Math.abs(x0 - x1) < 5 ? x0 : x1;
-  const y2 = Math.abs(y0 - y1) < 5 ? y0 : y1;
-
-  return connectPoints({ x: x0, y: y0 }, { x: x2, y: y2 });
-}
-
-/**
- * Функция для соединения двух точек.
- */
-function connectPoints(
-  start: { x: number; y: number },
-  end: { x: number; y: number }
-): { x: number; y: number }[] {
-  return [start, end];
-}
-
-export default CustomConnectionModule;

src/editor.ts

@@ -10,12 +10,10 @@ import OutlineModule from 'diagram-js/lib/features/outline';
 import PaletteModule from 'diagram-js/lib/features/palette';
 import ResizeModule from 'diagram-js/lib/features/resize';
 import RulesModule from 'diagram-js/lib/features/rules';
-import AlignElementsModule from 'diagram-js/lib/features/align-elements';
 import SelectionModule from 'diagram-js/lib/features/selection';
 import GlobalConnectModule from 'diagram-js/lib/features/global-connect';
 import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
 import BendpointMoveModule from 'diagram-js/lib/features/bendpoints';
-import CustomConnectionModule from './CustomConnectionModule';
 import StyleModule from './StyleModule.ts';
 import ManhattanConnectionModule from './ManhattanConnectionModule.ts';
 import CustomPaletteModule from './CustomPaletteModule.ts';
@@ -26,7 +24,7 @@ interface EditorOptions {
 }
 
 export default function Editor(options: EditorOptions): Diagram {
-  const { container, additionalModules = [] } = options;
+  const { container } = options;
 
   const modules = [
       BendpointMoveModule

src/main.ts

@@ -7,7 +7,6 @@ if (!target) {
   throw new Error("Target element with ID 'app' not found in DOM.");
 }
 
-// Создаём экземпляр приложения
 const app = mount(App, {
   target: document.getElementById('app')!,
 })

src/style.css

@@ -1,6 +1,6 @@
 :root {
-  color: CanvasText; /* Цвет текста по умолчанию */
-  background-color: Canvas; /* Фоновый цвет, адаптируемый системой */
+  color: CanvasText;
+  background-color: Canvas;
 }
 
 button {