Vecta

Vecta

The main Vecta namespace.

Classes

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

Namespaces

.math
.selection
.valid

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

.compress(src, [stringify]) Returns: Promise

Compress SVG

NameTypeAttributesDescription
srcobject

SVG to be compressed

stringifybooleanoptional

Indication whether to stringify the src

Returns:

Returns promise that resolves the exported SVG in String format

.createPlugin([name], [opts]) Returns: Promise

Creates a new plugin. User is owner by default, except for plugins created in a team drawing where team will be the owner

NameTypeAttributesDefaultDescription
namestringoptionalUntitled Plugin

Name of new plugin

optsobjectoptional

Options for new plugin

NameTypeAttributesDescription
personalbooleanoptional

If true, creates a personal plugin. Else, a plugin is created where the drawing is located, either at home or team

publicbooleanoptional

Determine if plugin is public

Returns:

Returns new plugin id if created

Examples:
Vecta.createPlugin().then(function (plugin){ //create a new plugin named "Untitled Plugin"
     console.log(plugin.name()); // Untitled Plugin
})
See also:

.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
            //Include disable: true inside a content object to disable the input - only for input, textarea, number, dual, checkbox

            {type: 'input' , placeholder: 'Please type something', label: 'Something', value: 'Something' , id: 'input_test', style: 'color: red', disable: true},
            {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', step: 5},
            {type: 'html' , html: '<hr>'},
            {type: 'select' , label: 'Size (String array)' , options: ['XS', 'S', 'M' , 'L'], value: 'M', 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'}
                ],
                value: 'M' //Select this option when dialog opened
            },
            {
                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' , left: true}
        ],
        open: function (evt) {
            // Callback function to execute when opening the dialog
        },
        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
        }
    });

.download(name, content)

Shorthand method to initiate download.

NameTypeDescription
namestring

Name of file to download

contentBlob|string

Content of file to download. If string is given, file type will default to .txt

.dropSVG(data, [pt], [silent])

Import single or multiple svg.

NameTypeAttributesDescription
datastring|string[]

String representation of svg

ptPointoptional

Starting point for importing svg

NameTypeDescription
xnumber

X coordinate of starting point

ynumber

Y coordinate of starting point

silentbooleanoptional

Drop with message or without message.

.exportSVG([page]) Returns: Promise

Export a page as SVG

If page is undefined, it will export based on current opened page

NameTypeAttributesDefaultDescription
pageVecta.pageoptionalVecta.activePage

Page to be exported as SVG

Returns:

Returns promise that resolves the exported SVG in String format

.getCustomFonts() Returns: Promise.<*>

Get all custom fonts

.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([unlock])

Hides the message shown by Vecta.showMessage.

If message is not shown, there will be no effect.

NameTypeAttributesDefaultDescription
unlockbooleanoptionalfalse

Unlock and hide the message

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: Promise

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 Promise that resolves loaded stencil object

Examples:
//load the stencil with id === xxx onto the editor
Vecta.loadStencil('xxx');
See also:

.notify(mssg)

Display a notify message that will fade on the editor screen.

NameTypeDescription
mssgstring

The message to display.

.off(events, [selector]) Returns: object

Function to turn off event listeners.

NameTypeAttributesDescription
eventsstring

One or more events to turn off.

selectorstringoptional

A selector which should match the one when attaching event handlers.

Returns:

Vecta global object

Examples:
Vecta.off('selectionModified.Vecta', function () {});

.on(events, handler) Returns: object

Function to listen to events.

NameTypeDescription
eventsstring

One or more events to listen to.

handlerfunction

The event handler.

Returns:

Vecta global object

Examples:
Vecta.on('selectionModified.Vecta', function () {});

.once(events, handler) Returns: object

Function to listen to events once only, after which the event listener will be removed.

NameTypeDescription
eventsstring

One or more events to listen to.

handlerfunction

The event handler.

Returns:

Vecta global object

Examples:
Vecta.once('selectionModified.Vecta', function () {});

.parseSVG(svg) Returns: jQuery

Parse string to SVG

NameTypeDescription
svgstring

String to be parsed into SVG

Returns:

Returns $ jQuery wrapper for parsed SVG.

.serialize(node, [keep_namespace]) Returns: string

Serialize node to string and remove some extra attributes.

NameTypeAttributesDescription
nodenode

Node object

keep_namespacebooleanoptional

If true the namespace will be kept and if false or undefined will remove it

Returns:

Returns serialized node.

.showMessage(mssg, [loading], [lock])

Show centered message in the application, suitable to indicate operations being performed.

NameTypeAttributesDefaultDescription
mssgstring

The message to be shown

loadingbooleanoptionalfalse

Show loading animation

lockbooleanoptionalfalse

Lock the message to prevent other codes to hide it, until we unlock it with Vecta.hideMessage(true)

Examples:
//Show message with loading animation
Vecta.showMessage('Message', true);
See also:

.sluggify(str) Returns: string

Sluggify string. Replace special character with dash (-) character.

NameTypeDescription
strstring

String to be sluggified

Returns:

Returns sluggified string

.trigger(event, [data]) Returns: object

Function to fire events, equivalent to v.$win.trigger, for vecta events only and not for js events.

Namespace is encouraged for all events, so these events can be removed easily.

NameTypeAttributesDescription
eventstring

The event to trigger.

dataobjectoptional

The data to pass to the event listener.

Returns:

Vecta global object

Examples:
Vecta.trigger('_UILoaded.Vecta');

Events

documentSaved.Vecta

Fired when changes in drawing is saved.

Examples:
//Show message whenever the drawing's changes are saved
Vecta.on('documentSaved.Vecta', function () {
     $.notify('Drawing saved');
});

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.

Examples:
//Attach listener to get the old page index
Vecta.on('pageIndexChanged.Vecta', function (e, old_indexes) {
    console.log(old_indexes); // { page_id_1: { old: number }, page_id_2: { old: number } }
});

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.

vecta.io Early Access