GoJS устанавливает макет снизу вверх и перетаскивает узлы сверху

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

вот чего я хочу:

beforedrop

afterdrop

Я искал gojs api и попытался использовать go.LayeredDigraphLayout, gojs LayeredDigraphLayout, api сказал, что установите направление на 270 вверх, но похоже не работает ..

мои узлы по-прежнему располагаются сверху вниз, и когда я опускаю узел, он перемещается вниз ...

вот что у меня получилось:

раньше

после

вот мой код:

function init() {
    var $ = go.GraphObject.make;  // for conciseness in defining templates

    myDiagram = $(go.Diagram, "myDiagramDiv",
      {
        initialContentAlignment: go.Spot.Center,
        layout: $(go.GridLayout, { wrappingColumn: 2 }),
        "undoManager.isEnabled": true
      });

    myDiagram.groupTemplateMap.add("Group",
      $(go.Group, "Auto",
        {   resizable:  false,
            computesBoundsAfterDrag: true,
            layout: $(go.LayeredDigraphLayout,
                { columnSpacing: 5, direction: 180}),
            mouseDrop: function(e, grp) {
                    grp.addMembers(grp.diagram.selection, true);
            },
        },
        $(go.Shape, { fill: "white", stroke: "lightgray",width:200 }),
        $(go.Placeholder, { padding: 10 })
      ));

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        {
            mouseDrop: function(e, grp) {
                grp.diagram.currentTool.doCancel();
            }
        },
        $(go.Shape, "RoundedRectangle",
          new go.Binding("fill", "color")),
        $(go.TextBlock, { margin: 3 },
          new go.Binding("text", "key"))
      );
    myDiagram.model = new go.GraphLinksModel(
    [
      { key: "G1", isGroup: true, category: "Group" },
      { key: "G2", isGroup: true, category: "Group" },
      { key: "Alpha", color: "lightblue", group: "G1" },
      { key: "Beta", color: "orange", group: "G1" },
      { key: "Gamma", color: "lightgreen", group: "G1" },
      { key: "Delta", color: "pink", group: "G1" },
      { key: "Alpha2", color: "lightblue", group: "G2" },
      { key: "Beta2", color: "orange", group: "G2" },
      { key: "Gamma2", color: "lightgreen", group: "G2" },
      { key: "Delta2", color: "pink", group: "G2" }
    ]);
}
<script src="https://gojs.net/latest/release/go.js"></script>
<body onload="init()">
<div id="myDiagramDiv" style="flex-grow: 1; height: 500px; border: solid 1px black"></div>
</body>

я поместил код в git, просто html: GoJS_Layout_git

может кто-нибудь помочь мне с этой проблемой? огромное спасибо


javascript gojs
person Saint37    schedule 23.04.2018    source источник
comment
спасибо Уолтеру Нортвудсу! наконец, я использовал go.GridLayout, установил wrappingColumn равным 1 и установил его компаратор. Теперь проблема решена!   -  person Saint37    schedule 26.04.2018

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно заставить каждый Group.layout сортировать узлы в нужном вам порядке. LayeredDigraphLayout вам здесь не поможет, поскольку предполагается, что он переупорядочивает узлы в слое, чтобы уменьшить количество пересечений ссылок.

Вместо этого используйте GridLayout или TreeLayout и установите для них соответствующие свойства sorting и comparer. Последняя должна быть функцией, которая сравнивает два узла (при GridLayout) или два LayoutVertex (при TreeLayout) для сортировки. Примеры этого есть в документации, например на странице https://gojs.net/latest/api/symbols/TreeLayout.html#comparer

person Walter Northwoods    schedule 24.04.2018