Thanks,
Applied All as per selectable fields sample to my Angular project…
But couldn’t see the output in browser… Which line or where am missing out in the below… Just to load with static data is not giving the output… And no error as well in both console and VS code…
import { ChangeDetectorRef, Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import * as go from 'gojs';
import { DiagramComponent } from 'gojs-angular';
const $ = go.GraphObject.make;
@Component({
selector: 'app-selectable-fields',
templateUrl: './selectable-fields.component.html',
styleUrls: ['./selectable-fields.component.css'],
encapsulation: ViewEncapsulation.ShadowDom
})
export class SelectableFieldsComponent implements OnInit{
@ViewChild("myDiagram", { static: true })
public myDiagramComponent: DiagramComponent;
constructor(private cdr: ChangeDetectorRef) { }
ngOnInit(): void {
// throw new Error('Method not implemented.');
// window.addEventListener('DOMContentLoaded', init);
}
public mydiagram: go.Diagram = null;
public diagramDivClassName: string = "myDiagramDiv";
// UnselectedBrush = "transparent"; // item appearance, if not "selected"
// SelectedBrush = "dodgerblue"; // item appearance, if "selected"
public state = {
copiesArrays: true,
copiesArrayObjects: true,
linkFromPortIdProperty: "fromPort",
linkToPortIdProperty: "toPort",
diagramModelData: { prop: "value" },
skipsDiagramUpdate: false,
diagramNodeData: [
{
key: "Record1",
fields: [
{ name: "field1", info: "", color: "#F7B84B", figure: "Ellipse" },
{ name: "field2", info: "the second one", color: "#F25022", figure: "Ellipse" },
{ name: "fieldThree", info: "3rd", color: "#00BCF2" }
],
loc: "10 0"
},
{
key: "Record2",
fields: [
{ name: "fieldA", info: "", color: "#FFB900", figure: "Diamond" },
{ name: "fieldB", info: "", color: "#F25022", figure: "Rectangle" },
{ name: "fieldC", info: "", color: "#7FBA00", figure: "Diamond" },
{ name: "fieldD", info: "fourth", color: "#00BCF2", figure: "Rectangle" }
],
loc: "70 0"
}
]
}
public initDiagram() {
const $ = go.GraphObject.make;
const dia = $(go.Diagram, {
validCycle: go.Diagram.CycleNotDirected, // don't allow loops
// For this sample, automatically show the state of the diagram's model on the page
// "ModelChanged": e => {
// if (e.isTransactionFinished) this.showModel();
// },
"undoManager.isEnabled": true,
model: $(go.GraphLinksModel, {
nodeKeyProperty: "key",
linkKeyProperty: "key", // IMPORTANT! must be defined for merges and data sync when using GraphLinksModel
}),
});
// This template is a Panel that is used to represent each item in a Panel.itemArray.
// The Panel is data bound to the item object.
let fieldTemplate =
$(go.Panel, "TableRow", // this Panel is a row in the containing Table
new go.Binding("portId", "name"), // this Panel is a "port"
{
background: "lightgray", //this.UnselectedBrush, // so this port's background can be picked by the mouse
fromSpot: go.Spot.LeftRightSides, // links only go from the right side to the left side
toSpot: go.Spot.LeftRightSides,
// allow drawing links from or to this port:
fromLinkable: true, toLinkable: true
},
{ // select items -- the background indicates "selected" when not UnselectedBrush
// click: this.onFieldClick
},
$(go.Shape,
{
width: 12, height: 12, column: 0, strokeWidth: 2, margin: 4,
// but disallow drawing links from or to this shape:
fromLinkable: false, toLinkable: false
},
new go.Binding("figure", "figure"),
new go.Binding("fill", "color")),
$(go.TextBlock,
{
margin: new go.Margin(0, 2), column: 1, font: "bold 13px sans-serif",
// and disallow drawing links from or to this text:
fromLinkable: false, toLinkable: false
},
new go.Binding("text", "name")),
$(go.TextBlock,
{ margin: new go.Margin(0, 2), column: 2, font: "13px sans-serif" },
new go.Binding("text", "info"))
);
// This template represents a whole "record".
dia.nodeTemplate =
$(go.Node, "Auto",
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
// this rectangular shape surrounds the content of the node
$(go.Shape,
{ fill: "#EEEEEE" }),
// the content consists of a header and a list of items
$(go.Panel, "Vertical",
// this is the header for the whole node
$(go.Panel, "Auto",
{ stretch: go.GraphObject.Horizontal }, // as wide as the whole node
$(go.Shape,
{ fill: "#1570A6", stroke: null }),
$(go.TextBlock,
{
alignment: go.Spot.Center,
margin: 3,
stroke: "white",
textAlign: "center",
font: "bold 12pt sans-serif"
},
new go.Binding("text", "key"))),
// this Panel holds a Panel for each item object in the itemArray;
// each item Panel is defined by the itemTemplate to be a TableRow in this Table
$(go.Panel, "Table",
{
name: "TABLE",
padding: 2,
minSize: new go.Size(100, 10),
defaultStretch: go.GraphObject.Horizontal,
itemTemplate: fieldTemplate
},
new go.Binding("itemArray", "fields")
) // end Table Panel of items
) // end Vertical Panel
); // end Node
dia.linkTemplate =
$(go.Link,
{ relinkableFrom: true, relinkableTo: true, toShortLength: 4 }, // let user reconnect links
$(go.Shape, { strokeWidth: 1.5 }),
$(go.Shape, { toArrow: "Standard", stroke: null })
);
return dia;
}
public ngAfterViewInit() {
if (this.mydiagram) return;
this.mydiagram = this.myDiagramComponent.diagram;
// this.showModel();
this.cdr.detectChanges(); // IMPORTANT: without this, Angular will throw ExpressionChangedAfterItHasBeenCheckedError (dev mode only)
const rvdComp: SelectableFieldsComponent = this;
window.addEventListener('DOMContentLoaded', this.ngOnInit);
// Override the standard CommandHandler deleteSelection behavior.
// If there are any selected items, delete them instead of deleting any selected nodes or links.
// this.diagram.commandHandler.canDeleteSelection = function () { // method override must be function, not =>
// true if there are any selected deletable nodes or links,
// or if there are any selected items within nodes
// return go.CommandHandler.prototype.canDeleteSelection.call(this) ||
// this.findAllSelectedItems().length > 0;
// };
/*
this.diagram.commandHandler.deleteSelection = function () { // method override must be function, not =>
var items = this.findAllSelectedItems();
if (items.length > 0) { // if there are any selected items, delete them
this.diagram.startTransaction("delete items");
for (var i = 0; i < items.length; i++) {
var panel = items[i];
var nodedata = panel.part.data;
var itemarray = nodedata.fields;
var itemdata = panel.data;
var itemindex = itemarray.indexOf(itemdata);
this.diagram.model.removeArrayItem(itemarray, itemindex);
}
this.diagram.commitTransaction("delete items");
} else { // otherwise just delete nodes and/or links, as usual
go.CommandHandler.prototype.deleteSelection.call(this);
}
};
*/
}
// isFieldSelected(item) {
// return item.background !== this.UnselectedBrush;
// }
// setFieldSelected(item, sel) {
// if (sel) {
// item.background = this.SelectedBrush;
// } else {
// item.background = this.UnselectedBrush;
// }
// }
// onFieldClick(e, item) {
// var oldskips = item.diagram.skipsUndoManager;
// item.diagram.skipsUndoManager = true;
// if (e.control || e.meta) {
// this.setFieldSelected(item, !this.isFieldSelected(item));
// item.part.isSelected = item.panel.elements.any(this.isFieldSelected);
// } else if (e.shift) {
// // alternative policy: select all fields between this item and some other one??
// if (!this.isFieldSelected(item)) this.setFieldSelected(item, true);
// item.part.isSelected = true;
// } else {
// if (!this.isFieldSelected(item)) {
// // deselect all sibling items
// item.panel.elements.each(it => {
// if (it !== item) this.setFieldSelected(it, false);
// });
// this.setFieldSelected(item, true);
// }
// item.part.isSelected = true;
// }
// item.diagram.skipsUndoManager = oldskips;
// }
// showModel() {
// // throw new Error('Function not implemented.');
// document.getElementById("mySavedModel").textContent = this.diagram.model.toJson();
// }
// this is a bit inefficient, but should be OK for normal-sized graphs with reasonable numbers of items per node
// findAllSelectedItems() {
// var items = [];
// for (const nit = this.mydiagram.nodes; nit.next();) {
// var node = nit.value;
// var table = node.findObject("TABLE");
// if (table) {
// for (var iit = table.panel.elements; iit.next();) {
// var itempanel = iit.value;
// if (this.isFieldSelected(itempanel)) items.push(itempanel);
// }
// }
// }
// return items;
// }
}
#HTML
<p>selectable-fields works!</p>
<!-- Diagram id='recordingDiagramDiv -->
<div
style=" flex-grow: 1;
width: 95%;
height: 450px;
border: solid 1px #1a252f;
position: relative;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
">
<gojs-diagram #myDiagram [initDiagram]="initDiagram" [nodeDataArray]="state.diagramNodeData"
[divClassName]="diagramDivClassName" [modelData]="state.diagramModelData"
[(skipsDiagramUpdate)]="state.skipsDiagramUpdate">
</gojs-diagram>
</div>
<!-- <textarea id="mySavedModel" style="width:100%;height:300px"></textarea> -->
