@riil-frontend/component-topology 6.0.0-alpha.9 → 6.0.2

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

@@ -55,19 +55,7 @@ function MultipleElementPropertyView(props) {
 
   (0, _react.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 === _template.TPL_TREE) {
     return /*#__PURE__*/_react["default"].createElement(_ViewPropertyView["default"], props);
@@ -99,8 +87,7 @@ function MultipleElementPropertyView(props) {
     key: "\u5BF9\u9F50\u65B9\u5F0F",
     title: "\u5BF9\u9F50\u65B9\u5F0F"
   }, /*#__PURE__*/_react["default"].createElement(_AlignSetting["default"], {
-    onChange: alignOnChange,
-    selected: "left"
+    topo: topo
   })), /*#__PURE__*/_react["default"].createElement(CollapsePanel, {
     key: "\u7EBF\u5F62",
     title: "\u7EBF\u5F62"

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

@@ -5,21 +5,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = NodePropertyView;
 
-var _tab = _interopRequireDefault(require("@alifd/next/lib/tab"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _useHtElement = _interopRequireDefault(require("../../../../../common/hooks/useHtElement"));
-
-var _TabView = _interopRequireDefault(require("../../common/tab/TabView"));
-
 var _Data = _interopRequireDefault(require("./data/Data"));
 
 var _NodePropertyViewModule = _interopRequireDefault(require("./NodePropertyView.module.scss"));
 
-var _Setting = _interopRequireDefault(require("./Setting"));
+var _BasicSetting = _interopRequireDefault(require("./Setting/BasicSetting"));
 
 function NodePropertyView(props) {
   var _topo$options$editor;
@@ -29,40 +23,19 @@ function NodePropertyView(props) {
       values = props.values,
       onChange = props.onChange,
       editorProps = props.editorProps,
-      settingRuntimeState = props.settingRuntimeState;
-  var node = (0, _useHtElement["default"])({
-    topo: topo,
-    id: values.id
-  });
-
-  var renderData = function renderData() {
-    return /*#__PURE__*/_react["default"].createElement(_Data["default"], (0, _extends2["default"])({}, props, {
-      node: node
-    }));
-  };
-
-  var renderSetting = function renderSetting() {
-    var nodeSettingViewProps = editorProps.nodeSettingViewProps;
-    return /*#__PURE__*/_react["default"].createElement(_Setting["default"], (0, _extends2["default"])({}, 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["default"].createElement(_TabView["default"], null, /*#__PURE__*/_react["default"].createElement(_tab["default"].Item, {
-      title: "\u6570\u636E",
-      key: "1"
-    }, renderData()), /*#__PURE__*/_react["default"].createElement(_tab["default"].Item, {
-      title: "\u8BBE\u7F6E",
-      key: "2"
-    }, renderSetting()));
-  } else {
-    content = renderSetting();
+    dataContent = /*#__PURE__*/_react["default"].createElement(_Data["default"], (0, _extends2["default"])({}, props, {
+      node: node
+    }));
   }
 
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _NodePropertyViewModule["default"].NodePropertyView
-  }, content);
+  }, /*#__PURE__*/_react["default"].createElement(_BasicSetting["default"], props), dataContent);
 }

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

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = NodePropertyView;
+
+var _tab = _interopRequireDefault(require("@alifd/next/lib/tab"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useHtElement = _interopRequireDefault(require("../../../../../common/hooks/useHtElement"));
+
+var _TabView = _interopRequireDefault(require("../../common/tab/TabView"));
+
+var _Data = _interopRequireDefault(require("./data/Data"));
+
+var _NodePropertyViewModule = _interopRequireDefault(require("./NodePropertyView.module.scss"));
+
+var _Setting = _interopRequireDefault(require("./Setting"));
+
+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 = (0, _useHtElement["default"])({
+    topo: topo,
+    id: values.id
+  });
+
+  var renderData = function renderData() {
+    return /*#__PURE__*/_react["default"].createElement(_Data["default"], (0, _extends2["default"])({}, props, {
+      node: node
+    }));
+  };
+
+  var renderSetting = function renderSetting() {
+    var nodeSettingViewProps = editorProps.nodeSettingViewProps;
+    return /*#__PURE__*/_react["default"].createElement(_Setting["default"], (0, _extends2["default"])({}, 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["default"].createElement(_TabView["default"], null, /*#__PURE__*/_react["default"].createElement(_tab["default"].Item, {
+      title: "\u6570\u636E",
+      key: "1"
+    }, renderData()), /*#__PURE__*/_react["default"].createElement(_tab["default"].Item, {
+      title: "\u8BBE\u7F6E",
+      key: "2"
+    }, renderSetting()));
+  } else {
+    content = renderSetting();
+  }
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: _NodePropertyViewModule["default"].NodePropertyView
+  }, content);
+}

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

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = BasicSetting;
+
+var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
+
+var _field = _interopRequireDefault(require("@alifd/next/lib/field"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _NameInput = _interopRequireDefault(require("./NameInput"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function parseValues(values) {
+  return (0, _extends2["default"])({}, values, {
+    'attrObject.customName': values['attrObject.customName'] || values['attrObject.name'],
+    'attrObject.bindTopo': values['attrObject.bindTopo'] || '' // 解决切换节点时关联拓扑选项未重置
+
+  });
+}
+
+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["default"].useField({
+    autoUnmount: false,
+    values: parseValues(values),
+    onChange: function onChange(name, value) {
+      var newValues = field.getValues();
+
+      _onChange(name, value, newValues);
+    }
+  });
+
+  (0, _react.useEffect)(function () {
+    field.setValues(parseValues(values));
+  }, [values]);
+  return /*#__PURE__*/_react["default"].createElement(_form["default"], {
+    field: field,
+    labelAlign: "top",
+    style: {
+      margin: '12px 16px 0 32px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+    label: "\u56FE\u7247\u540D\u79F0"
+  }, /*#__PURE__*/_react["default"].createElement(_NameInput["default"], {
+    name: "attrObject.customName",
+    topo: topo
+  })));
+}

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

@@ -5,17 +5,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 
-var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _NameInput = _interopRequireDefault(require("../../../common/NameInput"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var NameInput = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
+var NodeNameInput = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   var onChange = props.onChange,
       topo = props.topo;
 
@@ -47,14 +47,15 @@ var NameInput = /*#__PURE__*/_react["default"].forwardRef(function (props, ref)
     topo.historyManager.endTransaction();
   };
 
-  return /*#__PURE__*/_react["default"].createElement(_input["default"], (0, _extends2["default"])({}, props, {
+  return /*#__PURE__*/_react["default"].createElement(_NameInput["default"], (0, _extends2["default"])({}, props, {
     ref: ref,
     value: value,
+    multipleLine: true,
     onChange: handleChange,
     onFocus: handleFocus,
     onBlur: handleBlur
   }));
 });
 
-var _default = NameInput;
+var _default = NodeNameInput;
 exports["default"] = _default;

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

@@ -156,7 +156,8 @@ 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["default"].createElement(_NodeRelateResourceButton["default"], {

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

@@ -39,6 +39,7 @@ function NodeRelateResourceButton(props) {
   return !hide ? /*#__PURE__*/_react["default"].createElement(_button["default"], {
     type: "primary",
     text: true,
+    size: "small",
     onClick: function onClick() {
       setVisible(true);
     }

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

@@ -56,7 +56,7 @@ function TextPropertyView(props) {
 
         _onChange('styleMap.label.color', value.color, newValues);
 
-        var font = _fontStyleUtil["default"].build(value);
+        var font = _fontStyleUtil["default"].build(value.font);
 
         _onChange('styleMap.text.font', font, newValues);
 
@@ -78,23 +78,11 @@ function TextPropertyView(props) {
   (0, _react.useEffect)(function () {
     field.setValues(parseValues(values));
   }, [values]);
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      paddingTop: 4
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_form["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_form["default"], {
     field: field,
-    labelAlign: "top"
-  }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, null, /*#__PURE__*/_react["default"].createElement(_collapse["default"], {
-    defaultExpandedKeys: ['显示设置'],
-    style: {
-      border: 'none'
-    }
-  }, /*#__PURE__*/_react["default"].createElement(CollapsePanel, {
-    key: "\u663E\u793A\u8BBE\u7F6E",
-    title: "\u663E\u793A\u8BBE\u7F6E",
+    labelAlign: "top",
     style: {
-      padding: 0
+      margin: '12px 16px 0 32px'
     }
   }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
     label: "\u6587\u672C"
@@ -111,8 +99,5 @@ function TextPropertyView(props) {
     onBlur: function onBlur() {
       topo.historyManager.endTransaction();
     }
-  })), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, null, /*#__PURE__*/_react["default"].createElement(_TextStyle["default"], {
-    name: "styleMap.textObj",
-    topo: topo
-  })))))));
+  })));
 }

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

@@ -9,6 +9,8 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 
 var _box = _interopRequireDefault(require("@alifd/next/lib/box"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _dialog = _interopRequireDefault(require("@alifd/next/lib/dialog"));
 
 var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
@@ -25,6 +27,8 @@ var _TitleBarModule = _interopRequireDefault(require("../../../components/titleb
 
 var _DebugTools = _interopRequireDefault(require("./widgets/DebugTools"));
 
+var _SettingButtonWidget = _interopRequireDefault(require("../../../viewer/components/titlebar/widgets/SettingButtonWidget"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -151,5 +155,9 @@ function TopoEditorTitleBar(props) {
         }
       });
     }
-  }, "\u9000\u51FA"))));
+  }, "\u9000\u51FA"), /*#__PURE__*/_react["default"].createElement(_SettingButtonWidget["default"], (0, _extends2["default"])({
+    isEditor: true
+  }, props, {
+    viewerProps: topo.viewProps.viewerProps
+  })))));
 }

package/lib/core/editor/config/themes.js

@@ -0,0 +1,114 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var baseLightTheme = {
+  color: '#FFFFFF',
+  globalNodeLabelColor: '#4d6277',
+  globalNodeLabelStyle: {
+    color: '#4d6277'
+  },
+  globalEdgeTagStyle: {
+    color: '#777B9A',
+    background: '#FFFFFF',
+    // 背景色，不传使用默认内置 @V1.2
+    borderColor: '#CBCBCB' // 边框颜色，不传使用默认内置。用于主题切换 @V1.2
+
+  },
+  text: {
+    color: '#4d6277'
+  },
+  group: {
+    style: {
+      'group.title.background': '#E4E9EE',
+      // 标题背景颜色
+      'group.title.color': '#4D6277',
+      // 标题文字颜色
+      'group.background': 'rgba(255, 255, 255, 0.9)',
+      'group.border.color': '#E4E9EE' // 边框颜色
+
+    }
+  },
+  cluster: {
+    style: {
+      'group.title.color': '#4D6277',
+      // 标题文字颜色
+      'group.title.background': 'rgba(229,245,253,0.6)',
+      // 标题背景颜色
+      'group.background': 'rgba(229,245,253,0.6)',
+      'group.border.color': '#C7E4F3',
+      // 边框颜色
+      'group.border.radius': 3
+    }
+  }
+};
+var THEMES = [(0, _extends2["default"])({}, baseLightTheme, {
+  name: 'white',
+  label: '白色',
+  color: '#FFFFFF',
+  toolsTheme: 'lightgrayblue'
+}), (0, _extends2["default"])({}, baseLightTheme, {
+  name: 'lightblue',
+  label: '蓝色',
+  color: '#F9FBFF',
+  toolsTheme: 'white'
+}), // {
+//   name: 'yellow',
+//   label: '黄色',
+//   color: '#FFFDE6',
+// },
+// {
+//   name: 'green',
+//   label: '绿色',
+//   color: '#EAFFE8',
+// },
+{
+  name: 'dark',
+  label: '深色',
+  color: '#031425',
+  toolsTheme: 'black',
+  globalNodeLabelStyle: {
+    color: '#ffffff'
+  },
+  globalEdgeTagStyle: {
+    color: '#E4E9EE',
+    background: '#063658',
+    // 背景色，不传使用默认内置 @V1.2
+    borderColor: '#08A5F4' // 边框颜色，不传使用默认内置。用于主题切换 @V1.2
+
+  },
+  text: {
+    color: '#ffffff'
+  },
+  group: {
+    style: {
+      'group.title.background': 'rgba(8,165,244,1)',
+      // 标题背景颜色 #08A5F4
+      'group.title.color': '#FFFFFF',
+      // 标题文字颜色
+      'group.background': 'rgba(29,55,113,0.6)',
+      'group.border.color': 'rgba(8,165,244,0.8)' // 边框颜色
+
+    }
+  },
+  cluster: {
+    style: {
+      'group.title.color': '#FFFFFF',
+      // 标题文字颜色
+      'group.title.background': 'rgba(14,44,69,1)',
+      // 标题背景颜色 #0E2C45
+      'group.background': 'rgba(14,44,69,1)',
+      // #0E2C45
+      'group.border.color': '#08A5F4',
+      // 边框颜色
+      'group.border.radius': 3
+    }
+  }
+}];
+var _default = THEMES;
+exports["default"] = _default;

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

@@ -0,0 +1,49 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = useKeyboardShortcut;
+
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var ht = window.ht; // 快捷键
+
+function useKeyboardShortcut(props) {
+  var topo = props.topo,
+      topoEdit = props.topoEdit;
+  (0, _react.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');
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return function () {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+}

package/lib/core/editor/hooks/useNewElementTheme.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = require("react");
+
+var _themes = _interopRequireDefault(require("../config/themes"));
+
+var _themeUtil = _interopRequireDefault(require("../utils/themeUtil"));
+
+function useNewElementTheme(props) {
+  var topo = props.topo;
+  var topoModState = topo.store.useModelState('topoMod');
+  var graphLoaded2 = topoModState.graphLoaded2;
+  (0, _react.useEffect)(function () {
+    var dm = topo.getHtTopo().getGraphView().dm();
+    var inited = false;
+
+    if (graphLoaded2) {
+      dm.addDataModelChangeListener(handleDataModelChangeListener);
+      inited = true;
+    }
+
+    function handleDataModelChangeListener(e) {
+      var kind = e.kind,
+          data = e.data;
+
+      if (kind === 'add') {
+        var displayConfig = topo.store.getModelState('displayConfig');
+        var theme = displayConfig.canvasTheme || 'white';
+
+        var themeConfig = _themes["default"].find(function (item) {
+          return item.name === theme;
+        });
+
+        var _ThemeUtil = (0, _themeUtil["default"])({
+          topo: topo
+        }),
+            setElementTheme = _ThemeUtil.setElementTheme;
+
+        setElementTheme(data, themeConfig);
+      }
+    }
+
+    return function () {
+      if (inited && dm) {
+        dm.removeDataModelChangeListener(handleDataModelChangeListener);
+      }
+    };
+  }, [graphLoaded2]);
+}
+
+var _default = useNewElementTheme;
+exports["default"] = _default;