diff --git a/src/commands/index.js b/src/commands/index.js index 59f7538c4..70fa1a029 100644 --- a/src/commands/index.js +++ b/src/commands/index.js @@ -55,6 +55,7 @@ module.exports = () => { } delete obj.initialize; + obj.id = id; commands[id] = AbsCommands.extend(obj); return this; }; diff --git a/src/commands/view/CommandAbstract.js b/src/commands/view/CommandAbstract.js index b49a4cd4b..39a5ca65e 100644 --- a/src/commands/view/CommandAbstract.js +++ b/src/commands/view/CommandAbstract.js @@ -90,6 +90,38 @@ module.exports = Backbone.View.extend({ * */ init(o) {}, + /** + * Method that run command + * @param {Object} editor Editor instance + * @param {Object} [options={}] Options + * @private + * */ + callRun(editor, options = {}) { + const id = this.id; + editor.trigger(`run:${id}:before`, options); + + if (options && options.abort) { + editor.trigger(`abort:${id}`, options); + return; + } + + const result = this.run(editor, editor, options); + editor.trigger(`run:${id}`, result, options); + }, + + /** + * Method that run command + * @param {Object} editor Editor instance + * @param {Object} [options={}] Options + * @private + * */ + callStop(editor, options = {}) { + const id = this.id; + editor.trigger(`stop:${id}:before`, options); + const result = this.stop(editor, editor, options); + editor.trigger(`stop:${id}`, result, options); + }, + /** * Method that run command * @param {Object} em Editor model diff --git a/src/editor/index.js b/src/editor/index.js index 00ea2d4df..f5b71ecf8 100644 --- a/src/editor/index.js +++ b/src/editor/index.js @@ -58,6 +58,9 @@ * ## Commands * * `run:{commandName}` - Triggered when some command is called to run (eg. editor.runCommand('preview')) * * `stop:{commandName}` - Triggered when some command is called to stop (eg. editor.stopCommand('preview')) + * * `run:{commandName}:before` - Triggered before the command is called + * * `stop:{commandName}:before` - Triggered before the command is called to stop + * * `abort:{commandName}` - Triggered when the command execution is aborted (`editor.on(`run:preview:before`, opts => opts.abort = 1);`) * ## General * * `canvasScroll` - Triggered when the canvas is scrolle * * `undo` - Undo executed @@ -426,14 +429,11 @@ module.exports = config => { * @example * editor.runCommand('myCommand', {someValue: 1}); */ - runCommand(id, options) { - var result; - var command = em.get('Commands').get(id); + runCommand(id, options = {}) { + let result; + const command = em.get('Commands').get(id); + if (command) result = command.callRun(this, options); - if (command) { - result = command.run(this, this, options); - this.trigger('run:' + id); - } return result; }, @@ -445,14 +445,11 @@ module.exports = config => { * @example * editor.stopCommand('myCommand', {someValue: 1}); */ - stopCommand(id, options) { - var result; - var command = em.get('Commands').get(id); + stopCommand(id, options = {}) { + let result; + const command = em.get('Commands').get(id); + if (command) result = command.callStop(this, options); - if (command) { - result = command.stop(this, this, options); - this.trigger('stop:' + id); - } return result; }, diff --git a/test/specs/grapesjs/index.js b/test/specs/grapesjs/index.js index d5c9fd8fd..f7869c951 100644 --- a/test/specs/grapesjs/index.js +++ b/test/specs/grapesjs/index.js @@ -252,6 +252,32 @@ describe('GrapesJS', () => { expect(editor.testVal).toEqual(htmlString + '5'); }); + it('Trigger custom command events', () => { + const id = 'test-command'; + const editor = obj.init(config); + const result = {}; + editor.on(`run:${id}`, () => (result.run = 1)); + editor.on(`run:${id}:before`, () => (result.runBefore = 1)); + editor.on(`stop:${id}`, () => (result.stop = 1)); + editor.on(`stop:${id}:before`, () => (result.stopBefore = 1)); + editor.on(`abort:${id}`, () => (result.abort = 1)); + editor.Commands.add(id, { + run() {}, + stop() {} + }); + editor.runCommand(id); + editor.stopCommand(id); + editor.on(`run:${id}:before`, opts => (opts.abort = 1)); + editor.runCommand(id); + expect(result).toEqual({ + run: 1, + runBefore: 1, + stop: 1, + stopBefore: 1, + abort: 1 + }); + }); + it('Set default devices', () => { config.deviceManager = {}; config.deviceManager.devices = [