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 4 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
Split 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.
* @returns {Number}
@ -40,26 +63,34 @@ export default class Layer extends Model {
: values;
}
initialize() {
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];
}
/**
* Get layer label.
* @returns {String}
*/
getLabel() {
return this.prop?.getLayerLabel(this);
}
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 = {}) {

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

@ -5,25 +5,25 @@ import Layer from './Layer';
export default Backbone.Collection.extend({
model: Layer,
initialize() {
this.idx = 1;
initialize(prop, opts = {}) {
this.prop = opts.prop;
this.on('add', this.onAdd);
this.on('reset', this.onReset);
},
onAdd(model, c, opts) {
if (!opts.noIncrement) model.set('index', this.idx++);
opts.active && this.active(this.indexOf(model));
},
onReset() {
this.idx = 1;
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') : ', ';
},
// getSeparator() {
// const { property } = this;
// return property ? property.get('layerSeparator') : ', ';
// },
/**
* Get layers from a value string (for not detached properties),
@ -33,21 +33,21 @@ export default Backbone.Collection.extend({
* @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;
},
// 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),
@ -61,63 +61,57 @@ export default Backbone.Collection.extend({
* @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 } };
// getLayersFromStyle(styleObj) {
// const layers = [];
// const properties = this.properties;
if (layer) {
layer.properties.push(propertyObj);
} else {
layers[i] = {
properties: [propertyObj]
};
}
});
});
// 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 } };
// 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 (layer) {
// layer.properties.push(propertyObj);
// } else {
// layers[i] = {
// properties: [propertyObj]
// };
// }
// });
// });
if (layerProprs.indexOf(propertyName) < 0) {
layer.properties.push({ ...propModel.attributes });
}
});
});
// // 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');
return layers;
},
// if (layerProprs.indexOf(propertyName) < 0) {
// layer.properties.push({ ...propModel.attributes });
// }
// });
// });
active(index) {
this.each(layer => layer.set('active', 0));
const layer = this.at(index);
layer && layer.set('active', 1);
},
// return layers;
// },
getFullValue() {
let result = [];
this.each(layer => result.push(layer.getFullValue()));
return result.join(this.getSeparator());
},
// 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(', ');
}
// 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(', ');
// }
});

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.
* @returns {Collection<[Layer]>}
* @returns {Array<[Layer]>}
*/
getLayers() {
return this.__getLayers().models;
}
__getLayers() {
return this.get('layers');
}
@ -60,7 +76,7 @@ export default class PropertyStack extends PropertyComposite {
* const layerLast = property.getLayer(layers.length - 1);
*/
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;
}
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 = {}) {
const layer = this.getSelectedLayer();
if (opts.__up || !layer) return;
@ -300,13 +304,13 @@ export default class PropertyStack extends PropertyComposite {
}
__setLayers(newLayers = []) {
const layers = this.getLayers();
const layers = this.__getLayers();
const layersNew = newLayers.map(values => ({ values }));
if (layers.length === layersNew.length) {
layersNew.map((layer, n) => layers.at(n)?.upValues(layer.values));
} else {
this.getLayers().reset(layersNew);
this.__getLayers().reset(layersNew);
}
this.__upSelected({ noEvent: true });
@ -429,7 +433,7 @@ export default class PropertyStack extends PropertyComposite {
}
getValueFromStyle(styles = {}) {
const layers = this.getLayers().getLayersFromStyle(styles);
const layers = this.__getLayers().getLayersFromStyle(styles);
return new Layers(layers).getFullValue();
}
@ -462,7 +466,7 @@ export default class PropertyStack extends PropertyComposite {
* @private
*/
clear(opts = {}) {
this.getLayers().reset();
this.__getLayers().reset();
this.__upTargetsStyleProps(opts);
return PropertyBase.prototype.clear.call(this);
}

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

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

Write Preview
Loading…
Cancel
Save