From e647cc56953c507fcb07788427e5f592f8854ecd Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sun, 3 Oct 2021 15:44:46 +0200 Subject: [PATCH] Add Frame doc --- docs/.vuepress/config.js | 1 + docs/api.js | 1 + docs/api/component.md | 1 + docs/api/css_rule.md | 2 +- docs/api/frame.md | 19 +++++++++++++++++++ docs/api/pages.md | 4 ++-- src/canvas/model/Canvas.js | 2 +- src/canvas/model/Frame.js | 12 ++++++++++-- src/canvas/model/Frames.js | 2 +- 9 files changed, 37 insertions(+), 7 deletions(-) create mode 100644 docs/api/frame.md diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 60d7cefab..77213097d 100644 --- a/docs/.vuepress/config.js +++ b/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'], diff --git a/docs/api.js b/docs/api.js index f54de48d3..4f1ac2d00 100644 --- a/docs/api.js +++ b/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'], diff --git a/docs/api/component.md b/docs/api/component.md index 3412301d1..eb4615394 100644 --- a/docs/api/component.md +++ b/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. `
`, `
`, 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 ''. Default: `''` * `script` **([String][1] | [Function][4])?** Component's javascript. More about it [here][7]. Default: `''` diff --git a/docs/api/css_rule.md b/docs/api/css_rule.md index b3b0687a1..fcc791e43 100644 --- a/docs/api/css_rule.md +++ b/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 diff --git a/docs/api/frame.md b/docs/api/frame.md new file mode 100644 index 000000000..7727364aa --- /dev/null +++ b/docs/api/frame.md @@ -0,0 +1,19 @@ + + +## 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 diff --git a/docs/api/pages.md b/docs/api/pages.md index 1144cf830..2044a18aa 100644 --- a/docs/api/pages.md +++ b/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(); ``` diff --git a/src/canvas/model/Canvas.js b/src/canvas/model/Canvas.js index 9bad35074..700b47852 100644 --- a/src/canvas/model/Canvas.js +++ b/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 { diff --git a/src/canvas/model/Frame.js b/src/canvas/model/Frame.js index 7c8b629db..65895c19a 100644 --- a/src/canvas/model/Frame.js +++ b/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 { diff --git a/src/canvas/model/Frames.js b/src/canvas/model/Frames.js index 17e313d20..8f403ed28 100644 --- a/src/canvas/model/Frames.js +++ b/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 {