ronds-metadata 1.3.32 → 1.3.33

package/es/comps/DynamicPorts/comps/NodeElementForm.d.ts

@@ -0,0 +1,6 @@
+import '../index.less';
+interface NodeElementProps {
+    node?: Node;
+}
+declare const NodeElementForm: (props: NodeElementProps) => JSX.Element;
+export default NodeElementForm;

package/es/comps/DynamicPorts/comps/NodeElementForm.js

@@ -0,0 +1,311 @@
+import "antd/es/tooltip/style";
+import _Tooltip from "antd/es/tooltip";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/*
+ * @Author: wangxian
+ * @Date: 2022-05-24 08:50:16
+ * @LastEditTime: 2024-02-29 17:05:37
+ */
+import { GlobalOutlined } from '@ant-design/icons';
+import { filter } from 'rxjs/operators';
+import '../index.less';
+import Icon from '../../Icons';
+import { gDPGraph } from '../graph';
+import React from 'react';
+import MetadataForm from '../../MetadataForm';
+var NodeElementForm = function NodeElementForm(props) {
+  var node = props.node;
+  var data = (node === null || node === void 0 ? void 0 : node.getData()) || {};
+  var id = data.id,
+    name = data.name,
+    icon = data.icon,
+    param = data.param;
+  var _React$useState = React.useState({}),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    nodeStatus = _React$useState2[0],
+    setNodeStatus = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    isNameEidt = _React$useState4[0],
+    setIsNameEdit = _React$useState4[1];
+  var _React$useState5 = React.useState(false),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    isCanEidt = _React$useState6[0],
+    setIsCanEdit = _React$useState6[1];
+  React.useEffect(function () {
+    var sub = gDPGraph && gDPGraph.factory$.executionStatus.pipe(filter(function (x) {
+      return !!x;
+    })).subscribe(function (v) {
+      var _status = v.statusList.find(function (it) {
+        return (it === null || it === void 0 ? void 0 : it.nodeId) === id;
+      });
+      setNodeStatus(_objectSpread(_objectSpread({}, _status), {}, {
+        debugId: v.debugId
+      }));
+    });
+    return function () {
+      sub.unsubscribe();
+    };
+  }, [gDPGraph]);
+  React.useEffect(function () {
+    var sub = gDPGraph && gDPGraph.factory$.isUpdateNodeName.subscribe(function (v) {
+      setIsCanEdit(v);
+    });
+    return function () {
+      sub.unsubscribe();
+    };
+  }, [gDPGraph]);
+  var onStatusClick = function onStatusClick(e) {
+    e.stopPropagation();
+    gDPGraph.factory$.statusClick.next(_objectSpread(_objectSpread({}, data), {}, {
+      status: _objectSpread({
+        nodeId: id
+      }, nodeStatus)
+    }));
+  };
+  var onPressEnter = function onPressEnter(e) {
+    setIsNameEdit(false);
+    gDPGraph.updateNodeNameById(id, e.target.value);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "node-element-form"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(_Tooltip, {
+    title: (param === null || param === void 0 ? void 0 : param.remark) !== name ? /*#__PURE__*/React.createElement("div", {
+      style: {
+        maxHeight: '200px',
+        whiteSpace: 'pre-line',
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        wordBreak: 'break-all'
+      }
+    }, /*#__PURE__*/React.createElement("span", null, param === null || param === void 0 ? void 0 : param.remark)) : undefined
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "icon",
+    style: {
+      cursor: 'pointer'
+    }
+  }, icon ? /*#__PURE__*/React.createElement(Icon, {
+    type: icon
+  }) : /*#__PURE__*/React.createElement(GlobalOutlined, null))), /*#__PURE__*/React.createElement("div", {
+    className: "notation"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "name",
+    title: name,
+    onDoubleClick: function onDoubleClick() {
+      if (isCanEidt) {
+        setIsNameEdit(true);
+      }
+    }
+  }, name))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxHeight: '500px',
+      overflowY: 'auto'
+    }
+  }, /*#__PURE__*/React.createElement(MetadataForm, {
+    schema: SCHEMA
+  }))));
+};
+export default NodeElementForm;
+var SCHEMA = [{
+  types: [{
+    type: 'object',
+    properties: [{
+      format: 'int',
+      id: 'batchDuration',
+      type: 'number',
+      fields: [{
+        id: 'Rule.Form',
+        refId: 'com.ronds.schema.default.Rule.Form',
+        type: 'ref',
+        value: {
+          common: {
+            require: true,
+            label: '批间隔'
+          },
+          'common-en-US': {
+            require: true,
+            label: 'Batch interval'
+          }
+        }
+      }]
+    }, {
+      id: 'autoOffsetReset',
+      type: 'enum',
+      fields: [{
+        id: 'Rule.Form',
+        refId: 'com.ronds.schema.default.Rule.Form',
+        type: 'ref',
+        value: {
+          common: {
+            require: true,
+            label: '消费策略'
+          },
+          'common-en-US': {
+            require: true,
+            label: 'Consumption strategy'
+          }
+        }
+      }],
+      enum: [{
+        value: 'earliest'
+      }, {
+        value: 'latest'
+      }]
+    }, {
+      type: 'text',
+      fields: [{
+        id: 'Rule.Form',
+        refId: 'com.ronds.schema.default.Rule.Form',
+        type: 'ref',
+        value: {
+          common: {
+            help: '非必填，默认工作流id',
+            require: false,
+            label: '消费者组'
+          },
+          'common-en-US': {
+            help: 'Not required, Default workflow id',
+            require: false,
+            label: 'Consumer group'
+          },
+          text: {}
+        }
+      }],
+      id: 'groupId'
+    }, {
+      id: 'kafkaSource',
+      refId: 'KafkaSourceOption',
+      type: 'ref',
+      fields: [{
+        id: 'Rule.Form',
+        refId: 'com.ronds.schema.default.Rule.Form',
+        type: 'ref',
+        value: {
+          common: {
+            label: 'kafka数据源'
+          },
+          'common-en-US': {
+            label: 'kafka data source'
+          }
+        }
+      }]
+    }],
+    id: 'KafkaSubscribeActivityOption.Config'
+  }, {
+    type: 'object',
+    properties: [{
+      id: 'source',
+      type: 'enum',
+      fields: [{
+        id: 'Rule.Form',
+        refId: 'com.ronds.schema.default.Rule.Form',
+        type: 'ref',
+        value: {
+          common: {
+            label: '选择数据源'
+          },
+          'common-en-US': {
+            label: 'Select Data Source'
+          },
+          enum: {
+            http: {
+              method: 'post',
+              body: '{"type":"Kafka","level":1}',
+              value: 'name',
+              key: 'config',
+              url: '/dataset-web/source/cascade/data/v2'
+            }
+          }
+        }
+      }],
+      enum: []
+    }, {
+      id: 'levelTwo',
+      type: 'enum',
+      fields: [{
+        id: 'Rule.Form',
+        refId: 'com.ronds.schema.default.Rule.Form',
+        type: 'ref',
+        value: {
+          common: {
+            label: '选择主题'
+          },
+          'common-en-US': {
+            label: 'Select Topic'
+          },
+          enum: {
+            http: {
+              method: 'post',
+              body: '{"type":"Kafka","level":2}',
+              value: 'name',
+              watch: 'source',
+              key: 'name',
+              url: '/dataset-web/source/cascade/data/v2'
+            },
+            isMutiple: true
+          }
+        }
+      }],
+      enum: []
+    }, {
+      type: 'text',
+      fields: [{
+        id: 'Rule.Form',
+        refId: 'com.ronds.schema.default.Rule.Form',
+        type: 'ref',
+        value: {
+          common: {
+            hidden: true,
+            defaultValue: 'KafkaSource'
+          },
+          'common-en-US': {},
+          text: {}
+        }
+      }],
+      id: 'actType'
+    }],
+    id: 'KafkaSourceOption'
+  }],
+  id: 'KafkaSubscribeActivityOption',
+  type: 'object',
+  properties: [{
+    type: 'text',
+    fields: [{
+      id: 'Rule.Form',
+      refId: 'com.ronds.schema.default.Rule.Form',
+      type: 'ref',
+      value: {
+        common: {
+          hidden: true,
+          defaultValue: 'KafkaSubscribeActivity'
+        },
+        'common-en-US': {},
+        text: {}
+      }
+    }],
+    id: 'actName'
+  }, {
+    id: 'actConfig',
+    refId: 'KafkaSubscribeActivityOption.Config',
+    type: 'ref',
+    fields: [{
+      id: 'Rule.Form',
+      refId: 'com.ronds.schema.default.Rule.Form',
+      type: 'ref',
+      value: {
+        common: {
+          label: '执行活动配置'
+        },
+        'common-en-US': {
+          label: 'Perform activity configuration'
+        }
+      }
+    }]
+  }]
+}];

package/es/comps/DynamicPorts/comps/NodeElementNormal.d.ts

@@ -0,0 +1,6 @@
+import '../index.less';
+interface NodeElementProps {
+    node?: Node;
+}
+declare const NodeElementNormal: (props: NodeElementProps) => JSX.Element;
+export default NodeElementNormal;

package/es/comps/DynamicPorts/comps/{NodeElement.js → NodeElementNormal.js}

@@ -7,16 +7,16 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 /*
  * @Author: wangxian
  * @Date: 2022-05-24 08:50:16
- * @LastEditTime: 2024-02-01 15:14:11
+ * @LastEditTime: 2024-02-29 13:47:21
  */
 import { GlobalOutlined } from '@ant-design/icons';
 import { filter } from 'rxjs/operators';
 import '../index.less';
-import Icon from '../../../comps/Icons';
+import Icon from '../../Icons';
 import { NodeStatus } from './NodeStatus';
 import { gDPGraph } from '../graph';
 import React from 'react';
-var NodeElement = function NodeElement(props) {
+var NodeElementNormal = function NodeElementNormal(props) {
   var node = props.node;
   var data = (node === null || node === void 0 ? void 0 : node.getData()) || {};
   var id = data.id,
@@ -109,4 +109,4 @@ var NodeElement = function NodeElement(props) {
     status: nodeStatus.nodeStatus
   }))));
 };
-export default NodeElement;
+export default NodeElementNormal;

package/es/comps/DynamicPorts/comps/shape/edge.js

@@ -5,7 +5,7 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 /*
  * @Author: wangxian
  * @Date: 2022-05-24 09:18:34
- * @LastEditTime: 2023-11-29 15:45:34
+ * @LastEditTime: 2024-02-29 17:04:36
  */
 import { Shape, Edge } from '@antv/x6';
 import './edge.less';
@@ -38,7 +38,7 @@ export var DPEdge = /*#__PURE__*/function (_BaseEdge) {
 DPEdge.config({
   shape: 'DPEdge',
   connector: {
-    name: 'pai'
+    name: 'normal'
   },
   zIndex: 1,
   attrs: {

package/es/comps/DynamicPorts/comps/shape/node.d.ts

@@ -9,3 +9,7 @@ export declare class DPNode extends BaseNode {
 export declare class DPGroupNode extends BaseNode {
     isGroup(): boolean;
 }
+export declare class DPNodeForm extends BaseNode {
+    getInPorts(): import("@antv/x6/lib/model/port").PortManager.PortMetadata[];
+    getOutPorts(): import("@antv/x6/lib/model/port").PortManager.PortMetadata[];
+}

package/es/comps/DynamicPorts/comps/shape/node.js

@@ -174,4 +174,89 @@ DPGroupNode.config({
       }]
     }]
   }]
+});
+export var DPNodeForm = /*#__PURE__*/function (_BaseNode3) {
+  _inherits(DPNodeForm, _BaseNode3);
+  var _super4 = _createSuper(DPNodeForm);
+  function DPNodeForm() {
+    _classCallCheck(this, DPNodeForm);
+    return _super4.apply(this, arguments);
+  }
+  _createClass(DPNodeForm, [{
+    key: "getInPorts",
+    value: function getInPorts() {
+      return this.getPortsByGroup('in');
+    }
+  }, {
+    key: "getOutPorts",
+    value: function getOutPorts() {
+      return this.getPortsByGroup('out');
+    }
+  }]);
+  return DPNodeForm;
+}(BaseNode);
+Node.registry.register('rz-rect-port-form', DPNodeForm);
+DPNodeForm.config({
+  width: NODE_WIDTH,
+  height: NODE_HEIGHT,
+  shape: 'rz-rect-port',
+  ports: {
+    groups: {
+      in: {
+        position: {
+          name: 'left'
+        },
+        zIndex: 2
+      },
+      out: {
+        position: {
+          name: 'right'
+        },
+        zIndex: 2
+      }
+    }
+  },
+  attrs: {
+    body: {
+      magnet: false,
+      fill: 'none',
+      stroke: 'none',
+      refWidth: '100%',
+      refHeight: '100%',
+      zIndex: 1
+    }
+  },
+  portMarkup: [{
+    tagName: 'foreignObject',
+    selector: 'fo',
+    attrs: {
+      width: 6,
+      height: 6,
+      x: -3,
+      y: -3,
+      zIndex: 10,
+      // magnet决定是否可交互
+      magnet: 'true'
+    },
+    children: [{
+      ns: Dom.ns.xhtml,
+      tagName: 'body',
+      selector: 'foBody',
+      attrs: {
+        xmlns: Dom.ns.xhtml
+      },
+      style: {
+        width: '100%',
+        height: '100%'
+      },
+      children: [{
+        tagName: 'span',
+        selector: 'content',
+        style: {
+          width: '100%',
+          height: '100%'
+        }
+      }]
+    }]
+  }]
 });

package/es/comps/DynamicPorts/graph.d.ts

@@ -2,7 +2,7 @@ import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
 import { Subscription } from 'rxjs/internal/Subscription';
 import { ConnectionRemovedArgs, ContextMenuInfo, GraphCore } from '../../framework/graph';
 import { BaseEdge, DPEdge } from './comps/shape/edge';
-import { BaseNode, DPNode } from './comps/shape/node';
+import { BaseNode, DPNode, DPNodeForm } from './comps/shape/node';
 import { NDPGraph } from './interface';
 import { formatGraphData } from './utils';
 type NodeMeta = ReturnType<typeof formatGraphData>['nodes'][number];
@@ -42,10 +42,12 @@ declare class DPGraph extends GraphCore<BaseNode, BaseEdge> {
     factory$: IFactory$;
     dpGraphSub?: Subscription;
     queryStatusSub?: Subscription;
-    constructor(graphData?: NDPGraph.GraphData);
+    mode?: string;
+    constructor(graphData?: NDPGraph.GraphData, mode?: string);
     initialize(graphData?: NDPGraph.GraphData): Promise<void>;
     loadDPGraph(graphData: any): Promise<void>;
     isGraphReady(): boolean;
+    switchNode: (nodeMeta: NodeMeta) => DPNode | DPNodeForm;
     renderGraph: (wrapper: HTMLElement, container: HTMLElement) => void;
     renderGraphData: (graphData: NDPGraph.GraphData) => Promise<void>;
     renderNode(nodeMeta: NodeMeta): BaseNode | undefined;
@@ -84,5 +86,5 @@ declare class DPGraph extends GraphCore<BaseNode, BaseEdge> {
 }
 export declare let gDPGraph: DPGraph;
 export default DPGraph;
-export declare const useDPGraph: (graphData?: NDPGraph.GraphData) => DPGraph;
+export declare const useDPGraph: (graphData?: NDPGraph.GraphData, mode?: string) => DPGraph;
 export declare const useUnmountDPGraph: (dispose: boolean, dpGraph: any) => void;

package/es/comps/DynamicPorts/graph.js

@@ -2,8 +2,8 @@ import "antd/es/message/style";
 import _message from "antd/es/message";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import "antd/es/tooltip/style";
 import _Tooltip from "antd/es/tooltip";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
@@ -16,7 +16,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 /*
  * @Author: wangxian
  * @Date: 2022-05-24 14:31:01
- * @LastEditTime: 2024-02-01 15:08:03
+ * @LastEditTime: 2024-02-29 13:40:06
  */
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import produce from 'immer';
@@ -27,17 +27,18 @@ import { filter, take } from 'rxjs/operators';
 import { timer } from 'rxjs';
 import { round } from 'lodash-es';
 import { GraphCore } from '../../framework/graph';
-import NodeElement from './comps/NodeElement';
+import NodeElementNormal from './comps/NodeElementNormal';
 import { DPEdge } from './comps/shape/edge';
-import { DPNode } from './comps/shape/node';
+import { DPNode, DPNodeForm } from './comps/shape/node';
 import { formatGraphData, copy, formatNodeInfoToNodeMeta, formattedEdgesToEdgeMeta, isClipboardEmpty, cleanClipboard, getCellsInClipboard } from './utils';
 import { deepClone, guid } from '../../utils';
 import { MetadataService } from '../../framework/metadata/MetadataService';
 import { tr } from '../../framework/locale';
+import NodeElementForm from './comps/NodeElementForm';
 var DPGraph = /*#__PURE__*/function (_GraphCore) {
   _inherits(DPGraph, _GraphCore);
   var _super = _createSuper(DPGraph);
-  function DPGraph(_graphData) {
+  function DPGraph(_graphData, mode) {
     var _thisSuper, _this;
     _classCallCheck(this, DPGraph);
     _this = _super.call(this, {
@@ -197,6 +198,27 @@ var DPGraph = /*#__PURE__*/function (_GraphCore) {
     _this.dpGraphSub = void 0;
     // 查询执行状态的定时器订阅
     _this.queryStatusSub = void 0;
+    // 节点模式
+    _this.mode = void 0;
+    _this.switchNode = function (nodeMeta) {
+      switch (_this.mode) {
+        case 'normal':
+          return new DPNode(_objectSpread(_objectSpread({}, nodeMeta), {}, {
+            shape: 'dp-rect-port',
+            component: /*#__PURE__*/React.createElement(NodeElementNormal, null)
+          }));
+        case 'form':
+          return new DPNodeForm(_objectSpread(_objectSpread({}, nodeMeta), {}, {
+            shape: 'dp-rect-port',
+            component: /*#__PURE__*/React.createElement(NodeElementForm, null)
+          }));
+        default:
+          return new DPNode(_objectSpread(_objectSpread({}, nodeMeta), {}, {
+            shape: 'dp-rect-port',
+            component: /*#__PURE__*/React.createElement(NodeElementNormal, null)
+          }));
+      }
+    };
     // 渲染画布
     _this.renderGraph = function (wrapper, container) {
       _this.dpGraphSub = _this.factory$.dpGraph.pipe(filter(function (x) {
@@ -228,10 +250,7 @@ var DPGraph = /*#__PURE__*/function (_GraphCore) {
               _this.clearGraphCells();
               _formatGraphData2 = formatGraphData(graphData), nodes = _formatGraphData2.nodes, edges = _formatGraphData2.edges;
               dpNodes = nodes.map(function (it) {
-                return new DPNode(_objectSpread(_objectSpread({}, it), {}, {
-                  shape: 'dp-rect-port',
-                  component: /*#__PURE__*/React.createElement(NodeElement, null)
-                }));
+                return _this.switchNode(it);
               });
               dpEdges = edges.map(function (it) {
                 return new DPEdge(it);
@@ -434,6 +453,7 @@ var DPGraph = /*#__PURE__*/function (_GraphCore) {
         return _ref7.apply(this, arguments);
       };
     }();
+    _this.mode = mode || 'normal';
     _this.initialize(_graphData);
     return _this;
   }
@@ -504,10 +524,7 @@ var DPGraph = /*#__PURE__*/function (_GraphCore) {
       var data = nodeMeta.data;
       var type = data.type;
       if (type === 'node') {
-        var node = this.graph.addNode(new DPNode(_objectSpread(_objectSpread({}, nodeMeta), {}, {
-          shape: 'dp-rect-port',
-          component: /*#__PURE__*/React.createElement(NodeElement, null)
-        })));
+        var node = this.graph.addNode(this.switchNode(nodeMeta));
         return node;
       }
       return undefined;
@@ -899,8 +916,8 @@ var DPGraph = /*#__PURE__*/function (_GraphCore) {
 export var gDPGraph;
 export default DPGraph;
 // 获取图的实例
-export var useDPGraph = function useDPGraph(graphData) {
-  gDPGraph = new DPGraph(graphData);
+export var useDPGraph = function useDPGraph(graphData, mode) {
+  gDPGraph = new DPGraph(graphData, mode);
   return gDPGraph;
 };
 export var useUnmountDPGraph = function useUnmountDPGraph(dispose, dpGraph) {

package/es/comps/DynamicPorts/index.d.ts

@@ -7,6 +7,10 @@ interface IDynamicPortsProps {
      * 渲染图结构
      */
     defaultValue?: NDPGraph.GraphData;
+    /**
+     * 节点图模式
+     */
+    mode?: 'normal' | 'form';
     /**
      * 离开销毁
      */

package/es/comps/DynamicPorts/index.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 /*
  * @Author: wangxian
  * @Date: 2022-05-16 18:53:31
- * @LastEditTime: 2024-02-01 14:44:28
+ * @LastEditTime: 2024-02-29 11:32:12
  */
 import React from 'react';
 import { filter } from 'rxjs';
@@ -17,7 +17,9 @@ import { guid } from '../../utils';
 import ContextMenu from './comps/ContextMenu';
 import { GraphHandler } from './comps/GraphHandler';
 var DynamicPorts = function DynamicPorts(props) {
-  var defaultValue = props.defaultValue,
+  var _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'normal' : _props$mode,
+    defaultValue = props.defaultValue,
     isSelection = props.isSelection,
     _props$dispose = props.dispose,
     dispose = _props$dispose === void 0 ? true : _props$dispose,
@@ -55,7 +57,7 @@ var DynamicPorts = function DynamicPorts(props) {
   // 渲染画布
   React.useEffect(function () {
     if (firstLoadRef.current) {
-      var _dpGraph = useDPGraph(defaultValue);
+      var _dpGraph = useDPGraph(defaultValue, mode);
       dpGraphRef.current = _dpGraph;
       setGraph(_dpGraph);
       _dpGraph.renderGraph(containerRef.current, divRef.current);
@@ -82,7 +84,7 @@ var DynamicPorts = function DynamicPorts(props) {
       getDPGraphInstance && getDPGraphInstance(_dpGraph);
       firstLoadRef.current = false;
     }
-  }, [defaultValue]);
+  }, [defaultValue, mode]);
   React.useEffect(function () {
     if (isSelection && dpGraph) {
       var _dpGraphRef$current3, _dpGraphRef$current3$;

package/es/comps/DynamicPorts/index.less

@@ -92,7 +92,8 @@
   }
 
   .x6-node-selected {
-    .node-element {
+    .node-element,
+    .node-element-form {
       background-color: var(--ronds-metadata-color-bg-4);
       border: 1px solid #1890ff;
       box-shadow: 0 0 3px 3px rgba(64, 169, 255, 0.2);
@@ -120,6 +121,21 @@
     background-color: transparent;
   }
 
+  .node-element-form {
+    .dp-port.connected {
+      width: 0;
+      height: 0;
+      margin-top: 3px;
+      margin-left: -1px;
+      border-width: 5px 4px 0;
+      border-style: solid;
+      border-color: #808080 transparent transparent;
+      border-radius: 0;
+      background-color: transparent;
+      transform: rotate(-90deg);
+    }
+  }
+
   .x6-port-body.available {
     overflow: visible;
   }
@@ -220,3 +236,72 @@
     }
   }
 }
+
+.node-element-form {
+  box-sizing: border-box;
+  overflow: hidden;
+  min-height: 32px;
+  background-color: var(--ronds-metadata-color-bg-4);
+  color: var(--ronds-metadata-color-text-1);
+  border-radius: 4px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+
+  &.selected,
+  &:hover {
+    background-color: var(--ronds-metadata-color-bg-4);
+    color: var(--ronds-metadata-color-text-1);
+    border: 1px solid #1890ff;
+    box-shadow: 0 0 3px 3px rgba(64, 169, 255, 0.2);
+
+    .icon {
+      width: 32px;
+      height: 30px;
+      margin: 0 1px 0 -1px;
+    }
+  }
+
+  & > * {
+    flex-grow: 1;
+  }
+  .icon {
+    display: inline-flex;
+    flex-grow: 0;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    background-color: var(--ronds-metadata-color-bg-6);
+    border-radius: 4px 0 0 4px;
+  }
+
+  .notation {
+    display: inline-flex;
+    align-items: center;
+    width: calc(100% - 32px);
+    padding: 0 8px;
+    user-select: none;
+
+    & > * {
+      flex-grow: 1;
+    }
+
+    .name {
+      overflow-x: hidden;
+      color: var(--ronds-metadata-color-text-1);
+      font-size: 12px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      vertical-align: middle;
+    }
+
+    .statusIcon {
+      display: inline-flex;
+      flex-grow: 0;
+      align-items: center;
+      font-size: 14px;
+      cursor: pointer;
+      transform: translateZ(0);
+      z-index: 1000;
+    }
+  }
+}

package/es/framework/pdl/utils.d.ts

@@ -0,0 +1 @@
+export declare function pdlToJSON(pdl: string): string;

package/es/framework/pdl/utils.js

@@ -0,0 +1,41 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+/*
+ * @Author: wangxian
+ * @Date: 2024-03-02 09:43:50
+ * @LastEditTime: 2024-03-02 09:44:37
+ */
+// 解析PDL并转换为JSON
+export function pdlToJSON(pdl) {
+  // 删除注释和空白行
+  var cleanedPDL = pdl.replace(/\/\/.*\n/g, '').replace(/\n\s*\n/g, '\n');
+  // 提取record定义部分
+  var recordStart = cleanedPDL.indexOf('record');
+  var recordEnd = cleanedPDL.lastIndexOf('}');
+  var recordPDL = cleanedPDL.substring(recordStart, recordEnd + 1);
+  // 解析record定义
+  var recordName = recordPDL.split(' ')[1].trim();
+  var fields = recordPDL.substring(recordPDL.indexOf('{') + 1, recordPDL.lastIndexOf('}')).trim().split('\n');
+  // 构建JSON对象
+  var json = {};
+  json[recordName] = {};
+  var _iterator = _createForOfIteratorHelper(fields),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var field = _step.value;
+      var _field$trim$split$map = field.trim().split(':').map(function (part) {
+          return part.trim();
+        }),
+        _field$trim$split$map2 = _slicedToArray(_field$trim$split$map, 2),
+        key = _field$trim$split$map2[0],
+        value = _field$trim$split$map2[1];
+      json[recordName][key] = value;
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return JSON.stringify(json, null, 2);
+}

package/es/framework/proto/index.d.ts

@@ -1 +1,10 @@
 export declare function transProtobuf2Json(base64: string, protoSchema: string, message: string): any;
+export declare function transMqttProbuf2Json(base64: string, variableProtoSchema: string, variableMessage: string, bodyProtoSchema: string, bodyMessage: string): {
+    formatType: number;
+    compressType: number;
+    sendTime: number;
+    variableLength: number;
+    contentLength: number;
+    variableContent: any;
+    content: any;
+};

package/es/framework/proto/index.js

@@ -29,4 +29,59 @@ export function transProtobuf2Json(base64, protoSchema, message) {
     console.error('解码失败:', err);
     return null;
   }
+}
+export function transMqttProbuf2Json(base64, variableProtoSchema, variableMessage, bodyProtoSchema, bodyMessage) {
+  var variableRoot = protobuf.parse(variableProtoSchema, {
+    keepCase: true
+  }).root;
+  var bodyRoot = protobuf.parse(bodyProtoSchema, {
+    keepCase: true
+  }).root;
+  var variableRootTransferMessage = variableRoot.lookupType(variableMessage);
+  var bodyRootTransferMessage = bodyRoot.lookupType(bodyMessage);
+  // 解析Mqtt消息
+  var uint8Array = transBase642byte(base64);
+  try {
+    // 解码包体格式
+    var formatValue = uint8Array.slice(0, 1);
+    var formatType = parseInt(Array.from(formatValue).map(function (byte) {
+      return byte.toString(2).padStart(8, '0');
+    }).join(''), 2);
+    // 解码压缩类型
+    var compressValue = uint8Array.slice(1, 2);
+    var compressType = parseInt(Array.from(compressValue).map(function (byte) {
+      return byte.toString(2).padStart(8, '0');
+    }).join(''), 2);
+    // 解码时间戳
+    var sendTimeValue = uint8Array.slice(2, 6);
+    var sendTime = parseInt(Array.from(sendTimeValue).map(function (byte) {
+      return byte.toString(2).padStart(8, '0');
+    }).join(''), 2);
+    // 解码可变内容长度、包体内容长度
+    var variableValue = uint8Array.slice(6, 8);
+    var bodyValue = uint8Array.slice(8, 12);
+    var variableLength = parseInt(Array.from(variableValue).map(function (byte) {
+      return byte.toString(2).padStart(8, '0');
+    }).join(''), 2);
+    var bodyLength = parseInt(Array.from(bodyValue).map(function (byte) {
+      return byte.toString(2).padStart(8, '0');
+    }).join(''), 2);
+    // 解码可变内容、包体内容
+    var variableData = uint8Array.slice(12, 12 + variableLength);
+    var bodyData = uint8Array.slice(12 + variableLength, 12 + variableLength + bodyLength);
+    var variableContent = variableRootTransferMessage.decode(variableData);
+    var bodyContent = bodyRootTransferMessage.decode(bodyData);
+    return {
+      formatType: formatType,
+      compressType: compressType,
+      sendTime: sendTime,
+      variableLength: variableLength,
+      contentLength: bodyLength,
+      variableContent: variableContent,
+      content: bodyContent
+    };
+  } catch (err) {
+    console.error('解码失败:', err);
+    return null;
+  }
 }

package/es/index.d.ts

@@ -24,4 +24,4 @@ export { registerMetadataAPI } from './framework/metadata/MetadataService';
 export { FormRobot } from './framework/fg/index';
 export { globalSettingStream } from './config';
 export { handleMd2Doc } from './utils';
-export { transProtobuf2Json } from './framework/proto/index';
+export { transProtobuf2Json, transMqttProbuf2Json } from './framework/proto/index';

package/es/index.js

@@ -1,7 +1,7 @@
 /*
  * @Author:wangxian
  * @Date: 2021-09-18 14:15:04
- * @LastEditTime: 2023-11-23 15:48:15
+ * @LastEditTime: 2024-03-04 11:03:41
  */
 import './theme.less';
 export { default as MetadataEdit } from './comps/MetadataEdit';
@@ -31,4 +31,4 @@ export { registerMetadataAPI } from './framework/metadata/MetadataService';
 export { FormRobot } from './framework/fg/index';
 export { globalSettingStream } from './config';
 export { handleMd2Doc } from './utils';
-export { transProtobuf2Json } from './framework/proto/index';
+export { transProtobuf2Json, transMqttProbuf2Json } from './framework/proto/index';

package/package.json

@@ -1,7 +1,7 @@
 {
   "public": true,
   "name": "ronds-metadata",
-  "version": "1.3.32",
+  "version": "1.3.33",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",

package/es/comps/DynamicPorts/comps/NodeElement.d.ts

@@ -1,6 +0,0 @@
-import '../index.less';
-interface NodeElementProps {
-    node?: Node;
-}
-declare const NodeElement: (props: NodeElementProps) => JSX.Element;
-export default NodeElement;