@combeenation/3d-viewer 4.2.0 → 4.3.0-alpha1

package/src/api/util/resourceHelper.ts

@@ -3,18 +3,18 @@ import { emitter, Event } from '../classes/event';
 /**
  * Sleeps for a certain amount of microseconds.
  */
-const sleep = ( ms: number ) => new Promise( resolve => window.setTimeout( resolve, ms ) );
+const sleep = (ms: number) => new Promise(resolve => window.setTimeout(resolve, ms));
 
 /**
  * Loads any kind of response from given path.
  * @emits {@link Event.LOADING_START}
  * @emits {@link Event.LOADING_END}
  */
-const load = async function( path: string ): Promise<Response> {
-	emitter.emit( Event.LOADING_START, path );
-	let data = await fetch( path );
-	emitter.emit( Event.LOADING_END, path );
-	return data;
+const load = async function (path: string): Promise<Response> {
+  emitter.emit(Event.LOADING_START, path);
+  let data = await fetch(path);
+  emitter.emit(Event.LOADING_END, path);
+  return data;
 };
 
 /**
@@ -22,9 +22,9 @@ const load = async function( path: string ): Promise<Response> {
  * @emits {@link Event.LOADING_START}
  * @emits {@link Event.LOADING_END}
  */
-const loadJson = async function<T>( path: string ): Promise<T> {
-	const response = await load(path);
-	return response.json();
+const loadJson = async function <T>(path: string): Promise<T> {
+  const response = await load(path);
+  return response.json();
 };
 
 /**
@@ -32,154 +32,142 @@ const loadJson = async function<T>( path: string ): Promise<T> {
  * @emits {@link Event.LOADING_START}
  * @emits {@link Event.LOADING_END}
  */
-const loadText = async function( path: string ): Promise<string> {
-	const response = await load(path);
-	return response.text();
+const loadText = async function (path: string): Promise<string> {
+  const response = await load(path);
+  return response.text();
 };
 
 /**
  * Debounces: it limits the rate at which a function can fire.
  */
-const debounce = function( func: Function, wait: number, immediate: boolean = false ) {
-	let timeout: any;
-	return function() {
-		// @ts-ignore
-		const context = this;
-		const args = arguments;
-		const later = function() {
-			timeout = null;
-			if( !immediate ) {
-				func.apply( context, args );
-			}
-		};
-		const callNow = immediate && !timeout;
-		clearTimeout( timeout );
-		timeout = setTimeout( later, wait );
-		if( callNow ) {
-			func.apply( context, args );
-		}
-	};
+const debounce = function (func: Function, wait: number, immediate: boolean = false) {
+  let timeout: any;
+  return function () {
+    // @ts-ignore
+    const context = this;
+    const args = arguments;
+    const later = function () {
+      timeout = null;
+      if (!immediate) {
+        func.apply(context, args);
+      }
+    };
+    const callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) {
+      func.apply(context, args);
+    }
+  };
 };
 
 /**
  * Merges multiple maps.
  */
-const mergeMaps = function <TKey, TValue>( ...maps: Map<TKey, TValue>[] ): Map<TKey, TValue> {
-	const resultMap = new Map<TKey, TValue>();
-	maps.forEach( map => {
-		map.forEach( ( v, k ) => {
-			resultMap.set( k, v );
-		} );
-	} );
-	return resultMap;
+const mergeMaps = function <TKey, TValue>(...maps: Map<TKey, TValue>[]): Map<TKey, TValue> {
+  const resultMap = new Map<TKey, TValue>();
+  maps.forEach(map => {
+    map.forEach((v, k) => {
+      resultMap.set(k, v);
+    });
+  });
+  return resultMap;
 };
 
 /**
  * Creates a HTML image element based on a SVG string, whereas all the embedded assets in the SVG (eg: fonts, images)
  * are already loaded and exchanged by their base64 representation.\
  * There the output image can exist as "standalone" image and may be used for example as a paintable.
- * 
+ *
  * !!CAUTION!!: The used functions within this code section are very well evaluated since most alternatives
  * somehow don't work in Safari, as mentioned in the following BJS forum entries:
  * - https://forum.babylonjs.com/t/drawing-svg-content-text-into-dynamictexture-doesnt-work-in-safari-v15/25048
  * - https://forum.babylonjs.com/t/texture-createfrombase64string-doesnt-seem-to-work-for-ios-devices-initially/25502
  */
-const createImageFromSvg = async function( svgSrc: string ): Promise<HTMLImageElement> {
-	// replace assets with their base64 versions in svg source code 
-	const svgWithAssetsEmbedded = await _embedAssets( svgSrc );
+const createImageFromSvg = async function (svgSrc: string): Promise<HTMLImageElement> {
+  // replace assets with their base64 versions in svg source code
+  const svgWithAssetsEmbedded = await _embedAssets(svgSrc);
 
-	// create data string which can be used as an image source
-	const svgEncoded = 'data:image/svg+xml,' + encodeURIComponent(svgWithAssetsEmbedded)
+  // create data string which can be used as an image source
+  const svgEncoded = 'data:image/svg+xml,' + encodeURIComponent(svgWithAssetsEmbedded);
 
-	return createImageFromImgSrc(svgEncoded);
+  return createImageFromImgSrc(svgEncoded);
 };
 
 /**
  * Creates an HTML image element from a dedicated image source.\
  * Also waits until the image has loaded.
- * 
+ *
  * !!CAUTION!!: The `setTimeout` after loading is finished is required due to a Safari bug:
  * - https://bugs.webkit.org/show_bug.cgi?id=39059
  * - https://bugs.webkit.org/show_bug.cgi?id=219770
- * 
+ *
  * It's not 100% ensured that the timeout solves the issue in every case, but there is no other way unfortunately.\
  * => Keep an eye on it in future projects
- * 
+ *
  * @param imgSrc Theoretically every source is valid which is also supported by
  *               [HTMLImageElement.src](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/src).\
  *               Known exceptions are SVGs with embedded assets that are provided as object URL. See comments in
  *               {@link createImageFromSvg} for further details.
  */
- const createImageFromImgSrc = async function ( imgSrc: string ): Promise<HTMLImageElement> {
-	let img = new Image();
+const createImageFromImgSrc = async function (imgSrc: string): Promise<HTMLImageElement> {
+  let img = new Image();
 
-	await new Promise(resolve => {
-		img.onload = () => {
-			setTimeout(resolve, 0);
-		}
-		img.src = imgSrc;
-	});
+  await new Promise(resolve => {
+    img.onload = () => {
+      setTimeout(resolve, 0);
+    };
+    img.src = imgSrc;
+  });
 
-	return img;
-}
+  return img;
+};
 
 /**
  * Replaces all supported image & font URLs in the given SVG with their base64 representation.
  */
-const _embedAssets = async function( svgSrc: string ): Promise<string> {
-	const _imageExtensions = ['png', 'gif', 'jpg', 'jpeg', 'svg', 'bmp'];
-	const _fontExtensions = ['woff2', 'woff', 'ttf', 'otf'];
-	const _assetExtensions = [..._imageExtensions, ..._fontExtensions];
-	// Regex copied from https://stackoverflow.com/a/8943487/1273551, not "stress tested"...
-	const urlRegex = /(\bhttps?:\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gi;
-	const allUrls = svgSrc.match( urlRegex ) as string[];
-	const assetUrls = allUrls.filter(
-		url => _assetExtensions.some(
-			extension => url.toLowerCase().endsWith( `.${extension}` )
-		)
-	);
-	const assetBase64Fetcher = assetUrls.map( _fetchBase64AssetUrl );
-	const assetFetcherResults = await Promise.all( assetBase64Fetcher );
-	return assetFetcherResults.reduce(
-		( svgSrc, x ) => svgSrc.replace( x.url, x.base64 ), svgSrc
-	);
+const _embedAssets = async function (svgSrc: string): Promise<string> {
+  const _imageExtensions = ['png', 'gif', 'jpg', 'jpeg', 'svg', 'bmp'];
+  const _fontExtensions = ['woff2', 'woff', 'ttf', 'otf'];
+  const _assetExtensions = [..._imageExtensions, ..._fontExtensions];
+  // Regex copied from https://stackoverflow.com/a/8943487/1273551, not "stress tested"...
+  const urlRegex = /(\bhttps?:\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gi;
+  const allUrls = svgSrc.match(urlRegex) as string[];
+  const assetUrls = allUrls.filter(url =>
+    _assetExtensions.some(extension => url.toLowerCase().endsWith(`.${extension}`))
+  );
+  const assetBase64Fetcher = assetUrls.map(_fetchBase64AssetUrl);
+  const assetFetcherResults = await Promise.all(assetBase64Fetcher);
+  return assetFetcherResults.reduce((svgSrc, x) => svgSrc.replace(x.url, x.base64), svgSrc);
 };
 
 /**
  * Fetch asset (image or font) and convert it to base64 string representation.
  */
-const _fetchBase64AssetUrl = async function( assetUrl: string ): Promise<{ url: string, base64: string }> {
-	// TODO: Cache known base64 representation and only fetch/convert when not already known.
-	//       Usually the fetch shouldn't hit the network but the browser cache since the SVG was already drawn.
-	//       See comments of "createImageBitmapFromSvg" for some considerations...
-	return new Promise( async (resolve, reject) => {
-		const resp = await fetch( assetUrl );
-		const blob = await resp.blob();
-		const reader = new FileReader();
-		reader.onloadend = event => {
-			const target = event.target;
-			if( !target ) {
-				return reject( `Asset with URL "${assetUrl}" could not be loaded.` );
-			}
-			const result = target.result;
-			if( !result ) {
-				return reject( `Asset with URL "${assetUrl}" returned an empty result.` );
-			}
-			resolve( {
-				url: assetUrl,
-				base64: result.toString() as string,
-			} );
-		};
-		reader.readAsDataURL( blob );
-	} );
+const _fetchBase64AssetUrl = async function (assetUrl: string): Promise<{ url: string; base64: string }> {
+  // TODO: Cache known base64 representation and only fetch/convert when not already known.
+  //       Usually the fetch shouldn't hit the network but the browser cache since the SVG was already drawn.
+  //       See comments of "createImageBitmapFromSvg" for some considerations...
+  return new Promise(async (resolve, reject) => {
+    const resp = await fetch(assetUrl);
+    const blob = await resp.blob();
+    const reader = new FileReader();
+    reader.onloadend = event => {
+      const target = event.target;
+      if (!target) {
+        return reject(`Asset with URL "${assetUrl}" could not be loaded.`);
+      }
+      const result = target.result;
+      if (!result) {
+        return reject(`Asset with URL "${assetUrl}" returned an empty result.`);
+      }
+      resolve({
+        url: assetUrl,
+        base64: result.toString() as string,
+      });
+    };
+    reader.readAsDataURL(blob);
+  });
 };
 
-export {
-	sleep,
-	loadJson,
-	loadText,
-	debounce,
-	mergeMaps,
-	createImageFromSvg,
-	createImageFromImgSrc
-};
+export { sleep, loadJson, loadText, debounce, mergeMaps, createImageFromSvg, createImageFromImgSrc };

package/src/api/util/stringHelper.ts

@@ -1,26 +1,23 @@
 /**
  * Creates a random uuidv4.
  */
-const uuidv4 = function() {
-	// @ts-ignore
-	return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace( /[018]/g, c =>
-		(c ^ crypto.getRandomValues( new Uint8Array( 1 ) )[0] & 15 >> c / 4).toString( 16 )
-	);
+const uuidv4 = function () {
+  // @ts-ignore
+  return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
+    (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16)
+  );
 };
 
 /**
  * Converts a string from camel case to snake case.
  */
-const camelToSnakeCase = function( str: string ): string {
-	return str
-		.replace( /([A-Z])/g, " $1" )
-		.trim()
-		.split( ' ' )
-		.join('_')
-		.toLowerCase();
+const camelToSnakeCase = function (str: string): string {
+  return str
+    .replace(/([A-Z])/g, ' $1')
+    .trim()
+    .split(' ')
+    .join('_')
+    .toLowerCase();
 };
 
-export {
-	uuidv4,
-	camelToSnakeCase,
-};
+export { uuidv4, camelToSnakeCase };

package/src/buildinfo.json

@@ -1,3 +1,3 @@
 {
-	"version": "@VERSION@"
-}
+  "version": "@VERSION@"
+}

package/src/commonjs.tsconfig.json

@@ -1,13 +1,10 @@
 {
-	"extends": "./tsconfig",
-	"exclude": [
-		"dev.ts",
-		"assets"
-	],
-	"compilerOptions": {
-		"module": "commonjs",
-		"moduleResolution": "node",
-		"outDir": "../dist/lib-cjs",
-		"declaration": true
-	}
+  "extends": "./tsconfig",
+  "exclude": ["dev.ts", "assets"],
+  "compilerOptions": {
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "outDir": "../dist/lib-cjs",
+    "declaration": true
+  }
 }

package/src/declaration.tsconfig.json

@@ -1,10 +1,8 @@
 {
-	"extends": "./tsconfig",
-	"compilerOptions": {
-		"declaration": true,
-		"outDir": "../dist/types",
-		"emitDeclarationOnly": true
-	}
-
-
+  "extends": "./tsconfig",
+  "compilerOptions": {
+    "declaration": true,
+    "outDir": "../dist/types",
+    "emitDeclarationOnly": true
+  }
 }

package/src/dev.ts

@@ -6,38 +6,38 @@ import { Emitter, Viewer } from '.';
 
 import { createSpec, beforeBootstrap, afterBootstrap, createUIelements } from '../assets/index';
 
-const loadingElement = document.getElementById( 'loading' ) as HTMLDivElement;
+const loadingElement = document.getElementById('loading') as HTMLDivElement;
 
-Emitter.on( Event.BOOTSTRAP_START, () => {
-	Emitter.on( Event.LOADING_START, () => {
-		loadingElement!.style.display = 'block';
-	} );
-	Emitter.on( Event.VARIANT_CREATED, () => {
-		loadingElement!.style.display = 'none';
-	} );
-} );
+Emitter.on(Event.BOOTSTRAP_START, () => {
+  Emitter.on(Event.LOADING_START, () => {
+    loadingElement!.style.display = 'block';
+  });
+  Emitter.on(Event.VARIANT_CREATED, () => {
+    loadingElement!.style.display = 'none';
+  });
+});
 
-document.addEventListener('DOMContentLoaded', main );
+document.addEventListener('DOMContentLoaded', main);
 
 async function main() {
-	const viewer = await bootstrapViewer();
-	// "Export" for console testing...
-	set( window, 'viewer', viewer);
+  const viewer = await bootstrapViewer();
+  // "Export" for console testing...
+  set(window, 'viewer', viewer);
 }
 
 async function bootstrapViewer() {
-	const canvas = document.getElementById( 'babylon-canvas' ) as HTMLCanvasElement;
-	if( !canvas ) {
-		throw new Error( 'Missing "canvas" element' );
-	}
-	const viewer = new Viewer(canvas, createSpec());
-	await beforeBootstrap(viewer);
-	try {
-		await viewer.bootstrap();
-	} catch (e) {
-		console.error(e);
-	}
-	await afterBootstrap( viewer );
-	await createUIelements( viewer );
-	return viewer;
-}
+  const canvas = document.getElementById('babylon-canvas') as HTMLCanvasElement;
+  if (!canvas) {
+    throw new Error('Missing "canvas" element');
+  }
+  const viewer = new Viewer(canvas, createSpec());
+  await beforeBootstrap(viewer);
+  try {
+    await viewer.bootstrap();
+  } catch (e) {
+    console.error(e);
+  }
+  await afterBootstrap(viewer);
+  await createUIelements(viewer);
+  return viewer;
+}

package/src/es6.tsconfig.json

@@ -1,13 +1,10 @@
 {
-	"extends": "./tsconfig",
-	"exclude": [
-		"dev.ts",
-		"assets"
-	],
-	"compilerOptions": {
-		"module": "es6",
-		"moduleResolution": "node",
-		"outDir": "../dist/lib-es6",
-		"declaration": true
-	}
+  "extends": "./tsconfig",
+  "exclude": ["dev.ts", "assets"],
+  "compilerOptions": {
+    "module": "es6",
+    "moduleResolution": "node",
+    "outDir": "../dist/lib-es6",
+    "declaration": true
+  }
 }

package/src/index.ts

@@ -49,43 +49,43 @@ import * as BabylonHelper from './api/util/babylonHelper';
  * Expose some frequently used babylon modules by our consumers.
  */
 export {
-	AnimationManager,
-	Variant,
-	VariantInstanceManager,
-	Viewer,
-	ParameterObservable,
-	Parameterizable,
-	VariantParameterizable,
-	ViewerLight,
-	emitter as Emitter,
-	EventEmitter,
-	Event,
-	Parameter,
-	VariantInstance,
-	Color3,
-	Color4,
-	Vector3,
-	AbstractMesh,
-	InstancedMesh,
-	Mesh,
-	TransformNode,
-	Node,
-	Material,
-	PBRMaterial,
-	StandardMaterial,
-	Scene,
-	Engine,
-	ArcRotateCamera,
-	DynamicTexture,
-	CubeTexture,
-	MeshBuilder,
-	Texture,
-	BabylonAnimation,
-	HemisphericLight,
-	DirectionalLight,
-	Element,
-	EventBroadcaster,
-	SceneManager,
-	PlacementAnimation,
-	BabylonHelper,
+  AnimationManager,
+  Variant,
+  VariantInstanceManager,
+  Viewer,
+  ParameterObservable,
+  Parameterizable,
+  VariantParameterizable,
+  ViewerLight,
+  emitter as Emitter,
+  EventEmitter,
+  Event,
+  Parameter,
+  VariantInstance,
+  Color3,
+  Color4,
+  Vector3,
+  AbstractMesh,
+  InstancedMesh,
+  Mesh,
+  TransformNode,
+  Node,
+  Material,
+  PBRMaterial,
+  StandardMaterial,
+  Scene,
+  Engine,
+  ArcRotateCamera,
+  DynamicTexture,
+  CubeTexture,
+  MeshBuilder,
+  Texture,
+  BabylonAnimation,
+  HemisphericLight,
+  DirectionalLight,
+  Element,
+  EventBroadcaster,
+  SceneManager,
+  PlacementAnimation,
+  BabylonHelper,
 };

package/src/tsconfig.json

@@ -1,43 +1,32 @@
 {
-	"buildOnSave": false,
-	"compileOnSave": false,
-	"exclude": [
-		"dist"
-	],
-	"compilerOptions": {
-		"module": "es2015",
-		"moduleResolution": "node",
-		"target": "es5",
-		"removeComments": false,
-		"preserveConstEnums": true,
-		"sourceMap": true,
-		"skipLibCheck": true,
-		"strict": true,
-		"noFallthroughCasesInSwitch": true,
-		"baseUrl": ".",
-		"importHelpers": true,
-		"resolveJsonModule": true,
-		"lib": [
-			"es6",
-			"dom"
-		]
-	},
-	"typedocOptions": {
-		"name": "Combeenation 3D viewer",
-		"entryPoints": [
-			"src/index.ts",
-			"src/api/util/globalTypes.ts",
-		],
-		"exclude": [
-			"src/dev.ts",
-			"assets/"
-		],
-		"excludeInternal": true,
-		"excludePrivate": true,
-		"excludeProtected": true,
-		"listInvalidSymbolLinks": true,
-		"out": "docs",
-		"pages": "src/pagesconfig.json",
-		"theme": "doc/cbn-docs-theme"
-	}
+  "buildOnSave": false,
+  "compileOnSave": false,
+  "exclude": ["dist"],
+  "compilerOptions": {
+    "module": "es2015",
+    "moduleResolution": "node",
+    "target": "es5",
+    "removeComments": false,
+    "preserveConstEnums": true,
+    "sourceMap": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "importHelpers": true,
+    "resolveJsonModule": true,
+    "lib": ["es6", "dom"]
+  },
+  "typedocOptions": {
+    "name": "Combeenation 3D viewer",
+    "entryPoints": ["src/index.ts", "src/api/util/globalTypes.ts"],
+    "exclude": ["src/dev.ts", "assets/"],
+    "excludeInternal": true,
+    "excludePrivate": true,
+    "excludeProtected": true,
+    "listInvalidSymbolLinks": true,
+    "out": "docs",
+    "pages": "src/pagesconfig.json",
+    "theme": "doc/cbn-docs-theme"
+  }
 }

package/src/tsconfig.types.json

@@ -1,10 +1,9 @@
 {
-	"extends": "./tsconfig",
-	"exclude": [
-	],
-	"compilerOptions": {
-		"declaration": true,
-		"noEmit": false,
-		"emitDeclarationOnly": true
-	}
-}
+  "extends": "./tsconfig",
+  "exclude": [],
+  "compilerOptions": {
+    "declaration": true,
+    "noEmit": false,
+    "emitDeclarationOnly": true
+  }
+}

package/src/types.d.ts

@@ -1,4 +1,3 @@
 /** @ignore **/
 declare let IS_PRODUCTION: boolean;
 declare let VERSION_INFORMATION: string;
-