gregorbednov/diagram-gost
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactoring

Browse source
This commit is contained in:
Gregory Bednov 2025-01-14 16:14:56 +03:00
commit f2a72d5155
8 changed files with 52 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/App.svelte
View file

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

21
src/CustomPaletteModule.ts
View file

@ -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);
}
}
}

29
src/Diagram.svelte
View file

@ -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,

50
src/ManhattanConnectionModule.ts
View file

@ -1,42 +1,46 @@
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) {
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 });
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);
const hasChanged = JSON.stringify(connection.waypoints) != JSON.stringify(waypoints);
if (hasChanged) {
modeling.updateWaypoints(connection, waypoints)
}
}
if (hasChanged) {
modeling.updateWaypoints(connection, waypoints)
}
}
}
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);
});
}

55
src/customConnectionModule.ts
View file

@ -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;

4
src/editor.ts
View file

@ -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

1
src/main.ts
View file

@ -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')!,
})

4
src/style.css
View file

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