grapesjs/docs/api/canvas.md

Canvas

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object

const editor = grapesjs.init({
 canvas: {
   // options
 }
})

Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.

// Listen to events
editor.on('canvas:drop', () => { ... });

// Use the API
const canvas = editor.Canvas;
canvas.setCoords(...);

Available Events

• canvas:dragenter - When something is dragged inside the canvas, DataTransfer instance passed as an argument
• canvas:dragover - When something is dragging on canvas, DataTransfer instance passed as an argument
• canvas:drop - Something is dropped in canvas, DataTransfer instance and the dropped model are passed as arguments
• canvas:dragend - When a drag operation is ended, DataTransfer instance passed as an argument
• canvas:dragdata - On any dataTransfer parse, DataTransfer instance and the result are passed as arguments.

By changing result.content you're able to customize what is dropped

Methods

• getConfig
• getElement
• getFrameEl
• getWindow
• getDocument
• getBody
• setCustomBadgeLabel
• hasFocus
• scrollTo
• setZoom
• getZoom
• getCoords
• setCoords

getConfig

Get configuration object

Returns Object

getElement

Get the canvas element

Returns HTMLElement

getFrameEl

Get the main frame element of the canvas

Returns HTMLIFrameElement

getWindow

Get the main frame window instance

Returns Window

getDocument

Get the main frame document element

Returns HTMLDocument

getBody

Get the main frame body element

Returns HTMLBodyElement

setCustomBadgeLabel

Set custom badge naming strategy

Parameters

• f Function

Examples

canvas.setCustomBadgeLabel(function(component){
 return component.getName();
});

getRect

Get canvas rectangular data

Returns Object

hasFocus

Check if the canvas is focused

Returns Boolean

scrollTo

Scroll canvas to the element if it's not visible. The scrolling is executed via scrollIntoView API and options of this method are passed to it. For instance, you can scroll smoothly by using { behavior: 'smooth' }.

Parameters

• el (HTMLElement | Component)

• opts Object Options, same as options for scrollIntoView (optional, default {})

  • opts.force Boolean Force the scroll, even if the element is already visible (optional, default false)

Examples

const selected = editor.getSelected();
// Scroll smoothly (this behavior can be polyfilled)
canvas.scrollTo(selected, { behavior: 'smooth' });
// Force the scroll, even if the element is alredy visible
canvas.scrollTo(selected, { force: true });

setZoom

Set canvas zoom value

Parameters

• value Number The zoom value, from 0 to 100

Examples

canvas.setZoom(50); // set zoom to 50%

Returns this

getZoom

Get canvas zoom value

Examples

canvas.setZoom(50); // set zoom to 50%
const zoom = canvas.getZoom(); // 50

Returns Number

setCoords

Set canvas position coordinates

Parameters

• x Number Horizontal position
• y Number Vertical position
• opts ToWorldOption (optional, default {})

Examples

canvas.setCoords(100, 100);

Returns this

getCoords

Get canvas position coordinates

Examples

canvas.setCoords(100, 100);
const coords = canvas.getCoords();
// { x: 100, y: 100 }

Returns Object Object containing coordinates

addFrame

Add new frame to the canvas

Parameters

• props Object Frame properties (optional, default {})
• opts (optional, default {})

Examples

canvas.addFrame({
  name: 'Mobile home page',
  x: 100, // Position in canvas
  y: 100,
  width: 500, // Frame dimensions
  height: 600,
  // device: 'DEVICE-ID',
  components: [
    '<h1 class="testh">Title frame</h1>',
    '<p class="testp">Paragraph frame</p>',
  ],
  styles: `
    .testh { color: red; }
    .testp { color: blue; }
  `,
});

Returns Frame

getLastDragResult

Get the last created Component from a drag & drop to the canvas.

Returns (Component | undefined)