From c2e0eecaf2eea7af627f9f05bbf9e67416277877 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Tue, 12 Jul 2016 14:43:56 +0200 Subject: [PATCH] Fix canvas rendering --- src/canvas/view/CanvasView.js | 6 ++++-- src/canvas/view/FrameView.js | 6 ++++++ src/commands/view/CommandAbstract.js | 1 - src/commands/view/CreateComponent.js | 4 ++-- src/dom_components/model/Components.js | 1 - src/editor/main.js | 9 ++++----- src/editor/model/Editor.js | 1 - src/editor/view/EditorView.js | 18 +++++++----------- styles/css/main.css | 3 +++ styles/scss/main.scss | 4 ++++ 10 files changed, 30 insertions(+), 23 deletions(-) diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js index 2440475dc..ebf8d182a 100644 --- a/src/canvas/view/CanvasView.js +++ b/src/canvas/view/CanvasView.js @@ -10,7 +10,10 @@ function(Backbone, FrameView) { this.em = this.config.em || {}; this.ppfx = this.config.pStylePrefix || ''; this.className = this.config.stylePrefix + 'canvas'; - this.frame = new FrameView({ model: this.model.get('frame')}); + this.frame = new FrameView({ + model: this.model.get('frame'), + config: this.config + }); }, /** @@ -100,7 +103,6 @@ function(Backbone, FrameView) { if(this.wrapper && typeof this.wrapper.render == 'function'){ this.model.get('frame').set('wrapper', this.wrapper); - var wrap = this.wrapper.render(); this.$el.append(this.frame.render().el); var frame = this.frame; frame.el.onload = this.renderBody.bind(this); diff --git a/src/canvas/view/FrameView.js b/src/canvas/view/FrameView.js index 64e4cd3be..92a755183 100644 --- a/src/canvas/view/FrameView.js +++ b/src/canvas/view/FrameView.js @@ -11,6 +11,11 @@ function(Backbone) { src: 'about:blank' }, + initialize: function(o) { + this.config = o.config || {}; + this.ppfx = this.config.pStylePrefix || ''; + }, + getBody: function(){ this.$el.contents().find('body'); }, @@ -23,6 +28,7 @@ function(Backbone) { this.$el.attr({ style: 'width: 50%; display: block; height: 80%; border: medium none; margin: 0 auto 0; background-color: white', }); + this.$el.attr({class: this.ppfx + 'frame'}); return this; }, diff --git a/src/commands/view/CommandAbstract.js b/src/commands/view/CommandAbstract.js index c5a5c6e2c..c74deb53f 100644 --- a/src/commands/view/CommandAbstract.js +++ b/src/commands/view/CommandAbstract.js @@ -50,7 +50,6 @@ define(['backbone'], * @return {HTMLElement} */ getCanvas: function(){ - //return this.editorModel.get('$editor').find('#'+this.canvasId); return this.canvas.getElement(); }, diff --git a/src/commands/view/CreateComponent.js b/src/commands/view/CreateComponent.js index fb2fa1236..33c543bf7 100644 --- a/src/commands/view/CreateComponent.js +++ b/src/commands/view/CreateComponent.js @@ -103,9 +103,9 @@ define(['backbone','./SelectPosition'], var trgCollection = $trg.data('collection'); var droppable = trgModel ? trgModel.get('droppable') : 1; opt.at = index; - if(trgCollection && droppable) + if(trgCollection && droppable){ return trgCollection.add(component, opt); - else + }else console.warn("Invalid target position"); }, diff --git a/src/dom_components/model/Components.js b/src/dom_components/model/Components.js index d45e2473c..9d3f0f6fe 100644 --- a/src/dom_components/model/Components.js +++ b/src/dom_components/model/Components.js @@ -49,7 +49,6 @@ define([ 'backbone', 'require'], }, add: function(models, opt){ - console.log(models, opt); if(typeof models === 'string'){ var parsed = this.editor.Parser.parseHtml(models); models = parsed.html; diff --git a/src/editor/main.js b/src/editor/main.js index b8d7b39ca..2c9f77c3b 100644 --- a/src/editor/main.js +++ b/src/editor/main.js @@ -58,12 +58,11 @@ define(function (require){ } var em = new EditorModel(c); - var obj = { - model : em, - config : c, - }; - var editorView = new EditorView(obj); + var editorView = new EditorView({ + model: em, + config: c, + }); return { diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index 8fe0fc6ad..9ba4ce5d6 100644 --- a/src/editor/model/Editor.js +++ b/src/editor/model/Editor.js @@ -382,7 +382,6 @@ define([ this.UndoManager = this.um; this.set('UndoManager', this.um); key('⌘+z, ctrl+z', function(){ - console.log('Undo'); that.um.undo(true); }); key('⌘+shift+z, ctrl+shift+z', function(){ diff --git a/src/editor/view/EditorView.js b/src/editor/view/EditorView.js index feda86bd8..afd62d9b7 100644 --- a/src/editor/view/EditorView.js +++ b/src/editor/view/EditorView.js @@ -4,17 +4,17 @@ function(Backbone){ return Backbone.View.extend({ initialize: function() { - this.cv = this.model.get('Canvas'); this.pn = this.model.get('Panels'); - this.className = this.model.config.stylePrefix + 'editor'; + this.conf = this.model.config; + this.className = this.conf.stylePrefix + 'editor'; this.model.on('loaded', function(){ this.pn.active(); }); }, render: function(){ + var conf = this.conf; this.$el.empty(); - var conf = this.model.config; this.$cont = $(conf.el || ('body ' + conf.container)); if(conf.width) @@ -23,20 +23,16 @@ function(Backbone){ if(conf.height) this.$cont.css('height', conf.height); - this.model.set('$editor', this.$el); - - this.$cont.html(this.$el); - // Canvas - if(this.cv) - this.$el.append(this.cv.render()); + this.$el.append(this.model.get('Canvas').render()); // Panels - if(this.pn) - this.$el.append(this.pn.render()); + this.$el.append(this.pn.render()); this.$el.attr('class', this.className); + this.$cont.html(this.$el); + return this; } }); diff --git a/styles/css/main.css b/styles/css/main.css index 1d9356f78..9cad08973 100644 --- a/styles/css/main.css +++ b/styles/css/main.css @@ -2678,6 +2678,9 @@ See http://bgrins.github.io/spectrum/themes/ for instructions. .wte-cv-canvas * { box-sizing: border-box; } +.wte-frame { + transition: width 0.35s linear; } + .btn-cl, .wte-mdl-dialog .wte-mdl-btn-close, .wte-am-assets-cont #wte-am-close { font-size: 25px; opacity: 0.3; diff --git a/styles/scss/main.scss b/styles/scss/main.scss index 70935265a..e2c80e281 100644 --- a/styles/scss/main.scss +++ b/styles/scss/main.scss @@ -177,6 +177,10 @@ $imageCompDim: 50px; .#{$cv-prefix}canvas *{box-sizing: border-box;} +.#{$app-prefix}frame{ + transition: width 0.35s linear; +} + .btn-cl { font-size: 25px; @include opacity(0.3);