自定义属性和选择/下拉菜单

Question

I'm customising mxGraph and am looking into custom properties. I'm using the mxDraw template. Creating custom properties for a shape is easy enough such as the below (modifying 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>

When using mxDraw these properties are immediately visible and all is well, except I want to be able to choose a value for this property using a drop-down menu.

I'm having trouble finding an example of this elsewhere on the internet, and I'm not really sure what my options are here, or where to start.

In my mind there are a few options, but am hoping I can get some guidance on where to even start here...

• Disregard custom properties like the above and instead use a separate DIV, an event listener for selected shape and use HTML forms to capture properties/values
• Modify diagrameditor.xml like the above code snippet and somehow modify existing javascript library
• Some sort of hybrid of the above 2?

Eventually the resulting graph XML/data will be POSTed to the web server for storage, which can then merge/correlate data accordingly.

I know SO has some experienced mxGraph programmers so hoping to get some thoughts from those more experienced than I, so I can go and research. I can't seem to find what I'm looking for so far (in terms of guidance, examples or others attempting a similar thing).

Any help appreciated, thanks.

Answer 1

I kept researching and found a solution that suits me.

1. Update diagrameditor.xml and create custom data fields. Example shown in my original post
2. Create a new DIV on the page
3. Setup a listener for cell selection, add some HTML forms then use mxGraph calls to update the property values
4. To be done: disable the right-click menu so it cannot be updated manually using the text field, to ensure inputs are valid

Below is the starting code for the HTML page.

        <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>

I hope this question can be left here to serve as potential help for others. I'm still a new SO user, great community. Hope this can be my little contribution.