tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Update and refactor select component command

pull/36/head
Artur Arseniev 10 years ago
parent
31dd50c377
commit
cab6cb696e
7 changed files with 277 additions and 64 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 69
      src/canvas/main.js
  2. 10
      src/canvas/view/CanvasView.js
  3. 76
      src/commands/view/CommandAbstract.js
  4. 147
      src/commands/view/SelectComponent.js
  5. 1
      src/editor/model/Editor.js
  6. 16
      styles/css/main.css
  7. 22
      styles/scss/main.scss

69
src/canvas/main.js
View File

@ -41,30 +41,91 @@ define(function(require) {
* Get wrapper
*
* @return {Object}
* */
* *
getWrapper: function() {
return this.canvas.get('wrapper').getComponent();
},
*/
/**
* Returns canvas element
* @return {HTMLElement}
*/
getElement: function(){
return this.CanvasView.el;
},
getFrameWrapperEl: function(){
return this.CanvasView.frame.getWrapper();
/**
* Returns frame element of the canvas
* @return {HTMLElement}
*/
getFrameEl: function(){
return this.CanvasView.frame.el;
},
/**
* Returns body element of the frame
* @return {[type]} [description]
* @return {HTMLElement}
*/
getBody: function(){
return this.CanvasView.frame.el.contentDocument.body;
},
/**
* Returns body wrapper element of the frame
* @return {HTMLElement}
*/
getWrapperEl: function(){
return this.getBody().querySelector('#wrapper');
},
/**
* Returns element containing canvas tools
* @return {HTMLElement}
*/
getToolsEl: function(){
return this.CanvasView.toolsEl;
},
/**
* Returns highlighter element
* @return {HTMLElement}
*/
getHighlighter: function(){
return this.CanvasView.hlEl;
},
/**
* Returns selector highlighter element
* @return {HTMLElement}
*/
getHighlighterSel: function(){
return this.CanvasView.hlSelEl;
},
/**
* Returns badge element
* @return {HTMLElement}
*/
getBadgeEl: function(){
return this.CanvasView.badgeEl;
},
/**
* Render canvas
* */
render: function() {
return this.CanvasView.render().el;
},
/**
* Returns wrapper element
* @return {HTMLElement}
* ????
*/
getFrameWrapperEl: function(){
return this.CanvasView.frame.getWrapper();
},
};
return Canvas;

10
src/canvas/view/CanvasView.js
View File

@ -6,11 +6,18 @@ function(Backbone, FrameView) {
return Backbone.View.extend({
initialize: function(o) {
this.config = o.config;
this.config = o.config || {};
this.ppfx = this.config.pStylePrefix || '';
this.className = this.config.stylePrefix + 'canvas';
this.frame = new FrameView({
model: this.model.get('frame')
});
this.toolsEl = $('<div>', { id: this.ppfx + 'tools' }).get(0);
this.hlEl = $('<div>', { class: this.ppfx + 'highlighter' }).get(0);
this.hlSelEl = $('<div>', { class: this.ppfx + 'highlighter-sel' }).get(0);
this.badgeEl = $('<div>', {class: this.ppfx + 'badge'}).get(0);
this.toolsEl.appendChild(this.hlEl);
this.toolsEl.appendChild(this.hlSelEl);
},
render: function() {
@ -24,6 +31,7 @@ function(Backbone, FrameView) {
frame.el.onload = function(){ frame.renderWrapper(); };
}
this.$el.append(this.toolsEl);
this.$el.attr({class: this.className, id: this.config.canvasId});
return this;
},

76
src/commands/view/CommandAbstract.js
View File

@ -23,22 +23,78 @@ define(['backbone'],
this.plhClass = this.pfx + 'placeholder';
this.freezClass = this.ppfx + 'freezed';
this.canvas = this.editorModel.Canvas;
if(this.editorModel.get)
this.setElement(this.editorModel.get('$editor').find('#'+this.canvasId));
//this.setElement(this.editorModel.get('$editor').find('#'+this.canvasId));
this.setElement(this.getCanvas());
//TODO refactor
var fbody = this.editorModel.Canvas.getBody();
this.setElement(fbody);
this.$canvas = this.$el;
//this.$wrapper = this.$canvas.find('#'+this.wrapperId);
this.$wrapper = $(this.getCanvasWrapper());
this.$canvas = this.$el;
this.$wrapper = this.$canvas.find('#'+this.wrapperId);
this.init(this.config);
//TODO refactor
this.$wrapper = $(fbody.querySelector('#wrapper'));
this.frameEl = this.canvas.getFrameEl();
this.canvasTool = this.getCanvasTools();
this.bodyEl = this.getCanvasBody();
this.init(this.config);
//frameEl.contentWindow.onscroll = this.onFrameScroll.bind(this);
},
/**
* On frame scroll callback
* @param {[type]} e [description]
* @return {[type]} [description]
*/
onFrameScroll: function(e){},
/**
* Returns canval element
* @return {HTMLElement}
*/
getCanvas: function(){
//return this.editorModel.get('$editor').find('#'+this.canvasId);
return this.canvas.getElement();
},
/**
* Get canvas body element
* @return {HTMLElement}
*/
getCanvasBody: function(){
return this.canvas.getBody();
},
/**
* Get canvas wrapper element
* @return {HTMLElement}
*/
getCanvasWrapper: function(){
return this.canvas.getWrapperEl();
},
/**
* Get canvas wrapper element
* @return {HTMLElement}
*/
getCanvasTools: function(){
return this.canvas.getToolsEl();
},
/**
* Get the offset of the element
* @param {HTMLElement} el
* @return {Object}
*/
offset: function(el){
var rect = el.getBoundingClientRect();
return {
top: rect.top + document.body.scrollTop,
left: rect.left + document.body.scrollLeft
};
},
/**
* Callback triggered after initialize
* @param {Object} o Options
@ -60,7 +116,7 @@ define(['backbone'],
* @param {Object} sender Button sender
* @private
* */
stop: function(em, sender) {}
stop: function(em, sender) {},
});
});

147
src/commands/view/SelectComponent.js
View File

@ -9,11 +9,14 @@ define(function() {
_.bindAll(this, 'onHover', 'onOut', 'onClick', 'onKeyPress');
},
enable: function() {
_.bindAll(this,'copyComp','pasteComp');
var confMain = this.config.em.get('Config');
this.frameEl.contentWindow.onscroll = this.onFrameScroll.bind(this);
var config = this.config.em.get('Config');
this.startSelectComponent();
if(confMain.copyPaste){
if(config.copyPaste){
key('⌘+c, ctrl+c', this.copyComp);
key('⌘+v, ctrl+v', this.pasteComp);
}
@ -24,10 +27,10 @@ define(function() {
* @private
*/
copyComp: function() {
var sel = this.editorModel.get('selectedComponent');
var el = this.editorModel.get('selectedComponent');
if(sel && sel.get('copyable'))
this.editorModel.set('clipboard', sel);
if(el && el.get('copyable'))
this.editorModel.set('clipboard', el);
},
/**
@ -35,11 +38,11 @@ define(function() {
* @private
*/
pasteComp: function() {
var clp = this.editorModel.get('clipboard'),
sel = this.editorModel.get('selectedComponent');
var clp = this.editorModel.get('clipboard'),
sel = this.editorModel.get('selectedComponent');
if(clp && sel && sel.collection){
var index = sel.collection.indexOf(sel),
clone = clp.clone();
clone = clp.clone();
sel.collection.add(clone, { at: index + 1 });
}
},
@ -49,16 +52,11 @@ define(function() {
* @private
* */
startSelectComponent: function() {
var that = this;
// TODO
//this.setElement(this.editorModel.Canvas.getFrameWrapperEl());
//$el should be "canvas"
this.$el.find('*')
.on('mouseover',this.onHover)
this.selEl = $(this.getCanvasBody()).find('*');
this.selEl.on('mouseover',this.onHover)
.on('mouseout', this.onOut)
.on('click', this.onClick);
this.selEl = this.$el.find('*');
$(document).on('keydown', this.onKeyPress);
$(this.frameEl.contentWindow).on('keydown', this.onKeyPress);
},
/**
@ -68,7 +66,7 @@ define(function() {
onKeyPress: function(e) {
var key = e.which || e.keyCode;
var comp = this.editorModel.get('selectedComponent');
var focused = document.activeElement.tagName !== 'BODY';
var focused = this.frameEl.contentDocument.activeElement.tagName !== 'BODY';
if(key == 8 || key == 46) {
if(!focused)
e.preventDefault();
@ -91,8 +89,14 @@ define(function() {
*/
onHover: function(e) {
e.stopPropagation();
$(e.target).addClass(this.hoverClass);
this.attachBadge(e.target);
var trg = e.target;
// Adjust tools scroll top
if(!this.adjScroll){
this.adjScroll = 1;
this.onFrameScroll(e);
}
this.updateBadge(trg);
this.updateHighlighter(trg);
},
/**
@ -102,9 +106,10 @@ define(function() {
*/
onOut: function(e) {
e.stopPropagation();
$(e.target).removeClass(this.hoverClass);
if(this.badge)
this.badge.css({ left: -10000, top:-10000 });
if(this.hl)
this.hl.css({ left: -10000, top:-10000 });
},
/**
@ -119,6 +124,17 @@ define(function() {
this.onSelect(e, e.target);
},
/**
* Update highlighter element
* @param {HTMLElement} el
*/
updateHighlighter: function(el){
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 });
},
/** Stop select component event
* @param Event
* @private
@ -131,8 +147,8 @@ define(function() {
/**
* Say what to do after the component was selected
* @param {Object} e
* @param {Object} el
* @param {Object} e
* @param {Object} el
* @private
* */
onSelect: function(e, el) {
@ -140,10 +156,15 @@ define(function() {
var md = this.editorModel.get('selectedComponent');
if(md)
this.cleanPrevious(md);
var nMd = $(el).data('model');
var $el = $(el);
var nMd = $el.data('model');
if(nMd){
this.editorModel.set('selectedComponent', nMd);
nMd.set('status','selected');
if(!this.hlSel)
this.hlSel = $(this.canvas.getHighlighterSel());
var elP = this.getElementPos($el);
this.hlSel.css({left: elP.left, top: elP.topP, height: elP.height, width: elP.width });
}
},
@ -152,33 +173,61 @@ define(function() {
* @private
* */
clean: function() {
this.$el.find('*').removeClass(this.hoverClass);
this.selEl.removeClass(this.hoverClass);
},
/** Attach badge to component
/**
* Update badge for the component
* @param Object Component
* @private
* */
attachBadge: function(el) {
var model = $(el).data("model");
updateBadge: function(el) {
console.log('Hover');
var $el = $(el);
this.cacheEl = $el;
var model = $el.data("model");
if(!model || !model.get('badgable'))
return;
if(!this.badge)
this.createBadge();
var badgeH = this.badge.outerHeight();
this.updateBadgeLabel(model);
var $el = $(el);
if(!this.wrapper)
this.wrapper = this.$wrapper;
if(!this.wrapperTop)
this.wrapperTop = this.wrapper.offset() ? this.wrapper.offset().top : 0;
if(!this.wrapperLeft)
this.wrapperLeft= this.wrapper.offset() ? this.wrapper.offset().left : 0;
var relativeT = ($el.offset().top - this.wrapperTop) + this.wrapper.scrollTop();
var relativeL = ($el.offset().left- this.wrapperLeft) + this.wrapper.scrollLeft();
if( (relativeT-badgeH) > this.wrapperTop) //If it's possible set badge to top
relativeT -= badgeH;
this.badge.css({ left: relativeL, top:relativeT });
var elPos = this.getElementPos($el);
this.badge.css({ left: elPos.left, top: elPos.top });
},
/**
* On frame scroll callback
* @param {[type]} e [description]
* @return {[type]} [description]
*/
onFrameScroll: function(e){
this.canvasTool.style.top = '-' + this.bodyEl.scrollTop + 'px';
var elPos = this.getElementPos(this.cacheEl);
this.badge.css({ left: elPos.left, top: elPos.top });
},
/**
* Returns element's data info
* @param {HTMLElement} el
* @return {Object}
*/
getElementPos: function(el){
if(!this.frameOff)
this.frameOff = this.offset(this.canvas.getFrameEl());
if(!this.canvasOff)
this.canvasOff = this.offset(this.canvas.getElement());
var eo = el.offset();//this.offset(el);
var bodyEl = this.getCanvasBody();
var badgeH = this.badge.outerHeight();
var top = eo.top + this.frameOff.top - this.canvasOff.top;// - bodyEl.scrollTop
var left = eo.left + this.frameOff.left - bodyEl.scrollLeft - this.canvasOff.left;
var topScroll = this.frameOff.top + bodyEl.scrollTop;
var topP = top;
if( (top - badgeH) < topScroll)
top = topScroll;
else
top -= badgeH;
return {topP: topP, top: top, left: left, height: el.height(), width: el.width() };
},
/**
@ -186,7 +235,7 @@ define(function() {
* @private
* */
createBadge: function () {
this.badge = $('<div>', {class: this.badgeClass + " no-dots"}).appendTo(this.$wrapper);
this.badge = $('<div>', {class: this.badgeClass + " no-dots"}).appendTo(this.getCanvasTools());
},
/**
@ -202,12 +251,12 @@ define(function() {
/**
* Updates badge label
* @param Object Model
* @param {Object} Model
* @private
* */
updateBadgeLabel: function (model) {
if(model)
this.badge.html( model.getName() );
this.badge.html(model.getName());
},
/**
@ -224,17 +273,25 @@ define(function() {
run: function(em, sender) {
this.enable();
this.render();
},
stop: function() {
if(!this.selEl)
this.selEl = $(this.getCanvasBody()).find('*');
if(this.hlSel)
this.hlSel.css({ left: -10000, top:-10000 });
this.frameOff = this.canvasOff = this.adjScroll = null;
$(this.frameEl.contentWindow).off('keydown');
var frameEl = this.canvas.getFrameEl();
frameEl.contentWindow.onscroll = null;
var sel = this.editorModel.get('selectedComponent');
if(sel)
this.cleanPrevious(sel);
this.$el.unbind(); //removes all attached events
this.removeBadge();
this.clean();
this.$el.find('*').unbind('mouseover').unbind('mouseout').unbind('click');
this.selEl.unbind('mouseover').unbind('mouseout').unbind('click');
this.editorModel.set('selectedComponent',null);
key.unbind('⌘+c, ctrl+c');
key.unbind('⌘+v, ctrl+v');

1
src/editor/model/Editor.js
View File

@ -253,6 +253,7 @@ define([
initCanvas: function() {
var cfg = this.config.canvas,
pfx = cfg.stylePrefix || 'cv-';
cfg.pStylePrefix = this.config.stylePrefix;
cfg.stylePrefix = this.config.stylePrefix + pfx;
cfg.canvasId = this.config.idCanvas;
this.cv = new Canvas(this.config.canvas);

16
styles/css/main.css
View File

@ -2636,9 +2636,21 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
height: 100%;
top: 0;
left: 3.5%;
overflow: auto;
overflow: hidden;
z-index: 1;
/* This simulate body behaviour */ }
.wte-cv-canvas .wte-highlighter, .wte-cv-canvas .wte-highlighter-sel {
position: absolute;
outline: 1px solid #3b97e3;
pointer-events: none; }
.wte-cv-canvas .wte-highlighter-sel {
outline: 3px solid #3b97e3; }
.wte-cv-canvas #wte-tools {
width: 100%;
position: absolute;
top: 0;
left: 0;
outline: none; }
.wte-cv-canvas > div:first-child {
background-color: #fff;
position: relative;
@ -2731,7 +2743,7 @@ ol.example li.placeholder:before {
*.wte-com-hover-move, div.wte-com-hover-move {
outline: 3px solid #ffca6f; }
.wte-com-badge, .wte-com-badge-red, .wte-com-badge-yellow {
.wte-com-badge, .wte-com-badge-red, .wte-com-badge-yellow, .wte-badge {
pointer-events: none;
background-color: #3b97e3;
color: #fff;

22
styles/scss/main.scss
View File

@ -123,9 +123,26 @@ $imageCompDim: 50px;
width: 80%;
height: 100%;
top: 0; left: 3.5%;
overflow: auto;
overflow: hidden;
z-index:1;
.#{$app-prefix}highlighter, .#{$app-prefix}highlighter-sel{
position: absolute;
outline: 1px solid $colorBlue;
pointer-events: none;
}
.#{$app-prefix}highlighter-sel{
outline: 3px solid $colorBlue;
}
##{$app-prefix}tools{
width: 100%;
position: absolute;
top: 0; left: 0;
outline: none;
}
/* This simulate body behaviour */
> div:first-child {
background-color: #fff;
@ -135,6 +152,7 @@ $imageCompDim: 50px;
width: 100%;
}
}
.#{$cv-prefix}canvas *{box-sizing: border-box;}
.btn-cl {
@ -203,7 +221,7 @@ ol.example li.placeholder:before {position: absolute;}
*.#{$com-prefix}hover-move, div.#{$com-prefix}hover-move{
outline: 3px solid $colorYell;
}
.#{$com-prefix}badge{
.#{$com-prefix}badge, .#{$app-prefix}badge{
pointer-events: none;
background-color: $colorBlue;
color: #fff;

Write Preview
Loading…
Cancel
Save