@sunspirytus/xflow-extension 1.0.52

package/lib/flowchart-editor-panel/interface.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { IGraphCommandService, IModelService, IPosition, NsGraph } from '@sunspirytus/xflow-core';
+import type { Cell } from '@antv/x6';
+import type { NsJsonSchemaForm } from '../canvas-json-schema-form';
+export interface IFlowchartFormPanelProps {
+    style?: React.CSSProperties;
+    className?: string;
+    /** 是否展示 */
+    show?: boolean;
+    /** 节点位置 */
+    position?: IPosition;
+    prefixClz?: string;
+    controlMapService?: (editorMap: NsJsonSchemaForm.IControlMap) => NsJsonSchemaForm.IControlMap;
+    formSchemaService?: (args: {
+        cell: Cell;
+        targetType: NsJsonSchemaForm.TargetType;
+        targetData: NsJsonSchemaForm.TargetData;
+        modelService: IModelService;
+        commandService: IGraphCommandService;
+    }) => Promise<NsJsonSchemaForm.ISchema>;
+    getCustomRenderComponent?: NsJsonSchemaForm.ICustomRender;
+    header?: React.ReactNode;
+}
+export type IFlowchartFormWrapperProps = NsJsonSchemaForm.IControlProps & {
+    children: (config: Object, plugin: {
+        updateNode: (config: NsGraph.INodeConfig) => void;
+        updateEdge: (config: NsGraph.IEdgeConfig) => void;
+        updateGroup: (config: NsGraph.INodeConfig) => void;
+    }) => React.ReactElement;
+};

package/lib/flowchart-editor-panel/interface.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("react");
+//# sourceMappingURL=interface.js.map

package/lib/flowchart-editor-panel/interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interface.js","sourceRoot":"","sources":["../../src/flowchart-editor-panel/interface.ts"],"names":[],"mappings":";;AAAA,iBAAyB"}

package/lib/flowchart-editor-panel/style.css

@@ -0,0 +1,31 @@
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+.flowchart-extension-container .xflow-editor-panel-collpase {
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 12px;
+  transition: right 0.5s;
+}
+.flowchart-extension-container .xflow-editor-panel-collpase-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.flowchart-extension-container .xflow-editor-panel-collpase-icon {
+  position: absolute;
+  z-index: 99;
+  width: 20px;
+  color: #aaa;
+  text-align: center;
+  background: #fff;
+  border: 1px solid #ccc;
+  transform: translate(0, -50%);
+  cursor: pointer;
+}
+.flowchart-extension-container .xflow-editor-panel-collpase-icon:hover {
+  color: #2b84c0;
+}
+.flowchart-extension-container .xflow-editor-panel-collpase .xflow-workspace-panel {
+  transition: left 0.5s;
+}

package/lib/flowchart-editor-panel/style.less

@@ -0,0 +1,41 @@
+@import '~antd/es/style/themes/default.less';
+
+.flowchart-extension-container {
+  @light-border: ~'1px solid #d9d9d9';
+  @header-bg: #fff;
+  @body-bg: #fff;
+  @dnd-panel-prefix-cls: ~'xflow-node-panel';
+  @dnd-panel-prefix-container: ~'xflow-editor-panel-collpase';
+
+  .@{dnd-panel-prefix-container} {
+    color: rgba(0, 0, 0, 0.85);
+    font-size: 12px;
+    transition: right 0.5s;
+
+    &-wrapper {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+
+    &-icon {
+      position: absolute;
+      z-index: 99;
+      width: 20px;
+      color: #aaa;
+      text-align: center;
+      background: #fff;
+      border: 1px solid #ccc;
+      transform: translate(0, -50%);
+      cursor: pointer;
+
+      &:hover {
+        color: rgb(43, 132, 192);
+      }
+    }
+
+    .xflow-workspace-panel {
+      transition: left 0.5s;
+    }
+  }
+}

package/lib/flowchart-editor-panel/useAsync.d.ts

@@ -0,0 +1,3 @@
+export type PromiseType<P extends Promise<any>> = P extends Promise<infer T> ? T : never;
+export type FunctionReturningPromise = (...args: any[]) => Promise<any>;
+export default function useAsync<T extends FunctionReturningPromise>(fn: T): any;

package/lib/flowchart-editor-panel/useAsync.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+function useAsync(fn) {
+    var _a = (0, react_1.useState)({
+        loading: true,
+    }), state = _a[0], set = _a[1];
+    var callback = (0, react_1.useCallback)(function () {
+        fn().then(function (value) {
+            set({
+                loading: false,
+                data: value,
+            });
+        }, function (error) {
+            set({
+                loading: false,
+            });
+            console.error(error);
+        });
+    }, [fn]);
+    (0, react_1.useEffect)(function () {
+        callback();
+    }, [callback]);
+    return state;
+}
+exports.default = useAsync;
+//# sourceMappingURL=useAsync.js.map

package/lib/flowchart-editor-panel/useAsync.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAsync.js","sourceRoot":"","sources":["../../src/flowchart-editor-panel/useAsync.ts"],"names":[],"mappings":";;AAAA,+BAAwD;AAMxD,SAAwB,QAAQ,CAAqC,EAAK;IAClE,IAAA,KAAe,IAAA,gBAAQ,EAAuC;QAClE,OAAO,EAAE,IAAI;KACd,CAAC,EAFK,KAAK,QAAA,EAAE,GAAG,QAEf,CAAA;IAEF,IAAM,QAAQ,GAAG,IAAA,mBAAW,EAAC;QAC3B,EAAE,EAAE,CAAC,IAAI,CACP,UAAA,KAAK;YACH,GAAG,CAAC;gBACF,OAAO,EAAE,KAAK;gBACd,IAAI,EAAE,KAAK;aACZ,CAAC,CAAA;QACJ,CAAC,EACD,UAAA,KAAK;YACH,GAAG,CAAC;gBACF,OAAO,EAAE,KAAK;aACf,CAAC,CAAA;YACF,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QACtB,CAAC,CACF,CAAA;IACH,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;IAER,IAAA,iBAAS,EAAC;QACR,QAAQ,EAAE,CAAA;IACZ,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,OAAO,KAAK,CAAA;AACd,CAAC;AA3BD,2BA2BC"}

package/lib/flowchart-node-panel/constants.d.ts

@@ -0,0 +1,40 @@
+export declare const PANEL_HEADER_HEIGHT = 40;
+export declare const CONTAINER_CLASS = "xflow-node-panel-collpase";
+/** 组群 ID */
+export declare const GROUP_NODE_RENDER_ID = "GROUP_NODE_RENDER_ID";
+export declare const NODE_WIDTH = 60;
+export declare const NODE_HEIGHT = 40;
+export declare const NODE_PADDING = 1;
+export declare const DefaultNodeConfig: {
+    stroke: string;
+    fill: string;
+    fontFill: string;
+    fontSize: number;
+    label: string;
+};
+export declare const NODEPOOL: ({
+    name: string;
+    width?: undefined;
+    height?: undefined;
+    ports?: undefined;
+    label?: undefined;
+} | {
+    name: string;
+    width: number;
+    height: number;
+    ports?: undefined;
+    label?: undefined;
+} | {
+    name: string;
+    ports: string[];
+    width?: undefined;
+    height?: undefined;
+    label?: undefined;
+} | {
+    name: string;
+    label: string;
+    width?: undefined;
+    height?: undefined;
+    ports?: undefined;
+})[];
+export declare const ASPECTRATIONODE: string[];

package/lib/flowchart-node-panel/constants.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ASPECTRATIONODE = exports.NODEPOOL = exports.DefaultNodeConfig = exports.NODE_PADDING = exports.NODE_HEIGHT = exports.NODE_WIDTH = exports.GROUP_NODE_RENDER_ID = exports.CONTAINER_CLASS = exports.PANEL_HEADER_HEIGHT = void 0;
+exports.PANEL_HEADER_HEIGHT = 40;
+exports.CONTAINER_CLASS = 'xflow-node-panel-collpase';
+/** 组群 ID */
+exports.GROUP_NODE_RENDER_ID = 'GROUP_NODE_RENDER_ID';
+// 节点默认尺寸
+exports.NODE_WIDTH = 60;
+exports.NODE_HEIGHT = 40;
+// svg 绘制起始点，解决边不清晰的问题
+exports.NODE_PADDING = 1;
+exports.DefaultNodeConfig = {
+    stroke: '#A2B1C3',
+    fill: '#FFFFFF',
+    fontFill: '#000',
+    fontSize: 12,
+    label: '',
+};
+exports.NODEPOOL = [
+    {
+        name: 'Terminal',
+    },
+    {
+        name: 'Process',
+    },
+    {
+        name: 'Decision',
+    },
+    {
+        name: 'Multi Document',
+    },
+    {
+        name: 'Connector',
+        width: exports.NODE_HEIGHT,
+        height: exports.NODE_HEIGHT,
+    },
+    {
+        name: 'DataIO',
+        ports: ['top', 'bottom'],
+    },
+    {
+        name: 'Database',
+    },
+    {
+        name: 'Hard Disk',
+    },
+    {
+        name: 'Stroed Data',
+    },
+    {
+        name: 'Document',
+    },
+    {
+        name: 'Predefined Process',
+    },
+    {
+        name: 'Extract',
+    },
+    {
+        name: 'Merge',
+    },
+    {
+        name: 'Or',
+        width: exports.NODE_HEIGHT,
+        height: exports.NODE_HEIGHT,
+    },
+    {
+        name: 'Manual Input',
+    },
+    {
+        name: 'Preparation',
+    },
+    {
+        name: 'Delay',
+    },
+    {
+        name: 'Manual Operation',
+    },
+    {
+        name: 'Display',
+    },
+    {
+        name: 'Off Page Link',
+    },
+    {
+        name: 'Note Left',
+        label: '≣',
+    },
+    {
+        name: 'Note Right',
+        label: '≣',
+    },
+    {
+        name: 'Internal Storage',
+    },
+    {
+        name: 'Text',
+        label: 'text',
+    },
+];
+// 缩放时保存同比例
+exports.ASPECTRATIONODE = ['Connector', 'Or'];
+//# sourceMappingURL=constants.js.map

package/lib/flowchart-node-panel/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/flowchart-node-panel/constants.ts"],"names":[],"mappings":";;;AAAa,QAAA,mBAAmB,GAAG,EAAE,CAAA;AACxB,QAAA,eAAe,GAAG,2BAA2B,CAAA;AAC1D,YAAY;AACC,QAAA,oBAAoB,GAAG,sBAAsB,CAAA;AAC1D,SAAS;AACI,QAAA,UAAU,GAAG,EAAE,CAAA;AACf,QAAA,WAAW,GAAG,EAAE,CAAA;AAC7B,sBAAsB;AACT,QAAA,YAAY,GAAG,CAAC,CAAA;AAEhB,QAAA,iBAAiB,GAAG;IAC/B,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,SAAS;IACf,QAAQ,EAAE,MAAM;IAChB,QAAQ,EAAE,EAAE;IACZ,KAAK,EAAE,EAAE;CACV,CAAA;AAEY,QAAA,QAAQ,GAAG;IACtB;QACE,IAAI,EAAE,UAAU;KACjB;IACD;QACE,IAAI,EAAE,SAAS;KAChB;IACD;QACE,IAAI,EAAE,UAAU;KACjB;IACD;QACE,IAAI,EAAE,gBAAgB;KACvB;IACD;QACE,IAAI,EAAE,WAAW;QACjB,KAAK,EAAE,mBAAW;QAClB,MAAM,EAAE,mBAAW;KACpB;IACD;QACE,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC;KACzB;IACD;QACE,IAAI,EAAE,UAAU;KACjB;IACD;QACE,IAAI,EAAE,WAAW;KAClB;IACD;QACE,IAAI,EAAE,aAAa;KACpB;IACD;QACE,IAAI,EAAE,UAAU;KACjB;IACD;QACE,IAAI,EAAE,oBAAoB;KAC3B;IACD;QACE,IAAI,EAAE,SAAS;KAChB;IACD;QACE,IAAI,EAAE,OAAO;KACd;IACD;QACE,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,mBAAW;QAClB,MAAM,EAAE,mBAAW;KACpB;IACD;QACE,IAAI,EAAE,cAAc;KACrB;IACD;QACE,IAAI,EAAE,aAAa;KACpB;IACD;QACE,IAAI,EAAE,OAAO;KACd;IACD;QACE,IAAI,EAAE,kBAAkB;KACzB;IACD;QACE,IAAI,EAAE,SAAS;KAChB;IACD;QACE,IAAI,EAAE,eAAe;KACtB;IACD;QACE,IAAI,EAAE,WAAW;QACjB,KAAK,EAAE,GAAG;KACX;IACD;QACE,IAAI,EAAE,YAAY;QAClB,KAAK,EAAE,GAAG;KACX;IACD;QACE,IAAI,EAAE,kBAAkB;KACzB;IACD;QACE,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,MAAM;KACd;CACF,CAAA;AACD,WAAW;AACE,QAAA,eAAe,GAAG,CAAC,WAAW,EAAE,IAAI,CAAC,CAAA"}

package/lib/flowchart-node-panel/context.d.ts

@@ -0,0 +1 @@
+export declare const FlowchartContext: any;

package/lib/flowchart-node-panel/context.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlowchartContext = void 0;
+var react_1 = require("react");
+exports.FlowchartContext = (0, react_1.createContext)({});
+//# sourceMappingURL=context.js.map

package/lib/flowchart-node-panel/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../src/flowchart-node-panel/context.ts"],"names":[],"mappings":";;;AAAA,+BAAqC;AAExB,QAAA,gBAAgB,GAAG,IAAA,qBAAa,EAAC,EAAE,CAAC,CAAA"}

package/lib/flowchart-node-panel/group-panel/group.css

@@ -0,0 +1,43 @@
+.xflow-group-node {
+  z-index: 9;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.65);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 4px;
+  box-shadow: rgb(17 49 96 / 12%) 0px 1px 3px 0px, rgb(17 49 96 / 4%) 0px 0px 0px 1px;
+  cursor: grab;
+}
+.xflow-group-node:hover {
+  background-color: rgba(227, 244, 255, 0.45);
+  border: 1px solid #1890ff;
+  box-shadow: 0 0 3px 3px rgba(64, 169, 255, 0.2);
+  cursor: move;
+}
+.xflow-group-node .xflow-group-header {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 12px;
+  line-height: 38px;
+}
+.xflow-group-node .xflow-group-header .header-left {
+  width: 80%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.xflow-group-node .xflow-group-header .header-right {
+  display: inline-flex;
+  align-items: center;
+}
+.xflow-group-node .xflow-group-header .header-right span.anticon {
+  margin-left: 8px;
+}
+.x6-node-selected .xflow-group-node {
+  background-color: rgba(243, 249, 255, 0.92);
+  border: 1px solid #1890ff;
+  box-shadow: 0 0 3px 3px rgba(64, 169, 255, 0.2);
+}
+.x6-node-selected .xflow-group-node:hover {
+  background-color: rgba(243, 249, 255, 0.6);
+}

package/lib/flowchart-node-panel/group-panel/group.d.ts

@@ -0,0 +1,2 @@
+import type { NsGraph } from '@sunspirytus/xflow-core';
+export declare const GroupNode: NsGraph.INodeRender;

package/lib/flowchart-node-panel/group-panel/group.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupNode = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var icons_1 = require("@ant-design/icons");
+var xflow_core_1 = require("@sunspirytus/xflow-core");
+var GroupNode = function (props) {
+    var cell = props.cell, _a = props.data, label = _a.label, stroke = _a.stroke, fill = _a.fill, fontSize = _a.fontSize, fontFill = _a.fontFill, _b = _a.width, width = _b === void 0 ? 200 : _b, _c = _a.isCollapsed, isCollapsed = _c === void 0 ? false : _c;
+    var app = (0, xflow_core_1.useXFlowApp)();
+    var onExpand = function () {
+        app.executeCommand(xflow_core_1.XFlowGroupCommands.COLLAPSE_GROUP.id, {
+            nodeId: cell.id,
+            isCollapsed: false,
+            collapsedSize: { width: width, height: 40 },
+        });
+    };
+    var onCollapse = function () {
+        app.executeCommand(xflow_core_1.XFlowGroupCommands.COLLAPSE_GROUP.id, {
+            nodeId: cell.id,
+            isCollapsed: true,
+            collapsedSize: { width: width, height: 40 },
+            gap: 3,
+        });
+    };
+    return (react_1.default.createElement("div", { className: "xflow-group-node", style: {
+            borderColor: stroke,
+            backgroundColor: fill,
+            fontSize: fontSize,
+            color: fontFill,
+        } },
+        react_1.default.createElement("div", { className: "xflow-group-header" },
+            react_1.default.createElement("div", { className: "header-left" }, label),
+            react_1.default.createElement("div", { className: "header-right" },
+                isCollapsed && react_1.default.createElement(icons_1.PlusSquareOutlined, { onClick: onExpand }),
+                !isCollapsed && react_1.default.createElement(icons_1.MinusSquareOutlined, { onClick: onCollapse })))));
+};
+exports.GroupNode = GroupNode;
+//# sourceMappingURL=group.js.map

package/lib/flowchart-node-panel/group-panel/group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.js","sourceRoot":"","sources":["../../../src/flowchart-node-panel/group-panel/group.tsx"],"names":[],"mappings":";;;;AAAA,wDAAyB;AACzB,2CAA2E;AAE3E,sDAAyE;AAElE,IAAM,SAAS,GAAwB,UAAA,KAAK;IAE/C,IAAA,IAAI,GAEF,KAAK,KAFH,EACJ,KACE,KAAK,KAD4E,EAA3E,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAE,aAAW,EAAX,KAAK,mBAAG,GAAG,KAAA,EAAE,mBAAmB,EAAnB,WAAW,mBAAG,KAAK,KAAE,CAC5E;IACT,IAAM,GAAG,GAAG,IAAA,wBAAW,GAAE,CAAA;IACzB,IAAM,QAAQ,GAAG;QACf,GAAG,CAAC,cAAc,CAAC,+BAAkB,CAAC,cAAc,CAAC,EAAE,EAAE;YACvD,MAAM,EAAE,IAAI,CAAC,EAAE;YACf,WAAW,EAAE,KAAK;YAClB,aAAa,EAAE,EAAE,KAAK,OAAA,EAAE,MAAM,EAAE,EAAE,EAAE;SACrC,CAAC,CAAA;IACJ,CAAC,CAAA;IACD,IAAM,UAAU,GAAG;QACjB,GAAG,CAAC,cAAc,CAAC,+BAAkB,CAAC,cAAc,CAAC,EAAE,EAAE;YACvD,MAAM,EAAE,IAAI,CAAC,EAAE;YACf,WAAW,EAAE,IAAI;YACjB,aAAa,EAAE,EAAE,KAAK,OAAA,EAAE,MAAM,EAAE,EAAE,EAAE;YACpC,GAAG,EAAE,CAAC;SACP,CAAC,CAAA;IACJ,CAAC,CAAA;IAED,OAAO,CACL,uCACE,SAAS,EAAC,kBAAkB,EAC5B,KAAK,EAAE;YACL,WAAW,EAAE,MAAM;YACnB,eAAe,EAAE,IAAI;YACrB,QAAQ,UAAA;YACR,KAAK,EAAE,QAAQ;SAChB;QAED,uCAAK,SAAS,EAAC,oBAAoB;YACjC,uCAAK,SAAS,EAAC,aAAa,IAAE,KAAK,CAAO;YAC1C,uCAAK,SAAS,EAAC,cAAc;gBAC1B,WAAW,IAAI,8BAAC,0BAAkB,IAAC,OAAO,EAAE,QAAQ,GAAI;gBACxD,CAAC,WAAW,IAAI,8BAAC,2BAAmB,IAAC,OAAO,EAAE,UAAU,GAAI,CACzD,CACF,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAzCY,QAAA,SAAS,aAyCrB"}

package/lib/flowchart-node-panel/group-panel/group.less

@@ -0,0 +1,49 @@
+@light-border: 1px solid #d9d9d9;
+@primaryColor: #1890ff;
+
+.xflow-group-node {
+  z-index: 9;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.65);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 4px;
+  box-shadow: ~'rgb(17 49 96 / 12%) 0px 1px 3px 0px, rgb(17 49 96 / 4%) 0px 0px 0px 1px';
+  cursor: grab;
+  &:hover {
+    background-color: rgba(227, 244, 255, 0.45);
+    border: 1px solid @primaryColor;
+    box-shadow: 0 0 3px 3px rgba(64, 169, 255, 0.2);
+    cursor: move;
+  }
+  .xflow-group-header {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 12px;
+    line-height: 38px;
+    .header-left {
+      width: 80%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .header-right {
+      display: inline-flex;
+      align-items: center;
+      span.anticon {
+        margin-left: 8px;
+      }
+    }
+  }
+}
+
+.x6-node-selected {
+  .xflow-group-node {
+    background-color: rgba(243, 249, 255, 0.92);
+    border: 1px solid @primaryColor;
+    box-shadow: 0 0 3px 3px rgb(64 169 255 / 20%);
+    &:hover {
+      background-color: rgba(243, 249, 255, 0.6);
+    }
+  }
+}

package/lib/flowchart-node-panel/group-panel/index.d.ts

@@ -0,0 +1 @@
+export declare const setGroupRender: (config: any) => void;

package/lib/flowchart-node-panel/group-panel/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setGroupRender = void 0;
+var group_1 = require("./group");
+var constants_1 = require("../constants");
+var setGroupRender = function (config) {
+    config.setNodeRender(constants_1.GROUP_NODE_RENDER_ID, group_1.GroupNode);
+};
+exports.setGroupRender = setGroupRender;
+//# sourceMappingURL=index.js.map

package/lib/flowchart-node-panel/group-panel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/flowchart-node-panel/group-panel/index.ts"],"names":[],"mappings":";;;AAAA,iCAAmC;AACnC,0CAAmD;AAE5C,IAAM,cAAc,GAAG,UAAA,MAAM;IAClC,MAAM,CAAC,aAAa,CAAC,gCAAoB,EAAE,iBAAS,CAAC,CAAA;AACvD,CAAC,CAAA;AAFY,QAAA,cAAc,kBAE1B"}

package/lib/flowchart-node-panel/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { IProps } from './interface';
+export { setGroupRender } from './group-panel';
+export * from './constants';
+export * from './utils';
+export * from './interface';
+export declare const NodePanelMain: React.FC<IProps>;
+export declare const FlowchartNodePanel: React.FC<IProps>;

package/lib/flowchart-node-panel/index.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlowchartNodePanel = exports.NodePanelMain = exports.setGroupRender = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var xflow_core_1 = require("@sunspirytus/xflow-core");
+var icons_1 = require("@ant-design/icons");
+var lodash_1 = require("lodash");
+var base_panel_1 = require("../base-panel");
+var utils_1 = require("./utils");
+var panel_body_1 = require("./panel-body");
+// import { NodePanelHeader } from '../canvas-node-tree-panel/panel-header'
+var panel_header_1 = require("./panel-header");
+var utils_2 = require("../canvas-node-tree-panel/utils");
+var service_1 = require("./service");
+var constants_1 = require("./constants");
+var group_panel_1 = require("./group-panel");
+Object.defineProperty(exports, "setGroupRender", { enumerable: true, get: function () { return group_panel_1.setGroupRender; } });
+tslib_1.__exportStar(require("./constants"), exports);
+tslib_1.__exportStar(require("./utils"), exports);
+tslib_1.__exportStar(require("./interface"), exports);
+var NodePanelMain = function (props) {
+    var prefixClz = props.prefixClz, _a = props.position, position = _a === void 0 ? { width: 240, top: 0, bottom: 0, left: 0 } : _a, _b = props.showHeader, showHeader = _b === void 0 ? true : _b, rest = tslib_1.__rest(props, ["prefixClz", "position", "showHeader"]);
+    var _c = position.width, width = _c === void 0 ? 200 : _c;
+    var _d = (0, utils_2.usePanelLyaoutStyle)(props), headerStyle = _d.headerStyle, bodyStyle = _d.bodyStyle;
+    var _e = (0, service_1.usePanelData)(props), state = _e.state, onKeywordChange = _e.onKeywordChange;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        showHeader && (react_1.default.createElement(base_panel_1.WorkspacePanel, tslib_1.__assign({}, rest, { position: {
+                top: 0,
+                left: 0,
+                height: constants_1.PANEL_HEADER_HEIGHT,
+                width: width,
+            } }),
+            react_1.default.createElement(panel_header_1.NodePanelHeader, tslib_1.__assign({}, props, { state: state, style: headerStyle, onKeywordChange: onKeywordChange })))),
+        react_1.default.createElement(base_panel_1.WorkspacePanel, tslib_1.__assign({ className: "".concat(constants_1.CONTAINER_CLASS, "-nodes") }, rest, { position: tslib_1.__assign(tslib_1.__assign({}, position), { top: showHeader ? constants_1.PANEL_HEADER_HEIGHT : 0 }) }),
+            react_1.default.createElement(panel_body_1.NodePanelBody, tslib_1.__assign({}, props, { state: state, style: bodyStyle })))));
+};
+exports.NodePanelMain = NodePanelMain;
+var FlowchartNodePanel = function (props) {
+    (0, utils_1.registerCustomNode)((0, lodash_1.get)(props, 'registerNode'));
+    var prefixClz = (0, xflow_core_1.useXflowPrefixCls)('node-panel');
+    var _a = (0, react_1.useState)(false), collpased = _a[0], setCollpased = _a[1];
+    var _b = props.show, show = _b === void 0 ? true : _b, _c = props.position, position = _c === void 0 ? { width: 240, top: 40, bottom: 0, left: 0 } : _c, rest = tslib_1.__rest(props, ["show", "position"]);
+    if (!show) {
+        return null;
+    }
+    var _d = position.width, width = _d === void 0 ? 200 : _d, left = position.left;
+    return (react_1.default.createElement(base_panel_1.WorkspacePanel, { className: constants_1.CONTAINER_CLASS, position: tslib_1.__assign(tslib_1.__assign({}, position), { left: !collpased ? left : -width }) },
+        react_1.default.createElement("div", { className: "".concat(constants_1.CONTAINER_CLASS, "-wrapper") },
+            react_1.default.createElement(base_panel_1.WorkspacePanel, tslib_1.__assign({ className: prefixClz }, rest, { position: {
+                    top: 0,
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                } }),
+                react_1.default.createElement(exports.NodePanelMain, tslib_1.__assign({}, props, { prefixClz: prefixClz, position: position }))),
+            react_1.default.createElement("div", { className: "".concat(constants_1.CONTAINER_CLASS, "-icon"), style: {
+                    top: 21,
+                    right: !collpased ? -10 : -20,
+                    borderRadius: !collpased ? '50%' : '0 50% 50% 0',
+                    borderLeft: !collpased ? '' : 'none',
+                }, onClick: function () {
+                    setCollpased(!collpased);
+                } }, collpased ? react_1.default.createElement(icons_1.DoubleRightOutlined, null) : react_1.default.createElement(icons_1.DoubleLeftOutlined, null)))));
+};
+exports.FlowchartNodePanel = FlowchartNodePanel;
+//# sourceMappingURL=index.js.map

package/lib/flowchart-node-panel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/flowchart-node-panel/index.tsx"],"names":[],"mappings":"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"}

package/lib/flowchart-node-panel/interface.d.ts

@@ -0,0 +1,70 @@
+import type { NsGraph } from '@sunspirytus/xflow-core';
+import type React from 'react';
+import type { IProps as TreeNodeProps, ITreeDataService } from '../canvas-node-tree-panel/interface';
+import { INodeFactoryArgs } from '../canvas-node-tree-panel/interface';
+export { INodeFactoryArgs };
+/** 自定义节点 */
+export interface ICustomNode {
+    name: string;
+    component: NsGraph.INodeRender<any>;
+    popover?: React.ComponentType<any>;
+    label?: string;
+    width?: number;
+    height?: number;
+    ports?: NsGraph.INodeConfig['ports'];
+}
+/** tree node model */
+export interface IFlowchartNode {
+    /**
+     * The type of the menu item.
+     */
+    readonly id: string | 'root';
+    /**
+     * The display label for the menu item.
+     */
+    readonly label: string;
+    /**
+     * Dnd节点的宽度
+     */
+    readonly width?: number;
+    /**
+     * Dnd节点的高度
+     */
+    readonly height?: number;
+    /**
+     * Dnd节点的renderKey
+     */
+    readonly renderKey?: string;
+    /**
+     * Dnd节点的popover的提示内容
+     */
+    readonly popoverContent?: React.ReactNode;
+    /** 内部使用 */
+    isCustom?: boolean;
+    /** 内部使用 */
+    parentKey?: string;
+}
+/** 自定义节点面板 */
+export interface IRegisterNode {
+    title?: string;
+    key: string;
+    hidden?: boolean;
+    nodes: ICustomNode[];
+}
+export interface IProps extends Omit<TreeNodeProps, 'treeDataService' | 'onNodeDrop'> {
+    show?: boolean;
+    showHeader?: boolean;
+    showOfficial?: boolean;
+    /** 自定义节点 */
+    registerNode?: IRegisterNode | IRegisterNode[];
+    treeDataService?: ITreeDataService;
+    /** 默认展开的折叠面板 */
+    defaultActiveKey?: string[];
+}
+export interface IOnKeywordChange {
+    (kwyword: string): void;
+}
+export type IFlowchartNodePanelProps = IProps;
+export declare namespace NsFlowchartPanelData {
+    const id = "FLOWCHART_PANEL_DATA";
+}

package/lib/flowchart-node-panel/interface.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NsFlowchartPanelData = void 0;
+require("../canvas-node-tree-panel/interface");
+var NsFlowchartPanelData;
+(function (NsFlowchartPanelData) {
+    NsFlowchartPanelData.id = 'FLOWCHART_PANEL_DATA';
+})(NsFlowchartPanelData = exports.NsFlowchartPanelData || (exports.NsFlowchartPanelData = {}));
+//# sourceMappingURL=interface.js.map

package/lib/flowchart-node-panel/interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interface.js","sourceRoot":"","sources":["../../src/flowchart-node-panel/interface.tsx"],"names":[],"mappings":";;;AAGA,+CAAsE;AAwEtE,IAAiB,oBAAoB,CAEpC;AAFD,WAAiB,oBAAoB;IACtB,uBAAE,GAAG,sBAAsB,CAAA;AAC1C,CAAC,EAFgB,oBAAoB,GAApB,4BAAoB,KAApB,4BAAoB,QAEpC"}

package/lib/flowchart-node-panel/node.d.ts

@@ -0,0 +1,8 @@
+import { Node } from '@antv/x6';
+import { NsGraph } from '@sunspirytus/xflow-core/es/interface';
+export declare const XFLOW_NODE_SHAPE = "XFLOW_NODE_SHAPE";
+export declare const NODE_DEFAULT_WIDTH = 160;
+export declare const NODE_DEFAULT_HEIGHT = 32;
+declare let XFlowNode: Node.Definition;
+declare const AnchorGroup: typeof NsGraph.AnchorGroup;
+export { XFlowNode, AnchorGroup };