import {
library as L,
makeBlock,
makeDragZone,
makeRender,
makeWheel,
} from '../source/scrawl.js';
import { reportSpeed, killArtefact } from './utilities.js';Block and Wheel entitys (make, clone, method); drag and drop block and wheel entitys
Various ways to import the SAcrawl-canvas library, depending on project requirements
// If library has been added to a project build using npm/yarn/etc and is being bundled:
import scrawl from 'scrawl';
// If library has been added to a public/dist folder in the code base:
import scrawl from './path/to/min/scrawl.js';
// If library is imported from a Content Distribution Network endpoint:
import scrawl from 'https://path/to/cdn/endpoint/scrawl-canvas';
// If the library is to be used in a TypeScript project, or for tree-shaking[1], then functions need to be imported individually:
import {
makeBlock,
makeWheel,
} from 'relevant-library-path-source';
// ...Or, alternatively, using the * notation:
import * as scrawl from 'relevant-library-path-source';
// [1] - Tree-shaking functionality to help package managers reduce the size of the shipped library code is on the road map for delivery as part of SC version 9.0.0
import {
library as L,
makeBlock,
makeDragZone,
makeRender,
makeWheel,
} from '../source/scrawl.js';
import { reportSpeed, killArtefact } from './utilities.js';let canvas = L.artefact.mycanvas;Create and clone block entitys
makeBlock({
name: 'myblock-fill',
width: 100,
height: 100,
startX: 25,
startY: 25,
fillStyle: 'green',
strokeStyle: 'gold',
lineWidth: 6,
lineJoin: 'round',
shadowOffsetX: 4,
shadowOffsetY: 4,
shadowBlur: 2,
shadowColor: 'black',
}).clone({
name: 'myblock-draw',
startX: 175,
method: 'draw',
sharedState: true
}).clone({
name: 'myblock-drawAndFill',
startX: 325,
method: 'drawAndFill',
}).clone({
name: 'myblock-fillAndDraw',
startX: 475,
method: 'fillAndDraw',
sharedState: true
}).clone({
name: 'myblock-drawThenFill',
startY: 175,
method: 'drawThenFill'
}).clone({
name: 'myblock-fillThenDraw',
startX: 325,
method: 'fillThenDraw',
sharedState: true
}).clone({
name: 'myblock-clear',
startX: 175,
method: 'clear'
});Create and clone Wheel entitys
makeWheel({
name: 'mywheel-fill',
radius: 50,
startAngle: 15,
endAngle: -15,
includeCenter: true,
startX: 475,
startY: 475,
fillStyle: 'purple',
strokeStyle: 'gold',
lineWidth: 6,
lineJoin: 'round',
shadowOffsetX: 4,
shadowOffsetY: 4,
shadowBlur: 2,
shadowColor: 'black',
purge: 'all',
}).clone({
name: 'mywheel-draw',
startX: 325,
method: 'draw',
sharedState: true
}).clone({
name: 'mywheel-drawAndFill',
startX: 175,
method: 'drawAndFill',
}).clone({
name: 'mywheel-fillAndDraw',
startX: 25,
method: 'fillAndDraw',
sharedState: true
}).clone({
name: 'mywheel-drawThenFill',
startY: 325,
method: 'drawThenFill'
}).clone({
name: 'mywheel-fillThenDraw',
startX: 175,
method: 'fillThenDraw',
sharedState: true
}).clone({
name: 'mywheel-clear',
startX: 325,
method: 'clear'
});Change the fill and stroke styles on one of the blocks, and one of the wheels, and any entitys sharing their respective states
L.artefact['myblock-fillAndDraw'].set({
fillStyle: 'blue',
strokeStyle: 'coral'
});Entitys can be found in both the ‘artefact’ and ‘entity’ sections of the library
L.entity['mywheel-fillAndDraw'].set({
fillStyle: 'blue',
strokeStyle: 'coral'
});let current = makeDragZone({
zone: canvas,
endOn: ['up', 'leave'],
exposeCurrentArtefact: true,
preventTouchDefaultWhenDragging: true,
});Function to display frames-per-second data, and other information relevant to the demo
const report = reportSpeed('#reportmessage', function () {
const dragging = current();
return `Currently dragging: ${(typeof dragging !== 'boolean' && dragging) ? dragging.artefact.name : 'nothing'}`;
});Create the Display cycle animation
makeRender({
name: 'demo-animation',
target: canvas,
afterShow: report,
});console.log(L);
console.log('Performing tests ...');
killArtefact(canvas, 'myblock-fill', 4000);
killArtefact(canvas, 'mywheel-fillAndDraw', 6000);