拓展

GoJS 可以通过多种方式进行扩展。更改标准行为的最常见方法是在 GraphObject、Diagram 、CommandHandler 、Tool 或 Layout 上设置属性，但是，如果不存在此类属性，则需要重写 CommandHandler、Tool、Layout、Link 或 Node 的方法

---

常用的拓展

移动节点端口

需要使用自定义工具：PortShiftingTool()

调用myDiagram.toolManager.mouseMoveTools.insertAt(0, new PortShiftingTool());方法后，想要移动节点上端口的位置时，用户可以在端口元素上按住鼠标时按住 Shift 键。然后拖动将在节点内移动端口。

使用上述方法需要引入Gojs的扩展文件：（推荐将这个文件下载下来方到本地代码中直接引用）

import { PortShiftingTool } from './extensions/PortShiftingTool';

// 移动端口的端口设置
$(go.Shape, "Rectangle",
  { 
    width: 6, 
    height: 6, 
    portId: "Left",    // portId内容不能为空，否则这个端口是不能移动的
    fromSpot: go.Spot.Left,
    toSpot: go.Spot.Left,
    fromLinkable: true,
    toLinkable: true,
    cursor: 'pointer',
    alignment: new go.Spot(0, 0.5)   // 需要使用alignment进行布局
  }
),

调整节点大小

需要使用自定义工具：ResizingTool()

设置调整节点大小，需要取消设置节点原先的宽和高，调用自定义ResizeMultipleTool()方法：

myDiagram = $(go.Diagram, "diagramDiv", {
    "undoManager.isEnabled": true,
    "toolManager.mouseWheelBehavior": go.WheelMode.Zoom,
    resizingTool: new ResizeMultipleTool(),  // 设置元素大小的缩放
});

使用上述方法需要引入Gojs的扩展文件：（推荐将这个文件下载下来方到本地中直接引用）

import { ResizeMultipleTool } from './extensions/ResizeMultipleTool';

可拖动链接标签

需要使用自定义工具：LinkLabelDraggingTool()

调用myDiagram.toolManager.mouseMoveTools.insertAt(0, new LinkLabelDraggingTool());方法后就可以对链接线上的标签进行位置上的拖动

使用上述方法需要引入Gojs的扩展文件：（推荐将这个文件下载下来方到本地中直接引用）

import { LinkLabelDraggingTool } from './extensions/LinkLabelDraggingTools';

可拖动节点标签

需要使用自定义工具：NodeLabelDraggingTool()

调用myDiagram.toolManager.mouseMoveTools.insertAt(0, new NodeLabelDraggingTool());方法后就可以对节点上的标签进行位置上的移动

使用上述方法需要引入Gojs的扩展文件：（推荐将这个文件下载下来方到本地中直接引用）

import { NodeLabelDraggingTool } from './extensions/NodeLabelDraggingTool';

同时需要对节点文本进行设置：

$(go.TextBlock,
  { 
    margin: 10, 
    textAlign: 'center', 
    font: 'bold 14px Segoe UI,sans-serif', 
    stroke: '#484848', 
    editable: true,
    _isNodeLabel: true,    // 将此面板标记为可拖动标签
    cursor: "move"   // 鼠标放到节点上变成移动标志
  },
  new go.Binding('text', 'key').makeTwoWay(),  // 节点名称进行双向绑定
 ),
// 参数_isNodeLabel和cursor是必要的

节点对齐辅助

需要使用自定义工具：GuidedDraggingTool()

调用自定义GuidedDraggingTool()方法：

myDiagram = $(go.Diagram, "myDiagramDiv",{
    draggingTool: new GuidedDraggingTool(),  // 使用节点对齐辅助
    // 设置辅助对齐的线条的样式
    "draggingTool.horizontalGuidelineColor": "blue",  // 水平两侧的辅助线条为蓝色
    "draggingTool.verticalGuidelineColor": "blue",    // 垂直两侧的辅助线条为蓝色
    "draggingTool.centerGuidelineColor": "green",   // 节点中心的水平和垂直对齐的辅助线条为绿色
    "draggingTool.guidelineWidth": 1,    // 设置辅助对齐的线条的粗细
});

连接标签处于链接路径上

需要使用自定义工具：LinkLabelOnPathDraggingTool()

调用myDiagram.toolManager.mouseMoveTools.insertAt(0, new LinkLabelOnPathDraggingTool());方法后就可以实现连接上的标签移动完全保持在连接的路径上，标签的移动不会跑到连接线的外面

旋转节点

需要使用自定义工具：RotateMultipleTool()

调用自定义rotatingTool方法

myDiagram = $(go.Diagram, "diagramDiv", {
    "undoManager.isEnabled": true,
    "toolManager.mouseWheelBehavior": go.WheelMode.Zoom,
    rotatingTool: new RotateMultipleTool(),  // 旋转节点
});

同时还需要在节点模板中进行节点可旋转设置：

myDiagram.nodeTemplate =
    $(go.Node, "Spot", 
      { 
        resizable: true,
        rotatable: true   // 设置节点可旋转
      },
     )