From dd8fd1d0a0bd85c8339ad5a8fd407fb4f61a30db Mon Sep 17 00:00:00 2001 From: Alex Ritter Date: Sat, 30 Apr 2022 15:24:43 +0200 Subject: [PATCH 1/5] Convert CanvasModule to ts --- src/abstract/Module.ts | 10 +-- src/canvas/{index.js => index.ts} | 127 +++++++++++++++--------------- src/canvas/model/Canvas.ts | 6 +- src/canvas/view/CanvasView.js | 36 +++++---- src/canvas/view/FrameView.js | 7 +- src/canvas/view/FrameWrapView.js | 6 +- src/canvas/view/FramesView.js | 4 +- 7 files changed, 102 insertions(+), 94 deletions(-) rename src/canvas/{index.js => index.ts} (85%) diff --git a/src/abstract/Module.ts b/src/abstract/Module.ts index 5e1a5f074..113fb2ae7 100644 --- a/src/abstract/Module.ts +++ b/src/abstract/Module.ts @@ -20,7 +20,7 @@ export interface IBaseModule { } export interface ModuleConfig { - name: string; + //name: string; stylePrefix?: string; } @@ -40,20 +40,18 @@ export default abstract class Module cls: any[] = []; events: any; - constructor(em: EditorModel, moduleName: string) { + constructor(em: EditorModel, moduleName: string, defaults?: T) { this._em = em; 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 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; + this._config = {...defaults, ...cfg}; } public get em() { diff --git a/src/canvas/index.js b/src/canvas/index.ts similarity index 85% rename from src/canvas/index.js rename to src/canvas/index.ts index f71e56f55..f3e443293 100644 --- a/src/canvas/index.js +++ b/src/canvas/index.ts @@ -47,49 +47,58 @@ * @module Canvas */ +import { AddOptions } from 'backbone'; import { isUndefined } from 'underscore'; +import { Module } from '../abstract'; +import ComponentView from '../dom_components/view/ComponentView'; +import EditorModel from '../editor/model/Editor'; 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'; +import FrameView from './view/FrameView'; -export default class CanvasModule { +export default class CanvasModule extends Module { /** * Used inside RTE * @private */ - getCanvasView() { - return this.canvasView; + getCanvasView(): CanvasView { + return this.canvasView as any; } - name = 'Canvas'; + //name = 'Canvas'; - c = {}; - canvas; - canvasView; + c: any; + //em: EditorModel; + canvas: Canvas; + model: Canvas; + private _canvasView?: CanvasView; + + get canvasView(): CanvasView{ + return this._canvasView as any + } /** * Initialize module. Automatically called with a new instance of the editor * @param {Object} config Configurations * @private */ - init(config = {}) { + constructor(em: EditorModel) { + super(em, "Canvas", defaults) this.c = { - ...defaults, - ...config, + ...this.config, module: this, }; - - this.em = this.c.em; - const { scripts, styles } = this.c; - const ppfx = this.c.pStylePrefix; - if (ppfx) this.c.stylePrefix = ppfx + this.c.stylePrefix; - this.canvas = new Canvas({ scripts, styles }, config); + this.canvas = new Canvas(this.em, this.config); this.model = this.canvas; this.startAutoscroll = this.startAutoscroll.bind(this); this.stopAutoscroll = this.stopAutoscroll.bind(this); return this; } + init(){ + + } onLoad() { this.model.init(); @@ -117,7 +126,7 @@ export default class CanvasModule { return this.canvasView.el; } - getFrame(index) { + getFrame(index?: number) { return this.getFrames()[index || 0]; } @@ -125,13 +134,13 @@ export default class CanvasModule { * Get the main frame element of the canvas * @returns {HTMLIFrameElement} */ - getFrameEl() { + getFrameEl(): HTMLIFrameElement { const { frame } = this.canvasView || {}; return frame && frame.el; } getFramesEl() { - return this.canvasView.framesArea; + return this.canvasView?.framesArea as HTMLElement; } /** @@ -148,7 +157,7 @@ export default class CanvasModule { */ getDocument() { const frame = this.getFrameEl(); - return frame && frame.contentDocument; + return frame && frame.contentDocument as Document; } /** @@ -160,13 +169,9 @@ export default class CanvasModule { return doc && doc.body; } - _getCompFrame(compView) { - return compView && compView._getFrame(); - } - - _getLocalEl(globalEl, compView, method) { + _getLocalEl(globalEl: any, compView: any, method: keyof FrameView) { let result = globalEl; - const frameView = this._getCompFrame(compView); + const frameView = compView?._getFrame(); result = frameView ? frameView[method]() : result; return result; @@ -178,7 +183,7 @@ export default class CanvasModule { * @private */ getGlobalToolsEl() { - return this.canvasView.toolsGlobEl; + return this.canvasView?.toolsGlobEl; } /** @@ -186,7 +191,7 @@ export default class CanvasModule { * @returns {HTMLElement} * @private */ - getToolsEl(compView) { + getToolsEl(compView: any) { return this._getLocalEl(this.canvasView.toolsEl, compView, 'getToolsEl'); } @@ -195,7 +200,7 @@ export default class CanvasModule { * @returns {HTMLElement} * @private */ - getHighlighter(compView) { + getHighlighter(compView: any) { return this._getLocalEl(this.canvasView.hlEl, compView, 'getHighlighter'); } @@ -204,7 +209,7 @@ export default class CanvasModule { * @returns {HTMLElement} * @private */ - getBadgeEl(compView) { + getBadgeEl(compView: any) { return this._getLocalEl(this.canvasView.badgeEl, compView, 'getBadgeEl'); } @@ -249,7 +254,7 @@ export default class CanvasModule { * @returns {HTMLElement} * @private */ - getOffsetViewerEl(compView) { + getOffsetViewerEl(compView: any) { return this._getLocalEl(this.canvasView.offsetEl, compView, 'getOffsetViewerEl'); } @@ -264,10 +269,7 @@ export default class CanvasModule { render() { this.canvasView?.remove(); - this.canvasView = new CanvasView({ - model: this.canvas, - config: this.c, - }); + this._canvasView = new CanvasView({model: this.canvas, config: this.c}); return this.canvasView.render().el; } @@ -291,8 +293,8 @@ export default class CanvasModule { * @returns {Object} * @private */ - offset(el) { - return this.canvasView.offset(el); + offset(el: HTMLElement) { + return this.canvasView?.offset(el); } /** @@ -303,7 +305,7 @@ export default class CanvasModule { * return component.getName(); * }); */ - setCustomBadgeLabel(f) { + setCustomBadgeLabel(f: Function) { this.c.customBadgeLabel = f; } @@ -313,7 +315,7 @@ export default class CanvasModule { * @returns {Object} * @private */ - getElementPos(el, opts) { + getElementPos(el: HTMLElement, opts?: any) { return this.canvasView.getElementPos(el, opts); } @@ -323,7 +325,7 @@ export default class CanvasModule { * @returns {Object} * @private */ - getElementOffsets(el) { + getElementOffsets(el: HTMLElement) { return this.canvasView.getElementOffsets(el); } @@ -356,7 +358,7 @@ export default class CanvasModule { * @return {Object} * @private */ - getTargetToElementDim(target, element, options = {}) { + getTargetToElementDim(target: HTMLElement, element: HTMLElement, options: any = {}) { var opts = options || {}; var canvasPos = this.canvasView.getPosition(); if (!canvasPos) return; @@ -391,20 +393,20 @@ export default class CanvasModule { }; // In this way I can catch data and also change the position strategy - if (eventToTrigger && this.c.em) { - this.c.em.trigger(eventToTrigger, result); + if (eventToTrigger && this.em) { + this.em.trigger(eventToTrigger, result); } return result; } - canvasRectOffset(el, pos, opts = {}) { - const getFrameElFromDoc = doc => { + canvasRectOffset(el: HTMLElement, pos: {top: number, left: number}, opts: any = {}) { + const getFrameElFromDoc = (doc: Document) => { const { defaultView } = doc; - return defaultView && defaultView.frameElement; + return defaultView?.frameElement as HTMLElement; }; - const rectOff = (el, top = 1, pos) => { + const rectOff = (el: HTMLElement, top = 1, pos: {top: number, left: number}) => { const zoom = this.em.getZoomDecimal(); const side = top ? 'top' : 'left'; const doc = el.ownerDocument; @@ -426,7 +428,7 @@ export default class CanvasModule { }; } - getTargetToElementFixed(el, elToMove, opts = {}) { + getTargetToElementFixed(el: any, elToMove: any, opts: any = {}) { const pos = opts.pos || this.getElementPos(el); const cvOff = opts.canvasOff || this.canvasRectOffset(el, pos); const toolbarH = elToMove.offsetHeight || 0; @@ -477,8 +479,7 @@ export default class CanvasModule { * @return {Object} * @private */ - getMouseRelativePos(e, options) { - var opts = options || {}; + getMouseRelativePos(e: any, opts: any = {}) { var addTop = 0; var addLeft = 0; var subWinOffset = opts.subWinOffset; @@ -506,9 +507,9 @@ export default class CanvasModule { * @return {Object} * @private */ - getMouseRelativeCanvas(ev, opts) { + getMouseRelativeCanvas(ev: MouseEvent, opts: any) { const zoom = this.getZoomDecimal(); - const { top, left } = this.canvasView.getPosition(opts); + const { top, left } = this.getCanvasView().getPosition(opts); return { y: ev.clientY * zoom + top, @@ -532,7 +533,8 @@ export default class CanvasModule { isInputFocused() { const doc = this.getDocument(); const frame = this.getFrameEl(); - const toIgnore = ['body', ...this.getConfig().notTextable]; + //console.log(this.config) + const toIgnore = ['body', ...this.config.notTextable]; const docActive = frame && document.activeElement === frame; const focused = docActive ? doc && doc.activeElement : document.activeElement; @@ -554,7 +556,7 @@ export default class CanvasModule { * // Force the scroll, even if the element is alredy visible * canvas.scrollTo(selected, { force: true }); */ - scrollTo(el, opts = {}) { + scrollTo(el: any, opts = {}) { const elem = getElement(el); const view = elem && getViewEl(elem); view && view.scrollIntoView(opts); @@ -564,7 +566,7 @@ export default class CanvasModule { * Start autoscroll * @private */ - startAutoscroll(frame) { + startAutoscroll(frame: Frame) { const fr = (frame && frame.view) || this.em.getCurrentFrame(); fr && fr.startAutoscroll(); } @@ -573,7 +575,7 @@ export default class CanvasModule { * Stop autoscroll * @private */ - stopAutoscroll(frame) { + stopAutoscroll(frame: Frame) { const fr = (frame && frame.view) || this.em.getCurrentFrame(); fr && fr.stopAutoscroll(); } @@ -585,7 +587,7 @@ export default class CanvasModule { * @example * canvas.setZoom(50); // set zoom to 50% */ - setZoom(value) { + setZoom(value: string) { this.canvas.set('zoom', parseFloat(value)); return this; } @@ -609,7 +611,7 @@ export default class CanvasModule { * @example * canvas.setCoords(100, 100); */ - setCoords(x, y) { + setCoords(x: string, y: string) { this.canvas.set({ x: parseFloat(x), y: parseFloat(y) }); return this; } @@ -622,7 +624,7 @@ export default class CanvasModule { * const coords = canvas.getCoords(); * // { x: 100, y: 100 } */ - getCoords() { + getCoords(): {x: number, y: number} { const { x, y } = this.canvas.attributes; return { x, y }; } @@ -636,13 +638,13 @@ export default class CanvasModule { return zoom ? 1 / zoom : 1; } - toggleFramesEvents(on) { + toggleFramesEvents(on: boolean) { const { style } = this.getFramesEl(); style.pointerEvents = on ? '' : 'none'; } getFrames() { - return this.canvas.get('frames').map(item => item); + return this.canvas.frames.map(item => item); } /** @@ -675,6 +677,7 @@ export default class CanvasModule { this.canvas.stopListening(); this.canvasView?.remove(); [this.c, this.canvas, this.canvasView].forEach(i => (i = {})); - ['em', 'model', 'droppable'].forEach(i => (this[i] = {})); + //@ts-ignore + ['model', 'droppable'].forEach(i => (this[i] = {})); } } diff --git a/src/canvas/model/Canvas.ts b/src/canvas/model/Canvas.ts index 6bd976a57..ec53cdce0 100644 --- a/src/canvas/model/Canvas.ts +++ b/src/canvas/model/Canvas.ts @@ -23,9 +23,9 @@ export default class Canvas extends Backbone.Model { em: EditorModel; config: any; - constructor(props: any, config: any = {}) { - super(props); - const { em } = config; + constructor(em: EditorModel, config: any = {}) { + const { scripts, styles } = config; + super({scripts, styles}); this.config = config; this.em = em; this.listenTo(this, 'change:zoom', this.onZoomChange); diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js index 6d8051ca8..0fe6aa4d7 100644 --- a/src/canvas/view/CanvasView.js +++ b/src/canvas/view/CanvasView.js @@ -21,11 +21,12 @@ export default class CanvasView extends View { `; } - initialize(o) { + constructor(o) { + super(o); bindAll(this, 'clearOff', 'onKeyPress', 'onCanvasMove'); const { model } = this; this.config = o.config || {}; - this.em = this.config.em || {}; + this.em = this.model.em || {}; this.pfx = this.config.stylePrefix || ''; this.ppfx = this.config.pStylePrefix || ''; this.className = this.config.stylePrefix + 'canvas'; @@ -152,7 +153,7 @@ export default class CanvasView extends View { /** * Get the offset of the element * @param {HTMLElement} el - * @return {Object} + * @return { {top: number, left: number, width: number, height: number} } */ offset(el, opts = {}) { const rect = getElRect(el); @@ -178,8 +179,8 @@ export default class CanvasView extends View { /** * Return frame offset - * @return {Object} - * @private + * @return { {top: number, left: number, width: number, height: number} } + * @public */ getFrameOffset(el) { if (!this.frmOff || el) { @@ -193,8 +194,8 @@ export default class CanvasView extends View { /** * Return canvas offset - * @return {Object} - * @private + * @return { {top: number, left: number, width: number, height: number} } + * @public */ getCanvasOffset() { if (!this.cvsOff) this.cvsOff = this.offset(this.el); @@ -204,10 +205,10 @@ export default class CanvasView extends View { /** * Returns element's rect info * @param {HTMLElement} el - * @return {Object} - * @private + * @return { {top: number, left: number, width: number, height: number, zoom: number, rect: any} } + * @public */ - getElementPos(el, opts) { + getElementPos(el, opts = {}) { const zoom = this.getZoom(); const opt = opts || {}; const frameOffset = this.getFrameOffset(el); @@ -228,8 +229,15 @@ export default class CanvasView extends View { /** * Returns element's offsets like margins and paddings * @param {HTMLElement} el - * @return {Object} - * @private + * @return {{ marginTop: number, + * marginRight: number, + * marginBottom: number, + * marginLeft: number, + * paddingTop: number, + * paddingRight: number, + * paddingBottom: number, + * paddingLeft: number,}} + * @public */ getElementOffsets(el) { if (!el || isTextNode(el)) return {}; @@ -253,8 +261,8 @@ export default class CanvasView extends View { /** * Returns position data of the canvas element - * @return {Object} obj Position object - * @private + * @return { {top: number, left: number, width: number, height: number} } obj Position object + * @public */ getPosition(opts = {}) { const doc = this.frame.el.contentDocument; diff --git a/src/canvas/view/FrameView.js b/src/canvas/view/FrameView.js index dff267953..0fd2d08b8 100644 --- a/src/canvas/view/FrameView.js +++ b/src/canvas/view/FrameView.js @@ -25,7 +25,7 @@ export default class FrameView extends View { frameView: this, }; this.ppfx = this.config.pStylePrefix || ''; - this.em = this.config.em; + this.em = this.model.em; this.showGlobalTools = debounce(this.showGlobalTools.bind(this), 50); const cvModel = this.getCanvasModel(); this.listenTo(model, 'change:head', this.updateHead); @@ -311,12 +311,11 @@ export default class FrameView extends View { } renderBody() { - const { config, model, ppfx } = this; - const { em } = config; + const { config, em, model, ppfx } = this; const doc = this.getDoc(); const body = this.getBody(); const win = this.getWindow(); - const conf = em.get('Config'); + const conf = em.config; win._isEditor = true; this.renderStyles({ prev: [] }); diff --git a/src/canvas/view/FrameWrapView.js b/src/canvas/view/FrameWrapView.js index af03496a6..0bf752f8b 100644 --- a/src/canvas/view/FrameWrapView.js +++ b/src/canvas/view/FrameWrapView.js @@ -19,11 +19,11 @@ export default class FrameWrapView extends View { ...(opts.config || conf), frameWrapView: this, }; - const { canvasView, em } = config; + const { canvasView } = config; this.cv = canvasView; this.config = config; - this.em = em; - this.canvas = em && em.get('Canvas'); + this.em = this.model.em; + this.canvas = this.em?.get('Canvas'); this.ppfx = config.pStylePrefix || ''; this.frame = new FrameView({ model, config }); this.classAnim = `${this.ppfx}frame-wrapper--anim`; diff --git a/src/canvas/view/FramesView.js b/src/canvas/view/FramesView.js index 01ae1ef1b..481367399 100644 --- a/src/canvas/view/FramesView.js +++ b/src/canvas/view/FramesView.js @@ -12,8 +12,8 @@ export default class FramesView extends DomainViews { } onRender() { - const { config, $el } = this; - const { em } = config; + const { $el } = this; + const { em } = this.collection.first; em && $el.attr({ class: `${em.getConfig().stylePrefix}frames` }); } } From fda9c381140d79cb117af6f824c9c387e8414f4d Mon Sep 17 00:00:00 2001 From: Alex Ritter Date: Sat, 30 Apr 2022 15:52:26 +0200 Subject: [PATCH 2/5] Use abstract Model in Canvas --- src/abstract/Model.ts | 4 ++++ src/canvas/index.ts | 2 +- src/canvas/model/Canvas.ts | 27 ++++++++++++--------------- src/editor/index.ts | 19 ++++++++++--------- 4 files changed, 27 insertions(+), 25 deletions(-) diff --git a/src/abstract/Model.ts b/src/abstract/Model.ts index 6a1bc3194..cc7b498ad 100644 --- a/src/abstract/Model.ts +++ b/src/abstract/Model.ts @@ -29,4 +29,8 @@ export default class Model< protected get em() { return this._module.em; } + + public get em() { + return this._module.em; + } } diff --git a/src/canvas/index.ts b/src/canvas/index.ts index f3e443293..22f087e41 100644 --- a/src/canvas/index.ts +++ b/src/canvas/index.ts @@ -90,7 +90,7 @@ export default class CanvasModule extends Module { ...this.config, module: this, }; - this.canvas = new Canvas(this.em, this.config); + this.canvas = new Canvas(this); this.model = this.canvas; this.startAutoscroll = this.startAutoscroll.bind(this); this.stopAutoscroll = this.stopAutoscroll.bind(this); diff --git a/src/canvas/model/Canvas.ts b/src/canvas/model/Canvas.ts index ec53cdce0..31b84b7df 100644 --- a/src/canvas/model/Canvas.ts +++ b/src/canvas/model/Canvas.ts @@ -1,11 +1,10 @@ -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 "../../abstract"; +import { evPageSelect } from "../../pages"; +import Frames from "./Frames"; +import Page from "../../pages/model/Page"; +import CanvasModule from ".."; -export default class Canvas extends Backbone.Model { +export default class Canvas extends Model { defaults() { return { frame: '', @@ -20,18 +19,16 @@ export default class Canvas extends Backbone.Model { styles: [], }; } - em: EditorModel; - config: any; - constructor(em: EditorModel, config: any = {}) { + constructor(module: CanvasModule) { + const { em, config } = module; const { scripts, styles } = config; - super({scripts, styles}); - this.config = config; - this.em = em; - this.listenTo(this, 'change:zoom', this.onZoomChange); - this.listenTo(em, 'change:device', this.updateDevice); + super(module, {scripts, styles}); + 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'); } diff --git a/src/editor/index.ts b/src/editor/index.ts index 42dfd7627..c1ca114d3 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -54,14 +54,15 @@ * ## 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 CanvasModule from "../canvas"; +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 = {}) { @@ -112,7 +113,7 @@ export default class EditorModule implements IBaseModule { get Panels(): PanelsModule { return this.em.get('Panels'); } - //@ts-ignore + get Canvas(): CanvasModule { return this.em.get('Canvas'); } From 49da963dc5209cae89dc4415de3019056da4791d Mon Sep 17 00:00:00 2001 From: Alex Ritter Date: Sat, 30 Apr 2022 19:13:47 +0200 Subject: [PATCH 3/5] Convert code to using class --- src/dom_components/model/Components.js | 26 ++++---- src/dom_components/view/ComponentView.js | 80 ++++++++++++------------ 2 files changed, 53 insertions(+), 53 deletions(-) diff --git a/src/dom_components/model/Components.js b/src/dom_components/model/Components.js index bbf039546..0ccb91565 100644 --- a/src/dom_components/model/Components.js +++ b/src/dom_components/model/Components.js @@ -40,7 +40,7 @@ const getComponentsFromDefs = (items, all = {}, opts = {}) => { }); }; -export default Backbone.Collection.extend({ +export default class Components extends Backbone.Collection { initialize(models, opt = {}) { this.opt = opt; this.listenTo(this, 'add', this.onAdd); @@ -50,7 +50,7 @@ export default Backbone.Collection.extend({ this.config = config; this.em = em; this.domc = opt.domc || (em && em.get('DomComponents')); - }, + } resetChildren(models, opts = {}) { const coll = this; @@ -60,7 +60,7 @@ export default Backbone.Collection.extend({ opts.keepIds = getComponentIds(prev).filter(pr => newIds.indexOf(pr) >= 0); toRemove.forEach(md => this.removeChildren(md, coll, opts)); models.each(model => this.onAdd(model)); - }, + } resetFromString(input = '', opts = {}) { opts.keepIds = getComponentIds(this); @@ -71,7 +71,7 @@ export default Backbone.Collection.extend({ const newCmps = getComponentsFromDefs(cmps, allByID, opts); this.reset(newCmps, opts); this.em?.trigger('component:content', this.parent, opts, input); - }, + } removeChildren(removed, coll, opts = {}) { // Removing a parent component can cause this function @@ -123,7 +123,7 @@ export default Backbone.Collection.extend({ em.stopListening(removed); em.stopListening(removed.get('classes')); removed.__postRemove(); - }, + } model(attrs, options) { const { opt } = options.collection; @@ -155,7 +155,7 @@ export default Backbone.Collection.extend({ } return new model(attrs, options); - }, + } parseString(value, opt = {}) { const { em, domc } = this; @@ -173,7 +173,7 @@ export default Backbone.Collection.extend({ } return parsed.html; - }, + } add(models, opt = {}) { opt.keepIds = [...(opt.keepIds || []), ...getComponentIds(opt.previousModels)]; @@ -197,7 +197,7 @@ export default Backbone.Collection.extend({ const result = Backbone.Collection.prototype.add.apply(this, [models, opt]); this.__firstAdd = result; return result; - }, + } /** * Process component definition. @@ -250,7 +250,7 @@ export default Backbone.Collection.extend({ } return model; - }, + } onAdd(model, c, opts = {}) { const { domc, em } = this; @@ -267,9 +267,9 @@ export default Backbone.Collection.extend({ model.__postAdd({ recursive: 1 }); this.__onAddEnd(); - }, + } - __onAddEnd: debounce(function () { + __onAddEnd = debounce(function () { // TODO to check symbols on load, probably this might be removed as symbols // are always recovered from the model // const { domc } = this; @@ -295,5 +295,5 @@ export default Backbone.Collection.extend({ // }); // }; // onAll(toCheck); - }), -}); + }); +} diff --git a/src/dom_components/view/ComponentView.js b/src/dom_components/view/ComponentView.js index 3c1e3d43e..db589d255 100644 --- a/src/dom_components/view/ComponentView.js +++ b/src/dom_components/view/ComponentView.js @@ -6,14 +6,14 @@ import Selectors from 'selector_manager/model/Selectors'; import { replaceWith } from 'utils/dom'; import { setViewEl } from 'utils/mixins'; -export default Backbone.View.extend({ +export default class ComponentView extends Backbone.View { className() { return this.getClasses(); - }, + } tagName() { return this.model.get('tagName'); - }, + } initialize(opt = {}) { const model = this.model; @@ -50,13 +50,13 @@ export default Backbone.View.extend({ }; this.delegateEvents(); !modelOpt.temporary && this.init(this._clbObj()); - }, + } __isDraggable() { const { model, config } = this; const { draggable } = model.attributes; return config.draggableComponents && draggable; - }, + } _clbObj() { const { em, model, el } = this; @@ -65,27 +65,27 @@ export default Backbone.View.extend({ model, el, }; - }, + } /** * Initialize callback */ - init() {}, + init() {} /** * Remove callback */ - removed() {}, + removed() {} /** * Callback executed when the `active` event is triggered on component */ - onActive() {}, + onActive() {} /** * Callback executed when the `disable` event is triggered on component */ - onDisable() {}, + onDisable() {} remove() { Backbone.View.prototype.remove.apply(this, arguments); @@ -102,7 +102,7 @@ export default Backbone.View.extend({ $el.data({ model: '', collection: '', view: '' }); // delete model.view; // Sorter relies on this property return this; - }, + } handleDragStart(event) { if (!this.__isDraggable()) return false; @@ -112,7 +112,7 @@ export default Backbone.View.extend({ target: this.model, event, }); - }, + } initClasses() { const { model } = this; @@ -125,7 +125,7 @@ export default Backbone.View.extend({ this.listenTo(classes, 'add remove change', this.updateClasses); classes.length && this.importClasses(); } - }, + } initComponents(opts = {}) { const { model, $el, childrenView } = this; @@ -140,7 +140,7 @@ export default Backbone.View.extend({ !opts.avoidRender && this.renderChildren(); this.listenTo(...toListen); } - }, + } /** * Handle any property change @@ -155,7 +155,7 @@ export default Backbone.View.extend({ for (let prop in model.changed) { model.emitUpdate(prop); } - }, + } /** * Import, if possible, classes inside main container @@ -169,7 +169,7 @@ export default Backbone.View.extend({ clm.add(m.get('name')); }); } - }, + } /** * Update item on status change @@ -212,7 +212,7 @@ export default Backbone.View.extend({ cls = cls.trim(); cls && el.setAttribute('class', cls); - }, + } /** * Update highlight attribute @@ -223,7 +223,7 @@ export default Backbone.View.extend({ const isTextable = model.get('textable'); const hl = model.get('highlightable') && (isTextable || !model.isChildOf('text')); this.setAttribute('data-gjs-highlightable', hl ? true : ''); - }, + } /** * Update style attribute @@ -238,7 +238,7 @@ export default Backbone.View.extend({ } else { this.setAttribute('style', model.styleToString(opts)); } - }, + } /** * Update classe attribute @@ -251,7 +251,7 @@ export default Backbone.View.extend({ // Regenerate status class this.updateStatus(); this.onAttrUpdate(); - }, + } /** * Update single attribute @@ -261,7 +261,7 @@ export default Backbone.View.extend({ setAttribute(name, value) { const el = this.$el; value ? el.attr(name, value) : el.removeAttr(name); - }, + } /** * Get classes from attributes. @@ -272,7 +272,7 @@ export default Backbone.View.extend({ * */ getClasses() { return this.model.getClasses().join(' '); - }, + } /** * Update attributes @@ -304,7 +304,7 @@ export default Backbone.View.extend({ keys(attr).forEach(key => attr[key] === false && delete attr[key]); $el.attr(attr); - }, + } /** * Update component content @@ -314,7 +314,7 @@ export default Backbone.View.extend({ const content = this.model.get('content'); const hasComps = this.model.components().length; this.getChildrenContainer().innerHTML = hasComps ? '' : content; - }, + } /** * Prevent default helper @@ -323,7 +323,7 @@ export default Backbone.View.extend({ */ prevDef(e) { e.preventDefault(); - }, + } /** * Render component's script @@ -333,7 +333,7 @@ export default Backbone.View.extend({ const { model, em } = this; if (!model.get('script')) return; em && em.get('Canvas').getCanvasView().updateScript(this); - }, + } /** * Return children container @@ -369,7 +369,7 @@ export default Backbone.View.extend({ } return container; - }, + } /** * This returns rect informations not affected by the canvas zoom. @@ -399,7 +399,7 @@ export default Backbone.View.extend({ assignRect(target); return rect; - }, + } isInViewport({ rect } = {}) { const { el } = this; @@ -415,7 +415,7 @@ export default Backbone.View.extend({ top <= frame.scrollBottom && left <= frameElement.offsetWidth + body.scrollLeft ); - }, + } scrollIntoView(opts = {}) { const rect = this.getOffsetRect(); @@ -435,7 +435,7 @@ export default Backbone.View.extend({ }); } } - }, + } /** * Recreate the element of the view @@ -447,18 +447,18 @@ export default Backbone.View.extend({ this._setData(); replaceWith(el, this.el); this.render(); - }, + } _setData() { const { model } = this; const collection = model.components(); const view = this; this.$el.data({ model, collection, view }); - }, + } _getFrame() { return this.config.frameView; - }, + } /** * Render children components @@ -482,14 +482,14 @@ export default Backbone.View.extend({ for (var i = 0, len = childNodes.length; i < len; i++) { container.appendChild(childNodes.shift()); } - }, + } renderAttributes() { this.updateAttributes(); this.updateClasses(); - }, + } - onAttrUpdate() {}, + onAttrUpdate() {} render() { this.renderAttributes(); @@ -500,13 +500,13 @@ export default Backbone.View.extend({ this.postRender(); return this; - }, + } postRender() { if (!this.modelOpt.temporary) { this.onRender(this._clbObj()); } - }, + } - onRender() {}, -}); + onRender() {} +} From a5a939a16a13a13363fa63b4e2db0d822fe4481c Mon Sep 17 00:00:00 2001 From: Alex Ritter Date: Sat, 30 Apr 2022 19:14:32 +0200 Subject: [PATCH 4/5] Convert CanvasView to ts --- src/abstract/View.ts | 19 +- .../view/{CanvasView.js => CanvasView.ts} | 187 ++++++++++-------- src/editor/model/Editor.ts | 4 +- src/utils/dom.js | 15 +- 4 files changed, 131 insertions(+), 94 deletions(-) rename src/canvas/view/{CanvasView.js => CanvasView.ts} (68%) diff --git a/src/abstract/View.ts b/src/abstract/View.ts index f1aaa9170..a52d6ee93 100644 --- a/src/abstract/View.ts +++ b/src/abstract/View.ts @@ -1,19 +1,28 @@ -import Backbone from 'backbone'; -import Model from './Model'; +import Backbone from "backbone"; +import Model from "./Model"; +import Module, { IBaseModule } from "./Module"; export default class View< TModel extends Model = Model, TElement extends Element = HTMLElement > extends Backbone.View { protected get pfx() { - return (this.model.module.em.config as any).stylePrefix || ''; + return (this.model.em.config as any).stylePrefix || ""; } protected get ppfx() { - return this.pfx + this.model.module.config.stylePrefix || ''; + return this.pfx + this.config.stylePrefix || ""; + } + + protected get module(): TModel extends Model? M: unknown { + return this.model.module as any; } protected get em() { - return this.model.module.em; + return this.model.em; + } + + protected get config(): TModel extends Model ? (M extends IBaseModule ? C : unknown) : unknown{ + return this.module.config as any } } diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.ts similarity index 68% rename from src/canvas/view/CanvasView.js rename to src/canvas/view/CanvasView.ts index 0fe6aa4d7..7994e0404 100644 --- a/src/canvas/view/CanvasView.js +++ b/src/canvas/view/CanvasView.ts @@ -1,12 +1,26 @@ import { bindAll } from 'underscore'; -import { View } from '../../common'; +import { View } from '../../abstract'; import { on, off, getElement, getKeyChar, isTextNode, getElRect, getUiClass } from '../../utils/mixins'; import { createEl } from '../../utils/dom'; import FramesView from './FramesView'; - -let timerZoom; - -export default class CanvasView extends View { +import Canvas from '../model/Canvas'; +import Frame from '../model/Frame'; +import FrameView from './FrameView'; +import Components from '../../dom_components/model/Components'; +import ComponentView from '../../dom_components/view/ComponentView'; +import Component from '../../dom_components/model/Component'; + +interface MarginPaddingOffsets{ + marginTop?: number, + marginRight?: number, + marginBottom?: number, + marginLeft?: number, + paddingTop?: number, + paddingRight?: number, + paddingBottom?: number, + paddingLeft?: number, + } +export default class CanvasView extends View { events() { return { wheel: 'onWheel', @@ -20,23 +34,42 @@ export default class CanvasView extends View {
`; } - - constructor(o) { - super(o); + /*get className(){ + return this.pfx + 'canvas': + }*/ + hlEl?: HTMLElement; + badgeEl?: HTMLElement; + placerEl?: HTMLElement; + ghostEl?: HTMLElement; + toolbarEl?: HTMLElement; + resizerEl?: HTMLElement; + offsetEl?: HTMLElement; + fixedOffsetEl?: HTMLElement; + toolsGlobEl?: HTMLElement; + toolsEl?: HTMLElement; + framesArea?: HTMLElement; + toolsWrapper?: HTMLElement; + ready = false; + + frames!: FramesView; + frame?: FrameView; + + private timerZoom?: number + + private frmOff?: {top: number, left: number, width: number, height: number} + private cvsOff?: {top: number, left: number, width: number, height: number} + + constructor(model: Canvas) { + super({model}); bindAll(this, 'clearOff', 'onKeyPress', 'onCanvasMove'); - const { model } = this; - this.config = o.config || {}; - this.em = this.model.em || {}; - this.pfx = this.config.stylePrefix || ''; - this.ppfx = this.config.pStylePrefix || ''; - this.className = this.config.stylePrefix + 'canvas'; + this.className = this.pfx + 'canvas'; const { em } = this; this._initFrames(); this.listenTo(em, 'change:canvasOffset', this.clearOff); this.listenTo(em, 'component:selected', this.checkSelected); this.listenTo(model, 'change:zoom change:x change:y', this.updateFrames); this.listenTo(model, 'change:frames', this._onFramesUpdate); - this.toggleListeners(1); + this.toggleListeners(true); } _onFramesUpdate() { @@ -49,7 +82,7 @@ export default class CanvasView extends View { const collection = model.get('frames'); em.set('readyCanvas', 0); collection.once('loaded:all', () => em.set('readyCanvas', 1)); - frames && frames.remove(); + frames?.remove(); this.frames = new FramesView({ collection, config: { @@ -59,38 +92,40 @@ export default class CanvasView extends View { }); } - checkSelected(component, opts = {}) { + checkSelected(component: Component, opts: any = {}) { const { scroll } = opts; const currFrame = this.em.get('currentFrame'); - scroll && - component.views.forEach(view => { + scroll && component.views?.forEach(view => { view._getFrame() === currFrame && view.scrollIntoView(scroll); }); } - remove() { - this.frames.remove(); - this.frames = {}; - View.prototype.remove.apply(this, arguments); - this.toggleListeners(); + remove(...args: any) { + this.frames?.remove(); + //@ts-ignore + this.frames = undefined; + View.prototype.remove.apply(this, args); + this.toggleListeners(false); + return this } - preventDefault(ev) { + preventDefault(ev: Event) { if (ev) { ev.preventDefault(); - ev._parentEvent && ev._parentEvent.preventDefault(); + //@ts-ignore + ev._parentEvent?.preventDefault(); } } - onCanvasMove(ev) { + onCanvasMove(ev: Event) { // const data = { x: ev.clientX, y: ev.clientY }; // const data2 = this.em.get('Canvas').getMouseRelativeCanvas(ev); // const data3 = this.em.get('Canvas').getMouseRelativePos(ev); // this.em.trigger('canvas:over', data, data2, data3); } - toggleListeners(enable) { + toggleListeners(enable: boolean) { const { el } = this; const fn = enable ? on : off; fn(document, 'keypress', this.onKeyPress); @@ -98,7 +133,7 @@ export default class CanvasView extends View { // fn(el, 'mousemove dragover', this.onCanvasMove); } - onKeyPress(ev) { + onKeyPress(ev: Event) { const { em } = this; const key = getKeyChar(ev); @@ -108,28 +143,30 @@ export default class CanvasView extends View { } } - onWheel(ev) { + onWheel(ev: KeyboardEvent) { if ((ev.ctrlKey || ev.metaKey) && this.em.getConfig().multiFrames) { this.preventDefault(ev); const { model } = this; + //@ts-ignore this is potentially deprecated const delta = Math.max(-1, Math.min(1, ev.wheelDelta || -ev.detail)); const zoom = model.get('zoom'); model.set('zoom', zoom + delta * 2); } } - updateFrames(ev) { + updateFrames(ev: Event) { const { em, model } = this; const { x, y } = model.attributes; const zoom = this.getZoom(); const defOpts = { preserveSelected: 1 }; const mpl = zoom ? 1 / zoom : 1; + //@ts-ignore this.framesArea.style.transform = `scale(${zoom}) translate(${x * mpl}px, ${y * mpl}px)`; this.clearOff(); em.stopDefault(defOpts); em.trigger('canvas:update', ev); - timerZoom && clearTimeout(timerZoom); - timerZoom = setTimeout(() => em.runDefault(defOpts), 300); + this.timerZoom && clearTimeout(this.timerZoom); + this.timerZoom = setTimeout(() => em.runDefault(defOpts), 300) as any; } getZoom() { @@ -141,7 +178,7 @@ export default class CanvasView extends View { * @param {HTMLElement} el * @return {Boolean} */ - isElInViewport(el) { + isElInViewport(el: HTMLElement) { const elem = getElement(el); const rect = getElRect(elem); const frameRect = this.getFrameOffset(elem); @@ -155,14 +192,14 @@ export default class CanvasView extends View { * @param {HTMLElement} el * @return { {top: number, left: number, width: number, height: number} } */ - offset(el, opts = {}) { + offset(el?: HTMLElement, opts: any = {}) { const rect = getElRect(el); - const docBody = el.ownerDocument.body; + const docBody = el?.ownerDocument.body; const { noScroll } = opts; return { - top: rect.top + (noScroll ? 0 : docBody.scrollTop), - left: rect.left + (noScroll ? 0 : docBody.scrollLeft), + top: rect.top + (noScroll ? 0 : docBody?.scrollTop ?? 0), + left: rect.left + (noScroll ? 0 : docBody?.scrollLeft ?? 0), width: rect.width, height: rect.height, }; @@ -173,8 +210,8 @@ export default class CanvasView extends View { * @private */ clearOff() { - this.frmOff = null; - this.cvsOff = null; + this.frmOff = undefined; + this.cvsOff = undefined; } /** @@ -182,11 +219,11 @@ export default class CanvasView extends View { * @return { {top: number, left: number, width: number, height: number} } * @public */ - getFrameOffset(el) { + getFrameOffset(el?: HTMLElement) { if (!this.frmOff || el) { - const frame = this.frame.el; - const winEl = el && el.ownerDocument.defaultView; - const frEl = winEl ? winEl.frameElement : frame; + const frame = this.frame?.el; + const winEl = el?.ownerDocument.defaultView; + const frEl = winEl ? winEl.frameElement as HTMLElement : frame; this.frmOff = this.offset(frEl || frame); } return this.frmOff; @@ -208,7 +245,7 @@ export default class CanvasView extends View { * @return { {top: number, left: number, width: number, height: number, zoom: number, rect: any} } * @public */ - getElementPos(el, opts = {}) { + getElementPos(el: HTMLElement, opts: any = {}) { const zoom = this.getZoom(); const opt = opts || {}; const frameOffset = this.getFrameOffset(el); @@ -229,21 +266,14 @@ export default class CanvasView extends View { /** * Returns element's offsets like margins and paddings * @param {HTMLElement} el - * @return {{ marginTop: number, - * marginRight: number, - * marginBottom: number, - * marginLeft: number, - * paddingTop: number, - * paddingRight: number, - * paddingBottom: number, - * paddingLeft: number,}} + * @return { MarginPaddingOffsets } * @public */ - getElementOffsets(el) { + getElementOffsets(el: HTMLElement) { if (!el || isTextNode(el)) return {}; - const result = {}; + const result: MarginPaddingOffsets = {} ; const styles = window.getComputedStyle(el); - [ + const marginPaddingOffsets: (keyof MarginPaddingOffsets)[] =[ 'marginTop', 'marginRight', 'marginBottom', @@ -252,7 +282,8 @@ export default class CanvasView extends View { 'paddingRight', 'paddingBottom', 'paddingLeft', - ].forEach(offset => { + ] + marginPaddingOffsets.forEach(offset => { result[offset] = parseFloat(styles[offset]) * this.getZoom(); }); @@ -264,8 +295,9 @@ export default class CanvasView extends View { * @return { {top: number, left: number, width: number, height: number} } obj Position object * @public */ - getPosition(opts = {}) { - const doc = this.frame.el.contentDocument; + getPosition(opts: any = {}) { + + const doc = this.frame?.el.contentDocument; if (!doc) return; const bEl = doc.body; const zoom = this.getZoom(); @@ -286,7 +318,8 @@ export default class CanvasView extends View { * @param {View} view Component's View * @private */ - updateScript(view) { + //TODO change type after the ComponentView was updated to ts + updateScript(view: any) { const model = view.model; const id = model.getId(); @@ -321,25 +354,25 @@ export default class CanvasView extends View { * Get javascript container * @private */ - getJsContainer(view) { + getJsContainer(view?: ComponentView) { const frameView = this.getFrameView(view); return frameView && frameView.getJsContainer(); } - getFrameView(view) { - return (view && view._getFrame()) || this.em.get('currentFrame'); + getFrameView(view?: ComponentView) { + return view?._getFrame() || this.em.get('currentFrame'); } _renderFrames() { if (!this.ready) return; const { model, frames, em, framesArea } = this; - const frms = model.get('frames'); + const frms = model.frames; frms.listenToLoad(); frames.render(); const mainFrame = frms.at(0); - const currFrame = mainFrame && mainFrame.view; + const currFrame = mainFrame?.view; em.setCurrentFrame(currFrame); - framesArea && framesArea.appendChild(frames.el); + framesArea?.appendChild(frames.el); this.frame = currFrame; } @@ -368,18 +401,18 @@ export default class CanvasView extends View { `); const toolsEl = el.querySelector(`#${ppfx}tools`); - this.hlEl = el.querySelector(`.${ppfx}highlighter`); - this.badgeEl = el.querySelector(`.${ppfx}badge`); - this.placerEl = el.querySelector(`.${ppfx}placeholder`); - this.ghostEl = el.querySelector(`.${ppfx}ghost`); - this.toolbarEl = el.querySelector(`.${ppfx}toolbar`); - this.resizerEl = el.querySelector(`.${ppfx}resizer`); - this.offsetEl = el.querySelector(`.${ppfx}offset-v`); - this.fixedOffsetEl = el.querySelector(`.${ppfx}offset-fixed-v`); - this.toolsGlobEl = el.querySelector(`.${ppfx}tools-gl`); - this.toolsEl = toolsEl; + this.hlEl = el.querySelector(`.${ppfx}highlighter`) as HTMLElement; + this.badgeEl = el.querySelector(`.${ppfx}badge`) as HTMLElement; + this.placerEl = el.querySelector(`.${ppfx}placeholder`) as HTMLElement; + this.ghostEl = el.querySelector(`.${ppfx}ghost`) as HTMLElement; + this.toolbarEl = el.querySelector(`.${ppfx}toolbar`) as HTMLElement; + this.resizerEl = el.querySelector(`.${ppfx}resizer`) as HTMLElement; + this.offsetEl = el.querySelector(`.${ppfx}offset-v`) as HTMLElement; + this.fixedOffsetEl = el.querySelector(`.${ppfx}offset-fixed-v`) as HTMLElement; + this.toolsGlobEl = el.querySelector(`.${ppfx}tools-gl`) as HTMLElement; + this.toolsEl = toolsEl as HTMLElement; this.el.className = getUiClass(em, this.className); - this.ready = 1; + this.ready = true; this._renderFrames(); return this; diff --git a/src/editor/model/Editor.ts b/src/editor/model/Editor.ts index 30008da67..4c192ea0c 100644 --- a/src/editor/model/Editor.ts +++ b/src/editor/model/Editor.ts @@ -822,8 +822,8 @@ export default class EditorModel extends Model { return this.get('DomComponents').getWrapper(); } - setCurrentFrame(frameView: FrameView) { - return this.set('currentFrame', frameView); + setCurrentFrame(frameView?: FrameView) { + return this.set("currentFrame", frameView); } getCurrentFrame(): FrameView { diff --git a/src/utils/dom.js b/src/utils/dom.js index 01d718649..2e5b5f993 100644 --- a/src/utils/dom.js +++ b/src/utils/dom.js @@ -5,8 +5,7 @@ const KEY_TAG = 'tag'; const KEY_ATTR = 'attributes'; const KEY_CHILD = 'children'; -export const motionsEv = - 'transitionend oTransitionEnd transitionend webkitTransitionEnd'; +export const motionsEv = 'transitionend oTransitionEnd transitionend webkitTransitionEnd'; export const isDoc = el => el && el.nodeType === 9; @@ -18,14 +17,10 @@ export const removeEl = el => { export const find = (el, query) => el.querySelectorAll(query); export const attrUp = (el, attrs = {}) => - el && - el.setAttribute && - each(attrs, (value, key) => el.setAttribute(key, value)); + el && el.setAttribute && each(attrs, (value, key) => el.setAttribute(key, value)); export const isVisible = el => { - return ( - el && !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length) - ); + return el && !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length); }; export const empty = node => { @@ -56,7 +51,7 @@ export const appendAtIndex = (parent, child, index) => { export const append = (parent, child) => appendAtIndex(parent, child); -export const createEl = (tag, attrs = '', child) => { +export const createEl = (tag, attrs = {}, child) => { const el = document.createElement(tag); attrs && each(attrs, (value, key) => el.setAttribute(key, value)); @@ -90,7 +85,7 @@ export const createCustomEvent = (e, cls) => { Object.defineProperty(oEvent, prop, { get() { return this.keyCodeVal; - } + }, }); }); } From e9c933ae2ea1bd39399aee28bfb4be449b77964f Mon Sep 17 00:00:00 2001 From: Alex Ritter Date: Tue, 10 May 2022 09:02:22 +0200 Subject: [PATCH 5/5] Convert rest to ts --- src/abstract/DomainViews.ts | 102 ++++++++++++++ src/abstract/Model.ts | 4 - src/abstract/View.ts | 7 +- src/canvas/index.ts | 82 +++++------- src/canvas/model/Canvas.ts | 3 +- src/canvas/model/Frame.ts | 61 ++++----- src/canvas/model/Frames.ts | 5 +- src/canvas/view/CanvasView.ts | 12 +- .../view/{FrameView.js => FrameView.ts} | 125 ++++++++++-------- .../{FrameWrapView.js => FrameWrapView.ts} | 66 ++++----- src/canvas/view/FramesView.js | 21 --- src/canvas/view/FramesView.ts | 26 ++++ src/dom_components/view/ComponentView.js | 2 +- src/editor/model/Editor.ts | 3 +- src/pages/model/Page.ts | 8 +- src/utils/mixins.js | 15 ++- 16 files changed, 330 insertions(+), 212 deletions(-) create mode 100644 src/abstract/DomainViews.ts rename src/canvas/view/{FrameView.js => FrameView.ts} (79%) rename src/canvas/view/{FrameWrapView.js => FrameWrapView.ts} (83%) delete mode 100644 src/canvas/view/FramesView.js create mode 100644 src/canvas/view/FramesView.ts diff --git a/src/abstract/DomainViews.ts b/src/abstract/DomainViews.ts new file mode 100644 index 000000000..0750cd2fc --- /dev/null +++ b/src/abstract/DomainViews.ts @@ -0,0 +1,102 @@ +import { includes } from 'underscore'; +import Backbone from 'backbone'; +import View from './View'; +import Model from './Model'; +/*interface DomainView{ + constructor(model: TModel): TView +}*/ +type TModel = TCollection extends Backbone.Collection? TModel: Model; + +export default abstract class DomainViews, TItemView extends View> extends View> { + // Defines the View per type + itemsView = ''; + + protected itemType = 'type'; + + reuseView = false; + + viewCollection: TItemView[] = []; + constructor(opts: any = {}, autoAdd = false) { + super(opts); + autoAdd && this.listenTo(this.collection, 'add', this.addTo); + } + + /** + * Add new model to the collection + * @param {Model} model + * @private + * */ + private addTo(model: TModel) { + this.add(model); + } + + private itemViewNotFound(type: string) { + /*const { em, ns } = this; + const warn = `${ns ? `[${ns}]: ` : ''}'${type}' type not found`; + em?.logWarning(warn);*/ + } + protected abstract renderView(model: TModel, itemType: string): TItemView; + + /** + * Render new model inside the view + * @param {Model} model + * @param {Object} fragment Fragment collection + * @private + * */ + private add(model: TModel, fragment?: DocumentFragment) { + const { config, reuseView, viewCollection, itemsView = {} } = this; + var frag = fragment || null; + var typeField = model.get(this.itemType); + let view; + + //@ts-ignore + if (model.view && reuseView) { + //@ts-ignore + view = model.view; + } else { + view = this.renderView(model, typeField); + } + + viewCollection.push(view); + const rendered = view.render().el; + + if (frag) frag.appendChild(rendered); + else this.$el.append(rendered); + } + + render() { + var frag = document.createDocumentFragment(); + this.clearItems(); + this.$el.empty(); + + if (this.collection.length) + this.collection.each((model) => { + this.add(model, frag); + }, this); + + this.$el.append(frag); + this.onRender(); + return this; + } + + onRender() {} + + onRemoveBefore(items: TItemView[], opts: any) {} + onRemove(items: TItemView[], opts: any) {} + + remove(opts: any = {}) { + const { viewCollection } = this; + this.onRemoveBefore(viewCollection, opts); + this.clearItems(); + Backbone.View.prototype.remove.apply(this, opts); + this.onRemove(viewCollection, opts); + return this; + } + + clearItems() { + const items = this.viewCollection || []; + // TODO Traits do not update the target anymore + // items.forEach(item => item.remove()); + // this.items = []; + } +} diff --git a/src/abstract/Model.ts b/src/abstract/Model.ts index cc7b498ad..324e27036 100644 --- a/src/abstract/Model.ts +++ b/src/abstract/Model.ts @@ -26,10 +26,6 @@ export default class Model< return this._module.config; } - protected get em() { - return this._module.em; - } - public get em() { return this._module.em; } diff --git a/src/abstract/View.ts b/src/abstract/View.ts index a52d6ee93..48034ad05 100644 --- a/src/abstract/View.ts +++ b/src/abstract/View.ts @@ -7,7 +7,7 @@ export default class View< TElement extends Element = HTMLElement > extends Backbone.View { protected get pfx() { - return (this.model.em.config as any).stylePrefix || ""; + return (this.em.config as any).stylePrefix || ""; } protected get ppfx() { @@ -15,11 +15,12 @@ export default class View< } protected get module(): TModel extends Model? M: unknown { - return this.model.module as any; + //console.log((this.collection.first as any).module) + return this.model?.module ?? (this.collection as any).module; } protected get em() { - return this.model.em; + return this.module.em; } protected get config(): TModel extends Model ? (M extends IBaseModule ? C : unknown) : unknown{ diff --git a/src/canvas/index.ts b/src/canvas/index.ts index 22f087e41..841e8b595 100644 --- a/src/canvas/index.ts +++ b/src/canvas/index.ts @@ -69,16 +69,10 @@ export default class CanvasModule extends Module { } //name = 'Canvas'; - - c: any; - //em: EditorModel; canvas: Canvas; model: Canvas; - private _canvasView?: CanvasView; + private canvasView?: CanvasView; - get canvasView(): CanvasView{ - return this._canvasView as any - } /** * Initialize module. Automatically called with a new instance of the editor * @param {Object} config Configurations @@ -86,10 +80,7 @@ export default class CanvasModule extends Module { */ constructor(em: EditorModel) { super(em, "Canvas", defaults) - this.c = { - ...this.config, - module: this, - }; + this.canvas = new Canvas(this); this.model = this.canvas; this.startAutoscroll = this.startAutoscroll.bind(this); @@ -108,22 +99,12 @@ export default class CanvasModule extends Module { return this.canvas; } - /** - * Get the configuration object - * @returns {Object} Configuration object - * @example - * console.log(canvas.getConfig()) - */ - getConfig() { - return this.c; - } - /** * Get the canvas element * @returns {HTMLElement} */ getElement() { - return this.canvasView.el; + return this.getCanvasView().el; } getFrame(index?: number) { @@ -134,9 +115,9 @@ export default class CanvasModule extends Module { * Get the main frame element of the canvas * @returns {HTMLIFrameElement} */ - getFrameEl(): HTMLIFrameElement { + getFrameEl() { const { frame } = this.canvasView || {}; - return frame && frame.el; + return frame?.el as HTMLIFrameElement; } getFramesEl() { @@ -148,7 +129,8 @@ export default class CanvasModule extends Module { * @returns {Window} */ getWindow() { - return this.getFrameEl().contentWindow; + const { frame } = this.canvasView || {}; + return frame?.getWindow() as Window; } /** @@ -157,7 +139,7 @@ export default class CanvasModule extends Module { */ getDocument() { const frame = this.getFrameEl(); - return frame && frame.contentDocument as Document; + return frame?.contentDocument as Document; } /** @@ -166,7 +148,7 @@ export default class CanvasModule extends Module { */ getBody() { const doc = this.getDocument(); - return doc && doc.body; + return doc?.body as HTMLBodyElement; } _getLocalEl(globalEl: any, compView: any, method: keyof FrameView) { @@ -192,7 +174,7 @@ export default class CanvasModule extends Module { * @private */ getToolsEl(compView: any) { - return this._getLocalEl(this.canvasView.toolsEl, compView, 'getToolsEl'); + return this._getLocalEl(this.getCanvasView().toolsEl, compView, 'getToolsEl'); } /** @@ -201,7 +183,7 @@ export default class CanvasModule extends Module { * @private */ getHighlighter(compView: any) { - return this._getLocalEl(this.canvasView.hlEl, compView, 'getHighlighter'); + return this._getLocalEl(this.getCanvasView().hlEl, compView, 'getHighlighter'); } /** @@ -210,7 +192,7 @@ export default class CanvasModule extends Module { * @private */ getBadgeEl(compView: any) { - return this._getLocalEl(this.canvasView.badgeEl, compView, 'getBadgeEl'); + return this._getLocalEl(this.getCanvasView().badgeEl, compView, 'getBadgeEl'); } /** @@ -219,7 +201,7 @@ export default class CanvasModule extends Module { * @private */ getPlacerEl() { - return this.canvasView.placerEl; + return this.getCanvasView().placerEl; } /** @@ -228,7 +210,7 @@ export default class CanvasModule extends Module { * @private */ getGhostEl() { - return this.canvasView.ghostEl; + return this.getCanvasView().ghostEl; } /** @@ -237,7 +219,7 @@ export default class CanvasModule extends Module { * @private */ getToolbarEl() { - return this.canvasView.toolbarEl; + return this.getCanvasView().toolbarEl; } /** @@ -246,7 +228,7 @@ export default class CanvasModule extends Module { * @private */ getResizerEl() { - return this.canvasView.resizerEl; + return this.getCanvasView().resizerEl; } /** @@ -255,7 +237,7 @@ export default class CanvasModule extends Module { * @private */ getOffsetViewerEl(compView: any) { - return this._getLocalEl(this.canvasView.offsetEl, compView, 'getOffsetViewerEl'); + return this._getLocalEl(this.getCanvasView().offsetEl, compView, 'getOffsetViewerEl'); } /** @@ -264,12 +246,12 @@ export default class CanvasModule extends Module { * @private */ getFixedOffsetViewerEl() { - return this.canvasView.fixedOffsetEl; + return this.getCanvasView().fixedOffsetEl; } render() { this.canvasView?.remove(); - this._canvasView = new CanvasView({model: this.canvas, config: this.c}); + this.canvasView = new CanvasView(this.canvas); return this.canvasView.render().el; } @@ -294,7 +276,7 @@ export default class CanvasModule extends Module { * @private */ offset(el: HTMLElement) { - return this.canvasView?.offset(el); + return this.getCanvasView().offset(el); } /** @@ -306,7 +288,8 @@ export default class CanvasModule extends Module { * }); */ setCustomBadgeLabel(f: Function) { - this.c.customBadgeLabel = f; + //@ts-ignore + this.config.customBadgeLabel = f; } /** @@ -316,7 +299,7 @@ export default class CanvasModule extends Module { * @private */ getElementPos(el: HTMLElement, opts?: any) { - return this.canvasView.getElementPos(el, opts); + return this.getCanvasView().getElementPos(el, opts); } /** @@ -326,7 +309,7 @@ export default class CanvasModule extends Module { * @private */ getElementOffsets(el: HTMLElement) { - return this.canvasView.getElementOffsets(el); + return this.getCanvasView().getElementOffsets(el); } /** @@ -334,9 +317,9 @@ export default class CanvasModule extends Module { * @returns {Object} */ getRect() { - const { top, left } = this.canvasView.getPosition(); + const { top = 0, left = 0 } = this.getCanvasView().getPosition() ?? {}; return { - ...this.canvasView.getCanvasOffset(), + ...this.getCanvasView().getCanvasOffset(), topScroll: top, leftScroll: left, }; @@ -360,9 +343,9 @@ export default class CanvasModule extends Module { */ getTargetToElementDim(target: HTMLElement, element: HTMLElement, options: any = {}) { var opts = options || {}; - var canvasPos = this.canvasView.getPosition(); + var canvasPos = this.getCanvasView().getPosition(); if (!canvasPos) return; - var pos = opts.elPos || this.canvasView.getElementPos(element); + var pos = opts.elPos || this.getCanvasView().getElementPos(element); var toRight = options.toRight || 0; var targetHeight = opts.targetHeight || target.offsetHeight; var targetWidth = opts.targetWidth || target.offsetWidth; @@ -442,7 +425,8 @@ export default class CanvasModule extends Module { let top = -toolbarH; let left = !isUndefined(opts.left) ? opts.left : pos.width - toolbarW; left = pos.left < -left ? -pos.left : left; - left = elRight > frCvOff.width ? left - (elRight - frCvOff.width) : left; + const frCvWidth = frCvOff?.width ?? 0; + left = elRight > frCvWidth ? left - (elRight - frCvWidth) : left; // Scroll with the window if the top edge is reached and the // element is bigger than the canvas @@ -509,7 +493,7 @@ export default class CanvasModule extends Module { */ getMouseRelativeCanvas(ev: MouseEvent, opts: any) { const zoom = this.getZoomDecimal(); - const { top, left } = this.getCanvasView().getPosition(opts); + const { top = 0, left = 0 } = this.getCanvasView().getPosition(opts) ?? {}; return { y: ev.clientY * zoom + top, @@ -670,13 +654,13 @@ export default class CanvasModule extends Module { * }); */ addFrame(props = {}, opts = {}) { - return this.canvas.frames.add(new Frame({ ...props }, { em: this.em }), opts); + return this.canvas.frames.add(new Frame(this, { ...props }), opts); } destroy() { this.canvas.stopListening(); this.canvasView?.remove(); - [this.c, this.canvas, this.canvasView].forEach(i => (i = {})); + //[this.canvas, this.canvasView].forEach(i => (i = {})); //@ts-ignore ['model', 'droppable'].forEach(i => (this[i] = {})); } diff --git a/src/canvas/model/Canvas.ts b/src/canvas/model/Canvas.ts index 31b84b7df..5b24e5c64 100644 --- a/src/canvas/model/Canvas.ts +++ b/src/canvas/model/Canvas.ts @@ -8,7 +8,7 @@ export default class Canvas extends Model { defaults() { return { frame: '', - frames: new Frames(), + frames: [], rulers: false, zoom: 100, x: 0, @@ -24,6 +24,7 @@ export default class Canvas extends Model { const { em, config } = module; const { scripts, styles } = config; super(module, {scripts, styles}); + this.set("frames", new Frames(module)) 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.ts b/src/canvas/model/Frame.ts index d21ba29b5..adc6740bb 100644 --- a/src/canvas/model/Frame.ts +++ b/src/canvas/model/Frame.ts @@ -1,15 +1,16 @@ -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 CanvasModule from ".."; +import { Model } from "../../abstract"; +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. @@ -19,7 +20,7 @@ const keyAutoH = '__ah'; * @property {Number} [y=0] Vertical position of the frame in the canvas. * */ -export default class Frame extends Model { +export default class Frame extends Model { defaults() { return { x: 0, @@ -35,18 +36,16 @@ export default class Frame extends Model { _undoexc: ['changesCount'], }; } - em: EditorModel; view?: FrameView; - constructor(props: any, opts: any) { - super(props); - const { em } = opts; + constructor(module: CanvasModule, props: any) { + super(module, props); + const { em } = this; const { styles, component } = this.attributes; const domc = em.get('DomComponents'); const conf = domc.getConfig(); const allRules = em.get('CssComposer').getAll(); const idMap: any = {}; - this.em = em; const modOpts = { em, config: conf, frame: this, idMap }; if (!isComponent(component)) { @@ -87,6 +86,10 @@ export default class Frame extends Model { !props.height && this.set(keyAutoH, 1); } + get head(): {tag: string, attributes: any}[]{ + return this.get("head"); + } + onRemove() { this.getComponent().remove({ root: 1 }); } @@ -117,23 +120,19 @@ export default class Frame extends Model { } getHead() { - const head = this.get('head') || []; - return [...head]; + return [...this.head]; } - setHead(value: any) { - return this.set('head', [...value]); + setHead(value: {tag: string, attributes: any}[]) { + return this.set("head", [...value]); } - addHeadItem(item: any) { - const head = this.getHead(); - head.push(item); - this.setHead(head); + addHeadItem(item: {tag: string, attributes: any}) { + this.head.push(item); } getHeadByAttr(attr: string, value: any, tag: string) { - const head = this.getHead(); - return head.filter( + return this.head.filter( (item) => item.attributes && item.attributes[attr] == value && @@ -142,13 +141,11 @@ export default class Frame extends Model { } removeHeadByAttr(attr: string, value: any, tag: string) { - const head = this.getHead(); const item = this.getHeadByAttr(attr, value, tag); - const index = head.indexOf(item); + const index = this.head.indexOf(item); if (index >= 0) { - head.splice(index, 1); - this.setHead(head); + this.head.splice(index, 1); } } diff --git a/src/canvas/model/Frames.ts b/src/canvas/model/Frames.ts index 2db54e0f9..e69f3ca28 100644 --- a/src/canvas/model/Frames.ts +++ b/src/canvas/model/Frames.ts @@ -1,4 +1,5 @@ import { bindAll } from 'underscore'; +import CanvasModule from '..'; import { Collection } from '../../common'; import Page from '../../pages/model/Page'; import Frame from './Frame'; @@ -7,9 +8,11 @@ export default class Frames extends Collection { loadedItems = 0; itemsToLoad = 0; page?: Page; + module: CanvasModule - constructor(models?: Frame[]) { + constructor(module: CanvasModule, models: Frame[] = []) { super(models); + this.module = module; bindAll(this, 'itemLoaded'); this.on('reset', this.onReset); this.on('remove', this.onRemove); diff --git a/src/canvas/view/CanvasView.ts b/src/canvas/view/CanvasView.ts index 7994e0404..e8a161a2e 100644 --- a/src/canvas/view/CanvasView.ts +++ b/src/canvas/view/CanvasView.ts @@ -4,9 +4,7 @@ import { on, off, getElement, getKeyChar, isTextNode, getElRect, getUiClass } fr import { createEl } from '../../utils/dom'; import FramesView from './FramesView'; import Canvas from '../model/Canvas'; -import Frame from '../model/Frame'; import FrameView from './FrameView'; -import Components from '../../dom_components/model/Components'; import ComponentView from '../../dom_components/view/ComponentView'; import Component from '../../dom_components/model/Component'; @@ -79,13 +77,13 @@ export default class CanvasView extends View { _initFrames() { const { frames, model, config, em } = this; - const collection = model.get('frames'); + const collection = model.frames; em.set('readyCanvas', 0); collection.once('loaded:all', () => em.set('readyCanvas', 1)); frames?.remove(); - this.frames = new FramesView({ - collection, - config: { + this.frames = new FramesView( + {collection}, + {config: { ...config, canvasView: this, }, @@ -296,7 +294,7 @@ export default class CanvasView extends View { * @public */ getPosition(opts: any = {}) { - + const doc = this.frame?.el.contentDocument; if (!doc) return; const bEl = doc.body; diff --git a/src/canvas/view/FrameView.js b/src/canvas/view/FrameView.ts similarity index 79% rename from src/canvas/view/FrameView.js rename to src/canvas/view/FrameView.ts index 0fd2d08b8..fa4a2c15c 100644 --- a/src/canvas/view/FrameView.js +++ b/src/canvas/view/FrameView.ts @@ -1,31 +1,47 @@ import { bindAll, isString, debounce, isUndefined } from 'underscore'; import { appendVNodes, append, createEl, createCustomEvent, motionsEv } from '../../utils/dom'; import { on, off, setViewEl, hasDnd, getPointerEvent } from '../../utils/mixins'; -import { View } from '../../common'; +import { View } from '../../abstract'; import CssRulesView from '../../css_composer/view/CssRulesView'; import Droppable from '../../utils/Droppable'; +import Frame from '../model/Frame'; +import Canvas from '../model/Canvas'; +import ComponentWrapper from '../../dom_components/model/ComponentWrapper'; +import FrameWrapView from './FrameWrapView'; -export default class FrameView extends View { - tagName() { - return 'iframe'; - } +export default class FrameView extends View { - attributes() { - return { - allowfullscreen: 'allowfullscreen', - }; - } + //@ts-ignore + get tagName(){return 'iframe'}; + //@ts-ignore + get attributes() {return { allowfullscreen: 'allowfullscreen' }}; + + dragging = false; + droppable?: Droppable; + rect?: DOMRect; - initialize(o) { + lastClientY?: number; + lastMaxHeight = 0; + private jsContainer?: HTMLElement; + private tools: {[key: string]: HTMLElement} = {}; + private wrapper?: any; + private frameWrapView?: FrameWrapView; + + + constructor(model: Frame, view?: FrameWrapView) { + super({model}); bindAll(this, 'updateClientY', 'stopAutoscroll', 'autoscroll', '_emitUpdate'); - const { model, el } = this; - this.tools = {}; - this.config = { - ...(o.config || {}), + const { el, em } = this; + //el = em.config.el + //@ts-ignore + this.module._config = { + ...(this.config || {}), + //@ts-ignore frameView: this, + //canvasView: view?.cv }; - this.ppfx = this.config.pStylePrefix || ''; - this.em = this.model.em; + //console.log(this.config) + this.frameWrapView = view; this.showGlobalTools = debounce(this.showGlobalTools.bind(this), 50); const cvModel = this.getCanvasModel(); this.listenTo(model, 'change:head', this.updateHead); @@ -40,16 +56,16 @@ export default class FrameView extends View { updateHead() { const { model } = this; const headEl = this.getHead(); - const toRemove = []; - const toAdd = []; - const current = model.get('head'); + const toRemove: any[] = []; + const toAdd: any[] = []; + const current = model.head; const prev = model.previous('head'); - const attrStr = (attr = {}) => + const attrStr = (attr: any = {}) => Object.keys(attr) .sort() .map(i => `[${i}="${attr[i]}"]`) .join(''); - const find = (items, stack, res) => { + const find = (items: any[], stack: any[], res: any[]) => { items.forEach(item => { const { tag, attributes } = item; const has = stack.some(s => s.tag === tag && attrStr(s.attributes) === attrStr(attributes)); @@ -60,7 +76,7 @@ export default class FrameView extends View { find(prev, current, toRemove); toRemove.forEach(stl => { const el = headEl.querySelector(`${stl.tag}${attrStr(stl.attributes)}`); - el && el.parentNode.removeChild(el); + el?.parentNode?.removeChild(el); }); appendVNodes(headEl, toAdd); } @@ -69,28 +85,28 @@ export default class FrameView extends View { return this.el; } - getCanvasModel() { + getCanvasModel(): Canvas { return this.em.get('Canvas').getModel(); } getWindow() { - return this.getEl().contentWindow; + return this.getEl().contentWindow as Window; } getDoc() { - return this.getEl().contentDocument; + return this.getEl().contentDocument as Document; } getHead() { - return this.getDoc().querySelector('head'); + return this.getDoc().querySelector('head') as HTMLHeadElement; } getBody() { - return this.getDoc().querySelector('body'); + return this.getDoc().querySelector('body') as HTMLBodyElement; } getWrapper() { - return this.getBody().querySelector('[data-gjs-type=wrapper]'); + return this.getBody().querySelector('[data-gjs-type=wrapper]') as HTMLElement; } getJsContainer() { @@ -102,8 +118,7 @@ export default class FrameView extends View { } getToolsEl() { - const { frameWrapView } = this.config; - return frameWrapView && frameWrapView.elTools; + return this.frameWrapView?.elTools as HTMLElement; } getGlobalToolsEl() { @@ -151,23 +166,24 @@ export default class FrameView extends View { }; } - _getTool(name) { + _getTool(name: string) { const { tools } = this; const toolsEl = this.getToolsEl(); if (!tools[name]) { - tools[name] = toolsEl.querySelector(name); + tools[name] = toolsEl.querySelector(name) as HTMLElement; } return tools[name]; } - remove() { + remove(...args: any) { const wrp = this.wrapper; - this._toggleEffects(); + this._toggleEffects(false); this.tools = {}; wrp && wrp.remove(); - View.prototype.remove.apply(this, arguments); + View.prototype.remove.apply(this, args); + return this; } startAutoscroll() { @@ -176,7 +192,7 @@ export default class FrameView extends View { // By detaching those from the stack avoid browsers lags // Noticeable with "fast" drag of blocks setTimeout(() => { - this._toggleAutoscrollFx(1); + this._toggleAutoscrollFx(true); requestAnimationFrame(this.autoscroll); }, 0); } @@ -217,7 +233,7 @@ export default class FrameView extends View { } } - updateClientY(ev) { + updateClientY(ev: Event) { ev.preventDefault(); this.lastClientY = getPointerEvent(ev).clientY * this.em.getZoomDecimal(); } @@ -227,10 +243,10 @@ export default class FrameView extends View { } stopAutoscroll() { - this.dragging && this._toggleAutoscrollFx(); + this.dragging && this._toggleAutoscrollFx(false); } - _toggleAutoscrollFx(enable) { + _toggleAutoscrollFx(enable: boolean) { this.dragging = enable; const win = this.getWindow(); const method = enable ? 'on' : 'off'; @@ -251,7 +267,7 @@ export default class FrameView extends View { const evLoad = 'frame:load'; const evOpts = { el, model, view: this }; const canvas = this.getCanvasModel(); - const appendScript = scripts => { + const appendScript = (scripts: any[]) => { if (scripts.length > 0) { const src = scripts.shift(); const scriptEl = createEl('script', { @@ -259,7 +275,7 @@ export default class FrameView extends View { ...(isString(src) ? { src } : src), }); scriptEl.onerror = scriptEl.onload = appendScript.bind(null, scripts); - el.contentDocument.head.appendChild(scriptEl); + el.contentDocument?.head.appendChild(scriptEl); } else { this.renderBody(); em && em.trigger(evLoad, evOpts); @@ -279,10 +295,10 @@ export default class FrameView extends View { }; } - renderStyles(opts = {}) { + renderStyles(opts: any = {}) { const head = this.getHead(); const canvas = this.getCanvasModel(); - const normalize = stls => + const normalize = (stls: any[]) => stls.map(href => ({ tag: 'link', attributes: { @@ -292,9 +308,9 @@ export default class FrameView extends View { })); const prevStyles = normalize(opts.prev || canvas.previous('styles')); const styles = normalize(canvas.get('styles')); - const toRemove = []; - const toAdd = []; - const find = (items, stack, res) => { + const toRemove: any[] = []; + const toAdd: any[] = []; + const find = (items: any[], stack: any[], res: any[]) => { items.forEach(item => { const { href } = item.attributes; const has = stack.some(s => s.attributes.href === href); @@ -305,7 +321,7 @@ export default class FrameView extends View { find(prevStyles, styles, toRemove); toRemove.forEach(stl => { const el = head.querySelector(`link[href="${stl.attributes.href}"]`); - el && el.parentNode.removeChild(el); + el?.parentNode?.removeChild(el); }); appendVNodes(head, toAdd); } @@ -316,6 +332,7 @@ export default class FrameView extends View { const body = this.getBody(); const win = this.getWindow(); const conf = em.config; + //@ts-ignore TODO I don't understand why this needed nowhere else is used win._isEditor = true; this.renderStyles({ prev: [] }); @@ -398,11 +415,12 @@ export default class FrameView extends View { frameView: this, }, }).render(); - append(body, this.wrapper.el); + append(body, this.wrapper?.el); append( body, new CssRulesView({ collection: model.getStyles(), + //@ts-ignore config: { ...em.get('CssComposer').getConfig(), frameView: this, @@ -414,7 +432,8 @@ export default class FrameView extends View { //this.updateOffset(); // TOFIX (check if I need it) // Avoid some default behaviours - on(body, 'click', ev => ev && ev.target.tagName == 'A' && ev.preventDefault()); + //@ts-ignore + on(body, 'click', ev => ev && ev.target?.tagName == 'A' && ev.preventDefault()); on(body, 'submit', ev => ev && ev.preventDefault()); // When the iframe is focused the event dispatcher is not the same so @@ -430,12 +449,12 @@ export default class FrameView extends View { }) ); - this._toggleEffects(1); - this.droppable = hasDnd(em) && new Droppable(em, this.wrapper.el); + this._toggleEffects(true); + this.droppable = hasDnd(em) && new Droppable(em, this.wrapper?.el); model.trigger('loaded'); } - _toggleEffects(enable) { + _toggleEffects(enable: boolean) { const method = enable ? on : off; const win = this.getWindow(); win && method(win, `${motionsEv} resize`, this._emitUpdate); diff --git a/src/canvas/view/FrameWrapView.js b/src/canvas/view/FrameWrapView.ts similarity index 83% rename from src/canvas/view/FrameWrapView.js rename to src/canvas/view/FrameWrapView.ts index 0bf752f8b..89f36d2ca 100644 --- a/src/canvas/view/FrameWrapView.js +++ b/src/canvas/view/FrameWrapView.ts @@ -1,34 +1,37 @@ import { bindAll, isNumber, isNull, debounce } from 'underscore'; -import { View } from '../../common'; +import { View } from '../../abstract'; import FrameView from './FrameView'; import { createEl, removeEl } from '../../utils/dom'; import Dragger from '../../utils/Dragger'; +import CanvasView from './CanvasView'; +import Frame from '../model/Frame'; -export default class FrameWrapView extends View { +export default class FrameWrapView extends View { events() { return { 'click [data-action-remove]': 'remove', 'mousedown [data-action-move]': 'startDrag', }; } - - initialize(opts = {}, conf = {}) { + elTools?: HTMLElement; + frame: FrameView; + dragger?: Dragger; + cv: CanvasView + classAnim: string + + constructor(model: Frame, canvasView: CanvasView) { + super({model}); bindAll(this, 'onScroll', 'frameLoaded', 'updateOffset', 'remove', 'startDrag'); - const { model } = this; + //console.log(model.module) const config = { - ...(opts.config || conf), + ...(model.config), frameWrapView: this, }; - const { canvasView } = config; this.cv = canvasView; - this.config = config; - this.em = this.model.em; - this.canvas = this.em?.get('Canvas'); - this.ppfx = config.pStylePrefix || ''; - this.frame = new FrameView({ model, config }); + this.frame = new FrameView(model, this); this.classAnim = `${this.ppfx}frame-wrapper--anim`; - this.updateOffset = debounce(this.updateOffset.bind(this)); - this.updateSize = debounce(this.updateSize.bind(this)); + this.updateOffset = debounce(this.updateOffset.bind(this), 0); + this.updateSize = debounce(this.updateSize.bind(this), 0); this.listenTo(model, 'loaded', this.frameLoaded); this.listenTo(model, 'change:x change:y', this.updatePos); this.listenTo(model, 'change:width change:height', this.updateSize); @@ -38,10 +41,10 @@ export default class FrameWrapView extends View { } setupDragger() { - const { canvas, model } = this; - let dragX, dragY, zoom; - const toggleEffects = on => { - canvas.toggleFramesEvents(on); + const { module, model } = this; + let dragX: number, dragY: number, zoom: number; + const toggleEffects = (on: boolean) => { + module.toggleFramesEvents(on); }; this.dragger = new Dragger({ @@ -50,10 +53,10 @@ export default class FrameWrapView extends View { zoom = this.em.getZoomMultiplier(); dragX = x; dragY = y; - toggleEffects(); + toggleEffects(false); }, - onEnd: () => toggleEffects(1), - setPosition: posOpts => { + onEnd: () => toggleEffects(true), + setPosition: (posOpts: any) => { model.set({ x: dragX + posOpts.x * zoom, y: dragY + posOpts.y * zoom, @@ -62,20 +65,21 @@ export default class FrameWrapView extends View { }); } - startDrag(ev) { - ev && this.dragger.start(ev); + startDrag(ev?: Event) { + ev && this.dragger?.start(ev); } - __clear(opts) { + __clear(opts?: any) { const { frame } = this; frame && frame.remove(opts); removeEl(this.elTools); } - remove(opts) { + remove(opts?: any) { this.__clear(opts); - View.prototype.remove.apply(this, arguments); - ['frame', 'dragger', 'cv', 'em', 'canvas', 'elTools'].forEach(i => (this[i] = 0)); + View.prototype.remove.apply(this, opts); + //@ts-ignore + ['frame', 'dragger', 'cv', 'elTools'].forEach(i => (this[i] = 0)); return this; } @@ -87,11 +91,11 @@ export default class FrameWrapView extends View { frame.model._emitUpdated(); } - updatePos(md) { + updatePos(md?: boolean) { const { model, el } = this; const { x, y } = model.attributes; const { style } = el; - this.frame.rect = 0; + this.frame.rect = undefined; style.left = isNaN(x) ? x : `${x}px`; style.top = isNaN(y) ? y : `${y}px`; md && this.updateOffset(); @@ -108,7 +112,7 @@ export default class FrameWrapView extends View { updateDim() { const { em, el, $el, model, classAnim, frame } = this; if (!frame) return; - frame.rect = 0; + frame.rect = undefined; $el.addClass(classAnim); const { noChanges, width, height } = this.__handleSize(); @@ -219,7 +223,7 @@ export default class FrameWrapView extends View { ` ); this.elTools = elTools; - const twrp = cv.toolsWrapper; + const twrp = cv?.toolsWrapper; twrp && twrp.appendChild(elTools); // TODO remove on frame remove onRender && onRender({ diff --git a/src/canvas/view/FramesView.js b/src/canvas/view/FramesView.js deleted file mode 100644 index 481367399..000000000 --- a/src/canvas/view/FramesView.js +++ /dev/null @@ -1,21 +0,0 @@ -import DomainViews from '../../domain_abstract/view/DomainViews'; -import FrameWrapView from './FrameWrapView'; - -export default class FramesView extends DomainViews { - constructor(opts = {}, config) { - super(opts, config, true); - this.listenTo(this.collection, 'reset', this.render); - } - - onRemoveBefore(items, opts) { - items.forEach(item => item.remove(opts)); - } - - onRender() { - const { $el } = this; - const { em } = this.collection.first; - em && $el.attr({ class: `${em.getConfig().stylePrefix}frames` }); - } -} - -FramesView.prototype.itemView = FrameWrapView; diff --git a/src/canvas/view/FramesView.ts b/src/canvas/view/FramesView.ts new file mode 100644 index 000000000..10761fedc --- /dev/null +++ b/src/canvas/view/FramesView.ts @@ -0,0 +1,26 @@ +import DomainViews from '../../abstract/DomainViews'; +import Frames from '../model/Frames'; +import CanvasView from './CanvasView'; +import FrameWrapView from './FrameWrapView'; + +export default class FramesView extends DomainViews { + canvasView: CanvasView; + constructor(opts = {}, config: any) { + super(opts, true); + //console.log(this.collection) + this.listenTo(this.collection, 'reset', this.render); + this.canvasView = config.canvasView + } + + onRemoveBefore(items: FrameWrapView[], opts = {}) { + items.forEach(item => item.remove(opts)); + } + + onRender() { + const { $el, em } = this; + em && $el.attr({ class: `${em.config.stylePrefix}frames` }); + } + protected renderView(item: any, type: string){return new FrameWrapView(item, this.canvasView)} +} + +//FramesView.prototype.itemView = FrameWrapView; diff --git a/src/dom_components/view/ComponentView.js b/src/dom_components/view/ComponentView.js index db589d255..ffbe1c0e0 100644 --- a/src/dom_components/view/ComponentView.js +++ b/src/dom_components/view/ComponentView.js @@ -457,7 +457,7 @@ export default class ComponentView extends Backbone.View { } _getFrame() { - return this.config.frameView; + return this.config.em?.get('Canvas').config.frameView; } /** diff --git a/src/editor/model/Editor.ts b/src/editor/model/Editor.ts index 4c192ea0c..06816051e 100644 --- a/src/editor/model/Editor.ts +++ b/src/editor/model/Editor.ts @@ -101,7 +101,6 @@ export default class EditorModel extends Model { get selected(): Selected { return this.get('selected'); } - constructor(conf = {}) { super(); this._config = conf; @@ -401,7 +400,7 @@ export default class EditorModel extends Model { * @param {Object} [opts={}] Options, optional * @public */ - setSelected(el: any | any[], opts: any = {}) { + setSelected(el?: any|any[], opts: any = {}) { const { event } = opts; const ctrlKey = event && (event.ctrlKey || event.metaKey); const { shiftKey } = event || {}; diff --git a/src/pages/model/Page.ts b/src/pages/model/Page.ts index c5f072dd8..d247b82ff 100644 --- a/src/pages/model/Page.ts +++ b/src/pages/model/Page.ts @@ -25,9 +25,8 @@ export default class Page extends Model { ['component', 'styles'].map((i) => this.unset(i)); } const frms: any[] = props.frames || [defFrame]; - const frames = new Frames( - frms?.map((model) => new Frame(model, opts)), - opts + const frames = new Frames(em.get("Canvas"), + frms?.map((model) => new Frame(em.get("Canvas"), model)) ); frames.page = this; this.set('frames', frames); @@ -37,7 +36,7 @@ export default class Page extends Model { } onRemove() { - this.get('frames').reset(); + this.getFrames().reset(); } getFrames(): Frames { @@ -88,7 +87,6 @@ export default class Page extends Model { * const mainFrame = page.getMainFrame(); */ getMainFrame(): Frame { - //@ts-ignore return this.getFrames().at(0); } diff --git a/src/utils/mixins.js b/src/utils/mixins.js index eea59a0a1..c12153fe6 100644 --- a/src/utils/mixins.js +++ b/src/utils/mixins.js @@ -85,7 +85,13 @@ const shallowDiff = (objOrig, objNew) => { return result; }; -const on = (el, ev, fn, opts) => { +/** + * @param {Object} el + * @param {string} ev + * @param {(ev: Event) => any} fn + * @param {Objec} opts + */ +const on = (el, ev, fn, opts = {}) => { ev = ev.split(/\s+/); el = el instanceof Array ? el : [el]; @@ -216,6 +222,11 @@ const getModel = (el, $) => { return model; }; +/** + * Get DomRect for the el + * @param {any} el Component or HTML element + * @return {DOMRect} + */ const getElRect = el => { const def = { top: 0, @@ -239,7 +250,7 @@ const getElRect = el => { /** * Get cross-device pointer event * @param {Event} ev - * @return {Event} + * @return {PointerEvent} */ const getPointerEvent = ev => (ev.touches && ev.touches[0] ? ev.touches[0] : ev);