@sunspirytus/xflow-extension 1.0.52

package/es/flowchart-editor-panel/control-map-service/components/style.css

@@ -0,0 +1,117 @@
+.flowchart-editor-panel-body {
+  padding: 12px;
+}
+.flowchart-editor-panel-body .flowchart-editor-color-container {
+  width: 24px;
+  height: 24px;
+  padding: 4px;
+  border: 1px solid #eee;
+  border-radius: 2px;
+}
+.flowchart-editor-panel-body .flowchart-editor-panel-group {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 8px;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  font-size: 12px;
+}
+.flowchart-editor-panel-body .flowchart-editor-panel-group:first-child {
+  border-bottom: 1px solid #ccc;
+}
+.flowchart-editor-panel-body .flowchart-editor-panel-group:last-child {
+  margin-bottom: 0;
+}
+.flowchart-editor-panel-body .flowchart-editor-panel-group input,
+.flowchart-editor-panel-body .flowchart-editor-panel-group select {
+  height: 24px;
+}
+.flowchart-editor-panel-body .flowchart-editor-panel-group h5 {
+  margin: 0;
+  color: rgba(0, 0, 0, 0.85);
+}
+.flowchart-editor-panel-body .flowchart-editor-panel-group .group {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.flowchart-editor-panel-body .flowchart-editor-panel-group .group > label {
+  margin-right: 8px;
+  color: rgba(0, 0, 0, 0.45);
+  word-break: keep-all;
+}
+.flowchart-editor-panel-body .flowchart-editor-panel-group .split {
+  display: flex;
+  grid-gap: 8px;
+}
+.flowchart-editor-panel-body .flowchart-editor-panel-group .addon-before-group {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  vertical-align: center;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+}
+.flowchart-editor-panel-body .flowchart-editor-panel-group .addon-before-group > span {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: block;
+  width: 20px;
+  color: #000000d9;
+  line-height: 24px;
+  text-align: center;
+  background-color: #fafafa;
+  cursor: pointer;
+}
+.flowchart-editor-panel-body .flowchart-editor-panel-group .addon-before-group:hover > span {
+  display: none;
+}
+.flowchart-editor-panel-body .flowchart-editor-node-text-style,
+.flowchart-editor-panel-body .flowchart-editor-edge-text-style,
+.flowchart-editor-panel-body .flowchart-editor-edge-stroke-style {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 8px;
+}
+.flowchart-editor-panel-body .ant-input-number {
+  width: 100%;
+}
+.flowchart-editor-canvas-panel {
+  display: flex;
+  justify-content: center;
+  padding-top: 60px;
+  color: #aaa;
+}
+.flowchart-editor-pick-color-container {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 999;
+  background: rgba(0, 0, 0, 0.25);
+}
+.flowchart-editor-pick-color-container .flowchart-editor-popover {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  padding: 12px;
+  background: #fff;
+  transform: translate(-50%, -50%);
+}
+.flowchart-editor-pick-color-container .sketch-picker {
+  box-sizing: border-box !important;
+  padding: 0 !important;
+  border-radius: none !important;
+  box-shadow: none !important;
+}
+.flowchart-editor-pick-color-container .foolter {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 12px;
+}

package/es/flowchart-editor-panel/control-map-service/components/style.less

@@ -0,0 +1,138 @@
+@prefix-cls: ~'flowchart-editor';
+
+.@{prefix-cls}-panel-body {
+  padding: 12px;
+
+  .@{prefix-cls}-color-container {
+    width: 24px;
+    height: 24px;
+    padding: 4px;
+    border: 1px solid #eee;
+    border-radius: 2px;
+  }
+
+  .@{prefix-cls}-panel-group {
+    display: flex;
+    flex-direction: column;
+    grid-gap: 8px;
+    margin-bottom: 12px;
+    padding-bottom: 12px;
+    font-size: 12px;
+
+    &:first-child {
+      border-bottom: 1px solid #ccc;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    input,
+    select {
+      height: 24px;
+    }
+
+    h5 {
+      margin: 0;
+      color: rgba(0, 0, 0, 0.85);
+    }
+
+    .group {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      > label {
+        margin-right: 8px;
+        color: rgba(0, 0, 0, 0.45);
+        word-break: keep-all;
+      }
+    }
+    .split {
+      display: flex;
+      grid-gap: 8px;
+    }
+    .addon-before-group {
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      vertical-align: center;
+      border: 1px solid #d9d9d9;
+      border-radius: 2px;
+
+      > span {
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: block;
+        width: 20px;
+        color: #000000d9;
+        line-height: 24px;
+        text-align: center;
+        background-color: #fafafa;
+        cursor: pointer;
+      }
+
+      &:hover {
+        > span {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .@{prefix-cls}-node-text-style,
+  .@{prefix-cls}-edge-text-style,
+  .@{prefix-cls}-edge-stroke-style {
+    display: flex;
+    flex-direction: row;
+    grid-gap: 8px;
+  }
+
+  .ant-input-number {
+    width: 100%;
+  }
+}
+
+.@{prefix-cls}-canvas-panel {
+  display: flex;
+  justify-content: center;
+  padding-top: 60px;
+  color: #aaa;
+}
+
+.@{prefix-cls}-pick-color-container {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 999;
+  background: rgba(0, 0, 0, 0.25);
+
+  .@{prefix-cls}-popover {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    padding: 12px;
+    background: #fff;
+    transform: translate(-50%, -50%);
+  }
+
+  .sketch-picker {
+    box-sizing: border-box !important;
+    padding: 0 !important;
+    border-radius: none !important;
+    box-shadow: none !important;
+  }
+
+  .foolter {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: 12px;
+  }
+}

package/es/flowchart-editor-panel/control-map-service/index.d.ts

@@ -0,0 +1,10 @@
+import { EditorPanels } from './components/fields';
+/** 默认支持修改标签和重命名功能 */
+export declare const defaultControlMapService: (controlMap: any) => any;
+export { EditorPanels };
+export declare const FlowchartService: {
+    NodeService: React.FC<any>;
+    EdgeService: React.FC<any>;
+    GroupService: React.FC<any>;
+    CanvasService: React.FC;
+};

package/es/flowchart-editor-panel/control-map-service/index.js

@@ -0,0 +1,21 @@
+import { NodeService } from './components/node';
+import { EdgeService } from './components/edge';
+import { GroupService } from './components/group';
+import { CanvasService } from './components/canvas';
+import { EditorPanels } from './components/fields';
+/** 默认支持修改标签和重命名功能 */
+export const defaultControlMapService = controlMap => {
+    controlMap.set('node-service', NodeService);
+    controlMap.set('edge-service', EdgeService);
+    controlMap.set('group-service', GroupService);
+    controlMap.set('canvas-service', CanvasService);
+    return controlMap;
+};
+export { EditorPanels };
+export const FlowchartService = {
+    NodeService,
+    EdgeService,
+    GroupService,
+    CanvasService,
+};
+//# sourceMappingURL=index.js.map

package/es/flowchart-editor-panel/control-map-service/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/flowchart-editor-panel/control-map-service/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAElD,qBAAqB;AACrB,MAAM,CAAC,MAAM,wBAAwB,GAAG,UAAU,CAAC,EAAE;IACnD,UAAU,CAAC,GAAG,CAAC,cAAc,EAAE,WAAW,CAAC,CAAA;IAC3C,UAAU,CAAC,GAAG,CAAC,cAAc,EAAE,WAAW,CAAC,CAAA;IAC3C,UAAU,CAAC,GAAG,CAAC,eAAe,EAAE,YAAY,CAAC,CAAA;IAC7C,UAAU,CAAC,GAAG,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAA;IAC/C,OAAO,UAAU,CAAA;AACnB,CAAC,CAAA;AACD,OAAO,EAAE,YAAY,EAAE,CAAA;AACvB,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,WAAW;IACX,WAAW;IACX,YAAY;IACZ,aAAa;CACd,CAAA"}

package/es/flowchart-editor-panel/form-panel.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { IFlowchartFormPanelProps } from './interface';
+export declare const CONTAINER_CLASS = "xflow-editor-panel-collpase";
+export declare const FlowchartFormPanel: React.FC<IFlowchartFormPanelProps>;

package/es/flowchart-editor-panel/form-panel.js

@@ -0,0 +1,28 @@
+import { __rest } from "tslib";
+import React, { useState } from 'react';
+import { DoubleRightOutlined, DoubleLeftOutlined } from '@ant-design/icons';
+import { JsonSchemaForm } from '../canvas-json-schema-form';
+import { WorkspacePanel } from '../base-panel';
+import { defaultFormSchemaService } from './form-schema-service';
+import { defaultControlMapService } from './control-map-service';
+export const CONTAINER_CLASS = 'xflow-editor-panel-collpase';
+export const FlowchartFormPanel = props => {
+    const [collpased, setCollpased] = useState(false);
+    const { controlMapService = defaultControlMapService, formSchemaService = defaultFormSchemaService, position = { width: 240, top: 0, bottom: 0, right: 0 }, show = true } = props, rest = __rest(props, ["controlMapService", "formSchemaService", "position", "show"]);
+    if (!show) {
+        return null;
+    }
+    const { width = 200, right } = position;
+    return (React.createElement(WorkspacePanel, { className: CONTAINER_CLASS, position: Object.assign(Object.assign({}, position), { right: !collpased ? right : -width }) },
+        React.createElement("div", { className: `${CONTAINER_CLASS}-wrapper` },
+            React.createElement(JsonSchemaForm, Object.assign({ targetType: ['node', 'edge', 'canvas', 'group'], controlMapService: controlMapService, formSchemaService: formSchemaService, position: Object.assign(Object.assign({}, position), { top: 0 }), prefixClz: "xflow-form-editor" }, rest)),
+            React.createElement("div", { className: `${CONTAINER_CLASS}-icon`, style: {
+                    top: 21,
+                    left: !collpased ? -10 : -20,
+                    borderRadius: !collpased ? '50%' : '50% 0 0  50%',
+                    borderRight: !collpased ? '' : 'none',
+                }, onClick: () => {
+                    setCollpased(!collpased);
+                } }, collpased ? React.createElement(DoubleLeftOutlined, null) : React.createElement(DoubleRightOutlined, null)))));
+};
+//# sourceMappingURL=form-panel.js.map

package/es/flowchart-editor-panel/form-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-panel.js","sourceRoot":"","sources":["../../src/flowchart-editor-panel/form-panel.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAA;AAChE,OAAO,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAA;AAIhE,MAAM,CAAC,MAAM,eAAe,GAAG,6BAA6B,CAAA;AAE5D,MAAM,CAAC,MAAM,kBAAkB,GAAuC,KAAK,CAAC,EAAE;IAC5E,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACjD,MAAM,EACJ,iBAAiB,GAAG,wBAAwB,EAC5C,iBAAiB,GAAG,wBAAwB,EAC5C,QAAQ,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EACtD,IAAI,GAAG,IAAI,KAET,KAAK,EADJ,IAAI,UACL,KAAK,EANH,8DAML,CAAQ,CAAA;IAET,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,IAAI,CAAA;KACZ;IACD,MAAM,EAAE,KAAK,GAAG,GAAG,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAA;IAEvC,OAAO,CACL,oBAAC,cAAc,IACb,SAAS,EAAE,eAAe,EAC1B,QAAQ,kCACH,QAAQ,KACX,KAAK,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK;QAGpC,6BAAK,SAAS,EAAE,GAAG,eAAe,UAAU;YAE1C,oBAAC,cAAc,kBACb,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,EAC/C,iBAAiB,EAAE,iBAAiB,EACpC,iBAAiB,EAAE,iBAAiB,EACpC,QAAQ,kCACH,QAAQ,KACX,GAAG,EAAE,CAAC,KAER,SAAS,EAAC,mBAAmB,IACzB,IAAI,EACR;YACF,6BACE,SAAS,EAAE,GAAG,eAAe,OAAO,EACpC,KAAK,EAAE;oBACL,GAAG,EAAE,EAAE;oBACP,IAAI,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE;oBAC5B,YAAY,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,cAAc;oBACjD,WAAW,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;iBACtC,EACD,OAAO,EAAE,GAAG,EAAE;oBACZ,YAAY,CAAC,CAAC,SAAS,CAAC,CAAA;gBAC1B,CAAC,IAEA,SAAS,CAAC,CAAC,CAAC,oBAAC,kBAAkB,OAAG,CAAC,CAAC,CAAC,oBAAC,mBAAmB,OAAG,CACzD,CACF,CACS,CAClB,CAAA;AACH,CAAC,CAAA"}

package/es/flowchart-editor-panel/form-schema-service/index.d.ts

@@ -0,0 +1,2 @@
+import type { NsJsonSchemaForm } from '../../canvas-json-schema-form';
+export declare const defaultFormSchemaService: NsJsonSchemaForm.IFormSchemaService;

package/es/flowchart-editor-panel/form-schema-service/index.js

@@ -0,0 +1,95 @@
+import { __awaiter } from "tslib";
+export const defaultFormSchemaService = (args) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a;
+    const { targetType } = args;
+    const isGroup = (_a = args.targetData) === null || _a === void 0 ? void 0 : _a.isGroup;
+    const groupSchema = {
+        tabs: [
+            {
+                name: '设置',
+                groups: [
+                    {
+                        name: 'groupName',
+                        controls: [
+                            {
+                                label: '分组名',
+                                name: 'group-service',
+                                shape: 'group-service',
+                                placeholder: '分组名称',
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+    };
+    const nodeSchema = {
+        tabs: [
+            {
+                name: '设置',
+                groups: [
+                    {
+                        name: 'groupName',
+                        controls: [
+                            {
+                                label: '节点名',
+                                name: 'node-service',
+                                shape: 'node-service',
+                                placeholder: '节点名称',
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+    };
+    const edgeSchema = {
+        tabs: [
+            {
+                name: '设置',
+                groups: [
+                    {
+                        name: 'groupName',
+                        controls: [
+                            {
+                                label: '边',
+                                name: 'edge-service',
+                                shape: 'edge-service',
+                                placeholder: '边名称',
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+    };
+    if (isGroup) {
+        return groupSchema;
+    }
+    if (targetType === 'node') {
+        return nodeSchema;
+    }
+    if (targetType === 'edge') {
+        return edgeSchema;
+    }
+    return {
+        tabs: [
+            {
+                name: '设置',
+                groups: [
+                    {
+                        name: 'groupName',
+                        controls: [
+                            {
+                                label: '',
+                                name: 'canvas-service',
+                                shape: 'canvas-service',
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+    };
+});
+//# sourceMappingURL=index.js.map

package/es/flowchart-editor-panel/form-schema-service/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/flowchart-editor-panel/form-schema-service/index.ts"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,wBAAwB,GAAwC,CAAM,IAAI,EAAC,EAAE;;IACxF,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,CAAA;IAC3B,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,OAAO,CAAA;IAExC,MAAM,WAAW,GAA6B;QAC5C,IAAI,EAAE;YACJ;gBACE,IAAI,EAAE,IAAI;gBACV,MAAM,EAAE;oBACN;wBACE,IAAI,EAAE,WAAW;wBACjB,QAAQ,EAAE;4BACR;gCACE,KAAK,EAAE,KAAK;gCACZ,IAAI,EAAE,eAAe;gCACrB,KAAK,EAAE,eAAe;gCACtB,WAAW,EAAE,MAAM;6BACpB;yBACF;qBACF;iBACF;aACF;SACF;KACF,CAAA;IAED,MAAM,UAAU,GAA6B;QAC3C,IAAI,EAAE;YACJ;gBACE,IAAI,EAAE,IAAI;gBACV,MAAM,EAAE;oBACN;wBACE,IAAI,EAAE,WAAW;wBACjB,QAAQ,EAAE;4BACR;gCACE,KAAK,EAAE,KAAK;gCACZ,IAAI,EAAE,cAAc;gCACpB,KAAK,EAAE,cAAc;gCACrB,WAAW,EAAE,MAAM;6BACpB;yBACF;qBACF;iBACF;aACF;SACF;KACF,CAAA;IACD,MAAM,UAAU,GAA6B;QAC3C,IAAI,EAAE;YACJ;gBACE,IAAI,EAAE,IAAI;gBACV,MAAM,EAAE;oBACN;wBACE,IAAI,EAAE,WAAW;wBACjB,QAAQ,EAAE;4BACR;gCACE,KAAK,EAAE,GAAG;gCACV,IAAI,EAAE,cAAc;gCACpB,KAAK,EAAE,cAAc;gCACrB,WAAW,EAAE,KAAK;6BACnB;yBACF;qBACF;iBACF;aACF;SACF;KACF,CAAA;IAED,IAAI,OAAO,EAAE;QACX,OAAO,WAAW,CAAA;KACnB;IAED,IAAI,UAAU,KAAK,MAAM,EAAE;QACzB,OAAO,UAAU,CAAA;KAClB;IAED,IAAI,UAAU,KAAK,MAAM,EAAE;QACzB,OAAO,UAAU,CAAA;KAClB;IACD,OAAO;QACL,IAAI,EAAE;YACJ;gBACE,IAAI,EAAE,IAAI;gBACV,MAAM,EAAE;oBACN;wBACE,IAAI,EAAE,WAAW;wBACjB,QAAQ,EAAE;4BACR;gCACE,KAAK,EAAE,EAAE;gCACT,IAAI,EAAE,gBAAgB;gCACtB,KAAK,EAAE,gBAAgB;6BACxB;yBACF;qBACF;iBACF;aACF;SACF;KAC0B,CAAA;AAC/B,CAAC,CAAA,CAAA"}

package/es/flowchart-editor-panel/form-wrapper.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { IFlowchartFormWrapperProps } from './interface';
+export declare const FlowchartFormWrapper: React.FC<IFlowchartFormWrapperProps & {
+    type: string;
+}>;

package/es/flowchart-editor-panel/form-wrapper.js

@@ -0,0 +1,59 @@
+import { __awaiter } from "tslib";
+import React, { useCallback } from 'react';
+import { XFlowGraphCommands, MODELS, XFlowNodeCommands, XFlowEdgeCommands } from '@sunspirytus/xflow-core';
+import { onConfigChange } from '../flowchart-canvas/utils';
+import { FormItemWrapper } from '../canvas-json-schema-form';
+import { usePanelContext } from '../base-panel/context';
+import useAsync from './useAsync';
+export const FlowchartFormWrapper = props => {
+    const { controlSchema, children, type: formType = 'node' } = props;
+    const { commandService, modelService } = usePanelContext();
+    const getSelectNode = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        const { data } = yield MODELS.SELECTED_NODE.useValue(modelService);
+        return data;
+    }), [modelService]);
+    const getSelectEdge = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        const cell = yield MODELS.SELECTED_CELL.useValue(modelService);
+        const data = cell.getData();
+        return Object.assign({ id: cell.id }, data);
+    }), [modelService]);
+    const { data, loading } = useAsync(formType === 'edge' ? getSelectEdge : getSelectNode);
+    React.useEffect(() => {
+        commandService.executeCommand(XFlowGraphCommands.SAVE_GRAPH_DATA.id, {
+            saveGraphDataService: (meta, graph) => __awaiter(void 0, void 0, void 0, function* () {
+                return { err: null, data: graph, meta };
+            }),
+        });
+    }, [commandService]);
+    const updateNode = (value) => __awaiter(void 0, void 0, void 0, function* () {
+        const currentNodeData = yield getSelectNode();
+        const nodeConfig = Object.assign(Object.assign({}, currentNodeData), value);
+        yield commandService.executeCommand(XFlowNodeCommands.UPDATE_NODE.id, {
+            nodeConfig,
+        });
+        onConfigChange({ type: 'update:node', config: nodeConfig });
+    });
+    const updateEdge = (value, type = 'line', key) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const currentEdgeData = yield getSelectEdge();
+        // 更新线、文本样式
+        const edgeConfig = Object.assign(Object.assign(Object.assign({}, currentEdgeData), (key ? value[key] : value)), { attrs: Object.assign(Object.assign({}, currentEdgeData.attrs), { [type]: Object.assign(Object.assign({}, (_a = currentEdgeData.attrs) === null || _a === void 0 ? void 0 : _a[type]), (key ? value[key] : value)) }) });
+        yield commandService.executeCommand(XFlowEdgeCommands.UPDATE_EDGE.id, { edgeConfig });
+        onConfigChange({ type: 'update:edge', config: edgeConfig });
+    });
+    const updateGroup = (value) => __awaiter(void 0, void 0, void 0, function* () {
+        const currentGroupData = yield getSelectNode();
+        const nodeConfig = Object.assign(Object.assign({}, currentGroupData), value);
+        yield commandService.executeCommand(XFlowNodeCommands.UPDATE_NODE.id, {
+            nodeConfig,
+        });
+        onConfigChange({ type: 'update:group', config: nodeConfig });
+    });
+    if (loading) {
+        return null;
+    }
+    return (React.createElement(FormItemWrapper, { schema: controlSchema }, () => {
+        return children(Object.assign({}, data), { updateNode, updateEdge, updateGroup });
+    }));
+};
+//# sourceMappingURL=form-wrapper.js.map

package/es/flowchart-editor-panel/form-wrapper.js.map

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

package/es/flowchart-editor-panel/index.d.ts

@@ -0,0 +1,4 @@
+export * from './form-panel';
+export * from './form-wrapper';
+export * from './interface';
+export * from './control-map-service';

package/es/flowchart-editor-panel/index.js

@@ -0,0 +1,5 @@
+export * from './form-panel';
+export * from './form-wrapper';
+export * from './interface';
+export * from './control-map-service';
+//# sourceMappingURL=index.js.map

package/es/flowchart-editor-panel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/flowchart-editor-panel/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,aAAa,CAAA;AAC3B,cAAc,uBAAuB,CAAA"}

package/es/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/es/flowchart-editor-panel/interface.js

@@ -0,0 +1,2 @@
+import 'react';
+//# sourceMappingURL=interface.js.map

package/es/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,OAAkB,OAAO,CAAA"}

package/es/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/es/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/es/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/es/flowchart-editor-panel/useAsync.js

@@ -0,0 +1,24 @@
+import { useState, useEffect, useCallback } from 'react';
+export default function useAsync(fn) {
+    const [state, set] = useState({
+        loading: true,
+    });
+    const callback = useCallback(() => {
+        fn().then(value => {
+            set({
+                loading: false,
+                data: value,
+            });
+        }, error => {
+            set({
+                loading: false,
+            });
+            console.error(error);
+        });
+    }, [fn]);
+    useEffect(() => {
+        callback();
+    }, [callback]);
+    return state;
+}
+//# sourceMappingURL=useAsync.js.map