BPMN-JS2.0调色板去掉节点组件(一)

关于BPMN本文不多介绍，作者认为你已经了解或熟悉此插件平台，不了解的同学自行爬网。

根据自己的项目情况，在使用bpmn-js的时候调色板上的节点组件是用不到的，比如我们老大说把项目中用不到的节点组件隐藏掉或删除掉，通过查阅API发现官方并未提供相应的接口或方法，两种思路解决：

1. 修改源码，这个就是开玩笑了，没那水准；
2. 操作DOM，是不是很熟悉。对，没错，页面都有了，DOM操作起来还不是分分钟的事；

废话少说，起飞……

先看图

就是去掉这个玩意

再看DOM

直接上纯手工码

hideNode () {
  // BPMN 2.0 删除(隐藏)项目中不需要的节点组件
  const canvas = this.$refs.canvas
  const paletteBox = canvas.children[0].children[1].children[4]
  const palette = paletteBox.children[0]
  // 调色板DOM
  const paletteNodes = palette.children
  paletteNodes[1].children[1].style['display'] = 'none'
  paletteNodes[3].children[1].style['display'] = 'none'
  paletteNodes[4].style['display'] = 'none'
  paletteNodes[5].style['display'] = 'none'
  paletteNodes[6].style['display'] = 'none'
  paletteNodes[7].style['display'] = 'none'
}

上面这个方法笨重有效，当然找到DOM节点方式很多，路径选择、class选择器等等，自己怎么喜欢怎么来。思路大概就是这样；