• Jump To … +
    ./source/core/animationloop.js ./source/core/component.js ./source/core/document.js ./source/core/events.js ./source/core/init.js ./source/core/library.js ./source/core/userInteraction.js ./source/core/utilities.js ./source/factory/action.js ./source/factory/anchor.js ./source/factory/animation.js ./source/factory/bezier.js ./source/factory/block.js ./source/factory/canvas.js ./source/factory/cell.js ./source/factory/cog.js ./source/factory/color.js ./source/factory/coordinate.js ./source/factory/element.js ./source/factory/emitter.js ./source/factory/filter.js ./source/factory/fontAttributes.js ./source/factory/gradient.js ./source/factory/grid.js ./source/factory/group.js ./source/factory/imageAsset.js ./source/factory/line.js ./source/factory/loom.js ./source/factory/mesh.js ./source/factory/net.js ./source/factory/noise.js ./source/factory/oval.js ./source/factory/palette.js ./source/factory/particle.js ./source/factory/particleForce.js ./source/factory/particleHistory.js ./source/factory/particleSpring.js ./source/factory/particleWorld.js ./source/factory/pattern.js ./source/factory/phrase.js ./source/factory/picture.js ./source/factory/polygon.js ./source/factory/polyline.js ./source/factory/quadratic.js ./source/factory/quaternion.js ./source/factory/radialGradient.js ./source/factory/rectangle.js ./source/factory/renderAnimation.js ./source/factory/shape.js ./source/factory/spiral.js ./source/factory/spriteAsset.js ./source/factory/stack.js ./source/factory/star.js ./source/factory/state.js ./source/factory/tetragon.js ./source/factory/ticker.js ./source/factory/tracer.js ./source/factory/tween.js ./source/factory/unstackedElement.js ./source/factory/vector.js ./source/factory/videoAsset.js ./source/factory/wheel.js ./source/mixin/anchor.js ./source/mixin/asset.js ./source/mixin/assetConsumer.js ./source/mixin/base.js ./source/mixin/cascade.js ./source/mixin/delta.js ./source/mixin/displayShape.js ./source/mixin/dom.js ./source/mixin/entity.js ./source/mixin/filter.js ./source/mixin/mimic.js ./source/mixin/path.js ./source/mixin/pattern.js ./source/mixin/pivot.js ./source/mixin/position.js ./source/mixin/shapeBasic.js ./source/mixin/shapeCurve.js ./source/mixin/shapePathCalculation.js ./source/mixin/styles.js ./source/mixin/tween.js ./source/worker/filter-string.js ./source/worker/filter.js
  • ¶

    Scrawl-canvas components

  • ¶

    To be aware - this functionality is HIGHLY EXPERIMENTAL; it will be subject to short-notice breaking changes as we amend and inprove the concept of Scrawl-canvas components

  • ¶

    TODO - documentation

  • ¶

    Imports

    import { isa_dom, isa_boolean, isa_obj } from "./utilities.js";
import { artefact, unstackedelement } from "./library.js";
import { makeAnimationObserver } from './events.js';

import { makeRender } from "../factory/renderAnimation.js";
import { makeUnstackedElement } from "../factory/unstackedElement.js";
  • ¶

    TODO - documentation

    const makeComponent = function (items) {

    let domElement = (isa_dom(items.domElement)) ? items.domElement : false,
        animationHooks = (isa_obj(items.animationHooks)) ? items.animationHooks : {},
        canvasSpecs = (isa_obj(items.canvasSpecs)) ? items.canvasSpecs : {},
        observerSpecs = (isa_obj(items.observerSpecs)) ? items.observerSpecs : {},
        includeCanvas = (isa_boolean(items.includeCanvas)) ? items.includeCanvas : true;

    if (domElement && domElement.id && artefact[domElement.id]) {

        return makeStackComponent(domElement, canvasSpecs, animationHooks, observerSpecs);
    }
    return makeUnstackedComponent(domElement, canvasSpecs, animationHooks, observerSpecs, includeCanvas);
};
  • ¶

    TODO - documentation

    const makeStackComponent = function (domElement, canvasSpecs, animationHooks, observerSpecs) {

    let myElement = artefact[domElement.id];

    if (!myElement) return false;

    canvasSpecs.isComponent = true;

    let myCanvas = myElement.addCanvas(canvasSpecs);

    animationHooks.name = `${myElement.name}-animation`;
    animationHooks.target = myCanvas;

    let myAnimation = makeRender(animationHooks);

    let myObserver = makeAnimationObserver(myAnimation, myElement, observerSpecs);

    let destroy = () => {
        myObserver();
        myAnimation.kill();
        myCanvas.demolish();
        myElement.demolish(true);
    };

    return {
        element: myElement,
        canvas: myCanvas,
        animation: myAnimation,
        demolish: destroy,
    };
};
  • ¶

    TODO - documentation

    const makeUnstackedComponent = function (domElement, canvasSpecs, animationHooks, observerSpecs, includeCanvas) {

    let myElement,
        id = domElement.id;

    if (id && unstackedelement[id]) myElement = unstackedelement[id];
    else myElement = makeUnstackedElement(domElement);

    canvasSpecs.isComponent = true;

    let myCanvas = (includeCanvas) ? myElement.addCanvas(canvasSpecs) : false;

    animationHooks.name = `${myElement.name}-animation`;
    if (myCanvas) {

        if (!animationHooks.afterClear) animationHooks.afterClear = () => myElement.updateCanvas();
        animationHooks.target = myCanvas;
    }

    let myAnimation = makeRender(animationHooks);

    let myObserver = makeAnimationObserver(myAnimation, myElement, observerSpecs);

    let destroy = () => {
        myObserver();
        myAnimation.kill();
        if (myCanvas) myCanvas.demolish();
        myElement.demolish(true);
    };

    return {
        element: myElement,
        canvas: myCanvas,
        animation: myAnimation,
        demolish: destroy,
    };
};
  • ¶

    TODO - documentation

    export {
    makeComponent,
};