a3801ac · elk · git.iko.soy

git.iko.soy/elk

on master help sign in

Ensure that alphas compose when used on groups.

a3801acevancz13 years ago

runtime/Render/Collage.js+18−6

compare with master

unifiedsplit

@@ -138,7 +138,7 @@ function renderForm(redo, ctx, form) {

138 if (x !== 0 || y !== 0) ctx.translate(x, y);

139 if (theta !== 0) ctx.rotate(theta);

140 if (scale !== 1) ctx.scale(scale,scale);

141− if (form.alpha !== 1) ctx.globalAlpha = form.alpha;

141+ if (form.alpha !== 1) ctx.globalAlpha = ctx.globalAlpha * form.alpha;

142 ctx.beginPath();

143 var f = form.form;

144 switch(f.ctor) {

@@ -199,6 +199,7 @@ function stepperHelp(list) {

199function stepper(forms) {

200 var ps = [stepperHelp(forms)];

201 var matrices = [];

202+ var alphas = [];

202 function peekNext() {

203 function peekNext() {

203 var len = ps.length;

204 var len = ps.length;

204 var formType = '';

205 var formType = '';

@@ -209,7 +210,12 @@ function stepper(forms) {

209 }

210 }

210 // assumes that there is a next element

211 // assumes that there is a next element

211 function next(ctx) {

212 function next(ctx) {

212− while (!ps[0].peekNext()) { ps.shift(); matrices.pop(); if (ctx) { ctx.restore(); } }

213+ while (!ps[0].peekNext()) {

214+ ps.shift();

215+ matrices.pop();

216+ alphas.shift();

217+ if (ctx) { ctx.restore(); }

218+ }

213 var out = ps[0].next();

219 var out = ps[0].next();

214 var f = out.form;

220 var f = out.form;

215 if (f.ctor === 'FGroup') {

221 if (f.ctor === 'FGroup') {

@@ -218,11 +224,16 @@ function stepper(forms) {

218 ctx.save();

224 ctx.save();

219 ctx.transform(m[0], m[3], m[1], m[4], m[2], m[5]);

225 ctx.transform(m[0], m[3], m[1], m[4], m[2], m[5]);

220 matrices.push(m);

226 matrices.push(m);

227+

228+ var alpha = (alphas[0] || 1) * out.alpha;

229+ alphas.unshift(alpha);

230+ ctx.globalAlpha = alpha;

221 }

231 }

222 return out;

232 return out;

223 }

233 }

224 function transforms() { return matrices; }

234 function transforms() { return matrices; }

235+ function alpha() { return alphas[0] || 1; }

225− return { peekNext:peekNext, next:next, transforms:transforms };

236+ return { peekNext:peekNext, next:next, transforms:transforms, alpha:alpha };

226}

237}

227

238

228function makeCanvas(w,h) {

239function makeCanvas(w,h) {

@@ -275,7 +286,7 @@ function updateTracker(w,h,div) {

275 ++i;

286 ++i;

276 return transform(transforms, canvas.getContext('2d'));

287 return transform(transforms, canvas.getContext('2d'));

277 }

288 }

278− function element(matrices, form) {

289+ function element(matrices, alpha, form) {

279 var container = kids[i];

290 var container = kids[i];

280 if (!container || container.getContext) {

291 if (!container || container.getContext) {

281 container = newElement('div');

292 container = newElement('div');

@@ -292,7 +303,7 @@ function updateTracker(w,h,div) {

292

303

293 container.style.width = w + 'px';

304 container.style.width = w + 'px';

294 container.style.height = h + 'px';

305 container.style.height = h + 'px';

295− if (form.alpha !== 1) container.style.opacity = form.alpha;

306+ container.style.opacity = alpha * form.alpha;

296

307

297 var elem = form.form._0;

308 var elem = form.form._0;

298 var node = container.firstChild;

309 var node = container.firstChild;

@@ -333,10 +344,11 @@ function update(div, _, model) {

333 while (formType = stpr.peekNext()) {

344 while (formType = stpr.peekNext()) {

334 if (ctx === null && formType !== 'FElement') {

345 if (ctx === null && formType !== 'FElement') {

335 ctx = tracker.getContext(stpr.transforms());

346 ctx = tracker.getContext(stpr.transforms());

347+ ctx.globalAlpha = stpr.alpha();

336 }

348 }

337 var form = stpr.next(ctx);

349 var form = stpr.next(ctx);

338 if (formType === 'FElement') {

350 if (formType === 'FElement') {

339− tracker.element(stpr.transforms(), form);

351+ tracker.element(stpr.transforms(), stpr.alpha(), form);

340 ctx = null;

352 ctx = null;

341 } else if (formType !== 'FGroup') {

353 } else if (formType !== 'FGroup') {

342 renderForm(function() { update(div, model, model); }, ctx, form);

354 renderForm(function() { update(div, model, model); }, ctx, form);