tifawt/public/filepond/filepond-plugin-image-editor/FilePondPluginImageEditor.esm.js

/*!
 * Pintura Image Editor 8.13.1
 * (c) 2018-2021 PQINA Inc. - All Rights Reserved
 * License: https://pqina.nl/pintura/license/
 */
/* eslint-disable */

var isFile = (v) => v instanceof File;

var isImage = (file) => /^image/.test(file.type);

var isString = (v) => typeof v === 'string';

let isSafari = null;
var isSafari$1 = () => {
    if (isSafari === null)
        isSafari = isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
    return isSafari;
};

var getImageElementSize = (imageElement) => new Promise((resolve, reject) => {
    let shouldAutoRemove = false;
    // test if image is attached to DOM, if not attached, attach so measurement is correct on Safari
    if (!imageElement.parentNode && isSafari$1()) {
        shouldAutoRemove = true;
        // has width 0 and height 0 to prevent rendering very big SVGs (without width and height) that will for one frame overflow the window and show a scrollbar
        imageElement.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;left:0;top:0;width:0;height:0;`;
        document.body.appendChild(imageElement);
    }
    // start testing size
    const measure = () => {
        const width = imageElement.naturalWidth;
        const height = imageElement.naturalHeight;
        const hasSize = width && height;
        if (!hasSize)
            return;
        // clean up image if was attached for measuring
        if (shouldAutoRemove)
            imageElement.parentNode.removeChild(imageElement);
        clearInterval(intervalId);
        resolve({ width, height });
    };
    imageElement.onerror = (err) => {
        clearInterval(intervalId);
        reject(err);
    };
    const intervalId = setInterval(measure, 1);
    measure();
});

var getImageSize = async (image) => {
    // the image element we'll use to load the image
    let imageElement = image;
    // if is not an image element, it must be a valid image source
    if (!imageElement.src) {
        imageElement = new Image();
        imageElement.src = isString(image) ? image : URL.createObjectURL(image);
    }
    let size;
    try {
        size = await getImageElementSize(imageElement);
    }
    finally {
        isFile(image) && URL.revokeObjectURL(imageElement.src);
    }
    return size;
};

var isBlob = (v) => v instanceof Blob && !(v instanceof File);

var noop = (...args) => { };

let result$3 = null;
var isBrowser = () => {
    if (result$3 === null)
        result$3 = typeof window !== 'undefined' && typeof window.document !== 'undefined';
    return result$3;
};

var h = (name, attributes, children = []) => {
    const el = document.createElement(name);
    // @ts-ignore
    const descriptors = Object.getOwnPropertyDescriptors(el.__proto__);
    for (const key in attributes) {
        if (key === 'style') {
            el.style.cssText = attributes[key];
        }
        else if ((descriptors[key] && descriptors[key].set) ||
            /textContent|innerHTML/.test(key) ||
            typeof attributes[key] === 'function') {
            el[key] = attributes[key];
        }
        else {
            el.setAttribute(key, attributes[key]);
        }
    }
    children.forEach((child) => el.appendChild(child));
    return el;
};

var releaseCanvas = (canvas) => {
    canvas.width = 1;
    canvas.height = 1;
    const ctx = canvas.getContext('2d');
    ctx && ctx.clearRect(0, 0, 1, 1);
};

let result$2 = null;
var supportsWebGL2 = () => {
    if (result$2 === null) {
        if ('WebGL2RenderingContext' in window) {
            let canvas;
            try {
                canvas = h('canvas');
                result$2 = !!canvas.getContext('webgl2');
            }
            catch (err) {
                result$2 = false;
            }
            canvas && releaseCanvas(canvas);
        }
        else {
            result$2 = false;
        }
    }
    return result$2;
};

var getWebGLContext = (canvas, attrs) => {
    if (supportsWebGL2())
        return canvas.getContext('webgl2', attrs);
    return (canvas.getContext('webgl', attrs) ||
        canvas.getContext('experimental-webgl', attrs));
};

let result$1 = null;
var supportsWebGL = () => {
    if (result$1 === null) {
        const canvas = h('canvas');
        result$1 = !!getWebGLContext(canvas);
        releaseCanvas(canvas);
    }
    return result$1;
};

const isOperaMini = () => Object.prototype.toString.call(window['operamini']) === '[object OperaMini]';
const hasPromises = () => 'Promise' in window;
const hasCreateObjectURL = () => 'URL' in window && 'createObjectURL' in window.URL;
const hasVisibility = () => 'visibilityState' in document;
const hasTiming = () => 'performance' in window; // iOS 8.x
const hasFileConstructor = () => 'File' in window; // excludes IE11
let result = null;
var isModernBrowser = () => {
    if (result === null)
        result =
            isBrowser() &&
                // Can't run on Opera Mini due to lack of everything
                !isOperaMini() &&
                // Require these APIs to feature detect a modern browser
                hasVisibility() &&
                hasPromises() &&
                hasFileConstructor() &&
                hasCreateObjectURL() &&
                hasTiming();
    return result;
};

/**
 * Image Edit Proxy Plugin
 */
const plugin = (_) => {
    const { addFilter, utils, views } = _;
    const { Type, createRoute } = utils;
    const { fileActionButton } = views;
    const getEditorSafe = (editor) => (editor === null ? {} : editor);
    addFilter('SHOULD_REMOVE_ON_REVERT', (shouldRemove, { item, query }) => new Promise((resolve) => {
        const { file } = item;
        // if this file is editable it shouldn't be removed immidiately even when instant uploading
        const canEdit = query('GET_ALLOW_IMAGE_EDITOR') &&
            query('GET_IMAGE_EDITOR_ALLOW_EDIT') &&
            query('GET_IMAGE_EDITOR_SUPPORT_EDIT') &&
            query('GET_IMAGE_EDITOR_SUPPORT_IMAGE')(file);
        // if the file cannot be edited it should be removed on revert
        resolve(!canEdit);
    }));
    // open editor when loading a new item
    addFilter('DID_LOAD_ITEM', (item, { query, dispatch }) => new Promise((resolve, reject) => {
        // if is temp or local file
        if (item.origin > 1) {
            resolve(item);
            return;
        }
        // get file reference
        const { file } = item;
        if (!query('GET_ALLOW_IMAGE_EDITOR') ||
            !query('GET_IMAGE_EDITOR_INSTANT_EDIT' ))
            return resolve(item);
        // exit if this is not an image
        if (!query('GET_IMAGE_EDITOR_SUPPORT_IMAGE')(file))
            return resolve(item);
        // request editing of a file
        const requestEdit = () => {
            if (!editRequestQueue.length)
                return;
            const { item, resolve, reject } = editRequestQueue[0];
            dispatch('EDIT_ITEM', {
                id: item.id,
                handleEditorResponse: createEditorResponseHandler(item, resolve, reject),
            });
        };
        // is called when the user confirms editing the file
        const createEditorResponseHandler = (item, resolve, reject) => (userDidConfirm) => {
            // remove item
            editRequestQueue.shift();
            // handle item
            if (userDidConfirm) {
                resolve(item);
            }
            else {
                reject(item);
            }
            // TODO: Fix, should not be needed to kick the internal loop in case no processes are running
            dispatch('KICK');
            // handle next item!
            requestEdit();
        };
        queueEditRequest({ item, resolve, reject });
        if (editRequestQueue.length === 1) {
            requestEdit();
        }
    }));
    // extend item methods
    addFilter('DID_CREATE_ITEM', (item, { query, dispatch }) => {
        item.extend('edit', () => {
            dispatch('EDIT_ITEM', { id: item.id });
        });
    });
    const editRequestQueue = [];
    const queueEditRequest = (editRequest) => {
        editRequestQueue.push(editRequest);
        return editRequest;
    };
    const couldTransformFile = (query) => {
        // no editor defined, then exit
        const { imageProcessor, imageReader, imageWriter } = getEditorSafe(query('GET_IMAGE_EDITOR'));
        return (query('GET_IMAGE_EDITOR_WRITE_IMAGE') &&
            query('GET_IMAGE_EDITOR_SUPPORT_WRITE_IMAGE') &&
            imageProcessor &&
            imageReader &&
            imageWriter);
    };
    // called for each view that is created right after the 'create' method
    addFilter('CREATE_VIEW', (viewAPI) => {
        // get reference to created view
        const { is, view, query } = viewAPI;
        if (!query('GET_ALLOW_IMAGE_EDITOR'))
            return;
        if (!query('GET_IMAGE_EDITOR_SUPPORT_WRITE_IMAGE'))
            return;
        const supportsFilePoster = query('GET_ALLOW_FILE_POSTER');
        // only run for either the file or the file info panel
        const shouldExtendView = (is('file-info') && !supportsFilePoster) || (is('file') && supportsFilePoster);
        if (!shouldExtendView)
            return;
        // no editor defined, then exit
        const { createEditor, imageProcessor, imageReader, imageWriter, editorOptions, legacyDataToImageState, imageState: imageBaseState, } = getEditorSafe(query('GET_IMAGE_EDITOR'));
        if (!imageReader || !imageWriter || !editorOptions || !editorOptions.locale)
            return;
        // remove default image reader and writer if set
        delete editorOptions.imageReader;
        delete editorOptions.imageWriter;
        const [createImageReader, imageReaderOptions] = imageReader;
        const [createImageWriter = noop, imageWriterOptions] = imageWriter;
        // tests if file item has poster
        const getItemByProps = (props) => {
            const { id } = props;
            const item = query('GET_ITEM', id);
            return item;
        };
        const hasPoster = (root, props) => {
            if (!query('GET_ALLOW_FILE_POSTER'))
                return false;
            const item = getItemByProps(props);
            if (!item)
                return;
            // test if is filtered
            if (!query('GET_FILE_POSTER_FILTER_ITEM')(item))
                return false;
            const poster = item.getMetadata('poster');
            return !!poster;
        };
        // generate preview
        const getPosterTargetSize = (root, targetSize) => {
            const posterHeight = root.query('GET_FILE_POSTER_HEIGHT');
            const maxPosterHeight = root.query('GET_FILE_POSTER_MAX_HEIGHT');
            if (posterHeight) {
                targetSize.width = posterHeight * 2;
                targetSize.height = posterHeight * 2;
            }
            else if (maxPosterHeight) {
                targetSize.width = maxPosterHeight * 2;
                targetSize.height = maxPosterHeight * 2;
            }
            return targetSize;
        };
        const createEditorOptions = (root) => {
            const targetSize = getPosterTargetSize(root, {
                width: 512,
                height: 512,
            });
            return {
                ...editorOptions,
                imageReader: createImageReader(imageReaderOptions),
                imageWriter: createImageWriter({
                    // poster size
                    targetSize,
                    // can optionally overwrite poster size
                    ...(imageWriterOptions || {}),
                }),
            };
        };
        const createImagePoster = ({ root, props }) => {
            // need image processor to create image poster
            if (!imageProcessor)
                return;
            const item = getItemByProps(props);
            if (!item)
                return;
            const file = item.file;
            const imageState = item.getMetadata('imageState');
            const options = {
                ...createEditorOptions(root),
                imageState: {
                    ...imageBaseState,
                    ...imageState,
                },
            };
            imageProcessor(file, options).then(({ dest }) => {
                item.setMetadata('poster', URL.createObjectURL(dest), true);
            });
        };
        // opens the editor, if it does not already exist, it creates the editor
        const openImageEditor = ({ root, props, action }) => {
            const { handleEditorResponse } = action;
            // get item
            const item = getItemByProps(props);
            // file to open
            const file = item.file;
            // open the editor (sets editor properties and imageState property)
            const editor = createEditor({
                ...createEditorOptions(root),
                src: file,
            });
            // when the image has loaded, update the editor
            editor.on('load', ({ size }) => {
                // get current image edit state
                let imageState = item.getMetadata('imageState');
                imageState = legacyDataToImageState
                    ? legacyDataToImageState(editor, size, imageState)
                    : imageState;
                // update editor view based on image edit state
                editor.imageState = {
                    ...imageBaseState,
                    ...imageState,
                };
            });
            editor.on('process', ({ imageState, dest }) => {
                // if already has post URL, try to revoke
                const poster = item.getMetadata('poster');
                poster && URL.revokeObjectURL(item.getMetadata('poster'));
                // store state, two seperate actions because we want to trigger preparefile when setting `imageState`
                item.setMetadata('poster', URL.createObjectURL(dest));
                item.setMetadata('imageState', imageState);
                // used in instant edit mode
                if (!handleEditorResponse)
                    return;
                handleEditorResponse(true);
            });
            editor.on('close', () => {
                // used in instant edit mode
                if (!handleEditorResponse)
                    return;
                handleEditorResponse(false);
            });
        };
        //#region view
        const didLoadItem = ({ root, props }) => {
            const { id } = props;
            // try to access item
            const item = query('GET_ITEM', id);
            if (!item)
                return;
            // get the file object
            const file = item.file;
            // exit if this is not an image
            if (!query('GET_IMAGE_EDITOR_SUPPORT_IMAGE')(file))
                return;
            if (query('GET_ALLOW_FILE_POSTER') && !item.getMetadata('poster')) {
                root.dispatch('REQUEST_CREATE_IMAGE_POSTER', { id });
            }
            if (!query('GET_IMAGE_EDITOR_ALLOW_EDIT') || !query('GET_IMAGE_EDITOR_SUPPORT_EDIT'))
                return;
            // handle interactions
            root.ref.handleEdit = (e) => {
                e.stopPropagation();
                root.dispatch('EDIT_ITEM', { id });
            };
            updateEditButton(root, props);
        };
        const updateEditButton = (root, props) => {
            root.ref.buttonEditItem && root.removeChildView(root.ref.buttonEditItem);
            if (root.ref.editButton && root.ref.editButton.parentNode) {
                root.ref.editButton.parentNode.removeChild(root.ref.editButton);
            }
            if (hasPoster(root, props)) {
                // add edit button to preview
                const buttonView = view.createChildView(fileActionButton, {
                    label: 'edit',
                    icon: query('GET_IMAGE_EDITOR_ICON_EDIT'),
                    opacity: 0,
                });
                // edit item classname
                buttonView.element.classList.add('filepond--action-edit-item');
                buttonView.element.dataset.align = query('GET_STYLE_IMAGE_EDITOR_BUTTON_EDIT_ITEM_POSITION');
                buttonView.on('click', root.ref.handleEdit);
                root.ref.buttonEditItem = view.appendChildView(buttonView);
            }
            else {
                // view is file info
                const filenameElement = view.element.querySelector('.filepond--file-info-main');
                const editButton = document.createElement('button');
                editButton.className = 'filepond--action-edit-item-alt';
                editButton.innerHTML = query('GET_IMAGE_EDITOR_ICON_EDIT') + '<span>edit</span>';
                editButton.addEventListener('click', root.ref.handleEdit);
                filenameElement.appendChild(editButton);
                root.ref.editButton = editButton;
            }
        };
        const didUpdateItemMetadata = ({ root, props, action }) => {
            if (!/poster/.test(action.change.key))
                return;
            if (!query('GET_IMAGE_EDITOR_ALLOW_EDIT') || !query('GET_IMAGE_EDITOR_SUPPORT_EDIT'))
                return;
            updateEditButton(root, props);
        };
        view.registerDestroyer(({ root }) => {
            if (root.ref.buttonEditItem) {
                root.ref.buttonEditItem.off('click', root.ref.handleEdit);
            }
            if (root.ref.editButton) {
                root.ref.editButton.removeEventListener('click', root.ref.handleEdit);
            }
        });
        const routes = {
            EDIT_ITEM: openImageEditor,
            DID_LOAD_ITEM: didLoadItem,
            DID_UPDATE_ITEM_METADATA: didUpdateItemMetadata,
            DID_REMOVE_ITEM: ({ props }) => {
                const { id } = props;
                const item = query('GET_ITEM', id);
                if (!item)
                    return;
                const poster = item.getMetadata('poster');
                poster && URL.revokeObjectURL(poster);
            },
            REQUEST_CREATE_IMAGE_POSTER: createImagePoster,
            DID_FILE_POSTER_LOAD: undefined,
        };
        if (supportsFilePoster) {
            // view is file
            const didPosterUpdate = ({ root }) => {
                if (!root.ref.buttonEditItem)
                    return;
                root.ref.buttonEditItem.opacity = 1;
            };
            routes.DID_FILE_POSTER_LOAD = didPosterUpdate;
        }
        //#endregion
        // start writing
        view.registerWriter(createRoute(routes));
    });
    //#region write image
    addFilter('SHOULD_PREPARE_OUTPUT', (shouldPrepareOutput, { query, change, item }) => new Promise((resolve) => {
        if (!query('GET_IMAGE_EDITOR_SUPPORT_IMAGE')(item.file))
            return resolve(false);
        if (change && !/imageState/.test(change.key))
            return resolve(false);
        resolve(!query('IS_ASYNC'));
    }));
    const shouldTransformFile = (query, file, item) => new Promise((resolve) => {
        // invalid item
        if (!couldTransformFile(query) ||
            item.archived ||
            (!isFile(file) && !isBlob(file)) ||
            !query('GET_IMAGE_EDITOR_SUPPORT_IMAGE')(file)) {
            return resolve(false);
        }
        // if size can't be read this browser doesn't support image
        getImageSize(file)
            .then(() => {
            const fn = query('GET_IMAGE_TRANSFORM_IMAGE_FILTER');
            if (fn) {
                const filterResult = fn(file);
                if (typeof filterResult === 'boolean') {
                    return resolve(filterResult);
                }
                if (typeof filterResult.then === 'function') {
                    return filterResult.then(resolve);
                }
            }
            resolve(true);
        })
            .catch(() => {
            resolve(false);
        });
    });
    // subscribe to file transformations
    addFilter('PREPARE_OUTPUT', (file, { query, item }) => {
        const writeOutputImage = (file) => new Promise((resolve, reject) => {
            const imageState = item.getMetadata('imageState');
            // no editor defined, then exit
            const { imageProcessor, imageReader, imageWriter, editorOptions, imageState: imageBaseState, } = getEditorSafe(query('GET_IMAGE_EDITOR'));
            if (!imageProcessor || !imageReader || !imageWriter || !editorOptions)
                return;
            const [createImageReader, imageReaderOptions] = imageReader;
            const [createImageWriter = noop, imageWriterOptions] = imageWriter;
            imageProcessor(file, {
                ...editorOptions,
                imageReader: createImageReader(imageReaderOptions),
                imageWriter: createImageWriter(imageWriterOptions),
                imageState: {
                    ...imageBaseState,
                    ...imageState,
                },
            })
                .then(resolve)
                .catch(reject);
        });
        return new Promise((resolve) => {
            shouldTransformFile(query, file, item).then((shouldWrite) => {
                if (!shouldWrite)
                    return resolve(file);
                writeOutputImage(file).then((res) => {
                    const afterFn = query('GET_IMAGE_EDITOR_AFTER_WRITE_IMAGE');
                    if (afterFn)
                        return afterFn(res).then(resolve);
                    // @ts-ignore
                    resolve(res.dest);
                });
            });
        });
    });
    //#endregion
    // Expose plugin options
    return {
        options: {
            // enable or disable image editing
            allowImageEditor: [true, Type.BOOLEAN],
            // open editor when image is dropped
            imageEditorInstantEdit: [false, Type.BOOLEAN],
            // allow editing
            imageEditorAllowEdit: [true, Type.BOOLEAN],
            // cannot edit if no WebGL or is <=IE11
            imageEditorSupportEdit: [
                isBrowser() && isModernBrowser() && supportsWebGL(),
                Type.BOOLEAN,
            ],
            // receives file and should return true if can edit
            imageEditorSupportImage: [isImage, Type.FUNCTION],
            // cannot write if is <= IE11
            imageEditorSupportWriteImage: [isModernBrowser(), Type.BOOLEAN],
            // should output image
            imageEditorWriteImage: [true, Type.BOOLEAN],
            // receives written image and can return single or more images
            imageEditorAfterWriteImage: [undefined, Type.FUNCTION],
            // editor object
            imageEditor: [null, Type.OBJECT],
            // the icon to use for the edit button
            imageEditorIconEdit: [
                '<svg width="26" height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M8.5 17h1.586l7-7L15.5 8.414l-7 7V17zm-1.707-2.707l8-8a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414l-8 8A1 1 0 0 1 10.5 19h-3a1 1 0 0 1-1-1v-3a1 1 0 0 1 .293-.707z" fill="currentColor" fill-rule="nonzero"/></svg>',
                Type.STRING,
            ],
            // location of processing button
            styleImageEditorButtonEditItemPosition: ['bottom center', Type.STRING],
        },
    };
};
// fire pluginloaded event if running in browser, this allows registering the plugin when using async script tags
if (isBrowser())
    document.dispatchEvent(new CustomEvent('FilePond:pluginloaded', { detail: plugin }));

export default plugin;