Page - Vecta API

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.

Name	Type	Description
`node`	SVGElement	The svg element for the page

Properties

.$jQuery

The jQuery wrapped node for the page.

Name	Type	Description
`$`	jQuery	jQuery wrapper for page node.

Methods

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

Clone shapes in a page.

Name	Type	Attributes	Description
`shapes`	Vecta.Shape\|Vecta.Shape[]		Shape or shapes to be cloned
`ignoreOrder`	boolean	`optional`	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.

Name	Type	Description
`silent`	boolean	To hide message on deletion

.drawConnector(list) Returns: Vecta.Shape

Draws a connector on the page.

Name	Type	Description
`list`	PathList[]	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.

Name	Type	Description
`x`	number\|string	X-coordinate
`y`	number\|string	Y-coordinate
`width`	number\|string	Width of shape
`height`	number\|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.

Name	Type	Description
`x`	number\|string	X-coordinate
`y`	number\|string	Y-coordinate
`vertical`	boolean	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.

Name	Type	Description
`link`	string	The href link or base64 to the image
`x`	number\|string	X-coordinate
`y`	number\|string	Y-coordinate
`width`	number\|string	Width of shape
`height`	number\|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.

Name	Type	Description
`list`	PathList[]	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.

Name	Type	Description
`x`	number\|string	X-coordinate
`y`	number\|string	Y-coordinate
`width`	number\|string	Width of shape
`height`	number\|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

Name	Type	Description
`svg`	string	The svg string to draw
`x`	number\|string	X-coordinate
`y`	number\|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.

Name	Type	Attributes	Default	Description
`x`	number\|string			X-coordinate
`y`	number\|string			Y-coordinate
`width`	number\|string			Width of shape
`height`	number\|string			Height of shape
`text`	string	`optional`	`""`	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.

Name	Type	Description
`x`	number	x-coordinate in px
`y`	number	y-coordinate in px
`width`	number	width of area in px
`height`	number	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.

Name	Type	Attributes	Description
`height`	number\|string	`optional`	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.

Name	Type	Description
`x`	number\|string	Coordinate point of x
`y`	number\|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

Name	Type	Attributes	Description
`svg`	string		The svg string to import
`x`	number\|string		X-coordinate
`y`	number\|string		Y-coordinate
`silent`	boolean	`optional`	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

Name	Type	Attributes	Description
`data`	object	`optional`	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.

Name	Type	Attributes	Description
`margin`	object	`optional`	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.

Name	Type	Attributes	Description
`name`	string	`optional`	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.

Name	Type	Attributes	Description
`orient`	number	`optional`	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.

Name Type Attributes Description

Name	Type	Attributes	Description
`type`	string	`optional`	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}

type

string

optional

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.

Name	Type	Attributes	Description
`src`	number	`optional`	The source scale to set, undefined to get.
`tgt`	number	`optional`	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

Name	Type	Attributes	Description
`format`	string	`optional`	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'.

Name	Type	Attributes	Default	Description
`name`	string			The name to find.
`all`	boolean	`optional`	`false`	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.

Name	Type	Attributes	Description
`name`	string	`optional`	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.

Name	Type	Attributes	Description
`unit`	string	`optional`	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.

Name	Type	Attributes	Description
`width`	number\|string	`optional`	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.

Name	Type	Attributes	Description
`percent`	integer\|float\|string		Zoom level (%)
`shape`	object	`optional`	The shape to where the viewport should be centered

Examples:

Vecta.activePage.zoomTo(50);
Vecta.activePage.zoomTo('50%');
Vecta.activePage.zoomTo('50%', shape);