ImageAsset factory

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

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

import baseMix from '../mixin/base.js';
import assetMix from '../mixin/asset.js';

import { _parse, ANONYMOUS, ASSET, ASSET_IMPORT_REGEX, BLOCK, ELEMENT, IMG, NONE, T_CANVAS, T_CELL, T_GROUP, T_IMAGE, ZERO_STR } from '../helper/shared-vars.js';

const IMAGE_ELEMENTS = ['IMG', 'PICTURE'],
    INTRINSIC = 'intrinsic',
    SLASH = '/',
    ZERO = 'zero';

const ImageAsset = function (items = Ωempty) {

    return this.assetConstructor(items);
};

const P = ImageAsset.prototype = doCreate();
P.type = T_IMAGE;
P.lib = ASSET;
P.isArtefact = false;
P.isAsset = true;

baseMix(P);
assetMix(P);

const defaultAttributes = {

    intrinsicDimensions: null,
};
P.defs = mergeOver(P.defs, defaultAttributes);

P.saveAsPacket = function () {

    return [this.name, this.type, this.lib, {}];
};
P.stringifyFunction = λnull;
P.processPacketOut = λnull;
P.finalizePacketOut = λnull;

P.clone = λcloneError;

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

G.width = function () {

    return this.sourceNaturalWidth || this.source.naturalWidth || 0;
};
G.height = function () {

    return this.sourceNaturalHeight || this.source.naturalHeight || 0;
};

S.source = function (item) {

    if (item) {

        if (IMAGE_ELEMENTS.includes(item.tagName.toUpperCase())) {

            this.source = item;
            this.sourceNaturalWidth = item.naturalWidth;
            this.sourceNaturalHeight = item.naturalHeight;
            this.sourceLoaded = item.complete;
        }

        if (this.sourceLoaded) this.notifySubscribers();
    }
};

S.currentSrc = function (item) {

    this.currentSrc = item;
    this.currentFile = this.currentSrc.split(SLASH).pop();
};

P.checkSource = function (width, height) {

    const el = this.source;

    let action = ELEMENT;

    if (this.sourceLoaded) {

        let iDims = this.intrinsicDimensions[this.currentFile];

        if (this.currentSrc !== el.currentSrc) {

            this.set({
                currentSrc: el.currentSrc
            });

            iDims = this.intrinsicDimensions[this.currentFile];

            if (iDims) action = INTRINSIC;
            else action = ZERO;
        }
        else if (iDims) action = INTRINSIC;

        switch (action) {

            case ZERO :

                this.sourceNaturalWidth = 0;
                this.sourceNaturalHeight = 0;
                this.notifySubscribers();
                break;

            case INTRINSIC :

                if (this.sourceNaturalWidth !== iDims[0] ||
                        this.sourceNaturalHeight !== iDims[1]) {

                    this.sourceNaturalWidth = iDims[0];
                    this.sourceNaturalHeight = iDims[1];

                    this.notifySubscribers();
                }
                break;

            default:

                if (this.sourceNaturalWidth !== el.naturalWidth ||
                        this.sourceNaturalHeight !== el.naturalHeight ||
                        this.sourceNaturalWidth !== width ||
                        this.sourceNaturalHeight !== height) {

                    this.sourceNaturalWidth = el.naturalWidth;
                    this.sourceNaturalHeight = el.naturalHeight;

                    this.notifySubscribers();
                }
        }
    }
};

export const gettableImageAssetAtributes = [];
export const settableImageAssetAtributes = [];

export const importImage = function (...args) {

    const results = [];

    args.forEach(item => {

        let name, url, className, visibility,
            parent = false;

        let flag = false;

        if (item.substring) {

            const match = ASSET_IMPORT_REGEX.exec(item);

            name = (match && match[1]) ? match[1] : ZERO_STR;
            url = item;
            className = ZERO_STR;
            visibility = false;

            flag = true;
        }
        else {

            item = (isa_obj(item)) ? item : false;

            if (item && item.src) {

                name = item.name || ZERO_STR;

                url = item.src;
                className = item.className || ZERO_STR;
                visibility = item.visibility || false;
                if (item.parent) parent = document.querySelector(item.parent);

                flag = true;
            }
        }

        if (flag) {

            const image = makeImageAsset({
                name: name,
                intrinsicDimensions: {},
            });

            const img = document.createElement(IMG);

            img.name = name;
            img.className = className;
            img.crossorigin = ANONYMOUS;

            img.style.display = (visibility) ? BLOCK : NONE;

            if (parent) parent.appendChild(img);

            img.onload = () => {

                image.set({
                    source: img,
                });
            };

            img.src = url;

            image.set({
                source: img,
            });

            results.push(name);
        }
        else results.push(false);
    });
    return results;
};

export const importDomImage = function (query) {

    const items = document.querySelectorAll(query);

    items.forEach(item => {

        let name;

        if (IMAGE_ELEMENTS.includes(item.tagName.toUpperCase())) {

            if (item.id || item.name) name = item.id || item.name;
            else {

                const match = ASSET_IMPORT_REGEX.exec(item.src);
                name = (match && match[1]) ? match[1] : ZERO_STR;
            }

            let intrinsics = item.dataset.dimensions || {};
            if (intrinsics.substring) intrinsics = _parse(intrinsics);

            const image = makeImageAsset({
                name: name,
                source: item,
                intrinsicDimensions: intrinsics,
                currentSrc: item.currentSrc,
            });

            item.onload = () => {

                image.set({
                    source: item,
                });
            };
        }
    });
};

export const createImageFromCell = function (item, stashAsAsset = false) {

    let mycell = (item.substring) ? cell[item] || canvas[item] : item;

    if (mycell.type === T_CANVAS) mycell = mycell.base;

    if (mycell.type === T_CELL) {

        mycell.stashOutput = true;

        if (stashAsAsset) mycell.stashOutputAsAsset = stashAsAsset;
    }
};

export const createImageFromGroup = function (item, stashAsAsset = false) {

    let mygroup;

    if (item && !item.substring) {

        if (item.type === T_GROUP) mygroup = item;
        else if (item.type === T_CELL) mygroup = group[item.name];
        else if (item.type === T_CANVAS) mygroup = group[item.base.name];
    }
    else if (item && item.substring) mygroup = group[item];

    if (mygroup) {

        mygroup.stashOutput = true;

        if (stashAsAsset) mygroup.stashOutputAsAsset = stashAsAsset;
    }
};

export const createImageFromEntity = function (item, stashAsAsset = false) {

    const myentity = (item.substring) ? artefact[item] : item;

    if (myentity.isArtefact) {

        myentity.stashOutput = true;

        if (stashAsAsset) myentity.stashOutputAsAsset = stashAsAsset;
    }
};

const makeImageAsset = function (items) {

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

constructors.ImageAsset = ImageAsset;