diff --git a/package-lock.json b/package-lock.json index b2d9e45d1..30dd509f2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9935,8 +9935,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -9957,14 +9956,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -9979,20 +9976,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -10109,8 +10103,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -10122,7 +10115,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -10137,7 +10129,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -10145,14 +10136,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -10171,7 +10160,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -10252,8 +10240,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -10265,7 +10252,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -10351,8 +10337,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -10388,7 +10373,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -10408,7 +10392,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -10452,14 +10435,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, diff --git a/src/style_manager/index.js b/src/style_manager/index.js index 338809a37..6480d44f4 100644 --- a/src/style_manager/index.js +++ b/src/style_manager/index.js @@ -256,8 +256,9 @@ export default () => { * @param {Model} model * @return {Model} */ - getModelToStyle(model) { + getModelToStyle(model, options = {}) { const em = c.em; + const { skipAdd } = options; const classes = model.get('classes'); const id = model.getId(); @@ -270,6 +271,7 @@ export default () => { const state = !config.devicePreviewMode ? em.get('state') : ''; const valid = classes.getStyleable(); const hasClasses = valid.length; + const useClasses = !smConf.componentFirst || options.useClasses; const opts = { state }; let rule; @@ -279,16 +281,16 @@ export default () => { // #268 um.stop(); - if (hasClasses && !smConf.componentFirst) { + if (hasClasses && useClasses) { const deviceW = em.getCurrentMedia(); rule = cssC.get(valid, state, deviceW); - if (!rule) { + if (!rule && !skipAdd) { rule = cssC.add(valid, state, deviceW); } } else if (config.avoidInlineStyle) { rule = cssC.getIdRule(id, opts); - !rule && (rule = cssC.setIdRule(id, {}, opts)); + !rule && !skipAdd && (rule = cssC.setIdRule(id, {}, opts)); if (model.is('wrapper')) rule.set('wrapper', 1); } diff --git a/src/style_manager/view/PropertyStackView.js b/src/style_manager/view/PropertyStackView.js index b839c5ac2..501dd923f 100644 --- a/src/style_manager/view/PropertyStackView.js +++ b/src/style_manager/view/PropertyStackView.js @@ -1,4 +1,4 @@ -import { isUndefined } from 'underscore'; +import { isUndefined, keys } from 'underscore'; import PropertyCompositeView from './PropertyCompositeView'; import LayersView from './LayersView'; @@ -33,6 +33,8 @@ export default PropertyCompositeView.extend({ if (!this.model.get('detached')) { PropertyCompositeView.prototype.targetUpdated.apply(this, args); } else { + const { status } = this._getTargetData(); + this.setStatus(status); this.checkVisibility(); } @@ -108,15 +110,30 @@ export default PropertyCompositeView.extend({ * */ refreshLayers() { let layersObj = []; - const model = this.model; + const { model, em } = this; const layers = this.getLayers(); const detached = model.get('detached'); const target = this.getTarget(); + let style, valueComput, targetAlt; // With detached layers values will be assigned to their properties if (detached) { - const style = target ? target.getStyle() : {}; - layersObj = layers.getLayersFromStyle(style); + const selected = em.getSelected(); + style = target ? target.getStyle() : 0; + valueComput = this.getComputedValue(); + + // If the style object is empty but the target has a computed value, + // that means the style might exist in some other place + if ((!style || !keys(style).length) && valueComput && selected) { + // The target is a component but the style is in class rules + targetAlt = em.get('StyleManager').getModelToStyle(selected, { + skipAdd: 1, + useClasses: 1 + }); + style = targetAlt !== selected ? targetAlt.getStyle() : 0; + } + + layersObj = layers.getLayersFromStyle(style || {}); } else { let value = this.getTargetValue({ ignoreDefault: 1 }); @@ -127,6 +144,19 @@ export default PropertyCompositeView.extend({ } const toAdd = model.getLayersFromTarget(target) || layersObj; + + // const prop = this.model.get('property'); + // if (['background', 'box-shadow'].indexOf(prop) >= 0) { + // console.log('PROP', prop, { + // style, + // toAdd, + // layersObj, + // targetAlt, + // valueTrg: this.getTargetValue({ ignoreDefault: 1 }), + // valueComput: this.getComputedValue(), + // }); + // } + layers.reset(); layers.add(toAdd); model.set({ stackIndex: null }, { silent: true }); diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js index f4f6b2fab..584594a51 100644 --- a/src/style_manager/view/PropertyView.js +++ b/src/style_manager/view/PropertyView.js @@ -213,25 +213,13 @@ export default Backbone.View.extend({ em && em.trigger('styleManager:update:target', this.getTarget()); }), - /** - * Fired when the target is changed - * */ - targetUpdated(mod, val, opts = {}) { - this.emitUpdateTarget(); - - if (!this.checkVisibility()) { - return; - } - - const config = this.config; - const em = config.em; - const { model } = this; - const property = model.get('property'); + _getTargetData() { + const { model, config } = this; + const targetValue = this.getTargetValue({ ignoreDefault: 1 }); + const defaultValue = model.getDefaultValue(); + const computedValue = this.getComputedValue(); let value = ''; let status = ''; - let targetValue = this.getTargetValue({ ignoreDefault: 1 }); - let defaultValue = model.getDefaultValue(); - let computedValue = this.getComputedValue(); if (targetValue) { value = targetValue; @@ -254,16 +242,39 @@ export default Backbone.View.extend({ status = ''; } + return { + value, + status, + targetValue, + defaultValue, + computedValue + }; + }, + + /** + * Fired when the target is changed + * */ + targetUpdated(mod, val, opts = {}) { + this.emitUpdateTarget(); + + if (!this.checkVisibility()) { + return; + } + + const config = this.config; + const em = config.em; + const { model } = this; + const property = model.get('property'); + const { status, value, ...targetData } = this._getTargetData(); + this.setStatus(status); model.setValue(value, 0, { fromTarget: 1, ...opts }); if (em) { const data = { status, - targetValue, - defaultValue, - computedValue, - value + value, + ...targetData }; em.trigger('styleManager:change', this, property, value, data); em.trigger(`styleManager:change:${property}`, this, value, data);