Selecting a GoJS Node using keys

In Angular with TypeScript, what is the best way to select a node from a diagram based on its key?

Currently, I am required to left-click a newly created node in order to select it, but I would like for it to be automatically selected upon creation.

I have been attempting to use a function to select a node with a specific key ("1"), however, my current approach does not seem to be working as expected. Here is the code snippet of what I have tried:

selectItem(item: any) {
    this.selectedItem = item;
    this.myDiagram.select(this.myDiagram.findNodeForKey(item.key));
    if (this.selectedItem['toPort']) {
      this.selectedItemtype = 'Link';
      this.myDiagram.select(this.myDiagram.findLinkForData(item));
    } else {
      this.selectedItemtype = 'Node';
      this.myDiagram.select(this.myDiagram.findNodeForKey(item.key));
    }
    // this.rerender();
}

After dragging an item from a tree into the diagram window and opening the property window to edit its properties, I want to be able to edit the properties immediately upon drop. However, I have noticed that if I make changes to the item and click on it again, the edits are lost. How can I ensure that the edited item stays consistent even after clicking on it again?

Answer №1

That explanation is close to accurate, but it may be overly complex. If you are performing the action twice (for a node), or if the link data object in the model is not the same, you may not find the desired link.

If you have enabled keys for links in your GraphLinksModel, by setting GraphLinksModel.linkKeyProperty, this code should suffice:

if (item.toPort !== undefined) {
  myDiagram.select(myDiagram.findPartForKey(item.key));
} else {
  myDiagram.select(myDiagram.findNodeForKey(item.key));
}

If unique key maintenance for link data is not enabled, you will need to follow a similar process as you did for links:

myDiagram.select(myDiagram.findLinkForData(item));

However, this depends on whether your item shares the same object reference as what's in the GraphLinksModel.linkDataArray. If it doesn't match, consider using Diagram.findLinksByExample and choose one that matches.

Regarding property editors, do you use a DataInspector like ? If so, that should function smoothly. If you've created custom HTML elements for property editing, ensure you have the correct reference. Property details should reflect and be editable for the first Part in the Diagram.selection. When a user places a new Node copy after dragging from another Diagram, or the same Diagram, the copied Node will be part of the Diagram.selection collection.

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

Deactivate Search Functionality for Users who are not Logged in on an Angular 2 Application

The login component and view are functioning as intended, preventing users from accessing AuthGuard protected routes if they're not logged in. However, I'm facing a challenge with the search bar displayed on the home login screen (actually presen ...

One effective way to transfer state to a child component using function-based React

My goal is to pass an uploaded file to a child component in React. Both the parent and child components are function-based and utilize TypeScript and Material-UI. In the Parent component: import React from 'react'; import Child from './ ...

When evaluating code with eval, properties of undefined cannot be set, but the process works seamlessly without

Currently, I am attempting to utilize the eval() function to dynamically update a variable that must be accessed by path in the format myArray[0][0[1][0].... Strangely enough, when I try this approach, I encounter the following error: Uncaught TypeError: ...

Exploring the World of Angular: Abstracts and Data Transformations

Facing a perplexing issue with a component that is based on an abstract class, or at least that's my assumption. There are multiple sibling components rendered using *ngFor based on an array length. These siblings, derived from an abstract class, rec ...

The render properties are not compatible with each other

I am currently using ReactQuill as a component, but I encounter this error when implementing it with Typescript. Do you have any suggestions on how to resolve this issue? The JSX element type 'ReactQuill' is not recognized as a constructor fun ...

Issues with Angular ChartJS where the minimum value for scales and callback functions are not functioning as

I am encountering an issue while using ChartJS line chart in my Angular 9 application. I am attempting to adjust the Y axes of my chart so that they start from 0 (instead of the minimum value) and include a '%' symbol after each value. Below is a ...

Issue with Bootstrap 4 column width when using Angular 2 *ngFor

I have a container that displays search results. The layout is set up using Bootstrap columns, but there seems to be excessive padding or margin causing the results to appear very narrow. Interestingly, if I manually input each result instead of using *ngF ...

The service subscription in the ngOnInit lifecycle hook is only invoked once and does not remain populated when the route changes

I need some clarification. The Angular app I'm working on is successfully populating data to the view, but when navigating from one component to another, the ngOnInit lifecycle hook doesn't seem to be invoked, leaving the list on the view empty. ...

limiting the number of HTTP requests within a JavaScript forEach loop

In my current coding situation, I am facing an issue where the HTTP requests are being made simultaneously within a forEach loop. This leads to all the requests firing off at once. const main = async () => { items.forEach(async (i: Item) => ...

How can I utilize formGroupName and pass it to a different component?

Here is the template I am working with: <mat-form-field class="dense no-bottom" appearance="fill" style="min-width: 8em; flex: 1;"><mat-label>{{ label | translate}}</mat-label><mat-select formControlName=& ...

Two distinct arrays interacting and syncing with each other through a single API request

I find myself in a strange situation. I am dealing with two objects: sessionBase: ISessionViewWrapperModel = <ISessionViewWrapperModel>{}; sessionDisplay: ISessionViewWrapperModel = <ISessionViewWrapperModel>{}; After making an api call, both ...

Encountering Angular error when trying to assign an undefined array to another array while using mock data

Attempting to conduct unit testing on a component involving the retrieval of 'Groups' data through a data resolver class. Below is the corresponding code: export class GroupsComponent implements OnInit, OnDestroy { group: IGroup; groups: IGro ...

Having trouble locating the name WebGLObject in my TypeScript code

Every time I try to run ng serve command An error pops up on my screen saying: "WebGLObject cannot be found." ...

Embracing the "export ... from" feature in the TypeScript compiler

Can the tsc compiler handle this particular export statement? export {PromiseWrapper, Promise, PromiseCompleter} from 'angular2/src/facade/promise'; Your assistance is greatly appreciated! ...

Align the running of Angular code with a for loop

I am currently working on a project with Angular 9 and Spring Boot as the backend. The nature of the project is CMS based, where users can create forms using reactive form technology. These forms have the capability to include multiple file upload fields. ...

How can I store various data types in a single array in TypeScript?

I have a scenario I need help with. Let's say we have two interfaces, Cats and Dogs. How can I create an array that can store both Cats and Dogs? interface Cats { name: string; age: number; } interface Dog { owner: string; } const cat1: Cat ...

What is the best way to create a generic variable and function that utilize the same type?

I am looking for a structure similar to interface propType { value: T action: (value: T) => void } The variable T can be any type, but it must be consistent for both value and action. Using any is not suitable as it could lead to a mismatch in ty ...

getting requestParam of type date from angular using spring

Hello everyone, I am new to working with Angular and Spring. I am attempting to send a GET request with some date parameters, but I keep encountering an error. Here is the HTML code snippet: <div class="form-row"> <div c ...

Best practices for setting up PDAs in the Solana Anchor framework

Trying to create a basic Solana Program using Rust/Anchor that involves a PDA is causing a CPI error upon invocation, even though there doesn't appear to be any CPI happening (possibly due to the PDA account initialization). Below is the Program code ...

Heres how you can define an index variable within a Primeng p-table similar to using ngFor

Seeking assistance to initialize an index variable like *ngFor="let d of sI.detail; let i = index" within my p-table <ng-template pTemplate="body" let-rowData > <tr class="text-center info"> <td&g ...