@ -14,27 +14,27 @@ export type DragMode = 'translate' | 'absolute' | '';
export interface ComponentProperties {
export interface ComponentProperties {
/ * *
/ * *
* Component type , eg . ` text ` , ` image ` , ` video ` , etc .
* Component type , eg . ` text ` , ` image ` , ` video ` , etc .
* @defaultValue ''
* @default ''
* /
* /
type ? : string ;
type ? : string ;
/ * *
/ * *
* HTML tag of the component , eg . ` span ` . Default : ` div `
* HTML tag of the component , eg . ` span ` . Default : ` div `
* @defaultValue 'div'
* @default 'div'
* /
* /
tagName? : string ;
tagName? : string ;
/ * *
/ * *
* Key - value object of the component 's attributes, eg. `{ title: ' Hello ' } ` Default: ` { } `
* Key - value object of the component 's attributes, eg. `{ title: ' Hello ' } ` Default: ` { } `
* @defaultValue { }
* @default { }
* /
* /
attributes? : Record < string , any > ;
attributes? : Record < string , any > ;
/ * *
/ * *
* Name of the component . Will be used , for example , in Layers and badges
* Name of the component . Will be used , for example , in Layers and badges
* @defaultValue ''
* @default ''
* /
* /
name? : string ;
name? : string ;
/ * *
/ * *
* When ` true ` the component is removable from the canvas , default : ` true `
* When ` true ` the component is removable from the canvas , default : ` true `
* @defaultValue true
* @default true
* /
* /
removable? : boolean ;
removable? : boolean ;
/ * *
/ * *
@ -42,45 +42,45 @@ export interface ComponentProperties {
You can also specify a query string to indentify elements ,
You can also specify a query string to indentify elements ,
eg . ` '.some-class[title=Hello], [data-gjs-type=column]' ` means you can drag the component only inside elements
eg . ` '.some-class[title=Hello], [data-gjs-type=column]' ` means you can drag the component only inside elements
containing ` some-class ` class and ` Hello ` title , and ` column ` components . In the case of a function , target and destination components are passed as arguments , return a Boolean to indicate if the drag is possible . Default : ` true `
containing ` some-class ` class and ` Hello ` title , and ` column ` components . In the case of a function , target and destination components are passed as arguments , return a Boolean to indicate if the drag is possible . Default : ` true `
* @defaultValue true
* @default true
* /
* /
draggable? : boolean | string | ( ( . . . params : any [ ] ) = > any ) ;
draggable? : boolean | string | ( ( . . . params : any [ ] ) = > any ) ;
/ * *
/ * *
* Indicates if it ' s possible to drop other components inside . You can use
* Indicates if it ' s possible to drop other components inside . You can use
a query string as with ` draggable ` . In the case of a function , target and destination components are passed as arguments , return a Boolean to indicate if the drop is possible . Default : ` true `
a query string as with ` draggable ` . In the case of a function , target and destination components are passed as arguments , return a Boolean to indicate if the drop is possible . Default : ` true `
* @defaultValue true
* @default true
* /
* /
droppable? : boolean | string | ( ( . . . params : any [ ] ) = > any ) ;
droppable? : boolean | string | ( ( . . . params : any [ ] ) = > any ) ;
/ * *
/ * *
* Set to false if you don ' t want to see the badge ( with the name ) over the component . Default : ` true `
* Set to false if you don ' t want to see the badge ( with the name ) over the component . Default : ` true `
* @defaultValue true
* @default true
* /
* /
badgable? : boolean ;
badgable? : boolean ;
/ * *
/ * *
* True if it ' s possible to style the component .
* True if it ' s possible to style the component .
You can also indicate an array of CSS properties which is possible to style , eg . ` ['color', 'width'] ` , all other properties
You can also indicate an array of CSS properties which is possible to style , eg . ` ['color', 'width'] ` , all other properties
will be hidden from the style manager . Default : ` true `
will be hidden from the style manager . Default : ` true `
* @defaultValue true
* @default true
* /
* /
stylable? : boolean | String [ ] ;
stylable? : boolean | String [ ] ;
///**
///**
// * Indicate an array of style properties to show up which has been marked as `toRequire`. Default: `[]`
// * Indicate an array of style properties to show up which has been marked as `toRequire`. Default: `[]`
// * @defaultValue []
// * @default []
// */
// */
//`stylable-require`?: String[];
//`stylable-require`?: String[];
/ * *
/ * *
* Indicate an array of style properties which should be hidden from the style manager . Default : ` [] `
* Indicate an array of style properties which should be hidden from the style manager . Default : ` [] `
* @defaultValue [ ]
* @default [ ]
* /
* /
unstylable? : String [ ] ;
unstylable? : String [ ] ;
/ * *
/ * *
* It can be highlighted with 'dotted' borders if true . Default : ` true `
* It can be highlighted with 'dotted' borders if true . Default : ` true `
* @defaultValue true
* @default true
* /
* /
highlightable? : boolean ;
highlightable? : boolean ;
/ * *
/ * *
* True if it ' s possible to clone the component . Default : ` true `
* True if it ' s possible to clone the component . Default : ` true `
* @defaultValue true
* @default true
* /
* /
copyable? : boolean ;
copyable? : boolean ;
/ * *
/ * *
@ -93,17 +93,17 @@ export interface ComponentProperties {
editable? : boolean ;
editable? : boolean ;
/ * *
/ * *
* Set to ` false ` if you need to hide the component inside Layers . Default : ` true `
* Set to ` false ` if you need to hide the component inside Layers . Default : ` true `
* @defaultValue true
* @default true
* /
* /
layerable? : boolean ;
layerable? : boolean ;
/ * *
/ * *
* Allow component to be selected when clicked . Default : ` true `
* Allow component to be selected when clicked . Default : ` true `
* @defaultValue true
* @default true
* /
* /
selectable? : boolean ;
selectable? : boolean ;
/ * *
/ * *
* Shows a highlight outline when hovering on the element if ` true ` . Default : ` true `
* Shows a highlight outline when hovering on the element if ` true ` . Default : ` true `
* @defaultValue true
* @default true
* /
* /
hoverable? : boolean ;
hoverable? : boolean ;
/ * *
/ * *
@ -117,45 +117,45 @@ export interface ComponentProperties {
void ? : boolean ;
void ? : boolean ;
/ * *
/ * *
* Component default style , eg . ` { width: '100px', height: '100px', 'background-color': 'red' } `
* Component default style , eg . ` { width: '100px', height: '100px', 'background-color': 'red' } `
* @defaultValue { }
* @default { }
* /
* /
style? : any ;
style? : any ;
/ * *
/ * *
* Component related styles , eg . ` .my-component-class { color: red } `
* Component related styles , eg . ` .my-component-class { color: red } `
* @defaultValue ''
* @default ''
* /
* /
styles? : string ;
styles? : string ;
/ * *
/ * *
* Content of the component ( not escaped ) which will be appended before children rendering . Default : ` '' `
* Content of the component ( not escaped ) which will be appended before children rendering . Default : ` '' `
* @defaultValue ''
* @default ''
* /
* /
content? : string ;
content? : string ;
/ * *
/ * *
* Component 's icon, this string will be inserted before the name (in Layers and badge), eg. it can be an HTML string ' < i class = "fa fa-square-o" > < / i > '. Default: `' ' `
* Component 's icon, this string will be inserted before the name (in Layers and badge), eg. it can be an HTML string ' < i class = "fa fa-square-o" > < / i > '. Default: `' ' `
* @defaultValue ''
* @default ''
* /
* /
icon? : string ;
icon? : string ;
/ * *
/ * *
* Component 's javascript. More about it [here](/modules/Components-js.html). Default: `' ' `
* Component 's javascript. More about it [here](/modules/Components-js.html). Default: `' ' `
* @defaultValue ''
* @default ''
* /
* /
script? : string | ( ( . . . params : any [ ] ) = > any ) ;
script? : string | ( ( . . . params : any [ ] ) = > any ) ;
///**
///**
// * You can specify javascript available only in export functions (eg. when you get the HTML).
// * You can specify javascript available only in export functions (eg. when you get the HTML).
//If this property is defined it will overwrite the `script` one (in export functions). Default: `''`
//If this property is defined it will overwrite the `script` one (in export functions). Default: `''`
// * @defaultValue ''
// * @default ''
// */
// */
//script-export?: string | ((...params: any[]) => any);
//script-export?: string | ((...params: any[]) => any);
/ * *
/ * *
* Component 's traits. More about it [here](/modules/Traits.html). Default: `[' id ', ' title ' ] `
* Component 's traits. More about it [here](/modules/Traits.html). Default: `[' id ', ' title ' ] `
* @defaultValue ''
* @default ''
* /
* /
traits? : Traits ;
traits? : Traits ;
/ * *
/ * *
* Indicates an array of properties which will be inhereted by all NEW appended children .
* Indicates an array of properties which will be inhereted by all NEW appended children .
For example if you create a component likes this : ` { removable: false, draggable: false, propagate: ['removable', 'draggable'] } `
For example if you create a component likes this : ` { removable: false, draggable: false, propagate: ['removable', 'draggable'] } `
and append some new component inside , the new added component will get the exact same properties indicated in the ` propagate ` array ( and the ` propagate ` property itself ) . Default : ` [] `
and append some new component inside , the new added component will get the exact same properties indicated in the ` propagate ` array ( and the ` propagate ` property itself ) . Default : ` [] `
* @defaultValue [ ]
* @default [ ]
* /
* /
propagate ? : ( keyof ComponentProperties ) [ ] ;
propagate ? : ( keyof ComponentProperties ) [ ] ;