From d46248030c053fd7253df3590f4361cf3cfa1763 Mon Sep 17 00:00:00 2001 From: Richard Harris Date: Thu, 10 Jan 2019 09:22:24 -0500 Subject: [PATCH] broken snapshot --- .../render-dom/wrappers/Element/index.ts | 9 +++-- src/compile/render-dom/wrappers/IfBlock.ts | 1 + src/internal/transitions.js | 38 +++++++++++++++---- .../_config.js | 4 ++ 4 files changed, 41 insertions(+), 11 deletions(-) diff --git a/src/compile/render-dom/wrappers/Element/index.ts b/src/compile/render-dom/wrappers/Element/index.ts index 615297123f..e2008509c3 100644 --- a/src/compile/render-dom/wrappers/Element/index.ts +++ b/src/compile/render-dom/wrappers/Element/index.ts @@ -604,7 +604,7 @@ export default class ElementWrapper extends Wrapper { ${name}.run(0); `); - block.builders.destroy.addConditional('detach', `if (${name}) ${name}.end();`); + block.builders.destroy.addConditional('detach', `if (${name}) console.log('detaching'), ${name}.end();`); } else { @@ -622,15 +622,18 @@ export default class ElementWrapper extends Wrapper { if (outro) { block.builders.intro.addBlock(deindent` @add_render_callback(() => { - if (${introName}) ${introName}.end(); - ${introName} = @create_in_transition(${this.var}, ${fn}, ${snippet}); + if (!${introName}) ${introName} = @create_in_transition(${this.var}, ${fn}, ${snippet}); + ${introName}.start(); }); `); + + block.builders.outro.addLine(`if (${introName}) ${introName}.invalidate()`); } else { block.builders.intro.addBlock(deindent` if (!${introName}) { @add_render_callback(() => { ${introName} = @create_in_transition(${this.var}, ${fn}, ${snippet}); + ${introName}.start(); }); } `); diff --git a/src/compile/render-dom/wrappers/IfBlock.ts b/src/compile/render-dom/wrappers/IfBlock.ts index f51ae396e7..f5cb58ae28 100644 --- a/src/compile/render-dom/wrappers/IfBlock.ts +++ b/src/compile/render-dom/wrappers/IfBlock.ts @@ -431,6 +431,7 @@ export default class IfBlockWrapper extends Wrapper { ? deindent` @group_outros(); @on_outro(() => { + console.log('outros completed'); ${name}.d(1); ${name} = null; }); diff --git a/src/internal/transitions.js b/src/internal/transitions.js index e033453836..75e8741a30 100644 --- a/src/internal/transitions.js +++ b/src/internal/transitions.js @@ -18,6 +18,7 @@ function wait() { let outros; export function group_outros() { + console.log('grouping'); outros = { remaining: 0, callbacks: [] @@ -25,19 +26,23 @@ export function group_outros() { } export function check_outros() { + console.trace(`${outros.remaining} outros remaining`); if (!outros.remaining) { + console.log(outros.callbacks.map(c => c.toString())) run_all(outros.callbacks); } } export function on_outro(callback) { + console.log('adding', callback.toString()); outros.callbacks.push(callback); } export function create_in_transition(node, fn, params) { let config = fn(node, params); - let running = true; + let running = false; let animation_name; + let task; function cleanup() { if (animation_name) delete_rule(node, animation_name); @@ -62,7 +67,10 @@ export function create_in_transition(node, fn, params) { const start_time = window.performance.now() + delay; const end_time = start_time + duration; - loop(now => { + if (task) task.abort(); + running = true; + + task = loop(now => { if (running) { if (now >= end_time) { tick(1, 0); @@ -80,14 +88,24 @@ export function create_in_transition(node, fn, params) { }); } - if (typeof config === 'function') { - config = config(); - wait().then(go); - } else { - go(); - } + let started = false; return { + start() { + if (started) return; + + if (typeof config === 'function') { + config = config(); + wait().then(go); + } else { + go(); + } + }, + + invalidate() { + started = false; + }, + end() { if (running) { cleanup(); @@ -233,6 +251,7 @@ export function create_bidirectional_transition(node, fn, params, intro) { node.dispatchEvent(new window.CustomEvent(`${running_program.b ? 'intro' : 'outro'}start`)); loop(now => { + console.log({ now, pending_program, running_program }); if (pending_program && now > pending_program.start) { running_program = init(pending_program, duration); pending_program = null; @@ -263,6 +282,7 @@ export function create_bidirectional_transition(node, fn, params, intro) { } } + console.log('running program ended'); running_program = null; } @@ -280,6 +300,7 @@ export function create_bidirectional_transition(node, fn, params, intro) { return { run(b) { + console.log(`run`, b); if (typeof config === 'function') { wait().then(() => { config = config(); @@ -291,6 +312,7 @@ export function create_bidirectional_transition(node, fn, params, intro) { }, end() { + console.log('end'); clear_animation(); running_program = pending_program = null; } diff --git a/test/runtime/samples/transition-js-dynamic-if-block-bidi/_config.js b/test/runtime/samples/transition-js-dynamic-if-block-bidi/_config.js index aa0bd9e1aa..dae7613029 100644 --- a/test/runtime/samples/transition-js-dynamic-if-block-bidi/_config.js +++ b/test/runtime/samples/transition-js-dynamic-if-block-bidi/_config.js @@ -16,11 +16,15 @@ export default { assert.equal(div.foo, 0.75); assert.htmlEqual(div.innerHTML, 'hello everybody!'); + console.group('set visible false'); component.visible = false; + console.groupEnd(); component.name = 'again'; assert.htmlEqual(div.innerHTML, 'hello everybody!'); + console.group('tick 125'); raf.tick(125); + console.groupEnd(); assert.equal(div.foo, 0.25); component.visible = true;