Modified scripting engine framework:

- Beginnings of Bitmap support - Fixed some bugs with the (soon to be re-written in TypeScript Host.js) - Removed unused 3D tests
jabbany · Apr 25, 2017 · 71afc6f · 71afc6f
1 parent d3e62de
commit 71afc6f
Show file tree

Hide file tree

Showing 21 changed files with 28,988 additions and 440 deletions.
diff --git a/demo/scripting/ccl.htm b/demo/scripting/ccl.htm
@@ -39,7 +39,7 @@
 	<div class="controls">
 		<a class="button" onclick="stop();" href="javascript:;">Stop</a>
 		<a class="button" onclick="resume();" href="javascript:;">Resume</a>
-		<a class="button" onclick="resize();" href="javascript:;">Resize</a>
+		<a class="button" onclick="cmresize();" href="javascript:;">Resize</a>
 		<div style="clear:both;"></div>
 	</div>
 	<div style="clear:both;"></div>
@@ -52,7 +52,9 @@ <h2>Tests</h2>
 		<a class="button" onclick="load('../../test/scripting/comment-festival-v3.xml');" href="javascript:;">Run Scripting 3 (Large) [Comment Festival v3]</a>
 		<a class="button" onclick="load('../../test/scripting/jinzou-enemy.xml');" href="javascript:;">Run Scripting 4 (drawPath) [Jinzou Enemy]</a>
 		<a class="button" onclick="load('../../test/scripting/crazy-night.xml');" href="javascript:;">Run Scripting 5 (textures &amp; 3d) [Crazy Night]</a>
-		<a class="button" onclick="load('../../test/scripting/round-and-round.xml');" href="javascript:;">Run Scripting 6 (Akari engine) [Round and Round]</a>
+		<a class="button" onclick="load('../../test/scripting/av2775802.xml');" href="javascript:;">Run Scripting 6 (Complex) [World's End Dance Hall]</a>
+		<a class="button" onclick="load('../../test/scripting/round-and-round.xml');" href="javascript:;">Run Scripting 7 (Akari engine) [Round and Round]</a>
+		<a class="button" onclick="load('../../test/scripting/av2739681.xml');" href="javascript:;">Run Scripting 8 (Akari engine) [Vidro Moyou]</a>
 		<div style="clear:both;"></div>
 	</div>
 </div>	
@@ -153,13 +155,10 @@ <h2>Tests</h2>
 function timeupdate(){
 	playhead = Date.now() - start;
 	cm.time(playhead);
-	if(cm.scripting && playhead - lasthead > 300 ){
-		cm.scripting.send("Update:TimeUpdate",{
-			"state": "playing",
-			"time": playhead
-		});
-		lasthead = playhead;
-	}
+	cm.scripting.send("Update:TimeUpdate", {
+		"state": "playing",
+		"time": playhead
+	});
 }
 
 function load(dmf,dmfmd){
@@ -222,7 +221,7 @@ <h2>Tests</h2>
 	lasthead = playhead;
 	tmr = setInterval(timeupdate,42);
 }
-function resize() {
+function cmresize() {
     if (cm.large) {
         cm.large = false;
         $('player').style.height = '384px';

diff --git a/dist/scripting/Host.js b/dist/scripting/Host.js
@@ -522,15 +522,18 @@ var CCLScripting = function(workerUrl){
 			return elem;
 		};
 
+		var globalDefs = __('defs');
 		var defaultEffects = __("defs");
 		var defaultGroup =  __("g",{
 		});
 		var defaultContainer = __("g",{
 			"transform":"translate(" + this._x + "," + this._y + ")",
 			"opacity":this._alpha,
 		});
+
 		defaultContainer.appendChild(defaultGroup);
 		var defaultGroupWithEffects = defaultContainer;
+		this.DOM.appendChild(globalDefs);
 		this.DOM.appendChild(defaultEffects);
 		this.DOM.appendChild(defaultGroupWithEffects);
 		/** PROPS **/
@@ -549,6 +552,13 @@ var CCLScripting = function(workerUrl){
 		this.__defineSetter__("alpha", function(f){
 			this.setAlpha(f);
 		});
+		this.__defineSetter__("blendMode", function(f){
+			this.DOM.style.backgroundBlendMode = f;
+			this.DOM.style.mixBlendMode = f;
+		});
+		this.__defineGetter__("blendMode", function(f){
+			return '';
+		});
 		this.__defineGetter__("x", function(f){
 			return this._x;
 		});
@@ -772,6 +782,31 @@ var CCLScripting = function(workerUrl){
 				this.fill.alpha = params[1];
 			}
 		};
+		this.beginGradientFill = function(params) {
+		    if(params.length === 0) {
+		        return;
+		    }
+		    var gradId = 'gradient-' + params[0] + '-' + globalDefs.childNodes.length;
+		    var grad;
+		    if (params[0] === 'linear') {
+		        grad = __('linearGradient', {'id': gradId, 'spreadMethod': params[5]});
+		    } else {
+		        grad = __('radialGradient', {'id': gradId, 'spreadMethod': params[5]});
+		    }
+		    // Figure out all the stops
+		    var colors = params[1];
+		    var alphas = params[2];
+		    var ratios = params[3];
+		    for (var i = 0; i < ratios.length; i++) {
+		        grad.appendChild(__('stop', {
+		            'offset': ratios[i] / 255,
+		            'stop-color': toRGB(colors[i]),
+		            'stop-opacity': alphas[i]
+		        }));
+		    }
+		    globalDefs.appendChild(grad);
+		    this.fill.fill = 'url(#' + gradId + ')';
+		};
 		this.endFill = function(params){
 			this.fill.fill = "none";
 		};
@@ -807,7 +842,7 @@ var CCLScripting = function(workerUrl){
 			});
 			applyFill(r, this);
 			applyStroke(r, this);
-			this.DOM.appendChild(r);
+			defaultGroup.appendChild(r);
 		};
 		this.drawCircle = function(params){
 			var c = __("circle",{
@@ -889,10 +924,10 @@ var CCLScripting = function(workerUrl){
 				var filter = filters[i];
 				var dFilter = __("filter",{
 					"id":"fe" + filter.type + i,
-					"x":"-100%",
-					"y":"-100%",
-					"width":"400%",
-					"height":"400%"
+					"x":"-50%",
+					"y":"-50%",
+					"width":"200%",
+					"height":"200%"
 				});
 				switch(filter.type){
 					default:break;
@@ -992,6 +1027,13 @@ var CCLScripting = function(workerUrl){
 		this.__defineSetter__("y", function(f){
 			this.setY(f);
 		});
+		this.__defineSetter__("blendMode", function(f){
+			this.DOM.style.backgroundBlendMode = f;
+			this.DOM.style.mixBlendMode = f;
+		});
+		this.__defineGetter__("blendMode", function(f){
+			return '';
+		});
 		this.__defineGetter__("x", function(f){
 			return this.DOM.offsetLeft;
 		});
@@ -1072,10 +1114,10 @@ var CCLScripting = function(workerUrl){
 				return;
 			if(child.DOM){
 				if(child.getClass() === "Shape"){
-					child.DOM.style.left = -this.x + "px";
-					child.DOM.style.top = -this.y + "px";
-					child.setX(this.x);
-					child.setY(this.y);
+					var tX = (stage.offsetWidth / 2), tY = (stage.offsetHeight / 2);
+					child.offset(tX, tY);
+					child.DOM.style.left = -tX+ "px";
+					child.DOM.style.top = -tY+ "px";
 				}
 				this.DOM.appendChild(child.DOM);
 			}else{