@riil-frontend/component-topology 6.0.0-alpha.8 → 6.0.0-alpha.9

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

@@ -11,7 +11,10 @@ function useCustomIcons(topo) {
 export function useNodeIcons(topo) {
   var customIcons = useCustomIcons(topo);
   var groups = [{
-    name: '默认',
+    name: '资源图片',
+    icons: []
+  }, {
+    name: '基础图片',
     icons: getNodeDefaultIcons(topo)
   }];
 
@@ -27,6 +30,9 @@ export function useNodeIcons(topo) {
 export function useGroupIcons(topo) {
   var customIcons = useCustomIcons(topo);
   var groups = [{
+    name: '资源图片',
+    icons: []
+  }, {
     name: '默认',
     icons: getGroupDefaultIcons(topo)
   }];

package/es/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.js

@@ -2,36 +2,31 @@ import _Tag from "@alifd/next/es/tag";
 import React, { useState } from 'react';
 import styles from "./CanvasPanel.module.scss";
 var CANVAS_TOGGLE = [{
-  value: 0,
+  value: 'white',
   label: '白色',
-  color: '#FFFFFF',
-  isSystem: 1
+  color: '#FFFFFF'
 }, {
-  value: 1,
+  value: 'blue',
   label: '蓝色',
-  color: '#F9FBFF',
-  isSystem: 0
+  color: '#F9FBFF'
 }, {
-  value: 2,
+  value: 'yellow',
   label: '黄色',
-  color: '#FFFDE6',
-  isSystem: 0
+  color: '#FFFDE6'
 }, {
-  value: 3,
+  value: 'green',
   label: '绿色',
-  color: '#EAFFE8',
-  isSystem: 0
+  color: '#EAFFE8'
 }, {
-  value: 4,
+  value: 'dark',
   label: '深色',
-  color: '#031425',
-  isSystem: 0
+  color: '#031425'
 }];
 export default function CanvasPanel(props) {
   var selected = props.selected,
       onSelect = props.onSelect;
 
-  var _useState = useState(0),
+  var _useState = useState('white'),
       selectVal = _useState[0],
       setSelectVal = _useState[1];
 
@@ -39,13 +34,13 @@ export default function CanvasPanel(props) {
     className: styles.canvasToggle
   }, CANVAS_TOGGLE.map(function (item, index) {
     return /*#__PURE__*/React.createElement("div", {
-      className: styles.canvas
+      className: styles.canvas,
+      key: index
     }, /*#__PURE__*/React.createElement(_Tag.Selectable, {
       className: styles.tag,
       style: {
         background: item.color
       },
-      key: item.value,
       checked: selected ? selected === item.value : selectVal === item.value,
       onChange: function onChange(checked) {
         setSelectVal(item.value);

package/es/core/editor/components/Toolbar/EditorToolbar.js

@@ -1,29 +1,36 @@
 import _Button from "@alifd/next/es/button";
 import _extends from "@babel/runtime/helpers/extends";
 import classNames from 'classnames';
-import React, { useState } from 'react';
-import buttons from "./buttons";
+import React, { useMemo, useState } from 'react';
+import getButtons from "./buttons";
 import Toolbar from "./Toolbar";
 import styles from "./Toolbar.module.scss";
 
 function EditorToolbar(props) {
-  var _classNames;
+  var _topo$viewProps, _topo$viewProps$topoC, _classNames;
+
+  var topo = props.topo;
 
   var _useState = useState(true),
       expanded = _useState[0],
       setExpanded = _useState[1];
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles.toolbarWrap, (_classNames = {}, _classNames[styles.normal] = expanded, _classNames[styles.expanded] = !expanded, _classNames))
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.content
-  }, /*#__PURE__*/React.createElement(Toolbar, null, buttons.map(function (ToolbarButton, index) {
+  var isNetworkTopo = (_topo$viewProps = topo.viewProps) === null || _topo$viewProps === void 0 ? void 0 : (_topo$viewProps$topoC = _topo$viewProps.topoContext) === null || _topo$viewProps$topoC === void 0 ? void 0 : _topo$viewProps$topoC.isNetworkTopo;
+  var buttons = useMemo(function () {
+    return getButtons(isNetworkTopo);
+  }, [isNetworkTopo]);
+  var buttonInstances = buttons.map(function (ToolbarButton, index) {
     return /*#__PURE__*/React.createElement(ToolbarButton, _extends({
       key: index
     }, props, {
       showLabel: expanded
     }));
-  }))), /*#__PURE__*/React.createElement("div", {
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.toolbarWrap, (_classNames = {}, _classNames[styles.normal] = expanded, _classNames[styles.expanded] = !expanded, _classNames))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.content
+  }, /*#__PURE__*/React.createElement(Toolbar, null, buttonInstances)), /*#__PURE__*/React.createElement("div", {
     className: styles.right
   }, /*#__PURE__*/React.createElement(_Button, {
     type: "normal",

package/es/core/editor/components/Toolbar/buttons.js

@@ -16,21 +16,23 @@ import BoxBackgroundButton from "./widgets/BoxBackgroundButton";
 import EdgeColorButton from "./widgets/EdgeColorButton";
 import NodeImageButton from "./widgets/NodeImageButton";
 import NodeSizeButton from "./widgets/NodeSizeButton";
-export default [AddResourceButton, // 添加资源
-Divider, CanvasSelectWidget, // 选择
-CanvasMoveWidget, // 移动
-Divider, HistoryUndoButton, // 撤销
-HistoryRedoButton, // 恢复
-Divider, FontFamilyWidget, // 字体
-FontSizeWidget, // 字号
-FontStyleButton, // 文字样式
-FontColorButton, // 文字颜色
-Divider, BoxBackgroundButton, // 框背景
-Divider, EdgeColorButton, // 线条颜色
-EdgeTypeButton, // 线形
-Divider, NodeImageButton, // 替换图片
-NodeSizeButton, // 图片尺寸
-Divider, Layout, // 布局方式
-NodeAlignWidget, // 对齐方式
-SearchWidget // 搜索
-];
+export default function getButtons(isNetworkTopo) {
+  return [].concat(isNetworkTopo ? [AddResourceButton, // 添加资源
+  Divider] : [], [CanvasSelectWidget, // 选择
+  CanvasMoveWidget, // 移动
+  Divider], isNetworkTopo ? [HistoryUndoButton, // 撤销
+  // HistoryRedoButton, // 恢复
+  Divider] : [], [FontFamilyWidget, // 字体
+  FontSizeWidget, // 字号
+  FontStyleButton, // 文字样式
+  FontColorButton, // 文字颜色
+  Divider, BoxBackgroundButton, // 框背景
+  Divider, EdgeColorButton, // 线条颜色
+  EdgeTypeButton, // 线形
+  Divider, NodeImageButton, // 替换图片
+  NodeSizeButton, // 图片尺寸
+  Divider, Layout, // 布局方式
+  NodeAlignWidget, // 对齐方式
+  SearchWidget // 搜索
+  ]);
+}

package/es/core/editor/components/Toolbar/widgets/AddResourceButton.js

@@ -53,7 +53,7 @@ function AddResourceButton(props) {
     }
   };
 
-  return /*#__PURE__*/React.createElement(WidgetBox, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WidgetBox, {
     label: "\u6DFB\u52A0\u8D44\u6E90",
     tooltip: "\u6DFB\u52A0\u8D44\u6E90",
     showLabel: showLabel
@@ -62,7 +62,7 @@ function AddResourceButton(props) {
   }, /*#__PURE__*/React.createElement("img", {
     src: "/img/topo/editor/toolbar/add/Normal.svg",
     alt: ""
-  })), addType === 'layer' && /*#__PURE__*/React.createElement(LayerAddResourceDrawer, {
+  }))), addType === 'layer' && /*#__PURE__*/React.createElement(LayerAddResourceDrawer, {
     layer: selection[0],
     editorProps: editorProps,
     layerAddResource: layerAddResource

package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.js

@@ -6,22 +6,39 @@ import styles from "./EdgeType.module.scss";
 import LineType from "./LineType";
 var FormItem = _Form.Item;
 var Option = _Select.Option;
-var START_END_TYPE_OPTIONS = [{
+var START_TYPE_OPTIONS = [{
   value: 'nil',
   label: '无',
   icon: 'topo_startEndPoint_icon_nothing'
 }, {
   value: 'hollowCrcial',
   label: '空心圆',
-  icon: 'topo_startEndPoint_icon_hollow_cricle'
+  icon: 'topo_startPoint_icon_hollow_cricle'
 }, {
   value: 'solidCricle',
   label: '实心圆',
-  icon: 'topo_startEndPoint_icon_solid_cricle'
+  icon: 'topo_startPoint_icon_solid_cricle'
 }, {
   value: 'arrowPoint',
   label: '箭头',
-  icon: 'topo_startEndPoint_icon_arrow'
+  icon: 'topo_startPoint_icon_arrow'
+}];
+var END_TYPE_OPTIONS = [{
+  value: 'nil',
+  label: '无',
+  icon: 'topo_startEndPoint_icon_nothing'
+}, {
+  value: 'hollowCrcial',
+  label: '空心圆',
+  icon: 'topo_endPoint_icon_hollow_cricle'
+}, {
+  value: 'solidCricle',
+  label: '实心圆',
+  icon: 'topo_endPoint_icon_solid_cricle'
+}, {
+  value: 'arrowPoint',
+  label: '箭头',
+  icon: 'topo_endPoint_icon_arrow'
 }];
 var LINE_MOLD_OPTIONS = [{
   value: 'solidLine',
@@ -49,7 +66,7 @@ function EdgeType(props) {
     values: {
       startPoint: 'nil',
       endPoint: 'nil',
-      type: null
+      type: 'solidLine'
     },
     onChange: function onChange(name, value) {
       if (['startPoint', 'endPoint'].includes(name) && value === 'nil') {
@@ -77,7 +94,7 @@ function EdgeType(props) {
         return trigger.parentNode;
       }
     }
-  }, START_END_TYPE_OPTIONS.map(function (item, index, array) {
+  }, START_TYPE_OPTIONS.map(function (item, index) {
     return /*#__PURE__*/React.createElement(Option, {
       value: item.value,
       key: index,
@@ -97,7 +114,7 @@ function EdgeType(props) {
         return trigger.parentNode;
       }
     }
-  }, START_END_TYPE_OPTIONS.map(function (item, index, array) {
+  }, END_TYPE_OPTIONS.map(function (item, index) {
     return /*#__PURE__*/React.createElement(Option, {
       value: item.value,
       key: index,
@@ -118,7 +135,7 @@ function EdgeType(props) {
       }
     },
     placeholder: ""
-  }, LINE_MOLD_OPTIONS.map(function (item, index, array) {
+  }, LINE_MOLD_OPTIONS.map(function (item, index) {
     return /*#__PURE__*/React.createElement(Option, {
       value: item.value,
       key: index,

package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.module.scss

@@ -38,9 +38,7 @@
     }
     .#{$css-prefix}input.#{$css-prefix}medium .#{$css-prefix}input-text-field {
       line-height: calc(28px - 10px * 2);
-    }
-    .#{$css-prefix}select-trigger-search {
-      height: 12px;
+      padding: 0 7px;
     }
   }
 }

package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.js

@@ -1,6 +1,8 @@
 import _Button from "@alifd/next/es/button";
+import _Balloon from "@alifd/next/es/balloon";
 import React, { useState } from 'react';
 import styles from "./LineType.module.scss";
+var Tooltip = _Balloon.Tooltip;
 var LINE_TYPE_OPTIONS = [{
   value: 'boundary',
   label: '直线',
@@ -25,12 +27,9 @@ var LINE_TYPE_OPTIONS = [{
 
 function LineType(props) {
   var onChange = props.onChange;
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.lineType
-  }, LINE_TYPE_OPTIONS.map(function (item, index, array) {
+
+  function lineButton(item) {
     return /*#__PURE__*/React.createElement(_Button, {
-      key: index,
-      title: item.label,
       className: "" + styles.redioBtn,
       onClick: function onClick() {
         onChange(item.value);
@@ -40,6 +39,16 @@ function LineType(props) {
       alt: "",
       className: styles.iconImg
     }));
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.lineType
+  }, LINE_TYPE_OPTIONS.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      trigger: lineButton(item),
+      align: "br",
+      key: index
+    }, item.label);
   }));
 }
 

package/es/core/editor/components/Toolbar/widgets/HistoryRedoButton.js

@@ -15,7 +15,7 @@ function HistoryRedoButton(props) {
     tooltip: "\u6062\u590D",
     showLabel: showLabel
   }, /*#__PURE__*/React.createElement(ButtonBox, null, /*#__PURE__*/React.createElement("img", {
-    src: "/img/topo/editor/toolbar/redo/" + (disabled ? 'Disable' : 'Normal') + ".svg",
+    src: "/img/topo/editor/toolbar/undo/" + (disabled ? 'Disable' : 'Normal') + ".svg",
     alt: ""
   })));
 }

package/es/core/editor/components/Toolbar/widgets/HistoryUndoButton.js

@@ -14,7 +14,7 @@ function HistoryUndoButton(props) {
   return /*#__PURE__*/React.createElement(WidgetBox, {
     disabled: disabled,
     label: "\u64A4\u9500",
-    tooltip: "\u64A4\u9500",
+    tooltip: disabled ? '无法撤销' : '撤销（Ctrl/ ⌘+Z）',
     showLabel: showLabel
   }, /*#__PURE__*/React.createElement(ButtonBox, {
     disabled: disabled,
@@ -22,7 +22,7 @@ function HistoryUndoButton(props) {
       topo.historyManager.undo();
     }
   }, /*#__PURE__*/React.createElement("img", {
-    src: "/img/topo/editor/toolbar/undo/" + (disabled ? 'Disable' : 'Normal') + ".svg",
+    src: "/img/topo/editor/toolbar/redo/" + (disabled ? 'Disable' : 'Normal') + ".svg",
     alt: ""
   })));
 }

package/es/core/editor/components/Toolbar/widgets/IconSelect/IconSelect.js

@@ -0,0 +1,109 @@
+import _Select from "@alifd/next/es/select";
+import React, { useState, useEffect, useImperativeHandle } from 'react';
+import styles from "./index.module.scss";
+import PopUpContent from "./popUpContent";
+
+var TopoIconSelect = function TopoIconSelect(props, ref) {
+  // 传入参数
+  var value = props.value,
+      iconList = props.iconList,
+      onChange = props.onChange;
+
+  var _useState = useState(value),
+      valueData = _useState[0],
+      setValue = _useState[1];
+
+  var _useState2 = useState(),
+      selectItem = _useState2[0],
+      setSelect = _useState2[1];
+
+  var _useState3 = useState(false),
+      visible = _useState3[0],
+      setVisible = _useState3[1];
+
+  useEffect(function () {
+    if (value) {
+      for (var i = 0; i < iconList.length; i++) {
+        var icons = iconList[i].icons;
+        var flag = false;
+
+        for (var m = 0; m < icons.length; m++) {
+          if (value === icons[m].id) {
+            flag = true;
+            setSelect(icons[m]);
+            break;
+          }
+        }
+
+        if (flag) {
+          break;
+        }
+      }
+    }
+  }, [value]);
+  useImperativeHandle(ref, function () {
+    return {
+      getSelectData: getSelectData
+    };
+  });
+
+  var handleChange = function handleChange(v) {
+    console.log('handleChange: ', v);
+
+    if (typeof onChange === 'function') {
+      onChange(v.id);
+    }
+
+    setSelect(v);
+    setValue(v.id);
+    setVisible(false);
+  };
+
+  var getSelectData = function getSelectData() {
+    return valueData;
+  };
+
+  var valueRender = function valueRender(v) {
+    return selectItem ? /*#__PURE__*/React.createElement("span", {
+      className: styles.selected
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.iconImgWrapper
+    }, /*#__PURE__*/React.createElement("img", {
+      className: styles.iconImg,
+      alt: "",
+      src: selectItem === null || selectItem === void 0 ? void 0 : selectItem.url
+    })), /*#__PURE__*/React.createElement("span", {
+      className: styles.icontitle
+    }, selectItem === null || selectItem === void 0 ? void 0 : selectItem.name)) : null;
+  };
+
+  var onVisibleChange = function onVisibleChange(v) {
+    setVisible(v);
+  };
+
+  var popupContent = /*#__PURE__*/React.createElement(PopUpContent, {
+    iconList: iconList,
+    selectedId: selectItem === null || selectItem === void 0 ? void 0 : selectItem.id,
+    onChange: handleChange
+  });
+  var popupProps = {
+    triggerClickKeycode: [13, 32, 40] // space, enter, down-arrow
+
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.TopoIconSelect
+  }, /*#__PURE__*/React.createElement(_Select, {
+    placeholder: "\u8BF7\u9009\u62E9",
+    visible: visible,
+    className: styles.iconSelect,
+    onVisibleChange: onVisibleChange,
+    value: valueData,
+    valueRender: valueRender,
+    dataSource: iconList,
+    onChange: handleChange,
+    popupProps: popupProps,
+    popupContent: popupContent
+  }));
+};
+
+export default /*#__PURE__*/React.forwardRef(TopoIconSelect);

package/es/core/editor/components/Toolbar/widgets/IconSelect/constant.js

@@ -0,0 +1,64 @@
+export var iconList = [{
+  id: '1',
+  name: '图片库1',
+  icons: [{
+    id: '001',
+    name: '图片一',
+    url: '/img/model/switch.svg',
+    icon: 'switch'
+  }, {
+    id: '002',
+    name: '图片二',
+    url: '/img/model/backupOnError.svg',
+    icon: 'res_terminal'
+  }, {
+    id: '003',
+    name: '图片三',
+    url: '/img/model/linuxServer.svg',
+    icon: 'res_linux'
+  }, {
+    id: '004',
+    name: '图片一',
+    url: '/img/model/switch.svg',
+    icon: 'switch'
+  }, {
+    id: '005',
+    name: '图片二',
+    url: '/img/model/backupOnError.svg',
+    icon: 'res_terminal'
+  }, {
+    id: '005',
+    name: '图片三',
+    url: '/img/model/linuxServer.svg',
+    icon: 'res_linux'
+  }, {
+    id: '006',
+    name: '图片一',
+    url: '/img/model/switch.svg',
+    icon: 'switch'
+  }, {
+    id: '007',
+    name: '图片二',
+    url: '/img/model/backupOnError.svg',
+    icon: 'res_terminal'
+  }, {
+    id: '008',
+    name: '图片三',
+    url: '/img/model/linuxServer.svg',
+    icon: 'res_linux'
+  }]
+}, {
+  id: '2',
+  name: '图片库2',
+  icons: [{
+    id: '004',
+    name: '图片四',
+    url: '/img/model/tree_child.svg',
+    icon: 'tree_child'
+  }, {
+    id: '005',
+    name: '图片五',
+    url: '/img/model/commonNetwork.svg',
+    icon: 'res_storage'
+  }]
+}];

package/es/core/editor/components/Toolbar/widgets/IconSelect/index.js

@@ -0,0 +1,101 @@
+import React, { useState, useEffect, useImperativeHandle } from 'react';
+import styles from "./index.module.scss";
+import PopUpContent from "./popUpContent";
+
+var TopoIconSelect = function TopoIconSelect(props, ref) {
+  // 传入参数
+  var value = props.value,
+      iconList = props.iconList,
+      onChange = props.onChange;
+
+  var _useState = useState(value),
+      valueData = _useState[0],
+      setValue = _useState[1];
+
+  var _useState2 = useState(),
+      selectItem = _useState2[0],
+      setSelect = _useState2[1];
+
+  var _useState3 = useState(false),
+      visible = _useState3[0],
+      setVisible = _useState3[1];
+
+  useEffect(function () {
+    if (value) {
+      for (var i = 0; i < iconList.length; i++) {
+        var icons = iconList[i].icons;
+        var flag = false;
+
+        for (var m = 0; m < icons.length; m++) {
+          if (value === icons[m].id) {
+            flag = true;
+            setSelect(icons[m]);
+            break;
+          }
+        }
+
+        if (flag) {
+          break;
+        }
+      }
+    }
+  }, [value]);
+  useImperativeHandle(ref, function () {
+    return {
+      getSelectData: getSelectData
+    };
+  });
+
+  var handleChange = function handleChange(v) {
+    console.log('handleChange: ', v);
+
+    if (typeof onChange === 'function') {
+      onChange(v.id);
+    }
+
+    setSelect(v);
+    setValue(v.id);
+    setVisible(false);
+  };
+
+  var getSelectData = function getSelectData() {
+    return valueData;
+  };
+
+  var valueRender = function valueRender(v) {
+    return selectItem ? /*#__PURE__*/React.createElement("span", {
+      className: styles.selected
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.iconImgWrapper
+    }, /*#__PURE__*/React.createElement("img", {
+      className: styles.iconImg,
+      alt: "",
+      src: selectItem === null || selectItem === void 0 ? void 0 : selectItem.url
+    })), /*#__PURE__*/React.createElement("span", {
+      className: styles.icontitle
+    }, selectItem === null || selectItem === void 0 ? void 0 : selectItem.name)) : null;
+  };
+
+  var onVisibleChange = function onVisibleChange(v) {
+    setVisible(v);
+  };
+
+  var popupContent = /*#__PURE__*/React.createElement(PopUpContent, {
+    iconList: iconList,
+    selectedId: selectItem === null || selectItem === void 0 ? void 0 : selectItem.id,
+    onChange: handleChange
+  });
+  var popupProps = {
+    triggerClickKeycode: [13, 32, 40] // space, enter, down-arrow
+
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.TopoIconSelect
+  }, /*#__PURE__*/React.createElement(PopUpContent, {
+    iconList: iconList,
+    selectedId: selectItem === null || selectItem === void 0 ? void 0 : selectItem.id,
+    onChange: handleChange
+  }));
+};
+
+export default /*#__PURE__*/React.forwardRef(TopoIconSelect);