From 7c1b6f29bc60af26d3aa16823ed19261c5b440a7 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Thu, 19 Oct 2017 10:09:05 +0200 Subject: [PATCH] Minor refactor of the Sorter --- src/demo.js | 334 -------------------------------------------- src/utils/Sorter.js | 28 ++-- 2 files changed, 13 insertions(+), 349 deletions(-) delete mode 100644 src/demo.js diff --git a/src/demo.js b/src/demo.js deleted file mode 100644 index 02f9e6cf87..0000000000 --- a/src/demo.js +++ /dev/null @@ -1,334 +0,0 @@ -require(['config/require-config'], function() { - - require(['grapesjs/main'],function (grapesjs){ - - var editor = grapesjs.init( - - { - noticeOnUnload: 0, - container : '#gjs', - height: '100%', - fromElement: true, - /* - components: [{ - type: 'text', - style:{ - width:'100px', - height:'100px', - margin: '50px auto', - }, - traits: ['title'], - components: [{ - type: 'textnode', - content: 'text node row', - },{ - type: 'textnode', - content: ', another text node', - },{ - type: 'link', - content: 'someLink', - },{ - type: 'textnode', - content: " More text node --- ", - }], - }],*/ - - storageManager:{ - autoload: 0, - storeComponents: 1, - storeStyles: 1, - }, - commands: { - defaults : [{ - id: 'open-github', - run: function(editor, sender){ - sender.set('active',false); - window.open('https://github.com/artf/grapesjs','_blank'); - } - },{ - id: 'undo', - run: function(editor, sender){ - sender.set('active',false); - editor.UndoManager.undo(true); - } - },{ - id: 'redo', - run: function(editor, sender){ - sender.set('active',false); - editor.UndoManager.redo(true); - } - },{ - id: 'clean-all', - run: function(editor, sender){ - sender.set('active',false); - if(confirm('Are you sure to clean the canvas?')){ - var comps = editor.DomComponents.clear(); - } - } - }], - }, - - assetManager: { - storageType : '', - storeOnChange : true, - storeAfterUpload : true, - assets : [ - { type: 'image', src : 'http://placehold.it/350x250/78c5d6/fff/image1.jpg', height:350, width:250}, - { type: 'image', src : 'http://placehold.it/350x250/459ba8/fff/image2.jpg', height:350, width:250}, - { type: 'image', src : 'http://placehold.it/350x250/79c267/fff/image3.jpg', height:350, width:250}, - { type: 'image', src : 'http://placehold.it/350x250/c5d647/fff/image4.jpg', height:350, width:250}, - { type: 'image', src : 'http://placehold.it/350x250/f28c33/fff/image5.jpg', height:350, width:250}, - { type: 'image', src : 'http://placehold.it/350x250/e868a2/fff/image6.jpg', height:350, width:250}, - { type: 'image', src : 'http://placehold.it/350x250/cc4360/fff/image7.jpg', height:350, width:250}, - { type: 'image', src : './img/work-desk.jpg', date: '2015-02-01',height:1080, width:1728}, - { type: 'image', src : './img/phone-app.png', date: '2015-02-01',height:650, width:320}, - { type: 'image', src : './img/bg-gr-v.png', date: '2015-02-01',height:1, width:1728}, - ] - }, - - - styleManager : { - sectors: [{ - name: 'General', - open: false, - buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom'], - },{ - name: 'Dimension', - open: false, - buildProps: ['width', 'height', 'max-width', 'min-height', 'margin', 'padding'], - },{ - name: 'Typography', - open: false, - buildProps: ['font-family', 'font-size', 'font-weight', 'letter-spacing', 'color', 'line-height', 'text-align', 'text-shadow'], - properties: [{ - property: 'text-align', - list : [ - {value: 'left', className: 'fa fa-align-left'}, - {value: 'center', className: 'fa fa-align-center' }, - {value: 'right', className: 'fa fa-align-right'}, - {value: 'justify', className: 'fa fa-align-justify'} - ], - }] - },{ - name: 'Decorations', - open: false, - buildProps: ['border-radius-c', 'background-color', 'border-radius', 'border', 'box-shadow', 'background'], - },{ - name: 'Extra', - open: false, - buildProps: ['transition', 'perspective', 'transform'], - },{ - name: 'Dimension', - open: false, - buildProps: ['margin'], - properties:[{ - name: 'Marginnnn', - property: 'margin', - type: 'composite', - properties:[{ - name: 'Top', - property: 'margin-top', - },{ - name: 'Right', - property: 'margin-right', - },{ - name: 'Bottom', - property: 'margin-bottom', - },{ - name: 'Left', - property: 'margin-left', - },], - }/*{ - name : 'Center blocksss', - property : 'margins', - type : 'select', - defaults : '0', - list : [{ - value : '0', - name : 'Normal', - },{ - value : '0 auto', - name : 'Center', - }], - }*/], - },{ - name: 'Flex', - open: false, - properties: [{ - name : 'Flex Container', - property : 'display', - type : 'select', - defaults : 'block', - list : [{ - value : 'block', - name : 'Disable', - },{ - value : 'flex', - name : 'Enable', - }], - },{ - name: 'Flex Parent', - property: 'label-parent-flex', - },{ - name : 'Direction', - property : 'flex-direction', - type : 'radio', - defaults : 'row', - list : [{ - value : 'row', - name : 'Row', - className : 'icons-flex icon-dir-row', - title : 'Row', - },{ - value : 'row-reverse', - name : 'Row reverse', - className : 'icons-flex icon-dir-row-rev', - title : 'Row reverse', - },{ - value : 'column', - name : 'Column', - title : 'Column', - className : 'icons-flex icon-dir-col', - },{ - value : 'column-reverse', - name : 'Column reverse', - title : 'Column reverse', - className : 'icons-flex icon-dir-col-rev', - }], - },{ - name : 'Wrap', - property : 'flex-wrap', - type : 'radio', - defaults : 'nowrap', - list : [{ - value : 'nowrap', - title : 'Single line', - },{ - value : 'wrap', - title : 'Multiple lines', - },{ - value : 'wrap-reverse', - title : 'Multiple lines reverse', - }], - },{ - name : 'Justify', - property : 'justify-content', - type : 'radio', - defaults : 'flex-start', - list : [{ - value : 'flex-start', - className : 'icons-flex icon-just-start', - title : 'Start', - },{ - value : 'flex-end', - title : 'End', - className : 'icons-flex icon-just-end', - },{ - value : 'space-between', - title : 'Space between', - className : 'icons-flex icon-just-sp-bet', - },{ - value : 'space-around', - title : 'Space around', - className : 'icons-flex icon-just-sp-ar', - },{ - value : 'center', - title : 'Center', - className : 'icons-flex icon-just-sp-cent', - }], - },{ - name : 'Align', - property : 'align-items', - type : 'radio', - defaults : 'center', - list : [{ - value : 'flex-start', - title : 'Start', - className : 'icons-flex icon-al-start', - },{ - value : 'flex-end', - title : 'End', - className : 'icons-flex icon-al-end', - },{ - value : 'stretch', - title : 'Stretch', - className : 'icons-flex icon-al-str', - },{ - value : 'center', - title : 'Center', - className : 'icons-flex icon-al-center', - }], - },{ - name: 'Flex Children', - property: 'label-parent-flex', - },{ - name: 'Order', - property: 'order', - type: 'integer', - defaults : 0, - min: 0 - },{ - name : 'Flex', - property : 'flex', - type : 'composite', - properties : [{ - name: 'Grow', - property: 'flex-grow', - type: 'integer', - defaults : 0, - min: 0 - },{ - name: 'Shrink', - property: 'flex-shrink', - type: 'integer', - defaults : 0, - min: 0 - },{ - name: 'Basis', - property: 'flex-basis', - type: 'integer', - units: ['px','%',''], - unit: '', - defaults : 'auto', - }], - },{ - name : 'Align', - property : 'align-self', - type : 'radio', - defaults : 'auto', - list : [{ - value : 'auto', - name : 'Auto', - },{ - value : 'flex-start', - title : 'Start', - className : 'icons-flex icon-al-start', - },{ - value : 'flex-end', - title : 'End', - className : 'icons-flex icon-al-end', - },{ - value : 'stretch', - title : 'Stretch', - className : 'icons-flex icon-al-str', - },{ - value : 'center', - title : 'Center', - className : 'icons-flex icon-al-center', - }], - }] - } - - ], - - }, - } - - - ); - - - window.editor = editor; - - }); -}); diff --git a/src/utils/Sorter.js b/src/utils/Sorter.js index 4aeb38e3fb..aaf6ae17f9 100644 --- a/src/utils/Sorter.js +++ b/src/utils/Sorter.js @@ -358,9 +358,9 @@ module.exports = Backbone.View.extend({ this.rX = rX; this.rY = rY; this.eventMove = e; - var target = this.getTargetFromEl(e.target); + + //var target = this.getTargetFromEl(e.target); var dims = this.dimsFromTarget(e.target, rX, rY); - console.log(this.target, 'sec ',target); let targetModel = this.getTargetModel(this.target); this.selectTargetModel(targetModel); @@ -475,14 +475,14 @@ module.exports = Backbone.View.extend({ 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; + droppable = typeof droppable === 'string' ? this.matches(src, droppable) : droppable; result.droppable = droppable; // check if the source is draggable in target let draggable = srcModel.get('draggable'); draggable = draggable instanceof Array ? draggable.join(', ') : draggable; result.dragInfo = draggable; - draggable = typeof draggable === 'string' ? trg.matches(draggable) : draggable; + draggable = typeof draggable === 'string' ? this.matches(trg, draggable) : draggable; result.draggable = draggable; if (!droppable || !draggable) { @@ -507,7 +507,7 @@ module.exports = Backbone.View.extend({ } // Select the first valuable target - if (!target.matches(`${this.itemSel}, ${this.containerSel}`)) { + if (!this.matches(target, `${this.itemSel}, ${this.containerSel}`)) { target = this.closest(target, this.itemSel); } @@ -552,11 +552,12 @@ module.exports = Backbone.View.extend({ // triggers nearBorders(), so have to take care of this if(this.nearBorders(this.prevTargetDim, rX, rY) || (!this.nested && !this.cacheDims.length)) { - if (!this.validTarget(this.targetP).valid) { - return this.dimsFromTarget(this.targetP, rX, rY); + const targetParent = this.targetP; + + if (targetParent && this.validTarget(targetParent).valid) { + dims = this.cacheDimsP; + this.target = targetParent; } - dims = this.cacheDimsP; - this.target = this.targetP; } this.lastPos = null; @@ -610,11 +611,9 @@ module.exports = Backbone.View.extend({ if (this.nearElBorders(target)) { targetParent = this.closest(target, containerSel); - if (targetParent && !this.validTarget(targetParent).valid) { - targetParent = this.getTargetFromEl(targetParent); + if (targetParent && this.validTarget(targetParent).valid) { + target = targetParent; } - - targetParent && (target = targetParent); } return target; @@ -706,7 +705,7 @@ module.exports = Backbone.View.extend({ for (var i = 0, len = ch.length; i < len; i++) { var el = ch[i]; - if (!el.matches(this.itemSel)) { + if (!this.matches(el, this.itemSel)) { continue; } @@ -861,7 +860,6 @@ module.exports = Backbone.View.extend({ * @return void * */ endMove(e) { - console.log('endmove'); var created; const docs = this.getDocuments(); const container = this.getContainerEl();