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

Add new methods to Layer

up-style-manager
Artur Arseniev 5 years ago
parent
591588a203
commit
407b03e61e
4 changed files with 145 additions and 116 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. 69
      src/style_manager/model/Layer.js
  2. 148
      src/style_manager/model/Layers.js
  3. 40
      src/style_manager/model/PropertyStack.js
  4. 4
      src/style_manager/view/PropertyStackView.js

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

@ -14,6 +14,29 @@ export default class Layer extends Model {
}; };
} }
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());
// }
}
/** /**
* Get layer index. * Get layer index.
* @returns {Number} * @returns {Number}
@ -40,26 +63,34 @@ export default class Layer extends Model {
: values; : values;
} }
initialize() { /**
const prp = this.get('properties'); * Get layer label.
var value = this.get('value'); * @returns {String}
this.set('properties', prp instanceof Properties ? prp : new Properties(prp)); */
const props = this.get('properties'); getLabel() {
props.forEach(this.onPropAdd, this); return this.prop?.getLayerLabel(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()); /**
} * Check if the layer is selected.
* @returns {Boolean}
*/
isSelected() {
return this.prop?.getSelectedLayer() === this;
}
/**
* Select the layer.
*/
select() {
return this.prop?.selectLayer(this);
}
/**
* Remove the layer.
*/
remove() {
return this.prop?.removeLayer(this);
} }
upValues(props = {}) { upValues(props = {}) {

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

@ -5,25 +5,25 @@ import Layer from './Layer';
export default Backbone.Collection.extend({ export default Backbone.Collection.extend({
model: Layer, model: Layer,
initialize() { initialize(prop, opts = {}) {
this.idx = 1; this.prop = opts.prop;
this.on('add', this.onAdd); this.on('add', this.onAdd);
this.on('reset', this.onReset);
}, },
onAdd(model, c, opts) { onAdd(model, c, opts) {
if (!opts.noIncrement) model.set('index', this.idx++);
opts.active && this.active(this.indexOf(model)); opts.active && this.active(this.indexOf(model));
}, },
onReset() { active(index) {
this.idx = 1; this.each(layer => layer.set('active', 0));
const layer = this.at(index);
layer && layer.set('active', 1);
}, },
getSeparator() { // getSeparator() {
const { property } = this; // const { property } = this;
return property ? property.get('layerSeparator') : ', '; // return property ? property.get('layerSeparator') : ', ';
}, // },
/** /**
* Get layers from a value string (for not detached properties), * Get layers from a value string (for not detached properties),
@ -33,21 +33,21 @@ export default Backbone.Collection.extend({
* @return {Array} * @return {Array}
* @private * @private
*/ */
getLayersFromValue(value) { // getLayersFromValue(value) {
const layers = []; // const layers = [];
// Remove spaces inside functions, eg: // // Remove spaces inside functions, eg:
// From: 1px 1px rgba(2px, 2px, 2px), 2px 2px rgba(3px, 3px, 3px) // // 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) // // To: 1px 1px rgba(2px,2px,2px), 2px 2px rgba(3px,3px,3px)
value.replace(/\(([\w\s,.]*)\)/g, match => { // value.replace(/\(([\w\s,.]*)\)/g, match => {
var cleaned = match.replace(/,\s*/g, ','); // var cleaned = match.replace(/,\s*/g, ',');
value = value.replace(match, cleaned); // value = value.replace(match, cleaned);
}); // });
const layerValues = value ? value.split(this.getSeparator()) : []; // const layerValues = value ? value.split(this.getSeparator()) : [];
layerValues.forEach(layerValue => { // layerValues.forEach(layerValue => {
layers.push({ properties: this.properties.parseValue(layerValue) }); // layers.push({ properties: this.properties.parseValue(layerValue) });
}); // });
return layers; // return layers;
}, // },
/** /**
* Get layers from a style object (for detached properties), * Get layers from a style object (for detached properties),
@ -61,63 +61,57 @@ export default Backbone.Collection.extend({
* @return {Array} * @return {Array}
* @private * @private
*/ */
getLayersFromStyle(styleObj) { // getLayersFromStyle(styleObj) {
const layers = []; // const layers = [];
const properties = this.properties; // 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) { // properties.each(propModel => {
layer.properties.push(propertyObj); // const style = styleObj[propModel.get('property')];
} else { // const values = style ? style.split(', ') : [];
layers[i] = { // values.forEach((value, i) => {
properties: [propertyObj] // value = propModel.parseValue(value.trim()).value;
}; // const layer = layers[i];
} // const propertyObj = { ...propModel.attributes, ...{ value } };
});
});
// Now whit all layers in, will check missing properties // if (layer) {
layers.forEach(layer => { // layer.properties.push(propertyObj);
const layerProprs = layer.properties.map(prop => prop.property); // } else {
properties.each(propModel => { // layers[i] = {
const propertyName = propModel.get('property'); // properties: [propertyObj]
// };
// }
// });
// });
if (layerProprs.indexOf(propertyName) < 0) { // // Now whit all layers in, will check missing properties
layer.properties.push({ ...propModel.attributes }); // layers.forEach(layer => {
} // const layerProprs = layer.properties.map(prop => prop.property);
}); // properties.each(propModel => {
}); // const propertyName = propModel.get('property');
return layers; // if (layerProprs.indexOf(propertyName) < 0) {
}, // layer.properties.push({ ...propModel.attributes });
// }
// });
// });
active(index) { // return layers;
this.each(layer => layer.set('active', 0)); // },
const layer = this.at(index);
layer && layer.set('active', 1);
},
getFullValue() { // getFullValue() {
let result = []; // let result = [];
this.each(layer => result.push(layer.getFullValue())); // this.each(layer => result.push(layer.getFullValue()));
return result.join(this.getSeparator()); // return result.join(this.getSeparator());
}, // },
getPropertyValues(property, defValue) { // getPropertyValues(property, defValue) {
const result = []; // const result = [];
this.each(layer => { // this.each(layer => {
const value = layer.getPropertyValue(property); // const value = layer.getPropertyValue(property);
value // value
? result.push(value) // ? result.push(value)
: !isUndefined(defValue) && result.push(defValue); // : !isUndefined(defValue) && result.push(defValue);
}); // });
return result.join(', '); // return result.join(', ');
} // }
}); });

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

@ -40,11 +40,27 @@ export default class PropertyStack extends PropertyComposite {
}; };
} }
initialize(props = {}, opts = {}) {
PropertyComposite.callParentInit(PropertyComposite, this, props, opts);
const layers = this.get('layers');
const layersColl = new Layers(layers, { prop: this });
layersColl.property = this;
layersColl.properties = this.get('properties');
this.set('layers', layersColl, { silent: true });
this.on('change:selectedLayer', this.__upSelected);
this.listenTo(layersColl, 'add remove', this.__upLayers);
PropertyComposite.callInit(this, props, opts);
}
/** /**
* Get all available layers. * Get all available layers.
* @returns {Collection<[Layer]>} * @returns {Array<[Layer]>}
*/ */
getLayers() { getLayers() {
return this.__getLayers().models;
}
__getLayers() {
return this.get('layers'); return this.get('layers');
} }
@ -60,7 +76,7 @@ export default class PropertyStack extends PropertyComposite {
* const layerLast = property.getLayer(layers.length - 1); * const layerLast = property.getLayer(layers.length - 1);
*/ */
getLayer(index = 0) { getLayer(index = 0) {
return this.getLayers().at(index) || null; return this.__getLayers().at(index) || null;
} }
/** /**
@ -240,18 +256,6 @@ export default class PropertyStack extends PropertyComposite {
return isString(sep) ? new RegExp(`${sep}(?![^\\(]*\\))`) : sep; return isString(sep) ? new RegExp(`${sep}(?![^\\(]*\\))`) : sep;
} }
initialize(props = {}, opts = {}) {
PropertyComposite.callParentInit(PropertyComposite, this, props, opts);
const layers = this.get('layers');
const layersColl = new Layers(layers);
layersColl.property = this;
layersColl.properties = this.get('properties');
this.set('layers', layersColl, { silent: true });
this.on('change:selectedLayer', this.__upSelected);
this.listenTo(layersColl, 'add remove', this.__upLayers);
PropertyComposite.callInit(this, props, opts);
}
__upProperties(prop, opts = {}) { __upProperties(prop, opts = {}) {
const layer = this.getSelectedLayer(); const layer = this.getSelectedLayer();
if (opts.__up || !layer) return; if (opts.__up || !layer) return;
@ -300,13 +304,13 @@ export default class PropertyStack extends PropertyComposite {
} }
__setLayers(newLayers = []) { __setLayers(newLayers = []) {
const layers = this.getLayers(); const layers = this.__getLayers();
const layersNew = newLayers.map(values => ({ values })); const layersNew = newLayers.map(values => ({ values }));
if (layers.length === layersNew.length) { if (layers.length === layersNew.length) {
layersNew.map((layer, n) => layers.at(n)?.upValues(layer.values)); layersNew.map((layer, n) => layers.at(n)?.upValues(layer.values));
} else { } else {
this.getLayers().reset(layersNew); this.__getLayers().reset(layersNew);
} }
this.__upSelected({ noEvent: true }); this.__upSelected({ noEvent: true });
@ -429,7 +433,7 @@ export default class PropertyStack extends PropertyComposite {
} }
getValueFromStyle(styles = {}) { getValueFromStyle(styles = {}) {
const layers = this.getLayers().getLayersFromStyle(styles); const layers = this.__getLayers().getLayersFromStyle(styles);
return new Layers(layers).getFullValue(); return new Layers(layers).getFullValue();
} }
@ -462,7 +466,7 @@ export default class PropertyStack extends PropertyComposite {
* @private * @private
*/ */
clear(opts = {}) { clear(opts = {}) {
this.getLayers().reset(); this.__getLayers().reset();
this.__upTargetsStyleProps(opts); this.__upTargetsStyleProps(opts);
return PropertyBase.prototype.clear.call(this); return PropertyBase.prototype.clear.call(this);
} }

4
src/style_manager/view/PropertyStackView.js
View File

@ -27,7 +27,7 @@ export default PropertyCompositeView.extend({
init() { init() {
const { model } = this; const { model } = this;
this.listenTo(model.getLayers(), 'change reset', this.updateStatus); this.listenTo(model.__getLayers(), 'change reset', this.updateStatus);
}, },
addLayer() { addLayer() {
@ -68,7 +68,7 @@ export default PropertyCompositeView.extend({
propsView.render(); propsView.render();
const layersView = new LayersView({ const layersView = new LayersView({
collection: model.getLayers(), collection: model.__getLayers(),
config: this.config, config: this.config,
propertyView: this, propertyView: this,
}); });

Write Preview
Loading…
Cancel
Save