@sunspirytus/xflow-extension 1.0.52

package/lib/flowchart-editor-panel/control-map-service/components/node.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodeService = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var flowchart_node_panel_1 = require("../../../flowchart-node-panel");
+var form_wrapper_1 = require("../../form-wrapper");
+var fields_1 = require("./fields");
+var constants_1 = require("./constants");
+var NodeComponent = function (props) {
+    var config = props.config, _a = props.plugin, plugin = _a === void 0 ? {} : _a;
+    var updateNode = plugin.updateNode;
+    var _b = (0, react_1.useState)(tslib_1.__assign(tslib_1.__assign({}, flowchart_node_panel_1.DefaultNodeConfig), config)), nodeConfig = _b[0], setNodeConfig = _b[1];
+    var onNodeConfigChange = function (key, value) {
+        var _a, _b;
+        setNodeConfig(tslib_1.__assign(tslib_1.__assign({}, nodeConfig), (_a = {}, _a[key] = value, _a)));
+        updateNode((_b = {},
+            _b[key] = value,
+            _b));
+    };
+    (0, react_1.useEffect)(function () {
+        setNodeConfig(tslib_1.__assign(tslib_1.__assign({}, flowchart_node_panel_1.DefaultNodeConfig), config));
+    }, [config]);
+    return (react_1.default.createElement("div", { className: "".concat(constants_1.PREFIX, "-panel-body") },
+        react_1.default.createElement("div", { className: "".concat(constants_1.PREFIX, "-panel-group") },
+            react_1.default.createElement("h5", null, "\u5185\u5BB9"),
+            react_1.default.createElement(fields_1.InputFiled, { label: "\u6807\u9898", value: nodeConfig.label, onChange: function (value) {
+                    onNodeConfigChange('label', value);
+                } })),
+        react_1.default.createElement("div", { className: "".concat(constants_1.PREFIX, "-panel-group") },
+            react_1.default.createElement("h5", null, "\u6837\u5F0F"),
+            react_1.default.createElement(fields_1.Position, { x: nodeConfig.x, y: nodeConfig.y, onChange: function (key, value) {
+                    onNodeConfigChange(key, value);
+                } }),
+            react_1.default.createElement(fields_1.Size, { width: nodeConfig.width, height: nodeConfig.height, onChange: function (key, value) {
+                    onNodeConfigChange(key, value);
+                } }),
+            react_1.default.createElement(fields_1.ColorPicker, { label: "\u586B\u5145", value: nodeConfig.fill, onChange: function (value) {
+                    onNodeConfigChange('fill', value);
+                } }),
+            react_1.default.createElement(fields_1.ColorPicker, { label: "\u8FB9\u6846", value: nodeConfig.stroke, onChange: function (value) {
+                    onNodeConfigChange('stroke', value);
+                } }),
+            react_1.default.createElement("div", { className: "".concat(constants_1.PREFIX, "-node-text-style") },
+                react_1.default.createElement(fields_1.InputNumberFiled, { label: "\u5B57\u53F7", value: nodeConfig.fontSize, width: 68, onChange: function (value) {
+                        onNodeConfigChange('fontSize', value);
+                    } }),
+                react_1.default.createElement(fields_1.ColorPicker, { value: nodeConfig.fontFill, onChange: function (value) {
+                        onNodeConfigChange('fontFill', value);
+                    } })))));
+};
+var NodeService = function (props) {
+    return (react_1.default.createElement(form_wrapper_1.FlowchartFormWrapper, tslib_1.__assign({}, props), function (config, plugin) { return react_1.default.createElement(NodeComponent, tslib_1.__assign({}, props, { plugin: plugin, config: config })); }));
+};
+exports.NodeService = NodeService;
+//# sourceMappingURL=node.js.map

package/lib/flowchart-editor-panel/control-map-service/components/node.js.map

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

package/lib/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/lib/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/lib/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/lib/flowchart-editor-panel/control-map-service/index.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlowchartService = exports.EditorPanels = exports.defaultControlMapService = void 0;
+var node_1 = require("./components/node");
+var edge_1 = require("./components/edge");
+var group_1 = require("./components/group");
+var canvas_1 = require("./components/canvas");
+var fields_1 = require("./components/fields");
+Object.defineProperty(exports, "EditorPanels", { enumerable: true, get: function () { return fields_1.EditorPanels; } });
+/** 默认支持修改标签和重命名功能 */
+var defaultControlMapService = function (controlMap) {
+    controlMap.set('node-service', node_1.NodeService);
+    controlMap.set('edge-service', edge_1.EdgeService);
+    controlMap.set('group-service', group_1.GroupService);
+    controlMap.set('canvas-service', canvas_1.CanvasService);
+    return controlMap;
+};
+exports.defaultControlMapService = defaultControlMapService;
+exports.FlowchartService = {
+    NodeService: node_1.NodeService,
+    EdgeService: edge_1.EdgeService,
+    GroupService: group_1.GroupService,
+    CanvasService: canvas_1.CanvasService,
+};
+//# sourceMappingURL=index.js.map

package/lib/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,0CAA+C;AAC/C,0CAA+C;AAC/C,4CAAiD;AACjD,8CAAmD;AACnD,8CAAkD;AAUzC,6FAVA,qBAAY,OAUA;AARrB,qBAAqB;AACd,IAAM,wBAAwB,GAAG,UAAA,UAAU;IAChD,UAAU,CAAC,GAAG,CAAC,cAAc,EAAE,kBAAW,CAAC,CAAA;IAC3C,UAAU,CAAC,GAAG,CAAC,cAAc,EAAE,kBAAW,CAAC,CAAA;IAC3C,UAAU,CAAC,GAAG,CAAC,eAAe,EAAE,oBAAY,CAAC,CAAA;IAC7C,UAAU,CAAC,GAAG,CAAC,gBAAgB,EAAE,sBAAa,CAAC,CAAA;IAC/C,OAAO,UAAU,CAAA;AACnB,CAAC,CAAA;AANY,QAAA,wBAAwB,4BAMpC;AAEY,QAAA,gBAAgB,GAAG;IAC9B,WAAW,oBAAA;IACX,WAAW,oBAAA;IACX,YAAY,sBAAA;IACZ,aAAa,wBAAA;CACd,CAAA"}

package/lib/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/lib/flowchart-editor-panel/form-panel.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlowchartFormPanel = exports.CONTAINER_CLASS = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var icons_1 = require("@ant-design/icons");
+var canvas_json_schema_form_1 = require("../canvas-json-schema-form");
+var base_panel_1 = require("../base-panel");
+var form_schema_service_1 = require("./form-schema-service");
+var control_map_service_1 = require("./control-map-service");
+exports.CONTAINER_CLASS = 'xflow-editor-panel-collpase';
+var FlowchartFormPanel = function (props) {
+    var _a = (0, react_1.useState)(false), collpased = _a[0], setCollpased = _a[1];
+    var _b = props.controlMapService, controlMapService = _b === void 0 ? control_map_service_1.defaultControlMapService : _b, _c = props.formSchemaService, formSchemaService = _c === void 0 ? form_schema_service_1.defaultFormSchemaService : _c, _d = props.position, position = _d === void 0 ? { width: 240, top: 0, bottom: 0, right: 0 } : _d, _e = props.show, show = _e === void 0 ? true : _e, rest = tslib_1.__rest(props, ["controlMapService", "formSchemaService", "position", "show"]);
+    if (!show) {
+        return null;
+    }
+    var _f = position.width, width = _f === void 0 ? 200 : _f, right = position.right;
+    return (react_1.default.createElement(base_panel_1.WorkspacePanel, { className: exports.CONTAINER_CLASS, position: tslib_1.__assign(tslib_1.__assign({}, position), { right: !collpased ? right : -width }) },
+        react_1.default.createElement("div", { className: "".concat(exports.CONTAINER_CLASS, "-wrapper") },
+            react_1.default.createElement(canvas_json_schema_form_1.JsonSchemaForm, tslib_1.__assign({ targetType: ['node', 'edge', 'canvas', 'group'], controlMapService: controlMapService, formSchemaService: formSchemaService, position: tslib_1.__assign(tslib_1.__assign({}, position), { top: 0 }), prefixClz: "xflow-form-editor" }, rest)),
+            react_1.default.createElement("div", { className: "".concat(exports.CONTAINER_CLASS, "-icon"), style: {
+                    top: 21,
+                    left: !collpased ? -10 : -20,
+                    borderRadius: !collpased ? '50%' : '50% 0 0  50%',
+                    borderRight: !collpased ? '' : 'none',
+                }, onClick: function () {
+                    setCollpased(!collpased);
+                } }, collpased ? react_1.default.createElement(icons_1.DoubleLeftOutlined, null) : react_1.default.createElement(icons_1.DoubleRightOutlined, null)))));
+};
+exports.FlowchartFormPanel = FlowchartFormPanel;
+//# sourceMappingURL=form-panel.js.map

package/lib/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,qDAAuC;AACvC,2CAA2E;AAC3E,sEAA2D;AAC3D,4CAA8C;AAC9C,6DAAgE;AAChE,6DAAgE;AAInD,QAAA,eAAe,GAAG,6BAA6B,CAAA;AAErD,IAAM,kBAAkB,GAAuC,UAAA,KAAK;IACnE,IAAA,KAA4B,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAA1C,SAAS,QAAA,EAAE,YAAY,QAAmB,CAAA;IAE/C,IAAA,KAKE,KAAK,kBALqC,EAA5C,iBAAiB,mBAAG,8CAAwB,KAAA,EAC5C,KAIE,KAAK,kBAJqC,EAA5C,iBAAiB,mBAAG,8CAAwB,KAAA,EAC5C,KAGE,KAAK,SAH+C,EAAtD,QAAQ,mBAAG,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAA,EACtD,KAEE,KAAK,KAFI,EAAX,IAAI,mBAAG,IAAI,KAAA,EACR,IAAI,kBACL,KAAK,EANH,8DAML,CADQ,CACA;IAET,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,IAAI,CAAA;KACZ;IACO,IAAA,KAAuB,QAAQ,MAApB,EAAX,KAAK,mBAAG,GAAG,KAAA,EAAE,KAAK,GAAK,QAAQ,MAAb,CAAa;IAEvC,OAAO,CACL,8BAAC,2BAAc,IACb,SAAS,EAAE,uBAAe,EAC1B,QAAQ,wCACH,QAAQ,KACX,KAAK,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK;QAGpC,uCAAK,SAAS,EAAE,UAAG,uBAAe,aAAU;YAE1C,8BAAC,wCAAc,qBACb,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,EAC/C,iBAAiB,EAAE,iBAAiB,EACpC,iBAAiB,EAAE,iBAAiB,EACpC,QAAQ,wCACH,QAAQ,KACX,GAAG,EAAE,CAAC,KAER,SAAS,EAAC,mBAAmB,IACzB,IAAI,EACR;YACF,uCACE,SAAS,EAAE,UAAG,uBAAe,UAAO,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;oBACP,YAAY,CAAC,CAAC,SAAS,CAAC,CAAA;gBAC1B,CAAC,IAEA,SAAS,CAAC,CAAC,CAAC,8BAAC,0BAAkB,OAAG,CAAC,CAAC,CAAC,8BAAC,2BAAmB,OAAG,CACzD,CACF,CACS,CAClB,CAAA;AACH,CAAC,CAAA;AArDY,QAAA,kBAAkB,sBAqD9B"}

package/lib/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/lib/flowchart-editor-panel/form-schema-service/index.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultFormSchemaService = void 0;
+var tslib_1 = require("tslib");
+var defaultFormSchemaService = function (args) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+    var targetType, isGroup, groupSchema, nodeSchema, edgeSchema;
+    var _a;
+    return tslib_1.__generator(this, function (_b) {
+        targetType = args.targetType;
+        isGroup = (_a = args.targetData) === null || _a === void 0 ? void 0 : _a.isGroup;
+        groupSchema = {
+            tabs: [
+                {
+                    name: '设置',
+                    groups: [
+                        {
+                            name: 'groupName',
+                            controls: [
+                                {
+                                    label: '分组名',
+                                    name: 'group-service',
+                                    shape: 'group-service',
+                                    placeholder: '分组名称',
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+        };
+        nodeSchema = {
+            tabs: [
+                {
+                    name: '设置',
+                    groups: [
+                        {
+                            name: 'groupName',
+                            controls: [
+                                {
+                                    label: '节点名',
+                                    name: 'node-service',
+                                    shape: 'node-service',
+                                    placeholder: '节点名称',
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+        };
+        edgeSchema = {
+            tabs: [
+                {
+                    name: '设置',
+                    groups: [
+                        {
+                            name: 'groupName',
+                            controls: [
+                                {
+                                    label: '边',
+                                    name: 'edge-service',
+                                    shape: 'edge-service',
+                                    placeholder: '边名称',
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+        };
+        if (isGroup) {
+            return [2 /*return*/, groupSchema];
+        }
+        if (targetType === 'node') {
+            return [2 /*return*/, nodeSchema];
+        }
+        if (targetType === 'edge') {
+            return [2 /*return*/, edgeSchema];
+        }
+        return [2 /*return*/, {
+                tabs: [
+                    {
+                        name: '设置',
+                        groups: [
+                            {
+                                name: 'groupName',
+                                controls: [
+                                    {
+                                        label: '',
+                                        name: 'canvas-service',
+                                        shape: 'canvas-service',
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            }];
+    });
+}); };
+exports.defaultFormSchemaService = defaultFormSchemaService;
+//# sourceMappingURL=index.js.map

package/lib/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":";;;;AAEO,IAAM,wBAAwB,GAAwC,UAAM,IAAI;;;;QAC7E,UAAU,GAAK,IAAI,WAAT,CAAS;QACrB,OAAO,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,OAAO,CAAA;QAElC,WAAW,GAA6B;YAC5C,IAAI,EAAE;gBACJ;oBACE,IAAI,EAAE,IAAI;oBACV,MAAM,EAAE;wBACN;4BACE,IAAI,EAAE,WAAW;4BACjB,QAAQ,EAAE;gCACR;oCACE,KAAK,EAAE,KAAK;oCACZ,IAAI,EAAE,eAAe;oCACrB,KAAK,EAAE,eAAe;oCACtB,WAAW,EAAE,MAAM;iCACpB;6BACF;yBACF;qBACF;iBACF;aACF;SACF,CAAA;QAEK,UAAU,GAA6B;YAC3C,IAAI,EAAE;gBACJ;oBACE,IAAI,EAAE,IAAI;oBACV,MAAM,EAAE;wBACN;4BACE,IAAI,EAAE,WAAW;4BACjB,QAAQ,EAAE;gCACR;oCACE,KAAK,EAAE,KAAK;oCACZ,IAAI,EAAE,cAAc;oCACpB,KAAK,EAAE,cAAc;oCACrB,WAAW,EAAE,MAAM;iCACpB;6BACF;yBACF;qBACF;iBACF;aACF;SACF,CAAA;QACK,UAAU,GAA6B;YAC3C,IAAI,EAAE;gBACJ;oBACE,IAAI,EAAE,IAAI;oBACV,MAAM,EAAE;wBACN;4BACE,IAAI,EAAE,WAAW;4BACjB,QAAQ,EAAE;gCACR;oCACE,KAAK,EAAE,GAAG;oCACV,IAAI,EAAE,cAAc;oCACpB,KAAK,EAAE,cAAc;oCACrB,WAAW,EAAE,KAAK;iCACnB;6BACF;yBACF;qBACF;iBACF;aACF;SACF,CAAA;QAED,IAAI,OAAO,EAAE;YACX,sBAAO,WAAW,EAAA;SACnB;QAED,IAAI,UAAU,KAAK,MAAM,EAAE;YACzB,sBAAO,UAAU,EAAA;SAClB;QAED,IAAI,UAAU,KAAK,MAAM,EAAE;YACzB,sBAAO,UAAU,EAAA;SAClB;QACD,sBAAO;gBACL,IAAI,EAAE;oBACJ;wBACE,IAAI,EAAE,IAAI;wBACV,MAAM,EAAE;4BACN;gCACE,IAAI,EAAE,WAAW;gCACjB,QAAQ,EAAE;oCACR;wCACE,KAAK,EAAE,EAAE;wCACT,IAAI,EAAE,gBAAgB;wCACtB,KAAK,EAAE,gBAAgB;qCACxB;iCACF;6BACF;yBACF;qBACF;iBACF;aAC0B,EAAA;;KAC9B,CAAA;AAhGY,QAAA,wBAAwB,4BAgGpC"}

package/lib/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/lib/flowchart-editor-panel/form-wrapper.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlowchartFormWrapper = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var xflow_core_1 = require("@sunspirytus/xflow-core");
+var utils_1 = require("../flowchart-canvas/utils");
+var canvas_json_schema_form_1 = require("../canvas-json-schema-form");
+var context_1 = require("../base-panel/context");
+var useAsync_1 = tslib_1.__importDefault(require("./useAsync"));
+var FlowchartFormWrapper = function (props) {
+    var controlSchema = props.controlSchema, children = props.children, _a = props.type, formType = _a === void 0 ? 'node' : _a;
+    var _b = (0, context_1.usePanelContext)(), commandService = _b.commandService, modelService = _b.modelService;
+    var getSelectNode = (0, react_1.useCallback)(function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+        var data;
+        return tslib_1.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, xflow_core_1.MODELS.SELECTED_NODE.useValue(modelService)];
+                case 1:
+                    data = (_a.sent()).data;
+                    return [2 /*return*/, data];
+            }
+        });
+    }); }, [modelService]);
+    var getSelectEdge = (0, react_1.useCallback)(function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+        var cell, data;
+        return tslib_1.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, xflow_core_1.MODELS.SELECTED_CELL.useValue(modelService)];
+                case 1:
+                    cell = _a.sent();
+                    data = cell.getData();
+                    return [2 /*return*/, tslib_1.__assign({ id: cell.id }, data)];
+            }
+        });
+    }); }, [modelService]);
+    var _c = (0, useAsync_1.default)(formType === 'edge' ? getSelectEdge : getSelectNode), data = _c.data, loading = _c.loading;
+    react_1.default.useEffect(function () {
+        commandService.executeCommand(xflow_core_1.XFlowGraphCommands.SAVE_GRAPH_DATA.id, {
+            saveGraphDataService: function (meta, graph) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+                return tslib_1.__generator(this, function (_a) {
+                    return [2 /*return*/, { err: null, data: graph, meta: meta }];
+                });
+            }); },
+        });
+    }, [commandService]);
+    var updateNode = function (value) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+        var currentNodeData, nodeConfig;
+        return tslib_1.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, getSelectNode()];
+                case 1:
+                    currentNodeData = _a.sent();
+                    nodeConfig = tslib_1.__assign(tslib_1.__assign({}, currentNodeData), value);
+                    return [4 /*yield*/, commandService.executeCommand(xflow_core_1.XFlowNodeCommands.UPDATE_NODE.id, {
+                            nodeConfig: nodeConfig,
+                        })];
+                case 2:
+                    _a.sent();
+                    (0, utils_1.onConfigChange)({ type: 'update:node', config: nodeConfig });
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var updateEdge = function (value, type, key) {
+        if (type === void 0) { type = 'line'; }
+        return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+            var currentEdgeData, edgeConfig;
+            var _a;
+            var _b;
+            return tslib_1.__generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0: return [4 /*yield*/, getSelectEdge()
+                        // 更新线、文本样式
+                    ];
+                    case 1:
+                        currentEdgeData = _c.sent();
+                        edgeConfig = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, currentEdgeData), (key ? value[key] : value)), { attrs: tslib_1.__assign(tslib_1.__assign({}, currentEdgeData.attrs), (_a = {}, _a[type] = tslib_1.__assign(tslib_1.__assign({}, (_b = currentEdgeData.attrs) === null || _b === void 0 ? void 0 : _b[type]), (key ? value[key] : value)), _a)) });
+                        return [4 /*yield*/, commandService.executeCommand(xflow_core_1.XFlowEdgeCommands.UPDATE_EDGE.id, { edgeConfig: edgeConfig })];
+                    case 2:
+                        _c.sent();
+                        (0, utils_1.onConfigChange)({ type: 'update:edge', config: edgeConfig });
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    var updateGroup = function (value) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+        var currentGroupData, nodeConfig;
+        return tslib_1.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, getSelectNode()];
+                case 1:
+                    currentGroupData = _a.sent();
+                    nodeConfig = tslib_1.__assign(tslib_1.__assign({}, currentGroupData), value);
+                    return [4 /*yield*/, commandService.executeCommand(xflow_core_1.XFlowNodeCommands.UPDATE_NODE.id, {
+                            nodeConfig: nodeConfig,
+                        })];
+                case 2:
+                    _a.sent();
+                    (0, utils_1.onConfigChange)({ type: 'update:group', config: nodeConfig });
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    if (loading) {
+        return null;
+    }
+    return (react_1.default.createElement(canvas_json_schema_form_1.FormItemWrapper, { schema: controlSchema }, function () {
+        return children(tslib_1.__assign({}, data), { updateNode: updateNode, updateEdge: updateEdge, updateGroup: updateGroup });
+    }));
+};
+exports.FlowchartFormWrapper = FlowchartFormWrapper;
+//# sourceMappingURL=form-wrapper.js.map

package/lib/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/lib/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/lib/flowchart-editor-panel/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./form-panel"), exports);
+tslib_1.__exportStar(require("./form-wrapper"), exports);
+tslib_1.__exportStar(require("./interface"), exports);
+tslib_1.__exportStar(require("./control-map-service"), exports);
+//# sourceMappingURL=index.js.map

package/lib/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,uDAA4B;AAC5B,yDAA8B;AAC9B,sDAA2B;AAC3B,gEAAqC"}