@combeenation/3d-viewer 3.0.0-rc2 → 4.0.0-alpha6

package/src/api/util/resourceHelper.ts

@@ -1,169 +1,158 @@
-import { emitter, Event } from '../classes/event';
-
-/**
- * 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;
-};
-
-/**
- * Loads a JSON from a given path.
- * @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();
-};
-
-/**
- * Loads a Text from a given path.
- * @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();
-};
-
-/**
- * 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 );
-		}
-	};
-};
-
-/**
- * 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 )
-	);
-};
-
-/**
- * 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;
-};
-
-/**
- * Creates an `ImageBitmap` from a SVG string using native `createImageBitmap` functionality.
- */
-const createImageBitmapFromSvg = async function( svgSrc: string ): Promise<ImageBitmap> {
-	return new Promise( async resolve => {
-		const svgWithAssetsEmbedded = await _embedAssets( svgSrc );
-		const svgBlob = new Blob( [svgWithAssetsEmbedded], { type: 'image/svg+xml;charset=utf-8' } );
-		const svgBase64 = URL.createObjectURL( svgBlob );
-		let img = new Image();
-		img.onload = async () => {
-			const imgBitmap = await createImageBitmap( img );
-			resolve( imgBitmap );
-		};
-		img.src = svgBase64;
-	} );
-};
-
-const createImageBitmapFromImgSrc = async function( imgSrc: string ): Promise<ImageBitmap> {
-	const img = new Image();
-	img.src = imgSrc;
-	return new Promise( resolve => {
-		img.onload = async () => {
-			const imgBitmap = await createImageBitmap( img );
-			resolve( imgBitmap );
-		};
-	} );
-};
-
-/**
- * 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'];
-	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 );
-	} );
-};
-
-export {
-	loadJson,
-	loadText,
-	debounce,
-	uuidv4,
-	mergeMaps,
-	createImageBitmapFromSvg,
-	createImageBitmapFromImgSrc
+import { emitter, Event } from '../classes/event';
+
+/**
+ * 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;
+};
+
+/**
+ * Loads a JSON from a given path.
+ * @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();
+};
+
+/**
+ * Loads a Text from a given path.
+ * @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();
+};
+
+/**
+ * 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 );
+		}
+	};
+};
+
+/**
+ * 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;
+};
+
+/**
+ * Creates an `ImageBitmap` from a SVG string using native `createImageBitmap` functionality.
+ */
+const createImageBitmapFromSvg = async function( svgSrc: string ): Promise<ImageBitmap> {
+	return new Promise( async resolve => {
+		const svgWithAssetsEmbedded = await _embedAssets( svgSrc );
+		const svgBlob = new Blob( [svgWithAssetsEmbedded], { type: 'image/svg+xml;charset=utf-8' } );
+		const svgBase64 = URL.createObjectURL( svgBlob );
+		let img = new Image();
+		img.onload = async () => {
+			const imgBitmap = await createImageBitmap( img );
+			resolve( imgBitmap );
+		};
+		img.src = svgBase64;
+	} );
+};
+
+const createImageBitmapFromImgSrc = async function( imgSrc: string ): Promise<ImageBitmap> {
+	const img = new Image();
+	img.src = imgSrc;
+	return new Promise( resolve => {
+		img.onload = async () => {
+			const imgBitmap = await createImageBitmap( img );
+			resolve( imgBitmap );
+		};
+	} );
+};
+
+/**
+ * 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'];
+	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 );
+	} );
+};
+
+export {
+	loadJson,
+	loadText,
+	debounce,
+	mergeMaps,
+	createImageBitmapFromSvg,
+	createImageBitmapFromImgSrc
 };

package/src/api/util/stringHelper.ts

@@ -0,0 +1,26 @@
+/**
+ * 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 )
+	);
+};
+
+/**
+ * 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();
+};
+
+export {
+	uuidv4,
+	camelToSnakeCase,
+};

package/src/buildinfo.json

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

package/src/commonjs.tsconfig.json

@@ -1,13 +1,13 @@
-{
-	"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,10 @@
-{
-	"extends": "./tsconfig",
-	"compilerOptions": {
-		"declaration": true,
-		"outDir": "../dist/types",
-		"emitDeclarationOnly": true
-	}
-
-
-}
+{
+	"extends": "./tsconfig",
+	"compilerOptions": {
+		"declaration": true,
+		"outDir": "../dist/types",
+		"emitDeclarationOnly": true
+	}
+
+
+}

package/src/dev.ts

@@ -1,60 +1,45 @@
-import '@babylonjs/core';
-import { Color4 as Color } from '@babylonjs/core';
-import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial';
-
-import { Emitter, Viewer } from '.';
-import { Event } from './api/classes/event';
-
-/**
- * (i) HERE YOU @TODO (1) ADJUST THE CURRENT DEMO YOU ARE WORKING ON.
- */
-// @ts-ignore
-//import { createSpec, createUIelements } from './assets/_draft/main';
-import { createSpec, createUIelements } from './assets/CB-6250/main';
-
-const loadingElement = document.getElementById( 'loading' ) as HTMLDivElement;
-
-Emitter.on( Event.BOOTSTRAP_START, () => {
-	//gets also called during bootstrap
-	Emitter.on( Event.LOADING_START, () => {
-		loadingElement!.style.display = 'block';
-	} );
-
-	//gets also called during bootstrap
-	Emitter.on( Event.VARIANT_CREATED, () => {
-		loadingElement!.style.display = 'none';
-	} );
-} );
-
-//Emitter.on(Event.SCENE_PROCESSING_END, scene => new StandardMaterial('my_dynamic_material', scene));
-
-/**
- * Bootstraps the viewer using the JSON spec, registers all needed events etc.
- *
- * @return {Promise<Viewer>}
- */
-document.addEventListener('DOMContentLoaded', 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());
-	try {
-		await viewer.bootstrap();
-	} catch (e) {
-		console.error(e);
-	}
-	// (i) BabylonJS Sandbox Toolbars
-	// const debug = await viewer.enableDebugLayer()
-
-	// @TODO Set background-colour for container
-	//viewer.scene.clearColor = new Color(0.5, 0.8, 0.5);
-	if (viewer.variantInstances.allDefinitions.length) {
-		createUIelements( viewer );
-	}
-	console.info( ' --- UI Initialized ---');
-
-	return viewer;
-} );
+import '@babylonjs/core';
+import { Event } from 'api/classes/event';
+import { merge, set } from 'lodash-es';
+
+import { Emitter, Viewer } from '.';
+import { createCombobox } from '../assets/ctrls-helper';
+
+import { createSpec, beforeBootstrap, afterBootstrap, createUIelements } from '../assets/streetscene/main';
+//import { createSpec, beforeBootstrap, afterBootstrap, createUIelements } from '../assets/KTM1290SA/ktm1290SA_2';
+
+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';
+	} );
+} );
+
+document.addEventListener('DOMContentLoaded', main );
+
+async function main() {
+	const viewer = await bootstrapViewer();
+	// "Export" for console testing...
+	set( window, 'viewerInstance', 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;
+}

package/src/es6.tsconfig.json

@@ -1,13 +1,13 @@
-{
-	"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
+	}
+}