Skip to main content

Interface: Actions

Provides methods for manipulating the configurator state and controlling product configurations.

The Actions interface gives you direct control over the product configurator, allowing you to programmatically change options, control the camera, manage the scene, export content, and perform various operations that would normally require user interaction.

Example​

// Select a product option
const option = { /* option data */ };
window.mimeeqApp.actions.markOption(option, 'block123', 'colorPicker');

// Zoom out to see the entire product
window.mimeeqApp.actions.zoomOut();

AugmentedReality​

generateAR​

generateAR: GenerateAR

Function

Creates an Augmented Reality (AR) version of the current product configuration.

This action processes the current product with all its customizations and generates an AR-ready model that can be viewed on compatible devices. It returns a unique shortcode that can be used to access the AR experience.

Business value:

  • Allows customers to visualize products in their actual environment before purchase
  • Reduces returns by setting accurate expectations of product size and appearance
  • Creates engaging marketing experiences that drive conversion
  • Provides sales teams with powerful visualization tools for client meetings

Example​

// Add a "View in your space" AR button to your product page
document.getElementById('view-in-ar').addEventListener('click', () => {
  window.mimeeqApp.actions.generateAR().then(shortcode => {
    if (shortcode) {
      window.location.href = `/ar-viewer?code=${shortcode}`;
    }
  });
});

Returns​

Promise resolving to an AR shortcode string, or null if generation fails

getARShortCodeData​

getARShortCodeData: GetARShortCodeData

Function

Retrieves detailed information about an AR model from its shortcode.

This action looks up an existing AR model using its unique identifier and returns comprehensive information about the model, including file paths, product details, and conversion status. For models still being processed, it can provide a subscription to notify when processing completes.

Business value:

  • Supports seamless AR experiences by accessing previously created AR models
  • Enables informative loading states when AR models are still processing
  • Provides product details for consistent AR experience labeling
  • Allows tracking of AR model status for analytics and troubleshooting

Example​

// Load AR viewer with proper model information
const arShortcode = getParameterFromUrl('code');
if (arShortcode) {
  window.mimeeqApp.actions.getARShortCodeData(arShortcode, true)
    .then(arData => {
      if (arData) {
        if (arData.glbPath && arData.usdzPath) {
          // Models are ready, load AR viewer
          initializeARViewer(arData);
        } else if (arData.completeSubscription) {
          // Models are processing, wait for completion
          showLoadingIndicator();
          arData.completeSubscription.then(result => {
            hideLoadingIndicator();
            initializeARViewer({...arData, ...result});
          });
        }
      } else {
        showErrorMessage("AR model not found");
      }
    });
}

Param​

Unique identifier for the AR model

Param​

Whether to include a completion notification for processing models

Returns​

Promise resolving to AR model data, or null if not found

regenerateAR​

regenerateAR: RegenerateAR

Function

Attempts to recreate an AR model when initial generation fails.

This action tries again to create an AR-compatible version of a product when the first attempt was unsuccessful. It uses existing AR data to ensure consistency and returns a shortcode for accessing the AR experience if successful.

Business value:

  • Improves AR reliability by providing automatic recovery from generation failures
  • Enhances customer experience by reducing error messages during AR experiences
  • Maximizes AR availability for products with complex configurations
  • Supports continuous operation of AR features in busy retail environments

Example​

// Implement automatic retry when AR generation fails
window.mimeeqApp.actions.generateAR().then(shortcode => {
  if (!shortcode && arData) {
    // First attempt failed, try again
    return window.mimeeqApp.actions.regenerateAR(arData);
  }
  return shortcode;
}).then(finalShortcode => {
  if (finalShortcode) {
    window.location.href = `/ar-viewer?code=${finalShortcode}`;
  } else {
    showErrorMessage("AR currently unavailable for this product");
  }
});

Param​

Previously generated AR data containing model information

Returns​

Promise resolving to an AR shortcode string, or null if regeneration fails

showAR​

showAR: ShowAR

Function

Opens the Augmented Reality (AR) viewing interface.

This method initiates the AR experience for the current product configuration. On desktop devices, it displays a modal with a QR code that mobile users can scan to view the product in AR. On mobile devices, it directly launches the AR viewer.

AR viewing allows customers to visualize products in their actual physical space, providing a powerful tool for evaluating size, fit, and appearance in context.

Example​

// Add a custom AR button to your interface
document.getElementById('custom-ar-btn').addEventListener('click', () => {
  window.mimeeqApp.actions.showAR();
});

Fires​

@mimeeq-internal-show-ar

Authentication​

havePermissions​

havePermissions: HavePermissions

Function

Checks if the current user has specific permissions.

This method verifies whether the logged-in user has any of the specified permissions, which control access to various features and actions in the system. It's useful for conditionally showing or enabling functionality based on user permissions.

Permission-based UI adaptation ensures users only see and access features they're authorized to use, providing a cleaner and more secure experience.

Example​

// Only show the export button if the user has export permissions
window.mimeeqApp.actions.havePermissions(['EXPORT_OBJ', 'EXPORT_STL'])
  .then(canExport => {
    document.getElementById('export-button').style.display =
      canExport ? 'block' : 'none';
  });

Param​

Array of permission identifiers to check

Returns​

A promise resolving to true if the user has any of the specified permissions

Basket​

prepareCartImage​

prepareCartImage: PrepareCartImage

Function

Prepares an image for inclusion in a cart item.

This method uploads a product image (provided as a base64 string) to storage and returns a reference path that can be used when adding items to the cart. The image serves as a visual representation of the specific configuration being ordered.

Cart images improve the shopping experience by providing visual confirmation of selected products in the cart, order confirmation emails, and order history.

Example​

// Create an image of the current configuration for a cart item
window.mimeeqApp.utils.takeScreenshot('jpg', 800)
  .then(async (imageBase64) => {
    const imagePath = await window.mimeeqApp.actions.prepareCartImage(
      imageBase64,
      'cart_123',
      'item_456'
    );

    // Add the item to cart with the prepared image
    addToCartWithImage(imagePath);
  });

Param​

Base64-encoded image data

Param​

ID of the cart the image will be associated with

Param​

ID of the specific cart item the image represents

Returns​

A promise resolving to the storage path of the uploaded image, or null if unsuccessful

Basket Operations​

addItemToCart​

addItemToCart: AddItemToCart

Function

Adds an item to the shopping cart.

This method allows you to programmatically add a configured product to the cart, including all its selected options, pricing information, and quantity. It's the digital equivalent of placing a physical product in a shopping basket, ensuring all the customizations and pricing details are accurately captured.

Business value:

  • Enables seamless e-commerce integration with your configurator
  • Allows for one-click add-to-cart functionality from custom interfaces
  • Supports automated ordering processes or bulk-add operations
  • Maintains all configuration details for manufacturing or fulfillment

Example​

// Add a configured desk to the cart
const cartItem = {
  productId: 'prod_desk_123',
  productName: 'Executive Desk',
  variantCode: 'Width-a9&Material-b5&Color-c3',
  quantity: 2,
  companyId: 'company_456',
  priceType: 'SALE',
  sku: 'DESK-EX-001',
  isModular: false,
  // other required properties...
};

await window.mimeeqApp.actions.addItemToCart(cartItem);
console.log('Product added to cart successfully');

Param​

Complete definition of the item to add, including product details, pricing context, and quantity

Returns​

A promise that resolves when the item has been successfully added to the cart

Throws​

Will throw an error if the item cannot be added or if required information is missing

Emits​

mimeeq-basket-updated When the item is successfully added to the cart, providing updated cart state

createCart​

createCart: CreateCart

Function

Creates a new empty shopping cart.

This method initializes a new cart in the system, generating a unique identifier that can be used for subsequent cart operations. Creating a new cart is typically the first step in a shopping journey for a new session or after a previous cart has been completed or abandoned.

The created cart will be associated with the current user if they are authenticated, or tracked via session for guest users. Multiple carts can exist simultaneously, allowing for scenarios like saved carts, wish lists, or quote comparisons.

Example​

// Create a new empty cart at the beginning of a shopping session
const { cartId } = await window.mimeeqApp.actions.createCart();
console.log(`New cart created with ID: ${cartId}`);

// Store the cart ID for future operations
sessionStorage.setItem('currentCartId', cartId);

Returns​

A promise that resolves to an object containing the new cart's unique ID

getCartForPreview​

getCartForPreview: GetCartForPreview

Function

Retrieves comprehensive cart data formatted for display or email sharing.

This method fetches complete cart information including all items, pricing details, customer contact information, and submission data. The returned data is structured for presentation in review screens, email previews, or order confirmation displays.

The cart preview includes not only the basic product information but also calculates totals, applies any price modifiers or discounts, and formats custom fields for easy reading.

Example​

// Retrieve a cart for preview before submission
const cartPreview = await window.mimeeqApp.actions.getCartForPreview('cart_123456');

// Display cart summary information
document.getElementById('cart-total').textContent =
  `${cartPreview.totalValue} ${cartPreview.currency}`;

// Display all items in the cart
const itemsList = document.getElementById('cart-items');
cartPreview.cartItems.forEach(item => {
  itemsList.innerHTML += `<li>${item.quantity}x ${item.productName}</li>`;
});

Param​

The unique identifier for the cart to retrieve

Returns​

A promise that resolves to a comprehensive cart object formatted for display

Throws​

Will throw an error if the cart cannot be found or if access is denied

getCartItems​

getCartItems: GetCartItems

Function

Retrieves all items currently in the specified cart.

This method fetches the full list of products that have been added to a cart, including their quantities, configurations, and current prices. It's essential for displaying cart contents, calculating totals, or implementing cart management interfaces.

The response includes complete item details that can be used to render cart items, allow quantity adjustments, show product thumbnails, and display price information.

If the cart is not accessible (e.g., closed, doesn't exist, or forbidden), the method returns an object with a code indicating the specific issue rather than throwing an error.

Example​

// Fetch and display all items in the current cart
const cartItems = await window.mimeeqApp.actions.getCartItems('cart_123456');

// Check if we received an error code
if ('code' in cartItems) {
  if (cartItems.code === 'CART_CLOSED') {
    showMessage('This cart has already been submitted');
  } else if (cartItems.code === 'CART_NOT_FOUND') {
    showMessage('Cart not found - please create a new one');
  }
  return;
}

// Display the cart items
cartItems.forEach(item => {
  addItemToCartDisplay(item);
});

Param​

The unique identifier for the cart to retrieve items from

Returns​

A promise that resolves to either an array of cart items or an object indicating why the cart items couldn't be retrieved

getCartSubmissionForm​

getCartSubmissionForm: GetCartSubmissionFormAction

Function

Retrieves the custom fields and form structure required for cart submission.

This method fetches the collection of form fields needed to complete a cart submission, including both standard fields (name, email, etc.) and any custom fields defined for the cart submission process. The returned fields contain all necessary validation rules, display properties, and ordering information.

The form structure is typically used to build a dynamic checkout form that collects the required customer information before finalizing an order. Field types can include text inputs, dropdowns, checkboxes, and more complex components like rich text areas.

Example​

// Fetch the submission form structure and build a dynamic form
const formFields = await window.mimeeqApp.actions.getCartSubmissionForm('cart_123456');

// Sort fields by their ordinal position
formFields.sort((a, b) => a.ordinal - b.ordinal);

// Create form elements for each field
const formContainer = document.getElementById('checkout-form');
formFields.forEach(field => {
  const formControl = createFormControl(field);
  formContainer.appendChild(formControl);
});

Param​

The unique identifier for the cart

Returns​

A promise that resolves to an array of form field definitions

Throws​

Will throw an error if the cart ID is missing or if form retrieval fails

preSubmitCart​

preSubmitCart: PreSubmitCart

Function

Saves partial contact information without fully submitting the cart.

This method allows for incrementally saving customer information during the checkout process without finalizing the order. It's useful for multi-step checkout flows, saving checkout progress, or preparing a cart for later submission.

When contact information is pre-submitted, it's associated with the cart but doesn't trigger the final submission workflow. This allows for scenarios like saving contact details while continuing to shop, validating information before final submission, or creating a draft order to be finalized later.

The method also returns updated price modifiers which may have changed based on the submitted information (e.g., discount eligibility based on company or region).

Example​

// Save contact information from the first checkout step
const contactInfo = {
  fullName: 'Jane Smith',
  email: '[email protected]',
  companyName: 'Acme Corp',
  language: 'en',
  // Partial data - more fields will be added in subsequent steps
};

const result = await window.mimeeqApp.actions.preSubmitCart('cart_123456', contactInfo);

// Check if any price modifiers were applied based on the contact info
if (result.priceModifiers.length > 0) {
  updatePricingDisplay(result.priceModifiers);
}

Param​

The unique identifier for the cart

Param​

Partial contact and submission information to save

Returns​

A promise that resolves to a response containing updated pricing information

Throws​

Will throw an error if the cart ID is missing or if pre-submission fails

recalculateCart​

recalculateCart: RecalculateCart

Function

Recalculates all prices in the cart based on specified pricing parameters.

This method updates all item prices in the cart according to the provided pricing context, which can include company-specific pricing, price types (cost, retail, sale), price list groups, and template-specific pricing rules. It's essential for ensuring accurate pricing when the pricing context changes during the shopping process.

Common scenarios for recalculation include:

  • When a salesperson switches the company they're ordering on behalf of
  • When changing between price types (e.g., from retail to wholesale pricing)
  • When specific discount programs or price lists are applied
  • When the embedded template context changes, affecting pricing rules

The method returns updated cart items with recalculated prices and any applicable price modifiers (discounts, surcharges, etc.).

Example​

// Recalculate cart prices when switching to wholesale pricing for a dealer
const updatedCart = await window.mimeeqApp.actions.recalculateCart(
  'cart_123456',        // Cart ID
  'company_dealer_789', // Dealer company ID
  'WHOLESALE',          // Price type
  'dealer_program_A'    // Price list group
);

// Update the UI with new pricing
updateCartDisplay(updatedCart.cartItems);

// Show any applied discounts or surcharges
if (updatedCart.priceModifiers.length > 0) {
  showPriceModifiers(updatedCart.priceModifiers);
}

Param​

The unique identifier for the cart to recalculate

Param​

Optional company ID to use for company-specific pricing

Param​

Optional price type to use (e.g., 'COST', 'RRP', 'SALE')

Param​

Optional price list group to apply for special pricing programs

Param​

Optional ID of the embed template context

Returns​

A promise that resolves to the recalculated cart with updated prices

Throws​

Will throw an error if recalculation fails or the cart is inaccessible

Emits​

mimeeq-basket-updated When prices have been recalculated, providing updated cart state

removeCartItem​

removeCartItem: RemoveCartItem

Function

Removes a specific item from the cart.

This method deletes a single item from the cart based on its unique identifier. It's equivalent to taking a product out of your shopping basket before checkout, and provides immediate feedback to reflect the updated cart state.

Business value:

  • Gives customers control to refine their selections before purchase
  • Immediately updates pricing totals to reflect removed items
  • Supports dynamic cart management in custom interfaces
  • Helps prevent order errors by allowing easy removal of unwanted items

Example​

// Remove an item when the user clicks a "Remove" button
document.querySelector('.remove-item-btn').addEventListener('click', async (e) => {
  const cartId = e.target.dataset.cartId;
  const itemId = e.target.dataset.itemId;

  try {
    await window.mimeeqApp.actions.removeCartItem(cartId, itemId);
    // Remove the item from the UI
    document.getElementById(`cart-item-${itemId}`).remove();
    // Update cart totals
    updateCartTotals();
  } catch (error) {
    showErrorMessage('Could not remove item from cart');
  }
});

Param​

The unique identifier for the cart

Param​

The unique identifier for the specific item to remove

Returns​

A promise that resolves when the item has been successfully removed

Throws​

Will throw an error if the cart or item ID is missing or if removal fails

Emits​

mimeeq-basket-updated When the item is successfully removed, providing updated cart state

submitCart​

submitCart: SubmitCart

Function

Finalizes and submits a cart for processing.

This method completes the checkout process by submitting the cart with all required customer information. It transforms the cart into an order that can be processed through subsequent fulfillment workflows. Once submitted, the cart is typically locked and cannot be modified further.

The submission process:

  1. Validates all required fields are present and properly formatted
  2. Finalizes pricing calculations and applies any last-minute price modifiers
  3. Generates a unique reference code for tracking the submitted order
  4. Changes the cart status to prevent further modifications
  5. Triggers any configured notifications (e.g., email confirmations)

This is typically the final step in the purchasing process within the configurator.

Example​

// Submit a cart with complete customer information
const customerInfo = {
  fullName: 'John Doe',
  email: '[email protected]',
  phone: '+1 555-123-4567',
  companyName: 'Acme Corporation',
  address: '123 Main St, Anytown, USA',
  language: 'en',
  submittedAt: Date.now(),
  notes: 'Please deliver to loading dock B',
  // Any custom fields collected during checkout
  customFields: {
    deliveryPreference: 'morning',
    specialInstructions: true
  },
  parameters: []  // Processed custom fields
};

const result = await window.mimeeqApp.actions.submitCart('cart_123456', customerInfo);

// Show confirmation with reference code
showOrderConfirmation(result.referenceCode);

Param​

The unique identifier for the cart to submit

Param​

Complete customer information and submission details

Returns​

A promise that resolves to a result containing the order reference code

Throws​

Will throw an error if submission fails due to missing information or system issues

Emits​

mimeeq-basket-submitted When the cart is successfully submitted, providing the reference code

CameraControl​

decreaseZoom​

decreaseZoom: DecreaseZoom

Function

Decreases the camera zoom level to see more of the product and its surroundings.

This action moves the camera farther away from the product, giving viewers a broader perspective. It's ideal for showcasing the product's overall proportions, viewing larger furniture arrangements, or seeing how multiple components fit together.

Business value:

  • Helps customers understand the overall size and scale of products
  • Shows how products fit within an environment or alongside other pieces
  • Provides context for furniture arrangements or room layouts

Example​

// Add a "zoom out" button to your product page
document.getElementById('zoom-out-button').addEventListener('click', () => {
  window.mimeeqApp.actions.decreaseZoom();
});

// Zoom out by a larger amount for a dramatic wide view
window.mimeeqApp.actions.decreaseZoom(2);

Param​

How much to zoom out - larger values create a more dramatic change (optional)

Returns​

Promise that resolves when the zoom operation is complete

freezeCanvasScrolling​

freezeCanvasScrolling: FreezeCanvasScrolling

Function

Disables scrolling and zooming interactions on the 3D view.

This action prevents users from accidentally changing the camera position through scroll or pinch gestures. It's useful when you want to maintain a specific product view or when the 3D model is displayed in a scrollable page where normal scrolling should move the page, not zoom the product.

Business value:

  • Maintains consistent product views in presentations or guided experiences
  • Prevents accidental zoom changes when scrolling through product pages
  • Creates a more controlled viewing experience on touch devices
  • Allows for custom zoom controls that match your interface design

Example​

// Freeze camera position when entering presentation mode
document.getElementById('enter-presentation').addEventListener('click', () => {
  window.mimeeqApp.actions.freezeCanvasScrolling();
});

increaseZoom​

increaseZoom: IncreaseZoom

Function

Increases the camera zoom level to see finer details of the product.

This action brings the camera closer to the product, revealing intricate details and textures. It's perfect for examining specific features, materials, finishes, or connection points that might not be visible from a distance.

Business value:

  • Showcases craftsmanship and quality details that differentiate premium products
  • Helps customers inspect important functional features before purchase
  • Allows salespeople to highlight specific selling points during presentations

Example​

// Add a "zoom in" button to focus on product details
document.getElementById('zoom-in-button').addEventListener('click', () => {
  window.mimeeqApp.actions.increaseZoom();
});

// Zoom in more dramatically to focus on a specific detail
window.mimeeqApp.actions.increaseZoom(1.5);

Param​

How much to zoom in - larger values create a more dramatic change (optional)

Returns​

Promise that resolves when the zoom operation is complete

registerSceneCanvasView​

registerSceneCanvasView: RegisterSceneCanvasView

Function

Adds a new viewing canvas that shows the same 3D product from the same camera angle.

This action creates an additional view of the product that shares the main camera position. It's like adding a second monitor that shows the same content - both views stay synchronized as the camera moves, but they can be displayed in different locations or at different sizes in your interface.

Business value:

  • Enables side-by-side comparison views of the same product
  • Supports picture-in-picture or detail views alongside the main product view
  • Creates synchronized product views for different screen regions or devices
  • Allows innovative UI layouts with multiple perspectives on the product

Example​

// Create a picture-in-picture thumbnail view of the product
const thumbnailCanvas = document.getElementById('product-thumbnail');
window.mimeeqApp.actions.registerSceneCanvasView(thumbnailCanvas);

Param​

The HTML canvas element where the additional view should appear

restoreCameraPosition​

restoreCameraPosition: RestoreCameraPosition

Function

Resets the camera to the default product view or a specified custom position.

This action returns the camera to its original position, providing a consistent starting point for viewing the product. It's like pressing a "reset view" button that clears any navigation or zoom adjustments made by the user.

Business value:

  • Creates a consistent baseline view for product presentations
  • Helps disoriented users quickly return to a standard product view
  • Ensures specific product features are properly highlighted in the default view
  • Supports guided tours that always begin from the same perspective

Example​

// Add a "reset view" button to your interface
document.getElementById('reset-view').addEventListener('click', () => {
  window.mimeeqApp.actions.restoreCameraPosition();
});

// Jump to a specific predefined camera angle
window.mimeeqApp.actions.restoreCameraPosition(JSON.stringify({
  position: {x: -1.5, y: 1.7, z: -5.2},
  target: {x: 0, y: 0.6, z: 0}
}));

Param​

Optional JSON string defining a specific camera position

setSceneInputCanvas​

setSceneInputCanvas: SetSceneInputCanvas

Function

Designates which canvas should receive user interactions like click, drag, and zoom.

This action specifies which of your canvas views should respond to user input for controlling the camera. Only one canvas can accept interactions at a time, so this lets you choose which one should be the "primary" controller when you have multiple views.

Business value:

  • Creates intuitive multi-view experiences where users know which view to interact with
  • Enables switching between different interaction surfaces in complex interfaces
  • Supports responsive designs where the active view might change based on screen size
  • Prevents conflicting inputs when multiple product views are displayed

Example​

// Switch the active canvas when selecting a different view
document.getElementById('main-view-tab').addEventListener('click', () => {
  const mainCanvas = document.getElementById('main-product-view');
  window.mimeeqApp.actions.setSceneInputCanvas(mainCanvas);
});

Param​

The HTML canvas element that should receive user interactions

setZoom​

setZoom: SetZoom

Function

Sets a specific zoom level for the camera view.

This action gives you precise control over how close or far the camera is from the product. It's like adjusting a zoom lens on a camera - smaller values bring you closer to examine details, while larger values give you a broader perspective of the whole product.

Business value:

  • Creates the perfect framing for product screenshots or presentations
  • Helps customers focus on specific details like material textures or connectors
  • Provides consistent product views across different devices or screens

Example​

// Zoom in close to examine material details
window.mimeeqApp.actions.setZoom(2);

// Zoom out to see the entire product in context
window.mimeeqApp.actions.setZoom(10);

// Create an interactive zoom slider control for your website
const zoomSlider = document.getElementById('zoom-slider');
zoomSlider.addEventListener('input', (e) => {
  const zoomLevel = parseFloat(e.target.value);
  window.mimeeqApp.actions.setZoom(zoomLevel);
});

Param​

The distance of the camera from the product - smaller numbers zoom in closer, larger numbers zoom out further

Returns​

Promise that resolves when the zoom adjustment is complete

unfreezeCanvasScrolling​

unfreezeCanvasScrolling: UnfreezeCanvasScrolling

Function

Re-enables normal scrolling and zooming interactions on the 3D view.

This action restores the standard behavior where mouse wheel, trackpad scrolling, and touch gestures can zoom and adjust the camera. Use this to return to the default interactive viewing experience after previously freezing camera controls.

Business value:

  • Returns to natural interaction after guided product experiences
  • Allows customers to freely explore products at their own pace
  • Re-enables intuitive camera controls for detailed product inspection
  • Complements guided tours that temporarily restrict camera movement

Example​

// Restore normal camera controls when exiting presentation mode
document.getElementById('exit-presentation').addEventListener('click', () => {
  window.mimeeqApp.actions.unfreezeCanvasScrolling();
});

unregisterSceneCanvasView​

unregisterSceneCanvasView: UnregisterSceneCanvasView

Function

Removes a previously registered canvas from the 3D viewing system.

This action stops displaying the 3D product on a specific canvas that was previously added with registerSceneCanvasView. It's like disconnecting a secondary monitor - the main view continues to work, but the specified canvas will no longer show the product.

Business value:

  • Conserves processing power by removing unnecessary views
  • Supports dynamic interface layouts where product views can be added and removed
  • Enables temporary comparison views that can be dismissed when no longer needed
  • Prevents memory leaks by properly cleaning up unused canvas resources

Example​

// Remove a secondary view when closing a comparison panel
document.getElementById('close-comparison').addEventListener('click', () => {
  const comparisonCanvas = document.getElementById('comparison-view');
  window.mimeeqApp.actions.unregisterSceneCanvasView(comparisonCanvas);
});

Param​

The HTML canvas element to remove from the viewing system

zoomOut​

zoomOut: ZoomOut

Function

Automatically frames the entire product perfectly in the viewport.

This action intelligently adjusts the camera position and zoom to ensure the complete product is visible and optimally framed. It's like clicking the "fit to screen" button in design software - instantly giving you the ideal overview of the entire product.

Business value:

  • Ensures customers can always see the complete product with one click
  • Provides a consistent starting view regardless of previous interactions
  • Creates a reliable reset point after customers explore detailed views

Example​

// Add a "view entire product" button to your interface
document.getElementById('view-all-button').addEventListener('click', () => {
  window.mimeeqApp.actions.zoomOut();
});

Emits​

mimeeq-3d-zoom-out-scene When the automatic zoom-to-fit action is performed

Canvas​

freezeCanvasScrolling​

freezeCanvasScrolling: FreezeCanvasScrolling

Function

Disables scrolling and zooming interactions on the 3D view.

This action prevents users from accidentally changing the camera position through scroll or pinch gestures. It's useful when you want to maintain a specific product view or when the 3D model is displayed in a scrollable page where normal scrolling should move the page, not zoom the product.

Business value:

  • Maintains consistent product views in presentations or guided experiences
  • Prevents accidental zoom changes when scrolling through product pages
  • Creates a more controlled viewing experience on touch devices
  • Allows for custom zoom controls that match your interface design

Example​

// Freeze camera position when entering presentation mode
document.getElementById('enter-presentation').addEventListener('click', () => {
  window.mimeeqApp.actions.freezeCanvasScrolling();
});

registerSceneCanvasView​

registerSceneCanvasView: RegisterSceneCanvasView

Function

Adds a new viewing canvas that shows the same 3D product from the same camera angle.

This action creates an additional view of the product that shares the main camera position. It's like adding a second monitor that shows the same content - both views stay synchronized as the camera moves, but they can be displayed in different locations or at different sizes in your interface.

Business value:

  • Enables side-by-side comparison views of the same product
  • Supports picture-in-picture or detail views alongside the main product view
  • Creates synchronized product views for different screen regions or devices
  • Allows innovative UI layouts with multiple perspectives on the product

Example​

// Create a picture-in-picture thumbnail view of the product
const thumbnailCanvas = document.getElementById('product-thumbnail');
window.mimeeqApp.actions.registerSceneCanvasView(thumbnailCanvas);

Param​

The HTML canvas element where the additional view should appear

setSceneInputCanvas​

setSceneInputCanvas: SetSceneInputCanvas

Function

Designates which canvas should receive user interactions like click, drag, and zoom.

This action specifies which of your canvas views should respond to user input for controlling the camera. Only one canvas can accept interactions at a time, so this lets you choose which one should be the "primary" controller when you have multiple views.

Business value:

  • Creates intuitive multi-view experiences where users know which view to interact with
  • Enables switching between different interaction surfaces in complex interfaces
  • Supports responsive designs where the active view might change based on screen size
  • Prevents conflicting inputs when multiple product views are displayed

Example​

// Switch the active canvas when selecting a different view
document.getElementById('main-view-tab').addEventListener('click', () => {
  const mainCanvas = document.getElementById('main-product-view');
  window.mimeeqApp.actions.setSceneInputCanvas(mainCanvas);
});

Param​

The HTML canvas element that should receive user interactions

unfreezeCanvasScrolling​

unfreezeCanvasScrolling: UnfreezeCanvasScrolling

Function

Re-enables normal scrolling and zooming interactions on the 3D view.

This action restores the standard behavior where mouse wheel, trackpad scrolling, and touch gestures can zoom and adjust the camera. Use this to return to the default interactive viewing experience after previously freezing camera controls.

Business value:

  • Returns to natural interaction after guided product experiences
  • Allows customers to freely explore products at their own pace
  • Re-enables intuitive camera controls for detailed product inspection
  • Complements guided tours that temporarily restrict camera movement

Example​

// Restore normal camera controls when exiting presentation mode
document.getElementById('exit-presentation').addEventListener('click', () => {
  window.mimeeqApp.actions.unfreezeCanvasScrolling();
});

unregisterSceneCanvasView​

unregisterSceneCanvasView: UnregisterSceneCanvasView

Function

Removes a previously registered canvas from the 3D viewing system.

This action stops displaying the 3D product on a specific canvas that was previously added with registerSceneCanvasView. It's like disconnecting a secondary monitor - the main view continues to work, but the specified canvas will no longer show the product.

Business value:

  • Conserves processing power by removing unnecessary views
  • Supports dynamic interface layouts where product views can be added and removed
  • Enables temporary comparison views that can be dismissed when no longer needed
  • Prevents memory leaks by properly cleaning up unused canvas resources

Example​

// Remove a secondary view when closing a comparison panel
document.getElementById('close-comparison').addEventListener('click', () => {
  const comparisonCanvas = document.getElementById('comparison-view');
  window.mimeeqApp.actions.unregisterSceneCanvasView(comparisonCanvas);
});

Param​

The HTML canvas element to remove from the viewing system

Configuration Actions​

markOptionByBlockNameAndOptionCode​

markOptionByBlockNameAndOptionCode: MarkOptionByBlockNameAndOptionCode

Function

Function signature for marking an option by referencing its block name and option code.

This convenience function allows for selecting options using their business identifiers rather than internal IDs. It's particularly useful for integrations and automated configurations where human-readable references are preferred over technical identifiers.

Example​

// Select the "Oak" finish in the "TableTop" block
markOptionByBlockNameAndOptionCode(
  "TableTop",
  "FINISH-OAK"
);

Param​

The display name of the block containing the option

Param​

The configuration code of the option to select

Returns​

Promise that resolves when the selection is complete

setConfigurationCode​

setConfigurationCode: SetConfigurationCode

Function

Function signature for directly setting the configuration code of a product.

This function allows for setting the complete configuration code at once, which updates all options simultaneously. This is useful for restoring saved configurations, applying presets, or implementing "popular configurations" functionality.

When the code is applied, all options defined in the code will be selected and any options not included will revert to their default values.

Example​

// Set a complete configuration for a chair product
setConfigurationCode("Width-a1&Fabric-b3&Color-c2&Legs-a4");

Param​

The complete configuration code string

Returns​

Promise that resolves when the configuration is applied

triggerFinishEvent​

triggerFinishEvent: TriggerFinishEvent

Function

Function signature for triggering the finish event for a product configuration.

This function initiates the completion process for a product configuration, preparing all the necessary data and dispatching the appropriate events. It's used when a user completes their configuration and is ready to proceed with adding to cart, saving, or sharing.

The variant parameter determines the specific action to take, such as adding to cart, displaying the summary, or generating sharing links.

Example​

// Trigger the "add to cart" action for the current configuration
triggerFinishEvent('basket');

// Trigger the summary display for the current configuration
triggerFinishEvent('summary');

Param​

The type of finish action to perform ('basket', 'summary', etc.)

Returns​

Promise that resolves when the finish process is complete

Emits​

mimeeq-show-basket-loader When the add to cart process begins

Emits​

mimeeq-add-to-cart When a product is added to the cart

Emits​

mimeeq-select-product When in selector mode and product is selected

Emits​

mimeeq-show-summary When showing the configuration summary

Emits​

mimeeq-app-url-change When the URL needs updating (non-modular)

Emits​

mmq-app-url-change-sandbox For sandbox environment URL changes

Exporters​

exportGlb​

exportGlb: ExportGLB

Function

Exports the current product configuration as a GLB 3D model file.

This action generates a downloadable 3D model of the product with all current customizations applied. The GLB format is widely supported by modern 3D software, AR applications, and online platforms, making it ideal for virtual staging, further design work, or digital presentations.

Business value:

  • Allows customers to use configured products in their own design software
  • Enables architects and designers to integrate products into their projects
  • Supports AR experiences on mobile devices or headsets
  • Facilitates virtual staging for real estate and interior design

Example​

// Add an "export 3D model" button to your configurator
document.getElementById('export-3d-button').addEventListener('click', () => {
  window.mimeeqApp.actions.exportGlb();
});

Emits​

mimeeq-3d-before-export-scene When the export process begins

Emits​

mimeeq-3d-after-export-scene When the export is complete and file download starts

Returns​

Promise resolving to true when the export is complete

exportObj​

exportObj: ExportOBJ

Function

Exports the current product configuration as an OBJ 3D model file.

This action generates a downloadable 3D model in OBJ format, which is compatible with virtually all 3D modeling software. OBJ is particularly valuable for design workflows that require material information and is supported by legacy systems.

Business value:

  • Provides compatibility with older design software and systems
  • Preserves material definitions for realistic rendering in third-party applications
  • Enables integration with established design workflows and archives
  • Supports custom product visualization in marketing materials

Example​

// Add an "export for design software" button
document.getElementById('export-for-design-button').addEventListener('click', () => {
  window.mimeeqApp.actions.exportObj();
});

Emits​

mimeeq-3d-before-export-scene When the export process begins

Emits​

mimeeq-3d-after-export-scene When the export is complete and file download starts

Returns​

Promise resolving to true when the export is complete

exportStl​

exportStl: ExportSTL

Function

Exports the current product configuration as an STL file for 3D printing or manufacturing.

This action creates a downloadable 3D model in STL format, the industry standard for 3D printing, rapid prototyping, and CNC manufacturing. STL files contain the precise geometry needed to physically produce the product or a scale model.

Business value:

  • Enables direct-to-manufacturing workflows from the configurator
  • Allows customers to 3D print scale models or prototypes
  • Supports industrial design and engineering teams creating physical samples
  • Bridges the gap between digital configuration and physical production

Example​

// Add a "prepare for 3D printing" button to your interface
document.getElementById('3d-print-button').addEventListener('click', () => {
  window.mimeeqApp.actions.exportStl();
});

Emits​

mimeeq-3d-before-export-scene When the export process begins

Emits​

mimeeq-3d-after-export-scene When the export is complete and file download starts

Returns​

Promise resolving to true when the export is complete

generateProductPDF​

generateProductPDF: GenerateProductPDF

Function

Generates a comprehensive PDF document for the current product configuration.

This method creates a professionally formatted PDF that includes detailed information about the configured product. The content typically includes product images, selected options, specifications, pricing, and any other relevant tabs from the product interface.

The PDF can be customized through configuration options, including page layout, branding, sections to include, and formatting. Custom document templates can be applied for brand-consistent documentation.

Product PDFs serve as comprehensive documentation for configured products, useful for sharing with clients, keeping for reference, or including in quotes and orders.

Example​

// Generate a PDF including all product tabs
const allTabs = window.mimeeqApp.observers.product.tabs.getValue().newValue || [];
window.mimeeqApp.actions.generateProductPDF(allTabs);

// Generate a PDF with only specific tabs and custom formatting
const selectedTabs = allTabs.filter(tab =>
  ['configuration', 'finishes'].includes(tab.tabType)
);

window.mimeeqApp.actions.generateProductPDF(
  selectedTabs,
  translateMessage, // Translation function
  {
    logoPosition: 'RIGHT',
    displayLogoAt: 'FIRST_PAGE',
    logo: 'https://example.com/company-logo.png'
  }
);

Param​

Array of product tabs to include in the PDF

Param​

Optional translation function for localized content

Param​

Optional custom configuration for PDF formatting and branding

Emits​

mimeeq-pdf-generate-done When PDF generation is complete

saveImage​

saveImage: SaveImage

Function

Captures and saves the current product view as a high-quality image.

This action creates a professional product image of the current configuration from the current camera angle. It's like taking a screenshot, but with higher quality and more control over the output format and resolution - perfect for creating marketing materials, design presentations, or sharing design concepts.

Business value:

  • Creates professional product imagery without photography
  • Generates consistent product visuals for catalogs and websites
  • Enables sharing of custom configurations with clients or team members
  • Supports creation of marketing materials for configured products

Example​

// Create a high-resolution PNG image for a presentation
window.mimeeqApp.actions.saveImage('png', 2048);

// Create a JPEG with white background for a product catalog
window.mimeeqApp.actions.saveImage('jpg', 1200, '#FFFFFF');

// Add a "download product image" button to your interface
document.getElementById('download-image').addEventListener('click', () => {
  window.mimeeqApp.actions.saveImage('png', 1800);
});

Emits​

mimeeq-3d-before-export-image When the image generation begins

Emits​

mimeeq-3d-after-export-image When the image is complete and download starts

Param​

The image format to save ('png', 'jpg', or 'jpeg')

Param​

The width of the output image in pixels (height will adjust automatically)

Param​

The color for image background (for formats without transparency)

showExportImageModal​

showExportImageModal: ShowExportImageModal

Function

Opens the image export dialogue.

This method displays a modal interface that allows users to export high-quality images of the current product configuration. Users can select image format, resolution, background options, and other settings.

High-quality product images are valuable for marketing materials, presentations, catalogs, and client communications.

Example​

// Add a custom image export button to your interface
document.getElementById('custom-image-btn').addEventListener('click', () => {
  window.mimeeqApp.actions.showExportImageModal();
});

Fires​

@mimeeq-internal-show-export-image

showExportModal​

showExportModal: ShowExportModal

Function

Opens the 3D model export dialogue.

This method displays a modal interface that allows users to export the current product configuration as a 3D model file. Users can select from available formats (such as OBJ, STL, GLB) and initiate the download.

Exporting 3D models enables further use of the configured product in CAD software, space planning tools, or other 3D environments.

Example​

// Add a custom export button to your interface
document.getElementById('custom-export-btn').addEventListener('click', () => {
  window.mimeeqApp.actions.showExportModal();
});

Fires​

@mimeeq-internal-show-export

showExportPDF​

showExportPDF: ShowExportPDF

Function

Opens the PDF export dialogue for the current configuration.

This method displays a modal interface that allows users to select which content to include in a PDF document of the current product configuration. Users can choose specific tabs, customize the output, and generate high-quality documentation of their configured product.

PDF exports provide comprehensive documentation for configurations that can be shared with clients, saved for reference, or used in procurement processes.

Example​

// Add a custom PDF export button to your interface
document.getElementById('custom-pdf-btn').addEventListener('click', () => {
  window.mimeeqApp.actions.showExportPDF();
});

Fires​

@mimeeq-internal-show-export-pdf

Favorites​

createFavouriteCollection​

createFavouriteCollection: CreateFavouriteCollection

Function

Creates a new collection for organizing saved favorites.

This method allows users to create a new organizational folder for storing their saved product configurations and modular scenes. Collections help users categorize their favorites based on projects, clients, themes, or any other grouping that makes sense for their workflow.

Collections can be either private (visible only to the user) or public (visible to all users within the organization), providing flexibility for both personal use and team collaboration.

Example​

// Create a new private collection for a specific project
const newCollectionId = await window.mimeeqApp.actions.createFavouriteCollection(
  'Spring 2025 Collection',  // Collection name
  'private'                  // Visibility type
);

if (newCollectionId && typeof newCollectionId === 'string') {
  console.log(`New collection created with ID: ${newCollectionId}`);

  // Save the current configuration to this new collection
  const configCode = window.mimeeqApp.observers.product.configurationCode.getValue().newValue;
  window.mimeeqApp.actions.saveFavouriteConfiguration(configCode, [newCollectionId]);
}

Param​

Display name for the new collection

Param​

Whether the collection is 'private' (visible only to the creator) or 'public' (visible to all users)

Returns​

If successful, returns the new collection's ID as a string; if unsuccessful, returns false or true (boolean)

Emits​

mimeeq-favourites-add-collection When a new collection is successfully created

getFavouriteCollections​

getFavouriteCollections: GetFavouriteCollections

Function

Retrieves all available favorite collections for the current user.

This method fetches the complete list of collections that the current user has access to, including both their private collections and any public collections shared within the organization. Collections serve as folders for organizing saved product configurations and modular scenes.

The returned collections can be used to populate collection selectors, organize favorite management interfaces, or filter favorites by collection.

Example​

// Fetch and display all available collections in a dropdown
const collections = await window.mimeeqApp.actions.getFavouriteCollections();

const collectionSelect = document.getElementById('collection-select');
collectionSelect.innerHTML = '';

// Add a default option
const defaultOption = document.createElement('option');
defaultOption.value = '';
defaultOption.textContent = 'Select a collection...';
collectionSelect.appendChild(defaultOption);

// Add each collection as an option
collections.forEach(collection => {
  const option = document.createElement('option');
  option.value = collection.favouriteCollectionId;
  option.textContent = collection.favouriteCollectionName +
    (collection.collectionType === 'public' ? ' (Public)' : '');
  collectionSelect.appendChild(option);
});

Returns​

A promise that resolves to an array of available collections, or an empty array if no collections exist or an error occurs

getFavouriteItems​

getFavouriteItems: GetFavouriteItems

Function

Retrieves all saved favorite items for the current user.

This method fetches the complete list of saved product configurations and modular scenes that the current user has access to. The returned data includes both private favorites (created by the user) and public favorites (shared across the organization), each organized within their respective collections.

This comprehensive favorites data can be used to build favorites browsers, selection interfaces, or to implement "recently used" features.

Example​

// Fetch and display all favorites organized by collection type
const favorites = await window.mimeeqApp.actions.getFavouriteItems();

// Display public favorites
const publicContainer = document.getElementById('public-favorites');
publicContainer.innerHTML = '<h3>Public Favorites</h3>';

if (favorites.publicFavouriteCollections.length === 0) {
  publicContainer.innerHTML += '<p>No public favorites available</p>';
} else {
  favorites.publicFavouriteCollections.forEach(fav => {
    const favElement = createFavoriteElement(fav);
    publicContainer.appendChild(favElement);
  });
}

// Display user's private favorites
const userContainer = document.getElementById('my-favorites');
userContainer.innerHTML = '<h3>My Favorites</h3>';

if (favorites.userFavouriteCollections.length === 0) {
  userContainer.innerHTML += '<p>You haven\'t saved any favorites yet</p>';
} else {
  favorites.userFavouriteCollections.forEach(fav => {
    const favElement = createFavoriteElement(fav);
    userContainer.appendChild(favElement);
  });
}

Returns​

A promise that resolves to an object containing both public and user-specific favorite collections

saveFavouriteConfiguration​

saveFavouriteConfiguration: SaveFavouriteConfiguration

Function

Saves the current product configuration as a favorite.

This method saves the current standard product configuration (with all selected options) to one or more favorite collections. It can be used to bookmark particularly useful or attractive configurations for later reference or to share configurations with colleagues.

If the configuration already exists in some collections but not in others, the method will intelligently update collection assignments, adding it to new collections and removing it from collections not included in the provided list.

Example​

// Save the current configuration to two collections when the user clicks "Save"
document.getElementById('save-config-btn').addEventListener('click', async () => {
  // Get the current configuration code
  const configCode = window.mimeeqApp.observers.product.configurationCode.getValue().newValue;

  // Get the selected collection IDs from checkboxes
  const selectedCollections = Array.from(
    document.querySelectorAll('input[name="collections"]:checked')
  ).map(cb => cb.value);

  if (selectedCollections.length === 0) {
    alert('Please select at least one collection');
    return;
  }

  const success = await window.mimeeqApp.actions.saveFavouriteConfiguration(
    configCode,
    selectedCollections
  );

  if (success) {
    showNotification('Configuration saved to favorites');
  } else {
    showNotification('Failed to save configuration', 'error');
  }
});

Param​

The configuration code representing all selected options

Param​

Array of collection IDs to save this configuration to

Returns​

A promise that resolves to true if saving was successful, false otherwise

Emits​

mimeeq-favourites-remove-product When removing from all collections

Emits​

mimeeq-favourites-add-product When adding to at least one collection

saveFavouriteScene​

saveFavouriteScene: SaveFavouriteScene

Function

Updates an existing saved modular scene with the current state.

This method saves the current modular scene layout and component configurations over an existing saved favorite. This is useful for updating a scene after making modifications without creating a new entry or changing its name.

The method will only work if the current scene was previously loaded from a favorite; attempting to update a scene that hasn't been saved yet will fail. For new scenes, use saveFavouriteSceneAs instead.

Example​

// Update the current scene when the user clicks the "Update" button
document.getElementById('update-scene-btn').addEventListener('click', async () => {
  // Check if we have a loaded scene to update
  const sceneShortcode = window.mimeeqApp.observers.modular.favSceneShortcode.getValue().newValue;

  if (!sceneShortcode) {
    showNotification('This is a new scene that hasn\'t been saved yet. Please use "Save As" instead.', 'warning');
    return;
  }

  const success = await window.mimeeqApp.actions.saveFavouriteScene();

  if (success) {
    showNotification('Scene updated successfully');
  } else {
    showNotification('Failed to update scene', 'error');
  }
});

Returns​

A promise that resolves to true if the update was successful, false otherwise

Emits​

mimeeq-modular-save-scene When the scene is successfully saved

saveFavouriteSceneAs​

saveFavouriteSceneAs: SaveFavouriteSceneAs

Function

Saves the current modular scene as a new favorite with a custom name.

This method captures the complete current state of a modular scene—including all components, their positions, configurations, and relationships—and saves it as a new favorite entry in the specified collections. This allows complex layouts to be saved and restored later, shared with colleagues, or used as starting points for similar designs.

Unlike saveFavouriteScene, this method always creates a new entry rather than updating an existing one, and requires providing a name for the new scene.

Example​

// Save the current scene with a custom name when the user submits a form
document.getElementById('save-scene-form').addEventListener('submit', async (e) => {
  e.preventDefault();

  const sceneName = document.getElementById('scene-name-input').value.trim();
  if (!sceneName) {
    showNotification('Please enter a name for this scene', 'warning');
    return;
  }

  // Get the selected collection IDs from checkboxes
  const selectedCollections = Array.from(
    document.querySelectorAll('input[name="collections"]:checked')
  ).map(cb => cb.value);

  if (selectedCollections.length === 0) {
    showNotification('Please select at least one collection', 'warning');
    return;
  }

  const success = await window.mimeeqApp.actions.saveFavouriteSceneAs(
    sceneName,
    selectedCollections
  );

  if (success) {
    showNotification(`Scene "${sceneName}" saved successfully`);
    closeModal('save-scene-modal');
  } else {
    showNotification('Failed to save scene', 'error');
  }
});

Param​

The display name for the saved scene

Param​

Array of collection IDs to save this scene to

Returns​

A promise that resolves to true if saving was successful, false otherwise

Fires​

@mimeeq#mimeeq-modular-save-scene

Favourites​

openSaveSceneAs​

openSaveSceneAs: OpenSaveSceneAs

Function

Opens the "Save Scene As" dialog for modular products.

This action displays a dialog that allows users to name and save their current modular product configuration as a reusable scene. It's like the "Save As" function in productivity software - letting users preserve their work with a descriptive name.

Business value:

  • Allows customers to save in-progress designs for later completion
  • Helps sales teams preserve customer-specific configurations
  • Enables creation of reusable templates for common space layouts
  • Supports collaborative design processes by naming and sharing configurations

Fires​

@mimeeq-internal-show-modular-save-as

History​

goBack​

goBack: HistoryGoBack

Function

Reverts the most recent change in the configuration.

This method moves backward in the history stack, undoing the most recent configuration change. This is equivalent to the "Undo" function in most applications.

Example​

// Add an undo button to your UI
document.getElementById('undo-button').addEventListener('click', () => {
  window.mimeeqApp.actions.goBack();
});

Emits​

mimeeq-history-go-back When moving backward in the history stack

Emits​

mimeeq-app-url-change When the configuration URL needs updating

Emits​

mmq-app-url-change-sandbox For sandbox environment URL changes

redo​

redo: HistoryRedo

Function

Repeats a previously undone action in the configuration history.

This method moves forward in the history stack, re-applying an action that was previously undone. This is equivalent to the "Redo" function in most applications.

Example​

// Add a redo button to your UI
document.getElementById('redo-button').addEventListener('click', () => {
  window.mimeeqApp.actions.redo();
});

Emits​

mimeeq-history-go-forward When moving forward in the history stack

Emits​

mimeeq-app-url-change When the configuration URL needs updating

Emits​

mmq-app-url-change-sandbox For sandbox environment URL changes

reset​

reset: HistoryReset

Function

Resets the product configuration to its initial state.

This method clears all selected options and returns the product to its default configuration. It's useful for providing a "start over" functionality or for resetting the configurator between different user sessions.

Example​

// Add a reset button to your UI
document.getElementById('reset-button').addEventListener('click', () => {
  window.mimeeqApp.actions.reset();
});

Emits​

mimeeq-app-url-change When the configuration URL needs updating to initial state

Emits​

mmq-app-url-change-sandbox For sandbox environment URL changes

Emits​

mimeeq-history-reset When the configuration is completely reset

Hotspots​

get3dInformationTemplate​

get3dInformationTemplate: Get3dInformationTemplate

Function

Retrieves template data for a 3D hotspot information display.

This method fetches the content associated with a specific mesh element's hotspot. Hotspots are interactive points on 3D models that display additional information when clicked or hovered over, such as feature explanations, specifications, or component details.

Hotspot templates can include rich text content, image galleries, and document links, providing detailed information about specific parts of the product without cluttering the main interface.

Example​

// Display hotspot information when a mesh part is clicked
canvas.addEventListener('mesh-click', async (e) => {
  const meshId = e.detail.meshId;

  // Fetch the hotspot template data
  const templateData = await window.mimeeqApp.actions.get3dInformationTemplate(meshId);

  if (templateData) {
    // Display the hotspot information in a popup or panel
    showHotspotPopup(templateData);
  }
});

Param​

ID of the mesh element associated with the hotspot

Returns​

A promise resolving to the template data if found, or null if no template exists

Image Widget​

imageWidgetAddNewImages​

imageWidgetAddNewImages: ImageWidgetAddNewImages

Function

Function signature for adding new images to the image library and optionally applying them.

This function handles the complete process of uploading images to the library, including file processing, storage, and metadata extraction. If a block ID is provided, the image will be immediately applied to that block after upload.

The function supports different image processing based on the widget type, such as treating images as textures for material blocks or as logos for image blocks.

Example​

// Upload an image and apply it to a specific block
imageWidgetAddNewImages([fileObject], 'logo-block-id');

Param​

An array of file objects to upload (typically from a file input)

Param​

Optional ID of the block to apply the first uploaded image to

Returns​

Promise resolving to the created image entry or false if upload failed

imageWidgetRemoveImages​

imageWidgetRemoveImages: ImageWidgetRemoveImages

Function

Function signature for removing images from the image library.

This function deletes selected images from the image library, removing them from the available options for image-based customization. It only removes the references from the current session, not from persistent storage.

Example​

// Remove two images from the library
imageWidgetRemoveImages(['image-123', 'image-456']);

Param​

Array of image IDs to remove from the library

Returns​

Promise that resolves when the images have been removed

imageWidgetSelectImage​

imageWidgetSelectImage: ImageWidgetSelectImage

Function

Function signature for selecting an image from the image library.

This function updates the currently selected image in the image library, which can then be applied to a product configuration. It highlights the selected image in the interface and prepares it for application.

Example​

// Select a specific image by its ID
imageWidgetSelectImage('image-123');

Param​

The unique identifier of the image to select

Returns​

Promise that resolves when the selection is complete

setImageWidgetActiveBlock​

setImageWidgetActiveBlock: SetImageWidgetActiveBlock

Function

Function signature for setting the active block in the image widget.

This function determines which configuration block is currently being edited in the image widget. The active block receives applied images and controls what options are available in the widget interface.

Example​

// Set the active block to the logo customization area
setImageWidgetActiveBlock(logoBlockData);

Param​

Data object containing information about the block to make active

Returns​

Promise that resolves when the active block has been updated

setImageWidgetLibraryState​

setImageWidgetLibraryState: SetImageWidgetLibraryState

Function

Function signature for controlling the visibility of the image library overlay.

This function opens or closes the image library interface where users can select from previously uploaded images to apply to their product configurations. The library provides a consistent repository of images that can be reused across different product configurations.

Example​

// Open the image library
setImageWidgetLibraryState(true);

// Close the image library
setImageWidgetLibraryState(false);

Param​

Whether the image library should be displayed (true) or hidden (false)

Returns​

Promise that resolves when the visibility state has been updated

Modular​

markOptionModular​

markOptionModular: MarkOptionModular

Function

Selects options for a modular product component.

This method is similar to markOption, but specifically designed for modular products where multiple components might be selected. It allows you to change options for the currently selected component(s) or for specific instances by ID.

Emits​

mimeeq-modular-select-option-multiple When options are selected for multiple instances

Emits​

mimeeq-modular-select-option When an option is selected for a single instance

saveFavouriteScene​

saveFavouriteScene: SaveFavouriteScene

Function

Updates an existing saved modular scene with the current state.

This method saves the current modular scene layout and component configurations over an existing saved favorite. This is useful for updating a scene after making modifications without creating a new entry or changing its name.

The method will only work if the current scene was previously loaded from a favorite; attempting to update a scene that hasn't been saved yet will fail. For new scenes, use saveFavouriteSceneAs instead.

Example​

// Update the current scene when the user clicks the "Update" button
document.getElementById('update-scene-btn').addEventListener('click', async () => {
  // Check if we have a loaded scene to update
  const sceneShortcode = window.mimeeqApp.observers.modular.favSceneShortcode.getValue().newValue;

  if (!sceneShortcode) {
    showNotification('This is a new scene that hasn\'t been saved yet. Please use "Save As" instead.', 'warning');
    return;
  }

  const success = await window.mimeeqApp.actions.saveFavouriteScene();

  if (success) {
    showNotification('Scene updated successfully');
  } else {
    showNotification('Failed to update scene', 'error');
  }
});

Returns​

A promise that resolves to true if the update was successful, false otherwise

Emits​

mimeeq-modular-save-scene When the scene is successfully saved

saveFavouriteSceneAs​

saveFavouriteSceneAs: SaveFavouriteSceneAs

Function

Saves the current modular scene as a new favorite with a custom name.

This method captures the complete current state of a modular scene—including all components, their positions, configurations, and relationships—and saves it as a new favorite entry in the specified collections. This allows complex layouts to be saved and restored later, shared with colleagues, or used as starting points for similar designs.

Unlike saveFavouriteScene, this method always creates a new entry rather than updating an existing one, and requires providing a name for the new scene.

Example​

// Save the current scene with a custom name when the user submits a form
document.getElementById('save-scene-form').addEventListener('submit', async (e) => {
  e.preventDefault();

  const sceneName = document.getElementById('scene-name-input').value.trim();
  if (!sceneName) {
    showNotification('Please enter a name for this scene', 'warning');
    return;
  }

  // Get the selected collection IDs from checkboxes
  const selectedCollections = Array.from(
    document.querySelectorAll('input[name="collections"]:checked')
  ).map(cb => cb.value);

  if (selectedCollections.length === 0) {
    showNotification('Please select at least one collection', 'warning');
    return;
  }

  const success = await window.mimeeqApp.actions.saveFavouriteSceneAs(
    sceneName,
    selectedCollections
  );

  if (success) {
    showNotification(`Scene "${sceneName}" saved successfully`);
    closeModal('save-scene-modal');
  } else {
    showNotification('Failed to save scene', 'error');
  }
});

Param​

The display name for the saved scene

Param​

Array of collection IDs to save this scene to

Returns​

A promise that resolves to true if saving was successful, false otherwise

Fires​

@mimeeq#mimeeq-modular-save-scene

ModularControl​

cancelOperations​

cancelOperations: CancelOperations

Function

Cancels any active modular operations like clone, move, or replace.

This function exits any currently active special interaction mode (clone, move, replace, etc.) and returns to the normal selection mode. It's useful as an "escape" or "cancel" action when the user wants to abort the current operation.

Example​

// Cancel the current operation when the cancel button or Escape key is pressed
document.getElementById('cancel-btn').addEventListener('click', () => {
  window.mimeeqApp.actions.cancelOperations();
});

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    window.mimeeqApp.actions.cancelOperations();
  }
});

Fires​

@mimeeq#mimeeq-modular-abort-action

checkCanMove​

checkCanMove: CheckCanMove

Function

Checks if a specific product instance can be moved to another position.

This function determines whether a specific product in the scene can be moved to a different position. It evaluates factors like available connection points, product settings, and scene composition to determine if movement is possible.

This check is useful for dynamically enabling or disabling move functionality based on the selected product and current scene state.

Example​

// Enable or disable the move button based on whether the selected product can be moved
async function updateMoveButtonState() {
  const selectedElement = getSelectedElementId();
  const canMove = await window.mimeeqApp.actions.checkCanMove(selectedElement);

  document.getElementById('move-btn').disabled = !canMove;
}

Param​

ID of the product instance to check for move capability

Returns​

A promise resolving to true if the product can be moved, false otherwise

chooseProductToAdd​

chooseProductToAdd: ChooseProductToAdd

Function

Selects a product to add to the modular scene.

This function prepares a product from the catalog for addition to the scene. If replace mode is active, it replaces the currently selected product with the new one; otherwise, it prepares the product for placement in the scene, showing all valid placement positions.

This is typically called when a user clicks on a product in the catalog or product browser, initiating the process of adding that product to the scene.

Example​

// Select a product to add when clicked in the product catalog
document.querySelectorAll('.product-item').forEach(item => {
  item.addEventListener('click', () => {
    const productData = getProductDataFromElement(item);
    window.mimeeqApp.actions.chooseProductToAdd(productData);
  });
});

Param​

Product data object containing product information

clearScene​

clearScene: ClearScene

Function

Completely clears the modular scene, removing all products and resetting to an empty state.

This function removes all products from the modular scene and resets all scene-related state, returning to a fresh starting point. If a starter configuration is defined for the modular product, that configuration will be loaded; otherwise, an empty scene is created.

Clear scene is useful for starting over completely, abandoning the current design to begin a new one from scratch.

Example​

// Add a "Clear All" button to your interface
document.getElementById('clear-scene-btn').addEventListener('click', () => {
  if (confirm('Are you sure you want to clear the entire scene? This cannot be undone.')) {
    window.mimeeqApp.actions.clearScene();
  }
});

Fires​

@mimeeq#mimeeq-modular-clear-scene

Fires​

@mimeeq-internal-clear-scene (conditionally)

copyStyles​

copyStyles: CopyStyles

Function

Activates style copying mode for the currently selected product.

This function enters a special interaction mode where the currently selected product's style options (like finishes, colors, and material selections) are copied and prepared for application to other products. After activating copy mode, the user must select a target product and use the pasteStyles function to apply the copied styles.

Style copying is useful for maintaining visual consistency across multiple components in a modular design without manually reconfiguring each one.

Example​

// Start the style copy process when the copy styles button is clicked
document.getElementById('copy-styles-btn').addEventListener('click', () => {
  window.mimeeqApp.actions.copyStyles();
});

Fires​

@mimeeq#mimeeq-modular-set-copyStyles (indirectly)

deselectAllModels​

deselectAllModels: DeselectAllModels

Function

Deselects all models currently selected on the modular scene.

This function clears all current selections in the modular configurator, ensuring no product is highlighted or targeted for actions. This is useful when you want to start fresh with selections or view the entire scene without focus on any particular component.

Example​

// Clear all selections when the "Select None" button is clicked
document.getElementById('deselect-all-btn').addEventListener('click', () => {
  window.mimeeqApp.actions.deselectAllModels();
});

Fires​

@mimeeq#mimeeq-modular-unselect-all

enableClone​

enableClone: EnableClone

Function

Activates clone mode for the currently selected product.

This function enters a special interaction mode where the next click on the scene will create a copy of the currently selected product. The clone will inherit all configuration options from the original, allowing quick duplication of components.

Cloning is useful for creating symmetrical designs or placing multiple identical components without having to reconfigure each one.

Example​

// Enter clone mode when the clone button is clicked
document.getElementById('clone-btn').addEventListener('click', () => {
  window.mimeeqApp.actions.enableClone();
});

Fires​

@mimeeq#mimeeq-modular-set-clone (indirectly)

enableMove​

enableMove: EnableMove

Function

Activates move mode for the currently selected product.

This function enters a special interaction mode where the user can relocate the currently selected product to a different valid position in the scene. When in move mode, all possible destinations will be highlighted, and the user can click on a destination to move the product there.

Moving products allows for refining layouts and adjusting spatial relationships between components in the modular design.

Example​

// Enter move mode when the move button is clicked
document.getElementById('move-btn').addEventListener('click', () => {
  window.mimeeqApp.actions.enableMove();
});

Fires​

@mimeeq#mimeeq-modular-set-move (indirectly)

enableReplace​

enableReplace: EnableReplace

Function

Activates replace mode for the currently selected product.

This function enters a special interaction mode where the currently selected product can be replaced with another compatible product while maintaining all connections. It displays a list of compatible replacement products that can fit in the same space and connect to the same adjacent products.

Replace mode is useful for exploring different options in a design without disrupting the overall layout or connections.

Example​

// Enter replace mode when the replace button is clicked
document.getElementById('replace-btn').addEventListener('click', () => {
  window.mimeeqApp.actions.enableReplace();
});

Fires​

@mimeeq#mimeeq-modular-set-replace (indirectly)

flipProduct​

flipProduct: FlipProduct

Function

Flips or rotates the currently selected product to change its orientation.

This function changes the orientation of the currently selected product, essentially flipping it to use a different connection point. Not all products support flipping, as this capability depends on product-specific settings and design.

Flipping is useful for creating mirrored configurations or changing the orientation of products to fit specific layout requirements.

Example​

// Flip the selected product when the flip button is clicked
document.getElementById('flip-btn').addEventListener('click', () => {
  window.mimeeqApp.actions.flipProduct();
});

Fires​

@mimeeq#mimeeq-modular-flip-product

Fires​

@mimeeq-internal-flip-product

getBoundingBoxPosition2d​

getBoundingBoxPosition2d: GetBoundingBoxPosition2d

Function

Retrieves the screen position and dimensions of a specific element in the scene.

This action calculates the exact pixel coordinates and size of an element's bounding box on the screen. It's like measuring where and how large something appears in the current view, which is essential for positioning overlays, tooltips, or information panels precisely.

Business value:

  • Enables accurate placement of interactive UI elements relative to product parts
  • Supports hotspot features that highlight specific product components
  • Allows dynamic information displays that track with product features
  • Powers advanced configurator interfaces that respond to what's visible

Example​

// Position a tooltip next to a specific product component
window.mimeeqApp.actions.getBoundingBoxPosition2d('drawer-handle')
  .then(position => {
    if (position) {
      const tooltip = document.getElementById('feature-tooltip');
      tooltip.style.left = `${position.right + 10}px`;
      tooltip.style.top = `${position.top}px`;
      tooltip.style.display = 'block';
    }
  });

Param​

Unique identifier for the element to measure

Returns​

Promise resolving to position and size information, or null if not found

getModularShareUrl​

getModularShareUrl: GetModularShareUrl

Function

Generates a shareable URL for the current modular scene configuration.

This function creates a URL that encapsulates the current state of the modular scene, allowing it to be shared with others or bookmarked for later access. The URL includes a shortcode that represents the complete scene configuration.

Shareable URLs enable collaboration by allowing designs to be easily shared with colleagues, clients, or other stakeholders via email, messaging, or other channels.

Example​

// Generate and copy a shareable URL to the clipboard
document.getElementById('share-btn').addEventListener('click', async () => {
  const shareUrl = await window.mimeeqApp.actions.getModularShareUrl();

  if (shareUrl) {
    navigator.clipboard.writeText(shareUrl)
      .then(() => alert('Share link copied to clipboard!'))
      .catch(err => console.error('Could not copy URL: ', err));
  } else {
    alert('Could not generate share link');
  }
});

Param​

If true, returns only the shortcode rather than the complete URL

Returns​

The shareable URL or shortcode, or null if generation fails

hoverProductForAction​

hoverProductForAction: HoverProductForAction

Function

Highlights valid placement positions for a specific product action.

This function displays visual indicators for all valid positions where a specific product can be placed, based on the requested action type. For example, when adding a new product, it shows all valid connection points; when moving a product, it shows all possible destinations.

The visual highlighting helps users understand where products can be placed and how they can be connected to existing components in the scene.

Example​

// Show placement hints when hovering over a product in the catalog
document.querySelectorAll('.product-item').forEach(item => {
  item.addEventListener('mouseenter', () => {
    const productId = item.dataset.productId;
    window.mimeeqApp.actions.hoverProductForAction(
      productId,
      'hover'
    );
  });

  item.addEventListener('mouseleave', () => {
    window.mimeeqApp.actions.hoverProductForAction('', '');
  });
});

Param​

ID of the product to show placement options for

Param​

Type of action being performed (e.g., 'hover', 'move', 'clone')

openFinishModal​

openFinishModal: OpenFinishModal

Function

Opens the finish modal showing all elements in the modular scene and available tabs.

This function displays a comprehensive summary view of the entire modular design, including all products, their configurations, and pricing information. It allows users to review their design, make final adjustments, and proceed to actions like saving, sharing, or adding to cart.

The finish modal is typically the final step in the design process before taking actions with the completed design.

Example​

// Open the finish modal when the summary button is clicked
document.getElementById('summary-btn').addEventListener('click', () => {
  window.mimeeqApp.actions.openFinishModal();
});

Fires​

@mimeeq#mimeeq-show-modular-summary

openLoadSceneModal​

openLoadSceneModal: OpenLoadSceneModal

Function

Opens the "Load Scene" modal dialog to browse and load saved modular scenes.

This function displays a modal interface where users can browse their saved modular scenes and select one to load. It allows users to restore previously created designs or start from saved templates.

Example​

// Open the load scene dialog when the "Load" button is clicked
document.getElementById('load-scene-btn').addEventListener('click', () => {
  window.mimeeqApp.actions.openLoadSceneModal();
});

Fires​

@mimeeq-internal-load-scene

pasteStyles​

pasteStyles: PasteStyles

Function

Applies previously copied styles to the currently selected product.

This function applies style options (like finishes, colors, and materials) that were previously copied using copyStyles() to the currently selected product. The target product must be compatible with the copied styles.

Style pasting allows for quick application of consistent visual attributes across multiple components in a modular design.

Example​

// Complete the copy-paste style workflow with buttons for each step
document.getElementById('copy-styles-btn').addEventListener('click', () => {
  // First select the source product, then click this button
  window.mimeeqApp.actions.copyStyles();
  alert('Styles copied! Now select another product and click "Paste Styles"');
});

document.getElementById('paste-styles-btn').addEventListener('click', () => {
  // Select the target product, then click this button
  window.mimeeqApp.actions.pasteStyles();
});

removeSelected​

removeSelected: RemoveProducts

Function

Removes the currently selected product(s) from the modular scene.

This function deletes the currently selected product(s) from the scene, along with any auto-inserted connectors that may be exclusively associated with them. Products with the "disableDelete" property set to true cannot be removed, and auto-inserted products require special handling.

Product removal allows for iterative refinement of designs by eliminating unwanted components as the design evolves.

Example​

// Remove the selected product when the delete button is clicked
document.getElementById('delete-btn').addEventListener('click', () => {
  window.mimeeqApp.actions.removeProducts();
});

Fires​

@mimeeq#mimeeq-modular-remove-product

rotateModel​

rotateModel: RotateModel

Function

Rotates a freely movable product by a specified angle.

This function rotates the currently selected product by the specified angle (in degrees). It only works on products that have the "freeMove" property enabled, which allows them to be positioned freely in the scene rather than being constrained by connection points.

Rotation is useful for orienting decorative elements, standalone furniture, or accessories that don't connect directly to other modular components.

Example​

// Rotate the selected product 45 degrees clockwise
document.getElementById('rotate-right-btn').addEventListener('click', () => {
  window.mimeeqApp.actions.rotateModel(45);
});

// Rotate the selected product 45 degrees counter-clockwise
document.getElementById('rotate-left-btn').addEventListener('click', () => {
  window.mimeeqApp.actions.rotateModel(-45);
});

Param​

Rotation angle in degrees (default: 45)

selectElement​

selectElement: SelectElement

Function

Selects a specific product in the modular scene.

This function highlights and selects a particular product in the modular scene by its unique instance ID. The selected product becomes the target for subsequent operations like configuring options, moving, cloning, or removing.

Explicit selection is useful for programmatically targeting specific products for operations, especially in custom interfaces or guided workflows.

Example​

// Create a list of all products in the scene with select buttons
function renderProductList(products) {
  const container = document.getElementById('product-list');
  container.innerHTML = '';

  Object.entries(products).forEach(([instanceId, product]) => {
    const item = document.createElement('div');
    item.innerHTML = `
      <span>${product.name}</span>
      <button class="select-btn">Select</button>
    `;

    item.querySelector('.select-btn').addEventListener('click', () => {
      window.mimeeqApp.actions.selectElement(instanceId);
    });

    container.appendChild(item);
  });
}

Param​

Unique instance ID of the product to select

toggleApplyOptionsForAll​

toggleApplyOptionsForAll: ToggleApplyOptionsForAll

Function

Toggles whether option changes apply to all products on the scene.

This function controls whether changing options on one product automatically applies compatible changes to all other products in the scene. This is useful for creating a unified visual theme across an entire design.

When enabled, changing an option like "Oak finish" on one product will apply Oak finish to all other products that have a compatible finish option, ensuring visual harmony across the entire design.

Example​

// Toggle global style synchronization
document.getElementById('sync-all-btn').addEventListener('click', () => {
  window.mimeeqApp.actions.toggleApplyOptionsForAll();
});

toggleApplyOptionsForInstances​

toggleApplyOptionsForInstances: ToggleApplyOptionsForInstances

Function

Toggles whether option changes apply to all instances of a specific product on the scene.

This function controls whether changing options on one instance of a product automatically applies the same changes to all other instances of the same product in the scene. This is useful for maintaining consistency across repeated elements.

When enabled, all instances of the same product will update simultaneously when any one instance is modified, ensuring visual consistency.

Example​

// Toggle synchronized styling for all cabinet instances
document.getElementById('sync-cabinets-btn').addEventListener('click', () => {
  window.mimeeqApp.actions.toggleApplyOptionsForInstances('cabinet-product-id');
});

Param​

ID of the product type to toggle synchronization for

Fires​

@mmq-toggle-apply-styles-instance

toggleGrid​

toggleGrid: ToggleGrid

Function

Toggles the visibility of the measurement grid on the scene floor.

This function shows or hides the measurement grid on the floor of the modular scene. The grid provides visual references for scale and position, helping users accurately place and align products in the scene. It's particularly useful when precise spacing between products is important.

Example​

// Toggle the grid when the grid button is clicked
document.getElementById('toggle-grid-btn').addEventListener('click', () => {
  window.mimeeqApp.actions.toggleGrid();
});

Fires​

@mimeeq#mimeeq-modular-show-grid

Fires​

@mimeeq#mimeeq-modular-hide-grid

toggleSlide​

toggleSlide: ToggleSlide

Function

Activates slide mode for the currently selected product.

This function toggles a special movement mode for products that support horizontal sliding. Not all products can slide, as this capability depends on product-specific settings and design. When activated on a compatible product, the user can drag the product horizontally to adjust its position within constraints.

Sliding is useful for fine-tuning the position of products like cabinet doors, sliding tabletops, or other components with movable parts.

Example​

// Toggle slide mode when the slide button is clicked
document.getElementById('slide-btn').addEventListener('click', () => {
  window.mimeeqApp.actions.toggleSlide();
});

Fires​

@mimeeq#mimeeq-modular-set-slide (indirectly)

OptionSelection​

filterOptions​

filterOptions: FilterOptions

Function

Filters options based on selected filter criteria.

This method applies specified filters to a list of product options, returning only the options that match the filter criteria. This is useful for implementing custom filtering interfaces or for dynamically showing/hiding options based on user selections.

Example​

// Get all options
const allOptions = getOptionsFromSomewhere();

// Filter options by selected filters
const selectedFilters = ['${parentId}|${filterId}' , '${parentId1}|${filterId1}' ];
const filteredOptions = window.mimeeqApp.actions.filterOptions(allOptions, selectedFilters);

// Display the filtered options in a custom UI
displayOptionsInUI(filteredOptions);

Param​

Array of options to filter

Param​

Array of filter IDs to apply

Returns​

Filtered array of options that match the selected filters

markOption​

markOption: MarkOption

Function

Selects a specific option for a product configuration.

This method allows you to programmatically select options for the product, as if the user had clicked on them in the UI. It can be used to apply preset configurations, implement custom option selection interfaces, or automate configuration tasks.

When an option is selected, the scene updates to reflect the new configuration, and relevant events are dispatched to update the UI and pricing.

Emits​

mimeeq-select-option When an option is selected for a standard product

Emits​

mimeeq-app-url-change When the configuration URL needs updating

markOptionModular​

markOptionModular: MarkOptionModular

Function

Selects options for a modular product component.

This method is similar to markOption, but specifically designed for modular products where multiple components might be selected. It allows you to change options for the currently selected component(s) or for specific instances by ID.

Emits​

mimeeq-modular-select-option-multiple When options are selected for multiple instances

Emits​

mimeeq-modular-select-option When an option is selected for a single instance

prepareFilterOptions​

prepareFilterOptions: PrepareFilterOptions

Function

Prepares filter options with counts for available choices.

This method processes a full filter list against available options and currently selected filters, returning a map of possible filters with counts of how many options would match each filter. This is useful for building dynamic filter interfaces that show users which filters have available options.

Example​

// Get the global filter list, all options, and currently selected filters
const globalFilters = getGlobalFilters();
const allOptions = getAllOptions();
const selectedFilters = getSelectedFilters();

// Get available filters with counts
const filterOptions = window.mimeeqApp.actions.prepareFilterOptions(
  globalFilters,
  allOptions,
  selectedFilters
);

// Build a filter UI showing counts
for (const [parentFilterId, filter] of Object.entries(filterOptions)) {
  console.log(`${filter.title}: ${filter.amount} options available`);
}

Param​

Complete list of all available filters

Param​

List of options to evaluate against filters

Param​

Currently selected filter IDs

Returns​

Map of filter IDs to filter objects with counts

toggleApplyOptionsForAll​

toggleApplyOptionsForAll: ToggleApplyOptionsForAll

Function

Toggles whether option changes apply to all products on the scene.

This function controls whether changing options on one product automatically applies compatible changes to all other products in the scene. This is useful for creating a unified visual theme across an entire design.

When enabled, changing an option like "Oak finish" on one product will apply Oak finish to all other products that have a compatible finish option, ensuring visual harmony across the entire design.

Example​

// Toggle global style synchronization
document.getElementById('sync-all-btn').addEventListener('click', () => {
  window.mimeeqApp.actions.toggleApplyOptionsForAll();
});

toggleApplyOptionsForInstances​

toggleApplyOptionsForInstances: ToggleApplyOptionsForInstances

Function

Toggles whether option changes apply to all instances of a specific product on the scene.

This function controls whether changing options on one instance of a product automatically applies the same changes to all other instances of the same product in the scene. This is useful for maintaining consistency across repeated elements.

When enabled, all instances of the same product will update simultaneously when any one instance is modified, ensuring visual consistency.

Example​

// Toggle synchronized styling for all cabinet instances
document.getElementById('sync-cabinets-btn').addEventListener('click', () => {
  window.mimeeqApp.actions.toggleApplyOptionsForInstances('cabinet-product-id');
});

Param​

ID of the product type to toggle synchronization for

Fires​

@mmq-toggle-apply-styles-instance

Pricing​

setDealer​

setDealer: SetDealer

Function

Changes the active dealer for pricing calculations.

This method updates which dealer (company) is associated with the current pricing session. Different dealers may have different pricing agreements, discount structures, or pricing tiers, so changing the dealer can affect the calculated prices.

When the dealer changes, the method also adjusts the available price types to those permitted for the selected dealer, ensuring pricing compliance.

This functionality is primarily used by sales representatives ordering on behalf of different dealer accounts.

Example​

// Set the active dealer when selected from a dropdown
document.getElementById('dealer-select').addEventListener('change', (e) => {
  window.mimeeqApp.actions.setDealer(e.target.value);
});

Param​

ID of the dealer company to use for pricing calculations

setPriceType​

setPriceType: SetPriceType

Function

Changes the active price type used for calculations.

This method switches between different pricing strategies, such as retail (RRP), wholesale, or cost pricing. The available price types depend on the user's permissions and the customer's pricing configuration.

Different price types allow sales representatives to show appropriate pricing to different customer segments, or to compare margins across pricing strategies.

Example​

// Switch to wholesale pricing for a dealer customer
const wholesalePriceType = window.mimeeqApp.observers.pricing.priceOptions
  .getValue().newValue.find(option => option.type === 'WHOLESALE');

if (wholesalePriceType) {
  window.mimeeqApp.actions.setPriceType(wholesalePriceType);
}

Param​

The price type object to set as active

setQuantity​

setQuantity: SetQuantity

Function

Updates the quantity for price calculations.

This method adjusts the quantity value used for all price calculations in the configurator. It respects product-specific constraints such as minimum order quantities (MOQ) and incremental quantity steps. If the provided quantity doesn't meet these constraints, it's automatically adjusted to the nearest valid value.

Quantity changes trigger price recalculations that reflect volume-based pricing tiers, providing accurate pricing for different order volumes.

Example​

// Set a specific quantity, with automatic adjustment to respect MOQ and steps
window.mimeeqApp.actions.setQuantity(23);

// Connect a quantity input to the configurator
document.getElementById('qty-input').addEventListener('change', (e) => {
  window.mimeeqApp.actions.setQuantity(parseInt(e.target.value, 10));
});

Param​

The requested quantity value (will be adjusted if needed to comply with product minimum quantities and step increments)

Product Data​

getBomDebugInfo​

getBomDebugInfo: GetBomDebugInfo

Function

Retrieves Bill of Materials (BOM) information for the current configuration.

This method provides detailed BOM data for the configured product, including component parts, quantities, materials, and custom field values. This information is primarily used for manufacturing, inventory, and procurement purposes, but can also be valuable for detailed specification documentation.

The BOM reflects the specific configuration of the product, with components and quantities dynamically adjusted based on selected options.

Example​

// Get and display BOM information for the current configuration
window.mimeeqApp.actions.getBomDebugInfo().then(bomData => {
  if (bomData) {
    // Display the BOM in a table
    const bomTable = document.getElementById('bom-table');
    bomTable.innerHTML = '';

    bomData.bomItems.forEach(item => {
      const row = document.createElement('tr');
      row.innerHTML = `
        <td>${item.name || ''}</td>
        <td>${item.code || ''}</td>
        <td>${item.quantity}</td>
        <td>${item.unit}</td>
      `;
      bomTable.appendChild(row);

      // Add sub-items if present
      if (item.subItems && item.subItems.length) {
        renderSubItems(bomTable, item.subItems, 1);
      }
    });
  }
});

Returns​

A promise resolving to the BOM data if available, or null if unavailable or not enabled

Product Visualization​

get2dViewImage​

get2dViewImage: Get2dViewImage

Function

Generates an image URL for a specific 2D view of the current configuration.

This method creates a URL to a rendered image of the product from a specific viewpoint. It can generate images for any available 2D view, with options for custom configuration codes, sizes, and background colors.

These dynamically generated images can be used in custom interfaces, documentation, or wherever a visual representation of the configured product is needed.

Example​

// Get the front view image of the current configuration
const frontViewUrl = await window.mimeeqApp.actions.get2dViewImage('front');
document.getElementById('product-image').src = frontViewUrl;

// Get a high-resolution side view with custom background for a specific configuration
const sideViewUrl = await window.mimeeqApp.actions.get2dViewImage(
  'side',               // View ID
  'Width-a4&Color-b7',  // Configuration code
  'x1024',              // Size
  '#F5F5F5'             // Background color
);

Param​

ID of the view to generate (empty string for default view)

Param​

Optional specific configuration code to visualize

Param​

Optional image size identifier (e.g., 'x425', 'x1024')

Param​

Optional background color for the image

Returns​

A promise resolving to the URL of the generated image, or empty string if unsuccessful

get3dInformationTemplate​

get3dInformationTemplate: Get3dInformationTemplate

Function

Retrieves template data for a 3D hotspot information display.

This method fetches the content associated with a specific mesh element's hotspot. Hotspots are interactive points on 3D models that display additional information when clicked or hovered over, such as feature explanations, specifications, or component details.

Hotspot templates can include rich text content, image galleries, and document links, providing detailed information about specific parts of the product without cluttering the main interface.

Example​

// Display hotspot information when a mesh part is clicked
canvas.addEventListener('mesh-click', async (e) => {
  const meshId = e.detail.meshId;

  // Fetch the hotspot template data
  const templateData = await window.mimeeqApp.actions.get3dInformationTemplate(meshId);

  if (templateData) {
    // Display the hotspot information in a popup or panel
    showHotspotPopup(templateData);
  }
});

Param​

ID of the mesh element associated with the hotspot

Returns​

A promise resolving to the template data if found, or null if no template exists

getProductCarouselImages​

getProductCarouselImages: GetProductCarouselImages

Function

Retrieves a list of images for the product's carousel views.

This method fetches images for all available views of the current product configuration, optimized for display in a carousel or gallery interface. It can generate images based on a specific configuration code and with custom background colors.

The returned carousel items include both 2D rendered views and a marker for the 3D view, allowing for comprehensive product visualization in custom interfaces.

Example​

// Get images for all available views with default settings
const productViews = await window.mimeeqApp.actions.getProductCarouselImages(
  ['front', 'side', 'top', '3d'], // Available view IDs
);

// Display the images in a custom carousel
productViews.forEach(view => {
  if (view.viewId === '3d') {
    // Show 3D view button
    carousel.appendChild(create3DViewButton());
  } else {
    // Add image to carousel
    const img = document.createElement('img');
    img.src = view.image;
    img.dataset.viewId = view.viewId;
    carousel.appendChild(img);
  }
});

Param​

Array of view IDs to include in the carousel

Param​

Optional specific configuration code to visualize (uses current configuration if not provided)

Param​

Optional background color for the images (uses theme default if not provided)

Returns​

A promise resolving to an array of carousel items, each containing a viewId and image URL

getProductThumbnail​

getProductThumbnail: GetProductThumbnail

Function

Generates a thumbnail image URL for a product.

This method creates a URL to a product thumbnail, either using a static pre-defined image or dynamically generating one based on the current configuration. The thumbnail can be customized with specific configuration codes, sizes, and background colors.

Product thumbnails are essential for product listings, carousels, saved configurations, and anywhere products need to be represented visually in a compact format.

Example​

// Get a default thumbnail for a product
const thumbUrl = await window.mimeeqApp.actions.getProductThumbnail(
  'prod_123',           // Product ID
  product.standardImage // Thumbnail configuration
);

// Get a custom thumbnail for a specific configuration
const configThumbUrl = await window.mimeeqApp.actions.getProductThumbnail(
  'prod_123',           // Product ID
  product.standardImage, // Thumbnail configuration
  'Width-a4&Color-b7',  // Configuration code
  'x425',               // Size
  '#FFFFFF'             // Background color
);

Param​

ID of the product to generate a thumbnail for

Param​

Thumbnail configuration object defining image type and source

Param​

Optional specific configuration code to visualize

Param​

Optional image size identifier

Param​

Optional background color for the image

Returns​

A promise resolving to the URL of the generated thumbnail, or empty string if unsuccessful

setCarouselView​

setCarouselView: SetCarouselView

Function

Switches the active view in the product visualization.

This method changes which view of the product is currently displayed, allowing users to see different angles or representations. For standard products, this switches between different 2D views or the 3D model. Providing an empty string activates the 3D view.

View switching is essential for comprehensive product examination, helping users evaluate products from all angles.

Example​

// Switch to a specific 2D view when its thumbnail is clicked
document.querySelectorAll('.view-thumbnail').forEach(thumb => {
  thumb.addEventListener('click', () => {
    window.mimeeqApp.actions.setCarouselView(thumb.dataset.viewId);
  });
});

// Switch back to 3D view
document.getElementById('view-3d-btn').addEventListener('click', () => {
  window.mimeeqApp.actions.setCarouselView('');
});

Param​

ID of the view to display, or empty string for 3D view

ProductTabs​

getTabFiles​

getTabFiles: GetTabFiles

Function

Retrieves downloadable files associated with a specific product tab.

This method fetches all available files for a given tab based on the current product configuration. Files may include documentation, specifications, installation guides, CAD files, or other product-related resources that supplement the visual configuration.

The result includes complete file metadata such as names, sizes in human-readable format, and paths - everything needed to present a file list to users and enable downloads.

Example​

// Fetch files for the "Documentation" tab
const files = await window.mimeeqApp.actions.getTabFiles('docs_tab_123');

// Display files in a list with download buttons
const fileList = document.getElementById('file-list');
fileList.innerHTML = '';

files.forEach(file => {
  const listItem = document.createElement('li');
  listItem.innerHTML = `
    <span>${file.fileName}</span>
    <span>${file.size}</span>
    <button onclick="downloadFile('${file.s3Path}', '${file.fileName}')">
      Download
    </button>
  `;
  fileList.appendChild(listItem);
});

Param​

Unique identifier for the tab containing the files

Returns​

A promise resolving to an array of file objects, each containing metadata like fileName, s3Path, size, extension, etc.

getTabFinishes​

getTabFinishes: GetTabFinishes

Function

Retrieves detailed information about material finish options displayed in a tab.

This method fetches comprehensive data about material options (finishes, fabrics, colors, etc.) that are presented in a product tab. For each finish, it retrieves the complete option set data including available options, images, descriptions, and any additional metadata.

The returned data is enhanced with proper image URLs and formatted descriptions, making it ready for immediate display in the user interface.

Example​

// Get detailed data for all wood finishes in a tab
const finishesTab = productTabs.find(tab => tab.tabType === 'FINISHES');
const finishesData = await window.mimeeqApp.actions.getTabFinishes(finishesTab.materials);

// Display each finish option set with its available options
finishesData.forEach(finishSet => {
  const container = document.createElement('div');
  container.innerHTML = `<h3>${finishSet.display}</h3>`;

  // Add each individual finish option with its image
  finishSet.options.forEach(option => {
    const optionEl = document.createElement('div');
    optionEl.innerHTML = `
      <img src="${option.thumbnail}" alt="${option.name}">
      <span>${option.name}</span>
    `;
    container.appendChild(optionEl);
  });

  document.getElementById('finishes-container').appendChild(container);
});

Param​

Array of material definitions from the product tab

Returns​

A promise resolving to an array of fully populated option set data objects

getTabGallery​

getTabGallery: GetTabGallery

Function

Retrieves image gallery data for display in a product tab.

This method fetches and processes a gallery of images associated with a product, preparing them for display in the configurator interface. Galleries typically showcase product lifestyle images, detail shots, installation examples, or inspirational content.

The returned data includes both the gallery layout structure (number of columns) and the complete set of prepared images with appropriate sizes and formats for different display contexts.

Example​

// Fetch and display a product image gallery
const galleryTab = productTabs.find(tab => tab.tabType === 'GALLERY');
const galleryData = await window.mimeeqApp.actions.getTabGallery(galleryTab.galleryId);

if (galleryData) {
  // Set up the gallery container with the correct column layout
  const gallery = document.getElementById('product-gallery');
  gallery.style.gridTemplateColumns = `repeat(${galleryData.columns}, 1fr)`;

  // Add each gallery item
  galleryData.items.forEach(item => {
    const galleryItem = document.createElement('div');
    galleryItem.className = 'gallery-item';

    // Create appropriate element based on media type
    if (item.isVideo) {
      // Handle video items
      galleryItem.innerHTML = `<video src="${item.original}" controls></video>`;
    } else {
      // Handle image items with lightbox functionality
      galleryItem.innerHTML = `
        <img src="${item.small}" data-large="${item.large}" alt="${item.caption}">
        <div class="caption">${item.caption}</div>
      `;
    }

    gallery.appendChild(galleryItem);
  });
}

Param​

Unique identifier for the gallery to retrieve

Returns​

A promise resolving to a gallery data object, or null if the gallery cannot be found

getTabPopular​

getTabPopular: GetTabPopular

Function

Retrieves data for popular product configurations to display in a tab.

This method processes a collection of popular configuration definitions and enhances them with dynamic data like images, shortcodes, and pricing. Popular configurations serve as pre-defined starting points that showcase recommended or common setups for a product.

Each configuration is validated to ensure it's compatible with the current product, and invalid configurations are automatically filtered out. The result provides everything needed to display visual options to users with accurate pricing.

Example​

// Fetch and display popular configurations in a product tab
const popularTab = productTabs.find(tab => tab.tabType === 'POPULAR_STATIC');
const popularConfigs = await window.mimeeqApp.actions.getTabPopular(
  popularTab.popularConfigurations,
  '#FFFFFF'  // White background for thumbnails
);

// Create a grid of popular configurations
const container = document.getElementById('popular-configs');
popularConfigs.forEach(config => {
  const configCard = document.createElement('div');
  configCard.className = 'config-card';
  configCard.innerHTML = `
    <img src="${config.image}" alt="Configuration">
    <div class="price">${config.price} ${state.pricing.prices.currency}</div>
    <button class="select-btn">Select</button>
  `;

  // Add click handler to select this configuration
  configCard.querySelector('.select-btn').addEventListener('click', () => {
    window.mimeeqApp.actions.selectPopularConfig(config);
  });

  container.appendChild(configCard);
});

Param​

Array of popular configuration definitions from the product tab

Param​

Optional background color to use for configuration images

Returns​

A promise resolving to an array of enhanced popular configuration objects

selectPopularConfig​

selectPopularConfig: SelectPopularConfig

Function

Applies a popular configuration to the current product.

This method sets the product to a specific pre-defined configuration, instantly applying all the options that make up that popular variant. This allows users to quickly switch between recommended setups without manually selecting each option.

When a popular configuration is selected, the configurator updates the 3D model, pricing, and interface to reflect the new selection. The method also records this selection in the configuration history and dispatches appropriate events.

Example​

// Create a carousel of popular configurations
const popularConfigs = await getPopularConfigurations();

popularConfigs.forEach(config => {
  const configButton = document.createElement('button');
  configButton.className = 'config-button';
  configButton.innerHTML = `<img src="${config.image}" alt="Configuration">`;

  configButton.addEventListener('click', () => {
    // Apply this configuration when clicked
    window.mimeeqApp.actions.selectPopularConfig(config);

    // Update UI to highlight the selected configuration
    document.querySelectorAll('.config-button').forEach(btn => {
      btn.classList.remove('active');
    });
    configButton.classList.add('active');
  });

  document.getElementById('popular-carousel').appendChild(configButton);
});

Param​

Popular configuration object with all necessary data

Emits​

mimeeq-select-popular-variant When a popular configuration is selected

Emits​

mimeeq-app-url-change When the configuration URL needs updating

Emits​

mmq-app-url-change-sandbox For sandbox environment URL changes

RelatedProducts​

getRelatedDynamicData​

getRelatedDynamicData: GetRelatedDynamicData

Function

Enhances related product items with dynamic data like images and matched configurations.

This function takes basic related product information and enriches it with visual elements and configuration details based on the current product's selected options. It generates appropriate thumbnail images and determines the best matching configuration for each related product based on compatibility mappings.

For example, if a customer has selected "Oak" finish on a table, this function will ensure the related chairs show with an "Oak" finish as well, creating a visually cohesive experience when browsing related items.

Example​

// Get related products and enhance them with dynamic data
window.mimeeqApp.actions.getRelatedProducts().then(relatedItems => {
  window.mimeeqApp.actions.getRelatedDynamicData(
    relatedItems,
    '#FFFFFF'  // White background for thumbnails
  ).then(enhancedItems => {
    // Display the enhanced items with their matched images
    displayRelatedProductCarousel(enhancedItems);
  });
});

Param​

Raw list of related product items to enhance

Param​

Optional background color for generated thumbnail images

Returns​

A promise resolving to an array of enhanced related items with images and configurations

getRelatedProducts​

getRelatedProducts: GetRelatedProducts

Function

Retrieves all related products for the current product.

This function fetches a list of products that have been defined as related to the current product. Related products are typically complementary items, accessories, or alternative options that customers might be interested in when viewing the current product.

Related products help increase average order value, improve product discovery, and enhance the shopping experience by suggesting relevant additional items.

Example​

// Get all related products and display them in a carousel
window.mimeeqApp.actions.getRelatedProducts().then(relatedItems => {
  const container = document.getElementById('related-products');

  relatedItems.forEach(item => {
    const productCard = document.createElement('div');
    productCard.className = 'product-card';
    productCard.innerHTML = `
      <h3>${item.name}</h3>
      <button>View Product</button>
    `;

    productCard.querySelector('button').addEventListener('click', () => {
      window.mimeeqApp.actions.selectRelatedProduct(
        item.productId,
        `${item.code}=${item.defaultConfigurationCode || ''}`,
        item.isModular,
        item.isActive
      );
    });

    container.appendChild(productCard);
  });
});

Returns​

A promise resolving to an array of related product items

selectRelatedProduct​

selectRelatedProduct: SelectRelatedProduct

Function

Navigates to a related product with the appropriate configuration.

This function handles the transition from the current product to a selected related product. It performs the necessary cleanup of the current product's state, then triggers the appropriate navigation events to open the related product with the best matching configuration.

The function ensures a smooth transition between products, maintaining context between them by applying compatible configurations when possible.

Example​

// When a user clicks on a related product thumbnail
document.getElementById('related-chair').addEventListener('click', () => {
  window.mimeeqApp.actions.selectRelatedProduct(
    'chair-123',                  // Product ID
    'CHAIR-MODEL=Finish-a3',      // Variant code with matching finish
    false,                        // Not a modular product
    true                          // Product is active
  );
});

Param​

Unique identifier for the related product to open

Param​

Complete variant code for the related product, including configuration

Param​

Whether the related product is a modular product

Param​

Whether the related product is active and available

Emits​

mimeeq-open-related-product When navigating to the related product

Emits​

mimeeq-app-url-change When the URL changes to the related product

Emits​

mmq-app-url-change-sandbox For sandbox environment URL changes

SceneControl​

decreaseZoom​

decreaseZoom: DecreaseZoom

Function

Decreases the camera zoom level to see more of the product and its surroundings.

This action moves the camera farther away from the product, giving viewers a broader perspective. It's ideal for showcasing the product's overall proportions, viewing larger furniture arrangements, or seeing how multiple components fit together.

Business value:

  • Helps customers understand the overall size and scale of products
  • Shows how products fit within an environment or alongside other pieces
  • Provides context for furniture arrangements or room layouts

Example​

// Add a "zoom out" button to your product page
document.getElementById('zoom-out-button').addEventListener('click', () => {
  window.mimeeqApp.actions.decreaseZoom();
});

// Zoom out by a larger amount for a dramatic wide view
window.mimeeqApp.actions.decreaseZoom(2);

Param​

How much to zoom out - larger values create a more dramatic change (optional)

Returns​

Promise that resolves when the zoom operation is complete

freezeCanvasScrolling​

freezeCanvasScrolling: FreezeCanvasScrolling

Function

Disables scrolling and zooming interactions on the 3D view.

This action prevents users from accidentally changing the camera position through scroll or pinch gestures. It's useful when you want to maintain a specific product view or when the 3D model is displayed in a scrollable page where normal scrolling should move the page, not zoom the product.

Business value:

  • Maintains consistent product views in presentations or guided experiences
  • Prevents accidental zoom changes when scrolling through product pages
  • Creates a more controlled viewing experience on touch devices
  • Allows for custom zoom controls that match your interface design

Example​

// Freeze camera position when entering presentation mode
document.getElementById('enter-presentation').addEventListener('click', () => {
  window.mimeeqApp.actions.freezeCanvasScrolling();
});

increaseZoom​

increaseZoom: IncreaseZoom

Function

Increases the camera zoom level to see finer details of the product.

This action brings the camera closer to the product, revealing intricate details and textures. It's perfect for examining specific features, materials, finishes, or connection points that might not be visible from a distance.

Business value:

  • Showcases craftsmanship and quality details that differentiate premium products
  • Helps customers inspect important functional features before purchase
  • Allows salespeople to highlight specific selling points during presentations

Example​

// Add a "zoom in" button to focus on product details
document.getElementById('zoom-in-button').addEventListener('click', () => {
  window.mimeeqApp.actions.increaseZoom();
});

// Zoom in more dramatically to focus on a specific detail
window.mimeeqApp.actions.increaseZoom(1.5);

Param​

How much to zoom in - larger values create a more dramatic change (optional)

Returns​

Promise that resolves when the zoom operation is complete

registerSceneCanvasView​

registerSceneCanvasView: RegisterSceneCanvasView

Function

Adds a new viewing canvas that shows the same 3D product from the same camera angle.

This action creates an additional view of the product that shares the main camera position. It's like adding a second monitor that shows the same content - both views stay synchronized as the camera moves, but they can be displayed in different locations or at different sizes in your interface.

Business value:

  • Enables side-by-side comparison views of the same product
  • Supports picture-in-picture or detail views alongside the main product view
  • Creates synchronized product views for different screen regions or devices
  • Allows innovative UI layouts with multiple perspectives on the product

Example​

// Create a picture-in-picture thumbnail view of the product
const thumbnailCanvas = document.getElementById('product-thumbnail');
window.mimeeqApp.actions.registerSceneCanvasView(thumbnailCanvas);

Param​

The HTML canvas element where the additional view should appear

restoreCameraPosition​

restoreCameraPosition: RestoreCameraPosition

Function

Resets the camera to the default product view or a specified custom position.

This action returns the camera to its original position, providing a consistent starting point for viewing the product. It's like pressing a "reset view" button that clears any navigation or zoom adjustments made by the user.

Business value:

  • Creates a consistent baseline view for product presentations
  • Helps disoriented users quickly return to a standard product view
  • Ensures specific product features are properly highlighted in the default view
  • Supports guided tours that always begin from the same perspective

Example​

// Add a "reset view" button to your interface
document.getElementById('reset-view').addEventListener('click', () => {
  window.mimeeqApp.actions.restoreCameraPosition();
});

// Jump to a specific predefined camera angle
window.mimeeqApp.actions.restoreCameraPosition(JSON.stringify({
  position: {x: -1.5, y: 1.7, z: -5.2},
  target: {x: 0, y: 0.6, z: 0}
}));

Param​

Optional JSON string defining a specific camera position

setSceneInputCanvas​

setSceneInputCanvas: SetSceneInputCanvas

Function

Designates which canvas should receive user interactions like click, drag, and zoom.

This action specifies which of your canvas views should respond to user input for controlling the camera. Only one canvas can accept interactions at a time, so this lets you choose which one should be the "primary" controller when you have multiple views.

Business value:

  • Creates intuitive multi-view experiences where users know which view to interact with
  • Enables switching between different interaction surfaces in complex interfaces
  • Supports responsive designs where the active view might change based on screen size
  • Prevents conflicting inputs when multiple product views are displayed

Example​

// Switch the active canvas when selecting a different view
document.getElementById('main-view-tab').addEventListener('click', () => {
  const mainCanvas = document.getElementById('main-product-view');
  window.mimeeqApp.actions.setSceneInputCanvas(mainCanvas);
});

Param​

The HTML canvas element that should receive user interactions

setZoom​

setZoom: SetZoom

Function

Sets a specific zoom level for the camera view.

This action gives you precise control over how close or far the camera is from the product. It's like adjusting a zoom lens on a camera - smaller values bring you closer to examine details, while larger values give you a broader perspective of the whole product.

Business value:

  • Creates the perfect framing for product screenshots or presentations
  • Helps customers focus on specific details like material textures or connectors
  • Provides consistent product views across different devices or screens

Example​

// Zoom in close to examine material details
window.mimeeqApp.actions.setZoom(2);

// Zoom out to see the entire product in context
window.mimeeqApp.actions.setZoom(10);

// Create an interactive zoom slider control for your website
const zoomSlider = document.getElementById('zoom-slider');
zoomSlider.addEventListener('input', (e) => {
  const zoomLevel = parseFloat(e.target.value);
  window.mimeeqApp.actions.setZoom(zoomLevel);
});

Param​

The distance of the camera from the product - smaller numbers zoom in closer, larger numbers zoom out further

Returns​

Promise that resolves when the zoom adjustment is complete

toggleDimensions​

toggleDimensions: ToggleDimensions

Function

Shows or hides measurement lines that display the product's dimensions.

This action toggles the visibility of dimension guides that show the exact width, height, and depth of the product. These measurements help customers understand the real-world size of the product and how it might fit in their space.

Business value:

  • Helps customers make informed purchasing decisions based on spatial requirements
  • Reduces returns by setting clear expectations about product dimensions
  • Simplifies space planning for interior designers and architects
  • Provides precise measurements for logistics and installation planning

Example​

// Add a "show dimensions" toggle button to your interface
document.getElementById('dimensions-toggle').addEventListener('click', () => {
  window.mimeeqApp.actions.toggleDimensions();
});

Emits​

mimeeq-3d-hide-dimensions When dimensions are being hidden

Emits​

mimeeq-3d-show-dimensions When dimensions are being shown

toggleGrid​

toggleGrid: ToggleGrid

Function

Toggles the visibility of the measurement grid on the scene floor.

This function shows or hides the measurement grid on the floor of the modular scene. The grid provides visual references for scale and position, helping users accurately place and align products in the scene. It's particularly useful when precise spacing between products is important.

Example​

// Toggle the grid when the grid button is clicked
document.getElementById('toggle-grid-btn').addEventListener('click', () => {
  window.mimeeqApp.actions.toggleGrid();
});

Fires​

@mimeeq#mimeeq-modular-show-grid

Fires​

@mimeeq#mimeeq-modular-hide-grid

unfreezeCanvasScrolling​

unfreezeCanvasScrolling: UnfreezeCanvasScrolling

Function

Re-enables normal scrolling and zooming interactions on the 3D view.

This action restores the standard behavior where mouse wheel, trackpad scrolling, and touch gestures can zoom and adjust the camera. Use this to return to the default interactive viewing experience after previously freezing camera controls.

Business value:

  • Returns to natural interaction after guided product experiences
  • Allows customers to freely explore products at their own pace
  • Re-enables intuitive camera controls for detailed product inspection
  • Complements guided tours that temporarily restrict camera movement

Example​

// Restore normal camera controls when exiting presentation mode
document.getElementById('exit-presentation').addEventListener('click', () => {
  window.mimeeqApp.actions.unfreezeCanvasScrolling();
});

unregisterSceneCanvasView​

unregisterSceneCanvasView: UnregisterSceneCanvasView

Function

Removes a previously registered canvas from the 3D viewing system.

This action stops displaying the 3D product on a specific canvas that was previously added with registerSceneCanvasView. It's like disconnecting a secondary monitor - the main view continues to work, but the specified canvas will no longer show the product.

Business value:

  • Conserves processing power by removing unnecessary views
  • Supports dynamic interface layouts where product views can be added and removed
  • Enables temporary comparison views that can be dismissed when no longer needed
  • Prevents memory leaks by properly cleaning up unused canvas resources

Example​

// Remove a secondary view when closing a comparison panel
document.getElementById('close-comparison').addEventListener('click', () => {
  const comparisonCanvas = document.getElementById('comparison-view');
  window.mimeeqApp.actions.unregisterSceneCanvasView(comparisonCanvas);
});

Param​

The HTML canvas element to remove from the viewing system

zoomOut​

zoomOut: ZoomOut

Function

Automatically frames the entire product perfectly in the viewport.

This action intelligently adjusts the camera position and zoom to ensure the complete product is visible and optimally framed. It's like clicking the "fit to screen" button in design software - instantly giving you the ideal overview of the entire product.

Business value:

  • Ensures customers can always see the complete product with one click
  • Provides a consistent starting view regardless of previous interactions
  • Creates a reliable reset point after customers explore detailed views

Example​

// Add a "view entire product" button to your interface
document.getElementById('view-all-button').addEventListener('click', () => {
  window.mimeeqApp.actions.zoomOut();
});

Emits​

mimeeq-3d-zoom-out-scene When the automatic zoom-to-fit action is performed

Storage​

downloadFile​

downloadFile: DownloadFile

Function

Initiates download of a specific file from storage.

This method prepares and starts the download process for a file stored in the system. It handles all the necessary authentication, URL generation, and browser download mechanisms, working reliably across different browsers and device types.

The method is typically called when a user clicks on a download button after browsing available files in product tabs. It triggers appropriate events for tracking downloads and handles the actual file transfer process.

Example​

// Create a download button for a product manual
document.getElementById('download-manual').addEventListener('click', () => {
  window.mimeeqApp.actions.downloadFile(
    'manuals/product_123/installation_guide.pdf',
    'Installation_Guide.pdf'
  );
});

Param​

Storage path to the file to be downloaded

Param​

Name to use for the file when saving to the user's device

Emits​

mimeeq-download-file When the file download is initiated