Added Sector API ref

docs/.vuepress/config.js

@@ -72,6 +72,7 @@ module.exports = {
         ['/api/pages', 'Pages'],
         ['/api/page', `${subDivider}Page`],
         ['/api/style_manager', 'Style Manager'],
+        ['/api/sector', `${subDivider}Sector`],
         ['/api/storage_manager', 'Storage Manager'],
         ['/api/device_manager', 'Device Manager'],
         ['/api/device', `${subDivider}Device`],

docs/api.js

@@ -21,6 +21,7 @@ async function generateDocs () {
     ['dom_components/model/Component.js', 'component.md'],
     ['panels/index.js', 'panels.md'],
     ['style_manager/index.js', 'style_manager.md'],
+    ['style_manager/model/Sector.js', 'sector.md'],
     ['storage_manager/index.js', 'storage_manager.md'],
     ['device_manager/index.js', 'device_manager.md'],
     ['device_manager/model/Device.js', 'device.md'],

docs/api/component.md

@@ -19,6 +19,8 @@ component.get('tagName');
 // -> 'span'
 ```
 
+[Component]: component.html
+
 ### Properties
 
 *   `type` **[String][1]?** Component type, eg. `text`, `image`, `video`, etc.
@@ -408,7 +410,7 @@ current collection is returned
 
 #### Parameters
 
-*   `components` **([Component][9] | [String][1])?** Components to set
+*   `components` **([Component][9] | [String][1])?** Component Definitions or HTML string
 *   `opts` **[Object][2]** Options, same as in `Component.append()` (optional, default `{}`)
 
 #### Examples
@@ -422,7 +424,38 @@ console.log(collection.length);
 // -> 2
 ```
 
-Returns **(Collection | [Array][5]<[Component][9]>)** 
+Returns **(Collection | [Array][5]<[[Component][9]]>)** 
+
+### getChildAt
+
+If exists, returns the child component at specific index.
+
+#### Parameters
+
+*   `index` **[Number][10]** Index of the component to return
+
+#### Examples
+
+```javascript
+// Return first child
+component.getChildAt(0);
+// Return second child
+component.getChildAt(1);
+```
+
+Returns **([[Component][9]] | null)** 
+
+### getLastChild
+
+If exists, returns the last child component.
+
+#### Examples
+
+```javascript
+const lastChild = component.getLastChild();
+```
+
+Returns **([[Component][9]] | null)** 
 
 ### empty
 
@@ -449,7 +482,7 @@ component.parent();
 // -> Component
 ```
 
-Returns **[Component][9]** 
+Returns **([Component][9] | null)** 
 
 ### getTrait
 

docs/api/sector.md

@@ -0,0 +1,60 @@
+<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
+
+## Sector
+
+
+
+### Properties
+
+*   `id` **[String][1]** Sector id, eg. `typography`
+*   `name` **[String][1]** Sector name, eg. `Typography`
+*   `open` **[Boolean][2]?** Indicates the open state.
+*   `properties` **[Array][3]<[Object][4]>?** Indicate an array of Property defintions[Property]: property.html
+
+### getId
+
+Get sector id.
+
+Returns **[String][1]** 
+
+### getName
+
+Get sector name.
+
+Returns **[String][1]** 
+
+### setName
+
+Update sector name.
+
+#### Parameters
+
+*   `value` **[String][1]** New sector name
+
+### isOpen
+
+Check if the sector is open
+
+Returns **[Boolean][2]** 
+
+### setOpen
+
+Update Sector open state
+
+#### Parameters
+
+*   `value` **[Boolean][2]** 
+
+### getProperties
+
+Get sector properties.
+
+Returns **[Array][3]<[Property]>** 
+
+[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+
+[2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+
+[3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
+
+[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object

docs/api/selector.md

@@ -27,6 +27,37 @@ console.log(selector.toString());
 
 Returns **[String][1]** 
 
+### getLabel
+
+Get selector label.
+
+#### Examples
+
+```javascript
+// Given such selector: { name: 'my-selector', label: 'My selector' }
+console.log(selector.getLabel());
+// -> `My selector`
+```
+
+Returns **[String][1]** 
+
+### setLabel
+
+Update selector label.
+
+#### Parameters
+
+*   `label` **[String][1]** New label
+
+#### Examples
+
+```javascript
+// Given such selector: { name: 'my-selector', label: 'My selector' }
+selector.setLabel('New Label')
+console.log(selector.getLabel());
+// -> `New Label`
+```
+
 [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 
 [2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number

docs/api/selector_manager.md

@@ -51,7 +51,7 @@ sm.add(...);
 *   `selector:add` - Selector added. The [Selector] is passed as an argument to the callback.
 *   `selector:remove` - Selector removed. The [Selector] is passed as an argument to the callback.
 *   `selector:update` - Selector updated. The [Selector] and the object containing changes are passed as arguments to the callback.
-*   `selector:state` - State changed. Passes the new state value as an argument.
+*   `selector:state` - States changed. An object containing all the available data about the triggered event is passed as an argument to the callback.
 *   `selector` - Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback.
 
 ## Methods
@@ -150,10 +150,36 @@ Returns **this**
 
 ## getState
 
-Get the current selector state
+Get the current selector state value
 
 Returns **[String][10]** 
 
+## getStates
+
+Get states
+
+Returns **[Array][11]\<State>** 
+
+## setStates
+
+Set a new collection of states
+
+### Parameters
+
+*   `states` **[Array][11]<[Object][9]>** Array of new states
+*   `opts`  
+
+### Examples
+
+```javascript
+const states = selectorManager.setStates([
+  { name: 'hover', label: 'Hover' },
+  { name: 'nth-of-type(2n)', label: 'Even/Odd' }
+]);
+```
+
+Returns **[Array][11]\<State>** 
+
 ## getAll
 
 Get all selectors
@@ -179,3 +205,5 @@ Returns **Collection<[Selector]>**
 [9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
 
 [10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+
+[11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array

docs/api/style_manager.md

@@ -34,6 +34,8 @@ const styleManager = editor.StyleManager;
 *   [getTypes][14]
 *   [createType][15]
 
+[Sector]: sector.html
+
 ## getConfig
 
 Get configuration object
@@ -106,7 +108,7 @@ Returns **Sector** Removed sector
 
 Get all sectors
 
-Returns **Sectors** Collection of sectors
+Returns **[Array][19]<[Sector]>** Collection of sectors
 
 ## addProperty
 

src/style_manager/index.js

@@ -30,12 +30,15 @@
  * * [getTypes](#gettypes)
  * * [createType](#createtype)
  *
+ * [Sector]: sector.html
+ *
  * @module StyleManager
  */
 
 import { isElement } from 'underscore';
 import Module from 'common/module';
 import defaults from './config/config';
+import Sector from './model/Sector';
 import Sectors from './model/Sectors';
 import Properties from './model/Properties';
 import PropertyFactory from './model/PropertyFactory';
@@ -49,6 +52,8 @@ export default () => {
   return {
     ...Module,
 
+    Sector,
+
     PropertyFactory: PropertyFactory(),
 
     /**
@@ -129,7 +134,7 @@ export default () => {
     /**
      * Get sector by id
      * @param {string} id  Sector id
-     * @return {Sector|null}
+     * @return {[Sector]|null}
      * @example
      * var sector = styleManager.getSector('mySector');
      * */
@@ -152,10 +157,12 @@ export default () => {
 
     /**
      * Get all sectors
-     * @return {Sectors} Collection of sectors
+     * @returns {Array<[Sector]>} Collection of sectors
+     * @example
+     * const sectors = styleManager.getSectors();
      * */
     getSectors() {
-      return sectors;
+      return sectors && sectors.models ? [...sectors.models] : [];
     },
 
     /**

src/style_manager/model/Sector.js

@@ -1,17 +1,28 @@
-import Backbone from 'backbone';
+import { Model } from 'common';
 import { extend } from 'underscore';
 import Properties from './Properties';
 import PropertyFactory from './PropertyFactory';
 
-export default Backbone.Model.extend({
-  defaults: {
-    id: '',
-    name: '',
-    open: true,
-    buildProps: '',
-    extendBuilded: 1,
-    properties: []
-  },
+/**
+ * @typedef Sector
+ * @property {String} id Sector id, eg. `typography`
+ * @property {String} name Sector name, eg. `Typography`
+ * @property {Boolean} [open=true] Indicates the open state.
+ * @property {Array<Object>} [properties=[]] Indicate an array of Property defintions
+ *
+ * [Property]: property.html
+ */
+export default class Sector extends Model {
+  defaults() {
+    return {
+      id: '',
+      name: '',
+      open: true,
+      buildProps: '',
+      extendBuilded: 1,
+      properties: []
+    };
+  }
 
   initialize(opts) {
     const o = opts || {};
@@ -26,7 +37,56 @@ export default Backbone.Model.extend({
     const propsModel = new Properties(props);
     propsModel.sector = this;
     this.set('properties', propsModel);
-  },
+  }
+
+  /**
+   * Get sector id.
+   * @returns {String}
+   */
+  getId() {
+    return this.get('id');
+  }
+
+  /**
+   * Get sector name.
+   * @returns {String}
+   */
+  getName() {
+    return this.get('name');
+  }
+
+  /**
+   * Update sector name.
+   * @param {String} value New sector name
+   */
+  setName(value) {
+    return this.set('name', value);
+  }
+
+  /**
+   * Check if the sector is open
+   * @returns {Boolean}
+   */
+  isOpen() {
+    return !!this.get('open');
+  }
+
+  /**
+   * Update Sector open state
+   * @param {Boolean} value
+   */
+  setOpen(value) {
+    return this.set('open', value);
+  }
+
+  /**
+   * Get sector properties.
+   * @returns {Array<[Property]>}
+   */
+  getProperties() {
+    const props = this.get('properties');
+    return props.models ? [...props.models] : props;
+  }
 
   /**
    * Extend properties
@@ -72,7 +132,7 @@ export default Backbone.Model.extend({
     }
 
     return ex ? isolated.filter(i => i) : props;
-  },
+  }
 
   /**
    * Build properties
@@ -92,4 +152,4 @@ export default Backbone.Model.extend({
 
     return r;
   }
-});
+}