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

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

@@ -0,0 +1,27 @@
+import _Dropdown from "@alifd/next/es/dropdown";
+import React from 'react';
+import ArrowButton from "./ArrowButton";
+import styles from "./ArrowPopup.module.scss";
+/**
+ * 箭头按钮浮层
+ * @param {*} props 
+ * @returns 
+ */
+
+function ArrowPopup(props) {
+  var label = props.label,
+      children = props.children;
+  var trigger = /*#__PURE__*/React.createElement(ArrowButton, null, label);
+  return /*#__PURE__*/React.createElement(_Dropdown, {
+    trigger: trigger,
+    triggerType: "click"
+  }, children);
+}
+
+ArrowPopup.Content = function (props) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.card
+  }, props.children);
+};
+
+export default ArrowPopup;

package/es/core/editor/components/Toolbar/widgets/components/ArrowPopup.module.scss

@@ -0,0 +1,10 @@
+.card {
+  min-width: 100px;
+  padding: 8px;
+  border: 1px solid var(--popup-local-border-color);
+  border-radius: 4px;
+  box-shadow: 0px 0px 10px 0px rgba(209,209,209,0.5);
+  background: var(--menu-background);
+  animation-duration: 300ms;
+  animation-timing-function: ease;
+}

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

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _Icon from "@alifd/next/es/icon";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["active", "disabled", "showArrow", "children"];
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from "./ButtonBox.module.scss";
+
+function ButtonBox(props) {
+  var _classNames, _classNames2;
+
+  var active = props.active,
+      disabled = props.disabled,
+      showArrow = props.showArrow,
+      children = props.children,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames(styles.ButtonBox, (_classNames = {}, _classNames[styles.ButtonBoxActive] = active, _classNames[styles.ButtonBoxDisabled] = disabled, _classNames))
+  }, otherProps), children, showArrow && /*#__PURE__*/React.createElement(React.Fragment, null, "\xA0", /*#__PURE__*/React.createElement(_Icon, {
+    type: "tree_fold_arrow",
+    size: "xxs",
+    className: classNames(styles.icon, (_classNames2 = {}, _classNames2[styles.active] = active, _classNames2))
+  })));
+}
+
+ButtonBox.propTypes = {
+  showArrow: PropTypes.bool
+};
+ButtonBox.defaultProps = {
+  showArrow: false
+};
+export default ButtonBox;

package/es/core/editor/components/Toolbar/widgets/components/ButtonBox.module.scss

@@ -0,0 +1,30 @@
+.ButtonBox {
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+  cursor: pointer;
+
+  &.ButtonBoxActive,
+  &:hover {
+    background: rgba(76, 137, 255, 0.1);
+    border-radius: 4px;
+  }
+
+  &.ButtonBoxDisabled:hover {
+    background: transparent;
+    cursor: not-allowed;
+  }
+
+}
+
+// 箭头图标
+.icon {
+  color: #909090;
+  margin-left: 4px;
+
+  &.active {
+    transform: rotate(180deg) scale(0.5) !important;
+  }
+}

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

@@ -0,0 +1,47 @@
+import _Dropdown from "@alifd/next/es/dropdown";
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import ButtonBox from "./ButtonBox";
+import styles from "./DropdownButton.module.scss";
+
+function DropdownButton(props) {
+  var trigger = props.trigger,
+      _props$showArrow = props.showArrow,
+      showArrow = _props$showArrow === void 0 ? true : _props$showArrow,
+      _props$showContainer = props.showContainer,
+      showContainer = _props$showContainer === void 0 ? true : _props$showContainer,
+      children = props.children;
+
+  var _useState = useState(false),
+      visible = _useState[0],
+      setVisible = _useState[1];
+
+  var button = /*#__PURE__*/React.createElement(ButtonBox, {
+    active: visible,
+    showArrow: showArrow
+  }, trigger);
+  return /*#__PURE__*/React.createElement(_Dropdown, {
+    visible: visible,
+    trigger: button,
+    triggerType: "click",
+    onVisibleChange: setVisible
+  }, !showContainer ? children : /*#__PURE__*/React.createElement(PopupCard, null, children));
+}
+
+DropdownButton.propTypes = {
+  showArrow: PropTypes.bool,
+  showContainer: PropTypes.bool
+};
+DropdownButton.defaultProps = {
+  showArrow: true,
+  showContainer: true
+};
+
+function PopupCard(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.card
+  }, props.children);
+}
+
+DropdownButton.PopupCard = PopupCard;
+export default DropdownButton;

package/es/core/editor/components/Toolbar/widgets/components/DropdownButton.module.scss

@@ -0,0 +1,10 @@
+.card {
+  min-width: 100px;
+  padding: 8px;
+  border: 1px solid var(--popup-local-border-color);
+  border-radius: 4px;
+  box-shadow: 0px 0px 10px 0px rgba(209,209,209,0.5);
+  background: var(--menu-background);
+  animation-duration: 300ms;
+  animation-timing-function: ease;
+}

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

@@ -0,0 +1,30 @@
+import _Menu from "@alifd/next/es/menu";
+import React from 'react';
+import PropTypes from 'prop-types';
+import DropdownButton from "./DropdownButton";
+
+function DropdownMenu(props) {
+  var value = props.value,
+      children = props.children,
+      onChange = props.onChange,
+      valueRender = props.valueRender;
+  var selectedKeys = Array.isArray(value) ? value : [value];
+  var valueDisplay = valueRender ? valueRender(value) : value;
+  return /*#__PURE__*/React.createElement(DropdownButton, {
+    trigger: valueDisplay,
+    showContainer: false
+  }, /*#__PURE__*/React.createElement(_Menu, {
+    selectMode: "single",
+    selectedKeys: selectedKeys,
+    onSelect: onChange
+  }, children));
+}
+
+DropdownButton.propTypes = {
+  valueRender: PropTypes.func
+};
+DropdownButton.defaultProps = {
+  valueRender: undefined
+};
+DropdownMenu.Item = _Menu.Item;
+export default DropdownMenu;

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

@@ -0,0 +1,20 @@
+import _Menu from "@alifd/next/es/menu";
+import React from 'react';
+import ArrowPopup from "./ArrowPopup";
+
+function MenuSelect(props) {
+  var value = props.value,
+      children = props.children,
+      onChange = props.onChange;
+  var selectedKeys = Array.isArray(value) ? value : [value];
+  return /*#__PURE__*/React.createElement(ArrowPopup, {
+    label: value
+  }, /*#__PURE__*/React.createElement(_Menu, {
+    selectMode: "single",
+    selectedKeys: selectedKeys,
+    onSelect: onChange
+  }, children));
+}
+
+MenuSelect.Option = _Menu.Item;
+export default MenuSelect;

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

@@ -1,3 +1,4 @@
+import _Box from "@alifd/next/es/box";
 import _extends from "@babel/runtime/helpers/extends";
 import _Grid from "@alifd/next/es/grid";
 import _Form from "@alifd/next/es/form";
@@ -22,7 +23,10 @@ function SizeInput(props) {
       step = props.step,
       onChange = props.onChange,
       lock = props.lock,
-      onLockChange = props.onLockChange;
+      onLockChange = props.onLockChange,
+      _props$showLabel = props.showLabel,
+      showLabel = _props$showLabel === void 0 ? true : _props$showLabel,
+      size = props.size;
 
   var handleChange = function handleChange(name, attrValue) {
     var _extends2;
@@ -43,14 +47,19 @@ function SizeInput(props) {
 
   return /*#__PURE__*/React.createElement(_Form, {
     labelAlign: "top",
-    component: "div"
+    component: "div",
+    size: size
   }, /*#__PURE__*/React.createElement(_Form.Item, {
     style: {
       marginBottom: 0
     }
-  }, /*#__PURE__*/React.createElement(Row, {
-    gutter: "0"
-  }, /*#__PURE__*/React.createElement(Col, null, /*#__PURE__*/React.createElement(FormItem, {
+  }, /*#__PURE__*/React.createElement(_Box, {
+    direction: "row"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(FormItem, {
     required: true,
     requiredTrigger: "onBlur",
     style: {
@@ -58,11 +67,12 @@ function SizeInput(props) {
     }
   }, /*#__PURE__*/React.createElement(NodeSizeNumberPicker, {
     value: parseValue(value.width),
-    label: "\u5BBD:",
+    label: showLabel ? '宽:' : '',
     min: 1,
     max: max,
     step: step,
     placeholder: "\u8BF7\u8F93\u5165",
+    size: size,
     style: {
       width: '100%'
     },
@@ -75,7 +85,11 @@ function SizeInput(props) {
   }, /*#__PURE__*/React.createElement("img", {
     src: require(lock ? './img/icon_锁.svg' : './img/icon_解锁.svg'),
     alt: ""
-  })), /*#__PURE__*/React.createElement(Col, null, /*#__PURE__*/React.createElement(FormItem, {
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(FormItem, {
     required: true,
     requiredTrigger: "onBlur",
     style: {
@@ -83,11 +97,13 @@ function SizeInput(props) {
     }
   }, /*#__PURE__*/React.createElement(NodeSizeNumberPicker, {
     value: parseValue(value.height),
-    label: "\u9AD8:",
+    label: showLabel ? '高:' : '' // addonTextAfter="H"
+    ,
     min: 1,
     max: max,
     step: step,
     placeholder: "\u8BF7\u8F93\u5165",
+    size: size,
     style: {
       width: '100%'
     },

package/es/core/editor/components/settings/common/SizeInput/NodeSizeInput.module.scss

@@ -1,5 +1,6 @@
 .lockBtn {
-  height: 28px;
-  margin: 6px 10px 0 10px;
+  margin: 0 4px;
   cursor: pointer;
-}
+  display: flex;
+  align-items: center;
+}

package/es/core/editor/components/settings/propertyViews/view/BatchSetNodeSize.js

@@ -1,8 +1,10 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import SizeInput from "../../common/SizeInput";
 export default function BatchSetNodeSize(props) {
-  return /*#__PURE__*/React.createElement(SizeInput, {
+  var size = props.size;
+  return /*#__PURE__*/React.createElement(SizeInput, _extends({}, props, {
     value: {}
-  });
+  }));
 }
 ;

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/models/HistoryManager.js

@@ -10,18 +10,38 @@ var HistoryManager = /*#__PURE__*/function () {
     this.topo = topo;
     this.htHistoryManager = htHistoryManager;
     rlog.info('HistoryManager 初始化', htHistoryManager);
-  } // 增加快捷键支持
-
+    this.updateStore = this.updateStore.bind(this);
+    this.init();
+  }
 
   var _proto = HistoryManager.prototype;
 
-  _proto.handleKeyDown = function handleKeyDown(e) {
-    // 事务中禁用回退
-    // eslint-disable-next-line no-underscore-dangle
-    if (this.htHistoryManager._betweenTransaction) {
+  _proto.init = function init() {
+    this.htHistoryManager.addPropertyChangeListener(this.updateStore);
+  };
+
+  _proto.destroy = function destroy() {
+    this.htHistoryManager.removePropertyChangeListener(this.updateStore);
+    this.topo.store.getModelDispatchers('historyManager').reset();
+  };
+
+  _proto.updateStore = function updateStore(e) {
+    var property = e.property;
+
+    if (['histories', 'historyIndex'].indexOf(property) === -1) {
       return;
     }
 
+    var histories = this.getHistories();
+    var historyIndex = this.getHistoryIndex();
+    var undoable = historyIndex !== -1;
+    this.topo.store.getModelDispatchers('historyManager').update({
+      undoable: undoable
+    });
+  } // 增加快捷键支持
+  ;
+
+  _proto.handleKeyDown = function handleKeyDown(e) {
     var isCtrlDown = ht.Default.isCtrlDown;
 
     if (isCtrlDown(e)) {
@@ -138,6 +158,12 @@ var HistoryManager = /*#__PURE__*/function () {
   _proto.undo = function undo() {
     var _this3 = this;
 
+    // 事务中禁用回退
+    // eslint-disable-next-line no-underscore-dangle
+    if (this.htHistoryManager._betweenTransaction) {
+      return;
+    }
+
     rlog.debug('HistoryManager.undo', this.getHistories(), this.getHistoryIndex());
     var storeHistory = this.getCurrentStoreHistory(true);
 

package/es/core/models/SelectionManager.js

@@ -51,6 +51,13 @@ var SelectionManager = /*#__PURE__*/function () {
     this.removeListener();
   };
 
+  _proto.useSelection = function useSelection() {
+    var _this$topo$store$useM = this.topo.store.useModelState('selection'),
+        selection = _this$topo$store$useM.selection;
+
+    return selection;
+  };
+
   _proto.handleSelectionChange = function handleSelectionChange(e) {
     rlog.info('Selection handleSelectionChange', e);
     this.updateSelection();

package/es/core/models/TopoApp.js

@@ -19,9 +19,10 @@ import GraphDataModel from "./GraphDataModel";
 import { updateEdgeExpanded } from "../utils/edgeUtil";
 import PluginManager from "./PluginManager";
 import topoFactory from "./topoFactory";
-import ElementTagTipConfig from "./tagstips/ElementTagTipConfig"; // eslint-disable-next-line no-undef
+import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
+import SelectionManager from "./SelectionManager"; // eslint-disable-next-line no-undef
 
-var version = typeof "5.0.18" === 'string' ? "5.0.18" : null;
+var version = typeof "6.0.0-alpha.2" === 'string' ? "6.0.0-alpha.2" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑
@@ -77,6 +78,7 @@ var Topo = /*#__PURE__*/function () {
 
     this.test = new Test(this);
     this.uid = topoFactory.add(options.name, this);
+    this.selectionManager = new SelectionManager(this);
   };
 
   _proto.destroy = function destroy() {

package/es/core/store/coreModels.js

@@ -1,13 +1,13 @@
 import topoMod from "./models/topoMod";
 import customIcon from "./models/customIcon";
 import ciModel from "./models/ciModel";
-import selection from "./models/selection";
 import topoBizMod from "./models/topoBizMod";
 import topoConfig from "./models/topoConfig";
 import topoEdit from "./models/topoEdit";
-import topoView from "./models/topoView";
-import topoGraphView from "./models/topoGraphView";
-import background from "./models/background"; // 显示模式
+import background from "./models/background";
+import selection from "./models/selection";
+import historyManager from "./models/historyManager";
+import topoGraphView from "./models/topoGraphView"; // 显示模式
 
 import topoAlarm from "./models/topoAlarm";
 import displayConfig from "./models/displayConfig";
@@ -19,7 +19,7 @@ export default {
   selection: selection,
   topoBizMod: topoBizMod,
   topoConfig: topoConfig,
-  topoView: topoView,
+  historyManager: historyManager,
   background: background,
   topoGraphView: topoGraphView,
   ciModel: ciModel,

package/es/core/store/models/displayConfig.js

@@ -5,9 +5,9 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 /**
  * 动态设置链路样式 Model
  */
-import _ from 'lodash';
+// import _ from 'lodash';
 import rlog from '@riil-frontend/component-topology-utils/es/rlog';
-export default function (engine) {
+export default function (topo) {
   return {
     // 定义 model 的初始 state
     state: {

package/es/core/store/models/historyManager.js

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/**
+ * 动态设置链路样式 Model
+ */
+// import _ from 'lodash';
+import rlog from '@riil-frontend/component-topology-utils/es/rlog';
+var defaultState = {
+  undoable: false,
+  redoable: false
+};
+export default function (topo) {
+  return {
+    // 定义 model 的初始 state
+    state: _extends({}, defaultState),
+    // 定义改变该模型状态的纯函数
+    reducers: {
+      update: function update(prevState, payload) {
+        return _extends({}, prevState, payload);
+      },
+      reset: function reset() {
+        return defaultState;
+      }
+    },
+    // 定义处理该模型副作用的函数
+    effects: function effects(dispatch) {
+      return {};
+    }
+  };
+}
+;

package/es/core/viewer/components/titlebar/widgets/SearchWidget.js

@@ -13,7 +13,8 @@ var searchTypes = [{
 function SearchWidget(props) {
   var _topo$view$topoClient;
 
-  var topo = props.topo;
+  var topo = props.topo,
+      filterProps = props.filterProps;
 
   var _useState = useState('name'),
       searchType = _useState[0],
@@ -60,6 +61,7 @@ function SearchWidget(props) {
     onFilterChange: setSearchType,
     onSearch: onSearch,
     hasClear: true,
+    filterProps: filterProps,
     style: {
       width: '270px'
     }