@@ -3,9 +3,12 @@ ElmRuntime.Render.Collage = function() {
33'use strict';
44
55var Utils = ElmRuntime.use(ElmRuntime.Render.Utils);
6−var newElement = Utils.newElement, addTo = Utils.addTo, extract = Utils.extract;
6+var newElement = Utils.newElement, addTo = Utils.addTo,
7+ extract = Utils.extract, fromList = Utils.fromList,
8+ fromString = Utils.fromString;
79
810function trace(ctx, path) {
11+ var points = fromList(path);
912 var i = points.length - 1;
1013 if (i <= 0) return;
1114 ctx.moveTo(points[i]._0, points[i]._1);
@@ -57,39 +60,47 @@ function drawLine(ctx, style, path) {
5760 ctx.miterLimit = style.miterLimit;
5861 ctx.strokeStyle = extract(style.color);
5962 return line(ctx, style, path);
60−}
61−
62−function filled(ctx,color,points) {
63− tracePoints(ctx,points);
64− ctx.fillStyle = extract(color);
65− ctx.fill();
6663}
6764
68−function textured(redo,ctx,src,points) {
65+function texture(redo, ctx, src) {
6966 var img = new Image();
70− img.src = JS.castStringToJSString(src);
67+ img.src = fromString(src);
7168 img.onload = redo;
72−
73− tracePoints(ctx,points);
74− ctx.fillStyle = ctx.createPattern(img,'repeat');
75− ctx.fill();
69+ return ctx.createPattern(img, 'repeat');
7670}
7771
78−function drawShape(redo,ctx,shapeStyle,color,points) {
79− switch(shapeStyle[0]) {
80− case "Filled": return filled(ctx,color,points);
81− case "Outlined": return solid(ctx,color,points);
82− case "Textured": return textured(redo,ctx,shapeStyle[1],points);
83− case "CustomOutline":
84− return customLine(shapeStyle[1],ctx,color,points);
72+function gradient(ctx, grad) {
73+ var g;
74+ if (grad.ctor === 'Linear') {
75+ var p1 = grad._1, p2 = grad._2;
76+ g = ctx.createLinearGradient(p1._0, p1._1, p2._0, p2._1);
77+ } else {
78+ var p1 = grad._1, p2 = grad._3;
79+ g = ctx.createRadialGradient(p1._0, p1._1, grad._2, p2._0, p2._1, grad._4);
8580 }
86−};
81+ var stops = fromList(grad._0);
82+ for (var i = stops.length; i--; ) {
83+ var stop = stops[i];
84+ g.addColorStop(stop._0, extract(stop._1));
85+ }
86+ return g;
87+}
8788
88−function drawImage(redo,ctx,w,h,src) {
89+function drawShape(redo, ctx, style, path) {
90+ trace(ctx, path);
91+ var sty = style.ctor;
92+ ctx.fillStyle =
93+ sty === 'Solid' ? extract(style._0) :
94+ sty === 'Texture' ? texture(redo, ctx, style._0) : gradient(ctx, style._0);
95+ ctx.fill();
96+}
97+
98+function drawImage(redo, ctx, form) {
8999 var img = new Image();
90100 img.onload = redo;
91− img.src = JS.castStringToJSString(src);
92− ctx.drawImage(img,-w/2,-h/2,w,h);
101+ img.src = fromString(form._3);
102+ var w = form._0, h = form._1, pos = form._2;
103+ ctx.drawImage(img, pos._0, pos._1, w, h, -w/2, -h/2, w, h);
93104}
94105
95106function renderForm(redo,ctx,form) {
@@ -97,17 +108,21 @@ function renderForm(redo,ctx,form) {
97108 var m = form.transform;
98109 ctx.transform(m[0], m[3], m[1], m[4], m[2], m[5]);
99110 ctx.beginPath();
100− switch(form.form.ctor) {
101− case 'FPath' : drawLine(ctx, form._0, form._1); break;
102− case 'FShape': drawShape(redo, ctx, form._0, form._1); break;
103− case 'FImage': drawImage(redo, ctx, form._0, form._1, form._2, form._3); break;
104− case 'FGroup': renderForms(redo, ctx, form.form._0); break;
111+ var f = form.form;
112+ switch(f.ctor) {
113+ case 'FPath' : drawLine(ctx, f._0, f._1); break;
114+ case 'FShape':
115+ if (form.form._0.ctor === 'Left') drawLine(ctx, f._0._0, f._1);
116+ else drawShape(redo, ctx, f._0._0, f._1);
117+ break;
118+ case 'FImage': drawImage(redo, ctx, f); break;
119+ case 'FGroup': renderForms(redo, ctx, f._0); break;
105120 }
106121 ctx.restore();
107122}
108123
109124function renderForms(redo, ctx, forms) {
110− forms = toArray(forms);
125+ forms = fromList(forms);
111126 for (var i = forms.length; i--; ) {
112127 renderForm(redo,ctx,forms[i]);
113128 }