Tips for repositioning mxgraph edges when adjusting vertices to maintain a natural appearance in the graph?

I am currently working on a project that requires allowing users to rearrange a graph and automatically readjust the edges when vertices are moved. However, I have been facing difficulties in implementing this feature smoothly.

Here is what I have accomplished so far:

Graph with oddly adjusted edges:

My goal is to achieve this:

Graph with neatly adjusted edges:

The XML code for the second diagram is as follows:

    
<mxGraphModel dx="774" dy="824" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100">
      <root>
        ...

Unfortunately, translating this into TS code has been challenging for me :-(

Since I am using Angular with TypeScript, creating a Plunker example to assist may be complex. However, I have a component that initializes the graph like this:

   
declare var require: any;

const mx = require('mxgraph')({
  mxImageBasePath: 'assets/mxgraph/images',
  mxBasePath: 'assets/mxgraph',
});

 const container = document.getElementById('graphContainer');
 this.graph = new mx.mxGraph(container);
...

As I continue to work on it, the result resembles the first picture above (Graph with oddly adjusted edges).

If you can help me achieve the desired output shown in the second image (Graph with neatly adjusted edges), please let me know.

Edit 1: Despite attempting to apply the same style present in the XML file to my code, the edges do not rearrange as expected. Here is an example of what I have tried:

  
graph.insertEdge(
    parent,
    `${getId()}`,
    '',
    source,
    target, 
    'edgeStyle=orthogonalEdgeStyle;...'
);

This resulted in: https://i.sstatic.net/BoXFd.png

Edit 2:

While my code did not yield the desired outcome, a similar implementation on this CodePen worked properly: CodePen Example

At this point, I suspect that the layout class being invoked may be altering the edge styles and causing the issue. Is there a layout class available that preserves the edge styles?

angulartypescriptedgesverticesmxgraph

Answer №1

Hey @PauloRodrigues, interesting point you've raised!

Simply use the insertEdge function with the following parameter for styling: 

edgeStyle=orthogonalEdgeStyle;orthogonalLoop=1;jettySize=auto;html=1;startArrow=classic;startFill=1;targetPerimeterSpacing=8;sourcePerimeterSpacing=8;strokeColor=#aaaaaa;strokeWidth=2;curved=1;

Invoke 

insertEdge(parent,id,value,source,target, yourStyle)

You can do it like this: 

graph.insertEdge(parent, null, '', mxCell, mxCell,'edgeStyle=orthogonalEdgeStyle;orthogonalLoop=1;jettySize=auto;html=1;startArrow=classic;startFill=1;targetPerimeterSpacing=8;sourcePerimeterSpacing=8;strokeColor=#aaaaaa;strokeWidth=2;curved=1;');

Answer №2

It's important to understand that customizing edges in paintEdgeShape allows you to control how the edge is rendered. Using the canvas API, you can define the drawing process. Take a look at this helpful example.

If you're dealing with long paths, I suggest creating a function that calculates and draws the closest path between points.

NewShape.prototype.paintEdgeShape = function(c, pts)
{
    // Here you can calculate the nearest path and draw it
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I must determine whether to display an angular component based on the user's selection

To display the aprs-attachments only when the 'PCCL (Production)' environment is selected in the hostSection/environments, you need to modify your code. Below is the current setup of the code. You need to specify the *ngif statement to show the a ...

angular

Having trouble with errors when adding onClick prop conditionally in React and TypeScript

I need to dynamically add an onClick function to my TypeScript React component conditionally: <div onClick={(!disabled && onClick) ?? undefined}>{children}</div> However, I encounter the following error message: Type 'false | (() ...

javascriptreactjstypescript

Struggling to identify the error while utilizing Jasmine's throwError function

I am relatively new to using Jasmine and have been experimenting with the toThrowError() function. However, I can't seem to get my test to pass successfully. In one of my functions, I purposely throw an error: test.service.ts test(list:{}){ if ...

angulartypescriptjasmine

Combining NgRx Store subscriptions using forkJoin

In my code, I have an array of multiple store subscriptions that I want to combine using forkJoin to wait for all observables to return a result before proceeding. Here's an example: this.subscriptionsArray = this.store.select('state') fork ...

angularobservablengrx

Encountering a Typescript error when defining a curried function after an uncurried function

Upon placing the uncurried definition of a method above the curried definition, I encountered an error stating: Expected 1 arguments, but got 2.ts(2554). The dtslint test that failed reads as follows: function match(regExpression: RegExp, str: string): st ...

typescriptdefinitelytyped

Poorly packaged library - Custom Angular library - Node Package Manager

Recently, I've been delving into the process of publishing a simple Angular library on NPM. Despite following various tutorials (like those found here, here, and here), I faced difficulties when attempting to use it in a test project. MY JOURNEY In s ...

angulartypescriptnpmangular-library

The link function fails to execute

I have created a custom Directive. The issue I am facing is that the html template is not being rendered. Upon debugging, I noticed that the link function is never called because the instance function is also never called. To troubleshoot, I added "debu ...

javascriptangularjstypescript

What is the best way to find the beginning and end of the week using Moment.js?

Is there a way to retrieve the date of the first day of the week and the date of the last day of the week using Moment.js? I am looking to fetch the dates from the start of the week until the end of the current week based on the current day in Moment.js. ...

angulartypescriptmomentjs

An error message stating 'Cannot read the name property of undefined' is being displayed, despite it being expected to be defined

interface InputField { readonly label : string; readonly data : string; readonly displayInline ?: boolean; } class FormField implements InputField { readonly label : string; readonly data : string; readonly displayInline ?: boolean; constru ...

typescript

Using a static enum in a different class in TypeScript: A guide

After referencing this question and answer on Stack Overflow about setting a static enum inside a TypeScript class, I decided to create my own enum and implement it as a static property in my class. Here is how I did it: /* Input.ts */ enum INPUT_TYPE { T ...

typescript

How do I create a standalone .ts file with Angular 9?

Just diving into Angular development and eager to create a standalone .ts file without having to generate an entire component. Can anyone guide me on how to achieve this using ng generate? Scenario: During the application build process, I need to write th ...

angulartypescriptangular9ng-generate

Utilizing the Angular *ngFor directive to iterate through JSON data

Just stepping into the world of Angular, I want to share a brief overview of my goal since the code is lengthy. Here's the relevant part: Within my project, I have a list display component. And I have two components, namely animals and zone. For in ...

javascriptjsonangulartypescriptbehaviorsubject

Optimal method for consecutively making N number of API calls in Angular 9 in a synchronous manner

Having a service method for API calls structured as follows: getUsers(id){ return this.http.get(`${env.apiURL}/id`) } Now, the requirement is to call this method for a list of users stored in an array: userId=[1,2,3,4,5,6,7,8,9] The goal is to retrieve ...

angulartypescripthttppromiserxjs

How can ngx-modals detect when the modals have been closed?

I have integrated ngx-modals into my project and I am looking to add a boolean value to it. When the modals open, I want to set this boolean to "true", and when they close, I need it to be set to "false". Regardless of whether the modal is closed using the ...

angulartypescriptmodal-dialogngx-bootstrap

Angular component fails to render when passed as a string in the innerHtml attribute

One interesting challenge I faced is working with an API that returns HTML containing Angular components which are not being displayed in the application. I am trying to figure out how to display an Angular component stored as a string within the HTML con ...

angularangular-ivy

When attempting to specify the path in the angular.json file, Angular encounters difficulty accessing Bootstrap from the node_modules directory

I have been attempting to integrate Bootstrap into my Angular project. Firstly, I used npm install --save bootstrap to add Bootstrap to my project. Following that, I installed jQuery as well. I then specified the path for Bootstrap. Displayed below is an ...

cssangulartypescriptnpmangular-bootstrap

Angular 2 problem: unable to find typings command

Sorry to bother with a seemingly basic question, but I've been struggling for days without finding a solution. The issue arises when I try to install typings through npm in the command line. The installation runs smoothly, but when I attempt to use a ...

angularjsnode.jsnpmangulartypescript-typings

Steps for converting a tsx file into a js file in React

Currently, I am in the process of a React Project and have numerous tsx files that I aim to convert for utilization as JavaScript within my project. What would be the best approach to achieve this task? ...

javascriptreactjstypescript

What is the method to empty input fields after data has been submitted in an Angular application?

    I'm facing a challenge with my web form. I have a dropdown menu using mat-select and an input field. When I click the submit button, the data is sent. However, I want the input field to clear after submission without affecting the mat-select dr ...

htmlangular

Unable to load component "/" in Angular 2 Rc.1 router

I've been trying to implement the new router from the rc.0 update (actually using rc.1), but I'm running into an issue with the outlet not loading the "Welcome" component. Below is the code in app.component.ts import { Component } from '@a ...

angularjsangularrouter