diff --git a/index.html b/index.html index 65b4ef0a8..7cb3d2767 100755 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ GrapesJS - + diff --git a/src/style_manager/model/Layers.js b/src/style_manager/model/Layers.js index 41f09b7cd..2316620f7 100644 --- a/src/style_manager/model/Layers.js +++ b/src/style_manager/model/Layers.js @@ -18,6 +18,6 @@ module.exports = Backbone.Collection.extend({ onReset() { this.idx = 1; - }, + } }); diff --git a/src/style_manager/view/LayerView.js b/src/style_manager/view/LayerView.js index 79f8a2652..ffb721e08 100644 --- a/src/style_manager/view/LayerView.js +++ b/src/style_manager/view/LayerView.js @@ -19,21 +19,26 @@ module.exports = Backbone.View.extend({
`), initialize(o) { + let model = this.model; this.stackModel = o.stackModel || {}; this.config = o.config || {}; this.pfx = this.config.stylePrefix || ''; this.className = this.pfx + 'layer'; this.sorter = o.sorter || null; - this.listenTo(this.model, 'destroy remove', this.remove); - this.listenTo(this.model, 'change:value', this.valueChanged); - this.listenTo(this.model, 'change:props', this.showProps); + this.listenTo(model, 'destroy remove', this.remove); + this.listenTo(model, 'change:value', this.valueChanged); + this.listenTo(model, 'change:props', this.showProps); this.events['click #' + this.pfx + 'close-layer'] = 'remove'; this.events['mousedown > #' + this.pfx + 'move'] = 'initSorter'; - if( !this.model.get('preview') ){ + if (!model.get('preview')) { this.$el.addClass(this.pfx + 'no-preview'); } - this.$el.data('model', this.model); + + // For the sorter + model.view = this; + model.set({droppable: 0, draggable: 1}); + this.$el.data('model', model); this.delegateEvents(); }, diff --git a/src/style_manager/view/LayersView.js b/src/style_manager/view/LayersView.js index 51a6c1690..84a710aa0 100644 --- a/src/style_manager/view/LayersView.js +++ b/src/style_manager/view/LayersView.js @@ -9,23 +9,29 @@ module.exports = Backbone.View.extend({ this.preview = o.preview; this.pfx = this.config.stylePrefix || ''; this.ppfx = this.config.pStylePrefix || ''; - this.className = this.pfx + 'layers ' + this.ppfx + 'field'; - this.listenTo( this.collection, 'add', this.addTo); - this.listenTo( this.collection, 'deselectAll', this.deselectAll ); - this.listenTo( this.collection, 'reset', this.render); + let pfx = this.pfx; + let ppfx = this.ppfx; + let collection = this.collection; + this.className = `${pfx}layers ${ppfx}field`; + this.listenTo(collection, 'add', this.addTo); + this.listenTo(collection, 'deselectAll', this.deselectAll ); + this.listenTo(collection, 'reset', this.render); var em = this.config.em || ''; var utils = em ? em.get('Utils') : ''; this.sorter = utils ? new utils.Sorter({ container: this.el, - containerSel: '.' + this.pfx + 'layers', - itemSel: '.' + this.pfx + 'layer', + ignoreViewChildren: 1, + containerSel: `.${pfx}layers`, + itemSel: `.${pfx}layer`, pfx: this.config.pStylePrefix, }) : ''; - this.$el.data('model', {}); - this.$el.data('collection', this.collection); + // For the Sorter + collection.view = this; + this.$el.data('model', collection); + this.$el.data('collection', collection); }, /** diff --git a/src/utils/Sorter.js b/src/utils/Sorter.js index 62c9a87af..117de420a 100644 --- a/src/utils/Sorter.js +++ b/src/utils/Sorter.js @@ -27,6 +27,7 @@ module.exports = Backbone.View.extend({ this.onMoveClb = o.onMove || ''; this.relative = o.relative || 0; this.ignoreViewChildren = o.ignoreViewChildren || 0; + this.ignoreModels = o.ignoreModels || 0; this.plh = o.placer || ''; // Frame offset this.wmargin = o.wmargin || 0; @@ -299,6 +300,10 @@ module.exports = Backbone.View.extend({ * @param {Model|null} model */ selectTargetModel(model) { + if (model instanceof Backbone.Collection) { + return; + } + var prevModel = this.targetModel; if (prevModel) { prevModel.set('status', ''); @@ -449,6 +454,7 @@ module.exports = Backbone.View.extend({ // Check if the target could accept the source let droppable = trgModel.get('droppable'); + droppable = droppable instanceof Backbone.Collection ? 1 : droppable; droppable = droppable instanceof Array ? droppable.join(', ') : droppable; result.dropInfo = droppable; droppable = typeof droppable === 'string' ? src.matches(droppable) : droppable; @@ -502,7 +508,8 @@ module.exports = Backbone.View.extend({ this.targetP = this.closest(target, this.containerSel); // Check if the source is valid with the target - if (!this.validTarget(target).valid) { + let validResult = this.validTarget(target); + if (!validResult.valid && this.targetP) { return this.dimsFromTarget(this.targetP, rX, rY); } @@ -510,7 +517,6 @@ module.exports = Backbone.View.extend({ this.prevTargetDim = this.getDim(target); this.cacheDimsP = this.getChildrenDim(this.targetP); this.cacheDims = this.getChildrenDim(target); - //console.log('dims', this.cacheDims, target); } // If the target is the previous one will return the cached dims @@ -519,6 +525,7 @@ module.exports = Backbone.View.extend({ // Target when I will drop element to sort this.target = this.prevTarget; + // Generally also on every new target the poiner enters near // to borders, so have to to check always if(this.nearBorders(this.prevTargetDim, rX, rY) || @@ -526,6 +533,7 @@ module.exports = Backbone.View.extend({ dims = this.cacheDimsP; this.target = this.targetP; } + this.lastPos = null; return dims; }, @@ -780,14 +788,15 @@ module.exports = Backbone.View.extend({ var warns = []; var index = pos.index; var modelToDrop, modelTemp, created; - var validTarget = this.validTarget(dst); + var validResult = this.validTarget(dst); var targetCollection = $(dst).data('collection'); - var model = validTarget.srcModel; - var droppable = validTarget.droppable; - var draggable = validTarget.draggable; - var dropInfo = validTarget.dropInfo; - var dragInfo = validTarget.dragInfo; + var model = validResult.srcModel; + var droppable = validResult.droppable; + var draggable = validResult.draggable; + var dropInfo = validResult.dropInfo; + var dragInfo = validResult.dragInfo; var dropContent = this.dropContent; + droppable = validResult.trgModel instanceof Backbone.Collection ? 1 : droppable; if (targetCollection && droppable && draggable) { index = pos.method === 'after' ? index + 1 : index;