service-flow-designer 1.1.3 → 1.1.5

package/dist/lib/designer/common/util/node-util.d.ts

@@ -0,0 +1,27 @@
+/**
+ * 获取当前节点的下一个节点， 返回值是数组，
+ * @param {*} node
+ * @param {*} flowData
+ * @returns
+ */
+export declare function getNextNodeById(node: any, flowData: any): any[];
+export declare function getStartNodeById(flowData: any): any;
+/**
+ * 获取start节点的下一级节点
+ * @param {*} flowData
+ * @returns
+ */
+export declare function getStartNodeOutgoingNode(flowData: any): any;
+export declare function isDeepEqual(tempData: any, flowData: any): boolean;
+interface NodeWithChildren {
+    id: string;
+    name: string;
+}
+export declare function getCanJumpNodes(logicFlowInstance: any, currentNode: any): NodeWithChildren[];
+export declare function findServcieByCode(code: string, datas: any): any;
+declare const _default: {
+    isDeepEqual: typeof isDeepEqual;
+    getCanJumpNodes: typeof getCanJumpNodes;
+    findServcieByCode: typeof findServcieByCode;
+};
+export default _default;

package/dist/lib/designer/common/util/node-util.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function getNextNodeById(node, flowData) {
+  const edges = flowData.edges.filter((item) => item.sourceNodeId === node.id);
+  const result = [];
+  if (edges) {
+    for (let i = 0; i < edges.length; i++) {
+      result.push(flowData.nodes.find((item) => item.id === edges[i].targetNodeId));
+    }
+  }
+  return result;
+}
+function isDeepEqual(tempData, flowData) {
+  if (typeof tempData !== "object" || typeof flowData !== "object") {
+    return tempData === flowData;
+  }
+  if (tempData === void 0 || tempData === null || flowData === void 0 || flowData === null) {
+    return tempData === flowData;
+  }
+  if (Array.isArray(tempData) && Array.isArray(flowData)) {
+    if (tempData.length !== flowData.length)
+      return false;
+    for (let i = 0; i < tempData.length; i++) {
+      if (!isDeepEqual(tempData[i], flowData[i]))
+        return false;
+    }
+    return true;
+  } else {
+    const keys1 = Object.keys(tempData);
+    const keys2 = Object.keys(flowData);
+    if (keys1.length !== keys2.length) {
+      return false;
+    }
+    for (let key of keys1) {
+      if (!keys2.includes(key) || !isDeepEqual(tempData[key], flowData[key])) {
+        return false;
+      }
+    }
+    return true;
+  }
+}
+function findServcieByCode(code, datas) {
+  for (let i = 0; i < datas.length; i++) {
+    if (datas[i].code === code) {
+      return datas[i];
+    } else if (datas[i].children && datas[i].children.length > 0) {
+      const result = findServcieByCode(code, datas[i].children);
+      if (result) {
+        return result;
+      }
+    }
+  }
+}
+exports.findServcieByCode = findServcieByCode;
+exports.getNextNodeById = getNextNodeById;
+exports.isDeepEqual = isDeepEqual;

package/dist/lib/designer/desginer-index.css

@@ -1,4 +1,24 @@
-
-button[data-v-abdd91ce] {
-  color: blue;
+.amb-container-left[data-v-35a7c70a] {
+  width: 260px;
+  padding-right: 20px;
+  overflow-y: auto;
+}
+.amb-container-main[data-v-35a7c70a] {
+  padding: 0 10px 0 0;
+}
+.amb-container-main[data-v-35a7c70a]::-webkit-scrollbar {
+  width: 1px;
+}
+.amb-container-attr[data-v-35a7c70a] {
+  width: 300px;
+  padding-left: 20px;
+}
+/**
+解决右侧弹出属性配置遮罩层打开后页面其他地方无法点击问题
+ */
+[data-v-35a7c70a]:v-deep(.el-drawer__header) {
+  margin-bottom: 0 !important;
+}
+[data-v-35a7c70a] .el-overlay {
+  position: static;
 }

package/dist/lib/designer/desginer-index.vue.d.ts

@@ -1,2 +1,14 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: import('vue').DefineComponent<{
+    pageContext: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    pageContext: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}>>, {
+    pageContext: Record<string, any>;
+}, {}>;
 export default _default;

package/dist/lib/designer/desginer-index.vue.js

@@ -2,5 +2,5 @@
 const desginerIndex_vue_vue_type_script_setup_true_lang = require("./desginer-index.vue2.js");
 ;/* empty css                     */
 const _pluginVue_exportHelper = require("../_virtual/_plugin-vue_export-helper.js");
-const ServiceFlowDesginer = /* @__PURE__ */ _pluginVue_exportHelper(desginerIndex_vue_vue_type_script_setup_true_lang, [["__scopeId", "data-v-abdd91ce"]]);
+const ServiceFlowDesginer = /* @__PURE__ */ _pluginVue_exportHelper(desginerIndex_vue_vue_type_script_setup_true_lang, [["__scopeId", "data-v-35a7c70a"]]);
 module.exports = ServiceFlowDesginer;

package/dist/lib/designer/desginer-index.vue2.js

@@ -1,22 +1,106 @@
 "use strict";
 const vue = require("vue");
-const iconsVue = require("@element-plus/icons-vue");
-const _withScopeId = (n) => (vue.pushScopeId("data-v-abdd91ce"), n = n(), vue.popScopeId(), n);
-const _hoisted_1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ vue.createElementVNode("button", null, "Editoraaaaa", -1));
+const servicePanel = require("./service-panel/service-panel.vue.js");
+const viewIndex = require("./service-flow-view/view-index.vue.js");
+const pageStore = require("../stores/page-store.js");
+const http = require("agilebuilder-ui/src/utils/request");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "desginer-index",
+  props: {
+    pageContext: {
+      type: Object,
+      default: () => ({})
+    }
+  },
   setup(__props) {
+    const props = __props;
+    const serviceTreeData = vue.ref([]);
+    const serviceFlowStoreUtil = pageStore.useServiceFlowStore();
+    serviceFlowStoreUtil.setPageContext(props.pageContext);
+    const logicFlowInstance = vue.ref(null);
+    const serviceFlowViewRef = vue.ref();
+    const winHeight = vue.ref();
+    const containerHeightStyle = vue.computed(() => {
+      return {
+        height: winHeight.value - 60 + "px"
+      };
+    });
+    const serviceFlowContainerRef = vue.ref();
+    vue.onMounted(() => {
+      loadTreeData();
+      if (serviceFlowContainerRef.value) {
+        const rect = serviceFlowContainerRef.value.getBoundingClientRect();
+        if (rect.y || rect.y === 0) {
+          winHeight.value = window.innerHeight - rect.y;
+        }
+      }
+    });
+    const loadTreeData = () => {
+      http.get(
+        "/component/super-page-design/service-flow/tree/" + props.pageContext.systemCode + "/" + props.pageContext.systemVersion
+      ).then((res) => {
+        if (res) {
+          serviceTreeData.value = res.children;
+        }
+      });
+    };
+    const dragNode = (serviceComponent) => {
+      console.log("dragNode");
+      serviceFlowViewRef.value.onDragNode(serviceComponent);
+    };
+    const onServiceClick = (service) => {
+      console.log("service-click", service);
+      serviceFlowViewRef.value.onServiceClick(service);
+    };
+    const clearFlowCanvas = () => {
+      serviceFlowViewRef.value.clearFlowCanvas();
+      logicFlowInstance.value = null;
+    };
     return (_ctx, _cache) => {
-      const _component_el_icon = vue.resolveComponent("el-icon");
-      return vue.openBlock(), vue.createElementBlock("div", null, [
-        _hoisted_1,
-        vue.createVNode(_component_el_icon, null, {
+      const _component_el_aside = vue.resolveComponent("el-aside");
+      const _component_el_main = vue.resolveComponent("el-main");
+      const _component_el_container = vue.resolveComponent("el-container");
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "serviceFlowContainerRef",
+        ref: serviceFlowContainerRef
+      }, [
+        vue.createVNode(_component_el_container, { class: "amb-container" }, {
           default: vue.withCtx(() => [
-            vue.createVNode(vue.unref(iconsVue.Search))
+            vue.createVNode(_component_el_aside, { class: "amb-container-left" }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(servicePanel, {
+                  logicFlowInstance: logicFlowInstance.value,
+                  "onUpdate:logicFlowInstance": _cache[0] || (_cache[0] = ($event) => logicFlowInstance.value = $event),
+                  serviceTreeData: serviceTreeData.value,
+                  onServiceClick,
+                  onClearFlowCanvas: clearFlowCanvas,
+                  onLoadTreeData: loadTreeData,
+                  onDragNode: dragNode,
+                  style: vue.normalizeStyle(containerHeightStyle.value)
+                }, null, 8, ["logicFlowInstance", "serviceTreeData", "style"])
+              ]),
+              _: 1
+            }),
+            vue.createVNode(_component_el_main, {
+              class: "amb-container-main",
+              style: vue.normalizeStyle(containerHeightStyle.value)
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(viewIndex, {
+                  logicFlowInstance: logicFlowInstance.value,
+                  "onUpdate:logicFlowInstance": _cache[1] || (_cache[1] = ($event) => logicFlowInstance.value = $event),
+                  serviceTreeData: serviceTreeData.value,
+                  onLoadTreeData: loadTreeData,
+                  ref_key: "serviceFlowViewRef",
+                  ref: serviceFlowViewRef
+                }, null, 8, ["logicFlowInstance", "serviceTreeData"])
+              ]),
+              _: 1
+            }, 8, ["style"])
           ]),
           _: 1
         })
-      ]);
+      ], 512);
     };
   }
 });

package/dist/lib/designer/flow/edge/CustomLine.d.ts

@@ -0,0 +1,25 @@
+import { PolylineEdge, PolylineEdgeModel } from '@logicflow/core';
+
+declare class CustomLine extends PolylineEdge {
+}
+/**
+ * 自定义线条model
+ */
+declare class CustomLineModel extends PolylineEdgeModel {
+    getEdgeStyle(): {
+        [x: string]: any;
+        fill?: string;
+        stroke?: string;
+        strokeWidth?: number;
+    };
+    getTextPosition(): {
+        x: number;
+        y: number;
+    };
+}
+declare const _default: {
+    type: string;
+    view: typeof CustomLine;
+    model: typeof CustomLineModel;
+};
+export default _default;

package/dist/lib/designer/flow/edge/CustomLine.js

@@ -0,0 +1,48 @@
+"use strict";
+const LogicFlow = require("@logicflow/core");
+class CustomLine extends LogicFlow.PolylineEdge {
+}
+class CustomLineModel extends LogicFlow.PolylineEdgeModel {
+  getEdgeStyle() {
+    const style = super.getEdgeStyle();
+    style.strokeWidth = 2;
+    style.stroke = this.isSelected ? "#ff7f0e" : "#C8CDD4";
+    return style;
+  }
+  getTextPosition() {
+    const position = super.getTextPosition();
+    const currentPositionList = this.points.split(" ");
+    currentPositionList && currentPositionList.forEach((item) => {
+      item.split(",");
+    });
+    if (currentPositionList.length > 1) {
+      let [x1, y1] = currentPositionList[0].split(",");
+      let [x2, y2] = currentPositionList[1].split(",");
+      let distence = 50;
+      const newX1 = Number(x1);
+      const newY1 = Number(y1);
+      const newx2 = Number(x2);
+      const newy2 = Number(y2);
+      if (newX1 === newx2) {
+        if (newy2 < newY1) {
+          distence = -50;
+        }
+        position.y = newY1 + distence;
+        position.x = newX1;
+      } else {
+        if (newx2 < newX1) {
+          distence = -50;
+        }
+        position.x = newX1 + distence;
+        position.y = newY1 - 10;
+      }
+    }
+    return position;
+  }
+}
+const CustomLine$1 = {
+  type: "customLine",
+  view: CustomLine,
+  model: CustomLineModel
+};
+module.exports = CustomLine$1;

package/dist/lib/designer/service-flow-view/flow-tool-util.d.ts

@@ -0,0 +1,2 @@
+export declare function customControlClick(lf: any, item: any): void;
+export declare function beautify(lf: any): void;

package/dist/lib/designer/service-flow-view/flow-tool-util.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function customControlClick(lf, item) {
+  switch (item.type) {
+    case "zoomOut":
+      lf.zoom(false);
+      break;
+    case "zoomIn":
+      lf.zoom(true);
+      break;
+    case "fit":
+      lf.fitView();
+      break;
+    case "undo":
+      lf.undo();
+      break;
+    case "redo":
+      lf.redo();
+      break;
+    case "reset":
+      lf.resetZoom();
+      lf.resetTranslate();
+      break;
+    case "select":
+      lf.extension.selectionSelect.openSelectionSelect();
+      break;
+    case "beautify":
+      beautify(lf);
+      break;
+  }
+}
+function beautify(lf) {
+  if (lf) {
+    lf.extension.dagre.layout({
+      rankdir: "TB",
+      align: "DR",
+      nodesep: 20,
+      ranksep: 20,
+      begin: [200, 50]
+    });
+  }
+}
+exports.beautify = beautify;
+exports.customControlClick = customControlClick;

package/dist/lib/designer/service-flow-view/flow-util.d.ts

@@ -0,0 +1,53 @@
+import { default as LogicFlow } from '@logicflow/core';
+
+export declare const customControl: ({
+    type: string;
+    desc: string;
+    class: string;
+    clickStyle?: undefined;
+} | {
+    type: string;
+    desc: string;
+    class: string;
+    clickStyle: boolean;
+})[];
+interface ServiceVariable {
+    [otherProp: string]: any;
+}
+interface ServiceNode {
+    [otherProp: string]: any;
+}
+export declare function newLogicFlow(container: any): LogicFlow;
+export declare function addInitNode(lf: any): void;
+/**
+ * 注册节点
+ * @param lf logicFlow实例
+ */
+export declare const registerNode: (lf: any) => void;
+export declare function getRuntimeJson(service: any): {
+    code: any;
+    name: any;
+    returnValues: any;
+    errorMessage: any;
+    log: any;
+    variables: ServiceVariable[];
+    nodes: ServiceNode[];
+};
+declare const _default: {
+    customControl: ({
+        type: string;
+        desc: string;
+        class: string;
+        clickStyle?: undefined;
+    } | {
+        type: string;
+        desc: string;
+        class: string;
+        clickStyle: boolean;
+    })[];
+    getRuntimeJson: typeof getRuntimeJson;
+    newLogicFlow: typeof newLogicFlow;
+    registerNode: (lf: any) => void;
+    addInitNode: typeof addInitNode;
+};
+export default _default;

package/dist/lib/designer/service-flow-view/flow-util.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const nodeUtil = require("../common/util/node-util.js");
+const CustomLine = require("../flow/edge/CustomLine.js");
+const LogicFlow = require("@logicflow/core");
+const layout = require("@logicflow/layout");
+const extension = require("@logicflow/extension");
+const customControl = [
+  { type: "zoomOut", desc: "缩小", class: "control-item-zoomOut" },
+  { type: "zoomIn", desc: "放大", class: "control-item-zoomIn" },
+  { type: "fit", desc: "适应", class: "control-item-fit" },
+  { type: "undo", desc: "上一步", class: "control-item-undo" },
+  { type: "redo", desc: "下一步", class: "control-item-redo" },
+  { type: "reset", desc: "定位还原", class: "custom-reset" },
+  { type: "select", desc: "框选", class: "custom-select", clickStyle: true },
+  { type: "beautify", desc: "一键美化", class: "custom-beautify" }
+];
+function newLogicFlow(container) {
+  return new LogicFlow({
+    // 通过选项指定了渲染的容器和需要显示网格
+    container,
+    grid: {
+      // 设置原背景不显示
+      visible: false,
+      // 控制拖拽节点时每次移动的像素
+      size: 2
+    },
+    // 背景
+    background: {},
+    plugins: [extension.Menu, extension.DndPanel, extension.SelectionSelect, extension.MiniMap, extension.Group, layout.Dagre]
+  });
+}
+function addInitNode(lf) {
+  lf.addNode({
+    id: "start",
+    type: "start",
+    x: 620,
+    y: 50,
+    properties: {}
+  });
+  lf.addNode({
+    type: "end",
+    x: 620,
+    y: 550,
+    properties: {}
+  });
+}
+const registerNode = (lf) => {
+  if (!lf) {
+    return;
+  }
+  lf.register(CustomLine);
+  lf.setDefaultEdgeType("customLine");
+};
+function getRuntimeJson(service) {
+  const runTimeJson = {
+    code: service.code,
+    name: service.name,
+    returnValues: service.returnValues,
+    errorMessage: service.errorMessage,
+    log: service.log,
+    variables: [],
+    nodes: []
+  };
+  const tempVars = [];
+  if (service.variables) {
+    service.variables.forEach((variable) => {
+      tempVars.push(convertVariable(variable));
+    });
+  }
+  runTimeJson.variables = tempVars;
+  const tempNodes = [];
+  service.flow.nodes.forEach((node) => {
+    const tempNode = {};
+    tempNode.code = node.id;
+    tempNode.type = node.type;
+    tempNode.props = node.properties;
+    if (node.type === "loop") {
+      tempNode.children = node.children;
+    }
+    tempNode.tos = [];
+    const nextNodes = nodeUtil.getNextNodeById(node, service.flow);
+    nextNodes.forEach((nextNode) => {
+      tempNode.tos.push({ code: nextNode.id });
+    });
+    tempNodes.push(tempNode);
+  });
+  runTimeJson.nodes = tempNodes;
+  console.log(runTimeJson, "runTimeJson");
+  return runTimeJson;
+}
+function convertVariable(variable) {
+  const tempVar = {};
+  tempVar.name = variable.name;
+  tempVar.alias = variable.alias;
+  tempVar.type = variable.type;
+  tempVar.defaultValue = variable.defaultValue;
+  if (variable.items && variable.items.length > 0) {
+    const items = [];
+    variable.items.forEach((item) => {
+      items.push(convertVariable(item));
+    });
+    tempVar.items = items;
+  }
+  return tempVar;
+}
+exports.addInitNode = addInitNode;
+exports.customControl = customControl;
+exports.getRuntimeJson = getRuntimeJson;
+exports.newLogicFlow = newLogicFlow;
+exports.registerNode = registerNode;