【GoJS教程】样式节点

下载GoJS最新版本

样式节点

通过创建由GraphObjects组成的模板以及在这些对象上设置属性来设置节点的样式。要创建一个Node，我们可以使用几个构建块类：

• Shape，用于显示带颜色的预定义或自定义几何体
• TextBlock，以各种字体显示（可编辑的）文本
• Picture，显示图片
• Panel，用于容纳其他物体的集合的容器，可以根据面板的类型（如桌子，垂直堆叠和拉伸容器）以不同的方式定位和调整尺寸

所有这些构建块都是从GraphObject抽象类派生的 ，因此我们随便将它们称为GraphObjects或对象或元素。请注意，GraphObject 不是 HTML DOM元素，因此创建或修改此类对象的开销不会太大。

我们希望模型数据属性影响我们的节点，这是通过数据绑定完成的。数据绑定允许我们通过自动将这些GraphObjects上的属性设置为从模型数据中获取的值来更改节点中GraphObjects的外观和行为。模型数据对象是纯JavaScript对象。您可以选择在模型中的节点数据上使用您喜欢的任何属性名称。

默认的Node模板很简单：包含一个TextBlock的节点。TextBlock的text属性和模型数据的key属性之间存在数据绑定。在代码中，模板看起来像这样：

myDiagram.nodeTemplate =
  $(go.Node,
    $(go.TextBlock,
      // TextBlock.text is bound to Node.data.key
      new go.Binding("text", "key"))
  );
      

TextBlocks，Shapes和Pictures是GoJS的原始构建块。TextBlocks不能包含图像; 形状不能包含文本。如果希望节点显示某些文本，则必须使用TextBlock。如果要绘制或填充某些几何图形，则必须使用“形状”。

更一般地说，Node模板的框架看起来像这样：

myDiagram.nodeTemplate =
  $(go.Node, "Vertical", // second argument of a Node/Panel can be a Panel type
    /* set Node properties here */
    { // the Node.location point will be at the center of each node
      locationSpot: go.Spot.Center
    },

    /* add Bindings here */
    // example Node binding sets Node.location to the value of Node.data.loc
    new go.Binding("location", "loc"),

    /* add GraphObjects contained within the Node */
    // this Shape will be vertically above the TextBlock
    $(go.Shape,
      "RoundedRectangle", // string argument can name a predefined figure
      { /* set Shape properties here */ },
      // example Shape binding sets Shape.figure to the value of Node.data.fig
      new go.Binding("figure", "fig")),

    $(go.TextBlock,
      "default text",  // string argument can be initial text string
      { /* set TextBlock properties here */ },
      // example TextBlock binding sets TextBlock.text to the value of Node.data.key
      new go.Binding("text", "key"))
  );

Panel中GraphObjects的嵌套可以任意深入，每个类都有自己独特的属性集可供探索，但这显示了一般的想法。

现在我们已经了解了如何制作Node模板，让我们看一个实例。我们将制作组织图中常见的简单模板 - 名称旁边的图像。请考虑以下Node模板：

“Horizontal”面板类型的节点，意味着其元素将并排水平布局。它有两个要素：

• 用于肖像的图片，其中包含图像源数据
• 名称的TextBlock，绑定了文本数据

var $ = go.GraphObject.make;
var myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      "undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
    });

// define a simple Node template
myDiagram.nodeTemplate =
  $(go.Node, "Horizontal",
    // the entire node will have a light-blue background
    { background: "#44CCFF" },
    $(go.Picture,
      // Pictures should normally have an explicit width and height.
      // This picture has a red background, only visible when there is no source set
      // or when the image is partially transparent.
      { margin: 10, width: 50, height: 50, background: "red" },
      // Picture.source is data bound to the "source" attribute of the model data
      new go.Binding("source")),
    $(go.TextBlock,
      "Default Text",  // the initial value for TextBlock.text
      // some room around the text, a larger font, and a white stroke:
      { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
      // TextBlock.text is data bound to the "name" attribute of the model data
      new go.Binding("text", "name"))
  );

var model = $(go.Model);
model.nodeDataArray =
[ // note that each node data object holds whatever properties it needs;
  // for this app we add the "name" and "source" properties
  { name: "Don Meow", source: "cat1.png" },
  { name: "Copricat", source: "cat2.png" },
  { name: "Demeter",  source: "cat3.png" },
  { /* Empty node data */  }
];
myDiagram.model = model;
      

该代码生成此图：

当不存在所有信息时，我们可能希望显示一些“默认”状态，例如，当图像未加载或名称未知时。此示例中的“空”节点数据用于显示节点模板可以在没有绑定数据的任何属性的情况下完美地工作。