npmapps 1.0.25 → 1.0.27

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

@@ -0,0 +1,261 @@
+<template>
+  <div class="mid-container">
+    <ToolBar @updateXml="updateXml" @updateScale="updateScale" :bpmnModeler="bpmnModeler" :elementSelector="elementSelector" :xml="xml" :scale.sync="scale" />
+
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="diagram_1.bpmn" name="first">
+        <div class="bpmn-container" v-show="radioValue === 'Diagram'">
+          <div class="canvas-container">
+            <div ref="canvas" class="canves"></div>
+            <div class="properties" :class="{open: openPanel}">
+              <div class="toggle" @click="openPanel = !openPanel">Properties Panel</div>
+              <div ref="propertiesPanel" class="panel"></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="xml-container" v-if="isShowXml">
+          <codemirror ref="cmEditor" @changes="mirrorCodeChange" :value="xml.toString()" :options="cmOptions" />
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+
+    <div class="bottom-container">
+      <el-radio-group v-model="radioValue" size="mini">
+        <el-radio-button label="Diagram"></el-radio-button>
+        <el-radio-button label="Xml"></el-radio-button>
+      </el-radio-group>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import Modeler from 'bpmn-js/lib/Modeler'
+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'
+import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css'
+import 'bpmn-js-properties-panel/styles/properties.less'
+import 'diagram-js-minimap/assets/diagram-js-minimap.css'
+import minimapModule from 'diagram-js-minimap'
+import propertiesPanelModule from 'bpmn-js-properties-panel'
+import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
+import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda.json'
+
+import { codemirror } from 'vue-codemirror'
+import 'codemirror/lib/codemirror.css'
+// xml syntax highlighting
+import 'codemirror/mode/xml/xml'
+// auto close tags
+import 'codemirror/addon/fold/xml-fold'
+import 'codemirror/addon/edit/closetag'
+// search addons
+import 'codemirror/addon/search/search'
+import 'codemirror/addon/search/searchcursor'
+import 'codemirror/addon/dialog/dialog'
+import 'codemirror/addon/dialog/dialog.css'
+
+import '@/assets/css/diagram.less'
+import '@/assets/icon/Icon.less'
+import ToolBar from '@/components/diagram/ToolBar.vue'
+import { xmlStr } from './xmlData.js'
+import { mapMutations } from 'vuex'
+
+// 导入汉化包
+import customTranslate from '@/components/diagram/customTranslate/customTranslate'
+export default {
+  components: { ToolBar, codemirror },
+  props: {
+  },
+  data () {
+    return {
+      bpmnModeler: null,
+      xml: '',
+      elementSelector: [],
+      openPanel: true,
+      scale: 1,
+      activeName: 'first',
+      radioValue: 'Diagram',
+      cmOptions: {
+        autoCloseTags: true,
+        dragDrop: true,
+        allowDropFileTypes: ['text/plain'],
+        lineWrapping: true,
+        lineNumbers: true,
+        mode: {
+          name: 'application/xml',
+          htmlMode: false
+        },
+        tabSize: 2
+      }
+    }
+  },
+  computed: {
+    isShowXml () {
+      return this.radioValue === 'Xml'
+    }
+  },
+  watch: {
+    radioValue: {
+      immediate: true,
+      handler (v, o) {
+        this.setRadioValue(v)
+        if (this.isShowXml) {
+          this.saveXML()
+        }
+      }
+    }
+  },
+  mounted () {
+    this.init()
+  },
+  methods: {
+    ...mapMutations(['setRadioValue']),
+    init () {
+      // 添加翻译组件
+      var customTranslateModule = {
+        translate: ['value', customTranslate]
+      }
+      this.bpmnModeler = new Modeler({
+        container: this.$refs.canvas,
+        keyboard: {
+          bindTo: document
+        },
+        propertiesPanel: {
+          parent: this.$refs.propertiesPanel
+        },
+        additionalModules: [
+          minimapModule,
+          propertiesPanelModule,
+          propertiesProviderModule,
+          customTranslateModule
+        ],
+        moddleExtensions: {
+          camunda: camundaModdleDescriptor
+        }
+      })
+
+      this.createNewDiagram()
+
+      this.initEvent()
+
+      // 默认打开 minimap
+      this.bpmnModeler.get('minimap').open()
+    },
+
+    async createNewDiagram () {
+      try {
+        await this.bpmnModeler.importXML(this.xml || xmlStr)
+        this.bpmnModeler.get('canvas').zoom('fit-viewport', 'auto')
+        this.saveXML()
+      } catch (err) {
+      }
+    },
+
+    initEvent () {
+      const eventBus = this.bpmnModeler.get('eventBus')
+      eventBus.on('selection.changed', e => {
+        this.elementSelector = e.newSelection
+      })
+    },
+
+    updateXml (xml) {
+      this.xml = xml
+      this.createNewDiagram()
+    },
+
+    updateScale (value) {
+      this.scale = value
+    },
+
+    getCurDiagram () {
+      return this
+    },
+
+    handleClick () { },
+
+    async saveXML () {
+      const res = await this.bpmnModeler.saveXML({ format: true })
+      this.xml = res.xml.toString()
+    },
+
+    mirrorCodeChange (instance, changeObj) {
+      this.xml = instance.getValue()
+      this.createNewDiagram()
+    }
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.bpmn-container {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  height: calc(100vh - 295px);
+  .canvas-container {
+    display: flex;
+    height: 100%;
+  }
+
+  .canves {
+    height: 100%;
+    width: 100%;
+  }
+
+  .properties {
+    overflow: auto;
+    position: relative;
+    width: 0px;
+    flex: none;
+    border-left: solid 1px #ccc;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+    outline: none;
+    background: #f8f8f8;
+    &.open {
+      width: 250px;
+    }
+
+    .toggle {
+      position: absolute;
+      left: -30px;
+      top: 50%;
+      background: #f8f8f8;
+      padding: 7px 10px;
+      transform: rotate(-90deg);
+      white-space: nowrap;
+      font-size: 13px;
+      border: solid 1px #ccc;
+      border-bottom: none;
+      border-radius: 2px 2px 0 0;
+      transform-origin: top left;
+      z-index: 10;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .panel {
+      border-left: 1px solid #ccc;
+      overflow: auto;
+      /deep/.bpp-properties-panel {
+        height: 100%;
+      }
+    }
+  }
+}
+
+.bottom-container {
+  z-index: 9;
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+}
+
+/deep/.CodeMirror {
+  height: calc(100vh - 95px);
+}
+</style>

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

@@ -0,0 +1,29 @@
+export const xmlStr = `<?xml version="1.0" encoding="UTF-8"?>
+<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="sid-38422fae-e03e-43a3-bef4-bd33b32041b2" targetNamespace="http://bpmn.io/bpmn" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="5.1.2">
+<process id="Process_1" isExecutable="false">
+    <startEvent id="StartEvent_1y45yut" name="开始">
+    <outgoing>SequenceFlow_0h21x7r</outgoing>
+    </startEvent>
+    <task id="Task_1hcentk">
+    <incoming>SequenceFlow_0h21x7r</incoming>
+    </task>
+    <sequenceFlow id="SequenceFlow_0h21x7r" sourceRef="StartEvent_1y45yut" targetRef="Task_1hcentk" />
+</process>
+<bpmndi:BPMNDiagram id="BpmnDiagram_1">
+    <bpmndi:BPMNPlane id="BpmnPlane_1" bpmnElement="Process_1">
+    <bpmndi:BPMNShape id="StartEvent_1y45yut_di" bpmnElement="StartEvent_1y45yut">
+        <omgdc:Bounds x="152" y="102" width="36" height="36" />
+        <bpmndi:BPMNLabel>
+        <omgdc:Bounds x="160" y="145" width="22" height="14" />
+        </bpmndi:BPMNLabel>
+    </bpmndi:BPMNShape>
+    <bpmndi:BPMNShape id="Task_1hcentk_di" bpmnElement="Task_1hcentk">
+        <omgdc:Bounds x="240" y="80" width="100" height="80" />
+    </bpmndi:BPMNShape>
+    <bpmndi:BPMNEdge id="SequenceFlow_0h21x7r_di" bpmnElement="SequenceFlow_0h21x7r">
+        <omgdi:waypoint x="188" y="120" />
+        <omgdi:waypoint x="240" y="120" />
+    </bpmndi:BPMNEdge>
+    </bpmndi:BPMNPlane>
+</bpmndi:BPMNDiagram>
+</definitions>`

package/app/src/directives/filldown.js

@@ -0,0 +1,155 @@
+function ensurePosition(el) {
+  const pos = window.getComputedStyle(el).position;
+  if (!pos || pos === "static") {
+    el.style.position = "relative";
+  }
+}
+
+function createHandle() {
+  const h = document.createElement("span");
+  h.className = "v-filldown-handle";
+  h.style.position = "absolute";
+  h.style.right = "2px";
+  h.style.bottom = "2px";
+  h.style.width = "0";
+  h.style.height = "0";
+  h.style.borderLeft = "6px solid transparent";
+  h.style.borderTop = "6px solid #409EFF";
+  h.style.cursor = "crosshair";
+  h.style.display = "none";
+  h.style.zIndex = "10";
+  return h;
+}
+
+function setSelected(el, selected) {
+  if (selected) {
+    el.classList.add("v-filldown-selected");
+  } else {
+    el.classList.remove("v-filldown-selected");
+  }
+}
+
+function attach(el, binding) {
+  const value = binding.value || {};
+  const group = value.group;
+  const rows = value.rows;
+  const prop = value.prop;
+  const index = value.index;
+
+  el.dataset.filldownGroup = group || "";
+  el.dataset.filldownIndex = typeof index === "number" ? String(index) : "";
+
+  ensurePosition(el);
+  let handle = el._filldownHandle;
+  if (!handle) {
+    handle = createHandle();
+    el._filldownHandle = handle;
+    el.appendChild(handle);
+    el.addEventListener("mouseenter", () => {
+      handle.style.display = "block";
+    });
+    el.addEventListener("mouseleave", () => {
+      if (!el._filldownDragging) handle.style.display = "none";
+    });
+  }
+
+  function findTargetByPoint(clientX, clientY) {
+    let target = document.elementFromPoint(clientX, clientY);
+    while (target && target !== document.body) {
+      if (
+        target.dataset &&
+        target.dataset.filldownGroup &&
+        target.dataset.filldownGroup === group
+      ) {
+        return target;
+      }
+      target = target.parentElement;
+    }
+    return null;
+  }
+
+  function clearSelection() {
+    const list = document.querySelectorAll(
+      `[data-filldown-group="${group}"].v-filldown-selected`
+    );
+    list.forEach((n) => setSelected(n, false));
+  }
+
+  function startDrag(e) {
+    if (!rows || !Array.isArray(rows) || !prop) return;
+    el._filldownDragging = true;
+    handle.style.display = "block";
+    const startIndex = Number(el.dataset.filldownIndex || 0);
+    const startValue = rows[startIndex] ? rows[startIndex][prop] : undefined;
+    let lastIndex = startIndex;
+
+    function onMove(ev) {
+      const t = findTargetByPoint(ev.clientX, ev.clientY);
+      if (t && t.dataset.filldownIndex) {
+        const currIndex = Number(t.dataset.filldownIndex);
+        if (currIndex !== lastIndex) {
+          clearSelection();
+          if (currIndex > startIndex) {
+            for (let i = startIndex + 1; i <= currIndex; i++) {
+              const elItem = document.querySelector(
+                `[data-filldown-group="${group}"][data-filldown-index="${i}"]`
+              );
+              if (elItem) setSelected(elItem, true);
+            }
+          }
+          lastIndex = currIndex;
+        }
+      }
+    }
+
+    function onUp() {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+      el._filldownDragging = false;
+      handle.style.display = "none";
+      if (typeof lastIndex === "number" && lastIndex > startIndex) {
+        for (let i = startIndex + 1; i <= lastIndex; i++) {
+          if (rows[i] && prop in rows[i]) {
+            rows[i][prop] = startValue;
+          }
+        }
+      }
+      clearSelection();
+    }
+
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  handle.onmousedown = startDrag;
+}
+
+export default {
+  inserted(el, binding) {
+    attach(el, binding);
+  },
+  update(el, binding) {
+    attach(el, binding);
+  },
+  unbind(el) {
+    if (el._filldownHandle) {
+      el._filldownHandle.onmousedown = null;
+      el._filldownHandle.remove();
+      el._filldownHandle = null;
+    }
+  },
+};
+
+const styleId = "v-filldown-style";
+if (!document.getElementById(styleId)) {
+  const style = document.createElement("style");
+  style.id = styleId;
+  style.innerHTML = `
+  .v-filldown-selected{
+    background-color: rgba(64,158,255,0.12);
+  }
+  `;
+  document.head.appendChild(style);
+}