diff --git a/src/canvas/index.js b/src/canvas/index.js index b0e92dc84..c903da3c1 100644 --- a/src/canvas/index.js +++ b/src/canvas/index.js @@ -48,7 +48,7 @@ */ import { isUndefined } from 'underscore'; -import { getElement, getViewEl } from 'utils/mixins'; +import { getElement, getViewEl } from '../utils/mixins'; import defaults from './config/config'; import Canvas from './model/Canvas'; import canvasView from './view/CanvasView'; diff --git a/src/canvas/model/Canvas.js b/src/canvas/model/Canvas.js index 558ea6a35..d5fccb49b 100644 --- a/src/canvas/model/Canvas.js +++ b/src/canvas/model/Canvas.js @@ -1,5 +1,5 @@ -import { Model } from 'common'; -import { evPageSelect } from 'pages'; +import { Model } from '../../common'; +import { evPageSelect } from '../../pages'; import Frames from './Frames'; export default class Canvas extends Model { diff --git a/src/canvas/model/Frame.js b/src/canvas/model/Frame.js index e0f27779c..e47c57c1f 100644 --- a/src/canvas/model/Frame.js +++ b/src/canvas/model/Frame.js @@ -1,6 +1,6 @@ -import { Model } from 'common'; import { result, forEach, isEmpty, isString } from 'underscore'; -import { isComponent, isObject } from 'utils/mixins'; +import { Model } from '../../common'; +import { isComponent, isObject } from '../../utils/mixins'; const keyAutoW = '__aw'; const keyAutoH = '__ah'; diff --git a/src/canvas/model/Frames.js b/src/canvas/model/Frames.js index 8f403ed28..e6d17da05 100644 --- a/src/canvas/model/Frames.js +++ b/src/canvas/model/Frames.js @@ -1,6 +1,6 @@ import { bindAll } from 'underscore'; -import { Collection } from 'common'; -import model from './Frame'; +import { Collection } from '../../common'; +import Frame from './Frame'; export default class Frames extends Collection { initialize(models, config = {}) { @@ -44,4 +44,4 @@ export default class Frames extends Collection { } } -Frames.prototype.model = model; +Frames.prototype.model = Frame; diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js index f70411c44..41456e5b0 100644 --- a/src/canvas/view/CanvasView.js +++ b/src/canvas/view/CanvasView.js @@ -1,23 +1,17 @@ -import Backbone from 'backbone'; import { bindAll } from 'underscore'; -import { - on, - off, - getElement, - getKeyChar, - isTextNode, - getElRect, - getUiClass -} from 'utils/mixins'; +import { View } from '../../common'; +import { on, off, getElement, getKeyChar, isTextNode, getElRect, getUiClass } from '../../utils/mixins'; +import { createEl } from '../../utils/dom'; import FramesView from './FramesView'; -const $ = Backbone.$; let timerZoom; -export default Backbone.View.extend({ - events: { - wheel: 'onWheel' - }, +export default class CanvasView extends View { + events() { + return { + wheel: 'onWheel', + }; + } template() { const { pfx } = this; @@ -25,7 +19,7 @@ export default Backbone.View.extend({
`; - }, + } initialize(o) { bindAll(this, 'clearOff', 'onKeyPress', 'onCanvasMove'); @@ -42,12 +36,12 @@ export default Backbone.View.extend({ this.listenTo(model, 'change:zoom change:x change:y', this.updateFrames); this.listenTo(model, 'change:frames', this._onFramesUpdate); this.toggleListeners(1); - }, + } _onFramesUpdate() { this._initFrames(); this._renderFrames(); - }, + } _initFrames() { const { frames, model, config, em } = this; @@ -59,10 +53,10 @@ export default Backbone.View.extend({ collection, config: { ...config, - canvasView: this - } + canvasView: this, + }, }); - }, + } checkSelected(component, opts = {}) { const { scroll } = opts; @@ -72,28 +66,28 @@ export default Backbone.View.extend({ component.views.forEach(view => { view._getFrame() === currFrame && view.scrollIntoView(scroll); }); - }, + } remove() { this.frames.remove(); this.frames = {}; - Backbone.View.prototype.remove.apply(this, arguments); + View.prototype.remove.apply(this, arguments); this.toggleListeners(); - }, + } preventDefault(ev) { if (ev) { ev.preventDefault(); ev._parentEvent && ev._parentEvent.preventDefault(); } - }, + } onCanvasMove(ev) { // 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) { const { el } = this; @@ -101,21 +95,17 @@ export default Backbone.View.extend({ fn(document, 'keypress', this.onKeyPress); fn(window, 'scroll resize', this.clearOff); // fn(el, 'mousemove dragover', this.onCanvasMove); - }, + } onKeyPress(ev) { const { em } = this; const key = getKeyChar(ev); - if ( - key === ' ' && - em.getZoomDecimal() !== 1 && - !em.get('Canvas').isInputFocused() - ) { + if (key === ' ' && em.getZoomDecimal() !== 1 && !em.get('Canvas').isInputFocused()) { this.preventDefault(ev); em.get('Editor').runCommand('core:canvas-move'); } - }, + } onWheel(ev) { if ((ev.ctrlKey || ev.metaKey) && this.em.getConfig('multiFrames')) { @@ -125,7 +115,7 @@ export default Backbone.View.extend({ const zoom = model.get('zoom'); model.set('zoom', zoom + delta * 2); } - }, + } updateFrames(ev) { const { em, model } = this; @@ -133,18 +123,17 @@ export default Backbone.View.extend({ const zoom = this.getZoom(); const defOpts = { preserveSelected: 1 }; const mpl = zoom ? 1 / zoom : 1; - this.framesArea.style.transform = `scale(${zoom}) translate(${x * - mpl}px, ${y * mpl}px)`; + 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); - }, + } getZoom() { return this.em.getZoomDecimal(); - }, + } /** * Checks if the element is visible in the canvas's viewport @@ -157,13 +146,8 @@ export default Backbone.View.extend({ const frameRect = this.getFrameOffset(elem); const rTop = rect.top; const rLeft = rect.left; - return ( - rTop >= 0 && - rLeft >= 0 && - rTop <= frameRect.height && - rLeft <= frameRect.width - ); - }, + return rTop >= 0 && rLeft >= 0 && rTop <= frameRect.height && rLeft <= frameRect.width; + } /** * Get the offset of the element @@ -179,9 +163,9 @@ export default Backbone.View.extend({ top: rect.top + (noScroll ? 0 : docBody.scrollTop), left: rect.left + (noScroll ? 0 : docBody.scrollLeft), width: rect.width, - height: rect.height + height: rect.height, }; - }, + } /** * Cleare cached offsets @@ -190,7 +174,7 @@ export default Backbone.View.extend({ clearOff() { this.frmOff = null; this.cvsOff = null; - }, + } /** * Return frame offset @@ -205,7 +189,7 @@ export default Backbone.View.extend({ this.frmOff = this.offset(frEl || frame); } return this.frmOff; - }, + } /** * Return canvas offset @@ -215,7 +199,7 @@ export default Backbone.View.extend({ getCanvasOffset() { if (!this.cvsOff) this.cvsOff = this.offset(this.el); return this.cvsOff; - }, + } /** * Returns element's rect info @@ -239,7 +223,7 @@ export default Backbone.View.extend({ const width = eo.width * zoom; return { top, left, height, width, zoom, rect: eo }; - }, + } /** * Returns element's offsets like margins and paddings @@ -259,13 +243,13 @@ export default Backbone.View.extend({ 'paddingTop', 'paddingRight', 'paddingBottom', - 'paddingLeft' + 'paddingLeft', ].forEach(offset => { result[offset] = parseFloat(styles[offset]) * this.getZoom(); }); return result; - }, + } /** * Returns position data of the canvas element @@ -285,9 +269,9 @@ export default Backbone.View.extend({ top: fo.top + (noScroll ? 0 : bEl.scrollTop) * zoom - co.top, left: fo.left + (noScroll ? 0 : bEl.scrollLeft) * zoom - co.left, width: co.width, - height: co.height + height: co.height, }; - }, + } /** * Update javascript of a specific component passed by its View @@ -299,19 +283,17 @@ export default Backbone.View.extend({ const id = model.getId(); if (!view.scriptContainer) { - view.scriptContainer = $(`