tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Up docs

pull/5358/head
Artur Arseniev 3 years ago
parent
b5f69ef2b9
commit
7e564f2d4c
2 changed files with 167 additions and 74 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 224
      docs/api/canvas.md
  2. 17
      docs/api/components.md

224
docs/api/canvas.md
View File

@ -66,54 +66,31 @@ editor.on('canvas:spot:remove', ({ spot }) => {
}); });
``` ```
* `canvas:viewport` Canvas viewport updated (eg. zoom or coordinates). * `canvas:coords` Canvas coordinates updated.
```javascript ```javascript
editor.on('canvas:viewport', () => { editor.on('canvas:coords', () => {
const { Canvas } = editor; console.log('Canvas coordinates updated:', editor.Canvas.getCoords());
console.log('Canvas, zoom:', Canvas.getZoom(), 'coords:', Canvas.getCoords());
}); });
``` ```
* `canvas:viewport:start` Canvas viewport update started (eg. zooming or panning) * `canvas:zoom` Canvas zoom updated.
```javascript
editor.on('canvas:viewport:start', () => {
console.log('viewport update started')
});
```
* `canvas:viewport:end` Canvas viewport update ended. This event is debounced on 300ms from the `canvas:viewport:start`.
```javascript ```javascript
editor.on('canvas:viewport:end', () => { editor.on('canvas:zoom', () => {
console.log('viewport updated ended') console.log('Canvas zoom updated:', editor.Canvas.getZoom());
}); });
``` ```
* `canvas:zoom` Canvas zoom updated. * `canvas:pointer` Canvas pointer updated.
```javascript ```javascript
editor.on('canvas:zoom', () => { editor.on('canvas:pointer', () => {
console.log('New canvas zoom:', editor.Canvas.getZoom()); console.log('Canvas pointer updated:', editor.Canvas.getPointer());
}); });
``` ```
## Methods * ToScreenOption
* [getConfig][2]
* [getElement][3]
* [getFrameEl][4]
* [getWindow][5]
* [getDocument][6]
* [getBody][7]
* [setCustomBadgeLabel][8]
* [hasFocus][9]
* [scrollTo][10]
* [setZoom][11]
* [getZoom][12]
* [getCoords][13]
* [setCoords][14]
[Component]: component.html [Component]: component.html
@ -123,25 +100,25 @@ editor.on('canvas:zoom', () => {
Get configuration object Get configuration object
Returns **[Object][15]** Returns **[Object][2]**
## getElement ## getElement
Get the canvas element Get the canvas element
Returns **[HTMLElement][16]** Returns **[HTMLElement][3]**
## getFrameEl ## getFrameEl
Get the main frame element of the canvas Get the main frame element of the canvas
Returns **[HTMLIFrameElement][17]** Returns **[HTMLIFrameElement][4]**
## getWindow ## getWindow
Get the main frame window instance Get the main frame window instance
Returns **[Window][18]** Returns **[Window][5]**
## getDocument ## getDocument
@ -153,7 +130,7 @@ Returns **HTMLDocument**
Get the main frame body element Get the main frame body element
Returns **[HTMLBodyElement][19]** Returns **[HTMLBodyElement][6]**
## setCustomBadgeLabel ## setCustomBadgeLabel
@ -161,7 +138,7 @@ Set custom badge naming strategy
### Parameters ### Parameters
* `f` **[Function][20]** * `f` **[Function][7]**
### Examples ### Examples
@ -175,13 +152,13 @@ canvas.setCustomBadgeLabel(function(component){
Get canvas rectangular data Get canvas rectangular data
Returns **[Object][15]** Returns **[Object][2]**
## hasFocus ## hasFocus
Check if the canvas is focused Check if the canvas is focused
Returns **[Boolean][21]** Returns **[Boolean][8]**
## scrollTo ## scrollTo
@ -192,10 +169,10 @@ passed to it. For instance, you can scroll smoothly by using
### Parameters ### Parameters
* `el` **([HTMLElement][16] | [Component])** * `el` **([HTMLElement][3] | [Component])**
* `opts` **[Object][15]** Options, same as options for `scrollIntoView` (optional, default `{}`) * `opts` **[Object][2]** Options, same as options for `scrollIntoView` (optional, default `{}`)
* `opts.force` **[Boolean][21]** Force the scroll, even if the element is already visible (optional, default `false`) * `opts.force` **[Boolean][8]** Force the scroll, even if the element is already visible (optional, default `false`)
### Examples ### Examples
@ -213,7 +190,7 @@ Set canvas zoom value
### Parameters ### Parameters
* `value` **[Number][22]** The zoom value, from 0 to 100 * `value` **[Number][9]** The zoom value, from 0 to 100
### Examples ### Examples
@ -234,7 +211,7 @@ canvas.setZoom(50); // set zoom to 50%
const zoom = canvas.getZoom(); // 50 const zoom = canvas.getZoom(); // 50
``` ```
Returns **[Number][22]** Returns **[Number][9]**
## setCoords ## setCoords
@ -242,8 +219,8 @@ Set canvas position coordinates
### Parameters ### Parameters
* `x` **[Number][22]** Horizontal position * `x` **[Number][9]** Horizontal position
* `y` **[Number][22]** Vertical position * `y` **[Number][9]** Vertical position
* `opts` **ToWorldOption** (optional, default `{}`) * `opts` **ToWorldOption** (optional, default `{}`)
### Examples ### Examples
@ -266,7 +243,7 @@ const coords = canvas.getCoords();
// { x: 100, y: 100 } // { x: 100, y: 100 }
``` ```
Returns **[Object][15]** Object containing coordinates Returns **[Object][2]** Object containing coordinates
## addFrame ## addFrame
@ -274,7 +251,7 @@ Add new frame to the canvas
### Parameters ### Parameters
* `props` **[Object][15]** Frame properties (optional, default `{}`) * `props` **[Object][2]** Frame properties (optional, default `{}`)
* `opts` (optional, default `{}`) * `opts` (optional, default `{}`)
### Examples ### Examples
@ -304,50 +281,149 @@ Returns **[Frame]**
Get the last created Component from a drag & drop to the canvas. Get the last created Component from a drag & drop to the canvas.
Returns **([Component] | [undefined][23])** Returns **([Component] | [undefined][10])**
[1]: https://github.com/GrapesJS/grapesjs/blob/master/src/canvas/config/config.ts ## addSpot
Add or update canvas spot.
### Parameters
* `props` **[Object][2]** Canvas spot properties.
* `opts` **AddOptions** (optional, default `{}`)
### Examples
```javascript
// Add new canvas spot
const spot = canvas.addSpot({
type: 'select', // 'select' is one of the built-in spots
component: editor.getSelected(),
});
// Add custom canvas spot
const spot = canvas.addSpot({
type: 'my-custom-spot',
component: editor.getSelected(),
});
// Update the same spot by reusing its ID
canvas.addSpot({
id: spot.id,
component: anotherComponent,
});
```
Returns **[CanvasSpot]**
## getSpots
Get canvas spots.
### Parameters
* `spotProps` **[Object][2]?** Canvas spot properties for filtering the result. With no properties, all available spots will be returned. (optional, default `{}`)
### Examples
[2]: #getconfig ```javascript
canvas.addSpot({ type: 'select', component: cmp1 });
canvas.addSpot({ type: 'select', component: cmp2 });
canvas.addSpot({ type: 'target', component: cmp3 });
// Get all spots
const allSpots = canvas.getSpots();
allSpots.length; // 3
// Get all 'select' spots
const allSelectSpots = canvas.getSpots({ type: 'select' });
allSelectSpots.length; // 2
```
Returns **[Array][11]<[CanvasSpot]>**
## removeSpots
Remove canvas spots.
### Parameters
* `spotProps` **([Object][2] | [Array][11]<[CanvasSpot]>)?** Canvas spot properties for filtering spots to remove or an array of spots to remove. With no properties, all available spots will be removed. (optional, default `{}`)
### Examples
[3]: #getelement ```javascript
canvas.addSpot({ type: 'select', component: cmp1 });
canvas.addSpot({ type: 'select', component: cmp2 });
canvas.addSpot({ type: 'target', component: cmp3 });
[4]: #getframeel // Remove all 'select' spots
canvas.removeSpots({ type: 'select' });
[5]: #getwindow // Remove spots by an array of canvas spots
const filteredSpots = canvas.getSpots().filter(spot => myCustomCondition);
canvas.removeSpots(filteredSpots);
[6]: #getdocument // Remove all spots
canvas.removeSpots();
```
[7]: #getbody Returns **[Array][11]<[CanvasSpot]>**
[8]: #setcustombadgelabel ## hasCustomSpot
[9]: #hasfocus Check if the built-in canvas spot has a declared custom rendering.
[10]: #scrollto ### Parameters
[11]: #setzoom * `type` **[String][12]** Built-in canvas spot type
[12]: #getzoom ### Examples
```javascript
grapesjs.init({
// ...
canvas: {
// avoid rendering the built-in 'target' canvas spot
customSpots: { target: true }
}
});
// ...
canvas.hasCustomSpot('select'); // false
canvas.hasCustomSpot('target'); // true
```
Returns **[Boolean][8]**
## getWorldRectToScreen
Transform a box rect from the world coordinate system to the screen one.
### Parameters
* `boxRect` **[Object][2]**
Returns **[Object][2]**
[1]: https://github.com/GrapesJS/grapesjs/blob/master/src/canvas/config/config.ts
[13]: #getcoords [2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
[14]: #setcoords [3]: https://developer.mozilla.org/docs/Web/HTML/Element
[15]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object [4]: https://developer.mozilla.org/docs/Web/API/HTMLIFrameElement
[16]: https://developer.mozilla.org/docs/Web/HTML/Element [5]: https://developer.mozilla.org/docs/Web/API/Window
[17]: https://developer.mozilla.org/docs/Web/API/HTMLIFrameElement [6]: https://developer.mozilla.org/docs/Web/HTML/Element/body
[18]: https://developer.mozilla.org/docs/Web/API/Window [7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
[19]: https://developer.mozilla.org/docs/Web/HTML/Element/body [8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
[20]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function [9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
[21]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean [10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined
[22]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number [11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
[23]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined [12]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String

17
docs/api/components.md
View File

@ -201,6 +201,23 @@ Return the array of all types
Returns **[Array][11]** Returns **[Array][11]**
## isComponent
Check if the object is a \[Component].
### Parameters
* `obj` **[Object][10]**
### Examples
```javascript
cmp.isComponent(editor.getSelected()); // true
cmp.isComponent({}); // false
```
Returns **[Boolean][13]**
## canMove ## canMove
Check if a component can be moved inside another one. Check if a component can be moved inside another one.

Write Preview
Loading…
Cancel
Save