Page

Vecta.Page

new Vecta.Page(node)

Vecta page object.

In a Vecta application, each Vecta.Document can have multiple pages, where each page is represented by a Vecta.Page object.

NameTypeDescription
nodeSVGElement

The svg element for the page

Properties

.$jQuery

The jQuery wrapped node for the page.

NameTypeDescription
$jQuery

jQuery wrapper for page node.

Methods

.clone(shapes, [ignoreOrder]) Returns: Vecta.Shape[]

Clone shapes in a page.

NameTypeAttributesDescription
shapesVecta.Shape|Vecta.Shape[]

Shape or shapes to be cloned

ignoreOrderbooleanoptional

If not given or set to false, returns the clones based on DOM ordering

Returns:

Returns an array of cloned Vecta.Shape, or empty array if shapes is undefined.

Examples:
var shape = Vecta.activePage.drawRect(0, 0, 50, 50), //Drawing a shape
    clone = Vecta.activePage.clone(shape); //Clone the drawn shape

console.log(clone); //[Vecta.Shape]

.close()

Close a loaded page.

Closing differs from deleting, as closing is just unloading a page.

If invoked on current active page, an exception is thrown.

Examples:
var prev_id = Vecta.activePage.id(),
    page = Vecta.activeDoc.insertPage();

page.close(); // Current active page could not be removed.

Vecta.activeDoc.loadPage(prev_id).then(function () {
     // page is removed from DOM
     page.close();
});

.delete(silent)

Delete a page.

NameTypeDescription
silentboolean

To hide message on deletion

.drawConnector(list) Returns: Vecta.Shape

Draws a connector on the page.

NameTypeDescription
listPathList[]

An array containing path segment list.

Examples:
//draw a path and close it
Vecta.activePage.drawConnector([
  {type: 'M', x: 0, y: 0},
  {type: 'L', x: 0, y: 10},
  {type: 'L', x: 10, y: 10}
]); // draw a L Connector

.drawEllipse(x, y, width, height) Returns: Vecta.Shape

Draws an ellipse on the page.

All parameters accepts numbers or valid string units, eg: 10in, 10mm, 10px, 10cm.

NameTypeDescription
xnumber|string

X-coordinate

ynumber|string

Y-coordinate

widthnumber|string

Width of shape

heightnumber|string

Height of shape

Examples:
//draws an ellipse at 0,0 with width = 100 and height = 100
Vecta.activePage.drawEllipse(0, 0, 100, 100);

//draws an ellipse at 0in,0in with width = 10in and height = 10in
Vecta.activePage.drawEllipse('0in', '0in', '10in', '10in');

.drawGuide(x, y, vertical) Returns: Vecta.Guide

Draw a guide on the page. Length parameters accepts numbers or valid string units, eg: 10in, 10mm, 10px, 10cm.

NameTypeDescription
xnumber|string

X-coordinate

ynumber|string

Y-coordinate

verticalboolean

True to draw a vertical guide and false to draw a horizontal guide

Examples:
Vecta.activePage.drawGuide(15, 0, true);

.drawImage(link, x, y, width, height) Returns: Vecta.Shape

Draws an image on the page. Length parameters accepts numbers or valid string units, eg: 10in, 10mm, 10px, 10cm.

NameTypeDescription
linkstring

The href link or base64 to the image

xnumber|string

X-coordinate

ynumber|string

Y-coordinate

widthnumber|string

Width of shape

heightnumber|string

Height of shape

Examples:
Vecta.activePage.drawImage('https://images.vecta.io/sample_image.png', 0, 0, 300, 150);

.drawPath(list) Returns: Vecta.Shape

Draws a path on the page.

NameTypeDescription
listPathList[]

An array containing path segment list.

Examples:
//draw a path and close it
Vecta.activePage.drawPath([
  {type: 'M', x: 0, y: 0},
  {type: 'L', x: 10, y: 10},
  {type: 'L', x: 10, y: 0},
  {type: 'Z'}
]);

.drawRect(x, y, width, height) Returns: Vecta.Shape

Draws a rectangle on the page.

All parameters accepts numbers or valid string units, eg: 10in, 10mm, 10px, 10cm.

NameTypeDescription
xnumber|string

X-coordinate

ynumber|string

Y-coordinate

widthnumber|string

Width of shape

heightnumber|string

Height of shape

Examples:
//draws a rectangle at 0,0 with width = 100 and height = 100
Vecta.activePage.drawRect(0, 0, 100, 100);

//draws a rectangle at 0in,0in with width = 10in and height = 10in
Vecta.activePage.drawRect('0in', '0in', '10in', '10in');

.drawSVG(svg, x, y) Returns: Vecta.Shape

Draw a svg onto a page. Length parameters accepts numbers or valid string units, eg: 10in, 10mm, 10px, 10cm

NameTypeDescription
svgstring

The svg string to draw

xnumber|string

X-coordinate

ynumber|string

Y-coordinate

Examples:
Vecta.activePage.drawSVG('<svg><rect x="0" y="0" width="10" height="10" /></svg>', 0, 0);

.drawText(x, y, width, height, [text]) Returns: Vecta.Shape

Draws a text block on the page.

Length parameters accepts numbers or valid string units, eg: 10in, 10mm, 10px, 10cm.

NameTypeAttributesDefaultDescription
xnumber|string

X-coordinate

ynumber|string

Y-coordinate

widthnumber|string

Width of shape

heightnumber|string

Height of shape

textstringoptional""

The text to be inserted into the text block or empty string if not supplied.

Examples:
Vecta.activePage.drawText(0, 0, 100, 100, 'Sample Text');

.getEnclosedShapes(x, y, width, height) Returns: Vecta.Shape[]

Return an array of shapes for a given area on the page.

NameTypeDescription
xnumber

x-coordinate in px

ynumber

y-coordinate in px

widthnumber

width of area in px

heightnumber

height of area in px

Returns:

Returns an array of shapes in an area or zero length array if no shapes are found.

.guides() Returns: Vecta.Guide[]

Get all guides in a page. Read only.

.height([height]) Returns: number|string|Vecta.Page

Get or set page height.

NameTypeAttributesDescription
heightnumber|stringoptional

The height to set, undefined if get. Accepts numbers or valid length strings, eg: 10in, 10mm, 10px, 10cm.

Returns:

Returns number or string for get, or Vecta.Page if set.

Examples:
Vecta.activePage.height('8in'); //set page height to 8 inches

.heightU() Returns: string

Get height of page in multiple formats. Read only.

Returns:

Returns the height.

.hitTest(x, y) Returns: Vecta.Shape|null

Get the shape at a given coordinate.

NameTypeDescription
xnumber|string

Coordinate point of x

ynumber|string

Coordinate point of y

Returns:

Returns Vecta.Shape if found, else return null

.id() Returns: string

Get the page id.

Returns:

Returns the page ID.

.importSVG(svg, x, y, [silent]) Returns: promise

Import svg to a page

NameTypeAttributesDescription
svgstring

The svg string to import

xnumber|string

X-coordinate

ynumber|string

Y-coordinate

silentbooleanoptional

If true, the imported SVG will not be appended to the page

Returns:

Returns promise that resolves the imported svg

Examples:
Vecta.activePage.importSVG('<svg><rect x="0" y="0" width="10" height="10" /></svg>', 0, 0, false); // Import a rectangle

.index() Returns: number

Obtain the index of the page, read only.

Returns:

Returns page index.

Examples:
console.log(Vecta.activePage.index()); //0

.json([data]) Returns: object

Get or set custom data for page

NameTypeAttributesDescription
dataobjectoptional

if not provided or undefined, returns the custom data, otherwise, sets the custom data

Returns:

Returns custom data

Examples:
Vecta.activePage.json({a: 1, b: 2});
console.log(Vecta.activePage.json()); // {a: 1, b: 2}

.margin([margin]) Returns: object|Vecta.Page

Get or set page margin.

NameTypeAttributesDescription
marginobjectoptional

The source margin to set.

Returns:

Returns the margin when get or Vecta.Page when set.

Examples:
//Set top and bottom margin as 5px, left and right margin as 10px
Vecta.activePage.margin({ top:'5px', bottom:'5px', left: '10px', right: '10px'});
console.log(Vecta.activePage.margin()); // { top:'5px', bottom:'5px', left: '10px', right: '10px'}

.name([name]) Returns: string|Vecta.Page

Get or sets the page name.

NameTypeAttributesDescription
namestringoptional

If provided, set the name of page, otherwise returns the page name

Returns:

Returns page name, or context for chaining.

.orientation([orient]) Returns: number|Vecta.Page

Get or set the paper orientation.

NameTypeAttributesDescription
orientnumberoptional

The orientation to get or set. 0 === LANDSCAPE, 1 === PORTRAIT

Returns:

Returns 0 for landscape, 1 for portrait, or Vecta.Page if set.

Examples:
Vecta.activePage.orientation(); //get paper orientation
Vecta.activePage.orientation(1); //set to portrait mode

.paperType([type]) Returns: string|Vecta.Page

Get or set paper type for page. If page size is set using width or height methods, paper type will return custom.

By default, Vecta will detect your geolocation and create default paper sizing automatically. For example, in North America, Vecta will use LETTER as default while using A4 in other locations when creating a new page.

NameTypeAttributesDescription
typestringoptional

The paper type to set, or undefined to get. Valid paper sizes includes the following:

  • A5: { width: '210mm', height: '148mm' }
  • A4: { width: '297mm', height: '210mm' }
  • A3: { width: '420mm', height: '297mm' }
  • A2: { width: '594mm', height: '420mm' }
  • A1: { width: '841mm', height: '594mm' }
  • A0: { width: '1189mm', height: '841mm' }
  • LETTER: { width: '11in', height: '8.5in' }
  • FOLIO: { width: '13in', height: '8.5in' }
  • LEGAL: { width: '14in', height: '8.5in' }
  • LEDGER: { width: '17in', height: '11in' }
  • FACEBOOK_1200X630 { width: 1200, height: 630}
  • BANNER_180X150: { width: 180, height: 150}
  • BANNER_200X200: { width: 200, height: 200}
  • BANNER_250X250: { width: 250, height: 250}
  • BANNER_300X250: { width: 300, height: 250}
  • BANNER_336X280: { width: 336, height: 280}
  • BANNER_120X600: { width: 120, height: 600}
  • BANNER_160X600: { width: 160, height: 600}
  • BANNER_300X1050: { width: 300, height: 1050}
  • BANNER_120X240: { width: 120, height: 240}
  • BANNER_240X400: { width: 240, height: 400}
  • BANNER_300X600: { width: 300, height: 600}
  • BANNER_468X60: { width: 468, height: 60}
  • BANNER_728X90: { width: 728, height: 90}
  • BANNER_970X90: { width: 970, height: 90}
Examples:
Vecta.activePage.paperType(); //returns A4, custom or other paper sizes depending on settings
Vecta.activePage.paperType('A4'); //set the paper type to A4.

.scale([src], [tgt]) Returns: number|Vecta.Page

Get or set page scale.

NameTypeAttributesDescription
srcnumberoptional

The source scale to set, undefined to get.

tgtnumberoptional

The target scale to set, undefined to get.

Returns:

Returns the scale when get or Vecta.Page when set.

Examples:
Vecta.activePage.scale('1in', '10in'); //Set scale 1 inch equivalent to 10 inch
console.log(Vecta.activePage.scale()); //10

.scaleU([format]) Returns: string

Get page scale in standard format

NameTypeAttributesDescription
formatstringoptional

separator of the scales

Returns:

Returns the scale in X:Y format by default is param is not given

Examples:
console.log(Vecta.activePage.scale()); // 1:1
console.log(Vecta.activePage.scale('-')); // 1-1

.shape(name, [all]) Returns: null|Vecta.Shape|Vecta.Shape[]

Get a shape with a given name, or get all shapes starting with given name, by ignoring post fixes.

Names in Vecta must be unique, and therefore, if there is a duplicate, the name will be post fixed with an id. For example, 'A' will be post fixed to 'A.XXXXXXXX'.

NameTypeAttributesDefaultDescription
namestring

The name to find.

allbooleanoptionalfalse

False to get a single shape, or true to get all shapes.

Returns:

Returns null if the shape cannot be found, a single Vecta.Shape if all is false, or an array of Vecta.Shape if all is true.

If nothing is found with all === true, a zero length array will be returned.

Examples:
Vecta.activePage.shape('A'); //returns a single shape with name = 'A'
Vecta.activePage.shapes('A'); //returns all shapes starting with name = 'A', including 'A.123' but not 'AA'.

.shapeCount() Returns: number

Get the number of shapes on the page. The count includes only shapes that is immediate children of a page, and does not include child shapes (shapes that are inside other shapes).

.shapes([name]) Returns: *|Array

Get direct child shapes on the page.

NameTypeAttributesDescription
namestringoptional

Returns direct child shapes if name is undefined, or child shapes with name, if supplied.

Returns:

Returns direct child shapes in an array of Vecta.Shape objects.

If none is found, a zero length array is returned.

Examples:
Vecta.activePage.shapes(); //returns all immediate child shapes on the page.

.unit([unit]) Returns: string|Vecta.Page

Get or set the page measurement unit.

NameTypeAttributesDescription
unitstringoptional

The page measurement unit, leave undefined to get page unit.

Returns:

Returns current page measurement unit (px, in, mm or cm) for get, or Vecta.Page if set.

Examples:
Vecta.activePage.unit(); //get page unit
Vecta.activePage.unit('m'); //set page unit to Meter

.width([width]) Returns: number|string|Vecta.Page

Get or set page width.

NameTypeAttributesDescription
widthnumber|stringoptional

The width to set, undefined if get. Accepts numbers or valid length strings, eg: 10in, 10mm, 10px, 10cm.

Returns:

Returns number or string for get, or Vecta.Page if set.

Examples:
Vecta.activePage.width('11in'); //set the page width to 11 inches

.widthU() Returns: string

Get width of page in multiple formats. Read only.

Returns:

Returns the width.

.zoomTo(percent, [shape]) Returns: Vecta.Page

Set zoom level for the page and position the center of viewport to the given shape, if supplied.

The zoom level will be rounded to the nearest level permissible by Vecta, as listed at the bottom right of your editor.

NameTypeAttributesDescription
percentinteger|float|string

Zoom level (%)

shapeobjectoptional

The shape to where the viewport should be centered

Examples:
Vecta.activePage.zoomTo(50);
Vecta.activePage.zoomTo('50%');
Vecta.activePage.zoomTo('50%', shape);
vecta.io Early Access