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

Refactor commands files to classes

pull/4234/head
Artur Arseniev 4 years ago
parent
1da4729142
commit
2d0a0f04b2
10 changed files with 69 additions and 99 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
      src/commands/index.js
  2. 12
      src/commands/model/Command.js
  3. 8
      src/commands/model/Commands.js
  4. 10
      src/commands/view/CanvasMove.js
  5. 30
      src/commands/view/CommandAbstract.js
  6. 71
      src/commands/view/ComponentDrag.js
  7. 4
      src/commands/view/ComponentStyleClear.js
  8. 8
      src/commands/view/MoveComponent.js
  9. 10
      src/commands/view/SelectComponent.js
  10. 13
      src/commands/view/ShowOffset.js

2
src/commands/index.js
View File

@ -45,7 +45,7 @@
import { isFunction, includes } from 'underscore'; import { isFunction, includes } from 'underscore';
import CommandAbstract from './view/CommandAbstract'; import CommandAbstract from './view/CommandAbstract';
import defaults from './config/config'; import defaults from './config/config';
import { eventDrag } from 'dom_components/model/Component'; import { eventDrag } from '../dom_components/model/Component';
const commandsDef = [ const commandsDef = [
['preview', 'Preview', 'preview'], ['preview', 'Preview', 'preview'],

12
src/commands/model/Command.js
View File

@ -1,7 +1,9 @@
import Backbone from 'backbone'; import { Model } from '../../common';
export default Backbone.Model.extend({ export default class Command extends Model {
defaults: { defaults() {
id: '' return {
id: '',
};
} }
}); }

8
src/commands/model/Commands.js
View File

@ -1,6 +1,6 @@
import Backbone from 'backbone'; import { Collection } from '../../common';
import Command from './Command'; import Command from './Command';
export default Backbone.Collection.extend({ export default class Commands extends Collection {}
model: Command
}); Commands.prototype.model = Command;

10
src/commands/view/CanvasMove.js
View File

@ -1,6 +1,6 @@
import { bindAll } from 'underscore'; import { bindAll } from 'underscore';
import { on, off, getKeyChar } from 'utils/mixins'; import { on, off, getKeyChar } from '../../utils/mixins';
import Dragger from 'utils/Dragger'; import Dragger from '../../utils/Dragger';
export default { export default {
run(ed) { run(ed) {
@ -39,7 +39,7 @@ export default {
getPosition() { getPosition() {
return { return {
x: canvasModel.get('x'), x: canvasModel.get('x'),
y: canvasModel.get('y') y: canvasModel.get('y'),
}; };
}, },
setPosition({ x, y }) { setPosition({ x, y }) {
@ -53,7 +53,7 @@ export default {
}, },
onEnd(ev, dragger) { onEnd(ev, dragger) {
em.trigger('canvas:move:end', dragger); em.trigger('canvas:move:end', dragger);
} },
}); });
this.dragger = dragger; this.dragger = dragger;
} }
@ -73,5 +73,5 @@ export default {
methodsEv[methodEv](document, 'keyup', this.onKeyUp); methodsEv[methodEv](document, 'keyup', this.onKeyUp);
methodsEv[methodEv](canvas, 'mousedown', this.enableDragger); methodsEv[methodEv](canvas, 'mousedown', this.enableDragger);
methodsEv[methodEv](document, 'mouseup', this.disableDragger); methodsEv[methodEv](document, 'mouseup', this.disableDragger);
} },
}; };

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

@ -1,6 +1,6 @@
import { Model } from 'backbone'; import { Model } from '../../common';
export default Model.extend({ export default class CommandAbstract extends Model {
/** /**
* Initialize method that can't be removed * Initialize method that can't be removed
* @param {Object} o Options * @param {Object} o Options
@ -18,14 +18,14 @@ export default Model.extend({
this.canvas = this.em.get && this.em.get('Canvas'); this.canvas = this.em.get && this.em.get('Canvas');
this.init(this.config); this.init(this.config);
}, }
/** /**
* On frame scroll callback * On frame scroll callback
* @param {[type]} e [description] * @param {[type]} e [description]
* @return {[type]} [description] * @return {[type]} [description]
*/ */
onFrameScroll(e) {}, onFrameScroll(e) {}
/** /**
* Returns canval element * Returns canval element
@ -33,7 +33,7 @@ export default Model.extend({
*/ */
getCanvas() { getCanvas() {
return this.canvas.getElement(); return this.canvas.getElement();
}, }
/** /**
* Get canvas body element * Get canvas body element
@ -41,7 +41,7 @@ export default Model.extend({
*/ */
getCanvasBody() { getCanvasBody() {
return this.canvas.getBody(); return this.canvas.getBody();
}, }
/** /**
* Get canvas wrapper element * Get canvas wrapper element
@ -49,7 +49,7 @@ export default Model.extend({
*/ */
getCanvasTools() { getCanvasTools() {
return this.canvas.getToolsEl(); return this.canvas.getToolsEl();
}, }
/** /**
* Get the offset of the element * Get the offset of the element
@ -60,16 +60,16 @@ export default Model.extend({
var rect = el.getBoundingClientRect(); var rect = el.getBoundingClientRect();
return { return {
top: rect.top + el.ownerDocument.body.scrollTop, top: rect.top + el.ownerDocument.body.scrollTop,
left: rect.left + el.ownerDocument.body.scrollLeft left: rect.left + el.ownerDocument.body.scrollLeft,
}; };
}, }
/** /**
* Callback triggered after initialize * Callback triggered after initialize
* @param {Object} o Options * @param {Object} o Options
* @private * @private
* */ * */
init(o) {}, init(o) {}
/** /**
* Method that run command * Method that run command
@ -91,7 +91,7 @@ export default Model.extend({
editor.trigger(`run:${id}`, result, options); editor.trigger(`run:${id}`, result, options);
editor.trigger('run', id, result, options); editor.trigger('run', id, result, options);
return result; return result;
}, }
/** /**
* Method that run command * Method that run command
@ -107,14 +107,14 @@ export default Model.extend({
editor.trigger(`stop:${id}`, result, options); editor.trigger(`stop:${id}`, result, options);
editor.trigger('stop', id, result, options); editor.trigger('stop', id, result, options);
return result; return result;
}, }
/** /**
* Stop current command * Stop current command
*/ */
stopCommand() { stopCommand() {
this.em.get('Commands').stop(this.id); this.em.get('Commands').stop(this.id);
}, }
/** /**
* Method that run command * Method that run command
@ -122,7 +122,7 @@ export default Model.extend({
* @param {Object} sender Button sender * @param {Object} sender Button sender
* @private * @private
* */ * */
run(em, sender) {}, run(em, sender) {}
/** /**
* Method that stop command * Method that stop command
@ -131,4 +131,4 @@ export default Model.extend({
* @private * @private
* */ * */
stop(em, sender) {} stop(em, sender) {}
}); }

71
src/commands/view/ComponentDrag.js
View File

@ -1,5 +1,5 @@
import { keys, bindAll, each, isUndefined, debounce } from 'underscore'; import { keys, bindAll, each, isUndefined, debounce } from 'underscore';
import Dragger from 'utils/Dragger'; import Dragger from '../../utils/Dragger';
const evName = 'dmode'; const evName = 'dmode';
@ -27,7 +27,7 @@ export default {
setPosition: this.setPosition, setPosition: this.setPosition,
guidesStatic: () => this.guidesStatic, guidesStatic: () => this.guidesStatic,
guidesTarget: () => this.guidesTarget, guidesTarget: () => this.guidesTarget,
...dragger ...dragger,
}; };
this.setupGuides(); this.setupGuides();
this.opts = opts; this.opts = opts;
@ -59,7 +59,7 @@ export default {
mode: this.opts.mode, mode: this.opts.mode,
target: this.target, target: this.target,
guidesTarget: this.guidesTarget, guidesTarget: this.guidesTarget,
guidesStatic: this.guidesStatic guidesStatic: this.guidesStatic,
}; };
}, },
@ -98,12 +98,8 @@ export default {
this.guidesEl = guidesEl; this.guidesEl = guidesEl;
this.elGuideInfoX = elInfoX; this.elGuideInfoX = elInfoX;
this.elGuideInfoY = elInfoY; this.elGuideInfoY = elInfoY;
this.elGuideInfoContentX = elInfoX.querySelector( this.elGuideInfoContentX = elInfoX.querySelector(`.${pfx}guide-info__content`);
`.${pfx}guide-info__content` this.elGuideInfoContentY = elInfoY.querySelector(`.${pfx}guide-info__content`);
);
this.elGuideInfoContentY = elInfoY.querySelector(
`.${pfx}guide-info__content`
);
em.on( em.on(
'canvas:update frame:scroll', 'canvas:update frame:scroll',
@ -121,11 +117,7 @@ export default {
let result = []; let result = [];
const el = this.target.getEl(); const el = this.target.getEl();
const { parentNode = {} } = el; const { parentNode = {} } = el;
each( each(parentNode.children, item => (result = result.concat(el !== item ? this.getElementGuides(item) : [])));
parentNode.children,
item =>
(result = result.concat(el !== item ? this.getElementGuides(item) : []))
);
return result.concat(this.getElementGuides(parentNode)); return result.concat(this.getElementGuides(parentNode));
}, },
@ -179,14 +171,11 @@ export default {
const un = 'px'; const un = 'px';
const guideSize = item.active ? 2 : 1; const guideSize = item.active ? 2 : 1;
let numEl = el.children[0]; let numEl = el.children[0];
el.style = `position: absolute; background-color: ${ el.style = `position: absolute; background-color: ${item.active ? 'green' : 'red'};`;
item.active ? 'green' : 'red'
};`;
if (!el.children.length) { if (!el.children.length) {
numEl = document.createElement('div'); numEl = document.createElement('div');
numEl.style = numEl.style = 'position: absolute; color: red; padding: 5px; top: 0; left: 0;';
'position: absolute; color: red; padding: 5px; top: 0; left: 0;';
el.appendChild(numEl); el.appendChild(numEl);
} }
@ -220,12 +209,12 @@ export default {
{ type: 'l', x: left }, // Left { type: 'l', x: left }, // Left
{ type: 'r', x: left + width }, // Right { type: 'r', x: left + width }, // Right
{ type: 'x', x: left + width / 2 }, // Mid x { type: 'x', x: left + width / 2 }, // Mid x
{ type: 'y', y: top + height / 2 } // Mid y { type: 'y', y: top + height / 2 }, // Mid y
].map(item => ({ ].map(item => ({
...item, ...item,
origin: el, origin: el,
originRect, originRect,
guide: opts.debug && this.renderGuide(item) guide: opts.debug && this.renderGuide(item),
})); }));
guides.forEach(item => this.guides.push(item)); guides.forEach(item => this.guides.push(item));
@ -237,8 +226,7 @@ export default {
(transform || '').split(' ').forEach(item => { (transform || '').split(' ').forEach(item => {
const itemStr = item.trim(); const itemStr = item.trim();
const fn = `translate${axis.toUpperCase()}(`; const fn = `translate${axis.toUpperCase()}(`;
if (itemStr.indexOf(fn) === 0) if (itemStr.indexOf(fn) === 0) result = parseFloat(itemStr.replace(fn, ''));
result = parseFloat(itemStr.replace(fn, ''));
}); });
return result; return result;
}, },
@ -302,8 +290,7 @@ export default {
} }
// Update StyleManager properties // Update StyleManager properties
em.getSelected() && em.getSelected() && keys(styleUp).forEach(i => em.trigger(`update:component:style:${i}`));
keys(styleUp).forEach(i => em.trigger(`update:component:style:${i}`));
}, },
_getDragData() { _getDragData() {
@ -311,7 +298,7 @@ export default {
return { return {
target, target,
parent: target.parent(), parent: target.parent(),
index: target.index() index: target.index(),
}; };
}, },
@ -353,7 +340,7 @@ export default {
y: top, y: top,
width: `${width}px`, width: `${width}px`,
height: `${height}px`, height: `${height}px`,
position position,
}); });
} }
}, },
@ -363,8 +350,7 @@ export default {
const { onDrag } = opts; const { onDrag } = opts;
this.updateGuides(guidesTarget); this.updateGuides(guidesTarget);
opts.debug && guidesTarget.forEach(item => this.renderGuide(item)); opts.debug && guidesTarget.forEach(item => this.renderGuide(item));
opts.guidesInfo && opts.guidesInfo && this.renderGuideInfo(guidesTarget.filter(item => item.active));
this.renderGuideInfo(guidesTarget.filter(item => item.active));
onDrag && onDrag(this._getDragData()); onDrag && onDrag(this._getDragData());
}, },
@ -397,12 +383,8 @@ export default {
const isY = axis === 'y'; const isY = axis === 'y';
const origEdge1 = rectOrigin[isY ? 'left' : 'top']; const origEdge1 = rectOrigin[isY ? 'left' : 'top'];
const origEdge1Raw = rectOrigin.rect[isY ? 'left' : 'top']; const origEdge1Raw = rectOrigin.rect[isY ? 'left' : 'top'];
const origEdge2 = isY const origEdge2 = isY ? origEdge1 + rectOrigin.width : origEdge1 + rectOrigin.height;
? origEdge1 + rectOrigin.width const origEdge2Raw = isY ? origEdge1Raw + rectOrigin.rect.width : origEdge1Raw + rectOrigin.rect.height;
: origEdge1 + rectOrigin.height;
const origEdge2Raw = isY
? origEdge1Raw + rectOrigin.rect.width
: origEdge1Raw + rectOrigin.rect.height;
const elGuideInfo = this[`elGuideInfo${axis.toUpperCase()}`]; const elGuideInfo = this[`elGuideInfo${axis.toUpperCase()}`];
const elGuideInfoCnt = this[`elGuideInfoContent${axis.toUpperCase()}`]; const elGuideInfoCnt = this[`elGuideInfoContent${axis.toUpperCase()}`];
const guideInfoStyle = elGuideInfo.style; const guideInfoStyle = elGuideInfo.style;
@ -415,11 +397,8 @@ export default {
const statEdge1 = isY ? left : top; const statEdge1 = isY ? left : top;
const statEdge2 = isY ? left + width : top + height; const statEdge2 = isY ? left + width : top + height;
return { return {
gap: gap: statEdge2 < origEdge1 ? origEdge1 - statEdge2 : statEdge1 - origEdge2,
statEdge2 < origEdge1 guide: stat,
? origEdge1 - statEdge2
: statEdge1 - origEdge2,
guide: stat
}; };
}) })
.filter(item => item.gap > 0) .filter(item => item.gap > 0)
@ -432,16 +411,12 @@ export default {
const statEdge1 = isY ? left : top; const statEdge1 = isY ? left : top;
const statEdge1Raw = isY ? rect.left : rect.top; const statEdge1Raw = isY ? rect.left : rect.top;
const statEdge2 = isY ? left + width : top + height; const statEdge2 = isY ? left + width : top + height;
const statEdge2Raw = isY const statEdge2Raw = isY ? rect.left + rect.width : rect.top + rect.height;
? rect.left + rect.width
: rect.top + rect.height;
const posFirst = isY ? item.y : item.x; const posFirst = isY ? item.y : item.x;
const posSecond = isEdge1 ? statEdge2 : origEdge2; const posSecond = isEdge1 ? statEdge2 : origEdge2;
const pos2 = `${posFirst}px`; const pos2 = `${posFirst}px`;
const size = isEdge1 ? origEdge1 - statEdge2 : statEdge1 - origEdge2; const size = isEdge1 ? origEdge1 - statEdge2 : statEdge1 - origEdge2;
const sizeRaw = isEdge1 const sizeRaw = isEdge1 ? origEdge1Raw - statEdge2Raw : statEdge1Raw - origEdge2Raw;
? origEdge1Raw - statEdge2Raw
: statEdge1Raw - origEdge2Raw;
guideInfoStyle.display = ''; guideInfoStyle.display = '';
guideInfoStyle[isY ? 'top' : 'left'] = pos2; guideInfoStyle[isY ? 'top' : 'left'] = pos2;
guideInfoStyle[isY ? 'left' : 'top'] = `${posSecond}px`; guideInfoStyle[isY ? 'left' : 'top'] = `${posSecond}px`;
@ -457,7 +432,7 @@ export default {
size, size,
sizeRaw, sizeRaw,
elGuideInfo, elGuideInfo,
elGuideInfoCnt elGuideInfoCnt,
}); });
} }
}); });
@ -471,5 +446,5 @@ export default {
const body = Canvas.getBody(); const body = Canvas.getBody();
classes.forEach(cls => body.classList[methodCls](cls)); classes.forEach(cls => body.classList[methodCls](cls));
Canvas[enable ? 'startAutoscroll' : 'stopAutoscroll'](); Canvas[enable ? 'startAutoscroll' : 'stopAutoscroll']();
} },
}; };

4
src/commands/view/ComponentStyleClear.js
View File

@ -1,4 +1,4 @@
import { isArray, flatten } from 'underscore'; import { flatten } from 'underscore';
export default { export default {
run(ed, s, opts = {}) { run(ed, s, opts = {}) {
@ -21,5 +21,5 @@ export default {
} }
return toRemove; return toRemove;
} },
}; };

8
src/commands/view/MoveComponent.js
View File

@ -1,6 +1,6 @@
import { extend, bindAll } from 'underscore'; import { extend, bindAll } from 'underscore';
import Backbone from 'backbone'; import Backbone from 'backbone';
import { on, off } from 'utils/mixins'; import { on, off } from '../../utils/mixins';
import SelectComponent from './SelectComponent'; import SelectComponent from './SelectComponent';
import SelectPosition from './SelectPosition'; import SelectPosition from './SelectPosition';
@ -164,8 +164,6 @@ export default extend({}, SelectPosition, SelectComponent, {
this.getBadgeEl().removeClass(this.badgeClass); this.getBadgeEl().removeClass(this.badgeClass);
this.getHighlighterEl().removeClass(this.hoverClass); this.getHighlighterEl().removeClass(this.hoverClass);
var wp = this.$wrapper; var wp = this.$wrapper;
wp.css('cursor', '') wp.css('cursor', '').unbind().removeClass(this.noSelClass);
.unbind() },
.removeClass(this.noSelClass);
}
}); });

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

@ -1,9 +1,9 @@
import Backbone from 'backbone'; import Backbone from 'backbone';
import { bindAll, isElement, isUndefined, debounce } from 'underscore'; import { bindAll, isElement, debounce } from 'underscore';
import { on, off, getUnitFromValue, isTaggableNode, getViewEl, hasWin } from 'utils/mixins'; import { on, off, getUnitFromValue, isTaggableNode, getViewEl, hasWin } from '../../utils/mixins';
import { isVisible, isDoc } from 'utils/dom'; import { isVisible, isDoc } from '../../utils/dom';
import ToolbarView from 'dom_components/view/ToolbarView'; import ToolbarView from '../../dom_components/view/ToolbarView';
import Toolbar from 'dom_components/model/Toolbar'; import Toolbar from '../../dom_components/model/Toolbar';
const $ = Backbone.$; const $ = Backbone.$;
let showOffsets; let showOffsets;

13
src/commands/view/ShowOffset.js
View File

@ -1,6 +1,6 @@
import Backbone from 'backbone'; import Backbone from 'backbone';
import { isUndefined } from 'underscore'; import { isUndefined } from 'underscore';
import { isTextNode } from 'utils/mixins'; import { isTextNode } from '../../utils/mixins';
const $ = Backbone.$; const $ = Backbone.$;
export default { export default {
@ -16,11 +16,7 @@ export default {
const zoom = this.em.getZoomDecimal(); const zoom = this.em.getZoomDecimal();
const el = opt.el || ''; const el = opt.el || '';
if ( if (!config.showOffsets || isTextNode(el) || (!config.showOffsetsSelected && state == 'Fixed')) {
!config.showOffsets ||
isTextNode(el) ||
(!config.showOffsetsSelected && state == 'Fixed')
) {
editor.stopCommand(this.id, opts); editor.stopCommand(this.id, opts);
return; return;
} }
@ -106,8 +102,7 @@ export default {
var marginLeftSt = parseFloat(style.marginLeft.replace(unit, '')) * zoom; var marginLeftSt = parseFloat(style.marginLeft.replace(unit, '')) * zoom;
var marginRightSt = parseFloat(style.marginRight.replace(unit, '')) * zoom; var marginRightSt = parseFloat(style.marginRight.replace(unit, '')) * zoom;
var marginTopSt = parseFloat(style.marginTop.replace(unit, '')) * zoom; var marginTopSt = parseFloat(style.marginTop.replace(unit, '')) * zoom;
var marginBottomSt = var marginBottomSt = parseFloat(style.marginBottom.replace(unit, '')) * zoom;
parseFloat(style.marginBottom.replace(unit, '')) * zoom;
var mtStyle = marginT.style; var mtStyle = marginT.style;
var mbStyle = marginB.style; var mbStyle = marginB.style;
var mlStyle = marginL.style; var mlStyle = marginL.style;
@ -178,5 +173,5 @@ export default {
var canvas = editor.Canvas; var canvas = editor.Canvas;
var offsetViewer = canvas[method](opts.view); var offsetViewer = canvas[method](opts.view);
offsetViewer.style.opacity = 0; offsetViewer.style.opacity = 0;
} },
}; };

Write Preview
Loading…
Cancel
Save