scrawl-canvas/source/factory/gradient.js

Responsive, interactive and more accessible HTML5 canvas elements. Scrawl-canvas is a JavaScript library designed to make using the HTML5 canvas element easier, and more fun

// # Gradient factory
// Scrawl-canvas Gradient objects implement the Canvas API's [createLinearGradient](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient) method. The resulting [CanvasGradient](https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient) object can be used by any Scrawl-canvas entity as its `fillStyle` or `strokeStyle`.


// #### Imports
import { constructors } from '../core/library.js';

import { doCreate, pushUnique, Ωempty } from '../helper/utilities.js';

import { releaseCoordinate, requestCoordinate } from '../untracked-factory/coordinate.js';

import baseMix from '../mixin/base.js';
import stylesMix from '../mixin/styles.js';

// Shared constants
import { BLANK, STYLES, T_GRADIENT } from '../helper/shared-vars.js';

// Local constants
// + None defined


// #### Gradient constructor
const Gradient = function (items = Ωempty) {

    this.stylesInit(items);
    return this;
};


// #### Gradient prototype
const P = Gradient.prototype = doCreate();

P.type = T_GRADIENT;
P.lib = STYLES;
P.isArtefact = false;
P.isAsset = false;


// #### Mixins
baseMix(P);
stylesMix(P);


// #### Gradient attributes
// No additional attributes are defined in this file.

// #### Packet management
P.packetExclusions = pushUnique(P.packetExclusions, ['palette']);


// #### Clone management
// No additional clone functionality required


// #### Kill management
// No additional kill functionality required


// #### Get, Set, deltaSet
// No additional functionality required


// #### Prototype functions

// `buildStyle` - internal function: creates the linear gradient on the Cell's CanvasRenderingContext2D engine, and then adds the color stops to it.
P.buildStyle = function (cell) {

    if (cell) {

        const engine = cell.engine;

        if (engine) {

            const gradient = engine.createLinearGradient(...this.gradientArgs);

            return this.addStopsToGradient(gradient, this.paletteStart, this.paletteEnd, this.cyclePalette);
        }
    }
    return BLANK;
};

// `updateGradientArgs` - internal function
P.updateGradientArgs = function (x, y, roll) {

    const gradientArgs = this.gradientArgs,
        currentStart = this.currentStart,
        currentEnd = this.currentEnd;

    let sx = currentStart[0] + x,
        sy = currentStart[1] + y,
        ex = currentEnd[0] + x,
        ey = currentEnd[1] + y;

    // check to correct situation where coordinates represent a '0 x 0' box - which will cause errors in some browsers
    if (sx === ex && sy === ey) ex++;

    if (roll) {

        const coord = requestCoordinate();

        [sx, sy] = coord.setFromArray([sx, sy]).rotate(roll);
        [ex, ey] = coord.setFromArray([ex, ey]).rotate(roll);

        releaseCoordinate(coord);
    }

    gradientArgs.length = 0;
    gradientArgs.push(sx, sy, ex, ey);
};



// #### Factory
// ```
// scrawl.makeGradient({
//     name: 'colored-pipes',
//     endX: '100%',
//     cyclePalette: true,
//     colors: [
//         [0, 'black'],
//         [99, 'red'],
//         [199, 'black'],
//         [299, 'blue'],
//         [399, 'black'],
//         [499, 'gold'],
//         [599, 'black'],
//         [699, 'green'],
//         [799, 'black'],
//         [899, 'lavender'],
//         [999, 'black']
//     ],
// })
//
// scrawl.makeBlock({
//
//     name: 'animated-block',
//
//     width: 150,
//     height: 150,
//
//     startX: 180,
//     startY: 120,
//
//     handleX: 'center',
//     handleY: 'center',
//
//     strokeStyle: 'coral',
//     fillStyle: 'colored-pipes',
//     lineWidth: 2,
//
//     method: 'fillAndDraw',
// });
// ```
export const makeGradient = function (items) {

    if (!items) return false;
    return new Gradient(items);
};

constructors.Gradient = Gradient;