UNPKG

markgojs

Version:

Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams

68 lines (59 loc) 1.73 kB
import { Component, ViewChild, ElementRef } from '@angular/core'; import * as go from 'gojs'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'My First GoJS App in Angular'; model = new go.GraphLinksModel( [ { key: 1, text: "Alpha", color: "lightblue" }, { key: 2, text: "Beta", color: "orange" }, { key: 3, text: "Gamma", color: "lightgreen" }, { key: 4, text: "Delta", color: "pink" } ], [ { from: 1, to: 2 }, { from: 1, to: 3 }, { from: 2, to: 2 }, { from: 3, to: 4 }, { from: 4, to: 1 } ]); @ViewChild('text') private textField: ElementRef; data: any; node: go.Node; showDetails(node: go.Node | null) { this.node = node; if (node) { // copy the editable properties into a separate Object this.data = { text: node.data.text, color: node.data.color }; } else { this.data = null; } } onCommitDetails() { if (this.node) { const model = this.node.diagram.model; // copy the edited properties back into the node's model data, // all within a transaction model.startTransaction(); model.setDataProperty(this.node.data, "text", this.data.text); model.setDataProperty(this.node.data, "color", this.data.color); model.commitTransaction("modified properties"); } } onCancelChanges() { // wipe out anything the user may have entered this.showDetails(this.node); } onModelChanged(c: go.ChangedEvent) { // who knows what might have changed in the selected node and data? this.showDetails(this.node); } }