npmapps 1.0.25 → 1.0.27

package/app/src/components/diagram/ToolBar.vue

@@ -0,0 +1,357 @@
+<template>
+  <div class="header-container">
+    <!-- <i title="创建 diagram" class="app-icon app-icon-new"></i> -->
+    <i title="打开 diagram" class="app-icon app-icon-open" @click="$refs.refFile.click()"></i>|
+    <i title="保存 diagram" class="app-icon app-icon-save" @click="saveXml"></i>
+    <i title="导出 diagram" class="app-icon app-icon-save-as" @click="saveBPMN"></i>|
+    <i title="复原" class="app-icon app-icon-undo" @click="redo"></i>
+    <i title="撤销" class="app-icon app-icon-redo" @click="undo"></i>|
+    <i title="导出为图片" class="app-icon app-icon-picture" @click="saveSVG"></i>|
+    <i :class="{open: isOpenColor}" title="设置元素颜色" class="app-icon app-icon-set-color-tool" @click="openColor">
+      <i class="el-icon-caret-bottom"></i>
+      <ul class="colorSelect" v-show="isOpenColor">
+        <li v-for="c in COLORS" :key="c.title">
+          <div class="colorBlock" :title="c.title" :style="{borderColor: c.stroke, backgroundColor: c.fill}" @click="setColor(c.fill, c.stroke)"></div>
+        </li>
+      </ul>
+    </i>|
+    <i title="元素左对齐" class="app-icon app-icon-align-left-tool" @click="alignElements('left')"></i>
+    <i title="元素垂直居中对齐" class="app-icon app-icon-align-center-tool" @click="alignElements('center')"></i>
+    <i title="元素右对齐" class="app-icon app-icon-align-right-tool" @click="alignElements('right')"></i>
+    <i title="元素顶部对齐" class="app-icon app-icon-align-top-tool" @click="alignElements('top')"></i>
+    <i title="元素水平居中对齐" class="app-icon app-icon-align-middle-tool" @click="alignElements('middle')"></i>
+    <i title="元素底部对齐" class="app-icon app-icon-distribute-vertical-tool" @click="alignElements('bottom')"></i>|
+    <i title="水平分布元素" class="app-icon app-icon-distribute-horizontal-tool" @click="distributeElements('horizontal')"></i>
+    <i title="垂直分布元素" class="app-icon app-icon-distribute-vertical-tool" @click="distributeElements('vertical')"></i>
+    |
+    <i title="放大" class="el-icon-zoom-in" @click="handlerZoom(0.1)"></i>
+    <i title="缩小" class="el-icon-zoom-out" @click="handlerZoom(-0.1)"></i>
+    <i title="复制" class="el-icon-document-copy" @click="execCopy"></i>
+    <i title="粘贴" class="el-icon-document-add" @click="execPaste"></i>
+
+    <input type="file" id="files" ref="refFile" style="display: none" @change="loadBPMN" />
+
+  </div>
+</template>
+
+<script>
+
+const COLORS = [{
+  title: 'White',
+  fill: 'white',
+  stroke: 'black'
+}, {
+  title: 'Blue',
+  fill: 'rgb(187, 222, 251)',
+  stroke: 'rgb(30, 136, 229)'
+}, {
+  title: 'Orange',
+  fill: 'rgb(255, 224, 178)',
+  stroke: 'rgb(251, 140, 0)'
+}, {
+  title: 'Green',
+  fill: 'rgb(200, 230, 201)',
+  stroke: 'rgb(67, 160, 71)'
+}, {
+  title: 'Red',
+  fill: 'rgb(255, 205, 210)',
+  stroke: 'rgb(229, 57, 53)'
+}, {
+  title: 'Purple',
+  fill: 'rgb(225, 190, 231)',
+  stroke: 'rgb(142, 36, 170)'
+}]
+export default {
+  props: {
+    bpmnModeler: Object,
+    xml: String,
+    elementSelector: Array,
+    scale: Number
+  },
+  data () {
+    return {
+      color: '',
+      isOpenColor: false,
+      activeName: 'first',
+      COLORS
+    }
+  },
+  methods: {
+    execCopy () {
+      if (!this.elementSelector.length) return this.$message.warning('请选择元素！')
+
+      const modeler = this.bpmnModeler
+      this.copy(modeler, this.elementSelector)
+    },
+    execPaste () {
+      const modeler = this.bpmnModeler
+      this.paste(modeler, 'Process_1', { x: 0, y: 0 })
+    },
+    redo () {
+      this.bpmnModeler.get('commandStack').redo()
+    },
+    undo () {
+      this.bpmnModeler.get('commandStack').undo()
+    },
+
+    openColor () {
+      this.isOpenColor = !this.isOpenColor
+    },
+
+    setColor (fill, stroke) {
+      if (!this.elementSelector.length) return this.$message.warning('请选择元素')
+      const modeling = this.bpmnModeler.get('modeling')
+      this.elementSelector.map(element => {
+        modeling.setColor(element, {
+          fill,
+          stroke
+        })
+      })
+    },
+
+    // left/top/right/bottom/cneter/middle
+    alignElements (position = 'center') {
+      if (!this.elementSelector.length) return this.$message.warning('请选择元素')
+      const alignElements = this.bpmnModeler.get('alignElements')
+      alignElements.trigger(this.elementSelector, position)
+    },
+
+    // horizontal/vertical
+    distributeElements (axis) {
+      if (!this.elementSelector.length) return this.$message.warning('请选择元素')
+      const alignElements = this.bpmnModeler.get('distributeElements')
+      alignElements.trigger(this.elementSelector, axis)
+    },
+
+    handlerZoom (radio) {
+      const newScale = !radio ? 1.0 : this.scale + radio
+      this.bpmnModeler.get('canvas').zoom(newScale)
+      this.$emit('scale', newScale)
+    },
+
+    async saveXml () {
+      const res = await this.bpmnModeler.saveXML({ format: true })
+      console.log(res);
+      
+      this.$emit('updateXml', res.xml)
+      this.$message.success('保存成功')
+    },
+
+    async saveBPMN () {
+      try {
+        const result = await this.bpmnModeler.saveXML({ format: true })
+        const { xml } = result
+
+        const xmlBlob = new Blob([xml], {
+          type: 'application/bpmn20-xml;charset=UTF-8,'
+        })
+
+        const downloadLink = document.createElement('a')
+        downloadLink.download = `bpmn-${+new Date()}.bpmn`
+        downloadLink.innerHTML = 'Get BPMN SVG'
+        downloadLink.href = window.URL.createObjectURL(xmlBlob)
+        downloadLink.onclick = function (event) {
+          document.body.removeChild(event.target)
+        }
+        downloadLink.style.visibility = 'hidden'
+        document.body.appendChild(downloadLink)
+        downloadLink.click()
+      } catch (err) {
+        console.log(err)
+      }
+    },
+
+    async loadBPMN () {
+      const that = this
+      const file = this.$refs.refFile.files[0]
+
+      const reader = new FileReader()
+      reader.readAsText(file)
+      reader.onload = function () {
+        that.$emit('updateXml', this.result)
+      }
+    },
+
+    async saveSVG () {
+      try {
+        const result = await this.bpmnModeler.saveSVG()
+        const { svg } = result
+
+        const svgBlob = new Blob([svg], {
+          type: 'image/svg+xml'
+        })
+
+        const downloadLink = document.createElement('a')
+        downloadLink.download = `bpmn-${+new Date()}.SVG`
+        downloadLink.innerHTML = 'Get BPMN SVG'
+        downloadLink.href = window.URL.createObjectURL(svgBlob)
+        downloadLink.onclick = function (event) {
+          document.body.removeChild(event.target)
+        }
+        downloadLink.style.visibility = 'hidden'
+        document.body.appendChild(downloadLink)
+        downloadLink.click()
+      } catch (err) {
+        console.log(err)
+      }
+    },
+
+    /**
+     * For the given modeler, copy an element to
+     * localStorage.
+     *
+     * @param  {BpmnModeler} modeler
+     * @param  {Array} elements
+     * @param  {String} target
+     * @param  {Point} position
+     */
+    copy (modeler, elements) {
+      var clipboard = modeler.get('clipboard')
+      var copyPaste = modeler.get('copyPaste')
+
+      // get element to be copied
+
+      // copy!
+      copyPaste.copy(elements)
+
+      // retrieve clipboard contents
+      var copied = clipboard.get()
+
+      // persist in local storage, encoded as json
+      localStorage.setItem('bpmnClipboard', JSON.stringify(copied))
+    },
+
+    /**
+    * For the given modeler retrieved copied elements from
+    * localStorage and paste them onto the specified target.
+    *
+    * @param  {BpmnModeler} modeler
+    * @param  {String} target
+    * @param  {Point} position
+    */
+    paste (modeler, targetId, position) {
+      var clipboard = modeler.get('clipboard')
+      var copyPaste = modeler.get('copyPaste')
+      var elementRegistry = modeler.get('elementRegistry')
+      var moddle = modeler.get('moddle')
+
+      // retrieve from local storage
+      var serializedCopy = localStorage.getItem('bpmnClipboard')
+
+      // parse tree, reinstantiating contained objects
+      var parsedCopy = JSON.parse(serializedCopy, this.createReviver(moddle))
+
+      // put into clipboard
+      clipboard.set(parsedCopy)
+
+      var pasteContext = {
+        element: elementRegistry.get(targetId),
+        point: position
+      }
+
+      // paste tree
+      copyPaste.paste(pasteContext)
+    },
+
+    /**
+    * A factory function that returns a reviver to be
+    * used with JSON#parse to reinstantiate moddle instances.
+    *
+    * @param  {Moddle} moddle
+    *
+    * @return {Function}
+    */
+    createReviver (moddle) {
+      var elCache = {}
+      /**
+       * The actual reviewer that creates model instances
+       * for elements with a $type attribute.
+       *
+       * Elements with ids will be re-used, if already
+       * created.
+       *
+       * @param  {String} key
+       * @param  {Object} object
+       *
+       * @return {Object} actual element
+       */
+      return function (key, object) {
+        if (typeof object === 'object' && typeof object.$type === 'string') {
+          var objectId = object.id
+
+          if (objectId && elCache[objectId]) {
+            return elCache[objectId]
+          }
+
+          var type = object.$type
+          var attrs = Object.assign({}, object)
+
+          delete attrs.$type
+
+          var newEl = moddle.create(type, attrs)
+
+          if (objectId) {
+            elCache[objectId] = newEl
+          }
+
+          return newEl
+        }
+
+        return object
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.header-container {
+  user-select: none;
+  .app-icon {
+    font-size: 14px;
+    padding: 5px;
+    margin-right: 4px;
+    width: 14px;
+    height: 16px;
+    cursor: pointer;
+    border: 1px solid rgba(1, 1, 1, 0);
+
+    &:hover {
+      background-color: #f8f8f8;
+      border: 1px solid #ccc;
+    }
+  }
+
+  .app-icon-set-color-tool {
+    position: relative;
+    .colorBlock {
+      margin: 4px;
+      width: 56px;
+      height: 16px;
+      border: 1px solid;
+    }
+
+    &.open {
+      background-color: #f8f8f8;
+      border: 1px solid #ccc;
+    }
+  }
+  .colorSelect {
+    z-index: 10;
+    position: absolute;
+    left: 0;
+    list-style: none;
+    transform: translateX(-50%);
+  }
+}
+i[class^='el-icon'] {
+  padding: 5px;
+
+  cursor: pointer;
+  border: 1px solid rgba(0, 0, 0, 0);
+}
+i[class^='el-icon']:hover {
+  background-color: #f8f8f8;
+  border: 1px solid #ccc;
+}
+</style>

package/app/src/components/diagram/customTranslate/customTranslate.js

@@ -0,0 +1,12 @@
+import translations from './translationsGerman'
+export default function customTranslate (template, replacements) {
+  replacements = replacements || {}
+  template = translations[template] || template
+  return template.replace(/{([^}]+)}/g, function (_, key) {
+    var str = replacements[key]
+    if (translations[replacements[key]] != null && translations[replacements[key]] !== 'undefined') {
+      str = translations[replacements[key]]
+    }
+    return str || '{' + key + '}'
+  })
+}

package/app/src/components/diagram/customTranslate/translationsGerman.js

@@ -0,0 +1,241 @@
+export default {
+  // Labels
+  'Activate the global connect tool': '激活全局连接工具',
+  'Append {type}': '追加 {type}',
+  'Append EndEvent': '追加 结束事件 ',
+  'Append Task': '追加 任务',
+  'Append Gateway': '追加 网关',
+  'Append Intermediate/Boundary Event': '追加 中间/边界 事件',
+  'Add Lane above': '在上面添加道',
+  'Divide into two Lanes': '分割成两个道',
+  'Divide into three Lanes': '分割成三个道',
+  'Add Lane below': '在下面添加道',
+  'Append compensation activity': '追加补偿活动',
+  'Change type': '修改类型',
+  'Connect using Association': '使用关联连接',
+  'Connect using Sequence/MessageFlow or Association': '使用顺序/消息流或者关联连接',
+  'Connect using DataInputAssociation': '使用数据输入关联连接',
+  Remove: '移除',
+  'Activate the hand tool': '激活抓手工具',
+  'Activate the lasso tool': '激活套索工具',
+  'Activate the create/remove space tool': '激活创建/删除空间工具',
+  'Create expanded SubProcess': '创建扩展子过程',
+  'Create IntermediateThrowEvent/BoundaryEvent': '创建中间抛出事件/边界事件',
+  'Create Pool/Participant': '创建池/参与者',
+  'Parallel Multi Instance': '并行多重事件',
+  'Sequential Multi Instance': '时序多重事件',
+  DataObjectReference: '数据对象参考',
+  DataStoreReference: '数据存储参考',
+  Loop: '循环',
+  'Ad-hoc': '即席',
+  'Create {type}': '创建 {type}',
+  'Create Task': '创建任务',
+  'Create StartEvent': '创建开始事件',
+  'Create EndEvent': '创建结束事件',
+  'Create Group': '创建组',
+  Task: '任务',
+  'Send Task': '发送任务',
+  'Receive Task': '接收任务',
+  'User Task': '用户任务',
+  'Manual Task': '手工任务',
+  'Business Rule Task': '业务规则任务',
+  'Service Task': '服务任务',
+  'Script Task': '脚本任务',
+  'Call Activity': '调用活动',
+  'Sub Process (collapsed)': '子流程（折叠的）',
+  'Sub Process (expanded)': '子流程（展开的）',
+  'Start Event': '开始事件',
+  StartEvent: '开始事件',
+  'Intermediate Throw Event': '中间事件',
+  'End Event': '结束事件',
+  EndEvent: '结束事件',
+  'Create Gateway': '创建网关',
+  GateWay: '网关',
+  'Create Intermediate/Boundary Event': '创建中间/边界事件',
+  'Message Start Event': '消息开始事件',
+  'Timer Start Event': '定时开始事件',
+  'Conditional Start Event': '条件开始事件',
+  'Signal Start Event': '信号开始事件',
+  'Error Start Event': '错误开始事件',
+  'Escalation Start Event': '升级开始事件',
+  'Compensation Start Event': '补偿开始事件',
+  'Message Start Event (non-interrupting)': '消息开始事件（非中断）',
+  'Timer Start Event (non-interrupting)': '定时开始事件（非中断）',
+  'Conditional Start Event (non-interrupting)': '条件开始事件（非中断）',
+  'Signal Start Event (non-interrupting)': '信号开始事件（非中断）',
+  'Escalation Start Event (non-interrupting)': '升级开始事件（非中断）',
+  'Message Intermediate Catch Event': '消息中间捕获事件',
+  'Message Intermediate Throw Event': '消息中间抛出事件',
+  'Timer Intermediate Catch Event': '定时中间捕获事件',
+  'Escalation Intermediate Throw Event': '升级中间抛出事件',
+  'Conditional Intermediate Catch Event': '条件中间捕获事件',
+  'Link Intermediate Catch Event': '链接中间捕获事件',
+  'Link Intermediate Throw Event': '链接中间抛出事件',
+  'Compensation Intermediate Throw Event': '补偿中间抛出事件',
+  'Signal Intermediate Catch Event': '信号中间捕获事件',
+  'Signal Intermediate Throw Event': '信号中间抛出事件',
+  'Message End Event': '消息结束事件',
+  'Escalation End Event': '定时结束事件',
+  'Error End Event': '错误结束事件',
+  'Cancel End Event': '取消结束事件',
+  'Compensation End Event': '补偿结束事件',
+  'Signal End Event': '信号结束事件',
+  'Terminate End Event': '终止结束事件',
+  'Message Boundary Event': '消息边界事件',
+  'Message Boundary Event (non-interrupting)': '消息边界事件（非中断）',
+  'Timer Boundary Event': '定时边界事件',
+  'Timer Boundary Event (non-interrupting)': '定时边界事件（非中断）',
+  'Escalation Boundary Event': '升级边界事件',
+  'Escalation Boundary Event (non-interrupting)': '升级边界事件（非中断）',
+  'Conditional Boundary Event': '条件边界事件',
+  'Conditional Boundary Event (non-interrupting)': '条件边界事件（非中断）',
+  'Error Boundary Event': '错误边界事件',
+  'Cancel Boundary Event': '取消边界事件',
+  'Signal Boundary Event': '信号边界事件',
+  'Signal Boundary Event (non-interrupting)': '信号边界事件（非中断）',
+  'Compensation Boundary Event': '补偿边界事件',
+  'Exclusive Gateway': '互斥网关',
+  'Parallel Gateway': '并行网关',
+  'Inclusive Gateway': '相容网关',
+  'Complex Gateway': '复杂网关',
+  'Event based Gateway': '事件网关',
+  Transaction: '转运',
+  'Sub Process': '子流程',
+  'Event Sub Process': '事件子流程',
+  'Collapsed Pool': '折叠池',
+  'Expanded Pool': '展开池',
+  // Errors
+  'no parent for {element} in {parent}': '在{parent}里，{element}没有父类',
+  'no shape type specified': '没有指定的形状类型',
+  'flow elements must be children of pools/participants': '流元素必须是池/参与者的子类',
+  'out of bounds release': 'out of bounds release',
+  'more than {count} child lanes': '子道大于{count} ',
+  'element required': '元素不能为空',
+  'diagram not part of bpmn:Definitions': '流程图不符合bpmn规范',
+  'no diagram to display': '没有可展示的流程图',
+  'no process or collaboration to display': '没有可展示的流程/协作',
+  'element {element} referenced by {referenced}#{property} not yet drawn': '由{referenced}#{property}引用的{element}元素仍未绘制',
+  'already rendered {element}': '{element} 已被渲染',
+  'failed to import {element}': '导入{element}失败',
+  // 属性面板的参数
+  Id: '编号',
+  Name: '名称',
+  General: '常规',
+  Details: '详情',
+  'Message Name': '消息名称',
+  Message: '消息',
+  Initiator: '创建者',
+  'Asynchronous Continuations': '持续异步',
+  'Asynchronous Before': '异步前',
+  'Asynchronous After': '异步后',
+  'Job Configuration': '工作配置',
+  Exclusive: '排除',
+  'Job Priority': '工作优先级',
+  'Retry Time Cycle': '重试时间周期',
+  Documentation: '文档',
+  'Element Documentation': '元素文档',
+  'History Configuration': '历史配置',
+  'History Time To Live': '历史的生存时间',
+  Forms: '表单',
+  'Form Key': '表单key',
+  'Form Fields': '表单字段',
+  'Business Key': '业务key',
+  'Form Field': '表单字段',
+  ID: '编号',
+  Type: '类型',
+  Label: '名称',
+  'Default Value': '默认值',
+  Validation: '校验',
+  'Add Constraint': '添加约束',
+  Config: '配置',
+  Properties: '属性',
+  'Add Property': '添加属性',
+  Value: '值',
+  Add: '添加',
+  Values: '值',
+  'Add Value': '添加值',
+  Listeners: '监听器',
+  'Execution Listener': '执行监听',
+  'Event Type': '事件类型',
+  'Listener Type': '监听器类型',
+  'Java Class': 'Java类',
+  Expression: '表达式',
+  'Must provide a value': '必须提供一个值',
+  'Delegate Expression': '代理表达式',
+  Script: '脚本',
+  'Script Format': '脚本格式',
+  'Script Type': '脚本类型',
+  'Inline Script': '内联脚本',
+  'External Script': '外部脚本',
+  Resource: '资源',
+  'Field Injection': '字段注入',
+  Extensions: '扩展',
+  'Input/Output': '输入/输出',
+  'Input Parameters': '输入参数',
+  'Output Parameters': '输出参数',
+  Parameters: '参数',
+  'Output Parameter': '输出参数',
+  'Timer Definition Type': '定时器定义类型',
+  'Timer Definition': '定时器定义',
+  Date: '日期',
+  Duration: '持续',
+  Cycle: '循环',
+  Signal: '信号',
+  'Signal Name': '信号名称',
+  Escalation: '升级',
+  Error: '错误',
+  'Link Name': '链接名称',
+  Condition: '条件名称',
+  'Variable Name': '变量名称',
+  'Variable Event': '变量事件',
+  'Specify more than one variable change event as a comma separated list.': '多个变量事件以逗号隔开',
+  'Wait for Completion': '等待完成',
+  'Activity Ref': '活动参考',
+  'Version Tag': '版本标签',
+  Executable: '可执行文件',
+  'External Task Configuration': '扩展任务配置',
+  'Task Priority': '任务优先级',
+  External: '外部',
+  Connector: '连接器',
+  'Must configure Connector': '必须配置连接器',
+  'Connector Id': '连接器编号',
+  Implementation: '实现方式',
+  'Field Injections': '字段注入',
+  Fields: '字段',
+  'Result Variable': '结果变量',
+  Topic: '主题',
+  'Configure Connector': '配置连接器',
+  'Input Parameter': '输入参数',
+  Assignee: '代理人',
+  'Candidate Users': '候选用户',
+  'Candidate Groups': '候选组',
+  'Due Date': '到期时间',
+  'Follow Up Date': '跟踪日期',
+  Priority: '优先级',
+  // eslint-disable-next-line no-template-curly-in-string
+  'The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)': '跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
+  // eslint-disable-next-line no-template-curly-in-string
+  'The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)': '跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
+  Variables: '变量',
+  'Candidate Starter Configuration': '候选开始配置',
+  'Task Listener': '任务监听器',
+  'Candidate Starter Groups': '候选开始组',
+  'Candidate Starter Users': '候选开始用户',
+  'Tasklist Configuration': '任务列表配置',
+  Startable: '启动',
+  'Specify more than one group as a comma separated list.': '指定多个组,用逗号分隔',
+  'Specify more than one user as a comma separated list.': '指定多个用户,用逗号分隔',
+  'This maps to the process definition key.': '这会映射为流程定义的键',
+  'CallActivity Type': '调用活动类型',
+  'Condition Type': '条件类型',
+  'Create UserTask': '创建用户任务',
+  'Create CallActivity': '创建调用活动',
+  'Called Element': '调用元素',
+  'Create DataObjectReference': '创建数据对象引用',
+  'Create DataStoreReference': '创建数据存储引用',
+  'Multi Instance': '多实例',
+  'Loop Cardinality': '实例数量',
+  Collection: '任务参与人列表',
+  'Element Variable': '元素变量',
+  'Completion Condition': '完成条件'
+}