tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Clean Style Manager models

up-style-manager
Artur Arseniev 5 years ago
parent
da8f384a02
commit
1a81cd42bf
8 changed files with 67 additions and 335 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 50
      src/style_manager/model/Layer.js
  2. 119
      src/style_manager/model/Layers.js
  3. 38
      src/style_manager/model/Properties.js
  4. 1
      src/style_manager/model/Property.js
  5. 131
      src/style_manager/model/PropertyComposite.js
  6. 14
      src/style_manager/model/PropertySlider.js
  7. 43
      src/style_manager/model/PropertyStack.js
  8. 6
      src/style_manager/model/Sector.js

50
src/style_manager/model/Layer.js
View File

@ -1,40 +1,15 @@
import { Model } from 'common';
import { camelCase } from 'utils/mixins';
import Properties from './Properties';
export default class Layer extends Model {
defaults() {
return {
index: '',
value: '',
values: {},
active: false,
preview: false,
properties: [],
};
}
initialize() {
this.prop = this.collection.prop;
// const prp = this.get('properties');
// var value = this.get('value');
// this.set('properties', prp instanceof Properties ? prp : new Properties(prp));
// const props = this.get('properties');
// props.forEach(this.onPropAdd, this);
// this.listenTo(props, 'add', this.onPropAdd);
// // If there is no value I'll try to get it from values
// // I need value setted to make preview working
// if (!value) {
// var val = '';
// var values = this.get('values');
// for (var prop in values) {
// val += ' ' + values[prop];
// }
// this.set('value', val.trim());
// }
}
/**
@ -132,29 +107,4 @@ export default class Layer extends Model {
...props,
});
}
onPropAdd(prop) {
const coll = this.collection;
prop.parent = coll && coll.property;
}
getPropertyAt(index) {
return this.get('properties').at(index);
}
getPropertyValue(property) {
let result = '';
this.get('properties').each(prop => {
if (prop.get('property') == property) {
result = prop.getFullValue();
}
});
return result;
}
getFullValue() {
let result = [];
this.get('properties').each(prop => result.push(prop.getFullValue()));
return result.join(' ').trim();
}
}

119
src/style_manager/model/Layers.js
View File

@ -1,117 +1,10 @@
import { isUndefined } from 'underscore';
import Backbone from 'backbone';
import { Collection } from 'common';
import Layer from './Layer';
export default Backbone.Collection.extend({
model: Layer,
initialize(prop, opts = {}) {
export default class Layers extends Collection {
initialize(p, opts = {}) {
this.prop = opts.prop;
this.on('add', this.onAdd);
},
onAdd(model, c, opts) {
opts.active && this.active(this.indexOf(model));
},
active(index) {
this.each(layer => layer.set('active', 0));
const layer = this.at(index);
layer && layer.set('active', 1);
},
// getSeparator() {
// const { property } = this;
// return property ? property.get('layerSeparator') : ', ';
// },
/**
* Get layers from a value string (for not detached properties),
* example of input:
* `layer1Value, layer2Value, layer3Value, ...`
* @param {string} value
* @return {Array}
* @private
*/
// getLayersFromValue(value) {
// const layers = [];
// // Remove spaces inside functions, eg:
// // From: 1px 1px rgba(2px, 2px, 2px), 2px 2px rgba(3px, 3px, 3px)
// // To: 1px 1px rgba(2px,2px,2px), 2px 2px rgba(3px,3px,3px)
// value.replace(/\(([\w\s,.]*)\)/g, match => {
// var cleaned = match.replace(/,\s*/g, ',');
// value = value.replace(match, cleaned);
// });
// const layerValues = value ? value.split(this.getSeparator()) : [];
// layerValues.forEach(layerValue => {
// layers.push({ properties: this.properties.parseValue(layerValue) });
// });
// return layers;
// },
/**
* Get layers from a style object (for detached properties),
* example of input:
* {
* subPropname1: sub-propvalue11, sub-propvalue12, sub-propvalue13, ...
* subPropname2: sub-propvalue21, sub-propvalue22, sub-propvalue23, ...
* subPropname3: sub-propvalue31, sub-propvalue32, sub-propvalue33, ...
* }
* @param {Object} styleObj
* @return {Array}
* @private
*/
// getLayersFromStyle(styleObj) {
// const layers = [];
// const properties = this.properties;
// properties.each(propModel => {
// const style = styleObj[propModel.get('property')];
// const values = style ? style.split(', ') : [];
// values.forEach((value, i) => {
// value = propModel.parseValue(value.trim()).value;
// const layer = layers[i];
// const propertyObj = { ...propModel.attributes, ...{ value } };
// if (layer) {
// layer.properties.push(propertyObj);
// } else {
// layers[i] = {
// properties: [propertyObj]
// };
// }
// });
// });
// // Now whit all layers in, will check missing properties
// layers.forEach(layer => {
// const layerProprs = layer.properties.map(prop => prop.property);
// properties.each(propModel => {
// const propertyName = propModel.get('property');
// if (layerProprs.indexOf(propertyName) < 0) {
// layer.properties.push({ ...propModel.attributes });
// }
// });
// });
// return layers;
// },
// getFullValue() {
// let result = [];
// this.each(layer => result.push(layer.getFullValue()));
// return result.join(this.getSeparator());
// },
}
}
// getPropertyValues(property, defValue) {
// const result = [];
// this.each(layer => {
// const value = layer.getPropertyValue(property);
// value
// ? result.push(value)
// : !isUndefined(defValue) && result.push(defValue);
// });
// return result.join(', ');
// }
});
Layers.prototype.model = Layer;

38
src/style_manager/model/Properties.js
View File

@ -121,42 +121,4 @@ export default Backbone.Collection.extend(TypeableCollection).extend({
},
},
],
deepClone() {
const { em } = this;
const collection = this.clone();
collection.em = em;
collection.reset(
collection.map(model => {
const cloned = model.clone();
cloned.typeView = model.typeView;
cloned.em = em;
return cloned;
})
);
return collection;
},
/**
* Parse a value and return an array splitted by properties
* @param {string} value
* @return {Array}
* @return
*/
parseValue(value) {
const properties = [];
const values = value.split(' ');
values.forEach((value, i) => {
const property = this.at(i);
if (!property) return;
properties.push({ ...property.attributes, ...{ value } });
});
return properties;
},
getFullValue() {
let result = '';
this.each(model => (result += `${model.getFullValue()} `));
return result.trim();
},
});

1
src/style_manager/model/Property.js
View File

@ -245,6 +245,7 @@ export default class Property extends Model {
* @param {Boolen} [complete=true] Indicates if it's a final state
* @param {Object} [opts={}] Options
* @private
* @deprecated
*/
setValueFromInput(value, complete, opts = {}) {
this.setValue(value, complete, { ...opts, fromInput: 1 });

131
src/style_manager/model/PropertyComposite.js
View File

@ -4,6 +4,10 @@ import Property from './Property';
export const isNumberType = type => type === 'integer' || type === 'number';
/**
*
* [Property]: property.html
*
*
* @typedef PropertyComposite
* @property {Array<Object>} properties Array of sub properties, eg. `[{ type: 'number', property: 'margin-top' }, ...]`
* @property {Boolean} [detached=false] Indicate if the final CSS property is splitted (detached: `margin-top: X; margin-right: Y; ...`) or combined (not detached: `margin: X Y ...;`)
@ -47,6 +51,16 @@ export default class PropertyComposite extends Property {
};
}
initialize(props = {}, opts = {}) {
Property.callParentInit(Property, this, props, opts);
const { em } = this;
const Properties = require('./Properties').default;
const properties = new Properties(this.get('properties') || [], { em, parentProp: this });
this.set('properties', properties, { silent: 1 });
this.listenTo(properties, 'change', this.__upProperties);
Property.callInit(this, props, opts);
}
/**
* Get properties.
* @returns {Array<[Property]>}
@ -115,50 +129,6 @@ export default class PropertyComposite extends Property {
return this.__getJoin();
}
getSplitSeparator() {
return new RegExp(`${this.get('separator')}(?![^\\(]*\\))`);
}
initialize(props = {}, opts = {}) {
Property.callParentInit(Property, this, props, opts);
const { em } = this;
const Properties = require('./Properties').default;
const properties = new Properties(this.get('properties') || [], { em, parentProp: this });
this.set('properties', properties, { silent: 1 });
this.listenTo(properties, 'change', this.__upProperties);
this.listenTo(this, 'change:value', this.updateValues);
Property.callInit(this, props, opts);
}
__upProperties(p, opts = {}) {
if (opts.__up || opts.__clearIn) return;
const parentProp = this.__getParentProp();
if (parentProp) return parentProp.__upProperties(this, opts);
this.__upTargetsStyleProps(opts, p);
}
__upTargetsStyleProps(opts = {}, prop) {
let style = this.getStyleFromProps();
if (this.isDetached() && prop) {
const name = prop.getName();
style = { [name]: style[name] };
}
this.__upTargetsStyle(style, opts);
}
_up(props, opts = {}) {
this.__setProperties(this.__getSplitValue(props.value), opts);
return Property.prototype._up.call(this, props, opts);
}
getStyle(opts) {
return this.getStyleFromProps(opts);
}
/**
* Get style object from current properties
* @param {Object} [opts={}] Options
@ -210,6 +180,39 @@ export default class PropertyComposite extends Property {
: style;
}
getSplitSeparator() {
return new RegExp(`${this.get('separator')}(?![^\\(]*\\))`);
}
__upProperties(p, opts = {}) {
if (opts.__up || opts.__clearIn) return;
const parentProp = this.__getParentProp();
if (parentProp) return parentProp.__upProperties(this, opts);
this.__upTargetsStyleProps(opts, p);
}
__upTargetsStyleProps(opts = {}, prop) {
let style = this.getStyleFromProps();
if (this.isDetached() && prop) {
const name = prop.getName();
style = { [name]: style[name] };
}
this.__upTargetsStyle(style, opts);
}
_up(props, opts = {}) {
this.__setProperties(this.__getSplitValue(props.value), opts);
return Property.prototype._up.call(this, props, opts);
}
getStyle(opts) {
return this.getStyleFromProps(opts);
}
__getFullValue(opts = {}) {
if (this.isDetached() || opts.__clear) return '';
@ -311,43 +314,6 @@ export default class PropertyComposite extends Property {
return this.getProperties().some(prop => prop.hasValue(opts));
}
/**
* Update property values
* @private
* @deprecated
*/
updateValues() {
const values = this.getFullValue().split(this.getSplitSeparator());
this.get('properties').each((property, i) => {
const len = values.length;
// Try to get value from a shorthand:
// 11px -> 11px 11px 11px 11xp
// 11px 22px -> 11px 22px 11px 22xp
const value = values[i] || values[(i % len) + (len != 1 && len % 2 ? 1 : 0)];
// There some issue with UndoManager
//property.setValue(value, 0, {fromParent: 1});
});
}
/**
* Returns default value
* @param {Boolean} defaultProps Force to get defaults from properties
* @return {string}
* @private
*/
getDefaultValue(defaultProps) {
let value = this.get('defaults');
if (value && !defaultProps) {
return value;
}
value = '';
const properties = this.get('properties');
properties.each((prop, index) => (value += `${prop.getDefaultValue()} `));
return value.trim();
}
getFullValue() {
if (this.get('detached')) {
return '';
@ -360,6 +326,3 @@ export default class PropertyComposite extends Property {
return this.isDetached() && prop.hasValue({ noParent: true });
}
}
/**
* [Property]: property.html
*/

14
src/style_manager/model/PropertySlider.js
View File

@ -1,8 +1,10 @@
import Property from './PropertyNumber';
export default Property.extend({
defaults: {
...Property.getDefaults(),
showInput: 1,
},
});
export default class PropertySlider extends Property {
defaults() {
return {
...Property.getDefaults(),
showInput: 1,
};
}
}

43
src/style_manager/model/PropertyStack.js
View File

@ -457,25 +457,6 @@ export default class PropertyStack extends PropertyComposite {
return this.get('detached') ? '' : this.get('layers').getFullValue();
}
getValueFromStyle(styles = {}) {
const layers = this.__getLayers().getLayersFromStyle(styles);
return new Layers(layers).getFullValue();
}
getValueFromTarget(target) {
const { detached, property, properties } = this.attributes;
const style = target.getStyle();
const validStyles = {};
properties.forEach(prop => {
const name = prop.get('property');
const value = style[name];
if (value) validStyles[name] = value;
});
return !detached ? style[property] : keys(validStyles).length ? validStyles : '';
}
/**
* Extended
* @private
@ -496,27 +477,7 @@ export default class PropertyStack extends PropertyComposite {
return PropertyBase.prototype.clear.call(this);
}
getCurrentLayer() {
return this.getLayers().filter(layer => layer.get('active'))[0];
}
/**
* This method allows to customize layers returned from the target
* @param {Object} target
* @return {Array} Should return an array of layers
* @private
* @example
* // return example
* [
* {
* properties: [
* { property: 'width', ... }
* { property: 'height', ... }
* ]
* }
* ]
*/
getLayersFromTarget(target) {
return;
__canClearProp() {
return false;
}
}

6
src/style_manager/model/Sector.js
View File

@ -3,6 +3,9 @@ import { extend, isString } from 'underscore';
import Properties from './Properties';
/**
*
* [Property]: property.html
*
* @typedef Sector
* @property {String} id Sector id, eg. `typography`
* @property {String} name Sector name, eg. `Typography`
@ -194,6 +197,3 @@ export default class Sector extends Model {
return builtIn?.build(buildP);
}
}
/**
* [Property]: property.html
*/

Write Preview
Loading…
Cancel
Save