Как настроить панель инструментов mxgraph и панель свойств - PullRequest
Новая
       30

Как настроить панель инструментов mxgraph и панель свойств

1 голос
/ 12 марта 2019

Я пишу веб-приложение.У меня есть рабочий процесс в моем приложении, это означает, что мы должны создать наш рабочий процесс, извлечь из него данные и сохранить в базе данных.

Я выбрал mxgraph для разработки рабочего процесса.На данный момент мне нужно настроить его для моего проекта: 1. Пользовательская панель инструментов, которая просто содержит некоторые инструменты для bpmn и рабочего процесса.2. Возможность двойного щелчка мышью на элементах и ​​открытия модального окна для создания атрибутов элемента.

Как я могу это сделать?Я читаю документы, но мне было не понятно.

1 Ответ

2 голосов
/ 12 марта 2019

Я предполагаю, что вы используете GraphEditorExample

  1. Вы можете создать новую боковую панель, используя следующий код:

На вашем 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');
...