Пропустить все узлы на пути между 2 узлами на диаграмме GoJS - PullRequest
Новая
       69

Пропустить все узлы на пути между 2 узлами на диаграмме GoJS

0 голосов
/ 17 февраля 2020

У меня есть диаграмма GoJS, где я хочу скрыть / показать все узлы на пути между любыми 2 выбранными узлами.

Например, на диаграмме A -> B -> C -> D

Я хочу скрыть узлы B и C, чтобы получилось что-то вроде этого A - (2) -> D

где (2) указывает, что скрыты 2 узла. Конечно, диаграмма может быть гораздо более сложной, и я хочу произвольно скрыть / показать узлы.

Я попытался сгруппировать элементы между 2 узлами, что работает для некоторого сценария ios, но, поскольку могут быть узлы для скрыть, что уже являются частью группы - я застрял.

Есть ли нестандартное (или очевидное) решение для этого в GoJS?

Thx

1 Ответ

0 голосов
/ 21 февраля 2020

В следующем коде предполагается, что вы не хотите хранить фиктивные узлы в модели. Скрытые узлы сделаны не видимыми , а фиктивный узел соединен фиктивными ссылками с теми же невыбранными узлами, с которыми были связаны теперь скрытые узлы. 

<!DOCTYPE html>
<html>
<head>
<title>Simple Coalescing of Nodes without using Collapsed Groups</title>
<!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="https://unpkg.com/gojs"></script>
<script id="code">
  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
          {
            layout: $(go.ForceDirectedLayout,
                      { maxIterations: 500, isRealtime: false }),
            "InitialLayoutCompleted": function(e) {
              e.diagram.nodes.each(function(g) {
                if (g instanceof go.Group) g.layout = null;
              });
            },
            "undoManager.isEnabled": true
          });

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        { width: 80, height: 50 },
        $(go.Shape,
          { fill: "white", portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" },
          new go.Binding("fill", "color")),
        $(go.TextBlock, { textAlign: "center" },
          new go.Binding("text"))
      );

    myDiagram.linkTemplate =
      $(go.Link,
        { relinkableFrom: true, relinkableTo: true },
        $(go.Shape),
        $(go.Shape, { toArrow: "OpenTriangle" })
      );

    myDiagram.groupTemplate =
      $(go.Group, "Auto",
        { layout: $(go.CircularLayout) },
        $(go.Shape, { fill: "#8882" }),
        $(go.Placeholder, { padding: 8 }),
        $(go.TextBlock, { font: "bold 12pt sans-serif" },
          new go.Binding("text", "key"))
      )

    myDiagram.model = new go.GraphLinksModel(
    [
      { key: 1, text: "Concept Maps" },
      { key: 2, text: "Organized Knowledge" },
      { key: 3, text: "Context Dependent" },
      { key: 4, text: "Concepts", group: "G1" },
      { key: 5, text: "Propositions", group: "G1" },
      { key: 6, text: "Associated Feelings or Affect", group: "G1" },
      { key: 7, text: "Perceived Regularities" },
      { key: 8, text: "Labeled" },
      { key: 9, text: "Hierarchically Structured" },
      { key: 10, text: "Effective Teaching", group: "G2" },
      { key: 11, text: "Crosslinks", group: "G2" },
      { key: 12, text: "Effective Learning" },
      { key: 13, text: "Events (Happenings)" },
      { key: 14, text: "Objects (Things)" },
      { key: 15, text: "Symbols", group: "G3" },
      { key: 16, text: "Words", group: "G3" },
      { key: 17, text: "Creativity", group: "G3" },
      { key: 18, text: "Interrelationships" },
      { key: 19, text: "Infants" },
      { key: 20, text: "Different Map Segments" },
      { key: "G1", isGroup: true },
      { key: "G2", isGroup: true },
      { key: "G3", isGroup: true }
    ],
    [
      { from: 1, to: 2, text: "represent" },
      { from: 2, to: 3, text: "is" },
      { from: 2, to: 4, text: "is" },
      { from: 2, to: 5, text: "is" },
      { from: 2, to: 6, text: "includes" },
      { from: 2, to: 10, text: "necessary\nfor" },
      { from: 2, to: 12, text: "necessary\nfor" },
      { from: 4, to: 5, text: "combine\nto form" },
      { from: 4, to: 6, text: "include" },
      { from: 4, to: 7, text: "are" },
      { from: 4, to: 8, text: "are" },
      { from: 4, to: 9, text: "are" },
      { from: 5, to: 9, text: "are" },
      { from: 5, to: 11, text: "may be" },
      { from: 7, to: 13, text: "in" },
      { from: 7, to: 14, text: "in" },
      { from: 7, to: 19, text: "begin\nwith" },
      { from: 8, to: 15, text: "with" },
      { from: 8, to: 16, text: "with" },
      { from: 9, to: 17, text: "aids" },
      { from: 11, to: 18, text: "show" },
      { from: 12, to: 19, text: "begins\nwith" },
      { from: 17, to: 18, text: "needed\nto see" },
      { from: 18, to: 20, text: "between" }
    ]);
  }

  function test() {
    if (myDiagram.selection.count === 0) return;
    if (myDiagram.selection.count === 1 && myDiagram.selection.first().hidden !== null) {
      // only expand a single coalesced node (dummy) at a time
      myDiagram.commit(function(diag) {
        var dummy = diag.selection.first();
        diag.remove(dummy);  // also removes connected links that are dummies
        dummy.hidden.each(function(n) {
          n.visible = true;
        });
        diag.selectCollection(dummy.hidden);
      }, "expanded");
    } else {
      myDiagram.commit(function(diag) {
        var $ = go.GraphObject.make;
        var dummy = $(go.Node, "Auto",
                      { locationSpot: go.Spot.Center },
                      $(go.Shape, "Circle", { fill: "yellow" }),
                      $(go.TextBlock, "hidden\nnodes", { textAlign: "center" })
                    );
        dummy.hidden = new go.Set();  // keep track of the nodes that it represents
        diag.selection.each(function(n) {
          if (n instanceof go.Node) {
            dummy.hidden.add(n);
            n.visible = false;
            new go.List(n.linksConnected).each(function(l) {
              if (!l.fromNode.isSelected || !l.toNode.isSelected) {
                var dum = $(go.Link,
                            $(go.Shape, { stroke: "brown" }),
                            $(go.Shape, { toArrow: "OpenTriangle", stroke: "brown" }));
                if (!l.fromNode.isSelected) dum.fromNode = l.fromNode;
                if (!l.toNode.isSelected) dum.toNode = l.toNode;
                if (!dum.fromNode) dum.fromNode = dummy;
                if (!dum.toNode) dum.toNode = dummy;
                diag.add(dum);
              }
            });
          }
        });
        dummy.location = diag.computePartsBounds(diag.selection).center;
        diag.add(dummy);
        diag.select(dummy);
      }, "coalesced nodes");
    }
  }
</script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
  <button onclick="test()">Test</button> to hide selected nodes,
  replaced by a temporary yellow node and temporary brown links that are not in the model
</body>
</html>
...