Update canvas docs

src/canvas/index.js

@@ -26,6 +26,8 @@
  * * [setZoom](#setzoom)
  * * [getZoom](#getzoom)
  *
+ * [Component]: component.html
+ *
  * @module Canvas
  */
 
@@ -48,11 +50,6 @@ export default () => {
       return CanvasView;
     },
 
-    /**
-     * Name of the module
-     * @type {String}
-     * @private
-     */
     name: 'Canvas',
 
     /**
@@ -88,7 +85,9 @@ export default () => {
 
     /**
      * Get the configuration object
-     * @return {Object}
+     * @returns {Object} Configuration object
+     * @example
+     * console.log(canvas.getConfig())
      */
     getConfig() {
       return c;
@@ -96,7 +95,7 @@ export default () => {
 
     /**
      * Get the canvas element
-     * @return {HTMLElement}
+     * @returns {HTMLElement}
      */
     getElement() {
       return CanvasView.el;
@@ -107,8 +106,8 @@ export default () => {
     },
 
     /**
-     * Get the iframe element of the canvas
+     * Get the main frame element of the canvas
-     * @return {HTMLIFrameElement}
+     * @returns {HTMLIFrameElement}
      */
     getFrameEl() {
       const { frame } = CanvasView || {};
@@ -120,16 +119,16 @@ export default () => {
     },
 
     /**
-     * Get the window instance of the iframe element
+     * Get the main frame window instance
-     * @return {Window}
+     * @returns {Window}
      */
     getWindow() {
       return this.getFrameEl().contentWindow;
     },
 
     /**
-     * Get the document of the iframe element
+     * Get the main frame document element
-     * @return {HTMLDocument}
+     * @returns {HTMLDocument}
      */
     getDocument() {
       const frame = this.getFrameEl();
@@ -137,7 +136,7 @@ export default () => {
     },
 
     /**
-     * Get the body of the iframe element
+     * Get the main frame body element
      * @return {HTMLBodyElement}
      */
     getBody() {
@@ -159,7 +158,7 @@ export default () => {
 
     /**
      * Returns element containing all global canvas tools
-     * @return {HTMLElement}
+     * @returns {HTMLElement}
      * @private
      */
     getGlobalToolsEl() {
@@ -168,7 +167,7 @@ export default () => {
 
     /**
      * Returns element containing all canvas tools
-     * @return {HTMLElement}
+     * @returns {HTMLElement}
      * @private
      */
     getToolsEl(compView) {
@@ -177,7 +176,7 @@ export default () => {
 
     /**
      * Returns highlighter element
-     * @return {HTMLElement}
+     * @returns {HTMLElement}
      * @private
      */
     getHighlighter(compView) {
@@ -186,7 +185,7 @@ export default () => {
 
     /**
      * Returns badge element
-     * @return {HTMLElement}
+     * @returns {HTMLElement}
      * @private
      */
     getBadgeEl(compView) {
@@ -195,7 +194,7 @@ export default () => {
 
     /**
      * Returns placer element
-     * @return {HTMLElement}
+     * @returns {HTMLElement}
      * @private
      */
     getPlacerEl() {
@@ -204,7 +203,7 @@ export default () => {
 
     /**
      * Returns ghost element
-     * @return {HTMLElement}
+     * @returns {HTMLElement}
      * @private
      */
     getGhostEl() {
@@ -213,7 +212,7 @@ export default () => {
 
     /**
      * Returns toolbar element
-     * @return {HTMLElement}
+     * @returns {HTMLElement}
      * @private
      */
     getToolbarEl() {
@@ -222,7 +221,7 @@ export default () => {
 
     /**
      * Returns resizer element
-     * @return {HTMLElement}
+     * @returns {HTMLElement}
      * @private
      */
     getResizerEl() {
@@ -231,7 +230,7 @@ export default () => {
 
     /**
      * Returns offset viewer element
-     * @return {HTMLElement}
+     * @returns {HTMLElement}
      * @private
      */
     getOffsetViewerEl(compView) {
@@ -244,17 +243,13 @@ export default () => {
 
     /**
      * Returns fixed offset viewer element
-     * @return {HTMLElement}
+     * @returns {HTMLElement}
      * @private
      */
     getFixedOffsetViewerEl() {
       return CanvasView.fixedOffsetEl;
     },
 
-    /**
-     * Render canvas
-     * @private
-     * */
     render() {
       CanvasView && CanvasView.remove();
       CanvasView = new canvasView({
@@ -266,7 +261,7 @@ export default () => {
 
     /**
      * Get frame position
-     * @return {Object}
+     * @returns {Object}
      * @private
      */
     getOffset() {
@@ -281,7 +276,7 @@ export default () => {
     /**
      * Get the offset of the passed component element
      * @param  {HTMLElement} el
-     * @return {Object}
+     * @returns {Object}
      * @private
      */
     offset(el) {
@@ -303,7 +298,7 @@ export default () => {
     /**
      * Get element position relative to the canvas
      * @param {HTMLElement} el
-     * @return {Object}
+     * @returns {Object}
      * @private
      */
     getElementPos(el, opts) {
@@ -313,7 +308,7 @@ export default () => {
     /**
      * Returns element's offsets like margins and paddings
      * @param {HTMLElement} el
-     * @return {Object}
+     * @returns {Object}
      * @private
      */
     getElementOffsets(el) {
@@ -513,7 +508,7 @@ export default () => {
 
     /**
      * Check if the canvas is focused
-     * @return {Boolean}
+     * @returns {Boolean}
      */
     hasFocus() {
       return this.getDocument().hasFocus();
@@ -541,7 +536,7 @@ export default () => {
      * executed via `scrollIntoView` API and options of this method are
      * passed to it. For instance, you can scroll smoothly by using
      * `{ behavior: 'smooth' }`.
-     * @param  {HTMLElement|Component} el
+     * @param  {HTMLElement|[Component]} el
      * @param  {Object} [opts={}] Options, same as options for `scrollIntoView`
      * @param  {Boolean} [opts.force=false] Force the scroll, even if the element is already visible
      * @example
@@ -576,9 +571,11 @@ export default () => {
     },
 
     /**
-     * Set zoom value
+     * Set canvas zoom value
      * @param {Number} value The zoom value, from 0 to 100
      * @returns {this}
+     * @example
+     * canvas.setZoom(50) // set zoom to 50%
      */
     setZoom(value) {
       canvas.set('zoom', parseFloat(value));
@@ -586,8 +583,11 @@ export default () => {
     },
 
     /**
-     * Get zoom value
+     * Get canvas zoom value
      * @returns {Number}
+     * @example
+     * canvas.setZoom(50) // set zoom to 50%
+     * const zoom = canvas.getZoom() // 50
      */
     getZoom() {
       return parseFloat(canvas.get('zoom'));
@@ -616,23 +616,22 @@ export default () => {
      * @param {Object} props Frame properties
      * @returns {Frame}
      * @example
-     *
+     * canvas.addFrame({
-        editor.Canvas.addFrame({
+     *   name: 'Mobile home page',
-          name: 'Mobile home page',
+     *   x: 100, // Position in canvas
-          x: 100, // Position in canvas
+     *   y: 100,
-          y: 100,
+     *   width: 500, // Frame dimensions
-          width: 500, // Frame dimensions
+     *   height: 600,
-          height: 600,
+     *   // device: 'DEVICE-ID',
-          // device: 'DEVICE-ID',
+     *   components: [
-          components: [
+     *     '<h1 class="testh">Title frame</h1>',
-            '<h1 class="testh">Title frame</h1>',
+     *     '<p class="testp">Paragraph frame</p>',
-            '<p class="testp">Paragraph frame</p>',
+     *   ],
-          ],
+     *   styles: `
-          styles: `
+     *     .testh { color: red; }
-            .testh { color: red; }
+     *     .testp { color: blue; }
-            .testp { color: blue; }
+     *   `,
-          `,
+     * });
-        });
      */
     addFrame(props = {}, opts = {}) {
       return canvas.get('frames').add(