import * as scrawl from '../source/scrawl.js';
import { reportSpeed, killArtefact } from './utilities.js';import * as scrawl from '../source/scrawl.js';
import { reportSpeed, killArtefact } from './utilities.js';const canvas = scrawl.findCanvas('mycanvas');Namespacing boilerplate
const namespace = canvas.name;
const name = (n) => `${namespace}-${n}`;Create and clone Label entitys
scrawl.makeLabel({
name: name('mylabel_fill'),
fontString: 'bold 2.2em / 3 Roboto',
text: '|Hεljö!',
accessibleText: `${name('mylabel_fill')} says: §`,
accessibleTextOrder: 0,
start: [`${0 + 12.5}%`, '28%'],
handle: ['center', 'center'],
fillStyle: 'lightgreen',
strokeStyle: 'blue',
lineWidth: 2,
lineCap: 'round',
lineJoin: 'round',
scale: 1.8,
scaleOutline: false,
shadowOffsetX: 2,
shadowOffsetY: 2,
shadowBlur: 2,
shadowColor: 'black',
showBoundingBox: true,
boundingBoxStyle: 'rgb(255 0 0 / 0.4)',
lineDash: [5, 5],
boundingBoxLineDash: [8, 4, 2, 4],
delta: {
lineDashOffset: -0.1,
boundingBoxLineDashOffset: 0.3,
},
}).clone({
name: name('mylabel_draw'),
startX: `${25 + 12.5}%`,
method: 'draw',
accessibleText: `${name('mylabel_draw')} says: §`,
accessibleTextOrder: 2,
}).clone({
name: name('mylabel_drawAndFill'),
startX: `${50 + 12.5}%`,
method: 'drawAndFill',
accessibleText: `${name('mylabel_drawAndFill')} says: §`,
accessibleTextOrder: 4,
}).clone({
name: name('mylabel_fillAndDraw'),
startX: `${75 + 12.5}%`,
method: 'fillAndDraw',
accessibleText: `${name('mylabel_fillAndDraw')} says: §`,
accessibleTextOrder: 6,
}).clone({
name: name('mylabel_drawThenFill'),
startX: `${0 + 12.5}%`,
startY: '67%',
method: 'drawThenFill',
accessibleText: `§ from ${name('mylabel_drawThenFill')}`,
accessibleTextOrder: 5,
}).clone({
name: name('mylabel_fillThenDraw'),
startX: `${25 + 12.5}%`,
method: 'fillThenDraw',
accessibleText: `${name('mylabel_fillThenDraw')} says: §`,
accessibleTextOrder: 3,
}).clone({
name: name('mylabel_clear'),
startX: `${50 + 12.5}%`,
method: 'clear',
accessibleText: `${name('mylabel_clear')} says: §`,
accessibleTextOrder: 1,
textIsAccessible: false,
});const setCursorTo = {
auto: () => {
canvas.set({
css: {
cursor: 'auto',
},
});
},
pointer: () => {
canvas.set({
css: {
cursor: 'grab',
},
});
},
grabbing: () => {
canvas.set({
css: {
cursor: 'grabbing',
},
});
},
};Create the drag-and-drop zone
const current = scrawl.makeDragZone({
zone: canvas,
endOn: ['up', 'leave'],
exposeCurrentArtefact: true,
preventTouchDefaultWhenDragging: true,
updateOnStart: setCursorTo.grabbing,
updateOnEnd: setCursorTo.pointer,
});Implement the hover check on the Canvas wrapper
canvas.set({
checkForEntityHover: true,
onEntityHover: setCursorTo.pointer,
onEntityNoHover: setCursorTo.auto,
});Function to display frames-per-second data, and other information relevant to the demo
const report = reportSpeed('#reportmessage', function () {
const dragging = current();
let rep = '';
document.fonts.forEach(k => {
if (k.status === 'loaded') rep +=(` ${k.family} ${k.weight} ${k.style}\n`)
})
return `Currently dragging: ${(typeof dragging !== 'boolean' && dragging) ? dragging.artefact.name : 'nothing'}
Loaded fonts:
${rep}`;
});Create the Display cycle animation
scrawl.makeRender({
name: name('animation'),
target: canvas,
afterShow: report,We have to tell the canvas to check UI for hovering states every Display cycle
commence: () => canvas.checkHover(),
});console.log(scrawl.library);Kill, and packet, functionality tests
console.log('Performing tests ...');
killArtefact(scrawl, canvas, name('mylabel_fill'), 4000);
killArtefact(scrawl, canvas, name('mylabel_fillAndDraw'), 6000);Accessible text manipulation
setTimeout(() => scrawl.library.artefact[name('mylabel_clear')].set({ textIsAccessible: true }), 8000);
setTimeout(() => scrawl.library.artefact[name('mylabel_drawAndFill')].set({ textIsAccessible: false }), 10000);