public initDiagram(): go.Diagram {
const $ = go.GraphObject.make;
const dia = $(go.Diagram, {
model: $(go.GraphLinksModel,
{
nodeDataArray: [],
linkDataArray: [],
linkToPortIdProperty: 'toPort',
linkFromPortIdProperty: 'fromPort',
linkKeyProperty: 'key' // IMPORTANT! must be defined for merges and data sync when using GraphLinksModel
},
),
initialContentAlignment: go.Spot.Center,
allowDrop: true, // must be true to accept drops from the Palette
'draggingTool.isGridSnapEnabled': true,
'draggingTool.gridSnapCellSpot': go.Spot.Center,
'draggingTool.isCopyEnabled': false,
'resizingTool.isGridSnapEnabled': true,
// 'ModelChanged': updateAngular,
// 'ChangedSelection': updateSelection,
'ExternalObjectsDropped': droppedNode,
'undoManager.isEnabled': true,
'LinkDrawn': showLinkLabel, // this DiagramEvent listener is defined below
'LinkRelinked': showLinkLabel,
'animationManager.isEnabled': false,
'animationManager.duration': 800, // slightly longer than default (600ms) animation
// 'SelectionDeleting': relinkOnDelete, // these two DiagramEvent listeners are
allowVerticalScroll: true,
hasVerticalScrollbar: false,
// 'isReadOnly': scope.isreadonly,
});
let thisobj = this;
function droppedNode(e) {
// abp.event.trigger('skipsDiagramUpdate', true);
console.log(e);
if (e.subject.Ha.ka.key.nb.key.includes('End')) {
if (e.subject.Ha.ka.key.nb.key !== 'End') {
// when the selection is dropped but not hooked up to the rest of the graph, delete it
abp.event.trigger('errorNotify', 'End node cannot be repeated');
e.diagram.removeParts(e.diagram.selection, false);
} else {
// e.diagram.commandHandler.scrollToPart(newnode);
}
}
if (e.subject.Ha.ka.key.nb.key.includes('Start')) {
let newnode = e.diagram.selection.first();
if (!newnode) { return; }
// if (!(newnode instanceof go.Group) && newnode.linksConnected.count === 0) {
if (e.subject.Ha.ka.key.nb.key !== 'Start') {
// when the selection is dropped but not hooked up to the rest of the graph, delete it
abp.event.trigger('errorNotify', 'Start node cannot be repeated');
// thisobj.notify.success('Start node cannot be repeated');
e.diagram.removeParts(e.diagram.selection, false);
} else {
let loc = e.subject.Ha.ka.key.nb.loc.split(' ');
let loc1 = Number(loc[0]) + 130;
e.diagram.model.addNodeData({ key: 'Filter', img: '../../../../assets/common/images/icons/Filter_icon.svg', color: 'transparent', loc: loc1 + ' ' + loc[1], close: '../../../../assets/common/images/icons/End.png' });
abp.event.trigger('filterLastElement');
let index = 1 + Number(localStorage.getItem('lastItemIndex'));
let lastNode: any;
index === 1 ? lastNode = 'Filter' : lastNode = 'Filter' + index;
e.diagram.model.addLinkData({ from: newnode.key, to: lastNode });
// e.diagram.commandHandler.scrollToPart(newnode);
}
// if (e.subject.Ha.ka.key.nb.key) {
// let newnode = this.diagram.selection.first();
// this.diagram.remove(newnode);
// }
// setTimeout(() => {
// // abp.event.trigger('diagramModelChange', {removedNodeKeys: [e.subject.Ha.ka.key.nb.key]});
// abp.event.trigger('skipsDiagramUpdate', false);
// // thisobj.skipsDiagramUpdate = false;
// abp.event.trigger('diagramModelChange', {insertedNodeKeys: ['Filter'],
// modifiedNodeData: [{key: 'Filter', img: '../../../../assets/common/images/icons/Filter_icon.svg', loc: '-285 55'}]});
// // thisobj.skipsDiagramUpdate = true;
// setTimeout(() => {
// abp.event.trigger('skipsDiagramUpdate', true);
// }, 100);
// // this.diagramModelChange()
// }, 200);
} else {
abp.event.trigger('skipsDiagramUpdate', true);
}
}
/////
// R is a Rect in document coordinates
// NODE is the Node being moved -- ignore when looking for Parts intersecting the Rect
function isUnoccupied(r, node) {
let diagram = node.diagram;
// nested function used by Layer.findObjectsIn, below
// only consider Parts, and ignore the given Node, any Links, and Group members
function navig(obj) {
let part = obj.part;
if (part === node) {
return null;
}
if (part instanceof go.Link) {
return null;
}
if (part.isMemberOf(node)) {
return null;
}
if (node.isMemberOf(part)) {
return null;
}
return part;
}
// only consider non-temporary Layers
let lit = diagram.layers;
while (lit.next()) {
let lay = lit.value;
if (lay.isTemporary) {
continue;
}
if (lay.findObjectsIn(r, navig, null, true).count > 0) {
return false;
}
}
return true;
}
// a Part.dragComputation function that prevents a Part from being dragged to overlap another Part
// use PT instead of GRIDPT if DraggingTool.isGridSnapEnabled but movement should not snap to grid
function avoidNodeOverlap(node, pt, gridpt) {
if (node.diagram instanceof go.Palette) {
return gridpt;
}
// this assumes each node is fully rectangular
let bnds = node.actualBounds;
let loc = node.location;
// use PT instead of GRIDPT if you want to ignore any grid snapping behavior
// see if the area at the proposed location is unoccupied
let r = new go.Rect(gridpt.x - (loc.x - bnds.x), gridpt.y - (loc.y - bnds.y), bnds.width, bnds.height);
// maybe inflate R if you want some space between the node and any other nodes
r.inflate(-0.5, -0.5); // by default, deflate to avoid edge overlaps with 'exact' fits
// when dragging a node from another Diagram, choose an unoccupied area
if (!(node.diagram.currentTool instanceof go.DraggingTool) &&
(!node._temp || !node.layer.isTemporary)) { // in Temporary Layer during external drag-and-drop
node._temp = true; // flag to avoid repeated searches during external drag-and-drop
while (!isUnoccupied(r, node)) {
r.x += 10; // note that this is an unimaginative search algorithm --
r.y += 2; // you can improve the search here to be more appropriate for your app
}
r.inflate(0.5, 0.5); // restore to actual size
// return the proposed new location point
return new go.Point(r.x - (loc.x - bnds.x), r.y - (loc.y - bnds.y));
}
if (isUnoccupied(r, node)) {
return gridpt; // OK
}
return loc; // give up -- don't allow the node to be moved to the new location
}
////
function showLinkLabel(e) {
let label = e.subject.findObject('LABEL');
if (e.subject.fromNode.data.key === 'End') {
e.diagram.removeParts(e.diagram.selection, false);
}
// label.visible = true;
if (label !== null) {
label.visible = (e.subject.fromNode.data.key.includes('Decision'));
}
}
dia.addDiagramListener('ObjectDoubleClicked', function (ev) {
let key = ev.subject.part.nb.key;
abp.event.trigger('nodeClickEvent', key);
});
dia.addDiagramListener('ObjectSingleClicked', function (ev) {
let key = ev.subject.part.nb.key;
abp.event.trigger('nodeClickEvent', key);
});
dia.addDiagramListener('SelectionDeleted', function (ev) {
let key = ev.subject.each(function (p) {
abp.event.trigger('nodeDeleteClickEvent', p.part.data.key);
});
});
dia.undoManager.isEnabled = true;
dia.commandHandler.archetypeGroupData = { key: 'Group', isGroup: true };
const makePort = function (id: string, spot: go.Spot) {
return $(go.Shape, 'Circle',
{
opacity: .2,
fill: 'gray', strokeWidth: 0, desiredSize: new go.Size(8, 8),
portId: id, alignment: spot,
fromLinkable: true, toLinkable: true
}
);
};
dia.nodeTemplate =
$(go.Node, 'Spot',
{ dragComputation: avoidNodeOverlap },
{
contextMenu:
$('ContextMenu',
$('ContextMenuButton',
$(go.TextBlock, 'Group'),
{ click: function (e, obj) { e.diagram.commandHandler.groupSelection(); } },
new go.Binding('visible', '', function (o) {
return o.diagram.selection.count > 1;
}).ofObject())
)
},
//myDiagram.nodeTemplate = $(go.Node, 'Auto', new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Panel, 'Auto',
$(go.Shape, 'RoundedRectangle', { stroke: null },
new go.Binding('fill', 'color')
),
$(go.Picture, { maxSize: new go.Size(70, 70) },
new go.Binding('source', 'img')),
$(go.TextBlock, { margin: 5 },
new go.Binding('text')),
{
toolTip: // define a tooltip for each node that displays the color as text
$('ToolTip',
$(go.TextBlock, { margin: 4 },
new go.Binding('text', 'desc'))
) // end of Adornment
}
),
// Ports
makePort('t', go.Spot.TopCenter),
makePort('l', go.Spot.Left),
makePort('r', go.Spot.Right),
makePort('b', go.Spot.BottomCenter)
);
// dia.toolTip =
// $('ToolTip',
// $(go.TextBlock, { margin: 4 },
// // use a converter to display information about the diagram model
// new go.Binding('text', '', diagramInfo))
// );
// function diagramInfo(model) {
// return 'Model:\n' + model.nodeDataArray.length + ' nodes, ' +
// model.linkDataArray.length + ' links';
// }
dia.nodeTemplate.selectionAdornmentTemplate =
$(go.Adornment, 'Spot',
$(go.Panel, 'Auto',
$(go.Shape, { stroke: 'black', strokeWidth: 2, fill: null }),
$(go.Placeholder)
),
$(go.Panel, 'Horizontal',
{ alignment: go.Spot.TopRight, alignmentFocus: go.Spot.Bottom },
$('Button',
{ click: editText }, // defined below, to support editing the text of the node
// $(go.Picture, { maxSize: new go.Size(15, 15) },
// new go.Binding('source', 'close')),
$(go.TextBlock, 'x',
{ font: 'bold 10pt sans-serif', desiredSize: new go.Size(15, 15), textAlign: 'center', background: 'white' })
)));
function editText(e, button) {
let node = button.part.adornedPart;
console.log(button.part.adornedPart.nb.key);
// this.currentNodeKey = null;
let abc = button.part.adornedPart.nb.key;
// abp.event.trigger('nodeDeleteClickEvent', abc);
// e.diagram.model.removeNodeData(button.part.adornedPart.nb);
e.diagram.removeParts(e.diagram.selection, false);
abp.event.trigger('manuallyDelete', abc);
// this.nodeDeleteClickEvent(button.part.adornedPart.nb.key);
// abp.event.trigger('nodeClickEvent', button.part.adornedPart.nb.key);
// e.diagram.commandHandler.editTextBlock(node.findObject('TEXTBLOCK'));
}
dia.linkTemplate =
$(go.Link, // the whole link panel
{
routing: go.Link.AvoidsNodes,
curve: go.Link.JumpOver,
corner: 5,
toShortLength: 4,
relinkableFrom: true,
relinkableTo: true,
reshapable: true,
resegmentable: true,
// mouse-overs subtly highlight links:
mouseEnter: function (e, link) {
// link.findObject('HIGHLIGHT').stroke = 'rgba(30,144,255,0.2)';
},
mouseLeave: function (e, link) {
// link.findObject('HIGHLIGHT').stroke = 'transparent';
}
},
new go.Binding('points').makeTwoWay(),
$(go.Shape, // the highlight shape, normally transparent
{
isPanelMain: true,
strokeWidth: 8,
stroke: 'transparent',
// strokeWidth: 8,
name: 'HIGHLIGHT'
}),
$(go.Shape, // the link path shape
{ isPanelMain: true, stroke: 'gray', strokeWidth: 2 }),
$(go.Shape, // the arrowhead
{ toArrow: 'standard', stroke: null, fill: 'gray' }),
$(go.Panel,
'Auto', // the link label, normally not visible
{ visible: false, name: 'LABEL', segmentIndex: 2, segmentFraction: 0.5 },
new go.Binding('visible', 'visible').makeTwoWay(),
$(go.Shape,
'RoundedRectangle', // the label shape
{ fill: '#F8F8F8', stroke: null }),
$(go.TextBlock,
'Yes', // the label
{
textAlign: 'center',
font: '10pt helvetica, arial, sans-serif',
stroke: '#333333',
editable: true
},
new go.Binding('text', 'text').makeTwoWay())
));
return dia;
}
This is the init call. Can u help me what i am missing.