自定义属性和 select/drop 向下菜单

Question

我正在自定义 mxGraph 并正在研究自定义属性。我正在使用 mxDraw 模板。为形状创建自定义属性非常简单，如下所示（修改 diagrameditor.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 时，这些属性立即可见并且一切正常，只是我希望能够使用下拉菜单为此属性选择一个值。

我无法在 Internet 上的其他地方找到这方面的示例，而且我不太确定我的选择是什么，或者从哪里开始。

在我看来有几个选择，但我希望我能得到一些关于从哪里开始的指导...

忽略上面的自定义属性，而是使用单独的 DIV，所选形状的事件侦听器，并使用 HTML 表单捕获 properties/values
像上面的代码片段一样修改diagrameditor.xml并以某种方式修改现有的javascript库
以上两者的某种混合体？

最终生成的图表 XML/data 将被发布到网络服务器进行存储，然后可以 merge/correlate 相应地获取数据。

我知道 SO 有一些经验丰富的 mxGraph 程序员，所以希望从比我更有经验的人那里得到一些想法，所以我可以去研究。到目前为止，我似乎找不到我要找的东西（在指导、示例或其他尝试类似事情的方面）。

感谢任何帮助，谢谢。

Answer 1

我一直在研究，找到了适合我的解决方案。

更新 diagrameditor.xml 并创建自定义数据字段。我原来的例子 post
在页面上新建DIV
设置单元格选择的侦听器，添加一些 HTML 表单，然后使用 mxGraph 调用更新属性值
待完成：禁用右键单击菜单，使其无法使用文本字段手动更新，以确保输入有效

下面是 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 用户，很棒的社区。希望这可以成为我的一点贡献。

自定义属性和 select/drop 向下菜单

Custom properties and select/drop down menus

javascript

mxgraph