diff --git a/src/commands/view/CreateComponent.js b/src/commands/view/CreateComponent.js
index ddb2135cd..1fc26b6b0 100644
--- a/src/commands/view/CreateComponent.js
+++ b/src/commands/view/CreateComponent.js
@@ -12,7 +12,6 @@ define(['backbone','./SelectPosition'],
tempComponent: { style:{} },
init: function(opt) {
- SelectPosition.init.apply(this, arguments);
_.bindAll(this,'startDraw','draw','endDraw','rollback');
this.config = opt;
this.heightType = this.config.newFixedH ? 'height' : 'min-height';
@@ -293,7 +292,6 @@ define(['backbone','./SelectPosition'],
},
stop: function(){
- this.removePositionPlaceholder(); //Removes placeholder from eventSelectPosition
this.stopSelectPosition();
this.$el.css('cursor',''); //Changes back aspect of the cursor
this.$el.unbind(); //Removes all attached events
diff --git a/src/commands/view/SelectPosition.js b/src/commands/view/SelectPosition.js
index 5c3d21df0..593d3518c 100644
--- a/src/commands/view/SelectPosition.js
+++ b/src/commands/view/SelectPosition.js
@@ -1,37 +1,6 @@
define(function() {
- /**
- * @class SelectPosition
- * @private
- * */
- return {
-
- init: function(opt) {
- _.bindAll(this,'selectingPosition','itemLeft');
- this.config = opt;
- },
- /**
- * Returns position placeholder
- *
- * @return {Object} Placeholder
- * @private
- * */
- getPositionPlaceholder: function() {
- return this.$plh;
- },
-
- /**
- * Creates position placeholder
- * @return {Object} Placeholder
- * @private
- * */
- createPositionPlaceholder: function() {
- this.$plh = $('
', { class: this.plhClass + " no-dots" })
- .css({'pointer-events':'none'}).data('helper',1);
- this.$plh.append( $('
', { class: this.plhClass + "-int no-dots" } ) );
- this.$plh.appendTo( this.$wrapper );
- return this.$plh;
- },
+ return {
/**
* Start select position event
@@ -49,7 +18,6 @@ define(function() {
pfx: this.ppfx,
direction: 'a',
nested: 1,
- //onEndMove: this.onEndMove,
});
var offDim = this.getOffsetDim();
this.sorter.offTop = offDim.top;
@@ -57,12 +25,17 @@ define(function() {
this.$wrapper.on('mousemove', this.selectingPosition);
},
- getOffsetDim: function(){
+ /**
+ * Get frame position
+ * @return {Object}
+ * @private
+ */
+ getOffsetDim: function() {
var frameOff = this.offset(this.canvas.getFrameEl());
var canvasOff = this.offset(this.canvas.getElement());
var bodyEl = this.getCanvasBody();
- var top = frameOff.top - canvasOff.top; //- bodyEl.scrollTop
- var left = frameOff.left - canvasOff.left;// - bodyEl.scrollLeft
+ var top = frameOff.top - canvasOff.top;
+ var left = frameOff.left - canvasOff.left;
return { top: top, left: left };
},
@@ -88,280 +61,10 @@ define(function() {
},
/**
- * During event
- * @param {Object} e Event
- * @private
- * */
- selectingPosition: function(e) {
- this.isPointed = true;
-
- if(!this.wp){
- this.$wp = this.$wrapper;
- this.wp = this.$wp[0];
- }
- var wpO = this.$wp.offset();
- this.wpT = wpO.top;
- this.wpL = wpO.left;
- this.wpScT = this.$wp.scrollTop();
- this.wpScL = this.$wp.scrollLeft();
-
- if(!this.$plh)
- this.createPositionPlaceholder();
-
- this.rY = (e.pageY - this.wpT) + this.wpScT;
- this.rX = (e.pageX - this.wpL) + this.wpScL;
-
- this.entered(e);
- this.updatePosition(this.rX, this.rY);
- var actualPos = this.posIndex + ':' + this.posMethod; //save globally the new index
-
- if(!this.lastPos || (this.lastPos != actualPos)){ //If there is a significant changes with mouse
- this.updatePositionPlaceholder(this.posIndex, this.posMethod);
- this.lastPos = actualPos;
- }
- },
-
- /**
- * Search where to put placeholder
- * @param {Integer} posX X position of the mouse
- * @param {Integer} posY Y position of the mouse
- * @private
- * */
- updatePosition: function( posX, posY ){
- this.posMethod = "before";
- this.posIndex = 0;
- var leftLimit = 0, xLimit = 0, dimRight = 0, yLimit = 0, xCenter = 0, yCenter = 0, dimDown = 0, dim = 0;
- for(var i = 0; i < this.cDim.length; i++){
- dim = this.cDim[i];
- dimDown = dim[0] + dim[2];
- yCenter = dim[0] + (dim[2] / 2); //Horizontal center
- xCenter = dim[1] + (dim[3] / 2); //Vertical center
- dimRight = dim[1] + dim[3];
- if( (xLimit && dim[1] > xLimit) || (yLimit && yCenter > yLimit) ||
- (leftLimit && dimRight < leftLimit)) //No need with this one if over the limit
- continue;
- if(!dim[4]){ //If it's not inFlow (like float element)
- if( posY < dimDown)
- yLimit = dimDown;
- if( posX < xCenter){ //If mouse lefter than center
- xLimit = xCenter;
- this.posMethod = "before";
- }else{
- leftLimit = xCenter;
- this.posMethod = "after";
- }
- this.posIndex = i;
- }else{
- this.posIndex = i;
- if( posY < yCenter ){ //If mouse upper than center
- this.posMethod = "before"; //Should place helper before
- break; //No need to continue under inFlow element
- }else
- this.posMethod = "after";
- }
- }
- if(this.posIndex == (this.cDim.length) && this.posMethod == 'after' ){
- this.posIndex--;
- }
- },
-
- /**
- * Updates the position of the placeholder
- * @param {Integer} index Index of the nearest child
- * @param {String} method Before or after position
- * @private
- * */
- updatePositionPlaceholder: function(index, method){
- var t = 0, l = 0, w = 0, h = 0,
- marg = 2,
- un = 'px',
- margI = 5,
- plh = this.$plh[0];
- if( this.cDim[index] ){
- var elDim = this.cDim[index];
- if(!elDim[4]){
- w = 'auto';
- t = elDim[0] + marg;
- h = elDim[2] - (marg * 2) + un;
- l = (method == 'before') ? (elDim[1] - marg) : (elDim[1] + elDim[3] - marg);
- }else{
- w = elDim[3] + un;
- t = (method == 'before') ? (elDim[0] - marg) : (elDim[0] + elDim[2] - marg);
- l = elDim[1];
- h = 'auto';
- }
- //t -= this.wpScT;
- //l -= this.wpScL;
- }else{
- if(this.$targetEl){
- var trg = this.$targetEl[0],
- $eO = this.$targetEl.offset();
- t = $eO.top - this.wpT + this.wpScT + margI;
- l = $eO.left - this.wpL + this.wpScL + margI;
- w = (parseInt(trg.offsetWidth) - margI * 2) + un;
- h = 'auto';
- }
- }
-
- plh.style.top = t + un;
- plh.style.left = l + un;
- if(w)
- plh.style.width = w;
- if(h)
- plh.style.height = h;
- },
-
- /**
- * Track inside which element pointer entered
- * @param {Object} e Event
- * @private
- * */
- entered: function(e){
- if( (!this.outsideElem || this.outsideElem != e.target) ){ //If I'm in the new element
- this.outsideElem = e.target; //Set the element in which it's actually inside
- this.$targetEl = $(e.target);
- $(this.outsideElem).on('mouseleave',this.itemLeft);
- this.cDim = this.getChildrenDim();
- this.dimT = this.getTargetDim(e);
- if( this.nearToBorders(e) && (e.target.parentNode!=this.wp.parentNode) ) //Avoid flickering
- this.cDim = this.getChildrenDim(e.target.parentNode);
- }else if( this.nearToBorders(e) && (e.target.parentNode!=this.wp.parentNode) ){ //Near to borders and parent is not the canvas
- this.cDim = this.getChildrenDim(e.target.parentNode);
- }else if( !(this.nearToBorders(e)) ){
- this.cDim = this.getChildrenDim();
- }
- },
-
- /**
- * Check if pointer is near to the borders of the target
- * @param {Object} e Event
- * @return {Integer}
- * @private
- * */
- nearToBorders: function(e){
- var m = 7; //Limit in pixels for be near
- if(!this.dimT)
- return;
- var dimT = this.dimT;
- if(dimT[2] < 40)
- m = 5;
- if( ((dimT[0] + m) > this.rY) || (this.rY > (dimT[0] + dimT[2] - m)) ||
- ((dimT[1] + m) > this.rX) || (this.rX > (dimT[1] + dimT[3] - m)) ) //Check if the pointer is near
- return 1;
- else
- return 0;
- },
-
- /**
- * Check if pointer is near to the float component
- * @return {Integer}
- * @private
- * */
- nearToFloat: function() {
- var index = this.posIndex;
- var isLastEl = this.posIsLastEl;
- if(this.cDim.length !== 0 && (
- (!isLastEl && !this.cDim[index][4]) ||
- (this.cDim[index-1] && !this.cDim[index-1][4]) ||
- (isLastEl && !this.cDim[index-1][4]) ) )
- return 1;
- else
- return 0;
- },
-
- /**
- * Returns dimension of the taget
- * @param {Object} e Event
- * @return {Array}
+ * Enabel select position
* @private
- * */
- getTargetDim: function(e) {
- var elT = e.target,
- $el = $(elT);
- return [ elT.offsetTop, elT.offsetLeft, $el.outerHeight(), $el.outerWidth() ];
- },
-
- /**
- * Returns children and their dimensions of the target element,
- * excluding text nodes and the move placeholder
- * @param {Object} el Element
- * @return {Array}
- * @private
- * */
- getChildrenDim: function(el) {
- var dim = [];
- var elToPars = el || this.outsideElem;
- var isInFlow = this.isInFlow; //Assign method for make it work inside $.each
- var $this = this; //Store context
- $(elToPars.childNodes).each(function(){
- var $el = $(this);
- if(this.nodeName != '#text' && !$el.data('helper') ){ //Ignore text nodes and helpers
- dim.push( [ this.offsetTop, this.offsetLeft, $el.outerHeight(), $el.outerWidth(), isInFlow($this, this), this ] );
- }
- });
- return dim;
- },
-
- /**
- * Track when I go ouside of the element (basically when the target changes)
- * @param {Object} e Event
- * @private
- * */
- itemLeft: function(e) {
- $(this.outsideElem).off('mouseleave',this.itemLeft);
- this.outsideElem = null;
- this.$targetEl = null;
- this.lastPos = null;
- },
-
- /**
- * Returns true if the elements is in flow, or better is not in flow where
- * for example the component is with float:left
- * @param {Object} $this Context
- * @param {Object} elm Element
- * @return {Boolean}
- * @private
- * */
- isInFlow: function($this, elm) {
- var $elm = $(elm), ch = -1;
- if(!$elm.length)
- return false;
- if( ($elm.height() < ch) || !$this.okProps($elm) )
- return false;
- return true;
- },
-
- /**
- * Returns true only if the element follow the standard flow
- * @param {Object} $elm Element
- * @return {Boolean}
- * @private
- * */
- okProps: function($elm) {
- if ($elm.css('float')!=='none')
- return false;
- switch($elm.css('position')) {
- case 'static': case 'relative': break;
- default: return false;
- }
- switch ($elm.css('display')) {
- case 'block': case 'list-item': case 'table': return true;
- }
- return false;
- },
-
- /**
- * Removes position placeholder
- * @param void
- * @private
- * */
- removePositionPlaceholder: function() {
- if(this.$plh && this.$plh.length)
- this.$plh.remove();
- this.$plh = null;
- },
-
- enable: function(){
+ */
+ enable: function() {
this.frameEl.contentWindow.onscroll = this.onFrameScroll.bind(this);
this.startSelectPosition();
},
@@ -370,19 +73,18 @@ define(function() {
* On frame scroll callback
* @private
*/
- onFrameScroll: function(e){
+ onFrameScroll: function(e) {
this.canvasTool.style.top = '-' + this.bodyEl.scrollTop + 'px';
this.canvasTool.style.left = '-' + this.bodyEl.scrollLeft + 'px';
},
- run: function(){
+ run: function() {
this.enable();
},
- stop: function(){
+ stop: function() {
this.frameEl.contentWindow.onscroll = null;
- this.removePositionPlaceholder();
this.stopSelectPosition();
this.$wrapper.css('cursor','');//changes back aspect of the cursor
this.$wrapper.unbind();//removes all attached events