Cell factory

import { artefact, asset, tween, radian, constructors, styles, stylesnames, cell, cellnames, group, canvas } from '../core/library.js';

import { generateUniqueString, isa_canvas, mergeOver, λthis, λnull, Ωempty } from '../core/utilities.js';

import { scrawlCanvasHold } from '../core/document.js';

import { getPixelRatio, getIgnorePixelRatio } from "../core/events.js";

import { makeGroup } from './group.js';
import { makeState } from './state.js';
import { makeCoordinate, requestCoordinate, releaseCoordinate } from './coordinate.js';
import { filterEngine } from './filterEngine.js';
import { importDomImage } from './imageAsset.js';

import baseMix from '../mixin/base.js';
import positionMix from '../mixin/position.js';
import deltaMix from '../mixin/delta.js';
import pivotMix from '../mixin/pivot.js';
import mimicMix from '../mixin/mimic.js';
import pathMix from '../mixin/path.js';
import anchorMix from '../mixin/anchor.js';
import cascadeMix from '../mixin/cascade.js';
import assetMix from '../mixin/asset.js';
import patternMix from '../mixin/pattern.js';
import filterMix from '../mixin/filter.js';

const Cell = function (items = Ωempty) {

    this.makeName(items.name);

    if (!items.isPool) this.register();

    this.initializePositions();
    this.initializeCascade();

    if (!isa_canvas(items.element)) {

        let mycanvas = document.createElement('canvas');
        mycanvas.id = this.name;

        mycanvas.width = 300;
        mycanvas.height = 150;
        items.element = mycanvas;
    }

    this.installElement(items.element);

    if (items.isPool) this.set(this.poolDefs) 
    else this.set(this.defs);

    this.set(items);

    this.state.setStateFromEngine(this.engine);

    if (!items.isPool) {

        makeGroup({
            name: this.name,
            host: this.name
        });
    }

    this.subscribers = [];
    this.sourceNaturalDimensions = makeCoordinate();
    this.dirtyDimensionsOverride = true;

    this.sourceLoaded = true;

    this.here = {};

    return this;
};

let P = Cell.prototype = Object.create(Object.prototype);
P.type = 'Cell';
P.lib = 'cell';
P.isArtefact = false;
P.isAsset = true;

P = baseMix(P);
P = assetMix(P);
P = positionMix(P);
P = deltaMix(P);
P = pivotMix(P);
P = mimicMix(P);
P = pathMix(P);
P = anchorMix(P);
P = cascadeMix(P);
P = patternMix(P);
P = filterMix(P);

let defaultAttributes = {

    cleared: true,

    compiled: true,

    shown: true,

    compileOrder: 0,
    showOrder: 0,

    backgroundColor: '',

    clearAlpha: 0,

    alpha: 1,
    composite: 'source-over',

    scale: 1,

    flipReverse: false,
    flipUpend: false,

    filter: 'none',

    isBase: false,

    useAsPattern: false,

    controller: null,

    includeInCascadeEventActions: false,
};
P.defs = mergeOver(P.defs, defaultAttributes);

delete P.defs.source;
delete P.defs.sourceLoaded;

P.stringifyFunction = λnull;
P.processPacketOut = λnull;
P.finalizePacketOut = λnull;
P.saveAsPacket = function () {

    return `[${this.name}, ${this.type}, ${this.lib}, {}]`
};
P.clone = λthis;

P.factoryKill = function () {

    let myname = this.name

    Object.entries(canvas).forEach(([name, cvs]) => {

        if (cvs.cells.indexOf(myname) >= 0) cvs.removeCell(myname);

        if (cvs.base && cvs.base.name === myname) {

            cvs.set({
                visibility: false,
            });
        }
    });

    Object.entries(artefact).forEach(([name, art]) => {

        if (art.name !== myname) {

            let state = art.state;

            if (state) {

                let fill = state.fillStyle,
                    stroke = state.strokeStyle;

                if (fill.name && fill.name === myname) state.fillStyle = state.defs.fillStyle;
                if (stroke.name && stroke.name === myname) state.strokeStyle = state.defs.strokeStyle;
            }
        }
    });

    if (group[myname]) group[myname].kill();
};

let G = P.getters, 
    S = P.setters,
    D = P.deltaSetters;

P.get = function (item) {

    let getter = this.getters[item];

    if (getter) return getter.call(this);

    else {

        let def = this.defs[item],
            state = this.state,
            val;

        if (typeof def != 'undefined') {

            val = this[item];
            return (typeof val != 'undefined') ? val : def;
        }

        def = state.defs[item];

        if (typeof def != 'undefined') {

            val = state[item];
            return (typeof val != 'undefined') ? val : def;
        }
        return undef;
    }
};

G.width = function () {

    return this.currentDimensions[0] || this.element.getAttribute('width');
};
S.width = function (val) {

    if (val != null) {

        this.dimensions[0] = val;
        this.dirtyDimensions = true;
        this.dirtyDimensionsOverride = true;
    }
};

G.height = function () {

    return this.currentDimensions[1] || this.element.getAttribute('height');
};
S.height = function (val) {

    if (val != null) {

        this.dimensions[1] = val;
        this.dirtyDimensions = true;
        this.dirtyDimensionsOverride = true;
    }
};

G.dimensions = function () {

    const w = this.currentDimensions[0] || this.element.getAttribute('width');
    const h = this.currentDimensions[1] || this.element.getAttribute('height');

    return [w, h];
};
S.dimensions = function (w, h) {

    this.setCoordinateHelper('dimensions', w, h);
    this.dirtyDimensions = true;
    this.dirtyDimensionsOverride = true;
};

S.source = function () {};
S.engine = function (item) {};
S.state = function (item) {};

S.element = function (item) {

    if(isa_canvas(item)) this.installElement(item);
};

S.backgroundColor = function (item) {

    if ('rgba(0, 0, 0, 0)' === item || 'transparent' === item || '#00000000' === item || '#0000' === item) item = '';
    this.backgroundColor = item;
};

S.cleared = function (item) {

    this.cleared = item;
    this.updateControllerCells();
};
S.compiled = function (item) {

    this.compiled = item;
    this.updateControllerCells();
};
S.shown = function (item) {

    this.shown = item;
    this.updateControllerCells();
};

S.compileOrder = function (item) {

    this.compileOrder = item;
    this.updateControllerCells();
};
S.showOrder = function (item) {

    this.showOrder = item;
    this.updateControllerCells();
};

S.stashX = function (val) {

    if (!this.stashCoordinates) this.stashCoordinates = [0, 0];
    this.stashCoordinates[0] = val;
};
S.stashY = function (val) {

    if (!this.stashCoordinates) this.stashCoordinates = [0, 0];
    this.stashCoordinates[1] = val;
};
S.stashWidth = function (val) {

    if (!this.stashDimensions) {

        let dims = this.currentDimensions;
        this.stashDimensions = [dims[0], dims[1]];
    }
    this.stashDimensions[0] = val;
};
S.stashHeight = function (val) {

    if (!this.stashDimensions) {

        let dims = this.currentDimensions;
        this.stashDimensions = [dims[0], dims[1]];
    }
    this.stashDimensions[1] = val;
};
D.stashX = function (val) {

    if (!this.stashCoordinates) this.stashCoordinates = [0, 0];

    let c = this.stashCoordinates;
    c[0] = addStrings(c[0], val);
};
D.stashY = function (val) {

    if (!this.stashCoordinates) this.stashCoordinates = [0, 0];

    let c = this.stashCoordinates;
    c[1] = addStrings(c[1], val);
};
D.stashWidth = function (val) {

    if (!this.stashDimensions) {

        let dims = this.currentDimensions;
        this.stashDimensions = [dims[0], dims[1]];
    }

    let c = this.stashDimensions;
    c[0] = addStrings(c[0], val);
};
D.stashHeight = function (val) {

    if (!this.stashDimensions) {

        let dims = this.currentDimensions;
        this.stashDimensions = [dims[0], dims[1]];
    }

    let c = this.stashDimensions;
    c[1] = addStrings(c[1], val);
};

S.clearAlpha = function (val) {

    if (val.toFixed) {

        if (val > 1) val = 1;
        else if (val < 0) val = 0;

        this.clearAlpha = val;
    }
};
D.clearAlpha = function (val) {

    if (val.toFixed) {

        val += this.clearAlpha;

        if (val > 1) val = 1;
        else if (val < 0) val = 0;

        this.clearAlpha = val;
    }
};

S.smoothFont = function (item) {

    const { element } = this;

    if (element) {

        const { style } = element;

        if (style) {

            if (item) {
                style['webkitFontSmoothing'] = 'auto';
                style['mozOsxFontSmoothing'] = 'auto';
                style['smoothFont'] = 'auto';
            }
            else {
                style['webkitFontSmoothing'] = 'none';
                style['mozOsxFontSmoothing'] = 'grayscale';
                style['smoothFont'] = 'never';
            }
        }
    }
};

S.checkForEntityHover = function (item) {

    group[this.name].set({
        checkForEntityHover: item,
    });
};
S.onEntityHover = function (item) {

    group[this.name].set({
        onEntityHover: item,
    });
};
S.onEntityNoHover = function (item) {

    group[this.name].set({
        onEntityNoHover: item,
    });
};

P.checkSource = function (width, height) {

    if (this.currentDimensions[0] !== width || this.currentDimensions[1] !== height) this.notifySubscribers();
};

P.getData = function (entity, cell) {

    this.checkSource(this.sourceNaturalDimensions[0], this.sourceNaturalDimensions[1]);

    return this.buildStyle(cell);
};

P.updateArtefacts = function (items = Ωempty) {

    const gb = this.groupBuckets;

    let art, ab, i, iz, j, jz;

    for (i = 0, iz = gb.length; i < iz; i++) {

        ab = gb[i].artefactCalculateBuckets;

        for (j = 0, jz = ab.length; j < jz; j++) {

            art = ab[j];

            if (items.dirtyScale) art.dirtyScale = true;
            if (items.dirtyDimensions) art.dirtyDimensions = true;
            if (items.dirtyLock) art.dirtyLock = true;
            if (items.dirtyStart) art.dirtyStart = true;
            if (items.dirtyOffset) art.dirtyOffset = true;
            if (items.dirtyHandle) art.dirtyHandle = true;
            if (items.dirtyRotation) art.dirtyRotation = true;
            if (items.dirtyPathObject) art.dirtyPathObject = true;
        }
    }
};

P.cleanDimensionsAdditionalActions = function() {

    let element = this.element;

    if (element) {

        let control = this.controller,
            current = this.currentDimensions,
            base = this.isBase;

        let ignoreDpr = getIgnorePixelRatio();
        let dpr = getPixelRatio();

        if (this.cleared || this.dirtyDimensionsOverride) {

            this.dirtyDimensionsOverride = false;

            if (ignoreDpr) {

                if (base && control && (control.baseMatchesCanvasDimensions || control.isComponent)) {

                    let controlDims = this.controller.currentDimensions,
                        dims = this.dimensions;

                    dims[0] = current[0] = controlDims[0];
                    dims[1] = current[1] = controlDims[1];
                }

                let [w, h] = current;

                element.width = w;
                element.height = h;
            }
            else {

                if (base && control && (control.baseMatchesCanvasDimensions || control.isComponent)) {

                    let controlDims = this.controller.currentDimensions,
                        dims = this.dimensions;

                    dims[0] = current[0] = controlDims[0];
                    dims[1] = current[1] = controlDims[1];
                }

                let [w, h] = current;

                if (ignoreDpr) {

                    element.width = w;
                    element.height = h;
                }
                else {

                    element.width = w * dpr;
                    element.height = h * dpr;
                }
            }

            this.setEngineFromState(this.engine);

            if (base && control) control.updateBaseHere();

            if (this.groupBuckets) {

                this.updateArtefacts({
                    dirtyDimensions: true,
                });
            }
        }
    }
};

P.notifySubscriber = function (sub) {

    if (!sub.sourceNaturalDimensions) sub.sourceNaturalDimensions = [];

    sub.sourceNaturalWidth = this.currentDimensions[0];
    sub.sourceNaturalHeight = this.currentDimensions[1];

    sub.sourceLoaded = true;
    sub.dirtyImage = true;

    sub.dirtyCopyStart = true;
    sub.dirtyCopyDimensions = true;
};

P.subscribeAction = function (sub = {}) {

    this.subscribers.push(sub);
    sub.asset = this;
    sub.source = this.element;
    this.notifySubscriber(sub)
};

P.installElement = function (element) {

    this.element = element;
    this.engine = this.element.getContext('2d');

    this.state = makeState({
        engine: this.engine,
    });

    return this;
};

P.updateControllerCells = function () {

    const { controller, currentHost } = this;

    if (controller) controller.dirtyCells = true;
    else if (currentHost) {

        let host = currentHost.getHost();

        if (host) host.dirtyCells = true;
    }
};

P.setEngineFromState = function (engine) {

    const state = this.state,
        stateKeys = state.allKeys,
        stateKeysLen = stateKeys.length;

    let i, iz, key, eVal, sVal;

    for (i = 0; i < stateKeysLen; i++) {

        key = stateKeys[i];
        eVal = engine[key];
        sVal = state[key];

        if (key === 'lineDash') {

            engine.lineDash = sVal;
            engine.setLineDash(engine.lineDash);
        }
        else if (eVal !== sVal) engine[key] = sVal;
    }
    if (engine.textAlign !== 'left') engine.textAlign = 'left';
    if (engine.textBaseline !== 'top') engine.textBaseline = 'top';

    return this;
};

P.setToDefaults = function () {

    let items = this.state.defs,
        state = this.state,
        engine = this.engine,
        isArray = Array.isArray;

    Object.entries(items).forEach(([key, value]) => {

        if (key === 'lineDash') {

            if (!isArray(engine.lineDash)) engine.lineDash = [];
            else engine.lineDash.length = 0;

            if (!isArray(state.lineDash)) state.lineDash = [];
            else state.lineDash.length = 0;
        }
        else {

            engine[key] = value;
            state[key] = value;
        }
    });

    engine.textAlign = state.textAlign = 'left';
    engine.textBaseline = state.textBaseline = 'top';

    return this;
};

P.stylesArray = ['Gradient', 'RadialGradient', 'Pattern'];
P.setEngine = function (entity) {

    const state = this.state,
        entityState = entity.state;

    if (entityState) {

        let engine, item,
            changes = entityState.getChanges(entity, state),
            action = this.setEngineActions,
            stylesArray = this.stylesArray;

        if (Object.keys(changes).length) {

            engine = this.engine;

            for (item in changes) {

                action[item](changes[item], engine, stylesArray, entity, this);
                state[item] = changes[item];
            }
        }
    }
    return entity;
};

P.setEngineActions = {

    fillStyle: function (item, engine, stylesArray, entity, layer) {

        if (item.substring) {

            let brokenStyle = false;

            if (stylesnames.indexOf(item) >= 0) brokenStyle = styles[item];
            else if (cellnames.indexOf(item) >= 0) brokenStyle = cell[item];

            if (brokenStyle) {
                
                entity.state.fillStyle = brokenStyle;
                engine.fillStyle = brokenStyle.getData(entity, layer);
            }
            else engine.fillStyle = item;
        }
        else engine.fillStyle = item.getData(entity, layer);
    },

    filter: function (item, engine) {
        engine.filter = item;
    },

    font: function (item, engine) {
        engine.font = item;
    },

    globalAlpha: function (item, engine) {
        engine.globalAlpha = item;
    },

    globalCompositeOperation: function (item, engine) {
        engine.globalCompositeOperation = item;
    },

    imageSmoothingEnabled: function (item, engine) {
        engine.imageSmoothingEnabled = item;
    },

    imageSmoothingQuality: function (item, engine) {
        engine.imageSmoothingQuality = item;
    },

    lineCap: function (item, engine) {
        engine.lineCap = item;
    },

    lineDash: function (item, engine) {
        engine.lineDash = item;
        if (engine.setLineDash) engine.setLineDash(item);
    },

    lineDashOffset: function (item, engine) {
        engine.lineDashOffset = item;
    },

    lineJoin: function (item, engine) {
        engine.lineJoin = item;
    },

    lineWidth: function (item, engine) {
        engine.lineWidth = item;
    },

    miterLimit: function (item, engine) {
        engine.miterLimit = item;
    },

    shadowBlur: function (item, engine) {
        engine.shadowBlur = item;
    },

    shadowColor: function (item, engine) {
        engine.shadowColor = item;
    },

    shadowOffsetX: function (item, engine) {
        engine.shadowOffsetX = item;
    },

    shadowOffsetY: function (item, engine) {
        engine.shadowOffsetY = item;
    },

    strokeStyle: function (item, engine, stylesArray, entity, layer) {

        if (item.substring) {

            let brokenStyle = false;

            if (stylesnames.indexOf(item) >= 0) brokenStyle = styles[item];
            else if (cellnames.indexOf(item) >= 0) brokenStyle = cell[item];

            if (brokenStyle) {
                
                entity.state.strokeStyle = brokenStyle;
                engine.strokeStyle = brokenStyle.getData(entity, layer);
            }
            else engine.strokeStyle = item;
        }
        else engine.strokeStyle = item.getData(entity, layer);
    },
};

P.clearShadow = function () {

    this.engine.shadowOffsetX = 0.0;
    this.engine.shadowOffsetY = 0.0;
    this.engine.shadowBlur = 0.0;
    this.state.shadowOffsetX = 0.0;
    this.state.shadowOffsetY = 0.0;
    this.state.shadowBlur = 0.0;

    return this;
};

P.restoreShadow = function (entity) {

    let state = entity.state;

    this.engine.shadowOffsetX = state.shadowOffsetX;
    this.engine.shadowOffsetY = state.shadowOffsetY;
    this.engine.shadowBlur = state.shadowBlur;
    this.state.shadowOffsetX = state.shadowOffsetX;
    this.state.shadowOffsetY = state.shadowOffsetY;
    this.state.shadowBlur = state.shadowBlur;

    return this;
};

P.setToClearShape = function () {

    this.engine.fillStyle = 'rgba(0,0,0,0)';
    this.engine.strokeStyle = 'rgba(0,0,0,0)';
    this.engine.shadowColor = 'rgba(0,0,0,0)';
    this.state.fillStyle = 'rgba(0,0,0,0)';
    this.state.strokeStyle = 'rgba(0,0,0,0)';
    this.state.shadowColor = 'rgba(0,0,0,0)';

    return this;
};

P.saveEngine = function () {

    this.engine.save();
    return this;
};

P.restoreEngine = function () {

    this.engine.restore();
    return this;
};

P.getComputedFontSizes = function () {

    let host = this.getHost();

    if (host && host.domElement) {

        let em = window.getComputedStyle(host.domElement),
            rem = window.getComputedStyle(document.documentElement);

        return [parseFloat(em.fontSize), parseFloat(rem.fontSize), window.innerWidth, window.innerHeight];
    }
    return false;
}

const checkEngineScale = function (engine) {

    if (engine) {

        engine.setTransform(1,0,0,1,0,0);

        if (getIgnorePixelRatio()) engine.scale(1, 1);
        else {

            const dpr = getPixelRatio();
            engine.scale(dpr, dpr);
            return dpr;
        }
    }
    return 1;
};

P.clear = function () {

    const {element, engine, backgroundColor, clearAlpha, currentDimensions} = this;
    const [width, height] = currentDimensions;

    this.prepareStamp();

    let dpr = checkEngineScale(engine);

    let w = width * dpr,
        h = height * dpr;

    if (this.useAsPattern) {

        element.width = width;
        element.height = height;
    }

    if (backgroundColor) {

        engine.save();
        engine.fillStyle = backgroundColor;
        engine.globalCompositeOperation = 'source-over';
        engine.globalAlpha = 1;
        engine.fillRect(0, 0, width, height);
        engine.restore();
    }
    else if (clearAlpha) {

        engine.save();
        let tempCell = requestCell();
        
        let {engine:tempEngine, element:tempEl} = tempCell;

        if (this.useAsPattern) {

            tempEl.width = width;
            tempEl.height = height;

            tempEngine.drawImage(element, 0, 0, width, height, 0, 0, width, height);
            
            engine.clearRect(0, 0, width, height);
            engine.globalAlpha = clearAlpha;

            engine.drawImage(tempEl, 0, 0, width, height, 0, 0, width, height);
        }
        else {
            tempEl.width = w;
            tempEl.height = h;

            tempEngine.drawImage(element, 0, 0, width, height, 0, 0, width, height);
            
            engine.clearRect(0, 0, width, height);
            engine.globalAlpha = clearAlpha;

            engine.drawImage(tempEl, 0, 0, w, h, 0, 0, width, height);
        }
        engine.restore();

        releaseCell(tempCell);
    }
    else engine.clearRect(0, 0, width, height);
};

P.compile = function(){

    let mystash = this.stashOutput;

    this.sortGroups();

    if (!this.cleared) this.prepareStamp();

    if(this.dirtyFilters || !this.currentFilters) this.cleanFilters();

    checkEngineScale(this.engine);

    const gb = this.groupBuckets,
        gbLen = gb.length;

    for (let i = 0, grp; i < gbLen; i++) {

        grp = gb[i];
        if (grp && grp.stamp) grp.stamp();
    }

    if (!this.noFilters && this.filters && this.filters.length) this.applyFilters();
    this.stashOutputAction();
};

P.show = function () {

    let host = this.getHost(),
        engine = (host && host.engine) ? host.engine : false;

    if (engine) {

        let floor = Math.floor,
            hostDimensions = host.currentDimensions,
            destWidth = floor(hostDimensions[0]),
            destHeight = floor(hostDimensions[1]);

        if (!destWidth || !destHeight) return false;

        let { currentScale:scale, currentDimensions, composite, alpha, controller, element, isBase, currentStampHandlePosition:handle, currentStampPosition:stamp } = this;

        let curWidth = floor(currentDimensions[0]),
            curHeight = floor(currentDimensions[1]),
            paste;

        engine.save();

        checkEngineScale(engine);
            
        engine.filter = this.filter;

        if (isBase) {

            if (!this.basePaste) this.basePaste = [];
            paste = this.basePaste;

            if (!this.cleared && !this.compiled) this.prepareStamp();

            engine.globalCompositeOperation = 'source-over';
            engine.globalAlpha = 1;
            engine.clearRect(0, 0, destWidth, destHeight);

            engine.globalCompositeOperation = composite;
            engine.globalAlpha = alpha;

            let fit = (controller) ? controller.fit : 'none',
                relWidth, relHeight;

            switch (fit) {

                case 'contain' :

                    relWidth = destWidth / (curWidth || 1);
                    relHeight = destHeight / (curHeight || 1);

                    if (relWidth > relHeight) {

                        paste[0] = floor((destWidth - (curWidth * relHeight)) / 2);
                        paste[1] = 0;
                        paste[2] = floor(curWidth * relHeight);
                        paste[3] = floor(curHeight * relHeight);
                    }
                    else {

                        paste[0] = 0;
                        paste[1] = floor((destHeight - (curHeight * relWidth)) / 2);
                        paste[2] = floor(curWidth * relWidth);
                        paste[3] = floor(curHeight * relWidth);
                    }
                    break;

                case 'cover' :

                    relWidth = destWidth / (curWidth || 1);
                    relHeight = destHeight / (curHeight || 1);

                    if (relWidth < relHeight) {

                        paste[0] = floor((destWidth - (curWidth * relHeight)) / 2);
                        paste[1] = 0;
                        paste[2] = floor(curWidth * relHeight);
                        paste[3] = floor(curHeight * relHeight);
                    }
                    else{

                        paste[0] = 0;
                        paste[1] = floor((destHeight - (curHeight * relWidth)) / 2);
                        paste[2] = floor(curWidth * relWidth);
                        paste[3] = floor(curHeight * relWidth);
                    }
                    break;

                case 'fill' :

                    paste[0] = 0;
                    paste[1] = 0;
                    paste[2] = floor(destWidth);
                    paste[3] = floor(destHeight);
                    break;

                case 'none' :
                default :

                    paste[0] = floor((destWidth - curWidth) / 2);
                    paste[1] = floor((destHeight - curHeight) / 2);
                    paste[2] = curWidth;
                    paste[3] = curHeight;
            }
        }
        else if (scale > 0) {

            if (!this.paste) this.paste = [];
            paste = this.paste;

            if (!this.noDeltaUpdates) this.setDelta(this.delta);

            if (!this.cleared && !this.compiled) this.prepareStamp();

            engine.globalCompositeOperation = composite;
            engine.globalAlpha = alpha;

            paste[0] = floor(-handle[0] * scale);
            paste[1] = floor(-handle[1] * scale);
            paste[2] = floor(curWidth * scale);
            paste[3] = floor(curHeight * scale);

            this.rotateDestination(engine, ...stamp);
        }
        engine.drawImage(element, 0, 0, curWidth, curHeight, ...paste);
        engine.restore();
    }
};

P.applyFilters = function () {

    let engine = this.engine;

    let image = engine.getImageData(0, 0, this.currentDimensions[0], this.currentDimensions[1]);

    this.preprocessFilters(this.currentFilters);

    let img = filterEngine.action({
        identifier: this.filterIdentifier,
        image: image,
        filters: this.currentFilters
    });

    if (img) engine.putImageData(img, 0, 0);
};

P.stashOutputAction = function () {

    if (this.stashOutput) {

        this.stashOutput = false;

        let { currentDimensions, stashCoordinates, stashDimensions, engine } = this;

        let [cellWidth, cellHeight] = currentDimensions;

        let stashX = (stashCoordinates) ? stashCoordinates[0] : 0, 
            stashY = (stashCoordinates) ? stashCoordinates[1] : 0, 
            stashWidth = (stashDimensions) ? stashDimensions[0] : cellWidth, 
            stashHeight = (stashDimensions) ? stashDimensions[1] : cellHeight;

        if (stashWidth.substring || stashHeight.substring || stashX.substring || stashY.substring || stashX || stashY || stashWidth !== cellWidth || stashHeight !== cellHeight) {

            if (stashWidth.substring) stashWidth = (parseFloat(stashWidth) / 100) * cellWidth;
            if (isNaN(stashWidth) || stashWidth <= 0) stashWidth = 1;
            if (stashWidth > cellWidth) stashWidth = cellWidth;

            if (stashHeight.substring) stashHeight = (parseFloat(stashHeight) / 100) * cellHeight;
            if (isNaN(stashHeight) || stashHeight <= 0) stashHeight = 1;
            if (stashHeight > cellHeight) stashHeight = cellHeight;

            if (stashX.substring) stashX = (parseFloat(stashX) / 100) * cellWidth;
            if (isNaN(stashX) || stashX < 0) stashX = 0;
            if (stashX + stashWidth > cellWidth) stashX = cellWidth - stashWidth;

            if (stashY.substring) stashY = (parseFloat(stashY) / 100) * cellHeight;
            if (isNaN(stashY) || stashY < 0) stashY = 0;
            if (stashY + stashHeight > cellHeight) stashY = cellHeight - stashHeight;
        }

        engine.save();
        engine.setTransform(1, 0, 0, 1, 0, 0);
        this.stashedImageData = engine.getImageData(stashX, stashY, stashWidth, stashHeight);
        engine.restore();

        if (this.stashOutputAsAsset) {

            this.stashOutputAsAsset = false;

            let sourcecanvas, mycanvas;
                
            mycanvas = requestCell();
            sourcecanvas = mycanvas.element;

            sourcecanvas.width = stashWidth;
            sourcecanvas.height = stashHeight;

            mycanvas.engine.putImageData(this.stashedImageData, 0, 0);

            if (!this.stashedImage) {

                let newimg = this.stashedImage = document.createElement('img');

                newimg.id = `${this.name}-image`;

                newimg.onload = function () {

                    scrawlCanvasHold.appendChild(newimg);
                    importDomImage(`#${newimg.id}`);
                };

                newimg.src = sourcecanvas.toDataURL();
            }
            else this.stashedImage.src = sourcecanvas.toDataURL();

            releaseCell(mycanvas);
        }
    }
};

P.getHost = function () {

    if (this.currentHost) return this.currentHost;
    else if (this.host) {

        let host = asset[this.host] || artefact[this.host];

        if (host) this.currentHost = host;
        
        return (host) ? this.currentHost : false;
    }
    return false;
};

P.updateBaseHere = function (controllerHere, fit) {

    if (this.isBase) {

        if (!this.here) this.here = {};
        let here = this.here,
            dims = this.currentDimensions;

        let active = controllerHere.active;

        let controllerWidth = (controllerHere.localListener) ? controllerHere.originalWidth : controllerHere.w;
        let controllerHeight = (controllerHere.localListener) ? controllerHere.originalHeight : controllerHere.h;

        if (dims[0] !== controllerWidth || dims[1] !== controllerHeight) {

            if (!this.basePaste) this.basePaste = [];

            let pasteX = this.basePaste[0];

            let localWidth = dims[0],
                localHeight = dims[1],
                remoteWidth = controllerWidth,
                remoteHeight = controllerHeight,
                remoteX = controllerHere.x,
                remoteY = controllerHere.y;

            let relWidth = localWidth / remoteWidth || 1,
                relHeight = localHeight / remoteHeight || 1,
                round = Math.round,
                offsetX, offsetY;

            here.w = localWidth;
            here.h = localHeight;

            switch (fit) {

                case 'contain' :
                case 'cover' :

                    if (pasteX) {

                        offsetX = (remoteWidth - (localWidth / relHeight)) / 2;

                        here.x = round((remoteX - offsetX) * relHeight);
                        here.y = round(remoteY * relHeight);
                    }
                    else {

                        offsetY = (remoteHeight - (localHeight / relWidth)) / 2;

                        here.x = round(remoteX * relWidth);
                        here.y = round((remoteY - offsetY) * relWidth);
                    }
                    break;

                case 'fill' :
                    here.x = round(remoteX * relWidth);
                    here.y = round(remoteY * relHeight);
                    break;

                case 'none' :
                default :
                    offsetX = (remoteWidth - localWidth) / 2;
                    offsetY = (remoteHeight - localHeight) / 2;

                    here.x = round(remoteX - offsetX);
                    here.y = round(remoteY - offsetY);
            }

            if (here.x < 0 || here.x > localWidth) active = false;
            if (here.y < 0 || here.y > localHeight) active = false;

            here.active = active;
        }
        else {

            here.x = controllerHere.x;
            here.y = controllerHere.y;
            here.w = controllerWidth;
            here.h = controllerHeight;
            here.active = active;
        }
        controllerHere.baseActive = active;
    }
};

P.prepareStamp = function () {

    if (this.dirtyScale || this.dirtyDimensions || this.dirtyStart || this.dirtyOffset || this.dirtyHandle) this.dirtyPathObject = true;

    if (this.dirtyScale) this.cleanScale();

    if (this.dirtyDimensions) {

        this.cleanDimensions();
        this.dirtyAssetSubscribers = true;
    }

    if (this.dirtyLock) this.cleanLock();
    if (this.dirtyStart) this.cleanStart();
    if (this.dirtyOffset) this.cleanOffset();
    if (this.dirtyHandle) this.cleanHandle();
    if (this.dirtyRotation) this.cleanRotation();

    if (this.isBeingDragged || this.lockTo.indexOf('mouse') >= 0) {

        this.dirtyStampPositions = true;
        this.dirtyStampHandlePositions = true;
    }

    if (this.dirtyStampPositions) this.cleanStampPositions();
    if (this.dirtyStampHandlePositions) this.cleanStampHandlePositions();

    if (this.dirtyPathObject) this.cleanPathObject();

    if (this.dirtyPositionSubscribers) this.updatePositionSubscribers();

    if (this.dirtyAssetSubscribers) {

        this.dirtyAssetSubscribers = false;
        this.notifySubscribers();
    }
};

P.cleanPathObject = function () {

    this.dirtyPathObject = false;

    if (!this.noPathUpdates || !this.pathObject) {

        let p = this.pathObject = new Path2D();
        
        let handle = this.currentStampHandlePosition,
            scale = this.currentScale,
            dims = this.currentDimensions;

        let x = -handle[0] * scale,
            y = -handle[1] * scale,
            w = dims[0] * scale,
            h = dims[1] * scale;

        p.rect(x, y, w, h);
    }
};

P.updateHere = function () {

    if (!this.here) this.here = {};

    let localHere = this.here;

    let [width, height] = this.currentDimensions;

    localHere.w = width;
    localHere.h = height;
    localHere.x = -10000;
    localHere.y = -10000;
    localHere.active = false;

    let host = this.currentHost;

    if (host) {

        let hostHere = host.here;

        if (hostHere && hostHere.active) {

            let {x:hostX, y:hostY, w:hostWidth, h:hostHeight} = hostHere;

            if (!this.pathObject || this.dirtyPathObject) this.cleanPathObject();

            let tempCell = requestCell();
            let tempEngine = tempCell.engine;

            let [stampX, stampY] = this.currentStampPosition;

            tempCell.rotateDestination(tempEngine, stampX, stampY, this);

            let active = tempEngine.isPointInPath(this.pathObject, hostX, hostY);

            releaseCell(tempCell);

            localHere.active = active;

            if (active) {

                let [stampHandleX, stampHandleY] = this.currentStampHandlePosition;

                let {flipUpend, flipReverse, roll, scale} = this;

                if (scale) {

                    let left = ((hostX - stampX) / scale),
                        top = ((hostY - stampY) / scale);

                    if (flipReverse) left = -left;
                    if (flipUpend) top = -top;

                    if (roll) {

                        if ((flipReverse && !flipUpend) || (!flipReverse && flipUpend)) roll = -roll;

                        let coord = requestCoordinate(left, top);
                        coord.rotate(-roll);

                        [left, top] = coord;

                        releaseCoordinate(coord);
                    }

                    left += stampHandleX;
                    top += stampHandleY;

                    localHere.x = left;
                    localHere.y = top;
                }
            }
        }
    }
};

P.getEntityHits = function () {

    let response = [],
        results = [],
        resultNames = [];

    if (this.groupBuckets) {

        this.groupBuckets.forEach(grp => {
            if (grp.visibility) results.push(grp.getAllArtefactsAt(this.here));
        }, this);
    }

    if (results.length) {

        results = results.reduce((a, v) => a.concat(v), []);

        results.forEach(item => {

            let art = item.artefact;

            if (art.visibility && resultNames.indexOf(art.name) < 0) {

                resultNames.push(art.name);
                response.push(art);
            }
        })
    }
    return response;
};

P.rotateDestination = function (engine, x, y, entity) {

    let self = (entity) ? entity : this,
        mimic = self.mimic,
        pivot = self.pivot,
        reverse, upend,
        rotation = self.currentRotation;

    if (mimic && mimic.name && self.useMimicFlip) {

        reverse = (mimic.flipReverse) ? -1 : 1;
        upend = (mimic.flipUpend) ? -1 : 1;
    }
    else {

        reverse = (self.flipReverse) ? -1 : 1;
        upend = (self.flipUpend) ? -1 : 1;
    }

    if (mimic && mimic.name && self.useMimicRotation) {

        rotation = mimic.currentRotation;
    }
    else if (pivot && pivot.name && self.addPivotRotation) {

        rotation = pivot.currentRotation;
    }

    if (rotation) {

        rotation *= radian;

        let cos = Math.cos(rotation),
            sin = Math.sin(rotation);

        engine.setTransform((cos * reverse), (sin * reverse), (-sin * upend), (cos * upend), x, y);
    }
    else engine.setTransform(reverse, 0, 0, upend, x, y);

    return this;
};

const cellPool = [];

P.poolDefs = {
    element: null,
    engine: null,
    state: null,
    width: 300,
    height: 100,
    alpha: 1,
    composite: 'source-over',
}

const requestCell = function () {

    if (!cellPool.length) {

        cellPool.push(makeCell({
            name: `pool_${generateUniqueString()}`,
            isPool: true
        }));
    }

    let c = cellPool.shift();
    c.engine.save();

    return c;
};

const releaseCell = function (c) {

    if (c && c.type === 'Cell') {

        c.engine.restore();
        cellPool.push(c);
    }
};

const makeCell = function (items) {

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

constructors.Cell = Cell;

export {
    makeCell,
    requestCell,
    releaseCell,
};