diff --git a/docs/modules/Commands.md b/docs/modules/Commands.md index 96c1e80f0..bb8843b62 100644 --- a/docs/modules/Commands.md +++ b/docs/modules/Commands.md @@ -100,9 +100,30 @@ GrapesJS comes along with some default set of commands and you can get a list of * [`core:component-prev`](https://github.com/artf/grapesjs/blob/dev/src/commands/view/ComponentPrev.js) - Select the previous sibling component * [`core:copy`](https://github.com/artf/grapesjs/blob/dev/src/commands/view/CopyComponent.js) - Copy the current selected component * [`core:paste`](https://github.com/artf/grapesjs/blob/dev/src/commands/view/PasteComponent.js) - Paste copied component -* `core:undo` - Call undo function -* `core:redo` - Call redo function +* [`core:preview`](https://github.com/artf/grapesjs/blob/dev/src/commands/view/Preview.js) - Show the preview of the template in canvas +* [`core:fullscreen`](https://github.com/artf/grapesjs/blob/dev/src/commands/view/Fullscreen.js) - Set the editor fullscreen +* `core:undo` - Call undo operation +* `core:redo` - Call redo operation +export-template +move-comp +my-command-id +open-assets +open-blocks: +open-layers: +open-sm +open-tm +select-comp +select-parent +show-offset +sw-visibility +tlb-clone +tlb-delete +tlb-move +## Statefull commands -## Statefull commands \ No newline at end of file + + + +## Events \ No newline at end of file diff --git a/src/commands/config/config.js b/src/commands/config/config.js index d28e4be0c..c604b5697 100644 --- a/src/commands/config/config.js +++ b/src/commands/config/config.js @@ -1,4 +1,4 @@ -module.exports = { +export default { stylePrefix: 'com-', // Default array of commands diff --git a/src/commands/index.js b/src/commands/index.js index b25be2908..6f04809de 100644 --- a/src/commands/index.js +++ b/src/commands/index.js @@ -32,9 +32,9 @@ import defaults from './config/config'; module.exports = () => { let em; - var c = {}, - commands = {}, - defaultCommands = {}; + let c = {}; + const commands = {}; + const defaultCommands = {}; const active = {}; // Need it here as it would be used below @@ -62,25 +62,23 @@ module.exports = () => { * @param {Object} config Configurations * @private */ - init(config) { - c = config || {}; - for (var name in defaults) { - if (!(name in c)) c[name] = defaults[name]; - } + init(config = {}) { + c = { + ...defaults, + ...config + }; em = c.em; - var ppfx = c.pStylePrefix; + const ppfx = c.pStylePrefix; if (ppfx) c.stylePrefix = ppfx + c.stylePrefix; // Load commands passed via configuration - for (var k in c.defaults) { - var obj = c.defaults[k]; + for (let k in c.defaults) { + const obj = c.defaults[k]; if (obj.id) this.add(obj.id, obj); } const ViewCode = require('./view/ExportTemplate'); defaultCommands['select-comp'] = require('./view/SelectComponent'); - defaultCommands['create-comp'] = require('./view/CreateComponent'); - defaultCommands['delete-comp'] = require('./view/DeleteComponent'); defaultCommands['move-comp'] = require('./view/MoveComponent'); defaultCommands['export-template'] = ViewCode; defaultCommands['sw-visibility'] = require('./view/SwitchVisibility'); @@ -91,9 +89,6 @@ module.exports = () => { defaultCommands['open-assets'] = require('./view/OpenAssets'); defaultCommands['show-offset'] = require('./view/ShowOffset'); defaultCommands['select-parent'] = require('./view/SelectParent'); - defaultCommands.fullscreen = require('./view/Fullscreen'); - defaultCommands.preview = require('./view/Preview'); - defaultCommands.resize = require('./view/Resize'); defaultCommands['tlb-delete'] = { run(ed) { @@ -170,6 +165,9 @@ module.exports = () => { defaultCommands['core:undo'] = e => e.UndoManager.undo(); defaultCommands['core:redo'] = e => e.UndoManager.redo(); [ + ['preview', 'Preview', 'preview'], + ['resize', 'Resize', 'resize'], + ['fullscreen', 'Fullscreen', 'fullscreen'], ['copy', 'CopyComponent'], ['paste', 'PasteComponent'], ['canvas-move', 'CanvasMove'], @@ -181,10 +179,13 @@ module.exports = () => { ['component-delete', 'ComponentDelete'], ['component-style-clear', 'ComponentStyleClear'], ['component-drag', 'ComponentDrag'] - ].forEach( - item => - (defaultCommands[`core:${item[0]}`] = require(`./view/${item[1]}`)) - ); + ].forEach(item => { + const oldCmd = item[2]; + const cmd = require(`./view/${item[1]}`); + const cmdName = `core:${item[0]}`; + defaultCommands[cmdName] = cmd; + if (oldCmd) defaultCommands[oldCmd] = cmd; + }); if (c.em) c.model = c.em.get('Canvas'); diff --git a/src/commands/view/CreateComponent.js b/src/commands/view/CreateComponent.js deleted file mode 100644 index 39d3621ea..000000000 --- a/src/commands/view/CreateComponent.js +++ /dev/null @@ -1,232 +0,0 @@ -import _ from 'underscore'; -import Backbone from 'backbone'; -const SelectPosition = require('./SelectPosition'); -const $ = Backbone.$; - -module.exports = _.extend({}, SelectPosition, { - init(opt) { - _.bindAll(this, 'startDraw', 'draw', 'endDraw', 'rollback'); - this.config = opt || {}; - this.hType = this.config.newFixedH ? 'height' : 'min-height'; - this.allowDraw = 1; - }, - - /** - * Start with enabling to select position and listening to start drawing - * @private - * */ - enable(...args) { - SelectPosition.enable.apply(this, args); - this.$wr.css('cursor', 'crosshair'); - if (this.allowDraw) this.$wr.on('mousedown', this.startDraw); - this.ghost = this.canvas.getGhostEl(); - }, - - /** - * Start drawing component - * @param {Object} e Event - * @private - * */ - startDraw(e) { - e.preventDefault(); - this.stopSelectPosition(); - this.ghost.style.display = 'block'; - this.frameOff = this.getOffsetDim(); - this.startPos = { - top: e.pageY + this.frameOff.top, - left: e.pageX + this.frameOff.left - }; - this.isDragged = false; - this.tempComponent = { style: {} }; - this.beforeDraw(this.tempComponent); - this.updateSize(this.startPos.top, this.startPos.left, 0, 0); - this.toggleEvents(1); - }, - - /** - * Enable/Disable events - * @param {Boolean} enable - */ - toggleEvents(enable) { - var method = enable ? 'on' : 'off'; - this.$wr[method]('mousemove', this.draw); - this.$wr[method]('mouseup', this.endDraw); - this.$canvas[method]('mousemove', this.draw); - $(document)[method]('mouseup', this.endDraw); - $(document)[method]('keypress', this.rollback); - }, - - /** - * While drawing the component - * @param {Object} e Event - * @private - * */ - draw(e) { - this.isDragged = true; - this.updateComponentSize(e); - }, - - /** - * End drawing component - * @param {Object} e Event - * @private - * */ - endDraw(e) { - this.toggleEvents(); - var model = {}; - // Only if the mouse was moved - if (this.isDragged) { - this.updateComponentSize(e); - this.setRequirements(this.tempComponent); - var lp = this.sorter.lastPos; - model = this.create( - this.sorter.target, - this.tempComponent, - lp.index, - lp.method - ); - this.sorter.prevTarget = null; - } - this.ghost.style.display = 'none'; - this.startSelectPosition(); - this.afterDraw(model); - }, - - /** - * Create new component inside the target - * @param {Object} target Tha target collection - * @param {Object} component New component to create - * @param {number} index Index inside the collection, 0 if no children inside - * @param {string} method Before or after of the children - * @param {Object} opts Options - */ - create(target, component, index, method, opts) { - index = method === 'after' ? index + 1 : index; - var opt = opts || {}; - var $trg = $(target); - var trgModel = $trg.data('model'); - var trgCollection = $trg.data('collection'); - var droppable = trgModel ? trgModel.get('droppable') : 1; - opt.at = index; - if (trgCollection && droppable) return trgCollection.add(component, opt); - else console.warn('Invalid target position'); - }, - - /** - * Check and set basic requirements for the component - * @param {Object} component New component to be created - * @return {Object} Component updated - * @private - * */ - setRequirements(component) { - var c = this.config; - var compStl = component.style; - // Check min width - if (compStl.width.replace(/\D/g, '') < c.minComponentW) - compStl.width = c.minComponentW + 'px'; - // Check min height - if (compStl[this.hType].replace(/\D/g, '') < c.minComponentH) - compStl[this.hType] = c.minComponentH + 'px'; - // Set overflow in case of fixed height - if (c.newFixedH) compStl.overflow = 'auto'; - if (!this.absoluteMode) { - delete compStl.left; - delete compStl.top; - } else compStl.position = 'absolute'; - var lp = this.sorter.lastPos; - - if (this.nearFloat(lp.index, lp.method, this.sorter.lastDims)) - compStl.float = 'left'; - - if ( - this.config.firstCentered && - this.getCanvasWrapper() == this.sorter.target - ) { - compStl.margin = '0 auto'; - } - - return component; - }, - - /** - * Update new component size while drawing - * @param {Object} e Event - * @private - * */ - updateComponentSize(e) { - var y = e.pageY + this.frameOff.top; - var x = e.pageX + this.frameOff.left; - var start = this.startPos; - var top = start.top; - var left = start.left; - var height = y - top; - var width = x - left; - if (x < left) { - left = x; - width = start.left - x; - } - if (y < top) { - top = y; - height = start.top - y; - } - this.updateSize(top, left, width, height); - }, - - /** - * Update size - * @private - */ - updateSize(top, left, width, height) { - var u = 'px'; - var ghStl = this.ghost.style; - var compStl = this.tempComponent.style; - ghStl.top = compStl.top = top + u; - ghStl.left = compStl.left = left + u; - ghStl.width = compStl.width = width + u; - ghStl[this.hType] = compStl[this.hType] = height + u; - }, - - /** - * Used to bring the previous situation before event started - * @param {Object} e Event - * @param {Boolean} forse Indicates if rollback in anycase - * @private - * */ - rollback(e, force) { - var key = e.which || e.keyCode; - if (key == 27 || force) { - this.isDragged = false; - this.endDraw(); - } - return; - }, - - /** - * This event is triggered at the beginning of a draw operation - * @param {Object} component Object component before creation - * @private - * */ - beforeDraw(component) { - component.editable = false; //set this component editable - }, - - /** - * This event is triggered at the end of a draw operation - * @param {Object} model Component model created - * @private - * */ - afterDraw(model) {}, - - run(editor, sender, opts) { - this.editor = editor; - this.sender = sender; - this.$wr = this.$wrapper; - this.enable(); - }, - - stop() { - this.stopSelectPosition(); - this.$wrapper.css('cursor', ''); - this.$wrapper.unbind(); - } -}); diff --git a/src/panels/config/config.js b/src/panels/config/config.js index 628cf3ade..29663a4f0 100644 --- a/src/panels/config/config.js +++ b/src/panels/config/config.js @@ -1,5 +1,3 @@ -var crc = 'create-comp'; -var mvc = 'move-comp'; var swv = 'sw-visibility'; var expt = 'export-template'; var osm = 'open-sm';