tianheng-ui 0.1.0 → 0.1.1

package/packages/Workflow/modules/auto-place/CustomAutoPlace.js

@@ -0,0 +1,81 @@
+import AutoPlace from "diagram-js/lib/features/auto-place/AutoPlace";
+
+export default function CustomAutoPlace(eventBus, modeling) {
+  AutoPlace.call(this, eventBus, modeling, 3000);
+
+  eventBus.on("autoPlace", 3000, function(context) {
+    const shape = context.shape,
+      source = context.source;
+
+    return getNewCustomShapePosition(source, shape);
+  });
+
+  this.append = function(source, shape, hints) {
+    eventBus.fire("autoPlace.start", {
+      source: source,
+      shape: shape
+    });
+
+    // allow others to provide the position
+    var position = eventBus.fire("autoPlace", {
+      source: source,
+      shape: shape
+    });
+
+    console.log("hints", hints, "position", position);
+
+    var newShape = modeling.appendShape(source, shape, position, source.parent, hints);
+
+    eventBus.fire("autoPlace.end", {
+      source: source,
+      shape: newShape
+    });
+
+    return newShape;
+  };
+}
+
+export function asTRBL(bounds) {
+  return {
+    top: bounds.y,
+    right: bounds.x + (bounds.width || 0),
+    bottom: bounds.y + (bounds.height || 0),
+    left: bounds.x
+  };
+}
+
+export function roundPoint(point) {
+  return {
+    x: Math.round(point.x),
+    y: Math.round(point.y)
+  };
+}
+
+export function getMid(bounds) {
+  return roundPoint({
+    x: bounds.x + (bounds.width || 0) / 2,
+    y: bounds.y + (bounds.height || 0) / 2
+  });
+}
+
+export function getNewCustomShapePosition(source, element, hints) {
+  if (!hints) {
+    hints = {};
+  }
+
+  var distance = hints.defaultDistance || 50;
+
+  var sourceMid = getMid(source),
+    sourceTrbl = asTRBL(source);
+
+  // simply put element right next to source
+  return {
+    x: sourceMid.x,
+    y: sourceTrbl.bottom + distance + element.height / 2
+  };
+}
+
+const F = function() {}; // 核心，利用空对象作为中介；
+F.prototype = AutoPlace.prototype; // 核心，将父类的原型赋值给空对象F；
+CustomAutoPlace.prototype = new F(); // 核心，将 F的实例赋值给子类；
+CustomAutoPlace.prototype.constructor = AutoPlace; // 修复子类CustomRenderer的构造器指向，防止原型链的混乱；

package/packages/Workflow/modules/auto-place/index.js

@@ -0,0 +1,6 @@
+import CustomAutoPlace from "./CustomAutoPlace";
+
+export default {
+  __init__: ["autoPlace"],
+  autoPlace: ["type", CustomAutoPlace]
+};

package/packages/Workflow/modules/custom-renderer/CustomRenderer.js

@@ -0,0 +1,17 @@
+import BpmnRenderer from "bpmn-js/lib/draw/BpmnRenderer";
+
+export default function CustomRenderer(eventBus, styles, pathMap, canvas, textRenderer) {
+  const config = {
+    defaultFillColor: "",
+    defaultStrokeColor: "#8b238f",
+    defaultLabelColor: "#2dd257"
+  };
+  BpmnRenderer.call(this, config, eventBus, styles, pathMap, canvas, textRenderer, 2000);
+}
+
+CustomRenderer.$inject = ["eventBus", "styles", "pathMap", "canvas", "textRenderer"];
+
+const F = function() {}; // 核心，利用空对象作为中介；
+F.prototype = BpmnRenderer.prototype; // 核心，将父类的原型赋值给空对象F；
+CustomRenderer.prototype = new F(); // 核心，将 F的实例赋值给子类；
+CustomRenderer.prototype.constructor = CustomRenderer; // 修复子类CustomRenderer的构造器指向，防止原型链的混乱；

package/packages/Workflow/modules/custom-renderer/index.js

@@ -0,0 +1,6 @@
+import CustomRenderer from "./CustomRenderer";
+
+export default {
+  __init__: ["customRenderer"],
+  customRenderer: ["type", CustomRenderer]
+};

package/packages/Workflow/modules/rules/CustomRules.js

@@ -0,0 +1,16 @@
+import BpmnRules from "bpmn-js/lib/features/rules/BpmnRules";
+import inherits from "inherits";
+
+export default function CustomRules(eventBus) {
+  BpmnRules.call(this, eventBus);
+}
+
+inherits(CustomRules, BpmnRules);
+
+CustomRules.prototype.canDrop = function() {
+  return false;
+};
+
+CustomRules.prototype.canMove = function() {
+  return false;
+};

package/packages/Workflow/modules/rules/index.js

@@ -0,0 +1,6 @@
+import CustomRules from "./CustomRules";
+
+export default {
+  __init__: ["customRules"],
+  customRules: ["type", CustomRules]
+};

package/packages/Workflow/palette/ProcessPalette.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="my-process-palette">
+    <!-- <p>简易palette</p> -->
+    <el-collapse>
+      <el-collapse-item title="任务" name="1">
+        <!--  可以简化。。。 -->
+        <div class="custom-button" @click="createElement($event, 'Task')" @mousedown="createElement($event, 'Task')">
+          任务
+        </div>
+        <div class="custom-button" @click="createElement($event, 'UserTask')" @mousedown="createElement($event, 'UserTask')">
+          用户任务
+        </div>
+        <div class="custom-button" @click="createElement($event, 'SendTask')" @mousedown="createElement($event, 'SendTask')">
+          发送任务
+        </div>
+        <div class="custom-button" @click="createElement($event, 'ReceiveTask')" @mousedown="createElement($event, 'ReceiveTask')">
+          接收任务
+        </div>
+        <div class="custom-button" @click="createElement($event, 'ScriptTask')" @mousedown="createElement($event, 'ScriptTask')">
+          脚本任务
+        </div>
+        <div class="custom-button" @click="createElement($event, 'ServiceTask')" @mousedown="createElement($event, 'ServiceTask')">
+          服务任务
+        </div>
+      </el-collapse-item>
+      <el-collapse-item title="网关" name="2">
+        <div class="custom-button" @click="createElement($event, 'Gateway')" @mousedown="createElement($event, 'Gateway')">
+          网关
+        </div>
+      </el-collapse-item>
+      <el-collapse-item title="开始" name="3">
+        <div class="custom-button" @click="createElement($event, 'StartEvent')" @mousedown="createElement($event, 'StartEvent')">
+          开始
+        </div>
+      </el-collapse-item>
+      <el-collapse-item title="结束" name="4">
+        <div class="custom-button" @click="createElement($event, 'EndEvent')" @mousedown="createElement($event, 'EndEvent')">
+          结束
+        </div>
+      </el-collapse-item>
+      <el-collapse-item title="工具" name="5">
+        <div class="custom-button" @click="startTool($event, 'handTool')" @mousedown="startTool($event, 'handTool')">
+          手型工具
+        </div>
+        <div class="custom-button" @click="startTool($event, 'lassoTool')" @mousedown="startTool($event, 'lassoTool')">
+          框选工具
+        </div>
+        <div class="custom-button" @click="startTool($event, 'connectTool')" @mousedown="startTool($event, 'connectTool')">
+          连线工具
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<script>
+import { assign } from "min-dash";
+
+export default {
+  name: "MyProcessPalette",
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {
+    createElement(event, type, options = {}) {
+      const ElementFactory = window.bpmnInstances.elementFactory;
+      const create = window.bpmnInstances.modeler.get("create");
+      const shape = ElementFactory.createShape(assign({ type: `bpmn:${type}` }, options));
+      if (options) {
+        shape.businessObject.di.isExpanded = options.isExpanded;
+      }
+      create.start(event, shape);
+    },
+    startTool(event, type) {
+      if (type === "handTool") {
+        window.bpmnInstances.modeler.get("handTool").activateHand(event);
+      }
+      if (type === "lassoTool") {
+        window.bpmnInstances.modeler.get("lassoTool").activateSelection(event);
+      }
+      if (type === "connectTool") {
+        window.bpmnInstances.modeler.get("globalConnect").toggle(event);
+      }
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.my-process-palette {
+  box-sizing: border-box;
+  padding: 8px;
+  .custom-button {
+    box-sizing: border-box;
+    padding: 4px 8px;
+    border-radius: 4px;
+    border: 1px solid rgba(24, 144, 255, 0.8);
+    cursor: pointer;
+    margin-bottom: 8px;
+    &:first-child {
+      margin-top: 8px;
+    }
+  }
+}
+</style>

package/packages/Workflow/palette/index.js

@@ -0,0 +1,7 @@
+import MyPropertiesPalette from "./ProcessPalette.vue";
+
+MyPropertiesPalette.install = function(Vue) {
+  Vue.component(MyPropertiesPalette.name, MyPropertiesPalette);
+};
+
+export default MyPropertiesPalette;

package/packages/Workflow/penal/PropertiesPanel.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="process-panel__container" :style="{ width: `${this.width}px` }">
+    <el-collapse v-model="activeTab">
+      <el-collapse-item name="base">
+        <div slot="title" class="panel-tab__title">
+          <i class="el-icon-info"></i>常规
+        </div>
+        <element-base-info
+          :id-edit-disabled="idEditDisabled"
+          :business-object="elementBusinessObject"
+          :type="elementType"
+        />
+      </el-collapse-item>
+      <el-collapse-item
+        name="condition"
+        v-if="elementType === 'Process'"
+        key="message"
+      >
+        <div slot="title" class="panel-tab__title">
+          <i class="el-icon-s-comment"></i>消息与信号
+        </div>
+        <signal-and-massage />
+      </el-collapse-item>
+      <el-collapse-item
+        name="condition"
+        v-if="conditionFormVisible"
+        key="condition"
+      >
+        <div slot="title" class="panel-tab__title">
+          <i class="el-icon-s-promotion"></i>流转条件
+        </div>
+        <flow-condition
+          :business-object="elementBusinessObject"
+          :type="elementType"
+        />
+      </el-collapse-item>
+      <!-- <el-collapse-item name="condition" v-if="formVisible" key="form">
+        <div slot="title" class="panel-tab__title">
+          <i class="el-icon-s-order"></i>表单
+        </div>
+        <element-form :id="elementId" :type="elementType" />
+      </el-collapse-item> -->
+      <el-collapse-item
+        name="task"
+        v-if="elementType.indexOf('Task') !== -1"
+        key="task"
+      >
+        <div slot="title" class="panel-tab__title">
+          <i class="el-icon-s-claim"></i>任务
+        </div>
+        <element-task :id="elementId" :type="elementType" />
+      </el-collapse-item>
+      <!-- <el-collapse-item
+        name="multiInstance"
+        v-if="elementType.indexOf('Task') !== -1"
+        key="multiInstance"
+      >
+        <div slot="title" class="panel-tab__title">
+          <i class="el-icon-s-help"></i>多实例
+        </div>
+        <element-multi-instance
+          :business-object="elementBusinessObject"
+          :type="elementType"
+        />
+      </el-collapse-item>
+      <el-collapse-item name="listeners" key="listeners">
+        <div slot="title" class="panel-tab__title">
+          <i class="el-icon-message-solid"></i>执行监听器
+        </div>
+        <element-listeners :id="elementId" :type="elementType" />
+      </el-collapse-item>
+      <el-collapse-item
+        name="taskListeners"
+        v-if="elementType === 'UserTask'"
+        key="taskListeners"
+      >
+        <div slot="title" class="panel-tab__title">
+          <i class="el-icon-message-solid"></i>任务监听器
+        </div>
+        <user-task-listeners :id="elementId" :type="elementType" />
+      </el-collapse-item>
+      <el-collapse-item name="extensions" key="extensions">
+        <div slot="title" class="panel-tab__title">
+          <i class="el-icon-circle-plus"></i>扩展属性
+        </div>
+        <element-properties :id="elementId" :type="elementType" />
+      </el-collapse-item>
+      <el-collapse-item name="other" key="other">
+        <div slot="title" class="panel-tab__title">
+          <i class="el-icon-s-promotion"></i>其他
+        </div>
+        <element-other-config :id="elementId" />
+      </el-collapse-item> -->
+    </el-collapse>
+  </div>
+</template>
+<script>
+import ElementBaseInfo from "./base/ElementBaseInfo";
+// import ElementOtherConfig from "./other/ElementOtherConfig";
+import ElementTask from "./task/ElementTask";
+// import ElementMultiInstance from "./multi-instance/ElementMultiInstance";
+import FlowCondition from "./flow-condition/FlowCondition";
+import SignalAndMassage from "./signal-message/SignalAndMessage";
+// import ElementListeners from "./listeners/ElementListeners";
+// import ElementProperties from "./properties/ElementProperties";
+// import ElementForm from "./form/ElementForm";
+// import UserTaskListeners from "./listeners/UserTaskListeners";
+import Log from "../Log";
+/**
+ * 侧边栏
+ * @Author MiyueFE
+ * @Home https://github.com/miyuesc
+ * @Date 2021年3月31日18:57:51
+ */
+export default {
+  components: {
+    // UserTaskListeners,
+    // ElementForm,
+    // ElementProperties,
+    // ElementListeners,
+    SignalAndMassage,
+    FlowCondition,
+    // ElementMultiInstance,
+    ElementTask,
+    // ElementOtherConfig,
+    ElementBaseInfo
+  },
+  props: {
+    bpmnModeler: Object,
+    prefix: {
+      type: String,
+      default: "camunda"
+    },
+    width: {
+      type: Number,
+      default: 400
+    },
+    idEditDisabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  provide() {
+    return {
+      prefix: this.prefix,
+      width: this.width
+    };
+  },
+  data() {
+    return {
+      activeTab: "base",
+      elementId: "",
+      elementType: "",
+      elementBusinessObject: {}, // 元素 businessObject 镜像，提供给需要做判断的组件使用
+      conditionFormVisible: false, // 流转条件设置
+      formVisible: false // 表单配置
+    };
+  },
+  watch: {
+    elementId: {
+      handler() {
+        this.activeTab = "base";
+      }
+    }
+  },
+  created() {
+    this.initModels();
+  },
+  methods: {
+    initModels() {
+      // 初始化 modeler 以及其他 moddle
+      if (!this.bpmnModeler) {
+        // 避免加载时 流程图 并未加载完成
+        this.timer = setTimeout(() => this.initModels(), 10);
+        return;
+      }
+      if (this.timer) clearTimeout(this.timer);
+      window.bpmnInstances = {
+        modeler: this.bpmnModeler,
+        modeling: this.bpmnModeler.get("modeling"),
+        moddle: this.bpmnModeler.get("moddle"),
+        eventBus: this.bpmnModeler.get("eventBus"),
+        bpmnFactory: this.bpmnModeler.get("bpmnFactory"),
+        elementFactory: this.bpmnModeler.get("elementFactory"),
+        elementRegistry: this.bpmnModeler.get("elementRegistry"),
+        replace: this.bpmnModeler.get("replace"),
+        selection: this.bpmnModeler.get("selection")
+      };
+      this.getActiveElement();
+    },
+    getActiveElement() {
+      // 初始第一个选中元素 bpmn:Process
+      this.initFormOnChanged(null);
+      this.bpmnModeler.on("import.done", e => {
+        this.initFormOnChanged(null);
+      });
+      // 监听选择事件，修改当前激活的元素以及表单
+      this.bpmnModeler.on("selection.changed", ({ newSelection }) => {
+        this.initFormOnChanged(newSelection[0] || null);
+      });
+      this.bpmnModeler.on("element.changed", ({ element }) => {
+        // 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
+        if (element && element.id === this.elementId) {
+          this.initFormOnChanged(element);
+        }
+      });
+    },
+    // 初始化数据
+    initFormOnChanged(element) {
+      let activatedElement = element;
+      if (!activatedElement) {
+        activatedElement =
+          window.bpmnInstances.elementRegistry.find(
+            el => el.type === "bpmn:Process"
+          ) ??
+          window.bpmnInstances.elementRegistry.find(
+            el => el.type === "bpmn:Collaboration"
+          );
+      }
+      if (!activatedElement) return;
+      Log.printBack(
+        `select element changed: id: ${activatedElement.id} , type: ${activatedElement.businessObject.$type}`
+      );
+      Log.prettyInfo("businessObject", activatedElement.businessObject);
+      window.bpmnInstances.bpmnElement = activatedElement;
+      this.bpmnElement = activatedElement;
+      this.elementId = activatedElement.id;
+      this.elementType = activatedElement.type.split(":")[1] || "";
+      this.elementBusinessObject = JSON.parse(
+        JSON.stringify(activatedElement.businessObject)
+      );
+      this.conditionFormVisible = !!(
+        this.elementType === "SequenceFlow" &&
+        activatedElement.source &&
+        activatedElement.source.type.indexOf("StartEvent") === -1
+      );
+      // this.formVisible = this.elementType === "UserTask" || this.elementType === "StartEvent";
+      this.formVisible = this.elementType === "StartEvent";
+    },
+    beforeDestroy() {
+      window.bpmnInstances = null;
+    }
+  }
+};
+</script>

package/packages/Workflow/penal/base/ElementBaseInfo.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="panel-tab__content">
+    <el-form size="mini" label-width="90px" @submit.native.prevent>
+      <el-form-item label="ID">
+        <el-input v-model="elementBaseInfo.id" :disabled="idEditDisabled" clearable @change="updateBaseInfo('id')" />
+      </el-form-item>
+      <el-form-item label="名称">
+        <el-input v-model="elementBaseInfo.name" clearable @change="updateBaseInfo('name')" />
+      </el-form-item>
+      <!--流程的基础属性-->
+      <template v-if="elementBaseInfo.$type === 'bpmn:Process'">
+        <el-form-item label="版本标签">
+          <el-input v-model="elementBaseInfo.versionTag" clearable @change="updateBaseInfo('versionTag')" />
+        </el-form-item>
+        <el-form-item label="可执行">
+          <el-switch v-model="elementBaseInfo.isExecutable" active-text="是" inactive-text="否" @change="updateBaseInfo('isExecutable')" />
+        </el-form-item>
+      </template>
+      <el-form-item v-if="elementBaseInfo.$type === 'bpmn:SubProcess'" label="状态">
+        <el-switch v-model="elementBaseInfo.isExpanded" active-text="展开" inactive-text="折叠" @change="updateBaseInfo('isExpanded')" />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+export default {
+  name: "ElementBaseInfo",
+  props: {
+    businessObject: Object,
+    type: String,
+    idEditDisabled: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      elementBaseInfo: {}
+    };
+  },
+  watch: {
+    businessObject: {
+      immediate: false,
+      handler: function(val) {
+        if (val) {
+          this.$nextTick(() => this.resetBaseInfo());
+        }
+      }
+    }
+  },
+  methods: {
+    resetBaseInfo() {
+      this.bpmnElement = window?.bpmnInstances?.bpmnElement || {};
+      this.elementBaseInfo = JSON.parse(JSON.stringify(this.bpmnElement.businessObject));
+      if (this.elementBaseInfo && this.elementBaseInfo.$type === "bpmn:SubProcess") {
+        this.$set(this.elementBaseInfo, "isExpanded", this.elementBaseInfo.di?.isExpanded);
+      }
+    },
+    updateBaseInfo(key) {
+      if (key === "id") {
+        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
+          id: this.elementBaseInfo[key],
+          di: { id: `${this.elementBaseInfo[key]}_di` }
+        });
+        return;
+      }
+      if (key === "isExpanded") {
+        window?.bpmnInstances?.modeling.toggleCollapse(this.bpmnElement);
+        return;
+      }
+      const attrObj = Object.create(null);
+      attrObj[key] = this.elementBaseInfo[key];
+      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, attrObj);
+    }
+  },
+  beforeDestroy() {
+    this.bpmnElement = null;
+  }
+};
+</script>