import * as scrawl from '../source/scrawl.js';
import { reportSpeed } from './utilities.js';import * as scrawl from '../source/scrawl.js';
import { reportSpeed } from './utilities.js';const canvas = scrawl.findCanvas('mycanvas');Namespacing boilerplate
const namespace = canvas.name;
const name = (n) => `${namespace}-${n}`;Create a Cell on the canvas
const cell1 = canvas.buildCell({
name: name('cell-1'),
width: 200,
height: 200,
startX: 150,
startY: 150,
handleX: '40%',
handleY: '40%',
delta: {
roll: -0.6,
},
backgroundColor: 'lightblue',
});Cells cannot be cloned (yet - may introduce that functionality in a future update)
const cell2 = canvas.buildCell({
name: name('cell-2'),
width: '20%',
height: '20%',
startX: '60%',
startY: '50%',
handleX: 30,
handleY: 50,
delta: {
roll: 0.4,
},
backgroundColor: 'lightblue',
});Create a shape track along which we can move a Cell
scrawl.makeOval({
name: name('mytrack'),
radiusX: '40%',
radiusY: '40%',
start: ['center', 'center'],
handle: ['center', 'center'],
strokeStyle: '#808080',
lineWidth: 10,
method: 'draw',
useAsPath: true,
});This Cell will animate along the track we created earlier
const cell3 = canvas.buildCell({
name: name('cell-3'),
width: 100,
height: 50,
handleX: 'center',
handleY: 'bottom',
path: name('mytrack'),
lockTo: 'path',
addPathRotation: true,
constantSpeedAlongPath: true,
delta: {
pathPosition: -0.001,
},
backgroundColor: 'black',
});Create some entitys to which we can pivot and mimic Cells
scrawl.makeGroup({
name: name('target-group'),
host: canvas.getBase(),
});
scrawl.makeBlock({
name: name('block-1'),
group: name('target-group'),
start: ['80%', '10%'],
handle: ['center', 'center'],
dimensions: ['18%', '18%'],
fillStyle: 'blue',
strokeStyle: 'coral',
lineWidth: 4,
delta: {
roll: -0.2,
},
method: 'fillThenDraw',
}).clone({
name: name('block-2'),
dimensions: [120, 100],
handle: ['left', 'top'],
startY: '60%',
roll: 30,
delta: {
roll: 0,
},
});Create the drag-and-drop zone
scrawl.makeDragZone({
zone: canvas,
collisionGroup: name('target-group'),
endOn: ['up', 'leave'],
preventTouchDefaultWhenDragging: true,
});Check to see if a Cell will mimic on an entity
const cell4 = canvas.buildCell({
name: name('cell-4'),
mimic: name('block-1'),
lockTo: 'mimic',
width: -20,
height: -20,
handleX: -10,
handleY: -10,
useMimicDimensions: true,
useMimicScale: true,
useMimicStart: true,
useMimicHandle: true,
useMimicOffset: false,
useMimicRotation: true,
addOwnDimensionsToMimic: true,
addOwnScaleToMimic: false,
addOwnStartToMimic: false,
addOwnHandleToMimic: true,
addOwnOffsetToMimic: false,
addOwnRotationToMimic: false,
backgroundColor: 'lavender',
});Check to see if a Cell will pivot to an entity
const cell5 = canvas.buildCell({
name: name('cell-5'),
pivot: name('block-2'),
lockTo: 'pivot',
dimensions: [110, 90],
handle: [-5, -5],
addPivotRotation: true,
backgroundColor: 'lavender',
});Add in a hover check
scrawl.findEntity(name('block-1')).set({
/** @this {import('../source/scrawl.js').BlockInstance} */
onEnter: function () {
this.set({ scale: 1.2 });
cell4.set({ backgroundColor: 'pink' });
},
/** @this {import('../source/scrawl.js').BlockInstance} */
onLeave: function () {
this.set({ scale: 1 });
cell4.set({ backgroundColor: 'lavender' });
},
});
scrawl.findEntity(name('block-2')).set({
onEnter: () => cell5.set({ backgroundColor: 'pink' }),
onLeave: () => cell5.set({ backgroundColor: 'lavender' }),
});
scrawl.addListener(
'move',
() => canvas.here.active && canvas.cascadeEventAction('move'),
canvas.domElement
);Add labels to Cells
scrawl.makeLabel({
name: name('label-1'),
group: name('cell-1'),
text: 'Cell 1',
fontString: '20px sans-serif',
fillStyle: 'red',
start: [5, 5],
}).clone({
name: name('label-2'),
group: name('cell-2'),
text: 'Cell 2',
start: ['center', 'center'],
handle: ['center', 'center'],
}).clone({
name: name('label-3'),
group: name('cell-3'),
text: 'Cell 3',
fillStyle: 'white',
}).clone({
name: name('label-4'),
group: name('cell-4'),
text: 'Cell 4',
fillStyle: 'green',
}).clone({
name: name('label-5'),
group: name('cell-5'),
text: 'Cell 5',
});.. Also add some other entitys to the Cells
scrawl.makeWheel({
name: name('wheel-1'),
group: name('cell-1'),
radius: 30,
start: [100, 120],
strokeStyle: 'red',
lineWidth: 8,
method: 'draw',
}).clone({
name: name('wheel-2'),
group: name('cell-2'),
radius: 40,
start: ['center', 'center'],
handle: ['center', 'center'],
}).clone({
name: name('wheel-3'),
group: canvas.get('baseGroup'),
strokeStyle: 'green',
start: ['85%', '85%'],
pivot: name('cell-3'),
lockTo: 'pivot',
});See if an entity can mimic a Cell
scrawl.makeBlock({
name: name('mimic-block'),
group: canvas.get('baseGroup'),
fillStyle: 'yellow',
strokeStyle: 'green',
lineWidth: 4,
method: 'fillThenDraw',
mimic: name('cell-2'),
lockTo: 'mimic',
width: 30,
height: 30,
handleX: 15,
handleY: 15,
useMimicDimensions: true,
useMimicScale: false,
useMimicStart: true,
useMimicHandle: true,
useMimicOffset: false,
useMimicRotation: true,
addOwnDimensionsToMimic: true,
addOwnScaleToMimic: false,
addOwnStartToMimic: false,
addOwnHandleToMimic: true,
addOwnOffsetToMimic: false,
addOwnRotationToMimic: false,
});Function to display frames-per-second data, and other information relevant to the demo
const report = reportSpeed('#reportmessage', function () {Warning: directly accessing current- attributes is dangerous. Directly setting current- attributes is fatal!
/** @ts-expect-error */
return ` Canvas dimensions: ${canvas.currentDimensions.join(', ')}\n Base dimensions: ${canvas.base.currentDimensions.join(', ')}\n Cell 1 dimensions: ${cell1.currentDimensions.join(', ')}\n Cell 2 dimensions: ${cell2.currentDimensions.join(', ')}\n Cell 3 dimensions: ${cell3.currentDimensions.join(', ')}\n Cell 4 dimensions: ${cell4.currentDimensions.join(', ')}\n Cell 5 dimensions: ${cell5.currentDimensions.join(', ')}`;
});Create the Display cycle animation
scrawl.makeRender({
name: name('animation'),
target: canvas,
afterShow: report,
});console.log(scrawl.library);