Stack factory

import { artefact, constructors, group, purge, stack } from '../core/library.js';

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

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

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

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

import { makeGroup } from './group.js';
import { makeElement } from './element.js';

import baseMix from '../mixin/base.js';
import cascadeMix from '../mixin/cascade.js';
import domMix from '../mixin/dom.js';
import displayMix from '../mixin/display-shape.js';

import { _computed, _isArray, _values, ABSOLUTE, BORDER_BOX, DATA_SCRAWL_GROUP, DIV, NAME, PC50, RELATIVE, ROOT, SUBSCRIBE, T_STACK, ZERO_STR } from '../helper/shared-vars.js';

const $DATA_SCRAWL_STACK = '[data-scrawl-stack]',
    $SCRIPT = 'SCRIPT',
    DATA_SCRAWL_STACK = 'data-scrawl-stack',
    PERMITTED_STACK_ELEMENTS = ['ARTICLE', 'ASIDE', 'DIV', 'FOOTER', 'HEADER', 'MAIN', 'NAV', 'SECTION'],
    STACK = 'stack';

const Stack = function (items = Ωempty) {

    if (items.domElement && PERMITTED_STACK_ELEMENTS.includes(items.domElement.tagName)) {

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

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

        const g = makeGroup({
            name: this.name,
            host: this.name
        });
        this.addGroups(g.name);

        this.set(this.defs);

        this.initializeDisplayShapeActions();

        this.initializeAccessibility();

        this.dirtyDomDimensions = true;
        this.dirtyPath = true;
        this.rotation = null;
        this.currentCornersData = null;
        this.currentTransformString = '';
        this.dirtyTransform = true;
        this.currentTransformOriginString = '';
        this.dirtyTransformOrigin = true;
        this.domShowRequired = true;
        this.dirtyCss = true;
        this.dirtyStampOrder = true;
        this.localMouseListener = null;

        this.set(items);

        const el = this.domElement;

        if (el) {

            const ds = el.dataset;

            if (ds.isResponsive) this.isResponsive = true;

            if (el.getAttribute(DATA_SCRAWL_GROUP) === ROOT) rootElementsAdd(this.name);
        }
        return this;
    }
    return null;
};

const P = Stack.prototype = doCreate();
P.type = T_STACK;
P.lib = STACK;
P.isArtefact = true;
P.isAsset = false;

baseMix(P);
cascadeMix(P);
domMix(P);
displayMix(P);

const defaultAttributes = {

    position: RELATIVE,
    perspective: null,

    trackHere: SUBSCRIBE,

    isResponsive: false,
    containElementsInHeight: false,
};
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 myname = this.name;

    rootElementsRemove(myname);
    removeItem(uiSubscribedElements, myname);

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

    _values(artefact).forEach(art => {

        if (art.host === myname) art.kill();
    });

    this.domElement.remove();
}

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

G.perspectiveX = function () {

    return this.perspective.x;
};
G.perspectiveY = function () {

    return this.perspective.y;
};
G.perspectiveZ = function () {

    return this.perspective.z;
};

S.perspectiveX = function (item) {

    this.perspective.x = item;
    this.dirtyPerspective = true;
};
S.perspectiveY = function (item) {

    this.perspective.y = item;
    this.dirtyPerspective = true;
};
S.perspectiveZ = function (item) {

    this.perspective.z = item;
    this.dirtyPerspective = true;
};
S.perspective = function (item = Ωempty) {

    this.perspective.x = (xt(item.x)) ? item.x : this.perspective.x;
    this.perspective.y = (xt(item.y)) ? item.y : this.perspective.y;
    this.perspective.z = (xt(item.z)) ? item.z : this.perspective.z;
    this.dirtyPerspective = true;
};
D.perspectiveX = function (item) {

    this.perspective.x = addStrings(this.perspective.x, item);
    this.dirtyPerspective = true;
};
D.perspectiveY = function (item) {

    this.perspective.y = addStrings(this.perspective.y, item);
    this.dirtyPerspective = true;
};

G.group = function () {

    return group[this.name];
};

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

    this.groupBuckets.forEach(grp => {

        grp.artefactCalculateBuckets.forEach(art => {

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

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

P.cleanDimensionsAdditionalActions = function () {

    if (this.groupBuckets) {

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

    this.dirtyDomDimensions = true;
    this.dirtyPath = true;
    this.dirtyStart = true;
    this.dirtyHandle = true;
    this.dirtyDisplayShape = true;
    this.dirtyDisplayArea = true;
};

P.cleanPerspective = function () {

    this.dirtyPerspective = false;

    const p = this.perspective;

    this.domPerspectiveString = `perspective-origin: ${p.x} ${p.y}; perspective: ${p.z}px;`;
    this.domShowRequired = true;

    if (this.groupBuckets) {

        this.updateArtefacts({
            dirtyHandle: true,
            dirtyPathObject: true,
        });
    }
};

P.checkResponsive = function () {

    if (this.isResponsive && this.trackHere) {

        if (!this.currentVportWidth) this.currentVportWidth = currentCorePosition.w;
        if (!this.currentVportHeight) this.currentVportHeight = currentCorePosition.h;

        if (this.dirtyHeight && this.containElementsInHeight) {

            this.dirtyHeight = false;
        }

        if (this.currentVportWidth !== currentCorePosition.w) {

            this.currentVportWidth = currentCorePosition.w;

            if (this.containElementsInHeight) {

                this.dirtyHeight = true;
            }
        }

        if (this.currentVportHeight !== currentCorePosition.h) {

            this.currentVportHeight = currentCorePosition.h;
        }
    }
};

P.clear = function () {

    this.checkResponsive();
};

P.compile = function () {

    this.sortGroups();
    this.prepareStamp()
    this.stamp();

    this.groupBuckets.forEach(mygroup => mygroup.stamp());
};

P.show = function () {

    domShow();
};

P.render = function () {

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

P.addExistingDomElements = function (search) {

    if (xt(search)) {

        let el, captured, i, iz;

        const elements = (search.substring) ? document.querySelectorAll(search) : [].concat(search);

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

            el = elements[i];

            if (isa_dom(el)) {

                captured = makeElement({
                    name: el.id || el.name,
                    domElement: el,
                    group: this.name,
                    host: this.name,
                    position: ABSOLUTE,
                    setInitialDimensions: true,
                });

                if (captured && captured.domElement) this.domElement.appendChild(captured.domElement);
            }
        }
    }
    return this;
};

P.addNewElement = function (items) {

    if (items && items.tag) {

        items.domElement = document.createElement(items.tag);
        items.domElement.setAttribute(DATA_SCRAWL_GROUP, this.name);
        if (!xt(items.group)) items.group = this.name;
        items.host = this.name;

        if (!items.position) items.position = ABSOLUTE;

        if (items.dimensions && _isArray(items.dimensions)) {

            items.width = items.dimensions[0] || 100;
            items.height = items.dimensions[1] || 100;
        }

        if (!xt(items.width)) items.width = 100;
        if (!xt(items.height)) items.height = 100;

        const myElement = makeElement(items);

        if (myElement && myElement.domElement) {

            if (!xt(items.boxSizing)) myElement.domElement.style.boxSizing = BORDER_BOX;

            this.domElement.appendChild(myElement.domElement);
        }

        return myElement;
    }
    return false;
};

const makeStack = function (items) {

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

constructors.Stack = Stack;

export const getStacks = function (query = $DATA_SCRAWL_STACK) {

    document.querySelectorAll(query).forEach(el => addInitialStackElement(el));
};

const addInitialStackElement = function (el) {

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

    if (!mygroup) {

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

    if (!myname) {

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

    const mystack = makeStack({
        name: myname,
        domElement: el,
        group: mygroup,
        host: mygroup,
        position: position,
        setInitialDimensions: true,
    });

    processNewStackChildren(el, myname);

    return mystack;
};

const processNewStackChildren = function (el, name) {

    const hostDims = el.getBoundingClientRect();

    let y = 0,
        dims, computed, yHeight, args;

    Array.from(el.children).forEach(child => {

        if (child.getAttribute(DATA_SCRAWL_STACK) == null && !isa_canvas(child) && child.tagName != $SCRIPT) {

            dims = child.getBoundingClientRect();
            computed = _computed(child);

            yHeight = parseFloat(computed.marginTop) + parseFloat(computed.borderTopWidth) + parseFloat(computed.paddingTop) + parseFloat(computed.paddingBottom) + parseFloat(computed.borderBottomWidth) + parseFloat(computed.marginBottom);

            y = (!y) ? dims.top - hostDims.top : y;

            args = {
                name: child.id || child.getAttribute(NAME),
                domElement: child,
                group: name,
                host: name,
                position: ABSOLUTE,
                width: dims.width,
                height: dims.height,
                startX: dims.left - hostDims.left,
                startY: y,
                classes: (child.className) ? child.className : ZERO_STR,
            };

            y += yHeight + dims.height;

            makeElement(args);
        }

        else child.setAttribute(DATA_SCRAWL_GROUP, name);
    });
};

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

    let el, host, hostinscrawl, mygroup, name,
        position = ABSOLUTE;

    if (items.element && items.element.substring) el = document.querySelector(items.element);
    else if (isa_dom(items.element)) el = items.element;
    else el = document.createElement(DIV);

    if (items.host && items.host.substring) {

        host = document.querySelector(items.host);
        if (!host) host = document.body;
    }
    else if (isa_dom(items.host)) host = items.host;
    else if (xt(el.parentElement)) host = el.parentElement;
    else host = document.body;

    if (xt(items.width)) el.style.width = (items.width.toFixed) ? `${items.width}px` : items.width;
    if (xt(items.height)) el.style.height = (items.height.toFixed) ? `${items.height}px` : items.height;

    name = items.name || el.id || el.getAttribute(NAME) || ZERO_STR;
    if (!name) name = generateUniqueString();
    el.id = name;

    el.setAttribute(DATA_SCRAWL_STACK, DATA_SCRAWL_STACK);

    if (host && host.getAttribute(DATA_SCRAWL_STACK) != null) {

        hostinscrawl = artefact[host.id];

        mygroup = (hostinscrawl) ? hostinscrawl.name : ROOT;
    }
    else mygroup = ROOT;

    el.setAttribute(DATA_SCRAWL_GROUP, mygroup);

    if (mygroup === ROOT) position = RELATIVE;

    if (!el.parentElement || host.id !== el.parentElement.id) host.appendChild(el);

    const mystack = makeStack({
        name: name,
        domElement: el,
        group: mygroup,
        host: mygroup,
        position: position,
        setInitialDimensions: true
    });

    processNewStackChildren(el, name);

    Array.from(el.childNodes).forEach(child => {

        if (child.id && rootElementsIncludes(child.id)) rootElementsRemove(child.id);
    });

    delete items.name;
    delete items.element;
    delete items.host;
    delete items.width;
    delete items.height;
    mystack.set(items);

    return mystack;
};

export const getStack = function (search) {

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

    const s = stack[search];

    if (s) {

        if (el.dataset.scrawlGroup != null) return s;
        else purge(search);
    }

    if (el) {
        const newStack = addInitialStackElement(el);
        return newStack;
    }
    return undefined;
};