npmapps 1.1.6 → 1.3.1

package/app/wujie-wk/wujie-vue2-child/src/components/diagram/index.vue

@@ -1,261 +0,0 @@
-<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/wujie-wk/wujie-vue2-child/src/components/diagram/xmlData.js

@@ -1,29 +0,0 @@
-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/wujie-wk/wujie-vue2-child/src/directives/filldown.js

@@ -1,155 +0,0 @@
-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);
-}