diff --git a/src/canvas/index.js b/src/canvas/index.js index 994737d57..65599cfc4 100644 --- a/src/canvas/index.js +++ b/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 - * @return {HTMLIFrameElement} + * Get the main frame element of the canvas + * @returns {HTMLIFrameElement} */ getFrameEl() { const { frame } = CanvasView || {}; @@ -120,16 +119,16 @@ export default () => { }, /** - * Get the window instance of the iframe element - * @return {Window} + * Get the main frame window instance + * @returns {Window} */ getWindow() { return this.getFrameEl().contentWindow; }, /** - * Get the document of the iframe element - * @return {HTMLDocument} + * Get the main frame document element + * @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 - * - editor.Canvas.addFrame({ - name: 'Mobile home page', - x: 100, // Position in canvas - y: 100, - width: 500, // Frame dimensions - height: 600, - // device: 'DEVICE-ID', - components: [ - '
Paragraph frame
', - ], - styles: ` - .testh { color: red; } - .testp { color: blue; } - `, - }); + * canvas.addFrame({ + * name: 'Mobile home page', + * x: 100, // Position in canvas + * y: 100, + * width: 500, // Frame dimensions + * height: 600, + * // device: 'DEVICE-ID', + * components: [ + * 'Paragraph frame
', + * ], + * styles: ` + * .testh { color: red; } + * .testp { color: blue; } + * `, + * }); */ addFrame(props = {}, opts = {}) { return canvas.get('frames').add(