From dd8fd1d0a0bd85c8339ad5a8fd407fb4f61a30db Mon Sep 17 00:00:00 2001 From: Alex Ritter Date: Sat, 30 Apr 2022 15:24:43 +0200 Subject: [PATCH] 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` }); } }