问题请教

[aaabbbcc1995]

老哥，有个问题想问下，现在默认双击一个元素，是在下方出现一个修改框或者在元素内部出现一个输入框输入，如果我想通过双击触发一个弹框，在弹框内输入或者下拉菜单从设置好的值中取可以做到么？

[PL-FE]

可以的。分为两步。

1. 拦截元素双击点击事件。
2. 在自定义弹框内输入完值后，通过api 赋值给当前元素。

[aaabbbcc1995]

请问有相关的demo么，官方目前的palette满足我的开发需求，就不想去自己自定义了，但是我不知道怎么修改去修改他这个元素双击事件
我研究了一下午，也看过官方的答疑，他们说是通过修改diagram-js-direct-editing这一块，但是我也不知道怎么去修改，实在是有点晦涩难懂

[PL-FE]

我是这样做的。

1. 首先禁用编辑框。可以参考我的dev分支

 this.bpmnModeler = new BpmnModeler({
        // 扩展
        additionalModules: [
          ...
          {
            // // 禁止双击节点出现label编辑框
            labelEditingProvider: ['value', '']
          }
        ]
      })

2. 监听双击事件，在回调中执行自定义的弹窗，然后等待用户输入值。

const eventBus = this.bpmnModeler.get('eventBus')
      eventBus.on('element.dblclick', e => {
        console.log('双击了元素', e)
      })

3. 将用户输入的值赋值给元素。

 const modeling = this.bpmnModeler.get('modeling')
        modeling.updateProperties(element, {
          name: '你需要的值'
        })

[aaabbbcc1995]

感谢老哥
试了一上午已成功
还想问一下如果想在默认上修改palette和contenxt-pad，该怎么修改，比如我想删掉palette里面的几个用不到的，或者删掉contenxt-pad 面板一些用不到的

[PL-FE]

我所知道的有三个方法：

1. 通过 css 样式

display: none;

2. 重新赋值原型链方法
   以修改 palette 工具栏为例
   下面是简化的代码，具体代码可以参考源码 PaletteProvider.js#L38。

     const getPaletteEntries = function (element) {
        const createListener = () => { }
        return {
          'create.task': {
            group: 'activity',
            className: 'bpmn-icon-task',
            title: 'Create Task',
            action: {
              dragstart: createListener,
              click: createListener
            }
          }
        }
      }

      Modeler.prototype._modules[27].paletteProvider[1].prototype.getPaletteEntries = getPaletteEntries
      new Modeler()

3. 重写提供器 PaletteProvider.js、ContextPadProvider
   适用于更复杂的自定义场景。详情可参考自定义 Palette => 指定 Palette 容器

最后，palette 和 contenxt-pad 原理大致一样，同样是以 html 绘制，配置的方式也是类似。