x_ite 4.0.5 → 4.7.5

package/src/x_ite/Browser/Layout/ScreenText.js

@@ -52,10 +52,9 @@ define ([
 	"x_ite/Browser/Text/X3DTextGeometry",
 	"x_ite/Browser/Text/TextAlignment",
 	"x_ite/Components/Texturing/PixelTexture",
-	"x_ite/Bits/TraverseType",
-	"standard/Math/Numbers/Vector2",
+	"x_ite/Components/Rendering/X3DGeometryNode",
 	"standard/Math/Numbers/Vector3",
-	"standard/Math/Numbers/Rotation4",
+	"standard/Math/Numbers/Vector4",
 	"standard/Math/Numbers/Matrix4",
 	"standard/Math/Geometry/Box3",
 	"standard/Math/Geometry/ViewVolume",
@@ -65,10 +64,9 @@ function ($,
           X3DTextGeometry,
           TextAlignment,
           PixelTexture,
-          TraverseType,
-          Vector2,
+          X3DGeometryNode,
           Vector3,
-          Rotation4,
+          Vector4,
           Matrix4,
           Box3,
           ViewVolume,
@@ -76,392 +74,386 @@ function ($,
 {
 "use strict";
 
-	var
-		paths       = [ ],
-		min         = new Vector3 (0, 0, 0),
-		max         = new Vector3 (1, 1, 0),
-		translation = new Vector3 (0, 0, 0),
-		rotation    = new Rotation4 (0, 0, 1, 0),
-		scale       = new Vector3 (1, 1, 1),
-		screenPoint = new Vector3 (0, 0, 0),
-		bbox        = new Box3 ();
-
 	function ScreenText (text, fontStyle)
 	{
 		X3DTextGeometry .call (this, text, fontStyle);
 
-		text .transparent_ = true;
+		text .setTransparent (true);
 
-		this .texCoords    = [ ];
-		this .texture      = new PixelTexture (text .getExecutionContext ());
-		this .canvas       = $("<canvas></canvas>");
-		this .context      = this .canvas [0] .getContext ("2d");
-		this .screenMatrix = new Matrix4 ();
-		this .matrix       = new Matrix4 ();
+		this .texCoordArray = X3DGeometryNode .createArray ();
+		this .textureNode   = new PixelTexture (text .getExecutionContext ());
+		this .canvas        = $("<canvas></canvas>");
+		this .context       = this .canvas [0] .getContext ("2d");
+		this .matrix        = new Matrix4 ();
 
-		this .texture .textureProperties_ = fontStyle .getBrowser () .getScreenTextureProperties ();
-		this .texture .setup ();
+		this .textureNode .textureProperties_ = fontStyle .getBrowser () .getScreenTextureProperties ();
+		this .textureNode .setup ();
 	}
 
-	ScreenText .prototype = $.extend (Object .create (X3DTextGeometry .prototype),
+	ScreenText .prototype = Object .assign (Object .create (X3DTextGeometry .prototype),
 	{
 		constructor: ScreenText,
 		modelViewMatrix: new Matrix4 (),
+		getTransparent: function ()
+		{
+			return true;
+		},
 		getMatrix: function ()
 		{
 			return this .matrix;
 		},
-		update: function ()
+		update: (function ()
 		{
-			X3DTextGeometry .prototype .update .call (this);
-	
 			var
-				fontStyle = this .getFontStyle (),
-				text      = this .getText (),
-				offset    = 1; // For antialiasing border on bottom and right side
+				min = new Vector3 (0, 0, 0),
+				max = new Vector3 (1, 1, 0);
 
-			text .textBounds_ .x = Math .ceil (text .textBounds_ .x) + offset;
-			text .textBounds_ .y = Math .ceil (text .textBounds_ .y) + offset;
+			return function ()
+			{
+				X3DTextGeometry .prototype .update .call (this);
 
-			this .getBBox () .getExtents (min, max);
+				var
+					fontStyle = this .getFontStyle (),
+					text      = this .getText (),
+					offset    = 1; // For antialiasing border on bottom and right side
 
-			min .x -= offset;
-			min .y -= offset;
+				text .textBounds_ .x = Math .ceil (text .textBounds_ .x) + offset;
+				text .textBounds_ .y = Math .ceil (text .textBounds_ .y) + offset;
 
-			switch (fontStyle .getMajorAlignment ())
-			{
-				case TextAlignment .BEGIN:
-				case TextAlignment .FIRST:
-					min .x = Math .floor (min .x);
-					max .x = min .x + text .textBounds_ .x;
-					break;
-				case TextAlignment .MIDDLE:
-					min .x = Math .round (min .x);
-					max .x = min .x + text .textBounds_ .x;
-					break;
-				case TextAlignment .END:
-					max .x = Math .ceil (max .x);
-					min .x = max .x - text .textBounds_ .x;
-					break;
-			}
+				this .getBBox () .getExtents (min, max);
 
-			switch (fontStyle .getMinorAlignment ())
-			{
-				case TextAlignment .BEGIN:
-				case TextAlignment .FIRST:
-					max .y = Math .ceil (max .y);
-					min .y = max .y - text .textBounds_ .y;
-					break;
-				case TextAlignment .MIDDLE:
-					max .y = Math .round (max .y);
-					min .y = max .y - text .textBounds_ .y;
-					break;
-				case TextAlignment .END:
-					min .y = Math .floor (min .y);
-					max .y = min .y + text .textBounds_ .y;
-					break;
-			}
+				min .x -= offset;
+				min .y -= offset;
 
-			text .origin_ .x = min .x;
-			text .origin_ .y = max .y;
+				switch (fontStyle .getMajorAlignment ())
+				{
+					case TextAlignment .BEGIN:
+					case TextAlignment .FIRST:
+						min .x = Math .floor (min .x);
+						max .x = min .x + text .textBounds_ .x;
+						break;
+					case TextAlignment .MIDDLE:
+						min .x = Math .round (min .x);
+						max .x = min .x + text .textBounds_ .x;
+						break;
+					case TextAlignment .END:
+						max .x = Math .ceil (max .x);
+						min .x = max .x - text .textBounds_ .x;
+						break;
+				}
 
-			this .getBBox () .setExtents (min, max);
-		},
-		build: function ()
+				switch (fontStyle .getMinorAlignment ())
+				{
+					case TextAlignment .BEGIN:
+					case TextAlignment .FIRST:
+						max .y = Math .ceil (max .y);
+						min .y = max .y - text .textBounds_ .y;
+						break;
+					case TextAlignment .MIDDLE:
+						max .y = Math .round (max .y);
+						min .y = max .y - text .textBounds_ .y;
+						break;
+					case TextAlignment .END:
+						min .y = Math .floor (min .y);
+						max .y = min .y + text .textBounds_ .y;
+						break;
+				}
+
+				text .origin_ .x = min .x;
+				text .origin_ .y = max .y;
+
+				this .getBBox () .setExtents (min, max);
+			};
+		})(),
+		build: (function ()
 		{
 			var
-				fontStyle = this .getFontStyle (),
-				font      = fontStyle .getFont ();
+				min = new Vector3 (0, 0, 0),
+				max = new Vector3 (1, 1, 0);
 
-			if (! font)
-				return;
+			return function ()
+			{
+				var
+					fontStyle = this .getFontStyle (),
+					font      = fontStyle .getFont ();
 
-			var
-				text           = this .getText (),
-				glyphs         = this .getGlyphs (),
-				minorAlignment = this .getMinorAlignment (),
-				translations   = this .getTranslations (),
-				charSpacings   = this .getCharSpacings (),
-				size           = fontStyle .getScale (), // in pixel
-				sizeUnitsPerEm = size / font .unitsPerEm,
-				texCoords      = this .texCoords,
-				normals        = text .getNormals (),
-				vertices       = text .getVertices (),
-				canvas         = this .canvas [0],
-				cx             = this .context;
-
-			texCoords .length = 0;
-			text .getTexCoords () .push (texCoords);
-
-			// Triangle one and two.
-
-			this .getBBox () .getExtents (min, max);
-
-			normals  .push (0, 0, 1,
-			                0, 0, 1,
-			                0, 0, 1,
-			                0, 0, 1,
-			                0, 0, 1,
-			                0, 0, 1);
-
-			vertices .push (min .x, min .y, 0, 1,
-			                max .x, min .y, 0, 1,
-			                max .x, max .y, 0, 1,
-			                min .x, min .y, 0, 1,
-			                max .x, max .y, 0, 1,
-			                min .x, max .y, 0, 1);
-
-			// Generate texture.
+				if (! font)
+					return;
 
-			var
-			   width  = text .textBounds_ .x,
-			   height = text .textBounds_ .y;
+				var
+					text           = this .getText (),
+					glyphs         = this .getGlyphs (),
+					minorAlignment = this .getMinorAlignment (),
+					translations   = this .getTranslations (),
+					charSpacings   = this .getCharSpacings (),
+					size           = fontStyle .getScale (), // in pixel
+					sizeUnitsPerEm = size / font .unitsPerEm,
+					texCoordArray  = this .texCoordArray,
+					normalArray    = text .getNormals (),
+					vertexArray    = text .getVertices (),
+					canvas         = this .canvas [0],
+					cx             = this .context;
+
+				// Set texCoord.
+
+				texCoordArray .length = 0;
+
+				text .getMultiTexCoords () .push (texCoordArray);
+
+				// Triangle one and two.
+
+				this .getBBox () .getExtents (min, max);
+
+				normalArray  .push (0, 0, 1,
+				                    0, 0, 1,
+				                    0, 0, 1,
+				                    0, 0, 1,
+				                    0, 0, 1,
+				                    0, 0, 1);
+
+				vertexArray .push (min .x, min .y, 0, 1,
+				                   max .x, min .y, 0, 1,
+				                   max .x, max .y, 0, 1,
+				                   min .x, min .y, 0, 1,
+				                   max .x, max .y, 0, 1,
+				                   min .x, max .y, 0, 1);
+
+				// Generate texture.
+
+				var
+				   width  = text .textBounds_ .x,
+				   height = text .textBounds_ .y;
+
+				// Scale canvas.
 
-			// Scale canvas.
-	
-			if (! Algorithm .isPowerOfTwo (width) || ! Algorithm .isPowerOfTwo (height))
-			{
 				canvas .width  = Algorithm .nextPowerOfTwo (width),
 				canvas .height = Algorithm .nextPowerOfTwo (height);
-			}
-			else
-			{
-				canvas .width  = width;
-				canvas .height = height;
-			}
 
-			var
-			   w = width  / canvas .width,
-			   h = height / canvas .height,
-			   y = 1 - h;
+				var
+				   w = width  / canvas .width,
+				   h = height / canvas .height,
+				   y = 1 - h;
 
-			texCoords .push (0, y, 0, 1,
-			                 w, y, 0, 1,
-			                 w, 1, 0, 1,
-			                 0, y, 0, 1,
-			                 w, 1, 0, 1,
-			                 0, 1, 0, 1);
+				texCoordArray .push (0, y, 0, 1,
+				                     w, y, 0, 1,
+				                     w, 1, 0, 1,
+				                     0, y, 0, 1,
+				                     w, 1, 0, 1,
+				                     0, 1, 0, 1);
 
-			// Setup canvas.
+				// Setup canvas.
 
-			cx .fillStyle = "rgba(255,255,255,0)";
-			cx .fillRect (0, 0, canvas .width, canvas .height);
-			cx .fillStyle = "rgba(255,255,255,1)";
+				cx .fillStyle = "rgba(255,255,255,0)";
+				cx .fillRect (0, 0, canvas .width, canvas .height);
+				cx .fillStyle = "rgba(255,255,255,1)";
 
-			// Draw glyphs.
+				// Draw glyphs.
 
-			if (fontStyle .horizontal_ .getValue ())
-			{
-				for (var l = 0, length = glyphs .length; l < length; ++ l)
+				if (fontStyle .horizontal_ .getValue ())
 				{
-					var
-						line         = glyphs [l],
-						charSpacing  = charSpacings [l],
-						translation  = translations [l],
-						advanceWidth = 0;
-
-					for (var g = 0, gl = line .length; g < gl; ++ g)
+					for (var l = 0, length = glyphs .length; l < length; ++ l)
 					{
 						var
-							glyph = line [g],
-							x     = minorAlignment .x + translation .x + advanceWidth + g * charSpacing - min .x,
-							y     = minorAlignment .y + translation .y - max .y;
-
-						this .drawGlyph (cx, font, glyph, x, y, size);
-
-						// Calculate advanceWidth.
-		
-						var kerning = 0;
-		
-						if (g + 1 < line .length)
-							kerning = font .getKerningValue (glyph, line [g + 1]);
-		
-						advanceWidth += (glyph .advanceWidth + kerning) * sizeUnitsPerEm;
+							line         = glyphs [l],
+							charSpacing  = charSpacings [l],
+							translation  = translations [l],
+							advanceWidth = 0;
+
+						for (var g = 0, gl = line .length; g < gl; ++ g)
+						{
+							var
+								glyph = line [g],
+								x     = minorAlignment .x + translation .x + advanceWidth + g * charSpacing - min .x,
+								y     = minorAlignment .y + translation .y - max .y;
+
+							this .drawGlyph (cx, font, glyph, x, y, size);
+
+							// Calculate advanceWidth.
+
+							var kerning = 0;
+
+							if (g + 1 < line .length)
+								kerning = font .getKerningValue (glyph, line [g + 1]);
+
+							advanceWidth += (glyph .advanceWidth + kerning) * sizeUnitsPerEm;
+						}
 					}
 				}
-			}
-			else
-			{
-				var
-					leftToRight = fontStyle .leftToRight_ .getValue (),
-					topToBottom = fontStyle .topToBottom_ .getValue (),
-					first       = leftToRight ? 0 : text .string_ .length - 1,
-					last        = leftToRight ? text .string_ .length  : -1,
-					step        = leftToRight ? 1 : -1;
-
-				for (var l = first, t = 0; l !== last; l += step)
+				else
 				{
-					var line = glyphs [l];
-
 					var
-					   numChars = line .length,
-						firstG   = topToBottom ? 0 : numChars - 1,
-						lastG    = topToBottom ? numChars : -1,
-						stepG    = topToBottom ? 1 : -1;
+						leftToRight = fontStyle .leftToRight_ .getValue (),
+						topToBottom = fontStyle .topToBottom_ .getValue (),
+						first       = leftToRight ? 0 : text .string_ .length - 1,
+						last        = leftToRight ? text .string_ .length  : -1,
+						step        = leftToRight ? 1 : -1;
 
-					for (var g = firstG; g !== lastG; g += stepG, ++ t)
+					for (var l = first, t = 0; l !== last; l += step)
 					{
-						var translation = translations [t];
+						var line = glyphs [l];
 
-							var
-								x = minorAlignment .x + translation .x - min .x,
-								y = minorAlignment .y + translation .y - max .y;
+						var
+						   numChars = line .length,
+							firstG   = topToBottom ? 0 : numChars - 1,
+							lastG    = topToBottom ? numChars : -1,
+							stepG    = topToBottom ? 1 : -1;
+
+						for (var g = firstG; g !== lastG; g += stepG, ++ t)
+						{
+							var translation = translations [t];
+
+								var
+									x = minorAlignment .x + translation .x - min .x,
+									y = minorAlignment .y + translation .y - max .y;
 
-						this .drawGlyph (cx, font, line [g], x, y, size);
+							this .drawGlyph (cx, font, line [g], x, y, size);
+						}
 					}
 				}
-			}
 
-			// Transfer texture data.
+				// Transfer texture data.
 
-			var imageData = cx .getImageData (0, 0, canvas .width, canvas .height);
+				var imageData = cx .getImageData (0, 0, canvas .width, canvas .height);
 
-			// If the cavas is to large imageData is null.
-			if (imageData)
-				this .texture .setTexture (canvas .width, canvas .height, true, new Uint8Array (imageData .data), true);
-			else
-			   this .texture .clear ();
-		},
+				// If the cavas is to large imageData is null.
+				if (imageData)
+					this .textureNode .setTexture (canvas .width, canvas .height, true, new Uint8Array (imageData .data), true);
+				else
+				   this .textureNode .clear ();
+			};
+		})(),
 		drawGlyph: function (cx, font, glyph, x, y, size)
 		{
 		   //console .log (glyph .name, x, y);
 
-			var components = glyph .components;
-
-			paths  .length = 0;
-		
-			if (glyph .isComposite)
-			{
-				for (var c = 0, cl = components .length; c < cl; ++ c)
-				{
-					var component = components [c];
+			// Get curves for the current glyph.
 
-					paths .push (glyph .getPath (component .dx / font .unitsPerEm * size + x,
-					                             component .dy / font .unitsPerEm * size - y,
-					                             size));
-				}
-			}
-			else
-				paths .push (glyph .getPath (x, -y, size));
+			var
+				path     = glyph .getPath (x, -y, size),
+				commands = path .commands;
 
-			// Get curves for the current glyph.
+			cx .beginPath ();
 
-			for (var p = 0, pl = paths .length; p < pl; ++ p)
+			for (var i = 0, cl = commands .length; i < cl; ++ i)
 			{
-				var
-				   path     = paths [p],
-					commands = path .commands;
-
-				cx .beginPath ();
+				var command = commands [i];
 
-				for (var i = 0, cl = commands .length; i < cl; ++ i)
+				switch (command .type)
 				{
-					var command = commands [i];
-
-					switch (command .type)
+					case "M": // Start
 					{
-						case "M": // Start
-						{
-							cx .moveTo (command .x, command .y);
-							continue;
-						}
-						case "Z": // End
-						{
-						   cx .closePath ();
-							continue;
-						}
-						case "L": // Linear
-						{
-							cx .lineTo (command .x, command .y);
-							continue;
-						}
-						case "C": // Bezier
-						{
-							cx .bezierCurveTo (command .x1, command .y1, command .x2, command .y2, command .x, command .y);
-							continue;
-						}
-						case "Q": // Cubíc
-						{
-						   cx .quadraticCurveTo (command .x1, command .y1, command .x, command .y);
-							continue;
-						}
+						cx .moveTo (command .x, command .y);
+						continue;
+					}
+					case "Z": // End
+					{
+					   cx .closePath ();
+						continue;
+					}
+					case "L": // Linear
+					{
+						cx .lineTo (command .x, command .y);
+						continue;
+					}
+					case "Q": // Cubic
+					{
+					   cx .quadraticCurveTo (command .x1, command .y1, command .x, command .y);
+						continue;
+					}
+					case "C": // Bezier
+					{
+						cx .bezierCurveTo (command .x1, command .y1, command .x2, command .y2, command .x, command .y);
+						continue;
 					}
 				}
+			}
 
-				if (path .fill)
-					cx .fill ();
-	
-				if (path .stroke)
-				{
-					cx .lineWidth = path .strokeWidth;
-					cx .stroke ();
-				}
+			if (path .fill)
+				cx .fill ();
+
+			if (path .stroke)
+			{
+				cx .lineWidth = path .strokeWidth;
+				cx .stroke ();
 			}
 		},
-		getGlyphExtents: function (glyph, primitiveQuality, min, max)
+		getGlyphExtents: function (font, glyph, primitiveQuality, min, max)
 		{
-			var
-				fontStyle  = this .getFontStyle (),
-				font       = fontStyle .getFont (),
-				unitsPerEm = font .unitsPerEm;
+			var unitsPerEm = font .unitsPerEm;
 
 			min .set ((glyph .xMin || 0) / unitsPerEm, (glyph .yMin || 0) / unitsPerEm, 0);
 			max .set ((glyph .xMax || 0) / unitsPerEm, (glyph .yMax || 0) / unitsPerEm, 0);
 		},
-		transform: function (renderObject)
+		transform: (function ()
 		{
-			// throws an exception
-
 			var
-				text             = this .getText (),
-				projectionMatrix = renderObject .getProjectionMatrix () .get (),
-				modelViewMatrix  = renderObject .getModelViewMatrix () .get (),
-				viewport         = renderObject .getViewVolume () .getViewport (),
-				screenMatrix     = this .screenMatrix;
+				x            = new Vector4 (0, 0, 0, 0),
+				y            = new Vector4 (0, 0, 0, 0),
+				z            = new Vector4 (0, 0, 0, 0),
+				screenPoint  = new Vector3 (0, 0, 0),
+				screenMatrix = new Matrix4 (),
+				bbox         = new Box3 ();
+
+			return function (renderObject)
+			{
+				// throws an exception
 
-			// Same as in ScreenGroup.
+				var
+					text             = this .getText (),
+					modelViewMatrix  = renderObject .getModelViewMatrix () .get (),
+					projectionMatrix = renderObject .getProjectionMatrix () .get (),
+					viewport         = renderObject .getViewVolume () .getViewport ();
 
-			screenMatrix .assign (modelViewMatrix);
-			screenMatrix .get (translation, rotation, scale);
+				// Determine screenMatrix.
+				// Same as in ScreenGroup.
 
-			var screenScale = renderObject .getViewpoint () .getScreenScale (translation, viewport); // in meter/pixel
+				var screenScale = renderObject .getViewpoint () .getScreenScale (modelViewMatrix .origin, viewport); // in meter/pixel
 
-			screenMatrix .set (translation, rotation, scale .set (screenScale .x * (Algorithm .signum (scale .x) < 0 ? -1 : 1),
-		                                                         screenScale .y * (Algorithm .signum (scale .y) < 0 ? -1 : 1),
-		                                                         screenScale .z * (Algorithm .signum (scale .z) < 0 ? -1 : 1)));
+				x .set (modelViewMatrix [ 0], modelViewMatrix [ 1], modelViewMatrix [ 2], modelViewMatrix [ 3]);
+				y .set (modelViewMatrix [ 4], modelViewMatrix [ 5], modelViewMatrix [ 6], modelViewMatrix [ 7]);
+				z .set (modelViewMatrix [ 8], modelViewMatrix [ 9], modelViewMatrix [10], modelViewMatrix [11]);
 
-			// Snap to whole pixel.
+				x .normalize () .multiply (screenScale .x);
+				y .normalize () .multiply (screenScale .y);
+				z .normalize () .multiply (screenScale .z);
 
-			ViewVolume .projectPoint (Vector3 .Zero, screenMatrix, projectionMatrix, viewport, screenPoint);
+				screenMatrix .set (x .x, x .y, x .z, x .w,
+				                   y .x, y .y, y .z, y .w,
+				                   z .x, z .y, z .z, z .w,
+				                   modelViewMatrix [12], modelViewMatrix [13], modelViewMatrix [14], modelViewMatrix [15]);
 
-			screenPoint .x = Math .round (screenPoint .x);
-			screenPoint .y = Math .round (screenPoint .y);
+				// Snap to whole pixel.
 
-			ViewVolume .unProjectPoint (screenPoint .x, screenPoint .y, screenPoint .z, screenMatrix, projectionMatrix, viewport, screenPoint);
+				ViewVolume .projectPoint (Vector3 .Zero, screenMatrix, projectionMatrix, viewport, screenPoint);
 
-			screenPoint .z = 0;
-			screenMatrix .translate (screenPoint);
+				screenPoint .x = Math .round (screenPoint .x);
+				screenPoint .y = Math .round (screenPoint .y);
 
-			// Assign modelViewMatrix and calculate relative matrix.
+				ViewVolume .unProjectPoint (screenPoint .x, screenPoint .y, screenPoint .z, screenMatrix, projectionMatrix, viewport, screenPoint);
 
-			this .matrix .assign (modelViewMatrix) .inverse () .multLeft (screenMatrix);
-				
-			// Update Text bbox.
+				screenPoint .z = 0;
+				screenMatrix .translate (screenPoint);
 
-			bbox .assign (this .getBBox ()) .multRight (this .matrix);
+				// Assign modelViewMatrix and calculate relative matrix.
 
-			text .setBBox (bbox);
-		},
+				this .matrix .assign (modelViewMatrix) .inverse () .multLeft (screenMatrix);
+
+				// Update Text bbox.
+
+				bbox .assign (this .getBBox ()) .multRight (this .matrix);
+
+				text .setBBox (bbox);
+			};
+		})(),
 		traverse: function (type, renderObject)
 		{
 			this .transform (renderObject);
 		},
-		display: function (context)
+		display: function (gl, context)
 		{
 			Matrix4 .prototype .multLeft .call (context .modelViewMatrix, this .matrix);
 
-		   context .textureNode          = this .texture;
-		   context .textureTransformNode = this .getBrowser () .getDefaultTextureTransform ();
+		   context .textureNode = this .textureNode;
 		},
 		transformLine: function (line)
 		{