流程图控件GoJS教程：调试建议（下）

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。

GoJS现已更新至最新版本2.1发布，修复了一些bug，增强用户体验，赶快下载试试吧~

点击下载GoJS最新试用版

调试节点面板设计

在构建自己的节点模板时，有时节点中的对象的大小和位置可能无法达到您想要的方式。重要的是要了解如何在面板中组装对象。您将要重新阅读：

• 使用GraphObjects构建

• 文字区块

• 形状

• 图片

• 面板

• 桌子面板

• GraphObjects的大小

假设您要一个由两个TextBlock组成的节点，一个在另一个之上。您可以从以下开始：

diagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, { fill: "white" }),
    $(go.Panel, "Vertical",
      { margin: 3 },
      $(go.TextBlock,
        new go.Binding("text", "t1")),
      $(go.TextBlock,
        new go.Binding("text", "t2"))
    )
  );
diagram.model.nodeDataArray = [{ t1: "Top", t2: "Bottom"}];

但是，等等-您希望节点为固定大小。因此，您可以设置节点的宽度和高度：

diagram.nodeTemplate =
  $(go.Node, "Auto",
    { width: 80, height: 100 },
    $(go.Shape, { fill: "white" }),
    $(go.Panel, "Vertical",
      { margin: 3 },
      $(go.TextBlock,
        new go.Binding("text", "t1")),
      $(go.TextBlock,
        new go.Binding("text", "t2"))
    )
  );
diagram.model.nodeDataArray = [{ t1: "Top", t2: "Bottom"}];

看起来更好，但是您很惊讶两个TextBlocks都在中心附近。这是为什么？出于调试目的，让我们更改每个TextBlock和嵌套面板的GraphObject.background颜色。

diagram.nodeTemplate =
  $(go.Node, "Auto",
    { width: 80, height: 100 },
    $(go.Shape, { fill: "white" }),
    $(go.Panel, "Vertical",             { background: "red" },
      { margin: 3 },
      $(go.TextBlock,                   { background: "lime" },
        new go.Binding("text", "t1")),
      $(go.TextBlock,                   { background: "cyan" },
        new go.Binding("text", "t2"))
    )
  );
diagram.model.nodeDataArray = [{ t1: "Top", t2: "Bottom"}];

现在很明显，TextBlocks的大小不超过容纳文本的大小，Panel也不超过容纳两个TextBlocks的大小。

因此，您认为只需要GraphObject.stretch面板即可。

diagram.nodeTemplate =
  $(go.Node, "Auto",
    { width: 80, height: 100 },
    $(go.Shape, { fill: "white" }),
    $(go.Panel, "Vertical",             { background: "red" },
      { margin: 3, stretch: go.GraphObject.Fill },
      $(go.TextBlock,                   { background: "lime" },
        new go.Binding("text", "t1")),
      $(go.TextBlock,                   { background: "cyan" },
        new go.Binding("text", "t2"))
    )
  );
diagram.model.nodeDataArray = [{ t1: "Top", t2: "Bottom"}];

现在具有红色背景的面板确实填满了整个外部汽车面板，在其主要形状内充当边框。但是，石灰绿色和青绿色的TextBlocks仍然只是它们的自然高度。

如果您希望文本在垂直方向上均匀间隔，您可能会认为您只需要拉伸这两个TextBlocks。

diagram.nodeTemplate =
  $(go.Node, "Auto",
    { width: 80, height: 100 },
    $(go.Shape, { fill: "white" }),
    $(go.Panel, "Vertical",             { background: "red" },
      { margin: 3, stretch: go.GraphObject.Fill },
      $(go.TextBlock,                   { background: "lime" },
        { stretch: go.GraphObject.Fill },
        new go.Binding("text", "t1")),
      $(go.TextBlock,                   { background: "cyan" },
        { stretch: go.GraphObject.Fill },
        new go.Binding("text", "t2"))
    )
  );
diagram.model.nodeDataArray = [{ t1: "Top", t2: "Bottom"}];

现在，TextBlocks在水平而不是垂直拉伸！原因是垂直面板从不垂直拉伸其元素。它始终以其自然高度将其元素堆叠在一起。当垂直面板的高度超过其元素的堆叠时，底部将有多余的空间。

而不是垂直面板，我们应该使用表格面板。这需要在每个元素（即每个TextBlock）上分配GraphObject.row。

diagram.nodeTemplate =
  $(go.Node, "Auto",
    { width: 80, height: 100 },
    $(go.Shape, { fill: "white" }),
    $(go.Panel, "Table",             { background: "red" },
      { margin: 3, stretch: go.GraphObject.Fill },
      $(go.TextBlock,                { background: "lime" },
        { row: 0 },
        new go.Binding("text", "t1")),
      $(go.TextBlock,                { background: "cyan" },
        { row: 1 },
        new go.Binding("text", "t2"))
    )
  );
diagram.model.nodeDataArray = [{ t1: "Top", t2: "Bottom"}];

因为默认情况下元素在表格面板的单元格中居中，所以不需要拉伸TextBlocks。（您可以通过设置Panel.defaultAlignment或Panel.defaultStretch来更改它。）

我们都做完了吗？也许。文本更改大小会怎样？一种测试方法是使用长短字符串使用不同的模型数据创建一堆节点。

但是，为了演示另一种调试技术，我们将使Node Part.resizable。您可以交互地调整节点的大小（整个节点，因为我们没有设置Part.resizeObjectName），因此您可以看到嵌套的Panel和TextBlocks如何处理约束的大小。

diagram.nodeTemplate =
  $(go.Node, "Auto",                 { resizable: true },
    { width: 80, height: 100 },
    $(go.Shape, { fill: "white" }),
    $(go.Panel, "Table",             { background: "red" },
      { margin: 3, stretch: go.GraphObject.Fill },
      $(go.TextBlock,                { background: "lime" },
        { row: 0 },
        new go.Binding("text", "t1")),
      $(go.TextBlock,                { background: "cyan" },
        { row: 1 },
        new go.Binding("text", "t2"))
    )
  );
diagram.model.nodeDataArray = [{ t1: "Top String", t2: "Bottom String"}];
diagram.findNodeForData(diagram.model.nodeDataArray[0]).isSelected = true;

请注意，当节点变窄时，它将如何剪切文本而不是自动换行。假设您希望文本自动换行。

这可以通过水平拉伸TextBlocks来实现，这将定义它们的宽度，从而迫使文本换行。但是，当文本方向从左到右时，文本通常绘制在TextBlock边界的左侧。如果希望每个TextBlock在其边界内居中，则需要将TextBlock.textAlign设置为“ center”。

diagram.nodeTemplate =
  $(go.Node, "Auto",                 { resizable: true },
    { width: 80, height: 100 },
    $(go.Shape, { fill: "white" }),
    $(go.Panel, "Table",             { background: "red" },
      { margin: 3, stretch: go.GraphObject.Fill,
        defaultStretch: go.GraphObject.Horizontal },
      $(go.TextBlock,                { background: "lime" },
        { row: 0, textAlign: "center" },
        new go.Binding("text", "t1")),
      $(go.TextBlock,                { background: "cyan" },
        { row: 1, textAlign: "center" },
        new go.Binding("text", "t2"))
    )
  );
diagram.model.nodeDataArray = [{ t1: "Top String", t2: "Bottom String"}];
diagram.findNodeForData(diagram.model.nodeDataArray[0]).isSelected = true;

可以看到TextBlocks沿可用区域的宽度延伸。请注意，随着节点变窄，文本如何换行，从而导致TextBlocks变得更窄。当然，如果没有足够的空间来渲染所有文本，则将剪切TextBlocks。

现在我们只需要除去用于调试的彩色背景和可调整大小性，并分配所需的颜色和字体即可。

diagram.nodeTemplate =
  $(go.Node, "Auto",
    { width: 80, height: 100 },
    $(go.Shape, { fill: "white" }),
    $(go.Panel, "Table",
      { margin: 3, stretch: go.GraphObject.Fill,
        defaultStretch: go.GraphObject.Horizontal, background: "purple" },
      $(go.TextBlock,
        { row: 0, textAlign: "center", stroke: "white", font: "bold 11pt sans-serif" },
        new go.Binding("text", "t1")),
      $(go.TextBlock,
        { row: 1, textAlign: "center", stroke: "white", font: "bold 11pt sans-serif" },
        new go.Binding("text", "t2"))
    )
  );
diagram.model.nodeDataArray = [{ t1: "Top String", t2: "Bottom String"}];

====================================================

想要购买GoJS正版授权的朋友可以。