@sunspirytus/xflow-extension 1.0.52

package/lib/canvas-context-menu/style/index.css

@@ -0,0 +1,142 @@
+.x6-menu {
+  position: relative;
+  display: inline-block;
+  min-width: 160px;
+  min-height: 32px;
+  margin: 0;
+  padding: 4px 0;
+  background-color: #fff;
+  outline: 0;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
+}
+.x6-menu-item {
+  position: relative;
+}
+.x6-menu-item-active > .x6-menu-item-button,
+.x6-menu-item:hover > .x6-menu-item-button {
+  color: #262626;
+  background: #f5f5f5;
+}
+.x6-menu-item-divider {
+  display: block;
+  width: 100%;
+  height: 1px;
+  margin: 4px 0;
+  background: rgba(150, 150, 150, 0.2);
+  pointer-events: none;
+}
+.x6-menu-item-button {
+  position: relative;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 28px;
+  padding: 0 12px;
+  color: #595959;
+  text-align: left;
+  background: transparent;
+  border: none;
+  outline: none;
+  box-shadow: none;
+  cursor: pointer;
+}
+.x6-menu-item-hidden {
+  display: none;
+}
+.x6-menu-item-disabled > .x6-menu-item-button,
+.x6-menu-item-disabled:hover > .x6-menu-item-button {
+  color: #595959;
+  background-color: transparent;
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+.x6-menu-item-icon {
+  position: absolute;
+  top: 50%;
+  left: 6px;
+  display: none;
+  width: 24px;
+  height: 24px;
+  margin-top: -12px;
+  font-size: 13px;
+}
+.x6-menu-item-text {
+  padding-right: 56px;
+  overflow: hidden;
+  font-size: 13px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.x6-menu-item-hotkey {
+  font-size: 13px;
+  opacity: 0.75;
+}
+.x6-menu-submenu-arrow,
+.x6-menu-submenu.x6-menu-item-disabled:hover > .x6-menu-item-button > .x6-menu-submenu-arrow {
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  width: 0;
+  height: 0;
+  border-top: 4px solid rgba(0, 0, 0, 0);
+  border-bottom: 4px solid rgba(0, 0, 0, 0);
+  border-left: 5px solid #262626;
+  opacity: 0.4;
+  pointer-events: none;
+}
+.x6-menu-submenu-menu,
+.x6-menu-submenu.x6-menu-item-disabled:hover > .x6-menu-submenu-menu {
+  position: absolute;
+  top: -5px;
+  left: 100%;
+  z-index: 9999;
+  min-width: 200px;
+  margin-left: -4px;
+  padding: 5px 0;
+  background: #fff;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
+  transform: translateX(-10px);
+  visibility: hidden;
+  opacity: 0;
+  transition: all 0.25s cubic-bezier(0.3, 1.2, 0.2, 1);
+}
+.x6-menu-submenu.x6-menu-item-active > .x6-menu-item-button > .x6-menu-submenu-arrow,
+.x6-menu-submenu:hover > .x6-menu-item-button > .x6-menu-submenu-arrow {
+  opacity: 0.75;
+}
+.x6-menu-submenu.x6-menu-item-active > .x6-menu-submenu-menu,
+.x6-menu-submenu:hover > .x6-menu-submenu-menu {
+  transform: translateX(0);
+  visibility: visible;
+  opacity: 1;
+}
+.x6-menu.x6-menu-has-icon .x6-menu-item-button {
+  padding-left: 30px;
+}
+.x6-menu.x6-menu-has-icon .x6-menu-item-button .x6-menu-item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.x6-menu.x6-menu-has-icon .x6-menu-item-button .x6-menu-item-text {
+  padding-left: 2px;
+}
+.xflow-menu-mask {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+}
+.xflow-menu-mask .x6-dropdown {
+  overflow: visible;
+  pointer-events: all;
+}
+.xflow-menu-mask .xflow-context-menu-anchor {
+  position: absolute;
+  z-index: 1;
+  background-color: #fff;
+}

package/lib/canvas-context-menu/style/index.less

@@ -0,0 +1,22 @@
+@import (once) '~@sunspirytus/xflow-core/es/style/themes/index.less';
+@import (once) '~@antv/x6-react-components/es/menu/style/index';
+
+.@{xflow-prefix}-menu-mask {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+
+  .@{x6-prefix}-dropdown {
+    overflow: visible;
+    pointer-events: all;
+  }
+
+  .@{xflow-prefix}-context-menu-anchor {
+    position: absolute;
+    z-index: 1;
+    background-color: #fff;
+  }
+}

package/lib/canvas-dag-extension/components/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { IProps } from '../interface';
+export declare const DagGraphExtension: React.FC<IProps>;

package/lib/canvas-dag-extension/components/index.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DagGraphExtension = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var module_1 = require("../module");
+var xflow_core_1 = require("@sunspirytus/xflow-core");
+var DagGraphExtension = function (props) {
+    /** 获取扩展Registry */
+    var extensionRegistry = (0, xflow_core_1.useExtensionRegistry)();
+    react_1.default.useEffect(function () {
+        /** 添加 container的classname */
+        extensionRegistry.addContainerClassNames('dag-extension-container');
+        var layout = props.layout || 'TB';
+        extensionRegistry.addContainerClassNames(layout === 'TB' ? 'layout-top-bottom' : 'layout-left-right');
+    }, [extensionRegistry, props.layout]);
+    var config = react_1.default.useMemo(function () { return ({
+        CONFIG_TYPE: 'DAG_EXTENSION',
+        getConfig: function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () { return tslib_1.__generator(this, function (_a) {
+            return [2 /*return*/, props];
+        }); }); },
+    }); }, [props]);
+    return react_1.default.createElement(xflow_core_1.XFlowAppExtensionModule, { config: config, createModule: module_1.createDagExtensionModule });
+};
+exports.DagGraphExtension = DagGraphExtension;
+//# sourceMappingURL=index.js.map

package/lib/canvas-dag-extension/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/canvas-dag-extension/components/index.tsx"],"names":[],"mappings":";;;;AAAA,wDAAyB;AACzB,oCAAoD;AAEpD,sDAAuF;AAGhF,IAAM,iBAAiB,GAAqB,UAAA,KAAK;IACtD,mBAAmB;IACnB,IAAM,iBAAiB,GAAG,IAAA,iCAAoB,GAAE,CAAA;IAChD,eAAK,CAAC,SAAS,CAAC;QACd,6BAA6B;QAC7B,iBAAiB,CAAC,sBAAsB,CAAC,yBAAyB,CAAC,CAAA;QACnE,IAAM,MAAM,GAAG,KAAK,CAAC,MAAM,IAAI,IAAI,CAAA;QACnC,iBAAiB,CAAC,sBAAsB,CACtC,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,mBAAmB,CAC5D,CAAA;IACH,CAAC,EAAE,CAAC,iBAAiB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;IAErC,IAAM,MAAM,GAAG,eAAK,CAAC,OAAO,CAC1B,cAAM,OAAA,CAAC;QACL,WAAW,EAAE,eAAe;QAC5B,SAAS,EAAE;YAAY,sBAAA,KAAK,EAAA;iBAAA;KAC7B,CAAC,EAHI,CAGJ,EACF,CAAC,KAAK,CAAC,CACR,CAAA;IAED,OAAO,8BAAC,oCAAuB,IAAS,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,iCAAwB,GAAI,CAAA;AACpG,CAAC,CAAA;AArBY,QAAA,iBAAiB,qBAqB7B"}

package/lib/canvas-dag-extension/constants.d.ts

@@ -0,0 +1,48 @@
+import type { DisposableCollection } from '@sunspirytus/xflow-core';
+import type { IGraphCommand } from '@sunspirytus/xflow-core';
+export declare const EDGE_PATH_TYPE: {
+    /** node 水平 */
+    readonly HORIRONTAL_NODE: "xflow-node-horizontal-edge";
+    /** Node 垂直 */
+    readonly VERTICAL_NODE: "xflow-node-vertical-edge";
+    /** Group 垂直 */
+    readonly VERTICAL_GROUP: "xflow-group-vertical-edge";
+};
+export declare const XFLOW_SHAPE: {
+    readonly EDGE: "xflow-edge";
+};
+export declare const XFLOW_NODE_SHAPE = "XFLOW_NODE_SHAPE";
+export declare const EDGE_PROCESSING_CLASSNAME = "processing";
+export declare const NODE_DEFAULT_WIDTH = 160;
+export declare const NODE_DEFAULT_HEIGHT = 32;
+/** 画布状态 */
+export declare namespace GRAPH_STATUS_INFO {
+    /** Model id */
+    const id = "GRAPH_STATUS_INFO";
+    /** 类型 */
+    enum StatusEnum {
+        SUCCEEDED = "SUCCEEDED",
+        RUNNING = "RUNNING",
+        FAILED = "FAILED",
+        PENDING = "PENDING",
+        CREATING = "CREATING",
+        MANUAL_TERMINATE = "MANUAL_TERMINATE",
+        CACHED = "CACHED",
+        UNKNOWN = "UNKNOWN"
+    }
+    interface INodeStatus {
+        status: StatusEnum;
+        [key: string]: any;
+    }
+    interface IState {
+        graphStatus: StatusEnum;
+        statusMap: Map<string, INodeStatus>;
+        subscription: DisposableCollection;
+    }
+    /** Model Utils */
+    const getModel: (modelService: import("@sunspirytus/xflow-core").IModelService) => Promise<import("@sunspirytus/xflow-core").NsModel.IModel<IState>>;
+    const useValue: (modelService: import("@sunspirytus/xflow-core").IModelService) => Promise<IState>;
+}
+export declare namespace XFlowDagCommands {
+    const QUERY_GRAPH_STATUS: IGraphCommand;
+}

package/lib/canvas-dag-extension/constants.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XFlowDagCommands = exports.GRAPH_STATUS_INFO = exports.NODE_DEFAULT_HEIGHT = exports.NODE_DEFAULT_WIDTH = exports.EDGE_PROCESSING_CLASSNAME = exports.XFLOW_NODE_SHAPE = exports.XFLOW_SHAPE = exports.EDGE_PATH_TYPE = void 0;
+var constant_1 = require("@sunspirytus/xflow-core/es/model-service/constant");
+exports.EDGE_PATH_TYPE = {
+    /** node 水平 */
+    HORIRONTAL_NODE: 'xflow-node-horizontal-edge',
+    /** Node 垂直 */
+    VERTICAL_NODE: 'xflow-node-vertical-edge',
+    /** Group 垂直 */
+    VERTICAL_GROUP: 'xflow-group-vertical-edge',
+};
+exports.XFLOW_SHAPE = {
+    EDGE: 'xflow-edge',
+};
+exports.XFLOW_NODE_SHAPE = 'XFLOW_NODE_SHAPE';
+exports.EDGE_PROCESSING_CLASSNAME = 'processing';
+exports.NODE_DEFAULT_WIDTH = 160;
+exports.NODE_DEFAULT_HEIGHT = 32;
+/** 画布状态 */
+var GRAPH_STATUS_INFO;
+(function (GRAPH_STATUS_INFO) {
+    /** Model id */
+    GRAPH_STATUS_INFO.id = 'GRAPH_STATUS_INFO';
+    /** 类型 */
+    var StatusEnum;
+    (function (StatusEnum) {
+        StatusEnum["SUCCEEDED"] = "SUCCEEDED";
+        StatusEnum["RUNNING"] = "RUNNING";
+        StatusEnum["FAILED"] = "FAILED";
+        StatusEnum["PENDING"] = "PENDING";
+        StatusEnum["CREATING"] = "CREATING";
+        StatusEnum["MANUAL_TERMINATE"] = "MANUAL_TERMINATE";
+        StatusEnum["CACHED"] = "CACHED";
+        StatusEnum["UNKNOWN"] = "UNKNOWN";
+    })(StatusEnum = GRAPH_STATUS_INFO.StatusEnum || (GRAPH_STATUS_INFO.StatusEnum = {}));
+    /** Model Utils */
+    GRAPH_STATUS_INFO.getModel = (0, constant_1.getModelUtil)(GRAPH_STATUS_INFO.id);
+    GRAPH_STATUS_INFO.useValue = (0, constant_1.useModelValueUtil)(GRAPH_STATUS_INFO.id);
+})(GRAPH_STATUS_INFO = exports.GRAPH_STATUS_INFO || (exports.GRAPH_STATUS_INFO = {}));
+var XFlowDagCommands;
+(function (XFlowDagCommands) {
+    //更新节点的状态
+    XFlowDagCommands.QUERY_GRAPH_STATUS = {
+        id: 'xflow:query-graph-status',
+        label: '查询画布节点状态',
+    };
+})(XFlowDagCommands = exports.XFlowDagCommands || (exports.XFlowDagCommands = {}));
+//# sourceMappingURL=constants.js.map

package/lib/canvas-dag-extension/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/canvas-dag-extension/constants.ts"],"names":[],"mappings":";;;AAEA,8EAAmG;AAEtF,QAAA,cAAc,GAAG;IAC5B,cAAc;IACd,eAAe,EAAE,4BAA4B;IAC7C,cAAc;IACd,aAAa,EAAE,0BAA0B;IACzC,eAAe;IACf,cAAc,EAAE,2BAA2B;CACnC,CAAA;AAEG,QAAA,WAAW,GAAG;IACzB,IAAI,EAAE,YAAY;CACV,CAAA;AAEG,QAAA,gBAAgB,GAAG,kBAAkB,CAAA;AAErC,QAAA,yBAAyB,GAAG,YAAY,CAAA;AAExC,QAAA,kBAAkB,GAAG,GAAG,CAAA;AAExB,QAAA,mBAAmB,GAAG,EAAE,CAAA;AAErC,WAAW;AACX,IAAiB,iBAAiB,CA0BjC;AA1BD,WAAiB,iBAAiB;IAChC,eAAe;IACF,oBAAE,GAAG,mBAAmB,CAAA;IACrC,SAAS;IACT,IAAY,UASX;IATD,WAAY,UAAU;QACpB,qCAAuB,CAAA;QACvB,iCAAmB,CAAA;QACnB,+BAAiB,CAAA;QACjB,iCAAmB,CAAA;QACnB,mCAAqB,CAAA;QACrB,mDAAqC,CAAA;QACrC,+BAAiB,CAAA;QACjB,iCAAmB,CAAA;IACrB,CAAC,EATW,UAAU,GAAV,4BAAU,KAAV,4BAAU,QASrB;IAUD,kBAAkB;IACL,0BAAQ,GAAG,IAAA,uBAAY,EAAS,kBAAA,EAAE,CAAC,CAAA;IACnC,0BAAQ,GAAG,IAAA,4BAAiB,EAAS,kBAAA,EAAE,CAAC,CAAA;AACvD,CAAC,EA1BgB,iBAAiB,GAAjB,yBAAiB,KAAjB,yBAAiB,QA0BjC;AAED,IAAiB,gBAAgB,CAMhC;AAND,WAAiB,gBAAgB;IAC/B,SAAS;IACI,mCAAkB,GAAkB;QAC/C,EAAE,EAAE,0BAA0B;QAC9B,KAAK,EAAE,UAAU;KAClB,CAAA;AACH,CAAC,EANgB,gBAAgB,GAAhB,wBAAgB,KAAhB,wBAAgB,QAMhC"}

package/lib/canvas-dag-extension/contributions/command.d.ts

@@ -0,0 +1,114 @@
+import type { HookHub } from '@sunspirytus/xflow-hook';
+import type { IArgsBase } from '@sunspirytus/xflow-core';
+import type { IHooks } from '@sunspirytus/xflow-core';
+import { ICommandHandler } from '@sunspirytus/xflow-core';
+import { GRAPH_STATUS_INFO } from '../constants';
+import type { Graph as X6Graph } from '@antv/x6';
+type ICommand = ICommandHandler<NsGraphStatusCommand.IArgs, NsGraphStatusCommand.IResult, NsGraphStatusCommand.ICmdHooks>;
+export declare namespace NsGraphStatusCommand {
+    /** Command: 获取执行状态 */
+    const MODEL: typeof GRAPH_STATUS_INFO;
+    /** Command: 用于注册 named factory */
+    const command: import("@sunspirytus/xflow-core").IGraphCommand;
+    /** hookName */
+    const hookKey = "queryGraphStatus";
+    /** hook 参数类型 */
+    interface IArgs extends IArgsBase {
+        loop?: boolean;
+        loopInterval?: number;
+        doOnce?: (args: IArgs) => Promise<IArgs>;
+        graphStatusService: IStatusService;
+        shouldStop?: (status: IStatusInfo, args: IArgs) => Promise<boolean>;
+        ctx?: any;
+    }
+    /** hook handler 返回类型 */
+    interface IResult {
+    }
+    /**  api service 类型 */
+    interface IStatusService {
+        (args: IArgs): Promise<IStatusInfo>;
+    }
+    /** hooks 类型 */
+    interface ICmdHooks extends IHooks {
+        queryGraphStatus: HookHub<IArgs, IResult>;
+    }
+    /** 状态 类型 */
+    enum StatusEnum {
+        SUCCEEDED = "SUCCEEDED",
+        RUNNING = "RUNNING",
+        FAILED = "FAILED",
+        PENDING = "PENDING",
+        CREATING = "CREATING",
+        MANUAL_TERMINATE = "MANUAL_TERMINATE",
+        CACHED = "CACHED",
+        UNKNOWN = "UNKNOWN"
+    }
+    /** 节点状态 类型 */
+    interface INodeStatus {
+        status: StatusEnum;
+        [key: string]: any;
+    }
+    /** 接口返回 类型 */
+    interface IStatusInfo {
+        graphStatus: StatusEnum;
+        statusMap: Record<string, INodeStatus>;
+    }
+    /** 接口返回 类型 */
+    type IStatusMap = Record<NsGraphStatusCommand.StatusEnum, string[]>;
+    /** 按status 分类  */
+    const initStatusMap: () => {
+        SUCCEEDED: any[];
+        RUNNING: any[];
+        FAILED: any[];
+        PENDING: any[];
+        CREATING: any[];
+        MANUAL_TERMINATE: any[];
+        CACHED: any[];
+        UNKNOWN: any[];
+    };
+    /** 接口返回 类型 */
+    const groupByStatus: (data: Record<string, INodeStatus>) => IStatusMap;
+    /** diff status */
+    const statusDiff: (cur: any[], next: any[]) => {
+        current: any[];
+        add: any[];
+        remove: any[];
+    };
+    const shouldStop: (info: IStatusInfo) => Promise<boolean>;
+}
+/** 创建节点命令 */
+export declare class QueryGraphStatusCommand implements ICommand {
+    /** api */
+    contextProvider: ICommand['contextProvider'];
+    /** 状态缓存 */
+    statusInfo: NsGraphStatusCommand.IStatusMap;
+    /** 判断是否循环 */
+    isLooping: boolean;
+    /** X6Graph */
+    x6Graph: X6Graph;
+    /** 获取Model */
+    getStatusModel: () => Promise<import("@sunspirytus/xflow-core").NsModel.IModel<GRAPH_STATUS_INFO.IState>>;
+    /** 更新Model数据 */
+    updateModelValue: (callback: (state: GRAPH_STATUS_INFO.IState) => void) => Promise<void>;
+    /** 停止Looping的flag */
+    stopCurrentStatusLooping: () => Promise<void>;
+    /** 设置停止looping的方法 */
+    addStopDispose: () => Promise<void>;
+    /** 更新Graph的数据 */
+    updateGraph: (curStatusInfo: NsGraphStatusCommand.IStatusMap, nextStatusMap: NsGraphStatusCommand.IStatusMap, statusMap: Record<string, NsGraphStatusCommand.INodeStatus>) => void;
+    /** 更新节点数据 */
+    updateNodeData: (id: any, data: NsGraphStatusCommand.INodeStatus) => void;
+    /** 更新连线数据 */
+    updateNodes: (curStatusInfo: NsGraphStatusCommand.IStatusMap, nextStatusMap: NsGraphStatusCommand.IStatusMap, statusMap: Record<string, NsGraphStatusCommand.INodeStatus>) => void;
+    /** 更新节点数据 */
+    updateEdges: (curStatusInfo: NsGraphStatusCommand.IStatusMap, nextStatusMap: NsGraphStatusCommand.IStatusMap) => void;
+    /** 执行Cmd */
+    execute: () => Promise<this>;
+    /** undo cmd */
+    undo: () => Promise<this>;
+    /** redo cmd */
+    redo: () => Promise<this>;
+    isUndoable(): boolean;
+}
+export declare const execCmd: () => void;
+export {};