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;