Common API Operation class API

  API example Application scenarios
Add a node 
myDiagram.model.addNodeData(node);Copy the code
 
var node = {}; Node ["key"] = "key"; node["loc"] = "0 0"; // node coordinates node["text"] = "node name "; myDiagram.model.addNodeData(node);Copy the code
 Add a new node to the canvas with a button click
Deleting a Selected Node 
myDiagram.commandHandler.deleteSelection();Copy the code
 
if (myDiagram.commandHandler.canDeleteSelection()) {
    myDiagram.commandHandler.deleteSelection();
    return;
}Copy the code
 There is a button click on the page to delete the selected node and line
Gets the JSON of the current canvas 
myDiagram.model.toJson()Copy the code
 
var model= myDiagram.model.toJson(); //model=eval('('+model+')'); Var Nodes =model.nodeDataArray; var nodes=model.nodeDataArray; Var Links= model.linkdataArray; Pull out all the linesCopy the code
 Gets json for all elements of the current canvas to save
Load JSON to refresh the canvas 
myDiagram.model = go.Model.fromJson(model);Copy the code
 
model=myDiagram.model.toJson()
myDiagram.model = go.Model.fromJson(model);Copy the code
 Generally used to refresh and load elements on the canvas
Obtain a node by using the node key 
myDiagram.model.findNodeDataForKey('key')Copy the code
 
var node = myDiagram.model.findNodeDataForKey('key');Copy the code
 Know the node key and get the details of the node
Change the value of a node attribute 
myDiagram.model.setDataProperty(node, 'color', "#ededed");Copy the code
 
var node = myDiagram.model.findNodeDataForKey('key'); / / gets the first node object myDiagram model. SetDataProperty (node, "color", "# ededed"); // Then make changes to the properties of this objectCopy the code
 Change the color of the node, or size, etc
Gets the first element that gets focus, either a node or a line myDiagram.selection.first() 
var node=myDiagram.selection.first();
        console.log(node.data.key);Copy the code
  
Gets all nodes that get focus myDiagram.nodes 
var items=''; for(var nit=myDiagram.nodes; nit.next();) { var node=nit.value; if(node.isSelected){ items+=node.data.key+","; } } console.log(items);Copy the code
  
The node information for traversing the entire canvas is written as 1   
for(var nit=myDiagram.nodes; nit.next();) { var node=nit.value; var key=node.data.key; var text=node.data.text; }Copy the code
  
Add a line to a node 
MyDiagram. Model. AddLinkData ({the from: "the Key nodes",, "even to another node Key"})Copy the code
    
The selected node   
var newdata = { "text":"AAAA", "key":-33,"loc":"0 0" }; myDiagram.model.addNodeData(newdata); var newdat2= myDiagram.model.findNodeDataForKey('-3'); console.log(newdat2); var node = myDiagram.findNodeForData(newdat2); console.log(node); myDiagram.select(node); // Select the nodeCopy the code
  
Special case API usage 
myDiagram.findNodeForData(objNode)
myDiagram.findLinkForData(objLink)Copy the code
 Var newData ={“text”:”AAAA”,”key”:-33,”loc”:”0 0″}; var node = myDiagram.findNodeForData(newdat2); You can’t get this object unless it happens to be a new node, because when you add a node, Gojs automatically adds a property to the node or line  

Common event definition apis, and usage

Application scenarios The keyword example Case description
The node selects the change event SelectionChanged: The function method name of the callback // This property is enclosed in curly braces within $(go.node,), as shown in the example on the right 
myDiagram.nodeTemplate = $(go.Node, "Horizontal", { selectionChanged: $(go.Panel, "Auto", $(go.Shape,// node Shape and background color Settings {fill: "#1F4963" }, new go.Binding("fill", "color") ), ) ); Function nodeSelectionChanged(Node) {if(node.isselected) {// // Node selects the content to execute console.log(node.data); // Attribute information of the node console.log(node.data.key); / / get the Key nodes, and other properties similar to var node1 = myDiagram. Model. FindNodeDataForKey (node. Data. Key); myDiagram.model.setDataProperty(node1, "fill", "#ededed"); Uncheck} else {/ / node execution. The content of the var node1 = myDiagram model. FindNodeDataForKey (node. Data. Key); myDiagram.model.setDataProperty(node1, 'fill', "1F4963 "); }}Copy the code

Nodes are one color when checked and another color when unchecked
Node double-click event 
DoubleClick: function(e, node){$(go.node,){$(go.node,);Copy the code
 
MyDiagram. NodeTemplate = $(go.Node, "Horizontal", $(go.Panel, "Auto", $(go.Panel, "Auto", $(go. "#1F4963"}, new go.binding ("fill", "color"), {doubleClick: function(e, node){// Double-click handlerDC(e, node); // Double-click the execution method}})); Function handlerDC(e, obj) {var Node = obj. Part; // Get the node's JSON object. Var procTaskId = node.data.key; var procTaskName = node.data.text; var description = node.data.description; var procTmplId = node.data.tmplId; }Copy the code

This example is mainly used in the following scenarios: Double-click a node to obtain detailed information about the node, and modify the node information in a pop-up window.
An event triggered by a drag from the Palette 
myDiagram.addDiagramListener("externalobjectsdropped", function(e) {
        console.log(e);
    })Copy the code
 
myDiagram.addDiagramListener("externalobjectsdropped", Function (e) {e.subject.each(function(n){// Get the node console.log(n.data.key) from the Palette; }); })Copy the code
  
The node where the canvas is currently being dragged Not tested, line saved 
myDiagram.addDiagramListener("Modified", function(e) { myDiagram.isModified = false; iter = myDiagram.selection.iterator; while (iter.next()) { var part = iter.value; if (part instanceof go.Link) { if ( ( part.data.from == 0 || part.data.from == undefined) || ( part.data.to == 0 || part.data.to == undefined ) ) { myDiagram.model.setDataProperty(part.data, 'link-color', 'red'); console.log(part.data); The console. The log (" illegal "); } else if(part.data.from > 0 || part.data.from < 0 ) { var node = myDiagram.findNodeForKey(part.data.from); if (! Node) {console.log(" illegal "); } }else if(part.data.to > 0 || part.data.to < 0 ) { var node = myDiagram.findNodeForKey(part.data.to); if (! Node) {console.log(" illegal "); }}}}Copy the code
  

The canvas basically defines the class API

     
Define a concise notation for gojs globally. var $ = go.GraphObject.make;  
Define the basic properties of the canvas 
MyDiagram = $(go.Diagram, "myDiagram", // ID of the canvas bound Div {initialContentAlignment: AllowDrop: true, // Must be true to accept drops from the Palette "LinkDrawn": ShowLinkLabel, / / "LinkRelinked" : showLinkLabel, "animationManager. Duration: 600, / / canvas loading refresh" undoManager. IsEnabled ": True, / / "toolManager mouseWheelBehavior" : go. ToolManager. WheelZoom, allowZoom: true / / allow scaling, false no isReadOnly: False // Whether editing is disabled false No, true yes // isModelfied :true // Drag is disabled});Copy the code
 The only comment left out is that I forgot to bind the div used by the canvas and save it in myDiagram. The subsequent node Settings use this variable, which means defining nodes and manipulating nodes on the canvas
     

The Canvas element attribute defines the class API

  api example
Define a single node MyDiagram. NodeTemplate = $(go) Node, * * *) / / * * * for the definition of a Node 
myDiagram.nodeTemplate = $(go.Node, "Horizontal", { selectionChanged: $(go.Panel, "Auto", $(go.Shape,// node Shape and background color Settings {fill: "#1F4963", stroke: null } ), $(go.TextBlock, { font: "Bold 13px Helvetica, Bold Arial, sans-serif",// font Editable: true, stroke: "white",// color margin: 3}, new go.binding ("text", "key") // go.textBlock, parentheses)// Go.panel parentheses); / / go. The Node of the bracketsCopy the code
Define multiple nodes (there are multiple nodes on the canvas) MyDiagram. NodeTemplateMap. Add (” A kind of Node, “$(go) Node, * * *)) 
. / / a type of Node myDiagram nodeTemplateMap. Add (" Start ", $(go) Node, "Spot", $(go. A Panel, "Auto", $(go. Shape, "Circle", {minSize: new go.Size(40, 40), fill: "#79C900", stroke: null})))// go.node parentheses); / / another type of Node myDiagram nodeTemplateMap. Add (" End ", $(go) Node, "Spot", $(go. A Panel, "Auto", $(go. Shape, "Circle", {minSize: New go.Size(40, 40), fill: "#DC3C00", stroke: null})))// go.node parentheses); Var node = {}; node["text"] = "2222"; node["key"] = "33"; node["loc"] = "0 0"; node["category"] = "Start"; //category myDiagram.model.addNodeData(node);Copy the code
Define the line myDiagram.linkTemplate=$(go.Link,***);  

Adding listening Events

The listener node generates events 
/ / add to monitor node generates events myDiagram addDiagramListener (" externalobjectsdropped ", function(e) { e.subject.each(function(n){ console.log(n.data.key); }); })Copy the code
Listener line generates events 
/ / add to monitor line generated event myDiagram addDiagramListener (" LinkDrawn ", the function (e) {the console. The log (e.s ubject. Data. To); })Copy the code
Listening for delete events 
/ / to monitor node delete events myDiagram. AddDiagramListener (" SelectionDeleted ", function(e) { e.subject.each(function(n){ console.log(n.data.key); }); })Copy the code

 

Go.Shape property (Shape)

The rounded rectangle RoundedRectangle  
See the API for more  Gojs.net/latest/intr…

  

General properties

stroke Border color Null indicates no border and can be filled with “#87CEFA”, “red”, etc
margin Frame spacing  
visible The setting is whether the element is visible True for visible, false for invisible,
textAlign Text location “Center” in the middle
editable Whether the text is editable True, false
font The font “bold 8pt Microsoft YaHei, Arial, sans-serif”
fill The background color Fill in “#87CEFA”, “red”, etc
alignment Element position setting Go. Spot. BottomLeft/lower left go. Spot. BottomRight/lower right go Spot. The TopLeft/upper left go Spot. The TopRight/alignment on again: go. Spot. The TopRight
isMultiline Whether line breaks are allowed when editing The default true
maxLines:1, Sets the maximum number of lines for text to display  
minSize: Minimum size New go.size (10, 16), after controlling the maximum Size, the text will wrap automatically
maxSize: The largest size  

Special case solution

Problems arising Solution
Nodes or lines cannot be deleted Check whether the canvas’s global Settings disable deletion, or whether the node and line Settings disable deletion, keyword isReadOnly, or whether there is a problem with the node binding event
Repeated calls to the definition canvas failed The bound div cannot be redefined, and the API for reloading data should be used

Copyright notice: This article is the blogger’s original article, reprint please indicate the source
(To be updated later………)