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 block and wheel entitys. For the sake of safety and sanity, create the (reference) entitys on which other artefacts will pivot and mimic first. Then create those other artefacts.
Note: setting this entity’s method value to none means that while it will perform all necessary calculations as part of the Display cycle, it will not complete its stamp action, thus will not appear on the display. This differs from setting its visibility attribute to false, which will make the entity skip both calculation and stamp operations
let myPivot = scrawl.makeWheel({
name: name('mouse-pivot'),
method: 'none',
startX: 'center',
startY: 'center',
});
const myblock = scrawl.makeBlock({
name: name('base-block'),
width: 150,
height: 100,
handleX: 'center',
handleY: 'center',
offsetX: -140,
offsetY: -50,To pivot this entity to the reference entity, we need to set both its pivot attribute (to the reference entity’s name, or the entity itself) and also set the lockTo attribute to the value ‘pivot’
pivot: name('mouse-pivot'),
lockTo: 'pivot',
fillStyle: 'darkblue',
strokeStyle: 'gold',
method: 'fillAndDraw',
lineWidth: 6,
lineJoin: 'round',
delta: {
roll: 0.5,
},
});
const mywheel = scrawl.makeWheel({
name: name('base-wheel'),
radius: 60,
startAngle: 35,
endAngle: -35,
handleX: 'center',
handleY: 'center',
offsetX: 140,
offsetY: 50,
pivot: name('mouse-pivot'),
lockTo: 'pivot',
fillStyle: 'purple',
strokeStyle: 'gold',
method: 'fillAndDraw',
lineWidth: 6,
lineJoin: 'round',
delta: {
roll: -0.5,
},
});
myblock.clone({
name: name('pivot-block'),
height: 30,
handleX: 'center',
handleY: 'center',
strokeStyle: 'red',
lineWidth: 3,
method: 'draw',
pivot: name('base-block'),
lockTo: 'pivot',
offsetX: 0,
offsetY: 110,
addPivotOffset: true,
delta: {
roll: 0,
},
}).clone({
name: name('pivot-wheel'),
pivot: name('base-wheel'),
addPivotRotation: true,
handleX: 0,
handleY: '50%',
offsetY: 0,
}).clone({
name: name('mimic-wheel'),mimic is an extended form of pivot
mimic: name('base-wheel'),
lockTo: 'mimic',When an entity mimics another entity’s dimensions, its own dimensions (width, height) can be added to the mimic dimensions
width: 20,
height: 20,Handles can be directly affected by mimic dimensions. If the entity adds its own dimensions to the mimics dimensions, then it may also need to add appropriate handle values to the mimic’s handle
handleX: 10,
handleY: 10,
strokeStyle: 'darkgreen',The default values for the useMimic and addOwn variables is ‘false’ - including false attributes here only for convenience during development work
useMimicDimensions: true,
useMimicScale: true,
useMimicStart: true,
useMimicHandle: true,
useMimicOffset: true,
useMimicRotation: true,
useMimicFlip: true,
addOwnDimensionsToMimic: true,
addOwnScaleToMimic: false,
addOwnStartToMimic: false,
addOwnHandleToMimic: true,
addOwnOffsetToMimic: false,
addOwnRotationToMimic: false,
});
mywheel.clone({
name: name('mimic-block'),
mimic: name('base-block'),
lockTo: 'mimic',
width: 60,
strokeStyle: 'darkgreen',
lineWidth: 3,
method: 'draw',
useMimicDimensions: true,
useMimicScale: true,
useMimicStart: true,
useMimicOffset: true,
useMimicRotation: true,
addOwnDimensionsToMimic: true,
});Function to display frames-per-second data, and other information relevant to the demo
const report = reportSpeed('#reportmessage', function () {
return `
clearAlpha: ${dom['clearAlpha'].value}`;
});Function to check whether mouse cursor is over canvas, and lock the reference entity accordingly
const mouseCheck = function () {
let active = false;
return function () {
if (canvas.here.active !== active) {
active = canvas.here.active;
myPivot.set({
lockTo: (active) ? 'mouse' : 'start'
});
}
};
}();Create the Display cycle animation
scrawl.makeRender({
name: name('animation'),
target: canvas,
commence: mouseCheck,
afterShow: report,
});scrawl.addNativeListener('touchmove', (e) => {
e.preventDefault();
e.returnValue = false;
}, canvas.domElement);Setup form observer functionality.
scrawl.makeUpdater({
event: ['input', 'change'],
origin: '.controlItem',
target: canvas.base,
useNativeListener: true,
preventDefault: true,
updates: {
backgroundColor: ['backgroundColor', 'raw'],
clearAlpha: ['clearAlpha', 'float'],
},
});Set the DOM input values
const dom = scrawl.initializeDomInputs([
['input', 'clearAlpha', '0.9'],
['select', 'backgroundColor', 0],
]);console.log(scrawl.library);
console.log('Performing tests ...');
killArtefact(scrawl, canvas, name('mouse-pivot'), 4000, () => {
myPivot = scrawl.findEntity(name('mouse-pivot'));
scrawl.findEntity(name('base-block')).set({
pivot: myPivot,
lockTo: 'pivot',
});
scrawl.findEntity(name('base-wheel')).set({
pivot: myPivot,
lockTo: 'pivot',
});
});
killArtefact(scrawl, canvas, name('mimic-block'), 6000);