@combeenation/3d-viewer 4.0.0-alpha9 → 4.0.0-beta4

package/src/api/util/resourceHelper.ts

@@ -1,158 +1,188 @@
-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', '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 );
-	} );
-};
-
-export {
-	loadJson,
-	loadText,
-	debounce,
-	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 );
+		}
+	};
+};
+
+/**
+ * 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 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 );
+
+	// create data string which can be used as an image source
+	const svgEncoded = 'data:image/svg+xml,' + encodeURIComponent(svgWithAssetsEmbedded)
+
+	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})
+ */
+const createImageFromImgSrc = async function ( imgSrc: string ): Promise<HTMLImageElement> {
+	let img = new Image();
+	
+	await new Promise(resolve => {
+		img.onload = () => {
+			setTimeout(resolve, 0);
+		}
+		img.src = imgSrc;
+	});
+
+	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
+	);
+};
+
+/**
+ * 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,
+	createImageFromSvg,
+	createImageFromImgSrc
 };

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,45 +1,47 @@
-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;
+import '@babylonjs/core';
+import { Event } from 'api/classes/event';
+import { set } from 'lodash-es';
+
+import { Emitter, Viewer } from '.';
+
+/**
+ * (i) HERE YOU @TODO (1) ADJUST THE CURRENT DEMO YOU ARE WORKING ON.
+ */
+import { createSpec, beforeBootstrap, afterBootstrap, createUIelements } from '../assets/hulahoop/main';
+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 );
+	console.info( ' --- UI Initialized ---');
+
+	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
+	}
+}