NPM

We will set you up with credentials that give you read access to necessary repositories.

**Credentials for Nexus Server will be sent separately.

• Private NPM Registry: https://nexus.3dcloud.io/repository/npm-group/

• Repo: @mxt/mxt-sectionalconfig

Build Requirements

• SCSS is provided and must be converted to CSS

• Default icon assets are provided in assets folder and if using webpack, must be bundled in appropriately using file-loader

• By default, other assets, such as assets for i18n, shaders, and sqlite readers are stored in our CDN and read from there.

• Must be built in an environment that handles process.env (webpack, gulp, react, etc), otherwise use CDN (Reference the CDN instruction above. Please reach out with any questions you may have!).

Error loading urls from SCSS files

If using webpack to build your solution including our SDK, you may run into the issues documented here: https://webpack.js.org/loaders/sass-loader/#problems-with-url . Make sure you add the missing url rewriting using the resolve-url-loader. Place it before sass-loader in the loader chain.

Build the .npmrc

Add the following code to a new .npmrc file at the root of your project.

always-auth=true
registry=https://nexus.3dcloud.io/repository/npm-group/
_auth=<insert token here>

Open a terminal window and use the provided nexus credentials to generate your token with the following command. Substitute the token placeholder (including the “<“ & “>”) in the .npmrc with the output of that command.

echo -n 'myuser:mypassword' | openssl base64

Finally, add the spins dependency to your package.json.

{
  ...
  "dependencies": {
      "@mxt/mxt-sectionalconfig": "7.10.0",
      ...
  },
  ...
}

** These customizations will require access to the implementation in 3D Cloud.

1. Create a top level Menu with the following values in the input fields:

   1. Label – (Whatever you use to name the menu. I use Configurable UI.

   2. Action – LOAD_MENU

   3. Type – SECTIONAL

2. Add new items in the “Configurable UI” group. Items have to be set to type: BUTTON, TOOLBAR, or TOOLBAR_ACTIONS.

   1. If the item is a BUTTON, it will appear as a single button.

   2. If the item is a TOOLBAR, it will appear as a group and any items in that group will be buttons.

   3. If the item is a TOOLBAR_ACTION, it has to have a component in the codebase that will init.

   4. Items at this level will need to have a position to be set in the UI. Adding the menuPosition metadata key, you will assign the position of the button/group. Please see below for the usable values to input.

3. Add a Tabbed Menu to the left side of the configurator.

   1. Create a new menu in 3D Cloud, “Tabbed View”, with type SCENE_CONFIGURATOR_TOOLBAR_TABS. Then create a submenu item for each of the following.

      1. “Product View”: [Type: PRODUCT_BROWSE, ParentMenu: Tabbed View]

         1. Add metadata, “text”, used to set the title of the tab.

         2. Set the order that this tab should appear in the tab bar.

      2. “Style View”: [Type: STYLEALL_CONFIGURATOR, ParentMenu: Tabbed View]

         1. Add metadata, “text”, used to set the title of the tab.

         2. Set the order that this tab should appear in the tab bar.

Usable menu types:

• TOOLBAR

• TOOLBAR_ACTIONS

• BUTTON

Usable metadata properties:

• activeIcon

  • Used for adding an image that is the active state of an icon.

• inverseImage

  • Used for adding an image that is the inverse or alternative state of an image.

• menuPosition

  • Used to set the position for button group on top of the WebGL canvas. Usable enum values below.

    • TOP_LEFT

    • TOP_CENTER

    • TOP_RIGHT

    • BOTTOM_LEFT

    • BOTTOM_CENTER

    • BOTTOM_RIGHT

• toggle

  • Used to declare a data attribute as a toggle. Usable enum values below.

    • activeSelection

--

Adding Custom Landing Page Content for “No Products CTA”

1. The landing page graphic can be overridden by adding a graphic to the Client Branding assets in 3D Cloud.

2. Create a new asset and use the following values.

   1. Purpose – ctaNoProducts

   2. Label – Landing Page CTA No Products

3. Upload the image you want to override the default image.

import { CustomStylingPlugin } from "...";

const sectionalConfig = new MxtSectionalConfigurator({
  ...
  plugins?:{
    styling?: CustomStylingPlugin
  }
});