From 05a8a4ad3174372e619262583ee70974e39b4120 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sat, 21 Jan 2023 12:20:43 +0400 Subject: [PATCH] Move ComponentView to TS --- .../{ComponentView.js => ComponentView.ts} | 131 +++++++++++------- src/navigator/view/ItemView.ts | 2 +- 2 files changed, 85 insertions(+), 48 deletions(-) rename src/dom_components/view/{ComponentView.js => ComponentView.ts} (80%) diff --git a/src/dom_components/view/ComponentView.js b/src/dom_components/view/ComponentView.ts similarity index 80% rename from src/dom_components/view/ComponentView.js rename to src/dom_components/view/ComponentView.ts index b2f79b4c3..ca4e9566a 100644 --- a/src/dom_components/view/ComponentView.js +++ b/src/dom_components/view/ComponentView.ts @@ -1,21 +1,53 @@ import Backbone from 'backbone'; import { isEmpty, each, keys, result } from 'underscore'; +import Component from '../model/Component'; import Components from '../model/Components'; import ComponentsView from './ComponentsView'; -import Selectors from 'selector_manager/model/Selectors'; -import { replaceWith } from 'utils/dom'; -import { setViewEl } from 'utils/mixins'; +import Selectors from '../../selector_manager/model/Selectors'; +import { replaceWith } from '../../utils/dom'; +import { setViewEl } from '../../utils/mixins'; +import { ObjectAny, View } from '../../common'; +import { ComponentOptions } from '../model/types'; +import EditorModel from '../../editor/model/Editor'; +import { DomComponentsConfig } from '../config/config'; + +type ClbObj = ReturnType; + +interface Rect { + top?: number; + left?: number; + bottom?: number; + right?: number; +} + +// @ts-ignore +export default class ComponentView extends View { + // @ts-ignore + model!: Component; -export default class ComponentView extends Backbone.View { + // @ts-ignore className() { return this.getClasses(); } + // @ts-ignore tagName() { - return this.model.get('tagName'); - } - - initialize(opt = {}) { + return this.model.get('tagName')!; + } + + modelOpt!: ComponentOptions; + em!: EditorModel; + opts?: any; + pfx?: string; + ppfx?: string; + attr?: Record; + classe?: string; + config!: DomComponentsConfig; + childrenView?: ComponentsView; + getChildrenSelector?: Function; + getTemplate?: Function; + + initialize(opt: any = {}) { const model = this.model; const config = opt.config || {}; const em = config.em; @@ -24,10 +56,10 @@ export default class ComponentView extends Backbone.View { this.opts = opt; this.modelOpt = modelOpt; this.config = config; - this.em = em || ''; + this.em = em; this.pfx = config.stylePrefix || ''; this.ppfx = config.pStylePrefix || ''; - this.attr = model.get('attributes'); + this.attr = model.get('attributes')!; this.classe = this.attr.class || []; this.listenTo(model, 'change:style', this.updateStyle); this.listenTo(model, 'change:attributes', this.renderAttributes); @@ -43,9 +75,9 @@ export default class ComponentView extends Backbone.View { model.view = this; this._getFrame() && model.views.push(this); this.initClasses(); - this.initComponents({ avoidRender: 1 }); + this.initComponents({ avoidRender: true }); this.events = { - ...this.constructor.getEvents(), + ...ComponentView.getEvents(), dragstart: 'handleDragStart', }; this.delegateEvents(); @@ -70,12 +102,17 @@ export default class ComponentView extends Backbone.View { /** * Initialize callback */ - init() {} + init(opts: ClbObj) {} /** * Remove callback */ - removed() {} + removed(opts: ClbObj) {} + + /** + * On render callback + */ + onRender(opts: ClbObj) {} /** * Callback executed when the `active` event is triggered on component @@ -88,7 +125,7 @@ export default class ComponentView extends Backbone.View { onDisable() {} remove() { - Backbone.View.prototype.remove.apply(this, arguments); + super.remove(); const { model, $el } = this; const { views } = model; const frame = this._getFrame() || {}; @@ -104,7 +141,7 @@ export default class ComponentView extends Backbone.View { return this; } - handleDragStart(event) { + handleDragStart(event: Event) { if (!this.__isDraggable()) return false; event.stopPropagation(); event.preventDefault(); @@ -127,7 +164,7 @@ export default class ComponentView extends Backbone.View { } } - initComponents(opts = {}) { + initComponents(opts: { avoidRender?: boolean } = {}) { const { model, $el, childrenView } = this; const event = 'change:components'; const comps = model.get('components'); @@ -138,6 +175,7 @@ export default class ComponentView extends Backbone.View { childrenView && childrenView.remove(); this.stopListening(...toListen); !opts.avoidRender && this.renderChildren(); + // @ts-ignore this.listenTo(...toListen); } } @@ -162,10 +200,10 @@ export default class ComponentView extends Backbone.View { * @private * */ importClasses() { - var clm = this.config.em.get('SelectorManager'); + const clm = this.em.Selectors; if (clm) { - this.model.get('classes').each(m => { + this.model.classes.each(m => { clm.add(m.get('name')); }); } @@ -176,9 +214,9 @@ export default class ComponentView extends Backbone.View { * @param {Event} e * @private * */ - updateStatus(opts = {}) { + updateStatus(opts: { noExtHl?: boolean; avoidHover?: boolean } = {}) { const { em, el, ppfx, model } = this; - const { extHl } = em ? em.get('Canvas').getConfig() : {}; + const extHl = em?.Canvas.getConfig().extHl; const status = model.get('status'); const selectedCls = `${ppfx}selected`; const selectedParentCls = `${selectedCls}-parent`; @@ -230,7 +268,7 @@ export default class ComponentView extends Backbone.View { * Update style attribute * @private * */ - updateStyle(m, v, opts = {}) { + updateStyle(m?: any, v?: any, opts: ObjectAny = {}) { const { model, em } = this; if (em && em.getConfig().avoidInlineStyle && !opts.inline) { @@ -246,7 +284,7 @@ export default class ComponentView extends Backbone.View { * @private * */ updateClasses() { - const str = this.model.get('classes').pluck('name').join(' '); + const str = this.model.classes.pluck('name').join(' '); this.setAttribute('class', str); // Regenerate status class @@ -259,7 +297,7 @@ export default class ComponentView extends Backbone.View { * @param {[type]} name [description] * @param {[type]} value [description] */ - setAttribute(name, value) { + setAttribute(name: string, value: any) { const el = this.$el; value ? el.attr(name, value) : el.removeAttr(name); } @@ -280,7 +318,7 @@ export default class ComponentView extends Backbone.View { * @private * */ updateAttributes() { - const attrs = []; + const attrs: string[] = []; const { model, $el, el } = this; const { textable, type } = model.attributes; @@ -312,7 +350,7 @@ export default class ComponentView extends Backbone.View { * @private * */ updateContent() { - const content = this.model.get('content'); + const content = this.model.get('content')!; const hasComps = this.model.components().length; this.getChildrenContainer().innerHTML = hasComps ? '' : content; } @@ -322,7 +360,7 @@ export default class ComponentView extends Backbone.View { * @param {Event} e * @private */ - prevDef(e) { + prevDef(e: Event) { e.preventDefault(); } @@ -333,7 +371,7 @@ export default class ComponentView extends Backbone.View { updateScript() { const { model, em } = this; if (!model.get('script')) return; - em && em.get('Canvas').getCanvasView().updateScript(this); + em?.Canvas.getCanvasView().updateScript(this); } /** @@ -378,13 +416,13 @@ export default class ComponentView extends Backbone.View { * have to take in account offsetParent */ getOffsetRect() { - const rect = {}; + const rect: Rect = {}; const target = this.el; let gtop = 0; let gleft = 0; - const assignRect = el => { - const { offsetParent } = el; + const assignRect = (el: HTMLElement) => { + const offsetParent = el.offsetParent as HTMLElement; if (offsetParent) { gtop += offsetParent.offsetTop; @@ -402,23 +440,23 @@ export default class ComponentView extends Backbone.View { return rect; } - isInViewport({ rect } = {}) { + isInViewport({ rect }: { rect?: Rect } = {}) { const { el } = this; const elDoc = el.ownerDocument; const { body } = elDoc; - const { frameElement } = elDoc.defaultView; + const frameElement = elDoc.defaultView?.frameElement as HTMLIFrameElement; const { top, left } = rect || this.getOffsetRect(); const frame = this._getFrame().getOffsetRect(); return ( - top >= frame.scrollTop && - left >= frame.scrollLeft && - top <= frame.scrollBottom && - left <= frameElement.offsetWidth + body.scrollLeft + top! >= frame.scrollTop && + left! >= frame.scrollLeft && + top! <= frame.scrollBottom && + left! <= frameElement?.offsetWidth + body.scrollLeft ); } - scrollIntoView(opts = {}) { + scrollIntoView(opts: { force?: boolean } & ScrollIntoViewOptions = {}) { const rect = this.getOffsetRect(); const isInViewport = this.isInViewport({ rect }); @@ -427,7 +465,7 @@ export default class ComponentView extends Backbone.View { // PATCH: scrollIntoView won't work with multiple requests from iframes if (opts.behavior !== 'smooth') { - el.ownerDocument.defaultView.scrollTo(0, rect.top); + el.ownerDocument.defaultView?.scrollTo(0, rect.top!); } else { el.scrollIntoView({ behavior: 'smooth', @@ -443,6 +481,7 @@ export default class ComponentView extends Backbone.View { */ reset() { const { el } = this; + // @ts-ignore this.el = ''; this._ensureElement(); this._setData(); @@ -458,7 +497,7 @@ export default class ComponentView extends Backbone.View { } _getFrame() { - return this.config.em?.get('Canvas').config.frameView; + return this.em?.get('Canvas').config.frameView; } /** @@ -471,7 +510,8 @@ export default class ComponentView extends Backbone.View { const view = this.childrenView || new ComponentsView({ - collection: this.model.get('components'), + // @ts-ignore + collection: this.model.get('components')!, config: this.config, componentTypes: this.opts.componentTypes, }); @@ -509,10 +549,7 @@ export default class ComponentView extends Backbone.View { } } - onRender() {} + static getEvents() { + return result(this.prototype, 'events'); + } } - -// Due to the Backbone extend mechanism, static methods are not properly extended -ComponentView.getEvents = function () { - return result(this.prototype, 'events'); -}; diff --git a/src/navigator/view/ItemView.ts b/src/navigator/view/ItemView.ts index f768d6496..286acdaf5 100644 --- a/src/navigator/view/ItemView.ts +++ b/src/navigator/view/ItemView.ts @@ -329,7 +329,7 @@ export default class ItemView extends View { ComponentView.prototype.updateStatus.apply(this, [ { avoidHover: !this.config.highlightHover, - noExtHl: 1, + noExtHl: true, }, ]); }