/w=640,quality=80,fit=scale-down){kind=logo}
Getting started
/w=640,quality=80,fit=scale-down)
Studio Navigation
Design process
/w=640,quality=80,fit=scale-down)
/w=640,quality=80,fit=scale-down)
/w=640,quality=80,fit=scale-down)
/w=640,quality=80,fit=scale-down)
Sharing and embedding
/w=640,quality=80,fit=scale-down)
/w=640,quality=80,fit=scale-down)
/w=640,quality=80,fit=scale-down)
Model API
/w=640,quality=80,fit=scale-down)
/w=640,quality=80,fit=scale-down)
/w=640,quality=80,fit=scale-down)
/w=640,quality=80,fit=scale-down)
Events & Listeners
You can send data to the model, and also listen to events dispatched from the model.
Api Events
enum ApiEvents
INTERACTION_CUSTOM_EVENT = "{custom_event_name}",
MOUSE_MOVE = "mouse_move",
MOUSE_DOWN = "mouse_down", // When click is pressed
MOUSE_CLICK = "mouse_click", // When click is released
CONFIGURATOR_STATE_CHANGE = "configurator_state_change",
SELECTION_STATE_CHANGE = "configurator_state_change",
}Event Responses
{custom_event_name}
Custom events need to be setup directly in studio.
return string | number | boolean | voidconfigurator_state_change
return ConfigurationState[]Adding/Removing Event Listeners
addEventListener
You can subscribe to any of the ApiEvents, by adding a callback function that will execute whenever the subscribed event triggers.
addEventListener(
eventName: ApiEvents,
callback: (result: EventResponses) => void
): Promise<void>Parameters
Description
eventName
Name of the event that the method will subscribe to.
callback
(result: EventResponses) => void
Callback function which takes as parameter the result of the event you are subscribing to.
Usage:
modelApi.addEventListener(
"configurator_state_change",
(res) => {
// Your code here
}
);removeEventListener
You can unsubscribe to any of the ApiEvents you may have subscribed previously. If a previous callback function used when adding the event listener is sent, it will disconnect that specific event, otherwise it disconnects all listeners created with eventName
removeEventListener(
eventName: ApiEvents,
callback?: (result: EventResponses) => void
): Promise<void>Parameters
Description
eventName
Name of the event listener the method will remove.
callback (optional)
(result: EventResponses) => void
Callback function which specifies the event you are unsubscribing to. If not used unsubscribes all listeners created with eventName
Usage:
modelApi.removeEventListener(
"configurator_state_change"
);Example
Dispatching Custom Events
dispatchEvent
You can send Interaction’s Custom Events with a value (or without → void) to the Model to trigger interactions and affect their conditions.
dispatchEvent (
eventName: string
value?: number | string | boolean | void
): Promise<void>Parameters
Description
eventName
Custom event name matching one of the Interaction Events created in the model.
value (optional)
number | string | boolean | void
Value you want to send along. It needs to match the type set in the Interaction Event. In case of void this parameter is ommited.
Usage:
await modelApi.dispatchEvent("temperature", 26);