massive refactoring, Svelte removing

src/modules/GlobalConnectRulesModule.ts

@@ -0,0 +1,35 @@
+import RuleProvider from 'diagram-js/lib/features/rules/RuleProvider';
+
+class CustomGlobalConnectRules extends RuleProvider {
+  static $inject = ['eventBus'];
+
+  constructor(eventBus: any) {
+    super(eventBus);
+  }
+
+  init(): void {
+    this.addRule('connection.start', (context) => {
+      return true;
+      const { source } = context;
+
+      if (source?.businessObject?.type === 'custom:connectable') {
+        return true; // Разрешить соединение
+      }
+
+      return false; // Запретить соединение
+    });
+
+    // Правило для создания соединения
+    this.addRule('connection.create', (context) => {
+    //  const { source, target } = context;
+        return { type: 'Connection' };
+      return false; // Запретить соединение
+    });
+  }
+}
+
+
+export default {
+  __init__: ['customGlobalConnectRules'],
+  customGlobalConnectRules: ['type', CustomGlobalConnectRules]
+};

src/modules/ManhattanConnectionModule.ts

@@ -0,0 +1,54 @@
+
+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 type { Connection } from 'diagram-js/lib/model/Types';
+
+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;
+      const y0 = connection.source.y + connection.source.height / 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;
+      const waypoints = connectPoints(
+          { x: x0, y: y0 },
+          { x: x2, y: y2 });
+
+      const hasChanged = JSON.stringify(connection.waypoints) != JSON.stringify(waypoints);
+      if (hasChanged) {
+          modeling.updateWaypoints(connection, waypoints)
+      }
+  }
+}
+
+function ManhattanLayoutPlugin(eventBus: EventBus, modeling: Modeling) {
+  eventBus.on('commandStack.connection.create.executed', (event) => {
+    var connection = (event as any).element;
+    if (connection) {
+      updateWaypointsByManhattan(connection, modeling);
+    }
+  });
+
+
+  eventBus.on('shape.move.end', (event) => {
+      const shape = (event as any).shape;
+      if (shape.incoming) {
+        shape.incoming.forEach((element: Connection) => {
+          updateWaypointsByManhattan(element, modeling);
+        });
+      }
+  
+      if (shape.outgoing) {
+        shape.outgoing.forEach((element: Connection) => {
+          updateWaypointsByManhattan(element, modeling);
+        });
+      }
+  });
+}
+
+export default {
+   __init__: [ 'manhattanLayoutPlugin' ],
+     manhattanLayoutPlugin: [ 'type', ManhattanLayoutPlugin ]
+};

src/modules/OutlineModule.ts

@@ -0,0 +1,60 @@
+import { Element } from 'diagram-js/lib/model/Types';
+import { Outline } from 'diagram-js/lib/features/outline/OutlineProvider';
+
+import {
+  attr as svgAttr,
+  create as svgCreate} from 'tiny-svg';
+
+import Styles from 'diagram-js/lib/draw/Styles';
+
+function CustomOutlineProvider(this: any, outline:Outline, styles:Styles) {
+  this._styles = styles;
+  outline.registerProvider(this);
+}
+
+CustomOutlineProvider.$inject = [
+  'outline',
+  'styles'
+];
+
+CustomOutlineProvider.prototype.getOutline = function(element:Element) {
+  if (element.type === 'custom:circle') {
+    const outline = svgCreate('circle');
+
+    svgAttr(outline , {
+      x: `${element.x}`,
+      y: `${element.y}`,
+      cx: element.width / 2,
+      cy: element.height / 2,
+      r: 60, 
+      fill: "none",
+    });
+    return outline;
+  }
+}
+
+CustomOutlineProvider.prototype.updateOutline = function(element: Element, outline: Outline) {
+  if (element.type === 'custom:circle') {
+    outline = svgCreate('rect');
+
+    svgAttr(outline , {
+      x: `${element.x}`,
+      y: `${element.y}`,
+      cx: element.width / 2,
+      cy: element.height / 2,
+      r: 60, 
+      fill: "none",
+    });
+  }
+
+  return false;
+}
+
+import Ouline from 'diagram-js/lib/features/outline'; // idk why it's called such way
+
+
+export default {
+  __init__: ['outlineProvider'],
+  __depends__: [ Ouline ],
+  outlineProvider: ['type', CustomOutlineProvider]
+}

src/modules/PaletteModule.ts

@@ -0,0 +1,21 @@
+import PaletteModule from 'diagram-js/lib/features/palette'
+import CreateModule from 'diagram-js/lib/features/create'
+import LassoToolModule from 'diagram-js/lib/features/lasso-tool'
+import HandToolModule from 'diagram-js/lib/features/hand-tool'
+import GlobalConnectModule from 'diagram-js/lib/features/global-connect'
+import translate from 'diagram-js/lib/i18n/translate'
+
+import PaletteProvider from './PaletteProvider'
+
+export default {
+  __depends__: [
+    PaletteModule,
+    CreateModule,
+    LassoToolModule,
+    HandToolModule,
+    GlobalConnectModule,
+    translate
+  ],
+  __init__: [ 'paletteProvider' ],
+  paletteProvider: [ 'type', PaletteProvider ]
+};

src/modules/PaletteProvider.ts

@@ -0,0 +1,120 @@
+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";
+import Translate from "diagram-js/lib/i18n/translate/Translate";
+import HandTool from "diagram-js/lib/features/hand-tool/HandTool";
+import { assign } from "min-dash";
+
+export default function PaletteProvider(
+  this: any,  
+  palette: Palette, 
+  create: Create, 
+  elementFactory: ElementFactory,
+  lassoTool: LassoTool, 
+  handTool:HandTool,
+  globalConnect:GlobalConnect, 
+  translate:typeof Translate) {
+  this._palette = palette;
+  this._create = create;
+  this._elementFactory = elementFactory;
+  this._lassoTool = lassoTool;
+  this._handTool = handTool;
+  this._globalConnect = globalConnect;
+  this._translate = translate;
+  palette.registerProvider(this);
+}
+
+PaletteProvider.$inject = [
+  'palette',
+  'create',
+  'elementFactory',
+  'lassoTool',
+  'handTool',
+  'globalConnect',
+  'translate'
+]
+
+PaletteProvider.prototype.getPaletteEntries = function() {
+
+  var actions = {},
+      create = this._create,
+      elementFactory = this._elementFactory,
+      lassoTool = this._lassoTool,
+      handTool = this._handTool,
+      globalConnect = this._globalConnect,
+      translate = this._translate;
+
+  assign(actions, {
+    'hand-tool': {
+      group: 'tools',
+      className: 'icon-hand-tool',
+      title: translate('Activate hand tool'),
+      action: {
+        click: function(event: Event) {
+          handTool.activateHand(event);
+        }
+      }
+    },
+    'lasso-tool': {
+      group: 'tools',
+      className: 'icon-lasso-tool',
+      title: translate('Activate lasso tool'),
+      action: {
+        click: function(event: Event) {
+          lassoTool.activateSelection(event);
+        }
+      }
+    },
+    'global-connect-tool': {
+      group: 'tools',
+      className: 'icon-connect',
+      title: translate('Activate global connect tool'),
+      action: {
+        click: function(event: Event) {
+          globalConnect.start(event);
+        }
+      }
+    },
+    'tool-separator': {
+      group: 'tools',
+      separator: true
+    },
+    'create-shape': {
+      group: 'create',
+      className: 'icon-create-shape',
+      title: 'Create Shape',
+      action: {
+        click: function() {
+          var shape = elementFactory.createShape({
+            width: 100,
+            height: 80,
+            canStartConnection:true
+          });
+          console.log(shape.canStartConnection);
+          create.start(event, shape);
+        }
+      }
+    },
+    'create-device': {
+      group: 'create',
+      className: 'icon-create-shape',
+      title: 'Create Device',
+      action: {
+        click: function() {
+          var shape = elementFactory.createShape({
+            width: 100,
+            height: 80,
+            canStartConnection:true,
+            type: 'custom:circle'
+          });
+          console.log(shape.canStartConnection);
+          create.start(event, shape);
+        }
+      }
+    },
+  });
+
+  return actions;
+};

src/modules/ShapeRendererModule.ts

@@ -0,0 +1,61 @@
+import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer'
+import { assign } from 'min-dash'
+import {
+  append as svgAppend,
+  attr as svgAttr,
+  create as svgCreate
+} from 'tiny-svg'
+
+const HIGH_PRIORITY = 1500;
+
+class CustomShapeRenderer extends BaseRenderer {
+   styles: any
+   SHAPE_STYLE: any
+  
+  static $inject = ['eventBus', 'styles']
+
+  constructor(eventBus: any, styles: any) {
+    super(eventBus, HIGH_PRIORITY)
+    this.styles = styles
+    this.SHAPE_STYLE = styles.style({ fill: 'Canvas', stroke: 'CanvasText', strokeWidth: 2 })
+  }
+
+  canRender(element: any): boolean {
+    return element.type === 'custom:circle';
+  }
+
+  drawShape(visuals: Element, element: { width: number; height: number; }) : SVGElement {
+    var circle = svgCreate('circle');
+
+    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 g = svgCreate('g');
+    svgAppend(g, circle);
+    svgAppend(g, line);
+    svgAttr(g, assign({}, this.SHAPE_STYLE));
+    svgAppend(visuals, g);
+
+    return g;
+  }
+}
+
+export default {
+  __init__: ['customShapeRenderer'],
+  customShapeRenderer: ['type', CustomShapeRenderer]
+};

src/modules/StyleModule.ts

@@ -0,0 +1,11 @@
+export default {
+  __init__: [ 'customRenderer' ],
+  customRenderer: [
+    'type',
+    function (defaultRenderer: any) {
+      defaultRenderer.CONNECTION_STYLE = { fill: 'none', strokeWidth: 5, stroke: 'CanvasText' };
+      defaultRenderer.SHAPE_STYLE = { fill: 'Canvas', stroke: 'CanvasText', strokeWidth: 2 };
+      defaultRenderer.FRAME_STYLE = { fill: 'none', stroke: 'CanvasText', strokeDasharray: 4, strokeWidth: 2 };
+    }
+  ]
+};