The main Vecta namespace.
Classes
Namespaces
Properties
.activeDocVecta.Document
When a drawing is opened in a Vecta application, the drawing essentially becomes the active document.
To modify the current drawing, use the exposed methods and properties for Vecta.activeDoc.
| Name | Type | Description |
|---|---|---|
activeDoc | Vecta.Document | The current active document. |
Examples:
//Get the active document and return the id
var id = Vecta.activeDoc.id();
//Change the title for the current drawing
Vecta.activeDoc.title('My new title');See also:
.activeLayerVecta.Layer
Each page can have multiple layers, but only a single layer can be the current active layer, where all shapes (except those that already have a layer) will be placed on the current active layer.
To obtain a reference to the active layer, use Vecta.activeLayer.
Once a reference has been obtained, you can use the exposed Vecta.Layer methods to modify the layer.
| Name | Type | Description |
|---|---|---|
activeLayer | Vecta.Layer | The current active layer. |
Examples:
//Get the current active layer's name
var layer_name = Vecta.activeLayer.name();See also:
.activePageVecta.Page
While each Vecta.Document can have one or more pages, only a single page can be active at any single time.
To get a reference to the current active page, use Vecta.activePage.
Once a reference has been obtained, you can use the Vecta.Page methods to modify the current active page.
| Name | Type | Description |
|---|---|---|
activePage | Vecta.Page | The current active page. |
Examples:
//Get the number of shapes on the active page
var count = Vecta.activePage.shapeCount();See also:
Methods
.createStencil([name], [callback])
Creates a new stencil. By default, the user is the owner, except for stencils created in a team drawing where the team will be the owner.
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
name | string | optional | Untitled Stencil | Name of the new stencil. |
callback | function | optional | Optional callback function to execute upon completion of create stencil. |
Examples:
//create a new stencil named "Untitled Stencil"
Vecta.createStencil();See also:
.dialog(opt)
Display dialog easily by just passing parameters
| Name | Type | Description |
|---|---|---|
opt | object | Options to build the dialog structure |
Examples:
Vecta.dialog({
title : 'Vecta Dialog Test', // The dialog title
content: [
//All content type can be styled by simply passing a style attribute
//Include right_input: true inside a content object to put label & input side by side - only for input, textarea, number, select, radio
{type : 'input' , placeholder: 'Please type something', label: 'Something', value : 'Something' , id : 'input_test', style : 'color:red'},
{type : 'textarea' , placeholder: 'Textarea here...', label: 'Textarea', value : 'Textarea content' , id : 'textarea_test', right_input : true},
{
type : 'dual' , //Will put 2 text input side by side
inputs :
[
{label : 'First name', placeholder : 'First', value : 'John'},
{label : 'Last name', placeholder : 'Last', value : 'Doe', id: 'last_id'} //id is optional
]
},
{type : 'number', placeholder: 'Please type a number', label: 'Number', value : 'hai', id : 'number_test'},
{type : 'html' , html : '<hr>'},
{type : 'select' , label : 'Size (String array)' , options: ['XS', 'S', 'M' , 'L'], id : 'select_test'}, //Value will be same as the options label
{type : 'select' , label : 'Size (Object array)',
id : 'select_label',
options: [
{label : 'XSmall', value : 'XS'}, // Put custom values for each of the select
{label : 'Small', value : 'S'},
{label : 'Medium', value : 'M'},
{label : 'Large', value : 'L'}
],
},
{
type : 'checkbox',
boxes: [
{label: 'Check here' , id : 'checkbox_test'},
{label: 'Check again' , id : 'checkbox_second' , checked : true} //Set to checked
]
},
{
type : 'radio' ,
label: 'Select color',
group: 'color_radio', //Group the radios so you can have multiple rows with the same input
radios: [
{label : 'Red', value : 'red'},
{label : 'Blue', value : 'blue'}
]
},
{
type : 'radio',
group: 'color_radio',
radios: [
{label : 'Black', value : 'black'},
{label : 'Grey', value : 'grey'}
]
}
],
// Optional, only pass to customise buttons
buttons : [ { cancel : true , label : 'Close' } , { default : true , label: 'Submit' , style : 'background-color:red' }],
close : function(evt) {
// Callback function to execute when dialog is closed or cancelled
},
click : function(evt) {
// Callback function when any elements are clicked in the dialog
// evt.$dialog: the currently active dialog
// evt.$target the target being clicked on
},
valid : function($target) {
// Callback function for inputs used for validation, where the $target is the input being validated
}
});.getPointOnPath(list, t) Returns: Point
Get a point from the path list with the provided ratio value
| Name | Type | Description |
|---|---|---|
list | PathList[] | The path list that contained list of segments |
t | Number | The ratio of the point on the path list |
Returns:
Return the coordinate of the point
.hideMessage()
Hides the message shown by Vecta.showMessage.
If message is not shown, there will be no effect.
Examples:
Vecta.hideMessage(); //Hide the messageSee also:
.loadMenu(file)
To load app menu
| Name | Type | Description |
|---|---|---|
file | string | The icon file to load |
.loadStencil(id, [options], [callback])
Loads a stencil with the given ID.
| Name | Type | Attributes | Description | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
id | string | The ID of the stencil to load. | ||||||||||||||||
options | object | optional | Optional parameters to determine how the stencil should be loaded.
| |||||||||||||||
callback | function | optional | Optional callback function to execute upon completion of loading stencil. |
Examples:
//load the stencil with id === xxx onto the editor
Vecta.loadStencil('xxx');See also:
.showMessage(mssg, [loading])
Show centered message in the application, suitable to indicate operations being performed.
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
mssg | string | The message to be shown | ||
loading | boolean | optional | false | Show loading animation |
Examples:
//Show message with loading animation
Vecta.showMessage('Message', true);See also:
Events
jsonChanged.Vecta
Fired when json on a shape has been modified.
pageIndexChanged.Vecta
Fired when the index of pages is changed.
saved.Vecta
Fired when changes in drawing is saved.
selectionModified.Vecta
Indicates that the selection has changed through user interface.
Examples:
//Attach listener to selection modified and log the number of shapes
Vecta.on('selectionModified.Vecta', function () {
var shapes = Vecta.selection.shapes(),
moves = shapes.map(function(shape) { return shape.moveU(); }); // shapes coordinates
shapes.sort(function(a, b) {
a.text().localeCompare(b.text()); //sort the shapes based on their text
}).forEach(function(shape, index) {
shape.move(moves[index].x, moves[index].y); //rearrange the shapes
});
});shapesAdded.Vecta
Fired when shapes has been added to the drawing.
shapesDeleted.Vecta
Fired when shapes has been deleted on the drawing.
shapesMoved.Vecta
Fired when shapes has been moved on the drawing.
textChanged.Vecta
Fired when text on a shape has been modified.