SpacingZoom Directive - GoJS

问题

Here is my Plunker

The above Plunker is a basic example for connecting the nodes followed by the Links.

I would like to update my Plunker directive in order to add the SpacingZoom. Here is the example

The example is given for SpacingZoom in GoJS official website using javascript. I want that to be converted into an angular directive.

Here is my code

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, 180)
      }, {
        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>

Need one more solution, From the connected chart you can see the Links from Delta to Gamma, the line is drawing above the Alpha Node. I don't want to the lines to be drawn any of the nodes.

来源：https://stackoverflow.com/questions/46455546/spacingzoom-directive-gojs

标签

javascript

angularjs

angular-directive

gojs