Refactor Panels TS #5144

src/panels/index.ts

@@ -28,7 +28,7 @@
 import { Module } from '../abstract';
 import EditorModel from '../editor/model/Editor';
 import defaults, { PanelsConfig } from './config/config';
-import Panel from './model/Panel';
+import Panel, { PanelProperties } from './model/Panel';
 import Panels from './model/Panels';
 import PanelsView from './view/PanelsView';
 
@@ -73,14 +73,14 @@ export default class PanelManager extends Module<PanelsConfig> {
    * @param {Object|Panel} panel Object with right properties or an instance of Panel
    * @return {Panel} Added panel. Useful in case passed argument was an Object
    * @example
-   * var newPanel = panelManager.addPanel({
+   * const newPanel = panelManager.addPanel({
-   *   id: 'myNewPanel',
+   *  id: 'myNewPanel',
-   *  visible  : true,
+   *  visible: true,
-   *  buttons  : [...],
+   *  buttons: [...],
    * });
    */
-  addPanel(panel: Panel | Record<string, any>[]) {
+  addPanel(panel: Panel | PanelProperties) {
-    return this.panels.add(panel);
+    return this.panels.add(panel as Panel);
   }
 
   /**
@@ -88,16 +88,13 @@ export default class PanelManager extends Module<PanelsConfig> {
    * @param {Object|Panel|String} panel Object with right properties or an instance of Panel or Painel id
    * @return {Panel} Removed panel. Useful in case passed argument was an Object
    * @example
-   * const newPanel = panelManager.removePanel({
+   * const somePanel = panelManager.getPanel('somePanel');
-   *   id: 'myNewPanel',
+   * const newPanel = panelManager.removePanel(somePanel);
-   *  visible  : true,
+   * // or with id
-   *  buttons  : [...],
-   * });
-   *
    * const newPanel = panelManager.removePanel('myNewPanel');
    *
    */
-  removePanel(panel: Panel) {
+  removePanel(panel: Panel | string) {
     return this.panels.remove(panel);
   }
 
@@ -145,7 +142,7 @@ export default class PanelManager extends Module<PanelsConfig> {
    */
   addButton(panelId: string, button: any) {
     var pn = this.getPanel(panelId);
-    return pn ? pn.get('buttons').add(button) : null;
+    return pn ? pn.buttons.add(button) : null;
   }
 
   /**
@@ -167,7 +164,7 @@ export default class PanelManager extends Module<PanelsConfig> {
    */
   removeButton(panelId: string, button: any) {
     var pn = this.getPanel(panelId);
-    return pn && pn.get('buttons').remove(button);
+    return pn && pn.buttons.remove(button);
   }
 
   /**
@@ -181,7 +178,7 @@ export default class PanelManager extends Module<PanelsConfig> {
   getButton(panelId: string, id: string) {
     var pn = this.getPanel(panelId);
     if (pn) {
-      var res = pn.get('buttons').where({ id });
+      var res = pn.buttons.where({ id });
       return res.length ? res[0] : null;
     }
     return null;

src/panels/model/Panel.ts

@@ -1,20 +1,72 @@
 import PanelManager from '..';
 import { ModuleModel } from '../../abstract';
+import { ObjectAny } from '../../common';
+import { ResizerOptions } from '../../utils/Resizer';
 import Buttons from './Buttons';
 
-export default class Panel extends ModuleModel<PanelManager> {
+/** @private */
+export interface PanelProperties {
+  /**
+   * Panel id.
+   */
+  id: string;
+
+  /**
+   * Panel content.
+   */
+  content?: string;
+
+  /**
+   * Panel visibility.
+   * @default true
+   */
+  visible?: boolean;
+
+  /**
+   * Panel buttons.
+   * @default []
+   */
+  buttons?: ObjectAny[];
+
+  /**
+   * Panel attributes.
+   * @default {}
+   */
+  attributes?: ObjectAny;
+
+  /**
+   * Specify element query where to append the panel
+   */
+  appendTo?: string;
+
+  /**
+   * Resizable options.
+   */
+  resizable?: boolean | ResizerOptions;
+
+  el?: string;
+
+  appendContent?: HTMLElement;
+}
+
+export interface PanelPropertiesDefined extends Omit<Required<PanelProperties>, 'buttons'> {
+  buttons: Buttons;
+  [key: string]: unknown;
+}
+
+export default class Panel extends ModuleModel<PanelManager, PanelPropertiesDefined> {
   defaults() {
     return {
       id: '',
       content: '',
       visible: true,
-      buttons: [],
+      buttons: [] as unknown as Buttons,
       attributes: {},
     };
   }
 
   get buttons() {
-    return this.get('buttons');
+    return this.get('buttons')!;
   }
 
   private set buttons(buttons: Buttons) {
@@ -23,9 +75,9 @@ export default class Panel extends ModuleModel<PanelManager> {
 
   view?: any;
 
-  constructor(module: PanelManager, options: any) {
+  constructor(module: PanelManager, options: PanelProperties) {
-    super(module, options);
+    super(module, options as unknown as PanelPropertiesDefined);
-    var btn = this.get('buttons') || [];
+    const btn = this.get('buttons') || [];
-    this.buttons = new Buttons(module, btn);
+    this.buttons = new Buttons(module, btn as any);
   }
 }

src/panels/view/PanelView.ts

@@ -5,7 +5,7 @@ import ButtonsView from './ButtonsView';
 
 export default class PanelView extends ModuleView<Panel> {
   constructor(model: Panel) {
-    super({ model, el: model.get('el') });
+    super({ model, el: model.get('el') as string });
     this.className = this.pfx + 'panel';
     this.id = this.pfx + model.get('id');
     this.listenTo(model, 'change:appendContent', this.appendContent);
@@ -18,14 +18,14 @@ export default class PanelView extends ModuleView<Panel> {
    * Append content of the panel
    * */
   appendContent() {
-    this.$el.append(this.model.get('appendContent'));
+    this.$el.append(this.model.get('appendContent')!);
   }
 
   /**
    * Update content
    * */
   updateContent() {
-    this.$el.html(this.model.get('content'));
+    this.$el.html(this.model.get('content')!);
   }
 
   toggleVisible() {
@@ -47,24 +47,26 @@ export default class PanelView extends ModuleView<Panel> {
     const resizable = this.model.get('resizable');
 
     if (editor && resizable) {
-      var resz = resizable === true ? [1, 1, 1, 1] : resizable;
+      const resz = resizable === true ? [true, true, true, true] : resizable;
-      var resLen = resz.length;
+      const resLen = (resz as boolean[]).length;
-      var tc,
+      let tc,
         cr,
         bc,
-        cl = 0;
+        cl = false;
 
       // Choose which sides of the panel are resizable
       if (resLen == 2) {
-        tc = resz[0];
+        const resBools = resz as boolean[];
-        bc = resz[0];
+        tc = resBools[0];
-        cr = resz[1];
+        bc = resBools[0];
-        cl = resz[1];
+        cr = resBools[1];
+        cl = resBools[1];
       } else if (resLen == 4) {
-        tc = resz[0];
+        const resBools = resz as boolean[];
-        cr = resz[1];
+        tc = resBools[0];
-        bc = resz[2];
+        cr = resBools[1];
-        cl = resz[3];
+        bc = resBools[2];
+        cl = resBools[3];
       }
 
       const resizer: Resizer = new editor.Utils.Resizer({
@@ -72,13 +74,13 @@ export default class PanelView extends ModuleView<Panel> {
         cr,
         bc,
         cl,
-        tl: 0,
+        tl: false,
-        tr: 0,
+        tr: false,
-        bl: 0,
+        bl: false,
-        br: 0,
+        br: false,
         appendTo: this.el,
-        silentFrames: 1,
+        silentFrames: true,
-        avoidContainerUpdate: 1,
+        avoidContainerUpdate: true,
         prefix: editor.getConfig().stylePrefix,
         onEnd() {
           em && em.trigger('change:canvasOffset');
@@ -101,7 +103,7 @@ export default class PanelView extends ModuleView<Panel> {
             height,
           };
         },
-        ...resizable,
+        ...(resizable && typeof resizable !== 'boolean' ? resizable : {}),
       });
       resizer.blur = () => {};
       resizer.focus(this.el);
@@ -122,7 +124,7 @@ export default class PanelView extends ModuleView<Panel> {
       $el.append(buttonsView.render().el);
     }
 
-    $el.append(this.model.get('content'));
+    $el.append(this.model.get('content')!);
     return this;
   }
 }

src/panels/view/PanelsView.ts

@@ -39,7 +39,6 @@ export default class PanelsView extends ModuleView<Panels> {
    * */
   private addToCollection(model: Panel, fragmentEl?: DocumentFragment) {
     const fragment = fragmentEl || null;
-    const config = this.config;
     const el = model.get('el');
     const view = new PanelView(model);
     const rendered = view.render().el;
@@ -48,8 +47,8 @@ export default class PanelsView extends ModuleView<Panels> {
     // Do nothing if the panel was requested to be another element
     if (el) {
     } else if (appendTo) {
-      var appendEl = document.querySelector(appendTo);
+      const appendEl = document.querySelector(appendTo);
-      appendEl.appendChild(rendered);
+      appendEl?.appendChild(rendered);
     } else {
       if (fragment) {
         fragment.appendChild(rendered);

test/specs/panels/index.ts

@@ -4,18 +4,14 @@ import Editor from '../../../src/editor/model/Editor';
 
 describe('Panels', () => {
   describe('Main', () => {
-    var em;
+    let em: Editor;
-    var obj;
+    let obj: Panels;
 
     beforeEach(() => {
       em = new Editor({});
       obj = new Panels(em);
     });
 
-    afterEach(() => {
-      obj = null;
-    });
-
     test('Object exists', () => {
       expect(obj).toBeTruthy();
     });
@@ -31,7 +27,7 @@ describe('Panels', () => {
 
     test('New panel has no buttons', () => {
       var panel = obj.addPanel({ id: 'test' });
-      expect(panel.get('buttons').length).toEqual(0);
+      expect(panel.buttons.length).toEqual(0);
     });
 
     test('Adds new panel correctly via Panel instance', () => {
@@ -57,8 +53,8 @@ describe('Panels', () => {
     test('Add button correctly', () => {
       var panel = obj.addPanel({ id: 'test' });
       var btn = obj.addButton('test', { id: 'btn' });
-      expect(panel.get('buttons').length).toEqual(1);
+      expect(panel.buttons.length).toEqual(1);
-      expect(panel.get('buttons').at(0).get('id')).toEqual('btn');
+      expect(panel.buttons.at(0).get('id')).toEqual('btn');
     });
 
     test('getButton returns null in case there is no requested panel', () => {
@@ -83,7 +79,7 @@ describe('Panels', () => {
     test('Active correctly activable buttons', () => {
       const fn = jest.fn();
       obj.addPanel({ id: 'test' });
-      const btn = obj.addButton('test', { id: 'btn', active: true });
+      const btn = obj.addButton('test', { id: 'btn', active: true })!;
       btn.on('updateActive', fn);
       obj.active();
       expect(fn).toBeCalledTimes(1);
@@ -92,7 +88,7 @@ describe('Panels', () => {
     test('Disable correctly buttons flagged as disabled', () => {
       const fn = jest.fn();
       obj.addPanel({ id: 'test' });
-      const btn = obj.addButton('test', { id: 'btn', disable: true });
+      const btn = obj.addButton('test', { id: 'btn', disable: true })!;
       btn.on('change:disable', fn);
       obj.disableButtons();
       expect(fn).toBeCalledTimes(1);
@@ -106,19 +102,19 @@ describe('Panels', () => {
       test('Remove button correctly with object', () => {
         var panel = obj.addPanel({ id: 'test' });
         var btn = obj.addButton('test', { id: 'btn' });
-        expect(panel.get('buttons').length).toEqual(1);
+        expect(panel.buttons.length).toEqual(1);
-        expect(panel.get('buttons').at(0).get('id')).toEqual('btn');
+        expect(panel.buttons.at(0).get('id')).toEqual('btn');
         expect(obj.removeButton('test', { id: 'btn' })).toEqual(btn);
-        expect(panel.get('buttons').length).toEqual(0);
+        expect(panel.buttons.length).toEqual(0);
       });
 
       test('Remove button correctly with sting', () => {
         var panel = obj.addPanel({ id: 'test' });
         var btn = obj.addButton('test', { id: 'btn' });
-        expect(panel.get('buttons').length).toEqual(1);
+        expect(panel.buttons.length).toEqual(1);
-        expect(panel.get('buttons').at(0).get('id')).toEqual('btn');
+        expect(panel.buttons.at(0).get('id')).toEqual('btn');
         expect(obj.removeButton('test', 'btn')).toEqual(btn);
-        expect(panel.get('buttons').length).toEqual(0);
+        expect(panel.buttons.length).toEqual(0);
       });
     });
 
@@ -126,7 +122,7 @@ describe('Panels', () => {
       test('Removes panel correctly via object', () => {
         var panel = obj.addPanel({ id: 'test' });
         expect(panel.get('id')).toEqual('test');
-        obj.removePanel({ id: 'test' });
+        obj.removePanel('test');
         expect(panel.get('id')).toEqual('test');
       });