@nokecy/qc-ui 0.1.18 → 0.1.21

package/dist/cjs/dashboard/widget/selector/index.less

@@ -0,0 +1,172 @@
+.react-dashboard-widget-selector{
+  position:fixed;
+  top:50%;
+  left:50%;
+  transform:translate(-50%, -50%);
+  z-index:1006;
+  width:60%;
+  height:60%;
+  max-width:800px;
+  max-height:600px;
+  background:var(--component-background);
+}
+
+.react-dashboard-widget-wrap {
+  display: flex;
+  height:100%;
+  
+  .react-dashboard-widget-leftBar {
+    padding: 10px;
+    width: 180px;
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
+    background: var(--component-background);
+    .react-dashboard-widget-searchIcon {
+      color: var(--text-color);
+    }
+
+    .react-dashboard-widget-item {
+      display: flex;
+      justify-content: space-between;
+      padding: 10px;
+
+      .react-dashboard-widget-Badge {
+
+          .ant-badge-count {
+            color: var(--text-color);
+            background-color: var(--component-background-1) !important;
+          }
+        
+      }
+
+      cursor: pointer;
+
+      &:hover {
+        background: var(--component-background-3);
+        font-weight: bold;
+      }
+    }
+
+    .react-dashboard-widget-active {
+      background: rgba(0, 0, 0, 0.03);
+      font-weight: bold;
+    }
+  }
+
+  .react-dashboard-widget-Layer {
+    flex: 1 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 10px;
+    background: rgba(0, 0, 0, 0.01);
+    &::-webkit-scrollbar {
+      width: 1px;
+      height: 1px;
+      overflow: auto;
+    }
+  
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--primary-color);
+      min-height: 25px;
+      min-width: 25px;
+  
+      &:hover {
+        background-color: #a8a8a8;
+      }
+  
+      &:active {
+        background-color: #787878;
+      }
+    }
+  
+    &::-webkit-scrollbar-track {
+      background-color: #f7f7f7;
+      border: 1px solid #efefef;
+    }
+
+      .react-dashboard-widget-waterfall {
+        width: 100%;
+      }
+
+      .ant-popover-inner-content {
+        background: rgba(0, 0, 0, 0.01);
+      }
+    
+
+    .react-dashboard-widget-item {
+      cursor: pointer;
+      height: auto;
+      margin-bottom: 10px;
+      width: 100%;
+      height: auto;
+      border-radius: 5px;
+      overflow: hidden;
+      // box-shadow: 0 0 0px rgba(255, 255, 255, 1);
+      transition: all 0.3s;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      -webkit-column-break-inside: avoid;
+      position: relative;
+      background: var(--component-background);
+      .react-dashboard-widget-shortcut {
+        width: 100%;
+        height: auto;
+      }
+
+      .react-dashboard-widget-mask {
+        opacity: 0;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.5);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        transition: all 0.3s;
+      }
+
+      &:hover {
+        transition: all 0.3s;
+
+        border: 1px solid var(--component-background-3);
+
+        .react-dashboard-widget-mask {
+          opacity: 1;
+          transition: all 0.3s;
+        }
+      }
+
+      .react-dashboard-widget-bottombar {
+        border-top: 1px solid rgba(0, 0, 0, 0.1);
+        width: 100%;
+
+        padding: 5px;
+
+        .react-dashboard-widget-iconWrap {
+          display: inline-block;
+          width: 28px;
+          height: 28px;
+          line-height: 28px;
+          text-align: center;
+          border-radius: 7px;
+          color: #fff;
+          margin-right: 5px;
+          font-size: 16px;
+        }
+
+        .react-dashboard-widget-name {
+          font-size: 16px;
+          flex: 1;
+          color: var(--text-color);
+          line-height: 28px;
+          font-weight: bold;
+          display: inline;
+        }
+
+        .react-dashboard-widget-description {
+          margin-top: 5px;
+        }
+      }
+    }
+  }
+}

package/dist/cjs/dashboard/widget/utils.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const getWidgetType: (i: string, widgets: any) => string;
+export declare const ConfigBar: (props: any) => JSX.Element;
+export declare const ConfigWrap: (props: any, widgets: any) => JSX.Element;

package/dist/cjs/dashboard/widget/utils.js

@@ -0,0 +1,114 @@
+"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.getWidgetType = exports.ConfigWrap = exports.ConfigBar = void 0;
+
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
+var _antd = require("antd");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _icons = require("@ant-design/icons");
+
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// import allWidgets from '../../widgets';
+//获取widget的类型
+var getWidgetType = function getWidgetType(i, widgets) {
+  var allWidgets = widgets;
+  var widgetType = '';
+  Object.keys(allWidgets).map(function (key) {
+    if (i.indexOf(key) >= 0) {
+      widgetType = key;
+    }
+  });
+  return widgetType;
+}; //widget配置和删除按钮
+
+
+exports.getWidgetType = getWidgetType;
+
+var ConfigBar = function ConfigBar(props) {
+  var widgetKey = props.widgetKey,
+      editMode = props.editMode,
+      onDeleteWidget = props.onDeleteWidget,
+      _props$setConfigShow = props.setConfigShow,
+      setConfigShow = _props$setConfigShow === void 0 ? function () {} : _props$setConfigShow,
+      widgets = props.widgets;
+  var widgetType = getWidgetType(widgetKey, widgets);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, editMode && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'react-dashboard-mask'
+  }), editMode && (0, _get2.default)('widgets', widgetType + '.configComponent') && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'react-dashboard-configicon',
+    onClick: function onClick() {
+      return setConfigShow(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_icons.SettingOutlined, null)), editMode && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'react-dashboard-deleteicon',
+    onClick: function onClick() {
+      return onDeleteWidget();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_icons.DeleteOutlined, null)));
+}; //config的容器
+
+
+exports.ConfigBar = ConfigBar;
+
+var ConfigWrap = function ConfigWrap(props, widgets) {
+  var widgetKey = props.widgetKey,
+      visible = props.visible,
+      setVisible = props.setVisible,
+      width = props.width,
+      children = props.children;
+  var afterVisibleChange = (0, _react.useCallback)(function (visible) {
+    if (visible) {
+      var widgetConfigPanel = document.getElementsByClassName('widgetConfigPanel')[0];
+      widgetConfigPanel && widgetConfigPanel.addEventListener('mousedown', function (e) {
+        e.stopPropagation();
+      });
+    } else {
+      var _widgetConfigPanel = document.getElementsByClassName('widgetConfigPanel')[0];
+      _widgetConfigPanel && _widgetConfigPanel.removeEventListener('mousedown', function (e) {
+        e.stopPropagation();
+      });
+    }
+  }, [visible]);
+  var title = (0, _react.useMemo)(function () {
+    if (!widgetKey) {
+      return;
+    }
+
+    var widgetType = getWidgetType(widgetKey, widgets);
+    return (0, _get2.default)(widgets, widgetType + '.name') + '设置';
+  }, [widgetKey, widgets, getWidgetType]);
+  (0, _react.useEffect)(function () {
+    afterVisibleChange(visible);
+  }, [visible]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, visible && /*#__PURE__*/_react.default.createElement(_antd.Drawer, {
+    className: "react-dashboard-widgetConfigPanel",
+    title: title,
+    placement: "right",
+    closable: true,
+    onClose: function onClose() {
+      return setVisible(false);
+    },
+    visible: visible,
+    width: width,
+    bodyStyle: {
+      padding: '0px'
+    },
+    afterVisibleChange: afterVisibleChange,
+    zIndex: 1005
+  }, children));
+};
+
+exports.ConfigWrap = ConfigWrap;

package/dist/cjs/elsa/components/finishNode.js

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/elsa/components/forkNode.js

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/elsa/components/ifNode.js

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/elsa/components/joinNode.js

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/elsa/components/setNameNode.js

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/elsa/components/startNode.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const StartNode: (props: any) => JSX.Element;
+export default StartNode;

package/dist/cjs/elsa/components/startNode.js

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

package/dist/cjs/elsa/components/switchNode.js

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/elsa/components/timerNode.js

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/elsa/components/userTaskNode/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Graph, Node } from '@antv/x6';
+declare const UserTaskNode: (props: {
+    node: Node;
+    graph: Graph;
+}) => JSX.Element;
+export default UserTaskNode;

package/dist/cjs/elsa/components/userTaskNode/index.js

@@ -0,0 +1,50 @@
+"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 _classnames = _interopRequireDefault(require("classnames"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var UserTaskNode = function UserTaskNode(props) {
+  var node = props.node,
+      graph = props.graph;
+  var data = node.getData();
+  (0, _react.useEffect)(function () {// if (!node.getPort("port1")) {
+    //     node.addPort({ id: "port1", group: "in" })
+    // }
+    // if (!node.getPort("port2")) {
+    //     node.addPort({ id: "port2", group: "out" })
+    // }
+    // graph.addEdge({ source: node, target: { x: 100, y: 120 }, });
+  }, [node]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "userTask success",
+    style: {
+      height: "100%",
+      border: "2px solid #5F95FF",
+      borderRadius: 10,
+      backgroundColor: "#EFF4FF"
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", null, data === null || data === void 0 ? void 0 : data.name)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "plus-dag"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: (0, _classnames.default)('plus-action', {
+      /*'plus-action-selected': plusActionSelected*/
+    })
+  })));
+};
+
+var _default = UserTaskNode;
+exports.default = _default;

package/dist/cjs/elsa/components/userTaskNode/register.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/elsa/components/userTaskNode/register.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _x6ReactShape = require("@antv/x6-react-shape");
+
+var _ = _interopRequireDefault(require("."));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+(0, _x6ReactShape.register)({
+  shape: "UserTaskNode",
+  effect: ['data'],
+  component: _.default // attrs: {
+  //     body: {
+  //         magnet: true,
+  //         strokeWidth: 0,
+  //         fill: '#ccc',
+  //     }
+  // },
+  // ports: {
+  //     groups: {
+  //         in: {
+  //             position: 'top',
+  //             label: {
+  //                 position: 'top',
+  //             },
+  //             attrs: {
+  //                 circle: {
+  //                     r: 6,
+  //                     magnet: true,
+  //                     stroke: '#31d0c6',
+  //                     strokeWidth: 2,
+  //                     fill: '#fff',
+  //                 },
+  //             },
+  //         },
+  //         out: {
+  //             position: 'bottom',
+  //             label: {
+  //                 position: 'bottom',
+  //             },
+  //             attrs: {
+  //                 circle: {
+  //                     r: 6,
+  //                     magnet: true,
+  //                     stroke: '#31d0c6',
+  //                     strokeWidth: 2,
+  //                     fill: '#fff',
+  //                 },
+  //             },
+  //         },
+  //     },
+  // },
+
+});

package/dist/cjs/elsa/elsa.design.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import './components/userTaskNode/register';
+declare const ElsaDesign: (props: any) => JSX.Element;
+export default ElsaDesign;

package/dist/cjs/elsa/elsa.design.js

@@ -0,0 +1,123 @@
+"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 _graph = require("../xflow/hooks/graph");
+
+var _xflow = require("../xflow");
+
+require("./components/userTaskNode/register");
+
+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; }
+
+var defaultNodeOptions = {
+  width: 100,
+  height: 60
+};
+var defaultEdgeOptions = {
+  attrs: {
+    line: {
+      strokeDasharray: '5 5'
+    }
+  }
+};
+var graphConfig = {
+  background: {
+    color: "#F2F7FA"
+  },
+  connecting: {
+    //连线的过程中距离节点或者连接桩 50px 时会触发自动吸附
+    snap: true,
+    //是否允许连接到画布空白位置的点
+    allowBlank: true,
+    //是否允许在相同的起始节点和终止之间创建多条边
+    allowMulti: false,
+    //是否允许创建循环连线
+    allowLoop: false,
+    //是否允许边链接到节点（非节点上的链接桩）
+    allowNode: true,
+    //拖动边时，是否高亮显示所有可用的连接桩或节点
+    highlight: true
+  },
+  interacting: {
+    arrowheadMovable: true
+  }
+};
+
+var ElsaDesign = function ElsaDesign(props) {
+  var graph = (0, _graph.useGraph)();
+  (0, _react.useEffect)(function () {
+    graph === null || graph === void 0 ? void 0 : graph.on("node:mouseenter", function (args) {});
+    graph === null || graph === void 0 ? void 0 : graph.on("node:mouseleave", function (args) {});
+    graph === null || graph === void 0 ? void 0 : graph.on("edge:mouseenter", function (_ref) {
+      var cell = _ref.cell;
+      cell.addTools(['source-arrowhead', {
+        name: 'target-arrowhead',
+        args: {
+          attrs: {
+            fill: 'red'
+          }
+        }
+      }]);
+    });
+    graph === null || graph === void 0 ? void 0 : graph.on('edge:mouseleave', function (_ref2) {
+      var cell = _ref2.cell;
+      cell.removeTools();
+    });
+    graph === null || graph === void 0 ? void 0 : graph.on("edge:connected", function (_ref3) {
+      var isNew = _ref3.isNew,
+          edge = _ref3.edge;
+
+      if (isNew) {
+        edge.setSource(edge.getSourceNode(), {
+          selector: undefined
+        }, undefined);
+      }
+    });
+    graph === null || graph === void 0 ? void 0 : graph.bindKey('backspace', function () {
+      var cells = graph.getSelectedCells();
+
+      if (cells.length) {
+        graph.removeCells(cells);
+      }
+    });
+  }, [graph]);
+  return /*#__PURE__*/_react.default.createElement(_xflow.XFlowGraph, {
+    zoomToFit: true,
+    data: [{
+      id: '1',
+      shape: 'UserTaskNode',
+      x: 100,
+      y: 100,
+      label: 'source'
+    }, {
+      id: '2',
+      shape: 'UserTaskNode',
+      x: 300,
+      y: 300,
+      label: 'target'
+    }, {
+      id: '3',
+      shape: 'UserTaskNode',
+      x: 400,
+      y: 400,
+      label: 'target'
+    }],
+    defaultNodeOptions: defaultNodeOptions,
+    defaultEdgeOptions: defaultEdgeOptions,
+    configs: graphConfig,
+    centerContent: true
+  });
+};
+
+var _default = ElsaDesign;
+exports.default = _default;

package/dist/cjs/elsa/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import "./index.less";
+declare const Elsa: (props: any) => JSX.Element;
+export default Elsa;

package/dist/cjs/elsa/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _selection = require("../xflow/components/selection");
+
+var _keyboard = require("../xflow/components/keyboard");
+
+var _xflow = require("../xflow");
+
+var _elsa = _interopRequireDefault(require("./elsa.design"));
+
+require("./index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Elsa = function Elsa(props) {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: 400
+    }
+  }, /*#__PURE__*/_react.default.createElement(_xflow.XFlow, null, /*#__PURE__*/_react.default.createElement(_selection.Selection, {
+    enabled: true,
+    multiple: true,
+    rubberEdge: true,
+    rubberNode: true,
+    modifiers: "shift",
+    rubberband: true
+  }), /*#__PURE__*/_react.default.createElement(_keyboard.Keyboard, {
+    enabled: true
+  }), /*#__PURE__*/_react.default.createElement(_elsa.default, null)));
+};
+
+var _default = Elsa;
+exports.default = _default;