@sunspirytus/xflow-extension 1.0.52

package/lib/canvas-flow-extension/style/index.css

@@ -0,0 +1,65 @@
+.flow-extension-container .x6-edge {
+  stroke-width: 1px;
+}
+.flow-extension-container .x6-edge.success path:nth-child(2) {
+  stroke: #888 !important;
+}
+.flow-extension-container .x6-edge.success path:nth-child(3) {
+  fill: #888 !important;
+  stroke: #888 !important;
+}
+.flow-extension-container .x6-edge.error {
+  stroke-width: 2px;
+}
+.flow-extension-container .x6-edge.error path:nth-child(2) {
+  stroke: rgba(245, 34, 45, 0.45) !important;
+  stroke-width: 2px;
+}
+.flow-extension-container .x6-edge.guideProcessing path:nth-child(2) {
+  stroke: rgba(57, 202, 116, 0.8);
+  stroke-width: 2px;
+  stroke-dasharray: 8px, 2px;
+}
+.flow-extension-container .x6-edge.guideProcessing path:nth-child(2):local {
+  animation: processing-line 30s infinite linear;
+}
+.flow-extension-container .x6-edge.x6-edge-selected path:nth-child(2) {
+  stroke: #1890ff;
+  stroke-width: 2px;
+}
+.flow-extension-container .x6-edge:hover path:nth-child(2) {
+  stroke: #1890ff;
+  stroke-width: 2px;
+}
+.flow-extension-container .x6-edge.hoverHighlight path:nth-child(2) {
+  stroke: #1890ff;
+  stroke-width: 2px;
+}
+@keyframes processing-line {
+  to {
+    stroke-dashoffset: -1000;
+  }
+}
+.flow-extension-container .x6-widget-transform {
+  margin: -1px 0 0 -1px;
+  padding: 0;
+  border: 1px solid #239edd;
+}
+.flow-extension-container .x6-widget-transform > div {
+  border: 1px solid #239edd;
+}
+.flow-extension-container .x6-widget-transform > div:hover {
+  background-color: #3dafe4;
+}
+.flow-extension-container .x6-widget-transform-active-handle {
+  background-color: #3dafe4;
+}
+.flow-extension-container .x6-widget-transform-resize {
+  border-radius: 0;
+}
+.flow-extension-container .x6-widget-selection-inner {
+  border: 1px solid #239edd;
+}
+.flow-extension-container .x6-widget-selection-box {
+  opacity: 0;
+}

package/lib/canvas-flow-extension/style/index.less

@@ -0,0 +1,78 @@
+.flow-extension-container {
+  .x6-edge {
+    stroke-width: 1px;
+    &.success {
+      path:nth-child(2) {
+        stroke: #888 !important;
+      }
+      path:nth-child(3) {
+        fill: #888 !important;
+        stroke: #888 !important;
+      }
+    }
+    &.error {
+      stroke-width: 2px;
+      path:nth-child(2) {
+        stroke: rgba(245, 34, 45, 0.45) !important;
+        stroke-width: 2px;
+      }
+    }
+    &.guideProcessing {
+      path:nth-child(2) {
+        stroke: rgba(57, 202, 116, 0.8);
+        stroke-width: 2px;
+        stroke-dasharray: 8px, 2px;
+        &:local {
+          animation: processing-line 30s infinite linear;
+        }
+      }
+    }
+    &.x6-edge-selected {
+      path:nth-child(2) {
+        stroke: #1890ff;
+        stroke-width: 2px;
+      }
+    }
+    &:hover {
+      path:nth-child(2) {
+        stroke: #1890ff;
+        stroke-width: 2px;
+      }
+    }
+    &.hoverHighlight {
+      path:nth-child(2) {
+        stroke: #1890ff;
+        stroke-width: 2px;
+      }
+    }
+    @keyframes processing-line {
+      to {
+        stroke-dashoffset: -1000;
+      }
+    }
+  }
+
+  .x6-widget-transform {
+    margin: -1px 0 0 -1px;
+    padding: 0;
+    border: 1px solid #239edd;
+  }
+  .x6-widget-transform > div {
+    border: 1px solid #239edd;
+  }
+  .x6-widget-transform > div:hover {
+    background-color: #3dafe4;
+  }
+  .x6-widget-transform-active-handle {
+    background-color: #3dafe4;
+  }
+  .x6-widget-transform-resize {
+    border-radius: 0;
+  }
+  .x6-widget-selection-inner {
+    border: 1px solid #239edd;
+  }
+  .x6-widget-selection-box {
+    opacity: 0;
+  }
+}

package/lib/canvas-flow-extension/x6-extension/node.d.ts

@@ -0,0 +1,5 @@
+import { Node } from '@antv/x6';
+import { NsGraph } from '@sunspirytus/xflow-core';
+declare let XFlowNode: Node.Definition;
+declare const AnchorGroup: typeof NsGraph.AnchorGroup;
+export { XFlowNode, AnchorGroup };

package/lib/canvas-flow-extension/x6-extension/node.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnchorGroup = exports.XFlowNode = void 0;
+/* eslint-disable @typescript-eslint/lines-between-class-members */
+var x6_react_shape_1 = require("@antv/x6-react-shape");
+var x6_1 = require("@antv/x6");
+var constants_1 = require("../constants");
+var xflow_core_1 = require("@sunspirytus/xflow-core");
+var XFlowNode;
+exports.XFlowNode = XFlowNode;
+var AnchorGroup = xflow_core_1.NsGraph.AnchorGroup;
+exports.AnchorGroup = AnchorGroup;
+var portAttrs = {
+    circle: {
+        r: 4,
+        magnet: true,
+        stroke: '#5F95FF',
+        strokeWidth: 1,
+        fill: '#fff',
+        style: {
+            visibility: 'hidden',
+        },
+    },
+};
+if (x6_1.Node.registry.exist(constants_1.XFLOW_NODE_SHAPE)) {
+    exports.XFlowNode = XFlowNode = x6_1.Node.registry.get(constants_1.XFLOW_NODE_SHAPE);
+}
+else {
+    exports.XFlowNode = XFlowNode = x6_react_shape_1.ReactShape.define({
+        width: constants_1.NODE_DEFAULT_WIDTH,
+        height: constants_1.NODE_DEFAULT_HEIGHT,
+        shape: constants_1.XFLOW_NODE_SHAPE,
+        // X6_NODE_PORTAL_NODE_VIEW
+        view: xflow_core_1.XFlowConstants.X6_NODE_PORTAL_NODE_VIEW,
+        ports: {
+            groups: {
+                top: {
+                    position: AnchorGroup.TOP,
+                    attrs: portAttrs,
+                },
+                bottom: {
+                    position: AnchorGroup.BOTTOM,
+                    attrs: portAttrs,
+                },
+                right: {
+                    position: AnchorGroup.RIGHT,
+                    attrs: portAttrs,
+                },
+                left: {
+                    position: AnchorGroup.LEFT,
+                    attrs: portAttrs,
+                },
+            },
+        },
+        attrs: {
+            body: {
+                magnet: false,
+                fill: 'none',
+                stroke: 'none',
+                refWidth: '100%',
+                refHeight: '100%',
+            },
+        },
+    });
+}
+//# sourceMappingURL=node.js.map

package/lib/canvas-flow-extension/x6-extension/node.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"node.js","sourceRoot":"","sources":["../../../src/canvas-flow-extension/x6-extension/node.ts"],"names":[],"mappings":";;;AAAA,mEAAmE;AACnE,uDAAiD;AACjD,+BAA+B;AAC/B,0CAAwF;AACxF,sDAAiE;AAEjE,IAAI,SAA0B,CAAA;AA0DrB,8BAAS;AAxDV,IAAA,WAAW,GAAK,oBAAO,YAAZ,CAAY;AAwDX,kCAAW;AAtD/B,IAAM,SAAS,GAAG;IAChB,MAAM,EAAE;QACN,CAAC,EAAE,CAAC;QACJ,MAAM,EAAE,IAAI;QACZ,MAAM,EAAE,SAAS;QACjB,WAAW,EAAE,CAAC;QACd,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE;YACL,UAAU,EAAE,QAAQ;SACrB;KACF;CACF,CAAA;AAED,IAAI,SAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,4BAAgB,CAAC,EAAE;IACzC,oBAAA,SAAS,GAAG,SAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,4BAAgB,CAAC,CAAA;CAChD;KAAM;IACL,oBAAA,SAAS,GAAG,2BAAU,CAAC,MAAM,CAAC;QAC5B,KAAK,EAAE,8BAAkB;QACzB,MAAM,EAAE,+BAAmB;QAC3B,KAAK,EAAE,4BAAgB;QACvB,2BAA2B;QAC3B,IAAI,EAAE,2BAAc,CAAC,wBAAwB;QAC7C,KAAK,EAAE;YACL,MAAM,EAAE;gBACN,GAAG,EAAE;oBACH,QAAQ,EAAE,WAAW,CAAC,GAAG;oBACzB,KAAK,EAAE,SAAS;iBACjB;gBACD,MAAM,EAAE;oBACN,QAAQ,EAAE,WAAW,CAAC,MAAM;oBAC5B,KAAK,EAAE,SAAS;iBACjB;gBACD,KAAK,EAAE;oBACL,QAAQ,EAAE,WAAW,CAAC,KAAK;oBAC3B,KAAK,EAAE,SAAS;iBACjB;gBACD,IAAI,EAAE;oBACJ,QAAQ,EAAE,WAAW,CAAC,IAAI;oBAC1B,KAAK,EAAE,SAAS;iBACjB;aACF;SACF;QACD,KAAK,EAAE;YACL,IAAI,EAAE;gBACJ,MAAM,EAAE,KAAK;gBACb,IAAI,EAAE,MAAM;gBACZ,MAAM,EAAE,MAAM;gBACd,QAAQ,EAAE,MAAM;gBAChB,SAAS,EAAE,MAAM;aAClB;SACF;KACF,CAAC,CAAA;CACH"}

package/lib/canvas-json-schema-form/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const PANEL_HEADER_HEIGHT = 40;
+export declare const PANEL_FOOTER_HEIGHT = 40;

package/lib/canvas-json-schema-form/constants.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PANEL_FOOTER_HEIGHT = exports.PANEL_HEADER_HEIGHT = void 0;
+exports.PANEL_HEADER_HEIGHT = 40;
+exports.PANEL_FOOTER_HEIGHT = 40;
+//# sourceMappingURL=constants.js.map

package/lib/canvas-json-schema-form/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/canvas-json-schema-form/constants.ts"],"names":[],"mappings":";;;AAAa,QAAA,mBAAmB,GAAG,EAAE,CAAA;AACxB,QAAA,mBAAmB,GAAG,EAAE,CAAA"}

package/lib/canvas-json-schema-form/index.d.ts

@@ -0,0 +1,7 @@
+import { JsonSchemaForm } from './main';
+import { FormItemWrapper } from './schema-form';
+import { NsJsonSchemaFormModel as NsJsonSchemaFormModel, executeJsonSchemaFormCommand } from './service';
+import * as NsJsonSchemaForm from './interface';
+export { NsJsonSchemaForm, NsJsonSchemaFormModel, JsonSchemaForm, FormItemWrapper, executeJsonSchemaFormCommand, };
+export type { IFromItemWrapperProps } from './schema-form';
+export type { IProps as IJsonSchemaFormProps } from './interface';

package/lib/canvas-json-schema-form/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.executeJsonSchemaFormCommand = exports.FormItemWrapper = exports.JsonSchemaForm = exports.NsJsonSchemaFormModel = exports.NsJsonSchemaForm = void 0;
+var tslib_1 = require("tslib");
+var main_1 = require("./main");
+Object.defineProperty(exports, "JsonSchemaForm", { enumerable: true, get: function () { return main_1.JsonSchemaForm; } });
+var schema_form_1 = require("./schema-form");
+Object.defineProperty(exports, "FormItemWrapper", { enumerable: true, get: function () { return schema_form_1.FormItemWrapper; } });
+var service_1 = require("./service");
+Object.defineProperty(exports, "NsJsonSchemaFormModel", { enumerable: true, get: function () { return service_1.NsJsonSchemaFormModel; } });
+Object.defineProperty(exports, "executeJsonSchemaFormCommand", { enumerable: true, get: function () { return service_1.executeJsonSchemaFormCommand; } });
+var NsJsonSchemaForm = tslib_1.__importStar(require("./interface"));
+exports.NsJsonSchemaForm = NsJsonSchemaForm;
+//# sourceMappingURL=index.js.map

package/lib/canvas-json-schema-form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/canvas-json-schema-form/index.tsx"],"names":[],"mappings":";;;;AAAA,+BAAuC;AAWrC,+FAXO,qBAAc,OAWP;AAVhB,6CAA+C;AAW7C,gGAXO,6BAAe,OAWP;AAVjB,qCAGkB;AAKhB,sGAPyB,+BAAqB,OAOzB;AAGrB,6GATA,sCAA4B,OASA;AAP9B,oEAA+C;AAG7C,4CAAgB"}

package/lib/canvas-json-schema-form/interface.d.ts

@@ -0,0 +1,189 @@
+import type React from 'react';
+import type { FormInstance } from 'antd';
+import type { FieldData, Rule } from 'rc-field-form/es/interface';
+import type { IPosition, NsGraph, IModelService, IGraphCommandService } from '@sunspirytus/xflow-core';
+import type { Cell, Graph as X6Graph } from '@antv/x6';
+export { FieldData };
+/** Panel 布局 */
+export interface IPanelProps {
+    headerPosition: IPosition;
+    bodyPosition: IPosition;
+    footerPosition: IPosition;
+}
+/** 画布选中会触发Form更新的画布元素类型 */
+export type TargetType = 'node' | 'edge' | 'group' | 'canvas';
+/** 画布元素的数据 */
+export type TargetData = NsGraph.INodeConfig | NsGraph.IEdgeConfig | NsGraph.IGroupConfig | null;
+/** shape 对应的 render map  */
+export type IControlMap = Map<string, React.FC<IControlProps>>;
+/** Panel Props */
+export interface IProps extends Partial<IPanelProps> {
+    position: IPosition;
+    style?: React.CSSProperties;
+    className?: string;
+    header?: React.FC<ICustomProps>;
+    footer?: React.FC<ICustomProps>;
+    headerText?: string;
+    footerText?: string;
+    targetType?: TargetType[];
+    defaultControlRender?: React.FC<IControlProps>;
+    defaultControls?: IDefaultControls;
+    controlMapService?: IControlMapService;
+    formSchemaService?: IFormSchemaService;
+    formValueUpdateService?: IFormValueUpdateService;
+    getCustomRenderComponent?: ICustomRender;
+    afterUpdatingCb?: IAfterUpdatingCallback;
+}
+export interface IInternalProps extends IProps {
+    prefixClz?: string;
+}
+/** Custom Panel Body Props */
+export interface IPanelBodyRenderProps {
+    node: NsGraph.INodeConfig | null;
+    afterUpdatingCb?: IAfterUpdatingCallback;
+    formSchemaService?: IFormSchemaService;
+    formValueUpdateService?: IFormValueUpdateService;
+}
+export type IDefaultControls = [string, React.FC<IControlProps>][];
+/** Control Props */
+export interface IControlProps {
+    className?: string;
+    controlSchema: IControlSchema;
+    form: FormInstance;
+    defaultControlRender?: React.ComponentType<any>;
+    afterUpdatingCb: IAfterUpdatingCallback;
+    triggerUpdate?: (values: Record<string, any>) => void;
+}
+/** Form.Item child组件的Props */
+export interface IFormItemProps {
+    controlSchema: IControlSchema;
+    id?: string;
+    style?: React.CSSProperties;
+    className?: string;
+    value?: string;
+    onChange?: (val: string) => void;
+}
+/** service: 返回 json form schema */
+export interface IFormSchemaService {
+    (args: {
+        cell: Cell;
+        targetType: TargetType;
+        targetData: TargetData;
+        modelService: IModelService;
+        commandService: IGraphCommandService;
+        graph: X6Graph;
+    }): Promise<ISchema>;
+}
+export interface IControlMapService {
+    (controlMap: IControlMap): IControlMap;
+}
+export interface ICustomRender {
+    (targetType: TargetType, targetData: TargetData, modelService: IModelService, commandService: IGraphCommandService): React.FC<ICustomProps> | null;
+}
+export interface ICustomProps {
+    headerStyle: React.CSSProperties;
+    bodyStyle: React.CSSProperties;
+    footerStyle: React.CSSProperties;
+    targetType: TargetType;
+    targetData: TargetData;
+    modelService: IModelService;
+    commandService: IGraphCommandService;
+}
+/** service: form value change 时触发 */
+export interface IFormValueUpdateService {
+    (args: {
+        values: FieldData[];
+        allFields: FieldData[];
+        targetType: TargetType;
+        targetData: TargetData;
+        modelService: IModelService;
+        commandService: IGraphCommandService;
+    }): Promise<any>;
+}
+/** service: form value change的回调 */
+export interface ITriggerUpdate {
+    (form: FormInstance, values: Record<string, any>): Promise<void>;
+}
+/** service: form value change的回调 */
+export interface IAfterUpdatingCallback {
+    (args: Record<string, any>): Promise<any>;
+}
+/** 下拉选项的配置 */
+export interface IOption {
+    title: string;
+    value: string | number | boolean;
+}
+/** 依赖类型 */
+export type UpdateReasonField = string | number | (string | number)[] | undefined;
+/** Form 字段id类型 */
+export interface IDependency {
+    /** 决定哪些字段变化时触发校验 */
+    name: UpdateReasonField;
+    /** match的条件 */
+    condition: string | number | boolean | {
+        (args: any): boolean;
+    };
+    /** match后的control的值 */
+    hidden?: boolean;
+    /** match后的control的值 */
+    disabled?: boolean;
+}
+/** ControlSchema name的类型 */
+export type NamePath = string | number | (string | number)[];
+/**  Form控件 shape的类型 */
+export declare enum ControlShape {
+    INPUT = "input",
+    CHECKBOX = "checkbox",
+    TEXTAREA = "textArea",
+    SELECT = "select",
+    DATETIME = "datetime",
+    FLOAT = "float"
+}
+/** Form控件 */
+export interface IControlSchema {
+    /** form表单渲染的控件名 */
+    label: string;
+    /** form store中的字段名 */
+    name: NamePath;
+    /** controlmap中对应的 control id */
+    shape: ControlShape | string;
+    /** 默认值 */
+    defaultValue?: string | number | boolean;
+    /** 用户保存的值 */
+    value?: string | number | boolean;
+    /** 是否禁用输入，需要控件支持 */
+    disabled?: boolean;
+    /** 是否显示必选 */
+    required?: boolean;
+    /** label中问号的提示内容 */
+    tooltip?: string;
+    /** 控件后显示的文本 */
+    extra?: string;
+    /** 没有输入时控件的提示 */
+    placeholder?: string;
+    /** 隐藏 */
+    hidden?: boolean;
+    /** 下拉控件的选项 */
+    options?: IOption[];
+    /** 原始数据 */
+    originData?: Record<string, any>;
+    /** 控件联动的规则 */
+    dependencies?: IDependency[];
+    /** 表单校验规则 */
+    rules?: Rule[];
+}
+/** Tab下的Group控件 */
+export interface IGroup {
+    name: string;
+    tooltip?: string;
+    controls: IControlSchema[];
+}
+/** Tab配置 */
+export interface ITab {
+    name: string;
+    groups: IGroup[];
+}
+/** JSON Form Schema */
+export interface ISchema {
+    tabs: ITab[];
+}

package/lib/canvas-json-schema-form/interface.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ControlShape = void 0;
+/**  Form控件 shape的类型 */
+var ControlShape;
+(function (ControlShape) {
+    ControlShape["INPUT"] = "input";
+    ControlShape["CHECKBOX"] = "checkbox";
+    ControlShape["TEXTAREA"] = "textArea";
+    ControlShape["SELECT"] = "select";
+    ControlShape["DATETIME"] = "datetime";
+    ControlShape["FLOAT"] = "float";
+})(ControlShape = exports.ControlShape || (exports.ControlShape = {}));
+//# sourceMappingURL=interface.js.map

package/lib/canvas-json-schema-form/interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interface.js","sourceRoot":"","sources":["../../src/canvas-json-schema-form/interface.tsx"],"names":[],"mappings":";;;AA8KA,uBAAuB;AACvB,IAAY,YAOX;AAPD,WAAY,YAAY;IACtB,+BAAe,CAAA;IACf,qCAAqB,CAAA;IACrB,qCAAqB,CAAA;IACrB,iCAAiB,CAAA;IACjB,qCAAqB,CAAA;IACrB,+BAAe,CAAA;AACjB,CAAC,EAPW,YAAY,GAAZ,oBAAY,KAAZ,oBAAY,QAOvB"}

package/lib/canvas-json-schema-form/main.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { IProps, IInternalProps } from './interface';
+export { FormItemWrapper } from './schema-form';
+export { executeJsonSchemaFormCommand } from './service';
+/** useFormPanelData获取数据 */
+export declare const JsonSchemaFormMain: React.FC<IInternalProps>;
+export declare const JsonSchemaForm: React.FC<IProps>;

package/lib/canvas-json-schema-form/main.js

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JsonSchemaForm = exports.JsonSchemaFormMain = exports.executeJsonSchemaFormCommand = exports.FormItemWrapper = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var xflow_core_1 = require("@sunspirytus/xflow-core");
+var panel_footer_1 = require("./panel-footer");
+var panel_header_1 = require("./panel-header");
+var panel_body_1 = require("./panel-body");
+var utils_1 = require("./utils");
+var service_1 = require("./service");
+var schema_form_1 = require("./schema-form");
+Object.defineProperty(exports, "FormItemWrapper", { enumerable: true, get: function () { return schema_form_1.FormItemWrapper; } });
+var service_2 = require("./service");
+Object.defineProperty(exports, "executeJsonSchemaFormCommand", { enumerable: true, get: function () { return service_2.executeJsonSchemaFormCommand; } });
+var base_panel_1 = require("../base-panel");
+/** useFormPanelData获取数据 */
+var JsonSchemaFormMain = function (props) {
+    var prefixClz = props.prefixClz;
+    var getCustomRenderComponent = props.getCustomRenderComponent, afterUpdatingCb = props.afterUpdatingCb, _a = props.formValueUpdateService, formValueUpdateService = _a === void 0 ? function () { } : _a;
+    var _b = (0, service_1.useJsonSchemaFormModel)(props), state = _b.state, commandService = _b.commandService, modelService = _b.modelService;
+    // 联动更新form items的值
+    var triggerUpdate = react_1.default.useCallback(function (form, values) {
+        if (values === void 0) { values = {}; }
+        return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+            var changedFields, allFields, result;
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        form.setFieldsValue(values);
+                        changedFields = Object.entries(values).map(function (_a) {
+                            var key = _a[0], val = _a[1];
+                            return { name: key, value: val };
+                        });
+                        allFields = Object.entries(state.targetData).map(function (_a) {
+                            var key = _a[0], val = _a[1];
+                            return { name: key, value: val };
+                        });
+                        return [4 /*yield*/, formValueUpdateService({
+                                allFields: allFields,
+                                values: changedFields,
+                                modelService: modelService,
+                                commandService: commandService,
+                                targetData: state.targetData,
+                                targetType: state.targetType,
+                            })];
+                    case 1:
+                        result = _a.sent();
+                        if (afterUpdatingCb) {
+                            afterUpdatingCb(result);
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        });
+    }, [
+        afterUpdatingCb,
+        commandService,
+        formValueUpdateService,
+        modelService,
+        state.targetData,
+        state.targetType,
+    ]);
+    // 在fields change时的回调
+    var onFieldsChange = react_1.default.useCallback(function (changedFields, allFields) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+        var result;
+        return tslib_1.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, formValueUpdateService({
+                        values: changedFields,
+                        allFields: allFields,
+                        modelService: modelService,
+                        commandService: commandService,
+                        targetData: state.targetData,
+                        targetType: state.targetType,
+                    })];
+                case 1:
+                    result = _a.sent();
+                    if (afterUpdatingCb) {
+                        afterUpdatingCb(result);
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [
+        afterUpdatingCb,
+        commandService,
+        formValueUpdateService,
+        modelService,
+        state.targetData,
+        state.targetType,
+    ]);
+    /** schema为空的情况  */
+    var noSchema = react_1.default.useMemo(function () {
+        try {
+            return state.schema.tabs.length === 0 || !state.schema;
+        }
+        catch (error) {
+            return true;
+        }
+    }, [state.schema]);
+    var _c = (0, utils_1.usePanelLyaoutStyle)(props, noSchema), headerStyle = _c.headerStyle, bodyStyle = _c.bodyStyle, footerStyle = _c.footerStyle;
+    /** 支持自定义渲染 */
+    if (getCustomRenderComponent) {
+        var Component = getCustomRenderComponent(state.targetType, state.targetData, modelService, commandService);
+        if (Component) {
+            return react_1.default.createElement(Component, tslib_1.__assign(tslib_1.__assign({}, props), { headerStyle: headerStyle, bodyStyle: bodyStyle, footerStyle: footerStyle, targetData: state.targetData, targetType: state.targetType, modelService: modelService, commandService: commandService }));
+        }
+    }
+    return (react_1.default.createElement("div", { className: prefixClz },
+        react_1.default.createElement(panel_header_1.PanelHeader, tslib_1.__assign({ hasSchema: !noSchema }, props, { state: state, style: headerStyle, prefixClz: props.prefixClz })),
+        react_1.default.createElement(panel_body_1.PanelBody, tslib_1.__assign({}, props, { key: state.targetData && state.targetData.id, style: bodyStyle, prefixClz: props.prefixClz, loading: state.loading, schema: state.schema, triggerUpdate: triggerUpdate, onFieldsChange: onFieldsChange })),
+        react_1.default.createElement(panel_footer_1.PanelFooter, tslib_1.__assign({}, props, { state: state, style: footerStyle }))));
+};
+exports.JsonSchemaFormMain = JsonSchemaFormMain;
+var JsonSchemaForm = function (props) {
+    var prefixClz = (0, xflow_core_1.useXflowPrefixCls)('json-schema-form');
+    return (react_1.default.createElement(base_panel_1.WorkspacePanel, tslib_1.__assign({}, props, { className: prefixClz }),
+        react_1.default.createElement(exports.JsonSchemaFormMain, tslib_1.__assign({}, props, { prefixClz: prefixClz }))));
+};
+exports.JsonSchemaForm = JsonSchemaForm;
+//# sourceMappingURL=main.js.map

package/lib/canvas-json-schema-form/main.js.map

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

package/lib/canvas-json-schema-form/panel-body.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ISchema, IControlProps, IAfterUpdatingCallback, ITriggerUpdate, IControlMapService, IDefaultControls, FieldData } from './interface';
+export interface IBodyProps {
+    schema: ISchema;
+    loading: boolean;
+    prefixClz: string;
+    style: React.CSSProperties;
+    onFieldsChange: (changedValues: FieldData[], allValues: FieldData[]) => void;
+    defaultControlRender?: React.FC<IControlProps>;
+    triggerUpdate?: ITriggerUpdate;
+    afterUpdatingCb?: IAfterUpdatingCallback;
+    controlMapService?: IControlMapService;
+    defaultControls?: IDefaultControls;
+}
+export declare const PanelBody: React.FC<IBodyProps>;

package/lib/canvas-json-schema-form/panel-body.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelBody = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var antd_1 = require("antd");
+var schema_form_1 = require("./schema-form");
+var index_1 = require("./schema-form/control-map/index");
+var PanelBody = function (props) {
+    var _a = props.schema, schema = _a === void 0 ? { tabs: [] } : _a, triggerUpdate = props.triggerUpdate, onFieldsChange = props.onFieldsChange, afterUpdatingCb = props.afterUpdatingCb, defaultControlRender = props.defaultControlRender, loading = props.loading, controlMapService = props.controlMapService, _b = props.defaultControls, defaultControls = _b === void 0 ? [] : _b;
+    var controlMapCache = react_1.default.useMemo(function () {
+        var controlMap = (0, index_1.makeControlMap)(tslib_1.__spreadArray(tslib_1.__spreadArray([], index_1.xflowDefaultControls, true), defaultControls, true));
+        if (controlMapService) {
+            controlMapService(controlMap);
+        }
+        return controlMap;
+    }, [controlMapService, defaultControls]);
+    if (loading) {
+        return (react_1.default.createElement("div", { className: "".concat(props.prefixClz, "-body"), style: tslib_1.__assign(tslib_1.__assign({}, props.style), { display: 'flex', justifyContent: 'center', alignItems: 'center' }) },
+            react_1.default.createElement(antd_1.Spin, { spinning: true })));
+    }
+    return (react_1.default.createElement("div", { className: "".concat(props.prefixClz, "-body"), style: props.style },
+        schema.tabs.length > 0 && (react_1.default.createElement(schema_form_1.SchemaForm, { schema: schema, onFieldsChange: onFieldsChange, controlMap: controlMapCache, defaultControlRender: defaultControlRender, afterUpdatingCb: afterUpdatingCb, triggerUpdate: triggerUpdate })),
+        schema.tabs.length === 0 && react_1.default.createElement(antd_1.Empty, { style: { paddingTop: '64px' } })));
+};
+exports.PanelBody = PanelBody;
+//# sourceMappingURL=panel-body.js.map

package/lib/canvas-json-schema-form/panel-body.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-body.js","sourceRoot":"","sources":["../../src/canvas-json-schema-form/panel-body.tsx"],"names":[],"mappings":";;;;AAAA,wDAAyB;AACzB,6BAAkC;AAUlC,6CAA0C;AAC1C,yDAAsF;AAe/E,IAAM,SAAS,GAAyB,UAAA,KAAK;IAEhD,IAAA,KAQE,KAAK,OARc,EAArB,MAAM,mBAAG,EAAE,IAAI,EAAE,EAAE,EAAE,KAAA,EACrB,aAAa,GAOX,KAAK,cAPM,EACb,cAAc,GAMZ,KAAK,eANO,EACd,eAAe,GAKb,KAAK,gBALQ,EACf,oBAAoB,GAIlB,KAAK,qBAJa,EACpB,OAAO,GAGL,KAAK,QAHA,EACP,iBAAiB,GAEf,KAAK,kBAFU,EACjB,KACE,KAAK,gBADa,EAApB,eAAe,mBAAG,EAAE,KAAA,CACb;IAET,IAAM,eAAe,GAAG,eAAK,CAAC,OAAO,CAAC;QACpC,IAAM,UAAU,GAAG,IAAA,sBAAc,kDAAK,4BAAoB,SAAK,eAAe,QAAE,CAAA;QAChF,IAAI,iBAAiB,EAAE;YACrB,iBAAiB,CAAC,UAAU,CAAC,CAAA;SAC9B;QACD,OAAO,UAAU,CAAA;IACnB,CAAC,EAAE,CAAC,iBAAiB,EAAE,eAAe,CAAC,CAAC,CAAA;IAExC,IAAI,OAAO,EAAE;QACX,OAAO,CACL,uCACE,SAAS,EAAE,UAAG,KAAK,CAAC,SAAS,UAAO,EACpC,KAAK,wCAAO,KAAK,CAAC,KAAK,KAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ;YAExF,8BAAC,WAAI,IAAC,QAAQ,SAAG,CACb,CACP,CAAA;KACF;IACD,OAAO,CACL,uCAAK,SAAS,EAAE,UAAG,KAAK,CAAC,SAAS,UAAO,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK;QAC1D,MAAM,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CACzB,8BAAC,wBAAU,IACT,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,eAAe,EAC3B,oBAAoB,EAAE,oBAAoB,EAC1C,eAAe,EAAE,eAAe,EAChC,aAAa,EAAE,aAAa,GAC5B,CACH;QACA,MAAM,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,8BAAC,YAAK,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,GAAI,CACjE,CACP,CAAA;AACH,CAAC,CAAA;AA7CY,QAAA,SAAS,aA6CrB"}