Renderer Specification

Version:

Classes

Renderer

Base Renderer class that implements the IRenderer interface. Provides core functionality for rendering and interacting with a venue map.

Hierarchy

View Summary

Extended by

Implements

Constructors

Constructor

new Renderer(element, machine, settings): Renderer

Creates a new instance of the Renderer.

Parameters
Parameter Type Description
element HTMLElement The DOM element where the renderer will be mounted
machine RendererMachine The state machine that controls the renderer behavior
settings IRendererSettings Configuration settings for the renderer
Returns

Renderer

Methods

addGaToCart()

addGaToCart(ga): void

Adds a general admission ticket to the cart.

Parameters
Parameter Type Description
ga ICartGa GA cart item
Returns

void

Remarks

This method can be used when onSectorClick was fired and developer wants to handle custom add GA seats control. You can add desired quantity of GA tickets to the cart.

Example
renderer.addGaToCart({
  sectorId: 100500,
  key: 'Table 2',
  price: 200,
  // quantity of GA tickets
  count: 3
});
Implementation of

IRenderer.addGaToCart

addSeatsToCart()

addSeatsToCart(seats): void

Adds seats to the cart.

Parameters
Parameter Type Description
seats ICartSeat[] Array of seats to add
Returns

void

Remarks

This method is optional. In a common scenario the user adds available seats by clicking on them.

Example
renderer.addSeatsToCart([
  {
    id: 803,
    key: 'Section 3;;3;;1',
    price: 500
  }
]);
Implementation of

IRenderer.addSeatsToCart

animateRotation()

animateRotation(angle): null | number

Animates continuous rotation of the 3D view

Parameters
Parameter Type Description
angle number Rotation speed in radians per second (positive for clockwise, negative for counter-clockwise)
Returns

null | number

Animation ID that can be used to stop the animation

animateSequence()

animateSequence(steps): Promise<void>

Runs a sequence of composite animations. Each step can include zoom, pan (via destination), and rotation.

Parameters
Parameter Type
steps IRendererSequenceStep[]
Returns

Promise<void>

Implementation of

IRenderer.animateSequence

animateTo3DParams()

animateTo3DParams(target, durationMs): Promise<void>

Smoothly animates current 3D parameters to the given target values. Returns a Promise that resolves when the transition completes.

Parameters
Parameter Type Default value
target { perspectiveZ?: number; rotationZ?: number; tiltX?: number; } undefined
target.perspectiveZ? number undefined
target.rotationZ? number undefined
target.tiltX? number undefined
durationMs number 800
Returns

Promise<void>

clearCart()

clearCart(): void

Clears all items from the cart.

Returns

void

Implementation of

IRenderer.clearCart

clearSectorHighlight()

clearSectorHighlight(): void

Returns

void

destroy()

destroy(): void

Destroys the renderer instance, cleaning up all resources.

Returns

void

Implementation of

IRenderer.destroy

disableSeatsByIds()

disableSeatsByIds(ids, options?): void

Disables seats by their IDs, making them unavailable for selection.

Parameters
Parameter Type Description
ids number[] Array of internal seat IDs
options? { resetAll?: boolean; } Optional configuration object.
options.resetAll? boolean If true (default), all seats not in the ids array will be unlocked. If false, only the seats in the ids array will be affected, and the locked state of other seats will remain unchanged.
Returns

void

Implementation of

IRenderer.disableSeatsByIds

disableSeatsByKeys()

disableSeatsByKeys(keys): void

Disables seats by their keys, making them unavailable for selection.

Parameters
Parameter Type Description
keys string[] Array of composite seat keys
Returns

void

Implementation of

IRenderer.disableSeatsByKeys

disableSectionsByIds()

disableSectionsByIds(ids): void

Parameters
Parameter Type
ids number[]
Returns

void

disableSvgSectionsByIds()

disableSvgSectionsByIds(ids, options?): void

Disables SVG sections by their IDs.

Parameters
Parameter Type Description
ids number[] -
options? { resetAll?: boolean; } Optional configuration
options.resetAll? boolean Whether to reset all sections before disabling
Returns

void

Implementation of

IRenderer.disableSvgSectionsByIds

disableSvgSectionsByNames()

disableSvgSectionsByNames(names, options?): void

Disables SVG sections by their names.

Parameters
Parameter Type Description
names string[] -
options? { resetAll?: boolean; } Optional configuration
options.resetAll? boolean Whether to reset all sections before disabling
Returns

void

Implementation of

IRenderer.disableSvgSectionsByNames

enableSeatsByIds()

enableSeatsByIds(ids): void

Marks disabled seats as available.

Parameters
Parameter Type Description
ids number[] Array of internal seat IDs
Returns

void

enableSectionsByIds()

enableSectionsByIds(): void

Returns

void

enableSvgSectionsByIds()

enableSvgSectionsByIds(ids): void

Enables SVG sections by their IDs.

Parameters
Parameter Type
ids number[]
Returns

void

Implementation of

IRenderer.enableSvgSectionsByIds

enableSvgSectionsByNames()

enableSvgSectionsByNames(names): void

Enables SVG sections by their names.

Parameters
Parameter Type
names string[]
Returns

void

Implementation of

IRenderer.enableSvgSectionsByNames

filterSeatsByIds()

filterSeatsByIds(ids): void

Marks seats as filtered.

Parameters
Parameter Type Description
ids number[] Array of internal seat IDs
Returns

void

filterSeatsByKeys()

filterSeatsByKeys(keys): void

Marks seats as filtered.

Parameters
Parameter Type Description
keys string[] Array of composite seat keys
Returns

void

filterSvgSectionsByIds()

filterSvgSectionsByIds(ids, options?): void

Parameters
Parameter Type
ids number[]
options? { resetAll?: boolean; }
options.resetAll? boolean
Returns

void

get3DViewParams()

get3DViewParams(): object

Gets current 3D view parameters

Returns

object

enable3DView

enable3DView: boolean

perspectiveZ

perspectiveZ: number

rotationZ

rotationZ: number

tiltX

tiltX: number

getCart()

getCart(): ICart

Gets the current cart state.

Returns

ICart

Returns selected seats and GA ticket count

Remarks

Seatmap.pro doesn’t support any session mechanisms. Cart is always should be stored on the ticketing system side. For the state management reasons, the Renderer has internal selected seat representation.

Example

Example of cart object:

var cart = {
  seats: [
    { id: 1389563, key: 'Section 1;;5;;14', price: 100 },
    { key: 'Table 3;;1;;1', price: 500 },
    { key: 'Section 2;;5;;1', price: 200 }
  ],
  ga: [
    {
      id: 100500,
      key: 'Table 2',
      price: 200,
      count: 1
    },
    { key: 'Section 5', price: 100, count: 2 }
  ]
};
Implementation of

IRenderer.getCart

getCategoryColor()

getCategoryColor(category): undefined | string

Returns category’s color

Parameters
Parameter Type Description
category number Category number
Returns

undefined | string

getHeight()

getHeight(): number

Gets the height of the renderer.

Returns

number

The height in pixels

getHighlightAllOutlines()

getHighlightAllOutlines(): boolean

Gets whether all section outlines are currently highlighted.

Returns

boolean

True if all outlines are highlighted, false otherwise

Implementation of

IRenderer.getHighlightAllOutlines

getMarkedSeatsIds()

getMarkedSeatsIds(): number[]

Gets the IDs of all marked seats.

Returns

number[]

The IDs of marked seats

Implementation of

IRenderer.getMarkedSeatsIds

getMaxZoom()

getMaxZoom(): number

Gets the maximum allowed zoom level.

Returns

number

Implementation of

IRenderer.getMaxZoom

getMinZoom()

getMinZoom(): number

Gets the minimum allowed zoom level.

Returns

number

Implementation of

IRenderer.getMinZoom

getMode()

getMode(): undefined | string

Returns

undefined | string

getPrices()

getPrices(): IColoredPrice[]

Gets all available prices.

Returns

IColoredPrice[]

Array of available prices

Example

Example of return value:

[
  { id: 63, name: '100', color: '#9C27B0' },
  { id: 64, name: '200', color: '#2196F3' }
];
Implementation of

IRenderer.getPrices

getRotationAnimationId()

getRotationAnimationId(): null | number

Gets the current rotation animation ID

Returns

null | number

getRowById()

getRowById(id): IRowDTO

Parameters
Parameter Type
id number
Returns

IRowDTO

Row data

getRows()

getRows(): IRowDTO[]

Returns

IRowDTO[]

Rows data array

getSeatIds()

getSeatIds(seats): number[]

Parameters
Parameter Type
seats number[] | string[] | ISeat[]
Returns

number[]

getSeats()

getSeats(): ISeatDTO[]

Gets all seats in the venue.

Returns

ISeatDTO[]

Seats data array

Implementation of

IRenderer.getSeats

getSeatSelection()

getSeatSelection(): IExtendedSeat[]

Returns selected seats

Returns

IExtendedSeat[]

getSections()

getSections(): ISector[]

Returns sections info

Returns

ISector[]

getSectionsKeys()

getSectionsKeys(): string[]

Returns sections ids

Returns

string[]

getSectionsWithCoords()

getSectionsWithCoords(): ISectionWithCoords[]

Returns

ISectionWithCoords[]

getSelectedGa()

getSelectedGa(): undefined | ISector

Returns

undefined | ISector

getSvgSectionBySelection()

getSvgSectionBySelection(): ISectorDTO[]

Gets SVG sections by the current selection.

Returns

ISectorDTO[]

The selected SVG sections

Implementation of

IRenderer.getSvgSectionBySelection

getVersion()

getVersion(): string

Gets the renderer version.

Returns

string

The version string

Implementation of

IRenderer.getVersion

getVisibleSeats()

getVisibleSeats(): ISeat[]

Returns only visible seats with coords relative to canvas

Returns

ISeat[]

getWidth()

getWidth(): number

Gets the width of the renderer.

Returns

number

The width in pixels

getZoom()

getZoom(): number

Gets the current zoom level.

Returns

number

Implementation of

IRenderer.getZoom

hideMinimap()

hideMinimap(): void

Hides the minimap.

Returns

void

Implementation of

IRenderer.hideMinimap

highlightSector()

highlightSector(id): void

Parameters
Parameter Type
id undefined | number
Returns

void

initCart()

initCart(cart): void

Initializes the cart with the provided cart data.

Parameters
Parameter Type Description
cart ICart Cart state
Returns

void

Remarks

In a case of page reload you should initialize the saved state with this method.

Cart initialization is available right after component initialization.

Sales page must save the cart state in the given format to support the page reload feature.

Example
var cart = {
  seats: [
    {
      id: 1389563,
      key: 'Section 1;;5;;14',
      price: 100
    },
    { key: 'Table 3;;1;;1', price: 500 },
    { key: 'Section 2;;5;;1', price: 200 }
  ],
  ga: [
    {
      id: 100500,
      key: 'Table 2',
      price: 200,
      count: 1
    },
    { key: 'Section 5', price: 100, count: 2 }
  ]
};

renderer.initCart(cart);
Implementation of

IRenderer.initCart

isRotationAnimationRunning()

isRotationAnimationRunning(): boolean

Checks if a rotation animation is currently running

Returns

boolean

removeFilter()

removeFilter(ids?): void

Marks disabled seats as available.

Parameters
Parameter Type Description
ids? number[] Array of internal seat IDs
Returns

void

removeFilterSvgSectionsByIds()

removeFilterSvgSectionsByIds(ids?): void

Parameters
Parameter Type
ids? number[]
Returns

void

removeGaFromCart()

removeGaFromCart(removedGa): void

Removes a general admission ticket from the cart.

Parameters
Parameter Type Description
removedGa IRemovedCartGa removed GA cart item
Returns

void

Remarks

This method can be used when onSectorClick was fired and developer wants to handle custom remove GA seats control. You can remove GA from cart.

Example
renderer.removeGaFromCart({
  sectorId: 100500,
  price: 200
});
Implementation of

IRenderer.removeGaFromCart

removeSeatsFromCartByIds()

removeSeatsFromCartByIds(ids): void

Removes seats from the cart by their IDs.

Parameters
Parameter Type Description
ids number[] Array of internal seat IDs
Returns

void

Implementation of

IRenderer.removeSeatsFromCartByIds

removeSeatsFromCartByKeys()

removeSeatsFromCartByKeys(keys): void

Removes seats from internal cart.

Parameters
Parameter Type Description
keys string[] Array of composite seat keys
Returns

void

resetCategories()

resetCategories(): void

Returns

void

seatKeysToIds()

seatKeysToIds(keys): number[]

Converts seat keys to seat IDs.

Parameters
Parameter Type Description
keys string[] Array of composite seat keys
Returns

number[]

Implementation of

IRenderer.seatKeysToIds

seatToExtendedSeat()

seatToExtendedSeat(seat): IExtendedSeat

Parameters
Parameter Type
seat ISeat
Returns

IExtendedSeat

setExternalPrices()

setExternalPrices(seatsPrices?): void

Sets external price information for seats.

Parameters
Parameter Type
seatsPrices? ISeatPriceScheme[]
Returns

void

Remarks

In case you need to use prices from external resources you should execute this method. External prices can be passed as an argument or as a seatsPrices property within the settings.

Implementation of

IRenderer.setExternalPrices

setGaCategory()

setGaCategory(sectionId, category): void

Parameters
Parameter Type
sectionId number
category undefined | number
Returns

void

setGroupSize()

setGroupSize(groupSize): void

Sets the group size for group selection.

Parameters
Parameter Type Description
groupSize number The size of the group
Returns

void

Implementation of

IRenderer.setGroupSize

setHeight()

setHeight(height): void

Parameters
Parameter Type
height number
Returns

void

setHighlightAllOutlines()

setHighlightAllOutlines(highlight): void

Sets whether all section outlines should be highlighted.

Parameters
Parameter Type Description
highlight boolean If true, all section outlines will be highlighted with a border
Returns

void

Implementation of

IRenderer.setHighlightAllOutlines

setMinimapPinsEnabled()

setMinimapPinsEnabled(enabled): void

Enables or disables cart pins on the minimap at runtime.

Parameters
Parameter Type
enabled boolean
Returns

void

setMinimapPosition()

setMinimapPosition(position): void

Sets the minimap position.

Parameters
Parameter Type Description
position "top-left" | "top-right" | "bottom-left" | "bottom-right" The position to set (’top-left’, ’top-right’, ‘bottom-left’, ‘bottom-right’)
Returns

void

Implementation of

IRenderer.setMinimapPosition

setMode()

setMode(mode): boolean

Sets the interaction mode for the renderer.

Parameters
Parameter Type Description
mode string The mode to set
Returns

boolean

Whether the mode was set successfully

setSeatsCategory()

setSeatsCategory(seats, category, color?): void

Parameters
Parameter Type
seats number[] | string[] | ISeat[]
category number
color? string
Returns

void

setSeatSelection()

setSeatSelection(seats): void

Parameters
Parameter Type
seats number[] | string[] | ISeat[]
Returns

void

setSectionSelection()

setSectionSelection(sections?): void

Parameters
Parameter Type
sections? number[] | string[]
Returns

void

setSelectedGa()

setSelectedGa(ga?): void

Parameters
Parameter Type
ga? string | number
Returns

void

showMinimap()

showMinimap(): void

Shows the minimap.

Returns

void

Implementation of

IRenderer.showMinimap

stopRotationAnimation()

stopRotationAnimation(): void

Stops the current rotation animation

Returns

void

toggleMinimap()

toggleMinimap(): void

Toggles the minimap visibility.

Returns

void

Implementation of

IRenderer.toggleMinimap

update3DView()

update3DView(options): void

Updates 3D view parameters for dynamic perspective changes. Only works when enable3DView is true and WebGL is enabled.

Parameters
Parameter Type
options { perspectiveZ?: number; rotationZ?: number; tiltX?: number; }
options.perspectiveZ? number
options.rotationZ? number
options.tiltX? number
Returns

void

updateSeatLocks()

updateSeatLocks(filter): void

Updates the lock status of seats based on the provided filter.

Parameters
Parameter Type Description
filter SeatFilter Function should return true for seats to lock
Returns

void

Example

For example, you can create handler to prevent selection of seats with different special state:

const handleCartChange = (cart, prevCart) => {
  if (!cart.seats.length) {
    // Unlock all the seats if the cart is empty
    renderer.updateSeatLocks(s => false);
  } else if (!prevCart || !prevCart.seats.length) {
    // Lock seats with different special state
    const seat = cart.seats[0];
    renderer.updateSeatLocks(
      s => (s.special && s.special.s1) !== (seat.special && seat.special.s1)
    );
  }
};
Implementation of

IRenderer.updateSeatLocks

viewSection()

viewSection(section): void

Parameters
Parameter Type
section ISection
Returns

void

zoomIn()

zoomIn(): void

Increases the zoom level by one step.

Returns

void

Implementation of

IRenderer.zoomIn

zoomOut()

zoomOut(): void

Decreases the zoom level by one step.

Returns

void

Implementation of

IRenderer.zoomOut

zoomTo()

zoomTo(newScaleCss, options?): void

Convenience method to zoom with optional destination center point. If destination is provided, it focuses the view so that destination becomes the viewport center.

Parameters
Parameter Type
newScaleCss number
options? { destination?: IPoint; durationMs?: number; }
options.destination? IPoint
options.durationMs? number
Returns

void

Implementation of

IRenderer.zoomTo

zoomToDestination()

zoomToDestination(newScale, destination, duration?): void

Parameters
Parameter Type
newScale number
destination IPoint
duration? number
Returns

void

zoomToFit()

zoomToFit(): void

Adjusts the zoom level to fit the entire venue in the viewport.

Returns

void

Implementation of

IRenderer.zoomToFit

zoomToSection()

zoomToSection(section, options?): void

Parameters
Parameter Type
section string | number
options? { focus?: boolean; }
options.focus? boolean
Returns

void

RotationAnimation

Constructors

Constructor

new RotationAnimation(): RotationAnimation

Returns

RotationAnimation

Methods

getAnimation()

getAnimation(): null | IRotationAnimation

Gets the current animation state

Returns

null | IRotationAnimation

getAnimationId()

getAnimationId(): null | number

Gets the current animation ID

Returns

null | number

isRunning()

isRunning(): boolean

Checks if an animation is currently running

Returns

boolean

start()

start(angle, onUpdate): null | number

Starts a continuous rotation animation

Parameters
Parameter Type Description
angle number Rotation speed in radians per second (positive for clockwise, negative for counter-clockwise)
onUpdate (rotationZ) => void Callback function to update the rotation value
Returns

null | number

Animation ID that can be used to stop the animation

stop()

stop(): void

Stops the current rotation animation

Returns

void

SeatmapAdminRenderer

Admin Renderer class for seatmap administration. Extends the base Renderer with admin-specific functionality.

Hierarchy

View Summary

Extends

Constructors

Constructor

new SeatmapAdminRenderer(element, settings?): SeatmapAdminRenderer

Creates a new instance of the AdminRenderer.

Initializes the renderer by setting up the base configuration and API client. The API endpoint URL is determined based on the environment setting.

Parameters
Parameter Type Description
element HTMLElement The HTML element where the renderer will be mounted
settings? IAdminRendererSettings Optional configuration settings for the renderer
Returns

SeatmapAdminRenderer

Throws

Throws an error if the public key is undefined

Example
// Create with default production settings
const renderer = new AdminRenderer(document.getElementById('container'), {
  publicKey: 'your-public-key'
});

// Create with staging environment
const stageRenderer = new AdminRenderer(document.getElementById('container'), {
  env: 'stage',
  publicKey: 'your-stage-key'
});

// Create with custom base URL
const customRenderer = new AdminRenderer(document.getElementById('container'), {
  baseUrl: 'https://your-custom-api.example.com/v1/',
  publicKey: 'your-public-key'
});
Overrides

Renderer.constructor

Methods

addGaToCart()

addGaToCart(ga): void

Adds a general admission ticket to the cart.

Parameters
Parameter Type Description
ga ICartGa GA cart item
Returns

void

Remarks

This method can be used when onSectorClick was fired and developer wants to handle custom add GA seats control. You can add desired quantity of GA tickets to the cart.

Example
renderer.addGaToCart({
  sectorId: 100500,
  key: 'Table 2',
  price: 200,
  // quantity of GA tickets
  count: 3
});
Inherited from

Renderer.addGaToCart

addSeatsToCart()

addSeatsToCart(seats): void

Adds seats to the cart.

Parameters
Parameter Type Description
seats ICartSeat[] Array of seats to add
Returns

void

Remarks

This method is optional. In a common scenario the user adds available seats by clicking on them.

Example
renderer.addSeatsToCart([
  {
    id: 803,
    key: 'Section 3;;3;;1',
    price: 500
  }
]);
Inherited from

Renderer.addSeatsToCart

animateRotation()

animateRotation(angle): null | number

Animates continuous rotation of the 3D view

Parameters
Parameter Type Description
angle number Rotation speed in radians per second (positive for clockwise, negative for counter-clockwise)
Returns

null | number

Animation ID that can be used to stop the animation

Inherited from

Renderer.animateRotation

animateSequence()

animateSequence(steps): Promise<void>

Runs a sequence of composite animations. Each step can include zoom, pan (via destination), and rotation.

Parameters
Parameter Type
steps IRendererSequenceStep[]
Returns

Promise<void>

Inherited from

Renderer.animateSequence

animateTo3DParams()

animateTo3DParams(target, durationMs): Promise<void>

Smoothly animates current 3D parameters to the given target values. Returns a Promise that resolves when the transition completes.

Parameters
Parameter Type Default value
target { perspectiveZ?: number; rotationZ?: number; tiltX?: number; } undefined
target.perspectiveZ? number undefined
target.rotationZ? number undefined
target.tiltX? number undefined
durationMs number 800
Returns

Promise<void>

Inherited from

Renderer.animateTo3DParams

clearCart()

clearCart(): void

Clears all items from the cart.

Returns

void

Inherited from

Renderer.clearCart

clearSectorHighlight()

clearSectorHighlight(): void

Returns

void

Inherited from

Renderer.clearSectorHighlight

destroy()

destroy(): void

Destroys the renderer instance, cleaning up all resources.

Returns

void

Inherited from

Renderer.destroy

disableSeatsByIds()

disableSeatsByIds(ids, options?): void

Disables seats by their IDs, making them unavailable for selection.

Parameters
Parameter Type Description
ids number[] Array of internal seat IDs
options? { resetAll?: boolean; } Optional configuration object.
options.resetAll? boolean If true (default), all seats not in the ids array will be unlocked. If false, only the seats in the ids array will be affected, and the locked state of other seats will remain unchanged.
Returns

void

Inherited from

Renderer.disableSeatsByIds

disableSeatsByKeys()

disableSeatsByKeys(keys): void

Disables seats by their keys, making them unavailable for selection.

Parameters
Parameter Type Description
keys string[] Array of composite seat keys
Returns

void

Inherited from

Renderer.disableSeatsByKeys

disableSectionsByIds()

disableSectionsByIds(ids): void

Parameters
Parameter Type
ids number[]
Returns

void

Inherited from

Renderer.disableSectionsByIds

disableSvgSectionsByIds()

disableSvgSectionsByIds(ids, options?): void

Disables SVG sections by their IDs.

Parameters
Parameter Type Description
ids number[] -
options? { resetAll?: boolean; } Optional configuration
options.resetAll? boolean Whether to reset all sections before disabling
Returns

void

Inherited from

Renderer.disableSvgSectionsByIds

disableSvgSectionsByNames()

disableSvgSectionsByNames(names, options?): void

Disables SVG sections by their names.

Parameters
Parameter Type Description
names string[] -
options? { resetAll?: boolean; } Optional configuration
options.resetAll? boolean Whether to reset all sections before disabling
Returns

void

Inherited from

Renderer.disableSvgSectionsByNames

enableSeatsByIds()

enableSeatsByIds(ids): void

Marks disabled seats as available.

Parameters
Parameter Type Description
ids number[] Array of internal seat IDs
Returns

void

Inherited from

Renderer.enableSeatsByIds

enableSectionsByIds()

enableSectionsByIds(): void

Returns

void

Inherited from

Renderer.enableSectionsByIds

enableSvgSectionsByIds()

enableSvgSectionsByIds(ids): void

Enables SVG sections by their IDs.

Parameters
Parameter Type
ids number[]
Returns

void

Inherited from

Renderer.enableSvgSectionsByIds

enableSvgSectionsByNames()

enableSvgSectionsByNames(names): void

Enables SVG sections by their names.

Parameters
Parameter Type
names string[]
Returns

void

Inherited from

Renderer.enableSvgSectionsByNames

filterSeatsByIds()

filterSeatsByIds(ids): void

Marks seats as filtered.

Parameters
Parameter Type Description
ids number[] Array of internal seat IDs
Returns

void

Inherited from

Renderer.filterSeatsByIds

filterSeatsByKeys()

filterSeatsByKeys(keys): void

Marks seats as filtered.

Parameters
Parameter Type Description
keys string[] Array of composite seat keys
Returns

void

Inherited from

Renderer.filterSeatsByKeys

filterSvgSectionsByIds()

filterSvgSectionsByIds(ids, options?): void

Parameters
Parameter Type
ids number[]
options? { resetAll?: boolean; }
options.resetAll? boolean
Returns

void

Inherited from

Renderer.filterSvgSectionsByIds

get3DViewParams()

get3DViewParams(): object

Gets current 3D view parameters

Returns

object

enable3DView

enable3DView: boolean

perspectiveZ

perspectiveZ: number

rotationZ

rotationZ: number

tiltX

tiltX: number

Inherited from

Renderer.get3DViewParams

getCart()

getCart(): ICart

Gets the current cart state.

Returns

ICart

Returns selected seats and GA ticket count

Remarks

Seatmap.pro doesn’t support any session mechanisms. Cart is always should be stored on the ticketing system side. For the state management reasons, the Renderer has internal selected seat representation.

Example

Example of cart object:

var cart = {
  seats: [
    { id: 1389563, key: 'Section 1;;5;;14', price: 100 },
    { key: 'Table 3;;1;;1', price: 500 },
    { key: 'Section 2;;5;;1', price: 200 }
  ],
  ga: [
    {
      id: 100500,
      key: 'Table 2',
      price: 200,
      count: 1
    },
    { key: 'Section 5', price: 100, count: 2 }
  ]
};
Inherited from

Renderer.getCart

getCategoryColor()

getCategoryColor(category): undefined | string

Returns category’s color

Parameters
Parameter Type Description
category number Category number
Returns

undefined | string

Inherited from

Renderer.getCategoryColor

getHeight()

getHeight(): number

Gets the height of the renderer.

Returns

number

The height in pixels

Inherited from

Renderer.getHeight

getHighlightAllOutlines()

getHighlightAllOutlines(): boolean

Gets whether all section outlines are currently highlighted.

Returns

boolean

True if all outlines are highlighted, false otherwise

Inherited from

Renderer.getHighlightAllOutlines

getMarkedSeatsIds()

getMarkedSeatsIds(): number[]

Gets the IDs of all marked seats.

Returns

number[]

The IDs of marked seats

Inherited from

Renderer.getMarkedSeatsIds

getMaxZoom()

getMaxZoom(): number

Gets the maximum allowed zoom level.

Returns

number

Inherited from

Renderer.getMaxZoom

getMinZoom()

getMinZoom(): number

Gets the minimum allowed zoom level.

Returns

number

Inherited from

Renderer.getMinZoom

getMode()

getMode(): undefined | string

Returns

undefined | string

Inherited from

Renderer.getMode

getPrices()

getPrices(): IColoredPrice[]

Gets all available prices.

Returns

IColoredPrice[]

Array of available prices

Example

Example of return value:

[
  { id: 63, name: '100', color: '#9C27B0' },
  { id: 64, name: '200', color: '#2196F3' }
];
Inherited from

Renderer.getPrices

getRotationAnimationId()

getRotationAnimationId(): null | number

Gets the current rotation animation ID

Returns

null | number

Inherited from

Renderer.getRotationAnimationId

getRowById()

getRowById(id): IRowDTO

Parameters
Parameter Type
id number
Returns

IRowDTO

Row data

Inherited from

Renderer.getRowById

getRows()

getRows(): IRowDTO[]

Returns

IRowDTO[]

Rows data array

Inherited from

Renderer.getRows

getSeatIds()

getSeatIds(seats): number[]

Parameters
Parameter Type
seats number[] | string[] | ISeat[]
Returns

number[]

Inherited from

Renderer.getSeatIds

getSeats()

getSeats(): ISeatDTO[]

Gets all seats in the venue.

Returns

ISeatDTO[]

Seats data array

Inherited from

Renderer.getSeats

getSeatSelection()

getSeatSelection(): IExtendedSeat[]

Returns selected seats

Returns

IExtendedSeat[]

Inherited from

Renderer.getSeatSelection

getSections()

getSections(): ISector[]

Returns sections info

Returns

ISector[]

Inherited from

Renderer.getSections

getSectionsKeys()

getSectionsKeys(): string[]

Returns sections ids

Returns

string[]

Inherited from

Renderer.getSectionsKeys

getSectionsWithCoords()

getSectionsWithCoords(): ISectionWithCoords[]

Returns

ISectionWithCoords[]

Inherited from

Renderer.getSectionsWithCoords

getSelectedGa()

getSelectedGa(): undefined | ISector

Returns

undefined | ISector

Inherited from

Renderer.getSelectedGa

getSvgSectionBySelection()

getSvgSectionBySelection(): ISectorDTO[]

Gets SVG sections by the current selection.

Returns

ISectorDTO[]

The selected SVG sections

Inherited from

Renderer.getSvgSectionBySelection

getVersion()

getVersion(): string

Gets the renderer version.

Returns

string

The version string

Inherited from

Renderer.getVersion

getVisibleSeats()

getVisibleSeats(): ISeat[]

Returns only visible seats with coords relative to canvas

Returns

ISeat[]

Inherited from

Renderer.getVisibleSeats

getWidth()

getWidth(): number

Gets the width of the renderer.

Returns

number

The width in pixels

Inherited from

Renderer.getWidth

getZoom()

getZoom(): number

Gets the current zoom level.

Returns

number

Inherited from

Renderer.getZoom

hideMinimap()

hideMinimap(): void

Hides the minimap.

Returns

void

Inherited from

Renderer.hideMinimap

highlightSector()

highlightSector(id): void

Parameters
Parameter Type
id undefined | number
Returns

void

Inherited from

Renderer.highlightSector

initCart()

initCart(cart): void

Initializes the cart with the provided cart data.

Parameters
Parameter Type Description
cart ICart Cart state
Returns

void

Remarks

In a case of page reload you should initialize the saved state with this method.

Cart initialization is available right after component initialization.

Sales page must save the cart state in the given format to support the page reload feature.

Example
var cart = {
  seats: [
    {
      id: 1389563,
      key: 'Section 1;;5;;14',
      price: 100
    },
    { key: 'Table 3;;1;;1', price: 500 },
    { key: 'Section 2;;5;;1', price: 200 }
  ],
  ga: [
    {
      id: 100500,
      key: 'Table 2',
      price: 200,
      count: 1
    },
    { key: 'Section 5', price: 100, count: 2 }
  ]
};

renderer.initCart(cart);
Inherited from

Renderer.initCart

isRotationAnimationRunning()

isRotationAnimationRunning(): boolean

Checks if a rotation animation is currently running

Returns

boolean

Inherited from

Renderer.isRotationAnimationRunning

loadEvent()

loadEvent(eventId): Promise<void>

Loads event’s schema

Parameters
Parameter Type Description
eventId string Event ID
Returns

Promise<void>

A promise that resolves when the data fetching is completed

Example
var eventId = 'a4a75361-7823-4847-bf22-336843022e80';
renderer.loadEvent(eventId).then(function() {
  renderer.initCart(cart);
});

// Or with the onSchemaDataLoaded event
var renderer = new SeatmapAdminRenderer(element, {
  publicKey: 'your-public-key',
  onSchemaDataLoaded: function() {
    console.log('Schema data loaded successfully');
    // Perform actions after schema is fully loaded
  }
});
renderer.loadEvent(eventId);
loadSchema()

loadSchema(schemaId): Promise<void>

Loads schema by id

Parameters
Parameter Type Description
schemaId number Schema ID
Returns

Promise<void>

A promise that resolves when the data fetching is completed

Example
var schemaId = 100500;
renderer.loadSchema(schemaId).then(function() { ... });

// Or with the onSchemaDataLoaded event
var renderer = new SeatmapAdminRenderer(element, {
  publicKey: 'your-public-key',
  onSchemaDataLoaded: function() {
    console.log('Schema data loaded successfully');
    // Perform actions after schema is fully loaded
  }
});
renderer.loadSchema(schemaId);
removeFilter()

removeFilter(ids?): void

Marks disabled seats as available.

Parameters
Parameter Type Description
ids? number[] Array of internal seat IDs
Returns

void

Inherited from

Renderer.removeFilter

removeFilterSvgSectionsByIds()

removeFilterSvgSectionsByIds(ids?): void

Parameters
Parameter Type
ids? number[]
Returns

void

Inherited from

Renderer.removeFilterSvgSectionsByIds

removeGaFromCart()

removeGaFromCart(removedGa): void

Removes a general admission ticket from the cart.

Parameters
Parameter Type Description
removedGa IRemovedCartGa removed GA cart item
Returns

void

Remarks

This method can be used when onSectorClick was fired and developer wants to handle custom remove GA seats control. You can remove GA from cart.

Example
renderer.removeGaFromCart({
  sectorId: 100500,
  price: 200
});
Inherited from

Renderer.removeGaFromCart

removeSeatsFromCartByIds()

removeSeatsFromCartByIds(ids): void

Removes seats from the cart by their IDs.

Parameters
Parameter Type Description
ids number[] Array of internal seat IDs
Returns

void

Inherited from

Renderer.removeSeatsFromCartByIds

removeSeatsFromCartByKeys()

removeSeatsFromCartByKeys(keys): void

Removes seats from internal cart.

Parameters
Parameter Type Description
keys string[] Array of composite seat keys
Returns

void

Inherited from

Renderer.removeSeatsFromCartByKeys

resetCategories()

resetCategories(): void

Returns

void

Inherited from

Renderer.resetCategories

seatKeysToIds()

seatKeysToIds(keys): number[]

Converts seat keys to seat IDs.

Parameters
Parameter Type Description
keys string[] Array of composite seat keys
Returns

number[]

Inherited from

Renderer.seatKeysToIds

seatToExtendedSeat()

seatToExtendedSeat(seat): IExtendedSeat

Parameters
Parameter Type
seat ISeat
Returns

IExtendedSeat

Inherited from

Renderer.seatToExtendedSeat

setExternalPrices()

setExternalPrices(seatsPrices?): void

Sets external price information for seats.

Parameters
Parameter Type
seatsPrices? ISeatPriceScheme[]
Returns

void

Remarks

In case you need to use prices from external resources you should execute this method. External prices can be passed as an argument or as a seatsPrices property within the settings.

Inherited from

Renderer.setExternalPrices

setGaCategory()

setGaCategory(sectionId, category): void

Parameters
Parameter Type
sectionId number
category undefined | number
Returns

void

Inherited from

Renderer.setGaCategory

setGroupSize()

setGroupSize(groupSize): void

Sets the group size for group selection.

Parameters
Parameter Type Description
groupSize number The size of the group
Returns

void

Inherited from

Renderer.setGroupSize

setHeight()

setHeight(height): void

Parameters
Parameter Type
height number
Returns

void

Inherited from

Renderer.setHeight

setHighlightAllOutlines()

setHighlightAllOutlines(highlight): void

Sets whether all section outlines should be highlighted.

Parameters
Parameter Type Description
highlight boolean If true, all section outlines will be highlighted with a border
Returns

void

Inherited from

Renderer.setHighlightAllOutlines

setMinimapPinsEnabled()

setMinimapPinsEnabled(enabled): void

Enables or disables cart pins on the minimap at runtime.

Parameters
Parameter Type
enabled boolean
Returns

void

Inherited from

Renderer.setMinimapPinsEnabled

setMinimapPosition()

setMinimapPosition(position): void

Sets the minimap position.

Parameters
Parameter Type Description
position "top-left" | "top-right" | "bottom-left" | "bottom-right" The position to set (’top-left’, ’top-right’, ‘bottom-left’, ‘bottom-right’)
Returns

void

Inherited from

Renderer.setMinimapPosition

setMode()

setMode(mode): boolean

Sets the interaction mode for the component and updates visibility of the outline layer.

Parameters
Parameter Type Description
mode string The interaction mode to set. When set to ‘pan’, the outline layer is hidden. For any other mode, the outline layer is shown.
Returns

boolean

A boolean indicating whether the mode change was successful. Returns true if the outline layer exists and the mode was set. Returns false if the outline layer doesn’t exist.

Example
// Set mode to 'pan' - will hide outline layer
component.setMode('pan');

// Set mode to 'select' - will show outline layer
component.setMode('select');
Overrides

Renderer.setMode

setSeatsCategory()

setSeatsCategory(seats, category, color?): void

Parameters
Parameter Type
seats number[] | string[] | ISeat[]
category number
color? string
Returns

void

Inherited from

Renderer.setSeatsCategory

setSeatSelection()

setSeatSelection(seats): void

Parameters
Parameter Type
seats number[] | string[] | ISeat[]
Returns

void

Inherited from

Renderer.setSeatSelection

setSectionSelection()

setSectionSelection(sections?): void

Parameters
Parameter Type
sections? number[] | string[]
Returns

void

Inherited from

Renderer.setSectionSelection

setSelectedGa()

setSelectedGa(ga?): void

Parameters
Parameter Type
ga? string | number
Returns

void

Inherited from

Renderer.setSelectedGa

showMinimap()

showMinimap(): void

Shows the minimap.

Returns

void

Inherited from

Renderer.showMinimap

stopRotationAnimation()

stopRotationAnimation(): void

Stops the current rotation animation

Returns

void

Inherited from

Renderer.stopRotationAnimation

toggleMinimap()

toggleMinimap(): void

Toggles the minimap visibility.

Returns

void

Inherited from

Renderer.toggleMinimap

update3DView()

update3DView(options): void

Updates 3D view parameters for dynamic perspective changes. Only works when enable3DView is true and WebGL is enabled.

Parameters
Parameter Type
options { perspectiveZ?: number; rotationZ?: number; tiltX?: number; }
options.perspectiveZ? number
options.rotationZ? number
options.tiltX? number
Returns

void

Inherited from

Renderer.update3DView

updateSeatLocks()

updateSeatLocks(filter): void

Updates the lock status of seats based on the provided filter.

Parameters
Parameter Type Description
filter SeatFilter Function should return true for seats to lock
Returns

void

Example

For example, you can create handler to prevent selection of seats with different special state:

const handleCartChange = (cart, prevCart) => {
  if (!cart.seats.length) {
    // Unlock all the seats if the cart is empty
    renderer.updateSeatLocks(s => false);
  } else if (!prevCart || !prevCart.seats.length) {
    // Lock seats with different special state
    const seat = cart.seats[0];
    renderer.updateSeatLocks(
      s => (s.special && s.special.s1) !== (seat.special && seat.special.s1)
    );
  }
};
Inherited from

Renderer.updateSeatLocks

viewSection()

viewSection(section): void

Parameters
Parameter Type
section ISection
Returns

void

Inherited from

Renderer.viewSection

zoomIn()

zoomIn(): void

Increases the zoom level by one step.

Returns

void

Inherited from

Renderer.zoomIn

zoomOut()

zoomOut(): void

Decreases the zoom level by one step.

Returns

void

Inherited from

Renderer.zoomOut

zoomTo()

zoomTo(newScaleCss, options?): void

Convenience method to zoom with optional destination center point. If destination is provided, it focuses the view so that destination becomes the viewport center.

Parameters
Parameter Type
newScaleCss number
options? { destination?: IPoint; durationMs?: number; }
options.destination? IPoint
options.durationMs? number
Returns

void

Inherited from

Renderer.zoomTo

zoomToDestination()

zoomToDestination(newScale, destination, duration?): void

Parameters
Parameter Type
newScale number
destination IPoint
duration? number
Returns

void

Inherited from

Renderer.zoomToDestination

zoomToFit()

zoomToFit(): void

Adjusts the zoom level to fit the entire venue in the viewport.

Returns

void

Inherited from

Renderer.zoomToFit

zoomToSection()

zoomToSection(section, options?): void

Parameters
Parameter Type
section string | number
options? { focus?: boolean; }
options.focus? boolean
Returns

void

Inherited from

Renderer.zoomToSection

SeatmapBookingRenderer

Booking Renderer class for seatmap booking. Extends the base Renderer with booking-specific functionality.

Hierarchy

View Summary

Extends

Constructors

Constructor

new SeatmapBookingRenderer(element, settings?, tags?): SeatmapBookingRenderer

Creates a new instance of the SeatmapBookingRenderer.

Initializes the renderer by setting up the base configuration, API client, and analytics. The API endpoint URL is determined based on the environment setting.

Parameters
Parameter Type Description
element HTMLElement DOM element that will be a host element for the Renderer
settings? IBookingRendererSettings Optional configuration settings for the renderer
tags? any Optional tags for analytics tracking
Returns

SeatmapBookingRenderer

Throws

Throws an error if the public key is undefined

Overrides

Renderer.constructor

Methods

addGaToCart()

addGaToCart(ga): void

Adds a general admission ticket to the cart.

Parameters
Parameter Type Description
ga ICartGa GA cart item
Returns

void

Remarks

This method can be used when onSectorClick was fired and developer wants to handle custom add GA seats control. You can add desired quantity of GA tickets to the cart.

Example
renderer.addGaToCart({
  sectorId: 100500,
  key: 'Table 2',
  price: 200,
  // quantity of GA tickets
  count: 3
});
Inherited from

Renderer.addGaToCart

addSeatsToCart()

addSeatsToCart(seats): void

Adds seats to the cart.

Parameters
Parameter Type Description
seats ICartSeat[] Array of seats to add
Returns

void

Remarks

This method is optional. In a common scenario the user adds available seats by clicking on them.

Example
renderer.addSeatsToCart([
  {
    id: 803,
    key: 'Section 3;;3;;1',
    price: 500
  }
]);
Inherited from

Renderer.addSeatsToCart

animateRotation()

animateRotation(angle): null | number

Animates continuous rotation of the 3D view

Parameters
Parameter Type Description
angle number Rotation speed in radians per second (positive for clockwise, negative for counter-clockwise)
Returns

null | number

Animation ID that can be used to stop the animation

Inherited from

Renderer.animateRotation

animateSequence()

animateSequence(steps): Promise<void>

Runs a sequence of composite animations. Each step can include zoom, pan (via destination), and rotation.

Parameters
Parameter Type
steps IRendererSequenceStep[]
Returns

Promise<void>

Inherited from

Renderer.animateSequence

animateTo3DParams()

animateTo3DParams(target, durationMs): Promise<void>

Smoothly animates current 3D parameters to the given target values. Returns a Promise that resolves when the transition completes.

Parameters
Parameter Type Default value
target { perspectiveZ?: number; rotationZ?: number; tiltX?: number; } undefined
target.perspectiveZ? number undefined
target.rotationZ? number undefined
target.tiltX? number undefined
durationMs number 800
Returns

Promise<void>

Inherited from

Renderer.animateTo3DParams

clearCart()

clearCart(): void

Clears all items from the cart.

Returns

void

Inherited from

Renderer.clearCart

clearSectorHighlight()

clearSectorHighlight(): void

Returns

void

Inherited from

Renderer.clearSectorHighlight

destroy()

destroy(): void

Destroys the renderer instance, cleaning up all resources.

Returns

void

Inherited from

Renderer.destroy

disableSeatsByIds()

disableSeatsByIds(ids, options?): void

Disables seats by their IDs, making them unavailable for selection.

Parameters
Parameter Type Description
ids number[] Array of internal seat IDs
options? { resetAll?: boolean; } Optional configuration object.
options.resetAll? boolean If true (default), all seats not in the ids array will be unlocked. If false, only the seats in the ids array will be affected, and the locked state of other seats will remain unchanged.
Returns

void

Inherited from

Renderer.disableSeatsByIds

disableSeatsByKeys()

disableSeatsByKeys(keys): void

Disables seats by their keys, making them unavailable for selection.

Parameters
Parameter Type Description
keys string[] Array of composite seat keys
Returns

void

Inherited from

Renderer.disableSeatsByKeys

disableSectionsByIds()

disableSectionsByIds(ids): void

Parameters
Parameter Type
ids number[]
Returns

void

Inherited from

Renderer.disableSectionsByIds

disableSvgSectionsByIds()

disableSvgSectionsByIds(ids, options?): void

Disables SVG sections by their IDs.

Parameters
Parameter Type Description
ids number[] -
options? { resetAll?: boolean; } Optional configuration
options.resetAll? boolean Whether to reset all sections before disabling
Returns

void

Inherited from

Renderer.disableSvgSectionsByIds

disableSvgSectionsByNames()

disableSvgSectionsByNames(names, options?): void

Disables SVG sections by their names.

Parameters
Parameter Type Description
names string[] -
options? { resetAll?: boolean; } Optional configuration
options.resetAll? boolean Whether to reset all sections before disabling
Returns

void

Inherited from

Renderer.disableSvgSectionsByNames

enableSeatsByIds()

enableSeatsByIds(ids): void

Marks disabled seats as available.

Parameters
Parameter Type Description
ids number[] Array of internal seat IDs
Returns

void

Inherited from

Renderer.enableSeatsByIds

enableSectionsByIds()

enableSectionsByIds(): void

Returns

void

Inherited from

Renderer.enableSectionsByIds

enableSvgSectionsByIds()

enableSvgSectionsByIds(ids): void

Enables SVG sections by their IDs.

Parameters
Parameter Type
ids number[]
Returns

void

Inherited from

Renderer.enableSvgSectionsByIds

enableSvgSectionsByNames()

enableSvgSectionsByNames(names): void

Enables SVG sections by their names.

Parameters
Parameter Type
names string[]
Returns

void

Inherited from

Renderer.enableSvgSectionsByNames

filterSeatsByIds()

filterSeatsByIds(ids): void

Marks seats as filtered.

Parameters
Parameter Type Description
ids number[] Array of internal seat IDs
Returns

void

Inherited from

Renderer.filterSeatsByIds

filterSeatsByKeys()

filterSeatsByKeys(keys): void

Marks seats as filtered.

Parameters
Parameter Type Description
keys string[] Array of composite seat keys
Returns

void

Inherited from

Renderer.filterSeatsByKeys

filterSvgSectionsByIds()

filterSvgSectionsByIds(ids, options?): void

Parameters
Parameter Type
ids number[]
options? { resetAll?: boolean; }
options.resetAll? boolean
Returns

void

Inherited from

Renderer.filterSvgSectionsByIds

get3DViewParams()

get3DViewParams(): object

Gets current 3D view parameters

Returns

object

enable3DView

enable3DView: boolean

perspectiveZ

perspectiveZ: number

rotationZ

rotationZ: number

tiltX

tiltX: number

Inherited from

Renderer.get3DViewParams

getCart()

getCart(): ICart

Gets the current cart state.

Returns

ICart

Returns selected seats and GA ticket count

Remarks

Seatmap.pro doesn’t support any session mechanisms. Cart is always should be stored on the ticketing system side. For the state management reasons, the Renderer has internal selected seat representation.

Example

Example of cart object:

var cart = {
  seats: [
    { id: 1389563, key: 'Section 1;;5;;14', price: 100 },
    { key: 'Table 3;;1;;1', price: 500 },
    { key: 'Section 2;;5;;1', price: 200 }
  ],
  ga: [
    {
      id: 100500,
      key: 'Table 2',
      price: 200,
      count: 1
    },
    { key: 'Section 5', price: 100, count: 2 }
  ]
};
Inherited from

Renderer.getCart

getCategoryColor()

getCategoryColor(category): undefined | string

Returns category’s color

Parameters
Parameter Type Description
category number Category number
Returns

undefined | string

Inherited from

Renderer.getCategoryColor

getHeight()

getHeight(): number

Gets the height of the renderer.

Returns

number

The height in pixels

Inherited from

Renderer.getHeight

getHighlightAllOutlines()

getHighlightAllOutlines(): boolean

Gets whether all section outlines are currently highlighted.

Returns

boolean

True if all outlines are highlighted, false otherwise

Inherited from

Renderer.getHighlightAllOutlines

getMarkedSeatsIds()

getMarkedSeatsIds(): number[]

Gets the IDs of all marked seats.

Returns

number[]

The IDs of marked seats

Inherited from

Renderer.getMarkedSeatsIds

getMaxZoom()

getMaxZoom(): number

Gets the maximum allowed zoom level.

Returns

number

Inherited from

Renderer.getMaxZoom

getMinZoom()

getMinZoom(): number

Gets the minimum allowed zoom level.

Returns

number

Inherited from

Renderer.getMinZoom

getMode()

getMode(): undefined | string

Returns

undefined | string

Inherited from

Renderer.getMode

getPrices()

getPrices(): IColoredPrice[]

Gets all available prices.

Returns

IColoredPrice[]

Array of available prices

Example

Example of return value:

[
  { id: 63, name: '100', color: '#9C27B0' },
  { id: 64, name: '200', color: '#2196F3' }
];
Inherited from

Renderer.getPrices

getRotationAnimationId()

getRotationAnimationId(): null | number

Gets the current rotation animation ID

Returns

null | number

Inherited from

Renderer.getRotationAnimationId

getRowById()

getRowById(id): IRowDTO

Parameters
Parameter Type
id number
Returns

IRowDTO

Row data

Inherited from

Renderer.getRowById

getRows()

getRows(): IRowDTO[]

Returns

IRowDTO[]

Rows data array

Inherited from

Renderer.getRows

getSeatIds()

getSeatIds(seats): number[]

Parameters
Parameter Type
seats number[] | string[] | ISeat[]
Returns

number[]

Inherited from

Renderer.getSeatIds

getSeats()

getSeats(): ISeatDTO[]

Gets all seats in the venue.

Returns

ISeatDTO[]

Seats data array

Inherited from

Renderer.getSeats

getSeatSelection()

getSeatSelection(): IExtendedSeat[]

Returns selected seats

Returns

IExtendedSeat[]

Inherited from

Renderer.getSeatSelection

getSections()

getSections(): ISector[]

Returns sections info

Returns

ISector[]

Inherited from

Renderer.getSections

getSectionsKeys()

getSectionsKeys(): string[]

Returns sections ids

Returns

string[]

Inherited from

Renderer.getSectionsKeys

getSectionsWithCoords()

getSectionsWithCoords(): ISectionWithCoords[]

Returns

ISectionWithCoords[]

Inherited from

Renderer.getSectionsWithCoords

getSelectedGa()

getSelectedGa(): undefined | ISector

Returns

undefined | ISector

Inherited from

Renderer.getSelectedGa

getSvgSectionBySelection()

getSvgSectionBySelection(): ISectorDTO[]

Gets SVG sections by the current selection.

Returns

ISectorDTO[]

The selected SVG sections

Inherited from

Renderer.getSvgSectionBySelection

getVersion()

getVersion(): string

Gets the renderer version.

Returns

string

The version string

Inherited from

Renderer.getVersion

getVisibleSeats()

getVisibleSeats(): ISeat[]

Returns only visible seats with coords relative to canvas

Returns

ISeat[]

Inherited from

Renderer.getVisibleSeats

getWidth()

getWidth(): number

Gets the width of the renderer.

Returns

number

The width in pixels

Inherited from

Renderer.getWidth

getZoom()

getZoom(): number

Gets the current zoom level.

Returns

number

Inherited from

Renderer.getZoom

hideMinimap()

hideMinimap(): void

Hides the minimap.

Returns

void

Inherited from

Renderer.hideMinimap

highlightSector()

highlightSector(id): void

Parameters
Parameter Type
id undefined | number
Returns

void

Inherited from

Renderer.highlightSector

initCart()

initCart(cart): void

Initializes the cart with the provided cart data.

Parameters
Parameter Type Description
cart ICart Cart state
Returns

void

Remarks

In a case of page reload you should initialize the saved state with this method.

Cart initialization is available right after component initialization.

Sales page must save the cart state in the given format to support the page reload feature.

Example
var cart = {
  seats: [
    {
      id: 1389563,
      key: 'Section 1;;5;;14',
      price: 100
    },
    { key: 'Table 3;;1;;1', price: 500 },
    { key: 'Section 2;;5;;1', price: 200 }
  ],
  ga: [
    {
      id: 100500,
      key: 'Table 2',
      price: 200,
      count: 1
    },
    { key: 'Section 5', price: 100, count: 2 }
  ]
};

renderer.initCart(cart);
Inherited from

Renderer.initCart

isRotationAnimationRunning()

isRotationAnimationRunning(): boolean

Checks if a rotation animation is currently running

Returns

boolean

Inherited from

Renderer.isRotationAnimationRunning

loadEvent()

loadEvent(eventId, sectorId?): Promise<void>

Loads event’s schema and prices.

Fetches the schema, prices, and row SVG data for the specified event. Initializes analytics tracking and sets up event handlers for user interactions.

Parameters
Parameter Type Description
eventId string Event GUID to load
sectorId? number Optional sector ID to show only a specific sector
Returns

Promise<void>

A promise that resolves when the data fetching is completed

Example
var eventId = 'a4a75361-7823-4847-bf22-336843022e80';
renderer.loadEvent(eventId).then(function() {
  renderer.initCart(cart);
});

// Or with the onSchemaDataLoaded event
var renderer = new SeatmapBookingRenderer(element, {
  publicKey: 'your-public-key',
  onSchemaDataLoaded: function() {
    console.log('Schema data loaded successfully');
    renderer.initCart(cart);
  }
});
renderer.loadEvent(eventId);
removeFilter()

removeFilter(ids?): void

Marks disabled seats as available.

Parameters
Parameter Type Description
ids? number[] Array of internal seat IDs
Returns

void

Inherited from

Renderer.removeFilter

removeFilterSvgSectionsByIds()

removeFilterSvgSectionsByIds(ids?): void

Parameters
Parameter Type
ids? number[]
Returns

void

Inherited from

Renderer.removeFilterSvgSectionsByIds

removeGaFromCart()

removeGaFromCart(removedGa): void

Removes a general admission ticket from the cart.

Parameters
Parameter Type Description
removedGa IRemovedCartGa removed GA cart item
Returns

void

Remarks

This method can be used when onSectorClick was fired and developer wants to handle custom remove GA seats control. You can remove GA from cart.

Example
renderer.removeGaFromCart({
  sectorId: 100500,
  price: 200
});
Inherited from

Renderer.removeGaFromCart

removeSeatsFromCartByIds()

removeSeatsFromCartByIds(ids): void

Removes seats from the cart by their IDs.

Parameters
Parameter Type Description
ids number[] Array of internal seat IDs
Returns

void

Inherited from

Renderer.removeSeatsFromCartByIds

removeSeatsFromCartByKeys()

removeSeatsFromCartByKeys(keys): void

Removes seats from internal cart.

Parameters
Parameter Type Description
keys string[] Array of composite seat keys
Returns

void

Inherited from

Renderer.removeSeatsFromCartByKeys

resetCategories()

resetCategories(): void

Returns

void

Inherited from

Renderer.resetCategories

seatKeysToIds()

seatKeysToIds(keys): number[]

Converts seat keys to seat IDs.

Parameters
Parameter Type Description
keys string[] Array of composite seat keys
Returns

number[]

Inherited from

Renderer.seatKeysToIds

seatToExtendedSeat()

seatToExtendedSeat(seat): IExtendedSeat

Parameters
Parameter Type
seat ISeat
Returns

IExtendedSeat

Inherited from

Renderer.seatToExtendedSeat

setExternalPrices()

setExternalPrices(seatsPrices?): void

Sets external price information for seats.

Parameters
Parameter Type
seatsPrices? ISeatPriceScheme[]
Returns

void

Remarks

In case you need to use prices from external resources you should execute this method. External prices can be passed as an argument or as a seatsPrices property within the settings.

Inherited from

Renderer.setExternalPrices

setGaCategory()

setGaCategory(sectionId, category): void

Parameters
Parameter Type
sectionId number
category undefined | number
Returns

void

Inherited from

Renderer.setGaCategory

setGroupSize()

setGroupSize(groupSize): void

Sets the group size for group selection.

Parameters
Parameter Type Description
groupSize number The size of the group
Returns

void

Inherited from

Renderer.setGroupSize

setHeight()

setHeight(height): void

Parameters
Parameter Type
height number
Returns

void

Inherited from

Renderer.setHeight

setHighlightAllOutlines()

setHighlightAllOutlines(highlight): void

Sets whether all section outlines should be highlighted.

Parameters
Parameter Type Description
highlight boolean If true, all section outlines will be highlighted with a border
Returns

void

Inherited from

Renderer.setHighlightAllOutlines

setMinimapPinsEnabled()

setMinimapPinsEnabled(enabled): void

Enables or disables cart pins on the minimap at runtime.

Parameters
Parameter Type
enabled boolean
Returns

void

Inherited from

Renderer.setMinimapPinsEnabled

setMinimapPosition()

setMinimapPosition(position): void

Sets the minimap position.

Parameters
Parameter Type Description
position "top-left" | "top-right" | "bottom-left" | "bottom-right" The position to set (’top-left’, ’top-right’, ‘bottom-left’, ‘bottom-right’)
Returns

void

Inherited from

Renderer.setMinimapPosition

setMode()

setMode(mode): boolean

Sets the interaction mode for the renderer.

Parameters
Parameter Type Description
mode string The mode to set
Returns

boolean

Whether the mode was set successfully

Inherited from

Renderer.setMode

setSeatsCategory()

setSeatsCategory(seats, category, color?): void

Parameters
Parameter Type
seats number[] | string[] | ISeat[]
category number
color? string
Returns

void

Inherited from

Renderer.setSeatsCategory

setSeatSelection()

setSeatSelection(seats): void

Parameters
Parameter Type
seats number[] | string[] | ISeat[]
Returns

void

Inherited from

Renderer.setSeatSelection

setSectionSelection()

setSectionSelection(sections?): void

Parameters
Parameter Type
sections? number[] | string[]
Returns

void

Inherited from

Renderer.setSectionSelection

setSelectedGa()

setSelectedGa(ga?): void

Parameters
Parameter Type
ga? string | number
Returns

void

Inherited from

Renderer.setSelectedGa

showMinimap()

showMinimap(): void

Shows the minimap.

Returns

void

Inherited from

Renderer.showMinimap

stopRotationAnimation()

stopRotationAnimation(): void

Stops the current rotation animation

Returns

void

Inherited from

Renderer.stopRotationAnimation

toggleMinimap()

toggleMinimap(): void

Toggles the minimap visibility.

Returns

void

Inherited from

Renderer.toggleMinimap

update3DView()

update3DView(options): void

Updates 3D view parameters for dynamic perspective changes. Only works when enable3DView is true and WebGL is enabled.

Parameters
Parameter Type
options { perspectiveZ?: number; rotationZ?: number; tiltX?: number; }
options.perspectiveZ? number
options.rotationZ? number
options.tiltX? number
Returns

void

Inherited from

Renderer.update3DView

updateSeatLocks()

updateSeatLocks(filter): void

Updates the lock status of seats based on the provided filter.

Parameters
Parameter Type Description
filter SeatFilter Function should return true for seats to lock
Returns

void

Example

For example, you can create handler to prevent selection of seats with different special state:

const handleCartChange = (cart, prevCart) => {
  if (!cart.seats.length) {
    // Unlock all the seats if the cart is empty
    renderer.updateSeatLocks(s => false);
  } else if (!prevCart || !prevCart.seats.length) {
    // Lock seats with different special state
    const seat = cart.seats[0];
    renderer.updateSeatLocks(
      s => (s.special && s.special.s1) !== (seat.special && seat.special.s1)
    );
  }
};
Inherited from

Renderer.updateSeatLocks

viewSection()

viewSection(section): void

Parameters
Parameter Type
section ISection
Returns

void

Inherited from

Renderer.viewSection

zoomIn()

zoomIn(): void

Increases the zoom level by one step.

Returns

void

Inherited from

Renderer.zoomIn

zoomOut()

zoomOut(): void

Decreases the zoom level by one step.

Returns

void

Inherited from

Renderer.zoomOut

zoomTo()

zoomTo(newScaleCss, options?): void

Convenience method to zoom with optional destination center point. If destination is provided, it focuses the view so that destination becomes the viewport center.

Parameters
Parameter Type
newScaleCss number
options? { destination?: IPoint; durationMs?: number; }
options.destination? IPoint
options.durationMs? number
Returns

void

Inherited from

Renderer.zoomTo

zoomToDestination()

zoomToDestination(newScale, destination, duration?): void

Parameters
Parameter Type
newScale number
destination IPoint
duration? number
Returns

void

Inherited from

Renderer.zoomToDestination

zoomToFit()

zoomToFit(): void

Adjusts the zoom level to fit the entire venue in the viewport.

Returns

void

Inherited from

Renderer.zoomToFit

zoomToSection()

zoomToSection(section, options?): void

Parameters
Parameter Type
section string | number
options? { focus?: boolean; }
options.focus? boolean
Returns

void

Inherited from

Renderer.zoomToSection

Interfaces

IAdminRendererSettings

Configuration settings for the renderer. Defines various options that control the behavior and appearance of the renderer.

Hierarchy

View Summary

Extends

Properties

Property Type Description Overrides Inherited from
backgroundLoadStepTime? number Delay time for loading the next background in milliseconds. - IRendererSettings.backgroundLoadStepTime
baseUrl? string Custom API base URL that overrides the environment-based URL. - -
debounceDelay? number Delay in milliseconds for debounced events. - IRendererSettings.debounceDelay
disableCartInteractions? boolean If true, disables cart changed when clicking on sections. - IRendererSettings.disableCartInteractions
disableOutlinesInHelicopterView? boolean - - IRendererSettings.disableOutlinesInHelicopterView
disableZoomToEmptySpace? boolean If true, disables zoom when clicking on empty space. - IRendererSettings.disableZoomToEmptySpace
enable3DView? boolean If true, enables 3D view mode for enhanced visualization. - IRendererSettings.enable3DView
env? string Environment setting that determines which API endpoint to use. Can be ’local’, ‘stage’, or ‘production’ (default). IRendererSettings.env -
groupSize? number Number of seats to select as a group. - IRendererSettings.groupSize
height? number Fixed height for the renderer in pixels. - IRendererSettings.height
hideSeats? boolean If true, hides all seats from view. - IRendererSettings.hideSeats
highlightAllOutlines? boolean If true, highlights all section outlines with a border. - IRendererSettings.highlightAllOutlines
initialPadding? number Initial padding around the venue when first loaded. - IRendererSettings.initialPadding
lockedSeatsFilter? (seat) => boolean - - IRendererSettings.lockedSeatsFilter
minimap? IMinimapSettings Minimap configuration settings. - IRendererSettings.minimap
onBeforeSeatDraw? (event) => ISeatStyle You can control seats’ styling by returning custom style for each seat - IRendererSettings.onBeforeSeatDraw
onCartChange? (cart, prevCart?) => void Fires when the cart was modified. Remarks Cart state is passed as a param to the handler (see ICart). - IRendererSettings.onCartChange
onPan? (delta, isFinish?) => void Fires while panning. - IRendererSettings.onPan
onRedrawEnd? () => void Fires when component full redrawing ends. - IRendererSettings.onRedrawEnd
onRedrawStart? () => void Fires when component full redrawing starts. - IRendererSettings.onRedrawStart
onSchemaDataLoaded? () => void Fires when schema data has been successfully loaded and processed. Remarks This event is triggered after the schema data is fully loaded and all internal processing is complete. It can be used to perform actions that depend on the schema being fully initialized. - IRendererSettings.onSchemaDataLoaded
onSeatDebouncedEnter? (seat) => void Same as onSeatMouseEnter but with debounce. Remarks Seat is passed as a param to the handler (see IExtendedSeat). - IRendererSettings.onSeatDebouncedEnter
onSeatDeselect? (seat) => boolean | void | Promise<boolean | void> Fires when the user deselects a seat. Remarks Seat is passed as a param to the handler (see IExtendedSeat). To cancel seat deselection you can return false or Promise resolving to false. - IRendererSettings.onSeatDeselect
onSeatMouseEnter? (seat) => void Rises when the mouse pointer moves above a seat. Remarks Seat is passed as a param to the handler (see IExtendedSeat). - IRendererSettings.onSeatMouseEnter
onSeatMouseLeave? () => void Fires when the mouse pointer leaves a seat. - IRendererSettings.onSeatMouseLeave
onSeatsDeselect? (seats) => void Fires when the user deselects a seat or seats. Remarks Seats are passed as a param to the handler (see ISeat). - IRendererSettings.onSeatsDeselect
onSeatSelect? (seat) => boolean | void | Promise<boolean | void> Fires when the user marks a seat as selected. Remarks Seat is passed as a param to the handler (see IExtendedSeat). To cancel seat selection you can return false or Promise resolving to false. - IRendererSettings.onSeatSelect
onSeatSelectionChange? () => void Fires after seat selection was updated. - IRendererSettings.onSeatSelectionChange
onSeatsSelect? (seats) => void Fires when the user marks a seat or seats as selected. Remarks Seats are passed as a param to the handler (see ISeat). - IRendererSettings.onSeatsSelect
onSeatsSelectionChange? (seats) => void Fires after seats selection was updated. - IRendererSettings.onSeatsSelectionChange
onSectionClick? (section) => void Fires when the user clicks on a section. Remarks Section is passed as a param to the handler (see ISection). - IRendererSettings.onSectionClick
onSectorClick? (section) => void Fires when the user clicks on a section. Deprecated Use onSectionClick instead - IRendererSettings.onSectorClick
onSectorMouseEnter? (section) => void Fires when the mouse pointer moves above a section. Remarks Section is passed as a param to the handler (see ISection). - IRendererSettings.onSectorMouseEnter
onSectorMouseLeave? () => void Fires when the mouse pointer leaves a section. - IRendererSettings.onSectorMouseLeave
onZoomEnd? (newZoom, oldZoom?) => void Fires after the zoom animation ended. - IRendererSettings.onZoomEnd
onZoomStart? (newZoom, oldZoom) => void Fires before the zoom animation started. - IRendererSettings.onZoomStart
padding? number Padding around the venue during normal operation. - IRendererSettings.padding
publicKey? string Public API key for authentication. - -
seatSelectionMinZoom? number Minimum zoom level required to enable seat selection. Deprecated Use visibilitySettings instead - IRendererSettings.seatSelectionMinZoom
seatsPrices? ISeatPriceScheme[] External price information for seats. - IRendererSettings.seatsPrices
selectionLimit? number Maximum number of seats that can be selected. - IRendererSettings.selectionLimit
showDebugLayer? boolean If true, shows the debug overlay layer (diagnostic lines from sections to venue center). - IRendererSettings.showDebugLayer
showOutlineLayerOnAnimation? boolean If true, shows the outline layer during animations. - IRendererSettings.showOutlineLayerOnAnimation
showRows? boolean If true, shows row labels. - IRendererSettings.showRows
showUnavailableOutlines? boolean If true, shows outlines for unavailable seats. - IRendererSettings.showUnavailableOutlines
switchToWebGL? boolean If true, uses WebGL for rendering instead of Canvas. - IRendererSettings.switchToWebGL
theme? IRendererTheme Theme settings for the renderer. - IRendererSettings.theme
transformAnimationDuration? number Duration of transform animations in milliseconds. - IRendererSettings.transformAnimationDuration
visibilitySettings? IVisibilitySettings Option to configure visibility settings - IRendererSettings.visibilitySettings
zoomAnimationDuration? number Duration of zoom animations in milliseconds. - IRendererSettings.zoomAnimationDuration
zoomSettings? IZoomSettings Option to configure zoom settings - IRendererSettings.zoomSettings

IBaseSeat

Base interface for seat properties.

Hierarchy

View Summary

Extended by

Properties

Property Type Description
id number The unique identifier of the seat.
isAccessible? boolean Whether the seat is accessible for people with disabilities.
isMarked? boolean Whether the seat is marked with a special status.
name string The name or number of the seat.
rowId number The ID of the row this seat belongs to.
sectorId number The ID of the sector this seat belongs to.
x number The X coordinate of the seat within its section.
y number The Y coordinate of the seat within its section.

IBaseSector

Base interface for sector properties.

Hierarchy

View Summary

Extended by

Properties

Property Type Description
angle? null | number The rotation angle of the sector in degrees.
disabled? boolean Whether the sector is disabled and cannot be interacted with.
filtered? boolean Whether the sector is filtered out by current filter criteria.
guid? string The globally unique identifier for the sector.
id number The unique identifier of the sector.
isGa boolean Whether this is a general admission (GA) sector.
name string The name of the sector.
selected? boolean Whether the sector is currently selected.
type? null | string The type of the sector.

IBasicSeatStyle

Hierarchy

View Summary

Extended by

Properties

Property Type
color string
imageId? string
seatName? object
seatName.color string
seatName.font string
shadow? object
shadow.blur number
shadow.color string
shadow.x? number
shadow.y? number
size number
stroke? object
stroke.align "center" | "inside" | "outside"
stroke.color string
stroke.width number

IBeforeSeatDrawEvent

Interface for the event data passed to the onBeforeSeatDraw callback. Contains information about the seat being drawn and its current state.

Properties

Property Type Description
context Context The rendering context.
seat ISeat The seat being drawn.
state SeatInteractionState The current interaction state of the seat.
style ISeatStyle The default style that will be applied to the seat.

IBookingRendererSettings

Configuration settings for the renderer. Defines various options that control the behavior and appearance of the renderer.

Hierarchy

View Summary

Extends

Properties

Property Type Default value Description Overrides Inherited from
backgroundLoadStepTime? number 0 Sets the delay time for loading the next background. IRendererSettings.backgroundLoadStepTime -
baseUrl? string undefined Custom API base URL that overrides the environment-based URL. - -
debounceDelay? number undefined Delay in milliseconds for debounced events. - IRendererSettings.debounceDelay
disableCartInteractions? boolean undefined If true, disables cart changed when clicking on sections. - IRendererSettings.disableCartInteractions
disableOutlinesInHelicopterView? boolean undefined - - IRendererSettings.disableOutlinesInHelicopterView
disableZoomToEmptySpace? boolean false If set to true, zoom is disabled when clicking into empty space. IRendererSettings.disableZoomToEmptySpace -
enable3DView? boolean undefined If true, enables 3D view mode for enhanced visualization. - IRendererSettings.enable3DView
env? "stage" | "local" | "production" undefined Environment setting that determines which API endpoint to use. Can be ’local’, ‘stage’, or ‘production’ (default). IRendererSettings.env -
groupSize? number undefined Number of seats to select as a group. - IRendererSettings.groupSize
height? number undefined Fixed height for the renderer in pixels. - IRendererSettings.height
hideSeats? boolean undefined If true, hides all seats from view. - IRendererSettings.hideSeats
highlightAllOutlines? boolean undefined If true, highlights all section outlines with a border. - IRendererSettings.highlightAllOutlines
initialPadding? number undefined Initial padding around the venue when first loaded. - IRendererSettings.initialPadding
lockedSeatsFilter? (seat) => boolean undefined - - IRendererSettings.lockedSeatsFilter
minimap? IMinimapSettings undefined Minimap configuration settings. - IRendererSettings.minimap
onBeforeSeatDraw? (event) => ISeatStyle undefined You can control seats’ styling by returning custom style for each seat - IRendererSettings.onBeforeSeatDraw
onCartChange? (cart, prevCart?) => void undefined Fires when the cart was modified. Remarks Cart state is passed as a param to the handler (see ICart). - IRendererSettings.onCartChange
onPan? (delta, isFinish?) => void undefined Fires while panning. - IRendererSettings.onPan
onRedrawEnd? () => void undefined Fires when component full redrawing ends. - IRendererSettings.onRedrawEnd
onRedrawStart? () => void undefined Fires when component full redrawing starts. - IRendererSettings.onRedrawStart
onSchemaDataLoaded? () => void undefined Fires when schema data has been successfully loaded and processed. Remarks This event is triggered after the schema data is fully loaded and all internal processing is complete. It can be used to perform actions that depend on the schema being fully initialized. - IRendererSettings.onSchemaDataLoaded
onSeatDebouncedEnter? (seat) => void undefined Same as onSeatMouseEnter but with debounce. Remarks Seat is passed as a param to the handler (see IExtendedSeat). - IRendererSettings.onSeatDebouncedEnter
onSeatDeselect? (seat) => boolean | void | Promise<boolean | void> undefined Fires when the user deselects a seat. Remarks Seat is passed as a param to the handler (see IExtendedSeat). To cancel seat deselection you can return false or Promise resolving to false. - IRendererSettings.onSeatDeselect
onSeatMouseEnter? (seat) => void undefined Rises when the mouse pointer moves above a seat. Remarks Seat is passed as a param to the handler (see IExtendedSeat). - IRendererSettings.onSeatMouseEnter
onSeatMouseLeave? () => void undefined Fires when the mouse pointer leaves a seat. - IRendererSettings.onSeatMouseLeave
onSeatsDeselect? (seats) => void undefined Fires when the user deselects a seat or seats. Remarks Seats are passed as a param to the handler (see ISeat). - IRendererSettings.onSeatsDeselect
onSeatSelect? (seat) => boolean | void | Promise<boolean | void> undefined Fires when the user marks a seat as selected. Remarks Seat is passed as a param to the handler (see IExtendedSeat). To cancel seat selection you can return false or Promise resolving to false. - IRendererSettings.onSeatSelect
onSeatSelectionChange? () => void undefined Fires after seat selection was updated. - IRendererSettings.onSeatSelectionChange
onSeatsSelect? (seats) => void undefined Fires when the user marks a seat or seats as selected. Remarks Seats are passed as a param to the handler (see ISeat). - IRendererSettings.onSeatsSelect
onSeatsSelectionChange? (seats) => void undefined Fires after seats selection was updated. - IRendererSettings.onSeatsSelectionChange
onSectionClick? (section) => void undefined Fires when the user clicks on a section. Remarks Section is passed as a param to the handler (see ISection). - IRendererSettings.onSectionClick
onSectorClick? (section) => void undefined Fires when the user clicks on a section. Deprecated Use onSectionClick instead - IRendererSettings.onSectorClick
onSectorMouseEnter? (section) => void undefined Fires when the mouse pointer moves above a section. Remarks Section is passed as a param to the handler (see ISection). - IRendererSettings.onSectorMouseEnter
onSectorMouseLeave? () => void undefined Fires when the mouse pointer leaves a section. - IRendererSettings.onSectorMouseLeave
onZoomEnd? (newZoom, oldZoom?) => void undefined Fires after the zoom animation ended. - IRendererSettings.onZoomEnd
onZoomStart? (newZoom, oldZoom) => void undefined Fires before the zoom animation started. - IRendererSettings.onZoomStart
padding? number undefined Padding around the venue during normal operation. - IRendererSettings.padding
publicKey? string undefined Public API key for authentication. - -
seatSelectionMinZoom? number undefined Minimum zoom level required to enable seat selection. Deprecated Use visibilitySettings instead - IRendererSettings.seatSelectionMinZoom
seatsPrices? ISeatPriceScheme[] undefined External price information for seats. - IRendererSettings.seatsPrices
selectionLimit? number undefined Maximum number of seats that can be selected. - IRendererSettings.selectionLimit
showDebugLayer? boolean undefined If true, shows the debug overlay layer (diagnostic lines from sections to venue center). - IRendererSettings.showDebugLayer
showOutlineLayerOnAnimation? boolean undefined If true, shows the outline layer during animations. - IRendererSettings.showOutlineLayerOnAnimation
showRows? boolean undefined If true, shows row labels. - IRendererSettings.showRows
showUnavailableOutlines? boolean undefined If true, shows outlines for unavailable seats. - IRendererSettings.showUnavailableOutlines
switchToWebGL? boolean false If set to true, renderer will switch to WebGL. IRendererSettings.switchToWebGL -
theme? IRendererTheme undefined Theme settings for the renderer. - IRendererSettings.theme
transformAnimationDuration? number undefined Duration of transform animations in milliseconds. - IRendererSettings.transformAnimationDuration
visibilitySettings? IVisibilitySettings undefined Option to configure visibility settings - IRendererSettings.visibilitySettings
zoomAnimationDuration? number undefined Duration of zoom animations in milliseconds. - IRendererSettings.zoomAnimationDuration
zoomSettings? IZoomSettings undefined Option to configure zoom settings - IRendererSettings.zoomSettings

ICart

Interface representing the shopping cart containing selected seats and GA items.

Properties

Property Type Description
ga ICartGa[] Array of general admission items in the cart.
seats ICartSeat[] Array of selected seats in the cart.

ICartGa

Interface representing a general admission (GA) item in the shopping cart.

Properties

Property Type Description
count number The number of GA tickets in this item.
key string The unique key for the GA item.
price? number The price per GA ticket.
sectorId? number The ID of the sector for this GA item.

ICartSeat

Interface representing a seat in the shopping cart.

Hierarchy

View Summary

Extended by

Properties

Property Type Description
id? number The unique identifier of the seat.
key string The unique key for the seat, typically combining section, row, and seat information.
price? number The price of the seat.
special? ISpecialState Special state information for the seat.

IColoredPrice

Hierarchy

View Summary

Extends

Properties

Property Type Inherited from
color string -
id IPriceId IPrice.id
name string IPrice.name

IExtendedSeat

Extended interface for a seat with additional coordinate and descriptive information. Extends ICartSeat with position and section details.

Hierarchy

View Summary

Extends

Properties

Property Type Description Inherited from
ax number The absolute X coordinate of the seat. -
ay number The absolute Y coordinate of the seat. -
id? number The unique identifier of the seat. ICartSeat.id
isAccessible? boolean Whether the seat is accessible for people with disabilities. -
key string The unique key for the seat, typically combining section, row, and seat information. ICartSeat.key
price? number The price of the seat. ICartSeat.price
rowNumber number The row number of the seat. -
seatName string The name or number of the seat. -
sectionId number The ID of the section containing this seat. -
sectionName string The name of the section containing this seat. -
sectorId number The ID of the sector containing this seat. -
special? ISpecialState Special state information for the seat. ICartSeat.special
x number The X coordinate of the seat. -
y number The Y coordinate of the seat. -

IMinimapSettings

Minimap configuration settings.

Properties

Property Type Description
backgroundColor? string Background color of the minimap.
borderColor? string Border color of the minimap.
borderWidth? number Border width in pixels. Default 2
enabled boolean Whether the minimap is enabled.
margin? number Margin from the edge of the screen in pixels. Default 16
offscreenColor? string Color of the dim overlay outside the viewport on the minimap. Default '#000000'
offscreenOpacity? number Opacity of the dim overlay outside the viewport on the minimap (0..1). Default 0.4
opacity? number Opacity of the minimap. Default 0.8
position? MinimapPosition Position of the minimap on the screen. Default 'bottom-right'
showCartPins? boolean Show cart pins on the minimap. Default true
viewportColor? string Color of the viewport indicator rectangle. Default '#FF5722'
width? number Width of the minimap in pixels. Height is calculated automatically based on aspect ratio. Default 200

IPoint

Properties

Property Modifier Type
x readonly number
y readonly number

IPrice

Hierarchy

View Summary

Extended by

Properties

Property Type
id IPriceId
name string

IRemovedCartGa

Interface representing a removed general admission (GA) item from the cart.

Properties

Property Type Description
price? number The price of the removed GA item.
sectorId number The ID of the sector for the removed GA item.

IRenderer

Interface for the base Renderer functionality. Defines the core methods and properties that all renderer implementations must provide.

Properties

Property Type Description
addGaToCart (ga) => void Adds a general admission ticket to the cart.
addSeatsToCart (seats) => void Adds seats to the cart.
animateSequence (steps) => Promise<void> Runs a sequence of composite animations. Each step can include zoom, pan (via destination), and rotation.
clearCart () => void Clears all items from the cart.
destroy () => void Destroys the renderer instance, cleaning up all resources.
disableSeatsByIds (seatIds) => void Disables seats by their IDs, making them unavailable for selection.
disableSeatsByKeys (keys) => void Disables seats by their keys, making them unavailable for selection.
disableSvgSectionsByIds (sectionIds, options?) => void Disables SVG sections by their IDs.
disableSvgSectionsByNames (sectionNames, options?) => void Disables SVG sections by their names.
enableSvgSectionsByIds (sectionIds) => void Enables SVG sections by their IDs.
enableSvgSectionsByNames (sectionNames) => void Enables SVG sections by their names.
getCart () => ICart Gets the current cart state.
getHighlightAllOutlines () => boolean Gets whether all section outlines are currently highlighted.
getMarkedSeatsIds () => number[] Gets the IDs of all marked seats.
getMaxZoom () => number Gets the maximum allowed zoom level.
getMinZoom () => number Gets the minimum allowed zoom level.
getPrices () => IColoredPrice[] Gets all available prices.
getSeats () => ISeatDTO[] Gets all seats in the venue.
getSvgSectionBySelection () => ISectorDTO[] Gets SVG sections by the current selection.
getVersion () => string Gets the renderer version.
getZoom () => number Gets the current zoom level.
hideMinimap? () => void Hides the minimap.
initCart (cart) => void Initializes the cart with the provided cart data.
removeGaFromCart (removedGa) => void Removes a general admission ticket from the cart.
removeSeatsFromCartByIds (seatIds) => void Removes seats from the cart by their IDs.
seatKeysToIds (keys) => number[] Converts seat keys to seat IDs.
setExternalPrices (seatsPrices?) => void Sets external price information for seats.
setGroupSize (groupSize) => void Sets the group size for group selection.
setHighlightAllOutlines (highlight) => void Sets whether all section outlines should be highlighted.
setMinimapPosition? (position) => void Sets the minimap position.
showMinimap? () => void Shows the minimap.
toggleMinimap? () => void Toggles the minimap visibility.
updateSeatLocks (filter) => void Updates the lock status of seats based on the provided filter.
zoomIn () => void Increases the zoom level by one step.
zoomOut () => void Decreases the zoom level by one step.
zoomTo (newScale, options?) => void Convenience method to zoom with optional destination center point. If destination is provided, it focuses the view so that destination becomes the viewport center.
zoomToFit () => void Adjusts the zoom level to fit the entire venue in the viewport.

IRendererSeatStyleSettings

Properties

Property Type
default? ISeatStyle
error? ISeatStyle
filtered? ISeatStyle
hovered? ISeatStyle
loading? ISeatStyle
selected? ISeatStyle
unavailable? ISeatStyle

IRendererSettings

Configuration settings for the renderer. Defines various options that control the behavior and appearance of the renderer.

Hierarchy

View Summary

Extended by

Properties

Property Type Description
backgroundLoadStepTime? number Delay time for loading the next background in milliseconds.
debounceDelay? number Delay in milliseconds for debounced events.
disableCartInteractions? boolean If true, disables cart changed when clicking on sections.
disableOutlinesInHelicopterView? boolean -
disableZoomToEmptySpace? boolean If true, disables zoom when clicking on empty space.
enable3DView? boolean If true, enables 3D view mode for enhanced visualization.
env? string Environment setting that determines which API endpoint to use. Can be ’local’, ‘stage’, or ‘production’ (default).
groupSize? number Number of seats to select as a group.
height? number Fixed height for the renderer in pixels.
hideSeats? boolean If true, hides all seats from view.
highlightAllOutlines? boolean If true, highlights all section outlines with a border.
initialPadding? number Initial padding around the venue when first loaded.
lockedSeatsFilter? (seat) => boolean -
minimap? IMinimapSettings Minimap configuration settings.
onBeforeSeatDraw? (event) => ISeatStyle You can control seats’ styling by returning custom style for each seat
onCartChange? (cart, prevCart?) => void Fires when the cart was modified. Remarks Cart state is passed as a param to the handler (see ICart).
onPan? (delta, isFinish?) => void Fires while panning.
onRedrawEnd? () => void Fires when component full redrawing ends.
onRedrawStart? () => void Fires when component full redrawing starts.
onSchemaDataLoaded? () => void Fires when schema data has been successfully loaded and processed. Remarks This event is triggered after the schema data is fully loaded and all internal processing is complete. It can be used to perform actions that depend on the schema being fully initialized.
onSeatDebouncedEnter? (seat) => void Same as onSeatMouseEnter but with debounce. Remarks Seat is passed as a param to the handler (see IExtendedSeat).
onSeatDeselect? (seat) => boolean | void | Promise<boolean | void> Fires when the user deselects a seat. Remarks Seat is passed as a param to the handler (see IExtendedSeat). To cancel seat deselection you can return false or Promise resolving to false.
onSeatMouseEnter? (seat) => void Rises when the mouse pointer moves above a seat. Remarks Seat is passed as a param to the handler (see IExtendedSeat).
onSeatMouseLeave? () => void Fires when the mouse pointer leaves a seat.
onSeatsDeselect? (seats) => void Fires when the user deselects a seat or seats. Remarks Seats are passed as a param to the handler (see ISeat).
onSeatSelect? (seat) => boolean | void | Promise<boolean | void> Fires when the user marks a seat as selected. Remarks Seat is passed as a param to the handler (see IExtendedSeat). To cancel seat selection you can return false or Promise resolving to false.
onSeatSelectionChange? () => void Fires after seat selection was updated.
onSeatsSelect? (seats) => void Fires when the user marks a seat or seats as selected. Remarks Seats are passed as a param to the handler (see ISeat).
onSeatsSelectionChange? (seats) => void Fires after seats selection was updated.
onSectionClick? (section) => void Fires when the user clicks on a section. Remarks Section is passed as a param to the handler (see ISection).
onSectorClick? (section) => void Fires when the user clicks on a section. Deprecated Use onSectionClick instead
onSectorMouseEnter? (section) => void Fires when the mouse pointer moves above a section. Remarks Section is passed as a param to the handler (see ISection).
onSectorMouseLeave? () => void Fires when the mouse pointer leaves a section.
onZoomEnd? (newZoom, oldZoom?) => void Fires after the zoom animation ended.
onZoomStart? (newZoom, oldZoom) => void Fires before the zoom animation started.
padding? number Padding around the venue during normal operation.
seatSelectionMinZoom? number Minimum zoom level required to enable seat selection. Deprecated Use visibilitySettings instead
seatsPrices? ISeatPriceScheme[] External price information for seats.
selectionLimit? number Maximum number of seats that can be selected.
showDebugLayer? boolean If true, shows the debug overlay layer (diagnostic lines from sections to venue center).
showOutlineLayerOnAnimation? boolean If true, shows the outline layer during animations.
showRows? boolean If true, shows row labels.
showUnavailableOutlines? boolean If true, shows outlines for unavailable seats.
switchToWebGL? boolean If true, uses WebGL for rendering instead of Canvas.
theme? IRendererTheme Theme settings for the renderer.
transformAnimationDuration? number Duration of transform animations in milliseconds.
visibilitySettings? IVisibilitySettings Option to configure visibility settings
zoomAnimationDuration? number Duration of zoom animations in milliseconds.
zoomSettings? IZoomSettings Option to configure zoom settings

IRendererSvgSectionStylesSetting

Properties

Property Type
default? Pick<ISvgSectionStyle, "sectionName" | "stroke" | "cursor">
filtered? ISvgSectionStyle
hovered? ISvgSectionStyle
selected? ISvgSectionStyle
unavailable? ISvgSectionStyle

IRendererTheme

Properties

Property Type
bgColor? string
colorCategories? string[]
gridStep? number
images? object
priceColors? string[][]
seatStyles? IRendererSeatStyleSettings
svgSectionStyles? IRendererSvgSectionStylesSetting

ISeat

Interface representing a seat in the venue with extended properties. Contains all the base seat properties plus additional properties for rendering and interaction.

Hierarchy

View Summary

Extends

Properties

Property Type Description Inherited from
filtered? boolean Whether the seat is filtered out by current filter criteria. -
id number The unique identifier of the seat. IBaseSeat.id
isAccessible? boolean Whether the seat is accessible for people with disabilities. IBaseSeat.isAccessible
isMarked? boolean Whether the seat is marked with a special status. IBaseSeat.isMarked
locked? boolean Whether the seat is locked and cannot be selected. -
name string The name or number of the seat. IBaseSeat.name
priceId? IPriceId The price ID associated with this seat. -
rowId number The ID of the row this seat belongs to. IBaseSeat.rowId
sectorId number The ID of the sector this seat belongs to. IBaseSeat.sectorId
special? ISpecialState Special state information for the seat. -
state? SeatInteractionState The state of the seat. -
x number The X coordinate of the seat within its section. IBaseSeat.x
y number The Y coordinate of the seat within its section. IBaseSeat.y

ISeatStyle

Hierarchy

View Summary

Extends

Properties

Property Type Inherited from
accessible? IBasicSeatStyle -
color string IBasicSeatStyle.color
imageId? string IBasicSeatStyle.imageId
seatName? object IBasicSeatStyle.seatName
seatName.color string -
seatName.font string -
shadow? object IBasicSeatStyle.shadow
shadow.blur number -
shadow.color string -
shadow.x? number -
shadow.y? number -
size number IBasicSeatStyle.size
stroke? object IBasicSeatStyle.stroke
stroke.align "center" | "inside" | "outside" -
stroke.color string -
stroke.width number -

ISection

Interface representing a section in the venue. A section is a logical grouping of seats or a general admission area.

Properties

Property Type Description
ga boolean Whether this is a general admission section.
id? number The unique ID of the section.
name string The name of the section.
price? number The price for the section.
rect ISectionRect The rectangular bounds of the section.
special? ISpecialState Special state information for the section.
type? null | string The type of the section.

ISectionRect

Interface representing the rectangular bounds of a section.

Properties

Property Type Description
height number The height of the rectangle.
left number The left coordinate of the rectangle.
top number The top coordinate of the rectangle.
width number The width of the rectangle.

ISectionWithCoords

Interface representing a section with additional coordinate information. Extends ISection with absolute x and y coordinates.

Properties

Property Type Description
ga boolean Whether this is a general admission section.
id? number The unique ID of the section.
name string The name of the section.
price? number The price for the section.
rect ISectionRect The rectangular bounds of the section.
special? ISpecialState Special state information for the section.
type? null | string The type of the section.
x number The X coordinate of the section.
y number The Y coordinate of the section.

ISector

Interface representing a sector in the venue with extended properties. Contains all the base sector properties plus additional properties for rendering and interaction.

Hierarchy

View Summary

Extends

Properties

Property Type Description Inherited from
angle? null | number The rotation angle of the sector in degrees. IBaseSector.angle
disabled? boolean Whether the sector is disabled and cannot be interacted with. IBaseSector.disabled
filtered? boolean Whether the sector is filtered out by current filter criteria. IBaseSector.filtered
guid? string The globally unique identifier for the sector. IBaseSector.guid
id number The unique identifier of the sector. IBaseSector.id
isGa boolean Whether this is a general admission (GA) sector. IBaseSector.isGa
name string The name of the sector. IBaseSector.name
priceId? IPriceId The price ID associated with this sector. -
selected? boolean Whether the sector is currently selected. IBaseSector.selected
special? ISpecialState Special state information for the sector. -
type? null | string The type of the sector. IBaseSector.type

ISpecialPrice

Interface representing a special price option for seats, sections, or sectors. Contains information about a named price point with its identifier.

Properties

Property Type Description
name string The name or label of the special price option.
priceId number The unique identifier for this price option.

ISpecialState

Interface representing special state information for seats, sections, or sectors. Contains additional properties that affect rendering or behavior.

Properties

Property Type Description
category? number Category identifier for grouping items with similar special states.
prices? ISpecialPrice[] Array of special prices associated with this item.
s1? number Special state flag 1, used for custom state indicators.

ISvgSectionStyle

Properties

Property Type
bgColor? string
cursor? string
sectionName? object
sectionName.color? string
stroke? object
stroke.color? string
stroke.opacity? number
stroke.width? string

IVisibilitySettings

Properties

Property Type
outlines? IVisibleSetting
seats? IVisibleSetting

IZoomSettings

Properties

Property Type
maxPinchZoom number
maxZoomToFitScale number
minPinchZoom number
presets number[]

Type Aliases

ById<T>

ById<T> = object

Type for mapping objects by their ID.

Type Parameters

Type Parameter
T

Index Signature

[id: number]: T

ColorById<T>

ColorById<T> = object

Type Parameters

Type Parameter
T

Index Signature

[id: string | number]: T

DeepPartial<T>

DeepPartial<T> = T extends object ? { [P in keyof T]?: DeepPartial<T[P]> } : T

Type Parameters

Type Parameter
T

IPriceId

IPriceId = number | string

Type representing a price identifier, which can be either a number or a string. Used to uniquely identify price points in the system.

ISeatPriceScheme

ISeatPriceScheme = object

Type definition for a seat price scheme, which associates a price with a specific seat.

Properties

id?

optional id: number

Optional unique identifier for the price scheme.

price

price: number

The price value for the seat.

priceId

priceId: IPriceId

The price ID reference for the seat.

seatKey

seatKey: string

The unique key of the seat this price applies to.

MinimapPosition

MinimapPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right"

Minimap position options.

Nullable<T>

Nullable<T> = T | null | undefined

Type Parameters

Type Parameter
T

SeatFilter()

SeatFilter = (seat) => boolean

Type definition for a function that filters seats based on custom criteria.

Parameters

Parameter Type Description
seat ISeat The seat to evaluate against the filter criteria

Returns

boolean

A boolean indicating whether the seat passes the filter (true) or not (false)

SeatInteractionState

SeatInteractionState = "default" | "hovered" | "selected" | "unavailable" | "loading" | "error"

Represents the possible interaction states of a seat. Used to determine how a seat should be rendered based on user interaction.

TransformArray

TransformArray = [number, number, number, number, number, number]

Type representing a transformation matrix as a 6-element array.

Variables

defaultZoomSettings

const defaultZoomSettings: IZoomSettings

VERSION

const VERSION: "1.53.0" = '1.53.0'

Package version information This file is automatically updated during the build process

Functions

mergeSettings()

mergeSettings(defaults, settings?): IRendererSettings & Partial<IRendererSettings>

Parameters

Parameter Type
defaults IRendererSettings
settings? Partial<IRendererSettings>

Returns

IRendererSettings & Partial<IRendererSettings>