From f993a8a4ba04528e3003638275e045c5af47c1ae Mon Sep 17 00:00:00 2001 From: Alex Date: Wed, 27 Apr 2022 18:51:33 +0200 Subject: [PATCH 1/8] Convert Canvas to ts --- src/canvas/model/Canvas.js | 62 ------ src/canvas/model/Canvas.ts | 72 +++++++ src/editor/model/Editor.ts | 390 ++++++++++++++++++++----------------- 3 files changed, 280 insertions(+), 244 deletions(-) delete mode 100644 src/canvas/model/Canvas.js create mode 100644 src/canvas/model/Canvas.ts diff --git a/src/canvas/model/Canvas.js b/src/canvas/model/Canvas.js deleted file mode 100644 index d5fccb49b..000000000 --- a/src/canvas/model/Canvas.js +++ /dev/null @@ -1,62 +0,0 @@ -import { Model } from '../../common'; -import { evPageSelect } from '../../pages'; -import Frames from './Frames'; - -export default class Canvas extends Model { - defaults() { - return { - frame: '', - frames: '', - rulers: false, - zoom: 100, - x: 0, - y: 0, - // Scripts to apply on all frames - scripts: [], - // Styles to apply on all frames - styles: [], - }; - } - - initialize(props, config = {}) { - const { em } = config; - this.config = config; - this.em = em; - this.set('frames', new Frames()); - this.listenTo(this, 'change:zoom', this.onZoomChange); - this.listenTo(em, 'change:device', this.updateDevice); - this.listenTo(em, evPageSelect, this._pageUpdated); - } - - init() { - const { em } = this; - const mainPage = em.get('PageManager').getMain(); - const frame = mainPage.getMainFrame(); - this.set('frames', mainPage.getFrames()); - this.updateDevice({ frame }); - } - - _pageUpdated(page, prev) { - const { em } = this; - em.setSelected(); - em.get('readyCanvas') && em.stopDefault(); // We have to stop before changing current frames - prev && prev.getFrames().map(frame => frame.disable()); - this.set('frames', page.getFrames()); - } - - updateDevice(opts = {}) { - const { em } = this; - const device = em.getDeviceModel(); - const model = opts.frame || em.getCurrentFrameModel(); - - if (model && device) { - const { width, height } = device.attributes; - model.set({ width, height }, { noUndo: 1 }); - } - } - - onZoomChange() { - const zoom = this.get('zoom'); - zoom < 1 && this.set('zoom', 1); - } -} diff --git a/src/canvas/model/Canvas.ts b/src/canvas/model/Canvas.ts new file mode 100644 index 000000000..f44f9240c --- /dev/null +++ b/src/canvas/model/Canvas.ts @@ -0,0 +1,72 @@ +import { Model } from "../../common"; +import Backbone from "backbone"; +import { evPageSelect } from "../../pages"; +import Frames from "./Frames"; +import EditorModel from "../../editor/model/Editor"; +import Page from "../../pages/model/Page"; + +export default class Canvas extends Backbone.Model { + defaults() { + return { + frame: "", + frames: "", + rulers: false, + zoom: 100, + x: 0, + y: 0, + // Scripts to apply on all frames + scripts: [], + // Styles to apply on all frames + styles: [], + }; + } + em: EditorModel; + config: any; + + constructor(props: any, config: any = {}) { + super(props); + const { em } = config; + this.config = config; + this.em = em; + this.set("frames", new Frames()); + this.listenTo(this, "change:zoom", this.onZoomChange); + this.listenTo(em, "change:device", this.updateDevice); + this.listenTo(em, evPageSelect, this._pageUpdated); + } + get frames(): Frames { + return this.get("frames"); + } + + init() { + const { em } = this; + const mainPage = em.get("PageManager").getMain(); + const frame = mainPage.getMainFrame(); + this.set("frames", mainPage.getFrames()); + this.updateDevice({ frame }); + } + + _pageUpdated(page: Page, prev?: Page) { + const { em } = this; + em.setSelected(); + em.get("readyCanvas") && em.stopDefault(); // We have to stop before changing current frames + //@ts-ignore + prev?.getFrames().map((frame) => frame.disable()); + this.set("frames", page.getFrames()); + } + + updateDevice(opts: any = {}) { + const { em } = this; + const device = em.getDeviceModel(); + const model = opts.frame || em.getCurrentFrameModel(); + + if (model && device) { + const { width, height } = device.attributes; + model.set({ width, height }, { noUndo: 1 }); + } + } + + onZoomChange() { + const zoom = this.get("zoom"); + zoom < 1 && this.set("zoom", 1); + } +} diff --git a/src/editor/model/Editor.ts b/src/editor/model/Editor.ts index f0806b0fd..fa4892e23 100644 --- a/src/editor/model/Editor.ts +++ b/src/editor/model/Editor.ts @@ -1,45 +1,51 @@ -import { isUndefined, isArray, contains, toArray, keys, bindAll } from 'underscore'; -import Backbone from 'backbone'; -import $ from '../../utils/cash-dom'; -import Extender from '../../utils/extender'; -import { getModel, hasWin, isEmptyObj } from '../../utils/mixins'; -import { Model } from '../../common'; -import Selected from './Selected'; -import FrameView from '../../canvas/view/FrameView'; -import EditorModule from '..'; -import EditorView from '../view/EditorView'; -import { IModule } from '../../abstract/Module'; +import { + isUndefined, + isArray, + contains, + toArray, + keys, + bindAll, +} from "underscore"; +import Backbone from "backbone"; +import $ from "../../utils/cash-dom"; +import Extender from "../../utils/extender"; +import { getModel, hasWin, isEmptyObj } from "../../utils/mixins"; +import { Model } from "../../common"; +import Selected from "./Selected"; +import FrameView from "../../canvas/view/FrameView"; +import EditorModule from ".."; +import EditorView from "../view/EditorView"; +import { IModule } from "../../abstract/Module"; //@ts-ignore Backbone.$ = $; const deps = [ - require('utils'), - require('i18n'), - require('keymaps'), - require('undo_manager'), - require('storage_manager'), - require('device_manager'), - require('parser'), - require('style_manager'), - require('selector_manager'), - require('modal_dialog'), - require('code_manager'), - require('panels'), - require('rich_text_editor'), - require('asset_manager'), - require('css_composer'), - require('pages'), - require('trait_manager'), - require('dom_components'), - require('navigator'), - require('canvas'), - require('commands'), - require('block_manager'), + require("utils"), + require("i18n"), + require("keymaps"), + require("undo_manager"), + require("storage_manager"), + require("device_manager"), + require("parser"), + require("style_manager"), + require("selector_manager"), + require("modal_dialog"), + require("code_manager"), + require("panels"), + require("rich_text_editor"), + require("asset_manager"), + require("css_composer"), + require("pages"), + require("trait_manager"), + require("dom_components"), + require("navigator"), + require("canvas"), + require("commands"), + require("block_manager"), ]; -const ts_deps: any[] = [ -]; +const ts_deps: any[] = []; Extender({ //@ts-ignore @@ -68,7 +74,7 @@ export default class EditorModel extends Model { modules: [], toLoad: [], opened: {}, - device: '', + device: "", }; } @@ -77,36 +83,35 @@ export default class EditorModel extends Model { destroyed = false; _config: any; attrsOrig: any; -timedInterval?: number; + timedInterval?: number; updateItr?: number; - view?: EditorView - + view?: EditorView; - get storables(): any[]{ - return this.get('storables') + get storables(): any[] { + return this.get("storables"); } - get modules(): IModule[]{ - return this.get('modules') + get modules(): IModule[] { + return this.get("modules"); } - get toLoad(): any[]{ - return this.get('toLoad') + get toLoad(): any[] { + return this.get("toLoad"); } constructor(conf = {}) { - super() + super(); this._config = conf; const { config } = this; - this.set('Config', conf); - this.set('modules', []); - this.set('toLoad', []); - this.set('storables', []); - this.set('selected', new Selected()); - this.set('dmode', config.dragMode); + this.set("Config", conf); + this.set("modules", []); + this.set("toLoad", []); + this.set("storables", []); + this.set("selected", new Selected()); + this.set("dmode", config.dragMode); const { el, log } = config; const toLog = log === true ? keys(logs) : isArray(log) ? log : []; - bindAll(this, 'initBaseColorPicker'); + bindAll(this, "initBaseColorPicker"); if (el && config.fromElement) { config.components = el.innerHTML; @@ -117,7 +122,7 @@ timedInterval?: number; res[next.nodeName] = next.nodeValue; return res; }, {}) - : ''; + : ""; // Move components to pages if (config.components && !config.pageManager) { @@ -125,27 +130,35 @@ timedInterval?: number; } // Load modules - deps.forEach(name => this.loadModule(name)); - ts_deps.forEach(name => this.tsLoadModule(name)); - this.on('change:componentHovered', this.componentHovered, this); - this.on('change:changesCount', this.updateChanges, this); - this.on('change:readyLoad change:readyCanvas', this._checkReady, this); - toLog.forEach(e => this.listenLog(e)); + deps.forEach((name) => this.loadModule(name)); + ts_deps.forEach((name) => this.tsLoadModule(name)); + this.on("change:componentHovered", this.componentHovered, this); + this.on("change:changesCount", this.updateChanges, this); + this.on("change:readyLoad change:readyCanvas", this._checkReady, this); + toLog.forEach((e) => this.listenLog(e)); // Deprecations - [{ from: 'change:selectedComponent', to: 'component:toggled' }].forEach(event => { - const eventFrom = event.from; - const eventTo = event.to; - this.listenTo(this, eventFrom, (...args) => { - this.trigger(eventTo, ...args); - this.logWarning(`The event '${eventFrom}' is deprecated, replace it with '${eventTo}'`); - }); - }); + [{ from: "change:selectedComponent", to: "component:toggled" }].forEach( + (event) => { + const eventFrom = event.from; + const eventTo = event.to; + this.listenTo(this, eventFrom, (...args) => { + this.trigger(eventTo, ...args); + this.logWarning( + `The event '${eventFrom}' is deprecated, replace it with '${eventTo}'` + ); + }); + } + ); } _checkReady() { - if (this.get('readyLoad') && this.get('readyCanvas') && !this.get('ready')) { - this.set('ready', true); + if ( + this.get("readyLoad") && + this.get("readyCanvas") && + !this.get("ready") + ) { + this.set("ready", true); } } @@ -179,15 +192,15 @@ timedInterval?: number; */ loadOnStart() { const { projectData, headless } = this.config; - const sm = this.get('StorageManager'); + const sm = this.get("StorageManager"); // 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 const postLoad = () => { - this.modules.forEach(mdl => mdl.postLoad && mdl.postLoad(this)); - this.set('readyLoad', 1); + this.modules.forEach((mdl) => mdl.postLoad && mdl.postLoad(this)); + this.set("readyLoad", 1); }; if (headless) { @@ -217,8 +230,8 @@ timedInterval?: number; undoManager: false, }); // We only need to load a few modules - ['PageManager', 'Canvas'].forEach(key => shallow.get(key).onLoad()); - this.set('shallow', shallow); + ["PageManager", "Canvas"].forEach((key) => shallow.get(key).onLoad()); + this.set("shallow", shallow); } /** @@ -227,18 +240,18 @@ timedInterval?: number; * @private */ updateChanges() { - const stm = this.get('StorageManager'); + const stm = this.get("StorageManager"); const changes = this.getDirtyCount(); this.updateItr && clearTimeout(this.updateItr); //@ts-ignore - this.updateItr = setTimeout(() => this.trigger('update')); + this.updateItr = setTimeout(() => this.trigger("update")); if (this.config.noticeOnUnload) { - window.onbeforeunload = changes ? e => 1 : null; + window.onbeforeunload = changes ? (e: any) => 1 : null; } if (stm.isAutosave() && changes >= stm.getStepsBeforeSave()) { - this.store().catch(err => this.logError(err)); + this.store().catch((err) => this.logError(err)); } } @@ -253,9 +266,11 @@ timedInterval?: number; const Module = moduleName.default || moduleName; const Mod = new Module(); const name = Mod.name.charAt(0).toLowerCase() + Mod.name.slice(1); - const cfgParent = !isUndefined(config[name]) ? config[name] : config[Mod.name]; + const cfgParent = !isUndefined(config[name]) + ? config[name] + : config[Mod.name]; const cfg = cfgParent === true ? {} : cfgParent || {}; - cfg.pStylePrefix = config.pStylePrefix || ''; + cfg.pStylePrefix = config.pStylePrefix || ""; if (!isUndefined(cfgParent) && !cfgParent) { cfg._disable = 1; @@ -281,7 +296,7 @@ timedInterval?: number; * @return {this} * @private */ - tsLoadModule(moduleName: any) { + tsLoadModule(moduleName: any) { const Module = moduleName.default || moduleName; const Mod = new Module(this); @@ -306,11 +321,11 @@ timedInterval?: number; this.initialize(opts); this.destroyed = false; } - this.set('Editor', editor); + this.set("Editor", editor); } getEditor() { - return this.get('Editor'); + return this.get("Editor"); } /** @@ -323,7 +338,13 @@ timedInterval?: number; * */ handleUpdates(model: any, val: any, opt: any = {}) { // Component has been added temporarily - do not update storage or record changes - if (this.__skip || opt.temporary || opt.noCount || opt.avoidStore || !this.get('ready')) { + if ( + this.__skip || + opt.temporary || + opt.noCount || + opt.avoidStore || + !this.get("ready") + ) { return; } @@ -332,7 +353,7 @@ timedInterval?: number; this.timedInterval = setTimeout(() => { const curr = this.getDirtyCount() || 0; const { unset, ...opts } = opt; - this.set('changesCount', curr + 1, opts); + this.set("changesCount", curr + 1, opts); }, 0); } @@ -348,9 +369,9 @@ timedInterval?: number; * @private * */ componentHovered(editor: any, component: any, options: any) { - const prev = this.previous('componentHovered'); - prev && this.trigger('component:unhovered', prev, options); - component && this.trigger('component:hovered', component, options); + const prev = this.previous("componentHovered"); + prev && this.trigger("component:unhovered", prev, options); + component && this.trigger("component:hovered", component, options); } /** @@ -359,7 +380,7 @@ timedInterval?: number; * @public */ getSelected() { - return this.get('selected').lastComponent(); + return this.get("selected").lastComponent(); } /** @@ -368,7 +389,7 @@ timedInterval?: number; * @public */ getSelectedAll(): any[] { - return this.get('selected').allComponents(); + return this.get("selected").allComponents(); } /** @@ -377,31 +398,32 @@ timedInterval?: number; * @param {Object} [opts={}] Options, optional * @public */ - setSelected(el: any, opts: any = {}) { + setSelected(el?: any, opts: any = {}) { const { event } = opts; const ctrlKey = event && (event.ctrlKey || event.metaKey); const { shiftKey } = event || {}; const multiple = isArray(el); - const els = (multiple ? el : [el]).map(el => getModel(el, $)); + const els = (isArray(el) ? el : [el]).map((el) => getModel(el, $)); const selected = this.getSelectedAll(); const mltSel = this.getConfig().multipleSelection; let added; // If an array is passed remove all selected // expect those yet to be selected - 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); if (model) { - this.trigger('component:select:before', model, opts); + this.trigger("component:select:before", model, opts); // Check for valid selectable - if (!model.get('selectable') || opts.abort) { + if (!model.get("selectable") || opts.abort) { if (opts.useValid) { let parent = model.parent(); - while (parent && !parent.get('selectable')) parent = parent.parent(); + while (parent && !parent.get("selectable")) + parent = parent.parent(); model = parent; } else { return; @@ -413,13 +435,13 @@ timedInterval?: number; if (ctrlKey && mltSel) { return this.toggleSelected(model); } else if (shiftKey && mltSel) { - this.clearSelection(this.get('Canvas').getWindow()); + this.clearSelection(this.get("Canvas").getWindow()); const coll = model.collection; const index = model.index(); - let min: number|undefined, max: number|undefined; + let min: number | undefined, max: number | undefined; // Fin min and max siblings - this.getSelectedAll().forEach(sel => { + this.getSelectedAll().forEach((sel) => { const selColl = sel.collection; const selIndex = sel.index(); if (selColl === coll) { @@ -450,7 +472,7 @@ timedInterval?: number; return this.addSelected(model); } - !multiple && this.removeSelected(selected.filter(s => s !== model)); + !multiple && this.removeSelected(selected.filter((s) => s !== model)); this.addSelected(model, opts); added = model; }); @@ -466,12 +488,12 @@ timedInterval?: number; const model = getModel(el, $); const models = isArray(model) ? model : [model]; - models.forEach(model => { - if (model && !model.get('selectable')) return; - const selected = this.get('selected'); + models.forEach((model) => { + if (model && !model.get("selectable")) return; + const selected = this.get("selected"); opts.forceChange && this.removeSelected(model, opts); selected.addComponent(model, opts); - model && this.trigger('component:select', model, opts); + model && this.trigger("component:select", model, opts); }); } @@ -482,7 +504,7 @@ timedInterval?: number; * @public */ removeSelected(el: any, opts = {}) { - this.get('selected').removeComponent(getModel(el, $), opts); + this.get("selected").removeComponent(getModel(el, $), opts); } /** @@ -495,8 +517,8 @@ timedInterval?: number; const model = getModel(el, $); const models = isArray(model) ? model : [model]; - models.forEach(model => { - if (this.get('selected').hasComponent(model)) { + models.forEach((model) => { + if (this.get("selected").hasComponent(model)) { this.removeSelected(model, opts); } else { this.addSelected(model, opts); @@ -511,21 +533,21 @@ timedInterval?: number; * @private */ setHovered(el: any, opts: any = {}) { - if (!el) return this.set('componentHovered', ''); + if (!el) return this.set("componentHovered", ""); - const ev = 'component:hover'; + const ev = "component:hover"; let model = getModel(el, undefined); if (!model) return; - opts.forceChange && this.set('componentHovered', ''); + opts.forceChange && this.set("componentHovered", ""); this.trigger(`${ev}:before`, model, opts); // Check for valid hoverable - if (!model.get('hoverable')) { + if (!model.get("hoverable")) { if (opts.useValid && !opts.abort) { let parent = model && model.parent(); - while (parent && !parent.get('hoverable')) parent = parent.parent(); + while (parent && !parent.get("hoverable")) parent = parent.parent(); model = parent; } else { return; @@ -533,13 +555,13 @@ timedInterval?: number; } if (!opts.abort) { - this.set('componentHovered', model, opts); + this.set("componentHovered", model, opts); this.trigger(ev, model, opts); } } getHovered() { - return this.get('componentHovered'); + return this.get("componentHovered"); } /** @@ -550,7 +572,7 @@ timedInterval?: number; * @public */ setComponents(components: any, opt = {}) { - return this.get('DomComponents').setComponents(components, opt); + return this.get("DomComponents").setComponents(components, opt); } /** @@ -559,13 +581,13 @@ timedInterval?: number; * @private */ getComponents() { - var cmp = this.get('DomComponents'); - var cm = this.get('CodeManager'); + var cmp = this.get("DomComponents"); + var cm = this.get("CodeManager"); if (!cmp || !cm) return; var wrp = cmp.getComponents(); - return cm.getCode(wrp, 'json'); + return cm.getCode(wrp, "json"); } /** @@ -576,7 +598,7 @@ timedInterval?: number; * @public */ setStyle(style: any, opt = {}) { - const cssc = this.get('CssComposer'); + const cssc = this.get("CssComposer"); cssc.clear(opt); cssc.getAll().add(style, opt); return this; @@ -599,7 +621,7 @@ timedInterval?: number; * @private */ getStyle() { - return this.get('CssComposer').getAll(); + return this.get("CssComposer").getAll(); } /** @@ -608,7 +630,7 @@ timedInterval?: number; * @returns {this} */ setState(value: string) { - this.set('state', value); + this.set("state", value); return this; } @@ -617,7 +639,7 @@ timedInterval?: number; * @returns {String} */ getState() { - return this.get('state') || ''; + return this.get("state") || ""; } /** @@ -629,15 +651,15 @@ timedInterval?: number; getHtml(opts: any = {}) { const { config } = this; const { optsHtml } = config; - const js = config.jsInHtml ? this.getJs(opts) : ''; - const cmp = opts.component || this.get('DomComponents').getComponent(); + const js = config.jsInHtml ? this.getJs(opts) : ""; + const cmp = opts.component || this.get("DomComponents").getComponent(); let html = cmp - ? this.get('CodeManager').getCode(cmp, 'html', { + ? this.get("CodeManager").getCode(cmp, "html", { ...optsHtml, ...opts, }) - : ''; - html += js ? `` : ''; + : ""; + html += js ? `` : ""; return html; } @@ -651,19 +673,21 @@ timedInterval?: number; const config = this.config; const { optsCss } = config; const avoidProt = opts.avoidProtected; - const keepUnusedStyles = !isUndefined(opts.keepUnusedStyles) ? opts.keepUnusedStyles : config.keepUnusedStyles; - const cssc = this.get('CssComposer'); - const wrp = opts.component || this.get('DomComponents').getComponent(); - const protCss = !avoidProt ? config.protectedCss : ''; + const keepUnusedStyles = !isUndefined(opts.keepUnusedStyles) + ? opts.keepUnusedStyles + : config.keepUnusedStyles; + const cssc = this.get("CssComposer"); + const wrp = opts.component || this.get("DomComponents").getComponent(); + const protCss = !avoidProt ? config.protectedCss : ""; const css = wrp && - this.get('CodeManager').getCode(wrp, 'css', { + this.get("CodeManager").getCode(wrp, "css", { cssc, keepUnusedStyles, ...optsCss, ...opts, }); - return wrp ? (opts.json ? css : protCss + css) : ''; + return wrp ? (opts.json ? css : protCss + css) : ""; } /** @@ -672,8 +696,8 @@ timedInterval?: number; * @public */ getJs(opts: any = {}) { - var wrp = opts.component || this.get('DomComponents').getWrapper(); - return wrp ? this.get('CodeManager').getCode(wrp, 'js').trim() : ''; + var wrp = opts.component || this.get("DomComponents").getWrapper(); + return wrp ? this.get("CodeManager").getCode(wrp, "js").trim() : ""; } /** @@ -682,7 +706,7 @@ timedInterval?: number; */ async store(options?: any) { const data = this.storeData(); - await this.get('StorageManager').store(data, options); + await this.get("StorageManager").store(data, options); this.clearDirtyCount(); return data; } @@ -692,7 +716,7 @@ timedInterval?: number; * @public */ async load(options?: any) { - const result = await this.get('StorageManager').load(options); + const result = await this.get("StorageManager").load(options); this.loadData(result); return result; } @@ -701,9 +725,9 @@ timedInterval?: number; let result = {}; // Sync content if there is an active RTE 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) }; }); return JSON.parse(JSON.stringify(result)); @@ -711,8 +735,8 @@ timedInterval?: number; loadData(data = {}) { if (!isEmptyObj(data)) { - this.storables.forEach(module => module.clear()); - this.storables.forEach(module => module.load(data)); + this.storables.forEach((module) => module.clear()); + this.storables.forEach((module) => module.load(data)); } return data; } @@ -723,8 +747,8 @@ timedInterval?: number; * @private */ getDeviceModel() { - var name = this.get('device'); - return this.get('DeviceManager').get(name); + var name = this.get("device"); + return this.get("DeviceManager").get(name); } /** @@ -733,7 +757,7 @@ timedInterval?: number; * @private */ runDefault(opts = {}) { - var command = this.get('Commands').get(this.config.defaultCommand); + var command = this.get("Commands").get(this.config.defaultCommand); if (!command || this.defaultRunning) return; command.stop(this, this, opts); command.run(this, this, opts); @@ -746,7 +770,7 @@ timedInterval?: number; * @private */ stopDefault(opts = {}) { - const commands = this.get('Commands'); + const commands = this.get("Commands"); const command = commands.get(this.config.defaultCommand); if (!command || !this.defaultRunning) return; command.stop(this, this, opts); @@ -758,9 +782,9 @@ timedInterval?: number; * @public */ refreshCanvas(opts: any = {}) { - this.set('canvasOffset', null); - this.set('canvasOffset', this.get('Canvas').getOffset()); - opts.tools && this.trigger('canvas:updateTools'); + this.set("canvasOffset", null); + this.set("canvasOffset", this.get("Canvas").getOffset()); + opts.tools && this.trigger("canvas:updateTools"); } /** @@ -783,8 +807,8 @@ timedInterval?: number; const device = this.getDeviceModel(); const condition = config.mediaCondition; const preview = config.devicePreviewMode; - const width = device && device.get('widthMedia'); - return device && width && !preview ? `(${condition}: ${width})` : ''; + const width = device && device.get("widthMedia"); + return device && width && !preview ? `(${condition}: ${width})` : ""; } /** @@ -792,15 +816,15 @@ timedInterval?: number; * @return {Component} */ getWrapper() { - return this.get('DomComponents').getWrapper(); + return this.get("DomComponents").getWrapper(); } setCurrentFrame(frameView: FrameView) { - return this.set('currentFrame', frameView); + return this.set("currentFrame", frameView); } getCurrentFrame(): FrameView { - return this.get('currentFrame'); + return this.get("currentFrame"); } getCurrentFrameModel() { @@ -809,7 +833,7 @@ timedInterval?: number; getIcon(icon: string) { const icons = this.config.icons || {}; - return icons[icon] || ''; + return icons[icon] || ""; } /** @@ -818,27 +842,27 @@ timedInterval?: number; * @return {number} */ getDirtyCount() { - return this.get('changesCount'); + return this.get("changesCount"); } clearDirtyCount() { - return this.set('changesCount', 0); + return this.set("changesCount", 0); } getZoomDecimal() { - return this.get('Canvas').getZoomDecimal(); + return this.get("Canvas").getZoomDecimal(); } getZoomMultiplier() { - return this.get('Canvas').getZoomMultiplier(); + return this.get("Canvas").getZoomMultiplier(); } setDragMode(value: string) { - return this.set('dmode', value); + return this.set("dmode", value); } t(...args: any[]) { - const i18n = this.get('I18n'); + const i18n = this.get("I18n"); return i18n?.t(...args); } @@ -847,7 +871,7 @@ timedInterval?: number; * @returns {Boolean} */ inAbsoluteMode() { - return this.get('dmode') === 'absolute'; + return this.get("dmode") === "absolute"; } /** @@ -857,41 +881,43 @@ timedInterval?: number; const { config, view } = this; const editor = this.getEditor(); const { editors = [] } = config.grapesjs || {}; - const shallow = this.get('shallow'); + const shallow = this.get("shallow"); shallow?.destroyAll(); this.stopListening(); this.stopDefault(); this.modules .slice() .reverse() - .forEach(mod => mod.destroy()); + .forEach((mod) => mod.destroy()); view && view.remove(); this.clear({ silent: true }); this.destroyed = true; - //@ts-ignore - ['_config', 'view', '_previousAttributes', '_events', '_listeners'].forEach(i => (this[i] = {})); + ["_config", "view", "_previousAttributes", "_events", "_listeners"].forEach( + //@ts-ignore + (i) => (this[i] = {}) + ); editors.splice(editors.indexOf(editor), 1); //@ts-ignore hasWin() && $(config.el).empty().attr(this.attrsOrig); } getEditing() { - const res = this.get('editing'); + const res = this.get("editing"); return (res && res.model) || null; } setEditing(value: boolean) { - this.set('editing', value); + this.set("editing", value); return this; } isEditing() { - return !!this.get('editing'); + return !!this.get("editing"); } log(msg: string, opts: any = {}) { - const { ns, level = 'debug' } = opts; - this.trigger('log', msg, opts); + const { ns, level = "debug" } = opts; + this.trigger("log", msg, opts); level && this.trigger(`log:${level}`, msg, opts); if (ns) { @@ -902,15 +928,15 @@ timedInterval?: number; } logInfo(msg: string, opts?: any) { - this.log(msg, { ...opts, level: 'info' }); + this.log(msg, { ...opts, level: "info" }); } - logWarning(msg:string, opts?: any) { - this.log(msg, { ...opts, level: 'warning' }); + logWarning(msg: string, opts?: any) { + this.log(msg, { ...opts, level: "warning" }); } logError(msg: string, opts?: any) { - this.log(msg, { ...opts, level: 'error' }); + this.log(msg, { ...opts, level: "error" }); } initBaseColorPicker(el: any, opts = {}) { @@ -922,13 +948,13 @@ timedInterval?: number; //@ts-ignore return $(el).spectrum({ containerClassName: `${ppfx}one-bg ${ppfx}two-color`, - appendTo: elToAppend || 'body', + appendTo: elToAppend || "body", maxSelectionSize: 8, showPalette: true, palette: [], showAlpha: true, - chooseText: 'Ok', - cancelText: '⨯', + chooseText: "Ok", + cancelText: "⨯", ...opts, ...colorPicker, }); @@ -941,7 +967,7 @@ timedInterval?: number; */ skip(clb: Function) { this.__skip = true; - const um = this.get('UndoManager'); + const um = this.get("UndoManager"); um ? um.skip(clb) : clb(); this.__skip = false; } @@ -955,7 +981,7 @@ timedInterval?: number; * @private */ data(el: any, name: string, value: any) { - const varName = '_gjs-data'; + const varName = "_gjs-data"; if (!el[varName]) { el[varName] = {}; From 479f235395ff52a22be43acf271d9c8631112690 Mon Sep 17 00:00:00 2001 From: Alex Date: Wed, 27 Apr 2022 21:23:50 +0200 Subject: [PATCH 2/8] Convert Frame to ts --- src/canvas/index.js | 12 +-- src/canvas/model/Canvas.ts | 2 +- src/canvas/model/{Frame.js => Frame.ts} | 113 +++++++++++++----------- src/canvas/model/Frames.js | 5 +- 4 files changed, 68 insertions(+), 64 deletions(-) rename src/canvas/model/{Frame.js => Frame.ts} (58%) diff --git a/src/canvas/index.js b/src/canvas/index.js index 41af819f9..1945bae7a 100644 --- a/src/canvas/index.js +++ b/src/canvas/index.js @@ -51,6 +51,7 @@ import { isUndefined } from 'underscore'; import { getElement, getViewEl } from '../utils/mixins'; import defaults from './config/config'; import Canvas from './model/Canvas'; +import Frame from './model/Frame'; import CanvasView from './view/CanvasView'; export default class CanvasModule { @@ -667,15 +668,8 @@ export default class CanvasModule { * }); */ addFrame(props = {}, opts = {}) { - return this.canvas.get('frames').add( - { - ...props, - }, - { - ...opts, - em: this.em, - } - ); + console.log(opts); + return this.canvas.frames.add(new Frame({ ...props }, { em: this.em }), opts); } destroy() { diff --git a/src/canvas/model/Canvas.ts b/src/canvas/model/Canvas.ts index f44f9240c..d544810bb 100644 --- a/src/canvas/model/Canvas.ts +++ b/src/canvas/model/Canvas.ts @@ -28,7 +28,7 @@ export default class Canvas extends Backbone.Model { const { em } = config; this.config = config; this.em = em; - this.set("frames", new Frames()); + this.set("frames", new Frames(undefined, { em })); this.listenTo(this, "change:zoom", this.onZoomChange); this.listenTo(em, "change:device", this.updateDevice); this.listenTo(em, evPageSelect, this._pageUpdated); diff --git a/src/canvas/model/Frame.js b/src/canvas/model/Frame.ts similarity index 58% rename from src/canvas/model/Frame.js rename to src/canvas/model/Frame.ts index e47c57c1f..1d8de4495 100644 --- a/src/canvas/model/Frame.js +++ b/src/canvas/model/Frame.ts @@ -1,9 +1,12 @@ -import { result, forEach, isEmpty, isString } from 'underscore'; -import { Model } from '../../common'; -import { isComponent, isObject } from '../../utils/mixins'; +import { result, forEach, isEmpty, isString } from "underscore"; +import { Model } from "../../common"; +import EditorModel from "../../editor/model/Editor"; +import { isComponent, isObject } from "../../utils/mixins"; +import FrameView from "../view/FrameView"; +import Frames from "./Frames"; -const keyAutoW = '__aw'; -const keyAutoH = '__ah'; +const keyAutoW = "__aw"; +const keyAutoH = "__ah"; /** * @property {Object|String} component Wrapper component definition. You can also pass an HTML string as components of the default wrapper component. @@ -23,45 +26,47 @@ export default class Frame extends Model { width: null, height: null, head: [], - component: '', - styles: '', + component: "", + styles: "", _undo: true, - _undoexc: ['changesCount'], + _undoexc: ["changesCount"], }; } + em: EditorModel; + view?: FrameView; - initialize(props, opts = {}) { - const { config } = opts; - const { em } = config; + constructor(props: any, opts: any) { + super(props); + const { em } = opts; const { styles, component } = this.attributes; - const domc = em.get('DomComponents'); + const domc = em.get("DomComponents"); const conf = domc.getConfig(); - const allRules = em.get('CssComposer').getAll(); - const idMap = {}; + const allRules = em.get("CssComposer").getAll(); + const idMap: any = {}; this.em = em; const modOpts = { em, config: conf, frame: this, idMap }; if (!isComponent(component)) { const wrp = isObject(component) ? component : { components: component }; - !wrp.type && (wrp.type = 'wrapper'); - const Wrapper = domc.getType('wrapper').model; - this.set('component', new Wrapper(wrp, modOpts)); + !wrp.type && (wrp.type = "wrapper"); + const Wrapper = domc.getType("wrapper").model; + this.set("component", new Wrapper(wrp, modOpts)); } if (!styles) { - this.set('styles', allRules); + this.set("styles", allRules); } else if (!isObject(styles)) { // Avoid losing styles on remapped components const idMapKeys = Object.keys(idMap); if (idMapKeys.length && Array.isArray(styles)) { - styles.forEach(style => { + styles.forEach((style) => { const sel = style.selectors; if (sel && sel.length == 1) { const sSel = sel[0]; const idSel = sSel.name && sSel.type === 2 && sSel; if (idSel && idMap[idSel.name]) { idSel.name = idMap[idSel.name]; - } else if (isString(sSel) && sSel[0] === '#') { + } else if (isString(sSel) && sSel[0] === "#") { const prevId = sSel.substring(1); if (prevId && idMap[prevId]) { sel[0] = `#${idMap[prevId]}`; @@ -72,7 +77,7 @@ export default class Frame extends Model { } allRules.add(styles); - this.set('styles', allRules); + this.set("styles", allRules); } !props.width && this.set(keyAutoW, 1); @@ -83,52 +88,57 @@ export default class Frame extends Model { this.getComponent().remove({ root: 1 }); } - changesUp(opt = {}) { + changesUp(opt: any = {}) { if (opt.temporary || opt.noCount || opt.avoidStore) { return; } - this.set('changesCount', this.get('changesCount') + 1); + this.set("changesCount", this.get("changesCount") + 1); } getComponent() { - return this.get('component'); + return this.get("component"); } getStyles() { - return this.get('styles'); + return this.get("styles"); } disable() { - this.trigger('disable'); + this.trigger("disable"); } remove() { - this.view = 0; + this.view = undefined; const coll = this.collection; return coll && coll.remove(this); } getHead() { - const head = this.get('head') || []; + const head = this.get("head") || []; return [...head]; } - setHead(value) { - return this.set('head', [...value]); + setHead(value: any) { + return this.set("head", [...value]); } - addHeadItem(item) { + addHeadItem(item: any) { const head = this.getHead(); head.push(item); this.setHead(head); } - getHeadByAttr(attr, value, tag) { + getHeadByAttr(attr: string, value: any, tag: string) { const head = this.getHead(); - return head.filter(item => item.attributes && item.attributes[attr] == value && (!tag || tag === item.tag))[0]; + return head.filter( + (item) => + item.attributes && + item.attributes[attr] == value && + (!tag || tag === item.tag) + )[0]; } - removeHeadByAttr(attr, value, tag) { + removeHeadByAttr(attr: string, value: any, tag: string) { const head = this.getHead(); const item = this.getHeadByAttr(attr, value, tag); const index = head.indexOf(item); @@ -139,47 +149,46 @@ export default class Frame extends Model { } } - addLink(href) { - const tag = 'link'; - !this.getHeadByAttr('href', href, tag) && + addLink(href: string) { + const tag = "link"; + !this.getHeadByAttr("href", href, tag) && this.addHeadItem({ tag, attributes: { href, - rel: 'stylesheet', + rel: "stylesheet", }, }); } - removeLink(href) { - this.removeHeadByAttr('href', href, 'link'); + removeLink(href: string) { + this.removeHeadByAttr("href", href, "link"); } - addScript(src) { - const tag = 'script'; - !this.getHeadByAttr('src', src, tag) && + addScript(src: string) { + const tag = "script"; + !this.getHeadByAttr("src", src, tag) && this.addHeadItem({ tag, attributes: { src }, }); } - removeScript(src) { - this.removeHeadByAttr('src', src, 'script'); + removeScript(src: string) { + this.removeHeadByAttr("src", src, "script"); } getPage() { - const coll = this.collection; - return coll && coll.page; + return (this.collection as unknown as Frames)?.page; } _emitUpdated(data = {}) { - this.em.trigger('frame:updated', { frame: this, ...data }); + this.em.trigger("frame:updated", { frame: this, ...data }); } - toJSON(opts = {}) { + toJSON(opts: any = {}) { const obj = Model.prototype.toJSON.call(this, opts); - const defaults = result(this, 'defaults'); + const defaults = result(this, "defaults"); if (opts.fromUndo) delete obj.component; delete obj.styles; @@ -189,14 +198,14 @@ export default class Frame extends Model { // Remove private keys forEach(obj, (value, key) => { - key.indexOf('_') === 0 && delete obj[key]; + key.indexOf("_") === 0 && delete obj[key]; }); forEach(defaults, (value, key) => { if (obj[key] === value) delete obj[key]; }); - forEach(['attributes', 'head'], prop => { + forEach(["attributes", "head"], (prop) => { if (isEmpty(obj[prop])) delete obj[prop]; }); diff --git a/src/canvas/model/Frames.js b/src/canvas/model/Frames.js index e6d17da05..b5357824e 100644 --- a/src/canvas/model/Frames.js +++ b/src/canvas/model/Frames.js @@ -1,3 +1,4 @@ +import { expectation } from 'sinon'; import { bindAll } from 'underscore'; import { Collection } from '../../common'; import Frame from './Frame'; @@ -38,10 +39,10 @@ export default class Frames extends Collection { this.forEach(item => item[on ? 'on' : 'off']('loaded', this.itemLoaded)); } - add(m, o = {}) { + /*add(m, o = {}) { const { config } = this; return Collection.prototype.add.call(this, m, { ...o, config }); - } + }*/ } Frames.prototype.model = Frame; From 7e1d1d8b546149bead940e62fe0c0137e108e002 Mon Sep 17 00:00:00 2001 From: Alex Date: Wed, 27 Apr 2022 22:41:56 +0200 Subject: [PATCH 3/8] Convert Page, Pages into ts --- src/canvas/model/Frame.ts | 4 ++- src/canvas/model/Frames.js | 1 + src/pages/index.js | 6 ++-- src/pages/model/{Page.js => Page.ts} | 48 ++++++++++++++++------------ src/pages/model/Pages.js | 26 --------------- src/pages/model/Pages.ts | 18 +++++++++++ 6 files changed, 52 insertions(+), 51 deletions(-) rename src/pages/model/{Page.js => Page.ts} (64%) delete mode 100644 src/pages/model/Pages.js create mode 100644 src/pages/model/Pages.ts diff --git a/src/canvas/model/Frame.ts b/src/canvas/model/Frame.ts index 1d8de4495..5ef22ceb3 100644 --- a/src/canvas/model/Frame.ts +++ b/src/canvas/model/Frame.ts @@ -1,5 +1,7 @@ import { result, forEach, isEmpty, isString } from "underscore"; import { Model } from "../../common"; +import { Component } from "../../dom_components/model/Component"; +import Components from "../../dom_components/model/Components"; import EditorModel from "../../editor/model/Editor"; import { isComponent, isObject } from "../../utils/mixins"; import FrameView from "../view/FrameView"; @@ -95,7 +97,7 @@ export default class Frame extends Model { this.set("changesCount", this.get("changesCount") + 1); } - getComponent() { + getComponent(): typeof Components { return this.get("component"); } diff --git a/src/canvas/model/Frames.js b/src/canvas/model/Frames.js index b5357824e..2ce33cf3f 100644 --- a/src/canvas/model/Frames.js +++ b/src/canvas/model/Frames.js @@ -10,6 +10,7 @@ export default class Frames extends Collection { this.on('reset', this.onReset); this.on('remove', this.onRemove); } + page; onReset(m, opts = {}) { const prev = opts.previousModels || []; diff --git a/src/pages/index.js b/src/pages/index.js index 17b0fd74a..cf6195ea3 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -96,7 +96,7 @@ export default () => { const cnf = { ...opts }; this.config = cnf; this.em = em; - const pages = new Pages([], cnf); + const pages = new Pages([]); this.pages = pages; this.all = pages; const model = new Model({ _undo: true }); @@ -121,7 +121,7 @@ export default () => { onLoad() { const { pages } = this; const opt = { silent: true }; - pages.add(this.config.pages || [], opt); + pages.add(this.config.pages?.map(page => new Page(page, { em: this.em, config: this.config })) || [], opt); const mainPage = !pages.length ? this.add({ type: typeMain }, opt) : this.getMain(); this.select(mainPage, opt); }, @@ -158,7 +158,7 @@ export default () => { const { em } = this; props.id = props.id || this._createId(); const add = () => { - const page = this.pages.add(props, opts); + const page = this.pages.add(new Page(props, { em: this.em, config: this.config }), opts); opts.select && this.select(page); return page; }; diff --git a/src/pages/model/Page.js b/src/pages/model/Page.ts similarity index 64% rename from src/pages/model/Page.js rename to src/pages/model/Page.ts index 76b7b7f82..1e6dda89e 100644 --- a/src/pages/model/Page.js +++ b/src/pages/model/Page.ts @@ -1,6 +1,8 @@ -import { result, forEach } from 'underscore'; -import { Model } from '../../common'; -import Frames from '../../canvas/model/Frames'; +import { result, forEach } from "underscore"; +import { Model } from "../../common"; +import Frames from "../../canvas/model/Frames"; +import Frame from "../../canvas/model/Frame"; +import EditorModel from "../../editor/model/Editor"; export default class Page extends Model { defaults() { @@ -9,31 +11,33 @@ export default class Page extends Model { _undo: true, }; } + em: EditorModel; - initialize(props, opts = {}) { + constructor(props: any, opts: any = {}) { + super(props, opts); const { config = {} } = opts; - const { em } = config; - const defFrame = {}; + const { em } = opts; + const defFrame: any = {}; this.em = em; if (!props.frames) { defFrame.component = props.component; defFrame.styles = props.styles; - ['component', 'styles'].map(i => this.unset(i)); + ["component", "styles"].map((i) => this.unset(i)); } const frms = props.frames || [defFrame]; const frames = new Frames(frms, config); frames.page = this; - this.set('frames', frames); - const um = em && em.get('UndoManager'); + this.set("frames", frames); + const um = em && em.get("UndoManager"); um && um.add(frames); } onRemove() { - this.get('frames').reset(); + this.get("frames").reset(); } - getFrames() { - return this.get('frames'); + getFrames(): Frames { + return this.get("frames"); } /** @@ -48,8 +52,8 @@ export default class Page extends Model { * Get page name * @returns {String} */ - getName() { - return this.get('name'); + getName(): string { + return this.get("name"); } /** @@ -58,8 +62,8 @@ export default class Page extends Model { * @example * page.setName('New name'); */ - setName(name) { - return this.get({ name }); + setName(name: string) { + return this.set({ name }); } /** @@ -68,7 +72,8 @@ export default class Page extends Model { * @example * const arrayOfFrames = page.getAllFrames(); */ - getAllFrames() { + getAllFrames(): Frame[] { + //@ts-ignore return this.getFrames().models || []; } @@ -78,7 +83,8 @@ export default class Page extends Model { * @example * const mainFrame = page.getMainFrame(); */ - getMainFrame() { + getMainFrame(): Frame { + //@ts-ignore return this.getFrames().at(0); } @@ -91,16 +97,16 @@ export default class Page extends Model { */ getMainComponent() { const frame = this.getMainFrame(); - return frame && frame.getComponent(); + return frame?.getComponent(); } toJSON(opts = {}) { const obj = Model.prototype.toJSON.call(this, opts); - const defaults = result(this, 'defaults'); + const defaults = result(this, "defaults"); // Remove private keys forEach(obj, (value, key) => { - key.indexOf('_') === 0 && delete obj[key]; + key.indexOf("_") === 0 && delete obj[key]; }); forEach(defaults, (value, key) => { diff --git a/src/pages/model/Pages.js b/src/pages/model/Pages.js deleted file mode 100644 index 7848c4135..000000000 --- a/src/pages/model/Pages.js +++ /dev/null @@ -1,26 +0,0 @@ -import { Collection } from '../../common'; -import Page from './Page'; - -export default class Pages extends Collection { - initialize(models, config = {}) { - this.config = config; - this.on('reset', this.onReset); - this.on('remove', this.onRemove); - } - - onReset(m, opts = {}) { - const prev = opts.previousModels || []; - prev.map(p => this.onRemove(p)); - } - - onRemove(removed) { - removed && removed.onRemove(); - } - - add(m, o = {}) { - const { config } = this; - return Collection.prototype.add.call(this, m, { ...o, config }); - } -} - -Pages.prototype.model = Page; diff --git a/src/pages/model/Pages.ts b/src/pages/model/Pages.ts new file mode 100644 index 000000000..bf8a88ba7 --- /dev/null +++ b/src/pages/model/Pages.ts @@ -0,0 +1,18 @@ +import { Collection } from "../../common"; +import Page from "./Page"; + +export default class Pages extends Collection { + constructor(models: any) { + super(models); + this.on("reset", this.onReset); + this.on("remove", this.onRemove); + } + + onReset(m: Page, opts?: { previousModels?: Pages }) { + opts?.previousModels?.map((p) => this.onRemove(p)); + } + + onRemove(removed?: Page) { + removed?.onRemove(); + } +} From 48b33e12bd2ad5a57978aea7f5ec7ca75e7aeb59 Mon Sep 17 00:00:00 2001 From: Alex Date: Fri, 29 Apr 2022 22:23:17 +0200 Subject: [PATCH 4/8] Convert pages into Module class --- src/abstract/Module.ts | 211 ++++++++++++++++++- src/abstract/index.ts | 8 +- src/canvas/model/Frames.js | 3 +- src/editor/index.ts | 41 ++-- src/editor/model/Editor.ts | 6 +- src/pages/index.js | 415 ++++++++++++++++++------------------- src/pages/model/Page.ts | 7 +- 7 files changed, 440 insertions(+), 251 deletions(-) diff --git a/src/abstract/Module.ts b/src/abstract/Module.ts index 3a1fb20d7..e0adb1197 100644 --- a/src/abstract/Module.ts +++ b/src/abstract/Module.ts @@ -1,6 +1,10 @@ +import { isElement, isUndefined } from "underscore"; +import { Collection } from "../common"; import EditorModel from "../editor/model/Editor"; +import { createId, isDef } from "../utils/mixins"; -export interface IModule extends IBaseModule { +export interface IModule + extends IBaseModule { init(cfg: any): void; destroy(): void; postLoad(key: any): any; @@ -15,26 +19,41 @@ export interface IBaseModule { config: TConfig; } -interface ModuleConfig{ +interface ModuleConfig { name: string; stylePrefix?: string; } +export interface IStorableModule extends IModule { + storageKey: string[] | string; + store(result: any): any; + load(keys: string[]): void; + postLoad(key: any): any; +} + export default abstract class Module implements IModule { - //conf: CollectionCollectionModuleConfig; private _em: EditorModel; private _config: T; + private _name: string; cls: any[] = []; events: any; - constructor( - em: EditorModel, - config: T - ) { + constructor(em: EditorModel, moduleName: string) { this._em = em; - this._config = config; + this._name = moduleName; + const name = this.name.charAt(0).toLowerCase() + this.name.slice(1); + const cfgParent = !isUndefined(em.config[name]) + ? em.config[name] + : em.config[this.name]; + const cfg = cfgParent === true ? {} : cfgParent || {}; + cfg.pStylePrefix = em.config.pStylePrefix || ""; + + if (!isUndefined(cfgParent) && !cfgParent) { + cfg._disable = 1; + } + this._config = cfg; } public get em() { @@ -51,16 +70,186 @@ export default abstract class Module postLoad(key: any): void {} get name(): string { - return this.config.name; + return this._name; } getConfig() { return this.config; } - __logWarn(str: string) { - this.em.logWarning(`[${this.name}]: ${str}`); + __logWarn(str: string, opts = {}) { + this.em.logWarning(`[${this.name}]: ${str}`, opts); } postRender?(view: any): void; } + +export abstract class ItemManagerModule< + TConf extends ModuleConfig = any, + TModel extends Collection = any +> extends Module { + cls: any[] = []; + protected all: TModel; + + constructor(em: EditorModel, moduleName: string, all: any, events: any) { + super(em, moduleName); + this.all = all; + this.events = events; + this.__initListen(); + } + + private: boolean = false; + + abstract storageKey: string; + abstract init(cfg: any): void; + abstract destroy(): void; + postLoad(key: any): void {} + abstract postRender(view: any): void; + abstract render(): any; + + getProjectData(data: any) { + const obj: any = {}; + const key = this.storageKey; + if (key) { + obj[key] = data || this.getAll(); + } + return obj; + } + + loadProjectData( + data: any = {}, + param: { all?: TModel; onResult?: Function; reset?: boolean } = {} + ) { + const { all, onResult, reset } = param; + const key = this.storageKey; + const opts: any = { action: "load" }; + const coll = all || this.getAll(); + let result = data[key]; + + if (typeof result == "string") { + try { + result = JSON.parse(result); + } catch (err) { + this.__logWarn("Data parsing failed", { input: result }); + } + } + + reset && result && coll.reset(undefined, opts); + + if (onResult) { + result && onResult(result, opts); + } else if (result && isDef(result.length)) { + coll.reset(result, opts); + } + + return result; + } + + clear(opts = {}) { + const { all } = this; + all && all.reset(undefined, opts); + return this; + } + + getAll() { + return this.all; + } + + getAllMap() { + return this.getAll().reduce((acc: { [id: string]: TModel }, i: any) => { + acc[i.get(i.idAttribute)] = i; + return acc; + }, {}); + } + + __initListen(opts: any = {}) { + const { all, em, events } = this; + all && + em && + all + .on("add", (m: any, c: any, o: any) => em.trigger(events.add, m, o)) + .on("remove", (m: any, c: any, o: any) => + em.trigger(events.remove, m, o) + ) + .on("change", (p: any, c: any) => + em.trigger(events.update, p, p.changedAttributes(), c) + ) + .on("all", this.__catchAllEvent, this); + // Register collections + this.cls = [all].concat(opts.collections || []); + // Propagate events + ((opts.propagate as any[]) || []).forEach(({ entity, event }) => { + entity.on("all", (ev: any, model: any, coll: any, opts: any) => { + const options = opts || coll; + const opt = { event: ev, ...options }; + [em, all].map((md) => md.trigger(event, model, opt)); + }); + }); + } + + __remove(model: any, opts: any = {}) { + const { em } = this; + //@ts-ignore + const md = isString(model) ? this.get(model) : model; + const rm = () => { + md && this.all.remove(md, opts); + return md; + }; + !opts.silent && em?.trigger(this.events.removeBefore, md, rm, opts); + return !opts.abort && rm(); + } + + __catchAllEvent(event: any, model: any, coll: any, opts: any) { + const { em, events } = this; + const options = opts || coll; + em && events.all && em.trigger(events.all, { event, model, options }); + this.__onAllEvent(); + } + + __appendTo() { + //@ts-ignore + const elTo = this.config.appendTo; + + if (elTo) { + const el = isElement(elTo) ? elTo : document.querySelector(elTo); + if (!el) return this.__logWarn('"appendTo" element not found'); + el.appendChild(this.render()); + } + } + + __onAllEvent() {} + + _createId(len = 16) { + const all = this.getAll(); + const ln = all.length + len; + const allMap = this.getAllMap(); + let id; + + do { + id = createId(ln); + } while (allMap[id]); + + return id; + } + + __listenAdd(model: TModel, event: string) { + model.on("add", (m, c, o) => this.em.trigger(event, m, o)); + } + + __listenRemove(model: TModel, event: string) { + model.on("remove", (m, c, o) => this.em.trigger(event, m, o)); + } + + __listenUpdate(model: TModel, event: string) { + model.on("change", (p, c) => + this.em.trigger(event, p, p.changedAttributes(), c) + ); + } + + __destroy() { + this.cls.forEach((coll) => { + coll.stopListening(); + coll.reset(); + }); + } +} diff --git a/src/abstract/index.ts b/src/abstract/index.ts index 279a3e032..7f5814fa0 100644 --- a/src/abstract/index.ts +++ b/src/abstract/index.ts @@ -1,4 +1,4 @@ -export { default as Model } from './Model'; -export { default as Collection } from './Collection'; -export { default as View } from './View'; -export { default as Module } from './moduleLegacy'; +export { default as Model } from "./Model"; +export { default as Collection } from "./Collection"; +export { default as View } from "./View"; +export { default as Module } from "./Module"; diff --git a/src/canvas/model/Frames.js b/src/canvas/model/Frames.js index 2ce33cf3f..3678a4d6a 100644 --- a/src/canvas/model/Frames.js +++ b/src/canvas/model/Frames.js @@ -4,7 +4,8 @@ import { Collection } from '../../common'; import Frame from './Frame'; export default class Frames extends Collection { - initialize(models, config = {}) { + constructor(models, config = {}) { + super(models); bindAll(this, 'itemLoaded'); this.config = config; this.on('reset', this.onReset); diff --git a/src/editor/index.ts b/src/editor/index.ts index 0c04e4041..b56915a70 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -54,19 +54,24 @@ * ## Methods * @module Editor */ -import { EventHandler } from 'backbone'; -import { isUndefined } from 'underscore'; -import { IBaseModule } from '../abstract/Module'; -import cash from '../utils/cash-dom'; -import html from '../utils/html'; -import defaults from './config/config'; -import EditorModel from './model/Editor'; -import EditorView from './view/EditorView'; +import { EventHandler } from "backbone"; +import { isUndefined } from "underscore"; +import { IBaseModule } from "../abstract/Module"; +import cash from "../utils/cash-dom"; +import html from "../utils/html"; +import defaults from "./config/config"; +import EditorModel from "./model/Editor"; +import EditorView from "./view/EditorView"; export default class EditorModule implements IBaseModule { constructor(config = {}, opts: any = {}) { //@ts-ignore - this.config = { ...defaults, ...config, pStylePrefix: defaults.stylePrefix }; + this.config = { + ...defaults, + ...config, + //@ts-ignore + pStylePrefix: defaults.stylePrefix, + }; this.em = new EditorModel(this.config); this.$ = opts.$; this.em.init(this); @@ -206,7 +211,7 @@ export default class EditorModule implements IBaseModule { //@ts-ignore get Devices(): DeviceManagerModule { return this.em.get("DeviceManager"); - } + } //@ts-ignore get DeviceManager(): DeviceManagerModule { return this.em.get("DeviceManager"); @@ -259,7 +264,7 @@ export default class EditorModule implements IBaseModule { * @return {Components} */ getComponents() { - return this.em.get('DomComponents').getComponents(); + return this.em.get("DomComponents").getComponents(); } /** @@ -267,7 +272,7 @@ export default class EditorModule implements IBaseModule { * @return {Component} */ getWrapper() { - return this.em.get('DomComponents').getWrapper(); + return this.em.get("DomComponents").getWrapper(); } /** @@ -315,7 +320,7 @@ export default class EditorModule implements IBaseModule { * @return {Object} */ getStyle() { - return this.em.get('CssComposer').getAll(); + return this.em.get("CssComposer").getAll(); } /** @@ -453,7 +458,7 @@ export default class EditorModule implements IBaseModule { * editor.setDevice('Tablet'); */ setDevice(name: string) { - this.em.set('device', name); + this.em.set("device", name); return this; } @@ -466,7 +471,7 @@ export default class EditorModule implements IBaseModule { * // 'Tablet' */ getDevice() { - return this.em.get('device'); + return this.em.get("device"); } /** @@ -478,7 +483,7 @@ export default class EditorModule implements IBaseModule { * editor.runCommand('myCommand', {someValue: 1}); */ runCommand(id: string, options = {}) { - return this.em.get('Commands').run(id, options); + return this.em.get("Commands").run(id, options); } /** @@ -490,7 +495,7 @@ export default class EditorModule implements IBaseModule { * editor.stopCommand('myCommand', {someValue: 1}); */ stopCommand(id: string, options = {}) { - return this.em.get('Commands').stop(id, options); + return this.em.get("Commands").stop(id, options); } /** @@ -779,7 +784,7 @@ export default class EditorModule implements IBaseModule { * }); */ onReady(clb: EventHandler) { - this.em.get('ready') ? clb(this) : this.em.on('load', clb); + this.em.get("ready") ? clb(this) : this.em.on("load", clb); } /** diff --git a/src/editor/model/Editor.ts b/src/editor/model/Editor.ts index fa4892e23..66e4203dd 100644 --- a/src/editor/model/Editor.ts +++ b/src/editor/model/Editor.ts @@ -45,7 +45,9 @@ const deps = [ require("block_manager"), ]; -const ts_deps: any[] = []; +const ts_deps: any[] = [ + //require("pages") +]; Extender({ //@ts-ignore @@ -264,7 +266,7 @@ export default class EditorModel extends Model { loadModule(moduleName: any) { const { config } = this; const Module = moduleName.default || moduleName; - const Mod = new Module(); + const Mod = new Module(this); const name = Mod.name.charAt(0).toLowerCase() + Mod.name.slice(1); const cfgParent = !isUndefined(config[name]) ? config[name] diff --git a/src/pages/index.js b/src/pages/index.js index cf6195ea3..1c486dcf8 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -46,9 +46,11 @@ import { isString, bindAll, unique, flatten } from 'underscore'; import { createId } from '../utils/mixins'; -import { Model, Module } from '../common'; +import { Model, Module } from '../abstract'; +import { ItemManagerModule } from '../abstract/Module'; import Pages from './model/Pages'; import Page from './model/Page'; +import EditorModel from '../editor/model/Editor'; export const evAll = 'page'; export const evPfx = `${evAll}:`; @@ -61,239 +63,226 @@ export const evPageRemove = `${evPfx}remove`; export const evPageRemoveBefore = `${evPageRemove}:before`; const chnSel = 'change:selected'; const typeMain = 'main'; +const events = { + all: evAll, + select: evPageSelect, + selectBefore: evPageSelectBefore, + update: evPageUpdate, + add: evPageAdd, + addBefore: evPageAddBefore, + remove: evPageRemove, + removeBefore: evPageRemoveBefore, +}; +export default class PageManager extends ItemManagerModule { + name = 'PageManager'; -export default () => { - return { - ...Module, - - name: 'PageManager', - - storageKey: 'pages', - - Page, + storageKey = 'pages'; - Pages, + Page; - events: { - all: evAll, - select: evPageSelect, - selectBefore: evPageSelectBefore, - update: evPageUpdate, - add: evPageAdd, - addBefore: evPageAddBefore, - remove: evPageRemove, - removeBefore: evPageRemoveBefore, - }, + Pages; - /** - * Initialize module - * @param {Object} config Configurations - * @private - */ - init(opts = {}) { - bindAll(this, '_onPageChange'); - const { em } = opts; - const cnf = { ...opts }; - this.config = cnf; - this.em = em; - const pages = new Pages([]); - this.pages = pages; - this.all = pages; - const model = new Model({ _undo: true }); - this.model = model; - pages.on('add', (p, c, o) => em.trigger(evPageAdd, p, o)); - pages.on('remove', (p, c, o) => em.trigger(evPageRemove, p, o)); - pages.on('change', (p, c) => { - em.trigger(evPageUpdate, p, p.changedAttributes(), c); - }); - pages.on('reset', coll => coll.at(0) && this.select(coll.at(0))); - pages.on('all', this.__onChange, this); - model.on(chnSel, this._onPageChange); + get pages() { + return this.all; + } + /** + * Initialize module + * @param {Object} config Configurations + * @private + */ + constructor(em) { + const pages = new Pages([]); + super(em, 'PageManager', pages, events); + bindAll(this, '_onPageChange'); + const model = new Model({ _undo: true }); + this.model = model; + pages.on('reset', coll => coll.at(0) && this.select(coll.at(0))); + pages.on('all', this.__onChange, this); + model.on(chnSel, this._onPageChange); - return this; - }, + return this; + } - __onChange(event, page, coll, opts) { - const options = opts || coll; - this.em.trigger(evAll, { event, page, options }); - }, + __onChange(event, page, coll, opts) { + const options = opts || coll; + this.em.trigger(evAll, { event, page, options }); + } - onLoad() { - const { pages } = this; - const opt = { silent: true }; - pages.add(this.config.pages?.map(page => new Page(page, { em: this.em, config: this.config })) || [], opt); - const mainPage = !pages.length ? this.add({ type: typeMain }, opt) : this.getMain(); - this.select(mainPage, opt); - }, + onLoad() { + const { pages } = this; + const opt = { silent: true }; + pages.add(this.config.pages?.map(page => new Page(page, { em: this.em, config: this.config })) || [], opt); + const mainPage = !pages.length ? this.add({ type: typeMain }, opt) : this.getMain(); + this.select(mainPage, opt); + } - _onPageChange(m, page, opts) { - const { em } = this; - const lm = em.get('LayerManager'); - const mainComp = page.getMainComponent(); - lm && mainComp && lm.setRoot(mainComp); - em.trigger(evPageSelect, page, m.previous('selected')); - this.__onChange(chnSel, page, opts); - }, + _onPageChange(m, page, opts) { + const { em } = this; + const lm = em.get('LayerManager'); + const mainComp = page.getMainComponent(); + lm && mainComp && lm.setRoot(mainComp); + em.trigger(evPageSelect, page, m.previous('selected')); + this.__onChange(chnSel, page, opts); + } - postLoad() { - const { em, model } = this; - const um = em.get('UndoManager'); - um && um.add(model); - um && um.add(this.pages); - }, + postLoad() { + const { em, model } = this; + const um = em.get('UndoManager'); + um && um.add(model); + um && um.add(this.pages); + } - /** - * Add new page - * @param {Object} props Page properties - * @param {Object} [opts] Options - * @returns {[Page]} - * @example - * const newPage = pageManager.add({ - * id: 'new-page-id', // without an explicit ID, a random one will be created - * styles: `.my-class { color: red }`, // or a JSON of styles - * component: '
My element
', // or a JSON of components - * }); - */ - add(props, opts = {}) { - const { em } = this; - props.id = props.id || this._createId(); - const add = () => { - const page = this.pages.add(new Page(props, { em: this.em, config: this.config }), opts); - opts.select && this.select(page); - return page; - }; - !opts.silent && em.trigger(evPageAddBefore, props, add, opts); - return !opts.abort && add(); - }, + /** + * Add new page + * @param {Object} props Page properties + * @param {Object} [opts] Options + * @returns {[Page]} + * @example + * const newPage = pageManager.add({ + * id: 'new-page-id', // without an explicit ID, a random one will be created + * styles: `.my-class { color: red }`, // or a JSON of styles + * component: '
My element
', // or a JSON of components + * }); + */ + add(props, opts = {}) { + const { em } = this; + props.id = props.id || this._createId(); + const add = () => { + const page = this.pages.add(new Page(props, { em: this.em, config: this.config }), opts); + opts.select && this.select(page); + return page; + }; + !opts.silent && em.trigger(evPageAddBefore, props, add, opts); + return !opts.abort && add(); + } - /** - * Remove page - * @param {String|[Page]} page Page or page id - * @returns {[Page]} Removed Page - * @example - * const removedPage = pageManager.remove('page-id'); - * // or by passing the page - * const somePage = pageManager.get('page-id'); - * pageManager.remove(somePage); - */ - remove(page, opts = {}) { - const { em } = this; - const pg = isString(page) ? this.get(page) : page; - const rm = () => { - pg && this.pages.remove(pg, opts); - return pg; - }; - !opts.silent && em.trigger(evPageRemoveBefore, pg, rm, opts); - return !opts.abort && rm(); - }, + /** + * Remove page + * @param {String|[Page]} page Page or page id + * @returns {[Page]} Removed Page + * @example + * const removedPage = pageManager.remove('page-id'); + * // or by passing the page + * const somePage = pageManager.get('page-id'); + * pageManager.remove(somePage); + */ + remove(page, opts = {}) { + const { em } = this; + const pg = isString(page) ? this.get(page) : page; + const rm = () => { + pg && this.pages.remove(pg, opts); + return pg; + }; + !opts.silent && em.trigger(evPageRemoveBefore, pg, rm, opts); + return !opts.abort && rm(); + } - /** - * Get page by id - * @param {String} id Page id - * @returns {[Page]} - * @example - * const somePage = pageManager.get('page-id'); - */ - get(id) { - return this.pages.filter(p => p.get('id') === id)[0]; - }, + /** + * Get page by id + * @param {String} id Page id + * @returns {[Page]} + * @example + * const somePage = pageManager.get('page-id'); + */ + get(id) { + return this.pages.filter(p => p.get('id') === id)[0]; + } - /** - * Get main page (the first one available) - * @returns {[Page]} - * @example - * const mainPage = pageManager.getMain(); - */ - getMain() { - const { pages } = this; - return pages.filter(p => p.get('type') === typeMain)[0] || pages.at(0); - }, + /** + * Get main page (the first one available) + * @returns {[Page]} + * @example + * const mainPage = pageManager.getMain(); + */ + getMain() { + const { pages } = this; + return pages.filter(p => p.get('type') === typeMain)[0] || pages.at(0); + } - /** - * Get all pages - * @returns {Array<[Page]>} - * @example - * const arrayOfPages = pageManager.getAll(); - */ - getAll() { - return [...this.pages.models]; - }, + /** + * Get all pages + * @returns {Array<[Page]>} + * @example + * const arrayOfPages = pageManager.getAll(); + */ + getAll() { + return [...this.pages.models]; + } - /** - * Get wrapper components (aka body) from all pages and frames. - * @returns {Array<[Component]>} - * @example - * const wrappers = pageManager.getAllWrappers(); - * // Get all `image` components from the project - * const allImages = wrappers.map(wrp => wrp.findType('image')).flat(); - */ - getAllWrappers() { - const pages = this.getAll(); - return unique(flatten(pages.map(page => page.getAllFrames().map(frame => frame.getComponent())))); - }, + /** + * Get wrapper components (aka body) from all pages and frames. + * @returns {Array<[Component]>} + * @example + * const wrappers = pageManager.getAllWrappers(); + * // Get all `image` components from the project + * const allImages = wrappers.map(wrp => wrp.findType('image')).flat(); + */ + getAllWrappers() { + const pages = this.getAll(); + return unique(flatten(pages.map(page => page.getAllFrames().map(frame => frame.getComponent())))); + } - getAllMap() { - return this.getAll().reduce((acc, i) => { - acc[i.get('id')] = i; - return acc; - }, {}); - }, + getAllMap() { + return this.getAll().reduce((acc, i) => { + acc[i.get('id')] = i; + return acc; + }, {}); + } - /** - * Change the selected page. This will switch the page rendered in canvas - * @param {String|[Page]} page Page or page id - * @returns {this} - * @example - * pageManager.select('page-id'); - * // or by passing the page - * const somePage = pageManager.get('page-id'); - * pageManager.select(somePage); - */ - select(page, opts = {}) { - const pg = isString(page) ? this.get(page) : page; - if (pg) { - this.em.trigger(evPageSelectBefore, pg, opts); - this.model.set('selected', pg, opts); - } - return this; - }, + /** + * Change the selected page. This will switch the page rendered in canvas + * @param {String|[Page]} page Page or page id + * @returns {this} + * @example + * pageManager.select('page-id'); + * // or by passing the page + * const somePage = pageManager.get('page-id'); + * pageManager.select(somePage); + */ + select(page, opts = {}) { + const pg = isString(page) ? this.get(page) : page; + if (pg) { + this.em.trigger(evPageSelectBefore, pg, opts); + this.model.set('selected', pg, opts); + } + return this; + } - /** - * Get the selected page - * @returns {[Page]} - * @example - * const selectedPage = pageManager.getSelected(); - */ - getSelected() { - return this.model.get('selected'); - }, + /** + * Get the selected page + * @returns {[Page]} + * @example + * const selectedPage = pageManager.getSelected(); + */ + getSelected() { + return this.model.get('selected'); + } - destroy() { - this.pages.off().reset(); - this.model.stopListening(); - this.model.clear({ silent: true }); - ['selected', 'config', 'em', 'pages', 'model'].map(i => (this[i] = 0)); - }, + destroy() { + this.pages.off().reset(); + this.model.stopListening(); + this.model.clear({ silent: true }); + ['selected', 'model'].map(i => (this[i] = 0)); + } - store() { - return this.getProjectData(); - }, + store() { + return this.getProjectData(); + } - load(data) { - return this.loadProjectData(data, { all: this.pages, reset: true }); - }, + load(data) { + return this.loadProjectData(data, { all: this.pages, reset: true }); + } - _createId() { - const pages = this.getAll(); - const len = pages.length + 16; - const pagesMap = this.getAllMap(); - let id; + _createId() { + const pages = this.getAll(); + const len = pages.length + 16; + const pagesMap = this.getAllMap(); + let id; - do { - id = createId(len); - } while (pagesMap[id]); + do { + id = createId(len); + } while (pagesMap[id]); - return id; - }, - }; -}; + return id; + } +} diff --git a/src/pages/model/Page.ts b/src/pages/model/Page.ts index 1e6dda89e..457ad98fd 100644 --- a/src/pages/model/Page.ts +++ b/src/pages/model/Page.ts @@ -24,8 +24,11 @@ export default class Page extends Model { defFrame.styles = props.styles; ["component", "styles"].map((i) => this.unset(i)); } - const frms = props.frames || [defFrame]; - const frames = new Frames(frms, config); + const frms: any[] = props.frames || [defFrame]; + const frames = new Frames( + frms?.map((model) => new Frame(model, opts)), + opts + ); frames.page = this; this.set("frames", frames); const um = em && em.get("UndoManager"); From 57a3a443d3bbee14a29f6a6a4c92ed461c0b5757 Mon Sep 17 00:00:00 2001 From: Alex Date: Fri, 29 Apr 2022 23:50:31 +0200 Subject: [PATCH 5/8] Convert Pages index to ts --- src/abstract/Module.ts | 34 ++++----- src/canvas/model/Frame.ts | 3 +- src/pages/{index.js => index.ts} | 125 ++++++++++++++++--------------- 3 files changed, 83 insertions(+), 79 deletions(-) rename src/pages/{index.js => index.ts} (71%) diff --git a/src/abstract/Module.ts b/src/abstract/Module.ts index e0adb1197..07846f5af 100644 --- a/src/abstract/Module.ts +++ b/src/abstract/Module.ts @@ -19,7 +19,7 @@ export interface IBaseModule { config: TConfig; } -interface ModuleConfig { +export interface ModuleConfig { name: string; stylePrefix?: string; } @@ -86,10 +86,10 @@ export default abstract class Module export abstract class ItemManagerModule< TConf extends ModuleConfig = any, - TModel extends Collection = any + TCollection extends Collection = Collection > extends Module { cls: any[] = []; - protected all: TModel; + protected all: TCollection; constructor(em: EditorModel, moduleName: string, all: any, events: any) { super(em, moduleName); @@ -101,13 +101,11 @@ export abstract class ItemManagerModule< private: boolean = false; abstract storageKey: string; - abstract init(cfg: any): void; abstract destroy(): void; postLoad(key: any): void {} - abstract postRender(view: any): void; - abstract render(): any; + render() {} - getProjectData(data: any) { + getProjectData(data?: any) { const obj: any = {}; const key = this.storageKey; if (key) { @@ -118,12 +116,12 @@ export abstract class ItemManagerModule< loadProjectData( data: any = {}, - param: { all?: TModel; onResult?: Function; reset?: boolean } = {} + param: { all?: TCollection; onResult?: Function; reset?: boolean } = {} ) { const { all, onResult, reset } = param; const key = this.storageKey; const opts: any = { action: "load" }; - const coll = all || this.getAll(); + const coll = all || this.all; let result = data[key]; if (typeof result == "string") { @@ -151,15 +149,17 @@ export abstract class ItemManagerModule< return this; } - getAll() { - return this.all; + getAll(): TCollection extends Collection ? C[] : unknown[] { + return [...this.all.models] as any; } - getAllMap() { - return this.getAll().reduce((acc: { [id: string]: TModel }, i: any) => { + getAllMap(): { + [key: string]: TCollection extends Collection ? C : unknown; + } { + return this.getAll().reduce((acc, i) => { acc[i.get(i.idAttribute)] = i; return acc; - }, {}); + }, {} as any); } __initListen(opts: any = {}) { @@ -232,15 +232,15 @@ export abstract class ItemManagerModule< return id; } - __listenAdd(model: TModel, event: string) { + __listenAdd(model: TCollection, event: string) { model.on("add", (m, c, o) => this.em.trigger(event, m, o)); } - __listenRemove(model: TModel, event: string) { + __listenRemove(model: TCollection, event: string) { model.on("remove", (m, c, o) => this.em.trigger(event, m, o)); } - __listenUpdate(model: TModel, event: string) { + __listenUpdate(model: TCollection, event: string) { model.on("change", (p, c) => this.em.trigger(event, p, p.changedAttributes(), c) ); diff --git a/src/canvas/model/Frame.ts b/src/canvas/model/Frame.ts index 5ef22ceb3..a83d33728 100644 --- a/src/canvas/model/Frame.ts +++ b/src/canvas/model/Frame.ts @@ -2,6 +2,7 @@ import { result, forEach, isEmpty, isString } from "underscore"; import { Model } from "../../common"; import { Component } from "../../dom_components/model/Component"; import Components from "../../dom_components/model/Components"; +import ComponentWrapper from "../../dom_components/model/ComponentWrapper"; import EditorModel from "../../editor/model/Editor"; import { isComponent, isObject } from "../../utils/mixins"; import FrameView from "../view/FrameView"; @@ -97,7 +98,7 @@ export default class Frame extends Model { this.set("changesCount", this.get("changesCount") + 1); } - getComponent(): typeof Components { + getComponent(): ComponentWrapper { return this.get("component"); } diff --git a/src/pages/index.js b/src/pages/index.ts similarity index 71% rename from src/pages/index.js rename to src/pages/index.ts index 1c486dcf8..36f158bbc 100644 --- a/src/pages/index.js +++ b/src/pages/index.ts @@ -44,15 +44,15 @@ * @module Pages */ -import { isString, bindAll, unique, flatten } from 'underscore'; -import { createId } from '../utils/mixins'; -import { Model, Module } from '../abstract'; -import { ItemManagerModule } from '../abstract/Module'; -import Pages from './model/Pages'; -import Page from './model/Page'; -import EditorModel from '../editor/model/Editor'; +import { isString, bindAll, unique, flatten } from "underscore"; +import { createId } from "../utils/mixins"; +import { Model, Module } from "../abstract"; +import { ItemManagerModule, ModuleConfig } from "../abstract/Module"; +import Pages from "./model/Pages"; +import Page from "./model/Page"; +import EditorModel from "../editor/model/Editor"; -export const evAll = 'page'; +export const evAll = "page"; export const evPfx = `${evAll}:`; export const evPageSelect = `${evPfx}select`; export const evPageSelectBefore = `${evPageSelect}:before`; @@ -61,8 +61,8 @@ export const evPageAdd = `${evPfx}add`; export const evPageAddBefore = `${evPageAdd}:before`; export const evPageRemove = `${evPfx}remove`; export const evPageRemoveBefore = `${evPageRemove}:before`; -const chnSel = 'change:selected'; -const typeMain = 'main'; +const chnSel = "change:selected"; +const typeMain = "main"; const events = { all: evAll, select: evPageSelect, @@ -73,37 +73,37 @@ const events = { remove: evPageRemove, removeBefore: evPageRemoveBefore, }; -export default class PageManager extends ItemManagerModule { - name = 'PageManager'; - storageKey = 'pages'; - - Page; - - Pages; +interface Config extends ModuleConfig { + pages?: string[]; +} +export default class PageManager extends ItemManagerModule { + storageKey = "pages"; get pages() { return this.all; } + + model: Model; /** * Initialize module * @param {Object} config Configurations * @private */ - constructor(em) { - const pages = new Pages([]); - super(em, 'PageManager', pages, events); - bindAll(this, '_onPageChange'); - const model = new Model({ _undo: true }); + constructor(em: EditorModel) { + super(em, "PageManager", new Pages([]), events); + bindAll(this, "_onPageChange"); + this.getAll; + const model = new Model({ _undo: true } as any); this.model = model; - pages.on('reset', coll => coll.at(0) && this.select(coll.at(0))); - pages.on('all', this.__onChange, this); + this.pages.on("reset", (coll) => coll.at(0) && this.select(coll.at(0))); + this.pages.on("all", this.__onChange, this); model.on(chnSel, this._onPageChange); return this; } - __onChange(event, page, coll, opts) { + __onChange(event: string, page: Page, coll: Pages, opts?: any) { const options = opts || coll; this.em.trigger(evAll, { event, page, options }); } @@ -111,23 +111,30 @@ export default class PageManager extends ItemManagerModule { onLoad() { const { pages } = this; const opt = { silent: true }; - pages.add(this.config.pages?.map(page => new Page(page, { em: this.em, config: this.config })) || [], opt); - const mainPage = !pages.length ? this.add({ type: typeMain }, opt) : this.getMain(); - this.select(mainPage, opt); + pages.add( + this.config.pages?.map( + (page) => new Page(page, { em: this.em, config: this.config }) + ) || [], + opt + ); + const mainPage = !pages.length + ? this.add({ type: typeMain }, opt) + : this.getMain(); + mainPage && this.select(mainPage, opt); } - _onPageChange(m, page, opts) { + _onPageChange(m: any, page: Page, opts: any) { const { em } = this; - const lm = em.get('LayerManager'); + const lm = em.get("LayerManager"); const mainComp = page.getMainComponent(); lm && mainComp && lm.setRoot(mainComp); - em.trigger(evPageSelect, page, m.previous('selected')); + em.trigger(evPageSelect, page, m.previous("selected")); this.__onChange(chnSel, page, opts); } postLoad() { const { em, model } = this; - const um = em.get('UndoManager'); + const um = em.get("UndoManager"); um && um.add(model); um && um.add(this.pages); } @@ -144,11 +151,17 @@ export default class PageManager extends ItemManagerModule { * component: '
My element
', // or a JSON of components * }); */ - add(props, opts = {}) { + add( + props: any, //{ id?: string; styles: string; component: string }, + opts: any = {} + ) { const { em } = this; props.id = props.id || this._createId(); const add = () => { - const page = this.pages.add(new Page(props, { em: this.em, config: this.config }), opts); + const page = this.pages.add( + new Page(props, { em: this.em, config: this.config }), + opts + ); opts.select && this.select(page); return page; }; @@ -166,7 +179,7 @@ export default class PageManager extends ItemManagerModule { * const somePage = pageManager.get('page-id'); * pageManager.remove(somePage); */ - remove(page, opts = {}) { + remove(page: string | Page, opts: any = {}) { const { em } = this; const pg = isString(page) ? this.get(page) : page; const rm = () => { @@ -184,8 +197,8 @@ export default class PageManager extends ItemManagerModule { * @example * const somePage = pageManager.get('page-id'); */ - get(id) { - return this.pages.filter(p => p.get('id') === id)[0]; + get(id: string) { + return this.pages.filter((p) => p.get(p.idAttribute) === id)[0]; } /** @@ -196,17 +209,7 @@ export default class PageManager extends ItemManagerModule { */ getMain() { const { pages } = this; - return pages.filter(p => p.get('type') === typeMain)[0] || pages.at(0); - } - - /** - * Get all pages - * @returns {Array<[Page]>} - * @example - * const arrayOfPages = pageManager.getAll(); - */ - getAll() { - return [...this.pages.models]; + return pages.filter((p) => p.get("type") === typeMain)[0] || pages.at(0); } /** @@ -219,14 +222,13 @@ export default class PageManager extends ItemManagerModule { */ getAllWrappers() { const pages = this.getAll(); - return unique(flatten(pages.map(page => page.getAllFrames().map(frame => frame.getComponent())))); - } - - getAllMap() { - return this.getAll().reduce((acc, i) => { - acc[i.get('id')] = i; - return acc; - }, {}); + return unique( + flatten( + pages.map((page) => + page.getAllFrames().map((frame) => frame.getComponent()) + ) + ) + ); } /** @@ -239,11 +241,11 @@ export default class PageManager extends ItemManagerModule { * const somePage = pageManager.get('page-id'); * pageManager.select(somePage); */ - select(page, opts = {}) { + select(page: string | Page, opts = {}) { const pg = isString(page) ? this.get(page) : page; if (pg) { this.em.trigger(evPageSelectBefore, pg, opts); - this.model.set('selected', pg, opts); + this.model.set("selected", pg, opts); } return this; } @@ -255,21 +257,22 @@ export default class PageManager extends ItemManagerModule { * const selectedPage = pageManager.getSelected(); */ getSelected() { - return this.model.get('selected'); + return this.model.get("selected"); } destroy() { this.pages.off().reset(); this.model.stopListening(); this.model.clear({ silent: true }); - ['selected', 'model'].map(i => (this[i] = 0)); + //@ts-ignore + ["selected", "model"].map((i) => (this[i] = 0)); } store() { return this.getProjectData(); } - load(data) { + load(data: any) { return this.loadProjectData(data, { all: this.pages, reset: true }); } From 19e9dd2d0fcf217c476e766be1f4d738f5dcceb9 Mon Sep 17 00:00:00 2001 From: Alex Date: Sat, 30 Apr 2022 00:03:27 +0200 Subject: [PATCH 6/8] Convert Frames to ts --- src/canvas/model/Canvas.ts | 3 +-- src/canvas/model/Frames.js | 50 -------------------------------------- src/canvas/model/Frames.ts | 45 ++++++++++++++++++++++++++++++++++ 3 files changed, 46 insertions(+), 52 deletions(-) delete mode 100644 src/canvas/model/Frames.js create mode 100644 src/canvas/model/Frames.ts diff --git a/src/canvas/model/Canvas.ts b/src/canvas/model/Canvas.ts index d544810bb..2741e4866 100644 --- a/src/canvas/model/Canvas.ts +++ b/src/canvas/model/Canvas.ts @@ -9,7 +9,7 @@ export default class Canvas extends Backbone.Model { defaults() { return { frame: "", - frames: "", + frames: new Frames(), rulers: false, zoom: 100, x: 0, @@ -28,7 +28,6 @@ export default class Canvas extends Backbone.Model { const { em } = config; this.config = config; this.em = em; - this.set("frames", new Frames(undefined, { em })); this.listenTo(this, "change:zoom", this.onZoomChange); this.listenTo(em, "change:device", this.updateDevice); this.listenTo(em, evPageSelect, this._pageUpdated); diff --git a/src/canvas/model/Frames.js b/src/canvas/model/Frames.js deleted file mode 100644 index 3678a4d6a..000000000 --- a/src/canvas/model/Frames.js +++ /dev/null @@ -1,50 +0,0 @@ -import { expectation } from 'sinon'; -import { bindAll } from 'underscore'; -import { Collection } from '../../common'; -import Frame from './Frame'; - -export default class Frames extends Collection { - constructor(models, config = {}) { - super(models); - bindAll(this, 'itemLoaded'); - this.config = config; - this.on('reset', this.onReset); - this.on('remove', this.onRemove); - } - page; - - onReset(m, opts = {}) { - const prev = opts.previousModels || []; - prev.map(p => this.onRemove(p)); - } - - onRemove(removed) { - removed && removed.onRemove(); - } - - itemLoaded() { - this.loadedItems++; - - if (this.loadedItems >= this.itemsToLoad) { - this.trigger('loaded:all'); - this.listenToLoadItems(0); - } - } - - listenToLoad() { - this.loadedItems = 0; - this.itemsToLoad = this.length; - this.listenToLoadItems(1); - } - - listenToLoadItems(on) { - this.forEach(item => item[on ? 'on' : 'off']('loaded', this.itemLoaded)); - } - - /*add(m, o = {}) { - const { config } = this; - return Collection.prototype.add.call(this, m, { ...o, config }); - }*/ -} - -Frames.prototype.model = Frame; diff --git a/src/canvas/model/Frames.ts b/src/canvas/model/Frames.ts new file mode 100644 index 000000000..bad60196f --- /dev/null +++ b/src/canvas/model/Frames.ts @@ -0,0 +1,45 @@ +import { bindAll } from "underscore"; +import { Collection } from "../../common"; +import Page from "../../pages/model/Page"; +import Frame from "./Frame"; + +export default class Frames extends Collection { + loadedItems = 0; + itemsToLoad = 0; + page?: Page; + + constructor(models?: Frame[]) { + super(models); + bindAll(this, "itemLoaded"); + this.on("reset", this.onReset); + this.on("remove", this.onRemove); + } + + onReset(m: Frame, opts?: { previousModels?: Frame[] }) { + const prev = opts?.previousModels || []; + prev.map((p) => this.onRemove(p)); + } + + onRemove(removed?: Frame) { + removed?.onRemove(); + } + + itemLoaded() { + this.loadedItems++; + + if (this.loadedItems >= this.itemsToLoad) { + this.trigger("loaded:all"); + this.listenToLoadItems(false); + } + } + + listenToLoad() { + this.loadedItems = 0; + this.itemsToLoad = this.length; + this.listenToLoadItems(true); + } + + listenToLoadItems(on: boolean) { + this.forEach((item) => item[on ? "on" : "off"]("loaded", this.itemLoaded)); + } +} From 36c470e07edb40aa233e7f39e0cb41c9e4dbaddd Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 2 May 2022 19:22:18 +0200 Subject: [PATCH 7/8] Code cleanup --- src/canvas/index.js | 1 - src/pages/index.ts | 1 - 2 files changed, 2 deletions(-) diff --git a/src/canvas/index.js b/src/canvas/index.js index 1945bae7a..f71e56f55 100644 --- a/src/canvas/index.js +++ b/src/canvas/index.js @@ -668,7 +668,6 @@ export default class CanvasModule { * }); */ addFrame(props = {}, opts = {}) { - console.log(opts); return this.canvas.frames.add(new Frame({ ...props }, { em: this.em }), opts); } diff --git a/src/pages/index.ts b/src/pages/index.ts index 36f158bbc..c7d903cf2 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -93,7 +93,6 @@ export default class PageManager extends ItemManagerModule { constructor(em: EditorModel) { super(em, "PageManager", new Pages([]), events); bindAll(this, "_onPageChange"); - this.getAll; const model = new Model({ _undo: true } as any); this.model = model; this.pages.on("reset", (coll) => coll.at(0) && this.select(coll.at(0))); From 28937a2af7c4a89475ee995cd95193285215436d Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Thu, 5 May 2022 17:28:02 +0200 Subject: [PATCH 8/8] eslint fix --- src/abstract/Module.ts | 32 ++--- src/abstract/index.ts | 8 +- src/canvas/model/Canvas.ts | 32 ++--- src/canvas/model/Frame.ts | 80 +++++------ src/canvas/model/Frames.ts | 18 +-- src/editor/index.ts | 32 ++--- src/editor/model/Editor.ts | 262 ++++++++++++++++++------------------- src/pages/index.ts | 44 +++---- src/pages/model/Page.ts | 22 ++-- src/pages/model/Pages.ts | 8 +- 10 files changed, 269 insertions(+), 269 deletions(-) diff --git a/src/abstract/Module.ts b/src/abstract/Module.ts index 07846f5af..5e1a5f074 100644 --- a/src/abstract/Module.ts +++ b/src/abstract/Module.ts @@ -1,7 +1,7 @@ -import { isElement, isUndefined } from "underscore"; -import { Collection } from "../common"; -import EditorModel from "../editor/model/Editor"; -import { createId, isDef } from "../utils/mixins"; +import { isElement, isUndefined } from 'underscore'; +import { Collection } from '../common'; +import EditorModel from '../editor/model/Editor'; +import { createId, isDef } from '../utils/mixins'; export interface IModule extends IBaseModule { @@ -48,7 +48,7 @@ export default abstract class Module ? em.config[name] : em.config[this.name]; const cfg = cfgParent === true ? {} : cfgParent || {}; - cfg.pStylePrefix = em.config.pStylePrefix || ""; + cfg.pStylePrefix = em.config.pStylePrefix || ''; if (!isUndefined(cfgParent) && !cfgParent) { cfg._disable = 1; @@ -120,15 +120,15 @@ export abstract class ItemManagerModule< ) { const { all, onResult, reset } = param; const key = this.storageKey; - const opts: any = { action: "load" }; + const opts: any = { action: 'load' }; const coll = all || this.all; let result = data[key]; - if (typeof result == "string") { + if (typeof result == 'string') { try { result = JSON.parse(result); } catch (err) { - this.__logWarn("Data parsing failed", { input: result }); + this.__logWarn('Data parsing failed', { input: result }); } } @@ -167,19 +167,19 @@ export abstract class ItemManagerModule< all && em && all - .on("add", (m: any, c: any, o: any) => em.trigger(events.add, m, o)) - .on("remove", (m: any, c: any, o: any) => + .on('add', (m: any, c: any, o: any) => em.trigger(events.add, m, o)) + .on('remove', (m: any, c: any, o: any) => em.trigger(events.remove, m, o) ) - .on("change", (p: any, c: any) => + .on('change', (p: any, c: any) => em.trigger(events.update, p, p.changedAttributes(), c) ) - .on("all", this.__catchAllEvent, this); + .on('all', this.__catchAllEvent, this); // Register collections this.cls = [all].concat(opts.collections || []); // Propagate events ((opts.propagate as any[]) || []).forEach(({ entity, event }) => { - entity.on("all", (ev: any, model: any, coll: any, opts: any) => { + entity.on('all', (ev: any, model: any, coll: any, opts: any) => { const options = opts || coll; const opt = { event: ev, ...options }; [em, all].map((md) => md.trigger(event, model, opt)); @@ -233,15 +233,15 @@ export abstract class ItemManagerModule< } __listenAdd(model: TCollection, event: string) { - model.on("add", (m, c, o) => this.em.trigger(event, m, o)); + model.on('add', (m, c, o) => this.em.trigger(event, m, o)); } __listenRemove(model: TCollection, event: string) { - model.on("remove", (m, c, o) => this.em.trigger(event, m, o)); + model.on('remove', (m, c, o) => this.em.trigger(event, m, o)); } __listenUpdate(model: TCollection, event: string) { - model.on("change", (p, c) => + model.on('change', (p, c) => this.em.trigger(event, p, p.changedAttributes(), c) ); } diff --git a/src/abstract/index.ts b/src/abstract/index.ts index 7f5814fa0..5469287af 100644 --- a/src/abstract/index.ts +++ b/src/abstract/index.ts @@ -1,4 +1,4 @@ -export { default as Model } from "./Model"; -export { default as Collection } from "./Collection"; -export { default as View } from "./View"; -export { default as Module } from "./Module"; +export { default as Model } from './Model'; +export { default as Collection } from './Collection'; +export { default as View } from './View'; +export { default as Module } from './Module'; diff --git a/src/canvas/model/Canvas.ts b/src/canvas/model/Canvas.ts index 2741e4866..6bd976a57 100644 --- a/src/canvas/model/Canvas.ts +++ b/src/canvas/model/Canvas.ts @@ -1,14 +1,14 @@ -import { Model } from "../../common"; -import Backbone from "backbone"; -import { evPageSelect } from "../../pages"; -import Frames from "./Frames"; -import EditorModel from "../../editor/model/Editor"; -import Page from "../../pages/model/Page"; +import { Model } from '../../common'; +import Backbone from 'backbone'; +import { evPageSelect } from '../../pages'; +import Frames from './Frames'; +import EditorModel from '../../editor/model/Editor'; +import Page from '../../pages/model/Page'; export default class Canvas extends Backbone.Model { defaults() { return { - frame: "", + frame: '', frames: new Frames(), rulers: false, zoom: 100, @@ -28,29 +28,29 @@ export default class Canvas extends Backbone.Model { const { em } = config; this.config = config; this.em = em; - this.listenTo(this, "change:zoom", this.onZoomChange); - this.listenTo(em, "change:device", this.updateDevice); + this.listenTo(this, 'change:zoom', this.onZoomChange); + this.listenTo(em, 'change:device', this.updateDevice); this.listenTo(em, evPageSelect, this._pageUpdated); } get frames(): Frames { - return this.get("frames"); + return this.get('frames'); } init() { const { em } = this; - const mainPage = em.get("PageManager").getMain(); + const mainPage = em.get('PageManager').getMain(); const frame = mainPage.getMainFrame(); - this.set("frames", mainPage.getFrames()); + this.set('frames', mainPage.getFrames()); this.updateDevice({ frame }); } _pageUpdated(page: Page, prev?: Page) { const { em } = this; 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 prev?.getFrames().map((frame) => frame.disable()); - this.set("frames", page.getFrames()); + this.set('frames', page.getFrames()); } updateDevice(opts: any = {}) { @@ -65,7 +65,7 @@ export default class Canvas extends Backbone.Model { } onZoomChange() { - const zoom = this.get("zoom"); - zoom < 1 && this.set("zoom", 1); + const zoom = this.get('zoom'); + zoom < 1 && this.set('zoom', 1); } } diff --git a/src/canvas/model/Frame.ts b/src/canvas/model/Frame.ts index a83d33728..d21ba29b5 100644 --- a/src/canvas/model/Frame.ts +++ b/src/canvas/model/Frame.ts @@ -1,15 +1,15 @@ -import { result, forEach, isEmpty, isString } from "underscore"; -import { Model } from "../../common"; -import { Component } from "../../dom_components/model/Component"; -import Components from "../../dom_components/model/Components"; -import ComponentWrapper from "../../dom_components/model/ComponentWrapper"; -import EditorModel from "../../editor/model/Editor"; -import { isComponent, isObject } from "../../utils/mixins"; -import FrameView from "../view/FrameView"; -import Frames from "./Frames"; - -const keyAutoW = "__aw"; -const keyAutoH = "__ah"; +import { result, forEach, isEmpty, isString } from 'underscore'; +import { Model } from '../../common'; +import { Component } from '../../dom_components/model/Component'; +import Components from '../../dom_components/model/Components'; +import ComponentWrapper from '../../dom_components/model/ComponentWrapper'; +import EditorModel from '../../editor/model/Editor'; +import { isComponent, isObject } from '../../utils/mixins'; +import FrameView from '../view/FrameView'; +import Frames from './Frames'; + +const keyAutoW = '__aw'; +const keyAutoH = '__ah'; /** * @property {Object|String} component Wrapper component definition. You can also pass an HTML string as components of the default wrapper component. @@ -29,10 +29,10 @@ export default class Frame extends Model { width: null, height: null, head: [], - component: "", - styles: "", + component: '', + styles: '', _undo: true, - _undoexc: ["changesCount"], + _undoexc: ['changesCount'], }; } em: EditorModel; @@ -42,22 +42,22 @@ export default class Frame extends Model { super(props); const { em } = opts; const { styles, component } = this.attributes; - const domc = em.get("DomComponents"); + const domc = em.get('DomComponents'); const conf = domc.getConfig(); - const allRules = em.get("CssComposer").getAll(); + const allRules = em.get('CssComposer').getAll(); const idMap: any = {}; this.em = em; const modOpts = { em, config: conf, frame: this, idMap }; if (!isComponent(component)) { const wrp = isObject(component) ? component : { components: component }; - !wrp.type && (wrp.type = "wrapper"); - const Wrapper = domc.getType("wrapper").model; - this.set("component", new Wrapper(wrp, modOpts)); + !wrp.type && (wrp.type = 'wrapper'); + const Wrapper = domc.getType('wrapper').model; + this.set('component', new Wrapper(wrp, modOpts)); } if (!styles) { - this.set("styles", allRules); + this.set('styles', allRules); } else if (!isObject(styles)) { // Avoid losing styles on remapped components const idMapKeys = Object.keys(idMap); @@ -69,7 +69,7 @@ export default class Frame extends Model { const idSel = sSel.name && sSel.type === 2 && sSel; if (idSel && idMap[idSel.name]) { idSel.name = idMap[idSel.name]; - } else if (isString(sSel) && sSel[0] === "#") { + } else if (isString(sSel) && sSel[0] === '#') { const prevId = sSel.substring(1); if (prevId && idMap[prevId]) { sel[0] = `#${idMap[prevId]}`; @@ -80,7 +80,7 @@ export default class Frame extends Model { } allRules.add(styles); - this.set("styles", allRules); + this.set('styles', allRules); } !props.width && this.set(keyAutoW, 1); @@ -95,19 +95,19 @@ export default class Frame extends Model { if (opt.temporary || opt.noCount || opt.avoidStore) { return; } - this.set("changesCount", this.get("changesCount") + 1); + this.set('changesCount', this.get('changesCount') + 1); } getComponent(): ComponentWrapper { - return this.get("component"); + return this.get('component'); } getStyles() { - return this.get("styles"); + return this.get('styles'); } disable() { - this.trigger("disable"); + this.trigger('disable'); } remove() { @@ -117,12 +117,12 @@ export default class Frame extends Model { } getHead() { - const head = this.get("head") || []; + const head = this.get('head') || []; return [...head]; } setHead(value: any) { - return this.set("head", [...value]); + return this.set('head', [...value]); } addHeadItem(item: any) { @@ -153,24 +153,24 @@ export default class Frame extends Model { } addLink(href: string) { - const tag = "link"; - !this.getHeadByAttr("href", href, tag) && + const tag = 'link'; + !this.getHeadByAttr('href', href, tag) && this.addHeadItem({ tag, attributes: { href, - rel: "stylesheet", + rel: 'stylesheet', }, }); } removeLink(href: string) { - this.removeHeadByAttr("href", href, "link"); + this.removeHeadByAttr('href', href, 'link'); } addScript(src: string) { - const tag = "script"; - !this.getHeadByAttr("src", src, tag) && + const tag = 'script'; + !this.getHeadByAttr('src', src, tag) && this.addHeadItem({ tag, attributes: { src }, @@ -178,7 +178,7 @@ export default class Frame extends Model { } removeScript(src: string) { - this.removeHeadByAttr("src", src, "script"); + this.removeHeadByAttr('src', src, 'script'); } getPage() { @@ -186,12 +186,12 @@ export default class Frame extends Model { } _emitUpdated(data = {}) { - this.em.trigger("frame:updated", { frame: this, ...data }); + this.em.trigger('frame:updated', { frame: this, ...data }); } toJSON(opts: any = {}) { const obj = Model.prototype.toJSON.call(this, opts); - const defaults = result(this, "defaults"); + const defaults = result(this, 'defaults'); if (opts.fromUndo) delete obj.component; delete obj.styles; @@ -201,14 +201,14 @@ export default class Frame extends Model { // Remove private keys forEach(obj, (value, key) => { - key.indexOf("_") === 0 && delete obj[key]; + key.indexOf('_') === 0 && delete obj[key]; }); forEach(defaults, (value, key) => { if (obj[key] === value) delete obj[key]; }); - forEach(["attributes", "head"], (prop) => { + forEach(['attributes', 'head'], (prop) => { if (isEmpty(obj[prop])) delete obj[prop]; }); diff --git a/src/canvas/model/Frames.ts b/src/canvas/model/Frames.ts index bad60196f..2db54e0f9 100644 --- a/src/canvas/model/Frames.ts +++ b/src/canvas/model/Frames.ts @@ -1,7 +1,7 @@ -import { bindAll } from "underscore"; -import { Collection } from "../../common"; -import Page from "../../pages/model/Page"; -import Frame from "./Frame"; +import { bindAll } from 'underscore'; +import { Collection } from '../../common'; +import Page from '../../pages/model/Page'; +import Frame from './Frame'; export default class Frames extends Collection { loadedItems = 0; @@ -10,9 +10,9 @@ export default class Frames extends Collection { constructor(models?: Frame[]) { super(models); - bindAll(this, "itemLoaded"); - this.on("reset", this.onReset); - this.on("remove", this.onRemove); + bindAll(this, 'itemLoaded'); + this.on('reset', this.onReset); + this.on('remove', this.onRemove); } onReset(m: Frame, opts?: { previousModels?: Frame[] }) { @@ -28,7 +28,7 @@ export default class Frames extends Collection { this.loadedItems++; if (this.loadedItems >= this.itemsToLoad) { - this.trigger("loaded:all"); + this.trigger('loaded:all'); this.listenToLoadItems(false); } } @@ -40,6 +40,6 @@ export default class Frames extends Collection { } listenToLoadItems(on: boolean) { - this.forEach((item) => item[on ? "on" : "off"]("loaded", this.itemLoaded)); + this.forEach((item) => item[on ? 'on' : 'off']('loaded', this.itemLoaded)); } } diff --git a/src/editor/index.ts b/src/editor/index.ts index af7907b06..42dfd7627 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -54,14 +54,14 @@ * ## Methods * @module Editor */ -import { EventHandler } from "backbone"; -import { isUndefined } from "underscore"; -import { IBaseModule } from "../abstract/Module"; -import cash from "../utils/cash-dom"; -import html from "../utils/html"; -import defaults from "./config/config"; -import EditorModel from "./model/Editor"; -import EditorView from "./view/EditorView"; +import { EventHandler } from 'backbone'; +import { isUndefined } from 'underscore'; +import { IBaseModule } from '../abstract/Module'; +import cash from '../utils/cash-dom'; +import html from '../utils/html'; +import defaults from './config/config'; +import EditorModel from './model/Editor'; +import EditorView from './view/EditorView'; export default class EditorModule implements IBaseModule { constructor(config = {}, opts: any = {}) { @@ -264,7 +264,7 @@ export default class EditorModule implements IBaseModule { * @return {Components} */ getComponents() { - return this.em.get("DomComponents").getComponents(); + return this.em.get('DomComponents').getComponents(); } /** @@ -272,7 +272,7 @@ export default class EditorModule implements IBaseModule { * @return {Component} */ getWrapper() { - return this.em.get("DomComponents").getWrapper(); + return this.em.get('DomComponents').getWrapper(); } /** @@ -320,7 +320,7 @@ export default class EditorModule implements IBaseModule { * @return {Object} */ getStyle() { - return this.em.get("CssComposer").getAll(); + return this.em.get('CssComposer').getAll(); } /** @@ -458,7 +458,7 @@ export default class EditorModule implements IBaseModule { * editor.setDevice('Tablet'); */ setDevice(name: string) { - this.em.set("device", name); + this.em.set('device', name); return this; } @@ -471,7 +471,7 @@ export default class EditorModule implements IBaseModule { * // 'Tablet' */ getDevice() { - return this.em.get("device"); + return this.em.get('device'); } /** @@ -483,7 +483,7 @@ export default class EditorModule implements IBaseModule { * editor.runCommand('myCommand', {someValue: 1}); */ runCommand(id: string, options = {}) { - return this.em.get("Commands").run(id, options); + return this.em.get('Commands').run(id, options); } /** @@ -495,7 +495,7 @@ export default class EditorModule implements IBaseModule { * editor.stopCommand('myCommand', {someValue: 1}); */ stopCommand(id: string, options = {}) { - return this.em.get("Commands").stop(id, options); + return this.em.get('Commands').stop(id, options); } /** @@ -784,7 +784,7 @@ export default class EditorModule implements IBaseModule { * }); */ onReady(clb: EventHandler) { - this.em.get("ready") ? clb(this) : this.em.on("load", clb); + this.em.get('ready') ? clb(this) : this.em.on('load', clb); } /** diff --git a/src/editor/model/Editor.ts b/src/editor/model/Editor.ts index 3ccc40c74..30008da67 100644 --- a/src/editor/model/Editor.ts +++ b/src/editor/model/Editor.ts @@ -5,44 +5,44 @@ import { toArray, keys, bindAll, -} from "underscore"; -import Backbone from "backbone"; -import $ from "../../utils/cash-dom"; -import Extender from "../../utils/extender"; -import { getModel, hasWin, isEmptyObj } from "../../utils/mixins"; -import { Model } from "../../common"; -import Selected from "./Selected"; -import FrameView from "../../canvas/view/FrameView"; -import EditorModule from ".."; -import EditorView from "../view/EditorView"; -import { IModule } from "../../abstract/Module"; +} from 'underscore'; +import Backbone from 'backbone'; +import $ from '../../utils/cash-dom'; +import Extender from '../../utils/extender'; +import { getModel, hasWin, isEmptyObj } from '../../utils/mixins'; +import { Model } from '../../common'; +import Selected from './Selected'; +import FrameView from '../../canvas/view/FrameView'; +import EditorModule from '..'; +import EditorView from '../view/EditorView'; +import { IModule } from '../../abstract/Module'; //@ts-ignore Backbone.$ = $; const deps = [ - require("utils"), - require("i18n"), - require("keymaps"), - require("undo_manager"), - require("storage_manager"), - require("device_manager"), - require("parser"), - require("style_manager"), - require("selector_manager"), - require("modal_dialog"), - require("code_manager"), - require("panels"), - require("rich_text_editor"), - require("asset_manager"), - require("css_composer"), - require("pages"), - require("trait_manager"), - require("dom_components"), - require("navigator"), - require("canvas"), - require("commands"), - require("block_manager"), + require('utils'), + require('i18n'), + require('keymaps'), + require('undo_manager'), + require('storage_manager'), + require('device_manager'), + require('parser'), + require('style_manager'), + require('selector_manager'), + require('modal_dialog'), + require('code_manager'), + require('panels'), + require('rich_text_editor'), + require('asset_manager'), + require('css_composer'), + require('pages'), + require('trait_manager'), + require('dom_components'), + require('navigator'), + require('canvas'), + require('commands'), + require('block_manager'), ]; const ts_deps: any[] = []; @@ -74,7 +74,7 @@ export default class EditorModel extends Model { modules: [], toLoad: [], opened: {}, - device: "", + device: '', }; } @@ -106,15 +106,15 @@ export default class EditorModel extends Model { super(); this._config = conf; const { config } = this; - this.set("Config", conf); - this.set("modules", []); - this.set("toLoad", []); - this.set("storables", []); - this.set("selected", new Selected()); - this.set("dmode", config.dragMode); + this.set('Config', conf); + this.set('modules', []); + this.set('toLoad', []); + this.set('storables', []); + this.set('selected', new Selected()); + this.set('dmode', config.dragMode); const { el, log } = config; const toLog = log === true ? keys(logs) : isArray(log) ? log : []; - bindAll(this, "initBaseColorPicker"); + bindAll(this, 'initBaseColorPicker'); if (el && config.fromElement) { config.components = el.innerHTML; @@ -125,7 +125,7 @@ export default class EditorModel extends Model { res[next.nodeName] = next.nodeValue; return res; }, {}) - : ""; + : ''; // Move components to pages if (config.components && !config.pageManager) { @@ -135,13 +135,13 @@ export default class EditorModel extends Model { // Load modules deps.forEach((name) => this.loadModule(name)); ts_deps.forEach((name) => this.tsLoadModule(name)); - this.on("change:componentHovered", this.componentHovered, this); - this.on("change:changesCount", this.updateChanges, this); - this.on("change:readyLoad change:readyCanvas", this._checkReady, this); + this.on('change:componentHovered', this.componentHovered, this); + this.on('change:changesCount', this.updateChanges, this); + this.on('change:readyLoad change:readyCanvas', this._checkReady, this); toLog.forEach((e) => this.listenLog(e)); // Deprecations - [{ from: "change:selectedComponent", to: "component:toggled" }].forEach( + [{ from: 'change:selectedComponent', to: 'component:toggled' }].forEach( (event) => { const eventFrom = event.from; const eventTo = event.to; @@ -157,11 +157,11 @@ export default class EditorModel extends Model { _checkReady() { 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); } } @@ -195,7 +195,7 @@ export default class EditorModel extends Model { */ loadOnStart() { const { projectData, headless } = this.config; - const sm = this.get("StorageManager"); + const sm = this.get('StorageManager'); // In `onLoad`, the module will try to load the data from its configurations. this.toLoad.forEach((mdl) => mdl.onLoad()); @@ -203,7 +203,7 @@ export default class EditorModel extends Model { // Stuff to do post load const postLoad = () => { this.modules.forEach((mdl) => mdl.postLoad && mdl.postLoad(this)); - this.set("readyLoad", 1); + this.set('readyLoad', 1); }; if (headless) { @@ -233,8 +233,8 @@ export default class EditorModel extends Model { undoManager: false, }); // We only need to load a few modules - ["PageManager", "Canvas"].forEach((key) => shallow.get(key).onLoad()); - this.set("shallow", shallow); + ['PageManager', 'Canvas'].forEach((key) => shallow.get(key).onLoad()); + this.set('shallow', shallow); } /** @@ -243,11 +243,11 @@ export default class EditorModel extends Model { * @private */ updateChanges() { - const stm = this.get("StorageManager"); + const stm = this.get('StorageManager'); const changes = this.getDirtyCount(); this.updateItr && clearTimeout(this.updateItr); //@ts-ignore - this.updateItr = setTimeout(() => this.trigger("update")); + this.updateItr = setTimeout(() => this.trigger('update')); if (this.config.noticeOnUnload) { window.onbeforeunload = changes ? () => true : null; @@ -273,7 +273,7 @@ export default class EditorModel extends Model { ? config[name] : config[Mod.name]; const cfg = cfgParent === true ? {} : cfgParent || {}; - cfg.pStylePrefix = config.pStylePrefix || ""; + cfg.pStylePrefix = config.pStylePrefix || ''; if (!isUndefined(cfgParent) && !cfgParent) { cfg._disable = 1; @@ -324,11 +324,11 @@ export default class EditorModel extends Model { this.initialize(opts); this.destroyed = false; } - this.set("Editor", editor); + this.set('Editor', editor); } getEditor() { - return this.get("Editor"); + return this.get('Editor'); } /** @@ -346,7 +346,7 @@ export default class EditorModel extends Model { opt.temporary || opt.noCount || opt.avoidStore || - !this.get("ready") + !this.get('ready') ) { return; } @@ -356,7 +356,7 @@ export default class EditorModel extends Model { this.timedInterval = setTimeout(() => { const curr = this.getDirtyCount() || 0; const { unset, ...opts } = opt; - this.set("changesCount", curr + 1, opts); + this.set('changesCount', curr + 1, opts); }, 0); } @@ -372,9 +372,9 @@ export default class EditorModel extends Model { * @private * */ componentHovered(editor: any, component: any, options: any) { - const prev = this.previous("componentHovered"); - prev && this.trigger("component:unhovered", prev, options); - component && this.trigger("component:hovered", component, options); + const prev = this.previous('componentHovered'); + prev && this.trigger('component:unhovered', prev, options); + component && this.trigger('component:hovered', component, options); } /** @@ -419,13 +419,13 @@ export default class EditorModel extends Model { let model = getModel(el, undefined); if (model) { - this.trigger("component:select:before", model, opts); + this.trigger('component:select:before', model, opts); // Check for valid selectable - if (!model.get("selectable") || opts.abort) { + if (!model.get('selectable') || opts.abort) { if (opts.useValid) { let parent = model.parent(); - while (parent && !parent.get("selectable")) + while (parent && !parent.get('selectable')) parent = parent.parent(); model = parent; } else { @@ -438,7 +438,7 @@ export default class EditorModel extends Model { if (ctrlKey && mltSel) { return this.toggleSelected(model); } else if (shiftKey && mltSel) { - this.clearSelection(this.get("Canvas").getWindow()); + this.clearSelection(this.get('Canvas').getWindow()); const coll = model.collection; const index = model.index(); let min: number | undefined, max: number | undefined; @@ -496,7 +496,7 @@ export default class EditorModel extends Model { const { selected } = this; opts.forceChange && this.removeSelected(model, opts); selected.addComponent(model, opts); - model && this.trigger("component:select", model, opts); + model && this.trigger('component:select', model, opts); }); } @@ -536,21 +536,21 @@ export default class EditorModel extends Model { * @private */ setHovered(el: any, opts: any = {}) { - if (!el) return this.set("componentHovered", ""); + if (!el) return this.set('componentHovered', ''); - const ev = "component:hover"; + const ev = 'component:hover'; let model = getModel(el, undefined); if (!model) return; - opts.forceChange && this.set("componentHovered", ""); + opts.forceChange && this.set('componentHovered', ''); this.trigger(`${ev}:before`, model, opts); // Check for valid hoverable - if (!model.get("hoverable")) { + if (!model.get('hoverable')) { if (opts.useValid && !opts.abort) { let parent = model && model.parent(); - while (parent && !parent.get("hoverable")) parent = parent.parent(); + while (parent && !parent.get('hoverable')) parent = parent.parent(); model = parent; } else { return; @@ -558,13 +558,13 @@ export default class EditorModel extends Model { } if (!opts.abort) { - this.set("componentHovered", model, opts); + this.set('componentHovered', model, opts); this.trigger(ev, model, opts); } } getHovered() { - return this.get("componentHovered"); + return this.get('componentHovered'); } /** @@ -575,7 +575,7 @@ export default class EditorModel extends Model { * @public */ setComponents(components: any, opt = {}) { - return this.get("DomComponents").setComponents(components, opt); + return this.get('DomComponents').setComponents(components, opt); } /** @@ -584,13 +584,13 @@ export default class EditorModel extends Model { * @private */ getComponents() { - var cmp = this.get("DomComponents"); - var cm = this.get("CodeManager"); + var cmp = this.get('DomComponents'); + var cm = this.get('CodeManager'); if (!cmp || !cm) return; var wrp = cmp.getComponents(); - return cm.getCode(wrp, "json"); + return cm.getCode(wrp, 'json'); } /** @@ -601,7 +601,7 @@ export default class EditorModel extends Model { * @public */ setStyle(style: any, opt = {}) { - const cssc = this.get("CssComposer"); + const cssc = this.get('CssComposer'); cssc.clear(opt); cssc.getAll().add(style, opt); return this; @@ -624,7 +624,7 @@ export default class EditorModel extends Model { * @private */ getStyle() { - return this.get("CssComposer").getAll(); + return this.get('CssComposer').getAll(); } /** @@ -633,7 +633,7 @@ export default class EditorModel extends Model { * @returns {this} */ setState(value: string) { - this.set("state", value); + this.set('state', value); return this; } @@ -642,7 +642,7 @@ export default class EditorModel extends Model { * @returns {String} */ getState() { - return this.get("state") || ""; + return this.get('state') || ''; } /** @@ -654,15 +654,15 @@ export default class EditorModel extends Model { getHtml(opts: any = {}) { const { config } = this; const { optsHtml } = config; - const js = config.jsInHtml ? this.getJs(opts) : ""; - const cmp = opts.component || this.get("DomComponents").getComponent(); + const js = config.jsInHtml ? this.getJs(opts) : ''; + const cmp = opts.component || this.get('DomComponents').getComponent(); let html = cmp - ? this.get("CodeManager").getCode(cmp, "html", { + ? this.get('CodeManager').getCode(cmp, 'html', { ...optsHtml, ...opts, }) - : ""; - html += js ? `` : ""; + : ''; + html += js ? `` : ''; return html; } @@ -679,18 +679,18 @@ export default class EditorModel extends Model { const keepUnusedStyles = !isUndefined(opts.keepUnusedStyles) ? opts.keepUnusedStyles : config.keepUnusedStyles; - const cssc = this.get("CssComposer"); - const wrp = opts.component || this.get("DomComponents").getComponent(); - const protCss = !avoidProt ? config.protectedCss : ""; + const cssc = this.get('CssComposer'); + const wrp = opts.component || this.get('DomComponents').getComponent(); + const protCss = !avoidProt ? config.protectedCss : ''; const css = wrp && - this.get("CodeManager").getCode(wrp, "css", { + this.get('CodeManager').getCode(wrp, 'css', { cssc, keepUnusedStyles, ...optsCss, ...opts, }); - return wrp ? (opts.json ? css : protCss + css) : ""; + return wrp ? (opts.json ? css : protCss + css) : ''; } /** @@ -699,8 +699,8 @@ export default class EditorModel extends Model { * @public */ getJs(opts: any = {}) { - var wrp = opts.component || this.get("DomComponents").getWrapper(); - return wrp ? this.get("CodeManager").getCode(wrp, "js").trim() : ""; + var wrp = opts.component || this.get('DomComponents').getWrapper(); + return wrp ? this.get('CodeManager').getCode(wrp, 'js').trim() : ''; } /** @@ -709,7 +709,7 @@ export default class EditorModel extends Model { */ async store(options?: any) { const data = this.storeData(); - await this.get("StorageManager").store(data, options); + await this.get('StorageManager').store(data, options); this.clearDirtyCount(); return data; } @@ -719,7 +719,7 @@ export default class EditorModel extends Model { * @public */ async load(options?: any) { - const result = await this.get("StorageManager").load(options); + const result = await this.get('StorageManager').load(options); this.loadData(result); return result; } @@ -728,7 +728,7 @@ export default class EditorModel extends Model { let result = {}; // Sync content if there is an active RTE const editingCmp = this.getEditing(); - editingCmp && editingCmp.trigger("sync:content", { noCount: true }); + editingCmp && editingCmp.trigger('sync:content', { noCount: true }); this.storables.forEach((m) => { result = { ...result, ...m.store(1) }; @@ -750,8 +750,8 @@ export default class EditorModel extends Model { * @private */ getDeviceModel() { - var name = this.get("device"); - return this.get("DeviceManager").get(name); + var name = this.get('device'); + return this.get('DeviceManager').get(name); } /** @@ -760,7 +760,7 @@ export default class EditorModel extends Model { * @private */ runDefault(opts = {}) { - var command = this.get("Commands").get(this.config.defaultCommand); + var command = this.get('Commands').get(this.config.defaultCommand); if (!command || this.defaultRunning) return; command.stop(this, this, opts); command.run(this, this, opts); @@ -773,7 +773,7 @@ export default class EditorModel extends Model { * @private */ stopDefault(opts = {}) { - const commands = this.get("Commands"); + const commands = this.get('Commands'); const command = commands.get(this.config.defaultCommand); if (!command || !this.defaultRunning) return; command.stop(this, this, opts); @@ -785,9 +785,9 @@ export default class EditorModel extends Model { * @public */ refreshCanvas(opts: any = {}) { - this.set("canvasOffset", null); - this.set("canvasOffset", this.get("Canvas").getOffset()); - opts.tools && this.trigger("canvas:updateTools"); + this.set('canvasOffset', null); + this.set('canvasOffset', this.get('Canvas').getOffset()); + opts.tools && this.trigger('canvas:updateTools'); } /** @@ -810,8 +810,8 @@ export default class EditorModel extends Model { const device = this.getDeviceModel(); const condition = config.mediaCondition; const preview = config.devicePreviewMode; - const width = device && device.get("widthMedia"); - return device && width && !preview ? `(${condition}: ${width})` : ""; + const width = device && device.get('widthMedia'); + return device && width && !preview ? `(${condition}: ${width})` : ''; } /** @@ -819,15 +819,15 @@ export default class EditorModel extends Model { * @return {Component} */ getWrapper() { - return this.get("DomComponents").getWrapper(); + return this.get('DomComponents').getWrapper(); } setCurrentFrame(frameView: FrameView) { - return this.set("currentFrame", frameView); + return this.set('currentFrame', frameView); } getCurrentFrame(): FrameView { - return this.get("currentFrame"); + return this.get('currentFrame'); } getCurrentFrameModel() { @@ -836,7 +836,7 @@ export default class EditorModel extends Model { getIcon(icon: string) { const icons = this.config.icons || {}; - return icons[icon] || ""; + return icons[icon] || ''; } /** @@ -849,23 +849,23 @@ export default class EditorModel extends Model { } clearDirtyCount() { - return this.set("changesCount", 0); + return this.set('changesCount', 0); } getZoomDecimal() { - return this.get("Canvas").getZoomDecimal(); + return this.get('Canvas').getZoomDecimal(); } getZoomMultiplier() { - return this.get("Canvas").getZoomMultiplier(); + return this.get('Canvas').getZoomMultiplier(); } setDragMode(value: string) { - return this.set("dmode", value); + return this.set('dmode', value); } t(...args: any[]) { - const i18n = this.get("I18n"); + const i18n = this.get('I18n'); return i18n?.t(...args); } @@ -874,7 +874,7 @@ export default class EditorModel extends Model { * @returns {Boolean} */ inAbsoluteMode() { - return this.get("dmode") === "absolute"; + return this.get('dmode') === 'absolute'; } /** @@ -884,7 +884,7 @@ export default class EditorModel extends Model { const { config, view } = this; const editor = this.getEditor(); const { editors = [] } = config.grapesjs || {}; - const shallow = this.get("shallow"); + const shallow = this.get('shallow'); shallow?.destroyAll(); this.stopListening(); this.stopDefault(); @@ -905,22 +905,22 @@ export default class EditorModel extends Model { } getEditing() { - const res = this.get("editing"); + const res = this.get('editing'); return (res && res.model) || null; } setEditing(value: boolean) { - this.set("editing", value); + this.set('editing', value); return this; } isEditing() { - return !!this.get("editing"); + return !!this.get('editing'); } log(msg: string, opts: any = {}) { - const { ns, level = "debug" } = opts; - this.trigger("log", msg, opts); + const { ns, level = 'debug' } = opts; + this.trigger('log', msg, opts); level && this.trigger(`log:${level}`, msg, opts); if (ns) { @@ -931,7 +931,7 @@ export default class EditorModel extends Model { } logInfo(msg: string, opts?: any) { - this.log(msg, { ...opts, level: "info" }); + this.log(msg, { ...opts, level: 'info' }); } logWarning(msg: string, opts?: any) { @@ -939,7 +939,7 @@ export default class EditorModel extends Model { } logError(msg: string, opts?: any) { - this.log(msg, { ...opts, level: "error" }); + this.log(msg, { ...opts, level: 'error' }); } initBaseColorPicker(el: any, opts = {}) { @@ -951,13 +951,13 @@ export default class EditorModel extends Model { //@ts-ignore return $(el).spectrum({ containerClassName: `${ppfx}one-bg ${ppfx}two-color`, - appendTo: elToAppend || "body", + appendTo: elToAppend || 'body', maxSelectionSize: 8, showPalette: true, palette: [], showAlpha: true, - chooseText: "Ok", - cancelText: "⨯", + chooseText: 'Ok', + cancelText: '⨯', ...opts, ...colorPicker, }); @@ -970,7 +970,7 @@ export default class EditorModel extends Model { */ skip(clb: Function) { this.__skip = true; - const um = this.get("UndoManager"); + const um = this.get('UndoManager'); um ? um.skip(clb) : clb(); this.__skip = false; } @@ -984,7 +984,7 @@ export default class EditorModel extends Model { * @private */ data(el: any, name: string, value: any) { - const varName = "_gjs-data"; + const varName = '_gjs-data'; if (!el[varName]) { el[varName] = {}; diff --git a/src/pages/index.ts b/src/pages/index.ts index c7d903cf2..ab0d72ddf 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -44,15 +44,15 @@ * @module Pages */ -import { isString, bindAll, unique, flatten } from "underscore"; -import { createId } from "../utils/mixins"; -import { Model, Module } from "../abstract"; -import { ItemManagerModule, ModuleConfig } from "../abstract/Module"; -import Pages from "./model/Pages"; -import Page from "./model/Page"; -import EditorModel from "../editor/model/Editor"; +import { isString, bindAll, unique, flatten } from 'underscore'; +import { createId } from '../utils/mixins'; +import { Model, Module } from '../abstract'; +import { ItemManagerModule, ModuleConfig } from '../abstract/Module'; +import Pages from './model/Pages'; +import Page from './model/Page'; +import EditorModel from '../editor/model/Editor'; -export const evAll = "page"; +export const evAll = 'page'; export const evPfx = `${evAll}:`; export const evPageSelect = `${evPfx}select`; export const evPageSelectBefore = `${evPageSelect}:before`; @@ -61,8 +61,8 @@ export const evPageAdd = `${evPfx}add`; export const evPageAddBefore = `${evPageAdd}:before`; export const evPageRemove = `${evPfx}remove`; export const evPageRemoveBefore = `${evPageRemove}:before`; -const chnSel = "change:selected"; -const typeMain = "main"; +const chnSel = 'change:selected'; +const typeMain = 'main'; const events = { all: evAll, select: evPageSelect, @@ -78,7 +78,7 @@ interface Config extends ModuleConfig { pages?: string[]; } export default class PageManager extends ItemManagerModule { - storageKey = "pages"; + storageKey = 'pages'; get pages() { return this.all; @@ -91,12 +91,12 @@ export default class PageManager extends ItemManagerModule { * @private */ constructor(em: EditorModel) { - super(em, "PageManager", new Pages([]), events); - bindAll(this, "_onPageChange"); + super(em, 'PageManager', new Pages([]), events); + bindAll(this, '_onPageChange'); const model = new Model({ _undo: true } as any); this.model = model; - this.pages.on("reset", (coll) => coll.at(0) && this.select(coll.at(0))); - this.pages.on("all", this.__onChange, this); + this.pages.on('reset', (coll) => coll.at(0) && this.select(coll.at(0))); + this.pages.on('all', this.__onChange, this); model.on(chnSel, this._onPageChange); return this; @@ -124,16 +124,16 @@ export default class PageManager extends ItemManagerModule { _onPageChange(m: any, page: Page, opts: any) { const { em } = this; - const lm = em.get("LayerManager"); + const lm = em.get('LayerManager'); const mainComp = page.getMainComponent(); lm && mainComp && lm.setRoot(mainComp); - em.trigger(evPageSelect, page, m.previous("selected")); + em.trigger(evPageSelect, page, m.previous('selected')); this.__onChange(chnSel, page, opts); } postLoad() { const { em, model } = this; - const um = em.get("UndoManager"); + const um = em.get('UndoManager'); um && um.add(model); um && um.add(this.pages); } @@ -208,7 +208,7 @@ export default class PageManager extends ItemManagerModule { */ getMain() { const { pages } = this; - return pages.filter((p) => p.get("type") === typeMain)[0] || pages.at(0); + return pages.filter((p) => p.get('type') === typeMain)[0] || pages.at(0); } /** @@ -244,7 +244,7 @@ export default class PageManager extends ItemManagerModule { const pg = isString(page) ? this.get(page) : page; if (pg) { this.em.trigger(evPageSelectBefore, pg, opts); - this.model.set("selected", pg, opts); + this.model.set('selected', pg, opts); } return this; } @@ -256,7 +256,7 @@ export default class PageManager extends ItemManagerModule { * const selectedPage = pageManager.getSelected(); */ getSelected() { - return this.model.get("selected"); + return this.model.get('selected'); } destroy() { @@ -264,7 +264,7 @@ export default class PageManager extends ItemManagerModule { this.model.stopListening(); this.model.clear({ silent: true }); //@ts-ignore - ["selected", "model"].map((i) => (this[i] = 0)); + ['selected', 'model'].map((i) => (this[i] = 0)); } store() { diff --git a/src/pages/model/Page.ts b/src/pages/model/Page.ts index f83caeb0f..c5f072dd8 100644 --- a/src/pages/model/Page.ts +++ b/src/pages/model/Page.ts @@ -1,8 +1,8 @@ -import { result, forEach } from "underscore"; -import { Model } from "../../common"; -import Frames from "../../canvas/model/Frames"; -import Frame from "../../canvas/model/Frame"; -import EditorModel from "../../editor/model/Editor"; +import { result, forEach } from 'underscore'; +import { Model } from '../../common'; +import Frames from '../../canvas/model/Frames'; +import Frame from '../../canvas/model/Frame'; +import EditorModel from '../../editor/model/Editor'; export default class Page extends Model { defaults() { @@ -22,7 +22,7 @@ export default class Page extends Model { if (!props.frames) { defFrame.component = props.component; 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 frames = new Frames( @@ -37,11 +37,11 @@ export default class Page extends Model { } onRemove() { - this.get("frames").reset(); + this.get('frames').reset(); } getFrames(): Frames { - return this.get("frames"); + return this.get('frames'); } /** @@ -57,7 +57,7 @@ export default class Page extends Model { * @returns {String} */ getName(): string { - return this.get("name"); + return this.get('name'); } /** @@ -106,11 +106,11 @@ export default class Page extends Model { toJSON(opts = {}) { const obj = Model.prototype.toJSON.call(this, opts); - const defaults = result(this, "defaults"); + const defaults = result(this, 'defaults'); // Remove private keys forEach(obj, (value, key) => { - key.indexOf("_") === 0 && delete obj[key]; + key.indexOf('_') === 0 && delete obj[key]; }); forEach(defaults, (value, key) => { diff --git a/src/pages/model/Pages.ts b/src/pages/model/Pages.ts index bf8a88ba7..a64755f8f 100644 --- a/src/pages/model/Pages.ts +++ b/src/pages/model/Pages.ts @@ -1,11 +1,11 @@ -import { Collection } from "../../common"; -import Page from "./Page"; +import { Collection } from '../../common'; +import Page from './Page'; export default class Pages extends Collection { constructor(models: any) { super(models); - this.on("reset", this.onReset); - this.on("remove", this.onRemove); + this.on('reset', this.onReset); + this.on('remove', this.onRemove); } onReset(m: Page, opts?: { previousModels?: Pages }) {