Add callback types to layers

packages/core/src/editor/types.ts

@@ -9,6 +9,7 @@ import { ComponentEvent } from '../dom_components';
 import { I18nEvent, I18nEventCallback } from '../i18n/types';
 import { KeymapEvent, KeymapsEventCallback } from '../keymaps/types';
 import { ModalEvent, ModalEventCallback } from '../modal_dialog/types';
+import { LayerEvent, LayerEventCallback } from '../navigator/types';
 import { RichTextEditorEvent } from '../rich_text_editor';
 import { SelectorEvent } from '../selector_manager';
 import { StyleManagerEvent } from '../style_manager';
@@ -25,6 +26,7 @@ type EditorBuiltInEvents =
   | BlockEvent
   | AssetEvent
   | KeymapEvent
+  | LayerEvent
   | StyleManagerEvent
   | StorageEvent
   | CanvasEvent
@@ -49,6 +51,7 @@ export interface EditorEventCallbacks
     DevicesEventCallback,
     I18nEventCallback,
     KeymapsEventCallback,
+    LayerEventCallback,
     ModalEventCallback
 {
   [key: string]: any[];

packages/core/src/navigator/index.ts

@@ -47,8 +47,7 @@ import { hasWin, isComponent, isDef } from '../utils/mixins';
 import defConfig, { LayerManagerConfig } from './config/config';
 import { LayerData, LayerEvents } from './types';
 import View from './view/ItemView';
-
-export type LayerEvent = `${LayerEvents}`;
+export type { LayerEvent } from './types';
 
 const styleOpts = { mediaText: '' };
 

packages/core/src/navigator/types.ts

@@ -1,3 +1,4 @@
+import { ObjectAny } from '../common';
 import Component from '../dom_components/model/Component';
 
 export interface LayerData {
@@ -32,8 +33,34 @@ export enum LayerEvents {
    * editor.on('layer:custom', ({ container, root }) => { ... });
    */
   custom = 'layer:custom',
+
+  /**
+   * @event `layer:render` Component layer rendered. Object with component and rendered layer element is passed as an argument.
+   * @example
+   * editor.on('layer:render', ({ component, el }) => { ... });
+   */
+  render = 'layer:render',
 }
 /**{END_EVENTS}*/
 
+export type LayerEvent = `${LayerEvents}`;
+
+export interface LayerCustomEventData {
+  container: HTMLElement | undefined;
+  root: Component;
+}
+
+export interface LayerRenderEventData {
+  component: Component;
+  el: HTMLElement;
+}
+
+export interface LayerEventCallback {
+  [LayerEvents.root]: [Component];
+  [LayerEvents.component]: [Component, ObjectAny?];
+  [LayerEvents.custom]: [LayerCustomEventData];
+  [LayerEvents.render]: [LayerRenderEventData];
+}
+
 // need this to avoid the TS documentation generator to break
 export default LayerEvents;

packages/core/src/navigator/view/ItemView.ts

@@ -5,6 +5,7 @@ import ComponentView from '../../dom_components/view/ComponentView';
 import EditorModel from '../../editor/model/Editor';
 import { isEnterKey, isEscKey } from '../../utils/dom';
 import LayerManager from '../index';
+import { LayerEvents } from '../types';
 import ItemsView from './ItemsView';
 import { getOnComponentDrag, getOnComponentDragEnd, getOnComponentDragStart } from '../../commands';
 import Sorter from '../../utils/sorter/Sorter';
@@ -450,6 +451,6 @@ export default class ItemView extends View {
     const { onRender } = config;
     const opt = { component: model, el };
     onRender.bind(this)(opt);
-    this.em.trigger('layer:render', opt);
+    this.em.trigger(LayerEvents.render, opt);
   }
 }