629f7686f3
The relative position in rel plugin is currently based on the world coordinate. So for the same effect, like fly in from the right-hand side, we must use different `data-rel-x/y/z` value. Why not let the plugin do the hard part? So I introduce a `data-rel-position`, when set to `relative`, all relative attribute is based on the position and rotation of previous slide. So no matter the rotation of previous slide, data-rel-x="1000" always looks like fly in from the right-hand side. We can change the position and rotation of one slide, and the position of all following slides will be changed too. When `data-rel-position` is set to `relative`, relative rotation has a clear meaning. It describes the relative rotations between slides. We don't need to set rotations for all slide, setting the key slides is enough. If `data-rel-position` is not relative, the effect of `data-rel-rotate-x/y/z` is not clear, so they're only used when `data-rel-position="relative"`. After the introduction of relative rotation, there're 6 attribute that will inherit from previous slide. If we want to set a relative X move, we have to set all other 5 attributes to 0. It's boring. So a `data-rel-clear` is used to set all 6 attributes to 0, and then the value specified in current slide is applied. The `examples/3D-positions/index.html` shows some usage. As you can see, the html code of two slide ring is the same, and slides except for the first two in a ring has no position attributes. It work by inheriting the previous one. This PR invokes a lot math calculations. Basically, the rotation of a slide is translated into the coordinate describing the directions of X/Y/Z axes. And `data-rel-x/y/z` can be easily calculated by that. The rotations is the hard part, I mainly use the algorithm in the Quaternions and spatial rotation - Wikipedia to compose two and more rotations. I'm not a math guy, hope I don't make much mistakes.
102 lines
5.8 KiB
JavaScript
102 lines
5.8 KiB
JavaScript
QUnit.module( "rel plugin rotation tests" );
|
|
|
|
QUnit.test( "rotation_relative", function( assert ) {
|
|
window.console.log( "Begin rotation_relative" );
|
|
var done = assert.async();
|
|
|
|
loadIframe( "test/plugins/rel/rotation_tests_presentation.html", assert, function() {
|
|
initPresentation( assert, function() {
|
|
var iframe = document.getElementById( "presentation-iframe" );
|
|
var iframeDoc = iframe.contentDocument;
|
|
|
|
var root = iframeDoc.querySelector( "div#impress" );
|
|
var step1 = iframeDoc.querySelector( "div#step-1" );
|
|
var step2 = iframeDoc.querySelector( "div#step-2" );
|
|
var step3 = iframeDoc.querySelector( "div#step-3" );
|
|
var step4 = iframeDoc.querySelector( "div#step-4" );
|
|
var step5 = iframeDoc.querySelector( "div#step-5" );
|
|
var step6 = iframeDoc.querySelector( "div#step-6" );
|
|
var step7 = iframeDoc.querySelector( "div#step-7" );
|
|
var step8 = iframeDoc.querySelector( "div#step-8" );
|
|
var reset = iframeDoc.querySelector( "div#reset" );
|
|
var rotate = iframeDoc.querySelector( "div#rotate" );
|
|
|
|
assert.close( step1.dataset.x, 0, 1, "step-1 data-x attribute" );
|
|
assert.close( step1.dataset.y, 0, 1, "step-1 data-y attribute" );
|
|
assert.close( step1.dataset.z, 0, 1, "step-1 data-z attribute" );
|
|
assert.close( step1.dataset.rotateX, 0, 1, "step-1 data-rotate-x" );
|
|
assert.close( step1.dataset.rotateY, 0, 1, "step-1 data-rotate-y" );
|
|
assert.close( step1.dataset.rotateZ, 0, 1, "step-1 data-rotate-z" );
|
|
|
|
assert.close( step2.dataset.x, 854, 1, "step-2 data-x attribute" );
|
|
assert.close( step2.dataset.y, -125, 1, "step-2 data-y attribute" );
|
|
assert.close( step2.dataset.z, -354, 1, "step-2 data-z attribute" );
|
|
assert.close( step2.dataset.rotateX, 0, 1, "step-2 data-rotate-x attribute" );
|
|
assert.close( step2.dataset.rotateY, 45, 1, "step-2 data-rotate-y attribute" );
|
|
assert.close( step2.dataset.rotateZ, 0, 1, "step-2 data-rotate-z attribute" );
|
|
|
|
assert.close( step3.dataset.x, 1208, 1, "step-3 data-x attribute" );
|
|
assert.close( step3.dataset.y, -250, 1, "step-3 data-y attribute" );
|
|
assert.close( step3.dataset.z, -1208, 1, "step-3 data-z attribute" );
|
|
assert.close( step3.dataset.rotateX, 0, 1, "step-3 data-rotate-x attribute" );
|
|
assert.close( step3.dataset.rotateY, 90, 1, "step-3 data-rotate-y attribute" );
|
|
assert.close( step3.dataset.rotateZ, 0, 1, "step-3 data-rotate-z attribute" );
|
|
|
|
assert.close( step4.dataset.x, 854, 1, "step-4 data-x attribute" );
|
|
assert.close( step4.dataset.y, -375, 1, "step-4 data-y attribute" );
|
|
assert.close( step4.dataset.z, -2062, 1, "step-4 data-z attribute" );
|
|
assert.close( step4.dataset.rotateX, 0, 1, "step-4 data-rotate-x" );
|
|
assert.close( step4.dataset.rotateY, 135, 1, "step-4 data-rotate-y" );
|
|
assert.close( step4.dataset.rotateZ, 0, 1, "step-4 data-rotate-z" );
|
|
|
|
assert.close( step5.dataset.x, 0, 1, "step-5 data-x attribute" );
|
|
assert.close( step5.dataset.y, -500, 1, "step-5 data-y attribute" );
|
|
assert.close( step5.dataset.z, -2416, 1, "step-5 data-z attribute" );
|
|
assert.close( step5.dataset.rotateX, 0, 1, "step-5 data-rotate-x" );
|
|
assert.close( step5.dataset.rotateY, 180, 1, "step-5 data-rotate-y" );
|
|
assert.close( step5.dataset.rotateZ, 0, 1, "step-5 data-rotate-z" );
|
|
|
|
assert.close( step6.dataset.x, -854, 1, "step-6 data-x attribute" );
|
|
assert.close( step6.dataset.y, -375, 1, "step-6 data-y attribute" );
|
|
assert.close( step6.dataset.z, -2062, 1, "step-6 data-z attribute" );
|
|
assert.close( step6.dataset.rotateX, 0, 1, "step-6 data-rotate-x" );
|
|
assert.close( step6.dataset.rotateY, 225, 1, "step-6 data-rotate-y" );
|
|
assert.close( step6.dataset.rotateZ, 0, 1, "step-6 data-rotate-z" );
|
|
|
|
assert.close( step7.dataset.x, -1208, 1, "step-7 data-x attribute" );
|
|
assert.close( step7.dataset.y, -250, 1, "step-7 data-y attribute" );
|
|
assert.close( step7.dataset.z, -1208, 1, "step-7 data-z attribute" );
|
|
assert.close( step7.dataset.rotateX, 0, 1, "step-7 data-rotate-x attribute" );
|
|
assert.close( step7.dataset.rotateY, 270, 1, "step-7 data-rotate-y attribute" );
|
|
assert.close( step7.dataset.rotateZ, 0, 1, "step-7 data-rotate-z attribute" );
|
|
|
|
assert.close( step8.dataset.x, -854, 1, "step-8 data-x attribute" );
|
|
assert.close( step8.dataset.y, -125, 1, "step-8 data-y attribute" );
|
|
assert.close( step8.dataset.z, -354, 1, "step-8 data-z attribute" );
|
|
assert.close( step8.dataset.rotateX, 0, 1, "step-8 data-rotate-x attribute" );
|
|
assert.close( step8.dataset.rotateY, 315, 1, "step-8 data-rotate-y attribute" );
|
|
assert.close( step8.dataset.rotateZ, 0, 1, "step-8 data-rotate-z attribute" );
|
|
|
|
assert.equal( reset.dataset.x, 0, "reset data-x attribute" );
|
|
assert.equal( reset.dataset.y, 0, "reset data-y attribute" );
|
|
assert.equal( reset.dataset.z, 0, "reset data-z attribute" );
|
|
assert.equal( reset.dataset.rotateX, 0, "reset data-rotate-x" );
|
|
assert.equal( reset.dataset.rotateY, 0, "reset data-rotate-y" );
|
|
assert.equal( reset.dataset.rotateZ, 0, "reset data-rotate-z" );
|
|
assert.equal( reset.dataset.rotateOrder, "zyx", "reset data-rotate-order" );
|
|
|
|
assert.equal( rotate.dataset.x, 0, "rotate data-x attribute" );
|
|
assert.equal( rotate.dataset.y, 0, "rotate data-y attribute" );
|
|
assert.equal( rotate.dataset.z, 0, "rotate data-z attribute" );
|
|
assert.equal( rotate.dataset.rotateX, 0, "rotate data-rotate-x" );
|
|
assert.equal( rotate.dataset.rotateY, 0, "rotate data-rotate-y" );
|
|
assert.equal( rotate.dataset.rotateZ, 123, "rotate data-rotate-z" );
|
|
assert.equal( rotate.dataset.rotateOrder, "xyz", "rotate data-rotate-order" );
|
|
|
|
done();
|
|
console.log( "End rotation test (sync)" );
|
|
} )
|
|
} ); // LoadIframe()
|
|
} );
|
|
|