strategy-panel 1.0.1 → 1.0.2

package/lib/components/canvas/strategy-header/style.less

@@ -0,0 +1,23 @@
+@import (reference) '../../../style/theme-light';
+
+.header-btn {
+  display: flex;
+  align-items: center;
+  margin-right: 25px;
+  font-size: 12px;
+  cursor: pointer;
+  .header-btn-img {
+    width: 13px;
+    height: 13px;
+    margin-right: 5px;
+  }
+}
+
+.strategyHeader {
+  height: 45px !important;
+  line-height: 45px !important;
+  padding: 0 15px;
+  background: @light-gray-bg;
+  border: 1px solid #DCDCDC;
+
+}

package/lib/components/canvas/strategy-header/theme-switch/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './style.less';
+declare const Index: React.FC;
+export default Index;

package/lib/components/canvas/strategy-header/theme-switch/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _antd = require("antd");
+
+require("./style.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Index = function Index() {
+  var handleThemeChange = function handleThemeChange(checked) {
+    console.log('checked', checked);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "theme-switch"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Switch, {
+    defaultChecked: false,
+    onChange: handleThemeChange
+  }));
+};
+
+var _default = Index;
+exports.default = _default;

package/lib/components/canvas/strategy-header/theme-switch/style.less

@@ -0,0 +1,11 @@
+.theme-switch{
+  display: flex;
+  align-items: center;
+
+  .ant-switch-checked{
+    background-color: #979797;
+  }
+  .ant-switch-checked .ant-switch-handle::before{
+    background-color: #000000;
+  }
+}

package/lib/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="@/typings" />
+export { default as StrategyCanvas } from './components/canvas';
+export { default as StrategyHeader } from './components/canvas/strategy-header';
+export { default as ComponentTreePanel } from './components/canvas/component-tree-panel';
+export { default as DAGCanvas } from './components/canvas/dag-canvas';
+export { default as ConfigPanel } from './components/canvas/config-panel';
+export { useExperimentGraph } from './packages/graph-canvas';
+export { useObservableState } from './packages/hooks/useObservableState';
+export { PanelType } from './packages/graph-canvas/node-types';

package/lib/index.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ComponentTreePanel", {
+  enumerable: true,
+  get: function get() {
+    return _componentTreePanel.default;
+  }
+});
+Object.defineProperty(exports, "ConfigPanel", {
+  enumerable: true,
+  get: function get() {
+    return _configPanel.default;
+  }
+});
+Object.defineProperty(exports, "DAGCanvas", {
+  enumerable: true,
+  get: function get() {
+    return _dagCanvas.default;
+  }
+});
+Object.defineProperty(exports, "PanelType", {
+  enumerable: true,
+  get: function get() {
+    return _nodeTypes.PanelType;
+  }
+});
+Object.defineProperty(exports, "StrategyCanvas", {
+  enumerable: true,
+  get: function get() {
+    return _canvas.default;
+  }
+});
+Object.defineProperty(exports, "StrategyHeader", {
+  enumerable: true,
+  get: function get() {
+    return _strategyHeader.default;
+  }
+});
+Object.defineProperty(exports, "useExperimentGraph", {
+  enumerable: true,
+  get: function get() {
+    return _graphCanvas.useExperimentGraph;
+  }
+});
+Object.defineProperty(exports, "useObservableState", {
+  enumerable: true,
+  get: function get() {
+    return _useObservableState.useObservableState;
+  }
+});
+
+var _canvas = _interopRequireDefault(require("./components/canvas"));
+
+var _strategyHeader = _interopRequireDefault(require("./components/canvas/strategy-header"));
+
+var _componentTreePanel = _interopRequireDefault(require("./components/canvas/component-tree-panel"));
+
+var _dagCanvas = _interopRequireDefault(require("./components/canvas/dag-canvas"));
+
+var _configPanel = _interopRequireDefault(require("./components/canvas/config-panel"));
+
+var _graphCanvas = require("./packages/graph-canvas");
+
+var _useObservableState = require("./packages/hooks/useObservableState");
+
+var _nodeTypes = require("./packages/graph-canvas/node-types");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/packages/graph-canvas/graph-common.d.ts

@@ -0,0 +1,19 @@
+export declare const initGraphData: {
+    nodes: never[];
+    links: never[];
+};
+export declare const basicEdgeAttrs: {
+    attrs: {
+        line: {
+            strokeDasharray: number;
+            stroke: string;
+            strokeWidth: number;
+            targetMarker: {
+                name: string;
+                args: {
+                    size: string;
+                };
+            };
+        };
+    };
+};

package/lib/packages/graph-canvas/graph-common.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.initGraphData = exports.basicEdgeAttrs = void 0;
+var initGraphData = {
+  nodes: [],
+  links: []
+};
+exports.initGraphData = initGraphData;
+var basicEdgeAttrs = {
+  attrs: {
+    line: {
+      strokeDasharray: 5,
+      stroke: '#00A6FF',
+      strokeWidth: 1,
+      targetMarker: {
+        name: 'block',
+        args: {
+          size: '6'
+        }
+      }
+    }
+  }
+};
+exports.basicEdgeAttrs = basicEdgeAttrs;

package/lib/packages/graph-canvas/graph-model/edge/group-edge/edge.less

@@ -0,0 +1,8 @@
+.x6-edge {
+  &-selected,
+  &:hover {
+    path[stroke-width='1'] {
+      stroke-width: 3px;
+    }
+  }
+}

package/lib/packages/graph-canvas/graph-model/edge/group-edge/index.d.ts

@@ -0,0 +1,4 @@
+import BaseEdge from "../../../../graph-model/edge";
+export default class GroupEdge extends BaseEdge {
+    isGroupEdge(): boolean;
+}

package/lib/packages/graph-canvas/graph-model/edge/group-edge/index.js

@@ -0,0 +1,74 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _edge = _interopRequireDefault(require("../../../../graph-model/edge"));
+
+var _x = require("@antv/x6");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var GroupEdge = /*#__PURE__*/function (_BaseEdge) {
+  _inherits(GroupEdge, _BaseEdge);
+
+  var _super = _createSuper(GroupEdge);
+
+  function GroupEdge() {
+    _classCallCheck(this, GroupEdge);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(GroupEdge, [{
+    key: "isGroupEdge",
+    value: // eslint-disable-next-line class-methods-use-this
+    function isGroupEdge() {
+      return true;
+    }
+  }]);
+
+  return GroupEdge;
+}(_edge.default);
+
+exports.default = GroupEdge;
+GroupEdge.config({
+  shape: 'group-edge',
+  attrs: {
+    line: {
+      stroke: '#00A6FF',
+      strokeWidth: 1,
+      strokeDasharray: 5,
+      targetMarker: {
+        stroke: 'none',
+        fill: 'none'
+      }
+    }
+  }
+});
+
+_x.Graph.registerEdge('group-edge', GroupEdge);

package/lib/packages/graph-canvas/graph-model/edge/index.d.ts

@@ -0,0 +1,2 @@
+import GroupEdge from './group-edge';
+export { GroupEdge };

package/lib/packages/graph-canvas/graph-model/edge/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "GroupEdge", {
+  enumerable: true,
+  get: function get() {
+    return _groupEdge.default;
+  }
+});
+
+var _groupEdge = _interopRequireDefault(require("./group-edge"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/packages/graph-canvas/graph-model/node/application-node/application-element.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { Node } from '@antv/x6';
+import './application-element.less';
+interface Props {
+    node?: Node;
+    experimentId: string;
+}
+declare const ApplicationElement: React.FC<Props>;
+export default ApplicationElement;

package/lib/packages/graph-canvas/graph-model/node/application-node/application-element.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("./application-element.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ApplicationElement = function ApplicationElement(props) {
+  var node = props.node;
+  var data = (node === null || node === void 0 ? void 0 : node.getData()) || {};
+  var applicationImgUrl = data.applicationImgUrl,
+      name = data.name;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "application-element"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "application-name"
+  }, name), /*#__PURE__*/_react.default.createElement("img", {
+    alt: "",
+    src: applicationImgUrl,
+    className: "icon"
+  }));
+};
+
+var _default = ApplicationElement;
+exports.default = _default;

package/lib/packages/graph-canvas/graph-model/node/application-node/application-element.less

@@ -0,0 +1,17 @@
+.application-element{
+  width: 420px;
+  height: 320px;
+  padding: 10px;
+  background: #fff;
+  .icon{
+    width: 400px;
+    height: 300px;
+  }
+
+  .application-name{
+    position: absolute;
+    top: 0;
+    left: 10px;
+    font-size: 18px;
+  }
+}

package/lib/packages/graph-canvas/graph-model/node/application-node/index.d.ts

@@ -0,0 +1,7 @@
+import BaseNode from "../../../../graph-model/node";
+export declare const APPLICATION_NODE_WIDTH = 400;
+export declare const APPLICATION_NODE_HEIGHT = 300;
+export default class ApplicationNode extends BaseNode {
+    getInPorts(): import("@antv/x6/lib/model/port").PortManager.PortMetadata[];
+    getOutPorts(): import("@antv/x6/lib/model/port").PortManager.PortMetadata[];
+}

package/lib/packages/graph-canvas/graph-model/node/application-node/index.js

@@ -0,0 +1,133 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.APPLICATION_NODE_WIDTH = exports.APPLICATION_NODE_HEIGHT = void 0;
+
+var _x = require("@antv/x6");
+
+var _node = _interopRequireDefault(require("../../../../graph-model/node"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var APPLICATION_NODE_WIDTH = 400;
+exports.APPLICATION_NODE_WIDTH = APPLICATION_NODE_WIDTH;
+var APPLICATION_NODE_HEIGHT = 300;
+exports.APPLICATION_NODE_HEIGHT = APPLICATION_NODE_HEIGHT;
+
+var ApplicationNode = /*#__PURE__*/function (_BaseNode) {
+  _inherits(ApplicationNode, _BaseNode);
+
+  var _super = _createSuper(ApplicationNode);
+
+  function ApplicationNode() {
+    _classCallCheck(this, ApplicationNode);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(ApplicationNode, [{
+    key: "getInPorts",
+    value: function getInPorts() {
+      return this.getPortsByGroup('in');
+    }
+  }, {
+    key: "getOutPorts",
+    value: function getOutPorts() {
+      return this.getPortsByGroup('out');
+    }
+  }]);
+
+  return ApplicationNode;
+}(_node.default);
+
+exports.default = ApplicationNode;
+ApplicationNode.config({
+  width: APPLICATION_NODE_WIDTH,
+  height: APPLICATION_NODE_HEIGHT,
+  inherit: 'react-shape',
+  ports: {
+    groups: {
+      in: {
+        position: {
+          name: 'top'
+        },
+        zIndex: 2
+      },
+      out: {
+        position: {
+          name: 'bottom'
+        },
+        zIndex: 2
+      }
+    }
+  },
+  attrs: {
+    body: {
+      magnet: false,
+      fill: 'none',
+      stroke: 'none',
+      refWidth: '100%',
+      refHeight: '100%',
+      zIndex: 1
+    }
+  },
+  portMarkup: [{
+    tagName: 'foreignObject',
+    selector: 'fo',
+    attrs: {
+      width: 8,
+      height: 8,
+      x: -4,
+      y: -4,
+      zIndex: 10,
+      // magnet决定是否可交互
+      magnet: 'true'
+    },
+    children: [{
+      ns: _x.Dom.ns.xhtml,
+      tagName: 'body',
+      selector: 'foBody',
+      attrs: {
+        xmlns: _x.Dom.ns.xhtml
+      },
+      style: {
+        width: '100%',
+        height: '100%'
+      },
+      children: [{
+        tagName: 'span',
+        selector: 'content',
+        style: {
+          width: '100%',
+          height: '100%'
+        }
+      }]
+    }]
+  }]
+});
+
+_x.Graph.registerNode('application-node', ApplicationNode);

package/lib/packages/graph-canvas/graph-model/node/common-node/index.d.ts

@@ -0,0 +1,7 @@
+import BaseNode from "../../../../graph-model/node";
+export declare const NODE_WIDTH = 180;
+export declare const NODE_HEIGHT = 43;
+export default class CommonNode extends BaseNode {
+    getInPorts(): import("@antv/x6/lib/model/port").PortManager.PortMetadata[];
+    getOutPorts(): import("@antv/x6/lib/model/port").PortManager.PortMetadata[];
+}

package/lib/packages/graph-canvas/graph-model/node/common-node/index.js

@@ -0,0 +1,133 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.NODE_WIDTH = exports.NODE_HEIGHT = void 0;
+
+var _x = require("@antv/x6");
+
+var _node = _interopRequireDefault(require("../../../../graph-model/node"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var NODE_WIDTH = 180;
+exports.NODE_WIDTH = NODE_WIDTH;
+var NODE_HEIGHT = 43;
+exports.NODE_HEIGHT = NODE_HEIGHT;
+
+var CommonNode = /*#__PURE__*/function (_BaseNode) {
+  _inherits(CommonNode, _BaseNode);
+
+  var _super = _createSuper(CommonNode);
+
+  function CommonNode() {
+    _classCallCheck(this, CommonNode);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(CommonNode, [{
+    key: "getInPorts",
+    value: function getInPorts() {
+      return this.getPortsByGroup('in');
+    }
+  }, {
+    key: "getOutPorts",
+    value: function getOutPorts() {
+      return this.getPortsByGroup('out');
+    }
+  }]);
+
+  return CommonNode;
+}(_node.default);
+
+exports.default = CommonNode;
+CommonNode.config({
+  width: NODE_WIDTH,
+  height: NODE_HEIGHT,
+  inherit: 'react-shape',
+  ports: {
+    groups: {
+      in: {
+        position: {
+          name: 'top'
+        },
+        zIndex: 2
+      },
+      out: {
+        position: {
+          name: 'bottom'
+        },
+        zIndex: 2
+      }
+    }
+  },
+  attrs: {
+    body: {
+      magnet: false,
+      fill: 'none',
+      stroke: 'none',
+      refWidth: '100%',
+      refHeight: '100%',
+      zIndex: 1
+    }
+  },
+  portMarkup: [{
+    tagName: 'foreignObject',
+    selector: 'fo',
+    attrs: {
+      width: 8,
+      height: 8,
+      x: -4,
+      y: -4,
+      zIndex: 10,
+      // magnet决定是否可交互
+      magnet: 'true'
+    },
+    children: [{
+      ns: _x.Dom.ns.xhtml,
+      tagName: 'body',
+      selector: 'foBody',
+      attrs: {
+        xmlns: _x.Dom.ns.xhtml
+      },
+      style: {
+        width: '100%',
+        height: '100%'
+      },
+      children: [{
+        tagName: 'span',
+        selector: 'content',
+        style: {
+          width: '100%',
+          height: '100%'
+        }
+      }]
+    }]
+  }]
+});
+
+_x.Graph.registerNode('base-rect-node', CommonNode);

package/lib/packages/graph-canvas/graph-model/node/common-node/node-element.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { Node } from '@antv/x6';
+import './node-element.less';
+interface Props {
+    node?: Node;
+    experimentId: string;
+}
+declare const NodeElement: React.FC<Props>;
+export default NodeElement;