markgojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
68 lines (59 loc) • 1.73 kB
text/typescript
import { Component, ViewChild, ElementRef } from '@angular/core';
import * as go from 'gojs';
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 }
]);
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);
}
}