go.js的基本使用(主要是vue,react同理)

luofei_create

已于 2022-09-28 18:28:52 修改

阅读量5.8k

点赞数 6

文章标签： vue.js golang go

于 2022-09-28 18:26:51 首次发布

本文链接：https://blog.csdn.net/luofei_create/article/details/126749009

版权

一、go.js的基本使用

引言：首先写这篇文章是为了记录一下自己用到的api，以及接触到的设置方法，部分详解有摘自其他博主的文章，我主要是在vue中使用，涉及到业务方面的就不过多解释，react我也自测过，都是同一个套路，希望本篇文章能帮助到各位码友！！！

1.官方文档

官方api: https://gojs.net/latest/api/
官方例子：https://gojs.net/latest/samples/orgChartStatic.html
左边有许多例子，可以根据自己的需要挑选合适的例子使用
具体的设置api,比如按钮，连接线什么的：https://gojs.net/latest/intro/buttons.html

2.安装，以及去除水印的方法

 npm install gojs --save

我目前装的应该现在最新版的 “gojs”: “^2.2.14”,
我在博客也搜到不少解决的方法，在这里就分享两种方法：
第一种：在node_modules中找到go.js，go.mjs，go-module.js路径如下：node_modules/gojs/release/go.js，go.mjs，go-module.js (注意：最好是这三个文件都要改，有些码友说设置了没用，原因是只设置了go.js)

这一种也是我目前使用的方法：在三个文件全局搜索 7ca11abfd022028846 然后将这一行的剩余部分全部删除，下面是我已经删除后的照片：记得三个文件都要删除

在这里插入图片描述

第二种方法：

搜索String.fromCharCode(a.charCodeAt(g)^b[(b[c]+b[d])%256]) 这段代码后面会有个return f;

在这里插入图片描述

在return f 前加上以下代码

// 注意了： 如果你是2022版本的话需要，将© 1998-2021 Northwoods Software 改成 © 1998-2022 Northwoods Software
// 这个你可以在水印上查看是哪个年限以及哪个版本：
if(f.indexOf(‘GoJS 2.1 evaluation’)>-1
|| f.indexOf(‘© 1998-2021 Northwoods Software’)>-1
|| f.indexOf(‘Not for distribution or production use’)>-1
|| f.indexOf(‘gojs.net’)>-1
){
return ‘’;
}else{
return f
}

查看水印年限还有版本是2.1还是2.2的：
这个是加入后的图片（自己网上偷懒找的！）

3.在vue中使用go.js

使用案例Flowchart
我们在初始化之前最好使用ref来设置他的id属性
我已经将他封装成为一个组件，具体注释代码里面也有，可以直接粘贴使用
注意：我改了不少原有的样式和结构，比如： Start我改成了长方形什么的，加了收缩功能

<!--
 @description：Flowchart drawing, dedicated to customization
 @date：Created in  2022/7/24 15:55
 @modified By：luofei-create
 @version: 1.0.0
-->
<template>
  <div class="example">
    <div class="example-box" id="parentDiv">
       <!-- 主画布区域 -->
      <div ref="diagram" class="myDiagramDiv">
        <canvas
          class="canvas-left"
          tabindex="0"
          width="954"
          height="700">
          This text is displayed if your browser does not support the CanvasHTML element.
          </canvas>
        <div class="left-box">
          <div class="left-box-item"></div>
        </div>
      </div>
      <!-- 右边组件拖拽 -->
      <div ref="myPaletteDiv" class="myPaletteDiv" v-show="isRight">
        <canvas class="canvas-right"
          tabindex="0"
          width="560"
          height="700">
        </canvas>
        <div class="right-box">
          <div class="right-box-item">
            工具组件
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: 'example',
  data() {
    return {
      myDiagramRefs: null, //这个是为了将初始化的结构保存起来，可以调用go.js的方法
    };
  },
  props: {
  	//父组件传过来的json数据
    jsonData: {
      type: Object,
      require: true,
      default: () => ({}),
    },
    // 是否展示右侧的工具栏
    isRight: {
      type: Boolean,
      default: () => true,
    },
  },
  watch: {
    //监听json数据， 再次初始化
    jsonData: {
      handler(n, o) {
        this.load();
      },
    },
  },
  mounted() {
    //调用test方法，初始化画布
    this.test();
  },
  methods: {
    test() {
      // 初始化go.js
      const $ = go.GraphObject.make; // 为了定义模板的简洁性
      const myDiagram = $(
        go.Diagram,
        this.$refs.diagram,
        // 'my-diagram-div', // id挂载dome节点
        // 这里是控制那个菱形在连线的时候出现文字的，我暂时不需要，所以注释掉
        {
          // LinkDrawn: showLinkLabel,
          // LinkRelinked: showLinkLabel,
          'draggingTool.dragsTree': true,
          'undoManager.isEnabled': true, //是否可以粘贴复制等，delete建删除
        },
      );
      this.myDiagramRefs = myDiagram;
      // 当修改文档时，在标题中添加一个“*”，并启用“保存”按钮
      myDiagram.addDiagramListener('Modified', e => {
        const button = document.getElementById('SaveButton');
        if (button) button.disabled = !myDiagram.isModified;
        const idx = document.title.indexOf('*');
        if (myDiagram.isModified) {
          if (idx < 0) {
            myDiagram.layout = $(go.TreeLayout, { angle: 90 });
          }
        } else if (idx >= 0) document.title = document.title.slice(0, idx);
      });


      // 节点模板的Helper定义
      function nodeStyle() {
        return [
          // 节点。 location来自于节点数据的“loc”属性，由Point转换。 解析静态方法。
          // 如果节点。 location发生变化时，它更新节点数据的“loc”属性，并使用Point转换回来。 stringify静态方法。
          new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(
            go.Point.stringify,
          ),
          {
            // 这个节点位置位于每个节点的中心
            locationSpot: go.Spot.Center,
          },
        ];
      }
      // 定义一个用于创建通常是透明的“端口”的函数。
      function makePort(name, align, spot, output, input) {
        const horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
        return $(go.Shape, {
          fill: 'transparent',
          strokeWidth: 0,
          width: horizontal ? NaN : 8, // 如果不是水平拉伸，宽度只有8
          height: !horizontal ? NaN : 8, // 如果不是垂直拉伸，也就是8英尺高
          alignment: align, // 对齐主形状上的端口
          stretch: horizontal
            ? go.GraphObject.Horizontal
            : go.GraphObject.Vertical,
          portId: name, // 将此对象声明为“端口”
          fromSpot: spot, // 声明此端口的链接可能连接到哪里
          fromLinkable: output, // 声明用户是否可以从这里绘制链接 
          toSpot: spot, // 声明此端口的链接可能连接到哪里
          toLinkable: input, // 声明用户是否可以在此绘制链接 
          cursor: 'pointer', // 显示不同的游标以指示潜在的链接点 
          mouseEnter: (e, port) => {
            // PORT参数将是这个Shape
            if (!e.diagram.isReadOnly) port.fill = 'rgba(255,0,255,0.5)';
          },
          mouseLeave: (e, port) => (port.fill = 'transparent'),
        });
      }
      // 文字颜色
      function textStyle() {
        return {
          font: 'bold 11pt Lato, Helvetica, Arial, sans-serif',
          stroke: '#F8F8F8',
        };
      }
	 //这一句是我自己加上的，目的是为了在连线的时候可以帮我自动对齐
      myDiagram.layout = $(go.TreeLayout, { angle: 90 });

      // 定义普通节点的Node模板
      myDiagram.nodeTemplateMap.add(
        '', // 自己定义模板名称
        $(
          go.Node,
          'Spot',
          {
            resizable: true,
            resizeObjectName: 'SHAPE',
            selectionObjectName: 'SHAPE',
            margin: new go.Margin(10, 0, 10, 0),
          },
          nodeStyle(),
          // 主要对象是一个面板，它围绕着一个矩形形状的TextBlock 
          $(
            go.Panel,
            'Auto',
            $(
              go.Shape,
              'Rectangle',
              {
                name: 'SHAPE',
                fill: '#282c34',
                stroke: '#00A9C9',
                margin: new go.Margin(0, 0, 0, 0),
                strokeWidth: 1.5, // strokeWidh表示Step的盒子边框大小
              },
              new go.Binding('figure', 'figure'),
            ),
            $(
              go.TextBlock,
              textStyle(),
              {
                margin: 8,
                maxSize: new go.Size(560, NaN),
                wrap: go.TextBlock.WrapFit,
                editable: true,
              },
              new go.Binding('text').makeTwoWay(),
            ),
          ),
          //这里也是我自己加的，目的是为了可以像树一样可以收缩展开
          $('TreeExpanderButton',
            {
              margin: new go.Margin(0, 0, 0, 20),
              alignment: go.Spot.Bottom,
              alignmentFocus: go.Spot.Top,
            },
            { visible: true }),

          // 四个命名端口，每边一个:
          makePort('T', go.Spot.Top, go.Spot.TopSide, false, true), //表示端口哪里可以链接，哪里不可以链接
          makePort('L', go.Spot.Left, go.Spot.LeftSide, true, true),
          makePort('R', go.Spot.Right, go.Spot.RightSide, true, true),
          makePort('B', go.Spot.Bottom, go.Spot.BottomSide, true, false),
        ),
      );
      // 菱形的样式  -> 改成长方形
      myDiagram.nodeTemplateMap.add(
        'Conditional',
        $(
          go.Node,
          'Spot',
          {
            resizable: true,
            resizeObjectName: 'SHAPE',
            selectionObjectName: 'SHAPE',
          },
          nodeStyle(),
          $(
            go.Panel,
            'Auto',
            $(
              go.Shape,
              'Rectangle',
              {
                name: 'SHAPE',
                fill: '#282c34',
                stroke: 'rgba(98, 251, 243)',
                strokeWidth: 1.5,
              },
              new go.Binding('figure', 'figure'),
            ),
            $(
              go.TextBlock,
              textStyle(),
              {
                margin: 8,
                maxSize: new go.Size(560, NaN),
                wrap: go.TextBlock.WrapFit,
                editable: true,
              },
              new go.Binding('text').makeTwoWay(),
            ),
          ),
          $('TreeExpanderButton',
            { alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top },
            { visible: true }),
          // four named ports, one on each side:
          makePort('T', go.Spot.Top, go.Spot.TopCenter, false, true),
          makePort('L', go.Spot.Left, go.Spot.LeftCenter, true, true),
          makePort('R', go.Spot.Right, go.Spot.RightCenter, true, true),
          makePort('B', go.Spot.Bottom, go.Spot.BottomCenter, true, false),
        ),
      );
      // 圆形开始
      myDiagram.nodeTemplateMap.add(
        'Start',
        $(
          go.Node,
          'Spot',
          {
            resizable: true,
            resizeObjectName: 'SHAPE',
            selectionObjectName: 'SHAPE',
          },
          nodeStyle(),
          $(
            go.Panel,
            'Spot',
            $(
              go.Shape,
              'Rectangle', // 决定形状： Circle代表圆形，Rectangle代表正方形或者长方形，Diamond代表菱形
              {
                name: 'SHAPE',
                desiredSize: new go.Size(90, 40),
                fill: '#282c34',
                stroke: '#09d3ac',
                strokeWidth: 1.5,
              },
            ),
            $(
              go.TextBlock,
              'Start',
              textStyle(),
              {
                margin: 8,
                maxSize: new go.Size(360, NaN),
                wrap: go.TextBlock.WrapFit,
                editable: true,
              },
              new go.Binding('text').makeTwoWay(),
            ),
          ),
          $('TreeExpanderButton',
            { alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top },
            { visible: true }),
          // three named ports, one on each side except the top, all output only:
          makePort('T', go.Spot.Top, go.Spot.TopCenter, false, true),
          makePort('L', go.Spot.Left, go.Spot.LeftCenter, true, true),
          makePort('R', go.Spot.Right, go.Spot.RightCenter, true, true),
          makePort('B', go.Spot.Bottom, go.Spot.BottomCenter, true, false),
        ),
      );
      // 原型，结束样式
      myDiagram.nodeTemplateMap.add(
        'End',
        $(
          go.Node,
          'Table',
          nodeStyle(),
          {
            resizable: true,
            resizeObjectName: 'SHAPE',
            selectionObjectName: 'SHAPE',
          },
          $(
            go.Panel,
            'Spot',
            $(go.Shape, 'Circle', {
              desiredSize: new go.Size(60, 60),
              fill: '#282c34',
              stroke: '#DC3C00',
              strokeWidth: 3.5,
            }),
            $(go.TextBlock, 'End', textStyle(), new go.Binding('text')),
          ),
          $('TreeExpanderButton',
            { alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top },
            { visible: true }), // three named ports, one on each side except the bottom, all input only:
          makePort('T', go.Spot.Top, go.Spot.Top, false, true),
          makePort('L', go.Spot.Left, go.Spot.Left, false, true),
          makePort('R', go.Spot.Right, go.Spot.Right, false, true),
        ),
      );

      // taken from ../extensions/Figures.js:
      go.Shape.defineFigureGenerator('File', (shape, w, h) => {
        const geo = new go.Geometry();
        const fig = new go.PathFigure(0, 0, true); // starting point
        geo.add(fig);
        fig.add(new go.PathSegment(go.PathSegment.Line, 0.75 * w, 0));
        fig.add(new go.PathSegment(go.PathSegment.Line, w, 0.25 * h));
        fig.add(new go.PathSegment(go.PathSegment.Line, w, h));
        fig.add(new go.PathSegment(go.PathSegment.Line, 0, h).close());
        const fig2 = new go.PathFigure(0.75 * w, 0, false);
        geo.add(fig2);
        // The Fold
        fig2.add(new go.PathSegment(go.PathSegment.Line, 0.75 * w, 0.25 * h));
        fig2.add(new go.PathSegment(go.PathSegment.Line, w, 0.25 * h));
        geo.spot1 = new go.Spot(0, 0.25);
        geo.spot2 = go.Spot.BottomRight;
        return geo;
      });
      // 定义comment文本样式
      myDiagram.nodeTemplateMap.add(
        'Comment',
        $(
          go.Node,
          'Auto',
          nodeStyle(),
          $(go.Shape, 'File', {
            fill: '#282c34',
            stroke: '#DEE0A3',
            strokeWidth: 3,
          }),
          $(
            go.TextBlock,
            textStyle(),
            {
              margin: 8,
              maxSize: new go.Size(200, NaN),
              wrap: go.TextBlock.WrapFit,
              textAlign: 'center',
              editable: true,
            },
            new go.Binding('text').makeTwoWay(),
          ),
          // 没有端口，因为不允许链接连接注释 
        ),
      );

      //替换linkTemplateMap中默认的Link模板 
      myDiagram.linkTemplate = $(
        go.Link, // the whole link panel
        {
          routing: go.Link.AvoidsNodes,
          curve: go.Link.JumpOver,
          corner: 5,
          toShortLength: 4,
          relinkableFrom: true,
          margin: new go.Margin(10, 0, 10, 0),
          relinkableTo: true,
          reshapable: true,
          resegmentable: true,
          // mouse-overs subtly highlight links:
          mouseEnter: (e, link) => (link.findObject('HIGHLIGHT').stroke = 'rgba(30,144,255,0.2)'),
          mouseLeave: (e, link) => (link.findObject('HIGHLIGHT').stroke = 'transparent'),
          selectionAdorned: false,
        },
        new go.Binding('points').makeTwoWay(),
        $(
          go.Shape, // 高光形状，通常是透明的
          {
            isPanelMain: true,
            strokeWidth: 8,
            stroke: 'transparent',
            name: 'HIGHLIGHT',
          },
        ),
        $(
          go.Shape, // 链接路径形状，或者样式也可以设置
          { isPanelMain: true, stroke: 'gray', strokeWidth: 2 },
          new go.Binding('stroke', 'isSelected', sel => (sel ? 'dodgerblue' : 'gray')).ofObject(),
        ),
        $(
          go.Shape, // 箭头
          { toArrow: 'standard', strokeWidth: 0, fill: 'gray' },
        ),
        $(
          go.Panel,
          'Auto', //链接标签，通常不可见
          {
            visible: false,
            name: 'LABEL',
            segmentIndex: 2,
            segmentFraction: 0.5,
          },
          new go.Binding('visible', 'visible').makeTwoWay(),
          $(
            go.Shape,
            'RoundedRectangle', // 链接标签，通常不可见的标签形状 
            { fill: '#F8F8F8', strokeWidth: 0 },
          ),
          //这里是由于我不需要菱形那个形状，有需要的可以不用注释，还有连接线上的文字 Yes
          // $(
          //   go.TextBlock,
          //   'Yes',
          //   {
          //     textAlign: 'center',
          //     font: '10pt helvetica, arial, sans-serif',
          //     stroke: '#333333',
          //     editable: true,
          //   },
          //   new go.Binding('text').makeTwoWay(),
          // ),
        ),
      );

      // 如果链接来自“条件”节点，则使其可见。 
      // 这个监听器由“LinkDrawn”和“LinkRelinked”diagramevent调用。 
      function showLinkLabel(e) {
        const label = e.subject.findObject('LABEL');
        if (label !== null) label.visible = e.subject.fromNode.data.category === 'Conditional';
      }

      // LinkingTool和RelinkingTool使用的临时链接也是正交的: 
      myDiagram.toolManager.linkingTool.temporaryLink.routing = go.Link.Orthogonal;
      myDiagram.toolManager.relinkingTool.temporaryLink.routing = go.Link.Orthogonal;

      // 调用load？？？？？？？？？？？
      // 人造数据
      // this.load(myDiagram); // 从一些JSON文本加载一个初始图
      //启动初始化画布数据
      myDiagram.model = go.Model.fromJson(this.jsonData);
      
      const myPalette = $(
        go.Palette,
        this.$refs.myPaletteDiv, // must name or refer to the DIV HTML element
        {
          // Instead of the default animation, use a custom fade-down
          'animationManager.initialAnimationStyle': go.AnimationManager.None,
          InitialAnimationStarting: animateFadeDown, // Instead, animate with this function

          nodeTemplateMap: myDiagram.nodeTemplateMap, // share the templates used by myDiagram
          model: new go.GraphLinksModel([
            // specify the contents of the Palette
            { category: 'Start', text: '开始' },
            { Category: 'Assess', text: '业务组件' },
            { category: 'Conditional', text: '业务组件' },
            { category: 'End', text: '结束组件' },
            { category: 'Comment', text: 'Comment' },
          ]),
        },
      );

      // 这是默认动画的重新实现，只不过它是从向下淡入，而不是向上淡入。 
      function animateFadeDown(e) {
        const { diagram } = e;
        const animation = new go.Animation();
        animation.isViewportUnconstrained = true; // 因此，图表定位规则允许动画从屏幕外开始 
        animation.easing = go.Animation.EaseOutExpo;
        animation.duration = 900;
        //淡出“向下”，换句话说，从上面淡出 
        animation.add(
          diagram,
          'position',
          diagram.position.copy().offset(0, 200),
          diagram.position,
        );
        animation.add(diagram, 'opacity', 0, 1);
        animation.start();
      }
    },
    // 保存功能，我将数据传到父组件中
    save() {
      const data = this.myDiagramRefs.model.toJson();
      this.$emit('getJsonDataList', data); //导出数据
      this.myDiagramRefs.isModified = false;
    },
    // 初始化数据，形成画布
    load() {
      this.myDiagramRefs.model = go.Model.fromJson(this.jsonData);
      this.myDiagramRefs.isModified = true;
    },
    printDiagram() {
      const svgWindow = window.open();
      if (!svgWindow) return; // failure to open a new Window
      const printSize = new go.Size(700, 960);
      const bnds = myDiagram.documentBounds;
      let { x } = bnds;
      let { y } = bnds;
      while (y < bnds.bottom) {
        while (x < bnds.right) {
          const svg = myDiagram.makeSvg({
            scale: 1.0,
            position: new go.Point(x, y),
            size: printSize,
          });
          svgWindow.document.body.appendChild(svg);
          x += printSize.width;
        }
        x = bnds.x;
        y += printSize.height;
      }
      setTimeout(() => svgWindow.print(), 1);
    },
  },
};
</script>

<style scoped>
.example{
    margin-top: 5px;
}
.example-box{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.myPaletteDiv{
    width: 160px;
    background-color: rgb(24, 43, 133);
    position: relative;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.canvas-right{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    user-select: none;
    touch-action: none;
    width: 160px;
    height: 700px;
    overflow: hidden;
}
.right-box{
    position: absolute;
    width: 160px;
    height: 700px;
    overflow: hidden;
    z-index: 1;
}
.right-box-item{
    position: absolute;
    width: 1px;
    height: 1px
}
/* 主画布区域 */
.myDiagramDiv{
    flex-grow: 1;
    height: 700px;
    margin-right: 2px;
    background-color: rgb(24, 43, 133);
    position: relative;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    cursor: auto;
}
.canvas-left{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    user-select: none;
    touch-action: none;
    width: 954px;
    height: 700px;
    cursor: auto;
}
.left-box{
    position: absolute;
    width: 954px;
    height: 700px;
    z-index: 1;
}
.left-box-item{
    position: absolute; width: 1px; height: 1px
}
.text{
    color: rgba(255,0,255,0.5);
    background: #00A9C9;
}
</style>

二、加入的一些功能以及代码实现

1. 加入树形收缩节点

代码片段
效果图：

2.可收缩大小

代码片段
效果图：

样式什么的可以自己设置

三、翻译部分文档

一.按钮

为了您的方便，我们定义了几个常用的面板。这些按钮包括"Button"、“TreeExpanderButton”、“SubGraphExpanderButton”、“PanelExpanderButton”、“ContextMenuButton"和"CheckBoxButton”。 "ContextMenuButton"通常在"ContextMenu"面板内使用; “复选框按钮”用于实现“复选框”面板。

在调用GraphObject.make时，可以像使用面板派生类一样使用这些预定义的面板。它们被实现为面板中GraphObjects的简单可视化树，具有预先设置的属性和事件处理程序。

1.一般的按钮

diagram.nodeTemplate =
  $(go.Node, "Auto",
    { locationSpot: go.Spot.Center },
    $(go.Shape, "Rectangle",
      { fill: "gold" }),
    $(go.Panel, "Vertical",
      { margin: 3 },
      $("Button",
        { margin: 2,
          click: incrementCounter },
        $(go.TextBlock, "Click me!")),
      $(go.TextBlock,
        new go.Binding("text", "clickCount",
                       function(c) { return "Clicked " + c + " times."; }))
    )
  );

function incrementCounter(e, obj) {
  var node = obj.part;
  var data = node.data;
  if (data && typeof(data.clickCount) === "number") {
    node.diagram.model.commit(function(m) {
      m.set(data, "clickCount", data.clickCount + 1);
    }, "clicked");
  }
}

diagram.model = new go.GraphLinksModel(
  [ { clickCount: 0 } ]);

在这里插入图片描述

按钮只是控制形状的面板，它将围绕着你所赋予的任何内容。边界形状命名为“ButtonBorder”，以便您可以轻松设置或绑定其属性。
由所有“Button”定义的事件处理程序使用了额外的属性，这些属性没有在API中定义，但你可以在“Button”的定义中看到:Buttons.js。这些属性参数化按钮的外观。

diagram.nodeTemplate =
  $(go.Node, "Auto",
    { locationSpot: go.Spot.Center },
    $(go.Shape, "Rectangle",
      { fill: "gold" }),
    $(go.Panel, "Vertical",
      { margin: 3 },
      $("Button",
        {
          margin: 2,
          // 设置边框属性按钮的形状 
          "ButtonBorder.fill": "fuchsia",
          // 设置“按钮”本身事件处理程序使用的属性 
          "_buttonFillOver": "pink",
          click: function(e, button) { alert(button.findObject("ButtonBorder").fill); }
        },
        $(go.TextBlock, "fuchsia button\nwith pink highlight", { margin: 2, textAlign: "center" })
      ),
      $("Button",
        {
          margin: 2,
          // 设置边框属性按钮的形状 
          "ButtonBorder.figure": "Circle",
          "ButtonBorder.fill": "cyan",
          "ButtonBorder.stroke": "darkcyan",
          "ButtonBorder.strokeWidth": 3,
          // 设置“按钮”本身事件处理程序使用的属性 
          "_buttonFillOver": "white",
          "_buttonStrokeOver": "cyan",
          "_buttonFillPressed": "lightgray",
          click: function(e, button) { alert(button.findObject("ButtonBorder").stroke); }
        },
        $(go.TextBlock, "Circular\nbutton", { margin: 2, textAlign: "center" })
      ),
      $("Button",
        {
          margin: 2,
          click: function(e, button) { alert(button.findObject("PIC").source); }
        },
        // 按钮内容可以是任何东西——它不一定是一个TextBlock 
        $(go.Picture, "images/50x40.png", { name: "PIC", width: 50, height: 40 })
      ),
      $("Button",
        {
          margin: 2,
          // 按钮也可以通过设置或数据绑定禁用: 
          isEnabled: false,
          click: function(e, button) { alert("won't be alerted"); }
        },
        $(go.TextBlock, "disabled", { stroke: "gray" })
      )
    )
  );

diagram.model = new go.GraphLinksModel([ { } ]);

在这里插入图片描述

2.树扩展按钮 (TreeExpanderButtons)

这个也是我自己需要引入的按钮，上文已经介绍

扩展和折叠子树是很常见的。通过在节点模板中添加“TreeExpanderButton”的实例，很容易让用户控制这一点。该按钮调用CommandHandler。 collapseTree或CommandHandler。 expandTree取决于Node.isTreeExpanded的值。按钮图标的形状。图随节点值的变化而变化。 isTreeExpanded变化。

diagram.nodeTemplate =
  $(go.Node, "Spot",
    $(go.Panel, "Auto",
      $(go.Shape, "Rectangle",
        { fill: "gold" }),
      $(go.TextBlock, "Click small button\nto collapse/expand subtree",
        { margin: 5 })
    ),
    $("TreeExpanderButton",
      { alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top },
      { visible: true })
  );

diagram.layout = $(go.TreeLayout, { angle: 90 });

diagram.model = new go.GraphLinksModel(
  [ { key: 1 },
    { key: 2 } ],
  [ { from: 1, to: 2 } ] );

在这里插入图片描述

“TreeExpanderButton”是一个“按钮”，它持有一个显示“减线”或“增线”图形的形状，这取决于Node.isTreeExpanded的值。该形状被命名为“ButtonIcon”，因此您可以轻松地设置或绑定它的属性，以及“ButtonBorder”和“Button”本身的属性。

diagram.nodeTemplate =
  $(go.Node, "Spot",
    $(go.Panel, "Auto",
      $(go.Shape, "Rectangle",
        { fill: "gold" }),
      $(go.TextBlock, "Click small button\nto collapse/expand subtree",
        { margin: 5 })
    ),
    $("TreeExpanderButton",
      {
        // set the two additional properties used by "TreeExpanderButton"
        // that control the shape depending on the value of Node.isTreeExpanded
        "_treeExpandedFigure": "TriangleUp",
        "_treeCollapsedFigure": "TriangleDown",
        // set properties on the icon within the border
        "ButtonIcon.fill": "darkcyan",
        "ButtonIcon.strokeWidth": 0,
        // set general "Button" properties
        "ButtonBorder.figure": "Circle",
        "ButtonBorder.stroke": "darkcyan",
        "_buttonStrokeOver": "darkcyan"
      },
      { alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top },
      { visible: true })
  );

diagram.layout = $(go.TreeLayout, { angle: 90 });

diagram.model = new go.GraphLinksModel(
  [ { key: 1 },
    { key: 2 } ],
  [ { from: 1, to: 2 } ] );

在这里插入图片描述

3.SubGraphExpanderButtons

还经常需要展开和折叠包含子图的组。您可以通过向组模板添加“SubGraphExpanderButton”的实例来让用户控制这一点。该按钮调用CommandHandler。 collapseSubGraph或CommandHandler。 expandSubGraph取决于Group.isSubGraphExpanded的值。按钮图标的形状。图随Group值的变化而变化。 isSubGraphExpanded变化。

diagram.groupTemplate =
  $(go.Group, "Auto",
    $(go.Shape, "Rectangle",
      { fill: "gold" }),
    $(go.Panel, "Vertical",
      { margin: 5,
        defaultAlignment: go.Spot.Left },
      $(go.Panel, "Horizontal",
        $("SubGraphExpanderButton",
          { margin: new go.Margin(0, 3, 5, 0) }),
        $(go.TextBlock, "Group")
      ),
      $(go.Placeholder)
    )
  );

diagram.model = new go.GraphLinksModel(
  [ { key: 0, isGroup: true },
    { key: 1, group: 0 },
    { key: 2, group: 0 },
    { key: 3, group: 0 } ] );

在这里插入图片描述

“SubGraphExpanderButton”类似于“TreeExpanderButton”，因为它是一个“按钮”，其边框形状围绕图标形状。该形状被命名为“ButtonIcon”，因此您可以轻松地设置或绑定它的属性，以及“ButtonBorder”和“Button”本身的属性。

diagram.groupTemplate =
  $(go.Group, "Auto",
    $(go.Shape, "Rectangle",
      { fill: "gold" }),
    $(go.Panel, "Vertical",
      { margin: 5,
        defaultAlignment: go.Spot.Left },
      $(go.Panel, "Horizontal",
        $("SubGraphExpanderButton",
          {
            // 设置"SubGraphExpanderButton"使用的两个附加属性 
            // 根据Group.isSubGraphExpanded的值来控制形状 
            "_subGraphExpandedFigure": "TriangleUp",
            "_subGraphCollapsedFigure": "TriangleDown",
            // set other properties on the button icon
            "ButtonIcon.angle": -45,
            // 和按钮边框上的属性或按钮本身 
            "ButtonBorder.opacity": 0.0
          }),
        $(go.TextBlock, "Group")
      ),
      $(go.Placeholder)
    )
  );

diagram.model = new go.GraphLinksModel(
  [ { key: 0, isGroup: true },
    { key: 1, group: 0 },
    { key: 2, group: 0 },
    { key: 3, group: 0 } ] );

在这里插入图片描述

4.面板扩展按钮 (PanelExpanderButtons)

通常希望展开和折叠节点的一部分，从而显示或隐藏有时不需要的细节。通过在节点模板中添加“PanelExpanderButton”的实例，很容易让用户控制这一点。 GraphObject的第二个参数。 make应该是一个字符串，用于命名节点中GraphObject. make的元素。您希望按钮切换的可视属性。

diagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape,
      { fill: "gold" }),
    $(go.Panel, "Table",
      { defaultAlignment: go.Spot.Top, defaultColumnSeparatorStroke: "black" },
      $(go.Panel, "Table",
        { column: 0 },
        $(go.TextBlock, "List 1",
          { column: 0, margin: new go.Margin(3, 3, 0, 3),
            font: "bold 12pt sans-serif" }),
        $("PanelExpanderButton", "LIST1",
          { column: 1 }),
        $(go.Panel, "Vertical",
          { name: "LIST1", row: 1, column: 0, columnSpan: 2 },
          new go.Binding("itemArray", "list1"))
      ),
      $(go.Panel, "Table",
        { column: 1 },
        $(go.TextBlock, "List 2",
          { column: 0, margin: new go.Margin(3, 3, 0, 3),
            font: "bold 12pt sans-serif" }),
        $("PanelExpanderButton", "LIST2",
          { column: 1 }),
        $(go.Panel, "Vertical",
          { name: "LIST2", row: 1, column: 0, columnSpan: 2 },
          new go.Binding("itemArray", "list2"))
      )
    )
  );

diagram.model = new go.GraphLinksModel([
  {
    key: 1,
    list1: [ "one", "two", "three", "four", "five" ],
    list2: [ "first", "second", "third", "fourth" ]
  }
]);

在这里插入图片描述

“PanelExpanderButton”类似于“TreeExpanderButton”或“SubGraphExpanderButton”，因为它是一个“按钮”，其边框形状围绕图标形状。然而，此面板绑定形状。几何字符串而不是Shape.figure。

diagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape,
      { fill: "gold" }),
    $(go.Panel, "Table",
      { defaultAlignment: go.Spot.Top, defaultColumnSeparatorStroke: "black" },
      $(go.Panel, "Table",
        { column: 0 },
        $(go.TextBlock, "List 1",
          { column: 0, margin: new go.Margin(3, 3, 0, 3),
            font: "bold 12pt sans-serif" }),
        $("PanelExpanderButton", "LIST1",
          { column: 1,
            // 设置"PanelExpanderButton"使用的两个附加属性 
            // 根据GraphObject.visible的值来控制形状 
            // 命名为“LIST1”的对象的
            "_buttonExpandedFigure": "M0 0 L10 0",
            "_buttonCollapsedFigure": "M0 5 L10 5 M5 0 L5 10",
            "ButtonIcon.stroke": "blue",
            height: 16
          }),
        $(go.Panel, "Vertical",
          { name: "LIST1", row: 1, column: 0, columnSpan: 2 },
          new go.Binding("itemArray", "list1"))
      ),
      $(go.Panel, "Table",
        { column: 1 },
        $(go.TextBlock, "List 2",
          { column: 0, margin: new go.Margin(3, 3, 0, 3),
            font: "bold 12pt sans-serif" }),
        $("PanelExpanderButton", "LIST2",
          { column: 1,
            // 设置"PanelExpanderButton"使用的两个附加属性 
            // 根据GraphObject.visible的值来控制形状 
            //  命名为“LIST1”的对象的
            "_buttonExpandedFigure": "F M0 10 L5 0 10 10z",
            "_buttonCollapsedFigure": "F M0 0 L10 0 5 10z",
            "ButtonIcon.strokeWidth": 0,
            "ButtonIcon.fill": "blue"
          }),
        $(go.Panel, "Vertical",
          { name: "LIST2", row: 1, column: 0, columnSpan: 2 },
          new go.Binding("itemArray", "list2"))
      )
    )
  );

diagram.model = new go.GraphLinksModel([
  {
    key: 1,
    list1: [ "one", "two", "three", "four", "five" ],
    list2: [ "first", "second", "third", "fourth" ]
  }
]);

在这里插入图片描述

5.ContextMenuButtons和快捷菜单 (ContextMenuButtons and ContextMenus)

尽管您可以以任何您选择的方式实现上下文菜单，但通常使用预定义的“ContextMenuButton”。

diagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "Rectangle",
      { fill: "gold" }),
    $(go.TextBlock, "Use ContextMenu!",
      { margin: 5 })
  );

diagram.nodeTemplate.contextMenu =
  $("ContextMenu",
    $("ContextMenuButton",
      $(go.TextBlock, "Shift Left"),
      { click: function(e, obj) { shiftNode(obj, -20); } }),
    $("ContextMenuButton",
      $(go.TextBlock, "Shift Right"),
      { click: function(e, obj) { shiftNode(obj, +20); } })
  );

function shiftNode(obj, dist) {
  var adorn = obj.part;
  var node = adorn.adornedPart;
  node.diagram.commit(function(d) {
    var pos = node.location.copy();
    pos.x += dist;
    node.location = pos;
  }, "Shift");
}

diagram.model = new go.GraphLinksModel(
  [ { key: 1 } ] );

在这里插入图片描述

“ContextMenuButton”只是一个设置了一些属性的“按钮”。其中一个属性是GraphObject。它被设置为go.GraphObject.Horizontal，这样“ContextMenu”中的所有“ContextMenuButton”都将被拉伸到相同的宽度。但是你可以在它的“ButtonBorder”形状和按钮本身上设置所有常用的属性。

diagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "Rectangle",
      { fill: "gold" }),
    $(go.TextBlock, "Use ContextMenu!",
      { margin: 5 })
  );

diagram.nodeTemplate.contextMenu =
  $("ContextMenu",
    $("ContextMenuButton",
      {
        "ButtonBorder.fill": "yellow",
        "_buttonFillOver": "cyan",
        "_buttonFillPressed": "lime"
      },
      $(go.TextBlock, "Shift Left"),
      { click: function(e, obj) { shiftNode(obj, -20); } }
    ),
    $("ContextMenuButton",
      {
        "ButtonBorder.fill": "yellow",
        "_buttonFillOver": "cyan",
        "_buttonFillPressed": "lime"
      },
      $(go.TextBlock, "Shift Right"),
      { click: function(e, obj) { shiftNode(obj, +20); } }
    ),
    $("ContextMenuButton",
      { isEnabled: false },
      $(go.TextBlock, "Shift Right", { stroke: "gray" }),
      { click: function(e, obj) { alert("won't be alerted"); } }
    )
  );

function shiftNode(obj, dist) {
  var adorn = obj.part;
  var node = adorn.adornedPart;
  node.diagram.commit(function(d) {
    var pos = node.location.copy();
    pos.x += dist;
    node.location = pos;
  }, "Shift");
}

diagram.model = new go.GraphLinksModel(
  [ { key: 1 } ] );

在这里插入图片描述

6.CheckBoxButtons和复选框(CheckBoxButtons and CheckBoxes)

“CheckBoxButton”是一个“按钮”，它被配置为切换数据属性的布尔值。默认情况下，当值为false时按钮是清晰的，当值为true时显示一个复选标记，但是可以进行大量的定制。
定义“CheckBoxButton”时的第一个参数应该是一个字符串，该字符串指定保存“CheckBoxButton”的已检查状态的数据属性。如果不希望单击按钮来切换数据属性的值，请指定一个数据属性名称，该名称为空字符串。
在“CheckBox”面板的定义中使用了“CheckBoxButton”，这是一种将任何GraphObject关联为“CheckBoxButton”标签的方便方式。
“复选框”示例中显示了许多具有各种自定义的“复选框”示例。

7.按钮的定义(Button Definitions)

所有预定义按钮的实现都在Extensions目录下的buttons .js中提供。在创建自己的按钮时，您可能希望复制并改编这些定义。
这些定义可能不是GoJS中GraphObject.make使用的实际标准按钮实现的最新描述。
注意，这些按钮的定义使用了GraphObject.defineBuilder静态函数。它扩展了GraphObject的行为。允许通过带有可选参数的名称创建相当复杂的可视树。你可以在整个示例和扩展中找到各种控件的定义