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'),
base = canvas.get('baseName');Namespacing boilerplate
const namespace = canvas.name;
const name = (n) => `${namespace}-${n}`;Get a handle on the popover element
const popover = document.querySelector('#mypopover');
const dragGroup = scrawl.makeGroup({
name: name('my-drag-group'),
order: 1,
host: base,
});
const closeButtonGroup = scrawl.makeGroup({
name: name('my-close-button-group'),
order: 2,
host: base,
});
const backgroundGroup = scrawl.makeGroup({
name: name('my-background-group'),
order: 0,
host: base,
});const arrow = scrawl.makeShape({
name: name('arrow'),
group: backgroundGroup,
pathDefinition: 'M266.2,703.1 h-178 L375.1,990 l287-286.9 H481.9 C507.4,365,683.4,91.9,911.8,25.5 877,15.4,840.9,10,803.9,10 525.1,10,295.5,313.4,266.2,703.1 z',
start: ['center', 'center'],
handle: ['center', 'center'],
strokeStyle: 'pink',
fillStyle: 'darkred',
lineWidth: 6,
lineJoin: 'round',
lineCap: 'round',
scale: 0.7,
scaleOutline: false,
roll: -90,
method: 'fillThenDraw',
});const shapeLabel = scrawl.makeLabel({
name: name('shape-label'),
group: dragGroup,
bringToFrontOnDrag: false,
text: 'Canvas shape: ???',
start: ['25%', '50%'],
handle: ['center', 'center'],
fontString: '24px "Roboto Sans"',
fillStyle: 'yellow',
boundingBoxStyle: 'yellow',
lineWidth: 1,
method: 'fill',
/** @this {import('../source/scrawl.js').LabelInstance} */
onEnter: function () {
canvas.set({ css: { cursor: 'pointer' }});
this.set({ showBoundingBox: true});
},
/** @this {import('../source/scrawl.js').LabelInstance} */
onLeave: function () {
canvas.set({ css: { cursor: 'auto' }});
this.set({ showBoundingBox: false});
},
});
const sizeLabel = shapeLabel.clone({
name: name('size-label'),
text: 'Canvas size: ???',
start: ['75%', '50%'],
});Close button
const closeButton = scrawl.makeRectangle({
name: name('close-button'),
group: closeButtonGroup,
rectangleWidth: 100,
rectangleHeight: 40,
radius: 6,
start: ['right', 'top'],
handle: ['center', 'center'],
offset: [-58, 28],
method: 'fillThenDraw',
fillStyle: 'white',
strokeStyle: 'orange',
lineWidth: 2,
/** @this {import('../source/scrawl.js').RectangleInstance} */
onEnter: function () {
canvas.set({ css: { cursor: 'pointer' }});
this.set({ fillStyle: 'yellow'});
},
/** @this {import('../source/scrawl.js').RectangleInstance} */
onLeave: function () {
canvas.set({ css: { cursor: 'auto' }});
this.set({ fillStyle: 'white'});
},
button: {
name: name('close-el'),
description: 'Close',
popoverTarget: 'mypopover',
popoverTargetAction: 'hide',
disabled: true,
},
/** @this {import('../source/scrawl.js').RectangleInstance} */
onUp: function () {
this.clickButton();
},
});
scrawl.makeLabel({
name: name('close-button-label'),
group: closeButtonGroup,
text: 'Close',
pivot: name('close-button'),
lockTo: 'pivot',
handle: ['center', 'center'],
fontString: '24px "Roboto Sans"',
fillStyle: 'black',
method: 'fill',
});Popover event listener
scrawl.addNativeListener('toggle', (e) => {
if (e.newState === 'open') {
closeButton.set({
buttonDisabled: false,
buttonAutofocus: true,
});The canvas gets resized by the browser but in the popover context this doesn’t get picked up.
reset function triggers the canvas to recalculate its current values outside of the Scrawl-canvas display cycle canvas.reset();
}
else {
closeButton.set({
buttonDisabled: true,
});
}
}, popover);scrawl.addListener('move', () => canvas.cascadeEventAction('move'), canvas.domElement);
scrawl.addListener('up', () => canvas.cascadeEventAction('up'), canvas.domElement);Drag zone for the size and shape labels
scrawl.makeDragZone({
zone: canvas,
collisionGroup: dragGroup,
endOn: ['up', 'leave'],
preventTouchDefaultWhenDragging: true,
});canvas.setDisplayShapeBreakpoints({
breakToBanner: 2,
breakToLandscape: 1.5,
breakToPortrait: 0.75,
breakToSkyscraper: 0.5,
breakToSmallest: (410 * 820),
breakToSmaller: (720 * 1000),
breakToLarger: (1000 * 1000),
breakToLargest: (1200 * 1000),
});
canvas.set({
actionBannerShape: () => {
shapeLabel.set({
text: 'Canvas shape: banner',
start: ['25%', '50%'],
});
sizeLabel.set({
start: ['75%', '50%'],
});
arrow.set({
roll: -90,
});
},
actionLandscapeShape: () => {
shapeLabel.set({
text: 'Canvas shape: landscape',
start: ['25%', '50%'],
});
sizeLabel.set({
start: ['75%', '50%'],
});
arrow.set({
roll: -112.5,
});
},
actionRectangleShape: () => {
shapeLabel.set({
text: 'Canvas shape: rectangular',
start: ['30%', '65%'],
});
sizeLabel.set({
start: ['70%', '65%'],
});
arrow.set({
roll: -135,
});
},
actionPortraitShape: () => {
shapeLabel.set({
text: 'Canvas shape: portrait',
start: ['50%', '25%'],
});
sizeLabel.set({
start: ['50%', '75%'],
});
arrow.set({
roll: -157.5,
});
},
actionSkyscraperShape: () => {
shapeLabel.set({
text: 'Canvas shape: skyscraper',
start: ['50%', '25%'],
});
sizeLabel.set({
start: ['50%', '75%'],
});
arrow.set({
roll: -180,
});
},
actionLargestArea: () => {
sizeLabel.set({
text: 'Canvas size: largest',
});
arrow.set({
scale: 1,
});
},
actionLargerArea: () => {
sizeLabel.set({
text: 'Canvas size: larger',
});
arrow.set({
scale: 0.85,
});
},
actionRegularArea: () => {
sizeLabel.set({
text: 'Canvas size: regular',
});
arrow.set({
scale: 0.7,
});
},
actionSmallerArea: () => {
sizeLabel.set({
text: 'Canvas size: smaller',
});
arrow.set({
scale: 0.55,
});
},
actionSmallestArea: () => {
sizeLabel.set({
text: 'Canvas size: smallest',
});
arrow.set({
scale: 0.4,
});
},
});Function to display frames-per-second data, and other information relevant to the demo
const report = reportSpeed('#reportmessage');Create the Display cycle animation
scrawl.makeRender({
name: name('animation'),
target: canvas,
afterShow: report,
});console.log(scrawl.library);