自定义Palette(二)

1.编写CustomPalette.js代码

// CustomPalette.js
export default class CustomPalette {constructor(bpmnFactory, create, elementFactory, palette, translate) {this.bpmnFactory = bpmnFactory;this.create = create;this.elementFactory = elementFactory;this.translate = translate;palette.registerProvider(this);}// getPaletteEntries这个函数就是绘制palette的核心getPaletteEntries(element) {}
}
CustomPalette.$inject = ['bpmnFactory','create','elementFactory','palette','translate'
]

定义一个类CustomPalette,导出时可以随意取，引用时候不能随意取
使用$inject注入一些需要的变量
在类中使用palette.registerProvider(this)指定这是一个palette

2.编写核心函数getPaletteEntries代码

getPaletteEntries这个函数名称不能变，它返回的是一个对象，对象中指定的就是我们自定义的项

// CustomPalette.js
getPaletteEntries(element) {return {'create.zihong-task': {group: 'model', // 分组名className: 'icon-custom zihong-task', // 样式类名title: '创建一个类似task的任务节点',action: { // 操作dragstart: createTask(), // 开始拖拽时调用的事件click: createTask() // 点击时调用的事件}}}
}

create.lindaidai-task是自定义一项的名称，它有几个固定的属性：

group：属于哪个分组, 比如tools、event、gateway、activity等等,用于分类;
className:样式类名，可以通过它给元素改名称
title:鼠标移动到元素上面给出的提示信息
action:用户操作时会触发的事件

接下来我们要做的是：

通过className设置样式

通过action来定义要触发的事情

a. 编写class样式

// 在main.js中引入全局的css
import './css/app.css'
//main.css
.icon-custom {border-radius: 50%;background-size: 65%;background-repeat: no-repeat;background-position: center;
}
.icon-custom.zihong-task {background-image: url("./images/huangguan.png");
}

b.编写action代码

我们期望的是点击或者拖拽它能够在画布上画出一个lindaidai-task，也就是编写一个函数来创建bpmn:Task这个元素

// CustomPalette.jsfunction createTask() {return function(event) {const businessObject = bpmnFactory.create('bpmn:Task');businessObject['custom'] = 1const shape = elementFactory.createShape({type: 'bpmn:Task',businessObject});console.log(shape) // 只在拖动或者点击时触发create.start(event, shape);}}

核心还是利用bpmn.js提供的一些方法创建shape然后将其添加到画布上，我们还可以添加bpmn:StartEvent、bpmn:ServiceTask、bpmn:ExclusiveGateway等

3.导出CustomPalette

//在同级的index.js将他导出
import CustomPalette from './CustomPalette'
export default {__init__: ['customPalette'],customPalette: ['type', CustomPalette]
}

这里的__init__ 中的名字必须是CustomPalette,还有下面的属性名

4. 在页面中配置使用CustomPalette

import customPalette from './custom'
this.bpmnModeler = new BpmnModeler({...additionalModules: [// 自定义的左侧边栏customPalette ]
})

5.结果展示图

6.完整的CustomPalette.js

export default class CustomPalette {constructor(bpmnFactory, create, elementFactory, palette, translate) {this.bpmnFactory = bpmnFactory;this.create = create;this.elementFactory = elementFactory;this.translate = translate;palette.registerProvider(this);}// getPaletteEntries这个函数就是绘制palette的核心getPaletteEntries(element) {const { bpmnFactory, create, elementFactory, translate } = this;function createTask() {return function (event) {const businessObject = bpmnFactory.create("bpmn:Task");businessObject["custom"] = 1;const shape = elementFactory.createShape({type: "bpmn:Task",businessObject,});create.start(event, shape);};}return {"create.zihong-task": {group: "model", // 分组名className: "icon-custom zihong-task", // 样式类名title: "创建一个类似task的任务节点",action: {// 操作dragstart: createTask(), // 开始拖拽时调用的事件click: createTask(), // 点击时调用的事件},},};}
}
CustomPalette.$inject = ["bpmnFactory","create","elementFactory","palette","translate",
];

自定义Palette(二)相关推荐

vue2.0 自定义生成二维码（QRCode）组件
1.自定义生成二维码组件 QRCode.vue  <template><canvasclass="qrcode-canvas ...
Android自定义视图二：如何绘制内容
这个系列是老外写的,干货!翻译出来一起学习.如有不妥,不吝赐教! Android自定义视图一:扩展现有的视图,添加新的XML属性 Android自定义视图二:如何绘制内容 Android自定义视图三: ...
自定义ZXing二维码扫描界面并解决取景框拉伸等问题
自定义ZXing二维码扫描界面并解决取景框拉伸等问题参考文章: (1)自定义ZXing二维码扫描界面并解决取景框拉伸等问题 (2)https://www.cnblogs.com/tommylemon ...
条码软件如何自定义条码二维码的样式
在生活中我们见到最多的条码二维码基本上都是以方形的黑白效果显示,虽然可能不是很美观,但是这确实是标准的显示方式,不过在中琅条码软件中,却可以自定义条码二维码样式,让条码二维码在保证扫描效果的前提下更加 ...
Android中自定义logo二维码绘制（仿微信QQ二维码）
自定义Logo二维码绘制(追加上一篇简单二维码绘制) 1.实现思路 2.实现(新增拍照以及相册上传logo以及分享和保存二维码) 简单绘制二维码地址: Android 实现简单绘制二维码(包含带LOG ...
android下雨动画效果,Android 自定义View(二) 下雨效果
Rain.gif Android 自定义View(二) 下雨效果一实现思路, 雨点用线段表示,通过控制线段的大小和宽度来表示不同的线段. 一个雨点下雨的过程可以表示为一条直线,一次雨点在下雨的过程 ...
Java自定义生成二维码（兼容你所有的需求）
1.概述作为Java开发人员,说到生成二维码就会想到zxing开源二维码图像处理库,不可否认的是zxing确实很强大,但是实际需求中会遇到各种各样的需求是zxing满足不了的,于是就有了想法自己扩展 ...
微信小程序生成自定义参数二维码
微信小程序生成自定义参数二维码前言实现尾巴前言最近项目中要用到二维码分享功能,需要封装一些自定义的参数通过二维码分享.查看官方文档,发现系统提供了生成二维码的功能,但是细看才发现官方提供的接 ...
vue中使用bpmn-js绘制流程图，并实现汉化、自定义Palette及ContextPad。
一.认识bpmn-is bpmn-js是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成. 效果图如下(改造后): 二.在vue基本使用安装bpmn-js npm ins ...

自定义Palette(二)

1.编写CustomPalette.js代码

2.编写核心函数getPaletteEntries代码

a. 编写class样式

b.编写action代码

3.导出CustomPalette

4. 在页面中配置使用CustomPalette

5.结果展示图

6.完整的CustomPalette.js

自定义Palette(二)相关推荐

最新文章

热门文章