Add LayerManagerConfig

src/navigator/config/config.ts

@@ -1,46 +1,78 @@
-export default {
+export interface LayerManagerConfig {
-  stylePrefix: '',
+  stylePrefix?: string;
 
-  // Specify the element to use as a container, string (query) or HTMLElement
+  /**
-  // With the empty value, nothing will be rendered
+   * Specify the element to use as a container, string (query) or HTMLElement.
-  appendTo: '',
+   * With the empty value, nothing will be rendered.
+   * @default ''
+   */
+  appendTo?: string | HTMLElement;
 
-  // Enable/Disable globally the possibility to sort layers
+  /**
-  sortable: true,
+   * Enable/Disable globally the possibility to sort layers.
+   * @default true
+   */
+  sortable?: boolean;
 
-  // Enable/Disable globally the possibility to hide layers
+  /**
-  hidable: true,
+   * Enable/Disable globally the possibility to hide layers.
+   * @default true
+   */
+  hidable?: boolean;
 
-  // Hide textnodes
+  /**
-  hideTextnode: true,
+   * Hide textnodes.
+   * @default true
+   */
+  hideTextnode?: boolean;
 
-  // Indicate a query string of the element to be selected as the root of layers.
+  /**
-  // By default the root is the wrapper
+   * Indicate a query string of the element to be selected as the root of layers.
-  root: '',
+   * By default the root is the wrapper.
+   * @default ''
+   */
+  root?: string;
 
-  // Indicates if the wrapper is visible in layers
+  /**
-  showWrapper: true,
+   * Indicates if the wrapper is visible in layers.
+   * @default true
+   */
+  showWrapper?: boolean;
 
-  // Show hovered components in canvas
+  /**
-  showHover: true,
+   * Show hovered components in canvas.
+   * @default true
+   */
+  showHover?: boolean;
 
-  // Scroll to selected component in Canvas when it's selected in Layers
+  /**
-  // true, false or `scrollIntoView`-like options,
+   * Scroll to selected component in Canvas when it's selected in Layers.
-  // `block: 'nearest'` avoids the issue of window scrolling
+   * true, false or `scrollIntoView`-like options,
-  scrollCanvas: { behavior: 'smooth', block: 'nearest' },
+   * `block: 'nearest'` avoids the issue of window scrolling.
+   * @default { behavior: 'smooth', block: 'nearest' }
+   */
+  scrollCanvas?: boolean | ScrollIntoViewOptions;
 
-  // Scroll to selected component in Layers when it's selected in Canvas
+  /**
-  // true, false or `scrollIntoView`-like options
+   * Scroll to selected component in Layers when it's selected in Canvas.
-  scrollLayers: { behavior: 'auto', block: 'nearest' },
+   * @default { behavior: 'auto', block: 'nearest' }
+   */
+  scrollLayers?: boolean | ScrollIntoViewOptions;
 
-  // Highlight when a layer component is hovered
+  /**
-  highlightHover: true,
+   * Highlight when a layer component is hovered.
+   * @default true
+   */
+  highlightHover?: boolean;
 
-  // Avoid rendering the default layer manager.
+  /**
-  custom: false,
+   * Avoid rendering the default layer manager.
+   * @default false
+   */
+  custom?: boolean;
 
   /**
-   * WARNING: Experimental option
+   * WARNING: Experimental option.
    * A callback triggered once the component layer is initialized.
    * Useful to trigger updates on some component prop change.
    * @example
@@ -48,10 +80,10 @@ export default {
    *  listenTo(component, 'change:some-prop', render);
    * };
    */
-  onInit: () => {},
+  onInit?: () => void;
 
   /**
-   * WARNING: Experimental option
+   * WARNING: Experimental option.
    * A callback triggered once the component layer is rendered.
    * A callback useful to update the layer DOM on some component change
    * @example
@@ -61,7 +93,7 @@ export default {
    *  }
    * }
    */
-  onRender: () => {},
+  onRender?: () => void;
 
   /**
    * Extend Layer view object (view/ItemView.js)
@@ -73,5 +105,25 @@ export default {
    *   },
    * },
    */
+  extend?: Record<string, any>;
+}
+
+const config: LayerManagerConfig = {
+  stylePrefix: '',
+  appendTo: '',
+  sortable: true,
+  hidable: true,
+  hideTextnode: true,
+  root: '',
+  showWrapper: true,
+  showHover: true,
+  scrollCanvas: { behavior: 'smooth', block: 'nearest' },
+  scrollLayers: { behavior: 'auto', block: 'nearest' },
+  highlightHover: true,
+  custom: false,
+  onInit: () => {},
+  onRender: () => {},
   extend: {},
 };
+
+export default config;

src/navigator/index.ts

@@ -45,7 +45,7 @@ import Module from '../abstract/Module';
 import Component from '../dom_components/model/Component';
 import EditorModel from '../editor/model/Editor';
 import { hasWin, isComponent, isDef } from '../utils/mixins';
-import defaults from './config/config';
+import defaults, { LayerManagerConfig } from './config/config';
 import View from './view/ItemView';
 
 interface LayerData {
@@ -81,7 +81,7 @@ const isStyleHidden = (style: any = {}) => {
   return (style.display || '').trim().indexOf('none') === 0;
 };
 
-export default class LayerManager extends Module<typeof defaults> {
+export default class LayerManager extends Module<LayerManagerConfig> {
   model!: Model;
 
   view?: View;
@@ -104,7 +104,7 @@ export default class LayerManager extends Module<typeof defaults> {
     model.listenTo(em, propsToListen, this.__onComponent);
     this.componentChanged();
     model.listenToOnce(em, 'load', () => {
-      this.setRoot(config.root);
+      this.setRoot(config.root!);
       this.__appendTo();
     });
   }