@fecp/designer 5.5.48 → 5.5.49

package/lib/packages/vue/src/components/bus/flowChart/bpmnjs/importer/BpmnImporter.js

@@ -0,0 +1,210 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const index_esm = require("../../../../../../../../node_modules/min-dash/dist/index.esm.js");
+const ModelUtil = require("../../../../../../../../node_modules/bpmn-js/lib/util/ModelUtil.js");
+const LabelUtil$1 = require("../../../../../../../../node_modules/bpmn-js/lib/util/LabelUtil.js");
+const LayoutUtil = require("../../../../../../../../node_modules/diagram-js/lib/layout/LayoutUtil.js");
+const DiUtil = require("../../../../../../../../node_modules/bpmn-js/lib/util/DiUtil.js");
+const LabelUtil = require("../../../../../../../../node_modules/bpmn-js/lib/features/label-editing/LabelUtil.js");
+const Util = require("../../../../../../../../node_modules/bpmn-js/lib/import/Util.js");
+function elementData(semantic, di, attrs) {
+  return index_esm.assign(
+    {
+      id: semantic.id,
+      type: semantic.$type,
+      businessObject: semantic,
+      di
+    },
+    attrs
+  );
+}
+function getWaypoints(di, source, target) {
+  var waypoints = di.waypoint;
+  if (!waypoints || waypoints.length < 2) {
+    return [LayoutUtil.getMid(source), LayoutUtil.getMid(target)];
+  }
+  return waypoints.map(function(p) {
+    return { x: p.x, y: p.y };
+  });
+}
+function notYetDrawn(translate, semantic, refSemantic, property) {
+  return new Error(
+    translate(
+      "element {element} referenced by {referenced}#{property} not yet drawn",
+      {
+        element: Util.elementToString(refSemantic),
+        referenced: Util.elementToString(semantic),
+        property
+      }
+    )
+  );
+}
+function BpmnImporter(eventBus, canvas, elementFactory, elementRegistry, translate, textRenderer) {
+  this._eventBus = eventBus;
+  this._canvas = canvas;
+  this._elementFactory = elementFactory;
+  this._elementRegistry = elementRegistry;
+  this._translate = translate;
+  this._textRenderer = textRenderer;
+}
+BpmnImporter.$inject = [
+  "eventBus",
+  "canvas",
+  "elementFactory",
+  "elementRegistry",
+  "translate",
+  "textRenderer"
+];
+BpmnImporter.prototype.add = function(semantic, di, parentElement) {
+  var element, translate = this._translate, hidden;
+  var parentIndex;
+  if (ModelUtil.is(di, "bpmndi:BPMNPlane")) {
+    var attrs = ModelUtil.is(semantic, "bpmn:SubProcess") ? { id: semantic.id + "_plane" } : {};
+    element = this._elementFactory.createRoot(elementData(semantic, di, attrs));
+    this._canvas.addRootElement(element);
+  } else if (ModelUtil.is(di, "bpmndi:BPMNShape")) {
+    var collapsed = !DiUtil.isExpanded(semantic, di), isFrame = isFrameElement(semantic);
+    hidden = parentElement && (parentElement.hidden || parentElement.collapsed);
+    var bounds = di.bounds;
+    element = this._elementFactory.createShape(
+      elementData(semantic, di, {
+        collapsed,
+        hidden,
+        x: Math.round(bounds.x),
+        y: Math.round(bounds.y),
+        width: Math.round(bounds.width),
+        height: Math.round(bounds.height),
+        isFrame
+      })
+    );
+    if (ModelUtil.is(semantic, "bpmn:BoundaryEvent")) {
+      this._attachBoundary(semantic, element);
+    }
+    if (ModelUtil.is(semantic, "bpmn:Lane")) {
+      parentIndex = 0;
+    }
+    if (ModelUtil.is(semantic, "bpmn:DataStoreReference")) {
+      if (!isPointInsideBBox(parentElement, LayoutUtil.getMid(bounds))) {
+        parentElement = this._canvas.findRoot(parentElement);
+      }
+    }
+    this._canvas.addShape(element, parentElement, parentIndex);
+  } else if (ModelUtil.is(di, "bpmndi:BPMNEdge")) {
+    var source = this._getSource(semantic), target = this._getTarget(semantic);
+    hidden = parentElement && (parentElement.hidden || parentElement.collapsed);
+    element = this._elementFactory.createConnection(
+      elementData(semantic, di, {
+        hidden,
+        source,
+        target,
+        waypoints: getWaypoints(di, source, target)
+      })
+    );
+    if (ModelUtil.is(semantic, "bpmn:DataAssociation")) {
+      parentElement = this._canvas.findRoot(parentElement);
+    }
+    this._canvas.addConnection(element, parentElement, parentIndex);
+  } else {
+    throw new Error(
+      translate("unknown di {di} for element {semantic}", {
+        di: Util.elementToString(di),
+        semantic: Util.elementToString(semantic)
+      })
+    );
+  }
+  let text = LabelUtil.getLabel(element);
+  if (text && text != "undefined") {
+    this.addLabel(semantic, di, element);
+  }
+  this._eventBus.fire("bpmnElement.added", { element });
+  return element;
+};
+BpmnImporter.prototype._attachBoundary = function(boundarySemantic, boundaryElement) {
+  var translate = this._translate;
+  var hostSemantic = boundarySemantic.attachedToRef;
+  if (!hostSemantic) {
+    throw new Error(
+      translate("missing {semantic}#attachedToRef", {
+        semantic: Util.elementToString(boundarySemantic)
+      })
+    );
+  }
+  var host = this._elementRegistry.get(hostSemantic.id), attachers = host && host.attachers;
+  if (!host) {
+    throw notYetDrawn(
+      translate,
+      boundarySemantic,
+      hostSemantic,
+      "attachedToRef"
+    );
+  }
+  boundaryElement.host = host;
+  if (!attachers) {
+    host.attachers = attachers = [];
+  }
+  if (attachers.indexOf(boundaryElement) === -1) {
+    attachers.push(boundaryElement);
+  }
+};
+BpmnImporter.prototype.addLabel = function(semantic, di, element) {
+  var bounds, text, label;
+  bounds = LabelUtil$1.getExternalLabelBounds(di, element);
+  text = LabelUtil.getLabel(element);
+  if (text && text != "undefined") {
+    bounds = this._textRenderer.getExternalLabelBounds(bounds, text);
+  }
+  label = this._elementFactory.createLabel(
+    elementData(semantic, di, {
+      id: semantic.id + "_label",
+      labelTarget: element,
+      type: "label",
+      hidden: element.hidden || !LabelUtil.getLabel(element),
+      x: Math.round(bounds.x),
+      y: Math.round(bounds.y),
+      width: Math.round(bounds.width),
+      height: Math.round(bounds.height)
+    })
+  );
+  return this._canvas.addShape(label, element.parent);
+};
+BpmnImporter.prototype._getEnd = function(semantic, side) {
+  var element, refSemantic, type = semantic.$type, translate = this._translate;
+  refSemantic = semantic[side + "Ref"];
+  if (side === "source" && type === "bpmn:DataInputAssociation") {
+    refSemantic = refSemantic && refSemantic[0];
+  }
+  if (side === "source" && type === "bpmn:DataOutputAssociation" || side === "target" && type === "bpmn:DataInputAssociation") {
+    refSemantic = semantic.$parent;
+  }
+  element = refSemantic && this._getElement(refSemantic);
+  if (element) {
+    return element;
+  }
+  if (refSemantic) {
+    throw notYetDrawn(translate, semantic, refSemantic, side + "Ref");
+  } else {
+    throw new Error(
+      translate("{semantic}#{side} Ref not specified", {
+        semantic: Util.elementToString(semantic),
+        side
+      })
+    );
+  }
+};
+BpmnImporter.prototype._getSource = function(semantic) {
+  return this._getEnd(semantic, "source");
+};
+BpmnImporter.prototype._getTarget = function(semantic) {
+  return this._getEnd(semantic, "target");
+};
+BpmnImporter.prototype._getElement = function(semantic) {
+  return this._elementRegistry.get(semantic.id);
+};
+function isPointInsideBBox(bbox, point) {
+  var x = point.x, y = point.y;
+  return x >= bbox.x && x <= bbox.x + bbox.width && y >= bbox.y && y <= bbox.y + bbox.height;
+}
+function isFrameElement(semantic) {
+  return ModelUtil.is(semantic, "bpmn:Group");
+}
+exports.default = BpmnImporter;

package/lib/packages/vue/src/components/bus/flowChart/bpmnjs/importer/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const index = require("../../../../../../../../node_modules/diagram-js/lib/i18n/translate/index.js");
+const BpmnImporter = require("./BpmnImporter.js");
+const customImporterModule = {
+  __depends__: [
+    index.default
+  ],
+  bpmnImporter: ["type", BpmnImporter.default]
+};
+exports.default = customImporterModule;

package/lib/packages/vue/src/components/bus/flowChart/bpmnjs/renderer/CustomRenderer.js

@@ -0,0 +1,161 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Vue = require("vue");
+const BaseRenderer = require("../../../../../../../../node_modules/diagram-js/lib/draw/BaseRenderer.js");
+const NodeItem = require("../component/NodeItem.vue.js");
+const renderComponent = require("./renderComponent.js");
+const BpmnRenderUtil = require("../../../../../../../../node_modules/bpmn-js/lib/draw/BpmnRenderUtil.js");
+const ModelUtil = require("../../../../../../../../node_modules/bpmn-js/lib/util/ModelUtil.js");
+const HIGH_PRIORITY = 1500, TASK_BORDER_RADIUS = 2;
+class CustomRenderer extends BaseRenderer.default {
+  constructor(eventBus, bpmnRenderer) {
+    super(eventBus, HIGH_PRIORITY);
+    this.bpmnRenderer = bpmnRenderer;
+  }
+  canRender(element) {
+    return ModelUtil.isAny(element, [
+      "bpmn:Task",
+      "bpmn:Event",
+      "bpmn:Gateway",
+      "bpmn:CallActivity",
+      "bpmn:Transaction"
+    ]);
+  }
+  drawShape(parentNode, element) {
+    if (element.isReResize) {
+      delete element.isReResize;
+      return;
+    }
+    if (element.labelTarget) {
+      element.y += 10;
+      return;
+    }
+    let name = element.businessObject.$attrs["normal:name"];
+    if (name) {
+      try {
+        name = JSON.parse(name)["zh_CN"];
+      } catch (error) {
+      }
+      element.businessObject.name = name;
+    }
+    appendCustomDom(parentNode, element);
+    parentNode.remove();
+  }
+  getShapePath(shape) {
+    if (ModelUtil.is(shape, "bpmn:Task")) {
+      return BpmnRenderUtil.getRoundRectPath(shape, TASK_BORDER_RADIUS);
+    }
+    return this.bpmnRenderer.getShapePath(shape);
+  }
+}
+CustomRenderer.$inject = ["eventBus", "bpmnRenderer"];
+const appendCustomDom = (parentNode, element) => {
+  let svgDom = document.querySelector(
+    ".djs-element[data-element-id='" + element.id + "']"
+  );
+  if (svgDom) {
+    let oldForeignObject = svgDom.querySelector("foreignObject");
+    if (oldForeignObject) {
+      oldForeignObject.remove();
+    }
+  }
+  let id = "node-item-" + element.id;
+  let foreignObject = document.createElementNS(
+    "http://www.w3.org/2000/svg",
+    "foreignObject"
+  );
+  let nodeType = element.businessObject.$attrs["normal:nodeType"];
+  if (!nodeType) {
+    if (element.type == "bpmn:StartEvent") {
+      nodeType = "start";
+      element.width = 32;
+      element.height = 32;
+    } else if (element.type == "bpmn:EndEvent") {
+      nodeType = "end";
+      element.width = 32;
+      element.height = 32;
+    } else if (element.type == "bpmn:ExclusiveGateway") {
+      nodeType = "gateway";
+    } else if (element.type == "bpmn:ParallelGateway") {
+      nodeType = "parallelGateway";
+      if (element.id.endsWith("mergeGateway")) {
+        nodeType = "mergeGateway";
+      }
+    } else if (element.type == "bpmn:InclusiveGateway") {
+      nodeType = "inclusiveGateway";
+    } else if (element.type == "bpmn:ServiceTask") {
+      nodeType = "service";
+      let delegateExpression = element.businessObject.$attrs["flowable:delegateExpression"];
+      if (delegateExpression && delegateExpression == "${flowRuleListener}") {
+        nodeType = "rde";
+      }
+    } else if (element.type == "bpmn:ReceiveTask") {
+      nodeType = "wait";
+    } else if (element.type == "bpmn:CallActivity") {
+      nodeType = "childProcess";
+    }
+  }
+  foreignObject.setAttribute("id", id);
+  foreignObject.setAttribute("width", element.width);
+  foreignObject.setAttribute("height", element.height);
+  foreignObject.setAttribute("class", "custom-foreignObject");
+  let div = document.createElement("div");
+  div.setAttribute("class", "custom-node-item ");
+  parentNode.parentNode.appendChild(foreignObject);
+  foreignObject.appendChild(div);
+  let apidata = window.flowChartData;
+  let timeLineData = apidata.timeLineData;
+  let taskArr = timeLineData.task;
+  let hisTaskArr = timeLineData.hisTask;
+  let isCurrent = false;
+  let currNode = apidata.activeActivityIds.find((item) => item === element.id);
+  if (currNode) {
+    isCurrent = true;
+  }
+  let isHighlight = false;
+  let data = taskArr.find((item) => item.taskDefinitionKey == element.id);
+  if (data) {
+    isHighlight = true;
+  } else {
+    data = hisTaskArr.find((item) => item.taskDefinitionKey == element.id);
+    if (data) {
+      isHighlight = true;
+    }
+  }
+  if (!timeLineData.isEnd && element.type == "bpmn:StartEvent") {
+    isHighlight = true;
+  } else if (timeLineData.isEnd) {
+    if (element.type == "bpmn:StartEvent" || element.type == "bpmn:EndEvent") {
+      isHighlight = true;
+    }
+  }
+  let hisTaskList = [];
+  hisTaskArr.forEach((item) => {
+    if (item.taskDefinitionKey == element.id) {
+      hisTaskList.push(item);
+    }
+  });
+  let taskList = [];
+  taskArr.forEach((item) => {
+    if (item.taskDefinitionKey == element.id) {
+      taskList.push(item);
+    }
+  });
+  renderComponent.default({
+    el: div,
+    //  组件要插入的那个dom
+    component: NodeItem.default,
+    // 要插入的组件
+    props: {
+      // 传入 props
+      nodeType,
+      isHighlight,
+      hisTaskList,
+      taskList,
+      isCurrent
+    },
+    appContext: Vue.getCurrentInstance()
+    // 获取组件实例的
+  });
+};
+exports.default = CustomRenderer;

package/lib/packages/vue/src/components/bus/flowChart/bpmnjs/renderer/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const CustomRenderer = require("./CustomRenderer.js");
+const customRendererModule = {
+  __init__: ["customRenderer"],
+  customRenderer: ["type", CustomRenderer.default]
+};
+exports.default = customRendererModule;

package/lib/packages/vue/src/components/bus/flowChart/bpmnjs/renderer/renderComponent.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Vue = require("vue");
+function renderComponent({ el, component, props, appContext }) {
+  let app = Vue.createApp(component, props);
+  Object.assign(app._context, appContext);
+  app.config.warnHandler = () => null;
+  app.mount(el);
+  return () => {
+    app == null ? void 0 : app.unmount();
+    app = void 0;
+  };
+}
+exports.default = renderComponent;

package/lib/packages/vue/src/components/bus/flowChart/index.js

@@ -0,0 +1,101 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const NavigatedViewer = require("../../../../../../node_modules/bpmn-js/lib/NavigatedViewer.js");
+const index = require("./bpmnjs/renderer/index.js");
+const index$1 = require("./bpmnjs/importer/index.js");
+;/* empty css           */
+class FlowChart {
+  constructor(container) {
+    __publicField(this, "addTestMarker", function() {
+      if (document.querySelector("#testMarker")) {
+        return;
+      }
+      let testMarker = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "marker"
+      );
+      testMarker.setAttribute("id", "testMarker");
+      testMarker.setAttribute("viewBox", "0 0 20 20");
+      testMarker.setAttribute("refX", "11");
+      testMarker.setAttribute("refY", "10");
+      testMarker.setAttribute("markerWidth", "10");
+      testMarker.setAttribute("markerHeight", "10");
+      testMarker.setAttribute("orient", "auto");
+      let path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+      path.setAttribute("d", "M 1 5 L 11 10 L 1 15 Z");
+      path.setAttribute(
+        "style",
+        "fill: black; stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1; stroke: black;"
+      );
+      testMarker.appendChild(path);
+      try {
+        if (typeof this.container === "object") {
+          this.container.querySelector("defs").appendChild(testMarker);
+        } else {
+          let dom = document.querySelector(this.container);
+          dom.querySelector("defs").appendChild(testMarker);
+        }
+      } catch (e) {
+        document.querySelector("defs").appendChild(testMarker);
+      }
+    });
+    this.container = container;
+    this.refresh();
+    if (this.bpmnViewer) {
+      this.bpmnViewer.destroy();
+    }
+    this.bpmnViewer = new NavigatedViewer.default({
+      container: this.container,
+      additionalModules: [
+        index.default,
+        index$1.default,
+        {
+          // zoomScroll: ["value", ''],//禁用滚动
+          // moveCanvas: ['value', ''],//禁用拖动整个流程图
+          move: ["value", ""]
+          //禁用单个图形拖动
+        }
+      ]
+      // keyboard: {
+      //   bindTo: document, // 或者window，注意与外部表单的键盘监听事件是否冲突
+      // },
+    });
+  }
+  refresh() {
+    if (this.container) {
+      if (typeof this.container === "object") {
+        this.container.innerHTML = "";
+      } else {
+        let dom = document.querySelector(this.container);
+        if (dom) {
+          dom.innerHTML = "";
+        }
+      }
+    }
+  }
+  import(data) {
+    this.data = data;
+    window.flowChartData = data;
+    this.bpmnViewer.importXML(data.modelXml).then(() => {
+      this.bpmnViewer.get("canvas").zoom("fit-viewport", "auto");
+    });
+  }
+  colorToFlow(flowList) {
+    this.addTestMarker();
+    if (flowList.length > 0) {
+      for (var i in flowList) {
+        var flowId = flowList[i].id || flowList[i];
+        let element = document.querySelector(`g[data-element-id=${flowId}]`);
+        if (element) {
+          if (element.classList.contains("djs-connection")) {
+            element.setAttribute("state", "highlight");
+          }
+        }
+      }
+    }
+  }
+}
+exports.default = FlowChart;

package/lib/packages/vue/src/components/bus/index.js

@@ -2,5 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const index = require("./approvalHistory/index.js");
 const index$1 = require("./document/index.js");
+require("./flowChart/bpmnjs/renderer/CustomRenderer.js");
+require("./flowChart/bpmnjs/importer/BpmnImporter.js");
+;/* empty css                     */
 exports.ApprovalHistory = index.ApprovalHistory;
 exports.Document = index$1.Document;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fecp/designer",
-  "version": "5.5.48",
+  "version": "5.5.49",
   "main": "lib/designer/index.js",
   "module": "es/designer/index.mjs",
   "files": [