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

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

предисловие

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

"

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

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

"

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

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

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

Изменить, удалить стафорты узла

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

Вам также может понадобиться создать:Нить(bpmn:SequenceFlow), шлюз (ExclusiveGateway),Деятельность(Activities)и так далее для других типов узлов.

даже ты хочешьcontextPadОпределите функцию для удаления и редактирования узлов в .

Поэтому в этой главе мы в основном обсудим их.

Читая, вы узнаете:

contextPadфункция удаления включена

Давайте вернемся к случаю из предыдущей главы.Ха, проект остается предыдущим проектом.LinDaiDai/bpmn-vue-custom

Функция, которую вы хотите достичь:contextPadДобавьте функцию удаления (добавьте сюда небольшую корзину):

bpmnCustom20.png
bpmnCustom20.png

И когда вы нажмете на нее, вы можете удалить текущий узел...

давайте откроемCustomContextPad.jsфайл илиCustomContextPadProvider.jsфайл, затем вgetContextPadEntriesДобавьте в метод следующий код:

// CustomContextPad.js
getContextPadEntries(element) {
    const { modeling } = this // modeling需要利用CustomContextPad.$inject注册进来
    function removeElement(e) { // 点击的时候实现删除功能
        modeling.removeElements([element])
    }
    function deleteElement() { // 创建垃圾桶
        return {
            group: 'edit',
            className: 'icon-custom icon-custom-delete',
            title: translate('删除'),
            action: {
                click: removeElement
            }
        }
    }
    return {
        'append.lindaidai-task': {...},
        'delete': deleteElement() // 返回值加上删除的功能
    }
}

Видно, что основные моменты следующие:

  • БудуmodelingВведен, потому что использовать егоremoveElementsметод;
  • Определите функцию для рисования корзины
  • записыватьclassNameДля достижения функции изменения стиля по умолчанию

ОК👌, не забудь добавитьapp.cssДобавьте стиль корзины:

/* app.css*/
.icon-custom-delete {
    background-image: url('https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/delete.png');
}

.djs-context-pad .icon-custom-delete.entry:hover {
    background: url('https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/delete.png') center no-repeat!important;
    background-size: cover!important;
}

(настроитьmodelerсерединаCustomContextPadProvider.jsТакже написано?

Это реализовано в данном удалении.

contextPadфункция редактирования включена

На самом деле упомянутая здесь функция редактирования относится кcontextPadУстановите значок редактирования, и при нажатии на него может появиться всплывающее окно, или справа появится пользовательскоеproperties-panel, а затем здесь может отображаться некоторая информация об узле.

Причина этого:

  • То, что вы ожидаете, может не отображаться справа при нажатии на узелproperties-panel, но будетproperties-panelКак ящик скрыт справа, нажмитеcontextPadОдна из икон выходит справа.
  • нажмитеcontextPadОдин из значков получает информацию об узле текущего узла, а затем выполняет другие пользовательские операции.

Получите информацию об узле, щелкнув маленький значок

bpmnCustom21.png
bpmnCustom21.png

Как показано выше, сначала реализуйте эту функцию: щелкните значок редактирования, чтобы распечатать информацию об узле.

На самом деле это тоже очень просто.lindaidi-taskа такжеdeleteПосле этого, я полагаю, вы также усвоили некоторые правила.

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

// CustomContextPad.js
getContextPadEntries(element) {
    function clickElement(e) {
        console.log(element)
    }
    function editElement() { // 创建编辑图标
        return {
            group: 'edit',
            className: 'icon-custom icon-custom-edit',
            title: translate('编辑'),
            action: {
                click: clickElement
            }
        }
    }
    return {
        'append.lindaidai-task': {...},
        'edit': editElement(), // 返回值加上编辑功能
        'delete': deleteElement() // 返回值加上删除的功能
    }
}

тогда не забудьтеapp.cssплюс.icon-custom-editstyle, код здесь размещаться не будет.

Передать информацию об узле

На самом деле мы обнаружим, что легко получить информацию об узле, щелкнув маленький значок, но какCustomContextPad.jsИнформация на странице передается, то есть как мы можем получить эту информацию на странице?

Например, я хочу добиться:Щелкните маленький значок редактирования, упомянутый выше 👆, после чего появится всплывающее окно с соответствующей информацией об узле.:

bpmnCustom22.png
bpmnCustom22.png

(из-за того, что не вводилUIкомпонент, поэтому я написал несколько стилей наугад)

Ха-ха😄, способов на самом деле много:

  • Фронтенд локальное хранилищеlocalStorage
  • vueизvuex
  • reactизredux

Все вышеперечисленные методы могут...

Поскольку проект используетvueразработан, поэтому здесь я продемонстрирую использованиеvuexвзаимодействовать 😄.

Сначала установите его в наш проектvuex:

$ npm i vuex --save-D

затем вsrcСоздать каталогstoreпапку для его хранения и не забудьтеmain.jsЦитировать с:

// main.js
import store from './store'
...
new Vue({
    ...
    store,
    render: h => h(App),
}).$mount('#app')

впусти насstoreсоздатьbpmnмодуль, специально используемый для определенияbpmnСвязанное хранилище, затем определите в нем:

  1. nodeInfo<Object>: Используется для хранения информации о выбранном в данный момент узле.
  2. nodeVisible<Boolean>: используется для определения того, показывает ли всплывающее окно скрытые переменные.
// store/modules/bpmn.js
const bpmn = {
    state: {
        nodeVisible: false,
        nodeInfo: {}
    },
    mutations: {
        TOGGLENODEVISIBLE: (state, visible) => {
            state.nodeVisible = visible
        },
        SETNODEINFO: (state, info) => {
            state.nodeInfo = info
        }
    },
    actions: {}
}

export default bpmn

Определив их, мы можемCustomContextPadProvider.jsвнутреннийclickElementСделал статью:

// CustomContextPadProvider.js
import store from '../../../store' // 引入store

function clickElement(e) {
    console.log(element)
    store.commit('SETNODEINFO', element) // 存储节点信息
    store.commit('TOGGLENODEVISIBLE', true)
}

из-заCustomContextPadProvider.jsа такжеCustomContextPad.jsПодход тот же, здесь я буду использоватьCustomContextPadProvider.jsОбъясните случай.

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

давайте откроемcustom-modeler.vueфайл, добавьте внутри небольшое всплывающее окно:

<template>
    <div class="modal" v-if="bpmnNodeVisible" @click="close">
      <div class="modal-content">
        <div class="modal-ctx">
          <div class="modal-item">
            节点id: {{ bpmnNodeInfo.id }}
          </div>
          <div class="modal-item">
            节点type: {{ bpmnNodeInfo.type }}
          </div>
        </div>
      </div>
    </div>
</template>

Стиль всплывающего окна написан небрежно, и вы можете увидеть его в коде проекта, поэтому я не буду его здесь публиковать.

Затем отредактируйте соответствующийjsКод:

<script>
import { mapState, mapMutations } from 'vuex'

export default {
    ... // 这个省略号是省略代码
    methods: { // 方法
        ...mapMutations(['TOGGLENODEVISIBLE']), // 这个省略号是解构
        close () {
            this.TOGGLENODEVISIBLE(false)
        }
    },
    computed: { // 计算属性
        ...mapState({ // 解构
            bpmnNodeInfo: state => state.bpmn.nodeInfo,
            bpmnNodeVisible: state => state.bpmn.nodeVisible
        })
    }
}
</script>

После выполнения вышеуказанных шагов мы реализовали щелчокcontextPadЗначок редактирования в , появится небольшое всплывающее окно с информацией об узле. Щелкните тень, чтобы закрыть небольшое всплывающее окно. Конечно, вы также можете очистить его, когда оно закрыто.storeИнформация узела InnodeInfo, не делайте эти операции здесь.

Наконец, давайте разберем ключевые шаги вперед:

  • Цитироватьvuexпередавать данные между компонентами;
  • Щелкнув значок редактирования, сохраните информацию об узле вstoreсередина;
  • Когда страница будет использоваться, используйтеvueВычисляемые свойства могут слушатьstateПринцип изменения для обновления вашегоUI(то есть появляется всплывающее окно)

(Я начал с попытки использовать самый простойlocalStorageдобиться, а позже нашлиcomputedне может отслеживать его изменения, что приводит кlocalStorageсерединаnodeVisibleХотя он изменился,bpmnNodeVisibleВсе еще нет.Поэтому позже переключился наvuex)

послесловие

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

Но я также очень рад предоставить вам такое решение, и я также могу сказать, что оно может дать вам немного вдохновения😊...

Потому что я исследуюbpmn.jsНа тот момент ни от кого не было указаний, пришлось самому проверять официальное дело и ломать голову, так что я понял беду этого дела... Хахаха😂, слишком много, на этом глава остановится. .

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

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

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

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

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

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

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

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

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

Категории