Interface: MiscObservers

Observers for tracking miscellaneous configurator states and features.

This group of observers provides data about various supplementary aspects of the configurator experience, including favorites collections, canvas properties, and 2D/3D visualization settings. These observers can be used to build features like favorites management, responsive layouts, and hybrid visualization displays.

Properties

canvasAspectRatio

canvasAspectRatio: Observable<undefined | AspectRatioType>

The aspect ratio of the canvas set by aspect ratio rules.

This observable emits the current aspect ratio of the canvas, which may be determined by rules. This is useful for adapting your UI layout to match the canvas proportions and ensuring proper alignment between your custom controls and the visualization.

Example

window.mimeeqApp.observers.misc.canvasAspectRatio.subscribe(({ newValue }) => {
  if (newValue) {
    // Adjust the container to match the canvas aspect ratio
    const container = document.getElementById('canvas-container');
    container.style.aspectRatio = newValue;

    // Position controls based on aspect ratio
    const isWideFormat = ['16:9', '16:10'].includes(newValue);
    document.getElementById('side-controls').classList.toggle(
      'wide-format', isWideFormat
    );
  }
});

---

favouriteCollections

favouriteCollections: Observable<FavouriteCollection[]>

Available collections for organizing favorite items.

This observable emits the list of collections that the user can save favorites to. These collections provide an organizational structure for managing saved configurations.

Example

window.mimeeqApp.observers.misc.favouriteCollections.subscribe(({ newValue }) => {
  if (newValue) {
    // Populate collection dropdown
    const select = document.getElementById('save-to-collection');
    select.innerHTML = '';

    // Add option to create new collection
    const newOption = document.createElement('option');
    newOption.value = 'new';
    newOption.textContent = 'Create New Collection...';
    select.appendChild(newOption);

    // Add existing collections
    newValue.forEach(collection => {
      const option = document.createElement('option');
      option.value = collection.favouriteCollectionId;
      option.textContent = collection.favouriteCollectionName;
      select.appendChild(option);
    });
  }
});

---

favouriteItems

favouriteItems: Observable<FavouriteCollectionItems>

Information about favorite items and collections.

This observable emits a map of public and user-specific favorite items. These favorites can be product configurations or modular scenes that have been saved for easy access and reuse.

Example

window.mimeeqApp.observers.misc.favouriteItems.subscribe(({ newValue }) => {
  if (newValue) {
    // Render user favorites
    const userFavs = document.getElementById('user-favorites');
    userFavs.innerHTML = '';

    if (newValue.userFavouriteCollections.length) {
      newValue.userFavouriteCollections.forEach(fav => {
        const item = createFavoriteElement(fav);
        userFavs.appendChild(item);
      });
    } else {
      userFavs.innerHTML = '<p>No favorites saved yet</p>';
    }

    // Render public favorites
    renderPublicFavorites(newValue.publicFavouriteCollections);
  }
});

---

favouriteSceneName

favouriteSceneName: Observable<string>

The name of the currently loaded favorite scene.

This observable emits the name of the favorite scene that is currently loaded in the canvas. This can be useful for displaying the current scene name or highlighting the active favorite in a list.

Example

window.mimeeqApp.observers.misc.favouriteSceneName.subscribe(({ newValue }) => {
  if (newValue) {
    // Update UI to show current scene name
    document.getElementById('current-scene').textContent =
      `Current Scene: ${newValue}`;

    // Highlight the active scene in the favorites list
    document.querySelectorAll('.favorite-item').forEach(el => {
      el.classList.toggle('active', el.dataset.name === newValue);
    });
  } else {
    document.getElementById('current-scene').textContent = 'Custom Configuration';
  }
});

---

has2dLayers

has2dLayers: Observable<boolean>

Indicates whether 2D layers are visible on the canvas.

This observable emits a boolean value indicating whether there are currently any 2D layers visible on the canvas. This can be used to adapt your UI for hybrid 2D/3D visualization scenarios and provide appropriate controls.

Example

window.mimeeqApp.observers.misc.has2dLayers.subscribe(({ newValue }) => {
  if (newValue !== undefined) {
    // Show or hide 2D-specific controls
    document.getElementById('2d-controls').style.display =
      newValue ? 'block' : 'none';

    // Adjust 3D controls positioning for hybrid mode
    document.getElementById('3d-controls').classList.toggle(
      'with-2d-layers', newValue
    );

    // Update mode indicator
    document.getElementById('view-mode').textContent =
      newValue ? 'Hybrid View' : '3D View';
  }
});