Skip to content

Commit 441629d

Browse files
jabbanyjabbany
committed
SVG Support working
1 parent 041a223 commit 441629d

File tree

5 files changed

+367
-37
lines changed

5 files changed

+367
-37
lines changed

‎src/scripting/Host.js‎

Lines changed: 269 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ var CCLScripting = function(workerUrl){
3535
this.registerObject = function(objectId, serialized){
3636
if(typeof this.Unpack[serialized["class"]] === "function"){
3737
objects[objectId] = new this.Unpack[serialized["class"]](stage,
38-
serialized);
38+
serialized, this);
3939
}else{
4040
scripter.logger.error("Cannot unpack class \"" +
4141
serialized["class"] + "\". No valid unpacker found");
@@ -72,6 +72,15 @@ var CCLScripting = function(workerUrl){
7272
this.clear = function(){
7373

7474
};
75+
76+
this.getDimensions = function(){
77+
return {
78+
"stageWidth":stage.offsetWidth,
79+
"stageHeight":stage.offsetHeight,
80+
"screenWidth":window.screen.width,
81+
"screenHeight":window.screen.height
82+
};
83+
};
7584
};
7685

7786
CCLScripting.prototype.ScriptingContext.prototype.Unpack = {};
@@ -117,13 +126,9 @@ var CCLScripting = function(workerUrl){
117126
};
118127

119128
var dispatchMessage = function(msg){
120-
if(channels[msg.channel]){
129+
if(channels[msg.channel] && channels[msg.channel].listeners){
121130
for(var i = 0; i < channels[msg.channel].listeners.length; i++){
122-
try{
123-
channels[msg.channel].listeners[i](msg.payload);
124-
}catch(e){
125-
scripter.logger.error(e);
126-
}
131+
channels[msg.channel].listeners[i](msg.payload);
127132
}
128133
}else{
129134
scripter.logger.warn("Message for channel \"" + msg.channel +
@@ -216,6 +221,9 @@ var CCLScripting = function(workerUrl){
216221
};
217222
CCLScripting.prototype.BridgedSandbox.prototype.init = function(){
218223
var self = this;
224+
/** Post whatever we need to **/
225+
self.send("Update:dimension", self.getContext().getDimensions());
226+
/** Hook Listeners **/
219227
this.addListener("Runtime::alert", function(msg){
220228
alert(msg);
221229
});
@@ -245,17 +253,58 @@ var CCLScripting = function(workerUrl){
245253
this.addListener("Runtime:DeregisterObject", function(pl){
246254
self.getContext().deregisterObject(pl.id);
247255
});
248-
this.addListener("Runtime:InvokeMethod", function(pl){
256+
this.addListener("Runtime:CallMethod", function(pl){
249257
self.getContext().callMethod(pl.id, pl.method, pl.params);
250258
});
251259
};
252-
253-
// Define some unpackers
260+
/** This is the DOM Manipulation Library **/
261+
var _ = function (type, props, children, callback) {
262+
var elem = null;
263+
if (type === "text") {
264+
return document.createTextNode(props);
265+
} else if(type === "svg"){
266+
elem = document.createElementNS("http://www.w3.org/2000/svg", "svg");
267+
}else {
268+
elem = document.createElement(type);
269+
}
270+
for(var n in props){
271+
if(n !== "style" && n !== "className"){
272+
elem.setAttribute(n, props[n]);
273+
}else if(n === "className"){
274+
elem.className = props[n];
275+
}else{
276+
for(var x in props.style){
277+
elem.style[x] = props.style[x];
278+
}
279+
}
280+
}
281+
if (children) {
282+
for(var i = 0; i < children.length; i++){
283+
if(children[i] != null)
284+
elem.appendChild(children[i]);
285+
}
286+
}
287+
if (callback && typeof callback === "function") {
288+
callback(elem);
289+
}
290+
return elem;
291+
};
292+
/** Define some unpackers **/
254293
var ScriptingContext = CCLScripting.prototype.ScriptingContext;
255-
ScriptingContext.prototype.Unpack.Comment = function(stage, data){
256-
this.DOM = document.createElement("div");
257-
294+
ScriptingContext.prototype.Unpack.Comment = function(stage, data, ctx){
295+
this.DOM = _("div",{});
296+
/** Load the text format **/
258297
this.DOM.appendChild(document.createTextNode(data.text));
298+
this.DOM.style.fontFamily = data.textFormat.font;
299+
this.DOM.style.fontSize = data.textFormat.size + "px";
300+
this.DOM.style.color = "#" + data.textFormat.color.toString(16);
301+
if(data.textFormat.bold)
302+
this.DOM.style.fontWeight = "bold";
303+
if(data.textFormat.underline)
304+
this.DOM.style.textDecoration = "underline";
305+
if(data.textFormat.italic)
306+
this.DOM.style.fontStyle = "italic";
307+
this.DOM.style.margin = data.textFormat.margin;
259308

260309
this.setFilters = function(params){
261310
for(var i = 0; i < params[0].length; i++){
@@ -278,4 +327,211 @@ var CCLScripting = function(workerUrl){
278327
// Hook child
279328
stage.appendChild(this.DOM);
280329
};
330+
331+
ScriptingContext.prototype.Unpack.Shape = function(stage, data, ctx){
332+
this.DOM = _("svg",{
333+
"width":stage.offsetWidth,
334+
"height":stage.offsetHeight,
335+
"style":{
336+
"position":"absolute",
337+
"top": (data.y ? data.y : 0) + "px",
338+
"left":(data.x ? data.x : 0) + "px"
339+
}});
340+
// Helpers
341+
var __ = function(e, attr){
342+
if(typeof e === "string"){
343+
var elem =
344+
document.createElementNS("http://www.w3.org/2000/svg",e);
345+
}else{
346+
var elem = e;
347+
}
348+
if(attr){
349+
for(var x in attr){
350+
elem.setAttribute(x, attr[x]);
351+
}
352+
}
353+
return elem;
354+
};
355+
356+
this.line = {
357+
width:1,
358+
color:"#FFFFFF",
359+
alpha:1
360+
};
361+
this.fill = {
362+
fill:"none",
363+
alpha:1
364+
};
365+
366+
var applyStroke = function(p, ref){
367+
__(p, {
368+
"stroke": ref.line.color,
369+
"stroke-width": ref.line.width,
370+
"stroke-opacity": ref.line.alpha
371+
});
372+
if(ref.line.caps){
373+
p.setAttribute("stroke-linecap", ref.line.caps);
374+
}
375+
if(ref.line.joints){
376+
p.setAttribute("stroke-linejoin", ref.line.joints);
377+
}
378+
if(ref.line.miterLimit){
379+
p.setAttribute("stroke-miterlimit", ref.line.miterLimit);
380+
}
381+
};
382+
383+
var applyFill = function(p, ref){
384+
__(p, {
385+
"fill": ref.fill.fill,
386+
"fill-opacity": ref.fill.alpha
387+
});
388+
};
389+
390+
var state = {lastPath : null};
391+
this.moveTo = function(params){
392+
var p = __("path",{
393+
"d":"M" + params.join(" ")
394+
});
395+
applyFill(p, this);
396+
state.lastPath = p;
397+
applyStroke(p, this);
398+
this.DOM.appendChild(state.lastPath);
399+
};
400+
this.lineTo = function(params){
401+
if(!state.lastPath){
402+
state.lastPath = __("path",{
403+
"d":"M0 0"
404+
});
405+
applyFill(state.lastPath, this);
406+
applyStroke(state.lastPath, this);
407+
}
408+
__(state.lastPath,{
409+
"d": state.lastPath.getAttribute("d") + " L" + params.join(" ")
410+
});
411+
};
412+
this.curveTo = function(params){
413+
if(!state.lastPath){
414+
state.lastPath = __("path",{
415+
"d":"M0 0"
416+
});
417+
applyFill(state.lastPath, this);
418+
applyStroke(state.lastPath, this);
419+
}
420+
__(state.lastPath,{
421+
"d": state.lastPath.getAttribute("d") + " Q" + params.join(" ")
422+
});
423+
};
424+
this.lineStyle = function(params){
425+
if(params.length < 3)
426+
return;
427+
this.line.width = params[0];
428+
this.line.color = params[1];
429+
this.line.alpha = params[2];
430+
if(params[3]){
431+
this.line.caps = params[3];
432+
}
433+
if(params[4]){
434+
this.line.joints = params[4];
435+
}
436+
if(params[5]){
437+
this.line.miterLimit = params[5];
438+
}
439+
if(state.lastPath){
440+
applyStroke(state.lastPath, this);
441+
}
442+
};
443+
this.beginFill = function(params){
444+
if(params.length === 0)
445+
return;
446+
this.fill.fill = params[0];
447+
if(params.length > 1){
448+
this.fill.alpha = params[1];
449+
}
450+
};
451+
this.endFill = function(params){
452+
this.fill.fill = "none";
453+
};
454+
this.drawRect = function(params){
455+
var r = __("rect",{
456+
"x": params[0],
457+
"y": params[1],
458+
"width": params[2],
459+
"height": params[3]
460+
});
461+
applyFill(r, this);
462+
applyStroke(r, this);
463+
this.DOM.appendChild(r);
464+
};
465+
this.drawRoundRect = function(params){
466+
var r = __("rect",{
467+
"x": params[0],
468+
"y": params[1],
469+
"width": params[2],
470+
"height": params[3],
471+
"rx":params[4],
472+
"ry":params[5]
473+
});
474+
applyFill(r, this);
475+
applyStroke(r, this);
476+
this.DOM.appendChild(r);
477+
};
478+
this.drawCircle = function(params){
479+
var c = __("circle",{
480+
"cx": params[0],
481+
"cy": params[1],
482+
"r": params[2]
483+
});
484+
applyFill(c, this);
485+
applyStroke(c, this);
486+
this.DOM.appendChild(c);
487+
};
488+
489+
this.drawEllipse = function(params){
490+
var e = __("ellipse",{
491+
"cx": params[0],
492+
"cy": params[1],
493+
"rx": params[2],
494+
"ry": params[3]
495+
});
496+
applyFill(e, this);
497+
applyStroke(e, this);
498+
this.DOM.appendChild(e);
499+
};
500+
501+
// Hook Child
502+
stage.appendChild(this.DOM);
503+
};
504+
505+
ScriptingContext.prototype.Unpack.Canvas = function(stage, data, ctx){
506+
this.DOM = _("div",{"style":{"position":"absolute"}});
507+
508+
this.setX = function(x){
509+
this.DOM.style.left = x + "px";
510+
};
511+
512+
this.setY = function(y){
513+
this.DOM.style.top = y + "px";
514+
};
515+
516+
this.setWidth = function(width){
517+
this.DOM.style.width = width + "px";
518+
};
519+
520+
this.setHeight = function(height){
521+
this.DOM.style.height = height + "px";
522+
};
523+
524+
// Hook child
525+
stage.appendChild(this.DOM);
526+
}
527+
528+
// Load all the getClass Prototypes
529+
for(var cl in ScriptingContext.prototype.Unpack){
530+
ScriptingContext.prototype.Unpack[cl].prototype.getClass = (function(){
531+
var n = cl;
532+
return function(){
533+
return n;
534+
}
535+
})();
536+
}
281537
})();

0 commit comments

Comments
 (0)