Add Frame doc

docs/.vuepress/config.js

@@ -60,6 +60,7 @@ module.exports = {
         ['/api/editor', 'Editor'],
         ['/api/i18n', 'I18n'],
         ['/api/canvas', 'Canvas'],
+        ['/api/frame', `${subDivider}Frame`],
         ['/api/assets', 'Asset Manager'],
         ['/api/asset', `${subDivider}Asset`],
         ['/api/block_manager', 'Block Manager'],

docs/api.js

@@ -32,6 +32,7 @@ async function generateDocs () {
     ['keymaps/index.js', 'keymaps.md'],
     ['undo_manager/index.js', 'undo_manager.md'],
     ['canvas/index.js', 'canvas.md'],
+    ['canvas/model/Frame.js', 'frame.md'],
     ['i18n/index.js', 'i18n.md'],
     ['pages/index.js', 'pages.md'],
     ['pages/model/Page.js', 'page.md'],

docs/api/component.md

@@ -46,6 +46,7 @@ component.get('tagName');
 *   `selectable` **[Boolean][3]?** Allow component to be selected when clicked. Default: `true`
 *   `hoverable` **[Boolean][3]?** Shows a highlight outline when hovering on the element if `true`. Default: `true`
 *   `void` **[Boolean][3]?** This property is used by the HTML exporter as void elements don't have closing tags, eg. `<br/>`, `<hr/>`, etc. Default: `false`
+*   `styles` **[String][1]?** Component related styles, eg. `.my-component-class { color: red }`
 *   `content` **[String][1]?** Content of the component (not escaped) which will be appended before children rendering. Default: `''`
 *   `icon` **[String][1]?** Component's icon, this string will be inserted before the name (in Layers and badge), eg. it can be an HTML string '<i class="fa fa-square-o"></i>'. Default: `''`
 *   `script` **([String][1] | [Function][4])?** Component's javascript. More about it [here][7]. Default: `''`

docs/api/css_rule.md

@@ -18,7 +18,7 @@
 
 ### getAtRule
 
-Return the at-rule statement when exists, eg. `@media (...)`, `@keyframes`
+Returns the at-rule statement when exists, eg. `@media (...)`, `@keyframes`
 
 #### Examples
 

docs/api/frame.md

@@ -0,0 +1,19 @@
+<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
+
+## Frame
+
+
+
+### Properties
+
+*   `component` **([Object][1] | [String][2])** Wrapper component definition. You can also pass an HTML string as components of the default wrapper component.
+*   `width` **[String][2]?** Width of the frame. By default, the canvas width will be taken.
+*   `height` **[String][2]?** Height of the frame. By default, the canvas height will be taken.
+*   `x` **[Number][3]?** Horizontal position of the frame in the canvas.
+*   `y` **[Number][3]?** Vertical position of the frame in the canvas.
+
+[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+
+[2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+
+[3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number

docs/api/pages.md

@@ -87,7 +87,7 @@ const somePage = pageManager.get('page-id');
 pageManager.remove(somePage);
 ```
 
-Returns **[Page]** 
+Returns **[Page]** Removed Page
 
 ## get
 
@@ -136,8 +136,8 @@ Get wrapper components (aka body) from all pages and frames.
 ### Examples
 
 ```javascript
-// Get all the `image` components from the project
 const wrappers = pageManager.getAllWrappers();
+// Get all `image` components from the project
 const allImages = wrappers.map(wrp => wrp.findType('image')).flat();
 ```
 

src/canvas/model/Canvas.js

@@ -1,4 +1,4 @@
-import { Model } from 'backbone';
+import { Model } from 'common';
 import { evPageSelect } from 'pages';
 
 export default class Canvas extends Model {

src/canvas/model/Frame.js

@@ -1,10 +1,18 @@
-import { Model } from 'backbone';
-import { result, forEach, isEmpty, debounce, isString } from 'underscore';
+import { Model } from 'common';
+import { result, forEach, isEmpty, isString } from 'underscore';
 import { isComponent, isObject } from 'utils/mixins';
 
 const keyAutoW = '__aw';
 const keyAutoH = '__ah';
 
+/**
+ * @property {Object|String} component Wrapper component definition. You can also pass an HTML string as components of the default wrapper component.
+ * @property {String} [width=''] Width of the frame. By default, the canvas width will be taken.
+ * @property {String} [height=''] Height of the frame. By default, the canvas height will be taken.
+ * @property {Number} [x=0] Horizontal position of the frame in the canvas.
+ * @property {Number} [y=0] Vertical position of the frame in the canvas.
+ *
+ */
 export default class Frame extends Model {
   defaults() {
     return {

src/canvas/model/Frames.js

@@ -1,5 +1,5 @@
 import { bindAll } from 'underscore';
-import { Collection } from 'backbone';
+import { Collection } from 'common';
 import model from './Frame';
 
 export default class Frames extends Collection {