From a415f9be0eb2783b3ee67048952ed5cb8602682b Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Wed, 29 Dec 2021 12:21:33 +0100 Subject: [PATCH] Update StyleManager API docs --- docs/api/style_manager.md | 79 ++++++++++++++++++++------------------ src/style_manager/index.js | 79 ++++++++++++++++++++------------------ 2 files changed, 83 insertions(+), 75 deletions(-) diff --git a/docs/api/style_manager.md b/docs/api/style_manager.md index 95ecd8483..d5fc91033 100644 --- a/docs/api/style_manager.md +++ b/docs/api/style_manager.md @@ -19,15 +19,21 @@ Once the editor is instantiated you can use its API. Before using these methods const styleManager = editor.StyleManager; ``` +## Available Events + +* `style:sector:add` - Sector added. The [Sector] is passed as an argument to the callback. + +## Methods + * [getConfig][2] * [addSector][3] * [getSector][4] -* [removeSector][5] -* [getSectors][6] +* [getSectors][5] +* [removeSector][6] * [addProperty][7] * [getProperty][8] -* [removeProperty][9] -* [getProperties][10] +* [getProperties][9] +* [removeProperty][10] * [getModelToStyle][11] * [addType][12] * [getType][13] @@ -90,37 +96,37 @@ const sector = styleManager.getSector('mySector'); Returns **([Sector] | null)** -## removeSector +## getSectors -Remove sector by id. +Get all sectors. ### Parameters -* `id` **[String][17]** Sector id +* `opts` (optional, default `{}`) ### Examples ```javascript -const removed = styleManager.removeSector('mySector'); +const sectors = styleManager.getSectors(); ``` -Returns **[Sector]** Removed sector +Returns **Collection<[Sector]>** Collection of sectors -## getSectors +## removeSector -Get all sectors. +Remove sector by id. ### Parameters -* `opts` (optional, default `{}`) +* `id` **[String][17]** Sector id ### Examples ```javascript -const sectors = styleManager.getSectors(); +const removed = styleManager.removeSector('mySector'); ``` -Returns **Collection<[Sector]>** Collection of sectors +Returns **[Sector]** Removed sector ## addProperty @@ -130,10 +136,9 @@ Add new property to the sector. * `sectorId` **[String][17]** Sector id. * `property` **[Object][16]** Property definition. Check the [base available properties][20] + others based on the `type` of your property. -* `opts` (optional, default `{}`) -* `options` **[Object][16]** Options (optional, default `{}`) +* `opts` **[Object][16]** Options (optional, default `{}`) - * `options.at` **[Number][19]?** Position index (by default, will be appended at the end). + * `opts.at` **[Number][19]?** Position index (by default, will be appended at the end). ### Examples @@ -154,53 +159,53 @@ Returns **([Property] | null)** Added property or `null` in case the sector does ## getProperty -Get property by its CSS name and sector id +Get the property. ### Parameters -* `sectorId` **[string][17]** Sector id -* `name` **[string][17]** CSS property name (or id), eg. 'min-height' +* `sectorId` **[String][17]** Sector id. +* `id` **[String][17]** Property id. ### Examples ```javascript -var property = styleManager.getProperty('mySector','min-height'); +const property = styleManager.getProperty('mySector', 'min-height'); ``` -Returns **(Property | null)** +Returns **([Property] | null)** -## removeProperty +## getProperties -Remove a property from the sector +Get all properties of the sector. ### Parameters -* `sectorId` **[string][17]** Sector id -* `name` **[string][17]** CSS property name, eg. 'min-height' +* `sectorId` **[String][17]** Sector id. ### Examples ```javascript -const property = styleManager.removeProperty('mySector', 'min-height'); +const properties = styleManager.getProperties('mySector'); ``` -Returns **Property** Removed property +Returns **(Collection<[Property]> | null)** Collection of properties -## getProperties +## removeProperty -Get properties of the sector +Remove the property. ### Parameters -* `sectorId` **[string][17]** Sector id +* `sectorId` **[String][17]** Sector id. +* `id` **[String][17]** Property id. ### Examples ```javascript -var properties = styleManager.getProperties('mySector'); +const property = styleManager.removeProperty('mySector', 'min-height'); ``` -Returns **Properties** Collection of properties +Returns **([Property] | null)** Removed property ## getModelToStyle @@ -343,17 +348,17 @@ Returns **[Object][16]** Added property definition. [4]: #getsector -[5]: #removesector +[5]: #getsectors -[6]: #getsectors +[6]: #removesector [7]: #addproperty [8]: #getproperty -[9]: #removeproperty +[9]: #getproperties -[10]: #getproperties +[10]: #removeproperty [11]: #getmodeltostyle diff --git a/src/style_manager/index.js b/src/style_manager/index.js index d7d317995..445aaab69 100644 --- a/src/style_manager/index.js +++ b/src/style_manager/index.js @@ -14,16 +14,19 @@ * ```js * const styleManager = editor.StyleManager; * ``` + * ## Available Events + * * `style:sector:add` - Sector added. The [Sector] is passed as an argument to the callback. * + * ## Methods * * [getConfig](#getconfig) * * [addSector](#addsector) * * [getSector](#getsector) - * * [removeSector](#removesector) * * [getSectors](#getsectors) + * * [removeSector](#removesector) * * [addProperty](#addproperty) * * [getProperty](#getproperty) - * * [removeProperty](#removeproperty) * * [getProperties](#getproperties) + * * [removeProperty](#removeproperty) * * [getModelToStyle](#getmodeltostyle) * * [addType](#addtype) * * [getType](#gettype) @@ -183,6 +186,16 @@ export default () => { return res || null; }, + /** + * Get all sectors. + * @returns {Collection<[Sector]>} Collection of sectors + * @example + * const sectors = styleManager.getSectors(); + * */ + getSectors(opts = {}) { + return sectors && sectors.models ? (opts.array ? [...sectors.models] : sectors) : []; + }, + /** * Remove sector by id. * @param {String} id Sector id @@ -194,22 +207,12 @@ export default () => { return this.getSectors().remove(this.getSector(id, { warn: 1 })); }, - /** - * Get all sectors. - * @returns {Collection<[Sector]>} Collection of sectors - * @example - * const sectors = styleManager.getSectors(); - * */ - getSectors(opts = {}) { - return sectors && sectors.models ? (opts.array ? [...sectors.models] : sectors) : []; - }, - /** * Add new property to the sector. * @param {String} sectorId Sector id. * @param {Object} property Property definition. Check the [base available properties](property.html#properties) + others based on the `type` of your property. - * @param {Object} [options={}] Options - * @param {Number} [options.at] Position index (by default, will be appended at the end). + * @param {Object} [opts={}] Options + * @param {Number} [opts.at] Position index (by default, will be appended at the end). * @returns {[Property]|null} Added property or `null` in case the sector doesn't exist. * @example * const property = styleManager.addProperty('mySector', { @@ -232,43 +235,30 @@ export default () => { }, /** - * Get property by its CSS name and sector id - * @param {string} sectorId Sector id - * @param {string} name CSS property name (or id), eg. 'min-height' - * @return {Property|null} + * Get the property. + * @param {String} sectorId Sector id. + * @param {String} id Property id. + * @returns {[Property]|null} * @example - * var property = styleManager.getProperty('mySector','min-height'); + * const property = styleManager.getProperty('mySector', 'min-height'); */ - getProperty(sectorId, name) { + getProperty(sectorId, id) { const sector = this.getSector(sectorId, { warn: 1 }); let prop; if (sector) { - prop = sector.get('properties').filter(prop => prop.get('property') === name || prop.get('id') === name)[0]; + prop = sector.get('properties').filter(prop => prop.get('property') === id || prop.get('id') === id)[0]; } return prop || null; }, /** - * Remove a property from the sector - * @param {string} sectorId Sector id - * @param {string} name CSS property name, eg. 'min-height' - * @return {Property} Removed property - * @example - * const property = styleManager.removeProperty('mySector', 'min-height'); - */ - removeProperty(sectorId, name) { - const props = this.getProperties(sectorId); - return props && props.remove(this.getProperty(sectorId, name)); - }, - - /** - * Get properties of the sector - * @param {string} sectorId Sector id - * @return {Properties} Collection of properties + * Get all properties of the sector. + * @param {String} sectorId Sector id. + * @returns {Collection<[Property]>|null} Collection of properties * @example - * var properties = styleManager.getProperties('mySector'); + * const properties = styleManager.getProperties('mySector'); */ getProperties(sectorId) { let props = null; @@ -278,6 +268,19 @@ export default () => { return props; }, + /** + * Remove the property. + * @param {String} sectorId Sector id. + * @param {String} id Property id. + * @returns {[Property]|null} Removed property + * @example + * const property = styleManager.removeProperty('mySector', 'min-height'); + */ + removeProperty(sectorId, id) { + const props = this.getProperties(sectorId); + return props ? props.remove(this.getProperty(sectorId, id)) : null; + }, + /** * Get what to style inside Style Manager. If you select the component * without classes the entity is the Component itself and all changes will