精华内容
下载资源
问答
  • bpmn-js示例 该存储库包含许多示例,这些示例显示了如何使用并将其集成到您的应用程序中。 起动机 -开始使用使用我们的。 基本的 -一个示例,说明如何通过安装bpmn-js,如何在节点样式的应用程序中使用bpmn-js以及...
  • bpmn-js令牌模拟 用于令牌模拟的bpmn-js扩展。 安装 通过安装。 npm install bpmn-js-token-simulation 作为附加模块添加到 。 造型师 var BpmnModeler = require ( 'bpmn-js/lib/Modeler' ) ; var ...
  • bpmn-js-bpmnlint 将集成到。 将此扩展作为一部分进行操作。 用法 将linter集成到: import lintModule from 'bpmn-js-bpmnlint' ; import BpmnModeler from 'bpmn-js/lib/Modeler' ; import bpmnlintConfig from...
  • 斯巴达-bpmn-js 该项目是一个POC,用于测试Camunda的 BPMN Web Modeler的自定义功能。 在阅读博客。
  • bpmn-js-debug-controls BPMN 2.0流程的调试/步进控件。 用于仿真或实际调试。
  • BPMN-js-cmd 用于呈现BPMN-图的命令行实用程序。 正在安装 使用NPM安装: npm install -g bpmn-js-cmd 用法 Usage: bpmn-js [options] Positionals: file a BPMN-XML process definition file Options: -t, --...
  • bpmn-js-example-angular 一个如何将bpmn-js与应用程序集成的示例。 先决条件 假设您使用ng命令引导了您的应用程序: ng new bpmn-js-app --defaults=true cd bpmn-js-app 整合bpmn-js 创建一个类似于的组件: ...
  • bpmn-js-develop.zip

    2020-09-17 09:49:38
    bpmn-js-develop.zip
  • bpmn-js-flow 基于bpmn-js的流程图绘制,重写右侧属性面板
  • bpmn-js集成 该项目针对运行了许多集成测试: 基本建模方案 各种图导入/导出测试 提供的导入/导出测试 设置 :warning: 您必须具有NodeJS和Java JDK,才能执行以下步骤。 安装依赖项: npm install (可选)将...
  • bpmn-js-example-angular 一个如何将bpmn-js与应用程序集成的示例。 先决条件 假设您使用ng命令引导了您的应用程序: ng new bpmn-js-app --defaults=true cd bpmn-js-app 整合bpmn-js 创建一个类似于的组件: ...
  • BPMN-JS.rar

    2021-04-25 14:37:13
    BPMN-JS组件包 下载完这个就可以直接用了。
  • bpmn-js翻译 该存储库收集用户界面元素,消息和工具提示的社区维护的翻译。 可用翻译 使用翻译 遵循并用此存储库中的一种语言文件替换。 贡献 创建一个并提供翻译。 检出以获取可用消息的列表。 执照 麻省理工学院
  • bpmn-js-examples, 关于如何使用bpmn的示例 bpmn-js例子这个库包含了许多例子,展示了如何使用js将它集成到你的应用程序中。 基础知识 simple-bower -展示如何
  • Camunda Modeler的令牌模拟 ... git clone https://github.com/bpmn-io/bpmn-js-token-simulation-plugin 重新启动Camunda Modeler。 相容性通知 该插件与Camunda Modeler v2.2+兼容。 其他资源 执照 麻省理工学院
  • m trying to import bpmn-js into my nuxt-js project as a module. <h3>Expected Behavior <p>Module is being imported properly, main page appears as expected <h3>Actual Behavior <p>Main page is not being ...
  • Is there some docs telling how to get all string fields for translating in <code>bpmn-js</code> and <code>bpmn-js-properties-panel</code>? Thanks.</p><p>该提问来源于开源项目:bpmn-io/bpmn-js</p>...
  • bpmn-js 是 BPMN 2.0 渲染工具包和 Web 模型。bpmn-js 正在努力成为 Camunda BPM 的一部分。bpmn-js 使用 Web 建模工具可以很方便的构建 BPMN 图表,可以把 BPMN 图表嵌入到你的项目中,容易扩展。在线演示:...
  • I want to extend bpmn-js-properties-panel to add my own provider. As a first step,I just made a version change and wanted to install in my local machine. I did npm run build and npm install in my bpmn...
  • bpmn-js Examples This repository contains a number of examples showing how use and integrate bpmn-js into your applications. Starter starter - Getting started with bpmn-js using our pre-packaged ...
  • bpmn-js-cli 的可扩展命令行界面。 演示版 检出以获取支持该演示的命令。 特征 在浏览器中无需鼠标即可对BPMN 2.0图表进行建模 完整的撤消和重做功能 通过您自己的命令可扩展 内置命令 现成的cli支持以下命令: ...
  • Release bpmn-js@4

    2021-01-11 05:35:51
    bpmn-js-cli</li><li>[x] Release the bpmn-io projects in order</li><li>[x] diagram-js</li><li>[x] bpmn-js</li><li>[x] Integration test via <code>bpmn-js-integration</code> packaging (<em>AUTOMATED)...
  • bpmn-js汉化文件.zip

    2019-08-02 16:38:14
    bpmn-js汉化文件,具体可以参照我的博文进行汉化,主要修改两个文件即可完成提示语的汉化
  • 基于bpmn-js的流程设计器校验实现 简介 它根据一组已定义的规则来验证您的图表,并将其报告为错误或警告。它可以从命令行检查您的BPMN图,或者通过将其集成到我们的: 核心规则 库的核心是用于检测BPMN图中某些模式...
  • bundle bpmn-js as webjar

    2021-01-11 06:57:08
    <div><p>it should be possible to use bpmn-js as a webjar in JSF or different maven build environments. <p>I already bundled a lib here: https://github.com/zerounix/webjar-bpmn-js</p> <p>The webjar ...
  • <div><p>Provide a pre-packaged version of the bpmn-js-properties-panel helps folks to easier embed it into their projects. <p><strong>Tasks</strong></p> <ul><li>[ ] Stylesheets are pre-compiled to ...
  • /home/venkat/phd/bpmn-js/bpmn-js-examples/modeler/node_modules/bpmn-js/lib/draw' Warning: Error running grunt-browserify. Use --force to continue. <p>Note that the error does not occur when I ...
  • bpmn-js绘制activiti工作流

    万次阅读 热门讨论 2018-06-16 22:35:10
    今天想大家分享一款js工作流绘制框架,它就是bpmn-js,他的网站地址是点击打开链接,通过这个框架可以在网页上编写工作流,支持在线编写并绑定业务,使用方法如下:首先需要安装bpmn-jsnpm install bpmn-js --save-...

    今天想大家分享一款js工作流绘制框架,它就是bpmn-js,他的网站地址是点击打开链接,通过这个框架可以在网页上编写工作流,支持在线编写并绑定业务,使用方法如下:

    首先需要安装bpmn-js

    npm install bpmn-js --save-dev

    安装好这个只能支持在线绘制工作流,而不能对工作流上的每个节点进行属性设置,这个时候需要安装bpmn-js的一个panel插件。

    npm install  bpmn-js-properties-panel --save-dev

    该程序需要通过webpack打包,安装webpack

    npm install webpack --save-dev

    编写 app/index.js

    /**
     * Create by pengweikang on 2018/4/4.
     */
    
    require("bpmn-js/dist/assets/diagram-js.css"); 
    require("bpmn-js/dist/assets/bpmn-font/css/bpmn.css");
    var BpmnModeler = require("bpmn-js/lib/Modeler"); //引入bpmn-js模型设计器,通过该模块可设计流程
    var propertiesPanelModule = require('bpmn-js-properties-panel'), //引入bpmn-js面板模块,通过该面板可设计节点属性
        propertiesProviderModule = require('bpmn-js-properties-panel/lib/provider/camunda'),
        camundaModdleDescriptor = require('camunda-bpmn-moddle/resources/camunda');
    
    var $ = require("jquery/dist/jquery");
    
    /**
     * pengweikang bpmn文件模版
     * @type {string}
     */
    var xml='<?xml version="1.0" encoding="UTF-8"?>\n' +
        '<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn">\n' +
        '  <bpmn2:process id="Process_1">\n' +
        '    <bpmn2:startEvent id="StartEvent_1"/>\n' +
        '  </bpmn2:process>\n' +
        '  <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n' +
        '    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">\n' +
        '      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">\n' +
        '        <dc:Bounds height="36.0" width="36.0" x="412.0" y="240.0"/>\n' +
        '      </bpmndi:BPMNShape>\n' +
        '    </bpmndi:BPMNPlane>\n' +
        '  </bpmndi:BPMNDiagram>\n' +
        '</bpmn2:definitions>'; // my BPMN 2.0 xml
    
    
    
    var viewer = new BpmnModeler({
        container: 'body',
        propertiesPanel: {
            parent: '#js-properties-panel'
        },
        additionalModules: [
            propertiesPanelModule,
            propertiesProviderModule
        ],
        // needed if you'd like to maintain camunda:XXX properties in the properties panel
        moddleExtensions: {
            camunda: camundaModdleDescriptor
        }
    });
    
    viewer.importXML(xml, function(err) {
    
        if (err) {
            console.log('error rendering', err);
        } else {
            console.log('rendered');
        }
    });
    
    
    document.getElementById("saveBpmn").onclick  = function(){
        viewer.saveXML({ format: true }, function(err, xml) {
    
            if (err) {
                return console.error('could not save BPMN 2.0 diagram', err);
            }
    
            console.log('DIAGRAM', xml);
    
            parent.$("#bpm-flow-add-value").val(xml);
            parent.$("#bpm-flow-add-value").click();
            var index = parent.recognizeLayer.getFrameIndex(window.name);
            parent.recognizeLayer.close(index);
        });
    };

    webpack.config.js文件如下:

    /**
     * Create by pengweikang on 2018/4/4.
     */
    
    const path = require('path')
    module.exports = [{
        entry: './app/index.js', // 入口文件
        output: {
            path: path.resolve(__dirname, 'build'), // 必须使用绝对地址,输出文件夹
            filename: "bundle.js", // 打包后输出文件的文件名
            publicPath: '/build/'
        },
        mode: 'development',
        module: {
            rules: [
                {test: /\.css$/, loader: 'style-loader!css-loader'},
                {test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'},
                {test: /\.svg/, loader: 'svg-url-loader'},
                {
                    test: /\.(eot|woff|ttf)$/,
                    loader: "file-loader",
                    options:{
                        outputPath:"/font/"
                    }
                }
            ]
        }
    }]

    index.html代码如下:

    <!DOCTYPE html>
    <html lang="en" style="height: 100%;">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="node_modules/bpmn-js/dist/assets/diagram-js.css">
        <link rel="stylesheet" href="node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn.css">
        <link rel="stylesheet" href="build/css/properties.css">
        <link rel="stylesheet" href="build/css/index.css">
    </head>
    <body style="height: 100%;">
    <button id="saveBpmn">保存</button>
    <div id="js-properties-panel"></div>
    </body>
    <script src="./build/bundle.js"></script>
    </html>

    展示效果如下:


    展开全文
  • bpmn-js + vue实现工作流设计器

    万次阅读 2020-04-24 21:30:27
    自定义流程设计器bpmn-js初体验安装vue使用vue-cli创建项目安装bpmn-js简单的查看工作流图形的例子中间遇到的问题新需求:可以拖拽自定义工作流 此文只为记录一下自己学习bpmn-js和使用bpmn-js实现工作流设计器的...

    此文只为记录一下自己学习bpmn-js和使用bpmn-js实现工作流设计器的过程。以后我将通过不断提出新需求的方式,来逐渐完成一个简单的工作流设计器。

    1、bpmn-js初体验

    安装vue

    新版的vue-cli有图形化工具,新版本的Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g进行卸载

    # 新版安装命令
    npm install -g @vue/cli
    # 安装完成后,我们就可以使用vue ui命令打开图形界面来创建管理vue项目了
    vue ui
    

    在这里插入图片描述

    使用vue-cli创建项目

    略…

    安装bpmn-js

    # 切换到新建的项目
    npm install bpmn-js --save-dev
    

    按装完成后可以在node-modules中找到这几个文件夹
    在这里插入图片描述

    简单的查看工作流图形的例子

    官方的例子都是基于jquery的,在获取bpmn20.xml文档的时候可以直接import,在vue中需要通过异步请求来获取数据,因此需要安装axios

    • 安装axios
    npm install axios
    
    • 安装完成以后修改main.js
      在这里插入图片描述
    • 添加一个vue组件,直接上代码
    <template>
      <div class="containers">
        <div id="canvas" class="canvas" ref="canvas"></div> 
      </div>
    </template>
    <script>
    import BpmnJS from 'bpmn-js' // 引入 bpmn-js
    export default {
        data () {
        },
        mounted() {
            var viewer = new BpmnJS({
                container: '#canvas'
            })
            
            var diagramUrl = 'https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn';
            // var diagramUrl = 'http://localhost:8080/pizza-collaboration.bpmn20.xml';
            this.$http.get(diagramUrl)
                .then(function(res){
                       viewer.importXML(res.data, function(err){
                        if (!err) {
                            console.log('success!')
                            viewer.get('canvas').zoom('fit-viewport')
                            console.log('success...')
                        } else {
                            console.log('something went wrong:', err)
                        } 
                    })
                })
                .catch(function(err){
                    console.log(err)
                })
        }
    }
    </script>
    <style lang="scss">
      /*左边工具栏以及编辑节点的样式*/  
      @import '~bpmn-js/dist/assets/diagram-js.css';
      @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
      @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
      @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
      .containers{
        position: absolute;
        background-color: #ffffff;
        width: 100%;
        height: 100%;
        .canvas{
          width: 100%;
          height: 100%;
        }
        .bjs-powered-by {
          display: none;
        }
      }
    </style>
    
    

    运行以后可以看到一下页面
    在这里插入图片描述

    使用中间遇到的问题

    • 图形不显示,F12 发现报错

    something went wrong: Error: unparsable content omgdc:Bounds detected; this may indicate an invalid BPMN 2.0 diagram file
    line: 0
    column: 4310
    nested error: missing namespace on omgdc:Bounds
    at error (index.esm.js?42c7:63)
    at handleError (index.esm.js?42c7:689)
    at handleError (index.esm.js?ea8d:193)
    at parse (index.esm.js?ea8d:1016)
    at Parser.parse (index.esm.js?ea8d:298)
    at eval (index.esm.js?42c7:856)

    非常郁闷,我的bpmn文件命名都指明了namespace,为什么还提示 missing namespace?
    viewer#importXML需要的参数是个字符串,所以想当然的将res转化为字符串,后来 仔细查看res中的数据发现res是一个object,res = {data:""} ,所以只需需要取出data就可以了。
    解决:
    在这里插入图片描述

    2、新需求:可以拖拽自定义工作流

    实现工作流的编辑需要用到bpmn-js的另一个重要的组件(BpmnModeler)。
    效果: 这里顺便测试了国际化
    在这里插入图片描述

    还是直接上代码

    <template>
      <div class="containers" ref="containers">
        <div id="js-canvas" class="canvas" ref="canvas"></div> 
      </div>
    </template>
    <script>
    // 引入Modeler
    import BpmnModeler from 'bpmn-js/lib/Modeler' // 引入 bpmn-js
    // 用来进行国际化,参考官方的例子 bpmn-js-examples-master ===> i18n
    import customTranslate from '../customTranslate/customTranslate';
    export default {
        data () {
            return {
                bpmnModeler: null,
                containers: null,
                canvas: null,
                customTranslateModule: {
                  translate: [ 'value', customTranslate ]
                }
            }
        },
        methods:{
            openDiagram(xml){
                this.bpmnModeler.importXML(xml, function(err) {
                    if (err) {
                        // container
                        //     .removeClass('with-diagram')
                        //     .addClass('with-error');
                        console.error(err);
                    } else {
                      // container
                      //   .removeClass('with-error')
                      //   .addClass('with-diagram');
                    }
                });
            },
            // 注意:必须先加载一个bpmn文件,新建就是加载一个空的bpmn文件,否则不能拖拽节点
            createNewDiagram(){
                //var diagramUrl = 'https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn';
                // var diagramUrl = 'http://localhost:8080/newDiagram.bpmn';
                this.$http.get(diagramUrl)
                	// 这里必须使用箭头函数,否则提示找不到openDiagram方法
                    .then((res)=>{
                        console.log(res.data)
                        this.openDiagram(res.data)
                    })
                    .catch((err)=>{
                        console.log(err)
                    })        
            },
        },
        mounted() {
            // 获取到属性ref为“containers”的dom节点
            this.containers = this.$refs.containers
            console.log(this.customTranslate)
            // 获取到属性ref为“canvas”的dom节点
            const canvas = this.$refs.canvas
            this.bpmnModeler = new BpmnModeler({
                                container: canvas,
                                additionalModules: [
                                    this.$data.customTranslateModule
                                ]
                            })
            this.createNewDiagram()
        }
    }
    </script>
    <style lang="scss">
      /*左边工具栏以及编辑节点的样式*/  
      @import '~bpmn-js/dist/assets/diagram-js.css';
      @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
      @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
      @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
      .containers{
        position: absolute;
        background-color: #ffffff;
        width: 100%;
        height: 100%;
        .canvas{
          width: 100%;
          height: 100%;
        }
        .bjs-powered-by {
          display: none;
        }
      }
    </style>
    
    

    碰到的问题:

    1. 找不到openDiagram方法: 开始的时候在axios#get#then方法中使用匿名函数作为回调函数,这个问题主要是由于this这个对象指向引起的. 改成箭头函数,问题解决。
    • axios中的this的指向:

    匿名函数的指针指向->函数操作的本身
    箭头函数的指针指向->组件
    也就是说当你需要使用到组件中声明的变量或者函数,就需要使用箭头函数

    简单记录一下匿名函数和箭头函数中this的指向:

    • 匿名函数:

    在一般情况下,this对象时在运行时基于函数的执行环境绑定的:在全局函数中,this等于window,而当函数被作为某个对象的方法调用时,this等于那个对象。但是,匿名函数的执行环境具有全局性,因此它的this对象通常指向windows.

    • 箭头函数:

    (1)默认指向定义它时,所处上下文的对象的this指向。即ES6箭头函数里this的指向就是上下文里对象this指向,偶尔没有上下文对象,this就指向window
    (2)即使是call,apply,bind等方法也不能改变箭头函数this的指向

    3、新需求:添加属性面板

    属性面板需要单独安装

    npm install --save bpmn-js-properties-panel
    npm install --save camunda-bpmn-moddle
    

    待续。。。

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 591
精华内容 236
关键字:

bpmn-js