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

eslint fixes

pull/4389/head
Artur Arseniev 4 years ago
parent
dd447fb402
commit
94804a65bc
6 changed files with 75 additions and 102 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. 24
      src/abstract/View.ts
  2. 12
      src/canvas/index.ts
  3. 20
      src/canvas/model/Canvas.ts
  4. 20
      src/editor/index.ts
  5. 94
      src/editor/model/Editor.ts
  6. 7
      src/pages/model/Page.ts

24
src/abstract/View.ts
View File

@ -1,20 +1,20 @@
import Backbone from "backbone"; import Backbone from 'backbone';
import Model from "./Model"; import Model from './Model';
import Module, { IBaseModule } from "./Module"; import Module, { IBaseModule } from './Module';
export default class View< export default class View<TModel extends Model = Model, TElement extends Element = HTMLElement> extends Backbone.View<
TModel extends Model = Model, TModel,
TElement extends Element = HTMLElement TElement
> extends Backbone.View<TModel, TElement> { > {
protected get pfx() { protected get pfx() {
return this.ppfx + this.config.stylePrefix || ""; return this.ppfx + this.config.stylePrefix || '';
} }
protected get ppfx() { protected get ppfx() {
return (this.em.config as any).stylePrefix || ""; return (this.em.config as any).stylePrefix || '';
} }
protected get module(): TModel extends Model<infer M>? M: unknown { protected get module(): TModel extends Model<infer M> ? M : unknown {
//console.log((this.collection.first as any).module) //console.log((this.collection.first as any).module)
return this.model?.module ?? (this.collection as any).module; return this.model?.module ?? (this.collection as any).module;
} }
@ -23,7 +23,7 @@ export default class View<
return this.module.em; return this.module.em;
} }
protected get config(): TModel extends Model<infer M> ? (M extends IBaseModule<infer C> ? C : unknown) : unknown{ protected get config(): TModel extends Model<infer M> ? (M extends IBaseModule<infer C> ? C : unknown) : unknown {
return this.module.config as any return this.module.config as any;
} }
} }

12
src/canvas/index.ts
View File

@ -79,7 +79,7 @@ export default class CanvasModule extends Module<typeof defaults> {
* @private * @private
*/ */
constructor(em: EditorModel) { constructor(em: EditorModel) {
super(em, "Canvas", defaults) super(em, 'Canvas', defaults);
this.canvas = new Canvas(this); this.canvas = new Canvas(this);
this.model = this.canvas; this.model = this.canvas;
@ -87,9 +87,7 @@ export default class CanvasModule extends Module<typeof defaults> {
this.stopAutoscroll = this.stopAutoscroll.bind(this); this.stopAutoscroll = this.stopAutoscroll.bind(this);
return this; return this;
} }
init(){ init() {}
}
onLoad() { onLoad() {
this.model.init(); this.model.init();
@ -383,13 +381,13 @@ export default class CanvasModule extends Module<typeof defaults> {
return result; return result;
} }
canvasRectOffset(el: HTMLElement, pos: {top: number, left: number}, opts: any = {}) { canvasRectOffset(el: HTMLElement, pos: { top: number; left: number }, opts: any = {}) {
const getFrameElFromDoc = (doc: Document) => { const getFrameElFromDoc = (doc: Document) => {
const { defaultView } = doc; const { defaultView } = doc;
return defaultView?.frameElement as HTMLElement; return defaultView?.frameElement as HTMLElement;
}; };
const rectOff = (el: HTMLElement, top = 1, pos: {top: number, left: number}) => { const rectOff = (el: HTMLElement, top = 1, pos: { top: number; left: number }) => {
const zoom = this.em.getZoomDecimal(); const zoom = this.em.getZoomDecimal();
const side = top ? 'top' : 'left'; const side = top ? 'top' : 'left';
const doc = el.ownerDocument; const doc = el.ownerDocument;
@ -608,7 +606,7 @@ export default class CanvasModule extends Module<typeof defaults> {
* const coords = canvas.getCoords(); * const coords = canvas.getCoords();
* // { x: 100, y: 100 } * // { x: 100, y: 100 }
*/ */
getCoords(): {x: number, y: number} { getCoords(): { x: number; y: number } {
const { x, y } = this.canvas.attributes; const { x, y } = this.canvas.attributes;
return { x, y }; return { x, y };
} }

20
src/canvas/model/Canvas.ts
View File

@ -1,8 +1,8 @@
import { Model } from "../../abstract"; import { Model } from '../../abstract';
import { evPageSelect } from "../../pages"; import { evPageSelect } from '../../pages';
import Frames from "./Frames"; import Frames from './Frames';
import Page from "../../pages/model/Page"; import Page from '../../pages/model/Page';
import CanvasModule from ".."; import CanvasModule from '..';
export default class Canvas extends Model<CanvasModule> { export default class Canvas extends Model<CanvasModule> {
defaults() { defaults() {
@ -23,10 +23,10 @@ export default class Canvas extends Model<CanvasModule> {
constructor(module: CanvasModule) { constructor(module: CanvasModule) {
const { em, config } = module; const { em, config } = module;
const { scripts, styles } = config; const { scripts, styles } = config;
super(module, {scripts, styles}); super(module, { scripts, styles });
this.set("frames", new Frames(module)) this.set('frames', new Frames(module));
this.listenTo(this, "change:zoom", this.onZoomChange); this.listenTo(this, 'change:zoom', this.onZoomChange);
this.listenTo(em, "change:device", this.updateDevice); this.listenTo(em, 'change:device', this.updateDevice);
this.listenTo(em, evPageSelect, this._pageUpdated); this.listenTo(em, evPageSelect, this._pageUpdated);
} }
@ -47,7 +47,7 @@ export default class Canvas extends Model<CanvasModule> {
em.setSelected(); em.setSelected();
em.get('readyCanvas') && em.stopDefault(); // We have to stop before changing current frames em.get('readyCanvas') && em.stopDefault(); // We have to stop before changing current frames
//@ts-ignore //@ts-ignore
prev?.getFrames().map((frame) => frame.disable()); prev?.getFrames().map(frame => frame.disable());
this.set('frames', page.getFrames()); this.set('frames', page.getFrames());
} }

20
src/editor/index.ts
View File

@ -54,15 +54,15 @@
* ## Methods * ## Methods
* @module Editor * @module Editor
*/ */
import { EventHandler } from "backbone"; import { EventHandler } from 'backbone';
import { isUndefined } from "underscore"; import { isUndefined } from 'underscore';
import { IBaseModule } from "../abstract/Module"; import { IBaseModule } from '../abstract/Module';
import CanvasModule from "../canvas"; import CanvasModule from '../canvas';
import cash from "../utils/cash-dom"; import cash from '../utils/cash-dom';
import html from "../utils/html"; import html from '../utils/html';
import defaults from "./config/config"; import defaults from './config/config';
import EditorModel from "./model/Editor"; import EditorModel from './model/Editor';
import EditorView from "./view/EditorView"; import EditorView from './view/EditorView';
export default class EditorModule implements IBaseModule<typeof defaults> { export default class EditorModule implements IBaseModule<typeof defaults> {
constructor(config = {}, opts: any = {}) { constructor(config = {}, opts: any = {}) {
@ -113,7 +113,7 @@ export default class EditorModule implements IBaseModule<typeof defaults> {
get Panels(): PanelsModule { get Panels(): PanelsModule {
return this.em.get('Panels'); return this.em.get('Panels');
} }
get Canvas(): CanvasModule { get Canvas(): CanvasModule {
return this.em.get('Canvas'); return this.em.get('Canvas');
} }

94
src/editor/model/Editor.ts
View File

@ -1,11 +1,4 @@
import { import { isUndefined, isArray, contains, toArray, keys, bindAll } from 'underscore';
isUndefined,
isArray,
contains,
toArray,
keys,
bindAll,
} from 'underscore';
import Backbone from 'backbone'; import Backbone from 'backbone';
import $ from '../../utils/cash-dom'; import $ from '../../utils/cash-dom';
import Extender from '../../utils/extender'; import Extender from '../../utils/extender';
@ -138,34 +131,26 @@ export default class EditorModel extends Model {
} }
// Load modules // Load modules
deps.forEach((name) => this.loadModule(name)); deps.forEach(name => this.loadModule(name));
ts_deps.forEach((name) => this.tsLoadModule(name)); ts_deps.forEach(name => this.tsLoadModule(name));
this.on('change:componentHovered', this.componentHovered, this); this.on('change:componentHovered', this.componentHovered, this);
this.on('change:changesCount', this.updateChanges, this); this.on('change:changesCount', this.updateChanges, this);
this.on('change:readyLoad change:readyCanvas', this._checkReady, this); this.on('change:readyLoad change:readyCanvas', this._checkReady, this);
toLog.forEach((e) => this.listenLog(e)); toLog.forEach(e => this.listenLog(e));
// Deprecations // Deprecations
[{ from: 'change:selectedComponent', to: 'component:toggled' }].forEach( [{ from: 'change:selectedComponent', to: 'component:toggled' }].forEach(event => {
(event) => { const eventFrom = event.from;
const eventFrom = event.from; const eventTo = event.to;
const eventTo = event.to; this.listenTo(this, eventFrom, (...args) => {
this.listenTo(this, eventFrom, (...args) => { this.trigger(eventTo, ...args);
this.trigger(eventTo, ...args); this.logWarning(`The event '${eventFrom}' is deprecated, replace it with '${eventTo}'`);
this.logWarning( });
`The event '${eventFrom}' is deprecated, replace it with '${eventTo}'` });
);
});
}
);
} }
_checkReady() { _checkReady() {
if ( if (this.get('readyLoad') && this.get('readyCanvas') && !this.get('ready')) {
this.get('readyLoad') &&
this.get('readyCanvas') &&
!this.get('ready')
) {
this.set('ready', true); this.set('ready', true);
} }
} }
@ -203,11 +188,11 @@ export default class EditorModel extends Model {
const sm = this.get('StorageManager'); const sm = this.get('StorageManager');
// In `onLoad`, the module will try to load the data from its configurations. // In `onLoad`, the module will try to load the data from its configurations.
this.toLoad.forEach((mdl) => mdl.onLoad()); this.toLoad.forEach(mdl => mdl.onLoad());
// Stuff to do post load // Stuff to do post load
const postLoad = () => { const postLoad = () => {
this.modules.forEach((mdl) => mdl.postLoad && mdl.postLoad(this)); this.modules.forEach(mdl => mdl.postLoad && mdl.postLoad(this));
this.set('readyLoad', 1); this.set('readyLoad', 1);
}; };
@ -238,7 +223,7 @@ export default class EditorModel extends Model {
undoManager: false, undoManager: false,
}); });
// We only need to load a few modules // We only need to load a few modules
['PageManager', 'Canvas'].forEach((key) => shallow.get(key).onLoad()); ['PageManager', 'Canvas'].forEach(key => shallow.get(key).onLoad());
this.set('shallow', shallow); this.set('shallow', shallow);
} }
@ -259,7 +244,7 @@ export default class EditorModel extends Model {
} }
if (stm.isAutosave() && changes >= stm.getStepsBeforeSave()) { if (stm.isAutosave() && changes >= stm.getStepsBeforeSave()) {
this.store().catch((err) => this.logError(err)); this.store().catch(err => this.logError(err));
} }
} }
@ -274,9 +259,7 @@ export default class EditorModel extends Model {
const Module = moduleName.default || moduleName; const Module = moduleName.default || moduleName;
const Mod = new Module(this); const Mod = new Module(this);
const name = Mod.name.charAt(0).toLowerCase() + Mod.name.slice(1); const name = Mod.name.charAt(0).toLowerCase() + Mod.name.slice(1);
const cfgParent = !isUndefined(config[name]) const cfgParent = !isUndefined(config[name]) ? config[name] : config[Mod.name];
? config[name]
: config[Mod.name];
const cfg = cfgParent === true ? {} : cfgParent || {}; const cfg = cfgParent === true ? {} : cfgParent || {};
cfg.pStylePrefix = config.pStylePrefix || ''; cfg.pStylePrefix = config.pStylePrefix || '';
@ -346,13 +329,7 @@ export default class EditorModel extends Model {
* */ * */
handleUpdates(model: any, val: any, opt: any = {}) { handleUpdates(model: any, val: any, opt: any = {}) {
// Component has been added temporarily - do not update storage or record changes // Component has been added temporarily - do not update storage or record changes
if ( if (this.__skip || opt.temporary || opt.noCount || opt.avoidStore || !this.get('ready')) {
this.__skip ||
opt.temporary ||
opt.noCount ||
opt.avoidStore ||
!this.get('ready')
) {
return; return;
} }
@ -410,7 +387,7 @@ export default class EditorModel extends Model {
const { event } = opts; const { event } = opts;
const ctrlKey = event && (event.ctrlKey || event.metaKey); const ctrlKey = event && (event.ctrlKey || event.metaKey);
const { shiftKey } = event || {}; const { shiftKey } = event || {};
const els = (isArray(el) ? el : [el]).map((el) => getModel(el, $)); const els = (isArray(el) ? el : [el]).map(el => getModel(el, $));
const selected = this.getSelectedAll(); const selected = this.getSelectedAll();
const mltSel = this.getConfig().multipleSelection; const mltSel = this.getConfig().multipleSelection;
let added; let added;
@ -418,9 +395,9 @@ export default class EditorModel extends Model {
// If an array is passed remove all selected // If an array is passed remove all selected
// expect those yet to be selected // expect those yet to be selected
const multiple = isArray(el); const multiple = isArray(el);
multiple && this.removeSelected(selected.filter((s) => !contains(els, s))); multiple && this.removeSelected(selected.filter(s => !contains(els, s)));
els.forEach((el) => { els.forEach(el => {
let model = getModel(el, undefined); let model = getModel(el, undefined);
if (model) { if (model) {
@ -430,8 +407,7 @@ export default class EditorModel extends Model {
if (!model.get('selectable') || opts.abort) { if (!model.get('selectable') || opts.abort) {
if (opts.useValid) { if (opts.useValid) {
let parent = model.parent(); let parent = model.parent();
while (parent && !parent.get('selectable')) while (parent && !parent.get('selectable')) parent = parent.parent();
parent = parent.parent();
model = parent; model = parent;
} else { } else {
return; return;
@ -449,7 +425,7 @@ export default class EditorModel extends Model {
let min: number | undefined, max: number | undefined; let min: number | undefined, max: number | undefined;
// Fin min and max siblings // Fin min and max siblings
this.getSelectedAll().forEach((sel) => { this.getSelectedAll().forEach(sel => {
const selColl = sel.collection; const selColl = sel.collection;
const selIndex = sel.index(); const selIndex = sel.index();
if (selColl === coll) { if (selColl === coll) {
@ -480,7 +456,7 @@ export default class EditorModel extends Model {
return this.addSelected(model); return this.addSelected(model);
} }
!multiple && this.removeSelected(selected.filter((s) => s !== model)); !multiple && this.removeSelected(selected.filter(s => s !== model));
this.addSelected(model, opts); this.addSelected(model, opts);
added = model; added = model;
}); });
@ -496,7 +472,7 @@ export default class EditorModel extends Model {
const model = getModel(el, $); const model = getModel(el, $);
const models = isArray(model) ? model : [model]; const models = isArray(model) ? model : [model];
models.forEach((model) => { models.forEach(model => {
if (model && !model.get('selectable')) return; if (model && !model.get('selectable')) return;
const { selected } = this; const { selected } = this;
opts.forceChange && this.removeSelected(model, opts); opts.forceChange && this.removeSelected(model, opts);
@ -525,7 +501,7 @@ export default class EditorModel extends Model {
const model = getModel(el, $); const model = getModel(el, $);
const models = isArray(model) ? model : [model]; const models = isArray(model) ? model : [model];
models.forEach((model) => { models.forEach(model => {
if (this.selected.hasComponent(model)) { if (this.selected.hasComponent(model)) {
this.removeSelected(model, opts); this.removeSelected(model, opts);
} else { } else {
@ -681,9 +657,7 @@ export default class EditorModel extends Model {
const config = this.config; const config = this.config;
const { optsCss } = config; const { optsCss } = config;
const avoidProt = opts.avoidProtected; const avoidProt = opts.avoidProtected;
const keepUnusedStyles = !isUndefined(opts.keepUnusedStyles) const keepUnusedStyles = !isUndefined(opts.keepUnusedStyles) ? opts.keepUnusedStyles : config.keepUnusedStyles;
? opts.keepUnusedStyles
: config.keepUnusedStyles;
const cssc = this.get('CssComposer'); const cssc = this.get('CssComposer');
const wrp = opts.component || this.get('DomComponents').getComponent(); const wrp = opts.component || this.get('DomComponents').getComponent();
const protCss = !avoidProt ? config.protectedCss : ''; const protCss = !avoidProt ? config.protectedCss : '';
@ -735,7 +709,7 @@ export default class EditorModel extends Model {
const editingCmp = this.getEditing(); const editingCmp = this.getEditing();
editingCmp && editingCmp.trigger('sync:content', { noCount: true }); editingCmp && editingCmp.trigger('sync:content', { noCount: true });
this.storables.forEach((m) => { this.storables.forEach(m => {
result = { ...result, ...m.store(1) }; result = { ...result, ...m.store(1) };
}); });
return JSON.parse(JSON.stringify(result)); return JSON.parse(JSON.stringify(result));
@ -743,8 +717,8 @@ export default class EditorModel extends Model {
loadData(data = {}) { loadData(data = {}) {
if (!isEmptyObj(data)) { if (!isEmptyObj(data)) {
this.storables.forEach((module) => module.clear()); this.storables.forEach(module => module.clear());
this.storables.forEach((module) => module.load(data)); this.storables.forEach(module => module.load(data));
} }
return data; return data;
} }
@ -828,7 +802,7 @@ export default class EditorModel extends Model {
} }
setCurrentFrame(frameView?: FrameView) { setCurrentFrame(frameView?: FrameView) {
return this.set("currentFrame", frameView); return this.set('currentFrame', frameView);
} }
getCurrentFrame(): FrameView { getCurrentFrame(): FrameView {
@ -896,13 +870,13 @@ export default class EditorModel extends Model {
this.modules this.modules
.slice() .slice()
.reverse() .reverse()
.forEach((mod) => mod.destroy()); .forEach(mod => mod.destroy());
view && view.remove(); view && view.remove();
this.clear({ silent: true }); this.clear({ silent: true });
this.destroyed = true; this.destroyed = true;
['_config', 'view', '_previousAttributes', '_events', '_listeners'].forEach( ['_config', 'view', '_previousAttributes', '_events', '_listeners'].forEach(
//@ts-ignore //@ts-ignore
(i) => (this[i] = {}) i => (this[i] = {})
); );
editors.splice(editors.indexOf(editor), 1); editors.splice(editors.indexOf(editor), 1);
//@ts-ignore //@ts-ignore

7
src/pages/model/Page.ts
View File

@ -21,11 +21,12 @@ export default class Page extends Model {
if (!props.frames) { if (!props.frames) {
defFrame.component = props.component; defFrame.component = props.component;
defFrame.styles = props.styles; defFrame.styles = props.styles;
['component', 'styles'].map((i) => this.unset(i)); ['component', 'styles'].map(i => this.unset(i));
} }
const frms: any[] = props.frames || [defFrame]; const frms: any[] = props.frames || [defFrame];
const frames = new Frames(em.get("Canvas"), const frames = new Frames(
frms?.map((model) => new Frame(em.get("Canvas"), model)) em.get('Canvas'),
frms?.map(model => new Frame(em.get('Canvas'), model))
); );
frames.page = this; frames.page = this;
this.set('frames', frames); this.set('frames', frames);

Write Preview
Loading…
Cancel
Save