Permalink
Browse files

Refactor tool positioning

  • Loading branch information...
1 parent d73927f commit 312a50f4e51eb3b4b5de67e1b5feb623b8dc7619 @artf committed Sep 5, 2016
View
@@ -2,6 +2,7 @@
.settings/
.sass-cache/
.project
+.eslintrc
npm-debug.log
style/.sass-cache/
View
@@ -1,7 +1,7 @@
{
"name": "grapesjs",
"description": "Open source Web Template Editor",
- "version": "0.3.13",
+ "version": "0.3.14",
"author": "Artur Arseniev",
"homepage": "http://grapesjs.com",
"main": [
Oops, something went wrong.
View
Oops, something went wrong.
View
@@ -785,6 +785,7 @@ <h1 class="bdg-title">The team</h1>
pc-regular
</style>
</div>
+
<script data-main="src/demo" src="vendor/require/require.js"></script>
</body>
</html>
View
@@ -1,7 +1,7 @@
{
"name": "grapesjs",
"description": "Open source Web Template Editor",
- "version": "0.3.13",
+ "version": "0.3.14",
"author": "Artur Arseniev",
"license": "BSD-3-Clause",
"homepage": "http://grapesjs.com",
@@ -6,11 +6,12 @@ function(Backbone, FrameView) {
return Backbone.View.extend({
initialize: function(o) {
- _.bindAll(this, 'renderBody', 'onFrameScroll');
+ _.bindAll(this, 'renderBody', 'onFrameScroll', 'clearOff');
this.config = o.config || {};
this.em = this.config.em || {};
this.ppfx = this.config.pStylePrefix || '';
this.className = this.config.stylePrefix + 'canvas';
+ this.listenTo(this.em, 'change:canvasOffset', this.clearOff);
this.frame = new FrameView({
model: this.model.get('frame'),
config: this.config
@@ -78,6 +79,15 @@ function(Backbone, FrameView) {
};
},
+ /**
+ * Cleare cached offsets
+ * @private
+ */
+ clearOff: function(){
+ this.frmOff = null;
+ this.cvsOff = null;
+ },
+
/**
* Returns element's data info
* @param {HTMLElement} el
@@ -100,6 +110,21 @@ function(Backbone, FrameView) {
};
},
+ /**
+ * Returns position data of the canvas element
+ * @return {Object} obj Position object
+ */
+ getPosition: function() {
+ var bEl = this.frame.el.contentDocument.body;
+ var fo = this.frmOff;
+ var co = this.cvsOff;
+ return {
+ top: fo.top + bEl.scrollTop - co.top,
+ left: fo.left + bEl.scrollLeft - co.left
+ };
+ },
+
+
render: function() {
this.wrapper = this.model.get('wrapper');
@@ -131,4 +156,4 @@ function(Backbone, FrameView) {
},
});
-});
+});
@@ -70,13 +70,17 @@ define(function() {
var pfx = this.enable(editor.getContainer());
this.fsChanged = this.fsChanged.bind(this, pfx);
document.addEventListener(pfx + 'fullscreenchange', this.fsChanged);
+ if(editor)
+ editor.trigger('change:canvasOffset');
},
stop: function(editor, sender){
if(sender && sender.set)
sender.set('active', false);
this.disable();
+ if(editor)
+ editor.trigger('change:canvasOffset');
}
};
- });
+ });
@@ -6,7 +6,7 @@ define(function() {
return {
init: function(o){
- _.bindAll(this, 'onHover', 'onOut', 'onClick', 'onKeyPress', 'clearOff');
+ _.bindAll(this, 'onHover', 'onOut', 'onClick', 'onKeyPress');
},
@@ -36,15 +36,6 @@ define(function() {
},
/**
- * Cleare cached offsets
- * @private
- */
- clearOff: function(){
- this.frameOff = null;
- this.canvasOff = null;
- },
-
- /**
* Copy component to the clipboard
* @private
*/
@@ -73,7 +64,6 @@ define(function() {
* @private
* */
startSelectComponent: function() {
- this.listenTo(this.em, 'change:canvasOffset', this.clearOff);
this.selEl = $(this.getCanvasBody()).find('*');
this.selEl.on('mouseover', this.onHover)
.on('mouseout', this.onOut)
@@ -88,7 +78,6 @@ define(function() {
* @private
* */
stopSelectComponent: function() {
- this.stopListening(this.em, 'change:canvasOffset', this.clearOff);
if(this.selEl)
this.selEl.trigger('mouseout').off('mouseover', this.onHover)
.off('mouseout', this.onOut)
@@ -135,8 +124,9 @@ define(function() {
this.adjScroll = 1;
this.onFrameScroll(e);
}
- this.updateBadge(trg);
- this.updateHighlighter(trg);
+ var pos = this.getElementPos(trg);
+ this.updateBadge(trg, pos);
+ this.updateHighlighter(trg, pos);
},
/**
@@ -167,15 +157,46 @@ define(function() {
},
/**
+ * Update badge for the component
+ * @param {Object} Component
+ * @param {Object} pos Position object
+ * @private
+ * */
+ updateBadge: function(el, pos) {
+ var $el = $(el);
+ this.cacheEl = el;
+ var model = $el.data("model");
+ if(!model || !model.get('badgable'))
+ return;
+ var badge = this.getBadge();
+ badge.innerHTML = model.getName();
+ var bStyle = badge.style;
+ var u = 'px';
+ bStyle.display = 'block';
+ var canvasPos = this.canvas.getCanvasView().getPosition();
+ var badgeH = badge ? badge.offsetHeight : 0;
+ var badgeW = badge ? badge.offsetWidth : 0;
+ var top = pos.top - badgeH < canvasPos.top ? canvasPos.top : pos.top - badgeH;
+ var left = pos.left + badgeW < canvasPos.left ? canvasPos.left : pos.left;
+ bStyle.top = top + u;
+ bStyle.left = left + u;
+ },
+
+ /**
* Update highlighter element
* @param {HTMLElement} el
+ * @param {Object} pos Position object
* @private
*/
- updateHighlighter: function(el){
+ updateHighlighter: function(el, pos){
if(!this.hl)
this.hl = $(this.canvas.getHighlighter());
- var elPos = this.getElementPos($(el));
- this.hl.css({ left: elPos.left, top: elPos.topP, height: elPos.height, width: elPos.width });
+ this.hl.css({
+ left: pos.left,
+ top: pos.top,
+ height: pos.height,
+ width: pos.width
+ });
},
/**
@@ -193,7 +214,6 @@ define(function() {
if(nMd){
this.editorModel.set('selectedComponent', nMd);
nMd.set('status','selected');
- var elP = this.getElementPos($el);
}
},
@@ -207,27 +227,6 @@ define(function() {
},
/**
- * Update badge for the component
- * @param Object Component
- * @private
- * */
- updateBadge: function(el) {
- var $el = $(el);
- this.cacheEl = $el;
- var model = $el.data("model");
- if(!model || !model.get('badgable'))
- return;
- var badge = this.getBadge();
- badge.innerHTML = model.getName();
- var bStyle = badge.style;
- var u = 'px';
- bStyle.display = 'block';
- var elP = this.getElementPos($el, badge);
- bStyle.left = elP.leftP + u;
- bStyle.top = elP.top + u;
- },
-
- /**
* Returns badge element
* @return {HTMLElement}
* @private
@@ -241,8 +240,9 @@ define(function() {
* @private
*/
onFrameScroll: function(e){
- if(this.cacheEl)
- this.updateBadge(this.cacheEl);
+ var el = this.cacheEl;
+ if(el)
+ this.updateBadge(el, this.getElementPos(el));
},
/**
@@ -252,23 +252,7 @@ define(function() {
* @private
*/
getElementPos: function(el, badge){
- if(!this.frameOff)
- this.frameOff = this.offset(this.canvas.getFrameEl());
- if(!this.canvasOff)
- this.canvasOff = this.offset(this.canvas.getElement());
- var eo = el.offset();
- var bodyEl = this.getCanvasBody();
- var bdg = badge ? badge : null;
- var badgeH = bdg ? bdg.offsetHeight : 0;
- var badgeW = bdg ? bdg.offsetWidth : 0;
- var top = eo.top + this.frameOff.top - this.canvasOff.top;
- var left = eo.left + this.frameOff.left - this.canvasOff.left;
- var topScroll = this.frameOff.top + bodyEl.scrollTop;
- var leftScroll = this.frameOff.left + bodyEl.scrollLeft;
- var topP = top;
- top = (top - badgeH) < topScroll ? topScroll : top - badgeH;
- var leftP = (left + badgeW) < leftScroll ? leftScroll - badgeW : left;
- return {topP: topP, leftP: leftP, top: top, left: left, height: el.outerHeight(), width: el.outerWidth() };
+ return this.canvas.getCanvasView().getElementPos(el);
},
/**
@@ -315,4 +299,4 @@ define(function() {
this.hideBadge();
}
};
-});
+});
@@ -38,4 +38,4 @@ function(Backbone){
return this;
}
});
-});
+});

0 comments on commit 312a50f

Please sign in to comment.