Cell factory

import { artefact, asset, canvas, constructors, group } from '../core/library.js';

import { addStrings, doCreate, isa_canvas, mergeOver, λnull, λcloneError, Ωempty } from '../helper/utilities.js';

import { getIgnorePixelRatio, getPixelRatio } from '../core/user-interaction.js';


import { makeGroup } from './group.js';
import { makeState } from '../untracked-factory/state.js';

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

import { filterEngine } from '../helper/filter-engine.js';
import { importDomImage } from '../asset-management/image-asset.js';

import { releaseCell, requestCell } from '../untracked-factory/cell-fragment.js';

import baseMix from '../mixin/base.js';
import cellMix from '../mixin/cell-key-functions.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 hiddenElementsMix from '../mixin/hidden-dom-elements.js';
import anchorMix from '../mixin/anchor.js';
import buttonMix from '../mixin/button.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';

import { _atan2, _isFinite, _floor, _piDouble, _round, _values, _2D, CANVAS, FILL, HEIGHT, HIGH, IMG, MOUSE, NONE, SOURCE_OVER, SRGB, T_CANVAS, T_CELL, WIDTH, ZERO_STR, _isArray } from '../helper/shared-vars.js';

const CELL = 'cell',
    CONTAIN = 'contain',
    COVER = 'cover',
    TRANSPARENT_VALS = ['rgb(0 0 0 / 0)', 'rgba(0 0 0 / 0)', 'rgba(0,0,0,0)', 'rgba(0, 0, 0, 0)', 'transparent', '#00000000', '#0000'];

const Cell = function (items = Ωempty) {

    this.makeName(items.name);

    this.register();

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

    this.modifyConstructorInputForAnchorButton(items);

    let mycanvas = items.element;
    delete items.element;

    if (!isa_canvas(mycanvas)) {

        mycanvas = document.createElement(CANVAS);
        mycanvas.id = this.name;
        mycanvas.width = 300;
        mycanvas.height = 150;
    }

    this.set(this.defs);

    this.dirtyAssetSubscribers = true;
    this.basePaste = null;
    this.dirtyFilters = true;
    this.dirtyFiltersCache = true;
    this.filters = [];
    this.currentFilters = [];
    this.dirtyImageSubscribers = true;
    this.stashOutput = false;
    this.stashOutputAsAsset = false;
    this.stashedImageData = null;
    this.stashedImage = null;
    this.paste = null;
    this.patternMatrix = null;
    this.pivot = null;

    this.set(items);

    this.installElement(mycanvas, items.canvasColorSpace);

    this.state.setStateFromEngine(this.engine);

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

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

    this.sourceLoaded = true;

    this.here = {};

    return this;
};

const P = Cell.prototype = doCreate();
P.type = T_CELL;
P.lib = CELL;
P.isArtefact = false;
P.isAsset = true;

baseMix(P);
cellMix(P);
assetMix(P);
positionMix(P);
deltaMix(P);
pivotMix(P);
mimicMix(P);
pathMix(P);
hiddenElementsMix(P);
anchorMix(P);
buttonMix(P);
cascadeMix(P);
patternMix(P);
filterMix(P);

const defaultAttributes = {

    cleared: true,

    compiled: true,

    shown: true,

    compileOrder: 0,
    showOrder: 0,

    backgroundColor: ZERO_STR,

    clearAlpha: 0,

    alpha: 1,
    composite: SOURCE_OVER,

    scale: 1,

    flipReverse: false,
    flipUpend: false,

    filter: NONE,

    isBase: false,

    controller: null,

    includeInCascadeEventActions: false,

    willReadFrequently: true,

    setRelativeDimensionsUsingBase: 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 = λcloneError;

P.factoryKill = function () {

    const myname = this.name

    _values(canvas).forEach(cvs => {

        if (cvs.cells.includes(myname)) cvs.removeCell(myname);

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

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

    _values(artefact).forEach(art => {

        if (art.name !== myname) {

            const state = art.state;

            if (state) {

                const 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();
};

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

P.get = function (item) {

    const getter = this.getters[item];

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

    else {

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

        const state = this.state;

        if (def != null) {

            val = this[item];
            return (val != null) ? val : def;
        }

        def = state.defs[item];

        if (def != null) {

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

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 (item) {

    if (_isArray(item) && item.length > 1) {

        const [w, h] = item;

        if (w != null) this.dimensions[0] = w;
        if (h != null) this.dimensions[1] = h;

        this.dirtyDimensions = true;
        this.dirtyDimensionsOverride = true;
    }
};

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

S.element = function (item) {

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

S.backgroundColor = function (item) {

    if (TRANSPARENT_VALS.includes(item)) item = ZERO_STR;
    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.order = function (item) {

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

S.setRelativeDimensionsUsingBase = function (item) {

    this.setRelativeDimensionsUsingBase = !!item;
    this.dirtyDimensions = true;
};

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) {

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

    if (!this.stashDimensions) {

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

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

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

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

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

    if (!this.stashDimensions) {

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

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

    if (!this.stashDimensions) {

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

    const 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.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,
    });
};

G.group = function () {

    return group[this.name];
};
P.getGroup = function () {

    return group[this.name];
};

P.checkSource = function (width, height) {

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

P.getData = function (entity, mycell) {

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

    return this.buildStyle(mycell);
};

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() {

    const element = this.element;

    if (element) {

        const { mimic, useMimicDimensions, isBase } = this;

        if (!isBase && mimic && useMimicDimensions) {

            const [w, h] = this.currentDimensions;

            element.width = w;
            element.height = h;

            this.setEngineFromState(this.engine);

            if (this.groupBuckets) {

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

            const {
                cleared,
                dirtyDimensionsOverride,
            } = this;

            const controller = this.getController();

            if (controller && (cleared || dirtyDimensionsOverride)) {

                this.dirtyDimensionsOverride = false;

                const {
                    currentDimensions,
                    dimensions,
                    setRelativeDimensionsUsingBase,
                } = this;

                let controlDimensions = controller.currentDimensions;
                const [width, height] = controlDimensions;

                if (isBase && (controller.baseMatchesCanvasDimensions || controller.isComponent)) {

                    dimensions[0] = width;
                    dimensions[1] = height;
                    currentDimensions[0] = width;
                    currentDimensions[1] = height;
                }
                else {

                    if (!isBase && setRelativeDimensionsUsingBase) controlDimensions = controller.base.currentDimensions;

                    let item;

                    for (let i = 0; i < 2; i++) {

                        item = dimensions[i];

                        if (item.substring) {

                            item = parseFloat(item);

                            if (_isFinite(item) && item >= 1) currentDimensions[i] = _floor(controlDimensions[i] * (item / 100));
                            else currentDimensions[i] = 1;
                        }
                        else if (_isFinite(item) && item >= 1) currentDimensions[i] = _floor(item);
                        else currentDimensions[i] = 1;
                    }
                }

                const [w, h] = currentDimensions;

                element.width = w;
                element.height = h;

                this.setEngineFromState(this.engine);

                if (isBase && controller) controller.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, colorSpace = SRGB) {

    this.element = element;

    this.engine = this.element.getContext(_2D, {
        willReadFrequently: this.willReadFrequently,
        colorSpace,
    });

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

    return this;
};

P.updateControllerCells = function () {

    const controller = this.getController();
    if (controller) controller.dirtyCells = true;
};

P.getController = function () {

    const { controller, currentHost } = this;

    if (controller) return controller;
    if (currentHost) return currentHost.getHost();
    return null;
};

P.getHost = function () {

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

        const 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) {

        const here = this.here,
            dims = this.currentDimensions;

        let active = controllerHere.active;

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

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

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

            const pasteX = this.basePaste[0];

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

            const relWidth = localWidth / remoteWidth || 1,
                relHeight = localHeight / remoteHeight || 1;

            let 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.clear = function () {

    const {element, engine, backgroundColor, clearAlpha} = this;

    this.prepareStamp();

    const width = _floor(element.width),
        height = _floor(element.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();

        const tempCell = requestCell(width, height);

        const {engine:tempEngine, element:tempEl} = tempCell;

        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);

        engine.restore();

        releaseCell(tempCell);
    }
    else {

        engine.clearRect(0, 0, width, height);
    }
};

P.compile = function(){

    this.sortGroups();

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

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

    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.setImageSmoothing = function (engine) {

    engine.imageSmoothingEnabled = true;
    engine.imageSmoothingQuality = HIGH;
};

P.show = function () {

    const checkPixelRatio = function () {

        if (getIgnorePixelRatio()) return 1;
        return getPixelRatio();
    };

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

    if (host && displayEngine) {

        let destWidth = 0,
            destHeight = 0;

        if (host.type === T_CANVAS) {

            destWidth = host.domElement.width;
            destHeight = host.domElement.height;
        }
        else if (host.type === T_CELL) {

            destWidth = host.element.width;
            destHeight = host.element.height;
        }

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

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

        const curWidth = element.width,
            curHeight = element.height;

        if (!curWidth || !curHeight) return false;

        let paste;

        displayEngine.save();

        displayEngine.filter = this.filter;

        const dpr = checkPixelRatio();

        if (isBase) {

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

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

            displayEngine.globalCompositeOperation = SOURCE_OVER;
            displayEngine.globalAlpha = 1;
            displayEngine.clearRect(0, 0, destWidth, destHeight);

            displayEngine.globalCompositeOperation = composite;
            displayEngine.globalAlpha = alpha;

            this.setImageSmoothing(displayEngine);

            const fit = (controller) ? controller.fit : NONE;

            let 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 * dpr)) / 2);
                    paste[1] = _floor((destHeight - (curHeight * dpr)) / 2);
                    paste[2] = curWidth * dpr;
                    paste[3] = curHeight * dpr;
            }

            displayEngine.clearRect(0, 0, destWidth, destHeight);
            displayEngine.drawImage(element, 0, 0, curWidth, curHeight, ...paste);
        }
        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();

            displayEngine.globalCompositeOperation = composite;
            displayEngine.globalAlpha = alpha;

            this.setImageSmoothing(displayEngine);

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

            this.rotateDestination(displayEngine, ...stamp);

            displayEngine.drawImage(element, 0, 0, curWidth, curHeight, ...paste);
        }
        displayEngine.restore();
    }
};

P.applyFilters = function () {

    const engine = this.engine,
        element = this.element;

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

    this.preprocessFilters(this.currentFilters, element.width, element.height);

    const 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;

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

        const [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 (!_isFinite(stashWidth) || stashWidth <= 0) stashWidth = 1;
            if (stashWidth > cellWidth) stashWidth = cellWidth;

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

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

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

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

        if (this.stashOutputAsAsset) {

            const stashId = this.stashOutputAsAsset.substring ? this.stashOutputAsAsset : `${this.name}-image`;

            this.stashOutputAsAsset = false;

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

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

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

            if (!this.stashedImage) {

                const control = this.getController();

                if (control) {

                    const that = this;

                    const newimg = document.createElement(IMG);
                    newimg.id = stashId;
                    newimg.alt = `A cached image of the ${this.name} Cell`;

                    newimg.onload = function () {

                        control.canvasHold.appendChild(newimg);
                        that.stashedImage = newimg;
                        importDomImage(`#${stashId}`);
                    };

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

            releaseCell(mycanvas);
        }
    }
};

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.includes(MOUSE)) {

        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();
    }

    this.prepareStampTabsHelper();
};

P.cleanPathObject = function () {

    this.dirtyPathObject = false;

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

        const p = this.pathObject = new Path2D();

        const handle = this.currentStampHandlePosition,
            scale = this.currentScale,
            dims = this.currentDimensions;

        const 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 () {

    const host = this.currentHost;

    if (host) {

        const localHere = this.here;

        const [width, height] = this.currentDimensions;

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

        const hostHere = host.here;

        if (hostHere && hostHere.active) {

            const {x:hostX, y:hostY} = hostHere;

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

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

            const [stampX, stampY] = this.currentStampPosition;

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

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

            releaseCell(tempCell);

            localHere.active = active;

            if (active) {

                const [stampHandleX, stampHandleY] = this.currentStampHandlePosition;

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

                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;

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

                        [left, top] = coord;

                        releaseCoordinate(coord);
                    }

                    left += stampHandleX;
                    top += stampHandleY;

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

P.splitShift = function (item) {

    if (item && item.px) {

        const {
            px,
            vertical = false,
            cycle = false
        } = item;

        const [width, height] = this.currentDimensions;

        let speed = 0,
            edge = null;

        if (px.toFixed) speed = _round(px);
        else if (px.substring) {

            if (vertical) speed = _round((parseFloat(px) / 100) * height);
            else speed = _round((parseFloat(px) / 100) * width);
        }

        if (speed) {

            const engine = this.engine;

            if (vertical) {

                if (speed < 0) {

                    if (cycle) edge = engine.getImageData(0, 0, width, -speed);
                    engine.putImageData(engine.getImageData(0, -speed, width, height + speed), 0, 0);
                    if (cycle) engine.putImageData(edge, 0, height + speed);
                }

                else {

                    if (cycle) edge = engine.getImageData(0, height - speed, width, speed);
                    engine.putImageData(engine.getImageData(0, 0, width, height - speed), 0, speed);
                    if (cycle) engine.putImageData(edge, 0, 0);
                }
            }
           else {

                if (speed < 0) {

                    if (cycle) edge = engine.getImageData(0, 0, -speed, height);
                    engine.putImageData(engine.getImageData(-speed, 0, width + speed, height), 0, 0);
                    if (cycle) engine.putImageData(edge, width + speed, 0);
                }

                else {

                    if (cycle) edge = engine.getImageData(width - speed, 0, speed, height);
                    engine.putImageData(engine.getImageData(0, 0, width - speed, height), speed, 0);
                    if (cycle) engine.putImageData(edge, 0, 0);
                }
            }
        }
    }
};

P.getCellData = function (opaque = false) {

    const [width, height] = this.currentDimensions,
        halfWidth = _floor(width / 2),
        halfHeight = _floor(height / 2);

    const iData = this.engine.getImageData(0, 0, width, height),
        data = iData.data,
        slider = new Uint32Array(data.buffer,  data.byteOffset,  data.byteLength >>> 2);;

    if (opaque) {

        for (let i = 3, iz = data.length; i < iz; i += 4) {

            data[i] = 255;
        }
    }

    const pixelState = [];

    const coord = requestCoordinate();

    let row, col, index, angle;

    for (row = 0; row < height; row++) {

        for (col = 0; col < width; col++) {

            index = ((row * width) + col) * 4;

            coord.setFromArray([col, row]).subtract([halfWidth, halfHeight]);

            angle = (_atan2(coord[1], coord[0]) / _piDouble) + 0.5;
            angle = (angle + 0.75) % 1;

            pixelState.push({
                index,
                red: data[index],
                green: data[++index],
                blue: data[++index],
                alpha: data[++index],
                row,
                col,
                distance: coord.getMagnitude(),
                angle,
            });
        }
    }

    releaseCoordinate(coord);

    return {
        iData,
        slider,
        pixelState,
        opaque,
    }
};

const pixelCleaner = new Uint8ClampedArray(1);

P.paintCellData = function (item = Ωempty) {

    const { iData, slider, pixelState, opaque} = item;
    const { width, height, data} = iData;
    const [w, h] = this.currentDimensions;

    if (width && height && data && pixelState && w === width && h === height) {

        let i, iz, p, red, green, blue, alpha, index,
            update = false;

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

            p = pixelState[i];

            index = p.index;

            red = pixelCleaner[0] = p.red;
            green = pixelCleaner[0] = p.green;
            blue = pixelCleaner[0] = p.blue;
            alpha = opaque ? 255 : pixelCleaner[0] = p.alpha;

            if (slider[index >>> 2] !== ((alpha << 24) | (blue << 16) | (green << 8) | red) >>> 0) {

                update = true;

                data[index] = red;
                data[++index] = green;
                data[++index] = blue;

                if (!opaque) data[++index] = alpha;
            }
        };

        if (update) this.engine.putImageData(iData, 0, 0);
    }
};

export const makeCell = function (items) {

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

constructors.Cell = Cell;