GoJs调色板绘图模板--Palette

前言

在可视化图形的绘制过程中，有些需求则是需要用户临时去定制，我们去提供一些用户可能用到的节点类型供用户选择。从选择画布中直接拖动到项目画布中实现一个可视化图形。这种方式gojs提供了一种方案就是调色板go.Palette，而内部提供的可以选择的节点称之为元器件。

go.Palette的介绍

go.Palette其实是和go.Diagram类似的，本身也是一块画布，但是和go.Diagram不同的是go.Palette画布是只读的，并且默认设置了allowDragOut属性为true.而allowDragOut属性设置的是用户是否可以在此关系图中启动拖放操作，并且可能会拖放到其他元素中。如果你想修改内部元器件的显示顺序，可以直接设置Palette.model.nodeDataArray数组中的数据顺序。或者也可以通过Palette.layout.sorting来对元器件按指定的顺序进行排列。

go.Palette的使用

在示例中分别设置两个调色板和一个画布

//data
myDiagram:null,
campPalette:null,
characterPalette:null,
compPaletteData:[
    { key: "A", color: "#FF0000",text:"阵营1",figure:"Rectangle" },
    { key: "B", color: "#FFFF66",text:"阵营2",figure:"Rectangle"},
    { key: "C", color: "#0000FF",text:"阵营3",figure:"Rectangle"  },
],
characterPaletteData:[
    { key: "a", color: "#99FFFF",text:"文臣",figure:"Circle" },
    { key: "b", color: "#33FF33",text:"武将",figure:"Circle" },
    { key: "c", color: "#0033FF",text:"谋士",figure:"Circle" },
    { key: "d", color: "#9999FF",text:"山野",figure:"Circle" },
]

//methods
this.myDiagram = $$(go.Diagram, "myDiagramDiv");
this.myDiagram.nodeTemplate =
    $$(go.Node, "Vertical",
    $$(go.Shape, "Circle",
        { width: 30, height: 30 },
        new go.Binding("fill", "color"),
        new go.Binding("figure", "figure"),
        { portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" }),
    $$(go.TextBlock, { margin: 5,editable: true, },
        new go.Binding("text", "text"))
    );
this.myDiagram.undoManager.isEnabled = true;
this.campPalette = $$(go.Palette, "myPaletteDiv");
this.campPalette.nodeTemplate =
    $$(go.Node, "Vertical",
    $$(go.Shape,"Rectangle",
        { width: 30, height: 30, fill: "white" },
        new go.Binding("fill", "color")),
        new go.Binding("figure", "figure"),
    $$(go.TextBlock,
        new go.Binding("text", "text"))
    );
this.campPalette.model.nodeDataArray = this.compPaletteData;
this.characterPalette =$$(go.Palette, "myPaletteDiv2",
    { 
        layout: $$(go.GridLayout, { alignment: go.GridLayout.Location })
    });
this.characterPalette.nodeTemplate =
    $$(go.Node, "Vertical",
    { locationObjectName: "TB", locationSpot: go.Spot.Center },
    $$(go.Shape,"Circle",
        { width: 30, height: 30, fill: "white" },
        new go.Binding("fill", "color")),
        new go.Binding("figure", "figure"),
    $$(go.TextBlock, { name: "TB" },
        new go.Binding("text", "text"))
    );
this.characterPalette.model.nodeDataArray = this.characterPaletteData;

go.Diagram、go.Palette两者实例化绑定容器

在上面的示例中，首先是分别创建了两个调色板容器为id为myPaletteDiv为myPaletteDiv2.另外创建一个画布容器id为myDiagramDiv。两者的实例化都是通过对应的go.Diagram和go.Palette来绑定对应的容器。两个调色板分别为阵营和人物。

如何拖拽之后正方形的阵营节点和圆形的任务节点仍然保持原样

如果我们对画布的go.Shape以及调色板的go.Shape都传入一个固定的图形结构的话,这样除非我们三者都显示成同一种图形，否则上图之后图形立马会发生改变.这个时候就需要动态设置对应的属性figure来实现不同的图形配置。而go.Shape的几何图形显示除了可以在对应的nodeDataArray中固定写死之外，还可以通过new go.Binding("figure", "figure")的第三个参数的回调函数来通过数据中的其他字段进行判断其图形的不同显示。

在拖拽之后我们通过go.TextBlock的editable属性来开启双击之后修改其文字描述信息，通过Diagram.undoManager.isEnabled属性来开启节点的手动连线。

总结

大多数的可视化图形是需要根据用户的需求整理之后生成一个图形的基础版，然后通过节点或者其内部元素的点击等交互时间来对节点进行增删改查实现图形的拓展。但是也有需求就是今天提到的，通过提供不同类型的元器件让用户自己对图形进行一个组合编辑实现他需要的需求。