Item

Defined in: core/items/item.ts:84

An Item is rendered from a #core/Source Source and represents an object that is used as an item on the stage. Multiple items may be linked to a single source and any changes made to the source would affect all linked items.

Implements: #core/IItemLayout Core/IItemLayout

Basic Usage

var xjs = require('xjs');
var Scene = xjs.Scene.getById(1);

Scene.getItems().then(function(items) {
  if (items.length === 0) return;

  // There's a valid item, let's use that
  var item = items[items.length - 1];
  return item.setKeepAspectRatio(true);
}).then(function(item) {
  // Do something else here
});

All methods marked as Chainable resolve with the original Item instance. This allows you to perform sequential operations correctly:

var xjs = require('xjs');
var Source = xjs.Source;

// an item that sets its own properties on load
xjs.ready()
   .then(Source.getCurrentSource)
   .then(function(source) {
   return source.getItemList()
 }).then(function(items) {
   return items[0].setEnhancedResizeEnabled(true)
 }).then(function(items) {
   return items[0].setPositionLocked(true)
 }).then(function(items) {
   //set more properties here
 })

Extends

Source

Extended by

Implements

IItemLayout
ISource

Constructors

Constructor

new Item(props?): Item

Defined in: core/items/item.ts:88

Parameters

props?

Returns

Item

Overrides

Source.constructor

Properties

bringForward

bringForward: () => Promise<Item>

Defined in: core/items/item.ts:617

See: #core/IItemLayout#bringForward bringForward

Returns

Promise<Item>

Implementation of

IItemLayout.bringForward

bringToFront

bringToFront: () => Promise<Item>

Defined in: core/items/item.ts:622

See: #core/IItemLayout#bringToFront bringToFront

Returns

Promise<Item>

Implementation of

IItemLayout.bringToFront

getCanvasRotate

getCanvasRotate: () => Promise<number>

Defined in: core/items/item.ts:642

See: #core/IItemLayout#getCanvasRotate getCanvasRotate

Returns

Promise<number>

Implementation of

IItemLayout.getCanvasRotate

getCropping

getCropping: () => Promise<Object>

Defined in: core/items/item.ts:647

See: #core/IItemLayout#getCropping getCropping

Returns

Promise<Object>

Implementation of

IItemLayout.getCropping

getCustomName

getCustomName: () => Promise<string>

Defined in: core/items/item.ts:758

See: #core/Source#getCustomName getCustomName

Returns

Promise<string>

Implementation of

ISource.getCustomName

Overrides

Source.getCustomName

getEnhancedRotate

getEnhancedRotate: () => Promise<number>

Defined in: core/items/item.ts:652

See: #core/IItemLayout#getEnhancedRotate getEnhancedRotate

Returns

Promise<number>

Implementation of

IItemLayout.getEnhancedRotate

getId

getId: () => Promise<string>

Defined in: core/items/item.ts:267

return: Promise

Get the ID of the Item

Usage

item.getId().then(function(id) {
  // The rest of your code here
});

Returns

Promise<string>

Implementation of

ISource.getId

Overrides

Source.getId

getItemList

getItemList: () => Promise<Item[]>

Defined in: core/items/item.ts:513

See: #core/Source#getItemList getItemList

Returns

Promise<Item[]>

Implementation of

ISource.getItemList

Overrides

Source.getItemList

getKeepLoaded

getKeepLoaded: () => Promise<boolean>

Defined in: core/items/item.ts:773

See: #core/Source#getKeepLoaded getKeepLoaded

Returns

Promise<boolean>

Implementation of

ISource.getKeepLoaded

Overrides

Source.getKeepLoaded

getName

getName: () => Promise<string>

Defined in: core/items/item.ts:748

See: #core/Source#getName getName

Returns

Promise<string>

Implementation of

ISource.getName

Overrides

Source.getName

getPosition

getPosition: () => Promise<Rectangle>

Defined in: core/items/item.ts:657

See: #core/IItemLayout#getPosition getPosition

Returns

Promise<Rectangle>

Implementation of

IItemLayout.getPosition

getRotateX

getRotateX: () => Promise<number>

Defined in: core/items/item.ts:667

See: #core/IItemLayout#getRotateX getRotateX

Returns

Promise<number>

Implementation of

IItemLayout.getRotateX

getRotateY

getRotateY: () => Promise<number>

Defined in: core/items/item.ts:662

See: #core/IItemLayout#getRotateY getRotateY

Returns

Promise<number>

Implementation of

IItemLayout.getRotateY

getRotateZ

getRotateZ: () => Promise<number>

Defined in: core/items/item.ts:672

See: #core/IItemLayout#getRotateZ getRotateZ

Returns

Promise<number>

Implementation of

IItemLayout.getRotateZ

getType

getType: () => Promise<ItemTypes>

Defined in: core/items/item.ts:786

See: #core/Source#getType getType

Returns

Promise<ItemTypes>

Implementation of

ISource.getType

Overrides

Source.getType

getValue

getValue: () => Promise<string | XML>

Defined in: core/items/item.ts:763

See: #core/Source#getValue getValue

Returns

Promise<string | XML>

Implementation of

ISource.getValue

Overrides

Source.getValue

isEnhancedResizeEnabled

isEnhancedResizeEnabled: () => Promise<boolean>

Defined in: core/items/item.ts:637

See: #core/IItemLayout#isEnhancedResizeEnabled isEnhancedResizeEnabled

Returns

Promise<boolean>

Implementation of

IItemLayout.isEnhancedResizeEnabled

isKeepAspectRatio

isKeepAspectRatio: () => Promise<boolean>

Defined in: core/items/item.ts:627

See: #core/IItemLayout#isKeepAspectRatio isKeepAspectRatio

Returns

Promise<boolean>

Implementation of

IItemLayout.isKeepAspectRatio

isPositionLocked

isPositionLocked: () => Promise<boolean>

Defined in: core/items/item.ts:632

See: #core/IItemLayout#isPositionLocked isPositionLocked

Returns

Promise<boolean>

Implementation of

IItemLayout.isPositionLocked

refresh

refresh: () => Promise<Source>

Defined in: core/items/item.ts:783

See: #core/Source#refresh refresh

Returns

Promise<Source>

Implementation of

ISource.refresh

Overrides

Source.refresh

sendBackward

sendBackward: () => Promise<Item>

Defined in: core/items/item.ts:677

See: #core/IItemLayout#sendBackward sendBackward

Returns

Promise<Item>

Implementation of

IItemLayout.sendBackward

sendToBack

sendToBack: () => Promise<Item>

Defined in: core/items/item.ts:682

See: #core/IItemLayout#sendToBack sendToBack

Returns

Promise<Item>

Implementation of

IItemLayout.sendToBack

setCanvasRotate

setCanvasRotate: (value) => Promise<Item>

Defined in: core/items/item.ts:687

See: #core/IItemLayout#setCanvasRotate setCanvasRotate

Parameters

value

number

Returns

Promise<Item>

Implementation of

IItemLayout.setCanvasRotate

setCropping

setCropping: (value) => Promise<Item>

Defined in: core/items/item.ts:692

See: #core/IItemLayout#setCropping setCropping

Parameters

value

Object

Returns

Promise<Item>

Implementation of

IItemLayout.setCropping

setCroppingEnhanced

setCroppingEnhanced: (value) => Promise<Item>

Defined in: core/items/item.ts:697

See: #core/IItemLayout#setCroppingEnhanced setCroppingEnhanced

Parameters

value

Object

Returns

Promise<Item>

Implementation of

IItemLayout.setCroppingEnhanced

setCustomName

setCustomName: () => Promise<Item>

Defined in: core/items/item.ts:753

See: #core/Source#setCustomName setCustomName

Returns

Promise<Item>

Implementation of

ISource.setCustomName

Overrides

Source.setCustomName

setEnhancedResizeEnabled

setEnhancedResizeEnabled: (value) => Promise<Item>

Defined in: core/items/item.ts:717

See: #core/IItemLayout#setEnhancedResizeEnabled setEnhancedResizeEnabled

Parameters

value

boolean

Returns

Promise<Item>

Implementation of

IItemLayout.setEnhancedResizeEnabled

setEnhancedRotate

setEnhancedRotate: (value) => Promise<Item>

Defined in: core/items/item.ts:702

See: #core/IItemLayout#setEnhancedRotate setEnhancedRotate

Parameters

value

number

Returns

Promise<Item>

Implementation of

IItemLayout.setEnhancedRotate

setKeepAspectRatio

setKeepAspectRatio: (value) => Promise<Item>

Defined in: core/items/item.ts:707

See: #core/IItemLayout#setKeepAspectRatio setKeepAspectRatio

Parameters

value

boolean

Returns

Promise<Item>

Implementation of

IItemLayout.setKeepAspectRatio

setKeepLoaded

setKeepLoaded: (value) => Promise<Item>

Defined in: core/items/item.ts:778

See: #core/Source#setKeepLoaded setKeepLoaded

Parameters

value

boolean

Returns

Promise<Item>

Implementation of

ISource.setKeepLoaded

Overrides

Source.setKeepLoaded

setName

setName: (value) => Promise<Item>

Defined in: core/items/item.ts:743

See: #core/Source#setName setName

Parameters

value

string

Returns

Promise<Item>

Implementation of

ISource.setName

Overrides

Source.setName

setPosition

setPosition: (value) => Promise<Item>

Defined in: core/items/item.ts:722

See: #core/IItemLayout#setPosition setPosition

Parameters

value

Rectangle

Returns

Promise<Item>

Implementation of

IItemLayout.setPosition

setPositionLocked

setPositionLocked: (value) => Promise<Item>

Defined in: core/items/item.ts:712

See: #core/IItemLayout#setPositionLocked setPositionLocked

Parameters

value

boolean

Returns

Promise<Item>

Implementation of

IItemLayout.setPositionLocked

setRotateX

setRotateX: (value) => Promise<Item>

Defined in: core/items/item.ts:732

See: #core/IItemLayout#setRotateX setRotateX

Parameters

value

number

Returns

Promise<Item>

Implementation of

IItemLayout.setRotateX

setRotateY

setRotateY: (value) => Promise<Item>

Defined in: core/items/item.ts:727

See: #core/IItemLayout#setRotateY setRotateY

Parameters

value

number

Returns

Promise<Item>

Implementation of

IItemLayout.setRotateY

setRotateZ

setRotateZ: (value) => Promise<Item>

Defined in: core/items/item.ts:737

See: #core/IItemLayout#setRotateZ setRotateZ

Parameters

value

number

Returns

Promise<Item>

Implementation of

IItemLayout.setRotateZ

setValue

setValue: (value) => Promise<Item>

Defined in: core/items/item.ts:768

See: #core/Source#setValue setValue

Parameters

value

string | XML

Returns

Promise<Item>

Implementation of

ISource.setValue

Overrides

Source.setValue

_emitter

static _emitter: EventEmitter

Defined in: core/items/item.ts:85

_subscriptions

static _subscriptions: any[] = []

Defined in: core/items/item.ts:86

Methods

duplicate()

duplicate(options?): Promise<Item>

Defined in: core/items/item.ts:416

param: (options: {linked?:, scene?: })

return: Promise<Item>

Duplicate an item into the current scene or to a specified scene as Linked or Unlinked.

Linked items would generally have a single source, and any changes in the property of an item would be applied to all linked items.

Chainable

Usage

// item pertains to an actual Item instance
// Sample 1
item.duplicate() // duplicate selected item to the current scene as unlinked

Duplicate the selected item to a specific scene and set it to be linked to a single source with the original item.

// Sample 2
var toScene = xjs.Scene.getById(2)
item.duplicate({linked:true, scene:toScene})

Parameters

options?

linked?

boolean

scene?

number | Scene

Returns

Promise<Item>

getFPS()

getFPS(): Promise<number>

Defined in: core/items/item.ts:282

return: Promise

Get the frames rendered per second of an item

Usage

item.getFPS().then(function(fps) {
  // The rest of your code here
});

Returns

Promise<number>

getParentItem()

getParentItem(): Promise<Item>

Defined in: core/items/item.ts:587

return: Promise

Get the GroupItem that contains this item. This rejects if item is not a child item or non-existent

Usage

item.getParentItem()
.then(function(parentItem) {
  console.log(parentItem);
});

Returns

Promise<Item>

getSceneId()

getSceneId(): Promise<string | number>

Defined in: core/items/item.ts:351

return: Promise<number|string>

Get (1-indexed) Scene ID where the source is loaded

Usage

source.getSceneId().then(function(id) {
  // The rest of your code here
});

Returns

Promise<string | number>

getSource()

getSource(): Promise<Source>

Defined in: core/items/item.ts:530

return: Promise

Gets the Source of an item, linked items would only have 1 source.

Chainable

Usage

item.getSource().then(function(source) {
  //Manipulate source here
  source.setName('New Name')
})

Returns

Promise<Source>

getView()

getView(): Promise<ViewTypes>

Defined in: core/items/item.ts:320

return: Promise

Get the view type of the item

Usage

item.getView().then(function(view) {
  // view values:
  // 0 = main view
  // 1 = preview editor
  // 2 = thumbnail preview
})

Returns

Promise<ViewTypes>

isChildItem()

isChildItem(): Promise<boolean>

Defined in: core/items/item.ts:558

return: Promise

Checks if item is part of a group

Usage

item.isChildItem()
.then(function(isChild) {
  console.log(isChild);
});

Returns

Promise<boolean>

off()

off(event, handler): void

Defined in: core/items/item.ts:224

param: (event: string, handler: Function)

Removes specificied event handler bound by on. Note that this can only be done for named function handlers.

Usage:

let itemChange = function(...args) {
  console.log('Item has changed');
}

let current;
let items;
xjs.Scene.getActiveScene()
.then( scene => {
  current = scene;
  return current.getItems();
}).then( list => {
  items = list;
  items[0].on('item-changed', itemChange);
  setTimeout( ()=> {
    items[0].off('item-changed', itemChange);
  }, 10000);
});

Parameters

event

string

handler

Function

Returns

void

on()

on(event, handler): void

Defined in: core/items/item.ts:126

param: (event: string, handler: Function)

Allows listening to events per instance. Currently there are only two: item-changed and item-destroyed.

Item change is triggered thru any property change:

via js(source plugin/extension),
via visibility-toggling through the sources list,
or via the source properties dialog

Usage:

let itemChange = function(...args) {
  console.log('Item has changed');
}

let current;
let items;
xjs.Scene.getActiveScene()
.then( scene => {
  current = scene;
  return current.getItems();
}).then( list => {
  items = list;
  items[0].on('item-changed', itemChange);
});

Duplicate handlers are allowed.

Parameters

event

string

handler

Function

Returns

void

remove()

remove(): Promise<boolean>

Defined in: core/items/item.ts:504

return: Promise

Removes selected item

Usage

item.remove()

Returns

Promise<boolean>

toXML()

toXML(): XML

Defined in: core/items/item.ts:373

return: XML

Convert the Item object to an XML object. Use toString() to get the string version of the returned object.

Usage

var xml = item.toXML();

Returns

XML

unlink()

unlink(): Promise<Item>

Defined in: core/items/item.ts:486

return: Promise

Unlinks selected item.

Unlinks an item to the source of other linked items and renders its own source.

Usage

item.unlink()

Note: Once you unlink an Item, there’s still no method to reverse the process.

Returns

Promise<Item>

getAllSources()

static getAllSources(): Promise<Source[]>

Defined in: core/source/source.ts:220

return: Promise<Source[]>

Get all unique Source from every scene. Total number of Sources returned may be less than total number of items on all the scenes due to Linked items only having a single Source.

Usage

xjs.Source.getAllSources().then(function(sources) {
  for(var i = 0 ; i < sources.length ; i++) {
     if(sources[i] instanceof xjs.HtmlSource) {
       // Manipulate HTML Source here
     }
   }
})

Returns

Promise<Source[]>

Inherited from

Source.getAllSources

getCurrentSource()

static getCurrentSource(): Promise<Source>

Defined in: core/source/source.ts:108

return: Promise

Get the current source (when function is called by sources), or the source that was right-clicked to open the source properties window (when function is called from the source properties window)

Usage

xjs.Source.getCurrentSource().then(function(source) {
  // This will fetch the current source (the plugin)
}).catch(function(err) {
  // Handle the error here. Errors would only occur
  // if we try to execute this method on Extension plugins
});

Returns

Promise<Source>

Inherited from

Source.getCurrentSource

getItemList()

static getItemList(): Promise<Item[]>

Defined in: core/items/item.ts:248

return: Promise<Item[]>

Gets the list of linked items of the current Item. Linked items are items linked to a single source.

Usage

xjs.Item.getItemList().then(function(items) {
  for (var i = 0 ; i < items.length ; i++) {
    // Manipulate each item here
    items[i].setKeepAspectRatio(true);
  }
})

This is simply a shortcut to: xjs.Item.getCurrentSource() -> source.getItemList()

Returns

Promise<Item[]>

Overrides

Source.getItemList