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

Convert Canvas to ts

pull/4302/head
Alex 4 years ago
parent
d8155ea8b9
commit
f993a8a4ba
3 changed files with 280 additions and 244 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 62
      src/canvas/model/Canvas.js
  2. 72
      src/canvas/model/Canvas.ts
  3. 390
      src/editor/model/Editor.ts

62
src/canvas/model/Canvas.js
View File

@ -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);
}
}

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

@ -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);
}
}

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

@ -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 ? `<script>${js}</script>` : '';
: "";
html += js ? `<script>${js}</script>` : "";
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] = {};

Write Preview
Loading…
Cancel
Save