Updating chlib to v1.0.6

lib/chel-dist/History.md

@@ -2,6 +2,11 @@ WORKING
 ===================
   * TODO: Add animation class to chLib js. 
 
+1.0.6 / 2018-06-13
+===================
+  * deps: chLib
+    - Mod: chCanvas can use a background image.
+
 1.0.4 / 2017-03-01
 ===================
   * deps: mouseManager

lib/chel-dist/index.js

@@ -33,5 +33,8 @@ module.exports = function(app)
 	app.get('/lib/chel-dist/js/viewManager.js', 
 		function (req, res) {res.sendFile(__dirname + '/js/viewManager.js');});
 
+	app.get('/lib/chel-dist/js/webglManager.js', 
+		function (req, res) {res.sendFile(__dirname + '/js/webglManager.js');});
+
 	console.log("   lib/chel-dist/index.js: OK");
 }

lib/chel-dist/js/chlib.js

@@ -1,4 +1,5 @@
 // Docs
+// ChLib v1.3 (11/06/2018)	: Fix: innerWidth and innerHeight has not current values on oneREsize, you must call with timeout. 
 // ChLib v1.2 (26/06/2017)	: Fix: Solving getBouncingREct to get canvas's offset see m_canvasOffsetX or m_canvasOffsetY. 
 //							  Fix: Avoid zooming on SAfari 10.x (initial-scale=1.0 is not working any more)
 // ChLib v1.1				: Fix: ChCanvas class now has m_scaleX, m_scaleY setted properly.
@@ -22,13 +23,23 @@ function msglog(_text)
 		if (typeof __loggerControl === 'undefined')
 		{
 			__loggerControl = document.getElementById('mytextarea_id');
+
+			if (__loggerControl === null)
+			{
+				__loggerControl = document.getElementById("idCanvas");
+				__loggerControl = document.createElement("TEXTAREA");
+				document.body.appendChild(__loggerControl);
+			}
 		}
 
 		if (typeof __loggerControl !== 'undefined' && __loggerControl !== null)
 		{
 			__loggerControl.value = __loggerControl.value + _text  + "\n";
 			__loggerControl.scrollTop = __loggerControl.scrollHeight;
 			__loggerControl.style.display = 'block';	
+			__loggerControl.style.zIndex = '1';	
+			__loggerControl.rows = 10;
+			__loggerControl.cols = 80;
 		}
 	}
 }
@@ -1014,6 +1025,8 @@ function chCanvas (_document, _window)
 	this.m_window = _window;
 	this.m_canvas = null;
 	this.m_context = null;
+
+	this.m_webgl = null;
 
 	this.m_scaleX = 1;
 	this.m_scaleY = 1;
@@ -1027,6 +1040,11 @@ function chCanvas (_document, _window)
 	this.m_canvasOffsetX = 0;
 	this.m_canvasOffsetY = 0;
 
+	this.m_canvasBackground = null;
+	this.m_imgBackground = null;
+	this.m_contextBackground = null;
+	this.m_backgroundPattern = null;
+
 	chCanvas.prototype.setCanvasById = function (_canvasId)
 	{
 		if (typeof this.m_document !== 'undefined' && this.m_document != null)
@@ -1036,6 +1054,27 @@ function chCanvas (_document, _window)
 		}
 	}
 
+	chCanvas.prototype.setWebgl = function (_webgl)
+	{
+		if (typeof this.m_document !== 'undefined' && this.m_document != null)
+		{
+			this.m_webgl = _webgl;
+		}
+	}
+
+	chCanvas.prototype.setBackground = function (_canvasBackground, _imgBackground)
+	{
+		this.m_canvasBackground = _canvasBackground;
+		this.m_imgBackground = _imgBackground;
+
+		if (this.m_canvasBackground !== null && this.m_imgBackground !== null)
+		{
+			this.m_contextBackground = this.m_canvasBackground.getContext('2d'); 	
+			this.m_backgroundPattern = this.m_contextBackground.createPattern(this.m_imgBackground, "repeat");
+			this.performResizeBackground();
+		}
+	}
+
 	chCanvas.prototype.initDefaultConstructor = function ()
 	{
 		if (this.m_canvas !== null)
@@ -1112,6 +1151,20 @@ function chCanvas (_document, _window)
 		}
 
 		this.centerCanvasInWindow(this.m_canvasWidth, this.m_canvasHeight);
+		this.updateWebglPosAndSize();
+	}
+
+	chCanvas.prototype.updateWebglPosAndSize = function()
+	{
+		if (this.m_webgl != null)
+		{
+
+		    this.m_webgl.m_renderer.domElement.style.marginLeft = this.m_canvas.style.left;
+		    this.m_webgl.m_renderer.domElement.style.marginTop = this.m_canvas.style.top;
+			this.m_webgl.m_renderer.domElement.style.width = this.m_canvas.style.width;
+			this.m_webgl.m_renderer.domElement.style.height = this.m_canvas.style.height;
+		    this.m_webgl.m_renderer.setSize(this.m_canvasWidth, this.m_canvasHeight);
+		}
 	}
 
 	chCanvas.prototype.centerCanvasInWindow = function(_cw, _ch)
@@ -1153,8 +1206,31 @@ function chCanvas (_document, _window)
 			_this.m_invalidateOnResize = false;
 			return;
 		}
+
+		// TRICK: Perform the resize in asynch way, because innerWidth and innerHEight
+		// in Chrome for iOS has not current value at the moment. 
+		setTimeout
+		(
+			function()
+			{  
+				chCanvas.owner.performResize();
+				chCanvas.owner.performResizeBackground();
+			},
+			100
+		)
+	}
+
+	chCanvas.prototype.performResizeBackground = function ()
+	{
+		if (this.m_canvasBackground !== null)
+		{
+			this.m_canvasBackground.style.width = window.innerWidth+'px';
+			this.m_canvasBackground.style.height = window.innerHeight+'px';	
 
-		_this.performResize();
+			this.m_contextBackground.fillStyle = this.m_backgroundPattern;
+			this.m_contextBackground.rect(0,0,this.m_canvasBackground.width, this.m_canvasBackground.height);
+			this.m_contextBackground.fillRect(0,0,this.m_canvasBackground.width, this.m_canvasBackground.height);
+		}
 	}
 
 	chCanvas.prototype.setResizeMethodToMaxZoom = function ()
@@ -1226,7 +1302,10 @@ function initResizingBase(_paramCanvas, _maxZoom)
 	var globalCanvasH = _paramCanvas.height;
 
 	globalCanvas.onselectstart = function() { return false; };
-
+
+	window.addEventListener('load', resize, false);
+	window.addEventListener('resize', resize, false);
+
 	function resize() 
 	{
 		// Our canvas must cover full height of screen
@@ -1276,14 +1355,9 @@ function initResizingBase(_paramCanvas, _maxZoom)
 			m_scaleY = m_canvasHeight / globalCanvas.height;
 		}
 
-		console.log(globalCanvas);
-		console.log("cw,ch:" + m_canvasWidth + "," + m_canvasHeight);
-
 		centerCanvasInWindows(globalCanvas, m_canvasWidth, m_canvasHeight);
 	}
 
-	window.addEventListener('load', resize, false);
-	window.addEventListener('resize', resize, false);
 
 	// do nothing in the event handler except canceling the event
 	globalCanvas.ondragstart = function(e) {

lib/chel-dist/js/consts.js

@@ -1,7 +1,7 @@
 // Framework constants to developmet process
 // **********************************************************************
 
-var C_DEBUG_MODE = true;
+var C_DEBUG_MODE = false;
 var C_LOG = false;
 var C_FPS_RENDER = 25;
 var C_PIXEL_SIZE = 1; 

lib/chel-dist/js/viewManager.js

@@ -1,7 +1,5 @@
 ViewManager.self = null;
 
-
-
 function ViewManager(_document, _window) 
 { 
 	ViewManager.self = this;
@@ -25,6 +23,7 @@ function ViewManager(_document, _window)
 	this.m_keyboardManager = null;
 	this.m_soundManager = null;
 	this.m_mouseManager = null;
+	this.m_webglManager = null;
 
 	// Life cicle
 	this.m_activities = new Array();
@@ -37,6 +36,8 @@ function ViewManager(_document, _window)
 	this.m_messageByTick = ""; 
 	this.m_messageByCycle = "";
 
+	this.m_canvasBackground = document.getElementById("idCanvasBack");
+	this.m_backgroundImgName = "";
 	this.m_globalConfig = null;
 
 	this.redefinitionOfRequestAnimFrame();
@@ -47,6 +48,11 @@ function ViewManager(_document, _window)
 	});
 }
 
+ViewManager.prototype.setBackground = function (_backgroundImageName)
+{
+	this.m_backgroundImgName = _backgroundImageName;
+}
+
 // Redefinition of window.requestAnimFrame to apply fallback with setTimeout;
 ViewManager.prototype.redefinitionOfRequestAnimFrame = function ()
 {
@@ -138,6 +144,13 @@ ViewManager.prototype.performFullResourcesLoad = function (_callback)
 			(
 				function()
 				{
+
+					if (_this.m_canvasEx !== null && _this.m_backgroundImgName !== "")
+					{
+						var img = _this.getBitmapManagerInstance().getImageByName(_this.m_backgroundImgName);
+						_this.m_canvasEx.setBackground(_this.m_canvasBackground, img);
+					}
+
 					triggerSoundLoad();
 				}
 			)
@@ -218,7 +231,7 @@ ViewManager.prototype.initCanvasById = function (_canvasId, _maxZoom)
 
 	if (_maxZoom === true)
 	{
-			this.m_canvasEx.setResizeMethodToMaxZoom();
+		this.m_canvasEx.setResizeMethodToMaxZoom();
 	}
 
 	this.m_canvasEx.enableOnResizeChange();
@@ -494,4 +507,44 @@ ViewManager.prototype.render = function ()
 ViewManager.prototype.onRefresh = function ()
 {
 	this.m_refresh = true;
-}
+}
+
+
+ViewManager.prototype.initializeWebglManager = function ()
+{
+	var result = true;  
+
+	this.getWebglManagerInstance();
+
+	try
+	{
+		this.m_webglManager.init(this.m_document, this.m_canvasEx);
+	}
+	catch (e)
+	{
+		msglog('ViewManager ERROR (initializeWebglManager). Exception = ' + e);
+		result = false;
+	}
+
+	return result;
+};
+
+ViewManager.prototype.getWebglManagerInstance = function ()
+{
+	if (this.isWebglManagerCreated() === false)
+	{
+		this.m_webglManager = new WebglManager();
+	}
+
+	return this.m_webglManager; 
+};
+
+ViewManager.prototype.isWebglManagerCreated = function ()
+{
+	return (typeof this.m_webglManager !== 'undefined' && this.m_webglManager !== null);
+}
+
+ViewManager.prototype.enableWebgl = function ()
+{
+	this.initializeWebglManager();
+}

lib/chel-dist/js/webglManager.js

@@ -0,0 +1,49 @@
+WebglManager.self = null;
+
+function WebglManager() 
+{ 
+	WebglManager.self = this;
+
+	this.m_document = null;
+	this.m_canvasEx = null;
+
+    this.m_cx = 0;
+    this.m_cy = 0;
+
+    this.m_scene = null;
+    this.m_cube = null;
+    this.m_camera = null;
+    this.m_renderer = null;
+}
+
+// Redefinition of window.requestAnimFrame to apply fallback with setTimeout;
+WebglManager.prototype.init = function (_document, _canvasEx)
+{
+	this.m_document = _document;
+	this.m_canvasEx = _canvasEx;
+
+    var cvnW = this.m_canvasEx.m_canvasWidth;
+    var cvnH = this.m_canvasEx.m_canvasHeight;
+
+    // Create an empty scene
+    this.m_scene = new THREE.Scene();
+
+    // Create a basic perspective camera
+    this.m_camera = new THREE.PerspectiveCamera( 75, cvnW/cvnH, 0.1, 1000 );
+    this.m_camera.position.z = 4;
+
+    // Create a renderer with Antialiasing
+    this.m_renderer = new THREE.WebGLRenderer({antialias:true});
+
+    // Configure renderer clear color
+    this.m_renderer.setClearColor("#000000");
+
+    // Configure renderer size
+    this.m_renderer.setSize( cvnW, cvnH);
+
+    // Append Renderer to DOM
+    this.m_document.body.appendChild(this.m_renderer.domElement);
+
+    this.m_canvasEx.setWebgl(this);
+    this.m_canvasEx.updateWebglPosAndSize();
+}