Refactor LayerManager (GrapesJS#4338)

* Move Layers to TS

* Update root update in LayerManager. Closes GrapesJS#4083

* Update Layer view

* Update ItemsView

* Move layer opened container

* Clean ItemView

* Update import ItemsView

* Update layer manager module

* Add getComponents to Layers

* Add visibility methods to Layers

* Add locked check in Layers

* Add locked property to Component

* Add rename in LayerManager

* Up layer listeners

* Update layer selection

* Update children counter in ItemView

* Update visibility methods in ItemView

* Add open methods to layers

* Update selection

* Update hover in layers

* Fix layer

* Update TS model in LayerManager

* Layer config TS

* Move ItemView to TS

* Move ItemsView to TS

* Update TS LayerManager

* Update Module and Layers init

* Update layer tests

* Up item view

Author: artf

src/abstract/Module.ts

@@ -1,7 +1,7 @@
 import { isElement, isUndefined } from 'underscore';
 import { Collection, View } from '../common';
 import EditorModel from '../editor/model/Editor';
-import { createId, isDef } from '../utils/mixins';
+import { createId, isDef, deepMerge } from '../utils/mixins';
 
 export interface IModule<TConfig extends any = any>
   extends IBaseModule<TConfig> {
@@ -20,8 +20,9 @@ export interface IBaseModule<TConfig extends any> {
 }
 
 export interface ModuleConfig {
-  name: string;
+  name?: string;
   stylePrefix?: string;
+  appendTo?: string;
 }
 
 export interface IStorableModule extends IModule {
@@ -39,8 +40,10 @@ export default abstract class Module<T extends ModuleConfig = ModuleConfig>
   private _name: string;
   cls: any[] = [];
   events: any;
+  model?: any;
+  view?: any;
 
-  constructor(em: EditorModel, moduleName: string) {
+  constructor(em: EditorModel, moduleName: string, defaults?: T) {
     this._em = em;
     this._name = moduleName;
     const name = this.name.charAt(0).toLowerCase() + this.name.slice(1);
@@ -53,7 +56,9 @@ export default abstract class Module<T extends ModuleConfig = ModuleConfig>
     if (!isUndefined(cfgParent) && !cfgParent) {
       cfg._disable = 1;
     }
-    this._config = cfg;
+
+    cfg.em = em;
+    this._config = deepMerge(defaults || {}, cfg) as T;
   }
 
   public get em() {
@@ -65,8 +70,9 @@ export default abstract class Module<T extends ModuleConfig = ModuleConfig>
   //abstract name: string;
   isPrivate: boolean = false;
   onLoad?(): void;
-  init(cfg: any) {}
+  init(cfg: T) {}
   abstract destroy(): void;
+  abstract render(): HTMLElement;
   postLoad(key: any): void {}
 
   get name(): string {
@@ -83,6 +89,20 @@ export default abstract class Module<T extends ModuleConfig = ModuleConfig>
   }
 
   postRender?(view: any): void;
+
+  /**
+   * Move the main DOM element of the module.
+   * To execute only post editor render (in postRender)
+   */
+   __appendTo() {
+    const elTo = this.getConfig().appendTo;
+
+    if (elTo) {
+      const el = isElement(elTo) ? elTo : document.querySelector(elTo);
+      if (!el) return this.__logWarn('"appendTo" element not found');
+      el.appendChild(this.render());
+    }
+  }
 }
 
 export abstract class ItemManagerModule<
@@ -105,6 +125,7 @@ export abstract class ItemManagerModule<
   abstract storageKey: string;
   abstract destroy(): void;
   postLoad(key: any): void {}
+  // @ts-ignore
   render() {}
 
   getProjectData(data?: any) {
@@ -215,6 +236,7 @@ export abstract class ItemManagerModule<
     if (elTo) {
       const el = isElement(elTo) ? elTo : document.querySelector(elTo);
       if (!el) return this.__logWarn('"appendTo" element not found');
+      // @ts-ignore
       el.appendChild(this.render());
     }
   }

src/dom_components/model/Component.js

@@ -73,6 +73,7 @@ export const keyUpdateInside = `${keyUpdate}-inside`;
  * @property {Boolean} [layerable=true] Set to `false` if you need to hide the component inside Layers. Default: `true`
  * @property {Boolean} [selectable=true] Allow component to be selected when clicked. Default: `true`
  * @property {Boolean} [hoverable=true] Shows a highlight outline when hovering on the element if `true`. Default: `true`
+ * @property {Boolean} [locked=false] Disable the selection of the component and its children in the canvas. Default: `false`
  * @property {Boolean} [void=false] This property is used by the HTML exporter as void elements don't have closing tags, eg. `<br/>`, `<hr/>`, etc. Default: `false`
  * @property {Object} [style={}] Component default style, eg. `{ width: '100px', height: '100px', 'background-color': 'red' }`
  * @property {String} [styles=''] Component related styles, eg. `.my-component-class { color: red }`
@@ -202,6 +203,7 @@ export default class Component extends StyleableModel {
 
   __onChange(m, opts) {
     const changed = this.changedAttributes();
+    keys(changed).forEach(prop => this.emitUpdate(prop));
     ['status', 'open', 'toolbar', 'traits'].forEach(name => delete changed[name]);
     // Propagate component prop changes
     if (!isEmptyObj(changed)) {
@@ -1963,6 +1965,7 @@ Component.prototype.defaults = {
   layerable: true,
   selectable: true,
   hoverable: true,
+  locked: false,
   void: false,
   state: '', // Indicates if the component is in some CSS state like ':hover', ':active', etc.
   status: '', // State, eg. 'selected'

src/dom_components/view/ComponentView.js

@@ -32,7 +32,7 @@ export default class ComponentView extends Backbone.View {
     this.listenTo(model, 'change:style', this.updateStyle);
     this.listenTo(model, 'change:attributes', this.renderAttributes);
     this.listenTo(model, 'change:highlightable', this.updateHighlight);
-    this.listenTo(model, 'change:status', this.updateStatus);
+    this.listenTo(model, 'change:status change:locked', this.updateStatus);
     this.listenTo(model, 'change:script rerender', this.reset);
     this.listenTo(model, 'change:content', this.updateContent);
     this.listenTo(model, 'change', this.handleChange);
@@ -177,41 +177,42 @@ export default class ComponentView extends Backbone.View {
    * @private
    * */
   updateStatus(opts = {}) {
-    const { em } = this;
+    const { em, el, ppfx, model } = this;
     const { extHl } = em ? em.get('Canvas').getConfig() : {};
-    const el = this.el;
-    const status = this.model.get('status');
-    const ppfx = this.ppfx;
+    const status = model.get('status');
     const selectedCls = `${ppfx}selected`;
     const selectedParentCls = `${selectedCls}-parent`;
     const freezedCls = `${ppfx}freezed`;
     const hoveredCls = `${ppfx}hovered`;
-    const toRemove = [selectedCls, selectedParentCls, freezedCls, hoveredCls];
+    const noPointerCls = `${ppfx}no-pointer`;
+    const toRemove = [selectedCls, selectedParentCls, freezedCls, hoveredCls, noPointerCls];
     const selCls = extHl && !opts.noExtHl ? '' : selectedCls;
     this.$el.removeClass(toRemove.join(' '));
-    var actualCls = el.getAttribute('class') || '';
-    var cls = '';
+    const actualCls = el.getAttribute('class') || '';
+    const cls = [actualCls];
 
     switch (status) {
       case 'selected':
-        cls = `${actualCls} ${selCls}`;
+        cls.push(selCls);
         break;
       case 'selected-parent':
-        cls = `${actualCls} ${selectedParentCls}`;
+        cls.push(selectedParentCls);
         break;
       case 'freezed':
-        cls = `${actualCls} ${freezedCls}`;
+        cls.push(freezedCls);
         break;
       case 'freezed-selected':
-        cls = `${actualCls} ${freezedCls} ${selCls}`;
+        cls.push(freezedCls, selCls);
         break;
       case 'hovered':
-        cls = !opts.avoidHover ? `${actualCls} ${hoveredCls}` : '';
+        !opts.avoidHover && cls.push(hoveredCls);
         break;
     }
 
-    cls = cls.trim();
-    cls && el.setAttribute('class', cls);
+    model.get('locked') && cls.push(noPointerCls);
+
+    const clsStr = cls.filter(Boolean).join(' ');
+    clsStr && el.setAttribute('class', clsStr);
   }
 
   /**

src/modal_dialog/config/config.js

@@ -4,8 +4,8 @@ export default {
   title: '',
 
   content: '',
-  
-  // Close modal on interact with backdrop 
+
+  // Close modal on interact with backdrop
   backdrop: true,
 
   // Avoid rendering the default modal.

src/navigator/config/config.js renamed to src/navigator/config/config.ts

@@ -6,23 +6,23 @@ export default {
   appendTo: '',
 
   // Enable/Disable globally the possibility to sort layers
-  sortable: 1,
+  sortable: true,
 
   // Enable/Disable globally the possibility to hide layers
-  hidable: 1,
+  hidable: true,
 
   // Hide textnodes
-  hideTextnode: 1,
+  hideTextnode: true,
 
   // Indicate a query string of the element to be selected as the root of layers.
   // By default the root is the wrapper
   root: '',
 
   // Indicates if the wrapper is visible in layers
-  showWrapper: 1,
+  showWrapper: true,
 
   // Show hovered components in canvas
-  showHover: 1,
+  showHover: true,
 
   // Scroll to selected component in Canvas when it's selected in Layers
   // true, false or `scrollIntoView`-like options,
@@ -34,7 +34,7 @@ export default {
   scrollLayers: { behavior: 'auto', block: 'nearest' },
 
   // Highlight when a layer component is hovered
-  highlightHover: 1,
+  highlightHover: true,
 
   /**
    * WARNING: Experimental option