diff --git a/src/abstract/DomainViews.ts b/src/abstract/DomainViews.ts index 0750cd2fc..4c5c136a2 100644 --- a/src/abstract/DomainViews.ts +++ b/src/abstract/DomainViews.ts @@ -44,7 +44,7 @@ export default abstract class DomainViews, fragment?: DocumentFragment) { - const { config, reuseView, viewCollection, itemsView = {} } = this; + const { reuseView, viewCollection, itemsView = {} } = this; var frag = fragment || null; var typeField = model.get(this.itemType); let view; diff --git a/src/abstract/View.ts b/src/abstract/View.ts index 48034ad05..32658accf 100644 --- a/src/abstract/View.ts +++ b/src/abstract/View.ts @@ -7,7 +7,7 @@ export default class View< TElement extends Element = HTMLElement > extends Backbone.View { protected get pfx() { - return (this.em.config as any).stylePrefix || ""; + return this.em.config.stylePrefix || ""; } protected get ppfx() { @@ -15,7 +15,6 @@ export default class View< } 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; } diff --git a/src/canvas/index.ts b/src/canvas/index.ts index 841e8b595..865814442 100644 --- a/src/canvas/index.ts +++ b/src/canvas/index.ts @@ -80,7 +80,6 @@ export default class CanvasModule extends Module { */ constructor(em: EditorModel) { super(em, "Canvas", defaults) - this.canvas = new Canvas(this); this.model = this.canvas; this.startAutoscroll = this.startAutoscroll.bind(this); diff --git a/src/canvas/view/CanvasView.ts b/src/canvas/view/CanvasView.ts index e8a161a2e..1ff8cd0e1 100644 --- a/src/canvas/view/CanvasView.ts +++ b/src/canvas/view/CanvasView.ts @@ -26,10 +26,10 @@ export default class CanvasView extends View { } template() { - const { pfx } = this; + const { ppfx } = this; return ` -
-
+
+
`; } /*get className(){ @@ -60,7 +60,7 @@ export default class CanvasView extends View { constructor(model: Canvas) { super({model}); bindAll(this, 'clearOff', 'onKeyPress', 'onCanvasMove'); - this.className = this.pfx + 'canvas'; + this.className = this.ppfx + 'canvas'; const { em } = this; this._initFrames(); this.listenTo(em, 'change:canvasOffset', this.clearOff); @@ -76,7 +76,7 @@ export default class CanvasView extends View { } _initFrames() { - const { frames, model, config, em } = this; + const { frames, model, module, em } = this; const collection = model.frames; em.set('readyCanvas', 0); collection.once('loaded:all', () => em.set('readyCanvas', 1)); @@ -84,7 +84,7 @@ export default class CanvasView extends View { this.frames = new FramesView( {collection}, {config: { - ...config, + module, canvasView: this, }, }); @@ -375,7 +375,7 @@ export default class CanvasView extends View { } render() { - const { el, $el, ppfx, config, em } = this; + const { el, $el, pfx, config, em } = this; $el.html(this.template()); const $frames = $el.find('[data-frames]'); this.framesArea = $frames.get(0); @@ -383,32 +383,32 @@ export default class CanvasView extends View { const toolsWrp = $el.find('[data-tools]'); this.toolsWrapper = toolsWrp.get(0); toolsWrp.append(` -
-
-
+
+
+
-
- ${config.extHl ? `
` : ''} -
-
-
-
-
-
+
+ ${config.extHl ? `
` : ''} +
+
+
+
+
+
`); - const toolsEl = el.querySelector(`#${ppfx}tools`); - 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; + const toolsEl = el.querySelector(`#${pfx}tools`) ?? undefined; + this.hlEl = el.querySelector(`.${pfx}highlighter`) ?? undefined; + this.badgeEl = el.querySelector(`.${pfx}badge`) ?? undefined; + this.placerEl = el.querySelector(`.${pfx}placeholder`) ?? undefined; + this.ghostEl = el.querySelector(`.${pfx}ghost`) ?? undefined; + this.toolbarEl = el.querySelector(`.${pfx}toolbar`) ?? undefined; + this.resizerEl = el.querySelector(`.${pfx}resizer`) ?? undefined; + this.offsetEl = el.querySelector(`.${pfx}offset-v`) ?? undefined; + this.fixedOffsetEl = el.querySelector(`.${pfx}offset-fixed-v`) ?? undefined; + this.toolsGlobEl = el.querySelector(`.${pfx}tools-gl`) ?? undefined; + this.toolsEl = toolsEl; this.el.className = getUiClass(em, this.className); this.ready = true; this._renderFrames(); diff --git a/src/canvas/view/FrameView.ts b/src/canvas/view/FrameView.ts index 18139d30f..f63bcc026 100644 --- a/src/canvas/view/FrameView.ts +++ b/src/canvas/view/FrameView.ts @@ -32,7 +32,6 @@ export default class FrameView extends View { super({model}); bindAll(this, 'updateClientY', 'stopAutoscroll', 'autoscroll', '_emitUpdate'); const { el, em } = this; - //el = em.config.el //@ts-ignore this.module._config = { ...(this.config || {}), @@ -40,7 +39,6 @@ export default class FrameView extends View { frameView: this, //canvasView: view?.cv }; - //console.log(this.config) this.frameWrapView = view; this.showGlobalTools = debounce(this.showGlobalTools.bind(this), 50); const cvModel = this.getCanvasModel(); @@ -111,7 +109,7 @@ export default class FrameView extends View { getJsContainer() { if (!this.jsContainer) { - this.jsContainer = createEl('div', { class: `${this.ppfx}js-cont` }); + this.jsContainer = createEl('div', { class: `${this.pfx}js-cont` }); } return this.jsContainer; @@ -255,8 +253,8 @@ export default class FrameView extends View { } render() { - const { $el, ppfx } = this; - $el.attr({ class: `${ppfx}frame` }); + const { $el, pfx } = this; + $el.attr({ class: `${pfx}frame` }); this.renderScripts(); return this; } @@ -326,7 +324,7 @@ export default class FrameView extends View { } renderBody() { - const { config, em, model, ppfx } = this; + const { config, em, model, pfx } = this; const doc = this.getDoc(); const body = this.getBody(); const win = this.getWindow(); @@ -347,36 +345,36 @@ export default class FrameView extends View { padding-top: 0.001em; } - .${ppfx}dashed *[data-gjs-highlightable] { + .${pfx}dashed *[data-gjs-highlightable] { outline: 1px dashed rgba(170,170,170,0.7); outline-offset: -2px; } - .${ppfx}selected { + .${pfx}selected { outline: 2px solid #3b97e3 !important; outline-offset: -2px; } - .${ppfx}selected-parent { + .${pfx}selected-parent { outline: 2px solid ${colorWarn} !important } - .${ppfx}no-select { + .${pfx}no-select { user-select: none; -webkit-user-select:none; -moz-user-select: none; } - .${ppfx}freezed { + .${pfx}freezed { opacity: 0.5; pointer-events: none; } - .${ppfx}no-pointer { + .${pfx}no-pointer { pointer-events: none; } - .${ppfx}plh-image { + .${pfx}plh-image { background: #f5f5f5; border: none; height: 100px; @@ -387,17 +385,17 @@ export default class FrameView extends View { outline-offset: -2px } - .${ppfx}grabbing { + .${pfx}grabbing { cursor: grabbing; cursor: -webkit-grabbing; } - .${ppfx}is__grabbing { + .${pfx}is__grabbing { overflow-x: hidden; } - .${ppfx}is__grabbing, - .${ppfx}is__grabbing * { + .${pfx}is__grabbing, + .${pfx}is__grabbing * { cursor: grabbing !important; } @@ -411,6 +409,7 @@ export default class FrameView extends View { model: component, config: { ...component.config, + em, frameView: this, }, }).render(); diff --git a/src/canvas/view/FrameWrapView.ts b/src/canvas/view/FrameWrapView.ts index 89f36d2ca..4f8003549 100644 --- a/src/canvas/view/FrameWrapView.ts +++ b/src/canvas/view/FrameWrapView.ts @@ -29,7 +29,7 @@ export default class FrameWrapView extends View { }; this.cv = canvasView; this.frame = new FrameView(model, this); - this.classAnim = `${this.ppfx}frame-wrapper--anim`; + this.classAnim = `${this.pfx}frame-wrapper--anim`; this.updateOffset = debounce(this.updateOffset.bind(this), 0); this.updateSize = debounce(this.updateSize.bind(this), 0); this.listenTo(model, 'loaded', this.frameLoaded); @@ -164,48 +164,48 @@ export default class FrameWrapView extends View { } render() { - const { frame, $el, ppfx, cv, model, el } = this; + const { frame, $el, pfx, cv, model, el } = this; const { onRender } = model.attributes; this.__clear(); this.__handleSize(); frame.render(); $el .empty() - .attr({ class: `${ppfx}frame-wrapper` }) + .attr({ class: `${pfx}frame-wrapper` }) .append( ` -
-
+
+
${model.get('name') || ''}
-
- -
-
-
+
+
+
` ) .append(frame.el); const elTools = createEl( 'div', { - class: `${ppfx}tools`, + class: `${pfx}tools`, style: 'pointer-events:none; display: none', }, ` -
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
@@ -219,7 +219,7 @@ export default class FrameWrapView extends View {
-
+
` ); this.elTools = elTools; diff --git a/src/canvas/view/FramesView.ts b/src/canvas/view/FramesView.ts index 10761fedc..e55e24727 100644 --- a/src/canvas/view/FramesView.ts +++ b/src/canvas/view/FramesView.ts @@ -1,15 +1,21 @@ +import CanvasModule from '..'; import DomainViews from '../../abstract/DomainViews'; +import EditorModel from '../../editor/model/Editor'; import Frames from '../model/Frames'; import CanvasView from './CanvasView'; import FrameWrapView from './FrameWrapView'; export default class FramesView extends DomainViews { canvasView: CanvasView; + private _module: CanvasModule; + /*get module(){ + return this._module; + }*/ 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 = {}) { @@ -17,8 +23,8 @@ export default class FramesView extends DomainViews { } onRender() { - const { $el, em } = this; - em && $el.attr({ class: `${em.config.stylePrefix}frames` }); + const { $el, pfx } = this; + $el.attr({ class: `${pfx}frames` }); } protected renderView(item: any, type: string){return new FrameWrapView(item, this.canvasView)} }