Skip to main content

Interface: ModularObservers

Observers for tracking and responding to modular product scene changes.

This group of observers provides comprehensive data about modular product scenes, including selected elements, available components, snapping points, and possible actions. These observers are essential for building custom interfaces that interact with modular product configurations, implementing business logic based on scene changes, and creating dynamic user experiences.

Modular products allow customers to assemble complex products from individual components with spatial relationships, connections, and compatibility rules. The ModularObservers interface gives you visibility into all aspects of this assembly process.

Example​

// Track which element is currently selected and highlight it in a custom component list
window.mimeeqApp.observers.modular.currentElement.subscribe(({ newValue }) => {
  if (newValue) {
    // For single selection
    if (typeof newValue === 'string') {
      highlightComponentInList(newValue);
    }
    // For multi-selection
    else if (Array.isArray(newValue)) {
      newValue.forEach(instanceId => highlightComponentInList(instanceId));
    }
  }
});

// Update UI based on whether any products exist in the scene
window.mimeeqApp.observers.modular.hasProducts.subscribe(({ newValue }) => {
  document.getElementById('clear-scene-btn').disabled = !newValue;
  document.getElementById('empty-scene-message').style.display =
    newValue ? 'none' : 'block';
});

Properties​

activeAddProductData​

activeAddProductData: Observable<Nullable<ProductListItem>>

Data for the actively selected product to add or clone.

This observable emits information about the product that has been selected for addition to the scene but has not yet been placed. This provides preview data and context during the product addition workflow.

Use this to show product previews, highlight compatible snapping points, or provide guidance during product placement.

Example​

window.mimeeqApp.observers.modular.activeAddProductData.subscribe(({ newValue }) => {
  const previewPanel = document.getElementById('add-product-preview');

  if (newValue) {
    // Show the preview panel
    previewPanel.style.display = 'block';

    // Update preview content
    document.getElementById('preview-product-name').textContent =
      newValue.label;

    // Show product thumbnail if available
    const thumbnailElement = document.getElementById('preview-thumbnail');
    if (newValue.standardImage?.imageS3Path) {
      thumbnailElement.src = newValue.standardImage.imageS3Path;
      thumbnailElement.style.display = 'block';
    } else {
      thumbnailElement.style.display = 'none';
    }

    // Show placement instructions based on product type
    const instructionElement = document.getElementById('placement-instructions');
    if (newValue.freeMove) {
      instructionElement.textContent =
        'Click anywhere on the scene to place this product';
    } else {
      instructionElement.textContent =
        'Click on a compatible connection point to attach this product';
    }

    // Highlight compatible snap points if applicable
    highlightCompatibleSnapPoints(newValue.productId);
  } else {
    // Hide preview when no product is being added
    previewPanel.style.display = 'none';
    clearSnapPointHighlights();
  }
});

allSelected​

allSelected: Observable<boolean>

Indicates whether all models on the scene are selected.

This observable emits a boolean value that indicates whether all products currently placed on the scene are selected. This is useful for implementing "select all" functionality and determining certain batch operations.

Use this to update selection controls and enable/disable batch actions that require all elements to be selected.

Example​

window.mimeeqApp.observers.modular.allSelected.subscribe(({ newValue }) => {
  // Update "select all" checkbox state
  document.getElementById('select-all-checkbox').checked = newValue;

  // Enable "deselect all" button only when all are selected
  document.getElementById('deselect-all-btn').disabled = !newValue;

  // Show batch action panel when all elements are selected
  document.getElementById('batch-actions-panel').style.display =
    newValue ? 'block' : 'none';
});

applyOptionsForAll​

applyOptionsForAll: Observable<boolean>

Controls whether each option selection will be synced with all products on scene.

This observable emits a boolean value that determines whether changes made to one product's options will automatically be applied to all other products on the scene. This enables batch configuration across multiple elements.

Use this to update synchronization controls and provide feedback about the current synchronization state.

Example​

window.mimeeqApp.observers.modular.applyOptionsForAll.subscribe(({ newValue }) => {
  // Update sync toggle button state
  document.getElementById('sync-all-toggle').checked = newValue;

  // Show sync indicator when enabled
  document.getElementById('sync-indicator').style.display =
    newValue ? 'block' : 'none';

  // Show appropriate tooltip based on state
  document.getElementById('sync-all-toggle').title = newValue
    ? 'Changes will apply to all products on scene'
    : 'Changes only affect selected product';

  // Optionally show sync feedback message temporarily
  if (newValue) {
    showTemporaryMessage('Changes will apply to all products');
  }
});

applyOptionsForInstances​

applyOptionsForInstances: Observable<Record<string, boolean>>

Map of booleans for products on scene. If true, option selection on any of instances of given product will set that option on all instances of the same product.

This observable emits a record that maps product IDs to boolean values. When true for a product, changes to one instance of that product will be applied to all instances of the same product on the scene.

This differs from applyOptionsForAll in that it operates at the product type level rather than globally across all products.

Example​

window.mimeeqApp.observers.modular.applyOptionsForInstances.subscribe(({ newValue }) => {
  if (newValue) {
    // Update product-specific sync toggles
    Object.entries(newValue).forEach(([productId, isSynced]) => {
      const syncToggle = document.querySelector(
        `.product-sync-toggle[data-product-id="${productId}"]`
      );

      if (syncToggle) {
        syncToggle.checked = isSynced;

        // Update tooltip text
        syncToggle.title = isSynced
          ? 'Changes apply to all instances of this product'
          : 'Changes only affect selected instance';

        // Add visual indicator for synced products
        const productItems = document.querySelectorAll(
          `.product-item[data-product-id="${productId}"]`
        );

        productItems.forEach(item => {
          item.classList.toggle('synced', isSynced);
        });
      }
    });
  }
});

chosenProductId​

chosenProductId: Observable<string>

ID of the product selected for adding to the scene.

This observable emits the ID of the product that is currently selected for addition to the modular scene. This happens when a user has chosen a product but hasn't yet placed it.

Use this to update UI indicators, pre-load product data, or show preview information about the chosen product.

Example​

window.mimeeqApp.observers.modular.chosenProductId.subscribe(({ newValue }) => {
  if (newValue) {
    // Show preview panel for the selected product
    document.getElementById('product-preview').style.display = 'block';

    // Fetch and display product details
    fetchProductDetails(newValue).then(details => {
      document.getElementById('preview-name').textContent = details.name;
      document.getElementById('preview-image').src = details.imageUrl;
    });
  } else {
    // Hide preview when no product is chosen
    document.getElementById('product-preview').style.display = 'none';
  }
});

components​

components: Observable<ProductListItem[]>

List of components which can be used to build the current modular product.

This observable emits the complete list of available components that can be added to the current modular scene. These are the building blocks that users can select from to assemble their custom configuration.

Use this to build component catalogs, filter available parts, or present component options to users.

Example​

window.mimeeqApp.observers.modular.components.subscribe(({ newValue }) => {
  if (newValue) {
    // Populate component selection panel
    const componentContainer = document.getElementById('component-list');
    componentContainer.innerHTML = '';

    newValue.forEach(component => {
      // Only show active components
      if (component.status === 'ACTIVE' && !component.isDisabled) {
        const componentItem = document.createElement('div');
        componentItem.classList.add('component-item');
        componentItem.dataset.productId = component.productId;

        // Add thumbnail if available
        if (component.standardImage?.imageS3Path) {
          const img = document.createElement('img');
          img.src = component.standardImage.imageS3Path;
          img.alt = component.label;
          componentItem.appendChild(img);
        }

        // Add component name
        const name = document.createElement('div');
        name.textContent = component.label;
        componentItem.appendChild(name);

        // Add click handler to select this component for adding
        componentItem.addEventListener('click', () => {
          selectComponentToAdd(component.productId);
        });

        componentContainer.appendChild(componentItem);
      }
    });
  }
});

currentElement​

currentElement: Observable<string | string[]>

Instance ID(s) of the currently selected element(s) on the scene.

This observable emits either a single instance ID string (for single selection) or an array of instance IDs (for multiple selection) that represent the currently selected element(s) on the modular scene. A null value indicates no selection.

This is one of the most important observers for tracking user focus and implementing coordinated UI updates across your application.

Example​

window.mimeeqApp.observers.modular.currentElement.subscribe(({ newValue }) => {
  // Clear all highlights first
  document.querySelectorAll('.product-item').forEach(el => {
    el.classList.remove('selected');
  });

  if (newValue) {
    // Handle single selection
    if (typeof newValue === 'string') {
      document.querySelector(`[data-instance-id="${newValue}"]`)?.
        classList.add('selected');
    }
    // Handle multi-selection
    else if (Array.isArray(newValue)) {
      newValue.forEach(id => {
        document.querySelector(`[data-instance-id="${id}"]`)?.
          classList.add('selected');
      });
    }

    // Enable element-specific controls when selection exists
    document.getElementById('element-controls').style.display = 'block';
  } else {
    // Hide element controls when nothing is selected
    document.getElementById('element-controls').style.display = 'none';
  }
});

currentElementMetadata​

currentElementMetadata: Observable<Nullable<CurrentElementMetadata>>

Additional information related to currently selected product.

This observable emits metadata about the currently selected element, including its instance ID, product ID, and how many instances of the same product exist in the scene. This provides context for product-specific operations.

Use this to implement product-specific controls, batch operations that affect multiple instances of the same product, or display product statistics.

Example​

window.mimeeqApp.observers.modular.currentElementMetadata.subscribe(({ newValue }) => {
  if (newValue) {
    // Update product information panel
    document.getElementById('selected-product-id').textContent =
      newValue.productId;
    document.getElementById('selected-instance-id').textContent =
      newValue.instanceId;

    // Show count of similar products on scene
    const instanceCount = newValue.numberOfInstances;
    document.getElementById('instance-count').textContent =
      `${instanceCount} instance${instanceCount !== 1 ? 's' : ''} on scene`;

    // Show additional controls for products with multiple instances
    document.getElementById('apply-to-all-instances').style.display =
      instanceCount > 1 ? 'block' : 'none';
  } else {
    // Clear product information when nothing is selected
    document.getElementById('product-info-panel').classList.add('empty');
  }
});

elementAction​

elementAction: Observable<ElementAction>

Information about the currently active element action.

This observable emits data about actions being performed on elements in the modular scene, such as moving, cloning, or sliding products. It provides both the type of action and the affected element's ID.

Use this to update UI states based on ongoing actions, provide contextual help, or implement custom action controls.

Example​

window.mimeeqApp.observers.modular.elementAction.subscribe(({ newValue }) => {
  if (newValue) {
    // Show appropriate helper overlay based on action type
    if (newValue.actionType === 'MOVE') {
      showMoveHelperOverlay(newValue.instanceId);
    } else if (newValue.actionType === 'CLONE') {
      showCloneHelperOverlay(newValue.instanceId);
    }

    // Disable certain controls during specific actions
    document.getElementById('delete-btn').disabled =
      !!newValue.actionType;
  }
});

elements​

elements: Observable<ModularElement[]>

List of elements currently added to the scene.

This observable emits information about all products currently placed on the modular scene. This provides a complete inventory of the scene contents, including position data, configuration states, and connections.

Use this to build product lists, calculate totals, generate reports, or create custom scene visualizations.

Example​

window.mimeeqApp.observers.modular.elements.subscribe(({ newValue }) => {
  if (newValue) {
    // Update element count
    const elementCount = Object.keys(newValue).length;
    document.getElementById('element-count').textContent =
      `${elementCount} item${elementCount !== 1 ? 's' : ''}`;

    // Render list of elements in scene
    const listContainer = document.getElementById('elements-list');
    listContainer.innerHTML = '';

    Object.entries(newValue).forEach(([instanceId, data]) => {
      const elementItem = document.createElement('div');
      elementItem.classList.add('element-item');
      elementItem.dataset.instanceId = instanceId;
      elementItem.textContent = getProductName(data.productId);

      // Add click handler to select this element
      elementItem.addEventListener('click', () => {
        selectElement(instanceId);
      });

      listContainer.appendChild(elementItem);
    });
  }
});

favSceneShortcode​

favSceneShortcode: Observable<string>

ID of the currently loaded favorite scene.

This observable emits the shortcode identifier of the favorite scene that is currently loaded in the modular configurator. A favorite scene is a saved configuration that users can recall and modify.

Use this to display the current scene name, enable save/update buttons, or track which saved configurations are being used.

Example​

window.mimeeqApp.observers.modular.favSceneShortcode.subscribe(({ newValue }) => {
  const isFavoriteLoaded = !!newValue;

  // Update UI to reflect loaded favorite state
  document.getElementById('current-scene-code').textContent =
    isFavoriteLoaded ? newValue : 'New Design';

  // Toggle between "Save" and "Update" actions
  document.getElementById('save-btn').style.display =
    isFavoriteLoaded ? 'none' : 'block';
  document.getElementById('update-btn').style.display =
    isFavoriteLoaded ? 'block' : 'none';

  // Highlight the active favorite in the list
  document.querySelectorAll('.favorite-item').forEach(el => {
    el.classList.toggle('active', el.dataset.shortcode === newValue);
  });
});

freeSnapPoints​

freeSnapPoints: Observable<FreeSnaps>

Information about snapping points state on the modular scene.

This observable emits data about the available connection points (snaps) that products can be attached to on the scene. It provides detailed information about which snaps are available, which are connected, and their properties.

Use this to visualize connection points, guide users during product placement, or implement custom connection logic.

Example​

window.mimeeqApp.observers.modular.freeSnapPoints.subscribe(({ newValue }) => {
  if (newValue) {
    // Count available snapping points
    let availableSnapCount = 0;
    Object.values(newValue).forEach(snaps => {
      snaps.forEach(snap => {
        if (snap.isEnabled && !snap.weldedWithId) {
          availableSnapCount++;
        }
      });
    });

    // Update UI with available snap count
    document.getElementById('available-snaps-count').textContent =
      availableSnapCount.toString();

    // Show snapping guidance if appropriate
    if (availableSnapCount > 0 && isAddingNewProduct()) {
      showSnappingGuidance();
    } else {
      hideSnappingGuidance();
    }

    // Optionally visualize snap points in a 2D diagram
    if (document.getElementById('snap-diagram').style.display !== 'none') {
      renderSnapPointDiagram(newValue);
    }
  }
});

hasProducts​

hasProducts: Observable<boolean>

Indicates whether there are any products on the scene.

This observable emits a boolean value that indicates whether the modular scene currently contains any products. This is useful for determining whether to show empty state UI or scene-related controls.

Use this to toggle visibility of scene actions, show appropriate guidance when the scene is empty, or trigger initial configurations.

Example​

window.mimeeqApp.observers.modular.hasProducts.subscribe(({ newValue }) => {
  // Toggle empty state message
  document.getElementById('empty-scene-message').style.display =
    newValue ? 'none' : 'block';

  // Enable/disable scene action buttons
  document.getElementById('clear-scene-btn').disabled = !newValue;
  document.getElementById('save-scene-btn').disabled = !newValue;
  document.getElementById('export-scene-btn').disabled = !newValue;

  // Show appropriate guidance based on scene state
  if (!newValue) {
    showGuidance('add-first-product');
  } else {
    hideGuidance('add-first-product');
  }
});

isDimensionsActive​

isDimensionsActive: Observable<boolean>

Controls whether dimensions are visible on the 3D scene.

This observable emits a boolean value indicating whether product dimensions (sizes, measurements) are currently displayed on the 3D visualization.

Use this to synchronize custom dimension controls with the current state of the scene, or to update related UI elements.

Example​

window.mimeeqApp.observers.modular.isDimensionsActive.subscribe(({ newValue }) => {
  // Update dimensions toggle button state
  document.getElementById('dimensions-toggle').classList.toggle(
    'active', newValue
  );

  // Show relevant dimension-related controls when enabled
  document.getElementById('dimension-units-selector').style.display =
    newValue ? 'block' : 'none';
});

productCategories​

productCategories: Observable<ProductCategory[]>

List of categories connected to components available at current modular product.

This observable emits the category structure for components that can be added to the current modular scene. Categories help organize components into logical groups for easier discovery and selection.

Use this to build category navigation, filter components by type, or organize component catalogs.

Example​

window.mimeeqApp.observers.modular.productCategories.subscribe(({ newValue }) => {
  if (newValue) {
    // Build category navigation
    const categoryNav = document.getElementById('category-navigation');
    categoryNav.innerHTML = '';

    // Add "All" category
    const allCat = document.createElement('button');
    allCat.classList.add('category-button', 'active');
    allCat.textContent = 'All Components';
    allCat.addEventListener('click', () => {
      showAllComponents();

      // Update active state
      document.querySelectorAll('.category-button').forEach(btn => {
        btn.classList.remove('active');
      });
      allCat.classList.add('active');
    });
    categoryNav.appendChild(allCat);

    // Add each product category
    newValue.forEach(category => {
      const catButton = document.createElement('button');
      catButton.classList.add('category-button');
      catButton.textContent = category.productCategoryName;
      catButton.dataset.categoryId = category.productCategoryId;

      catButton.addEventListener('click', () => {
        filterComponentsByCategory(category.productCategoryId);

        // Update active state
        document.querySelectorAll('.category-button').forEach(btn => {
          btn.classList.remove('active');
        });
        catButton.classList.add('active');
      });

      categoryNav.appendChild(catButton);
    });
  }
});

sceneSetup​

sceneSetup: Observable<SceneSetup>

Configuration settings for the 3D scene environment.

This observable emits the current configuration of the 3D environment where modular products are displayed. It includes settings for lighting, background, grid visibility, camera positions, and more.

Use this to synchronize custom UI elements with the current scene appearance or to create controls that modify the scene environment.

Example​

window.mimeeqApp.observers.modular.sceneSetup.subscribe(({ newValue }) => {
  // Update floor color picker to match current scene floor
  if (newValue && newValue.floorColor) {
    document.getElementById('floor-color-picker').value = newValue.floorColor;
  }

  // Toggle grid visibility control based on scene setup
  document.getElementById('show-grid-checkbox').checked =
    newValue?.showGrid || false;
});

showCollisionWarning​

showCollisionWarning: Observable<boolean>

Indicates whether a collision warning should be shown to the user.

This observable emits a boolean value that determines if a collision warning should be displayed to the user. Collisions occur when a product placement would cause physical overlaps with existing products on the scene.

Use this to show appropriate collision warnings in your custom UI to prevent users from creating physically impossible configurations.

Example​

window.mimeeqApp.observers.modular.showCollisionWarning.subscribe(({ newValue }) => {
  // Show or hide a collision warning message
  document.getElementById('collision-warning').style.display =
    newValue ? 'block' : 'none';

  // Optionally play a sound when collision is detected
  if (newValue) {
    playCollisionAlertSound();
  }
});

toolbarData​

toolbarData: Observable<Nullable<ToolbarData>>

Information about possible actions and names for currently selected models.

This observable emits detailed information about the possible actions that can be performed on the currently selected element(s), such as moving, cloning, or configuring. It also provides the product name and other contextual information.

Use this to build dynamic toolbars, context menus, or action panels that adapt to the current selection state.

Example​

window.mimeeqApp.observers.modular.toolbarData.subscribe(({ newValue }) => {
  if (newValue) {
    // Update product name in the toolbar
    document.getElementById('selected-product-name').textContent =
      newValue.productName;

    // Enable/disable action buttons based on capabilities
    document.getElementById('move-btn').disabled = !newValue.canMove;
    document.getElementById('clone-btn').disabled = !newValue.canClone;
    document.getElementById('delete-btn').disabled = !newValue.canDelete;
    document.getElementById('configure-btn').disabled = !newValue.canConfigure;

    // Show flip button only when applicable, with custom label if provided
    const flipBtn = document.getElementById('flip-btn');
    flipBtn.style.display = newValue.canFlip ? 'inline-block' : 'none';
    if (newValue.flipLabel) {
      flipBtn.textContent = newValue.flipLabel;
    }
  } else {
    // Hide or disable toolbar when nothing is selected
    document.getElementById('element-toolbar').classList.add('disabled');
  }
});

variantCodes​

variantCodes: Observable<VariantCodes>

Map of variant codes for all elements on the scene.

This observable emits a record that maps instance IDs to their current configuration variant codes. This provides a complete picture of how each element on the scene is configured.

Use this to track configurations across multiple elements, implement batch operations, or calculate scene-wide properties.

Example​

window.mimeeqApp.observers.modular.variantCodes.subscribe(({ newValue }) => {
  if (newValue) {
    // Build a configuration summary for all elements
    const summary = Object.entries(newValue).map(([instanceId, code]) => {
      return `${getProductName(instanceId)}: ${code}`;
    }).join('\n');

    document.getElementById('configuration-summary').textContent = summary;

    // Count the number of uniquely configured elements
    const uniqueConfigs = new Set(Object.values(newValue)).size;
    document.getElementById('unique-configs-count').textContent =
      uniqueConfigs.toString();
  }
});