Кнопки на панели с привязкой itemArray не отображаются

Я хочу вывести на левой панели выпадающий список кнопок, одна кнопка на одну «необходимость». Позже пользователь сможет добавить в список новую кнопку необходимости. Я использую панель с привязкой itemArray. Но кнопка не отображается при предложении: addNeed («Моя новая потребность»); выполняется. Я проверил пример «dynamicPorts», но не могу понять, почему он не работает.

<!DOCTYPE html>
<html>
<head>
  <meta name="minimumCode" content="width=device-width, initial-scale=1">
  <title>minimumCode</title>
  <meta name="description" content="Iso prototype Leon Levy" />
  <!-- Copyright 1998-2017 by Northwoods Software Corporation. -->
  <meta charset="UTF-8">
  <script src="https://unpkg.com/gojs/release/go-debug.js"></script>
  <span id="diagramEventsMsg" style="color: red"></span>
<script id="code">
var ellipseStrokeWidth=3;
var ellipseWidth = 80;
var ellipseHeight = 25;
var myFont = "16px sans-serif";
var myFontMedium = "23px sans-serif";
var myFontLarge = "30px sans-serif";
var needWidth = 170;
var needHeight = 20;
var needStrokeWidth = 0;
var needColor = 'purple';
var portSize = new go.Size(8, 8);
function init() {
  var $ = go.GraphObject.make;  //for conciseness in defining node templates
  myDiagram =
    $(go.Diagram, "myDiagramDiv",
      {
        "undoManager.isEnabled": true
      });
  myBannerNeeds =
      $(go.Diagram, "myBannerNeedsDiv",
          { layout: $(go.GridLayout, { wrappingColumn: 1, alignment: go.GridLayout.Position
                                      })}
        );
  myBannerNeeds.nodeTemplate =
  $(go.Node,
    $(go.Panel, "Vertical", //needs list buttons
    { alignment: new go.Spot(0, 0), row: 0, column: 0},
      new go.Binding("itemArray", "needsDataArray"),
      { itemTemplate:
          $(go.Panel,
            $(go.Shape, "Rectangle",
              { stroke: "red", strokeWidth: 2,
                height: 30, width: 30}
            ),
          $(go.TextBlock, { text: "...", stroke: "gray" },
          new go.Binding("text", "key"))
          )  // end itemTemplate
      }
    )  // end Vertical Panel
  );
  // Add a button to the needs panel.
  function addNeed(newNeedName) {
    myDiagram.startTransaction("addNeed");
      var button = $('Button',
                 $(go.Shape, "Rectangle",
                     { width: needWidth, height: needHeight, margin: 4, fill: "white",
                      stroke: "rgb(227, 18, 18)", strokeWidth: needStrokeWidth}),
                 $(go.TextBlock, newNeedName,  // the content is just the text label
                   {stroke: needColor, font: myFont }),
                   {click: function(e, obj) { needSelected(newNeedName); } }
                 );
      var needsNode = needsDataArray; //document.getElementById("ForNeeds");
      if (needsNode) { showMessage("needsNode is true; " + button)}
        else {showMessage("needsNode is false")};
        myDiagram.model.insertArrayItem(needsNode, -1, button);
    myDiagram.commitTransaction("addNeed");
  }// end function addNeed
  var needsDataArray = [];
  var linksNeedsDataArray = []; // always empty
  myBannerNeeds.model = new go.GraphLinksModel( needsDataArray, linksNeedsDataArray);
  myDiagram.grid.visible = true;
  myDiagram.model.copiesArrays = true;
  myDiagram.model.copiesArrayObjects = true;
  addNeed("My new need");
  function needSelected(e,obj) {
    alert("e:" + e + "; obj:" + obj + ' selected')
  }; //end function flowTypeSelected
  function showMessage(s) {
    document.getElementById("diagramEventsMsg").textContent = s;
  }
}// end function init
</script>
</head>
<body onload="init()">
  <div id="container" style= "display: grid; grid-template-columns: 1fr 5fr; margin:0 ; height: 800px; width:1080px; font-size:0; position: relative; ">
    <div id="ForNeeds">
      <div id="myBannerNeedsDiv" style="display: inline-block; width: 200px; min-height: 400px; background: whitesmoke; margin-right: 0px;  border: solid 1px purple;">
      </div>
    </div>
    <div id="myDiagramDiv" style="flex-grow: 1; width: 804px;height: 100%; border: solid 1px black;">
    </div>
</div>
</body>
</html>

arrays button drop-down-menu gojs
person user1438509    schedule 29.12.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вот базовая демонстрация того, о чем, я думаю, вы просите:

<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<script id="code">
  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        { "undoManager.isEnabled": true });

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape,
          { fill: "white" }),
        $(go.Panel, "Vertical",
          $(go.TextBlock,
            { margin: 4 },
            new go.Binding("text")),
          $(go.Panel, "Vertical",
            new go.Binding("itemArray", "buttons"),
            {
              itemTemplate:
                $("Button",
                  $(go.TextBlock, new go.Binding("text", "")),
                  {
                    click: function(e, button) {
                      alert(button.data);
                    }
                  }
                )
            }
          )
        )
      );

    myDiagram.model = new go.GraphLinksModel(
    [
      { key: 1, text: "Alpha", buttons: ["one", "two"] },
      { key: 2, text: "Beta", buttons: ["one"] }
    ],
    [
      { from: 1, to: 2 }
    ]);
  }

  function test() {
    myDiagram.commit(function(diag) {
      diag.selection.each(function(n) {
        if (n instanceof go.Node) {
          diag.model.addArrayItem(n.data.buttons, "another");
        }
      })
    })
  }
</script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
  <button onclick="test()">Test</button>
</body>
</html>

Выберите узел и нажмите кнопку HTML «Проверить». Он добавит элемент в массив data.buttons узла, что приведет к добавлению копии Panel.itemTemplate на эту панель. В этом случае этот шаблон элемента представляет собой просто «кнопку» GoJS, которая при нажатии вызывает alert со значением элемента, строкой.

Обратите внимание, что значение, добавленное к массиву JavaScript в данных, представляет собой простой объект - в данном случае просто строку, хотя обычно каждый элемент массива представляет собой объект JavaScript с различными свойствами. Я думаю, ваша проблема в том, что вы пытаетесь добавить GraphObjects в массив. Это нет-нет - вы не должны смешивать GraphObjects диаграммы с данными модели.

person Walter Northwoods    schedule 01.01.2020
comment
Я понял ошибку, которую совершил, включив в модель объект графика (кнопку). Ваш пример - это именно то, что я пытался сделать, и мне удалось включить его в свой код. - person user1438509; 03.01.2020