Render Layers always via Model

src/navigator/index.js

@@ -1,13 +1,11 @@
 import defaults from './config/config';
 import ItemView from './view/ItemView';
-import ItemsView from './view/ItemsView';
 import { isElement } from 'underscore';
 
 module.exports = () => {
   let em;
   let layers;
   let config = {};
-  let View = ItemsView;
 
   return {
     name: 'LayerManager',
@@ -20,7 +18,12 @@ module.exports = () => {
       return this;
     },
 
+    getConfig() {
+      return config;
+    },
+
     onLoad() {
+      /*
       const collection = em.get('DomComponents').getComponents();
       const parent = collection.parent;
       const options = {
@@ -36,8 +39,14 @@ module.exports = () => {
       } else {
         options.collection = collection;
       }
+      */
 
-      layers = new View(options);
+      layers = new ItemView({
+        level: 0,
+        config,
+        opened: config.opened || {},
+        model: em.get('DomComponents').getWrapper()
+      });
       em && em.on('component:selected', this.componentChanged);
       this.componentChanged();
     },
@@ -45,6 +54,9 @@ module.exports = () => {
     postRender() {
       const elTo = config.appendTo;
 
+      if (config.root) {
+      }
+
       if (elTo) {
         const el = isElement(elTo) ? elTo : document.querySelector(elTo);
         el.appendChild(this.render());

src/navigator/view/ItemView.js

@@ -25,6 +25,7 @@ module.exports = require('backbone').View.extend({
     const clsCaret = `${this.clsCaret} fa fa-chevron-right`;
     const clsInput = `${this.inputNameCls} ${ppfx}no-app`;
     const level = this.level + 1;
+    const hideWrapper = !this.config.showWrapper && level === 1;
     const gut = `${30 + level * 10}px`;
     const name = model.getName();
     return `
@@ -35,20 +36,25 @@ module.exports = require('backbone').View.extend({
             }" data-toggle-visible></i>`
           : ''
       }
-
-      <div class="${clsTitleC}">
-        <div class="${clsTitle}" style="padding-left: ${gut}" data-toggle-select>
-          <div class="${pfx}layer-title-inn">
-            <i class="${clsCaret}" data-toggle-open></i>
-            ${model.getIcon()}
-            <span class="${clsInput}" data-name>${name}</span>
+      ${
+        !hideWrapper
+          ? `
+          <div class="${clsTitleC}">
+            <div class="${clsTitle}" style="padding-left: ${gut}" data-toggle-select>
+              <div class="${pfx}layer-title-inn">
+                <i class="${clsCaret}" data-toggle-open></i>
+                ${model.getIcon()}
+                <span class="${clsInput}" data-name>${name}</span>
+              </div>
+            </div>
+          </div>
+          <div class="${this.clsCount}">${count || ''}</div>
+          <div class="${this.clsMove}" data-toggle-move>
+            <i class="fa fa-arrows"></i>
           </div>
-        </div>
-      </div>
-      <div class="${this.clsCount}">${count || ''}</div>
-      <div class="${this.clsMove}" data-toggle-move>
-        <i class="fa fa-arrows"></i>
-      </div>
+        `
+          : ''
+      }
       <div class="${this.clsChildren}"></div>
     `;
   },
@@ -314,7 +320,7 @@ module.exports = require('backbone').View.extend({
   },
 
   getCaret() {
-    if (!this.caret) {
+    if (!this.caret || !this.caret.length) {
       const pfx = this.pfx;
       this.caret = this.$el
         .children(`.${this.clsTitleC}`)