import * as scrawl from '../source/scrawl.js'
import { reportSpeed, killTicker, reportFullLibrary } from './utilities.js';import * as scrawl from '../source/scrawl.js'
import { reportSpeed, killTicker, reportFullLibrary } from './utilities.js';const stack = scrawl.findStack('mystack');Namespacing boilerplate
const namespace = stack.name;
const name = (n) => `${namespace}-${n}`;
stack.set({
width: 300,
height: 600,
css: {
overflow: 'hidden'
}
});
stack.addExistingDomElements('#rocket');
const rocket = scrawl.findElement('rocket');
rocket.set({
startX: 600,
startY: 540,
width: 50,
height: 100,
handleX: 570,
handleY: 'center',
});Set a tween up as a template which can be cloned, but will never itself run
const tween = scrawl.makeTween({
name: name('template'),
duration: 5000,
killOnComplete: true,
definitions: [
{
attribute: 'roll',
start: 0,
end: 65
}
],
/** @this {import('../source/scrawl.js').TweenInstance} */
commenceAction: function () {
this.set({
targets: rocket.clone({
name: `${this.name}-element`,
})
});
},
completeAction: function () {
scrawl.findElement(`${this.name}-element`).kill();
},
}).removeFromTicker();Function to display frames-per-second data, and other information relevant to the demo
const report = reportSpeed('#reportmessage', () => reportFullLibrary(scrawl));Create the Display cycle animation
scrawl.makeRender({
name: name('animation'),
target: stack,
afterShow: report,
});let counter = 0;
const flyRocket = function(e) {
e.preventDefault();
e.returnValue = false;
tween.clone({
name: name(`rocket-${counter}`),
}).run();
counter ++;
};
scrawl.addNativeListener('click', flyRocket, stack.domElement);console.log(scrawl.library);
console.log('Performing tests ...');
killTicker(scrawl, stack, name('template_ticker'), 4000);