From 7b3f1940ccff70df4915d5ba26fa8b21cdc58205 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Tue, 1 Oct 2019 09:04:58 +0200 Subject: [PATCH] Stop loading old frame and adjust initial rendering --- src/canvas/model/Frames.js | 28 +++++++++++++++++++++++++- src/canvas/view/CanvasView.js | 24 +++++++++++----------- src/canvas/view/FrameView.js | 8 ++++---- src/commands/index.js | 6 ++---- src/commands/view/CommandAbstract.js | 6 +++--- src/commands/view/MoveComponent.js | 5 +++-- src/utils/Droppable.js | 30 ++++++++++++++++++---------- 7 files changed, 71 insertions(+), 36 deletions(-) diff --git a/src/canvas/model/Frames.js b/src/canvas/model/Frames.js index 8c38e3467..3fc79e8d1 100644 --- a/src/canvas/model/Frames.js +++ b/src/canvas/model/Frames.js @@ -1,4 +1,30 @@ +import { bindAll } from 'underscore'; import Backbone from 'backbone'; import model from './Frame'; -export default Backbone.Collection.extend({ model }); +export default Backbone.Collection.extend({ + model, + + initialize() { + bindAll(this, 'itemLoaded'); + }, + + itemLoaded() { + this.loadedItems++; + + if (this.loadedItems >= this.itemsToLoad) { + this.trigger('loaded:all'); + this.listenToLoadItems(0); + } + }, + + listenToLoad() { + this.loadedItems = 0; + this.itemsToLoad = this.length; + this.listenToLoadItems(1); + }, + + listenToLoadItems(on) { + this.forEach(item => item[on ? 'on' : 'off']('loaded', this.itemLoaded)); + } +}); diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js index 2cea410e3..72b3b3f08 100644 --- a/src/canvas/view/CanvasView.js +++ b/src/canvas/view/CanvasView.js @@ -42,10 +42,6 @@ export default Backbone.View.extend({ this.listenTo(em, 'component:selected', this.checkSelected); this.listenTo(model, 'change:zoom change:x change:y', this.updateFrames); this.toggleListeners(1); - this.frame = new FrameView({ - model: this.model.get('frame'), - config: this.config - }); }, checkSelected(component, opts = {}) { @@ -502,13 +498,13 @@ export default Backbone.View.extend({ root: wrapper.getWrapper(), styles: cssc.getAll() }); - $frames.append(this.frame.render().el); - var frame = this.frame; - if (this.config.scripts.length === 0) { - frame.el.onload = this.renderBody; - } else { - this.renderScripts(); // will call renderBody later - } + // $frames.append(this.frame.render().el); + // var frame = this.frame; + // if (this.config.scripts.length === 0) { + // frame.el.onload = this.renderBody; + // } else { + // this.renderScripts(); // will call renderBody later + // } } const toolsWrp = $el.find('[data-tools]'); @@ -540,16 +536,20 @@ export default Backbone.View.extend({ this.el.className = this.className; // Render all frames + const frms = model.get('frames'); const frames = new FramesView({ - collection: model.get('frames'), + collection: frms, config: { ...config, renderContent: 1, canvasView: this } }); + frms.listenToLoad(); + frms.on('loaded:all', () => em.trigger('loaded')); frames.render(); $frames.append(frames.el); + this.frame = frms.at(0).view; return this; } diff --git a/src/canvas/view/FrameView.js b/src/canvas/view/FrameView.js index 5931a3572..d67f767d3 100644 --- a/src/canvas/view/FrameView.js +++ b/src/canvas/view/FrameView.js @@ -81,11 +81,11 @@ export default Backbone.View.extend({ }, { silent: 1 } ); - this.updateOffset(); // Prevent fixed highlighting box which appears when on // component hover during the animation em.stopDefault({ preserveSelected: 1 }); - noChanges ? this.updateOffset() : $el.on(motionsEv, this.updateOffset); + // TODO in updateOffset make use of internal API instead of Canvas + // noChanges ? this.updateOffset() : $el.on(motionsEv, this.updateOffset); }, updateOffset() { @@ -288,7 +288,7 @@ export default Backbone.View.extend({ append(body, new CssRulesView({ collection: styles, config }).render().el); append(body, this.getJsContainer()); // em.trigger('loaded'); // I need to manage only the first one maybe - this.updateOffset(); // TOFIX (check if I need it) + //this.updateOffset(); // TOFIX (check if I need it) // Avoid some default behaviours on( @@ -312,6 +312,6 @@ export default Backbone.View.extend({ ); this.updateDim(); - this.trigger('loaded'); + model.trigger('loaded'); } }); diff --git a/src/commands/index.js b/src/commands/index.js index 75ee63637..9b82f8280 100644 --- a/src/commands/index.js +++ b/src/commands/index.js @@ -128,18 +128,16 @@ export default () => { const nativeDrag = event && event.type == 'dragstart'; const defComOptions = { preserveSelected: 1 }; const modes = ['absolute', 'translate']; + const mode = sel.get('dmode') || em.get('dmode'); const hideTlb = () => em.stopDefault(defComOptions); // Dirty patch to prevent parent selection on drop (in absolute mode) em.set('_cmpDrag', 1); if (!sel || !sel.get('draggable')) { - console.warn('The element is not draggable'); - return; + return em.logWarning('The element is not draggable'); } - const mode = sel.get('dmode') || em.get('dmode'); - // Without setTimeout the ghost image disappears nativeDrag ? setTimeout(hideTlb, 0) : hideTlb(); diff --git a/src/commands/view/CommandAbstract.js b/src/commands/view/CommandAbstract.js index aa6c006d9..f9df4c96d 100644 --- a/src/commands/view/CommandAbstract.js +++ b/src/commands/view/CommandAbstract.js @@ -23,10 +23,10 @@ export default Backbone.View.extend({ if (this.canvas) { this.$canvas = this.$el; - this.$wrapper = $(this.getCanvasWrapper()); - this.frameEl = this.canvas.getFrameEl(); + // this.$wrapper = $(this.getCanvasWrapper()); + // this.frameEl = this.canvas.getFrameEl(); this.canvasTool = this.getCanvasTools(); - this.bodyEl = this.getCanvasBody(); + // this.bodyEl = this.getCanvasBody(); } this.init(this.config); diff --git a/src/commands/view/MoveComponent.js b/src/commands/view/MoveComponent.js index 0f04b3fb7..33857130b 100644 --- a/src/commands/view/MoveComponent.js +++ b/src/commands/view/MoveComponent.js @@ -91,8 +91,9 @@ export default extend({}, SelectPosition, SelectComponent, { // Avoid badge showing on move this.cacheEl = null; const lastModel = models[models.length - 1]; - const doc = this.frameEl.contentDocument; - this.startSelectPosition(lastModel.view.el, doc); + const el = lastModel.getEl(); + const doc = el.ownerDocument; + this.startSelectPosition(el, doc); this.sorter.draggable = lastModel.get('draggable'); this.sorter.toMove = models; this.sorter.onEndMove = this.onEndMoveFromModel.bind(this); diff --git a/src/utils/Droppable.js b/src/utils/Droppable.js index d77850490..bc4613295 100644 --- a/src/utils/Droppable.js +++ b/src/utils/Droppable.js @@ -2,16 +2,19 @@ This class makes the canvas droppable */ -import { on } from 'utils/mixins'; +import { on, off } from 'utils/mixins'; import { bindAll, indexOf } from 'underscore'; export default class Droppable { - constructor(em) { + constructor(em, rootEl) { this.em = em; - const el = em - .get('DomComponents') - .getWrapper() - .getEl(); + const el = + rootEl || + em + .get('Canvas') + .getFrames() + .map(frame => frame.get('root').getEl()); + const els = Array.isArray(el) ? el : [el]; this.el = el; this.counter = 0; bindAll( @@ -21,14 +24,21 @@ export default class Droppable { 'handleDrop', 'handleDragLeave' ); - on(el, 'dragenter', this.handleDragEnter); - on(el, 'dragover', this.handleDragOver); - on(el, 'drop', this.handleDrop); - on(el, 'dragleave', this.handleDragLeave); + els.forEach(el => this.toggleEffects(el, 1)); return this; } + toggleEffects(el, enable) { + const methods = { on, off }; + const method = enable ? 'on' : 'off'; + methods[method](el, 'dragenter', this.handleDragEnter); + methods[method](el, 'dragover', this.handleDragOver); + methods[method](el, 'drop', this.handleDrop); + methods[method](el, 'dragleave', this.handleDragLeave); + console.log('enable on', el); + } + endDrop(cancel, ev) { const { em, dragStop } = this; this.counter = 0;