Skip to content

Commit fefb62b

Browse files
jabbanyjabbany
committed
Pre-support for blendMode as it is now supported in CSS too :)
1 parent da225a3 commit fefb62b

5 files changed

Lines changed: 317 additions & 26 deletions

File tree

‎src/scripting/Host/Unpacker/DisplayObject.ts‎

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
/// <reference path="DisplayObject.ts" />
1+
/**
2+
* Host end unpacker for generic DisplayObjects
3+
* @author Jim Chen
4+
*/
5+
/// <reference path="Unpacker.ts" />
26
module Unpacker{
37
export class DisplayObject{
48
public DOM:HTMLDivElement;
@@ -12,9 +16,9 @@ module Unpacker{
1216

1317
constructor(stage:any, data:Object, context:any){
1418
Unpacker.sensibleDefaults(data,{
15-
"x":0,
16-
"y":0,
17-
"alpha":1
19+
"x": 0,
20+
"y": 0,
21+
"alpha": 1
1822
});
1923
this.DOM = <HTMLDivElement> Unpacker._("div",{
2024
"style": {
@@ -67,17 +71,24 @@ module Unpacker{
6771
}
6872

6973
/** Transform **/
70-
set transform(t:Object){
71-
this._transform = t;
72-
if(this._transform["mode"] === "2d"){
73-
74-
}else{
75-
74+
set transform(transformation:Object){
75+
if (transformation.hasOwnProperty("mode")) {
76+
this._transform = transformation;
77+
if (transformation["mode"] === "2d") {
78+
this.DOM.style.transform = "matrix2d(" +
79+
transformation.matrix.join(",") + ")";
80+
} else if (transformation["mode"] === "3d") {
81+
this.DOM.style.transform = "matrix3d(" +
82+
transformation.matrix.join(",") + ")";
83+
} else {
84+
throw new Error("Transform mode " +
85+
transformation.mode + " not supported.");
86+
}
7687
}
7788
}
7889

7990
get transform():Object{
8091
return this._transform;
8192
}
8293
}
83-
}
94+
}

‎src/scripting/Host/Unpacker/Shape.ts‎

Lines changed: 259 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,265 @@
11
/**
2-
* Created by jim on 6/23/14.
2+
* Host end unpacker for Shapes
3+
* @author Jim Chen
34
*/
4-
5+
/// <reference path="Unpacker.ts" />
56
module Unpacker{
7+
interface LineContext {
8+
width: number;
9+
color: string;
10+
alpha: number;
11+
caps: string;
12+
joints: string;
13+
miterLimit: string;
14+
}
15+
interface FillContext {
16+
fill: string;
17+
alpha: number;
18+
fillRule: string;
19+
}
20+
interface GraphicsContext {
21+
line:LineContext;
22+
fill:FillContext;
23+
}
24+
625
export class Shape{
26+
public DOM:Document;
27+
private _x:number;
28+
private _y:number;
29+
private _alpha:number;
30+
private _transform:Object = {
31+
"mode": "3d",
32+
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]
33+
};
34+
35+
private _defaultGroup:Element;
36+
private _defaultEffect:Element;
37+
private _defaultContainer:Element;
38+
private _defaultGroupWithEffects:Element;
39+
40+
private _state:Object = {
41+
"lastPath": null
42+
};
43+
44+
private _graphics:GraphicsContext = {
45+
"line": {
46+
"width": 0,
47+
"color": "#ffffff",
48+
"alpha": 1,
49+
"caps": null,
50+
"joints": null,
51+
"miterLimit": null
52+
},
53+
"fill": {
54+
"fill": "none",
55+
"alpha": 1,
56+
"fillRule": "nonzero"
57+
}
58+
};
59+
60+
/**
61+
* Creates elements with attributes or set attributes on existing ones
62+
* @param element - string to create new element or existing element
63+
* @param attr - map containing the attributes and values
64+
* @return returns the element
65+
*/
66+
private static _svg(element:Element | string, attr:Object):Element {
67+
var elem:Element;
68+
if (typeof element === "string") {
69+
// Create a new element
70+
elem = document.createElementNS("http://www.w3.org/2000/svg", element);
71+
} else {
72+
elem = element;
73+
}
74+
if (attr !== null) {
75+
for (var attrName in attr) {
76+
elem.setAttribute(attrName, attr[attrName]);
77+
}
78+
}
79+
return elem;
80+
}
81+
82+
private static _position(x:number, y:number):string {
83+
return "translate(" + x + "," + y + ")";
84+
}
85+
86+
constructor(stage:any, data:Object, context:any) {
87+
Unpacker.sensibleDefaults(data, {
88+
"x": 0,
89+
"y": 0,
90+
"alpha": 1
91+
});
92+
this.DOM = Unpacker._("svg", {
93+
"width": stage.offsetWidth,
94+
"height": stage.offsetHeight,
95+
"style": {
96+
"position": "absolute",
97+
"top": "0px",
98+
"left": "0px",
99+
"width": stage.offsetWidth + "px",
100+
"height": stage.offsetHeight + "px",
101+
"transform": "matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)"
102+
}
103+
});
104+
// Create the default groups
105+
this._defaultEffects = Shape._svg("defs", {});
106+
this._defaultGroup = Shape._svg("g", {});
107+
this._defaultContainer = Shape.svg("g", {
108+
"transform": Shape._position(this._x, this._y),
109+
"opacity": this._alpha
110+
});
111+
this._defaultGroupWithEffects = this._defaultContainer;
112+
113+
this._defaultContainer.appendChild(this._defaultGroup);
114+
this.DOM.appendChild(this._defaultEffects);
115+
this.DOM.appendChild(this._defaultGroupWithEffects);
116+
}
117+
118+
set visible(visibility:boolean) {
119+
this.DOM.style.visibility = visibilty ? "visible" : "hidden";
120+
}
121+
122+
get visible():boolean {
123+
return this.DOM.style.visibility === "hidden" ? false : true;
124+
}
125+
126+
set x(x:number) {
127+
this._x = x;
128+
Shape._svg(this._defaultContainer, {
129+
"transform": Shape._position(this._x, this._y)
130+
});
131+
}
132+
133+
set y(y:number) {
134+
this._y = y;
135+
Shape._svg(this._defaultContainer, {
136+
"transform": Shape._position(this._x, this._y)
137+
});
138+
}
139+
140+
get x():number {
141+
return this._x;
142+
}
143+
144+
get y():number {
145+
return this._y;
146+
}
147+
148+
set alpha(alpha:number) {
149+
this._alpha = alpha;
150+
Shape._svg(this._defaultContainer, {
151+
"opacity": this._alpha
152+
});
153+
}
154+
155+
get alpha():number {
156+
return this._alpha;
157+
}
158+
159+
set transform(transformation:Object) {
160+
if (transformation.hasOwnProperty("mode")) {
161+
this._transform = transformation;
162+
if (transformation["mode"] === "2d") {
163+
this.DOM.style.transform = "matrix(1,0,0,1,0,0)";
164+
Shape._svg()
165+
} else if (transformation["mode"] === "3d") {
166+
167+
}
168+
}
169+
}
170+
171+
get transform():Object {
172+
return this._transform;
173+
}
174+
175+
private applyFill(element:Element, context:FillContext) {
176+
Shape._svg(element, {
177+
"fill": context.fill,
178+
"fill-opacity": context.alpha,
179+
"fill-rule": context.fillRule
180+
});
181+
}
182+
183+
private applyStroke(element:Element, context:LineContext) {
184+
Shape._svg(element, {
185+
"stroke": context.color,
186+
"stroke-width": context.width,
187+
"stroke-opacity": context.alpha
188+
});
189+
if (context.caps !== null) {
190+
p.setAttribute("stroke-linecap", context.caps);
191+
}
192+
if (context.joints !== null) {
193+
p.setAttribute("stroke-linejoin", context.joints);
194+
}
195+
if (context.miterLimit !== null) {
196+
p.setAttribute("stroke-miterlimit", context.miterLimit);
197+
}
198+
}
199+
200+
private _ensurePathStart() {
201+
if (this._state.lastPath === null) {
202+
this._state.lastPath = Shape._svg("path", {
203+
"d": "M0 0"
204+
});
205+
this.applyFill(this._state.lastPath, this._graphics.fill);
206+
this.applyStroke(this._state.lastPath, this._graphics.line);
207+
defaultGroup.appendChild(this._state.lastPath);
208+
}
209+
}
210+
211+
public moveTo(params:Array) {
212+
var p = Shape._svg("path", {
213+
"d": "M" + params.join(" ")
214+
});
215+
this.applyFill(p, this._graphics.fill);
216+
this.applyStroke(p, this._graphics.line);
217+
this._state.lastPath = p;
218+
this._defaultGroup.appendChild(this._state.lastPath);
219+
}
220+
221+
public lineTo(params:Array) {
222+
this._ensurePathStart();
223+
Shape._svg(this._state.lastPath, {
224+
"d": this._state.lastPath.getAttribute("d") + " L" + params.join(" ")
225+
});
226+
}
227+
228+
public curveTo(params:Array) {
229+
this._ensurePathStart();
230+
Shape._svg(this._state.lastPath, {
231+
"d": this._state.lastPath.getAttribute("d") + " Q" + params.join(" ")
232+
});
233+
}
234+
235+
public lineStyle(params:Array) {
236+
if (params.length < 3) {
237+
throw new Error("Insufficient parameters, expected 3 or more.");
238+
}
239+
let context:LineContext = this._graphics.line;
240+
context.width = params[0];
241+
context.color = Unpacker.color(params[1]);
242+
context.alpha = params[2];
243+
if (params.length > 3) {
244+
context.caps = params[3];
245+
}
246+
if (params.length > 4) {
247+
context.joints = params[4];
248+
}
249+
if (params.length > 5) {
250+
context.joints = params[5];
251+
}
252+
if (this._state.lastPath) {
253+
this.applyStroke(this._state.lastPath, context);
254+
}
255+
}
256+
257+
public drawPath(params:Array) {
258+
259+
}
260+
261+
public beginFill(params:Array) {
7262

263+
}
8264
}
9-
}
265+
}

‎src/scripting/Host/Unpacker/TextField.ts‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,15 @@ module Unpacker{
2525
this.DOM.style.fontFamily = tf["font"];
2626
this.DOM.style.fontSize = tf["size"];
2727
this.DOM.style.color = Unpacker.color(tf["color"]);
28-
if(tf["bold"])
28+
if (tf["bold"]) {
2929
this.DOM.style.fontWeight = "bold";
30-
if(tf["italic"])
30+
}
31+
if (tf["italic"]) {
3132
this.DOM.style.fontStyle = "italic";
32-
if(tf["underline"])
33+
}
34+
if (tf["underline"]) {
3335
this.DOM.style.textDecoration = "underline";
36+
}
3437
this.DOM.style.margin = tf["margin"] + "px";
3538
}
3639

@@ -42,4 +45,4 @@ module Unpacker{
4245
return this.DOM.textContent;
4346
}
4447
}
45-
}
48+
}

‎src/scripting/Host/Unpacker/Unpacker.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
module Unpacker{
2-
export function _(type:string, props:Object = {}, children:Array<HTMLElement> = [], callback:Function = null):Element{
2+
export function _(type:string, props:Object = {},
3+
children:Array<HTMLElement> = [], callback:Function = null):Element{
34
var elem:Element = null;
45
if(type !== "svg"){
56
elem = document.createElement(type);
@@ -57,19 +58,19 @@ module Unpacker{
5758
return objectA;
5859
}
5960

60-
export function color(color:number):string{
61-
if(typeof color === "string"){
61+
export function color(color:number | string):string{
62+
if (typeof color === "string") {
6263
color = parseInt("" + color);
63-
if(color === NaN){
64+
if (color === NaN) {
6465
color = 0;
6566
}
6667
}
6768
var code:string = color.toString(16);
68-
while(code.length < 6){
69+
while (code.length < 6) {
6970
code = "0" + code;
7071
}
7172
return "#" + code;
7273
}
7374
}
7475

75-
/// <reference path="TextField.ts" />
76+
/// <reference path="TextField.ts" />

0 commit comments

Comments
 (0)