diff --git a/src/canvas/main.js b/src/canvas/main.js index 09b251c8f..1d98d7ab8 100644 --- a/src/canvas/main.js +++ b/src/canvas/main.js @@ -100,6 +100,15 @@ define(function(require) { return this.CanvasView.placerEl; }, + /** + * Returns ghost element + * @return {HTMLElement} + * @private + */ + getGhostEl: function(){ + return this.CanvasView.ghostEl; + }, + /** * Render canvas * */ diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js index db87608c6..700c8b90e 100644 --- a/src/canvas/view/CanvasView.js +++ b/src/canvas/view/CanvasView.js @@ -15,10 +15,12 @@ function(Backbone, FrameView) { this.badgeEl = $('
', {class: this.ppfx + 'badge'}).get(0); this.placerEl = $('
', {class: this.ppfx + 'placeholder'}).get(0); this.placerIntEl = $('
', {class: this.ppfx + 'placeholder-int'}).get(0); + this.ghostEl = $('
', {class: this.ppfx + 'ghost'}).get(0); this.placerEl.appendChild(this.placerIntEl); this.toolsEl.appendChild(this.hlEl); this.toolsEl.appendChild(this.badgeEl); this.toolsEl.appendChild(this.placerEl); + this.toolsEl.appendChild(this.ghostEl); }, /** diff --git a/src/commands/view/CreateComponent.js b/src/commands/view/CreateComponent.js index 1fc26b6b0..d0f7657c6 100644 --- a/src/commands/view/CreateComponent.js +++ b/src/commands/view/CreateComponent.js @@ -1,105 +1,59 @@ -/** - * @module CreateComponent - * @private - * */ define(['backbone','./SelectPosition'], function(Backbone, SelectPosition) { return _.extend({}, SelectPosition, { - newElement : null, - - tempComponent: { style:{} }, - init: function(opt) { _.bindAll(this,'startDraw','draw','endDraw','rollback'); - this.config = opt; - this.heightType = this.config.newFixedH ? 'height' : 'min-height'; - }, - - /** - * Returns creation placeholder - * - * @return {Object} - * @private - * */ - getCreationPlaceholder: function() - { - return this.newElem; - }, - - /** - * Removes creation placeholder - * - * @return void - * @private - * */ - removeCreationPlaceholder: function() - { - this.newElem.remove(); + this.config = opt || {}; + this.hType = this.config.newFixedH ? 'height' : 'min-height'; }, /** * Start with enabling to select position and listening to start drawning - * @return void * @private * */ - enable: function() - { + enable: function() { SelectPosition.enable.apply(this, arguments); - this.$el.css('cursor','crosshair'); - this.enableToDraw(); - if(this.sorter) - this.sorter.startSort(); - }, - - /** - * Enable user to draw components - * - * @return void - * @private - * */ - enableToDraw: function() - { - this.$el.on('mousedown', this.startDraw); - //Need to disable selection + this.$wr.css('cursor','crosshair'); + this.$wr.on('mousedown', this.startDraw); + this.plh = $(this.canvas.getPlacerEl()); + this.ghost = this.canvas.getGhostEl(); }, /** * Start drawing component - * @param {Object} e Event - * - * @return void + * @param {Object} e Event * @private * */ - startDraw : function(e) - { + startDraw : function(e) { e.preventDefault(); - this.stopSelectPosition(); //Interrupt selecting position - this.tempComponent = { style: {} }; //Reset the helper + 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.getPositionPlaceholder().addClass('change-placeholder'); //Change color of the position placeholder - this.newElemOrig = { top : e.pageY, left: e.pageX }; - this.newElem = $('
', {class: "tempComp"}).css(this.newElemOrig); //Create helper element with initial position - this.newElem.data('helper',1); - $('body').append(this.newElem); //Show helper component - this.parentElem=this.newElem.parent(); //For percent count - this.targetC = this.outsideElem; - $(document).mousemove(this.draw); - $(document).mouseup(this.endDraw); - $(document).keypress(this.rollback); + this.updateSize(this.startPos.top, this.startPos.left, 0, 0); + + this.$wr.on('mousemove', this.draw); + this.$wr.on('mouseup', this.endDraw); + this.$canvas.on('mousemove', this.draw); + $(document).on('mouseup', this.endDraw); + $(document).on('keypress', this.rollback); }, /** * While drawing the component * @param {Object} e Event - * - * @return void * @private * */ - draw: function(e) - { + draw: function(e) { this.isDragged = true; this.updateComponentSize(e); }, @@ -107,25 +61,23 @@ define(['backbone','./SelectPosition'], /** * End drawing component * @param {Object} e Event - * - * @return void * @private * */ - endDraw : function(e) - { + endDraw : function(e) { + this.$wr.off('mousemove', this.draw); + this.$wr.off('mouseup', this.endDraw); + this.$canvas.off('mousemove', this.draw); $(document).off('mouseup', this.endDraw); - $(document).off('mousemove', this.draw); $(document).off('keypress',this.rollback); + var model = {}; if(this.isDragged){ //Only if the mouse was moved this.updateComponentSize(e); this.setRequirements(this.tempComponent); model = this.create(null,this.tempComponent,this.posIndex,this.posMethod); } - if(this.getPositionPlaceholder()) - this.getPositionPlaceholder().removeClass('change-placeholder'); //Turn back the original color of the placeholder - this.startSelectPosition(); //Return with selecting new position - this.removeCreationPlaceholder(); //Remove the element used for size indication + this.ghost.style.display = 'none'; + this.startSelectPosition(); this.afterDraw(model); }, @@ -139,8 +91,7 @@ define(['backbone','./SelectPosition'], * @return {Object} Created model * @private * */ - create: function(target, component, posIndex, method) - { + create: function(target, component, posIndex, method) { var index = posIndex || 0; if(this.posTargetCollection && this.posTargetModel.get('droppable')){ //Check config parameters for center in wrapper @@ -168,8 +119,8 @@ define(['backbone','./SelectPosition'], var c = this.config; if(component.style.width.replace(/\D/g,'') < c.minComponentW) //Check min width component.style.width = c.minComponentW +'px'; - if(component.style[this.heightType].replace(/\D/g,'') < c.minComponentH) //Check min height - component.style[this.heightType] = c.minComponentH +'px'; + if(component.style[this.hType].replace(/\D/g,'') < c.minComponentH) //Check min height + component.style[this.hType] = c.minComponentH +'px'; if(c.newFixedH) //Set overflow in case of fixed height component.style.overflow = 'auto'; if(!this.absoluteMode){ @@ -183,47 +134,48 @@ define(['backbone','./SelectPosition'], /** * Update new component size while drawing * @param {Object} e Event - * - * @return void * @private * */ - updateComponentSize : function (e) - { - var newLeft = e.pageX; - var newTop = e.pageY; - var startLeft = this.newElemOrig.left; - var startTop = this.newElemOrig.top; - var newWidth = newLeft - startLeft;//$(this.newElem).offset().left - var newHeight = newTop - startTop;//$(this.newElem).offset().top - if (newLeft < this.newElemOrig.left) { - startLeft = newLeft; - newWidth = this.newElemOrig.left - newLeft; - } - if (newTop < this.newElemOrig.top) { - startTop = newTop; - newHeight = this.newElemOrig.top - newTop; - } - newWidth = this.absoluteMode ? (newWidth/this.parentElem.width()*100+"%") : newWidth+'px'; - this.newElem[0].style.left = startLeft+'px'; - this.newElem[0].style.top = startTop+'px'; - this.newElem[0].style.width = newWidth; - this.newElem[0].style['min-height'] = newHeight+'px'; - this.tempComponent.style.width = newWidth; - this.tempComponent.style[this.heightType] = newHeight+"px"; - this.tempComponent.style.left = startLeft + "px"; - this.tempComponent.style.top = startTop + "px"; + updateComponentSize : function (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: function(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 - * - * @return void * @private * */ - rollback: function(e, force) - { + rollback: function(e, force) { var key = e.which || e.keyCode; if(key == this.config.ESCAPE_KEY || force){ this.isDragged = false; @@ -235,8 +187,6 @@ define(['backbone','./SelectPosition'], /** * This event is triggered at the beginning of a draw operation * @param {Object} component Object component before creation - * - * @return void * @private * */ beforeDraw: function(component){ @@ -246,8 +196,6 @@ define(['backbone','./SelectPosition'], /** * This event is triggered at the end of a draw operation * @param {Object} model Component model created - * - * @return void * @private * */ afterDraw: function(model){}, @@ -255,8 +203,6 @@ define(['backbone','./SelectPosition'], /** * This event is triggered just before a create operation * @param {Object} component Object component before creation - * - * @return void * @private * */ beforeCreation: function(component){}, @@ -264,8 +210,6 @@ define(['backbone','./SelectPosition'], /** * This event is triggered at the end of a create operation * @param {Object} model Component model created - * - * @return void * @private * */ afterCreation: function(model){}, @@ -274,27 +218,14 @@ define(['backbone','./SelectPosition'], run: function(editor, sender, opts){ this.editor = editor; this.sender = sender; - this.$el = this.$wrapper; -/* - var utils = editor.Utils; - if(utils && utils.Sorter && !this.sorter) - this.sorter = new utils.Sorter({ - container: this.$canvas.get(0), - containerSel: '*', - itemSel: '*', - pfx: this.ppfx, - //onEndMove: this.onEndMove, - direction: 'a', - nested: 1, - }); -*/ + this.$wr = this.$wrapper; this.enable(); }, stop: function(){ this.stopSelectPosition(); - this.$el.css('cursor',''); //Changes back aspect of the cursor - this.$el.unbind(); //Removes all attached events + this.$wrapper.css('cursor',''); //Changes back aspect of the cursor + this.$wrapper.unbind(); //Removes all attached events } }); }); \ No newline at end of file diff --git a/src/commands/view/SelectPosition.js b/src/commands/view/SelectPosition.js index 593d3518c..1d1799cc3 100644 --- a/src/commands/view/SelectPosition.js +++ b/src/commands/view/SelectPosition.js @@ -22,7 +22,7 @@ define(function() { var offDim = this.getOffsetDim(); this.sorter.offTop = offDim.top; this.sorter.offLeft = offDim.left; - this.$wrapper.on('mousemove', this.selectingPosition); + this.sorter.startSort(); }, /** @@ -44,7 +44,6 @@ define(function() { * @private * */ stopSelectPosition: function() { - this.$wrapper.off('mousemove',this.selectingPosition); this.posTargetCollection = null; this.posIndex = this.posMethod=='after' && this.cDim.length!==0 ? this.posIndex + 1 : this.posIndex; //Normalize if(this.sorter){ @@ -86,8 +85,8 @@ define(function() { stop: function() { this.frameEl.contentWindow.onscroll = null; this.stopSelectPosition(); - this.$wrapper.css('cursor','');//changes back aspect of the cursor - this.$wrapper.unbind();//removes all attached events + this.$wrapper.css('cursor',''); + this.$wrapper.unbind(); } }; }); \ No newline at end of file diff --git a/styles/css/main.css b/styles/css/main.css index 1f11f3e31..e4844a8ef 100644 --- a/styles/css/main.css +++ b/styles/css/main.css @@ -2645,6 +2645,15 @@ See http://bgrins.github.io/spectrum/themes/ for instructions. outline: medium none; width: 100%; border: none; } + .wte-cv-canvas .wte-ghost { + display: none; + pointer-events: none; + background-color: #5b5b5b; + border: 2px dashed #ccc; + position: absolute; + z-index: 10; + opacity: 0.55; + filter: alpha(opacity=55); } .wte-cv-canvas .wte-highlighter, .wte-cv-canvas .wte-highlighter-sel { position: absolute; outline: 1px solid #3b97e3; @@ -2961,15 +2970,6 @@ ol.example li.placeholder:before { .btn.expand, .wte-nv-navigator .wte-nv-item .expand#wte-nv-btn-eye { background-image: none; } -.tempComp { - background-color: #5b5b5b; - border: 2px dashed #ccc; - outline: none !important; - position: absolute; - z-index: 55; - opacity: 0.55; - filter: alpha(opacity=55); } - /*********** Components *************/ .wte-comp-image-placeholder { display: block; diff --git a/styles/scss/main.scss b/styles/scss/main.scss index 1b0066bf3..53d721595 100644 --- a/styles/scss/main.scss +++ b/styles/scss/main.scss @@ -134,6 +134,16 @@ $imageCompDim: 50px; border: none; } + .#{$app-prefix}ghost{ + display: none; + pointer-events: none; + background-color: #5b5b5b; + border: 2px dashed #ccc; + position: absolute; + z-index: 10; + @include opacity(0.55); + } + .#{$app-prefix}highlighter, .#{$app-prefix}highlighter-sel{ position: absolute; outline: 1px solid $colorBlue; @@ -465,14 +475,6 @@ $leftWidth: 16.5%; /* pa-refresh pa-rocket pa-trash pa-columns pa-rotate-left/right */ .btn.expand{ background-image: none;} -.tempComp{ - background-color: #5b5b5b; - border: 2px dashed #ccc; - outline:none !important; - position: absolute; z-index: 55; - opacity:0.55; - filter: alpha(opacity=55); -} /*********** Components *************/