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: 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) => { var 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 ] };