Canvas factory

import {
    canvas as libCanvas,
    cell,
    constructors,
    artefact,
    group,
    purge,
} from '../core/library.js';

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

import { rootElementsAdd, rootElementsRemove } from "../helper/document-root-elements.js";

import { doCreate, generateUniqueString, isa_dom, mergeOver, pushUnique, removeItem, xt, λnull, λcloneError, Ωempty } from '../helper/utilities.js';

import { getCanvasColorSpace, uiSubscribedElements } from '../core/user-interaction.js';

import { makeState } from '../untracked-factory/state.js';
import { makeCell } from './cell.js';

import { releaseArray, requestArray } from '../helper/array-pool.js';

import baseMix from '../mixin/base.js';
import domMix from '../mixin/dom.js';
import displayMix from '../mixin/display-shape.js';
import hiddenElementsMix from '../mixin/hidden-dom-elements.js';
import anchorMix from '../mixin/anchor.js';
import buttonMix from '../mixin/button.js';

import { _2D, _computed, ABSOLUTE, ARIA_HIDDEN, ARIA_LIVE, CANVAS, DATA_TAB_ORDER, DATA_SCRAWL_GROUP, DISPLAY_P3, DIV, DOWN, ENTER, IMG, LEAVE, MOVE, NAME, NONE, PC100, PC50, POLITE, RELATIVE, ROLE, ROOT, SRGB, SUBSCRIBE, T_CANVAS, T_STACK, TRUE, UP, ZERO_STR } from '../helper/shared-vars.js';

const ARIA_BUSY = 'aria-busy',
    ARIA_DESCRIBEDBY = 'aria-describedby',
    ARIA_LABELLEDBY = 'aria-labelledby',
    ARIA_LIVE_VALUES = ['assertive', 'polite', 'off'],
    CANVAS_QUERY = '[data-scrawl-canvas]',
    FIT_DEFS = ['fill', 'contain', 'cover'],
    NAV = 'nav',
    OTHER_INTERACTION = 'otherInteraction',
    TITLE = 'title';

const Canvas = function (items = Ωempty) {

    this.makeName(items.name);
    this.register();
    this.initializePositions();

    this.dimensions[0] = 300;
    this.dimensions[1] = 150;

    this.pathCorners = [];
    this.css = {};
    this.here = {};
    this.perspective = {

        x: PC50,
        y: PC50,
        z: 0
    };
    this.dirtyPerspective = true;

    this.initializeDomLayout(items);
    this.modifyConstructorInputForAnchorButton(items);

    this.set(this.defs);

    if (!items.label) items.label = `${this.name} canvas element`;

    this.initializeDisplayShapeActions();

    this.initializeAccessibility();

    this.currentActiveEntityNames = null;
    this.dirtyCss = true;
    this.dirtyStampOrder = true;
    this.localMouseListener = null;
    this.mimic = null;
    this.pivot = null;

    this.set(items);

    const el = this.domElement;

    if (el) {

        const ds = el.dataset;

        this.useDisplayP3WhereAvailable = ds.canvasColorSpace === DISPLAY_P3 || items.canvasColorSpace === DISPLAY_P3;
        this.canvasColorSpace = getCanvasColorSpace(this.useDisplayP3WhereAvailable);

        this.engine = this.domElement.getContext(_2D, { colorSpace: this.canvasColorSpace });

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

        this.cells = [];
        this.cellBatchesClear = [];
        this.cellBatchesCompile = [];
        this.cellBatchesShow = [];

        let baseWidth = el.width,
            baseHeight = el.height;

        if (ds.isResponsive) {

            el.style.width = PC100;
            el.style.height = PC100;

            let baseMatches = true;

            if (ds.baseWidth && ds.baseHeight) {

                baseMatches = false;
                baseWidth = parseFloat(ds.baseWidth);
                baseHeight = parseFloat(ds.baseHeight);
            }

            this.set({
                checkForResize: true,
                baseMatchesCanvasDimensions: baseMatches,
                ignoreCanvasCssDimensions: true,
                fit: ds.fit || this.fit,
            });
        }

        this.cleanDimensions();

        let willReadFrequently = ds.willReadFrequently;

        if (willReadFrequently === "false") willReadFrequently = false;
        else willReadFrequently = items.willReadFrequently;

        if (willReadFrequently == null) willReadFrequently = true;
        else willReadFrequently = !!willReadFrequently;

        const cellArgs = {
            name: `${this.name}_base`,
            element: false,
            width: baseWidth,
            height: baseHeight,
            cleared: true,
            compiled: true,
            shown: false,
            isBase: true,
            host: this.name,
            controller: this,
            order: 10,
            canvasColorSpace: this.canvasColorSpace,
            willReadFrequently,
        };

        if (ds.baseClearAlpha) cellArgs.clearAlpha = parseFloat(ds.baseClearAlpha);
        if (ds.baseBackgroundColor) cellArgs.backgroundColor = ds.baseBackgroundColor;

        this.base = this.buildCell(cellArgs);

        rootElementsAdd(this.name);

        if (el.getAttribute('role')) this.role = el.getAttribute('role');
        if (el.getAttribute('title')) this.title = el.getAttribute('title');
        if (ds.label) this.label = ds.label;
        if (ds.description) this.description = ds.description;

        const navigation = document.createElement(NAV);
        navigation.id = `${this.name}-navigation`;
        navigation.setAttribute(ARIA_LIVE, POLITE);
        navigation.setAttribute(ARIA_BUSY, 'false');
        this.navigation = navigation;
        el.appendChild(navigation);

        this.dirtyNavigationTabOrder = true;

        const textHold = document.createElement(DIV);
        textHold.id = `${this.name}-text-hold`;
        textHold.setAttribute(ARIA_LIVE, POLITE);
        textHold.setAttribute(ARIA_BUSY, 'false');
        this.textHold = textHold;
        el.appendChild(textHold);

        this.dirtyTextTabOrder = true;

        const canvasHold = document.createElement('div');
        canvasHold.id = `${this.name}-canvas-hold`;
        canvasHold.style.display = NONE;
        canvasHold.setAttribute(ARIA_HIDDEN, TRUE);
        this.canvasHold = canvasHold;
        el.appendChild(canvasHold);

        const fontSizeCalculator = document.createElement(DIV);
        fontSizeCalculator.id = `${this.name}-fontSizeCalculator`;
        fontSizeCalculator.setAttribute(ARIA_HIDDEN, TRUE);
        this.fontSizeCalculator = fontSizeCalculator;
        this.fontSizeCalculatorValues = _computed(fontSizeCalculator);
        canvasHold.appendChild(fontSizeCalculator);

        const labelStylesCalculator = document.createElement(DIV);
        labelStylesCalculator.id = `${this.name}-styles`;
        labelStylesCalculator.setAttribute(ARIA_HIDDEN, TRUE);
        this.labelStylesCalculator = labelStylesCalculator;
        this.labelStylesCalculatorValues = _computed(labelStylesCalculator);
        canvasHold.appendChild(labelStylesCalculator);

        const ariaLabel = document.createElement(DIV);
        ariaLabel.id = `${this.name}-ARIA-label`;
        ariaLabel.setAttribute(ARIA_LIVE, POLITE);
        this.ariaLabelElement = ariaLabel;
        el.appendChild(ariaLabel);
        el.setAttribute(ARIA_LABELLEDBY, ariaLabel.id);

        const ariaDescription = document.createElement(DIV);
        ariaDescription.id = `${this.name}-ARIA-description`;
        ariaDescription.setAttribute(ARIA_LIVE, POLITE);
        this.ariaDescriptionElement = ariaDescription;
        el.appendChild(ariaDescription);
        el.setAttribute(ARIA_DESCRIBEDBY, ariaDescription.id);

        this.includeInTabNavigation = false;

        this.cleanAria();

        this.computedStyles = _computed(el);
    }

    this.dirtyCells = true;

    this.dirtyDomDimensions = true;
    if (items.setAsCurrentCanvas) this.setAsCurrentCanvas();

    return this;
};

const P = Canvas.prototype = doCreate();
P.type = T_CANVAS;
P.lib = CANVAS;
P.isArtefact = true;
P.isAsset = false;

baseMix(P);
domMix(P);
displayMix(P);
hiddenElementsMix(P);
anchorMix(P);
buttonMix(P);

const defaultAttributes = {

    position: RELATIVE,

    trackHere: SUBSCRIBE,

    fit: NONE,

    isComponent: false,
    baseMatchesCanvasDimensions: false,

    renderOnResize: true,

    ignoreCanvasCssDimensions: false,

    title: ZERO_STR,
    label: ZERO_STR,
    description: ZERO_STR,

    role: IMG,

    navigationAriaLive: POLITE,

    textAriaLive: POLITE,

    canvasColorSpace: SRGB,
};
P.defs = mergeOver(P.defs, defaultAttributes);

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 name = this.name,
        host = this.host;

    rootElementsRemove(name);

    removeItem(uiSubscribedElements, name);

    if (host && host !== ROOT) {

        const h = (this.currentHost) ? this.currentHost : artefact[host];

        if (h) {

            h.removeGroups(name);

            const g = group[h.name];
            if (g) g.removeArtefacts(name);
        }
    }

    if (group[name]) group[name].kill();

    this.base.kill();

    this.domElement.remove();
};

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

S.fit = function (item) {

    this.fit = (FIT_DEFS.includes(item)) ? item : NONE;
};

S.title = function (item) {

    this.title = item;
    this.dirtyAria = true;
};

S.label = function (item) {

    this.label = item;
    this.dirtyAria = true;
};

S.description = function (item) {

    this.description = item;
    this.dirtyAria = true;
};

S.role = function (item) {

    this.role = item;
    this.dirtyAria = true;
};

S.navigationAriaLive = function (item) {

    if (item.substring && ARIA_LIVE_VALUES.includes(item)) {

        this.navigationAriaLive = item;
        this.dirtyAria = true;
    }
};

S.textAriaLive = function (item) {

    if (item.substring && ARIA_LIVE_VALUES.includes(item)) {

        this.textAriaLive = item;
        this.dirtyAria = true;
    }
};

G.backgroundColor = function () {

    return this.base.backgroundColor;
};
S.backgroundColor = function (item) {

    if (this.base) {

        this.base.set({
            backgroundColor: item
        });
    }
};

G.alpha = function () {

    return this.base.alpha;
};
S.alpha = function (item) {

    if (this.base) {

        this.base.set({
            alpha: item
        });
    }
};
D.alpha = function(item) {

    if (this.base) {

        this.base.deltaSet({
            alpha: item
        });
    }
};

G.composite = function () {

    return this.base.composite;
};
S.composite = function (item) {

    if (this.base) {
        this.base.set({
            composite: item
        });
    }
};

S.checkForEntityHover = function (item) {

    this.base.set({
        checkForEntityHover: item,
    });
};
S.onEntityHover = function (item) {

    this.base.set({
        onEntityHover: item,
    });
};
S.onEntityNoHover = function (item) {

    this.base.set({
        onEntityNoHover: item,
    });
};

G.baseGroup = function () {

    return group[this.base.name];
};

G.baseName = function () {

    return this.base.name;
};

P.setAsCurrentCanvas = function () {

    if (this.base) setCurrentCanvas(this);
    return this;
};

P.setBase = function (items) {

    if (this.base) {

        this.base.set(items);
        this.setBaseHelper();
    }
    return this;
};

P.deltaSetBase = function (items) {

    if (this.base) {

        this.base.deltaSet(items);
        this.setBaseHelper();
    }
    return this;
};

P.getBase = function () {

    return this.base;
};

P.getBaseHere = function () {

    return this.base.here;
};

P.reset = function () {

    this.dirtyDimensions = true;
    domShow(this.name);
};

P.updateBaseHere = function () {

    if (this.base) this.base.updateBaseHere(this.here, this.fit);
};

P.setBaseHelper = function () {

    const items = {};

    const base = this.base;

    if (base.dirtyScale) items.dirtyScale = true;
    if (base.dirtyDimensions) items.dirtyDimensions = true;
    if (base.dirtyLock) items.dirtyLock = true;
    if (base.dirtyStart) items.dirtyStart = true;
    if (base.dirtyOffset) items.dirtyOffset = true;
    if (base.dirtyHandle) items.dirtyHandle = true;
    if (base.dirtyRotation) items.dirtyRotation = true;

    this.cleanCells();
    base.prepareStamp();

    this.updateCells(items);
};

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

    const c = this.cells;
    let mycell;

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

        mycell = cell[c[i]];

        if (mycell) {

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

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

    const host = items.host || null;

    if (!host) items.host = this.base.name;

    const mycell = makeCell(items);

    this.addCell(mycell);
    this.cleanCells();
    return mycell;
};

P.cleanDimensionsAdditionalActions = function () {

    if (this.cells) {

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

    this.dirtyDomDimensions = true;
    this.dirtyDisplayShape = true;
    this.dirtyDisplayArea = true;
};

P.prepareStampAdditionalActions = function () {

    this.prepareStampTabsHelper();
};

P.addCell = function (item) {

    item = (item.substring) ? item : item.name || null;

    if (item) {

        const c = cell[item];

        if (c) {

            if (this.base) {

                c.host = this.base.name;
                c.currentHost = null;
            }
            c.prepareStamp();

            pushUnique(this.cells, item);
            this.dirtyCells = true;
        }
    }
    return this;
};

P.removeCell = function (item) {

    item = (item.substring) ? item : item.name || null;

    if (item) {

        removeItem(this.cells, item);
        this.dirtyCells = true;
    }
    return this;
};

P.killCell = function (item) {

    const mycell = (item.substring) ? cell[item] : item;

    if (mycell) mycell.kill();

    this.dirtyCells = true;
    return this;
};

P.clear = function () {

    if (this.dirtyCells) this.cleanCells();

    if (this.base && this.base.dirtyDimensions) this.base.cleanDimensions();

    const c = this.cellBatchesClear;

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

        c[i].clear();
    }
};

P.compile = function () {

    if (this.dirtyCells) this.cleanCells();

    if (this.base && this.base.dirtyDimensions) this.base.cleanDimensions();

    const c = this.cellBatchesCompile;

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

        c[i].compile();
    }

    this.prepareStamp();
    this.stamp();
};

P.show = function(){

    if (this.dirtyCells) this.cleanCells();

    if (this.base && this.base.dirtyDimensions) this.base.cleanDimensions();

    const c = this.cellBatchesShow;

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

        c[i].show();
    }

    this.base.show();

    domShow();
    if (this.dirtyAria) this.cleanAria();

    if (this.dirtyNavigationTabOrder) this.reorderNavElements();
    if (this.dirtyTextTabOrder) this.reorderTextElements();
};

P.reorderNavElements = function () {

    this.dirtyNavigationTabOrder = false;

    const elArray = [],
        navEl = this.navigation;

    navEl.setAttribute(ARIA_BUSY, 'true');

    while (navEl.firstChild) {

        elArray.push(navEl.removeChild(navEl.firstChild));
    }

    elArray.sort((a, b) => {

        const A = parseInt(a.getAttribute(DATA_TAB_ORDER), 10);
        const B = parseInt(b.getAttribute(DATA_TAB_ORDER), 10);

        if (A < B) return -1;
        if (A > B) return 1;
        return 0;
    });

    elArray.forEach(e => navEl.appendChild(e));

    navEl.setAttribute(ARIA_BUSY, 'false');
};

P.reorderTextElements = function () {

    this.dirtyTextTabOrder = false;

    const elArray = [],
        divEl = this.textHold;

    divEl.setAttribute(ARIA_BUSY, 'true');

    while (divEl.firstChild) {

        elArray.push(divEl.removeChild(divEl.firstChild));
    }

    elArray.sort((a, b) => {

        const A = parseInt(a.getAttribute(DATA_TAB_ORDER), 10);
        const B = parseInt(b.getAttribute(DATA_TAB_ORDER), 10);

        if (A < B) return -1;
        if (A > B) return 1;
        return 0;
    });

    elArray.forEach(e => divEl.appendChild(e));

    divEl.setAttribute(ARIA_BUSY, 'false');
};

P.render = function () {

    this.clear();
    this.compile();
    this.show();
};

P.cleanCells = function () {

    this.dirtyCells = false;

    const tempClear = requestArray(),
        tempCompile = requestArray(),
        tempShow = requestArray();

    const { cells, cellBatchesClear, cellBatchesCompile, cellBatchesShow } = this;

    let mycell, order, arr, i, iz;

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

        mycell = cell[cells[i]];

        if (mycell && !mycell.isBase) {

            if (mycell.cleared) tempClear.push(mycell);

            if (mycell.compiled) {

                order = mycell.compileOrder;

                if (!tempCompile[order]) tempCompile[order] = requestArray();
                tempCompile[order].push(mycell);
            }

            if (mycell.shown) {

                order = mycell.showOrder;

                if (!tempShow[order]) tempShow[order] = requestArray();
                tempShow[order].push(mycell);
            }
        }
    }

    cellBatchesClear.length = 0;
    cellBatchesClear.push(...tempClear, this.base);
    releaseArray(tempClear);

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

        arr = tempCompile[i];

        if (arr) {

            cellBatchesCompile.push(...arr);
            releaseArray(arr);
        }
    }
    cellBatchesCompile.push(this.base);
    releaseArray(tempCompile);

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

        arr = tempShow[i];

        if (arr) {

            cellBatchesShow.push(...arr);
            releaseArray(arr);
        }
    }
    cellBatchesShow.push(this.base);
    releaseArray(tempShow);
};

P.cascadeEventAction = function (action, e = {}) {

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

    const currentActiveEntityNames = this.currentActiveEntityNames,
        currentActiveEntityObjects = requestArray(),
        testActiveEntityObjects = requestArray(),
        testActiveEntityNames = requestArray(),
        newActiveEntityObjects = requestArray(),
        newActiveEntityNames = requestArray(),
        knownActiveEntityObjects = requestArray(),
        knownActiveEntityNames = requestArray();

    let i, iz, myCell, item, name, myArt;

    const c = this.cells;
    for (i = 0, iz = c.length; i < iz; i++) {

        myCell = cell[c[i]];

        if (myCell && (myCell.shown || myCell.isBase || myCell.includeInCascadeEventActions)) testActiveEntityObjects.push(...myCell.getEntityHits());
    }

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

        item = testActiveEntityObjects[i];
        name = item.name;

        if (!testActiveEntityNames.includes(name)) {

            testActiveEntityNames.push(name);

            if (!currentActiveEntityNames.includes(name)) {

                newActiveEntityObjects.push(item);
                newActiveEntityNames.push(name);
            }
            else {

                knownActiveEntityObjects.push(item);
                knownActiveEntityNames.push(name);
            }
        }
    }

    currentActiveEntityObjects.push(...newActiveEntityObjects, ...knownActiveEntityObjects);

    const doLeave = function (e) {

        if (currentActiveEntityNames.length) {

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

                removeItem(currentActiveEntityNames, newActiveEntityNames[i]);
            }
            for (i = 0, iz = knownActiveEntityNames.length; i < iz; i++) {

                removeItem(currentActiveEntityNames, knownActiveEntityNames[i]);
            }
            for (i = 0, iz = currentActiveEntityNames.length, myArt; i < iz; i++) {

                myArt = artefact[currentActiveEntityNames[i]];

                if (myArt) myArt.onLeave(e);
            }
        }
    };

    const currentActiveLen = currentActiveEntityObjects.length,
        newActiveLen = newActiveEntityObjects.length;

    switch (action) {

        case DOWN :
            for (i = 0; i < currentActiveLen; i++) {
                currentActiveEntityObjects[i].onDown(e);
            }
            break;

        case UP :
            for (i = 0; i < currentActiveLen; i++) {
                currentActiveEntityObjects[i].onUp(e);
            }
            break;

        case ENTER :
            for (i = 0; i < newActiveLen; i++) {
                newActiveEntityObjects[i].onEnter(e);
            }
            break;

        case LEAVE :
            doLeave(e);
            break;

        case MOVE :
            doLeave(e);
            for (i = 0; i < newActiveLen; i++) {
                newActiveEntityObjects[i].onEnter(e);
            }
            break;

        case OTHER_INTERACTION :
            for (i = 0; i < currentActiveLen; i++) {
                currentActiveEntityObjects[i].onOtherInteraction(e);
            }
            break;
    }

    currentActiveEntityNames.length = 0;
    currentActiveEntityNames.push(...newActiveEntityNames, ...knownActiveEntityNames);

    releaseArray(currentActiveEntityObjects, testActiveEntityObjects, testActiveEntityNames, newActiveEntityObjects, newActiveEntityNames, knownActiveEntityObjects, knownActiveEntityNames);

    return [...currentActiveEntityNames];
};

P.getEntityHits = function () {

    return this.cascadeEventAction();
};
P.checkHover = function () {

    this.cascadeEventAction();
};

P.cleanAria = function () {

    this.dirtyAria = false;
    this.domElement.setAttribute(TITLE, this.title);
    this.domElement.setAttribute(ROLE, this.role);
    this.ariaLabelElement.textContent = this.label;
    this.ariaDescriptionElement.textContent = this.description;
    this.navigation.setAttribute(ARIA_LIVE, this.navigationAriaLive);
    this.textHold.setAttribute(ARIA_LIVE, this.textAriaLive);
};

export const makeCanvas = function (items) {

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

constructors.Canvas = Canvas;

export const getCanvases = function (query = CANVAS_QUERY) {

    let item;

    document.querySelectorAll(query).forEach((el, index) => {

        item = addInitialCanvasElement(el);

        if (!index) setCurrentCanvas(item);
    });
};

const addInitialCanvasElement = function (el) {

    let mygroup = el.getAttribute(DATA_SCRAWL_GROUP),
        myname = el.id || el.getAttribute(NAME),
        position = ABSOLUTE;

    if (!mygroup || mygroup === ROOT) {

        el.setAttribute(DATA_SCRAWL_GROUP, ROOT);
        mygroup = ROOT;
        position = el.style.position;
    }

    if (!myname) {

        myname = generateUniqueString();
        el.id = myname;
    }

    return makeCanvas({
        name: myname,
        domElement: el,
        group: mygroup,
        host: mygroup,
        position: position,
        setInitialDimensions: true,
    });
};

export const getCanvas = function (search) {

    const el = document.querySelector(`#${search}`);

    const c = libCanvas[search];

    if (c) {

        if (el.dataset.scrawlGroup != null) {

            setCurrentCanvas(c);
            return c;
        }
        else purge(search);
    }

    if (el) {
        const newCanvas = addInitialCanvasElement(el);
        setCurrentCanvas(newCanvas);
        return newCanvas;
    }
    return undefined;
};

export let currentGroup = null;

let currentCanvas = null;
export const setCurrentCanvas = function (item) {

    let changeFlag = false;

    if (item) {

        if (item.substring) {

            const mycanvas = libCanvas[item];

            if (mycanvas) {
                currentCanvas = mycanvas;
                changeFlag = true;
            }
        }
        else if (item.type === T_CANVAS) {

            currentCanvas = item;
            changeFlag = true;
        }
    }

    if (changeFlag && currentCanvas.base) {

        const mygroup = group[currentCanvas.base.name];

        if (mygroup) currentGroup = mygroup;
    }
};

export const addCanvas = function (items = Ωempty) {

    const el = document.createElement(CANVAS),
        myname = (items.name) ? items.name : generateUniqueString(),
        width = items.width || 300,
        height = items.height || 150;

    let mygroup = ROOT,
        position = RELATIVE,
        host = items.host,
        temphost;

    if (host && host.substring) {

        temphost = artefact[host];

        if (!temphost && host) {

            host = document.querySelector(host);

            if (host) mygroup = host.id;
        }
        else host = temphost;
    }

    if (host) {

        if (host.type === T_STACK) {

            mygroup = host.name;
            position = ABSOLUTE;
            host = host.domElement;
        }
        else if (!isa_dom(host)) host = document.body;
    }
    else host = document.body;

    el.id = myname;
    el.setAttribute(DATA_SCRAWL_GROUP, mygroup);
    el.width = width;
    el.height = height;
    el.style.position = position;

    host.appendChild(el);

    const mycanvas = makeCanvas({
        name: myname,
        domElement: el,
        group: mygroup,
        host: mygroup,
        position: position,
        setInitialDimensions: false,
        setAsCurrentCanvas: (xt(items.setAsCurrentCanvas)) ? items.setAsCurrentCanvas : true,
        trackHere: (xt(items.trackHere)) ? items.trackHere : SUBSCRIBE,
    });

    delete items.group;
    delete items.host;
    delete items.name;
    delete items.element;
    delete items.position;
    delete items.setInitialDimensions;
    delete items.setAsCurrentCanvas;
    delete items.trackHere;

    mycanvas.set(items);

    return mycanvas;
};