【angular-gojs使用笔记】gojs-angular的基本使用。

最近需要用到gojs与angular进行一些需求的开发。

根据官网https://gojs.net/latest/intro/angular.html的这篇GoJS with Angular使用说明，除了gojs库本身外，还需安装gojs-angular这个库，使用以下命令完成安装：

npm install gojs gojs-angular

gojs-angular提供了三个angular组件，分别是gojs-diagram、gojs-palette和gojs-overview。
gojs-diagram提供以下API：

参数	说明	类型
[initDiagram]	图表初始化方法，需要返回一个go.Diagram实例（不能在方法中初始化数据模型）	() => go.Diagram
[nodeDataArray]	node数据	Array<go.ObjectData>
[linkDataArray]	link数据（可选）	Array<go.ObjectData>
[modelData]	model数据（可选）	go.ObjectData
[divClassName]	图表div的类名，通过此类名可以控制图表的样式	string
[skipsDiagramUpdate]	是否合并app数据和model数据	boolean
(modelChange)	图表Model改变时触发	EventEmitter<go.IncrementalData>

gojs-palette提供以下API：

参数	说明	类型
(initPalette)	调色板初始化方法	() => go.Palette
(nodeDataArray)	node数据	Array<go.ObjectData>
(linkDataArray)	link数据（可选	Array<go.ObjectData>
(modelData)	model数据（可选）	go.ObjectData
(divClassName)	调色板div的类名，通过此类名可以控制图表的样式	boolean
[modelChange]	Model改变时触发	EventEmitter<go.IncrementalData>

复制示例的代码进项目中，需要注意在@Component中将encapsulation属性设置为ViewEncapsulation.ShadowDom或ViewEncapsulation.None，不然通过divClassName属性设置的样式无法起到作用。

// app.component.ts
import { Component, ViewEncapsulation } from '@angular/core';
import * as go from 'gojs';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less'],
  encapsulation: ViewEncapsulation.ShadowDom,
})
export class AppComponent {
  title = 'GoJs-angular';

  // Big object that holds app-level state data
  // As of gojs-angular 2.0, immutability is required of state for change detection
  state = {
    // Diagram state props
    diagramNodeData: [
      { id: 'Alpha', text: 'Alpha', color: 'lightblue' },
      { id: 'Beta', text: 'Beta', color: 'orange' },
    ],
    diagramLinkData: [{ key: -1, from: 'Alpha', to: 'Beta' }],
    diagramModelData: { prop: 'value' },
    skipsDiagramUpdate: false,

    // Palette state props
    paletteNodeData: [
      { key: 'PaletteNode1', color: 'firebrick' },
      { key: 'PaletteNode2', color: 'blueviolet' },
    ],
  }; // end state object

  diagramDivClassName: string = 'myDiagramDiv';
  paletteDivClassName = 'myPaletteDiv';

  // initialize diagram / templates
  initDiagram(): go.Diagram {
    const $ = go.GraphObject.make;
    const dia = $(go.Diagram, {
      'undoManager.isEnabled': true,
      model: new go.GraphLinksModel({
        nodeKeyProperty: 'id',
        linkKeyProperty: 'key', // IMPORTANT! must be defined for merges and data sync when using GraphLinksModel
      }),
    });

    // define the Node template
    dia.nodeTemplate = $(
      go.Node,
      'Auto',
      $(
        go.Shape,
        'RoundedRectangle',
        { stroke: null },
        new go.Binding('fill', 'color')
      ),
      $(
        go.TextBlock,
        { margin: 8, editable: true },
        new go.Binding('text').makeTwoWay()
      )
    );
    return dia;
  }

  /**
   * Handle GoJS model changes, which output an object of data changes via Mode.toIncrementalData.
   * This method should iterate over thoe changes and update state to keep in sync with the FoJS model.
   * This can be done with any preferred state management method, as long as immutability is preserved.
   */
  diagramModelChange = function (changes: go.IncrementalData) {
    console.log(changes);
    // see gojs-angular-basic for an example model changed handler that preserves immutability
    // when setting state, be sure to set skipsDiagramUpdate: true since GoJS already has this update
  };

  initPalette(): go.Palette {
    const $ = go.GraphObject.make;
    const palette = $(go.Palette);

    // define the Node template
    palette.nodeTemplate = $(
      go.Node,
      'Auto',
      $(
        go.Shape,
        'RoundedRectangle',
        { stroke: null },
        new go.Binding('fill', 'color')
      ),
      $(go.TextBlock, { margin: 8 }, new go.Binding('text', 'key'))
    );

    palette.model = new go.GraphLinksModel({
      linkKeyProperty: 'key', // IMPORTANT! must be defined for merges and data sync when using GraphLinksModel
    });

    return palette;
  }
}

<!-- app.component.html -->
<gojs-diagram
  [initDiagram]='initDiagram'
  [nodeDataArray]='state.diagramNodeData'
  [linkDataArray]='state.diagramLinkData'
  [modelData]='state.diagramModelData'
  [skipsDiagramUpdate]='state.skipsDiagramUpdate'
  (modelChange)='diagramModelChange($event)'
  [divClassName]='diagramDivClassName'
  >
</gojs-diagram>

<gojs-palette
  [initPalette]='initPalette'
  [nodeDataArray]='state.paletteNodeData'
  [divClassName]='paletteDivClassName'>
</gojs-palette>

/* 不为组件设置长宽则无法显示。 */
.myDiagramDiv {
  background: whitesmoke;
  width: 800px;
  height: 300px;
  border: 1px solid black;
}

.myPaletteDiv{
  background: whitesmoke;
  width: 800px;
  height: 300px;
  border: 1px solid black;
}

随后可以在页面上看到如下显示：

在上方的是gojs-diagram组件渲染的内容，其中的元素可以随意拖动、删除和修改。
下方的则是gojs-palette渲染的内容，palette直译为调色板，在视图上操作没有上方的图表那样自由，但可以将其中的元素拖入上方图表中。