GOJS教程 -- 如何构建Parts

發表於   |   分類於   |  

Parts是一个图表对象，它继承自Panel。它是所有用户操作级别对象的基类。因为它继承自Panel，所以它实际上也是其他GraphObject可视对象的容器。也同样因为继承自Panel，所以它的超类是GraphObject，因此Parts也拥有GraphObject的属性，比如GraphObject.actualBounds、GraphObject.contextMenu、GraphObject.visible。

如果你只想创建一个用户可以选中并拖拽移动的可视对象，那么创建Parts就可以满足你。但通常情况下Parts并不能满足我们，所以我们一般创建的是Node和Link，它们都继承自Parts。
gojs框架提供两种构建对象的语法，即普通的JavaScript语法和gojs的进阶语法，下面我们来一一了解一下。

传统构建语法

Node是gojs中最低级的GraphObject对象容器，它只能包含继承自GraphObject对象的TextBlock和Shape对象。Node的父类Part可包含Node和Link对象，Node的超类Panel就能包含更多的GraphObject对象了。 Diagram是gojs中最大的GraphObject对象容器，Palette次之。
一个最简单的Node是由TextBlock和Shape组成的： 

var node = new go.Node(go.Panel.Auto);
var shape = new go.Shape();
shape.figure = "RoundedRectangle";
shape.fill = "lightblue";
node.add(shape);
var textblock = new go.TextBlock();
textblock.text = "Hello!";
textblock.margin = 5;
node.add(textblock);
diagram.add(node);

结果：
diagram

上面的图片就是通过上述代码创建的Diagram，虽然这里只是图片展示，但实际上他是有交互行为的，你可以选中Node，并拖拽移动。

虽然通过这种语法构建Diagram没有问题，但是如果工程量比较大的时候，这种方式会使代码的可读性变的很差，维护起来也很困难。幸好，gojs为我们提供了另一种构建Diagram的语法。

gojs构建语法

gojs定义了一个用于创建GraphObject对象的静态函数GraphObject.make。如果使用该方法创建对象，我们就不用再关心要创建什么样的对象变量名，什么地方该使用什么变量等。该方法还支持内嵌模式，这样的好处就是代码不会是一行一行罗列下来，而是能够表达出层级关系和所属关系的结构体。

GraphObject.make函数的参数量是可变的，但是第一个参数必须是一个GraphObject对象的子类。其他的参数一般有这么几种：

  • 普通JavaScript的键值对象，用于设置构建类型的相关属性比如{ figure:"RoundedRectangle" }。
  • 构建对象的子元素，比如说给Node里添加一个Shape。
  • 一个枚举类型的参数，一般该参数用于设定构建对象在Diagram中的排列方式，比如平铺排列、垂直排列等，以及嵌套元素的自适应方法。
  • 一个字符串，这个参数一般作为第二个参数，用于设置某个GraphObject子类型的第一属性，比如设置TextBlock的text、Shape的figure、Picture的source、Panel的type等。
  • 如果构建的是一个Table Panel，那么有一个RowCoumnDefinition属性，用于描述row和column的信息。不过有一点要注意的是，如果构建的是一个Diagram，那么这个字符串必须是DIV的id。
  • 一个JavaScript数组，它的作用有点像元组，如果过一个函数的返回类型由多个的时候，用它来储存。

下面我们用go.GraphObject.make语法来构建一个与上述例子相同的Diagram：

// 注意，这里的$可以更换，随你喜好    
var $ = go.GraphObject.make;
diagram.add(
$(go.Node, go.Panel.Auto,
  $(go.Shape,
    { figure: "RoundedRectangle",
      fill: "lightblue" }),
  $(go.TextBlock,
    { text: "Hello!",
      margin: 5 })
));

结果：
diagram

上面的代码还可以进行简化，将枚举类型参数替换为字符串，可参阅上文中提到的参数类型： 

var $ = go.GraphObject.make;
diagram.add(
$(go.Node, "Auto",
  $(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
  $(go.TextBlock, "Hello!", { margin: 5 })
));

结果：
diagram

使用go.GraphObject.make不仅可以构建可视对象，还可以方便的实例化gojs中的装饰对象，可以动态的创建某些作为参数或属性的对象。比如上述例子中的Node是蓝色，我们可以使用样式刷对象（Brush）对其颜色进行修饰： 

diagram.add(
$(go.Node, "Auto",
  $(go.Shape, "RoundedRectangle",
    { fill: $(go.Brush, go.Brush.Linear,
              { 0.0: "Violet", 1.0: "Lavender" }) }),
  $(go.TextBlock, "Hello!",
    { margin: 5 })
));

结果：
diagram
下面我们再来看一个构建Diagram的例子： 

var myDiagram =
$(go.Diagram, "myDiagramDiv",  // must name or refer to the DIV HTML element
  {
    // any initial diagram is centered in the viewport
    initialContentAlignment: go.Spot.Center,

    // don't initialize some properties until after a new model has been loaded
    "InitialLayoutCompleted": loadDiagramProperties,  // this DiagramEvent listener is defined below

    // have mouse wheel events zoom in and out instead of scroll up and down
    "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,

    // specify a data object to copy for each new Node that is created by clicking
    "clickCreatingTool.archetypeNodeData": { text: "new node" }
  });

function loadDiagramProperties(e) { . . . }

从上面的例子中可以看出，第二个参数为DIV的id，第三个参数就是键值对象了，其实就是json字符串，用于配置Diagram的相关属性。
我们也可以单独创建能够复用的对象，比如样式刷（Brush）：

var violetbrush = $(go.Brush, go.Brush.Linear, { 0.0: "Violet", 1.0: "Lavender" });

diagram.add(
$(go.Node, "Auto",
  $(go.Shape, "RoundedRectangle",
    { fill: violetbrush }),
  $(go.TextBlock, "Hello!",
    { margin: 5 })
));

diagram.add(
$(go.Node, "Auto",
  $(go.Shape, "Ellipse",
    { fill: violetbrush }),
  $(go.TextBlock, "Goodbye!",
    { margin: 5 })
));

结果：
diagram
分享到：