@@ -10,7 +10,6 @@ var newElement = Utils.newElement, addTo = Utils.addTo,
1010
1111function trace(ctx, path) {
1212 var points = fromList(path);
13− console.log(points);
1413 var i = points.length - 1;
1514 if (i <= 0) return;
1615 ctx.moveTo(points[i]._0, points[i]._1);
@@ -22,21 +21,23 @@ function trace(ctx, path) {
2221}
2322
2423function line(ctx,style,path) {
25− var isSolid = style.dashing.ctor === 'Nil';
26− isSolid ? trace(ctx, path) : customLineHelp(ctx, style, path);
24+ style.dashing.ctor === 'Nil' ? trace(ctx, path) : customLineHelp(ctx, style, path);
2725 ctx.stroke();
2826}
2927
30−function customLineHelp(ctx, pattern, points) {
28+function customLineHelp(ctx, style, path) {
29+ var points = fromList(path);
30+ if (path.closed) points.push(points[0]);
31+ var pattern = fromList(style.dashing);
3132 var i = points.length - 1;
3233 if (i <= 0) return;
33− var x0 = points[i][1], y0 = points[i][2];
34+ var x0 = points[i]._0, y0 = points[i]._1;
3435 var x1=0, y1=0, dx=0, dy=0, remaining=0, nx=0, ny=0;
3536 var pindex = 0, plen = pattern.length;
3637 var draw = true, segmentLength = pattern[0];
3738 ctx.moveTo(x0,y0);
3839 while (i--) {
39− x1 = points[i][1]; y1 = points[i][2];
40+ x1 = points[i]._0; y1 = points[i]._1;
4041 dx = x1 - x0; dy = y1 - y0;
4142 remaining = Math.sqrt(dx * dx + dy * dy);
4243 while (segmentLength <= remaining) {
@@ -93,7 +94,6 @@ function gradient(ctx, grad) {
9394}
9495
9596function drawShape(redo, ctx, style, path) {
96− console.log(style, path);
9797 trace(ctx, path);
9898 var sty = style.ctor;
9999 ctx.fillStyle =
@@ -107,7 +107,6 @@ function drawImage(redo, ctx, form) {
107107 img.onload = redo;
108108 img.src = fromString(form._3);
109109 var w = form._0, h = form._1, pos = form._2;
110− console.log(w,h,pos);
111110 ctx.drawImage(img, pos._0, pos._1, w, h, -w/2, -h/2, w, h);
112111}
113112
@@ -118,7 +117,6 @@ function renderForm(redo,ctx,form) {
118117 if (form.scale !== 1) ctx.scale(form.scale, form.scale);
119118 ctx.beginPath();
120119 var f = form.form;
121− console.log(f);
122120 switch(f.ctor) {
123121 case 'FPath' : drawLine(ctx, f._0, f._1); break;
124122 case 'FShape':
@@ -137,16 +135,13 @@ function renderForm(redo,ctx,form) {
137135
138136function renderForms(redo, ctx, forms) {
139137 var fs = fromList(forms);
140− console.log(fs);
141138 for (var i = 0, len = fs.length; i < len; ++i) {
142− renderForm(redo,ctx,fs[i]);
139+ renderForm(redo, ctx, fs[i]);
143140 }
144141}
145142
146143function collageForms(w,h,forms) {
147144 var canvas = newElement('canvas');
148− w = w|0;
149− h = h|0;
150145 canvas.style.width = w + 'px';
151146 canvas.style.height = h + 'px';
152147 canvas.style.display = "block";
@@ -155,7 +150,6 @@ function collageForms(w,h,forms) {
155150 function redo() { renderForms(this,ctx,forms); }
156151 if (canvas.getContext) {
157152 var ctx = canvas.getContext('2d');
158− console.log(forms);
159153 renderForms(redo,ctx,forms);
160154 return canvas;
161155 }
@@ -163,21 +157,25 @@ function collageForms(w,h,forms) {
163157 return canvas;
164158}
165159
166−function collageElement(w, h, m, elem) {
160+function collageElement(width, height, x, y, theta, scale, elem) {
167161 var e = Render.render(elem);
168− var matrix = 'matrix(' + m[0] + ',' + m[3] + ',' + m[1] + ',' +
169− m[4] + ',' + m[2] + ',' + m[5] + ')';
170− addTransform(e.style, matrix);
162+ var w = elem.props.width,
163+ h = elem.props.height,
164+ t = 'translate(' + (width + f.x - w/2) + 'px,'+ (height - f.y - h/2) + 'px)',
165+ r = theta === 0 ? '' : 'rotate(' + theta + 'rad)',
166+ s = scale === 1 ? '' : 'scale(' + scale + ',' + scale + ')';
167+ // var m = 'matrix(' + mtrx[0] + ',' + mtrx[3] + ',' + mtrx[1] + ',' +
168+ // mtrx[4] + ',' + mtrx[2] + ',' + mtrx[5] + ')';
169+ addTransform(e.style, t + ' ' + s + ' ' + r);
171170 var div = newElement('div');
172171 addTo(div,e);
173− div.style.width = (w|0) + "px";
174− div.style.height = (h|0) + "px";
175− div.style.overflow = "hidden";
172+ div.style.width = width + 'px';
173+ div.style.height = height + 'px';
174+ div.style.overflow = 'hidden';
176175 return div;
177176}
178177
179178function render(model) {
180− console.log(model);
181179 return collageForms(model.w, model.h, model.forms);
182180}
183181