@riil-frontend/component-topology 5.0.0-alpha.9 → 5.0.2

package/lib/core/components/DisplaySettingDrawer/demo/Demo.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = Demo;
+
+var _react = _interopRequireDefault(require("react"));
+
+function Demo() {
+  var dataSource = [{
+    id: 'switch',
+    label: '交换机',
+    icon: '/img/model/switch.svg',
+    list: [{
+      code: 'graph:name',
+      name: '图片名称',
+      typeName: null
+    }, {
+      code: 'ciType:name',
+      name: '资源类型',
+      typeName: null
+    }, {
+      code: 'attr:ipv4_address',
+      name: 'IPv4地址',
+      typeName: '属性'
+    }, {
+      code: 'metric:ping_status',
+      name: 'ping状态',
+      typeName: '指标'
+    }]
+  }, {
+    id: 'router',
+    label: '路由器',
+    icon: '/img/model/switch.svg',
+    list: [{
+      code: 'graph:name',
+      name: '图片名称',
+      typeName: null
+    }, {
+      code: 'ciType:name',
+      name: '资源类型',
+      typeName: null
+    }, {
+      code: 'attr:ipv4_address',
+      name: 'IPv4地址',
+      typeName: '属性'
+    }, {
+      code: 'metric:ping_status',
+      name: 'ping状态',
+      typeName: '指标'
+    }]
+  }];
+  return /*#__PURE__*/_react["default"].createElement(AttributeSelectDrawer, {
+    visible: true,
+    value: {} // 示例： {'switch': ['graph:name','ciType:name'], ...}
+    ,
+    dataSource: dataSource // key为监控模板code，value为配置项列表
+    ,
+    limit: 3 // 单个模板最大可选择选项数量
+    ,
+    onChange: function onChange(value) {
+      console.log('onChange');
+    },
+    onCancel: function onCancel() {
+      console.log('onCancel');
+    },
+    showType: "tip" // 数据类型。
+
+  });
+}

package/lib/core/components/ResourceViewAttributeSetting/Setting.js

@@ -26,7 +26,8 @@ var ResourceDiplayInfoSetting = /*#__PURE__*/(0, _react.forwardRef)(function (pr
       elementType = props.elementType,
       showType = props.showType,
       limit = props.limit,
-      onChange = props.onChange;
+      onChange = props.onChange,
+      queryData = props.queryData;
   var batchAttrMetric = (0, _react.useRef)();
 
   var _useState = (0, _react.useState)({}),
@@ -43,39 +44,13 @@ var ResourceDiplayInfoSetting = /*#__PURE__*/(0, _react.forwardRef)(function (pr
       allLinkModSet = resAndMetrics.allLinkModSet;
 
   var openMarkSetting = function openMarkSetting(parm) {
-    // rlog.debug('openMarkSetting', parm, allCiSet, ciSetDoc, setConfig,allCiModSet,allLinkModSet);
     _rlog["default"].debug("openMarkSetting", parm, elementType, showType, allCiModSet, allLinkModSet);
 
-    setMarkarkData(elementType === "node" ? allCiModSet : allLinkModSet);
-    /**
-     * 已修改，目前只有批量设置
-     */
-    // if (parm.selectType === 'batch') {
-    //   setMarkarkData(setConfig ?? allCiModSet);
-    // } else {
-    //   const setObj = {};
-    //   if (ciSetDoc?.hasOwnProperty(parm.ciId)) {
-    //     setObj[parm.ciId] = {
-    //       ...ciSetDoc[parm.ciId],
-    //       tag: ((ciSetDoc[parm.ciId] || {}).tag || []).map((t) => {
-    //         // return t.split('-')[0];
-    //         return t.code;
-    //       }),
-    //       tip: ((ciSetDoc[parm.ciId] || {}).tip || []).map((t) => {
-    //         return t.code;
-    //       }),
-    //     };
-    //   } else {
-    //     setObj[parm.ciId] = {
-    //       code: '',
-    //       list: [],
-    //       tag: [],
-    //       tip: [],
-    //     };
-    //   }
-    //   rlog.debug('setMarkarkData', setObj);
-    //   setMarkarkData(setObj);
-    // }
+    if (queryData) {
+      setMarkarkData(queryData());
+    } else {
+      setMarkarkData(elementType === "node" ? allCiModSet : allLinkModSet);
+    }
 
     batchAttrMetric.current.show({
       showType: showType
@@ -98,22 +73,7 @@ var ResourceDiplayInfoSetting = /*#__PURE__*/(0, _react.forwardRef)(function (pr
         isCustom: true,
         data: parm
       });
-    } // const doc = ciSetDoc;
-    // let ciDoc = {};
-    // let allCiset = allCiSet;
-    // if (selectType === 'single') {
-    //   const singleResult = updateCiDoc(dataType, parm, doc, allCiSet);
-    //   ciDoc = singleResult.cidoc;
-    //   allCiset = singleResult.allciset;
-    // } else {
-    //   const allResult = updateAllCiDoc(dataType, parm, doc, allCiSet);
-    //   ciDoc = allResult.cidoc;
-    //   allCiset = allResult.allciset;
-    // }
-    // rlog.debug('saveMarkSetting', {parm, allCiSet, ciDoc, allCiset});
-    // topo.view.topoClient.setTagAndTipConfig(ciDoc);
-    // bizDispatchers.update({ ciSetDoc: ciDoc, setConfig: allCiset });
-
+    }
   };
 
   (0, _react.useImperativeHandle)(ref, function () {

package/lib/core/components/TopoView/TopoView.module.scss

@@ -19,7 +19,7 @@
 // 解决拓扑图容器绝对定位z-index>0时浮层和右键菜单不显示问题
 :global {
   body > .ht-ui-view {
-    z-index: 1000;
+    z-index: 10000;
   }
   body > div[ht="ht-view ht.ui.ContextMenu"] {
     z-index: 1000;

package/lib/core/components/TopoView/topoView.js

@@ -81,16 +81,16 @@ var Topology = function Topology(props) {
   topo.viewProps = props;
   var store = topo.store;
 
-  var _store$useModel = store.useModel("topoMod"),
+  var _store$useModel = store.useModel('topoMod'),
       topoState = _store$useModel[0],
       topoDispatchers = _store$useModel[1];
 
-  var bizDispatchers = store.useModelDispatchers("topoBizMod");
+  var bizDispatchers = store.useModelDispatchers('topoBizMod');
   var topoId = topoState.topoId,
       viewState = topoState.viewState,
       topoData = topoState.topoData,
       urlParams = topoState.urlParams;
-  var isEditMode = viewState === "edit";
+  var isEditMode = viewState === 'edit';
   var topoShowType = topoState.type;
   var isLayerTopo = topoShowType === _template.TPL_TREE;
 
@@ -130,7 +130,7 @@ var Topology = function Topology(props) {
     topo: topo
   });
   (0, _react.useEffect)(function () {
-    if (viewState === "view" && topoId) {
+    if (viewState === 'view' && topoId) {
       // TODO 移到模型中
       // rlog.debug('useEffect-viewState', topoId, viewState);
       setTData(null);
@@ -154,7 +154,7 @@ var Topology = function Topology(props) {
   var onGraphCreated = (0, _react.useCallback)(function (topoClient) {
     topo.view.onCreatedView(topoClient);
 
-    _rlog["default"].info("TopoView.onGraphCreated");
+    _rlog["default"].info('TopoView.onGraphCreated');
 
     initSelection();
 
@@ -163,23 +163,28 @@ var Topology = function Topology(props) {
     }
   }, []);
   var handleGraphDataLoaded = (0, _react.useCallback)(function () {
-    _rlog["default"].info("TopoView.handleGraphDataLoaded", topoData, topo.getDataModel().getDatas().toArray());
+    _rlog["default"].info('TopoView.handleGraphDataLoaded', topoData, topo.getDataModel().getDatas().toArray());
 
     (0, _clusterUtil.upgradeV103GraphClusterNode)(topo, topoData);
     (0, _graphLinkUtil.fixLink)(topo);
     (0, _clusterUtil.handleClusterNoPermission)(topo);
     (0, _edgeUtil.updateEdgeExpanded)(topo);
+    var htHistoryManager = topo.getDataModel().getHistoryManager();
+
+    if (htHistoryManager) {
+      topo.historyManager = new _HistoryManager.HistoryManager(topo, htHistoryManager);
+    }
+
     topoDispatchers.update({
       graphLoaded2: true
     });
-    topo.historyManager = new _HistoryManager.HistoryManager(topo);
 
     if (onLoad) {
       onLoad();
     }
   }, [topoData]);
   var handleGraphLoaded = (0, _react.useCallback)(function () {
-    _rlog["default"].info("TopoView.handleGraphLoaded", topoData, topo.getDataModel().getDatas().toArray());
+    _rlog["default"].info('TopoView.handleGraphLoaded', topoData, topo.getDataModel().getDatas().toArray());
 
     (0, _clusterUtil.upgradeV103GraphClusterNode)(topo, topoData);
     (0, _graphLinkUtil.fixLink)(topo);
@@ -199,7 +204,7 @@ var Topology = function Topology(props) {
   }, [topoData]); // TODO 之后把事件方法都转移出去
 
   var rightEventHandle = function rightEventHandle(event) {
-    _rlog["default"].debug("右键事件", event);
+    _rlog["default"].debug('右键事件', event);
 
     var contextMenu = topo.view.contextMenu;
 
@@ -209,7 +214,7 @@ var Topology = function Topology(props) {
   };
 
   var onRefresh = function onRefresh(e) {
-    _rlog["default"].debug("TopoView:onRefresh", e);
+    _rlog["default"].debug('TopoView:onRefresh', e);
 
     onRefreshTopo ? onRefreshTopo() : topoDispatchers.refreshTopo();
   };
@@ -220,7 +225,7 @@ var Topology = function Topology(props) {
 
 
   var handleEvent = function handleEvent(event) {
-    _rlog["default"].debug("TopoView:onEvent", event);
+    _rlog["default"].debug('TopoView:onEvent', event);
 
     onEvent && onEvent(event);
     topoEdit.onEvent(event);
@@ -260,7 +265,7 @@ var Topology = function Topology(props) {
         break;
 
       case _componentTopologyGraph.TopoEvent.EVENT_CONTEXT_TOOL:
-        _rlog["default"].debug("自定义工具栏事件", event);
+        _rlog["default"].debug('自定义工具栏事件', event);
 
         break;
 
@@ -292,7 +297,10 @@ var Topology = function Topology(props) {
     onEnterEdit: onEnterEdit,
     topoEditApi: topoEdit
   })), /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames2["default"])(_TopoViewModule["default"].viewPanel, (_classnames = {}, _classnames[_TopoViewModule["default"].viewPanelEditMode] = isEditMode, _classnames))
+    className: (0, _classnames2["default"])(_TopoViewModule["default"].viewPanel, (_classnames = {}, _classnames[_TopoViewModule["default"].viewPanelEditMode] = isEditMode, _classnames)),
+    onKeyDown: function onKeyDown(e) {
+      topo.historyManager && topo.historyManager.handleKeyDown(e);
+    }
   }, /*#__PURE__*/_react["default"].createElement(_componentTopologyGraph["default"], (0, _extends2["default"])({}, graphViewProps, {
     createHtTopoProps: (0, _extends2["default"])({}, graphViewProps.createHtTopoProps, {
       editor: (0, _extends2["default"])({}, ((_graphViewProps$creat = graphViewProps.createHtTopoProps) === null || _graphViewProps$creat === void 0 ? void 0 : _graphViewProps$creat.editor) || {})
@@ -307,10 +315,10 @@ var Topology = function Topology(props) {
     onDestroy: onDestroy,
     onEvent: handleEvent,
     style: {
-      width: "100%",
-      height: "100%",
-      position: "relative",
-      overflow: "hidden"
+      width: '100%',
+      height: '100%',
+      position: 'relative',
+      overflow: 'hidden'
     },
     debugId: topo.debugId
   }))), !isEditMode && /*#__PURE__*/_react["default"].createElement(_ViewerPlugin["default"], {
@@ -357,5 +365,6 @@ Topology.defaultProps = {
   topoContext: {} // titleBar: false,
 
 };
+Topology.displayName = 'Topology';
 var _default = Topology;
 exports["default"] = _default;

package/lib/core/editor/components/BackgroundView/index.js

@@ -157,25 +157,25 @@ function BackgroundView(props) {
   }
 
   function _getBackground() {
-    _getBackground = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+    _getBackground = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
       var res;
-      return _regenerator["default"].wrap(function _callee3$(_context3) {
+      return _regenerator["default"].wrap(function _callee4$(_context4) {
         while (1) {
-          switch (_context3.prev = _context3.next) {
+          switch (_context4.prev = _context4.next) {
             case 0:
-              _context3.next = 2;
+              _context4.next = 2;
               return _background["default"].getBackgroundList();
 
             case 2:
-              res = _context3.sent;
+              res = _context4.sent;
               setBgList(res);
 
             case 4:
             case "end":
-              return _context3.stop();
+              return _context4.stop();
           }
         }
-      }, _callee3);
+      }, _callee4);
     }));
     return _getBackground.apply(this, arguments);
   }
@@ -186,34 +186,42 @@ function BackgroundView(props) {
 
 
   function _removeBg() {
-    _removeBg = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(id) {
+    _removeBg = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5(id) {
       var res;
-      return _regenerator["default"].wrap(function _callee4$(_context4) {
+      return _regenerator["default"].wrap(function _callee5$(_context5) {
         while (1) {
-          switch (_context4.prev = _context4.next) {
+          switch (_context5.prev = _context5.next) {
             case 0:
-              _context4.next = 2;
+              _context5.next = 2;
               return _background["default"].deleteBackground(id);
 
             case 2:
-              res = _context4.sent;
+              res = _context5.sent;
 
-              // 删除当前选中
-              if (id === (current === null || current === void 0 ? void 0 : current.id)) {
-                reset();
-                setHtTopoBackground(null);
+              if (!(id === (current === null || current === void 0 ? void 0 : current.id))) {
+                _context5.next = 9;
+                break;
               }
 
+              topo.historyManager.setDisabled(true, '删除背景');
+              _context5.next = 7;
+              return reset();
+
+            case 7:
+              setHtTopoBackground(null);
+              topo.historyManager.setDisabled(false, '删除背景');
+
+            case 9:
               getBackground();
 
               _message["default"].success('删除成功');
 
-            case 6:
+            case 11:
             case "end":
-              return _context4.stop();
+              return _context5.stop();
           }
         }
-      }, _callee4);
+      }, _callee5);
     }));
     return _removeBg.apply(this, arguments);
   }
@@ -230,38 +238,46 @@ function BackgroundView(props) {
           switch (_context2.prev = _context2.next) {
             case 0:
               if (!(currentBg !== null && currentBg !== void 0 && currentBg.id && currentBg.id !== (current === null || current === void 0 ? void 0 : current.id))) {
-                _context2.next = 16;
+                _context2.next = 19;
                 break;
               }
 
               setLoadingBackground(true);
+              topo.historyManager.beginTransaction();
               imgUrl = (0, _backgroundUtil.getBackgroundImageUrl)(currentBg);
-              _context2.prev = 3;
-              _context2.next = 6;
+              _context2.prev = 4;
+              _context2.next = 7;
               return (0, _imageUtil.getImageSize)(imgUrl);
 
-            case 6:
+            case 7:
               size = _context2.sent;
 
               _rlog["default"].debug('获取图片大小', size);
 
-              setBackground((0, _extends2["default"])({}, currentBg, size));
+              _context2.next = 11;
+              return setBackground((0, _extends2["default"])({}, currentBg, size));
+
+            case 11:
               topo.getHtTopo().setBackgroundImgUrl(imgUrl, size.width, size.height);
-              setLoadingBackground(false);
-              _context2.next = 16;
+              _context2.next = 17;
               break;
 
-            case 13:
-              _context2.prev = 13;
-              _context2.t0 = _context2["catch"](3);
+            case 14:
+              _context2.prev = 14;
+              _context2.t0 = _context2["catch"](4);
+
+              _rlog["default"].error('设置背景失败', _context2.t0);
+
+            case 17:
+              topo.historyManager.endTransaction();
               setLoadingBackground(false);
 
-            case 16:
+            case 19:
             case "end":
               return _context2.stop();
           }
         }
-      }, _callee2, null, [[3, 13]]);
+      }, _callee2, null, [[4, 14]]);
     }));
 
     return function handleSelect(_x4) {
@@ -269,16 +285,40 @@ function BackgroundView(props) {
     };
   }();
 
+  var resetDefault = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+      return _regenerator["default"].wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              topo.historyManager.beginTransaction();
+              _context3.next = 3;
+              return reset();
+
+            case 3:
+              setHtTopoBackground(null);
+              topo.historyManager.endTransaction();
+
+            case 5:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    }));
+
+    return function resetDefault() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _indexModule["default"]['background-view']
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: _indexModule["default"].option
   }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
     title: "\u6062\u590D\u9ED8\u8BA4",
-    onClick: function onClick() {
-      reset();
-      setHtTopoBackground(null);
-    }
+    onClick: resetDefault
   }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
     type: "topo_button_icon_recovery"
   })), /*#__PURE__*/_react["default"].createElement("a", {

package/lib/core/editor/components/settings/common/LineType/index.js

@@ -103,9 +103,15 @@ var LineType = function LineType(props) {
 
   var handleChange = function handleChange(data) {
     console.log("handleChange", data);
-    onChange && onChange(data.value);
+    topo.historyManager.beginTransaction();
+
+    if (onChange) {
+      onChange(data.value);
+    }
+
     setValue(data.value);
     setLineType(data.value);
+    topo.historyManager.endTransaction();
   };
 
   return /*#__PURE__*/_react["default"].createElement(_box["default"], {

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

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = FontStyleCheckbox;
+exports["default"] = void 0;
 
 var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
 
@@ -25,7 +25,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 FontStyleCheckbox(props) {
+var FontStyleCheckbox = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   var value = props.value,
       onChange = props.onChange;
   var options = [{
@@ -65,6 +65,7 @@ function FontStyleCheckbox(props) {
       alt: ""
     }));
   }));
-}
+});
 
-;
+var _default = FontStyleCheckbox;
+exports["default"] = _default;

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

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = TextStyle;
+exports["default"] = void 0;
 
 var _numberPicker = _interopRequireDefault(require("@alifd/next/lib/number-picker"));
 
@@ -38,8 +38,9 @@ function parseValue(value) {
   };
 }
 
-function TextStyle(props) {
-  var value = props.value,
+var TextStyle = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
+  var topo = props.topo,
+      value = props.value,
       _onChange = props.onChange;
 
   var field = _field["default"].useField({
@@ -134,7 +135,13 @@ function TextStyle(props) {
       width: '100%',
       marginRight: 8
     },
-    placeholder: "\u8BF7\u8F93\u5165"
+    placeholder: "\u8BF7\u8F93\u5165",
+    onFocus: function onFocus() {
+      topo.historyManager.beginTransaction();
+    },
+    onBlur: function onBlur() {
+      topo.historyManager.endTransaction();
+    }
   })))), /*#__PURE__*/_react["default"].createElement("div", {
     style: {
       display: 'flex'
@@ -156,8 +163,17 @@ function TextStyle(props) {
     label: "\u989C\u8272"
   }, /*#__PURE__*/_react["default"].createElement(_ColorPicker["default"], {
     name: "color",
-    align: "br"
+    align: "br",
+    balloonProps: {
+      onFocus: function onFocus() {
+        topo.historyManager.beginTransaction();
+      },
+      onBlur: function onBlur() {
+        topo.historyManager.endTransaction();
+      }
+    }
   }))))));
-}
+});
 
-;
+var _default = TextStyle;
+exports["default"] = _default;

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

@@ -50,7 +50,6 @@ var fontStyleUtil = {
         map[key.replace(prefix, '')] = obj[key];
       }
     });
-    console.error(obj, prefix, map);
     return map;
   }
 };

package/lib/core/editor/components/settings/propertyViews/box/BoxPropertyView.js

@@ -15,6 +15,8 @@ var _collapse = _interopRequireDefault(require("@alifd/next/lib/collapse"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _useHtElement = _interopRequireDefault(require("../../../../../common/hooks/useHtElement"));
+
 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); }
@@ -31,6 +33,10 @@ function BoxPropertyView(props) {
   var topo = props.topo,
       values = props.values,
       _onChange = props.onChange;
+  var boxNode = (0, _useHtElement["default"])({
+    topo: topo,
+    id: values.id
+  });
 
   var field = _field["default"].useField({
     autoUnmount: false,
@@ -39,6 +45,11 @@ function BoxPropertyView(props) {
       var newValues = field.getValues();
 
       _onChange(name, value, newValues);
+
+      if (name === 'attrObject.topLeftText') {
+        // 修改框名称改变名称背景块大小
+        topo.getHtTopo().setRectangleText(boxNode);
+      }
     }
   });
 
@@ -59,6 +70,7 @@ function BoxPropertyView(props) {
   }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
     label: "\u6807\u9898\u540D\u79F0"
   }, /*#__PURE__*/_react["default"].createElement(_NameInput["default"], {
-    name: "attrObject.topLeftText"
+    name: "attrObject.topLeftText",
+    topo: topo
   }))))));
 }

package/lib/core/editor/components/settings/propertyViews/box/NameInput.js

@@ -16,7 +16,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 onChange = props.onChange;
+  var onChange = props.onChange,
+      topo = props.topo;
 
   var _useState = (0, _react.useState)(props.value),
       value = _useState[0],
@@ -34,16 +35,23 @@ var NameInput = /*#__PURE__*/_react["default"].forwardRef(function (props, ref)
     }
   };
 
+  var handleFocus = function handleFocus() {
+    topo.historyManager.beginTransaction();
+  };
+
   var handleBlur = function handleBlur() {
     if (!value) {
       onChange('');
     }
+
+    topo.historyManager.endTransaction();
   };
 
   return /*#__PURE__*/_react["default"].createElement(_input["default"], (0, _extends2["default"])({}, props, {
     ref: ref,
     value: value,
     onChange: handleChange,
+    onFocus: handleFocus,
     onBlur: handleBlur
   }));
 });