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

Child Route Handling Based on Conditions (Angular)

Can a child route be conditionally displayed as a default? I want users to land on a specific child route based on their past orders (e.g., go to the store page if they ordered from a physical store, online page for online orders, or social page otherwise ...

The error message "Unable to adjust headers once they have been sent. Angular Universal ExpressJS" appears

I am trying to implement a 404 error response in my Angular 5 component with server-side rendering. In my server.js file, I have set up the following: app.engine('html', (_, options, callback) => { let engine = ngExpressEngine({ bootst ...

What is the best way to select and style individual HTML elements using CSS?

Having trouble editing a Validations Form in Ionic 4 with CSS. It seems that only the form elements are targeted after clicking on the form group. Attached below are the form states before and after click. I'm unable to style the form elements before ...

Encountering a hiccup while attempting to implement ngx-translate in an Angular library

I'm in the process of developing an Angular library, and I need to incorporate ngx-translate. In my other applications, I typically add TranslateModule.forRoot in the app.module file. import .... // AoT requires an exported function for factories exp ...

Unlocking the Power of CheerioJS for Selecting Table Elements

I am struggling to figure out how to use CheerioJS to parse HTML table values and convert them into a JSON object. Despite my efforts, I have only been able to come up with a convoluted solution that doesn't quite work. My goal is to extract informa ...

Using MUI DatePicker and react-hook-form to implement a date picker in the format DD/MM/YYYY

I have developed a custom datePicker component that combines react-hook-form and Material UI. However, I am encountering an issue where the values are being displayed in the format: "2024-04-10T22:00:00.000Z" Below is the code snippet: import { Localizati ...

Can someone explain the inner workings of the Typescript property decorator?

I was recently exploring Typescript property decorators, and I encountered some unexpected behavior in the following code: function dec(hasRole: boolean) { return function (target: any, propertyName: string) { let val = target[propertyName]; ...

Utilizing SystemJS to Retrieve Files from Subfolders

Having an issue loading my custom angular2 component, Test.component. When using Systemjs, I've set the default extension to .js for everything under /app. However, for some reason it's not appending ".js" to test.component when searching for it ...

Release a new font on npm for integration into your project

In my current web-application project using angular2, I've designed a unique set of music glyphs such as notes, dotted notes, and time signatures. I couldn't find an existing font that suited my needs, so I created this custom font hierarchy: f ...

Why does the type checking for props in vue.js keep failing despite my use of "Object as PropType<GeographicCoordinate | null>"?

Scenario: Utilizing vue.js (^3.2.13) with Typescript and Composition API in Visual Studio Code File type.ts: export class GeographicCoordinate { latitude: number; longitude: number; altitude?: number; constructor(latitude: number, longitude: numb ...

Adding a line break ( ) in a paragraph within a TypeScript file and then transferring it to HTML does not seem to be functioning properly

Angular Website Component: HTML file <content-section [text]="data"></content-section> TypeScript file data = `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's stand ...

What is the best way to isolate the CSS of individual components in Angular 2?

For the first component: CSS-- ngx-dnd-container { color:black; background-color: white; } HTML- <ngx-dnd-container [model]="targetItemsA" dropZone="multiple-target-a" </ngx-dnd-container> For the sec ...

Can someone explain the meaning of this syntax in a TypeScript interface?

Just the other day, I was trying to incorporate the observer pattern into my Angular 4 application and came across this TypeScript code snippet. Unfortunately, I'm not quite sure what it means. Here's the code: module Patterns.Interfaces { ...

Automate your builds with Github actions for both tags and branches!

In my typescript project repository, our release policy states that we publish packages from the master branch to the next npm tag. Additionally, we have a dedicated branch called release for publishing to the latest npm tag. My goal is to optimize the sol ...

Block users from printing in text input with Angular

I need to restrict users from entering text into a specific input field, even though they can click on it and select the value. Using the disabled attribute is not an option because it triggers another event when clicked. I also want users to have the ab ...

An issue has been detected by Zone.js where the ZoneAwarePromise `(window|global).Promise` has been unexpectedly replaced

I have recently integrated the Angular2 quickstart code into my existing webpack setup, but I seem to be facing an issue where something is interfering with the promise from zone.js, resulting in an error. Based on my research on Stack Overflow, it appears ...

A guide on passing an ngFor object variable to a function

I am trying to display subcategories for each category in my *ngFor list. The subcategory data is retrieved from Firebase using the category_id, but I am struggling to pass the category_id from the HTML to the function for every member of the category. ho ...

The error message "TypeError: Unable to access the 'getFullWidth' property of an undefined value when using TSLint and TypeScript" was

I have been using Dan Wahlin's tutorials and online examples to set up Gulp and Typescript, but I am facing an issue with the tslint() function. The problem occurs in my code as follows: node_modules\tslint\lib\language\walker&bso ...

How to efficiently fetch Redux state through reducers with an action-based approach

Utilizing Redux actions to manage a list of contacts, I am facing an issue where I am unable to retrieve the actual state contact. Despite setting the contact in the action, all I receive is the contact set within the action itself. Can someone guide me on ...

Retrieve both the name and id as values in an angular select dropdown

<select (change)="select($event.target.value)" [ngModel]="gen" class="border border-gray-200 bg-white h-10 pl-6 pr-40 rounded-lg text-sm focus:outline-none appearance-none block cursor-pointer" id="gend ...