GOjs笔记

259 阅读2分钟

1,收缩伸展按钮 "TreeExpanderButton" 详见gojs buttons

 g(
    "TreeExpanderButton",
    {
        width: 20,
        height: 20,
        "ButtonBorder.figure": "Circle",
        "ButtonIcon.stroke": "#1E9BFF",
        "ButtonBorder.fill": "#ffffff",
        "ButtonBorder.stroke": "#1E9BFF",
        _buttonFillOver: "#ffffff",
        _buttonStrokeOver: "#1E9BFF"
    },
    {
        alignment: go.Spot.Right, //按钮位置
        alignmentFocus: go.Spot.Left
    }
)

2,判断当前节点是否为叶子节点 Node.isTreeLeaf

 g(
    go.Shape,
    { strokeWidth: 1, stroke: "#108cee", height: 0, width: 40 },
    new go.Binding("visible", "isTreeLeaf", (isLeaf) => !isLeaf).ofObject() //当前为叶子节点时隐藏改Shape
)

5,添加特殊节点

const nodes = [	{        category: "GDS", // 定义category属性来标识特殊节点        key: "1",        text: "广东省公安厅",        img: "src/assets/images/lc1.png"    },]
// 在利用nodeTemplateMap.add 添加特殊节点
vm.myDia.nodeTemplateMap.add(
    "GDS",
    g(
        go.Node,
        "Vertical",
        g(
            go.Picture,
            {
                width: 72,
                height: 72
            },
            new go.Binding("source", "img")
        ),
        g(
            go.TextBlock,
            {
                font: "14px sans-serif",
                margin: 12
            },
            new go.Binding("text", "text")
        )
    )
);

6,去除节点选中框默认样式 和 节点点击事件

g(
  go.Node,
  "Vertical",
  {
      selectionAdorned: false, // 去除默认样式
      click: function (e, node) { // 点击事件 抛出node.data
          vm.isActive = node.data.key;
          vm.changeColor(node.data.key);
      },
      selectionChanged: function (node) { // 选中节点事件
          console.log(node.data)
      }
})

7,通过key获取当前选中data

const data = diagram.model.findNodeDataForKey(key)

8, 修改节点属性

diagram.model.setDataProperty(node.data, "type", "active")

9,获取当前节点位置

const position = vm.diagram.transformDocToView(node.getDocumentPoint(go.Spot.Center))

10, 使用Graphhobject标识为数据源

new Binding('isLeaf','isLeaf',function(v){ return v}).ofObject()

11, 设置小圆点位置 类似 Badge那种效果

// 设置圆点为右上角位置
alignment:go.Spot.TopRight
// 也可以设置坐标
alignment: new go.Spot(1, 0, 5, -5)

12, 自定义shape形状

 //RoundedTriangle 为定义的shape形状名称 
 go.Shape.defineFigureGenerator('Badge', function(shape, w, h) {
    var radius = h / 2,
    geo = new go.Geometry();

    // a single figure consisting of straight lines and half-circle arcs
    geo.add(new go.PathFigure(0, radius)
        .add(new go.PathSegment(go.PathSegment.Arc, 90, 180, radius, radius, radius, radius))
        .add(new go.PathSegment(go.PathSegment.Line, w - radius, 0))
        .add(new go.PathSegment(go.PathSegment.Arc, 270, 180, w - radius, radius, radius, radius))
        .add(new go.PathSegment(go.PathSegment.Line, radius, h).close()));

    // don't intersect with two top corners when used in an "Auto" Panel
    geo.spot1 = new go.Spot(0, 0, 0.1 * radius, 0.1 * radius);
    geo.spot2 = new go.Spot(1, 1, -0.1 * radius, 0);

    return geo;
});

13,设置margin值

margin: new go.Margin(0, 1, 0, 0)

14,设置边框虚线

strokeDashArray: [5, 10]
// 例如,数组[5,10]将创建5个像素的破折号和10个像素的空格。

15,改变数据类似于Vue的$set

// 这样写是具有监听行为的,只要数据改变页面就会相对改变
e.diagram.model.commit(function (m) {
    m.set(data,'active',true)
}, "clicked");

16,去掉节点或者连线选中效果

selectionAdorned: false