The use of Gojs can learn from this big guy’s article ‘Muzi Qi’Juejin. Cn/post / 684490…

The API documentation:gojs.net.cn/index.html

1. Initialize the canvas

/* css */
/* Remove canvas highlight */
canvas {
  outline: none;
}

/* html */
<div id="myDiagramDiv"></div>

/* js */
const _$ = go.GraphObject.make
const myDiagram = 
_$(go.Diagram, "myDiagramDiv", {
     allowHorizontalScroll: false.allowVerticalScroll: false.// Horizontal/vertical scroll bar to prevent canvas dragging
     initialContentAlignment: go.Spot.Top, // Nodes are aligned at the top of the canvas
     "toolManager.mouseWheelBehavior": go.ToolManager.WheelNone, // The mouse wheel event is disabled
      // Layout Provides an official layout plan
      layout: _$(go.TreeLayout, {
         angle: 90.// Tree direction 0 (right), 90 (down), 180 (left) or 270 (up)
         layerSpacing: 20.// The length of the connection line
         nodeSpacing: 20.// The spacing between node templates
         arrangement: go.TreeLayout.ArrangementFixedRoots
       }),
       "undoManager.isEnabled": true
});
Copy the code

2. Create a node template

myDiagram.nodeTemplateMap.add('one'.// 'one' is used to match the 'category' in the data when there are multiple node templates
    _$(go.Node,'Vertical', {// The arrangement of elements in the 'Vertical' node template
        selectable: false.// Optional, flase also prevents nodes from dragging
        isTreeExpanded: true // Whether the child node is expanded by default}, _ $(go. A Panel,// similar to creating a div
          'Auto',
          _$(
             go.Shape,
             'RoundedRectangle'.// Set the div shape
             {
                 fill: '# 000'./ / the background color
                 stroke: '#fff'./ / border color
                 width: 200./ / div height to width
                 height: 120,
             }
          ),
          _$(go.TextBlock, { // TextBlock Picture
              stroke: "#fff".// Text color
              font: 'bold 20px Verdana, sans-serif'.// Font Settings
            },
            // Data binding, perform some operations on the data, set the parameters can be dynamic operation
            new go.Binding("text"."text".(val) = >{})
          ),
          _$(go.Picture, {
              desiredSize: new go.Size(32.32), // Image size
              click: function (e, obj) {
                 console.log(obj.source)
               }
            }
            new go.Binding('source'.'img'))),// Collapse the template button_ $('TreeExpanderButton')))Copy the code

3. Set the cable style

myDiagram.linkTemplate = _$(
  go.Link,
  go.Link.Orthogonal, // Right Angle connection line
  {
    selectable: false.// Cannot select connection line
    corner: 10 // Set the right Angle to radians
   },
   _$(go.Shape, {
     strokeWidth: 1./ / line width
     stroke: '#A8D2FD' / / color}))Copy the code

4. Connect the template or cable to the canvas

// Template data/connection data
let dataArry = [{
    key: 1.// A unique value used to connect data between nodesCategory:'one'.// If there are multiple node templates, match
    text: 'xxx'.img: 'xxx'}, {key: 2Category:'one'.text: 'xxx'.img: 'xxx'
}]

let lintArry = [{
    from: 1.// Data connection relation, corresponding to key value
    to: 2
}]
myDiagram.model = new go.GraphLinksModel(dataArry, lintArry)
Copy the code

5. Code address

git clone https://gitee.com/liu_kang_123/demo_gojs.git