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

Add layerLabel to shadow properties

up-style-manager
Artur Arseniev 4 years ago
parent
119d15e105
commit
93eaa15463
5 changed files with 63 additions and 25 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. 1
      docs/api.js
  2. 51
      docs/api/property_stack.md
  3. 13
      src/style_manager/model/PropertyFactory.js
  4. 9
      src/style_manager/model/PropertyStack.js
  5. 14
      test/specs/style_manager/model/PropertyFactory.js

1
docs/api.js
View File

@ -56,6 +56,7 @@ async function generateDocs () {
.replace(/<\\\[/g, '<[')
.replace(/<\(\\\[/g, '<([')
.replace(/\| \\\[/g, '| [')
.replace(/\\n```js/g, "```js")
.replace('**Extends Model**', '');
fs.writeFileSync(`${docRoot}/api/${file[1]}`, res);
log('Created', file[1]);

51
docs/api/property_stack.md
View File

@ -8,9 +8,20 @@
### Properties
* `layerSeparator` **([String][1] | [RegExp][2])?** The separator used to split layer values.
* `layerJoin` **[String][1]?** Value used to join layer values.
* `layerLabel` **[Function][3]?** Custom logic for creating the layer label.
* `preview` **[Boolean][1]?** Indicate if the layer should display a preview.
* `layerSeparator` **([String][2] | [RegExp][3])?** The separator used to split layer values.
* `layerJoin` **[String][2]?** Value used to join layer values.
```js
layerJoin: (layer, { values }) => {
return `A: ${values['prop-a']} B: ${values['prop-b']}`;
}
```
* `layerLabel` **[Function][4]?** Custom logic for creating layer labels.
```js
layerLabel: (layer, { values }) => {
return `A: ${values['prop-a']} B: ${values['prop-b']}`;
}
```
### getLayers
@ -24,7 +35,7 @@ Get layer by index.
#### Parameters
* `index` **[Number][4]** Layer index position. (optional, default `0`)
* `index` **[Number][5]** Layer index position. (optional, default `0`)
#### Examples
@ -66,7 +77,7 @@ Select layer by index.
#### Parameters
* `index` **[Number][4]** Index of the layer to select. (optional, default `0`)
* `index` **[Number][5]** Index of the layer to select. (optional, default `0`)
#### Examples
@ -80,10 +91,10 @@ Add new layer to the stack.
#### Parameters
* `props` **[Object][5]** Custom property values to use in a new layer. (optional, default `{}`)
* `opts` **[Object][5]** Options (optional, default `{}`)
* `props` **[Object][6]** Custom property values to use in a new layer. (optional, default `{}`)
* `opts` **[Object][6]** Options (optional, default `{}`)
* `opts.at` **[Number][4]?** Position index (by default the layer will be appended at the end).
* `opts.at` **[Number][5]?** Position index (by default the layer will be appended at the end).
#### Examples
@ -117,7 +128,7 @@ Remove layer by index.
#### Parameters
* `index` **[Number][4]** Index of the layer to remove (optional, default `0`)
* `index` **[Number][5]** Index of the layer to remove (optional, default `0`)
#### Examples
@ -142,7 +153,7 @@ const layer = this.getLayer(1);
const label = this.getLayerLabel(layer);
```
Returns **[String][1]**
Returns **[String][2]**
### getStyleFromLayer
@ -151,26 +162,26 @@ Get style object from the layer.
#### Parameters
* `layer` **[Layer]**
* `opts` **[Object][5]** Options (optional, default `{}`)
* `opts` **[Object][6]** Options (optional, default `{}`)
* `opts.camelCase` **[Boolean][6]?** Return property names in camelCase.
* `opts.camelCase` **[Boolean][1]?** Return property names in camelCase.
Returns **[Object][5]** Style object
Returns **[Object][6]** Style object
### getLayerSeparator
Get layer separator.
Returns **[RegExp][2]**
Returns **[RegExp][3]**
[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
[2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp
[2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
[3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
[3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp
[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object

13
src/style_manager/model/PropertyFactory.js
View File

@ -305,6 +305,13 @@ export default class PropertyFactory {
'box-shadow',
{
preview: true,
layerLabel: (l, { values }) => {
const x = values['box-shadow-h'];
const y = values['box-shadow-v'];
const blur = values['box-shadow-blur'];
const spread = values['box-shadow-spread'];
return `${x} ${y} ${blur} ${spread}`;
},
properties: this.__sub([
'box-shadow-h',
'box-shadow-v',
@ -320,6 +327,12 @@ export default class PropertyFactory {
'text-shadow',
{
default: 'none',
layerLabel: (l, { values }) => {
const x = values['text-shadow-h'];
const y = values['text-shadow-v'];
const blur = values['text-shadow-blur'];
return `${x} ${y} ${blur}`;
},
properties: this.__sub(['text-shadow-h', 'text-shadow-v', 'text-shadow-blur', 'text-shadow-color']),
},
'box-shadow',

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

@ -16,7 +16,14 @@ const PARTS_REG = /\s(?![^(]*\))/;
* @property {Boolean} [preview=false] Indicate if the layer should display a preview.
* @property {String|RegExp} [layerSeparator=', '] The separator used to split layer values.
* @property {String} [layerJoin=', '] Value used to join layer values.
* @property {Function} [layerLabel] Custom logic for creating the layer label.
* @property {Function} [layerLabel] Custom logic for creating layer labels.
* \n
* ```js
* layerLabel: (layer) => {
* const values = layer.getValues();
* return `A: ${values['prop-a']} B: ${values['prop-b']}`;
* }
* ```
*
*/
export default class PropertyStack extends PropertyComposite {

14
test/specs/style_manager/model/PropertyFactory.js
View File

@ -448,7 +448,9 @@ describe('PropertyFactory', () => {
],
};
res.property = 'text-shadow';
expect(obj.build('text-shadow')).toEqual([res]);
const result = obj.build('text-shadow');
delete result[0].layerLabel;
expect(result).toEqual([res]);
});
test('Build border-radius-c', () => {
@ -602,7 +604,9 @@ describe('PropertyFactory', () => {
},
],
};
expect(obj.build('box-shadow')).toEqual([res]);
const result = obj.build('box-shadow');
delete result[0].layerLabel;
expect(result).toEqual([res]);
});
test('Build background', () => {
@ -658,7 +662,9 @@ describe('PropertyFactory', () => {
},
],
};
expect(obj.build('background')).toEqual([res]);
const result = obj.build('background');
delete result[0].layerLabel;
expect(result).toEqual([res]);
});
test('Build transition', () => {
@ -686,7 +692,7 @@ describe('PropertyFactory', () => {
id: 'transition-duration-sub',
type: 'integer',
units: obj.unitsTime,
default: '2',
default: '2s',
min: 0,
},
{

Write Preview
Loading…
Cancel
Save