npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-bpmn-modeler-metadoc

v1.0.3

Published

Design BPMN 2.0 modeler in a [Vue.js](https://vuejs.org) application based on [bpmn-js](https://github.com/bpmn-io/bpmn-js).

Downloads

273

Readme

vue-bpmn-modeler

Design BPMN 2.0 modeler in a Vue.js application based on bpmn-js.

Usage

yarn add vue-bpmn-modeler
# main.js
import VueBpmnModeler from "vue-bpmn-modeler";
Vue.use(VueBpmnModeler);
# yourPage.vue
<style lang="less">
@import "~vue-bpmn-modeler/lib/vue-bpmn-modeler.css";
</style>

viewer

组件会显示设计器,参数 v-model="modeler",会通过画图操作实时返回对应的xml数据和svg数据,用于保存初始化的模板。

<template>
  <BpmnModeler v-model="modeler"></BpmnModeler>
</template>

<script>
  export default {
    name: "BpmnModeler",
    props: {
      diagramXML: String
    },
    watch: {
      diagramXML(val) {
        this.openDiagram(val)
      }
    },
    data() {
      modeler: {
        // 模型xml数据
        // model xml data
        xmlData: "",
        // svg图片数据
        // svg data
        svgImage: ""
      }
    },
    // 详细代码请参考源码
    // see source code for detail
    mounted() {
    },
    methods: {

      openDiagram(xml) {
        if (xml) {
          this.modeler.importXML(xml, function(err) {
            if (err) {
              console.error(err);
            } else {
            }
          });
          this.xmlData = xml;
        } else {
          this.modeler.createDiagram();
          let _self = this;
          setTimeout(() => {
            /**
             * 修改xml属性值 isExecutable = false => true
             * isExecutable = false 后端部署流程时 不会创建流程定义数据
             */
            let modelerCanvas = _self.modeler.get("canvas");
            let rootElement = modelerCanvas.getRootElement();
            let modeling = _self.modeler.get("modeling");
            // modeling.updateProperties(rootElement, {
            //   // isExecutable: true
            // });
            // 设定开始节点名称和结束节点名称
            // set StartEvent name 'start' and EndEvent name 'end'
            rootElement.children.forEach(n => {
              if (n.type === 'bpmn:StartEvent') {
                modeling.updateProperties(n, {
                  name: '开始',
                });
              } else if (n.type === 'bpmn:EndEvent') {
                modeling.updateProperties(n, {
                  name: '结束',
                });
              }
            })
          });
        }
      }
    }
  };
</script>

当流程启动时,流程会默认走到第一个节点 提交申请,此时的待办任务会显示橙色。

When the process starts, the process will complete first task by default, and the TODO tasks will be orange.

viewer

当流程完成 提交申请 且满足 条件1 时,流程会走到 成本中心 节点,此时已经完成的待办任务会显示绿色。

when the first task completed and met condition 1, the process coming to 'costcenter' task, Completed tasks displayed in green.

viewer

参数介绍: xmlData: 表示流程图的xml数据 taskList: 表示流程的历史记录 可以通过服务的接口 historyService 获得

<template>
  <BpmnViewer :xmlData="xmlData" :taskData="taskList"></BpmnViewer>
</template>

<script>
  export default {
    data() {
      modeler: {
        // 模型xml数据
        xmlData: "",
        // 任务列表
        taskList: [{
          // 任务定义的key
          "key": "",
          // 任务是否完成
          "completed": true
        }]
      }
    }
  };
</script>

动态添加/替换任务节点

dynamically add/replace task

viewer

addTask () {
  let addOrReplace = {
    // task || sequenceFlow || gateway
    replaceActivity: 'UserTask_0hkfnx2',
    taskList: [
      {
        label: 'test task'
      }
    ]
  }
  this.$refs.modeler.replace(addOrReplace).then((taskList) => {
    // new task list, incluce taskId
    console.log(taskList);
  });
}

开启 propertiesPanel

<template>
  <BpmnModeler v-model="modeler" propertiesPanel></BpmnModeler>
</template>

Examples

# clone the project
git clone https://github.com/evanyangg/vue-bpmn-modeler.git

# enter the project directory
cd vue-bpmn-modeler

# install dependencies
yarn

# serve with hot reload at localhost:8080
yarn serve

License

MIT