import * as scrawl from '../source/scrawl.js'
import { reportSpeed } from './utilities.js';Animate a DOM element using the delta attribute object; dynamically change classes on a DOM element
import * as scrawl from '../source/scrawl.js'
import { reportSpeed } from './utilities.js';let artefact = scrawl.library.artefact,
stack = artefact.mystack,
flower = artefact.flower,
currentClass = '';Create a new Group for the box elements, against which we will be checking for hits
.set()let hitgroup = scrawl.makeGroup({
name: 'hitareas',
host: 'mystack',
});Update the Stack
stack.set({
width: 600,
height: 400,This gets the browser to add a drag icon to the stack element’s lower right corner, which in turn allows the user to drag-resize the element in real time.
css: {
overflow: 'hidden',
resize: 'both'
},Switch on automated element resize capture and processing
checkForResize: true,
});Update the boxes
artefact.rightbox.set({
group: 'hitareas',
startX: '55%',
startY: '15%',
roll: 10,
css: { backgroundColor: 'red' },
});
artefact.leftbox.set({
group: hitgroup.name,
startX: '10%',
startY: '35%',
css: { backgroundColor: 'blue' },
});Batch-update the box artefacts using their shared Group
hitgroup.setArtefacts({
width: '25%',
height: '50%',
css: { opacity: '0.4' },
});Update the flower wheel
flower.set({
width: 200,
height: 200,
startX: '50%',
startY: '50%',
handleX: 'center',
handleY: 'center',
classes: 'make_round',
delta: {
startX: '0.4%',
startY: '-0.3%',
roll: 0.5,
},We will check for boundary collisions using Scrawl-canvas delta checking functionality
[minimum-value, maximum-value, action-to-take] deltaConstraints: {
startX: ['10%', '90%', 'reverse'],
startY: ['10%', '90%', 'reverse'],
},
checkDeltaConstraints: true,
});Updating the flower’s DOM element’s class attribute
let checkForFlowerClassUpdates = function () {@ts-expect-error
let current = hitgroup.getArtefactAt([flower.get('start')]).artefact;
if (current && !currentClass) {
currentClass = (current.name === 'leftbox') ? 'make_blue' : 'make_red';
flower.addClasses(currentClass);
}
else if (!current && currentClass) {
flower.removeClasses(currentClass);
currentClass = '';
}
};Function to display frames-per-second data, and other information relevant to the demo
const report = reportSpeed('#reportmessage', function () {
return ` Current classes: "${flower.get('classes')}"`;
});Create the Display cycle animation
scrawl.makeRender({
name: 'demo-animation',
commence: checkForFlowerClassUpdates,
target: stack,
afterShow: report,We need to finalize the stack’s display after the first Display cycle completes
height attribute should cascade through to its constituent elements, so that they can finalize their own dimensions and positioning (which in this case are both set relative to the stack’s dimensions). afterCreated: () => stack.set({height: 400}),
});