magicad/magicad.js
import base64 from '../base64/base64';
import {
_addAuthToken,
_extendQModelOptions,
_setDiagramImages,
_getResourceQueryUrl,
_replaceOptionsFromBase64EncodedUrl
} from './magicad-fn';
import OidcAuthService from '../auth/oidcauth';
import UserManagerSettingsFactory from '../auth/oidc-clientsettings-factory';
import SigninService from '../auth/signin';
import X3DViewService from '../x3dviewservice/X3DViewService.js';
import axios from 'axios';
import utils from '../utils';
export default class MagiCAD {
/**
* @private
* @param {*} fingerprintService
* @param {*} diagramService
* @param {*} ahuCalculationService
* @param {*} signinService (optional) Could be created also with init() function
* @param {*} x3dViewService (optional) Could be created also with init() function
*/
constructor(fingerprintService, diagramService, ahuCalculationService, signinService, x3dViewService) {
/**
* @private
*/
this.fingerprintService = fingerprintService;
/**
* @private
*/
this.diagramService = diagramService;
/**
* @private
*/
this.ahuCalculationService = ahuCalculationService;
/**
* @private
*/
this.signinService = signinService;
/**
* @private
*/
this.x3dViewService = x3dViewService;
/**
* @private
*/
this.onFindOptimalSpeed = undefined;
/**
* @private
*/
this.onGetDpTot = undefined;
/**
* @private
*/
this.onLoad = undefined;
/**
* @private
*/
this.onLoadError = undefined;
/**
* @private
*/
this.onRenderX3D = undefined;
}
/**
* Initialize MagiCAD Widget SDK
*
* @param {object} options <pre>Example object:
* {
* client_id: 'your_client_id',
* popup_redirect_uri: 'callback file url when using popup signin method'
* redirect_uri: 'callback file url when using redirect signin method' // if given, popup_redirect_uri will be ignored browser redirection is being used instead of popup
* post_logout_redirect_uri: 'callback file url to direct the user to after successful sign-out'
* enableX3D: true, // default value is true and x3dom library will be loaded
* onLoadUser: function(user) { console.log(user.username); }, // Set event handler to get signed in user if any exists e.g. case when page refreshed
* onSignin: function(user) { console.log(user.username); }, // Set event handler to perform some action on user signin
* onSignout: function() { console.log('user signed out'); }, // Set event handler to perform some action on user signout
* onRenderX3D: function() { console.log('x3d rendered'); }, // Set event handler to perform some action after rendering x3d image
* onGetDpTot function(result) { console.log(result); }, // Set event handler to perform some action with calculation result
* onFindOptimalSpeed: function(result) { console.log(result); } // Set event handler to perform some action with calculation result
* }
* </pre>
* @param {object} context (optional)
*/
init(options, context) {
// If not given already in constructor
if (!this.signinService) {
let factory = new UserManagerSettingsFactory(options);
let oidcAuthService = new OidcAuthService(factory);
this.signinService = new SigninService(oidcAuthService);
}
if (!this.signinService)
throw "MagiCAD Widget SDK initialization failed!";
// Set X3DViewService
if (options.enableX3D === undefined || options.enableX3D === null) {
options.enableX3D = true; // default value if not given
}
// If not given already in contructor
if (!this.x3dViewService)
this.x3dViewService = options.enableX3D ? new X3DViewService() : undefined;
if (this.signinService) {
if (typeof options.onLoadUser === 'function') {
this.signinService && this.signinService.getUser()
.then(user => {
options.onLoadUser(user.profile);
})
.catch(err => {
options.onLoadUser(null);
});
}
if (typeof options.onSignin === 'function') {
this.signinService.onSignin(options.onSignin);
}
if (typeof options.onSignout === 'function') {
this.signinService.onSignout(options.onSignout);
}
}
if (typeof options.onLoad === 'function') {
this.onLoad = options.onLoad;
}
if (typeof options.onLoadError === 'function') {
this.onLoadError = options.onLoadError;
}
if (typeof options.onRenderX3D === 'function') {
this.onRenderX3D = options.onRenderX3D;
}
if (typeof options.onGetDpTot === 'function') {
this.onGetDpTot = options.onGetDpTot;
}
if (typeof options.onFindOptimalSpeed === 'function') {
this.onFindOptimalSpeed = options.onFindOptimalSpeed;
}
if (typeof context === 'object') {
context.MagiCAD = Object.assign(context.MagiCAD, this);
context.MagiCAD.__proto__ = this.__proto__;
}
}
/**
* Return information is user logged in.
*
* @return boolean value is used logged in
*/
isLoggedIn() {
return this.signinService && this.signinService.isLoggedIn();
}
/**
* Signin. Will open MagiCAD login popup.
*
* @return {Promise<void>}
*/
signin() {
return this.signinService && this.signinService.signin();
}
/**
* Signout current logged in user
*
* @return {Promise<void>}
*/
signout() {
return this.signinService && this.signinService.signout();
}
/**
* Return release info of MagiCAD Widget SDK in example Production 2.35.0
*/
getReleaseInfo() {
return `${systemconfig.ENVIRONMENT} ${systemconfig.RELEASENUMBER}`;
}
/**
* Load and initialize MagiCAD Cloud Javascript Library
*
* @param {object} options <pre>
* {
* productId: string,
* variantQpdId: string,
* articleNumber: string,
* manufacturerId: string
* }
*
* where manufacturerId and either:
*
* productId and variantQpdId, or
* articleNumber
*
* is defined.
* </pre>
* @return {Promise<ProductData>} Successful response will contain product/variant data
*/
load(options) {
let userRequest = this.signinService && this.signinService.getUser(),
fingerprintRequest = this.fingerprintService.getFingerprint();
let promise = Promise.all([userRequest, fingerprintRequest]).then(([user, sessionId]) => {
let baseProductUrl = systemconfig.APIURL + systemconfig.PRODUCTPATH;
let productUrl;
if (options.productId)
productUrl = baseProductUrl + options.productId;
else if (options.articleNumber && options.manufacturerId)
productUrl = baseProductUrl + options.manufacturerId + '/' + encodeURI(options.articleNumber);
if (options.logoContainerId)
this.renderMagiCADLogo(options.logoContainerId);
return axios.get(productUrl).then((response) => {
if (!response || response.status !== 200 || !response.data)
return null;
// Finalize Attachments with auth tokens
response.data.Attachments.forEach((val) => {
val.Uri = _addAuthToken(user, sessionId, val.Uri, options.applicationId);
});
// Finalize DXF resources with auth tokens
response.data.DxfUrl = _addAuthToken(user, sessionId, response.data.DxfUrl, options.applicationId);
return response.data;
}, (err) => {
if (this.onLoadError)
this.onLoadError(err);
});
});
if (this.onLoad) {
promise.then(this.onLoad, this.onLoadError);
}
return promise;
}
/**
* Return DXF query url
*
* @param {object} product The product object returned from MagiCAD.load() function
* @param {object} options <pre>
* {
* QModelParameters: Optional QModelParameters of model, in format "L=100;D=25;W1=130...",
* Filename: Optional file name and extension for the object to download, in format "example.dxf"
* }
* </pre>
* @returns DXF url customized with given options. If invalid options object is provided, returns default DXF url, or null if no DXF URL exists
*/
getCustomizedDxfQueryUrl(product, options){
try{
return _replaceOptionsFromBase64EncodedUrl(options, new URL(product.DxfUrl));
}
catch (e) {
return null;
}
}
/**
* Return dimension image query url
*
* @param {object} options <pre>
* {
* QModelId: Optional QModelId of model,
* QModelParameters: Optional QModelParameters of model,
* ViewMode: one value of { 0=Rendered, 1=DimensionLabels, 2=DimensionValues },
* ViewPosition: one value of { 0=Default, 1=Front, 2=Right, 3=Left, 4=Top, 5=Bottom, 6=IsometricLeft, 7=IsometricRight }
* }
* @returns Dimension image url
*/
getDimensionImageQueryUrl(options) {
return _getResourceQueryUrl(options, systemconfig.DIMENSIONSIMAGEQUERYPATH);
}
/**
*
* Return image query url
*
* @param {object} options <pre>
* {
* QModelId: Optional QModelId of model,
* QModelParameters: Optional QModelParameters of model,
* ViewPosition: one value of { 0=Default, 1=Front, 2=Right, 3=Left, 4=Top, 5=Bottom, 6=IsometricLeft, 7=IsometricRight }
* }
* @returns Image url
*/
getImageQueryUrl(options) {
return _getResourceQueryUrl(options, systemconfig.IMAGEQUERYPATH);
}
/**
*
* Renders X3D Image container to given container
*
* @param {object} options <pre>
* Basic example:
*
* {
* x3dUri: location of x3d,
* imageUri: location of image
* containerId: identifier of the container for x3d,
* }
*
* Or, to get 3D view with custom model parameters:
* {
* QModelId: the identifier of the 3D geometry (GUID format),
* QModelParameters: Optional QModelParameters of model,
* ViewMode: one value of { 0=Rendered, 1=DimensionLabels, 2=DimensionValues,
* containerId: identifier of the container for x3d,
* }
*
* Or, to get 3D view with product external reference and variant qpd id:
* {
* productId: the external reference of the product (GUID format)
* variantQpdId: the qpd id of the specific variant,
* containerId: identifier of the container for x3d
* }
*
* Or, to get 3D view with custom level of detail (LOD):
* {
* QModelId: the identifier of the 3D geometry (GUID format),
* QModelParameters: Optional QModelParameters of model,
* LodLevel: one value of { 0=Preview, 1=MC LOD 200, 2=MC LOD 300, 3=MC LOD 350 },
* containerId: identifier of the container for x3d,
* }
*
* @param {boolean} update Update existing container with new image url
* @return {Promise<void>} result as promise
*/
renderX3D(options, update) {
if (!this.x3dViewService) {
return new Promise((resolve, reject) => {
reject("Enable X3D in MagiCAD.init() function");
});
}
let queryOptions = {
containerId : (options || {}).containerId,
imageUri : (options ||{}).imageUri,
x3dUri : (options || {}).x3dUri
};
let queryObject = _extendQModelOptions(options);
if (queryObject.QModelId) { // QModelId is set, override image and x3d
queryOptions.x3dUri = systemconfig.APIURL + systemconfig.X3DQUERYPATH + base64.b64EncodeUnicode(JSON.stringify(queryObject));
queryOptions.imageUri = systemconfig.APIURL + systemconfig.IMAGEQUERYPATH + base64.b64EncodeUnicode(JSON.stringify(queryObject));
}
else if (queryObject.variantQpdId && queryObject.productId) { // Product external reference and variant QpdId is set, override image and x3d
queryOptions.x3dUri = systemconfig.APIURL +
systemconfig.X3DBYQPDIDPATH
.replace('{productId}', queryObject.productId)
.replace('{encodedVariantQpdId}', base64.b64EncodeUnicode(queryObject.variantQpdId));
queryOptions.imageUri = systemconfig.APIURL +
systemconfig.IMAGEBYQPDIDPATH
.replace('{productId}', queryObject.productId)
.replace('{encodedVariantQpdId}', base64.b64EncodeUnicode(queryObject.variantQpdId));
}
return this.x3dViewService.loadX3D(queryOptions, update).then(result => {
if (this.onRenderX3D) this.onRenderX3D();
return result;
});
}
/**
* Render MagiCAD logo to container with specified identified
*
* @param {string} containerId Container identifier
* @param {boolean} transparent Boolean value should transparent image be used
*/
renderMagiCADLogo(containerId, transparent) {
let container = document.getElementById(containerId);
if (!container)
return;
let data = {
ImageUrl: transparent ?
systemconfig.MAGICLOUDLOGOTRANSPARENT : systemconfig.MAGICLOUDLOGO,
Alt: 'Powered by MagiCAD',
Title: 'Powered by MagiCAD'
};
container.innerHTML = `<img src="${data.ImageUrl}" alt="${data.Alt}" title="${data.Title}" />`;
}
/**
* Render MagiCAD logo to container with specified identified
* @param {*} containerId Container identifier
* @param {*} transparent Boolean value whether transparent image should be used
* @deprecated Use renderMagiCADLogo instead
*/
renderMagiCloudLogo(containerId, transparent) {
this.renderMagiCADLogo(containerId, transparent);
}
/**
* Set specified diagram and bind click event to given elementId. Click event will add possible data to given dataElementId
* @param {object} data Product data
* @param {object} options <pre>Example:
* {
* type: diagramType,
* elementId: 'el',
* dataElementId: 'dataEl'
* }
* where diagramType is one of { Ventilation, Heating, Cooling, SupplyAir, ExtractAir, Radiator, Pump }
* </pre>
*/
setDiagram(data, options) {
if (!options || !options.elementId || !options.type ||
!data.Diagrams || !data.Diagrams[options.type])
return;
let element = document.getElementById(options.elementId);
if (!element)
return;
element.innerHTML = '';
let img = utils.createElement('img', {
src: data.Diagrams[options.type].BaseUrl,
alt: options.type
});
element.appendChild(img);
// Set diagram data if exists
let hasData = data.Diagrams[options.type].HasData;
if (hasData) {
let baseUrl = data.Diagrams[options.type].BaseUrl;
let dataElement = document.getElementById(options.dataElementId);
if (!dataElement)
return;
if (options.operationPoint && options.operationPoint.x && options.operationPoint.y &&
options.operationPoint.x >= 0 && options.operationPoint.y >= 0) {
let diagram = {
URL: baseUrl,
DataURL: hasData ? baseUrl + '/data' : null,
operationPoint: options.operationPoint,
HasData: hasData
};
_setDiagramImages(this.diagramService, img, dataElement, diagram, options.type);
}
let that = this;
img.addEventListener('click', (event) => {
let diagram = that.diagramService.getDiagram({
target: img,
data: {
BaseURL: baseUrl,
HasData: hasData
},
pageX: event.pageX,
pageY: event.pageY
});
that.diagramService.getOperatingPoint(diagram).then(() => {
_setDiagramImages(that.diagramService, img, dataElement, diagram, options.type);
}, () => {
// Failure when performing getOperatingPoint
});
});
}
}
/**
* Get pressure drop of curve at specific flow.
* @return Example {Succeed: true, Value: 27.870676}
* @param {string} productId Product identifier (GUID)
* @param {string} systemTypeId Value = {Unknown, AnyFluid, SupplyFluid, ReturnFluid, ColdWater, HotWater, FireHydrant, HotSupplyFluid, Sprinkler, Sewer, AnyAir, SupplyAir, ExtractAir, OutdoorSupply, OutdoorExhau}
* @param {number} qv Specified flow
* @param {number} fanSpeed Specified Fan Speed
*/
getDpTot(productId, systemTypeId, qv, fanSpeed) {
let promise = this.ahuCalculationService.getDpTot(productId, systemTypeId, qv, fanSpeed);
if (this.onGetDpTot) {
promise.then(this.onGetDpTot);
}
return promise;
}
/**
* Find suitable fanSpeed for given operation point.
* @private
* @return Example {PressureDrop: 107.4791, Succeed: true, Value: 6}
* @param {string} productId Product identifier (GUID)
* @param {string} systemTypeId Value = {Unknown, AnyFluid, SupplyFluid, ReturnFluid, ColdWater, HotWater, FireHydrant, HotSupplyFluid, Sprinkler, Sewer, AnyAir, SupplyAir, ExtractAir, OutdoorSupply, OutdoorExhau}
* @param {number} qv Specified flow
* @param {number} dpTot Pressure drop value
*/
findOptimalSpeed(productId, systemTypeId, qv, dpTot) {
let promise = this.ahuCalculationService.findOptimalSpeed(productId, systemTypeId, qv, dpTot);
if (this.onFindOptimalSpeed) {
promise.then(this.onFindOptimalSpeed);
}
return promise;
}
}
