@riil-frontend/component-topology 2.5.4 → 2.6.0-alpha.0

package/es/components/TemplateButton/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["children", "icon", "id", "selected", "onSelect", "size"];
+var _excluded = ["className", "children", "icon", "id", "selected", "onSelect", "size"];
 import React from 'react';
 import classnames from 'classnames';
 import Icon from "./Icon";
@@ -9,7 +9,8 @@ import styles from "./index.module.scss";
 var TemplateButton = function TemplateButton(props) {
   var _classnames;
 
-  var children = props.children,
+  var className = props.className,
+      children = props.children,
       icon = props.icon,
       id = props.id,
       selected = props.selected,
@@ -23,7 +24,7 @@ var TemplateButton = function TemplateButton(props) {
   };
 
   return /*#__PURE__*/React.createElement("div", {
-    className: classnames(styles.card, (_classnames = {}, _classnames[styles.selected] = selected, _classnames[styles.sizeSmall] = size === 'small', _classnames)),
+    className: classnames(styles.card, className, (_classnames = {}, _classnames[styles.selected] = selected, _classnames[styles.sizeSmall] = size === 'small', _classnames[styles.sizeLarge] = size === 'large', _classnames)),
     onClick: handleClick
   }, /*#__PURE__*/React.createElement(Icon, _extends({
     className: styles.icon,

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

@@ -6,18 +6,23 @@
   justify-content: center;
   align-items: center;
   border: 1px solid #c4c6cf;
-  width: 100px;
-  height: 100px;
-  margin: 10px;
+  width: 120px;
+  height: 136px;
   background-color: #fff;
   text-align: center;
   cursor: pointer;
   vertical-align: middle;
+  margin-right: 12px;
 
   &:hover, &:focus, &.selected {
     border-color: $color-brand1-5;
   }
 
+  &.sizeNormal {
+    width: 120px;
+    height: 136px;
+  }
+
   &.sizeSmall {
     width: 50px;
     height: 50px;

package/es/components/TemplateGroup/index.js

@@ -1,3 +1,4 @@
+import _Box from "@alifd/next/lib/box";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import TemplateButton from "../TemplateButton";
@@ -7,17 +8,20 @@ var TemplateGroup = function TemplateGroup(props) {
   var name = props.name,
       _props$data = props.data,
       data = _props$data === void 0 ? [] : _props$data,
-      size = props.size;
+      size = props.size,
+      _props$itemProps = props.itemProps,
+      itemProps = _props$itemProps === void 0 ? {} : _props$itemProps;
   return /*#__PURE__*/React.createElement(React.Fragment, null, name && /*#__PURE__*/React.createElement("div", {
     className: styles.name
-  }, name), /*#__PURE__*/React.createElement("div", {
-    className: styles.buttons
+  }, name), /*#__PURE__*/React.createElement(_Box, {
+    direction: "row",
+    spacing: 32
   }, data.map(function (item) {
     return /*#__PURE__*/React.createElement(TemplateButton, _extends({
       key: item.id
     }, item, {
       size: size
-    }), item.name);
+    }, itemProps), item.name);
   })));
 };
 

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

@@ -1,7 +1,3 @@
 .name {
   margin: 20px 0 0 10px;
 }
-
-.buttons {
-  margin: 10px 0;
-}

package/es/components/TemplateSelect/index.d.ts

@@ -0,0 +1,2 @@
+export default TemplateSelect;
+declare function TemplateSelect(props: any): JSX.Element;

package/es/components/TemplateSelect/index.js

@@ -0,0 +1,32 @@
+import _Tag from "@alifd/next/lib/tag";
+import React from 'react';
+import TemplateButton from "../TemplateButton";
+import styles from "./index.module.scss";
+import TemplateGroup from "../TemplateGroup";
+var TagGroup = _Tag.Group,
+    SelectableTag = _Tag.Selectable;
+
+var TemplateSelect = function TemplateSelect(props) {
+  return /*#__PURE__*/React.createElement(TemplateGroup, props); // const { data = [], size } = props;
+  // return (
+  //   <TagGroup>
+  //     {data.map((item) => (
+  //       <SelectableTag
+  //         key={item.name}
+  //         checked={item.selected}
+  //         onChange={() => {}}
+  //       >
+  //         <TemplateButton
+  //           key={item.id}
+  //           {...item}
+  //           size={size}
+  //         >
+  //           {item.name}
+  //         </TemplateButton>
+  //       </SelectableTag>
+  //     ))}
+  //   </TagGroup>
+  // )
+};
+
+export default TemplateSelect;

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

@@ -0,0 +1,3 @@
+.name {
+  margin: 20px 0 0 10px;
+}

package/es/core/components/titlebar/TitleBar.module.scss

@@ -1,6 +1,5 @@
 .titlebar {
   display: flex;
-  padding: 16px;
 
   .left {
     display: flex;
@@ -12,6 +11,10 @@
 
   }
 
+  &.titlebarViewMode {
+    padding: 16px 16px 16px 0;
+  }
+
   &.titlebarEditMode {
     padding: 10px 16px;
   }

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

@@ -101,7 +101,7 @@ function NodeSizeInput(props) {
   };
 
   function parseValue(val) {
-    return val ? parseInt(val) : val;
+    return val ? Math.round(val) : val;
   }
 
   return /*#__PURE__*/React.createElement(_Form, {

package/es/core/editor/components/settings/common/text/TextStyle.js

@@ -80,6 +80,12 @@ export default function TextStyle(props) {
       fontFamily: '宋体'
     }
   }, "\u5B8B\u4F53")), /*#__PURE__*/React.createElement(Option, {
+    value: "\u5FAE\u8F6F\u96C5\u9ED1"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontFamily: '微软雅黑'
+    }
+  }, "\u5FAE\u8F6F\u96C5\u9ED1")), /*#__PURE__*/React.createElement(Option, {
     value: "\u9ED1\u4F53"
   }, /*#__PURE__*/React.createElement("div", {
     style: {

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

@@ -1,4 +1,5 @@
 import _Form from "@alifd/next/lib/form";
+import _Input from "@alifd/next/lib/input";
 import _Field from "@alifd/next/lib/field";
 import _extends from "@babel/runtime/helpers/extends";
 import _Collapse from "@alifd/next/lib/collapse";
@@ -70,7 +71,16 @@ export default function TextPropertyView(props) {
     style: {
       padding: 0
     }
-  }, /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(TextStyle, {
+  }, /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u6587\u672C"
+  }, /*#__PURE__*/React.createElement(_Input.TextArea, {
+    name: "styleMap.text",
+    autoHeight: {
+      minRows: 4,
+      maxRows: 4
+    },
+    placeholder: "\u8F93\u5165\u6587\u672C"
+  })), /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(TextStyle, {
     name: "styleMap.textObj"
   })))))));
 }

package/es/core/viewer/components/titlebar/TopoViewerTitleBar.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
+import classnames from 'classnames';
 import ViewerTools from "./ViewerTools";
 import styles from "../../../components/titlebar/TitleBar.module.scss";
 import SearchWidget from "./widgets/SearchWidget";
@@ -8,7 +9,7 @@ export default function TopoViewerTitleBar(props) {
       onEnterEdit = props.onEnterEdit,
       children = props.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: styles.titlebar
+    className: classnames(styles.titlebar, styles.titlebarViewMode)
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.left
   }, children || /*#__PURE__*/React.createElement(SearchWidget, {

package/es/utils/tree.js

@@ -40,7 +40,6 @@ export function formatTree(json, funcPermissions) {
         type: type,
         name: name,
         showDefault: showDefault,
-        icon: iconImg[type],
         permission: node.operation,
         children: node !== null && node !== void 0 && node.children ? loop(node.children) : []
       };

package/lib/components/TemplateButton/index.js

@@ -17,12 +17,13 @@ var _Icon = _interopRequireDefault(require("./Icon"));
 
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
 
-var _excluded = ["children", "icon", "id", "selected", "onSelect", "size"];
+var _excluded = ["className", "children", "icon", "id", "selected", "onSelect", "size"];
 
 var TemplateButton = function TemplateButton(props) {
   var _classnames;
 
-  var children = props.children,
+  var className = props.className,
+      children = props.children,
       icon = props.icon,
       id = props.id,
       selected = props.selected,
@@ -36,7 +37,7 @@ var TemplateButton = function TemplateButton(props) {
   };
 
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames2["default"])(_indexModule["default"].card, (_classnames = {}, _classnames[_indexModule["default"].selected] = selected, _classnames[_indexModule["default"].sizeSmall] = size === 'small', _classnames)),
+    className: (0, _classnames2["default"])(_indexModule["default"].card, className, (_classnames = {}, _classnames[_indexModule["default"].selected] = selected, _classnames[_indexModule["default"].sizeSmall] = size === 'small', _classnames[_indexModule["default"].sizeLarge] = size === 'large', _classnames)),
     onClick: handleClick
   }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], (0, _extends2["default"])({
     className: _indexModule["default"].icon,

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

@@ -6,18 +6,23 @@
   justify-content: center;
   align-items: center;
   border: 1px solid #c4c6cf;
-  width: 100px;
-  height: 100px;
-  margin: 10px;
+  width: 120px;
+  height: 136px;
   background-color: #fff;
   text-align: center;
   cursor: pointer;
   vertical-align: middle;
+  margin-right: 12px;
 
   &:hover, &:focus, &.selected {
     border-color: $color-brand1-5;
   }
 
+  &.sizeNormal {
+    width: 120px;
+    height: 136px;
+  }
+
   &.sizeSmall {
     width: 50px;
     height: 50px;

package/lib/components/TemplateGroup/index.js

@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 
+var _box = _interopRequireDefault(require("@alifd/next/lib/box"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -17,17 +19,20 @@ var TemplateGroup = function TemplateGroup(props) {
   var name = props.name,
       _props$data = props.data,
       data = _props$data === void 0 ? [] : _props$data,
-      size = props.size;
+      size = props.size,
+      _props$itemProps = props.itemProps,
+      itemProps = _props$itemProps === void 0 ? {} : _props$itemProps;
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, name && /*#__PURE__*/_react["default"].createElement("div", {
     className: _indexModule["default"].name
-  }, name), /*#__PURE__*/_react["default"].createElement("div", {
-    className: _indexModule["default"].buttons
+  }, name), /*#__PURE__*/_react["default"].createElement(_box["default"], {
+    direction: "row",
+    spacing: 32
   }, data.map(function (item) {
     return /*#__PURE__*/_react["default"].createElement(_TemplateButton["default"], (0, _extends2["default"])({
       key: item.id
     }, item, {
       size: size
-    }), item.name);
+    }, itemProps), item.name);
   })));
 };
 

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

@@ -1,7 +1,3 @@
 .name {
   margin: 20px 0 0 10px;
 }
-
-.buttons {
-  margin: 10px 0;
-}

package/lib/components/TemplateSelect/index.d.ts

@@ -0,0 +1,2 @@
+export default TemplateSelect;
+declare function TemplateSelect(props: any): JSX.Element;

package/lib/components/TemplateSelect/index.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _tag = _interopRequireDefault(require("@alifd/next/lib/tag"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _TemplateButton = _interopRequireDefault(require("../TemplateButton"));
+
+var _indexModule = _interopRequireDefault(require("./index.module.scss"));
+
+var _TemplateGroup = _interopRequireDefault(require("../TemplateGroup"));
+
+var TagGroup = _tag["default"].Group,
+    SelectableTag = _tag["default"].Selectable;
+
+var TemplateSelect = function TemplateSelect(props) {
+  return /*#__PURE__*/_react["default"].createElement(_TemplateGroup["default"], props); // const { data = [], size } = props;
+  // return (
+  //   <TagGroup>
+  //     {data.map((item) => (
+  //       <SelectableTag
+  //         key={item.name}
+  //         checked={item.selected}
+  //         onChange={() => {}}
+  //       >
+  //         <TemplateButton
+  //           key={item.id}
+  //           {...item}
+  //           size={size}
+  //         >
+  //           {item.name}
+  //         </TemplateButton>
+  //       </SelectableTag>
+  //     ))}
+  //   </TagGroup>
+  // )
+};
+
+var _default = TemplateSelect;
+exports["default"] = _default;

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

@@ -0,0 +1,3 @@
+.name {
+  margin: 20px 0 0 10px;
+}

package/lib/core/components/titlebar/TitleBar.module.scss

@@ -1,6 +1,5 @@
 .titlebar {
   display: flex;
-  padding: 16px;
 
   .left {
     display: flex;
@@ -12,6 +11,10 @@
 
   }
 
+  &.titlebarViewMode {
+    padding: 16px 16px 16px 0;
+  }
+
   &.titlebarEditMode {
     padding: 10px 16px;
   }

package/lib/core/editor/components/settings/common/NodeSizeInput/NodeSizeInput.js

@@ -123,7 +123,7 @@ function NodeSizeInput(props) {
   };
 
   function parseValue(val) {
-    return val ? parseInt(val) : val;
+    return val ? Math.round(val) : val;
   }
 
   return /*#__PURE__*/_react["default"].createElement(_form["default"], {

package/lib/core/editor/components/settings/common/text/TextStyle.js

@@ -96,6 +96,12 @@ function TextStyle(props) {
       fontFamily: '宋体'
     }
   }, "\u5B8B\u4F53")), /*#__PURE__*/_react["default"].createElement(Option, {
+    value: "\u5FAE\u8F6F\u96C5\u9ED1"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      fontFamily: '微软雅黑'
+    }
+  }, "\u5FAE\u8F6F\u96C5\u9ED1")), /*#__PURE__*/_react["default"].createElement(Option, {
     value: "\u9ED1\u4F53"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     style: {

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

@@ -9,6 +9,8 @@ exports["default"] = TextPropertyView;
 
 var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
 
+var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
+
 var _field = _interopRequireDefault(require("@alifd/next/lib/field"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -86,7 +88,16 @@ function TextPropertyView(props) {
     style: {
       padding: 0
     }
-  }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, null, /*#__PURE__*/_react["default"].createElement(_TextStyle["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+    label: "\u6587\u672C"
+  }, /*#__PURE__*/_react["default"].createElement(_input["default"].TextArea, {
+    name: "styleMap.text",
+    autoHeight: {
+      minRows: 4,
+      maxRows: 4
+    },
+    placeholder: "\u8F93\u5165\u6587\u672C"
+  })), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, null, /*#__PURE__*/_react["default"].createElement(_TextStyle["default"], {
     name: "styleMap.textObj"
   })))))));
 }

package/lib/core/viewer/components/titlebar/TopoViewerTitleBar.js

@@ -9,6 +9,8 @@ exports["default"] = TopoViewerTitleBar;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _ViewerTools = _interopRequireDefault(require("./ViewerTools"));
 
 var _TitleBarModule = _interopRequireDefault(require("../../../components/titlebar/TitleBar.module.scss"));
@@ -21,7 +23,7 @@ function TopoViewerTitleBar(props) {
       onEnterEdit = props.onEnterEdit,
       children = props.children;
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: _TitleBarModule["default"].titlebar
+    className: (0, _classnames["default"])(_TitleBarModule["default"].titlebar, _TitleBarModule["default"].titlebarViewMode)
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: _TitleBarModule["default"].left
   }, children || /*#__PURE__*/_react["default"].createElement(_SearchWidget["default"], {

package/lib/utils/tree.js

@@ -52,7 +52,6 @@ function formatTree(json, funcPermissions) {
         type: type,
         name: name,
         showDefault: showDefault,
-        icon: iconImg[type],
         permission: node.operation,
         children: node !== null && node !== void 0 && node.children ? loop(node.children) : []
       };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riil-frontend/component-topology",
-  "version": "2.5.4",
+  "version": "2.6.0-alpha.0",
   "description": "拓扑",
   "scripts": {
     "start": "build-scripts start",
@@ -56,8 +56,8 @@
     "@riil-frontend/component-table-filter-tags": "latest",
     "@riil-frontend/component-table-layout": "^2.0.1",
     "@riil-frontend/component-topo-icon-select": "^1.0.1",
-    "@riil-frontend/component-topology-graph": "^2.1.13",
-    "@riil-frontend/component-topology-utils": "^2.0.14",
+    "@riil-frontend/component-topology-graph": "^2.2.0-alpha.0",
+    "@riil-frontend/component-topology-utils": "^2.0.16",
     "@riil-frontend/css": "^2.0.2",
     "@riil-frontend/hooks": "latest",
     "@riil-frontend/next-collapse": "^1.0.1-a.0",
@@ -100,6 +100,6 @@
     "access": "public"
   },
   "license": "MIT",
-  "homepage": "https://unpkg.com/@riil-frontend/component-topology@2.5.4/build/index.html",
-  "gitHead": "8d9f286eb5da11dfadbef62890d74d2c2dd4d3a9"
+  "homepage": "https://unpkg.com/@riil-frontend/component-topology@2.6.0-alpha.0/build/index.html",
+  "gitHead": "dbbdb9343bb67d3f8fcf18f628a2ed580f9da1bc"
 }

package/CHANGELOG.md

@@ -1,26 +0,0 @@
-## v2.1.8
-
-- 支持自定义分层添加资源组件
-- 支持添加节点、连线接口 `addElements(data)`
-
-## v2.1.4
-
-- ht 新旧版本共存
-
-## v2.1.3
-
-- 自定义图标
-
-
-## v2.0.2
-
-- 支持编辑模式右键菜单
-
-## v2.0.1
-
-新增功能
-- 拓扑图全量更新数据接口，更新时保留元素样式
-- 编辑模式右键菜单
-
-阻断变更
-- 暂时恢复页面加载ht topo-client.js