Vecta

Vecta

The main Vecta namespace.

Classes

Connect
Control
Document
Guide
Layer
Length
Menu
Page
Plugin
Selection
Shape
Stencil
Symbol

Namespaces

.selection

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.

NameTypeDescription
activeDocVecta.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.

NameTypeDescription
activeLayerVecta.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.

NameTypeDescription
activePageVecta.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.

NameTypeAttributesDefaultDescription
namestringoptionalUntitled Stencil

Name of the new stencil.

callbackfunctionoptional

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

NameTypeDescription
optobject

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
        }
    });

.dropSVG(data, pt, silent)

Import single or multiple svg

NameTypeDescription
datastring|string[]

String representation of svg

ptobject

Starting point for importing svg

silentboolean

Drop with message or without message

pt.xnumber

X coordinate of starting point

pt.ynumber

Y coordinate of starting point

.getDoc() Returns: Promise.<string>

Get Vecta SVG document

.getPointOnPath(list, t) Returns: Point

Get a point from the path list with the provided ratio value

NameTypeDescription
listPathList[]

The path list that contained list of segments

tNumber

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 message
See also:

.importFont(url) Returns: *

Import font into the editor

NameTypeDescription
url

URL of the font file

.loadDoc(svg)

Load Vecta SVG document

NameTypeDescription
svgstring

.loadMenu(file)

To load app menu

NameTypeDescription
filestring

The icon file to load

.loadStencil(id, [options]) Returns: Vecta.Stencil

Loads a stencil with the given ID.

NameTypeAttributesDescription
idstring

The ID of the stencil to load.

optionsobjectoptional

Optional parameters to determine how the stencil should be loaded.

NameTypeAttributesDefaultDescription
expandnumberoptionaltrue

To expand or collapse the stencil. True to expand, false to collapse.

namenumberoptional1

To show or hide symbol name. True to show, false to hide.

Returns:

Returns the loaded stencil object

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.

NameTypeAttributesDefaultDescription
mssgstring

The message to be shown

loadingbooleanoptionalfalse

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.

newPageAdded.Vecta

Fired when page has been added to the drawing.

Examples:
Vecta.on('newPageAdded.Vecta', function (e, page) {
    page.drawRect(0, 0, 100, 100); // draw a rectangle after adding a new page
});

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.

Electra Cloud