grapesjs/src/commands/view/CommandAbstract.ts

import CanvasModule from '../../canvas';
import { Model, ObjectAny } from '../../common';
import Editor from '../../editor';
import EditorModel from '../../editor/model/Editor';
import CommandsEvents from '../types';

interface ICommand<O extends ObjectAny = any> {
  run?: CommandAbstract<O>['run'];
  stop?: CommandAbstract<O>['stop'];
  id?: string;
  [key: string]: unknown;
}

export type CommandFunction<O extends ObjectAny = any> = CommandAbstract<O>['run'];

export type Command = CommandObject | CommandFunction;

export type CommandOptions = Record<string, any>;

export type CommandObject<O extends ObjectAny = any, T extends ObjectAny = {}> = ICommand<O> &
  T &
  ThisType<T & CommandAbstract<O>>;

export function defineCommand<O extends ObjectAny = any, T extends ObjectAny = {}>(def: CommandObject<O, T>) {
  return def;
}

export default class CommandAbstract<O extends ObjectAny = any> extends Model {
  config: any;
  em: EditorModel;
  pfx: string;
  ppfx: string;
  hoverClass: string;
  badgeClass: string;
  plhClass: string;
  freezClass: string;
  canvas: CanvasModule;

  constructor(o: any) {
    super(0);
    this.config = o || {};
    this.em = this.config.em || {};
    const pfx = this.config.stylePrefix;
    this.pfx = pfx;
    this.ppfx = this.config.pStylePrefix;
    this.hoverClass = `${pfx}hover`;
    this.badgeClass = `${pfx}badge`;
    this.plhClass = `${pfx}placeholder`;
    this.freezClass = `${this.ppfx}freezed`;
    this.canvas = this.em.Canvas;
    this.init(this.config);
  }

  /**
   * On frame scroll callback
   * @param  {[type]} e [description]
   * @return {[type]}   [description]
   */
  onFrameScroll(e: any) {}

  /**
   * Returns canval element
   * @return {HTMLElement}
   */
  getCanvas() {
    return this.canvas.getElement();
  }

  /**
   * Get canvas body element
   * @return {HTMLElement}
   */
  getCanvasBody() {
    return this.canvas.getBody();
  }

  /**
   * Get canvas wrapper element
   * @return {HTMLElement}
   */
  getCanvasTools() {
    return this.canvas.getToolsEl();
  }

  /**
   * Get the offset of the element
   * @param  {HTMLElement} el
   * @return {Object}
   */
  offset(el: HTMLElement) {
    var rect = el.getBoundingClientRect();
    return {
      top: rect.top + el.ownerDocument.body.scrollTop,
      left: rect.left + el.ownerDocument.body.scrollLeft,
    };
  }

  /**
   * Callback triggered after initialize
   * @param  {Object}  o   Options
   * @private
   * */
  init(o: any) {}

  /**
   * Method that run command
   * @param  {Object}  editor Editor instance
   * @param  {Object}  [options={}] Options
   * @private
   * */
  callRun(editor: Editor, options: any = {}) {
    const { id } = this;
    editor.trigger(`${CommandsEvents.runBeforeCommand}${id}`, { options });
    editor.trigger(`${CommandsEvents._runCommand}${id}:before`, options);

    if (options.abort) {
      editor.trigger(`${CommandsEvents.abort}${id}`, { options });
      editor.trigger(`${CommandsEvents._abort}${id}`, options);
      return;
    }

    const sender = options.sender || editor;
    const result = this.run(editor, sender, options);
    const data = { id, result, options };
    editor.trigger(`${CommandsEvents.runCommand}${id}`, data);
    editor.trigger(CommandsEvents.run, data);
    // deprecated
    editor.trigger(`${CommandsEvents._runCommand}${id}`, result, options);
    editor.trigger(CommandsEvents._run, id, result, options);
    return result;
  }

  /**
   * Method that run command
   * @param  {Object}  editor Editor instance
   * @param  {Object}  [options={}] Options
   * @private
   * */
  callStop(editor: Editor, options: any = {}) {
    const { id } = this;
    const sender = options.sender || editor;
    editor.trigger(`${CommandsEvents.stopBeforeCommand}${id}`, { options });
    editor.trigger(`${CommandsEvents._stopCommand}${id}:before`, options);
    const result = this.stop(editor, sender, options);
    const data = { id, result, options };
    editor.trigger(`${CommandsEvents.stopCommand}${id}`, data);
    editor.trigger(CommandsEvents.stop, data);

    // deprecated
    editor.trigger(`${CommandsEvents._stopCommand}${id}`, result, options);
    editor.trigger(CommandsEvents._stop, id, result, options);
    return result;
  }

  /**
   * Stop current command
   */
  stopCommand(opts?: any) {
    this.em.Commands.stop(this.id as string, opts);
  }

  /**
   * Method that run command
   * @param  {Object}  em     Editor model
   * @param  {Object}  sender  Button sender
   * @private
   * */
  run(em: Editor, sender: any, options: O) {}

  /**
   * Method that stop command
   * @param  {Object}  em Editor model
   * @param  {Object}  sender  Button sender
   * @private
   * */
  stop(em: Editor, sender: any, options: O) {}
}