Skip to main content

@elfsquad/third-party-visualization

VisualizationFrame

The VisualizationFrame class is the main entry point for the elfsquad/third-party-visualization library. It provides methods to embed & communicate with custom visualization.

constructor(options)

Initializes a new instance of the third-party visualization.

Method parameters

options required (VisualizationFrameOptions)

The options used to initialize the showroom.

const visualization = new VisualizationFrame({ container: '#showroom', url: 'https://...' });

getNativeElement()

Retrieves the native iframe element.

Returns (HTMLIFrameElement)

The native iframe element.

const visualization = new VisualizationFrame({ container: '#showroom', url: 'https://...' });
const iframe = visualization.getNativeElement();

onTriggerConfigurationUpdate(callback)

Registers a callback function to be invoked when a configuration update is triggered.

Method parameters

callback required (TriggerConfigurationUpdateCallback)

The callback function to be called when a configuration update is triggered.

const visualization = new VisualizationFrame({ container: '#showroom', url: 'https://...' });
visualization.onTriggerConfigurationUpdate(data => {
  console.log('Update triggered. Please re-send the configuration');
});

onUpdateRequirement(callback)

Registers a callback function to be invoked when a requirement should be updated.

Method parameters

callback required (UpdateRequirementCallback)

The callback function to be called when a requirement should be updated.

const updateRequirement = (data) => {
  // your update requirement logic here
};

const visualization = new VisualizationFrame({ container: '#showroom', url: 'https://...' });
visualization.onUpdateRequirement(data => {
  updateRequirement(data);
});

onUpdateRequirements(callback)

Registers a callback function to be invoked when multiple requirements should be updated.

Method parameters

callback required (UpdateRequirementsCallback)

The callback function to be called when multiple requirements should be updated.

const updateRequirements = (data) => {
  // your update requirements logic here
};

const visualization = new VisualizationFrame({ container: '#showroom', url: 'https://...' });
visualization.onUpdateRequirements(data => {
  updateRequirements(data);
});

onUpdateImageValue(callback)

Registers a callback function to be invoked when an image value should be updated.

Method parameters

callback required (UpdateImageValueCallback)

The callback function to be called when an image value should be updated.

const updateImageValue = (data) => {
  // your update image value logic here
};

const visualization = new VisualizationFrame({ container: '#showroom', url: 'https://...' });
visualization.onUpdateImageValue(data => {
  updateImageValue(data);
});

onUpdateTextValue(callback)

Registers a callback function to be invoked when a text value should be updated.

Method parameters

callback required (UpdateTextValueCallback)

The callback function to be called when a text value should be updated.

const updateTextValue = (data) => {
  // your update text value logic here
};

const visualization = new VisualizationFrame({ container: '#showroom', url: 'https://...' });
visualization.onUpdateTextValue(data => {
  updateTextValue(data);
});

onUpdateLinkedConfigurationCardinality(callback)

Registers a callback function to be invoked when a linked configuration cardinality should be updated.

Method parameters

callback required (UpdateLinkedConfigurationCardinalityCallback)

The callback function to be called when a linked configuration cardinality should be updated.

const updateLinkedConfigurationCardinality = (data) => {
  // your update linked configuration cardinality logic here
};

const visualization = new VisualizationFrame({ container: '#showroom', url: 'https://...' });
visualization.onUpdateLinkedConfigurationCardinality(data => {
  updateLinkedConfigurationCardinality(data);
});

onDragStarted(callback)

Registers a callback function to be invoked when a drag operation is started.

Method parameters

callback required (DragStartedCallback)

The callback function to be called when a drag operation is started.

const dragStarted = (data) => {
  // your drag started logic here
};

const visualization = new VisualizationFrame({ container: '#showroom', url: 'https://...' });
visualization.onDragStarted(data => {
  dragStarted(data);
});

onRemoveLinkedConfiguration(callback)

Registers a callback function to be invoked when a linked configuration should be removed.

Method parameters

callback required (RemoveLinkedConfigurationCallback)

The callback function to be called when a linked configuration should be removed.

const removeLinkedConfiguration = (data) => {
  // your remove linked configuration logic here
};

const visualization = new VisualizationFrame({ container: '#showroom', url: 'https://...' });
visualization.onRemoveLinkedConfiguration(data => {
  removeLinkedConfiguration(data);
});

sendConfigurationUpdated(configuration)

Trigger a configuration update in the third-party visualization.

Method parameters

configuration required (Configuration)

The configuration to send to the third-party visualization.

import { ConfiguratorContext, Configuration } from '@elfsquad/configurator';
const context = new ConfiguratorContext({ ... });

const visualization = new VisualizationFrame({ container: '#showroom', url: 'https://...' });

context.onUpdate((evt: CustomEvent<Configuration>) => {
  visualization.sendConfigurationUpdated(evt.detail);
});

sendStepChanged(step)

Trigger a step changed event in the third-party visualization.

Method parameters

step required (ConfigurationStep)

The step to send to the third-party visualization.

const visualization = new VisualizationFrame({ container: '#showroom', url: 'https://...' });

const step = { ... };

visualization.sendStepChanged(step);

EventSender

The EventSender class provides methods to send events to the parent window.

constructor(targetWindow)

Method parameters

targetWindow required (Window)

sendTriggerConfigurationUpdate()

Send a triggerConfigurationUpdate event to the parent window.

const iframe = document.querySelector('iframe');
const eventSender = new EventSender(iframe.contentWindow!);
eventSender.sendTriggerConfigurationUpdate();

sendUpdateRequirement(data)

Send an updateRequirement event to the parent window.

Method parameters

data required (UpdateRequirement)

The UpdateRequirement payload.

const iframe = document.querySelector('iframe');
const eventSender = new EventSender(iframe.contentWindow!);
eventSender.sendUpdateRequirement({
  configurationId: '00000000-0000-0000-0000-000000000000',
  nodeId: '00000000-0000-0000-0000-000000000000',
  value: 10,
  isSelection: true,
  ignoreConflicts: false,
});

sendDragStarted(data)

Send a dragStarted event to the parent window.

Method parameters

data required (ConfigurationFeature)

The ConfigurationFeature payload.

const iframe = document.querySelector('iframe');
const eventSender = new EventSender(iframe.contentWindow!);
eventSender.sendDragStarted(feature);

sendUpdateRequirements(data)

Send an updateRequirements event to the parent window.

Method parameters

data required (UpdateRequirements)

The UpdateRequirements payload.

const iframe = document.querySelector('iframe');
const eventSender = new EventSender(iframe.contentWindow!);
eventSender.sendUpdateRequirements({
  configurationId: '00000000-0000-0000-0000-000000000000',
  ignoreConflicts: false,
  includeSearchbarResults: true,
  requirements: [
    {
      nodeId: '00000000-0000-0000-0000-000000000000',
      value: 10,
      isSelection: true,
      ignoreConflicts: false,
    },
  ],
});

sendUpdateImageValue(data)

Send an updateImageValue event to the parent window.

Method parameters

data required (UpdateImageValue)

The UpdateImageValue payload.

const iframe = document.querySelector('iframe');
const eventSender = new EventSender(iframe.contentWindow!);
eventSender.sendUpdateImageValue({
  configurationId: '00000000-0000-0000-0000-000000000000',
  nodeId: '00000000-0000-0000-0000-000000000000',
  // base64 encoded image
  image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAFwF52RAAAACXBIWXMAAAsTAAALEwEAmpwYAAABvElEQVQ4jZ2Sv0vDUBiGn2V
});

sendUpdateTextValue(data)

Send an updateTextValue event to the parent window.

Method parameters

data required (UpdateTextValue)

The UpdateTextValue payload.

const iframe = document.querySelector('iframe');
const eventSender = new EventSender(iframe.contentWindow!);
eventSender.sendUpdateTextValue({
  configurationId: '00000000-0000-0000-0000-000000000000',
  nodeId: '00000000-0000-0000-0000-000000000000',
  value: 'Custom text value',
});

sendUpdateLinkedConfigurationCardinality(data)

Send an updateLinkedConfigurationCardinality event to the parent window.

Method parameters

data required (UpdateLinkedConfigurationCardinality)

The UpdateLinkedConfigurationCardinality payload.

const iframe = document.querySelector('iframe');
const eventSender = new EventSender(iframe.contentWindow!);
eventSender.sendUpdateLinkedConfigurationCardinality({
  parentNodeId: '00000000-0000-0000-0000-000000000000',
  cardinality: 2,
  configurationCode: 'XYAZIQWP'
});

sendRemoveLinkedConfiguration(data)

Send a removeLinkedConfiguration event to the parent window.

Method parameters

data required (RemoveLinkedConfiguration)

The RemoveLinkedConfiguration payload.

const iframe = document.querySelector('iframe');
const eventSender = new EventSender(iframe.contentWindow!);
eventSender.sendRemoveLinkedConfiguration({
  linkedConfigurationId: '00000000-0000-0000-0000-000000000000',
});