Как вы получаете текстовое значение из расширения DataInspector в GoJS? - PullRequest
Новая
       62

Как вы получаете текстовое значение из расширения DataInspector в GoJS?

1 голос
/ 07 ноября 2019

Я использую расширение Data Inspector, как показано здесь :

  • Я хотел бы просто ввести число в одно из полей (например, maxLinks)установить максимальное количество разрешенных ссылок с выбранного узла. Как я могу получить входные данные, введенные в одно из полей?

  • Кроме того, можно ли сделать то же самое с редактируемыми текстовыми полями (получить ввод текста)?

Большое спасибо.

1 Ответ

0 голосов
/ 08 ноября 2019

Как в примере, на который вы ссылаетесь, так и в типичном использовании, таком как в примере редактора организационных диаграмм, https://gojs.net/latest/samples/orgChartEditor.html, DataInspector показывает свойства объекта данных выбранного узла в модели. Некоторые из этих свойств доступны для редактирования. Когда пользователь изменяет значение и фокус теряется, код инспектора фиксирует транзакцию для изменения значения свойства этого объекта данных.

Поскольку существует Binding некоторого GraphObject свойство в шаблоне Node (или Link ), изменяющее свойство data путем вызова Model.set , обновит соответствующее свойство GraphObject, что приведет к появлению диаграммыдля обновления.

В вашем случае вам нужна привязка GraphObject.fromMaxLinks из свойства "maxLinks" объекта данных узла. Это показано в шаблоне узла ниже.

Обратите внимание, как работает привязка TextBlock.text , чтобы пользователь мог редактировать текст на месте или редактировать его в Инспекторе.

Полный образец: 

<!DOCTYPE html>
<html>
<head>
<title>GoJS Sample Using DataInspector</title>
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="https://unpkg.com/gojs"></script>
<link rel="stylesheet" href="../extensions/DataInspector.css" />
<script src="../extensions/DataInspector.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", portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" },
          // THIS IS THE CRUCIAL BINDING, from data.maxLinks to GraphObject.fromMaxLinks
          new go.Binding("fromMaxLinks", "maxLinks"),
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8, editable: true },
          new go.Binding("text").makeTwoWay())
      );

    myDiagram.model = new go.GraphLinksModel(
      [
        { key: 1, text: "Alpha", color: "lightblue" },
        { key: 2, text: "Beta", color: "orange" },
        { key: 3, text: "Gamma", color: "lightgreen" },
        { key: 4, text: "Delta", color: "pink" }
      ]);

    var inspector = new Inspector("myInspectorDiv", myDiagram,
      {
        properties:
        {
          key: { readOnly: true, show: Inspector.showIfPresent },
          maxLinks: { type: "number", defaultValue: Infinity, show: Inspector.showIfNode }
        }
      });
  }
</script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
  <div id="myInspectorDiv" class="inspector"></div>
</body>
</html>
...