W-CF stands for Web Configuration Framework and is a JavaScript framework for 3D product configuration. It consists of several ES6 JavaScript modules.
The changelog for this version can be found here: Changelog
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 listcf
: tools and functions for OFML article configuration using the EAIWScore
: core functionality for the W-CF framework (e.g. the 3D view, tools, commands)eaiws
: JavaScript wrapper for the SOAP-Api of the EAIWSpl
: tools and functions for space planningutils
: a collection of utility functions and classes for the W-CF frameworkTo 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:
egr-wcf-x.x.x.tgz
to your projectpackage.json
e.g.: "@egr/wcf": "file:libs/egr-wcf-8.0.0.tgz"
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.
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.
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");
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/";
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
egr-wcf-x.x.x.tgz
to your projectpackage.json
e.g.: "@egr/wcf": "file:libs/egr-wcf-8.0.0.tgz"
npm install
.d.ts
files from your tsconfig.json
node_modules/@egr/wcf/
to your distribution directoryIf you want to have a minimal bundle size and you are importing classes from BabylonJs there some rules:
import { Vector3 } from "@babylonjs/core";
Correct: import { Vector3 } from "@babylonjs/core/Maths/math.vector";
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
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()
.Generated using TypeDoc