W-CF

W-CF stands for Web Configuration Framework and is a JavaScript framework for 3D product configuration. It consists of several ES6 JavaScript modules.

Changelog

The changelog for this version can be found here: Changelog

1. Modules

The modules are categorized and structured into several folders. They can be found in the modules folder of the W-CF distribution. These are the main module folders:

• bsk: wrapper for the EAIWS basket functionality to manage an article list
• cf: tools and functions for OFML article configuration using the EAIWS
• core: core functionality for the W-CF framework (e.g. the 3D view, tools, commands)
• eaiws: JavaScript wrapper for the SOAP-Api of the EAIWS
• pl: tools and functions for space planning
• utils: a collection of utility functions and classes for the W-CF framework

1.1 Installing and using the modules

To use the modules you have to install them using npm. For correct installation of all dependencies version 7 of npm is required. Here are the steps to install the W-CF modules:

1. copy the package egr-wcf-x.x.x.tgz to your project
2. add a reference to the wcf package as dependency to your package.json e.g.: "@egr/wcf": "file:libs/egr-wcf-8.0.0.tgz"
3. execute npm install

After npm install the modules can be imported from @egr/wcf/modules/.... Example:

import { EaiwsSession } from "@egr/wcf/modules/eaiws";

It is also recommended to setup a build task to copy the W-CF resources (styles, data, libs) from node_modules/@egr/wcf/ to your distribution directory.

2. Bundles

In some cases its not possible to use ES6 Modules. For those cases the W-CF distribution also contains precompiled JavaScript bundles in the bundles folder. Currently only an eaiws bundle is provided.

2.1 Eaiws bundle

The bundle is located in the bundles folder. It bundles/contains all eaiws and utils modules. After loading the script bundles/eaiws.js the functions and classes can be accessed using the egrWcf entry point. Each module folder acts as a namespace. Examples:

var session = new egrWcf.eaiws.EaiwsSession();
var itemProps = new egrWcf.eaiws.basket.ItemProperties();
var fileName = egrWcf.utils.string.getFileName("http://www.example.com/image.png");

3. Using wcfConfig to configure W-CF

wcfConfig is a global object which is used to configure different parts of W-CF. To support loading of resources and libraries on demand the dataPath and libsPath has to be defined at the start of the application. Example:

import { wcfConfig } from "@egr/wcf/modules/utils";
wcfConfig.dataPath = "wcf/data/";
wcfConfig.libsPath = "wcf/libs/";

4. Migrating to modules

If you are currently using a non-module W-CF (version < 8.0.0) you will have to migrate to modules if you want to use the latest W-CF version. If your application itself is not module based you should consider to switch to modules. If this is not an option you have to build your own bundle of W-CF.

Here are the basic steps in order to use the W-CF modules

1. delete the old W-CF distribution from your project (scripts, data, styles, libs)
2. copy the package egr-wcf-x.x.x.tgz to your project
3. add a reference to the wcf package as dependency to your package.json e.g.: "@egr/wcf": "file:libs/egr-wcf-8.0.0.tgz"
4. execute npm install
5. if TypeScript is used remove references to the old W-CF .d.ts files from your tsconfig.json
6. update your code to import and use the modules instead of the old namespaces
7. setup a build task to copy the W-CF resources (styles, data, libs) from node_modules/@egr/wcf/ to your distribution directory

4.1 Bundle size

If you want to have a minimal bundle size and you are importing classes from BabylonJs there some rules:

• Do not import from the root index of BabylonJs. If you do this you will end up with all BabylonJs modules in your bundle. Instead import as close as possible from the desired module itself. Wrong: import { Vector3 } from "@babylonjs/core"; Correct: import { Vector3 } from "@babylonjs/core/Maths/math.vector";
• Avoid using the MeshBuilder class. Using this class will bundle all "builders" to your code. You should import only the functions you need from @babylonjs/core/Meshes/Builders. e.g.: import { CreatePlane } from "@babylonjs/core/Meshes/Builders/planeBuilder";

More information about this topic can be found here: https://doc.babylonjs.com/divingDeeper/developWithBjs/treeShaking#tree-shaking

4.2 Troubleshooting

• If you get the error Type 'Timeout' is not assignable to type 'number'. you are perhaps importing jszip in your project. JSZip is globally loading the node types and this generates a conflict with the setTimeout() function. To solve this issue you should call window.setTimeout() instead of just setTimeout().