• Jump To … +
    ./demo/components/london-crime-graphic.js ./demo/components/london-crime-lines.js ./demo/components/london-crime-stacked-bars.js ./demo/components/simple-chart-frame-tests.js ./demo/components/simple-chart-frame.js ./demo/components/simple-graph-lines.js ./demo/components/simple-graph-stacked-bars.js ./demo/components/test-001.js ./demo/components/test-002.js
  • ¶

    Component definitions

    See test-001.js code for further details about component definitions

  • ¶

    Imports

    import scrawl from '../../source/scrawl.js'
  • ¶

    ‘Green box’ component

    Purpose: adds a translucent green box to an element.

    Function input: the DOM element, or a handle to it, as the only argument.

    Function output: a Javascript object will be returned, containing the following attributes

    {
    element     // the Scrawl-canvas wrapper for the DOM element supplied to the function
    canvas      // the Scrawl-canvas wrapper for the component's canvas
    animation   // the Scrawl-canvas animation object
    demolish    // remove the component from the Scrawl-canvas library
}

    Usage example:

    import scrawl from '../relative/or/absolute/path/to/scrawl.js';
import { greenBox } from './relative/or/absolute/path/to/this/file.js';

let myElements = document.querySelectorAll('.some-class');
myElements.forEach(el => greenBox(el));

    Effects on the element: no additional effects.

    const greenBox = (el) => {

    let component = scrawl.makeComponent({
        domElement: el,
    });

    if (component) {

        let canvas = component.canvas;
        canvas.setAsCurrentCanvas();

        scrawl.makeBlock({

            width: '50%',
            height: '50%',
            startX: '25%',
            startY: '25%',
            globalAlpha: 0.3,
            strokeStyle: 'lightgreen',
            lineWidth: 40,
            method: 'draw',
        });
    }

    return component;
};
  • ¶

    Exports

    export {
    greenBox,
}