@riil-frontend/component-topology 6.0.0-alpha.2 → 6.0.0-alpha.21

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

@@ -1,4 +1,5 @@
-import React from 'react'; // import { Icon, Button } from '@alifd/next';
+import React from 'react';
+import ButtonBox from "./components/ButtonBox"; // import { Icon, Button } from '@alifd/next';
 
 import WidgetBox from "./WidgetBox";
 
@@ -13,15 +14,15 @@ 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(WidgetBox.ButtonBox, {
+  }, /*#__PURE__*/React.createElement(ButtonBox, {
     disabled: disabled,
     onClick: function onClick() {
       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);

package/es/core/editor/components/Toolbar/widgets/IconSelect/index.module.scss

@@ -0,0 +1,153 @@
+@import "@alifd/next/variables";
+
+.TopoIconSelect {
+
+
+  .iconSelect {}
+
+
+
+}
+
+.iconCollapse {
+  width: 240px;
+  max-height: 218px;
+  overflow-y: auto;
+  border: none;
+
+  :global {
+    .#{$css-prefix}collapse-panel-expanded {
+      .#{$css-prefix}collapse-panel-content {
+        padding: 0px 0px 5px 0px;
+      }
+    }
+
+    .#{$css-prefix}collapse-panel {
+      border-top: none;
+      background-color: #FFF;
+    }
+
+    .#{$css-prefix}collapse-panel-title {
+      background: none;
+      font-size: 12px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #4D6277;
+      line-height: 17px;
+    }
+
+    .#{$css-prefix}collapse-panel:not(:first-child) {
+      border-top: none;
+    }
+
+    .#{$css-prefix}collapse-panel-content {
+      padding: 0px 0px 5px 0px;
+    }
+  }
+}
+
+.iconSelect {
+  width: 100%;
+
+  .selected {
+    height: 26px;
+    display: block;
+
+    .iconImgWrapper {
+      display: inline-block;
+      width: 18px;
+      height: 18px;
+      line-height: 18px;
+      text-align: center;
+      // vertical-align: middle;
+    }
+
+    .iconImg {
+      display: inline-block;
+      width: auto;
+      height: auto;
+      max-width: 18px;
+      max-height: 18px;
+      vertical-align: middle;
+    }
+
+    .icontitle {
+      text-align: left;
+      vertical-align: top;
+      display: inline-block;
+      font-size: 12px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #4D6277;
+      //margin-top: 2px;
+      line-height: 26px;
+      margin-left: 7px;
+    }
+
+    :global {
+      .#{$css-prefix}tag {
+        background: none;
+      }
+    }
+  }
+}
+
+
+
+.collPanel {
+  padding: 5px;
+}
+
+
+
+
+.iconli {
+  width: 52px;
+  height: 68px;
+  text-align: center;
+  //border: 2px solid #FFF;
+  overflow: hidden;
+  cursor: pointer;
+
+  .iconImgWrapper {
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    margin: 5px 8px 5px 8px;
+  }
+
+  .iconImg {
+    display: inline-block;
+    width: auto;
+    height: auto;
+    max-width: 32px;
+    max-height: 32px;
+    vertical-align: middle;
+  }
+
+  .icontitle {
+    width: 48px;
+    max-width: 50px;
+    text-align: center;
+    font-size: 12px;
+    -webkit-text-size-adjust: none;
+    display: block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #4D6277;
+    line-height: 11px;
+  }
+
+
+  // float: left;
+}
+
+.selectedTag {
+  border-radius: 4px;
+  // border: 2px solid #4C89FF;
+  background-color: #F2F7FD;
+}

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

@@ -0,0 +1,49 @@
+import _Box from "@alifd/next/es/box";
+import _Collapse from "@alifd/next/es/collapse";
+import React from 'react';
+import styles from "./index.module.scss";
+var Panel = _Collapse.Panel;
+
+function PopUpContent(props) {
+  var iconList = props.iconList,
+      onChange = props.onChange,
+      selectedId = props.selectedId;
+
+  var itemOnClick = function itemOnClick(e) {
+    onChange(e);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Collapse, {
+    className: styles.iconCollapse
+  }, iconList.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(Panel, {
+      title: item.name,
+      key: index,
+      className: styles.collPanel
+    }, /*#__PURE__*/React.createElement(_Box, {
+      spacing: 4,
+      direction: "row",
+      wrap: true
+    }, item.icons.map(function (icon, idx) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: idx,
+        className: styles.iconli + " " + (selectedId === icon.id ? styles.selectedTag : ''),
+        onClick: function onClick() {
+          itemOnClick(icon);
+        },
+        title: icon.name
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.iconImgWrapper
+      }, /*#__PURE__*/React.createElement("img", {
+        className: styles.iconImg,
+        alt: "",
+        src: icon.url,
+        size: "xxl"
+      })), /*#__PURE__*/React.createElement("span", {
+        className: styles.icontitle
+      }, icon.name));
+    })));
+  })));
+}
+
+export default PopUpContent;

package/es/core/editor/components/Toolbar/widgets/Layout/components/LayoutSettings.js

@@ -0,0 +1,99 @@
+import _Form from "@alifd/next/es/form";
+import _Radio from "@alifd/next/es/radio";
+import React, { useState, useEffect } from 'react';
+import TemplateGroup from "./LayoutTagImageSelect";
+import styles from "./LayoutSettings.module.scss";
+var LAYOUTS = {
+  circular: '星型布局',
+  hierarchical: '均衡布局',
+  toward: '树形布局',
+  rectangle: '分层排布'
+};
+var TREE_LAYOUT_OPTIONS = [{
+  value: 'east',
+  label: '横向'
+}, {
+  value: 'south',
+  label: '纵向'
+}];
+
+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,
+      disabled = props.disabled;
+  var layoutId = layout.id,
+      layoutOptions = layout.options; // const [value, setValue] = useState();
+
+  var handleChange = function handleChange(data) {
+    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,
+      options: options
+    });
+  };
+
+  var layoutGroup = Object.keys(LAYOUTS).map(function (id) {
+    return {
+      id: id,
+      name: LAYOUTS[id],
+      icon: "layout_" + id,
+      selected: layoutId === id
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['layout-setting-template-group']
+  }, /*#__PURE__*/React.createElement(TemplateGroup, {
+    dataSource: layoutGroup,
+    value: layoutId,
+    size: size,
+    disabled: disabled,
+    onChange: onLayoutSelect,
+    boxProps: {
+      spacing: 12,
+      className: styles.tagBox
+    },
+    tagProps: {
+      className: styles.tag,
+      style: {
+        background: '#FFF'
+      },
+      type: 'primary'
+    },
+    itemProps: {
+      className: styles.card,
+      iconClassName: styles.icon,
+      textClassName: styles.text
+    }
+  }), layoutId === 'toward' ? /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u5E03\u5C40\u65B9\u5411"
+  }, /*#__PURE__*/React.createElement(_Radio.Group, {
+    dataSource: TREE_LAYOUT_OPTIONS,
+    defaultValue: layoutOptions.subId || TREE_LAYOUT_OPTIONS[0].value,
+    onChange: function onChange(subId) {
+      return handleChange({
+        id: layoutId,
+        options: {
+          subId: subId
+        }
+      });
+    }
+  })) : null);
+};
+
+export default LayoutSettings;

package/es/core/editor/components/Toolbar/widgets/Layout/components/LayoutSettings.module.scss

@@ -0,0 +1,70 @@
+@import "@alifd/next/variables";
+@import '@alifd/next/reset.scss';
+
+.label {
+  margin: 0 10px;
+}
+
+.tagBox {
+  color: #4D6277;
+
+
+  :global {
+    .checked {
+      // border: 2px solid $color-brand1-5 !important;
+      color: #4D6277 !important;
+      border-color: #fff !important;
+      background:#F2F7FD !important;
+    }
+  }
+}
+
+.tag {
+  // border: 2px solid $color-gitfill1-1 !important;
+  border-color: #fff !important;
+  color: #4D6277;
+
+  &:hover {
+    background-color: $color-brand1-1 !important;
+    border-color: #fff !important;
+    // border: 2px solid #FFFFFF;
+  }
+
+  &:active {
+    background-color: rgba(76, 137, 255, 0.1) !important;
+    border-color: #fff !important;
+    // border: 2px solid $color-brand1-5 !important;
+    color: $color-fill1-1;
+  }
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  width: 64px;
+  height: 76px;
+  border: none;
+  padding-top: 12px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: $color-brand1-1;
+  }
+
+  &:active {
+    background-color: rgba(76, 137, 255, 0.1);
+  }
+}
+
+.icon {
+  width: 30px;
+}
+
+.text {
+  height: 12px;
+  line-height: 12px;
+  font-size: 12px;
+  margin-top: 8px;
+  color: $color-text1-3;
+  outline: none;
+}