@riil-frontend/component-topology 2.3.21 → 2.4.0

package/es/core/editor/components/settings/text/TextPropertyView.js

@@ -1,77 +1,20 @@
-import _NumberPicker from "@alifd/next/lib/number-picker";
-import _Input from "@alifd/next/lib/input";
+import _Form from "@alifd/next/lib/form";
 import _Field from "@alifd/next/lib/field";
 import _extends from "@babel/runtime/helpers/extends";
-import _Radio from "@alifd/next/lib/radio";
 import _Collapse from "@alifd/next/lib/collapse";
-import _Select from "@alifd/next/lib/select";
-import _Grid from "@alifd/next/lib/grid";
-import _Form from "@alifd/next/lib/form";
-import React, { useState, useEffect } from 'react';
-import ColorPicker from "../../LinkDynamicStyleSettingDrawer/rule/ColorPicker";
-import GroupNodeList from "../group/GroupNodeList/GroupNodeList";
-import ResourceSelectButton from "../group/GroupNodeList/ResourceSelectButton";
-var FormItem = _Form.Item;
-var Row = _Grid.Row,
-    Col = _Grid.Col;
-var Option = _Select.Option;
+import React, { useEffect } from 'react';
+import TextStyle from "../common/text/TextStyle";
+import fontStyleUtil from "../common/text/fontStyleUtil";
 var CollapsePanel = _Collapse.Panel;
-var RadioGroup = _Radio.Group; // 字体样式格式 label.font: bold italic 12px 黑体 / 12px 黑体
-
-var fontStyleUtil = {
-  toMap: function toMap(font, prefix) {
-    if (font === void 0) {
-      font = '';
-    }
-
-    var arr = font.trim().split(' ');
-    var bold = font.indexOf('bold') > -1;
-    var italic = font.indexOf('bold') > -1;
-    var map = {
-      fontFamily: arr[1],
-      fontSize: parseInt(arr[0].replace('px', ''), 10),
-      bold: bold,
-      italic: italic,
-      underline: false
-    };
-    return Object.keys(map).reduce(function (result, key) {
-      result["" + prefix + key] = map[key];
-      return result;
-    }, {});
-  },
-  getFontStyleMap: function getFontStyleMap(obj, prefix) {
-    var map = {};
-    Object.keys(obj).forEach(function (key) {
-      if (key.startsWith(prefix)) {
-        map[key.replace(prefix, '')] = obj[key];
-      }
-    });
-    console.error(obj, prefix, map);
-    return map;
-  },
-  build: function build(style) {
-    return style.fontSize + "px " + style.fontFamily;
-  }
-}; // 线型--node.s('dash',false) ---false代表是实线，默认为true代表虚线
-// 线型为实线时设置颜色--node.s('borderColor','rgba(0,0,0,0.00)') //默认颜色rgba(0,0,0,0.00)
-// 线型为虚线时设置颜色--node.s('dashColor','rgb(173,173,173)') //默认颜色rgb(173,173,173)
-// 线宽--node.s('borderWidth',1)//默认宽度是1
-//
-//
-// 为了实现切换时更好的效果，在设置线型为虚线时可以这样设置：
-// node.s('dash',true);
-// node.s('borderColor','rgba(0,0,0,0.00)');//将borderColor改为默认
-// node.s('dashColor','当前设置的颜色')
-// 虚线颜色用的是dashColor
-//
-// 设置线型为实线时
-// node.s('dash',false);
-// node.s('borderColor','当前设置的颜色');
-// node.s('dashColor','rgb(173,173,173)');dash可设置为默认
-// 实线用的是borderColor
 
 function parseValues(values) {
-  return _extends({}, values, fontStyleUtil.toMap(values['styleMap.text.font'], 'styleMap.text.fontStyle.'));
+  return _extends({}, values, {
+    'styleMap.textObj': {
+      color: values.styleMap['text.color'],
+      underline: values.styleMap['text.decoration'] === 'underline',
+      font: fontStyleUtil.toMap(values.styleMap['text.font'])
+    }
+  });
 }
 
 export default function TextPropertyView(props) {
@@ -86,15 +29,18 @@ export default function TextPropertyView(props) {
     onChange: function onChange(name, value) {
       var newValues = field.getValues(); // 文字font样式
 
-      if (name.startsWith('styleMap.text.fontStyle.')) {
-        name = 'styleMap.text.font';
-        value = fontStyleUtil.build(fontStyleUtil.getFontStyleMap(newValues, 'styleMap.text.fontStyle.'));
-      } // 层间线
+      if (name === 'styleMap.textObj') {
+        _onChange('styleMap.text.color', value.color, newValues);
+
+        _onChange('styleMap.label.color', value.color, newValues);
+
+        var font = fontStyleUtil.build(value);
+
+        _onChange('styleMap.text.font', font, newValues);
 
+        _onChange('styleMap.text.decoration', value.underline ? 'underline' : undefined, newValues);
 
-      if (name === 'styleMap.borderType') {
-        name = 'styleMap.dash';
-        value = value === 'dash';
+        return;
       }
 
       if (values[name] !== value) {
@@ -106,84 +52,25 @@ export default function TextPropertyView(props) {
   useEffect(function () {
     field.setValues(parseValues(values));
   }, [values]);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Form, {
-    field: field,
-    labelAlign: "top"
-  }, /*#__PURE__*/React.createElement(_Form.Item, {
-    label: "\u540D\u79F0",
+  return /*#__PURE__*/React.createElement("div", {
     style: {
-      paddingLeft: 12,
-      paddingRight: 12
+      paddingTop: 8
     }
-  }, /*#__PURE__*/React.createElement(_Input, {
-    name: "styleMap.text"
-  })), /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(_Collapse, {
+  }, /*#__PURE__*/React.createElement(_Form, {
+    field: field,
+    labelAlign: "top"
+  }, /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(_Collapse, {
     defaultExpandedKeys: ['显示设置'],
     style: {
       border: 'none'
     }
   }, /*#__PURE__*/React.createElement(CollapsePanel, {
     key: "\u663E\u793A\u8BBE\u7F6E",
-    title: "\u663E\u793A\u8BBE\u7F6E"
-  }, /*#__PURE__*/React.createElement(_Form.Item, {
-    label: "\u5B57\u4F53"
-  }, /*#__PURE__*/React.createElement(_Select, {
-    name: "styleMap.text.fontStyle.fontFamily",
-    style: {
-      width: '100%',
-      marginRight: 8
-    }
-  }, /*#__PURE__*/React.createElement(Option, {
-    value: "\u5B8B\u4F53"
-  }, /*#__PURE__*/React.createElement("div", {
+    title: "\u663E\u793A\u8BBE\u7F6E",
     style: {
-      fontFamily: '宋体'
+      padding: 0
     }
-  }, "\u5B8B\u4F53")), /*#__PURE__*/React.createElement(Option, {
-    value: "\u9ED1\u4F53"
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontFamily: '宋体'
-    }
-  }, "\u9ED1\u4F53")), /*#__PURE__*/React.createElement(Option, {
-    value: "Arial"
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontFamily: 'Arial'
-    }
-  }, "Arial")))), /*#__PURE__*/React.createElement(_Form.Item, {
-    label: "\u5B57\u53F7",
-    hasFeedback: true,
-    required: true,
-    requiredMessage: "\u4E0D\u80FD\u4E3A\u7A7A",
-    requiredTrigger: "onBlur",
-    asterisk: false
-  }, /*#__PURE__*/React.createElement(_NumberPicker, {
-    name: "styleMap.text.fontStyle.fontSize",
-    min: 8,
-    max: 36,
-    style: {
-      width: '100%',
-      marginRight: 8
-    },
-    placeholder: "\u8BF7\u8F93\u5165"
-  })), /*#__PURE__*/React.createElement(_Form.Item, {
-    label: "\u6837\u5F0F"
-  }, /*#__PURE__*/React.createElement(RadioGroup, {
-    shape: "button"
-  }, /*#__PURE__*/React.createElement(_Radio, {
-    id: "banana",
-    value: "banana"
-  }, "B"), /*#__PURE__*/React.createElement(_Radio, {
-    id: "watermelon",
-    value: "watermelon"
-  }, "I"), /*#__PURE__*/React.createElement(_Radio, {
-    id: "peach",
-    value: "peach"
-  }, "U"))), /*#__PURE__*/React.createElement(_Form.Item, {
-    label: "\u989C\u8272"
-  }, /*#__PURE__*/React.createElement(ColorPicker, {
-    name: "styleMap.text.color",
-    align: "bl"
+  }, /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(TextStyle, {
+    name: "styleMap.textObj"
   })))))));
 }

package/es/core/editor/components/settings/view/ViewPropertyView.js

@@ -13,7 +13,7 @@ import { getIconMap } from "../group/GroupNodeList/icon";
 import LayoutSettings from "../common/LayoutSettings";
 import LineType from "../common/LineType";
 import NodeAlignType from "../common/NodeAlignType";
-import NodeSizeInput from "../common/NodeSizeInput";
+import NodeSizeInput from "../common/NodeSizeInput/NodeSizeInput";
 var FormItem = _Form.Item;
 var Row = _Grid.Row,
     Col = _Grid.Col;

package/es/core/editor/{buildContextmenu.d.ts → contextmenu/buildContextmenu.d.ts}

@@ -1,9 +1,6 @@
 export default function buildContextmenu(topoApp: any): {
     node: {
         enable: boolean;
-        items: {
-            label: string;
-            id: string;
-        }[];
+        items: any[];
     };
 };

package/es/core/editor/contextmenu/buildContextmenu.js

@@ -0,0 +1,10 @@
+export default function buildContextmenu(topoApp) {
+  return {
+    node: {
+      enable: true,
+      items: [// { label: '打开属性设置', id: 'openSet' },
+        // { label: '打开全局属性设置', id: 'openAllSet' },
+      ]
+    }
+  };
+}

package/es/hooks/useSelection.js

@@ -10,7 +10,9 @@ function getElementData(element) {
     // 业务id
     name: element.getName(),
     attrObject: element.getAttrObject(),
-    styleMap: element.getStyleMap()
+    attr: element.getAttrObject(),
+    styleMap: element.getStyleMap(),
+    style: element.getStyleMap()
   };
 
   if (className === 'ht.Edge') {
@@ -51,18 +53,22 @@ export default function (props) {
     var selectionModel = topoApp.getSelectionModel();
     updateSelection();
     selectionModel.addSelectionChangeListener(function (e) {
-      // console.info('SelectionChange');
+      // console.info('selectionChangeListener', e);
       updateSelection();
     });
     dataModel.addDataPropertyChangeListener(function (e) {
       var property = e.property,
           data = e.data;
+
+      if (['position'].indexOf(property) !== -1) {
+        return;
+      }
+
       var selectionIds = selectionModel.getSelection().getArray().map(function (item) {
         return item.getId();
       });
 
       if (selectionIds.indexOf(data.getId()) > -1) {
-        // console.info('DataPropertyChange');
         updateSelection();
       }
     });

package/es/plugins/useSelectionPlugin.d.ts

@@ -0,0 +1,23 @@
+export default useTableSelectionPlugin;
+/**
+ * Modified version of @ahooksjs/use-selection-plugin.
+ * Selected keys can be persistent across page changes, if not be reset.
+ */
+declare function useTableSelectionPlugin(options?: {}): {
+    middlewares: (ctx: any, next: any) => any;
+    props: () => {
+        tableProps: {
+            rowSelection: {
+                onChange: (selectedRowKeys: any, records: any) => void;
+                selectedRowKeys: any;
+                mode: any;
+                getProps: (record: any) => {
+                    disabled: any;
+                };
+            };
+            primaryKey: any;
+        };
+        getSelectedRowKeys: () => any;
+        setSelectedRowKeys: (selectedRowKeys: any) => void;
+    };
+};

package/es/plugins/useSelectionPlugin.js

@@ -0,0 +1,84 @@
+import { useState } from 'react';
+/**
+ * Modified version of @ahooksjs/use-selection-plugin.
+ * Selected keys can be persistent across page changes, if not be reset.
+ */
+
+var useTableSelectionPlugin = function useTableSelectionPlugin(options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  var _useState = useState({
+    selectedRowKeys: options.defaultSelectedRowKeys || []
+  }),
+      state = _useState[0],
+      setSelectedRowKeys = _useState[1];
+
+  var _options = options,
+      _options$primaryKey = _options.primaryKey,
+      primaryKey = _options$primaryKey === void 0 ? 'id' : _options$primaryKey,
+      _options$mode = _options.mode,
+      mode = _options$mode === void 0 ? 'multiple' : _options$mode,
+      _options$checkIsNeedR = _options.checkIsNeedReset,
+      checkIsNeedReset = _options$checkIsNeedR === void 0 ? function () {
+    return true;
+  } : _options$checkIsNeedR,
+      checkIsDisabled = _options.checkIsDisabled;
+
+  var onChange = function onChange(selectedRowKeys, records) {
+    setSelectedRowKeys({
+      selectedRowKeys: selectedRowKeys
+    });
+  };
+
+  var getSelectedRowKeys = function getSelectedRowKeys() {
+    return state.selectedRowKeys;
+  };
+
+  var $setSelectedRowKeys = function $setSelectedRowKeys(selectedRowKeys) {
+    setSelectedRowKeys({
+      selectedRowKeys: selectedRowKeys
+    });
+  };
+
+  return {
+    middlewares: function middlewares(ctx, next) {
+      var isNeedReset = checkIsNeedReset(ctx);
+
+      if (isNeedReset) {
+        return next().then(function () {
+          setSelectedRowKeys({
+            selectedRowKeys: []
+          });
+        });
+      }
+
+      return next();
+    },
+    props: function props() {
+      var getProps = checkIsDisabled ? function (record) {
+        return {
+          disabled: checkIsDisabled(record)
+        };
+      } : undefined;
+      return {
+        tableProps: {
+          rowSelection: {
+            // onSelect,
+            // onSelectAll,
+            onChange: onChange,
+            selectedRowKeys: state.selectedRowKeys,
+            mode: mode,
+            getProps: getProps
+          },
+          primaryKey: primaryKey
+        },
+        getSelectedRowKeys: getSelectedRowKeys,
+        setSelectedRowKeys: $setSelectedRowKeys
+      };
+    }
+  };
+};
+
+export default useTableSelectionPlugin;

package/es/style.js

@@ -25,6 +25,7 @@ import '@alifd/next/lib/tab/style';
 import '@alifd/next/lib/radio/style';
 import '@alifd/next/lib/collapse/style';
 import '@alifd/next/lib/list/style';
+import '@alifd/next/lib/tree-select/style';
 import '@alifd/next/lib/avatar/style';
 
 import './index.scss';

package/es/utils/topoData.js

@@ -4,7 +4,7 @@ import { isAvailableArray } from '@riil-frontend/utils';
 import _ from 'lodash';
 import topoPermissionUtil from "./topoPermissionUtil";
 import buildViewerContextMenu from "../core/viewer/contextmenu/buildContextmenu";
-import buildEditorContextMenu from "../core/editor/buildContextmenu";
+import buildEditorContextMenu from "../core/editor/contextmenu/buildContextmenu";
 import { getDefaultNodeIcon as _getDefaultNodeIcon } from "./topoIconUtil";
 import mergeContextmenu from "../core/common/contextmenu/mergeContextmenu";
 /**

package/lib/components/Drawer/index.js

@@ -44,7 +44,8 @@ var Drawer = function Drawer(props) {
     width: "40%",
     headerStyle: headerStyle,
     bodyStyle: bodyStyle,
-    closeMode: ['close', 'esc']
+    closeMode: ['close', 'esc'],
+    className: _indexModule["default"].drawer
   }, drawerProps, {
     visible: visible,
     onClose: onClose

package/lib/components/Drawer/index.module.scss

@@ -1,3 +1,16 @@
+.drawer {
+  & > div {
+    display: flex;
+  }
+
+  :global {
+    .next-drawer-body {
+      flex: 1;
+    }
+  }
+}
+
+
 .footer {
   position: absolute;
   bottom: 0;

package/lib/components/ResourceList/ResourceSelect.js

@@ -21,7 +21,7 @@ var _useFilterPlugin = _interopRequireDefault(require("@ahooksjs/use-filter-plug
 
 var _useSortablePlugin = _interopRequireDefault(require("@ahooksjs/use-sortable-plugin"));
 
-var _useSelectionPlugin = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/plugins/useSelectionPlugin"));
+var _useSelectionPlugin = _interopRequireDefault(require("../../plugins/useSelectionPlugin"));
 
 var _cmdb = require("@riil-frontend/component-topology-utils/es/services/cmdb");
 
@@ -33,6 +33,8 @@ var _format = require("../../utils/format");
 
 var _FormTable = _interopRequireDefault(require("../FormTable"));
 
+var _ResourceSelectModule = _interopRequireDefault(require("./ResourceSelect.module.scss"));
+
 var PRIMARY_KEY = 'id';
 
 var getTableData = /*#__PURE__*/function () {
@@ -204,7 +206,7 @@ var ResourceList = function ResourceList(props, ref) {
     }
   }];
   return /*#__PURE__*/_react["default"].createElement(_FormTable["default"], {
-    className: className,
+    className: className || _ResourceSelectModule["default"].table,
     formProps: formProps,
     tableProps: tableProps,
     paginationProps: paginationProps,

package/lib/components/ResourceList/ResourceSelect.module.scss

@@ -0,0 +1,7 @@
+.table {
+  height: 100%;
+  :global {
+    .next-table-body {
+    }
+  }
+}

package/lib/components/ResourceSelect/ResourceSelectDrawer.js

@@ -19,7 +19,7 @@ var _Drawer = _interopRequireDefault(require("../Drawer"));
 
 var _ResourceSelectDrawerModule = _interopRequireDefault(require("./ResourceSelectDrawer.module.scss"));
 
-var _excluded = ["visible", "setVisible", "onAdd", "getTableData", "onOk"];
+var _excluded = ["visible", "setVisible", "onAdd", "getTableData", "onOk", "layer", "topo"];
 
 function ResourceSelectDrawer(props) {
   var visible = props.visible,
@@ -27,6 +27,8 @@ function ResourceSelectDrawer(props) {
       onAdd = props.onAdd,
       getTableData = props.getTableData,
       onOk = props.onOk,
+      layer = props.layer,
+      topo = props.topo,
       otherProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
   var tableRef = (0, _react.useRef)(); // TODO 默认处理
 

package/lib/core/{editor/components/settings/group/GroupNodeList → common}/icons/defaultIcons.d.ts

@@ -1,3 +1,18 @@
+export const DEFAULT_NODE_ICONS: ({
+    url: any;
+    id: string;
+    name: string;
+    ciType: string;
+    jsonUrl: string;
+    oldId: string;
+} | {
+    url: any;
+    id: string;
+    name: string;
+    jsonUrl: string;
+    oldId: string;
+    ciType?: undefined;
+})[];
 declare var _default: {
     'editor.icon.cloud.small': {
         url: string;

package/lib/core/{editor/components/settings/group/GroupNodeList → common}/icons/defaultIcons.js

@@ -1,7 +1,74 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
-exports["default"] = void 0;
+exports["default"] = exports.DEFAULT_NODE_ICONS = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var DEFAULT_NODE_ICONS = [{
+  id: 'ciType/network.switch',
+  name: '交换机',
+  ciType: 'network.switch',
+  jsonUrl: '/ht/image/topo/l/交换机_96.json',
+  oldId: 'editor.icon.switch'
+}, {
+  id: 'ciType/network.coreswitch',
+  name: '核心交换机',
+  jsonUrl: '/ht/image/topo/l/核心交换机_96.json',
+  oldId: 'editor.icon.coreswitch'
+}, {
+  id: 'ciType/network.router',
+  name: '路由器',
+  ciType: 'network.router',
+  jsonUrl: '/ht/image/topo/l/路由器_96.json',
+  oldId: 'editor.icon.router'
+}, {
+  id: 'ciType/db',
+  name: '数据库',
+  jsonUrl: '/ht/image/topo/l/数据库_96.json',
+  oldId: 'editor.icon.db'
+}, {
+  id: 'dc',
+  name: '数据中心',
+  jsonUrl: '/ht/image/topo/l/数据中心_144.json',
+  oldId: 'editor.icon.dc'
+}, {
+  id: 'firewall',
+  name: '防火墙',
+  jsonUrl: '/ht/image/topo/l/防火墙_96.json',
+  oldId: 'editor.icon.firewall'
+}, {
+  id: 'server',
+  name: '服务器',
+  jsonUrl: '/ht/image/topo/l/服务器_96.json',
+  oldId: 'editor.icon.server'
+}, {
+  id: 'icon.cloud',
+  name: '云',
+  jsonUrl: '/ht/image/topo/l/云_144.json',
+  oldId: 'editor.icon.cloud'
+}, {
+  id: 'building',
+  name: '楼宇',
+  jsonUrl: '/ht/image/topo/l/楼宇_144.json',
+  oldId: 'editor.icon.building'
+}, {
+  id: 'internet',
+  name: '互联网',
+  jsonUrl: '/ht/image/topo/l/互联网_144.json',
+  oldId: 'editor.icon.internet'
+}].map(function (item) {
+  return (0, _extends2["default"])({}, item, {
+    url: item.url || item.jsonUrl.replace('.json', '.png')
+  });
+}); // 注册
+
+exports.DEFAULT_NODE_ICONS = DEFAULT_NODE_ICONS;
+DEFAULT_NODE_ICONS.forEach(function (icon) {
+  ht.Default.setImage(icon.id, icon.jsonUrl || icon.url);
+});
 var _default = {
   'editor.icon.cloud.small': {
     url: '/ht/image/topo/s/云_64.png',

package/lib/core/common/text.module.scss

@@ -0,0 +1,5 @@
+.textEllipsis {
+  overflow: hidden;
+  text-overflow:ellipsis;
+  white-space: nowrap;
+}

package/lib/core/editor/components/LinkDynamicStyleSettingDrawer/rule/ColorPicker.module.scss

@@ -1,11 +1,15 @@
-@import "@alifd/next/variables";
+@import "@alifd/theme-19926/variables";
 
 .swatch {
   background: #fff;
-  border-radius: 1px;
-  border: 1px solid var(--input-border-color);
+  border-radius: 4px;
+  border: 1px solid $input-border-color;
   display: inline-block;
   cursor: pointer;
   width: 70px;
   height: 28px;
+
+  &:hover {
+    border: 1px solid $input-hover-border-color;
+  }
 }

package/lib/core/editor/components/iconManage/UploadIconDialog.js

@@ -176,9 +176,9 @@ var UploadIconDialog = /*#__PURE__*/function (_React$Component) {
         type: _this.props.type,
         data: files.map(function (file) {
           return {
-            id: file.response.data,
+            id: file.response.result,
             name: getFileName(file),
-            url: _index["default"].icon.getDownloadUrl(file.response.data),
+            url: _index["default"].icon.getDownloadUrl(file.response.result),
             json: file.json
           };
         })