import * as scrawl from '../source/scrawl.js';import * as scrawl from '../source/scrawl.js';const library = scrawl.library,
artefact = library.artefact,
canvasnames = library.canvasnames;
let mystack = artefact.mystack;const report = function () {
let testTicker = Date.now(),
testTime, testNow;
const testMessage = document.querySelector('#reportmessage');
const artefactnames = library.artefactnames,
stacknames = library.stacknames,
cellnames = library.cellnames,
stack = library.stack,
canvas = library.canvas,
cell = library.cell;
let a, s, el, c;
return function () {
a = Object.keys(artefact);
s = Object.keys(stack);
el = Object.keys(canvas);
c = Object.keys(cell);
testNow = Date.now();
testTime = testNow - testTicker;
testTicker = testNow;
testMessage.textContent = `Screen refresh: ${Math.ceil(testTime)}ms; fps: ${Math.floor(1000 / testTime)}
artefact - ${a.length}, ${artefactnames.length}: [${(artefactnames).join(', ')}]
stack - ${s.length}, ${stacknames.length}: [${(stacknames).join(', ')}]
canvas - ${el.length}, ${canvasnames.length}: [${(canvasnames).join(', ')}]
cell - ${c.length}, ${cellnames.length}: [${(cellnames).join(', ')}]`;Our animation loop object has no targets, thus we need to trigger the Display cycle for our generated canvas elements holistically - which we do here.
scrawl.render();
};
}();Animation loop
scrawl.makeRender({
name: 'demo-animation',
noTarget: true,
commence: report,
});const controls = function () {the control buttons are never part of a Scrawl-canvas stack
const b1 = document.querySelector('#action_1'),
b2 = document.querySelector('#action_2'),
b3 = document.querySelector('#action_3'),
b4 = document.querySelector('#action_4');
/** @ts-expect-error */
b1.disabled = '';
/** @ts-expect-error */
b2.disabled = 'disabled';
/** @ts-expect-error */
b3.disabled = '';
/** @ts-expect-error */
b4.disabled = '';
let stackCanvas;Using a color factory object to generate random colors within a restricted palette
scrawl.makeColor({
name: 'templateColor',
minimumColor: 'maroon',
maximumColor: 'darkgreen',
});Test color packet and clone functionality
const colorFactory = scrawl.library.styles.templateColor.clone({
name: 'myColorObject',
});
console.log(colorFactory.saveAsPacket());RESULTS:
[
"myColorObject",
"Color",
"styles",
{
"name":"myColorObject",
"easingFunction":"a~~~ return a; ",
"rgb":[0,0,0,0],
"rgb_max":[0,100,0,1],
"rgb_min":[128,0,0,1],
"hsl":[0,0,0,0],
"hsl_max":[120,100,19.53125,1],
"hsl_min":[0,100,25,1],
"hwb":[0,0,100,0],
"hwb_max":[120,0,60.9375,1],
"hwb_min":[0,0,50,1],
"xyz":[0,0,0,0],
"xyz_max":[4.557171452378752,9.114342904757503,1.5190571507929174,1],
"xyz_min":[8.902087024697204,4.589194232421498,0.4166107652198255,1],
"lab":[0,0,0,0],
"lab_max":[36.20351872497332,-43.3725486689954,41.861707982223464,1],
"lab_min":[25.530784572416167,48.05284709622495,38.06053447826044,1],
"lch":[0,0,0,0],
"lch_max":[36.20351872497332,60.27918855818587,136.01550402033251,1],
"lch_min":[25.530784572416167,61.29992168693225,38.381187278486735,1]
}
]
return function (e) {
e.preventDefault();
e.returnValue = false;
switch (e.target.id) {
case 'action_1':
/** @ts-expect-error */
b1.disabled = 'disabled';
/** @ts-expect-error */
b2.disabled = '';
stackCanvas = scrawl.addCanvas({Test to make sure host attribute accepts both Stack object and CSS search String
host: (Math.random() > 0.5) ? mystack : '#mystack',
name: 'my-new-canvas',
width: 300,
height: 50,
backgroundColor: 'lavender',
});
break;
case 'action_2':
/** @ts-expect-error */
b1.disabled = '';
/** @ts-expect-error */
b2.disabled = 'disabled';
if (stackCanvas) stackCanvas.kill();
break;
case 'action_3':
/** @ts-expect-error */
b1.disabled = '';
/** @ts-expect-error */
b2.disabled = 'disabled';
/** @ts-expect-error */
b3.disabled = 'disabled';
mystack.kill();
mystack = false;
break;
case 'action_4':
scrawl.addCanvas({
name: `extra-canvas-${canvasnames.length}`,
host: (Math.random() > 0.5) ? '#not-a-stack' : '',
width: 300,
height: 50,
backgroundColor: colorFactory.getRangeColor(Math.random()),
});
break;
}
};
}();
scrawl.addListener('up', controls, '.control_button');console.log(scrawl.library);