From 8fe59060abeb718f10414fc1c04a4e403aece3a7 Mon Sep 17 00:00:00 2001 From: Alex Ritter Date: Thu, 9 Jun 2022 15:12:51 +0200 Subject: [PATCH] Revert "Fix Css style classes were not correct" This reverts commit 34ba911a9752504d13f3d8bdd47012ec28f0a9ea. --- src/abstract/DomainViews.ts | 2 +- src/abstract/View.ts | 3 +- src/canvas/index.ts | 1 + src/canvas/view/CanvasView.ts | 58 ++++++++++++++++---------------- src/canvas/view/FrameView.ts | 33 +++++++++--------- src/canvas/view/FrameWrapView.ts | 40 +++++++++++----------- src/canvas/view/FramesView.ts | 12 ++----- 7 files changed, 73 insertions(+), 76 deletions(-) diff --git a/src/abstract/DomainViews.ts b/src/abstract/DomainViews.ts index 4c5c136a2..0750cd2fc 100644 --- a/src/abstract/DomainViews.ts +++ b/src/abstract/DomainViews.ts @@ -44,7 +44,7 @@ export default abstract class DomainViews, fragment?: DocumentFragment) { - const { reuseView, viewCollection, itemsView = {} } = this; + const { config, 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 32658accf..48034ad05 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.stylePrefix || ""; + return (this.em.config as any).stylePrefix || ""; } protected get ppfx() { @@ -15,6 +15,7 @@ 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 865814442..841e8b595 100644 --- a/src/canvas/index.ts +++ b/src/canvas/index.ts @@ -80,6 +80,7 @@ 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 1ff8cd0e1..e8a161a2e 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 { ppfx } = this; + const { pfx } = 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.ppfx + 'canvas'; + this.className = this.pfx + '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, module, em } = this; + const { frames, model, config, 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: { - module, + ...config, canvasView: this, }, }); @@ -375,7 +375,7 @@ export default class CanvasView extends View { } render() { - const { el, $el, pfx, config, em } = this; + const { el, $el, ppfx, 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(`#${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; + 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; 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 f63bcc026..18139d30f 100644 --- a/src/canvas/view/FrameView.ts +++ b/src/canvas/view/FrameView.ts @@ -32,6 +32,7 @@ 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 || {}), @@ -39,6 +40,7 @@ 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(); @@ -109,7 +111,7 @@ export default class FrameView extends View { getJsContainer() { if (!this.jsContainer) { - this.jsContainer = createEl('div', { class: `${this.pfx}js-cont` }); + this.jsContainer = createEl('div', { class: `${this.ppfx}js-cont` }); } return this.jsContainer; @@ -253,8 +255,8 @@ export default class FrameView extends View { } render() { - const { $el, pfx } = this; - $el.attr({ class: `${pfx}frame` }); + const { $el, ppfx } = this; + $el.attr({ class: `${ppfx}frame` }); this.renderScripts(); return this; } @@ -324,7 +326,7 @@ export default class FrameView extends View { } renderBody() { - const { config, em, model, pfx } = this; + const { config, em, model, ppfx } = this; const doc = this.getDoc(); const body = this.getBody(); const win = this.getWindow(); @@ -345,36 +347,36 @@ export default class FrameView extends View { padding-top: 0.001em; } - .${pfx}dashed *[data-gjs-highlightable] { + .${ppfx}dashed *[data-gjs-highlightable] { outline: 1px dashed rgba(170,170,170,0.7); outline-offset: -2px; } - .${pfx}selected { + .${ppfx}selected { outline: 2px solid #3b97e3 !important; outline-offset: -2px; } - .${pfx}selected-parent { + .${ppfx}selected-parent { outline: 2px solid ${colorWarn} !important } - .${pfx}no-select { + .${ppfx}no-select { user-select: none; -webkit-user-select:none; -moz-user-select: none; } - .${pfx}freezed { + .${ppfx}freezed { opacity: 0.5; pointer-events: none; } - .${pfx}no-pointer { + .${ppfx}no-pointer { pointer-events: none; } - .${pfx}plh-image { + .${ppfx}plh-image { background: #f5f5f5; border: none; height: 100px; @@ -385,17 +387,17 @@ export default class FrameView extends View { outline-offset: -2px } - .${pfx}grabbing { + .${ppfx}grabbing { cursor: grabbing; cursor: -webkit-grabbing; } - .${pfx}is__grabbing { + .${ppfx}is__grabbing { overflow-x: hidden; } - .${pfx}is__grabbing, - .${pfx}is__grabbing * { + .${ppfx}is__grabbing, + .${ppfx}is__grabbing * { cursor: grabbing !important; } @@ -409,7 +411,6 @@ 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 4f8003549..89f36d2ca 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.pfx}frame-wrapper--anim`; + this.classAnim = `${this.ppfx}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, pfx, cv, model, el } = this; + const { frame, $el, ppfx, cv, model, el } = this; const { onRender } = model.attributes; this.__clear(); this.__handleSize(); frame.render(); $el .empty() - .attr({ class: `${pfx}frame-wrapper` }) + .attr({ class: `${ppfx}frame-wrapper` }) .append( ` -
-
+
+
${model.get('name') || ''}
-
- -
-
-
+
+
+
` ) .append(frame.el); const elTools = createEl( 'div', { - class: `${pfx}tools`, + class: `${ppfx}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 e55e24727..10761fedc 100644 --- a/src/canvas/view/FramesView.ts +++ b/src/canvas/view/FramesView.ts @@ -1,21 +1,15 @@ -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 = {}) { @@ -23,8 +17,8 @@ export default class FramesView extends DomainViews { } onRender() { - const { $el, pfx } = this; - $el.attr({ class: `${pfx}frames` }); + const { $el, em } = this; + em && $el.attr({ class: `${em.config.stylePrefix}frames` }); } protected renderView(item: any, type: string){return new FrameWrapView(item, this.canvasView)} }