Самый подробный учебный материал по bpmn.js во всей сети — пользовательские статьи contextPad

внешний интерфейс
Самый подробный учебный материал по bpmn.js во всей сети — пользовательские статьи contextPad

предисловие

В: Что такое bpmn.js?

"

bpmn.jsЭто набор инструментов рендеринга BPMN2.0 и средство веб-моделирования, которое позволяет выполнять функцию рисования блок-схем во внешнем интерфейсе.

В: Почему я пишу эту серию учебников? 🤔️

"

Из-за потребностей бизнеса компании его необходимо использовать в проектеbpmn.js, Однако из-заbpmn.jsРазработчики игры зарубежные друзья,поэтому отечественных методических материалов мало и нет подробных документов.Поэтому много способов использования и много ям приходится искать самому.Поразмыслив,решил написать серию учебные материалы об этом. чтобы помочь большеbpmn.jsПользователи или разработчики, которые ищут хороший способ рисовать блок-схемы, в то же время для них это еще и своего рода консолидация.

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

Не просите похвалы👍 не просите сердца❤️ Я просто надеюсь, что смогу вам немного помочь.

Пользовательские статьи ContextPad

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

Давайте рассмотрим сначала,contextPadчто это такое?

Как показано на рисунке, помимо добавления узлов на панели инструментов слева, при щелчке по узлу также появляется небольшое всплывающее окно, в котором также можно добавлять узлы.contextPad.

Тогда, прочитав, вы сможете узнать:

по умолчаниюContextPadМодифицировано на основе

Предварительная подготовка

продолжимLinDaiDai/bpmn-vue-customразработка кейс-проекта.

существуетcomponentsсоздать новую папкуcustom-context-pad.vueфайл при настройке маршрута «пользовательский contextPad».

существуетcomponents/customсоздать новую папкуCustomContextPad.vueфайл для настройкиcontextPad.

записыватьCustomContextPad.vueкод

На самом деле обычайcontextPadа такжеpaletteОчень похоже, просто используяcontextPad.registerProvider(this)указать, что этоcontextPad, в то время как обычайpaletteиспользуетсяplatette.registerProvider(this).

код показывает, как показано ниже:

// CustomContextPad.js
export default class CustomContextPad {
    constructor(config, contextPad, create, elementFactory, injector, translate) {
        this.create = create;
        this.elementFactory = elementFactory;
        this.translate = translate;

        if (config.autoPlace !== false) {
            this.autoPlace = injector.get('autoPlace', false);
        }

        contextPad.registerProvider(this); // 定义这是一个contextPad
    }

    getContextPadEntries(element) {}
}

CustomContextPad.$inject = [
    'config',
    'contextPad',
    'create',
    'elementFactory',
    'injector',
    'translate'
];

Я думаю, что все уже видели это, но суть в том,getContextPadEntriesЭтот метод, давайте создадим этот метод следующим.

записыватьgetContextPadEntriesкод

На самом деле этот метод должен вернуть объект, то есть вам нужноcontextPadКакие пользовательские элементы отображаются в этом контейнере, например, мне нужно добавитьlindaidai-task, то мы можем добавить к возвращаемому объектуappend.lindaidai-taskэто свойство.

Значение атрибута представляет собой набор конфигураций для этого элемента, иpaletteкак в том числе:

  • группа: к какой группе он принадлежит, напримерtools、event、gateway、activityд., для классификации
  • className: имя класса стиля, мы можем использовать его для изменения стиля элемента
  • title: Подсказка, отображаемая над элементом при перемещении мыши.
  • действие: событие, которое будет запущено, когда пользователь выполнит действие

Вероятно, что-то вроде этого:

// CustomContextPad.js
getContextPadEntries(element) {
    return {
        'append.lindaidai-task': {
            group: 'model',
            className: 'icon-custom lindaidai-task',
            title: translate('创建一个类型为lindaidai-task的任务节点'),
            action: {
                click: appendTask,
                dragstart: appendTaskStart
            }
        }
    };
}

Далее нужно построитьappendTaskа такжеappendTaskStart

// CustomContextPad.js
getContextPadEntries(element) {
        const {
            autoPlace,
            create,
            elementFactory,
            translate
        } = this;

        function appendTask(event, element) {
            if (autoPlace) {
                const shape = elementFactory.createShape({ type: 'bpmn:Task' });
                autoPlace.append(element, shape);
            } else {
                appendTaskStart(event, element);
            }
        }

        function appendTaskStart(event) {
            const shape = elementFactory.createShape({ type: 'bpmn:Task' });
            create.start(event, shape, element);
        }

        return {
            'append.lindaidai-task': {
                group: 'model',
                className: 'icon-custom lindaidai-task',
                title: translate('创建一个类型为lindaidai-task的任务节点'),
                action: {
                    click: appendTask,
                    dragstart: appendTaskStart
                }
            }
        };
    }
}

здесь иpaletteОдно отличие в том, что есть дополнительный слойautoPlaceЯ не очень понимаю это.autoPlaceКакова его функция, поставить автоматически?И пример, приведенный официальным 🌰, написан так, если вы это знаете, пожалуйста, оставьте сообщение в области комментариев, спасибо~

ИсправлятьcontextPadродственные стили

Теперь посмотрим на эффект 😄...

bpmnCustom16.png
bpmnCustom16.png

Babble ~ Иисус, кажется, однако, эти маленькие строительные блоки слишком малы, маленькая полоска 😅, а затем переместите мышь вверх, желтый цвет фона прямо на крышке ...

bpmnCustom17.png
bpmnCustom17.png

фу, это невыносимо...

Надо найти способ исправить это и вернуть мне мои милые кубики ❤️...

Затем давайте откроем консоль, чтобы проверить элемент, мы можем обнаружить, что этот цвет фона является именем, называемым.djs-context-pad .entryСтиль, предоставляемый классом, возможно, мы можем изменить этот стиль глобально, давайте попробуем:

/* app.css */

/* 自定义 contextPad 的样式 */
.djs-context-pad .lindaidai-task.entry:hover {
background: url('hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/rules.png') center no-repeat!important;
background-size: cover!important;
}


.djs-context-pad .entry:hover { /* 重新修改了 hover 之后的样式 */
border: 1px solid #1890ff;
}


.djs-context-pad .entry {
box-sizing: border-box;
background-size: 94%;
transition: all 0.3s;
}

Откройте страницу, чтобы увидеть эффект.

bpmnCustom18.png
bpmnCustom18.png

Хорошо, решено, ха-ха 😄.

(Хотя изменение стиля напрямую не является лучшим решением, но это решение, которое я могу придумать до сих пор, и оно действительно может решить проблему)

полностью настраиваемыйContextPad

Предварительная подготовка

Точно так же, если вы научилисьпо умолчаниюContextPadМодифицировано на основе, затем полностью настраиваемыйContextPadУже почти 😁.

Но полностью индивидуальныйContextPadне называетсяcontextPad, ноcontextPadProvider, вроде мощнее 🤭...

Хорошо👌, давайтеcustomModeler/customсоздать новую папкуCustomContextPadProvider.jsдокумент.

записыватьCustomContextPadProvider.jsкод

Давайте сначала посмотрим на основную структуру:

// CustomContextPadProvider.js
export default function ContextPadProvider(contextPad, config, injector, translate, bpmnFactory, elementFactory, create, modeling, connect) {
  this.create = create
  this.elementFactory = elementFactory
  this.translate = translate
  this.bpmnFactory = bpmnFactory
  this.modeling = modeling
  this.connect = connect
  config = config || {}
  if (config.autoPlace !== false) {
      this._autoPlace = injector.get('autoPlace', false)
  }
  contextPad.registerProvider(this)
}

ContextPadProvider.$inject = [
  'contextPad',
  'config',
  'injector',
  'translate',
  'bpmnFactory',
  'elementFactory',
  'create',
  'modeling',
  'connect'
]

ContextPadProvider.prototype.getContextPadEntries = function(element) {}

Не смотрите на длинный код выше, на самом деле это ничего:

  • определитьContextPadProviderкласс, а затем ввести некоторые методы или свойства, которые мы будем использовать позже
  • пройти через$injectвводить
  • Переписать цепь прототипаgetContextPadEntriesметод

записыватьgetContextPadEntriesкод

Вы бы тоже нашли, суть в том, чтобы переписатьgetContextPadEntriesСюда.

Ну, вот я возьму простой пример, просто создаюlindaidai-task, Так что вы можете прямо поставитьИзменить на основе контекстной панели по умолчаниюв этом случаеgetContextPadEntriesСкопируйте код из:

// CustomContextPad.js
getContextPadEntries(element) {
        const {
            autoPlace,
            create,
            elementFactory,
            translate
        } = this;

        function appendTask(event, element) {
            if (autoPlace) {
                const shape = elementFactory.createShape({ type: 'bpmn:Task' });
                autoPlace.append(element, shape);
            } else {
                appendTaskStart(event, element);
            }
        }

        function appendTaskStart(event) {
            const shape = elementFactory.createShape({ type: 'bpmn:Task' });
            create.start(event, shape, element);
        }

        return {
            'append.lindaidai-task': {
                group: 'model',
                className: 'icon-custom lindaidai-task',
                title: translate('创建一个类型为lindaidai-task的任务节点'),
                action: {
                    click: appendTask,
                    dragstart: appendTaskStart
                }
            }
        };
    }
}

Теперь посмотрим на эффект:

bpmnCustom19
bpmnCustom19

Эффект, кажется, достигается, и его также можно создать, щелкнув и перетащив егоlindaidai-taskЭффект...

Но всегда кажется, что чего-то не хватает, потому что свет создаетtaskТипов но элементов мало, можно ли создать линии или реализовать функции редактирования и удаления элементов?Конечно можно, ха-ха 😄.

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

послесловие

В приведенных выше 👆 случаях используется один и тот же проект🦐

Git-адрес кейса проекта:LinDaiDai/bpmn-vue-customЕсли вам это нравится, пожалуйста, дайтеStar🌟 Да, спасибо😊

Рекомендации по сериалу:

"Самый подробный учебник по bpmn.js во всей сети - основы"

"Самый подробный учебный материал по bpmn.js во всей сети - http запрос"

"Самый подробный учебный материал по bpmn.js во всей сети - мероприятия"

"Самый подробный учебник по bpmn.js во всей сети - рендерер"

"Самый подробный учебник по bpmn.js во всей сети - редактирование и удаление узлов"

Категории