git.iko.soy/elk
on 104faf1 help sign in
elk/runtime/Render/Collage.js
216 lines 6.5 kB history raw
2ElmRuntime.Render.Collage = function() {
3'use strict';
5var Render = ElmRuntime.use(ElmRuntime.Render.Element);
6var Utils = ElmRuntime.use(ElmRuntime.Render.Utils);
7var newElement = Utils.newElement, addTo = Utils.addTo,
8 extract = Utils.extract, fromList = Utils.fromList,
9 fromString = Utils.fromString, addTransform = Utils.addTransform;
11function trace(ctx, path) {
12 var points = fromList(path);
13 var i = points.length - 1;
14 if (i <= 0) return;
15 ctx.moveTo(points[i]._0, points[i]._1);
16 while (i--) { ctx.lineTo(points[i]._0, points[i]._1); }
17 if (path.closed) {
18 i = points.length - 1;
19 ctx.lineTo(points[i]._0, points[i]._1);
20 }
23function line(ctx,style,path) {
24 style.dashing.ctor === 'Nil' ? trace(ctx, path) : customLineHelp(ctx, style, path);
25 ctx.stroke();
28function customLineHelp(ctx, style, path) {
29 var points = fromList(path);
30 if (path.closed) points.push(points[0]);
31 var pattern = fromList(style.dashing);
32 var i = points.length - 1;
33 if (i <= 0) return;
34 var x0 = points[i]._0, y0 = points[i]._1;
35 var x1=0, y1=0, dx=0, dy=0, remaining=0, nx=0, ny=0;
36 var pindex = 0, plen = pattern.length;
37 var draw = true, segmentLength = pattern[0];
38 ctx.moveTo(x0,y0);
39 while (i--) {
40 x1 = points[i]._0; y1 = points[i]._1;
41 dx = x1 - x0; dy = y1 - y0;
42 remaining = Math.sqrt(dx * dx + dy * dy);
43 while (segmentLength <= remaining) {
44 x0 += dx * segmentLength / remaining;
45 y0 += dy * segmentLength / remaining;
46 ctx[draw ? 'lineTo' : 'moveTo'](x0, y0);
47 // update starting position
48 dx = x1 - x0; dy = y1 - y0;
49 remaining = Math.sqrt(dx * dx + dy * dy);
50 // update pattern
51 draw = !draw;
52 pindex = (pindex + 1) % plen;
53 segmentLength = pattern[pindex];
54 }
55 if (remaining > 0) {
56 ctx[draw ? 'lineTo' : 'moveTo'](x1, y1);
57 segmentLength -= remaining;
58 }
59 x0 = x1; y0 = y1;
60 }
63function drawLine(ctx, style, path) {
64 ctx.lineWidth = style.width;
65 ctx.lineCap = style.cap.ctor.toLowerCase();
66 var join = style.join.ctor;
67 ctx.lineJoin = join === 'Smooth' ? 'round' :
68 join === 'Sharp' ? 'miter' : 'bevel';
69 ctx.miterLimit = style.miterLimit;
70 ctx.strokeStyle = extract(style.color);
71 return line(ctx, style, path);
74function texture(redo, ctx, src) {
75 var img = new Image();
76 img.src = fromString(src);
77 img.onload = redo;
78 return ctx.createPattern(img, 'repeat');
81function gradient(ctx, grad) {
82 var g;
83 if (grad.ctor === 'Linear') {
84 var p1 = grad._1, p2 = grad._2;
85 g = ctx.createLinearGradient(p1._0, p1._1, p2._0, p2._1);
86 } else {
87 var p1 = grad._1, p2 = grad._3;
88 g = ctx.createRadialGradient(p1._0, p1._1, grad._2, p2._0, p2._1, grad._4);
89 }
90 var stops = fromList(grad._0);
91 for (var i = stops.length; i--; ) {
92 var stop = stops[i];
93 g.addColorStop(stop._0, extract(stop._1));
94 }
95 return g;
98function drawShape(redo, ctx, style, path) {
99 trace(ctx, path);
100 var sty = style.ctor;
101 ctx.fillStyle =
102 sty === 'Solid' ? extract(style._0) :
103 sty === 'Texture' ? texture(redo, ctx, style._0) : gradient(ctx, style._0);
104 ctx.fill();
107function drawImage(redo, ctx, form) {
108 var img = new Image();
109 img.onload = redo;
110 img.src = fromString(form._3);
111 var w = form._0, h = form._1, pos = form._2;
112 ctx.drawImage(img, pos._0, pos._1, w, h, -w/2, -h/2, w, h);
115function renderForm(stack, redo, ctx, form) {
116 ctx.save();
117 var x = form.x, y = form.y, theta = form.theta, scale = form.scale;
118 if (x !== 0 || y !== 0) ctx.translate(x, -y);
119 if (theta !== 0) ctx.rotate(theta);
120 if (scale !== 1) ctx.scale(scale, scale);
121 ctx.beginPath();
122 var f = form.form;
123 switch(f.ctor) {
124 case 'FPath' : drawLine(ctx, f._0, f._1); break;
125 case 'FShape':
126 if (f._0.ctor === 'Left') {
127 f._1.closed = true;
128 drawLine(ctx, f._0._0, f._1);
129 } else {
130 drawShape(redo, ctx, f._0._0, f._1);
131 }
132 break;
133 case 'FImage': drawImage(redo, ctx, f); break;
134 case 'FGroup':
135 ctx.save();
136 var m = f._0;
137 // stack.push(makeTransform(x, y, theta, scale, m));
138 ctx.transform(m[0], m[3], m[1], m[4], m[2], m[5]);
139 renderForms(stack, redo, ctx, f._1);
140 // stack.pop();
141 ctx.restore();
142 break;
143 }
144 ctx.restore();
147function makeTransform(x, y, theta, scale, matrix) {
148 return function(m) {
149 if (x !== 0 || y !== 0) m = A3( Matrix.move, x, y, m );
150 if (theta !== 0) m = A2( Matrix.rotate, theta, m );
151 if (scale !== 1) m = Matrix.scale( scale );
152 return Matrix.multiply( m, matrix );
153 };
156function renderForms(stack, redo, ctx, forms) {
157 var fs = fromList(forms);
158 for (var i = 0, len = fs.length; i < len; ++i) {
159 renderForm(stack, redo, ctx, fs[i]);
160 }
163function collageForms(w,h,forms) {
164 var canvas = newElement('canvas');
165 canvas.style.width = w + 'px';
166 canvas.style.height = h + 'px';
167 canvas.style.display = "block";
168 canvas.width = w;
169 canvas.height = h;
170 function redo() { renderForms([], this, ctx, forms); }
171 if (canvas.getContext) {
172 var ctx = canvas.getContext('2d');
173 ctx.translate(w/2, h/2);
174 renderForms([], redo, ctx, forms);
175 return canvas;
176 }
177 canvas.innerHTML = "Your browser does not support canvas.";
178 return canvas;
181function collageElement(stack, width, height, elem) {
182 var e = Render.render(elem),
183 w = elem.props.width,
184 h = elem.props.height,
185 m = Matrix.matrix(1,0,0,1,width/2,height/2),
186 len = stack.length;
187 for (var i = 0; i < len; ++i) { m = stack[i](m); }
188 var mtrx = 'matrix(' + m[0] + ',' + m[3] + ',' + m[1] + ',' +
189 m[4] + ',' + m[2] + ',' + m[5] + ')';
190 addTransform(e.style, 'translate(' + (-w/2) + 'px,'+ (-h/2) + 'px) ' + mtrx);
191 var div = newElement('div');
192 addTo(div,e);
193 div.style.width = width + 'px';
194 div.style.height = height + 'px';
195 div.style.overflow = 'hidden';
196 return div;
199function render(model) {
200 return collageForms(model.w, model.h, model.forms);
203function update(node, oldModel, newModel) {
204 if (!node.getContext) {
205 return node.parentNode.replaceChild(render(newModel), node);
206 }
207 var ctx = node.getContext('2d');
208 var w = newModel.w, h = newModel.h;
209 ctx.clearRect(-w/2, -h/2, w, h);
210 function redo() { renderForms( [], this, ctx, newModel.forms ); }
211 renderForms( [], redo, ctx, newModel.forms );
214return { render:render, update:update };
216};