strategy-panel 1.0.0

package/es/common/graph-utils/graph.js

@@ -0,0 +1,98 @@
+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; }
+
+import random from 'lodash/random';
+import { SIGN_OPERATION } from "../graph-common/node-types";
+export var createNodePorts = function createNodePorts(id, timestamp) {
+  // 条件判断
+  if (id === SIGN_OPERATION.CONDITION) {
+    return {
+      inPorts: [{
+        id: id ? "".concat(id, "-IN-").concat(timestamp) : "in-".concat(timestamp),
+        sequence: 1
+      }],
+      outPorts: [{
+        id: id ? "".concat(id, "-OUT-").concat(timestamp) : "out-".concat(timestamp),
+        sequence: 1
+      }, {
+        id: id ? "".concat(id, "-OUT-LEFT-").concat(timestamp) : "out-".concat(timestamp),
+        sequence: 2,
+        group: 'outLeft'
+      }, {
+        id: id ? "".concat(id, "-OUT-RIGHT-").concat(timestamp) : "out-".concat(timestamp),
+        sequence: 3,
+        group: 'outRight'
+      }]
+    };
+  } // 逻辑判断
+
+
+  if (id === SIGN_OPERATION.LOGICAL) {
+    return {
+      inPorts: [{
+        id: id ? "".concat(id, "-IN-").concat(timestamp) : "in-".concat(timestamp),
+        sequence: 1
+      }],
+      outPorts: [{
+        id: id ? "".concat(id, "-OUT-").concat(timestamp) : "out-".concat(timestamp),
+        sequence: 1
+      }, {
+        id: id ? "".concat(id, "-OUT-LEFT-").concat(timestamp) : "out-".concat(timestamp),
+        sequence: 2,
+        group: 'outLeft'
+      }, {
+        id: id ? "".concat(id, "-OUT-RIGHT-").concat(timestamp) : "out-".concat(timestamp),
+        sequence: 3,
+        group: 'outRight'
+      }]
+    };
+  } // 普通节点
+
+
+  return {
+    inPorts: [{
+      id: id ? "".concat(id, "-IN-").concat(timestamp) : "in-".concat(timestamp),
+      sequence: 1
+    }],
+    outPorts: [{
+      id: id ? "".concat(id, "-OUT-").concat(timestamp) : "out-".concat(timestamp),
+      sequence: 1
+    }]
+  };
+};
+export var createNode = function createNode(_ref) {
+  var id = _ref.id,
+      name = _ref.name,
+      imgUrl = _ref.imgUrl,
+      x = _ref.x,
+      y = _ref.y;
+  var timestamp = "".concat(Date.now());
+  var portsParams = createNodePorts(id, timestamp);
+  return _objectSpread({
+    id: id ? "".concat(id, "-").concat(timestamp) : "".concat(timestamp),
+    name: name,
+    imgUrl: imgUrl,
+    positionX: x,
+    positionY: y
+  }, portsParams);
+};
+export var copyNode = function copyNode(_ref2) {
+  var id = _ref2.id,
+      name = _ref2.name,
+      imgUrl = _ref2.imgUrl,
+      x = _ref2.x,
+      y = _ref2.y;
+  return createNode({
+    id: id,
+    name: name,
+    imgUrl: imgUrl,
+    x: x + 200 + random(20, false),
+    y: y + 15 + random(20, false)
+  });
+};
+export var addNode = function addNode(params) {
+  return createNode(params);
+};

package/es/component/cut.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './cut.less';
+interface Props {
+    left: number;
+    right: number;
+    max: number;
+    children: string;
+}
+export declare const Cut: React.FC<Props>;
+export {};

package/es/component/cut.js

@@ -0,0 +1,34 @@
+import React, { useCallback } from 'react';
+import "./cut.less";
+export var Cut = function Cut(props) {
+  var left = props.left,
+      _props$right = props.right,
+      right = _props$right === void 0 ? 0 : _props$right,
+      max = props.max,
+      children = props.children;
+  var getText = useCallback(function () {
+    var len = children.length;
+    var ellipsis = '...';
+    var leftStr = '';
+    var rightStr = '';
+
+    if (len > max) {
+      if (left && len) {
+        leftStr = children.substr(0, left);
+      } else {
+        leftStr = children.substr(0, max);
+      }
+
+      if (right) {
+        rightStr = children.substr(-right, right);
+      }
+
+      return "".concat(leftStr).concat(ellipsis).concat(rightStr);
+    }
+
+    return children;
+  }, [left, right, max, children]);
+  return /*#__PURE__*/React.createElement("span", {
+    className: "no-wrap"
+  }, getText());
+};

package/es/component/cut.less

@@ -0,0 +1,6 @@
+.no-wrap {
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+  vertical-align: middle;
+}

package/es/component/item-name.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface Props {
+    data: any;
+}
+export declare const ItemName: React.FC<Props>;
+export {};

package/es/component/item-name.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { unescape } from 'lodash-es';
+import { Cut } from "./cut";
+import { Keyword } from "./keyword";
+export var ItemName = function ItemName(props) {
+  var data = props.data;
+  var keyword = data.keyword,
+      _data$cutParas = data.cutParas,
+      cutParas = _data$cutParas === void 0 ? {} : _data$cutParas;
+  var name = unescape(data.name);
+  var max = cutParas.max,
+      side = cutParas.side;
+
+  if (keyword) {
+    return /*#__PURE__*/React.createElement(Keyword, {
+      raw: name,
+      keyword: keyword
+    });
+  }
+
+  if (max) {
+    return /*#__PURE__*/React.createElement(Cut, {
+      max: max,
+      left: side,
+      right: side
+    }, name);
+  }
+
+  return /*#__PURE__*/React.createElement("span", null, name);
+};

package/es/component/keyword.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './keyword.less';
+interface Props {
+    raw: string;
+    keyword: string;
+    className?: string;
+}
+export declare const Keyword: React.FC<Props>;
+export {};

package/es/component/keyword.js

@@ -0,0 +1,26 @@
+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; }
+
+import React from 'react';
+import classnames from 'classnames';
+import "./keyword.less";
+export var Keyword = function Keyword(props) {
+  var raw = props.raw,
+      keyword = props.keyword,
+      className = props.className;
+
+  if (keyword) {
+    var regex = new RegExp(keyword, 'ig');
+    var arr = raw.split(regex);
+    return /*#__PURE__*/React.createElement("span", {
+      className: classnames(_defineProperty({
+        'keyword-wrapper': true
+      }, className, !!className))
+    }, arr.map(function (section, index) {
+      return index !== arr.length - 1 ? /*#__PURE__*/React.createElement("span", {
+        key: section + index
+      }, section, /*#__PURE__*/React.createElement("strong", null, keyword)) : section;
+    }));
+  }
+
+  return null;
+};

package/es/component/keyword.less

@@ -0,0 +1,11 @@
+.keyword-wrapper {
+  strong {
+    color: #dd4b39;
+    font-weight: normal;
+    font-style: normal;
+  }
+
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/es/component/rx-component/rx-input.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Observable } from 'rxjs';
+import { InputProps } from 'antd/es/input';
+interface RxInputProps extends Omit<InputProps, 'value'> {
+    value: Observable<string>;
+}
+export declare const RxInput: React.FC<RxInputProps>;
+export {};

package/es/component/rx-component/rx-input.js

@@ -0,0 +1,47 @@
+import "antd/es/input/style";
+import _Input from "antd/es/input";
+import "antd/es/config-provider/style";
+import _ConfigProvider from "antd/es/config-provider";
+var _excluded = ["value"];
+
+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 _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; }
+
+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; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React from 'react';
+import { useObservableState } from "../../hooks/useObservableState";
+import { ANT_PREFIX } from "../../common/constants/global";
+export var RxInput = function RxInput(props) {
+  var value = props.value,
+      otherProps = _objectWithoutProperties(props, _excluded);
+
+  var _useObservableState = useObservableState(function () {
+    return value;
+  }),
+      _useObservableState2 = _slicedToArray(_useObservableState, 1),
+      realValue = _useObservableState2[0];
+
+  return /*#__PURE__*/React.createElement(_ConfigProvider, {
+    prefixCls: ANT_PREFIX
+  }, /*#__PURE__*/React.createElement(_Input, _objectSpread({
+    value: realValue
+  }, otherProps)));
+};

package/es/hooks/useObservableState.d.ts

@@ -0,0 +1,3 @@
+import type React from 'react';
+import type { Observable } from 'rxjs';
+export declare const useObservableState: <T extends unknown>(source$: Observable<T> | (() => Observable<T>), initialState?: T | undefined) => [T, React.Dispatch<React.SetStateAction<T>>];

package/es/hooks/useObservableState.js

@@ -0,0 +1,44 @@
+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; }
+
+import { useEffect, useMemo, useState } from 'react';
+import { BehaviorSubject } from 'rxjs';
+export var useObservableState = function useObservableState(source$, initialState) {
+  var source = useMemo(function () {
+    if (typeof source$ === 'function') {
+      return source$();
+    }
+
+    return source$;
+  }, [source$]);
+
+  var _useState = useState(function () {
+    if (source instanceof BehaviorSubject) {
+      return source.getValue();
+    }
+
+    return initialState;
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  useEffect(function () {
+    var sub = source.subscribe(function (v) {
+      setState(v);
+    });
+    return function () {
+      sub.unsubscribe();
+    };
+  }, [source]);
+  return [state, setState];
+};

package/es/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="@/typings" />
+export { default as StrategyCanvas } from './pages/index';
+export { default as StrategyHeader } from './pages/strategy-header';
+export { default as ComponentTreePanel } from './pages/component-tree-panel';
+export { default as DAGCanvas } from './pages/dag-canvas';
+export { default as ConfigPanel } from './pages/config-panel';
+export { useExperimentGraph } from './pages/rx-models/experiment-graph';
+export { useObservableState } from './hooks/useObservableState';

package/es/index.js

@@ -0,0 +1,9 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="./typings.d.ts" />
+export { default as StrategyCanvas } from "./pages/index";
+export { default as StrategyHeader } from "./pages/strategy-header";
+export { default as ComponentTreePanel } from "./pages/component-tree-panel";
+export { default as DAGCanvas } from "./pages/dag-canvas";
+export { default as ConfigPanel } from "./pages/config-panel";
+export { useExperimentGraph } from "./pages/rx-models/experiment-graph";
+export { useObservableState } from "./hooks/useObservableState";

package/es/pages/component-tree-panel/category-tree/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import './index.less';
+export interface paneDataItem {
+    id: string;
+    name: string;
+    isDir?: boolean;
+    children?: paneDataItem[];
+    imgUrl?: string;
+    number?: number;
+}
+interface Props {
+    sortNum?: number;
+    panelData?: paneDataItem[];
+}
+declare const CategoryTree: React.FC<Props>;
+export default CategoryTree;

package/es/pages/component-tree-panel/category-tree/index.js

@@ -0,0 +1,100 @@
+import "antd/es/col/style";
+import _Col from "antd/es/col";
+import "antd/es/row/style";
+import _Row from "antd/es/row";
+import "antd/es/collapse/style";
+import _Collapse from "antd/es/collapse";
+
+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; }
+
+import React from 'react';
+import { componentsData } from "../../../common/graph-common/category-type";
+import { NodeTitle } from "./node-title";
+import "./index.less";
+var Panel = _Collapse.Panel;
+
+var getComponentsData = function getComponentsData(data) {
+  return data === null || data === void 0 ? void 0 : data.reduce(function (pre, next) {
+    var existentIndex = pre.findIndex(function (child) {
+      return child.id === next.id;
+    });
+
+    if (existentIndex > -1) {
+      var _pre$existentIndex;
+
+      var existentChildren = pre === null || pre === void 0 ? void 0 : (_pre$existentIndex = pre[existentIndex]) === null || _pre$existentIndex === void 0 ? void 0 : _pre$existentIndex.children;
+
+      if (existentChildren && next.children) {
+        var _next$children;
+
+        pre[existentIndex] = _objectSpread(_objectSpread({}, pre[existentIndex]), next);
+        (_next$children = next.children) === null || _next$children === void 0 ? void 0 : _next$children.forEach(function (item) {
+          var childIndex = existentChildren === null || existentChildren === void 0 ? void 0 : existentChildren.findIndex(function (child) {
+            return child.id === item.id;
+          });
+
+          if (childIndex > -1) {
+            existentChildren[childIndex] = item;
+          } else {
+            existentChildren.push(item);
+          }
+        });
+        pre[existentIndex].children = existentChildren;
+      } else {
+        pre[existentIndex] = _objectSpread(_objectSpread({}, pre[existentIndex]), next);
+      }
+    } else {
+      pre.push(next);
+    }
+
+    return pre;
+  }, componentsData);
+};
+
+var CategoryTree = function CategoryTree(props) {
+  var _props$sortNum = props.sortNum,
+      sortNum = _props$sortNum === void 0 ? 3 : _props$sortNum,
+      _props$panelData = props.panelData,
+      panelData = _props$panelData === void 0 ? [] : _props$panelData;
+
+  var isRowFirst = function isRowFirst(index) {
+    return (index + 1) % sortNum === 1;
+  };
+
+  var sortIndex = function sortIndex(index) {
+    return index % sortNum;
+  };
+
+  var currentPanelData = getComponentsData(panelData);
+  var defaultActiveKey = currentPanelData === null || currentPanelData === void 0 ? void 0 : currentPanelData.map(function (item) {
+    return item === null || item === void 0 ? void 0 : item.id;
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "category-tree-list"
+  }, /*#__PURE__*/React.createElement(_Collapse, {
+    className: "category-tree-collapse",
+    defaultActiveKey: defaultActiveKey
+  }, currentPanelData === null || currentPanelData === void 0 ? void 0 : currentPanelData.map(function (item) {
+    var _item$children, _item$children2;
+
+    return /*#__PURE__*/React.createElement(Panel, {
+      header: item.name,
+      key: item.id
+    }, /*#__PURE__*/React.createElement(_Row, null, (item === null || item === void 0 ? void 0 : (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) ? item === null || item === void 0 ? void 0 : (_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.map(function (child, index) {
+      return /*#__PURE__*/React.createElement(_Col, {
+        key: child.id,
+        span: 8
+      }, /*#__PURE__*/React.createElement(NodeTitle, {
+        node: child,
+        isRowFirst: isRowFirst(index),
+        sortIndex: sortIndex(index)
+      }));
+    }) : /*#__PURE__*/React.createElement("div", null)));
+  })));
+};
+
+export default CategoryTree;

package/es/pages/component-tree-panel/category-tree/index.less

@@ -0,0 +1,35 @@
+@import (reference) '../../../style/theme-light';
+
+.category-tree-list {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: #fff;
+
+  .category-tree-collapse {
+    border: none;
+
+    .ant-collapse-header {
+      height: 36px;
+      font-size: 14px;
+      line-height: 1;
+      background: @light-gray-bg;
+    }
+    .ant-collapse-header > div {
+      position: absolute;
+      right: 0;
+    }
+    .ant-collapse-header > div > span {
+      color: rgba(142, 142, 142, 0.52);
+    }
+    .ant-collapse-content > .ant-collapse-content-box {
+      padding-bottom: 5px;
+    }
+    .ant-collapse-content {
+      border-top: none;
+    }
+    .ant-collapse-item {
+      border-bottom: none;
+    }
+  }
+}

package/es/pages/component-tree-panel/category-tree/node-title.d.ts

@@ -0,0 +1,12 @@
+import type { ConnectDragPreview, ConnectDragSource } from 'react-dnd';
+import './node-title.less';
+interface Props {
+    node: any;
+    isRowFirst: boolean;
+    sortIndex: number;
+    isDragging: boolean;
+    connectDragSource: ConnectDragSource;
+    connectDragPreview: ConnectDragPreview;
+}
+export declare const NodeTitle: import("react-dnd").DndComponentClass<(props: Props) => JSX.Element, import("react-dnd").Omit<Props, "connectDragSource" | "connectDragPreview" | "isDragging">>;
+export {};

package/es/pages/component-tree-panel/category-tree/node-title.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { DragSource } from 'react-dnd';
+import marked from 'marked';
+import { DRAGGABLE_ALGO_COMPONENT } from "../../../common/constants/graph";
+import "./node-title.less";
+marked.setOptions({
+  gfm: true,
+  breaks: true
+});
+
+var InnerNodeTitle = function InnerNodeTitle(props) {
+  var _props$node = props.node,
+      node = _props$node === void 0 ? {} : _props$node,
+      isRowFirst = props.isRowFirst,
+      sortIndex = props.sortIndex,
+      connectDragPreview = props.connectDragPreview,
+      connectDragSource = props.connectDragSource;
+  var _node$name = node.name,
+      name = _node$name === void 0 ? '' : _node$name,
+      isDir = node.isDir,
+      imgUrl = node.imgUrl; // 文件夹
+
+  if (isDir) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "folder"
+    }, name);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "node-title-wrapper"
+  }, connectDragPreview(connectDragSource( /*#__PURE__*/React.createElement("div", {
+    className: "node",
+    style: {
+      marginLeft: !isRowFirst ? -sortIndex : 0
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    alt: name,
+    className: "node-icon",
+    src: imgUrl || require("../../../assets/application.svg")
+  })))), /*#__PURE__*/React.createElement("span", {
+    className: "label"
+  }, name));
+};
+
+export var NodeTitle = DragSource(DRAGGABLE_ALGO_COMPONENT, {
+  beginDrag: function beginDrag(props) {
+    return {
+      component: props.node
+    };
+  }
+}, function (connect, monitor) {
+  return {
+    connectDragSource: connect.dragSource(),
+    connectDragPreview: connect.dragPreview(),
+    isDragging: monitor.isDragging()
+  };
+})(InnerNodeTitle);