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
Unified 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 { Model } from 'common';
import { camelCase } from 'utils/mixins'; import { camelCase } from 'utils/mixins';
import Properties from './Properties';
export default class Layer extends Model { export default class Layer extends Model {
defaults() { defaults() {
return { return {
index: '',
value: '',
values: {}, values: {},
active: false,
preview: false,
properties: [],
}; };
} }
initialize() { initialize() {
this.prop = this.collection.prop; 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, ...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 { Collection } from 'common';
import Backbone from 'backbone';
import Layer from './Layer'; import Layer from './Layer';
export default Backbone.Collection.extend({ export default class Layers extends Collection {
model: Layer, initialize(p, opts = {}) {
initialize(prop, opts = {}) {
this.prop = opts.prop; 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) { Layers.prototype.model = Layer;
// const result = [];
// this.each(layer => {
// const value = layer.getPropertyValue(property);
// value
// ? result.push(value)
// : !isUndefined(defValue) && result.push(defValue);
// });
// return result.join(', ');
// }
});

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 {Boolen} [complete=true] Indicates if it's a final state
* @param {Object} [opts={}] Options * @param {Object} [opts={}] Options
* @private * @private
* @deprecated
*/ */
setValueFromInput(value, complete, opts = {}) { setValueFromInput(value, complete, opts = {}) {
this.setValue(value, complete, { ...opts, fromInput: 1 }); 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'; export const isNumberType = type => type === 'integer' || type === 'number';
/** /**
*
* [Property]: property.html
*
*
* @typedef PropertyComposite * @typedef PropertyComposite
* @property {Array<Object>} properties Array of sub properties, eg. `[{ type: 'number', property: 'margin-top' }, ...]` * @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 ...;`) * @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. * Get properties.
* @returns {Array<[Property]>} * @returns {Array<[Property]>}
@ -115,50 +129,6 @@ export default class PropertyComposite extends Property {
return this.__getJoin(); 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 * Get style object from current properties
* @param {Object} [opts={}] Options * @param {Object} [opts={}] Options
@ -210,6 +180,39 @@ export default class PropertyComposite extends Property {
: style; : 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 = {}) { __getFullValue(opts = {}) {
if (this.isDetached() || opts.__clear) return ''; if (this.isDetached() || opts.__clear) return '';
@ -311,43 +314,6 @@ export default class PropertyComposite extends Property {
return this.getProperties().some(prop => prop.hasValue(opts)); 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() { getFullValue() {
if (this.get('detached')) { if (this.get('detached')) {
return ''; return '';
@ -360,6 +326,3 @@ export default class PropertyComposite extends Property {
return this.isDetached() && prop.hasValue({ noParent: true }); 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'; import Property from './PropertyNumber';
export default Property.extend({ export default class PropertySlider extends Property {
defaults: { defaults() {
...Property.getDefaults(), return {
showInput: 1, ...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(); 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 * Extended
* @private * @private
@ -496,27 +477,7 @@ export default class PropertyStack extends PropertyComposite {
return PropertyBase.prototype.clear.call(this); return PropertyBase.prototype.clear.call(this);
} }
getCurrentLayer() { __canClearProp() {
return this.getLayers().filter(layer => layer.get('active'))[0]; return false;
}
/**
* 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;
} }
} }

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

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

Write Preview
Loading…
Cancel
Save