@riil-frontend/component-topology 6.0.0-alpha.1 → 6.0.0-alpha.3

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

@@ -1,23 +1,71 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { isGroup, isLayer } from "../../../../../utils/htElementDataUtil";
+import useLayerAddResource from "../../../hooks/useLayerAddResource";
+import LayerAddResourceDrawer from "../../settings/propertyViews/layer/DataTab/LayerAddResourceDrawer";
 import ButtonBox from "./components/ButtonBox";
 import WidgetBox from "./WidgetBox";
 
+function getAddType(selection) {
+  if (selection.length === 1) {
+    var data = selection[0];
+
+    if (isLayer(data)) {
+      return 'layer';
+    } else if (isGroup(data)) {
+      return 'group';
+    }
+  }
+}
+
 function AddResourceButton(props) {
   var showLabel = props.showLabel,
       topo = props.topo,
-      topoEdit = props.topoEdit;
+      topoEdit = props.topoEdit,
+      editorProps = props.editorProps; // 选中的元素
+
+  var selection = topo.selectionManager.useSelection();
+
+  var _useState = useState(getAddType(selection)),
+      addType = _useState[0],
+      setAddType = _useState[1]; // 选中分层添加
+
+
+  var layerAddResource = useLayerAddResource({
+    topo: topo,
+    topoEdit: topoEdit
+  });
+  useEffect(function () {
+    setAddType(getAddType(selection));
+  }, [selection]);
+
+  var handleClick = function handleClick() {
+    if (!addType) {
+      // 未选中分层、分区添加资源
+      topoEdit.showGlobalAddResourceDrawer();
+    } else if (addType === 'layer') {
+      // 选中分层添加资源
+      layerAddResource.open();
+    } else if (addType === 'group') {
+      // 选中区域添加资源
+      var group = selection[0];
+      topoEdit.groupAddResource.open(group);
+    }
+  };
+
   return /*#__PURE__*/React.createElement(WidgetBox, {
     label: "\u6DFB\u52A0\u8D44\u6E90",
     tooltip: "\u6DFB\u52A0\u8D44\u6E90",
     showLabel: showLabel
   }, /*#__PURE__*/React.createElement(ButtonBox, {
-    onClick: function onClick() {
-      topoEdit.showGlobalAddResourceDrawer();
-    }
+    onClick: handleClick
   }, /*#__PURE__*/React.createElement("img", {
     src: "/img/topo/editor/toolbar/add/Normal.svg",
     alt: ""
-  })));
+  })), addType === 'layer' && /*#__PURE__*/React.createElement(LayerAddResourceDrawer, {
+    layer: selection[0],
+    editorProps: editorProps,
+    layerAddResource: layerAddResource
+  }));
 }
 
 export default AddResourceButton;

package/es/core/editor/components/settings/propertyViews/layer/DataTab/DefaultLayerAddResourceDrawer.js

@@ -0,0 +1,48 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useState, useEffect } from 'react';
+import ResourceSelectDrawer from "../../../../../../../components/NetworkTopoResourceSelectDrawer";
+
+var LayerAddResourceDrawer = function LayerAddResourceDrawer(props) {
+  var visible = props.visible,
+      layer = props.layer,
+      topo = props.topo,
+      topoEdit = props.topoEdit,
+      onClose = props.onClose;
+
+  var onOk = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(selected) {
+      var layerData;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              layerData = {
+                id: layer.tag,
+                tag: layer.attrObject.tag
+              };
+              _context.next = 3;
+              return topoEdit.addLayerResources(layerData, selected);
+
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function onOk(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/React.createElement(ResourceSelectDrawer, {
+    visible: visible,
+    getExcludeIds: topoEdit.getAllNodeResourceIds,
+    onOk: onOk,
+    onClose: onClose
+  });
+};
+
+export default LayerAddResourceDrawer;

package/es/core/editor/components/settings/propertyViews/layer/DataTab/LayerAddResourceButton.js

@@ -1,35 +1,29 @@
-import React, { useState } from 'react';
+import React from 'react';
+import useLayerAddResource from "../../../../../hooks/useLayerAddResource";
 import AddResourceButton from "../../../common/AddResourceButton";
 import LayerAddResourceDrawer from "./LayerAddResourceDrawer";
 export default function LayerAddResourceButton(props) {
   var topo = props.topo,
-      layer = props.layer,
+      editorProps = props.editorProps,
       layerData = props.layerData,
-      CustomAddResourceDrawer = props.addResourceDrawer,
       onAdd = props.onAdd,
       topoEdit = props.topoEdit;
-
-  var _useState = useState(false),
-      drawerVisible = _useState[0],
-      setDrawerVisible = _useState[1];
-
-  var AddResourceDrawer = CustomAddResourceDrawer || LayerAddResourceDrawer;
+  var layerAddResource = useLayerAddResource({
+    topo: topo,
+    topoEdit: topoEdit,
+    layerData: layerData
+  });
 
   var handleClick = function handleClick() {
-    setDrawerVisible(true);
+    layerAddResource.open();
   };
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AddResourceButton, {
     onClick: handleClick
-  }), /*#__PURE__*/React.createElement(AddResourceDrawer, {
-    visible: drawerVisible,
+  }), /*#__PURE__*/React.createElement(LayerAddResourceDrawer, {
     layer: layerData,
-    topo: topo,
-    topoEdit: topoEdit,
-    onClose: function onClose() {
-      setDrawerVisible(false);
-    },
-    setVisible: setDrawerVisible
+    editorProps: editorProps,
+    layerAddResource: layerAddResource
   }));
 }
 ;

package/es/core/editor/components/settings/propertyViews/layer/DataTab/LayerAddResourceDrawer.js

@@ -1,48 +1,15 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useState, useEffect } from 'react';
-import ResourceSelectDrawer from "../../../../../../../components/NetworkTopoResourceSelectDrawer";
-
-var LayerAddResourceDrawer = function LayerAddResourceDrawer(props) {
-  var visible = props.visible,
-      layer = props.layer,
-      topo = props.topo,
-      topoEdit = props.topoEdit,
-      onClose = props.onClose;
-
-  var onOk = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(selected) {
-      var layerData;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              layerData = {
-                id: layer.tag,
-                tag: layer.attrObject.tag
-              };
-              _context.next = 3;
-              return topoEdit.addLayerResources(layerData, selected);
-
-            case 3:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-
-    return function onOk(_x) {
-      return _ref.apply(this, arguments);
-    };
-  }();
-
-  return /*#__PURE__*/React.createElement(ResourceSelectDrawer, {
-    visible: visible,
-    getExcludeIds: topoEdit.getAllNodeResourceIds,
-    onOk: onOk,
-    onClose: onClose
-  });
-};
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import DefaultLayerAddResourceDrawer from "./DefaultLayerAddResourceDrawer";
+
+function LayerAddResourceDrawer(props) {
+  var layer = props.layer,
+      editorProps = props.editorProps,
+      layerAddResource = props.layerAddResource;
+  var AddResourceDrawer = (editorProps === null || editorProps === void 0 ? void 0 : editorProps.layerResourceSelectComponent) || DefaultLayerAddResourceDrawer;
+  return /*#__PURE__*/React.createElement(AddResourceDrawer, _extends({
+    layer: layer
+  }, layerAddResource.drawerProps));
+}
 
 export default LayerAddResourceDrawer;

package/es/core/editor/components/settings/propertyViews/layer/DataTab/RelateData.js

@@ -18,9 +18,10 @@ export default function LayerRelateData(props) {
       title: "\u5173\u8054\u8D44\u6E90",
       extra: /*#__PURE__*/React.createElement(LayerAddResourceButton, {
         topo: topo,
+        topoEdit: topoEditApi,
+        editorProps: editorProps,
         layer: layer,
         layerData: values,
-        topoEdit: topoEditApi,
         onAdd: function onAdd() {
           /* TODO 刷新列表 refreshList */
         },

package/es/core/editor/components/titlebar/TopoEditorTitleBar.js

@@ -3,19 +3,19 @@ import _Dialog from "@alifd/next/es/dialog";
 import _Button from "@alifd/next/es/button";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React from "react";
-import classnames from "classnames";
+import React from 'react';
+import classnames from 'classnames';
 import TitleWidget from "../../../components/titlebar/widgets/TitleWidget";
 import styles from "../../../components/titlebar/TitleBar.module.scss";
-import { useState } from "react";
-import { useEffect } from "react";
+import { useState } from 'react';
+import { useEffect } from 'react';
 import DebugTools from "./widgets/DebugTools";
 export default function TopoEditorTitleBar(props) {
   var topo = props.topo,
       topoEditApi = props.topoEditApi;
   var store = topo.store;
 
-  var _store$useModel = store.useModel("topoEdit"),
+  var _store$useModel = store.useModel('topoEdit'),
       topoEditState = _store$useModel[0],
       topoEditDispatchers = _store$useModel[1];
 
@@ -69,12 +69,6 @@ export default function TopoEditorTitleBar(props) {
   }, /*#__PURE__*/React.createElement(DebugTools, {
     topo: topo
   }), /*#__PURE__*/React.createElement(_Button, {
-    type: "primary",
-    className: styles.button,
-    onClick: function onClick() {
-      topoEditApi.showGlobalAddResourceDrawer();
-    }
-  }, "\u6DFB\u52A0\u8D44\u6E90"), /*#__PURE__*/React.createElement(_Button, {
     className: styles.button,
     onClick: function onClick() {
       setExitFlag(false);
@@ -84,8 +78,8 @@ export default function TopoEditorTitleBar(props) {
     className: styles.button,
     onClick: function onClick() {
       _Dialog.confirm({
-        title: "提示",
-        content: "若直接退出，图上修改的内容将不会保存！",
+        title: '提示',
+        content: '若直接退出，图上修改的内容将不会保存！',
         onOk: function () {
           var _onOk = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
             return _regeneratorRuntime.wrap(function _callee2$(_context2) {
@@ -131,10 +125,10 @@ export default function TopoEditorTitleBar(props) {
           return onCancel;
         }(),
         cancelProps: {
-          children: "退出"
+          children: '退出'
         },
         okProps: {
-          children: "保存并退出"
+          children: '保存并退出'
         }
       });
     }

package/es/core/editor/hooks/useLayerAddResource.js

@@ -0,0 +1,28 @@
+import { useState } from 'react';
+export default function useLayerAddResource(props) {
+  var topo = props.topo,
+      layer = props.layer,
+      topoEdit = props.topoEdit;
+
+  var _useState = useState(false),
+      drawerVisible = _useState[0],
+      setDrawerVisible = _useState[1];
+
+  return {
+    open: function open() {
+      return setDrawerVisible(true);
+    },
+    close: function close() {
+      return setDrawerVisible(false);
+    },
+    drawerProps: {
+      visible: drawerVisible,
+      setVisible: setDrawerVisible,
+      onClose: function onClose() {
+        setDrawerVisible(false);
+      },
+      topo: topo,
+      topoEdit: topoEdit
+    }
+  };
+}

package/es/core/models/TopoApp.js

@@ -22,7 +22,7 @@ import topoFactory from "./topoFactory";
 import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
 import SelectionManager from "./SelectionManager"; // eslint-disable-next-line no-undef
 
-var version = typeof "6.0.0-alpha.1" === 'string' ? "6.0.0-alpha.1" : null;
+var version = typeof "6.0.0-alpha.3" === 'string' ? "6.0.0-alpha.3" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/lib/components/VerticalIconTab/VerticalIconTab.js

@@ -25,11 +25,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @returns 
  */
 function CustomTabItem(_ref) {
-  var title = _ref.title;
+  var title = _ref.title,
+      icon = _ref.icon;
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "v-icon-tab-item"
   }, /*#__PURE__*/_react["default"].createElement("img", {
-    src: "/img/topo/editor/sidebar/icon/\u94FE\u8DEF.svg",
+    src: icon,
     alt: ""
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: "tab-title"
@@ -61,7 +62,7 @@ function VerticalIconTab(props) {
       }, props));
     }
   }, props, {
-    className: _VerticalIconTabModule["default"].tab,
+    className: _VerticalIconTabModule["default"].tabs,
     navClassName: _VerticalIconTabModule["default"].nav,
     contentClassName: (0, _classnames["default"])(_VerticalIconTabModule["default"].content, (_classNames = {}, _classNames[_VerticalIconTabModule["default"].hide] = !activeKey, _classNames)),
     onClick: handleClick

package/lib/components/VerticalIconTab/VerticalIconTab.module.scss

@@ -1,25 +1,42 @@
 @import '~@alifd/next/variables.scss';
 
 
-.tab {
+.tabs {
   height: 100%;
+
 }
 
 // 导航
 .nav {
   width: 60px;
   height: 100%;
-  border-right: 1px solid #E6E7EB;
+  padding-top: 4px;
+  border-right: 1px solid var(--tab-wrapped-border-line-color);
+  background: none !important;
 
   :global {
 
+    .#{$css-prefix}tabs-tab {
+      background-color: transparent !important;
+
+      &.active .v-icon-tab-item {
+        background-color: rgba(76, 137, 255, 0.1);
+      }
+    }
+
     // 图标区
     .v-icon-tab-item {
+      height: 76px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      height: 76px;
+      margin: 0 4px;
+      border-radius: 4px;
+
+      &:hover {
+        background-color: rgba(76, 137, 255, 0.1);
+      }
     }
   }
 }
@@ -28,15 +45,20 @@
 .content {
   width: 260px;
   height: 100%;
+  transition: all .1s linear;
+  border-left: none !important;
+  border-right: 1px solid var(--tab-wrapped-border-line-color);
 
   :global {
     .#{$css-prefix}tabs-tabpane {
       width: 100%;
       height: 100%;
+      overflow: auto;
     }
   }
 
   &.hide {
-    display: none;
+    width: 0;
+    border-right: none;
   }
 }

package/lib/components/collapse/Collapse.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function Collapse(props) {
+  return /*#__PURE__*/_react["default"].createElement("div", null, "Collapse");
+}
+
+var _default = Collapse;
+exports["default"] = _default;

package/lib/components/collapse/Collapse.module.scss

@@ -0,0 +1,44 @@
+@import "@alifd/next/variables";
+
+.collapse {
+  :global {
+
+    // 折叠模板标题
+    .#{$css-prefix}collapse-panel:not(:first-child) {
+      border-top: none;
+    }
+
+    .#{$css-prefix}collapse-panel-title:hover {
+      background: none;
+    }
+
+    .#{$css-prefix}collapse-panel-title {
+      background: none;
+      font-size: 12px;
+      padding-left: 32px;
+
+      &>.#{$css-prefix}collapse-panel-icon {
+        left: 12px;
+        margin-top: 0;
+        margin-left: 0;
+      }
+    }
+
+    .#{$css-prefix}collapse-panel-content,
+    .#{$css-prefix}collapse-panel-expanded>.#{$css-prefix}collapse-panel-content {
+      // padding-left: 32px;
+      padding-top: 8px;
+    }
+  }
+
+  &.contentNoPadding {
+
+    :global {
+
+      .#{$css-prefix}collapse-panel-content,
+      .#{$css-prefix}collapse-panel-expanded>.#{$css-prefix}collapse-panel-content {
+        padding: 8px 0;
+      }
+    }
+  }
+}

package/lib/components/collapse/CollapseFullheight.module.scss

@@ -0,0 +1,20 @@
+@import "@alifd/next/variables";
+
+.fullheight {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .panelFullHeight {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    :global {
+      .#{$css-prefix}collapse-panel-content {
+        flex: 1;
+        overflow: auto;
+      }
+    }
+  }
+}

package/lib/components/collapse/Panel.js

@@ -72,6 +72,9 @@ function CollapsePanel(props) {
     },
     onBlur: function onBlur() {
       setHoverExtra(false);
+    },
+    style: {
+      height: 20
     }
   }, extra));
 

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

@@ -11,6 +11,7 @@ exports.getGroupIconGroups = getGroupIconGroups;
 exports.getNodeDefaultIcons = getNodeDefaultIcons;
 exports.getNodeIconGroups = getNodeIconGroups;
 exports.getUserCustomIcons = getUserCustomIcons;
+exports.getUserCustomIconsForHt = getUserCustomIconsForHt;
 exports.transformCustomIcon2HtIcon = transformCustomIcon2HtIcon;
 exports.transformCustomIcons2HtIcons = transformCustomIcons2HtIcons;
 
@@ -30,6 +31,20 @@ function getNodeDefaultIcons(topo) {
 function getGroupDefaultIcons(topo) {
   return [].concat(_manager["default"].iconLibManager.getIcons());
 }
+
+function getUserCustomIconsForHt(topo) {
+  return getUserCustomIcons(topo).map(function (_ref) {
+    var id = _ref.id,
+        name = _ref.name,
+        url = _ref.url,
+        jsonUrl = _ref.jsonUrl;
+    return {
+      id: id,
+      name: name,
+      url: jsonUrl || url
+    };
+  });
+}
 /**
  * 获取编辑模式左侧图片列表
  * @param {*} topo 
@@ -41,11 +56,11 @@ function getEditorIcons(topo) {
     // 默认图标
     system: getNodeDefaultIcons(topo),
     // 自定义上传图标
-    custom: getUserCustomIcons(topo).map(function (_ref) {
-      var id = _ref.id,
-          name = _ref.name,
-          url = _ref.url,
-          jsonUrl = _ref.jsonUrl;
+    custom: getUserCustomIcons(topo).map(function (_ref2) {
+      var id = _ref2.id,
+          name = _ref2.name,
+          url = _ref2.url,
+          jsonUrl = _ref2.jsonUrl;
       return {
         id: id,
         name: name,