@riil-frontend/component-topology 6.0.0-alpha.5 → 6.0.0-alpha.51

package/es/core/editor/components/settings/propertyViews/index.js

@@ -6,14 +6,16 @@ import GroupPropertyView from "./group/GroupPropertyView";
 import MultipleElementPropertyView from "./multipleElements/MultipleElementPropertyView";
 import EdgePropertyView from "./edge/EdgePropertyView";
 import BoxPropertyView from "./box/BoxPropertyView";
+import EdgeGroupPropertyView from "./edge/EdgeGroupPropertyView";
 var propertyPanelMap = {
-  view: ViewPropertyView,
+  // view: ViewPropertyView,
   group: GroupPropertyView,
   node: NodePropertyView,
   edge: EdgePropertyView,
+  // edgeGroup: EdgeGroupPropertyView,
   layer: LayerPropertyView,
   text: TextPropertyView,
-  multiple: MultipleElementPropertyView,
+  // multiple: MultipleElementPropertyView,
   box: BoxPropertyView
 };
 

package/es/core/editor/components/settings/propertyViews/layer/BasicSetting.js

@@ -0,0 +1,58 @@
+import _Form from "@alifd/next/es/form";
+import _extends from "@babel/runtime/helpers/extends";
+import _Field from "@alifd/next/es/field";
+import rlog from '@riil-frontend/component-topology-utils/es/rlog';
+import React, { useEffect } from 'react';
+import { SPECIAL_CHARACTER_FORM_ITEM_VALIDATE_PROPS, validateSpecialCharacter } from "../../../../../../utils/SpecialCharacterValidateUtil";
+import NameInput from "../../common/NameInput";
+export default function BasicSetting(props) {
+  var topo = props.topo,
+      values = props.values,
+      _onChange = props.onChange,
+      layer = props.layer;
+
+  var field = _Field.useField({
+    autoUnmount: false,
+    values: values,
+    onChange: function onChange(name, value) {
+      if (name === 'styleMap.label' && !validateSpecialCharacter(value)) {
+        return;
+      }
+
+      rlog.debug(values[name], value);
+      var newValues = field.getValues();
+
+      _onChange(name, value, newValues);
+    }
+  });
+
+  useEffect(function () {
+    field.setValues(values);
+  }, [values]);
+  return /*#__PURE__*/React.createElement(_Form, {
+    field: field,
+    labelAlign: "top",
+    style: {
+      margin: '12px 0 0 0'
+    }
+  }, /*#__PURE__*/React.createElement(_Form.Item, _extends({
+    label: "\u5206\u5C42\u540D\u79F0"
+  }, SPECIAL_CHARACTER_FORM_ITEM_VALIDATE_PROPS, {
+    patternTrigger: "onChange",
+    style: {
+      paddingLeft: 32,
+      paddingRight: 16
+    }
+  }), /*#__PURE__*/React.createElement(NameInput, {
+    name: "styleMap.label",
+    multipleLine: true,
+    maxLength: 30,
+    placeholder: "\u8BF7\u8F93\u5165",
+    onFocus: function onFocus() {
+      topo.historyManager.beginTransaction();
+    },
+    onBlur: function onBlur() {
+      topo.historyManager.endTransaction();
+    }
+  })));
+}

package/es/core/editor/components/settings/propertyViews/layer/LayerPropertyView.js

@@ -1,30 +1,24 @@
-import _Tab from "@alifd/next/es/tab";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import TabView from "../../common/tab/TabView";
-import Setting from "./SettingTab/Setting";
 import RelateData from "./DataTab/RelateData";
-import useHtElement from "../../../../../common/hooks/useHtElement";
+import Setting from "./BasicSetting";
+import styles from "./LayerPropertyView.module.scss";
 export default function LayerPropertyView(props) {
   var topo = props.topo,
       topoEditApi = props.topoEditApi,
       values = props.values,
       onChange = props.onChange,
       settingRuntimeState = props.settingRuntimeState,
-      editorProps = props.editorProps;
-  var layer = useHtElement({
-    topo: topo,
-    id: values.id
-  });
-  return /*#__PURE__*/React.createElement(TabView, null, /*#__PURE__*/React.createElement(_Tab.Item, {
-    title: "\u6570\u636E",
-    key: "1"
-  }, /*#__PURE__*/React.createElement(RelateData, _extends({
-    layer: layer
-  }, props))), /*#__PURE__*/React.createElement(_Tab.Item, {
-    title: "\u8BBE\u7F6E",
-    key: "2"
+      editorProps = props.editorProps,
+      selectionElement = props.selectionElement;
+  var layer = selectionElement;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.container
   }, /*#__PURE__*/React.createElement(Setting, _extends({
     layer: layer
+  }, props)), /*#__PURE__*/React.createElement("div", {
+    className: styles.data
+  }, /*#__PURE__*/React.createElement(RelateData, _extends({
+    layer: layer
   }, props))));
 }

package/es/core/editor/components/settings/propertyViews/layer/LayerPropertyView.module.scss

@@ -0,0 +1,10 @@
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .data {
+    flex: 1;
+    overflow: auto;
+  }
+}

package/es/core/editor/components/settings/propertyViews/layer/LayerPropertyViewV1.js

@@ -0,0 +1,27 @@
+import _Tab from "@alifd/next/es/tab";
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import TabView from "../../common/tab/TabView";
+import Setting from "./SettingTab/Setting";
+import RelateData from "./DataTab/RelateData";
+export default function LayerPropertyView(props) {
+  var topo = props.topo,
+      topoEditApi = props.topoEditApi,
+      values = props.values,
+      onChange = props.onChange,
+      settingRuntimeState = props.settingRuntimeState,
+      editorProps = props.editorProps,
+      selectionElement = props.selectionElement;
+  var layer = selectionElement;
+  return /*#__PURE__*/React.createElement(TabView, null, /*#__PURE__*/React.createElement(_Tab.Item, {
+    title: "\u6570\u636E",
+    key: "1"
+  }, /*#__PURE__*/React.createElement(RelateData, _extends({
+    layer: layer
+  }, props))), /*#__PURE__*/React.createElement(_Tab.Item, {
+    title: "\u8BBE\u7F6E",
+    key: "2"
+  }, /*#__PURE__*/React.createElement(Setting, _extends({
+    layer: layer
+  }, props))));
+}

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import rlog from '@riil-frontend/component-topology-utils/es/rlog';
-import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import rlog from "@riil-frontend/component-topology-utils/es/rlog";
+import React, { useState, useEffect, useRef, useCallback, useMemo } from "react";
 import SizeInput from "../../../common/SizeInput";
 
 var NodesSizeRatioMap = /*#__PURE__*/function () {
@@ -80,7 +80,7 @@ export default function BatchSetNodeSize(props) {
     if (lock) {
       var _setSize;
 
-      setSize((_setSize = {}, _setSize[name] = value, _setSize[name === 'width' ? 'height' : 'width'] = undefined, _setSize));
+      setSize((_setSize = {}, _setSize[name] = value, _setSize[name === "width" ? "height" : "width"] = undefined, _setSize));
     } else {
       var _extends2;
 
@@ -89,10 +89,10 @@ export default function BatchSetNodeSize(props) {
 
     topo.historyManager.beginTransaction();
     nodes.forEach(function (node) {
-      if (name === 'width') {
+      if (name === "width") {
         if (lock) {
           var height = nodesSizeRatioMap.getNodeHeight(node, value);
-          rlog.debug('多元素锁定设置宽', node, value, height);
+          rlog.debug("多元素锁定设置宽", node, value, height);
           node.setHeight(height);
         }
 
@@ -117,11 +117,10 @@ export default function BatchSetNodeSize(props) {
     nodesSizeRatioMap.reset();
   };
 
-  return /*#__PURE__*/React.createElement(SizeInput, {
+  return /*#__PURE__*/React.createElement(SizeInput, _extends({}, props, {
     value: size,
     lock: lock,
     onChange: handleChange,
     onLockChange: onLockChange
-  });
-}
-;
+  }));
+}

package/es/core/editor/components/settings/propertyViews/multipleElements/MultipleElementLineType.js

@@ -1,52 +1,15 @@
 import React from 'react';
-import { getEdges } from "../../../../../../utils/htElementUtils";
-import LineType from "../../common/LineType";
+import { getEdgesBySelection, setEdgesType } from "../../../../utils/edgeTypeStyleUtil";
+import LineType from "../../../Toolbar/widgets/EdgeTypeButton/LineType";
 export default function MultipleElementLineType(props) {
   var topo = props.topo;
 
-  var setLineType = function setLineType(type) {};
-
-  var getChildrenNodeIds = function getChildrenNodeIds(nodes) {
-    var nodeIds = nodes.map(function (node) {
-      return node.getId();
-    });
-    nodes.forEach(function (node) {
-      if (node instanceof ht.Group) {
-        var children = node.getChildren().toArray();
-        nodeIds.push.apply(nodeIds, getChildrenNodeIds(children));
-      }
-    });
-    return nodeIds;
-  };
-
-  var getSelectedEdges = function getSelectedEdges() {
-    var gv = topo.getGraphView();
-    var selection = gv.getSelectionModel().getSelection().toArray();
-    var edges = selection.filter(function (element) {
-      return element instanceof ht.Edge;
-    }); // 查询选中节点间的连线
-
-    var nodes = selection.filter(function (element) {
-      return element instanceof ht.Node;
-    });
-    var nodeIds = getChildrenNodeIds(nodes);
-    var dm = gv.getDataModel();
-    getEdges(dm).forEach(function (edge) {
-      if (nodeIds.find(function (nodeId) {
-        return nodeId === edge.getSource().getId();
-      }) && nodeIds.find(function (nodeId) {
-        return nodeId === edge.getTarget().getId();
-      }) && !edges.find(function (item) {
-        return item === edge;
-      })) {
-        edges.push(edge);
-      }
-    });
-    return edges;
+  var setLineType = function setLineType(type) {
+    var edges = getEdgesBySelection(topo);
+    setEdgesType(edges, type, topo);
   };
 
   return /*#__PURE__*/React.createElement(LineType, {
-    getEdges: getSelectedEdges,
     onChange: setLineType,
     topo: topo
   });

package/es/core/editor/components/settings/propertyViews/multipleElements/MultipleElementPropertyView.js

@@ -34,19 +34,7 @@ export default function MultipleElementPropertyView(props) {
 
   useEffect(function () {
     field.setValues(values);
-  }, [values]);
-
-  var alignOnChange = function alignOnChange(v) {
-    // console.log('setAlignmentBySelectionNodes', v);
-    topo.historyManager.beginTransaction();
-    topo.getHtTopo().setAlignmentBySelectionNodes(v);
-
-    _onChange('groupAlign', v); // topoEditApi.setAlignmentBySelectionNodes(v);
-
-
-    topo.historyManager.endTransaction();
-  }; // TODO 临时方案，满足应用部署拓扑多选元素属性面板不显示对齐
-
+  }, [values]); // TODO 临时方案，满足应用部署拓扑多选元素属性面板不显示对齐
 
   if (!(editorProps !== null && editorProps !== void 0 && (_editorProps$multiple = editorProps.multipleElementPropertyViewProps) !== null && _editorProps$multiple !== void 0 && _editorProps$multiple.showElementAlign) && topoShowType === TPL_TREE) {
     return /*#__PURE__*/React.createElement(ViewPropertyView, props);
@@ -78,8 +66,7 @@ export default function MultipleElementPropertyView(props) {
     key: "\u5BF9\u9F50\u65B9\u5F0F",
     title: "\u5BF9\u9F50\u65B9\u5F0F"
   }, /*#__PURE__*/React.createElement(AlignSetting, {
-    onChange: alignOnChange,
-    selected: "left"
+    topo: topo
   })), /*#__PURE__*/React.createElement(CollapsePanel, {
     key: "\u7EBF\u5F62",
     title: "\u7EBF\u5F62"

package/es/core/editor/components/settings/propertyViews/node/NodePropertyView.js

@@ -1,11 +1,8 @@
-import _Tab from "@alifd/next/es/tab";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import useHtElement from "../../../../../common/hooks/useHtElement";
-import TabView from "../../common/tab/TabView";
 import Data from "./data/Data";
 import styles from "./NodePropertyView.module.scss";
-import Setting from "./Setting";
+import BasicSetting from "./Setting/BasicSetting";
 export default function NodePropertyView(props) {
   var _topo$options$editor;
 
@@ -14,40 +11,19 @@ export default function NodePropertyView(props) {
       values = props.values,
       onChange = props.onChange,
       editorProps = props.editorProps,
-      settingRuntimeState = props.settingRuntimeState;
-  var node = useHtElement({
-    topo: topo,
-    id: values.id
-  });
-
-  var renderData = function renderData() {
-    return /*#__PURE__*/React.createElement(Data, _extends({}, props, {
-      node: node
-    }));
-  };
-
-  var renderSetting = function renderSetting() {
-    var nodeSettingViewProps = editorProps.nodeSettingViewProps;
-    return /*#__PURE__*/React.createElement(Setting, _extends({}, props, nodeSettingViewProps));
-  }; // 未绑定资源的节点，根据参数控制是否可关联资源
-
+      selectionElement = props.selectionElement;
+  var node = selectionElement; // 未绑定资源的节点，根据参数控制是否可关联资源
 
   var showRelateResource = !!values.tag || !values.tag && ((_topo$options$editor = topo.options.editor) === null || _topo$options$editor === void 0 ? void 0 : _topo$options$editor.enableRelateResource) !== false;
-  var content;
+  var dataContent = null;
 
   if (showRelateResource) {
-    content = /*#__PURE__*/React.createElement(TabView, null, /*#__PURE__*/React.createElement(_Tab.Item, {
-      title: "\u6570\u636E",
-      key: "1"
-    }, renderData()), /*#__PURE__*/React.createElement(_Tab.Item, {
-      title: "\u8BBE\u7F6E",
-      key: "2"
-    }, renderSetting()));
-  } else {
-    content = renderSetting();
+    dataContent = /*#__PURE__*/React.createElement(Data, _extends({}, props, {
+      node: node
+    }));
   }
 
   return /*#__PURE__*/React.createElement("div", {
     className: styles.NodePropertyView
-  }, content);
+  }, /*#__PURE__*/React.createElement(BasicSetting, props), dataContent);
 }

package/es/core/editor/components/settings/propertyViews/node/NodePropertyViewV1.js

@@ -0,0 +1,53 @@
+import _Tab from "@alifd/next/es/tab";
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import useHtElement from "../../../../../common/hooks/useHtElement";
+import TabView from "../../common/tab/TabView";
+import Data from "./data/Data";
+import styles from "./NodePropertyView.module.scss";
+import Setting from "./Setting";
+export default function NodePropertyView(props) {
+  var _topo$options$editor;
+
+  var topo = props.topo,
+      topoEditApi = props.topoEditApi,
+      values = props.values,
+      onChange = props.onChange,
+      editorProps = props.editorProps,
+      settingRuntimeState = props.settingRuntimeState;
+  var node = useHtElement({
+    topo: topo,
+    id: values.id
+  });
+
+  var renderData = function renderData() {
+    return /*#__PURE__*/React.createElement(Data, _extends({}, props, {
+      node: node
+    }));
+  };
+
+  var renderSetting = function renderSetting() {
+    var nodeSettingViewProps = editorProps.nodeSettingViewProps;
+    return /*#__PURE__*/React.createElement(Setting, _extends({}, props, nodeSettingViewProps));
+  }; // 未绑定资源的节点，根据参数控制是否可关联资源
+
+
+  var showRelateResource = !!values.tag || !values.tag && ((_topo$options$editor = topo.options.editor) === null || _topo$options$editor === void 0 ? void 0 : _topo$options$editor.enableRelateResource) !== false;
+  var content;
+
+  if (showRelateResource) {
+    content = /*#__PURE__*/React.createElement(TabView, null, /*#__PURE__*/React.createElement(_Tab.Item, {
+      title: "\u6570\u636E",
+      key: "1"
+    }, renderData()), /*#__PURE__*/React.createElement(_Tab.Item, {
+      title: "\u8BBE\u7F6E",
+      key: "2"
+    }, renderSetting()));
+  } else {
+    content = renderSetting();
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.NodePropertyView
+  }, content);
+}

package/es/core/editor/components/settings/propertyViews/node/Setting/BasicSetting.js

@@ -0,0 +1,49 @@
+import _Form from "@alifd/next/es/form";
+import _Field from "@alifd/next/es/field";
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useEffect } from 'react';
+import NameInput from "./NameInput";
+
+function parseValues(values) {
+  return _extends({}, values, {
+    'attrObject.customName': values['attrObject.customName'] || values['attrObject.name'],
+    'attrObject.bindTopo': values['attrObject.bindTopo'] || '' // 解决切换节点时关联拓扑选项未重置
+
+  });
+}
+
+export default function BasicSetting(props) {
+  var topo = props.topo,
+      values = props.values,
+      _onChange = props.onChange,
+      editorProps = props.editorProps,
+      settingRuntimeState = props.settingRuntimeState,
+      _props$showImageSetti = props.showImageSetting,
+      showImageSetting = _props$showImageSetti === void 0 ? true : _props$showImageSetti;
+
+  var field = _Field.useField({
+    autoUnmount: false,
+    values: parseValues(values),
+    onChange: function onChange(name, value) {
+      var newValues = field.getValues();
+
+      _onChange(name, value, newValues);
+    }
+  });
+
+  useEffect(function () {
+    field.setValues(parseValues(values));
+  }, [values]);
+  return /*#__PURE__*/React.createElement(_Form, {
+    field: field,
+    labelAlign: "top",
+    style: {
+      margin: '12px 16px 0 32px'
+    }
+  }, /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u56FE\u7247\u540D\u79F0"
+  }, /*#__PURE__*/React.createElement(NameInput, {
+    name: "attrObject.customName",
+    topo: topo
+  })));
+}

package/es/core/editor/components/settings/propertyViews/node/Setting/NameInput.js

@@ -1,7 +1,7 @@
-import _Input from "@alifd/next/es/input";
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect, useState } from 'react';
-var NameInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
+import NameInput from "../../../common/NameInput";
+var NodeNameInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var onChange = props.onChange,
       topo = props.topo;
 
@@ -33,12 +33,13 @@ var NameInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     topo.historyManager.endTransaction();
   };
 
-  return /*#__PURE__*/React.createElement(_Input, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(NameInput, _extends({}, props, {
     ref: ref,
     value: value,
+    multipleLine: true,
     onChange: handleChange,
     onFocus: handleFocus,
     onBlur: handleBlur
   }));
 });
-export default NameInput;
+export default NodeNameInput;

package/es/core/editor/components/settings/propertyViews/node/data/Data.js

@@ -134,7 +134,8 @@ export default function Data(props) {
     style: {
       flex: 1,
       paddingRight: 16,
-      color: "#4D6277"
+      color: "#4D6277",
+      lineHeight: '20px'
     },
     title: values.tag ? values.name : null
   }, values.tag ? values.name : "—"), /*#__PURE__*/React.createElement(NodeRelateResourceButton, {

package/es/core/editor/components/settings/propertyViews/node/data/NodeRelateResourceButton.js

@@ -24,6 +24,7 @@ export default function NodeRelateResourceButton(props) {
   return !hide ? /*#__PURE__*/React.createElement(_Button, {
     type: "primary",
     text: true,
+    size: "small",
     onClick: function onClick() {
       setVisible(true);
     }

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

@@ -37,7 +37,7 @@ export default function TextPropertyView(props) {
 
         _onChange('styleMap.label.color', value.color, newValues);
 
-        var font = fontStyleUtil.build(value);
+        var font = fontStyleUtil.build(value.font);
 
         _onChange('styleMap.text.font', font, newValues);
 
@@ -59,23 +59,11 @@ export default function TextPropertyView(props) {
   useEffect(function () {
     field.setValues(parseValues(values));
   }, [values]);
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      paddingTop: 4
-    }
-  }, /*#__PURE__*/React.createElement(_Form, {
+  return /*#__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",
+    labelAlign: "top",
     style: {
-      padding: 0
+      margin: '12px 16px 0 32px'
     }
   }, /*#__PURE__*/React.createElement(_Form.Item, {
     label: "\u6587\u672C"
@@ -92,8 +80,5 @@ export default function TextPropertyView(props) {
     onBlur: function onBlur() {
       topo.historyManager.endTransaction();
     }
-  })), /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(TextStyle, {
-    name: "styleMap.textObj",
-    topo: topo
-  })))))));
+  })));
 }

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

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

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

@@ -1,15 +1,15 @@
 import _Box from "@alifd/next/es/box";
+import _extends from "@babel/runtime/helpers/extends";
 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 React, { useState, useEffect } 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 DebugTools from "./widgets/DebugTools";
+import SettingButtonWidget from "../../../viewer/components/titlebar/widgets/SettingButtonWidget";
 export default function TopoEditorTitleBar(props) {
   var topo = props.topo,
       topoEditApi = props.topoEditApi;
@@ -132,5 +132,9 @@ export default function TopoEditorTitleBar(props) {
         }
       });
     }
-  }, "\u9000\u51FA"))));
+  }, "\u9000\u51FA"), /*#__PURE__*/React.createElement(SettingButtonWidget, _extends({
+    isEditor: true
+  }, props, {
+    viewerProps: topo.viewProps.viewerProps
+  })))));
 }

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

@@ -0,0 +1,42 @@
+import React, { useEffect } from 'react';
+var ht = window.ht; // 快捷键
+
+export default function useKeyboardShortcut(props) {
+  var topo = props.topo,
+      topoEdit = props.topoEdit,
+      isEditMode = props.isEditMode;
+  useEffect(function () {
+    var handleKeyDown = function handleKeyDown(e) {
+      if (e.target.tagName === 'INPUT') {
+        return;
+      }
+
+      var isCtrlDown = ht.Default.isCtrlDown;
+
+      if (isCtrlDown(e)) {
+        if (e.keyCode === 90) {
+          // ctrl+z 撤销
+          topo.historyManager.undo();
+        } //  else if (e.keyCode == 89) {//ctrl+y 重做
+        //   this.redo();
+        // }
+
+      }
+
+      if (e.keyCode === 32) {
+        var _topo$store$getModelS = topo.store.getModelState('topoEdit'),
+            viewMouseMode = _topo$store$getModelS.viewMouseMode;
+
+        topoEdit.setViewMouseMode(viewMouseMode === 'select' ? 'move' : 'select');
+      }
+    };
+
+    if (isEditMode) {
+      window.addEventListener('keydown', handleKeyDown);
+    }
+
+    return function () {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isEditMode]);
+}