diff --git a/src/abstract/DomainViews.ts b/src/abstract/DomainViews.ts new file mode 100644 index 000000000..4c5c136a2 --- /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 { 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 6a1bc3194..324e27036 100644 --- a/src/abstract/Model.ts +++ b/src/abstract/Model.ts @@ -26,7 +26,7 @@ export default class Model< return this._module.config; } - protected get em() { + public get em() { return this._module.em; } } diff --git a/src/abstract/Module.ts b/src/abstract/Module.ts index d5f216c87..004d479c6 100644 --- a/src/abstract/Module.ts +++ b/src/abstract/Module.ts @@ -47,9 +47,7 @@ export default abstract class Module 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 || ''; diff --git a/src/abstract/View.ts b/src/abstract/View.ts index f1aaa9170..179d7f734 100644 --- a/src/abstract/View.ts +++ b/src/abstract/View.ts @@ -1,19 +1,29 @@ -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.ppfx + this.config.stylePrefix || ""; } protected get ppfx() { - return this.pfx + this.model.module.config.stylePrefix || ''; + return (this.em.config as any).stylePrefix || ""; + } + + protected get module(): TModel extends Model? M: unknown { + //console.log((this.collection.first as any).module) + return this.model?.module ?? (this.collection as any).module; } protected get em() { - return this.model.module.em; + return this.module.em; + } + + protected get config(): TModel extends Model ? (M extends IBaseModule ? C : unknown) : unknown{ + return this.module.config as any } } diff --git a/src/canvas/index.js b/src/canvas/index.ts similarity index 78% rename from src/canvas/index.js rename to src/canvas/index.ts index f71e56f55..841e8b595 100644 --- a/src/canvas/index.js +++ b/src/canvas/index.ts @@ -47,49 +47,49 @@ * @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'; + canvas: Canvas; + model: Canvas; + private canvasView?: CanvasView; - c = {}; - canvas; - canvasView; /** * Initialize module. Automatically called with a new instance of the editor * @param {Object} config Configurations * @private */ - init(config = {}) { - this.c = { - ...defaults, - ...config, - module: this, - }; + constructor(em: EditorModel) { + super(em, "Canvas", defaults) - 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); this.model = this.canvas; this.startAutoscroll = this.startAutoscroll.bind(this); this.stopAutoscroll = this.stopAutoscroll.bind(this); return this; } + init(){ + + } onLoad() { this.model.init(); @@ -99,25 +99,15 @@ export default class CanvasModule { 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) { + getFrame(index?: number) { return this.getFrames()[index || 0]; } @@ -127,11 +117,11 @@ export default class CanvasModule { */ getFrameEl() { const { frame } = this.canvasView || {}; - return frame && frame.el; + return frame?.el as HTMLIFrameElement; } getFramesEl() { - return this.canvasView.framesArea; + return this.canvasView?.framesArea as HTMLElement; } /** @@ -139,7 +129,8 @@ export default class CanvasModule { * @returns {Window} */ getWindow() { - return this.getFrameEl().contentWindow; + const { frame } = this.canvasView || {}; + return frame?.getWindow() as Window; } /** @@ -148,7 +139,7 @@ export default class CanvasModule { */ getDocument() { const frame = this.getFrameEl(); - return frame && frame.contentDocument; + return frame?.contentDocument as Document; } /** @@ -157,16 +148,12 @@ export default class CanvasModule { */ getBody() { const doc = this.getDocument(); - return doc && doc.body; + return doc?.body as HTMLBodyElement; } - _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 +165,7 @@ export default class CanvasModule { * @private */ getGlobalToolsEl() { - return this.canvasView.toolsGlobEl; + return this.canvasView?.toolsGlobEl; } /** @@ -186,8 +173,8 @@ export default class CanvasModule { * @returns {HTMLElement} * @private */ - getToolsEl(compView) { - return this._getLocalEl(this.canvasView.toolsEl, compView, 'getToolsEl'); + getToolsEl(compView: any) { + return this._getLocalEl(this.getCanvasView().toolsEl, compView, 'getToolsEl'); } /** @@ -195,8 +182,8 @@ export default class CanvasModule { * @returns {HTMLElement} * @private */ - getHighlighter(compView) { - return this._getLocalEl(this.canvasView.hlEl, compView, 'getHighlighter'); + getHighlighter(compView: any) { + return this._getLocalEl(this.getCanvasView().hlEl, compView, 'getHighlighter'); } /** @@ -204,8 +191,8 @@ export default class CanvasModule { * @returns {HTMLElement} * @private */ - getBadgeEl(compView) { - return this._getLocalEl(this.canvasView.badgeEl, compView, 'getBadgeEl'); + getBadgeEl(compView: any) { + return this._getLocalEl(this.getCanvasView().badgeEl, compView, 'getBadgeEl'); } /** @@ -214,7 +201,7 @@ export default class CanvasModule { * @private */ getPlacerEl() { - return this.canvasView.placerEl; + return this.getCanvasView().placerEl; } /** @@ -223,7 +210,7 @@ export default class CanvasModule { * @private */ getGhostEl() { - return this.canvasView.ghostEl; + return this.getCanvasView().ghostEl; } /** @@ -232,7 +219,7 @@ export default class CanvasModule { * @private */ getToolbarEl() { - return this.canvasView.toolbarEl; + return this.getCanvasView().toolbarEl; } /** @@ -241,7 +228,7 @@ export default class CanvasModule { * @private */ getResizerEl() { - return this.canvasView.resizerEl; + return this.getCanvasView().resizerEl; } /** @@ -249,8 +236,8 @@ export default class CanvasModule { * @returns {HTMLElement} * @private */ - getOffsetViewerEl(compView) { - return this._getLocalEl(this.canvasView.offsetEl, compView, 'getOffsetViewerEl'); + getOffsetViewerEl(compView: any) { + return this._getLocalEl(this.getCanvasView().offsetEl, compView, 'getOffsetViewerEl'); } /** @@ -259,15 +246,12 @@ export default class CanvasModule { * @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; } @@ -291,8 +275,8 @@ export default class CanvasModule { * @returns {Object} * @private */ - offset(el) { - return this.canvasView.offset(el); + offset(el: HTMLElement) { + return this.getCanvasView().offset(el); } /** @@ -303,8 +287,9 @@ export default class CanvasModule { * return component.getName(); * }); */ - setCustomBadgeLabel(f) { - this.c.customBadgeLabel = f; + setCustomBadgeLabel(f: Function) { + //@ts-ignore + this.config.customBadgeLabel = f; } /** @@ -313,8 +298,8 @@ export default class CanvasModule { * @returns {Object} * @private */ - getElementPos(el, opts) { - return this.canvasView.getElementPos(el, opts); + getElementPos(el: HTMLElement, opts?: any) { + return this.getCanvasView().getElementPos(el, opts); } /** @@ -323,8 +308,8 @@ export default class CanvasModule { * @returns {Object} * @private */ - getElementOffsets(el) { - return this.canvasView.getElementOffsets(el); + getElementOffsets(el: HTMLElement) { + return this.getCanvasView().getElementOffsets(el); } /** @@ -332,9 +317,9 @@ export default class CanvasModule { * @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, }; @@ -356,11 +341,11 @@ 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(); + 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; @@ -391,20 +376,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 +411,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; @@ -440,7 +425,8 @@ export default class CanvasModule { 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 @@ -477,8 +463,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 +491,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 = 0, left = 0 } = this.getCanvasView().getPosition(opts) ?? {}; return { y: ev.clientY * zoom + top, @@ -532,7 +517,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 +540,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 +550,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 +559,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 +571,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 +595,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 +608,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 +622,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); } /** @@ -668,13 +654,14 @@ export default class CanvasModule { * }); */ 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 = {})); - ['em', 'model', 'droppable'].forEach(i => (this[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 6bd976a57..5b24e5c64 100644 --- a/src/canvas/model/Canvas.ts +++ b/src/canvas/model/Canvas.ts @@ -1,15 +1,14 @@ -import { Model } from '../../common'; -import Backbone from 'backbone'; -import { evPageSelect } from '../../pages'; -import Frames from './Frames'; -import EditorModel from '../../editor/model/Editor'; -import Page from '../../pages/model/Page'; +import { Model } from "../../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: '', - frames: new Frames(), + frames: [], rulers: false, zoom: 100, x: 0, @@ -20,18 +19,17 @@ export default class Canvas extends Backbone.Model { styles: [], }; } - em: EditorModel; - config: any; - constructor(props: any, config: any = {}) { - super(props); - const { em } = config; - this.config = config; - this.em = em; - this.listenTo(this, 'change:zoom', this.onZoomChange); - this.listenTo(em, 'change:device', this.updateDevice); + constructor(module: CanvasModule) { + 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); } + get frames(): Frames { return this.get('frames'); } diff --git a/src/canvas/model/Frame.ts b/src/canvas/model/Frame.ts index 82ea2dfc6..61532be40 100644 --- a/src/canvas/model/Frame.ts +++ b/src/canvas/model/Frame.ts @@ -1,7 +1,7 @@ import { result, forEach, isEmpty, isString } from 'underscore'; -import { Model } from '../../common'; +import { Model } from "../../abstract"; +import CanvasModule from ".."; 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'; @@ -17,7 +17,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, @@ -33,21 +33,16 @@ export default class Frame extends Model { _undoexc: ['changesCount'], }; } - em: EditorModel; view?: FrameView; - /** - * @hideconstructor - */ - 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)) { @@ -88,6 +83,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 }); } @@ -118,23 +117,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 && @@ -143,13 +138,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.js b/src/canvas/view/CanvasView.ts similarity index 64% rename from src/canvas/view/CanvasView.js rename to src/canvas/view/CanvasView.ts index 6d8051ca8..82c411e1a 100644 --- a/src/canvas/view/CanvasView.js +++ b/src/canvas/view/CanvasView.ts @@ -1,12 +1,24 @@ 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 FrameView from './FrameView'; +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,22 +32,42 @@ export default class CanvasView extends View {
`; } - - initialize(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.config.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() { @@ -45,59 +77,62 @@ 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 && frames.remove(); - this.frames = new FramesView({ - collection, - config: { + frames?.remove(); + this.frames = new FramesView( + {collection}, + { ...config, canvasView: this, }, - }); + ); } - 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; + // @ts-ignore fn(document, 'keypress', this.onKeyPress); fn(window, 'scroll resize', this.clearOff); // fn(el, 'mousemove dragover', this.onCanvasMove); } - onKeyPress(ev) { + onKeyPress(ev: KeyboardEvent) { const { em } = this; const key = getKeyChar(ev); @@ -107,28 +142,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() { @@ -140,7 +177,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); @@ -152,16 +189,16 @@ 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 = {}) { + 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, }; @@ -172,20 +209,20 @@ export default class CanvasView extends View { * @private */ clearOff() { - this.frmOff = null; - this.cvsOff = null; + this.frmOff = undefined; + this.cvsOff = undefined; } /** * Return frame offset - * @return {Object} - * @private + * @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; @@ -193,8 +230,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 +241,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: HTMLElement, opts: any = {}) { const zoom = this.getZoom(); const opt = opts || {}; const frameOffset = this.getFrameOffset(el); @@ -228,14 +265,14 @@ export default class CanvasView extends View { /** * Returns element's offsets like margins and paddings * @param {HTMLElement} el - * @return {Object} - * @private + * @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', @@ -244,7 +281,8 @@ export default class CanvasView extends View { 'paddingRight', 'paddingBottom', 'paddingLeft', - ].forEach(offset => { + ] + marginPaddingOffsets.forEach(offset => { result[offset] = parseFloat(styles[offset]) * this.getZoom(); }); @@ -253,11 +291,12 @@ 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; + getPosition(opts: any = {}) { + + const doc = this.frame?.el.contentDocument; if (!doc) return; const bEl = doc.body; const zoom = this.getZoom(); @@ -278,7 +317,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(); @@ -313,25 +353,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; } @@ -360,18 +400,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/canvas/view/FrameView.js b/src/canvas/view/FrameView.ts similarity index 78% rename from src/canvas/view/FrameView.js rename to src/canvas/view/FrameView.ts index fde7eb414..99be66830 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.config.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); } @@ -216,7 +232,7 @@ export default class FrameView extends View { } } - updateClientY(ev) { + updateClientY(ev: Event) { ev.preventDefault(); this.lastClientY = getPointerEvent(ev).clientY * this.em.getZoomDecimal(); } @@ -226,10 +242,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'; @@ -250,7 +266,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', { @@ -258,7 +274,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); @@ -278,10 +294,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: { @@ -291,9 +307,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); @@ -304,18 +320,18 @@ 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); } 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; + //@ts-ignore TODO I don't understand why this needed nowhere else is used win._isEditor = true; this.renderStyles({ prev: [] }); @@ -395,14 +411,16 @@ export default class FrameView extends View { model: component, config: { ...component.config, + em, 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 af03496a6..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, em } = config; this.cv = canvasView; - this.config = config; - this.em = em; - this.canvas = em && 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 01ae1ef1b..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 { config, $el } = this; - const { em } = config; - 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..40e542c5d --- /dev/null +++ b/src/canvas/view/FramesView.ts @@ -0,0 +1,28 @@ +import CanvasModule from '..'; +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; + private _module: CanvasModule; + + constructor(opts = {}, config: any) { + super(opts, true); + //console.log(this.collection) + this.listenTo(this.collection, 'reset', this.render); + this.canvasView = config.canvasView + this._module = config.module; + } + + onRemoveBefore(items: FrameWrapView[], opts = {}) { + items.forEach(item => item.remove(opts)); + } + + onRender() { + const { $el, ppfx } = this; + $el.attr({ class: `${ppfx}frames` }); + } + protected renderView(item: any, type: string){return new FrameWrapView(item, this.canvasView)} +} diff --git a/src/dom_components/view/ComponentView.js b/src/dom_components/view/ComponentView.js index f326e0aac..b2f79b4c3 100644 --- a/src/dom_components/view/ComponentView.js +++ b/src/dom_components/view/ComponentView.js @@ -458,7 +458,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/index.ts b/src/editor/index.ts index c7c7edb49..46371f183 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'); } diff --git a/src/editor/model/Editor.ts b/src/editor/model/Editor.ts index 49e27f094..132e0897f 100644 --- a/src/editor/model/Editor.ts +++ b/src/editor/model/Editor.ts @@ -827,8 +827,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/navigator/view/ItemView.ts b/src/navigator/view/ItemView.ts index d9395af1b..a1c3f0465 100644 --- a/src/navigator/view/ItemView.ts +++ b/src/navigator/view/ItemView.ts @@ -1,5 +1,5 @@ import { isString, bindAll } from 'underscore'; -import { View } from '../../abstract'; +import { View } from '../../common'; import { getModel, isEscKey, isEnterKey } from '../../utils/mixins'; import ComponentView from '../../dom_components/view/ComponentView'; import Component, { eventDrag } from '../../dom_components/model/Component'; diff --git a/src/navigator/view/ItemsView.ts b/src/navigator/view/ItemsView.ts index fedc32908..68ad43110 100644 --- a/src/navigator/view/ItemsView.ts +++ b/src/navigator/view/ItemsView.ts @@ -1,4 +1,4 @@ -import { View } from '../../abstract'; +import { View } from '../../common'; import Component, { eventDrag } from '../../dom_components/model/Component'; import ItemView from './ItemView'; diff --git a/src/pages/model/Page.ts b/src/pages/model/Page.ts index dfc43d187..f501eafaa 100644 --- a/src/pages/model/Page.ts +++ b/src/pages/model/Page.ts @@ -24,7 +24,9 @@ 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))); + const frames = new Frames(em.get("Canvas"), + frms?.map((model) => new Frame(em.get("Canvas"), model)) + ); frames.page = this; this.set('frames', frames); !this.getId() && this.set('id', em?.get('PageManager')._createId()); @@ -33,7 +35,7 @@ export default class Page extends Model { } onRemove() { - this.get('frames').reset(); + this.getFrames().reset(); } getFrames(): Frames { @@ -84,7 +86,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/dom.js b/src/utils/dom.js index b8b0108e6..2e5b5f993 100644 --- a/src/utils/dom.js +++ b/src/utils/dom.js @@ -51,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)); diff --git a/src/utils/mixins.ts b/src/utils/mixins.ts index a5db08d0e..ac77c742b 100644 --- a/src/utils/mixins.ts +++ b/src/utils/mixins.ts @@ -87,7 +87,7 @@ const shallowDiff = (objOrig: Record, objNew: Record) return result; }; -const on = (el: HTMLElement | HTMLElement[], ev: string, fn: () => void, opts?: AddEventListenerOptions) => { +const on = (el: HTMLElement|Window|Document | (Window|HTMLElement|Document)[], ev: string, fn: (ev: Event) => void, opts?: AddEventListenerOptions) => { const evs = ev.split(/\s+/); el = el instanceof Array ? el : [el]; @@ -96,7 +96,7 @@ const on = (el: HTMLElement | HTMLElement[], ev: string, fn: () => void, opts?: } }; -const off = (el: HTMLElement | HTMLElement[], ev: string, fn: () => void, opts?: AddEventListenerOptions) => { +const off = (el: HTMLElement|Window|Document | (Window|HTMLElement|Document)[], ev: string, fn: (ev: Event) => void, opts?: AddEventListenerOptions) => { const evs = ev.split(/\s+/); el = el instanceof Array ? el : [el]; @@ -220,7 +220,7 @@ const getModel = (el: any, $?: any) => { return model; }; -const getElRect = (el: HTMLElement) => { +const getElRect = (el?: HTMLElement) => { const def = { top: 0, left: 0, @@ -243,7 +243,7 @@ const getElRect = (el: HTMLElement) => { /** * Get cross-device pointer event * @param {Event} ev - * @return {Event} + * @return {PointerEvent} */ const getPointerEvent = (ev: Event) => // @ts-ignore