diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js index db552ff2c..afe835a5b 100644 --- a/src/dom_components/model/Component.js +++ b/src/dom_components/model/Component.js @@ -250,7 +250,7 @@ const Component = Backbone.Model.extend(Styleable).extend( * @private */ attrUpdated() { - this.setAttributes(this.get('attributes')); + this.setAttributes(this.get('attributes'), { silent: 1 }); }, /** @@ -273,7 +273,7 @@ const Component = Backbone.Model.extend(Styleable).extend( style && this.setStyle(style); delete attrs.style; - this.set('attributes', attrs, { silent: 1 }); + this.set('attributes', attrs, opts); const attrPrev = { ...this.previous('attributes') }; const diff = shallowDiff(attrPrev, attrs); keys(diff).forEach(pr => this.trigger(`change:attributes:${pr}`)); @@ -435,6 +435,16 @@ const Component = Backbone.Model.extend(Styleable).extend( return removed; }, + /** + * Returns component's classes as an array of strings + * @return {Array} + */ + getClasses() { + const attr = this.getAttributes(); + const classStr = attr.class; + return classStr ? classStr.split(' ') : []; + }, + initClasses() { const event = 'change:classes'; const toListen = [this, event, this.initClasses]; diff --git a/src/dom_components/view/ComponentView.js b/src/dom_components/view/ComponentView.js index 72225e372..34b7cd0dd 100644 --- a/src/dom_components/view/ComponentView.js +++ b/src/dom_components/view/ComponentView.js @@ -26,7 +26,7 @@ module.exports = Backbone.View.extend({ this.classe = this.attr.class || []; const $el = this.$el; this.listenTo(model, 'change:style', this.updateStyle); - this.listenTo(model, 'change:attributes', this.updateAttributes); + this.listenTo(model, 'change:attributes', this.renderAttributes); this.listenTo(model, 'change:highlightable', this.updateHighlight); this.listenTo(model, 'change:status', this.updateStatus); this.listenTo(model, 'change:state', this.updateState); @@ -223,15 +223,7 @@ module.exports = Backbone.View.extend({ * @private * */ getClasses() { - var attr = this.model.get('attributes'), - classes = attr['class'] || []; - classes = isArray(classes) ? classes : [classes]; - - if (classes.length) { - return classes.join(' '); - } else { - return null; - } + return this.model.getClasses().join(' '); }, /** @@ -240,17 +232,14 @@ module.exports = Backbone.View.extend({ * */ updateAttributes() { const model = this.model; - const attrs = { 'data-gjs-type': model.get('type') || 'default' }; - const attr = model.get('attributes'); - const src = model.get('src'); - - for (let key in attr) { - attrs[key] = attr[key]; - } - - src && (attrs.src = src); - this.$el.attr(attrs); - this.updateHighlight(); + const defaultAttr = { + 'data-gjs-type': model.get('type') || 'default', + 'data-highlightable': model.get('highlightable') ? 1 : '' + }; + this.$el.attr({ + ...defaultAttr, + ...model.getAttributes() + }); this.updateStyle(); }, diff --git a/src/selector_manager/view/ClassTagView.js b/src/selector_manager/view/ClassTagView.js index b45e42929..589af2c91 100644 --- a/src/selector_manager/view/ClassTagView.js +++ b/src/selector_manager/view/ClassTagView.js @@ -95,6 +95,7 @@ module.exports = require('backbone').View.extend({ removeTag(e) { const { em, model } = this; const sel = em && em.getSelected(); + // Prevent weird erros on remove sel && setTimeout(() => sel.getSelectors().remove(model)); }, diff --git a/test/specs/dom_components/view/ComponentV.js b/test/specs/dom_components/view/ComponentV.js index 5cd80a7c9..ae0a7adea 100644 --- a/test/specs/dom_components/view/ComponentV.js +++ b/test/specs/dom_components/view/ComponentV.js @@ -131,7 +131,7 @@ module.exports = { fixtures.innerHTML = ''; fixtures.appendChild(view.render().el); expect(view.$el.html()).toEqual( - '
' + '
' ); });