Update UndoManager for components

src/dom_components/index.js

@@ -24,7 +24,7 @@
  *
  * @module DomComponents
  */
-
+import Backbone from 'backbone';
 import { isEmpty, isString, isObject, isArray } from 'underscore';
 
 module.exports = () => {
@@ -266,6 +266,7 @@ module.exports = () => {
       const um = em.get('UndoManager');
       const handleUpdates = em.handleUpdates.bind(em);
       const handleChanges = this.handleChanges.bind(this);
+      const handleChangesColl = this.handleChangesColl.bind(this);
       const handleRemoves = this.handleRemoves.bind(this);
       um && um.add(model);
       um && comps && um.add(comps);
@@ -273,7 +274,7 @@ module.exports = () => {
 
       [
         [model, evn, handleUpdates],
-        [model, 'change:components', handleChanges],
+        [model, 'change:components', handleChangesColl],
         [comps, 'add', handleChanges],
         [comps, 'remove', handleRemoves],
         [model.get('classes'), 'add remove', handleUpdates]
@@ -286,6 +287,21 @@ module.exports = () => {
       comps.each(model => this.handleChanges(model, value, opts));
     },
 
+    handleChangesColl(model, coll) {
+      const um = em.get('UndoManager');
+      if (um && coll instanceof Backbone.Collection) {
+        const handleChanges = this.handleChanges.bind(this);
+        const handleRemoves = this.handleRemoves.bind(this);
+        um.add(coll);
+        [[coll, 'add', handleChanges], [coll, 'remove', handleRemoves]].forEach(
+          els => {
+            em.stopListening(els[0], els[1], els[2]);
+            em.listenTo(els[0], els[1], els[2]);
+          }
+        );
+      }
+    },
+
     /**
      * Triggered when some component is removed
      * @private

src/dom_components/view/ComponentView.js

@@ -68,13 +68,14 @@ module.exports = Backbone.View.extend({
     const { model, $el, childrenView } = this;
     const event = 'change:components';
     const comps = model.get('components');
+    const toListen = [model, event, this.initComponents];
 
     if (comps instanceof Components) {
       $el.data('collection', comps);
       childrenView && childrenView.remove();
-      this.stopListening(model, event, this.initComponents);
-      this.listenTo(model, event, this.initComponents);
+      this.stopListening(...toListen);
       !opts.avoidRender && this.renderChildren();
+      this.listenTo(...toListen);
     }
   },