Пользовательские свойства и выбор/раскрывающиеся меню

Я настраиваю mxGraph и изучаю пользовательские свойства. Я использую шаблон mxDraw. Создать настраиваемые свойства для фигуры достаточно просто, например, как показано ниже (изменение диаграммаeditor.xml):

        <add as="rectangle">
            <Rect label="Rectangle" href="" new_property="hi there">
                <mxCell vertex="1"> 
                    <mxGeometry as="geometry" width="80" height="40"/>
                </mxCell>
            </Rect>
        </add>

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

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

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

  • Игнорируйте пользовательские свойства, подобные приведенным выше, и вместо этого используйте отдельный DIV, прослушиватель событий для выбранной формы и используйте формы HTML для захвата свойств/значений.
  • Измените диаграммный редактор.xml, как приведенный выше фрагмент кода, и каким-либо образом измените существующую библиотеку javascript.
  • Какой-то гибрид вышеперечисленных 2?

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

Я знаю, что в SO есть несколько опытных программистов mxGraph, поэтому я надеюсь получить некоторые мысли от более опытных, чем я, поэтому я могу пойти и исследовать. Кажется, я пока не могу найти то, что ищу (с точки зрения руководства, примеров или других попыток сделать что-то подобное).

Любая помощь приветствуется, спасибо.


javascript mxgraph
person chopper24    schedule 19.11.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я продолжил исследования и нашел решение, которое меня устроило.

  1. Обновите диаграммный редактор.xml и создайте настраиваемые поля данных. Пример показан в моем исходном посте
  2. Создайте новый DIV на странице
  3. Настройте прослушиватель для выбора ячеек, добавьте несколько HTML-форм, затем используйте вызовы mxGraph для обновления значений свойств.
  4. Что нужно сделать: отключите контекстное меню, чтобы его нельзя было обновить вручную с помощью текстового поля, чтобы обеспечить правильность ввода.

Ниже приведен начальный код HTML-страницы.

        <div id="customdata" style="position:relative;padding-left:100px;padding-top:10px;">
            <script>
            var selectedCell;

            mxGraph.prototype.addListener(mxEvent.CLICK, function(sender, event){

                selectedCell = event.getProperty('cell');

                //update DIV content example. Show cell ID and a drop-down to update a custom data field called 'new_property' (as created in diagrameditor.xml)
                var newhtml = "Cell ID is: ";
                newhtml += selectedCell.getId();

                newhtml += `<select><option id="selectmenu" value="one">one</option><option value="two">two</option></select>`
                newhtml += `<button onclick="updateCustomData();">save</button>`

                document.getElementById("customdata").innerHTML = newhtml;

                //Can also iterate through a multiple-selection and do more things, if need be
                /*
                for (var i = 0; i < sender.getSelectionCount(); i++) {
                    //example, alert showing the label of the cell at this array index i
                    alert(sender.getSelectionCells()[i].getAttribute('label', ''));
                }
                */
            });

            function updateCustomData() {
                selectedCell.setAttribute("new_property", document.getElementById("selectmenu").value);
            }
            </script>
            div content
        </div>

Я надеюсь, что этот вопрос можно оставить здесь, чтобы он мог помочь другим. Я все еще новый пользователь SO, отличное сообщество. Надеюсь, это будет мой небольшой вклад.

person chopper24    schedule 21.11.2019