@riil-frontend/component-topology 2.15.43 → 2.15.46

package/es/components/Drawer/index.js

@@ -1,6 +1,8 @@
 import _Drawer from "@alifd/next/es/drawer";
 import _extends from "@babel/runtime/helpers/extends";
 import _Button from "@alifd/next/es/button";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["bodyClassName"];
 import React from 'react';
 import classnames from 'classnames';
 import styles from "./index.module.scss";
@@ -24,6 +26,10 @@ var Drawer = function Drawer(props) {
       onSave = props.onSave,
       drawerProps = props.drawerProps,
       children = props.children;
+
+  var bodyClassName = drawerProps.bodyClassName,
+      otherDrawerProps = _objectWithoutPropertiesLoose(drawerProps, _excluded);
+
   return /*#__PURE__*/React.createElement(_Drawer, _extends({
     title: title,
     placement: "right",
@@ -31,12 +37,12 @@ var Drawer = function Drawer(props) {
     headerStyle: headerStyle,
     bodyStyle: bodyStyle,
     closeMode: ['close', 'esc']
-  }, drawerProps, {
+  }, otherDrawerProps, {
     className: classnames(styles.drawer, drawerProps.className),
     visible: visible,
     onClose: onClose
   }), /*#__PURE__*/React.createElement("div", {
-    className: classnames(styles.content, drawerProps.bodyClassName)
+    className: classnames(styles.content, bodyClassName)
   }, children), footer && /*#__PURE__*/React.createElement("div", {
     className: styles.footer
   }, /*#__PURE__*/React.createElement(_Button, {

package/es/components/TagImageSelect/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["dataSource", "onChange", "size", "boxProps", "tagProps", "itemProps", "ItemComponent"];
+var _excluded = ["dataSource", "onChange", "size", "boxProps", "tagProps", "itemProps", "ItemComponent", "value"];
 import React from "react";
 import TemplateButton from "../TemplateButton";
 import TagSelect from "../TagSelect";
@@ -14,12 +14,14 @@ var TagImageSelect = function TagImageSelect(props) {
       tagProps = props.tagProps,
       itemProps = props.itemProps,
       ItemComponent = props.ItemComponent,
+      value = props.value,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded);
 
   var Item = ItemComponent || TemplateButton;
   return /*#__PURE__*/React.createElement(TagSelect, _extends({}, otherProps, {
     onChange: onChange,
     className: styles.tagSelect,
+    value: value,
     dataSource: dataSource.map(function (item) {
       return {
         key: item.id,

package/es/components/TagSelect/index.js

@@ -20,9 +20,9 @@ var TagSelect = function TagSelect(props) {
       setCurrent = _useState[1];
 
   useEffect(function () {
-    if (value) {
-      setCurrent(value);
-    }
+    // if (value) {
+    // }
+    setCurrent(value);
   }, [value]);
   return /*#__PURE__*/React.createElement("div", {
     className: "tag-select-wrap"

package/es/components/TemplateButton/index.module.scss

@@ -14,6 +14,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  user-select: none;
 }
 
 .icon {

package/es/core/common/hooks/ht/useDataModelDataPropertyChange.js

@@ -1,10 +1,19 @@
 import { useEffect } from 'react';
 export default (function (topo, fn) {
+  var topoModState = topo.store.useModelState('topoMod');
+  var graphLoaded = topoModState.graphLoaded;
   useEffect(function () {
-    var dataModel = topo.getDataModel();
-    dataModel.addDataPropertyChangeListener(fn);
+    var dataModel;
+
+    if (graphLoaded) {
+      dataModel = topo.getDataModel();
+      dataModel.addDataPropertyChangeListener(fn);
+    }
+
     return function () {
-      dataModel.removeDataPropertyChangeListener(fn);
+      if (dataModel) {
+        dataModel.removeDataPropertyChangeListener(fn);
+      }
     };
-  }, [fn]);
+  }, [topo, graphLoaded, fn]);
 });

package/es/core/common/icons/icon.js

@@ -67,7 +67,7 @@ export function transformCustomIcons2HtIcons(icons) {
  */
 
 export function getUserCustomIcons(topo) {
-  var uploadIcons = topo.store.getModelState('iconManage').icons;
+  var uploadIcons = topo.store.getModelState('customIcon').icons;
   return [].concat(transformCustomIcons2HtIcons(uploadIcons.node));
 } // 获得节点图标列表
 

package/es/core/common/icons/useIcons.js

@@ -1,7 +1,7 @@
 import { getGroupDefaultIcons, getNodeDefaultIcons, transformCustomIcon2HtIcon } from "./icon";
 
 function useCustomIcons(topo) {
-  var _topo$store$useModelS = topo.store.useModelState('iconManage'),
+  var _topo$store$useModelS = topo.store.useModelState('customIcon'),
       icons = _topo$store$useModelS.icons;
 
   var customIcons = icons.node.map(transformCustomIcon2HtIcon);

package/es/core/components/TopoView/topoView.js

@@ -7,7 +7,6 @@ import rlog from "@riil-frontend/component-topology-utils/es/rlog";
 import { useEventListener, useCbbEventListener } from "@riil-frontend/component-riil-event-emitter";
 import useTopoEdit from "../../../hooks/useTopoEdit";
 import useSelection from "../../../hooks/useSelection";
-import useRelateTopo from "../../../hooks/useRelateTopo";
 import showMessage from "../../utils/showMessage";
 import EditorPlugin from "../../editor/components/EditorPlugin";
 import ViewerPlugin from "../../viewer/components/plugins/ViewerPlugin";
@@ -15,10 +14,10 @@ import TitleBar from "../titlebar/TitleBar";
 import { TPL_TREE } from "../../../utils/template";
 import PropertyView from "../../editor/components/settings/PropertyView";
 import BackgroundView from "../../editor/components/BackgroundView";
-import styles from "./TopoView.module.scss";
 import { updateEdgeExpanded } from "../../utils/edgeUtil";
+import styles from "./TopoView.module.scss";
 
-var TopoView = function TopoView(props) {
+var Topology = function Topology(props) {
   var _classnames, _graphViewProps$creat;
 
   var topo = props.topo,
@@ -34,6 +33,7 @@ var TopoView = function TopoView(props) {
       nodeDeleteable = props.nodeDeleteable,
       onNodeDelete = props.onNodeDelete,
       onLineDelete = props.onLineDelete,
+      onEvent = props.onEvent,
       _props$graphViewProps = props.graphViewProps,
       graphViewProps = _props$graphViewProps === void 0 ? {} : _props$graphViewProps,
       viewerProps = props.viewerProps,
@@ -80,10 +80,7 @@ var TopoView = function TopoView(props) {
   var onExitEdit = topoEdit.onExitEdit,
       onBindData = topoEdit.onBindData,
       onDeleteElement = topoEdit.onDeleteElement,
-      onSaveTopo = topoEdit.onSaveTopo;
-  var relateTopo = useRelateTopo({
-    topo: topo
-  }); // useAlarm({
+      onSaveTopo = topoEdit.onSaveTopo; // useAlarm({
   //   topo,
   // });
 
@@ -112,13 +109,6 @@ var TopoView = function TopoView(props) {
   useEffect(function () {
     // rlog.debug("TopoView.useEffect topoData", topoData);
     setTData(buildLoadOptions ? buildLoadOptions(topoData) : topoData);
-
-    if (topoData) {
-      // TODO 移到模型中
-      topoDispatchers.update({
-        currentTopo: topoData.config
-      });
-    }
   }, [topoData]);
   useEffect(function () {
     return function () {
@@ -172,7 +162,7 @@ var TopoView = function TopoView(props) {
 
   var handleEvent = function handleEvent(event) {
     rlog.debug("TopoView:onEvent", event);
-    relateTopo.onEvent(event);
+    onEvent(event);
     topoEdit.onEvent(event);
 
     switch (event.name) {
@@ -274,7 +264,7 @@ var TopoView = function TopoView(props) {
   }));
 };
 
-TopoView.propTypes = {
+Topology.propTypes = {
   // 拓扑模型
   topo: PropTypes.any.isRequired,
   defaultEnterEditMode: PropTypes.bool,
@@ -294,10 +284,10 @@ TopoView.propTypes = {
    */
   titleBar: PropTypes.oneOf([React.ReactNode, false])
 };
-TopoView.defaultProps = {
+Topology.defaultProps = {
   defaultEnterEditMode: false,
   viewerProps: {},
   editorProps: {} // titleBar: false,
 
 };
-export default TopoView;
+export default Topology;

package/es/core/{models/createTopoApp.js → createTopoApp.js}

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import TopoApp from "./TopoApp";
+import TopoApp from "./models/TopoApp";
 /**
  *
  * @param options

package/es/core/editor/components/BackgroundView/index.js

@@ -1,11 +1,11 @@
 import _Message from "@alifd/next/es/message";
 import _Loading from "@alifd/next/es/loading";
 import _extends from "@babel/runtime/helpers/extends";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _Dialog from "@alifd/next/es/dialog";
 import _Tag from "@alifd/next/es/tag";
 import _Button from "@alifd/next/es/button";
 import _Icon from "@alifd/next/es/icon";
-import _Dialog from "@alifd/next/es/dialog";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useEffect, useState } from 'react';
 import styles from "./index.module.scss";
@@ -21,20 +21,56 @@ function List(props) {
       dataSource = props.dataSource,
       onRemove = props.onRemove;
 
-  function remove(e, id) {
-    e.stopPropagation();
-
-    _Dialog.confirm({
-      title: '删除',
-      messageProps: {
-        type: 'warning'
-      },
-      content: '若执行相关操作，此背景将会从背景库删除，确定删除吗？',
-      onOk: function onOk() {
-        return onRemove(id);
-      },
-      onCancel: function onCancel() {}
-    });
+  function remove(_x, _x2) {
+    return _remove.apply(this, arguments);
+  }
+
+  function _remove() {
+    _remove = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(e, id) {
+      var canDelete;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              e.stopPropagation();
+              _context.next = 3;
+              return api.canDeleteBackground(id);
+
+            case 3:
+              canDelete = _context.sent;
+              console.log('canDelete', canDelete);
+
+              if (canDelete) {
+                _Dialog.confirm({
+                  title: '删除',
+                  messageProps: {
+                    type: 'warning'
+                  },
+                  content: '若执行相关操作，此背景将会从背景库删除，确定删除吗？',
+                  onOk: function onOk() {
+                    return onRemove(id);
+                  }
+                });
+              } else {
+                _Dialog.confirm({
+                  title: '提示',
+                  messageProps: {
+                    type: 'warning'
+                  },
+                  content: '此背景被占用，不能删除。',
+                  footerActions: ['ok'],
+                  onOk: function onOk() {}
+                });
+              }
+
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+    return _remove.apply(this, arguments);
   }
 
   return /*#__PURE__*/React.createElement("div", {
@@ -95,46 +131,46 @@ export default function BackgroundView(props) {
   }
 
   function _getBackground() {
-    _getBackground = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    _getBackground = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
       var res;
-      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
         while (1) {
-          switch (_context2.prev = _context2.next) {
+          switch (_context3.prev = _context3.next) {
             case 0:
-              _context2.next = 2;
+              _context3.next = 2;
               return api.getBackgroundList();
 
             case 2:
-              res = _context2.sent;
+              res = _context3.sent;
               setBgList(res);
 
             case 4:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
         }
-      }, _callee2);
+      }, _callee3);
     }));
     return _getBackground.apply(this, arguments);
   }
 
-  function removeBg(_x) {
+  function removeBg(_x3) {
     return _removeBg.apply(this, arguments);
   } // 同步拓扑图展示
 
 
   function _removeBg() {
-    _removeBg = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(id) {
+    _removeBg = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(id) {
       var res;
-      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      return _regeneratorRuntime.wrap(function _callee4$(_context4) {
         while (1) {
-          switch (_context3.prev = _context3.next) {
+          switch (_context4.prev = _context4.next) {
             case 0:
-              _context3.next = 2;
+              _context4.next = 2;
               return api.deleteBackground(id);
 
             case 2:
-              res = _context3.sent;
+              res = _context4.sent;
 
               // 删除当前选中
               if (id === (current === null || current === void 0 ? void 0 : current.id)) {
@@ -148,10 +184,10 @@ export default function BackgroundView(props) {
 
             case 6:
             case "end":
-              return _context3.stop();
+              return _context4.stop();
           }
         }
-      }, _callee3);
+      }, _callee4);
     }));
     return _removeBg.apply(this, arguments);
   }
@@ -161,46 +197,46 @@ export default function BackgroundView(props) {
   }
 
   var handleSelect = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(currentBg) {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(currentBg) {
       var imgUrl, size;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
-          switch (_context.prev = _context.next) {
+          switch (_context2.prev = _context2.next) {
             case 0:
               if (!(currentBg !== null && currentBg !== void 0 && currentBg.id && currentBg.id !== (current === null || current === void 0 ? void 0 : current.id))) {
-                _context.next = 16;
+                _context2.next = 16;
                 break;
               }
 
               setLoadingBackground(true);
               imgUrl = getBackgroundImageUrl(currentBg);
-              _context.prev = 3;
-              _context.next = 6;
+              _context2.prev = 3;
+              _context2.next = 6;
               return getImageSize(imgUrl);
 
             case 6:
-              size = _context.sent;
+              size = _context2.sent;
               rlog.debug('获取图片大小', size);
               setBackground(_extends({}, currentBg, size));
               topo.getHtTopo().setBackgroundImgUrl(imgUrl, size.width, size.height);
               setLoadingBackground(false);
-              _context.next = 16;
+              _context2.next = 16;
               break;
 
             case 13:
-              _context.prev = 13;
-              _context.t0 = _context["catch"](3);
+              _context2.prev = 13;
+              _context2.t0 = _context2["catch"](3);
               setLoadingBackground(false);
 
             case 16:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
         }
-      }, _callee, null, [[3, 13]]);
+      }, _callee2, null, [[3, 13]]);
     }));
 
-    return function handleSelect(_x2) {
+    return function handleSelect(_x4) {
       return _ref.apply(this, arguments);
     };
   }();

package/es/core/editor/components/BackgroundView/index.module.scss

@@ -25,6 +25,7 @@
       .box {
         position: relative;
         height: 100%;
+        user-select: none;
         .img {
           max-width: 100%;
           max-height: 100%;

package/es/core/editor/components/{iconManage/IconManage.js → CustomIconPlugin/CustomIconPlugin.js}

@@ -1,10 +1,10 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useEffect } from 'react';
 import UploadIconDialogWrapper from "./UploadIconDialogWrapper";
 import RenameDialog from "./RenameDialog";
-export default function IconManage(props) {
+export default function CustomIconPlugin(props) {
   var topo = props.topo;
   var store = topo.store;
-  var dispatchers = store.getModelDispatchers('iconManage'); // 初始化时注册事件
+  var dispatchers = store.getModelDispatchers('customIcon'); // 初始化时注册事件
 
   useEffect(function () {
     var notifier = topo.view.topoClient.notifier; // 测试代码

package/es/core/editor/components/{iconManage → CustomIconPlugin}/RenameDialog.js

@@ -11,7 +11,7 @@ export default function RenameDialog(props) {
   var topo = props.topo;
   var store = topo.store;
 
-  var _store$useModel = store.useModel('iconManage'),
+  var _store$useModel = store.useModel('customIcon'),
       state = _store$useModel[0],
       dispatchers = _store$useModel[1];
 

package/es/core/editor/components/{iconManage → CustomIconPlugin}/UploadIconDialog.js

@@ -13,6 +13,7 @@ import _ from 'lodash';
 import _svgToShape from "./utils/svgToShape";
 import styles from "./UploadIconDialog.module.scss";
 import "./UploadIconDialog.scss";
+import rlog from '@riil-frontend/component-topology-utils/es/rlog';
 var config = _ConfigProvider.config;
 
 function getFileName(file) {
@@ -98,7 +99,18 @@ var UploadIconDialog = /*#__PURE__*/function (_React$Component) {
 
       _this.setState({
         files: validFiles
-      });
+      }); // 上传接口报错后只会通知该回调，移除上传loading
+
+
+      if (_this.state.uploading && files.filter(function (file) {
+        return file.state === 'error';
+      }).length && !files.filter(function (file) {
+        return file.state === 'uploading';
+      }).length) {
+        _this.setState({
+          uploading: false
+        });
+      }
     };
 
     _this.submit = function () {
@@ -198,7 +210,9 @@ var UploadIconDialog = /*#__PURE__*/function (_React$Component) {
       });
     };
 
-    _this.handleUploadError = function () {};
+    _this.handleUploadError = function () {
+      rlog.error('上传失败');
+    };
 
     _this.onClose = function () {
       var dispatchers = _this.props.dispatchers;

package/es/core/editor/components/{iconManage → CustomIconPlugin}/UploadIconDialogWrapper.js

@@ -4,7 +4,7 @@ export default function UploadIconDialogWrapper(props) {
   var topo = props.topo;
   var store = topo.store;
 
-  var _store$useModel = store.useModel('iconManage'),
+  var _store$useModel = store.useModel('customIcon'),
       state = _store$useModel[0],
       dispatchers = _store$useModel[1];
 

package/es/core/editor/components/CustomIconPlugin/index.js

@@ -0,0 +1,2 @@
+import IconManage from "./CustomIconPlugin";
+export default IconManage;

package/es/core/editor/components/EditorPlugin.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from "react";
-import IconManage from "./iconManage/IconManage";
+import CustomIconPlugin from "./CustomIconPlugin";
 import SaveLoading from "./plugins/SaveLoading";
 import MultipleResourceSelectPlugin from "./plugins/MultipleResourceSelectPlugin";
 import GroupAddResourceDrawerPlugin from "./GroupAddResourceDrawerPlugin";
@@ -10,7 +10,7 @@ export default function TopoEditorPlugin(props) {
       topoEdit = props.topoEdit,
       editorProps = props.editorProps;
   var store = topo.store;
-  var plugins = [SaveLoading, GroupAddResourceDrawerPlugin, MultipleResourceSelectPlugin, IconManage].concat((editorProps === null || editorProps === void 0 ? void 0 : editorProps.plugins) || []);
+  var plugins = [SaveLoading, GroupAddResourceDrawerPlugin, MultipleResourceSelectPlugin, CustomIconPlugin].concat((editorProps === null || editorProps === void 0 ? void 0 : editorProps.plugins) || []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, plugins.map(function (Plugin, index) {
     return /*#__PURE__*/React.createElement(Plugin, _extends({
       key: index,

package/es/core/editor/components/settings/common/LayoutSettings.js

@@ -1,6 +1,6 @@
 import _Form from "@alifd/next/es/form";
 import _Radio from "@alifd/next/es/radio";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import TemplateGroup from "../../../../../components/TagImageSelect";
 import styles from "./LayoutSettings.module.scss";
 var LAYOUTS = {
@@ -21,33 +21,25 @@ var LayoutSettings = function LayoutSettings(props) {
   var _props$layout = props.layout,
       layout = _props$layout === void 0 ? {} : _props$layout,
       onChange = props.onChange,
+      regionId = props.regionId,
       size = props.size;
   var layoutId = layout.id,
-      layoutOptions = layout.options;
-
-  var _useState = useState(layout || {}),
-      value = _useState[0],
-      setValue = _useState[1];
+      layoutOptions = layout.options; // const [value, setValue] = useState();
 
   var handleChange = function handleChange(data) {
-    console.log("handleChange", data);
-    onChange && onChange(data); // setValue({
-    //   id: data,
-    //   options: {
-    //     value: "east",
-    //     label: "横向",
-    //   },
-    // });
+    onChange && onChange(data);
   };
 
   var onLayoutSelect = function onLayoutSelect(id) {
+    // console.log("onLayoutSelect", id, layout, value);
     var options;
 
     if (id === "toward") {
       options = {
         subId: TREE_LAYOUT_OPTIONS[0].value
       };
-    }
+    } // setValue(id);
+
 
     handleChange({
       id: id,
@@ -60,14 +52,14 @@ var LayoutSettings = function LayoutSettings(props) {
       id: id,
       name: LAYOUTS[id],
       icon: "layout_" + id,
-      selected: layoutId === id,
-      onSelect: onLayoutSelect
+      selected: layoutId === id
     };
   });
   return /*#__PURE__*/React.createElement("div", {
     className: styles["layout-setting-template-group"]
   }, /*#__PURE__*/React.createElement(TemplateGroup, {
     dataSource: layoutGroup,
+    value: layoutId,
     size: size,
     onChange: onLayoutSelect,
     boxProps: {
@@ -86,7 +78,7 @@ var LayoutSettings = function LayoutSettings(props) {
       iconClassName: styles.icon,
       textClassName: styles.text
     }
-  }), layoutId === "toward" && /*#__PURE__*/React.createElement(_Form.Item, {
+  }), layoutId === "toward" ? /*#__PURE__*/React.createElement(_Form.Item, {
     label: "\u5E03\u5C40\u65B9\u5411"
   }, /*#__PURE__*/React.createElement(_Radio.Group, {
     dataSource: TREE_LAYOUT_OPTIONS,
@@ -99,7 +91,7 @@ var LayoutSettings = function LayoutSettings(props) {
         }
       });
     }
-  })));
+  })) : null);
 };
 
 export default LayoutSettings;

package/es/core/editor/components/settings/propertyViews/group/DataTab/hoooks/useGroupRelateResource.js

@@ -2,11 +2,11 @@ import _extends from "@babel/runtime/helpers/extends";
 import { useState } from "react";
 import rlog from "@riil-frontend/component-topology-utils/es/rlog";
 import { iconFactory } from "@riil-frontend/component-topology-graph";
-import sortBy from 'lodash/sortBy';
+import sortBy from "lodash/sortBy";
 import { getGroupChildrenNodes, getNodeData } from "../../../../../../../../utils/htElementUtils";
 
 function sortResourcesByName(resources) {
-  return sortBy(resources, 'name');
+  return sortBy(resources, "name");
 }
 
 export default function useGroupRelateResource(props) {
@@ -33,7 +33,7 @@ export default function useGroupRelateResource(props) {
       data: item,
       node: item.node
     };
-  });
-  rlog.info('useGroupRelateResource', data);
+  }); // rlog.info('useGroupRelateResource', data);
+
   return data;
 }