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

Add showOffsetsSelected option 

This option allows showing offsets on selected components
pull/67/head v0.4.25
Artur Arseniev 9 years ago
parent
477006a983
commit
229e648852
6 changed files with 353 additions and 345 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      bower.json
  2. 12
      dist/grapes.min.js
  3. 2
      package.json
  4. 404
      src/commands/view/SelectComponent.js
  5. 275
      src/demo.js
  6. 3
      src/editor/config/config.js

2
bower.json
View File

@ -1,7 +1,7 @@
{ {
"name": "grapesjs", "name": "grapesjs",
"description": "Open source Web Template Editor", "description": "Open source Web Template Editor",
"version": "0.4.24", "version": "0.4.25",
"author": "Artur Arseniev", "author": "Artur Arseniev",
"homepage": "http://grapesjs.com", "homepage": "http://grapesjs.com",
"main": [ "main": [

12
dist/grapes.min.js
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "grapesjs", "name": "grapesjs",
"description": "Open source Web Template Editor", "description": "Open source Web Template Editor",
"version": "0.4.24", "version": "0.4.25",
"author": "Artur Arseniev", "author": "Artur Arseniev",
"license": "BSD-3-Clause", "license": "BSD-3-Clause",
"homepage": "http://grapesjs.com", "homepage": "http://grapesjs.com",

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

@ -1,71 +1,71 @@
define(function(require) { define(function(require) {
/** /**
* @class SelectComponent * @class SelectComponent
* @private * @private
* */ * */
var ToolbarView = require('DomComponents/view/ToolbarView'); var ToolbarView = require('DomComponents/view/ToolbarView');
var Toolbar = require('DomComponents/model/Toolbar'); var Toolbar = require('DomComponents/model/Toolbar');
return { return {
init: function(o){ init: function(o){
_.bindAll(this, 'onHover', 'onOut', 'onClick', 'onKeyPress'); _.bindAll(this, 'onHover', 'onOut', 'onClick', 'onKeyPress');
}, },
enable: function() { enable: function() {
_.bindAll(this, 'copyComp', 'pasteComp', 'onFrameScroll'); _.bindAll(this, 'copyComp', 'pasteComp', 'onFrameScroll');
this.frameOff = this.canvasOff = this.adjScroll = null; this.frameOff = this.canvasOff = this.adjScroll = null;
var config = this.config.em.get('Config'); var config = this.config.em.get('Config');
this.startSelectComponent(); this.startSelectComponent();
this.toggleClipboard(config.copyPaste); this.toggleClipboard(config.copyPaste);
var em = this.config.em; var em = this.config.em;
em.on('component:update', this.updateAttached, this); em.on('component:update', this.updateAttached, this);
em.on('change:canvasOffset', this.updateAttached, this); em.on('change:canvasOffset', this.updateAttached, this);
em.on('change:selectedComponent', this.updateToolbar, this); em.on('change:selectedComponent', this.updateToolbar, this);
}, },
/** /**
* Toggle clipboard function * Toggle clipboard function
* @param {Boolean} active * @param {Boolean} active
* @return {this} * @return {this}
* @private * @private
*/ */
toggleClipboard: function(active){ toggleClipboard: function(active){
var en = active || 0; var en = active || 0;
if(en){ if(en){
key('⌘+c, ctrl+c', this.copyComp); key('⌘+c, ctrl+c', this.copyComp);
key('⌘+v, ctrl+v', this.pasteComp); key('⌘+v, ctrl+v', this.pasteComp);
}else{ }else{
key.unbind('⌘+c, ctrl+c'); key.unbind('⌘+c, ctrl+c');
key.unbind('⌘+v, ctrl+v'); key.unbind('⌘+v, ctrl+v');
} }
}, },
/** /**
* Copy component to the clipboard * Copy component to the clipboard
* @private * @private
*/ */
copyComp: function() { copyComp: function() {
var el = this.editorModel.get('selectedComponent'); var el = this.editorModel.get('selectedComponent');
if(el && el.get('copyable')) if(el && el.get('copyable'))
this.editorModel.set('clipboard', el); this.editorModel.set('clipboard', el);
}, },
/** /**
* Paste component from clipboard * Paste component from clipboard
* @private * @private
*/ */
pasteComp: function() { pasteComp: function() {
var clp = this.editorModel.get('clipboard'), var clp = this.editorModel.get('clipboard'),
sel = this.editorModel.get('selectedComponent'); sel = this.editorModel.get('selectedComponent');
if(clp && sel && sel.collection){ if(clp && sel && sel.collection){
var index = sel.collection.indexOf(sel), var index = sel.collection.indexOf(sel),
clone = clp.clone(); clone = clp.clone();
sel.collection.add(clone, { at: index + 1 }); sel.collection.add(clone, { at: index + 1 });
} }
}, },
/** /**
* Returns canavs body el * Returns canavs body el
@ -110,35 +110,35 @@ define(function(require) {
cw[method]('keydown', this.onKeyPress); cw[method]('keydown', this.onKeyPress);
}, },
/** /**
* On key press event * On key press event
* @private * @private
* */ * */
onKeyPress: function(e) { onKeyPress: function(e) {
var key = e.which || e.keyCode; var key = e.which || e.keyCode;
var comp = this.editorModel.get('selectedComponent'); var comp = this.editorModel.get('selectedComponent');
var focused = this.frameEl.contentDocument.activeElement.tagName !== 'BODY'; var focused = this.frameEl.contentDocument.activeElement.tagName !== 'BODY';
// On CANC (46) or Backspace (8) // On CANC (46) or Backspace (8)
if(key == 8 || key == 46) { if(key == 8 || key == 46) {
if(!focused) if(!focused)
e.preventDefault(); e.preventDefault();
if(comp && !focused) { if(comp && !focused) {
if(!comp.get('removable')) if(!comp.get('removable'))
return; return;
comp.set('status',''); comp.set('status','');
comp.destroy(); comp.destroy();
this.hideBadge(); this.hideBadge();
this.clean(); this.clean();
this.hideHighlighter(); this.hideHighlighter();
this.editorModel.set('selectedComponent', null); this.editorModel.set('selectedComponent', null);
} }
} }
}, },
/** /**
* Hover command * Hover command
* @param {Object} e * @param {Object} e
* @private * @private
*/ */
onHover: function(e) { onHover: function(e) {
@ -147,8 +147,8 @@ define(function(require) {
// Adjust tools scroll top // Adjust tools scroll top
if(!this.adjScroll){ if(!this.adjScroll){
this.adjScroll = 1; this.adjScroll = 1;
this.onFrameScroll(e); this.onFrameScroll(e);
this.updateAttached(); this.updateAttached();
} }
@ -160,7 +160,7 @@ define(function(require) {
/** /**
* Out command * Out command
* @param {Object} e * @param {Object} e
* @private * @private
*/ */
onOut: function(e) { onOut: function(e) {
@ -172,7 +172,7 @@ define(function(require) {
/** /**
* Show element offset viewer * Show element offset viewer
* @param {HTMLElement} el * @param {HTMLElement} el
* @param {Object} pos * @param {Object} pos
*/ */
showElementOffset: function(el, pos) { showElementOffset: function(el, pos) {
@ -189,7 +189,7 @@ define(function(require) {
/** /**
* Hide element offset viewer * Hide element offset viewer
* @param {HTMLElement} el * @param {HTMLElement} el
* @param {Object} pos * @param {Object} pos
*/ */
hideElementOffset: function(el, pos) { hideElementOffset: function(el, pos) {
@ -198,7 +198,7 @@ define(function(require) {
/** /**
* Show fixed element offset viewer * Show fixed element offset viewer
* @param {HTMLElement} el * @param {HTMLElement} el
* @param {Object} pos * @param {Object} pos
*/ */
showFixedElementOffset: function(el, pos) { showFixedElementOffset: function(el, pos) {
@ -211,7 +211,7 @@ define(function(require) {
/** /**
* Hide fixed element offset viewer * Hide fixed element offset viewer
* @param {HTMLElement} el * @param {HTMLElement} el
* @param {Object} pos * @param {Object} pos
*/ */
hideFixedElementOffset: function(el, pos) { hideFixedElementOffset: function(el, pos) {
@ -219,106 +219,110 @@ define(function(require) {
this.editor.stopCommand('show-offset', {state: 'Fixed'}); this.editor.stopCommand('show-offset', {state: 'Fixed'});
}, },
/** /**
* Hide Highlighter element * Hide Highlighter element
*/ */
hideHighlighter: function () { hideHighlighter: function () {
this.canvas.getHighlighter().style.display = 'none'; this.canvas.getHighlighter().style.display = 'none';
}, },
/** /**
* Hover command * Hover command
* @param {Object} e * @param {Object} e
* @private * @private
*/ */
onClick: function(e) { onClick: function(e) {
var m = $(e.target).data('model'); var m = $(e.target).data('model');
if(!m) if(!m)
return; return;
var s = m.get('stylable'); var s = m.get('stylable');
if(!(s instanceof Array) && !s) if(!(s instanceof Array) && !s)
return; return;
this.onSelect(e, e.target); this.onSelect(e, e.target);
}, },
/** /**
* Update badge for the component * Update badge for the component
* @param {Object} Component * @param {Object} Component
* @param {Object} pos Position object * @param {Object} pos Position object
* @private * @private
* */ * */
updateBadge: function(el, pos) { updateBadge: function(el, pos) {
var $el = $(el); var $el = $(el);
this.cacheEl = el; this.cacheEl = el;
var model = $el.data("model"); var model = $el.data("model");
if(!model || !model.get('badgable')) if(!model || !model.get('badgable'))
return; return;
var badge = this.getBadge(); var badge = this.getBadge();
badge.innerHTML = model.getName(); badge.innerHTML = model.getName();
var bStyle = badge.style; var bStyle = badge.style;
var u = 'px'; var u = 'px';
bStyle.display = 'block'; bStyle.display = 'block';
var canvasPos = this.canvas.getCanvasView().getPosition(); var canvasPos = this.canvas.getCanvasView().getPosition();
var badgeH = badge ? badge.offsetHeight : 0; var badgeH = badge ? badge.offsetHeight : 0;
var badgeW = badge ? badge.offsetWidth : 0; var badgeW = badge ? badge.offsetWidth : 0;
var top = pos.top - badgeH < canvasPos.top ? canvasPos.top : pos.top - badgeH; var top = pos.top - badgeH < canvasPos.top ? canvasPos.top : pos.top - badgeH;
var left = pos.left + badgeW < canvasPos.left ? canvasPos.left : pos.left; var left = pos.left + badgeW < canvasPos.left ? canvasPos.left : pos.left;
bStyle.top = top + u; bStyle.top = top + u;
bStyle.left = left + u; bStyle.left = left + u;
}, },
/** /**
* Update highlighter element * Update highlighter element
* @param {HTMLElement} el * @param {HTMLElement} el
* @param {Object} pos Position object * @param {Object} pos Position object
* @private * @private
*/ */
updateHighlighter: function(el, pos) { updateHighlighter: function(el, pos) {
var hlEl = this.canvas.getHighlighter(); var hlEl = this.canvas.getHighlighter();
var hlStyle = hlEl.style; var hlStyle = hlEl.style;
var unit = 'px'; var unit = 'px';
hlStyle.left = pos.left + unit; hlStyle.left = pos.left + unit;
hlStyle.top = pos.top + unit; hlStyle.top = pos.top + unit;
hlStyle.height = pos.height + unit; hlStyle.height = pos.height + unit;
hlStyle.width = pos.width + unit; hlStyle.width = pos.width + unit;
hlStyle.display = 'block'; hlStyle.display = 'block';
}, },
/** /**
* Say what to do after the component was selected * Say what to do after the component was selected
* @param {Object} e * @param {Object} e
* @param {Object} el * @param {Object} el
* @private * @private
* */ * */
onSelect: function(e, el) { onSelect: function(e, el) {
e.stopPropagation(); e.stopPropagation();
var md = this.editorModel.get('selectedComponent'); var md = this.editorModel.get('selectedComponent');
this.cleanPrevious(md); this.cleanPrevious(md);
var $el = $(el); var $el = $(el);
var nMd = $el.data('model'); var nMd = $el.data('model');
if(nMd){ if(nMd){
var mirror = nMd.get('mirror'); var em = this.em;
nMd = mirror ? mirror : nMd; var config = em.get('Config');
var mirror = nMd.get('mirror');
// Close all opened components inside Navigator nMd = mirror ? mirror : nMd;
var opened = this.em.get('opened');
for (var cid in opened){ // Close all opened components inside Navigator
var m = opened[cid]; var opened = em.get('opened');
m.set('open', 0); for (var cid in opened){
} var m = opened[cid];
var parent = nMd.collection ? nMd.collection.parent : null; m.set('open', 0);
while(parent) { }
parent.set('open', 1); var parent = nMd.collection ? nMd.collection.parent : null;
opened[parent.cid] = parent; while(parent) {
parent = parent.collection ? parent.collection.parent : null; parent.set('open', 1);
} opened[parent.cid] = parent;
parent = parent.collection ? parent.collection.parent : null;
this.editorModel.set('selectedComponent', nMd); }
nMd.set('status','selected');
this.showFixedElementOffset(el); this.editorModel.set('selectedComponent', nMd);
nMd.set('status','selected');
if(config.showOffsetsSelected) {
this.showFixedElementOffset(el);
}
this.hideElementOffset(); this.hideElementOffset();
} }
}, },
/** /**
* Update toolbar if the component has one * Update toolbar if the component has one
@ -377,13 +381,13 @@ define(function(require) {
toolbarStyle.left = leftPos + unit; toolbarStyle.left = leftPos + unit;
}, },
/** /**
* Return canvas dimensions and positions * Return canvas dimensions and positions
* @return {Object} * @return {Object}
*/ */
getCanvasPosition: function () { getCanvasPosition: function () {
return this.canvas.getCanvasView().getPosition(); return this.canvas.getCanvasView().getPosition();
}, },
/** /**
* Removes all highlighting effects on components * Removes all highlighting effects on components

275
src/demo.js
View File

@ -1,130 +1,131 @@
require(['config/require-config'], function() { require(['config/require-config'], function() {
require(['grapesjs/main'],function (grapesjs){ require(['grapesjs/main'],function (grapesjs){
var editor = grapesjs.init( var editor = grapesjs.init(
{ {
allowScripts: 1, allowScripts: 1,
autorender: 0, showOffsets: 1,
autorender: 0,
noticeOnUnload: 0, noticeOnUnload: 0,
container : '#gjs', container : '#gjs',
height: '100%', height: '100%',
fromElement: true, fromElement: true,
/* /*
components: [{ components: [{
type: 'text', type: 'text',
style:{ style:{
width:'100px', width:'100px',
height:'100px', height:'100px',
margin: '50px auto', margin: '50px auto',
}, },
traits: ['title'], traits: ['title'],
components: [{ components: [{
type: 'textnode', type: 'textnode',
content: 'text node row', content: 'text node row',
},{ },{
type: 'textnode', type: 'textnode',
content: ', another text node', content: ', another text node',
},{ },{
type: 'link', type: 'link',
content: 'someLink', content: 'someLink',
},{ },{
type: 'textnode', type: 'textnode',
content: " More text node --- ", content: " More text node --- ",
}], }],
}],*/ }],*/
storageManager:{ storageManager:{
autoload: 0, autoload: 0,
storeComponents: 1, storeComponents: 1,
storeStyles: 1, storeStyles: 1,
}, },
commands: { commands: {
defaults : [{ defaults : [{
id: 'open-github', id: 'open-github',
run: function(editor, sender){ run: function(editor, sender){
sender.set('active',false); sender.set('active',false);
window.open('https://github.com/artf/grapesjs','_blank'); window.open('https://github.com/artf/grapesjs','_blank');
} }
},{ },{
id: 'undo', id: 'undo',
run: function(editor, sender){ run: function(editor, sender){
sender.set('active',false); sender.set('active',false);
editor.UndoManager.undo(true); editor.UndoManager.undo(true);
} }
},{ },{
id: 'redo', id: 'redo',
run: function(editor, sender){ run: function(editor, sender){
sender.set('active',false); sender.set('active',false);
editor.UndoManager.redo(true); editor.UndoManager.redo(true);
} }
},{ },{
id: 'clean-all', id: 'clean-all',
run: function(editor, sender){ run: function(editor, sender){
sender.set('active',false); sender.set('active',false);
if(confirm('Are you sure to clean the canvas?')){ if(confirm('Are you sure to clean the canvas?')){
var comps = editor.DomComponents.clear(); var comps = editor.DomComponents.clear();
} }
} }
}], }],
}, },
assetManager: { assetManager: {
storageType : '', storageType : '',
storeOnChange : true, storeOnChange : true,
storeAfterUpload : true, storeAfterUpload : true,
assets : [ assets : [
{ type: 'image', src : 'http://placehold.it/350x250/78c5d6/fff/image1.jpg', height:350, width:250}, { 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/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/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/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/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/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 : '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/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/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}, { type: 'image', src : './img/bg-gr-v.png', date: '2015-02-01',height:1, width:1728},
] ]
}, },
styleManager : { styleManager : {
sectors: [{ sectors: [{
name: 'General', name: 'General',
open: false, open: false,
buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom'], buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom'],
},{ },{
name: 'Dimension', name: 'Dimension',
open: false, open: false,
buildProps: ['width', 'height', 'max-width', 'min-height', 'margin', 'padding'], buildProps: ['width', 'height', 'max-width', 'min-height', 'margin', 'padding'],
},{ },{
name: 'Typography', name: 'Typography',
open: false, open: false,
buildProps: ['font-family', 'font-size', 'font-weight', 'letter-spacing', 'color', 'line-height', 'text-align', 'text-shadow'], buildProps: ['font-family', 'font-size', 'font-weight', 'letter-spacing', 'color', 'line-height', 'text-align', 'text-shadow'],
properties: [{ properties: [{
property: 'text-align', property: 'text-align',
list : [ list : [
{value: 'left', className: 'fa fa-align-left'}, {value: 'left', className: 'fa fa-align-left'},
{value: 'center', className: 'fa fa-align-center' }, {value: 'center', className: 'fa fa-align-center' },
{value: 'right', className: 'fa fa-align-right'}, {value: 'right', className: 'fa fa-align-right'},
{value: 'justify', className: 'fa fa-align-justify'} {value: 'justify', className: 'fa fa-align-justify'}
], ],
}] }]
},{ },{
name: 'Decorations', name: 'Decorations',
open: false, open: false,
buildProps: ['border-radius-c', 'background-color', 'border-radius', 'border', 'box-shadow', 'background'], buildProps: ['border-radius-c', 'background-color', 'border-radius', 'border', 'box-shadow', 'background'],
},{ },{
name: 'Extra', name: 'Extra',
open: false, open: false,
buildProps: ['transition', 'perspective', 'transform'], buildProps: ['transition', 'perspective', 'transform'],
},{ },{
name: 'Dimension', name: 'Dimension',
open: false, open: false,
buildProps: ['margin'], buildProps: ['margin'],
properties:[{ properties:[{
name: 'Marginnnn', name: 'Marginnnn',
property: 'margin', property: 'margin',
type: 'composite', type: 'composite',
@ -142,19 +143,19 @@ require(['config/require-config'], function() {
property: 'margin-left', property: 'margin-left',
},], },],
}/*{ }/*{
name : 'Center blocksss', name : 'Center blocksss',
property : 'margins', property : 'margins',
type : 'select', type : 'select',
defaults : '0', defaults : '0',
list : [{ list : [{
value : '0', value : '0',
name : 'Normal', name : 'Normal',
},{ },{
value : '0 auto', value : '0 auto',
name : 'Center', name : 'Center',
}], }],
}*/], }*/],
},{ },{
name: 'Flex', name: 'Flex',
open: false, open: false,
properties: [{ properties: [{
@ -199,7 +200,7 @@ require(['config/require-config'], function() {
className : 'icons-flex icon-dir-col-rev', className : 'icons-flex icon-dir-col-rev',
}], }],
},{ },{
name : 'Wrap', name : 'Wrap',
property : 'flex-wrap', property : 'flex-wrap',
type : 'radio', type : 'radio',
defaults : 'nowrap', defaults : 'nowrap',
@ -322,17 +323,17 @@ require(['config/require-config'], function() {
}] }]
} }
], ],
}, },
} }
); );
window.editor = editor; window.editor = editor;
editor.render(); editor.render();
}); });
}); });

3
src/editor/config/config.js
View File

@ -20,6 +20,9 @@ define(function () {
// Show paddings and margins // Show paddings and margins
showOffsets: false, showOffsets: false,
// Show paddings and margins on selected component
showOffsetsSelected: false,
// Height for the editor container // Height for the editor container
height: '900px', height: '900px',

Write Preview
Loading…
Cancel
Save