lindaidai / bpmn-chinese-document Goto Github PK

代码如下（不论是用官方document控件，还是自己使用textBox绘制，输入内容在xml中都被转义了）：

想要使用CDATA格式保存，便于阅读，请问如何解决，谢谢

1. 编写AuthorityPropertiesProvider.js代码
2. [email protected] 已弃用 getTabs https://github.com/bpmn-io/bpmn-js-properties-panel/blob/master/CHANGELOG.md#100

可以参考官网的example https://github.com/bpmn-io/bpmn-js-examples/tree/master/colors

有几点需要注意：

1. overlay的方式，在移动画布的时候会照造成样式的短暂缺失

2. addMarker的方式，我的理解类似于给组件的某个元素增加了一个class类，那么我们就可以对它下面的所有子节点做自定义样式调节，只需要写CSS即可

3.要是你的组件是通过customRender创建的话，最理想的方式是用方法2，但是如果是非自定义render方式创建的组件，那么通过modeler.get('editorActions').trigger('setColor', {fill: XX, stroke: XX})来设定样式，同样是生效的，也是最简单的方式。我们修改连线颜色的话就可以用这种方式。

4.modeler.get('editorActions').trigger('setColor', {fill: XX, stroke: XX})方法只是对选中的元素生效，要是想要指定具体的元素：可以用__modeler__.get('modeling').setColor(modeler.get('elementRegistry').get("Action_1kfdira"), {fill:XX, stroke:XX})`

全网最详bpmn.js教材-基础篇.md 描述左右侧工具栏 的时候 引入错了

创建自定义bpmn之后，如何设置自定义预览

1、引用以下几个
import labelEditingProvider from 'bpmn-js/lib/features/label-editing/LabelEditingProvider'
import contextPadProvider from 'bpmn-js/lib/features/context-pad/ContextPadProvider'
import paletteProvider from 'bpmn-js/lib/features/palette/PaletteProvider'
2、添加属性additionalModules，含义见注释

this.bpmnModeler = new BpmnModeler({
         container: canvas,
        //添加控制板
        propertiesPanel: {
          parent: '#js-properties-panel'
        },
        additionalModules: [
          customModule,
          {
           paletteProvider:['value',''], // 禁用左面板
           labelEditingProvider: ['value',''], // 禁用编辑
           contextPadProvider:  ['value',''] // 禁用点击出现的contextPad
          }
        ]
      })

signalEventDefinition signalRef="undefined"
let signalRef = this.bpmnModeler.get('moddle').create('bpmn:Signal', {
id: 'theSignalsss',
name: 'xxx',
})

let singalEvent = this.bpmnModeler.get('moddle').create('bpmn:SignalEventDefinition', {
signalRef: signalRef,
})

this.modeling.updateProperties(elemnet, {
eventDefinitions: [singalEvent],
})

this.bpmnModeler._definitions.rootElements[0]

需要用到bpmn-js，使用过程给记录到了这里：https://blog.ops-coffee.cn/bpmn

希望能够帮助有需要的小伙伴，大佬能否给加到https://github.com/LinDaiDai/bpmn-chinese-document/blob/master/directory.md这个目录里？感谢

文章正在更新中

如在label标签自定义在元素下方中的讨论，发现了另外一种可行的方法。

经查源码，在 ./node_modules/bpmn-js/lib/import/BpmnImporter.js 185行可知，

// line 185
//  (optional) LABEL
if (isLabelExternal(semantic) && semantic.name) {
    this.addLabel(semantic, element);
 }

而isLabelExternal定义在 ./node_modules/bpmn-js/lib/util/LabelUtil.js

// 22 
// Returns true if the given semantic has an external label
// Params:
// semantic: BpmnElement
// Returns:
// Boolean - true if has label
export function isLabelExternal(semantic) {
  return is(semantic, 'bpmn:Event') ||
         is(semantic, 'bpmn:Gateway') ||
         is(semantic, 'bpmn:DataStoreReference') ||
         is(semantic, 'bpmn:DataObjectReference') ||
         is(semantic, 'bpmn:DataInput') ||
         is(semantic, 'bpmn:DataOutput') ||
         is(semantic, 'bpmn:SequenceFlow') ||
         is(semantic, 'bpmn:MessageFlow') ;
}

所以，event节点、gateway节点等标签在节点下方，而Task节点不是。

故，可以通过将我们的节点添加到isLabelExternal修改默认标签行为。

如果你有更好的办法，欢迎讨论。

大佬，请教下

// newScale为比例参数，默认应该是1
this.bpmnModeler.get('canvas').zoom(newScale)

有的图片只显示 十分之一
只能看到个 header
不知道是不是图片坏了
麻烦更新下

比如这小节 全网最详bpmn.js教材-编辑、删除节点篇.md

不是一两个图片就不一一列出了
具体哪些图片坏了，每篇文章点进去看下

推荐个截图方案 给图片加个边框

截图后，用 picpick 编辑下图片

左边是原图 右边是编辑后图片

编辑后的图片加了个边框

操作步骤

可能不是最好的办法，但是我提供了两种解决方案：
（一）简单粗暴法
右键审查元素找到要隐藏的 class 名，之后在代码中设置 display: none;

（二）自定义palette
额，这个就按自定义palette那里写就可以了，只返回创建自己想要的组或者元素

参考文章：https://juejin.cn/post/6983940380085452813

dc 和 omgdc 需要在初始化的 definitions 上面定义 作用域 标签才会出现变化
图片

文档中有些图片显示不出来

如何确保已经过的节点、连线显示不同的颜色；如何保证当前节点显示不同颜色

这个其实很好实现。如果你是用的自定义 palette 的话，试想一下，在 dragstart 和 click 事件的时候会执行一个创建节点的函数。那么我们就可以直接修改 businessObject['name'] = '霖呆呆' 就可以了。

bpmn-js v11.3.0

[完全自定义ContextPad] 按教程写，但是并没有替换默认的 ContextPad

效果是：只在附加自己注册的，但并没有替换掉默认的

代码：

注册：

有什么不对的地方吗？

你好，我现在有.bpmn的文件，如何将此文件表达的流程图用html展示出来？

大佬，请问下这是什么原因呢？

在加载成功之后，调用以下代码：

  this.bpmnModeler.get('canvas').zoom('fit-viewport', 'auto');

注意⚠️：

• bpmnModeler为你定义modeler时的名字

按照example修改Task和Gateway的显示图标，但是Task是生效的Gateway不生效，

function createGateway() {
    return function(event) {
      const shape = elementFactory.createShape({
        type: 'bpmn:Gateway'
      })
      create.start(event, shape)
    }
  }

'create.Gateway': {
      group: 'gateway',
      className: 'icon-custom support-task',
      title: '创建一个类型为机器辅助的任务节点',
      action: {
        click: createGateway(),
        dragstart: createGateway()
      }
    },

这样有错误吗