【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直译为调色板,在视图上操作没有上方的图表那样自由,但可以将其中的元素拖入上方图表中。