Add custom event to layers

src/commands/view/OpenLayers.js

@@ -2,14 +2,21 @@ export default {
   run(editor) {
     const lm = editor.LayerManager;
     const pn = editor.Panels;
+    const lmConfig = lm.getConfig();
 
-    if (lm.getConfig().appendTo) return;
+    if (lmConfig.appendTo) return;
 
     if (!this.layers) {
       const id = 'views-container';
       const layers = document.createElement('div');
       const panels = pn.getPanel(id) || pn.addPanel({ id });
-      layers.appendChild(lm.render());
+
+      if (lmConfig.custom) {
+        lm.__trgCustom({ container: layers });
+      } else {
+        layers.appendChild(lm.render());
+      }
+
       panels.set('appendContent', layers).trigger('change:appendContent');
       this.layers = layers;
     }

src/navigator/config/config.ts

@@ -36,6 +36,9 @@ export default {
   // Highlight when a layer component is hovered
   highlightHover: true,
 
+  // Avoid rendering the default layer manager.
+  custom: false,
+
   /**
    * WARNING: Experimental option
    * A callback triggered once the component layer is initialized.

src/navigator/index.ts

@@ -62,11 +62,13 @@ export const evAll = 'layer';
 export const evPfx = `${evAll}:`;
 export const evRoot = `${evPfx}root`;
 export const evComponent = `${evPfx}component`;
+export const evCustom = `${evPfx}custom`;
 
 const events = {
   all: evAll,
   root: evRoot,
   component: evComponent,
+  custom: evCustom,
 };
 
 const styleOpts = { mediaText: '' };
@@ -368,6 +370,13 @@ export default class LayerManager extends Module<typeof defaults> {
     return isValid && cmp.get('layerable');
   }
 
+  __trgCustom(opts?: any) {
+    this.em.trigger(this.events.custom, {
+      container: opts.container,
+      root: this.getRoot(),
+    });
+  }
+
   updateLayer(component: Component, opts?: any) {
     this.em.trigger(evComponent, component, opts);
   }