动态链接 - GoJS

Question

如何使用Go.js.

制作动态链接

使用下面的代码，我使用静态值创建了两个颜色链接。我想让这些值是动态的（应该取自范围）。

我在$scope.model中声明了颜色名称inColor和outColor分别代表开始和结束颜色。

这是我的代码和 Plunkr 示例：

scripts.js

var app = angular.module('app', []);

app.directive('goDiagram', function($http) {
  return {
    restrict: 'E',
    template: '<div></div>',
    replace: true,
    scope: {
      model: '=goModel'
    },
    link: function(scope, element, attrs) {
      if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
      var $ = go.GraphObject.make;
      var rainbow = $(go.Brush, "Linear", {
        0: "red",
        1: "green"
      });
      var diagram = $(go.Diagram, element[0], {
        nodeTemplate: $(go.Node, "Auto", {
            locationSpot: go.Spot.Center
          }, {
            width: 120,
            height: 15,
            locationSpot: go.Spot.Center
          },
          new go.Binding("location"),
          $(go.Shape, {
            fill: "#e74c3c",
            stroke: '#c0392b'
          }, {
            portId: "",
            cursor: "pointer",
            strokeWidth: 0,
          }),
          $(go.TextBlock, {
              margin: 0,
              stroke: "#eee"
            },
            new go.Binding("text", "key")
          )
        ),
        linkTemplate: $(go.Link, {
            routing: go.Link.AvoidsNodes,
            reshapable: true,
            resegmentable: true
          },
          $(go.Shape,
            { strokeWidth: 3 , stroke: rainbow },
            // new go.Binding("stroke", rainbow),
          ),
          $(go.Shape, {
            toArrow: "Standard"
          }),
        ),
      });

      function updateAngular(e) {
        if (e.isTransactionFinished) {
          scope.$apply();
        }
      }

      function updateSelection(e) {
        diagram.model.selectedNodeData = null;
        var it = diagram.selection.iterator;
        while (it.next()) {
          var selnode = it.value;
          // ignore a selected link or a deleted node
          if (selnode instanceof go.Node && selnode.data !== null) {
            diagram.model.selectedNodeData = selnode.data;
            break;
          }
        }
        scope.$apply();
      }
      // watch scope
      scope.$watch("model", function(newmodel) {
        if (newmodel != undefined) {
          var oldmodel = diagram.model;
          if (oldmodel !== newmodel) {
            diagram.removeDiagramListener("ChangedSelection", updateSelection);
            diagram.model = newmodel;
            diagram.addDiagramListener("ChangedSelection", updateSelection);
          }
        }
      });
    }
  }
});

app.controller('appController', function($scope) {
  $scope.init = function(d) {
    $scope.hello = "Hello Plunker!!!!";
    $scope.model = new go.GraphLinksModel(
      [{
        key: "Alpha",
        color: "lightblue",
        location: new go.Point(150, 130)
      }, {
        key: "Beta",
        color: "orange",
        location: new go.Point(350, 130)
      }, {
        key: "Gamma",
        color: "lightgreen",
        location: new go.Point(150, 230)
      }, {
        key: "Delta",
        color: "pink"
      }], [{
        from: "Alpha",
        to: "Beta",
        inColor: "red",
        outColor: "blue"
      }, {
        from: "Alpha",
        to: "Gamma",
        inColor: "yellow",
        outColor: "blue"
      }, {
        from: "Beta",
        to: "Gamma",
        inColor: "green",
        outColor: "pink"
      }, {
        from: "Gamma",
        to: "Delta",
        inColor: "black",
        outColor: "red"
      }, {
        from: "Delta",
        to: "Alpha",
        inColor: "violet",
        outColor: "green"
      }]);
    $scope.model.selectedNodeData = null;
  }
});

index.html

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.5.10" data-semver="1.5.10" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script>
    <script data-require="angular-route@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="https://gojs.net/latest/release/go.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="appController">
    <div ng-init="init()">
      <h1>{{hello}}</h1>
      <go-diagram go-model="model" style="border: solid 1px black; width:100%; height:400px"></go-diagram>
    </div>
  </body>

</html>

Plunkr

Answer 1

这里有一个转换函数，它在给定 Link 的情况下生成画笔：

function linkLinearBrush(link) {
  var b = new go.Brush(go.Brush.Linear);
  var fp = link.fromPort.getDocumentPoint(go.Spot.Center);
  var tp = link.toPort.getDocumentPoint(go.Spot.Center);
  var right = (tp.x > fp.x);
  var down = (tp.y > fp.y);
  if (right) {
    if (down) {
      b.start = go.Spot.TopLeft;
      b.end = go.Spot.BottomRight;
    } else {
      b.start = go.Spot.BottomLeft;
      b.end = go.Spot.TopRight;
    }
  } else {  // leftward
    if (down) {
      b.start = go.Spot.TopRight;
      b.end = go.Spot.BottomLeft;
    } else {
      b.start = go.Spot.BottomRight;
      b.end = go.Spot.TopLeft;
    }
  }
  b.addColorStop(0.0, link.data.inColor);
  b.addColorStop(1.0, link.data.outColor);
  return b;
}

在 link 模板中使用时：

myDiagram.linkTemplate =
  $(go.Link,
    $(go.Shape, { strokeWidth: 5 },
      new go.Binding("stroke", "", linkLinearBrush).ofObject())
  );

你得到这样的结果：

如果需要，更改转换函数以从连接的节点而不是从 link 数据获取颜色将是微不足道的。

动态链接 - GoJS

Dynamic Links - GoJS

javascript

angularjs

gojs