如何自定义 mxgraph 工具栏和属性面板

Question

我正在编写 Web 应用程序。我的应用程序中有工作流，这意味着我们应该创建我们的工作流并从中提取数据并保存在数据库中。

我选择了 mxgraph 来设计工作流程。现在我需要为我的项目定制它： 1.自定义工具栏，只包含一些bpmn和工作流的工具。 2. 双击元素并打开创建元素属性的模式的能力。

我该怎么做？我阅读了文档，但对我来说不是很清楚。

Answer 1

我假设您使用的是 GraphEditorExample

您可以使用以下代码创建新的边栏：

在你的Sidebar.js


Sidebar.prototype.init = function()
{
    var dir = STENCIL_PATH;

    this.addYourPalette(true); // HERE YOU CAN ADD A NEW PALLETE
    this.addSearchPalette(true);
    this.addGeneralPalette(true); 
    this.addMiscPalette(false); 
    this.addAdvancedPalette(false); 
    this.addBasicPalette(dir);   
    this.addStencilPalette('arrows', mxResources.get('arrows'), dir + '/arrows.xml',
        ';whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#000000;strokeWidth=2');
    this.addUmlPalette(false);
    this.addBpmnPalette(dir, false);
    this.addImagePalette('clipart', mxResources.get('clipart'), dir + '/clipart/', '_128x128.png',
        ['Earth_globe', 'Empty_Folder', 'Full_Folder', 'Gear', 'Lock', 'Software', 'Virus', 'Email',
         'Database', 'Router_Icon', 'iPad', 'iMac', 'Laptop', 'MacBook', 'Monitor_Tower', 'Printer',
         'Server_Tower', 'Workstation', 'Firewall_02', 'Wireless_Router_N', 'Credit_Card',
         'Piggy_Bank', 'Graph', 'Safe', 'Shopping_Cart', 'Suit1', 'Suit2', 'Suit3', 'Pilot1',
         'Worker1', 'Soldier1', 'Doctor1', 'Tech1', 'Security1', 'Telesales1'], null,
         {'Wireless_Router_N': 'wireless router switch wap wifi access point wlan',
          'Router_Icon': 'router switch'});
};

您可以在这个创建函数的新调色板中定义您想要的元素：


Sidebar.prototype.addYourPalette = function(expand)
{
    var lineTags = 'line lines connector connectors connection connections arrow arrows ';

    var fns = [
        this.createVertexTemplateEntry('rounded=0;whiteSpace=wrap;html=1;', 120, 60, '', 'Rectangle', null, null, 'rect rectangle box'),
        this.createVertexTemplateEntry('rounded=1;whiteSpace=wrap;html=1;', 120, 60, '', 'Rounded Rectangle', null, null, 'rounded rect rectangle box'),

    ];

    this.addPaletteFunctions('New', 'New', (expand != null) ? expand : true, fns);
};

上面的示例将有 2 个元素：一个矩形和一个圆角矩形，但您可以将元素放在任何您喜欢的地方。

您可以使用以下示例向单元格添加新属性：

在你的Dialogs.js中使用函数


    function addProps(name) {
        // Avoid ':' in attribute names which seems to be valid in Chrome
        if (name.length > 0 && name != 'label' && name != 'placeholders' && name.indexOf(':') < 0) {
            try {
                var idx = mxUtils.indexOf(names, name);

                if (idx >= 0 && texts[idx] != null) {
                    texts[idx].focus();
                } else {
                    // Checks if the name is valid
                    var clone = value.cloneNode(false);
                    clone.setAttribute(name, '');

                    if (idx >= 0) {
                        names.splice(idx, 1);
                        texts.splice(idx, 1);
                    }

                    names.push(name);
                    var text = form.addTextarea(name + ':', '', 2);
                    text.style.width = '100%';
                    texts.push(text);
                    addRemoveButton(text, name);

                    text.focus();
                }

                nameInput.value = '';
            } catch (e) {
                mxUtils.alert(e);
            }
        } else {
            mxUtils.alert(mxResources.get('invalidName'));
        }
    }

然后调用传入你的参数的函数新的名称属性

    addProps('yourPropName');

如何自定义 mxgraph 工具栏和属性面板

How to customize mxgraph toolbar and properties panel

workflow

bpmn

mxgraph