Fix possible double entry in Layers. Closes #5820

src/dom_components/model/Component.ts

@@ -39,6 +39,7 @@ import Trait from '../../trait_manager/model/Trait';
 import { ToolbarButtonProps } from './ToolbarButton';
 import { TraitProperties } from '../../trait_manager/types';
 import { ActionLabelComponents, ComponentsEvents } from '../types';
+import ItemView from '../../navigator/view/ItemView';
 
 export interface IComponent extends ExtractMethods<Component> {}
 
@@ -222,6 +223,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
   ccid!: string;
   views!: ComponentView[];
   view?: ComponentView;
+  viewLayer?: ItemView;
   frame?: Frame;
   rule?: CssRule;
   prevColl?: Components;

src/dom_components/model/Components.ts

@@ -358,6 +358,14 @@ Component> {
     }
 
     model.__postAdd({ recursive: true });
+
+    if (em && !opts.temporary) {
+      const triggerAdd = (model: Component) => {
+        em.trigger(ComponentsEvents.add, model, opts);
+        model.components().forEach(comp => triggerAdd(comp));
+      };
+      triggerAdd(model);
+    }
     // this.__onAddEnd();
   }
 

src/dom_components/view/ComponentsView.ts

@@ -7,7 +7,6 @@ import Component from '../model/Component';
 import ComponentView from './ComponentView';
 import FrameView from '../../canvas/view/FrameView';
 import Components from '../model/Components';
-import { ComponentsEvents } from '../types';
 
 export default class ComponentsView extends View {
   opts!: any;
@@ -47,18 +46,8 @@ export default class ComponentsView extends View {
    * @param {Object} opts
    * @private
    * */
-  addTo(model: Component, coll: any = {}, opts: { temporary?: boolean } = {}) {
-    const { em } = this;
-    const i = this.collection.indexOf(model);
-    this.addToCollection(model, null, i);
-
-    if (em && !opts.temporary) {
-      const triggerAdd = (model: Component) => {
-        em.trigger(ComponentsEvents.add, model, opts);
-        model.components().forEach(comp => triggerAdd(comp));
-      };
-      triggerAdd(model);
-    }
+  addTo(model: Component) {
+    this.addToCollection(model, null, this.collection.indexOf(model));
   }
 
   /**
@@ -70,10 +59,8 @@ export default class ComponentsView extends View {
    * @return   {Object}   Object rendered
    * @private
    * */
-  addToCollection(model: Component, fragmentEl?: DocumentFragment | null, index?: number) {
-    // if (!this.compView) this.compView = require('./ComponentView').default;
+  addToCollection(model: Component, fragment?: DocumentFragment | null, index?: number) {
     const { config, opts, em } = this;
-    const fragment = fragmentEl || null;
     const { frameView } = config;
     const sameFrameView = frameView?.model && model.getView(frameView.model);
     const dt = opts.componentTypes || em?.Components.getTypes();

src/navigator/index.ts

@@ -324,7 +324,6 @@ export default class LayerManager extends Module<LayerManagerConfig> {
     }
 
     if (selected && scrollLayers) {
-      // @ts-ignore
       const el = selected.viewLayer?.el;
       el?.scrollIntoView(scrollLayers);
     }

src/navigator/view/ItemsView.ts

@@ -1,13 +1,17 @@
+import { isUndefined } from 'underscore';
 import { View } from '../../common';
 import Component from '../../dom_components/model/Component';
 import EditorModel from '../../editor/model/Editor';
 import ItemView from './ItemView';
+import Components from '../../dom_components/model/Components';
 
 export default class ItemsView extends View {
   items: ItemView[];
   opt: any;
   config: any;
   parentView: ItemView;
+  /** @ts-ignore */
+  collection!: Components;
 
   constructor(opt: any = {}) {
     super(opt);
@@ -47,11 +51,9 @@ export default class ItemsView extends View {
   }
 
   removeChildren(removed: Component) {
-    // @ts-ignore
     const view = removed.viewLayer;
     if (!view) return;
     view.remove();
-    // @ts-ignore
     delete removed.viewLayer;
   }
 
@@ -62,8 +64,7 @@ export default class ItemsView extends View {
    * @return Object
    * */
   addTo(model: Component) {
-    var i = this.collection.indexOf(model);
-    this.addToCollection(model, null, i);
+    this.addToCollection(model, null, this.collection.indexOf(model));
   }
 
   /**
@@ -74,41 +75,47 @@ export default class ItemsView extends View {
    *
    * @return Object Object created
    * */
-  addToCollection(model: Component, fragmentEl: DocumentFragment | null, index?: number) {
-    const { parentView, opt, config } = this;
+  addToCollection(model: Component, fragment: DocumentFragment | null, index?: number) {
+    const { parentView, opt, config, el } = this;
     const { ItemView, opened, module, level, sorter } = opt;
-    const fragment = fragmentEl || null;
-    const item = new ItemView({
-      ItemView,
-      level,
-      model,
-      parentView,
-      config,
-      sorter,
-      opened,
-      module,
-    });
+    const item: ItemView =
+      model.viewLayer ||
+      new ItemView({
+        ItemView,
+        level,
+        model,
+        parentView,
+        config,
+        sorter,
+        opened,
+        module,
+      });
     const rendered = item.render().el;
 
     if (fragment) {
       fragment.appendChild(rendered);
     } else {
-      if (typeof index !== 'undefined') {
-        var method = 'before';
+      const parent = el;
+      const children = parent.childNodes;
+
+      if (!isUndefined(index)) {
+        const lastIndex = children.length == index;
+
         // If the added model is the last of collection
         // need to change the logic of append
-        if (this.$el.children().length == index) {
+        if (lastIndex) {
           index--;
-          method = 'after';
         }
+
         // In case the added is new in the collection index will be -1
-        if (index < 0) {
-          this.$el.append(rendered);
+        if (lastIndex || !children.length) {
+          parent.appendChild(rendered);
         } else {
-          // @ts-ignore
-          this.$el.children().eq(index)[method](rendered);
+          parent.insertBefore(rendered, children[index]);
         }
-      } else this.$el.append(rendered);
+      } else {
+        parent.appendChild(rendered);
+      }
     }
     this.items.push(item);
     return rendered;