strategy-panel 1.0.1 → 1.0.2

package/es/{pages → components/canvas}/dag-canvas/canvas-content.js

@@ -1,6 +1,3 @@
-import "antd/es/message/style";
-import _message from "antd/es/message";
-
 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."); }
@@ -14,16 +11,20 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import React, { useEffect, useRef } from 'react';
+import { message } from 'antd';
 import '@antv/x6-react-shape';
 import { useDrop } from 'react-dnd';
 import classNames from 'classnames';
-import { DRAGGABLE_ALGO_COMPONENT, DRAGGABLE_MODEL } from "../../common/constants/graph";
-import { useExperimentGraph } from "../rx-models/experiment-graph";
+import { DRAGGABLE_ALGO_COMPONENT, DRAGGABLE_MODEL } from "../../../packages/graph-common/graph";
+import { useExperimentGraph } from "../../../packages/graph-canvas";
 import "./canvas-content.less";
 export var CanvasContent = function CanvasContent(props) {
   var experimentId = props.experimentId,
       className = props.className,
-      viewData = props.viewData;
+      viewData = props.viewData,
+      dragEnable = props.dragEnable;
+  var viewDataJSON = JSON.stringify(viewData);
+  console.log('dragEnable', dragEnable);
   var containerRef = useRef(null);
   var canvasRef = useRef(null);
   var expGraph = useExperimentGraph(experimentId); // 渲染画布
@@ -31,17 +32,27 @@ export var CanvasContent = function CanvasContent(props) {
   useEffect(function () {
     window.requestIdleCallback(function () {
       expGraph.renderGraph(containerRef.current, canvasRef.current);
-      if (viewData) expGraph.initPreviewData(viewData).then();
+
+      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]);
+  }, [expGraph, viewDataJSON]);
 
   var checkNodeNumber = function checkNodeNumber(_ref) {
-    var _expGraph$graph;
+    var _expGraph$graph3;
 
     var id = _ref.id,
         number = _ref.number;
     if (!number) return true;
-    var nodes = expGraph === null || expGraph === void 0 ? void 0 : (_expGraph$graph = expGraph.graph) === null || _expGraph$graph === void 0 ? void 0 : _expGraph$graph.getNodes();
+    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;
@@ -72,10 +83,10 @@ export var CanvasContent = function CanvasContent(props) {
             nodeMeta: item.component
           });
         } else {
-          _message.error("".concat(item.component.name, "\u7EC4\u4EF6\u53EA\u80FD\u5B58\u5728\u4E00\u4E2A"));
+          message.error("".concat(item.component.name, "\u7EC4\u4EF6\u53EA\u80FD\u5B58\u5728\u4E00\u4E2A"));
         }
       } else {
-        _message.info('数据建立中，请稍后再尝试添加节点');
+        message.info('数据建立中，请稍后再尝试添加节点');
       }
     }
   }),

package/es/{pages → components/canvas}/dag-canvas/index.d.ts

@@ -1,18 +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;
-}
-declare const DAGCanvas: React.FC<Props>;
-export default DAGCanvas;
+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;

package/es/{pages → components/canvas}/dag-canvas/index.js

@@ -1,13 +1,15 @@
 import React, { useEffect } from 'react';
 import classNames from 'classnames';
-import { useExperimentGraph, useUnmountExperimentGraph } from "../rx-models/experiment-graph";
+import { useExperimentGraph, useUnmountExperimentGraph } from "../../../packages/graph-canvas";
 import { CanvasContent } from "./canvas-content";
 import "./index.less";
 
 var DAGCanvas = function DAGCanvas(props) {
   var experimentId = props.experimentId,
       className = props.className,
-      viewData = props.viewData;
+      viewData = props.viewData,
+      _props$dragEnable = props.dragEnable,
+      dragEnable = _props$dragEnable === void 0 ? true : _props$dragEnable;
   var expGraph = useExperimentGraph(experimentId); // 处理画布卸载
 
   useUnmountExperimentGraph(experimentId); // 自定义算法组件的渲染控制
@@ -21,6 +23,7 @@ var DAGCanvas = function DAGCanvas(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: classNames('dag-container', className)
   }, /*#__PURE__*/React.createElement(CanvasContent, {
+    dragEnable: dragEnable,
     viewData: viewData,
     experimentId: experimentId,
     className: "canvas-content"

package/es/{pages → components/canvas}/dag-canvas/preview.d.ts

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

package/es/components/canvas/dag-canvas/preview.js

@@ -0,0 +1,53 @@
+import React, { useEffect, useRef } from 'react';
+import '@antv/x6-react-shape';
+import classNames from 'classnames';
+import { useExperimentGraph, useUnmountExperimentGraph } from "../../../packages/graph-canvas";
+import "./canvas-content.less";
+
+var CanvasContent = function CanvasContent(props) {
+  var experimentId = props.experimentId,
+      className = props.className,
+      viewData = props.viewData;
+  var viewDataJSON = JSON.stringify(viewData); // 处理画布卸载
+
+  useUnmountExperimentGraph(experimentId);
+  var containerRef = useRef(null);
+  var canvasRef = useRef(null);
+  var expGraph = useExperimentGraph(experimentId); // 渲染画布
+
+  useEffect(function () {
+    window.renderForm = expGraph.setActiveAlgoData;
+    window.requestIdleCallback(function () {
+      var _expGraph$graph, _expGraph$graph2, _expGraph$graph3;
+
+      expGraph.renderGraph(containerRef.current, canvasRef.current, {
+        interacting: false
+      });
+      expGraph === null || expGraph === void 0 ? void 0 : (_expGraph$graph = expGraph.graph) === null || _expGraph$graph === void 0 ? void 0 : _expGraph$graph.hideGrid();
+      expGraph === null || expGraph === void 0 ? void 0 : (_expGraph$graph2 = expGraph.graph) === null || _expGraph$graph2 === void 0 ? void 0 : _expGraph$graph2.disableKeyboard();
+      expGraph.onClearSelectNodes();
+      expGraph === null || expGraph === void 0 ? void 0 : (_expGraph$graph3 = expGraph.graph) === null || _expGraph$graph3 === void 0 ? void 0 : _expGraph$graph3.clearCells();
+
+      if (viewData) {
+        var _expGraph$graph4, _expGraph$graph4$zoom, _expGraph$graph5;
+
+        expGraph.initPreviewData((viewData === null || viewData === void 0 ? void 0 : viewData.node) || {}).then();
+        expGraph === null || expGraph === void 0 ? void 0 : (_expGraph$graph4 = expGraph.graph) === null || _expGraph$graph4 === void 0 ? void 0 : (_expGraph$graph4$zoom = _expGraph$graph4.zoomToFit) === null || _expGraph$graph4$zoom === void 0 ? void 0 : _expGraph$graph4$zoom.call(_expGraph$graph4, {
+          padding: 25
+        });
+        expGraph === null || expGraph === void 0 ? void 0 : (_expGraph$graph5 = expGraph.graph) === null || _expGraph$graph5 === void 0 ? void 0 : _expGraph$graph5.lockScroller();
+      }
+    });
+    return function () {
+      delete window.renderForm;
+    };
+  }, [expGraph, viewDataJSON]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    className: classNames(className, 'canvas-content')
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: canvasRef
+  }));
+};
+
+export default CanvasContent;

package/es/{pages → components/canvas}/index.d.ts

@@ -1,42 +1,48 @@
-import React from 'react';
-import type { HeaderProps } from './strategy-header';
-import type { paneDataItem } from './component-tree-panel/category-tree';
-import type { configDataItem } from './config-panel';
-import '../style/default.less';
-import './index.less';
-interface Props extends Omit<HeaderProps, 'experimentId'> {
-    /**
-     * @description       top menu visible state
-     * @description.zh-CN 顶部菜单可见状态
-     * @default           true
-     */
-    headerVisible?: boolean;
-    /**
-     * @description       id
-     * @description.zh-CN 唯一识别id
-     */
-    experimentId?: string | number;
-    /**
-     * @description       top menu visible state
-     * @description.zh-CN 参数面板数据
-     */
-    panelData?: paneDataItem[];
-    /**
-     * @description       top menu visible state
-     * @description.zh-CN 功能面板参数配置详情
-     */
-    configData?: configDataItem;
-    /**
-     * @description       top menu visible state
-     * @description.zh-CN 组件展示模式： 搭建平台、展示
-     * @default           platform
-     */
-    mode?: Types.ModeType;
-    /**
-     * @description       viewData
-     * @description.zh-CN 预览模式数据源
-     */
-    viewData?: any;
-}
-declare const StrategyCanvas: React.FC<Props>;
-export default StrategyCanvas;
+import React from 'react';
+import type { ModeType } from "../../packages/graph-canvas/typings";
+import type { HeaderProps } from './strategy-header';
+import type { paneDataItem } from './component-tree-panel/category-tree';
+import type { configDataItem } from './config-panel';
+import '../../style/default.less';
+import './index.less';
+interface Props extends Omit<HeaderProps, 'experimentId'> {
+    /**
+     * @description       top menu visible state
+     * @description.zh-CN 顶部菜单可见状态
+     * @default           true
+     */
+    headerVisible?: boolean;
+    /**
+     * @description       id
+     * @description.zh-CN 唯一识别id
+     */
+    experimentId?: string | number;
+    /**
+     * @description       top menu visible state
+     * @description.zh-CN 参数面板数据
+     */
+    panelData?: paneDataItem[];
+    /**
+     * @description       top menu visible state
+     * @description.zh-CN 功能面板参数配置详情
+     */
+    configData?: configDataItem;
+    /**
+     * @description       top menu visible state
+     * @description.zh-CN 组件展示模式： 搭建平台、展示
+     * @default           platform
+     */
+    mode?: ModeType;
+    /**
+     * @description       viewData
+     * @description.zh-CN 预览模式数据源
+     */
+    viewData?: any;
+    /**
+     * @description       viewData
+     * @description.zh-CN 拖拽可创建
+     */
+    dragEnable?: boolean;
+}
+declare const StrategyCanvas: React.FC<Props>;
+export default StrategyCanvas;

package/es/{pages → components/canvas}/index.js

@@ -1,10 +1,6 @@
-var _excluded = ["experimentId", "headerVisible", "panelData", "configData", "mode", "viewData"];
+var _excluded = ["experimentId", "headerVisible", "panelData", "configData", "mode", "viewData", "dragEnable"];
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-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; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
@@ -18,10 +14,12 @@ import StrategyHeader from "./strategy-header";
 import ConfigPanel from "./config-panel";
 import DAGCanvas from "./dag-canvas";
 import CanvasPreview from "./dag-canvas/preview";
-import "../style/default.less";
+import "../../style/default.less";
 import "./index.less";
 
 var StrategyCanvas = function StrategyCanvas(props) {
+  var _window, _window2;
+
   var _props$experimentId = props.experimentId,
       experimentId = _props$experimentId === void 0 ? '1' : _props$experimentId,
       _props$headerVisible = props.headerVisible,
@@ -30,9 +28,20 @@ var StrategyCanvas = function StrategyCanvas(props) {
       configData = props.configData,
       _props$mode = props.mode,
       mode = _props$mode === void 0 ? 'platform' : _props$mode,
-      viewData = props.viewData,
+      _props$viewData = props.viewData,
+      viewData = _props$viewData === void 0 ? {} : _props$viewData,
+      _props$dragEnable = props.dragEnable,
+      dragEnable = _props$dragEnable === void 0 ? true : _props$dragEnable,
       rest = _objectWithoutProperties(props, _excluded);
 
+  console.log('userAgent', (_window = window) === null || _window === void 0 ? void 0 : _window.openDatebase);
+
+  if ((_window2 = window) !== null && _window2 !== void 0 && _window2.openDatebase) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "safari-disabled"
+    }, "safari\u6D4F\u89C8\u5668\u6682\u4E0D\u652F\u6301\u7B56\u7565\u529F\u80FD\uFF0C\u8BF7\u4F7F\u7528\u8C37\u6B4C\u6D4F\u89C8\u5668!");
+  }
+
   return mode === 'view' ? /*#__PURE__*/React.createElement("div", {
     className: "strategy-panel-layout"
   }, /*#__PURE__*/React.createElement("div", {
@@ -51,7 +60,7 @@ var StrategyCanvas = function StrategyCanvas(props) {
     extraConfigData: configData
   })))) : /*#__PURE__*/React.createElement("div", {
     className: "strategy-panel-layout"
-  }, headerVisible && /*#__PURE__*/React.createElement(StrategyHeader, _objectSpread({
+  }, headerVisible && /*#__PURE__*/React.createElement(StrategyHeader, _extends({
     experimentId: "".concat(experimentId)
   }, rest)), /*#__PURE__*/React.createElement("div", {
     className: "strategy-panel-content"
@@ -67,7 +76,8 @@ var StrategyCanvas = function StrategyCanvas(props) {
   }, /*#__PURE__*/React.createElement(DAGCanvas, {
     viewData: viewData,
     experimentId: "".concat(experimentId),
-    className: "panel-dag-canvas"
+    className: "panel-dag-canvas",
+    dragEnable: dragEnable
   })), /*#__PURE__*/React.createElement(ConfigPanel, {
     mode: mode,
     experimentId: "".concat(experimentId),

package/es/{pages → components/canvas}/index.less

@@ -1,4 +1,4 @@
-@import "../style/default";
+@import "../../style/default";
 @black-color: #000;
 
 .flex {
@@ -18,7 +18,7 @@
     display: flex;
     align-items: stretch;
     justify-content: space-between;
-    height: 100%;
+    height: calc(100% - 45px);
     margin-top: 1px;
     font-size: 12px;
   }

package/es/{pages → components/canvas}/strategy-header/index.d.ts

@@ -1,56 +1,48 @@
-import React from 'react';
-import '@/style/position.less';
-import './style.less';
-export interface HeaderProps {
-    /**
-     * @description       id
-     * @description.zh-CN 唯一识别id
-     * @default           1
-     */
-    experimentId: string;
-    /**
-     * @description       strategy name
-     * @description.zh-CN 策略名称
-     */
-    name?: string;
-    /**
-     * @description       available
-     * @description.zh-CN 策略是否启用
-     * @default           false
-     */
-    isActive?: boolean;
-    /**
-     * @description       Switch available state
-     * @description.zh-CN 切换测试启用状态函数
-     */
-    onActiveSwitch?: (isActive: boolean) => void;
-    /**
-     * 可以这样写属性描述
-     * @description       Trigger after cancel edit
-     * @description.zh-CN 取消编辑后后回调事件
-     */
-    onNameChange?: (name?: string) => void;
-    /**
-     * 可以这样写属性描述
-     * @description       Trigger after cancel edit
-     * @description.zh-CN 取消编辑后后回调事件
-     */
-    onCancel?: () => void;
-    /**
-     * @description       Trigger after submitting
-     * @description.zh-CN 编辑完成后后回调事件
-     */
-    onSave?: (type: 'application' | 'data', expGraph?: any) => void;
-    /**
-     * 可以这样写属性描述
-     * @description       Trigger after cancel edit
-     * @description.zh-CN 取消编辑后后回调事件
-     */
-    extraHeaderData?: {
-        name: string;
-        imgUrl: string;
-        onClick?: () => void;
-    }[];
-}
-declare const Index: React.FC<HeaderProps>;
-export default Index;
+import React from 'react';
+import "../../../style/position.less";
+import './style.less';
+export interface HeaderProps {
+    /**
+     * @description       id
+     * @description.zh-CN 唯一识别id
+     * @default           1
+     */
+    experimentId: string;
+    /**
+     * @description       available
+     * @description.zh-CN 策略是否启用
+     * @default           false
+     */
+    isActive?: boolean;
+    /**
+     * @description       Switch available state
+     * @description.zh-CN 切换测试启用状态函数
+     */
+    onActiveSwitch?: (isActive: boolean) => void;
+    /**
+     * @description       Trigger after cancel edit
+     * @description.zh-CN 标题
+     */
+    title?: React.ReactNode;
+    /**
+     * @description       Trigger after cancel edit
+     * @description.zh-CN 取消编辑后后回调事件
+     */
+    onCancel?: () => void;
+    /**
+     * @description       Trigger after submitting
+     * @description.zh-CN 编辑完成后后回调事件
+     */
+    onSave?: (type: 'application' | 'data', expGraph?: any) => void;
+    /**
+     * @description       Trigger after cancel edit
+     * @description.zh-CN 取消编辑后后回调事件
+     */
+    extraHeaderData?: {
+        name: string;
+        imgUrl: string;
+        onClick?: () => void;
+    }[];
+}
+declare const Index: React.FC<HeaderProps>;
+export default Index;