strategy-panel 1.0.1 → 1.0.2

package/lib/components/canvas/config-panel/config-common.js

@@ -0,0 +1,152 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getFormatComponent = exports.getComponentConfig = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _antd = require("antd");
+
+var _withMode = require("../../../packages/hooks/withMode");
+
+var _nodeTypes = require("../../../packages/graph-canvas/node-types");
+
+var _timeTrigger = _interopRequireDefault(require("./components/time-trigger"));
+
+var _conditionConfiguration = _interopRequireDefault(require("./components/condition-configuration"));
+
+require("./style.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var Option = _antd.Select.Option;
+
+var getComponentConfig = function getComponentConfig(experimentId) {
+  var _ref;
+
+  return _ref = {}, _defineProperty(_ref, _nodeTypes.SIGN_OPERATION.LOGICAL, [{
+    name: 'operator',
+    label: '逻辑符号',
+    type: 'select',
+    required: true,
+    selectData: [{
+      label: '与',
+      value: '&'
+    }, {
+      label: '或',
+      value: '|'
+    }, {
+      label: '异',
+      value: '^'
+    }]
+  }]), _defineProperty(_ref, _nodeTypes.SCENE_DISPLAY.TIME, [{
+    name: 'timeControl',
+    type: 'auto',
+    component: /*#__PURE__*/_react.default.createElement(_timeTrigger.default, null)
+  }]), _defineProperty(_ref, _nodeTypes.SIGN_OPERATION.CONDITION, [{
+    name: 'condition',
+    label: '条件配置',
+    required: true,
+    type: 'auto',
+    component: /*#__PURE__*/_react.default.createElement(_conditionConfiguration.default, {
+      experimentId: experimentId
+    })
+  }]), _defineProperty(_ref, _nodeTypes.MOTION_OPERATION.CONTROL, [{
+    name: 'name',
+    label: '控制名称',
+    type: 'input'
+  }, {
+    name: 'runMode ',
+    label: '执行方式',
+    type: 'select',
+    selectData: [{
+      label: '优先级',
+      value: '1'
+    }, {
+      label: '停机时长优先',
+      value: '2'
+    }, {
+      label: '资产台账属性',
+      value: '3'
+    }, {
+      label: '按标签属性',
+      value: '4'
+    }]
+  }]), _ref;
+};
+
+exports.getComponentConfig = getComponentConfig;
+
+var getFormatComponent = function getFormatComponent(data, mode) {
+  var type = data.type,
+      name = data.name,
+      label = data.label,
+      disabled = data.disabled,
+      selectData = data.selectData,
+      component = data.component,
+      required = data.required;
+  var formComponent = undefined;
+  var rules = [{
+    required: required,
+    message: "\u8BF7\u8F93\u5165/\u9009\u62E9".concat(label)
+  }]; //
+
+  var withModeComponent = (0, _withMode.withMode)(component, mode); // console.log('withMode(component, mode)', withModeComponent.type)
+  // console.log('component', component.type)
+
+  switch (type) {
+    case 'input':
+      formComponent = /*#__PURE__*/_react.default.createElement("div", {
+        className: "border-bottom",
+        key: name
+      }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+        label: label,
+        name: name,
+        rules: rules,
+        className: "no-margin-bottom"
+      }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+        disabled: mode === 'view' ? true : disabled
+      })));
+      break;
+
+    case 'select':
+      formComponent = /*#__PURE__*/_react.default.createElement("div", {
+        className: "border-bottom",
+        key: name
+      }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+        label: label,
+        name: name,
+        rules: rules,
+        className: "no-margin-bottom"
+      }, /*#__PURE__*/_react.default.createElement(_antd.Select, {
+        disabled: mode === 'view' ? true : disabled
+      }, selectData === null || selectData === void 0 ? void 0 : selectData.map(function (item) {
+        return /*#__PURE__*/_react.default.createElement(Option, {
+          key: item.value,
+          value: item.value
+        }, item.label);
+      }))));
+      break;
+
+    case 'auto':
+      formComponent = /*#__PURE__*/_react.default.createElement("div", {
+        className: "border-bottom",
+        key: name
+      }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+        key: name,
+        label: label,
+        name: name,
+        rules: rules,
+        className: "no-margin-bottom"
+      }, withModeComponent));
+      break;
+  }
+
+  return formComponent;
+};
+
+exports.getFormatComponent = getFormatComponent;

package/lib/components/canvas/config-panel/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { configDataItem } from './node-form';
+import type { ModeType } from "../../../packages/graph-canvas/typings";
+import './style.less';
+interface Props {
+    experimentId: string;
+    className?: string;
+    extraConfigData?: configDataItem;
+    activeNodeId?: string;
+    mode?: ModeType;
+}
+declare const ConfigPanel: React.FC<Props>;
+export default ConfigPanel;
+export type { configDataItem };

package/lib/components/canvas/config-panel/index.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _useObservableState3 = require("../../../packages/hooks/useObservableState");
+
+var _graphCanvas = require("../../../packages/graph-canvas");
+
+var _nodeForm = _interopRequireDefault(require("./node-form"));
+
+require("./style.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var ConfigPanel = function ConfigPanel(props) {
+  var experimentId = props.experimentId,
+      className = props.className,
+      activeNodeId = props.activeNodeId,
+      extraConfigData = props.extraConfigData,
+      _props$mode = props.mode,
+      mode = _props$mode === void 0 ? 'platform' : _props$mode;
+  var expGraph = (0, _graphCanvas.useExperimentGraph)(experimentId);
+
+  var _useObservableState = (0, _useObservableState3.useObservableState)(function () {
+    return expGraph.activeNodeInstance$;
+  }),
+      _useObservableState2 = _slicedToArray(_useObservableState, 1),
+      activeNodeInstance = _useObservableState2[0];
+
+  var nodeId = activeNodeId || activeNodeInstance && activeNodeInstance.id;
+  var wrapperClassName = (0, _classnames.default)(className, 'config-panel', {
+    selected: !!nodeId
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: wrapperClassName
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "setting"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "form"
+  }, nodeId && /*#__PURE__*/_react.default.createElement(_nodeForm.default, {
+    mode: mode,
+    nodeId: nodeId,
+    experimentId: experimentId,
+    extraConfigData: extraConfigData
+  }))));
+};
+
+var _default = ConfigPanel;
+exports.default = _default;

package/lib/components/canvas/config-panel/node-form.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { ModeType } from "../../../packages/graph-canvas/typings";
+import './style.less';
+export declare type configDataItem = Record<string, {
+    name: string;
+    label?: string;
+    type: 'input' | 'select' | 'auto';
+    required?: boolean;
+    component?: React.ReactNode;
+    disabled?: boolean;
+    selectData?: {
+        label: string;
+        value: any;
+    }[];
+}[]>;
+export interface Props {
+    experimentId: string;
+    nodeId: string;
+    extraConfigData?: configDataItem;
+    mode: ModeType;
+}
+declare const NodeForm: React.FC<Props>;
+export default NodeForm;

package/lib/components/canvas/config-panel/node-form.js

@@ -0,0 +1,97 @@
+"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 _react = _interopRequireWildcard(require("react"));
+
+var _antd = require("antd");
+
+var _useObservableState3 = require("../../../packages/hooks/useObservableState");
+
+var _graphCanvas = require("../../../packages/graph-canvas");
+
+var _configCommon = require("./config-common");
+
+require("./style.less");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var NodeForm = function NodeForm(_ref) {
+  var _nodeId$split, _node$id, _node$id$split;
+
+  var nodeId = _ref.nodeId,
+      experimentId = _ref.experimentId,
+      _ref$extraConfigData = _ref.extraConfigData,
+      extraConfigData = _ref$extraConfigData === void 0 ? {} : _ref$extraConfigData,
+      mode = _ref.mode;
+
+  var _Form$useForm = _antd.Form.useForm(),
+      _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+      form = _Form$useForm2[0];
+
+  var expGraph = (0, _graphCanvas.useExperimentGraph)(experimentId);
+
+  var _useObservableState = (0, _useObservableState3.useObservableState)(function () {
+    return expGraph.activeNodeInstance$;
+  }),
+      _useObservableState2 = _slicedToArray(_useObservableState, 1),
+      node = _useObservableState2[0];
+
+  var componentConfig = (0, _configCommon.getComponentConfig)(experimentId);
+
+  var onValuesChange = function onValuesChange(value, allValues) {
+    console.log('onValuesChange', allValues);
+    expGraph.updateNodeData(nodeId, allValues);
+  };
+
+  var nodeType = nodeId === null || nodeId === void 0 ? void 0 : (_nodeId$split = nodeId.split('-')) === null || _nodeId$split === void 0 ? void 0 : _nodeId$split[0];
+  var allConfigData = Object.assign({}, componentConfig, extraConfigData);
+  var configData = allConfigData === null || allConfigData === void 0 ? void 0 : allConfigData[nodeType];
+  (0, _react.useEffect)(function () {
+    if (node !== null && node !== void 0 && node.nodeData) {
+      var nodeData = typeof node.nodeData === 'string' ? JSON.parse(node === null || node === void 0 ? void 0 : node.nodeData) : node.nodeData;
+      console.log('NodeForm useEffect', node.nodeData);
+      form.setFieldsValue(nodeData);
+    }
+  }, [node === null || node === void 0 ? void 0 : node.nodeData]);
+  return /*#__PURE__*/_react.default.createElement(_antd.Form, {
+    form: form,
+    className: "config-panel-form",
+    layout: "vertical",
+    onValuesChange: onValuesChange
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "border-bottom"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "config-title"
+  }, "\u7EC4\u4EF6\u7C7B\u578B: ", node === null || node === void 0 ? void 0 : node.name), /*#__PURE__*/_react.default.createElement("div", {
+    className: "id-line"
+  }, "id: ", node === null || node === void 0 ? void 0 : (_node$id = node.id) === null || _node$id === void 0 ? void 0 : (_node$id$split = _node$id.split('-')) === null || _node$id$split === void 0 ? void 0 : _node$id$split[1]), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    name: "realName",
+    label: "\u7EC4\u4EF6\u540D\u79F0",
+    className: "no-margin-bottom"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Input, null))), configData === null || configData === void 0 ? void 0 : configData.map(function (item) {
+    return (0, _configCommon.getFormatComponent)(item, mode);
+  }));
+};
+
+var _default = NodeForm;
+exports.default = _default;

package/lib/components/canvas/config-panel/style.less

@@ -0,0 +1,90 @@
+@e9-color: #e9e9e9;
+@f2-color: #F2F2F2;
+@black-color: #323232;
+
+.config-panel {
+  width: 350px;
+  min-width: 350px;
+  margin-top: -1px;
+  margin-right: -360px;
+  border: 1px solid @e9-color;
+  transition: margin-right 0.3s ease-out;
+  &.selected {
+    margin-right: 0;
+  }
+}
+
+.setting {
+  height: 100%;
+  .form {
+    flex-grow: 1;
+    height: 100%;
+    padding: 10px 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    background: #fff;
+  }
+}
+
+.no-margin-bottom {
+  margin-bottom: 0 !important;
+}
+
+.config-panel-form{
+  & > .border-bottom:last-child{
+    margin-bottom: 50px;
+  }
+}
+
+.border-bottom {
+  margin-bottom: 6px;
+  padding: 0 10px 12px;
+  border-bottom: 1px solid @e9-color;
+  &.inner-bottom-box{
+    margin: 0 -10px -13px;
+  }
+  &.inner-bottom-box:not(:first-child) {
+    margin-top: 18px;
+  }
+
+  .ant-form-item-with-help .ant-form-item-explain {
+    display: none;
+  }
+  .ant-input,
+  .ant-input-number,
+  .ant-input-number-status-error:not(.ant-input-number-disabled):not(.ant-input-number-borderless).ant-input-number,
+  .ant-input-number-status-error:not(.ant-input-number-disabled):not(.ant-input-number-borderless).ant-input-number:hover{
+    border-radius: 4px;
+    color: @black-color !important;
+    background: @f2-color !important;
+  }
+  .ant-picker,
+  .ant-picker:not([disabled]):hover,
+  .ant-picker-status-error.ant-picker, .ant-picker-status-error.ant-picker:not([disabled]):hover{
+    border-radius: 4px;
+    color: @black-color !important;
+    background: @f2-color !important;
+  }
+  .ant-form-item-has-error .ant-input-number:not([disabled]):hover,
+  .ant-form-item-has-error .ant-picker:not([disabled]):hover,
+  .ant-form-item-has-error .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input) .ant-select-selector{
+    border-radius: 4px;
+    color: @black-color !important;
+    background: @f2-color !important;
+  }
+  .ant-select:not(.ant-select-customize-input) .ant-select-selector{
+    border-radius: 4px;
+    color: @black-color !important;
+    background: @f2-color !important;
+  }
+
+  .id-line{
+    margin-top: 5px;
+    text-align: right;
+    user-select: all;
+  }
+}
+
+.section-detail-select{
+  display: flex;
+}

package/lib/components/canvas/dag-canvas/canvas-content.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import '@antv/x6-react-shape';
+import './canvas-content.less';
+interface Props {
+    experimentId: string;
+    className?: string;
+    viewData?: any;
+    dragEnable: boolean;
+}
+export declare const CanvasContent: React.FC<Props>;
+export {};

package/lib/components/canvas/dag-canvas/canvas-content.js

@@ -0,0 +1,130 @@
+"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.CanvasContent = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _antd = require("antd");
+
+require("@antv/x6-react-shape");
+
+var _reactDnd = require("react-dnd");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _graph = require("../../../packages/graph-common/graph");
+
+var _graphCanvas = require("../../../packages/graph-canvas");
+
+require("./canvas-content.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var CanvasContent = function CanvasContent(props) {
+  var experimentId = props.experimentId,
+      className = props.className,
+      viewData = props.viewData,
+      dragEnable = props.dragEnable;
+  var viewDataJSON = JSON.stringify(viewData);
+  console.log('dragEnable', dragEnable);
+  var containerRef = (0, _react.useRef)(null);
+  var canvasRef = (0, _react.useRef)(null);
+  var expGraph = (0, _graphCanvas.useExperimentGraph)(experimentId); // 渲染画布
+
+  (0, _react.useEffect)(function () {
+    window.requestIdleCallback(function () {
+      expGraph.renderGraph(containerRef.current, canvasRef.current);
+
+      if (viewData) {
+        var _expGraph$graph, _expGraph$graph2, _expGraph$graph2$zoom;
+
+        // console.log('=====================>>>>>>>>>>>>>>>>', viewData)
+        expGraph === null || expGraph === void 0 ? void 0 : (_expGraph$graph = expGraph.graph) === null || _expGraph$graph === void 0 ? void 0 : _expGraph$graph.clearCells();
+        expGraph.initPreviewData((viewData === null || viewData === void 0 ? void 0 : viewData.node) || {}).then();
+        expGraph === null || expGraph === void 0 ? void 0 : (_expGraph$graph2 = expGraph.graph) === null || _expGraph$graph2 === void 0 ? void 0 : (_expGraph$graph2$zoom = _expGraph$graph2.zoomToFit) === null || _expGraph$graph2$zoom === void 0 ? void 0 : _expGraph$graph2$zoom.call(_expGraph$graph2, {
+          padding: 25
+        });
+      }
+    });
+  }, [expGraph, viewDataJSON]);
+
+  var checkNodeNumber = function checkNodeNumber(_ref) {
+    var _expGraph$graph3;
+
+    var id = _ref.id,
+        number = _ref.number;
+    if (!number) return true;
+    var nodes = expGraph === null || expGraph === void 0 ? void 0 : (_expGraph$graph3 = expGraph.graph) === null || _expGraph$graph3 === void 0 ? void 0 : _expGraph$graph3.getNodes();
+    console.log('checkNodeNumber nodes', nodes);
+    var nodeGroup = (nodes === null || nodes === void 0 ? void 0 : nodes.filter(function (item) {
+      var _item$id;
+
+      return (item === null || item === void 0 ? void 0 : (_item$id = item.id) === null || _item$id === void 0 ? void 0 : _item$id.indexOf(id)) > -1;
+    })) || [];
+    return (nodeGroup === null || nodeGroup === void 0 ? void 0 : nodeGroup.length) < number;
+  }; // 处理组件拖拽落下事件
+
+
+  var _useDrop = (0, _reactDnd.useDrop)({
+    accept: [_graph.DRAGGABLE_ALGO_COMPONENT, _graph.DRAGGABLE_MODEL],
+    drop: function drop(item, monitor) {
+      var currentMouseOffset = monitor.getClientOffset();
+      var sourceMouseOffset = monitor.getInitialClientOffset();
+      var sourceElementOffset = monitor.getInitialSourceClientOffset();
+      var diffX = sourceMouseOffset.x - sourceElementOffset.x;
+      var diffY = sourceMouseOffset.y - sourceElementOffset.y;
+      var x = currentMouseOffset.x - diffX;
+      var y = currentMouseOffset.y - diffY;
+      var dropAvailable = checkNodeNumber(item.component);
+
+      if (expGraph.isGraphReady()) {
+        if (dropAvailable) {
+          expGraph.requestAddNode({
+            clientX: x,
+            clientY: y,
+            nodeMeta: item.component
+          });
+        } else {
+          _antd.message.error("".concat(item.component.name, "\u7EC4\u4EF6\u53EA\u80FD\u5B58\u5728\u4E00\u4E2A"));
+        }
+      } else {
+        _antd.message.info('数据建立中，请稍后再尝试添加节点');
+      }
+    }
+  }),
+      _useDrop2 = _slicedToArray(_useDrop, 2),
+      dropRef = _useDrop2[1];
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: function ref(elem) {
+      containerRef.current = elem;
+      dropRef(elem);
+    },
+    className: (0, _classnames.default)(className, 'canvas-content-wrapper')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: canvasRef
+  }));
+};
+
+exports.CanvasContent = CanvasContent;

package/lib/components/canvas/dag-canvas/canvas-content.less

@@ -0,0 +1,5 @@
+.canvas-content-wrapper {
+  overflow: hidden;
+  background-color: #f7f7fa;
+  position: relative;
+}

package/lib/components/canvas/dag-canvas/index.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import './index.less';
+interface Props {
+    /**
+     * @description       UUID
+     * @description.zh-CN 策略唯一识别id
+     * @default           1
+     */
+    experimentId: string;
+    className?: string;
+    /**
+     * @description       viewData
+     * @description.zh-CN 策略初始化数据
+     */
+    viewData?: any;
+    /**
+     * @description       viewData
+     * @description.zh-CN 拖拽可创建
+     */
+    dragEnable?: boolean;
+}
+declare const DAGCanvas: React.FC<Props>;
+export default DAGCanvas;