(function(l, r) { if (l.getElementById('livereloadscript')) return; r = l.createElement('script'); r.async = 1; r.src = '//' + (window.location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1'; r.id = 'livereloadscript'; l.getElementsByTagName('head')[0].appendChild(r) })(window.document);
var app = (function () {
    'use strict';

    function noop() { }
    const identity = x => x;
    function assign(tar, src) {
        // @ts-ignore
        for (const k in src)
            tar[k] = src[k];
        return tar;
    }
    function add_location(element, file, line, column, char) {
        element.__svelte_meta = {
            loc: { file, line, column, char }
        };
    }
    function run(fn) {
        return fn();
    }
    function blank_object() {
        return Object.create(null);
    }
    function run_all(fns) {
        fns.forEach(run);
    }
    function is_function(thing) {
        return typeof thing === 'function';
    }
    function safe_not_equal(a, b) {
        return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
    }
    let src_url_equal_anchor;
    function src_url_equal(element_src, url) {
        if (!src_url_equal_anchor) {
            src_url_equal_anchor = document.createElement('a');
        }
        src_url_equal_anchor.href = url;
        return element_src === src_url_equal_anchor.href;
    }
    function not_equal(a, b) {
        return a != a ? b == b : a !== b;
    }
    function is_empty(obj) {
        return Object.keys(obj).length === 0;
    }
    function create_slot(definition, ctx, $$scope, fn) {
        if (definition) {
            const slot_ctx = get_slot_context(definition, ctx, $$scope, fn);
            return definition[0](slot_ctx);
        }
    }
    function get_slot_context(definition, ctx, $$scope, fn) {
        return definition[1] && fn
            ? assign($$scope.ctx.slice(), definition[1](fn(ctx)))
            : $$scope.ctx;
    }
    function get_slot_changes(definition, $$scope, dirty, fn) {
        if (definition[2] && fn) {
            const lets = definition[2](fn(dirty));
            if ($$scope.dirty === undefined) {
                return lets;
            }
            if (typeof lets === 'object') {
                const merged = [];
                const len = Math.max($$scope.dirty.length, lets.length);
                for (let i = 0; i < len; i += 1) {
                    merged[i] = $$scope.dirty[i] | lets[i];
                }
                return merged;
            }
            return $$scope.dirty | lets;
        }
        return $$scope.dirty;
    }
    function update_slot_base(slot, slot_definition, ctx, $$scope, slot_changes, get_slot_context_fn) {
        if (slot_changes) {
            const slot_context = get_slot_context(slot_definition, ctx, $$scope, get_slot_context_fn);
            slot.p(slot_context, slot_changes);
        }
    }
    function get_all_dirty_from_scope($$scope) {
        if ($$scope.ctx.length > 32) {
            const dirty = [];
            const length = $$scope.ctx.length / 32;
            for (let i = 0; i < length; i++) {
                dirty[i] = -1;
            }
            return dirty;
        }
        return -1;
    }
    function action_destroyer(action_result) {
        return action_result && is_function(action_result.destroy) ? action_result.destroy : noop;
    }

    const is_client = typeof window !== 'undefined';
    let now = is_client
        ? () => window.performance.now()
        : () => Date.now();
    let raf = is_client ? cb => requestAnimationFrame(cb) : noop;

    const tasks = new Set();
    function run_tasks(now) {
        tasks.forEach(task => {
            if (!task.c(now)) {
                tasks.delete(task);
                task.f();
            }
        });
        if (tasks.size !== 0)
            raf(run_tasks);
    }
    /**
     * Creates a new task that runs on each raf frame
     * until it returns a falsy value or is aborted
     */
    function loop(callback) {
        let task;
        if (tasks.size === 0)
            raf(run_tasks);
        return {
            promise: new Promise(fulfill => {
                tasks.add(task = { c: callback, f: fulfill });
            }),
            abort() {
                tasks.delete(task);
            }
        };
    }
    function append(target, node) {
        target.appendChild(node);
    }
    function get_root_for_style(node) {
        if (!node)
            return document;
        const root = node.getRootNode ? node.getRootNode() : node.ownerDocument;
        if (root && root.host) {
            return root;
        }
        return node.ownerDocument;
    }
    function append_empty_stylesheet(node) {
        const style_element = element('style');
        append_stylesheet(get_root_for_style(node), style_element);
        return style_element.sheet;
    }
    function append_stylesheet(node, style) {
        append(node.head || node, style);
    }
    function insert(target, node, anchor) {
        target.insertBefore(node, anchor || null);
    }
    function detach(node) {
        node.parentNode.removeChild(node);
    }
    function destroy_each(iterations, detaching) {
        for (let i = 0; i < iterations.length; i += 1) {
            if (iterations[i])
                iterations[i].d(detaching);
        }
    }
    function element(name) {
        return document.createElement(name);
    }
    function svg_element(name) {
        return document.createElementNS('http://www.w3.org/2000/svg', name);
    }
    function text(data) {
        return document.createTextNode(data);
    }
    function space() {
        return text(' ');
    }
    function empty() {
        return text('');
    }
    function listen(node, event, handler, options) {
        node.addEventListener(event, handler, options);
        return () => node.removeEventListener(event, handler, options);
    }
    function prevent_default(fn) {
        return function (event) {
            event.preventDefault();
            // @ts-ignore
            return fn.call(this, event);
        };
    }
    function attr(node, attribute, value) {
        if (value == null)
            node.removeAttribute(attribute);
        else if (node.getAttribute(attribute) !== value)
            node.setAttribute(attribute, value);
    }
    function to_number(value) {
        return value === '' ? null : +value;
    }
    function children(element) {
        return Array.from(element.childNodes);
    }
    function set_input_value(input, value) {
        input.value = value == null ? '' : value;
    }
    function set_style(node, key, value, important) {
        if (value === null) {
            node.style.removeProperty(key);
        }
        else {
            node.style.setProperty(key, value, important ? 'important' : '');
        }
    }
    function select_option(select, value) {
        for (let i = 0; i < select.options.length; i += 1) {
            const option = select.options[i];
            if (option.__value === value) {
                option.selected = true;
                return;
            }
        }
        select.selectedIndex = -1; // no option should be selected
    }
    function select_value(select) {
        const selected_option = select.querySelector(':checked') || select.options[0];
        return selected_option && selected_option.__value;
    }
    function toggle_class(element, name, toggle) {
        element.classList[toggle ? 'add' : 'remove'](name);
    }
    function custom_event(type, detail, { bubbles = false, cancelable = false } = {}) {
        const e = document.createEvent('CustomEvent');
        e.initCustomEvent(type, bubbles, cancelable, detail);
        return e;
    }

    // we need to store the information for multiple documents because a Svelte application could also contain iframes
    // https://github.com/sveltejs/svelte/issues/3624
    const managed_styles = new Map();
    let active = 0;
    // https://github.com/darkskyapp/string-hash/blob/master/index.js
    function hash(str) {
        let hash = 5381;
        let i = str.length;
        while (i--)
            hash = ((hash << 5) - hash) ^ str.charCodeAt(i);
        return hash >>> 0;
    }
    function create_style_information(doc, node) {
        const info = { stylesheet: append_empty_stylesheet(node), rules: {} };
        managed_styles.set(doc, info);
        return info;
    }
    function create_rule(node, a, b, duration, delay, ease, fn, uid = 0) {
        const step = 16.666 / duration;
        let keyframes = '{\n';
        for (let p = 0; p <= 1; p += step) {
            const t = a + (b - a) * ease(p);
            keyframes += p * 100 + `%{${fn(t, 1 - t)}}\n`;
        }
        const rule = keyframes + `100% {${fn(b, 1 - b)}}\n}`;
        const name = `__svelte_${hash(rule)}_${uid}`;
        const doc = get_root_for_style(node);
        const { stylesheet, rules } = managed_styles.get(doc) || create_style_information(doc, node);
        if (!rules[name]) {
            rules[name] = true;
            stylesheet.insertRule(`@keyframes ${name} ${rule}`, stylesheet.cssRules.length);
        }
        const animation = node.style.animation || '';
        node.style.animation = `${animation ? `${animation}, ` : ''}${name} ${duration}ms linear ${delay}ms 1 both`;
        active += 1;
        return name;
    }
    function delete_rule(node, name) {
        const previous = (node.style.animation || '').split(', ');
        const next = previous.filter(name
            ? anim => anim.indexOf(name) < 0 // remove specific animation
            : anim => anim.indexOf('__svelte') === -1 // remove all Svelte animations
        );
        const deleted = previous.length - next.length;
        if (deleted) {
            node.style.animation = next.join(', ');
            active -= deleted;
            if (!active)
                clear_rules();
        }
    }
    function clear_rules() {
        raf(() => {
            if (active)
                return;
            managed_styles.forEach(info => {
                const { stylesheet } = info;
                let i = stylesheet.cssRules.length;
                while (i--)
                    stylesheet.deleteRule(i);
                info.rules = {};
            });
            managed_styles.clear();
        });
    }

    let current_component;
    function set_current_component(component) {
        current_component = component;
    }
    function get_current_component() {
        if (!current_component)
            throw new Error('Function called outside component initialization');
        return current_component;
    }
    function onMount(fn) {
        get_current_component().$$.on_mount.push(fn);
    }
    function onDestroy(fn) {
        get_current_component().$$.on_destroy.push(fn);
    }
    function createEventDispatcher() {
        const component = get_current_component();
        return (type, detail, { cancelable = false } = {}) => {
            const callbacks = component.$$.callbacks[type];
            if (callbacks) {
                // TODO are there situations where events could be dispatched
                // in a server (non-DOM) environment?
                const event = custom_event(type, detail, { cancelable });
                callbacks.slice().forEach(fn => {
                    fn.call(component, event);
                });
                return !event.defaultPrevented;
            }
            return true;
        };
    }
    // TODO figure out if we still want to support
    // shorthand events, or if we want to implement
    // a real bubbling mechanism
    function bubble(component, event) {
        const callbacks = component.$$.callbacks[event.type];
        if (callbacks) {
            // @ts-ignore
            callbacks.slice().forEach(fn => fn.call(this, event));
        }
    }

    const dirty_components = [];
    const binding_callbacks = [];
    const render_callbacks = [];
    const flush_callbacks = [];
    const resolved_promise = Promise.resolve();
    let update_scheduled = false;
    function schedule_update() {
        if (!update_scheduled) {
            update_scheduled = true;
            resolved_promise.then(flush);
        }
    }
    function add_render_callback(fn) {
        render_callbacks.push(fn);
    }
    // flush() calls callbacks in this order:
    // 1. All beforeUpdate callbacks, in order: parents before children
    // 2. All bind:this callbacks, in reverse order: children before parents.
    // 3. All afterUpdate callbacks, in order: parents before children. EXCEPT
    //    for afterUpdates called during the initial onMount, which are called in
    //    reverse order: children before parents.
    // Since callbacks might update component values, which could trigger another
    // call to flush(), the following steps guard against this:
    // 1. During beforeUpdate, any updated components will be added to the
    //    dirty_components array and will cause a reentrant call to flush(). Because
    //    the flush index is kept outside the function, the reentrant call will pick
    //    up where the earlier call left off and go through all dirty components. The
    //    current_component value is saved and restored so that the reentrant call will
    //    not interfere with the "parent" flush() call.
    // 2. bind:this callbacks cannot trigger new flush() calls.
    // 3. During afterUpdate, any updated components will NOT have their afterUpdate
    //    callback called a second time; the seen_callbacks set, outside the flush()
    //    function, guarantees this behavior.
    const seen_callbacks = new Set();
    let flushidx = 0; // Do *not* move this inside the flush() function
    function flush() {
        const saved_component = current_component;
        do {
            // first, call beforeUpdate functions
            // and update components
            while (flushidx < dirty_components.length) {
                const component = dirty_components[flushidx];
                flushidx++;
                set_current_component(component);
                update(component.$$);
            }
            set_current_component(null);
            dirty_components.length = 0;
            flushidx = 0;
            while (binding_callbacks.length)
                binding_callbacks.pop()();
            // then, once components are updated, call
            // afterUpdate functions. This may cause
            // subsequent updates...
            for (let i = 0; i < render_callbacks.length; i += 1) {
                const callback = render_callbacks[i];
                if (!seen_callbacks.has(callback)) {
                    // ...so guard against infinite loops
                    seen_callbacks.add(callback);
                    callback();
                }
            }
            render_callbacks.length = 0;
        } while (dirty_components.length);
        while (flush_callbacks.length) {
            flush_callbacks.pop()();
        }
        update_scheduled = false;
        seen_callbacks.clear();
        set_current_component(saved_component);
    }
    function update($$) {
        if ($$.fragment !== null) {
            $$.update();
            run_all($$.before_update);
            const dirty = $$.dirty;
            $$.dirty = [-1];
            $$.fragment && $$.fragment.p($$.ctx, dirty);
            $$.after_update.forEach(add_render_callback);
        }
    }

    let promise;
    function wait() {
        if (!promise) {
            promise = Promise.resolve();
            promise.then(() => {
                promise = null;
            });
        }
        return promise;
    }
    function dispatch(node, direction, kind) {
        node.dispatchEvent(custom_event(`${direction ? 'intro' : 'outro'}${kind}`));
    }
    const outroing = new Set();
    let outros;
    function group_outros() {
        outros = {
            r: 0,
            c: [],
            p: outros // parent group
        };
    }
    function check_outros() {
        if (!outros.r) {
            run_all(outros.c);
        }
        outros = outros.p;
    }
    function transition_in(block, local) {
        if (block && block.i) {
            outroing.delete(block);
            block.i(local);
        }
    }
    function transition_out(block, local, detach, callback) {
        if (block && block.o) {
            if (outroing.has(block))
                return;
            outroing.add(block);
            outros.c.push(() => {
                outroing.delete(block);
                if (callback) {
                    if (detach)
                        block.d(1);
                    callback();
                }
            });
            block.o(local);
        }
    }
    const null_transition = { duration: 0 };
    function create_bidirectional_transition(node, fn, params, intro) {
        let config = fn(node, params);
        let t = intro ? 0 : 1;
        let running_program = null;
        let pending_program = null;
        let animation_name = null;
        function clear_animation() {
            if (animation_name)
                delete_rule(node, animation_name);
        }
        function init(program, duration) {
            const d = (program.b - t);
            duration *= Math.abs(d);
            return {
                a: t,
                b: program.b,
                d,
                duration,
                start: program.start,
                end: program.start + duration,
                group: program.group
            };
        }
        function go(b) {
            const { delay = 0, duration = 300, easing = identity, tick = noop, css } = config || null_transition;
            const program = {
                start: now() + delay,
                b
            };
            if (!b) {
                // @ts-ignore todo: improve typings
                program.group = outros;
                outros.r += 1;
            }
            if (running_program || pending_program) {
                pending_program = program;
            }
            else {
                // if this is an intro, and there's a delay, we need to do
                // an initial tick and/or apply CSS animation immediately
                if (css) {
                    clear_animation();
                    animation_name = create_rule(node, t, b, duration, delay, easing, css);
                }
                if (b)
                    tick(0, 1);
                running_program = init(program, duration);
                add_render_callback(() => dispatch(node, b, 'start'));
                loop(now => {
                    if (pending_program && now > pending_program.start) {
                        running_program = init(pending_program, duration);
                        pending_program = null;
                        dispatch(node, running_program.b, 'start');
                        if (css) {
                            clear_animation();
                            animation_name = create_rule(node, t, running_program.b, running_program.duration, 0, easing, config.css);
                        }
                    }
                    if (running_program) {
                        if (now >= running_program.end) {
                            tick(t = running_program.b, 1 - t);
                            dispatch(node, running_program.b, 'end');
                            if (!pending_program) {
                                // we're done
                                if (running_program.b) {
                                    // intro — we can tidy up immediately
                                    clear_animation();
                                }
                                else {
                                    // outro — needs to be coordinated
                                    if (!--running_program.group.r)
                                        run_all(running_program.group.c);
                                }
                            }
                            running_program = null;
                        }
                        else if (now >= running_program.start) {
                            const p = now - running_program.start;
                            t = running_program.a + running_program.d * easing(p / running_program.duration);
                            tick(t, 1 - t);
                        }
                    }
                    return !!(running_program || pending_program);
                });
            }
        }
        return {
            run(b) {
                if (is_function(config)) {
                    wait().then(() => {
                        // @ts-ignore
                        config = config();
                        go(b);
                    });
                }
                else {
                    go(b);
                }
            },
            end() {
                clear_animation();
                running_program = pending_program = null;
            }
        };
    }

    const globals = (typeof window !== 'undefined'
        ? window
        : typeof globalThis !== 'undefined'
            ? globalThis
            : global);
    function outro_and_destroy_block(block, lookup) {
        transition_out(block, 1, 1, () => {
            lookup.delete(block.key);
        });
    }
    function update_keyed_each(old_blocks, dirty, get_key, dynamic, ctx, list, lookup, node, destroy, create_each_block, next, get_context) {
        let o = old_blocks.length;
        let n = list.length;
        let i = o;
        const old_indexes = {};
        while (i--)
            old_indexes[old_blocks[i].key] = i;
        const new_blocks = [];
        const new_lookup = new Map();
        const deltas = new Map();
        i = n;
        while (i--) {
            const child_ctx = get_context(ctx, list, i);
            const key = get_key(child_ctx);
            let block = lookup.get(key);
            if (!block) {
                block = create_each_block(key, child_ctx);
                block.c();
            }
            else if (dynamic) {
                block.p(child_ctx, dirty);
            }
            new_lookup.set(key, new_blocks[i] = block);
            if (key in old_indexes)
                deltas.set(key, Math.abs(i - old_indexes[key]));
        }
        const will_move = new Set();
        const did_move = new Set();
        function insert(block) {
            transition_in(block, 1);
            block.m(node, next);
            lookup.set(block.key, block);
            next = block.first;
            n--;
        }
        while (o && n) {
            const new_block = new_blocks[n - 1];
            const old_block = old_blocks[o - 1];
            const new_key = new_block.key;
            const old_key = old_block.key;
            if (new_block === old_block) {
                // do nothing
                next = new_block.first;
                o--;
                n--;
            }
            else if (!new_lookup.has(old_key)) {
                // remove old block
                destroy(old_block, lookup);
                o--;
            }
            else if (!lookup.has(new_key) || will_move.has(new_key)) {
                insert(new_block);
            }
            else if (did_move.has(old_key)) {
                o--;
            }
            else if (deltas.get(new_key) > deltas.get(old_key)) {
                did_move.add(new_key);
                insert(new_block);
            }
            else {
                will_move.add(old_key);
                o--;
            }
        }
        while (o--) {
            const old_block = old_blocks[o];
            if (!new_lookup.has(old_block.key))
                destroy(old_block, lookup);
        }
        while (n)
            insert(new_blocks[n - 1]);
        return new_blocks;
    }
    function validate_each_keys(ctx, list, get_context, get_key) {
        const keys = new Set();
        for (let i = 0; i < list.length; i++) {
            const key = get_key(get_context(ctx, list, i));
            if (keys.has(key)) {
                throw new Error('Cannot have duplicate keys in a keyed each');
            }
            keys.add(key);
        }
    }
    function create_component(block) {
        block && block.c();
    }
    function mount_component(component, target, anchor, customElement) {
        const { fragment, on_mount, on_destroy, after_update } = component.$$;
        fragment && fragment.m(target, anchor);
        if (!customElement) {
            // onMount happens before the initial afterUpdate
            add_render_callback(() => {
                const new_on_destroy = on_mount.map(run).filter(is_function);
                if (on_destroy) {
                    on_destroy.push(...new_on_destroy);
                }
                else {
                    // Edge case - component was destroyed immediately,
                    // most likely as a result of a binding initialising
                    run_all(new_on_destroy);
                }
                component.$$.on_mount = [];
            });
        }
        after_update.forEach(add_render_callback);
    }
    function destroy_component(component, detaching) {
        const $$ = component.$$;
        if ($$.fragment !== null) {
            run_all($$.on_destroy);
            $$.fragment && $$.fragment.d(detaching);
            // TODO null out other refs, including component.$$ (but need to
            // preserve final state?)
            $$.on_destroy = $$.fragment = null;
            $$.ctx = [];
        }
    }
    function make_dirty(component, i) {
        if (component.$$.dirty[0] === -1) {
            dirty_components.push(component);
            schedule_update();
            component.$$.dirty.fill(0);
        }
        component.$$.dirty[(i / 31) | 0] |= (1 << (i % 31));
    }
    function init(component, options, instance, create_fragment, not_equal, props, append_styles, dirty = [-1]) {
        const parent_component = current_component;
        set_current_component(component);
        const $$ = component.$$ = {
            fragment: null,
            ctx: null,
            // state
            props,
            update: noop,
            not_equal,
            bound: blank_object(),
            // lifecycle
            on_mount: [],
            on_destroy: [],
            on_disconnect: [],
            before_update: [],
            after_update: [],
            context: new Map(options.context || (parent_component ? parent_component.$$.context : [])),
            // everything else
            callbacks: blank_object(),
            dirty,
            skip_bound: false,
            root: options.target || parent_component.$$.root
        };
        append_styles && append_styles($$.root);
        let ready = false;
        $$.ctx = instance
            ? instance(component, options.props || {}, (i, ret, ...rest) => {
                const value = rest.length ? rest[0] : ret;
                if ($$.ctx && not_equal($$.ctx[i], $$.ctx[i] = value)) {
                    if (!$$.skip_bound && $$.bound[i])
                        $$.bound[i](value);
                    if (ready)
                        make_dirty(component, i);
                }
                return ret;
            })
            : [];
        $$.update();
        ready = true;
        run_all($$.before_update);
        // `false` as a special case of no DOM component
        $$.fragment = create_fragment ? create_fragment($$.ctx) : false;
        if (options.target) {
            if (options.hydrate) {
                const nodes = children(options.target);
                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                $$.fragment && $$.fragment.l(nodes);
                nodes.forEach(detach);
            }
            else {
                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                $$.fragment && $$.fragment.c();
            }
            if (options.intro)
                transition_in(component.$$.fragment);
            mount_component(component, options.target, options.anchor, options.customElement);
            flush();
        }
        set_current_component(parent_component);
    }
    /**
     * Base class for Svelte components. Used when dev=false.
     */
    class SvelteComponent {
        $destroy() {
            destroy_component(this, 1);
            this.$destroy = noop;
        }
        $on(type, callback) {
            const callbacks = (this.$$.callbacks[type] || (this.$$.callbacks[type] = []));
            callbacks.push(callback);
            return () => {
                const index = callbacks.indexOf(callback);
                if (index !== -1)
                    callbacks.splice(index, 1);
            };
        }
        $set($$props) {
            if (this.$$set && !is_empty($$props)) {
                this.$$.skip_bound = true;
                this.$$set($$props);
                this.$$.skip_bound = false;
            }
        }
    }

    function dispatch_dev(type, detail) {
        document.dispatchEvent(custom_event(type, Object.assign({ version: '3.48.0' }, detail), { bubbles: true }));
    }
    function append_dev(target, node) {
        dispatch_dev('SvelteDOMInsert', { target, node });
        append(target, node);
    }
    function insert_dev(target, node, anchor) {
        dispatch_dev('SvelteDOMInsert', { target, node, anchor });
        insert(target, node, anchor);
    }
    function detach_dev(node) {
        dispatch_dev('SvelteDOMRemove', { node });
        detach(node);
    }
    function listen_dev(node, event, handler, options, has_prevent_default, has_stop_propagation) {
        const modifiers = options === true ? ['capture'] : options ? Array.from(Object.keys(options)) : [];
        if (has_prevent_default)
            modifiers.push('preventDefault');
        if (has_stop_propagation)
            modifiers.push('stopPropagation');
        dispatch_dev('SvelteDOMAddEventListener', { node, event, handler, modifiers });
        const dispose = listen(node, event, handler, options);
        return () => {
            dispatch_dev('SvelteDOMRemoveEventListener', { node, event, handler, modifiers });
            dispose();
        };
    }
    function attr_dev(node, attribute, value) {
        attr(node, attribute, value);
        if (value == null)
            dispatch_dev('SvelteDOMRemoveAttribute', { node, attribute });
        else
            dispatch_dev('SvelteDOMSetAttribute', { node, attribute, value });
    }
    function set_data_dev(text, data) {
        data = '' + data;
        if (text.wholeText === data)
            return;
        dispatch_dev('SvelteDOMSetData', { node: text, data });
        text.data = data;
    }
    function validate_each_argument(arg) {
        if (typeof arg !== 'string' && !(arg && typeof arg === 'object' && 'length' in arg)) {
            let msg = '{#each} only iterates over array-like objects.';
            if (typeof Symbol === 'function' && arg && Symbol.iterator in arg) {
                msg += ' You can use a spread to convert this iterable into an array.';
            }
            throw new Error(msg);
        }
    }
    function validate_slots(name, slot, keys) {
        for (const slot_key of Object.keys(slot)) {
            if (!~keys.indexOf(slot_key)) {
                console.warn(`<${name}> received an unexpected slot "${slot_key}".`);
            }
        }
    }
    /**
     * Base class for Svelte components with some minor dev-enhancements. Used when dev=true.
     */
    class SvelteComponentDev extends SvelteComponent {
        constructor(options) {
            if (!options || (!options.target && !options.$$inline)) {
                throw new Error("'target' is a required option");
            }
            super();
        }
        $destroy() {
            super.$destroy();
            this.$destroy = () => {
                console.warn('Component was already destroyed'); // eslint-disable-line no-console
            };
        }
        $capture_state() { }
        $inject_state() { }
    }

    function cubicOut(t) {
        const f = t - 1.0;
        return f * f * f + 1.0;
    }

    function fly(node, { delay = 0, duration = 400, easing = cubicOut, x = 0, y = 0, opacity = 0 } = {}) {
        const style = getComputedStyle(node);
        const target_opacity = +style.opacity;
        const transform = style.transform === 'none' ? '' : style.transform;
        const od = target_opacity * (1 - opacity);
        return {
            delay,
            duration,
            easing,
            css: (t, u) => `
			transform: ${transform} translate(${(1 - t) * x}px, ${(1 - t) * y}px);
			opacity: ${target_opacity - (od * u)}`
        };
    }

    /* src/Tailwind.svelte generated by Svelte v3.48.0 */

    function create_fragment(ctx) {
    	const block = {
    		c: noop,
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: noop,
    		p: noop,
    		i: noop,
    		o: noop,
    		d: noop
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance($$self, $$props) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('Tailwind', slots, []);
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Tailwind> was created with unknown prop '${key}'`);
    	});

    	return [];
    }

    class Tailwind extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance, create_fragment, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Tailwind",
    			options,
    			id: create_fragment.name
    		});
    	}
    }

    /* src/PDFPage.svelte generated by Svelte v3.48.0 */
    const file = "src/PDFPage.svelte";

    function create_fragment$1(ctx) {
    	let div;
    	let canvas_1;

    	const block = {
    		c: function create() {
    			div = element("div");
    			canvas_1 = element("canvas");
    			attr_dev(canvas_1, "class", "max-w-full");
    			set_style(canvas_1, "width", /*width*/ ctx[1] + "px");
    			attr_dev(canvas_1, "width", /*width*/ ctx[1]);
    			attr_dev(canvas_1, "height", /*height*/ ctx[2]);
    			add_location(canvas_1, file, 34, 2, 814);
    			add_location(div, file, 33, 0, 806);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);
    			append_dev(div, canvas_1);
    			/*canvas_1_binding*/ ctx[4](canvas_1);
    		},
    		p: function update(ctx, [dirty]) {
    			if (dirty & /*width*/ 2) {
    				set_style(canvas_1, "width", /*width*/ ctx[1] + "px");
    			}

    			if (dirty & /*width*/ 2) {
    				attr_dev(canvas_1, "width", /*width*/ ctx[1]);
    			}

    			if (dirty & /*height*/ 4) {
    				attr_dev(canvas_1, "height", /*height*/ ctx[2]);
    			}
    		},
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    			/*canvas_1_binding*/ ctx[4](null);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$1.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$1($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('PDFPage', slots, []);
    	let { page } = $$props;
    	const dispatch = createEventDispatcher();
    	let canvas;
    	let width;
    	let height;
    	let clientWidth;
    	let mounted;

    	function measure() {
    		dispatch("measure", { scale: canvas.clientWidth / width });
    	}

    	async function render() {
    		const _page = await page;
    		const context = canvas.getContext("2d");
    		const viewport = _page.getViewport({ scale: 1, rotation: 0 });
    		$$invalidate(1, width = viewport.width);
    		$$invalidate(2, height = viewport.height);
    		await _page.render({ canvasContext: context, viewport }).promise;
    		measure();
    		window.addEventListener("resize", measure);
    	}

    	onMount(render);

    	onDestroy(() => {
    		window.removeEventListener("resize", measure);
    	});

    	const writable_props = ['page'];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<PDFPage> was created with unknown prop '${key}'`);
    	});

    	function canvas_1_binding($$value) {
    		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
    			canvas = $$value;
    			$$invalidate(0, canvas);
    		});
    	}

    	$$self.$$set = $$props => {
    		if ('page' in $$props) $$invalidate(3, page = $$props.page);
    	};

    	$$self.$capture_state = () => ({
    		onMount,
    		onDestroy,
    		createEventDispatcher,
    		page,
    		dispatch,
    		canvas,
    		width,
    		height,
    		clientWidth,
    		mounted,
    		measure,
    		render
    	});

    	$$self.$inject_state = $$props => {
    		if ('page' in $$props) $$invalidate(3, page = $$props.page);
    		if ('canvas' in $$props) $$invalidate(0, canvas = $$props.canvas);
    		if ('width' in $$props) $$invalidate(1, width = $$props.width);
    		if ('height' in $$props) $$invalidate(2, height = $$props.height);
    		if ('clientWidth' in $$props) clientWidth = $$props.clientWidth;
    		if ('mounted' in $$props) mounted = $$props.mounted;
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [canvas, width, height, page, canvas_1_binding];
    }

    class PDFPage extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$1, create_fragment$1, safe_not_equal, { page: 3 });

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "PDFPage",
    			options,
    			id: create_fragment$1.name
    		});

    		const { ctx } = this.$$;
    		const props = options.props || {};

    		if (/*page*/ ctx[3] === undefined && !('page' in props)) {
    			console.warn("<PDFPage> was created without expected prop 'page'");
    		}
    	}

    	get page() {
    		throw new Error("<PDFPage>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set page(value) {
    		throw new Error("<PDFPage>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}
    }

    function pannable(node) {
      let x;
      let y;

      function handleMousedown(event) {
        x = event.clientX;
        y = event.clientY;
        const target = event.target;

        node.dispatchEvent(
          new CustomEvent('panstart', {
            detail: { x, y, target },
          })
        );

        window.addEventListener('mousemove', handleMousemove);
        window.addEventListener('mouseup', handleMouseup);
      }

      function handleMousemove(event) {
        const dx = event.clientX - x;
        const dy = event.clientY - y;
        x = event.clientX;
        y = event.clientY;

        node.dispatchEvent(
          new CustomEvent('panmove', {
            detail: { x, y, dx, dy },
          })
        );
      }

      function handleMouseup(event) {
        x = event.clientX;
        y = event.clientY;

        node.dispatchEvent(
          new CustomEvent('panend', {
            detail: { x, y },
          })
        );
        window.removeEventListener('mousemove', handleMousemove);
        window.removeEventListener('mouseup', handleMouseup);
      }
      function handleTouchStart(event) {
        if (event.touches.length > 1) return;
        const touch = event.touches[0];
        x = touch.clientX;
        y = touch.clientY;
        const target = touch.target;

        node.dispatchEvent(
          new CustomEvent('panstart', {
            detail: { x, y, target },
          })
        );

        window.addEventListener('touchmove', handleTouchmove, { passive: false });
        window.addEventListener('touchend', handleTouchend);
      }
      function handleTouchmove(event) {
        event.preventDefault();
        if (event.touches.length > 1) return;
        const touch = event.touches[0];
        const dx = touch.clientX - x;
        const dy = touch.clientY - y;
        x = touch.clientX;
        y = touch.clientY;

        node.dispatchEvent(
          new CustomEvent('panmove', {
            detail: { x, y, dx, dy },
          })
        );
      }
      function handleTouchend(event) {
        const touch = event.changedTouches[0];
        x = touch.clientX;
        y = touch.clientY;

        node.dispatchEvent(
          new CustomEvent('panend', {
            detail: { x, y },
          })
        );
        window.removeEventListener('touchmove', handleTouchmove);
        window.removeEventListener('touchend', handleTouchend);
      }
      node.addEventListener('mousedown', handleMousedown);
      node.addEventListener('touchstart', handleTouchStart);
      return {
        destroy() {
          node.removeEventListener('mousedown', handleMousedown);
          node.removeEventListener('touchstart', handleTouchStart);
        },
      };
    }

    const scripts = [
      {
        name: 'pdfjsLib',
        src: '/public/pdf.min.js',
      },
      {
        name: 'PDFLib',
        src: '/public/pdf-lib.min.js',
      },
      {
        name: 'download',
        src: '/public/downloadjs',
      },
      { name: 'makeTextPDF', src: '/public/makeTextPDF.js' },
    ];

    const assets = {};
    function getAsset(name) {
      if (assets[name]) return assets[name];
      const script = scripts.find((s) => s.name === name);
      if (!script) throw new Error(`Script ${name} not exists.`);
      return prepareAsset(script);
    }

    function prepareAsset({ name, src }) {
      if (assets[name]) return assets[name];
      assets[name] = new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = src;
        script.onload = () => {
          resolve(window[name]);
          console.log(`${name} is loaded.`);
        };
        script.onerror = () => {
          reject(`The script ${name} didn't load correctly.`);
          alert(`Some scripts did not load correctly. Please reload and try again.`);
        };
        document.body.appendChild(script);
      });
      return assets[name];
    }

    function prepareAssets() {
      scripts.forEach(prepareAsset);
    }

    // out of the box fonts
    const fonts = {
      Courier: {
        correction(size, lineHeight) {
          return (size * lineHeight - size) / 2 + size / 6;
        },
      },
      Helvetica: {
        correction(size, lineHeight) {
          return (size * lineHeight - size) / 2 + size / 10;
        },
      },
      'Times-Roman': {
        correction(size, lineHeight) {
          return (size * lineHeight - size) / 2 + size / 7;
        },
      },
    };
    // Available fonts
    const Fonts = {
      ...fonts,
      標楷體: {
        src: '/CK.ttf', // 9.9 MB
        correction(size, lineHeight) {
          return (size * lineHeight - size) / 2;
        },
      },
    };

    function fetchFont(name) {
      if (fonts[name]) return fonts[name];
      const font = Fonts[name];
      if (!font) throw new Error(`Font '${name}' not exists.`);
      fonts[name] = fetch(font.src)
        .then((r) => r.arrayBuffer())
        .then((fontBuffer) => {
          const fontFace = new FontFace(name, fontBuffer);
          fontFace.display = 'swap';
          fontFace.load().then(() => document.fonts.add(fontFace));
          return {
            ...font,
            buffer: fontBuffer,
          };
        });
      return fonts[name];
    }

    function readAsArrayBuffer(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => resolve(reader.result);
        reader.onerror = reject;
        reader.readAsArrayBuffer(file);
      });
    }

    function readAsImage(src) {
      return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = () => resolve(img);
        img.onerror = reject;
        if (src instanceof Blob) {
          const url = window.URL.createObjectURL(src);
          img.src = url;
        } else {
          img.src = src;
        }
      });
    }

    function readAsDataURL(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => resolve(reader.result);
        reader.onerror = reject;
        reader.readAsDataURL(file);
      });
    }

    async function readAsPDF(file) {
      const pdfjsLib = await getAsset('pdfjsLib');
      // Safari possibly get webkitblobresource error 1 when using origin file blob
      const blob = new Blob([file]);
      const url = window.URL.createObjectURL(blob);
      return pdfjsLib.getDocument(url).promise;
    }

    /* src/Image.svelte generated by Svelte v3.48.0 */
    const file_1 = "src/Image.svelte";

    function create_fragment$2(ctx) {
    	let div10;
    	let div8;
    	let div0;
    	let t0;
    	let div1;
    	let t1;
    	let div2;
    	let t2;
    	let div3;
    	let t3;
    	let div4;
    	let t4;
    	let div5;
    	let t5;
    	let div6;
    	let t6;
    	let div7;
    	let pannable_action;
    	let t7;
    	let div9;
    	let img;
    	let img_src_value;
    	let t8;
    	let canvas_1;
    	let mounted;
    	let dispose;

    	const block = {
    		c: function create() {
    			div10 = element("div");
    			div8 = element("div");
    			div0 = element("div");
    			t0 = space();
    			div1 = element("div");
    			t1 = space();
    			div2 = element("div");
    			t2 = space();
    			div3 = element("div");
    			t3 = space();
    			div4 = element("div");
    			t4 = space();
    			div5 = element("div");
    			t5 = space();
    			div6 = element("div");
    			t6 = space();
    			div7 = element("div");
    			t7 = space();
    			div9 = element("div");
    			img = element("img");
    			t8 = space();
    			canvas_1 = element("canvas");
    			attr_dev(div0, "data-direction", "left");
    			attr_dev(div0, "class", "resize-border h-full w-1 left-0 top-0 border-l cursor-ew-resize svelte-i6z4ik");
    			add_location(div0, file_1, 144, 4, 3405);
    			attr_dev(div1, "data-direction", "top");
    			attr_dev(div1, "class", "resize-border w-full h-1 left-0 top-0 border-t cursor-ns-resize svelte-i6z4ik");
    			add_location(div1, file_1, 147, 4, 3523);
    			attr_dev(div2, "data-direction", "bottom");
    			attr_dev(div2, "class", "resize-border w-full h-1 left-0 bottom-0 border-b cursor-ns-resize svelte-i6z4ik");
    			add_location(div2, file_1, 150, 4, 3640);
    			attr_dev(div3, "data-direction", "right");
    			attr_dev(div3, "class", "resize-border h-full w-1 right-0 top-0 border-r cursor-ew-resize svelte-i6z4ik");
    			add_location(div3, file_1, 153, 4, 3763);
    			attr_dev(div4, "data-direction", "left-top");
    			attr_dev(div4, "class", "resize-corner left-0 top-0 cursor-nwse-resize transform -translate-x-1/2 -translate-y-1/2 md:scale-25 svelte-i6z4ik");
    			add_location(div4, file_1, 156, 4, 3883);
    			attr_dev(div5, "data-direction", "right-top");
    			attr_dev(div5, "class", "resize-corner right-0 top-0 cursor-nesw-resize transform translate-x-1/2 -translate-y-1/2 md:scale-25 svelte-i6z4ik");
    			add_location(div5, file_1, 160, 4, 4049);
    			attr_dev(div6, "data-direction", "left-bottom");
    			attr_dev(div6, "class", "resize-corner left-0 bottom-0 cursor-nesw-resize transform -translate-x-1/2 translate-y-1/2 md:scale-25 svelte-i6z4ik");
    			add_location(div6, file_1, 164, 4, 4216);
    			attr_dev(div7, "data-direction", "right-bottom");
    			attr_dev(div7, "class", "resize-corner right-0 bottom-0 cursor-nwse-resize transform translate-x-1/2 translate-y-1/2 md:scale-25 svelte-i6z4ik");
    			add_location(div7, file_1, 168, 4, 4387);
    			attr_dev(div8, "class", "absolute w-full h-full cursor-grab svelte-i6z4ik");
    			toggle_class(div8, "cursor-grabbing", /*operation*/ ctx[5] === 'move');
    			toggle_class(div8, "operation", /*operation*/ ctx[5]);
    			add_location(div8, file_1, 136, 2, 3169);
    			attr_dev(img, "class", "w-full h-full");
    			if (!src_url_equal(img.src, img_src_value = "/public/delete.svg")) attr_dev(img, "src", img_src_value);
    			attr_dev(img, "alt", "delete object");
    			add_location(img, file_1, 177, 4, 4739);
    			attr_dev(div9, "class", "absolute left-0 top-0 right-0 w-12 h-12 m-auto rounded-full bg-white cursor-pointer transform -translate-y-1/2 md:scale-25");
    			add_location(div9, file_1, 173, 2, 4566);
    			attr_dev(canvas_1, "class", "w-full h-full");
    			add_location(canvas_1, file_1, 179, 2, 4825);
    			attr_dev(div10, "class", "absolute left-0 top-0 select-none");
    			set_style(div10, "width", /*width*/ ctx[0] + /*dw*/ ctx[8] + "px");
    			set_style(div10, "height", /*height*/ ctx[1] + /*dh*/ ctx[9] + "px");
    			set_style(div10, "transform", "translate(" + (/*x*/ ctx[2] + /*dx*/ ctx[6]) + "px, " + (/*y*/ ctx[3] + /*dy*/ ctx[7]) + "px)");
    			add_location(div10, file_1, 131, 0, 3010);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div10, anchor);
    			append_dev(div10, div8);
    			append_dev(div8, div0);
    			append_dev(div8, t0);
    			append_dev(div8, div1);
    			append_dev(div8, t1);
    			append_dev(div8, div2);
    			append_dev(div8, t2);
    			append_dev(div8, div3);
    			append_dev(div8, t3);
    			append_dev(div8, div4);
    			append_dev(div8, t4);
    			append_dev(div8, div5);
    			append_dev(div8, t5);
    			append_dev(div8, div6);
    			append_dev(div8, t6);
    			append_dev(div8, div7);
    			append_dev(div10, t7);
    			append_dev(div10, div9);
    			append_dev(div9, img);
    			append_dev(div10, t8);
    			append_dev(div10, canvas_1);
    			/*canvas_1_binding*/ ctx[17](canvas_1);

    			if (!mounted) {
    				dispose = [
    					action_destroyer(pannable_action = pannable.call(null, div8)),
    					listen_dev(div8, "panstart", /*handlePanStart*/ ctx[12], false, false, false),
    					listen_dev(div8, "panmove", /*handlePanMove*/ ctx[10], false, false, false),
    					listen_dev(div8, "panend", /*handlePanEnd*/ ctx[11], false, false, false),
    					listen_dev(div9, "click", /*onDelete*/ ctx[13], false, false, false)
    				];

    				mounted = true;
    			}
    		},
    		p: function update(ctx, [dirty]) {
    			if (dirty & /*operation*/ 32) {
    				toggle_class(div8, "cursor-grabbing", /*operation*/ ctx[5] === 'move');
    			}

    			if (dirty & /*operation*/ 32) {
    				toggle_class(div8, "operation", /*operation*/ ctx[5]);
    			}

    			if (dirty & /*width, dw*/ 257) {
    				set_style(div10, "width", /*width*/ ctx[0] + /*dw*/ ctx[8] + "px");
    			}

    			if (dirty & /*height, dh*/ 514) {
    				set_style(div10, "height", /*height*/ ctx[1] + /*dh*/ ctx[9] + "px");
    			}

    			if (dirty & /*x, dx, y, dy*/ 204) {
    				set_style(div10, "transform", "translate(" + (/*x*/ ctx[2] + /*dx*/ ctx[6]) + "px, " + (/*y*/ ctx[3] + /*dy*/ ctx[7]) + "px)");
    			}
    		},
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div10);
    			/*canvas_1_binding*/ ctx[17](null);
    			mounted = false;
    			run_all(dispose);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$2.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$2($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('Image', slots, []);
    	let { payload } = $$props;
    	let { file } = $$props;
    	let { width } = $$props;
    	let { height } = $$props;
    	let { x } = $$props;
    	let { y } = $$props;
    	let { pageScale = 1 } = $$props;
    	const dispatch = createEventDispatcher();
    	let startX;
    	let startY;
    	let canvas;
    	let operation = "";
    	let directions = [];
    	let dx = 0;
    	let dy = 0;
    	let dw = 0;
    	let dh = 0;

    	async function render() {
    		// use canvas to prevent img tag's auto resize
    		$$invalidate(4, canvas.width = width, canvas);

    		$$invalidate(4, canvas.height = height, canvas);
    		canvas.getContext("2d").drawImage(payload, 0, 0);
    		let scale = 1;
    		const limit = 500;

    		if (width > limit) {
    			scale = limit / width;
    		}

    		if (height > limit) {
    			scale = Math.min(scale, limit / height);
    		}

    		dispatch("update", {
    			width: width * scale,
    			height: height * scale
    		});

    		if (!["image/jpeg", "image/png"].includes(file.type)) {
    			canvas.toBlob(blob => {
    				dispatch("update", { file: blob });
    			});
    		}
    	}

    	function handlePanMove(event) {
    		const _dx = (event.detail.x - startX) / pageScale;
    		const _dy = (event.detail.y - startY) / pageScale;

    		if (operation === "move") {
    			$$invalidate(6, dx = _dx);
    			$$invalidate(7, dy = _dy);
    		} else if (operation === "scale") {
    			if (directions.includes("left")) {
    				$$invalidate(6, dx = _dx);
    				$$invalidate(8, dw = -_dx);
    			}

    			if (directions.includes("top")) {
    				$$invalidate(7, dy = _dy);
    				$$invalidate(9, dh = -_dy);
    			}

    			if (directions.includes("right")) {
    				$$invalidate(8, dw = _dx);
    			}

    			if (directions.includes("bottom")) {
    				$$invalidate(9, dh = _dy);
    			}
    		}
    	}

    	function handlePanEnd(event) {
    		if (operation === "move") {
    			dispatch("update", { x: x + dx, y: y + dy });
    			$$invalidate(6, dx = 0);
    			$$invalidate(7, dy = 0);
    		} else if (operation === "scale") {
    			dispatch("update", {
    				x: x + dx,
    				y: y + dy,
    				width: width + dw,
    				height: height + dh
    			});

    			$$invalidate(6, dx = 0);
    			$$invalidate(7, dy = 0);
    			$$invalidate(8, dw = 0);
    			$$invalidate(9, dh = 0);
    			directions = [];
    		}

    		$$invalidate(5, operation = "");
    	}

    	function handlePanStart(event) {
    		startX = event.detail.x;
    		startY = event.detail.y;

    		if (event.detail.target === event.currentTarget) {
    			return $$invalidate(5, operation = "move");
    		}

    		$$invalidate(5, operation = "scale");
    		directions = event.detail.target.dataset.direction.split("-");
    	}

    	function onDelete() {
    		dispatch("delete");
    	}

    	onMount(render);
    	const writable_props = ['payload', 'file', 'width', 'height', 'x', 'y', 'pageScale'];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Image> was created with unknown prop '${key}'`);
    	});

    	function canvas_1_binding($$value) {
    		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
    			canvas = $$value;
    			$$invalidate(4, canvas);
    		});
    	}

    	$$self.$$set = $$props => {
    		if ('payload' in $$props) $$invalidate(14, payload = $$props.payload);
    		if ('file' in $$props) $$invalidate(15, file = $$props.file);
    		if ('width' in $$props) $$invalidate(0, width = $$props.width);
    		if ('height' in $$props) $$invalidate(1, height = $$props.height);
    		if ('x' in $$props) $$invalidate(2, x = $$props.x);
    		if ('y' in $$props) $$invalidate(3, y = $$props.y);
    		if ('pageScale' in $$props) $$invalidate(16, pageScale = $$props.pageScale);
    	};

    	$$self.$capture_state = () => ({
    		onMount,
    		createEventDispatcher,
    		pannable,
    		readAsArrayBuffer,
    		payload,
    		file,
    		width,
    		height,
    		x,
    		y,
    		pageScale,
    		dispatch,
    		startX,
    		startY,
    		canvas,
    		operation,
    		directions,
    		dx,
    		dy,
    		dw,
    		dh,
    		render,
    		handlePanMove,
    		handlePanEnd,
    		handlePanStart,
    		onDelete
    	});

    	$$self.$inject_state = $$props => {
    		if ('payload' in $$props) $$invalidate(14, payload = $$props.payload);
    		if ('file' in $$props) $$invalidate(15, file = $$props.file);
    		if ('width' in $$props) $$invalidate(0, width = $$props.width);
    		if ('height' in $$props) $$invalidate(1, height = $$props.height);
    		if ('x' in $$props) $$invalidate(2, x = $$props.x);
    		if ('y' in $$props) $$invalidate(3, y = $$props.y);
    		if ('pageScale' in $$props) $$invalidate(16, pageScale = $$props.pageScale);
    		if ('startX' in $$props) startX = $$props.startX;
    		if ('startY' in $$props) startY = $$props.startY;
    		if ('canvas' in $$props) $$invalidate(4, canvas = $$props.canvas);
    		if ('operation' in $$props) $$invalidate(5, operation = $$props.operation);
    		if ('directions' in $$props) directions = $$props.directions;
    		if ('dx' in $$props) $$invalidate(6, dx = $$props.dx);
    		if ('dy' in $$props) $$invalidate(7, dy = $$props.dy);
    		if ('dw' in $$props) $$invalidate(8, dw = $$props.dw);
    		if ('dh' in $$props) $$invalidate(9, dh = $$props.dh);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [
    		width,
    		height,
    		x,
    		y,
    		canvas,
    		operation,
    		dx,
    		dy,
    		dw,
    		dh,
    		handlePanMove,
    		handlePanEnd,
    		handlePanStart,
    		onDelete,
    		payload,
    		file,
    		pageScale,
    		canvas_1_binding
    	];
    }

    class Image$1 extends SvelteComponentDev {
    	constructor(options) {
    		super(options);

    		init(this, options, instance$2, create_fragment$2, not_equal, {
    			payload: 14,
    			file: 15,
    			width: 0,
    			height: 1,
    			x: 2,
    			y: 3,
    			pageScale: 16
    		});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Image",
    			options,
    			id: create_fragment$2.name
    		});

    		const { ctx } = this.$$;
    		const props = options.props || {};

    		if (/*payload*/ ctx[14] === undefined && !('payload' in props)) {
    			console.warn("<Image> was created without expected prop 'payload'");
    		}

    		if (/*file*/ ctx[15] === undefined && !('file' in props)) {
    			console.warn("<Image> was created without expected prop 'file'");
    		}

    		if (/*width*/ ctx[0] === undefined && !('width' in props)) {
    			console.warn("<Image> was created without expected prop 'width'");
    		}

    		if (/*height*/ ctx[1] === undefined && !('height' in props)) {
    			console.warn("<Image> was created without expected prop 'height'");
    		}

    		if (/*x*/ ctx[2] === undefined && !('x' in props)) {
    			console.warn("<Image> was created without expected prop 'x'");
    		}

    		if (/*y*/ ctx[3] === undefined && !('y' in props)) {
    			console.warn("<Image> was created without expected prop 'y'");
    		}
    	}

    	get payload() {
    		throw new Error("<Image>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set payload(value) {
    		throw new Error("<Image>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get file() {
    		throw new Error("<Image>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set file(value) {
    		throw new Error("<Image>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get width() {
    		throw new Error("<Image>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set width(value) {
    		throw new Error("<Image>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get height() {
    		throw new Error("<Image>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set height(value) {
    		throw new Error("<Image>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get x() {
    		throw new Error("<Image>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set x(value) {
    		throw new Error("<Image>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get y() {
    		throw new Error("<Image>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set y(value) {
    		throw new Error("<Image>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get pageScale() {
    		throw new Error("<Image>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set pageScale(value) {
    		throw new Error("<Image>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}
    }

    /* src/Portal.svelte generated by Svelte v3.48.0 */

    const file$1 = "src/Portal.svelte";

    function create_fragment$3(ctx) {
    	let div;
    	let current;
    	const default_slot_template = /*#slots*/ ctx[2].default;
    	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[1], null);

    	const block = {
    		c: function create() {
    			div = element("div");
    			if (default_slot) default_slot.c();
    			add_location(div, file$1, 5, 0, 84);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);

    			if (default_slot) {
    				default_slot.m(div, null);
    			}

    			/*div_binding*/ ctx[3](div);
    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			if (default_slot) {
    				if (default_slot.p && (!current || dirty & /*$$scope*/ 2)) {
    					update_slot_base(
    						default_slot,
    						default_slot_template,
    						ctx,
    						/*$$scope*/ ctx[1],
    						!current
    						? get_all_dirty_from_scope(/*$$scope*/ ctx[1])
    						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[1], dirty, null),
    						null
    					);
    				}
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(default_slot, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(default_slot, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    			if (default_slot) default_slot.d(detaching);
    			/*div_binding*/ ctx[3](null);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$3.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$3($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('Portal', slots, ['default']);
    	let portal;
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Portal> was created with unknown prop '${key}'`);
    	});

    	function div_binding($$value) {
    		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
    			portal = $$value;
    			$$invalidate(0, portal);
    		});
    	}

    	$$self.$$set = $$props => {
    		if ('$$scope' in $$props) $$invalidate(1, $$scope = $$props.$$scope);
    	};

    	$$self.$capture_state = () => ({ portal });

    	$$self.$inject_state = $$props => {
    		if ('portal' in $$props) $$invalidate(0, portal = $$props.portal);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	$$self.$$.update = () => {
    		if ($$self.$$.dirty & /*portal*/ 1) {
    			 portal && document.body.appendChild(portal);
    		}
    	};

    	return [portal, $$scope, slots, div_binding];
    }

    class Portal extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$3, create_fragment$3, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Portal",
    			options,
    			id: create_fragment$3.name
    		});
    	}
    }

    /* src/Toolbar.svelte generated by Svelte v3.48.0 */
    const file$2 = "src/Toolbar.svelte";

    // (5:0) <Portal>
    function create_default_slot(ctx) {
    	let div;
    	let current;
    	const default_slot_template = /*#slots*/ ctx[0].default;
    	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[1], null);

    	const block = {
    		c: function create() {
    			div = element("div");
    			if (default_slot) default_slot.c();
    			attr_dev(div, "class", "fixed z-10 top-0 left-0 right-0 h-12");
    			add_location(div, file$2, 5, 2, 71);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);

    			if (default_slot) {
    				default_slot.m(div, null);
    			}

    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			if (default_slot) {
    				if (default_slot.p && (!current || dirty & /*$$scope*/ 2)) {
    					update_slot_base(
    						default_slot,
    						default_slot_template,
    						ctx,
    						/*$$scope*/ ctx[1],
    						!current
    						? get_all_dirty_from_scope(/*$$scope*/ ctx[1])
    						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[1], dirty, null),
    						null
    					);
    				}
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(default_slot, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(default_slot, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    			if (default_slot) default_slot.d(detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_default_slot.name,
    		type: "slot",
    		source: "(5:0) <Portal>",
    		ctx
    	});

    	return block;
    }

    function create_fragment$4(ctx) {
    	let portal;
    	let current;

    	portal = new Portal({
    			props: {
    				$$slots: { default: [create_default_slot] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			create_component(portal.$$.fragment);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			mount_component(portal, target, anchor);
    			current = true;
    		},
    		p: function update(ctx, [dirty]) {
    			const portal_changes = {};

    			if (dirty & /*$$scope*/ 2) {
    				portal_changes.$$scope = { dirty, ctx };
    			}

    			portal.$set(portal_changes);
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(portal.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(portal.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			destroy_component(portal, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$4.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$4($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('Toolbar', slots, ['default']);
    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Toolbar> was created with unknown prop '${key}'`);
    	});

    	$$self.$$set = $$props => {
    		if ('$$scope' in $$props) $$invalidate(1, $$scope = $$props.$$scope);
    	};

    	$$self.$capture_state = () => ({ Portal });
    	return [slots, $$scope];
    }

    class Toolbar extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$4, create_fragment$4, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Toolbar",
    			options,
    			id: create_fragment$4.name
    		});
    	}
    }

    function tapout(node) {
      function handleTouchstart(event) {
        if (!Array.from(event.touches).some((touch) => node.contains(touch.target)))
          node.dispatchEvent(new CustomEvent('tapout'));
      }
      function handleMousedown(event) {
        if (!node.contains(event.target)) {
          node.dispatchEvent(new CustomEvent('tapout'));
        }
      }
      window.addEventListener('touchstart', handleTouchstart);
      window.addEventListener('mousedown', handleMousedown);
      return {
        destroy() {
          window.removeEventListener('touchstart', handleTouchstart);
          window.removeEventListener('mousedown', handleMousedown);
        },
      };
    }

    function ggID() {
      let id = 0;
      return function genId() {
        return id++;
      };
    }
    function timeout(ms) {
      return new Promise((res) => setTimeout(res, ms));
    }
    const noop$1 = () => {};

    /* src/Text.svelte generated by Svelte v3.48.0 */

    const { Object: Object_1 } = globals;
    const file$3 = "src/Text.svelte";

    function get_each_context(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[44] = list[i];
    	return child_ctx;
    }

    // (194:0) {#if operation}
    function create_if_block(ctx) {
    	let toolbar;
    	let current;

    	toolbar = new Toolbar({
    			props: {
    				$$slots: { default: [create_default_slot$1] },
    				$$scope: { ctx }
    			},
    			$$inline: true
    		});

    	const block = {
    		c: function create() {
    			create_component(toolbar.$$.fragment);
    		},
    		m: function mount(target, anchor) {
    			mount_component(toolbar, target, anchor);
    			current = true;
    		},
    		p: function update(ctx, dirty) {
    			const toolbar_changes = {};

    			if (dirty[0] & /*_fontFamily, _size, _lineHeight*/ 56 | dirty[1] & /*$$scope*/ 65536) {
    				toolbar_changes.$$scope = { dirty, ctx };
    			}

    			toolbar.$set(toolbar_changes);
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(toolbar.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(toolbar.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			destroy_component(toolbar, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block.name,
    		type: "if",
    		source: "(194:0) {#if operation}",
    		ctx
    	});

    	return block;
    }

    // (230:12) {#each Families as family}
    function create_each_block(ctx) {
    	let option;
    	let t_value = /*family*/ ctx[44] + "";
    	let t;
    	let option_value_value;

    	const block = {
    		c: function create() {
    			option = element("option");
    			t = text(t_value);
    			option.__value = option_value_value = /*family*/ ctx[44];
    			option.value = option.__value;
    			add_location(option, file$3, 230, 14, 6323);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, option, anchor);
    			append_dev(option, t);
    		},
    		p: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(option);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block.name,
    		type: "each",
    		source: "(230:12) {#each Families as family}",
    		ctx
    	});

    	return block;
    }

    // (195:2) <Toolbar>
    function create_default_slot$1(ctx) {
    	let div6;
    	let div0;
    	let img0;
    	let img0_src_value;
    	let t0;
    	let input0;
    	let t1;
    	let div1;
    	let img1;
    	let img1_src_value;
    	let t2;
    	let input1;
    	let t3;
    	let div4;
    	let img2;
    	let img2_src_value;
    	let t4;
    	let div3;
    	let select;
    	let t5;
    	let div2;
    	let svg;
    	let path;
    	let t6;
    	let div5;
    	let img3;
    	let img3_src_value;
    	let tapout_action;
    	let mounted;
    	let dispose;
    	let each_value = /*Families*/ ctx[9];
    	validate_each_argument(each_value);
    	let each_blocks = [];

    	for (let i = 0; i < each_value.length; i += 1) {
    		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
    	}

    	const block = {
    		c: function create() {
    			div6 = element("div");
    			div0 = element("div");
    			img0 = element("img");
    			t0 = space();
    			input0 = element("input");
    			t1 = space();
    			div1 = element("div");
    			img1 = element("img");
    			t2 = space();
    			input1 = element("input");
    			t3 = space();
    			div4 = element("div");
    			img2 = element("img");
    			t4 = space();
    			div3 = element("div");
    			select = element("select");

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].c();
    			}

    			t5 = space();
    			div2 = element("div");
    			svg = svg_element("svg");
    			path = svg_element("path");
    			t6 = space();
    			div5 = element("div");
    			img3 = element("img");
    			if (!src_url_equal(img0.src, img0_src_value = "/public/line_height.svg")) attr_dev(img0, "src", img0_src_value);
    			attr_dev(img0, "class", "w-6 mr-2");
    			attr_dev(img0, "alt", "Line height");
    			add_location(img0, file$3, 203, 8, 5371);
    			attr_dev(input0, "type", "number");
    			attr_dev(input0, "min", "1");
    			attr_dev(input0, "max", "10");
    			attr_dev(input0, "step", "0.1");
    			attr_dev(input0, "class", "h-6 w-12 text-center flex-shrink-0 rounded-sm");
    			add_location(input0, file$3, 204, 8, 5452);
    			attr_dev(div0, "class", "mr-2 flex items-center");
    			add_location(div0, file$3, 202, 6, 5326);
    			if (!src_url_equal(img1.src, img1_src_value = "/public/text.svg")) attr_dev(img1, "src", img1_src_value);
    			attr_dev(img1, "class", "w-6 mr-2");
    			attr_dev(img1, "alt", "Font size");
    			add_location(img1, file$3, 213, 8, 5707);
    			attr_dev(input1, "type", "number");
    			attr_dev(input1, "min", "12");
    			attr_dev(input1, "max", "120");
    			attr_dev(input1, "step", "1");
    			attr_dev(input1, "class", "h-6 w-12 text-center flex-shrink-0 rounded-sm");
    			add_location(input1, file$3, 214, 8, 5779);
    			attr_dev(div1, "class", "mr-2 flex items-center");
    			add_location(div1, file$3, 212, 6, 5662);
    			if (!src_url_equal(img2.src, img2_src_value = "/public/text-family.svg")) attr_dev(img2, "src", img2_src_value);
    			attr_dev(img2, "class", "w-4 mr-2");
    			attr_dev(img2, "alt", "Font family");
    			add_location(img2, file$3, 223, 8, 6028);
    			attr_dev(select, "class", "font-family svelte-14i4sqe");
    			if (/*_fontFamily*/ ctx[5] === void 0) add_render_callback(() => /*select_change_handler*/ ctx[36].call(select));
    			add_location(select, file$3, 225, 10, 6155);
    			attr_dev(path, "d", "M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757\n                6.586 4.343 8z");
    			add_location(path, file$3, 240, 14, 6694);
    			attr_dev(svg, "class", "fill-current h-4 w-4");
    			attr_dev(svg, "xmlns", "http://www.w3.org/2000/svg");
    			attr_dev(svg, "viewBox", "0 0 20 20");
    			add_location(svg, file$3, 236, 12, 6548);
    			attr_dev(div2, "class", "pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700");
    			add_location(div2, file$3, 233, 10, 6414);
    			attr_dev(div3, "class", "relative w-32 md:w-40");
    			add_location(div3, file$3, 224, 8, 6109);
    			attr_dev(div4, "class", "mr-2 flex items-center");
    			add_location(div4, file$3, 222, 6, 5983);
    			attr_dev(img3, "class", "w-full h-full");
    			if (!src_url_equal(img3.src, img3_src_value = "/public/delete.svg")) attr_dev(img3, "src", img3_src_value);
    			attr_dev(img3, "alt", "delete object");
    			add_location(img3, file$3, 250, 8, 6987);
    			attr_dev(div5, "class", "w-5 h-5 rounded-full bg-white cursor-pointer");
    			add_location(div5, file$3, 247, 6, 6884);
    			set_style(div6, "display", "none", 1);
    			attr_dev(div6, "class", "h-full flex justify-center items-center bg-gray-300 border-b border-gray-400");
    			add_location(div6, file$3, 195, 4, 5070);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div6, anchor);
    			append_dev(div6, div0);
    			append_dev(div0, img0);
    			append_dev(div0, t0);
    			append_dev(div0, input0);
    			set_input_value(input0, /*_lineHeight*/ ctx[4]);
    			append_dev(div6, t1);
    			append_dev(div6, div1);
    			append_dev(div1, img1);
    			append_dev(div1, t2);
    			append_dev(div1, input1);
    			set_input_value(input1, /*_size*/ ctx[3]);
    			append_dev(div6, t3);
    			append_dev(div6, div4);
    			append_dev(div4, img2);
    			append_dev(div4, t4);
    			append_dev(div4, div3);
    			append_dev(div3, select);

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].m(select, null);
    			}

    			select_option(select, /*_fontFamily*/ ctx[5]);
    			append_dev(div3, t5);
    			append_dev(div3, div2);
    			append_dev(div2, svg);
    			append_dev(svg, path);
    			append_dev(div6, t6);
    			append_dev(div6, div5);
    			append_dev(div5, img3);

    			if (!mounted) {
    				dispose = [
    					listen_dev(input0, "input", /*input0_input_handler*/ ctx[34]),
    					listen_dev(input1, "input", /*input1_input_handler*/ ctx[35]),
    					listen_dev(select, "change", /*select_change_handler*/ ctx[36]),
    					listen_dev(select, "change", /*onChangeFont*/ ctx[23], false, false, false),
    					listen_dev(div5, "click", /*onDelete*/ ctx[24], false, false, false),
    					action_destroyer(tapout_action = tapout.call(null, div6)),
    					listen_dev(div6, "tapout", /*onBlurTool*/ ctx[22], false, false, false),
    					listen_dev(div6, "mousedown", /*onFocusTool*/ ctx[21], false, false, false),
    					listen_dev(div6, "touchstart", /*onFocusTool*/ ctx[21], { passive: true }, false, false)
    				];

    				mounted = true;
    			}
    		},
    		p: function update(ctx, dirty) {
    			if (dirty[0] & /*_lineHeight*/ 16 && to_number(input0.value) !== /*_lineHeight*/ ctx[4]) {
    				set_input_value(input0, /*_lineHeight*/ ctx[4]);
    			}

    			if (dirty[0] & /*_size*/ 8 && to_number(input1.value) !== /*_size*/ ctx[3]) {
    				set_input_value(input1, /*_size*/ ctx[3]);
    			}

    			if (dirty[0] & /*Families*/ 512) {
    				each_value = /*Families*/ ctx[9];
    				validate_each_argument(each_value);
    				let i;

    				for (i = 0; i < each_value.length; i += 1) {
    					const child_ctx = get_each_context(ctx, each_value, i);

    					if (each_blocks[i]) {
    						each_blocks[i].p(child_ctx, dirty);
    					} else {
    						each_blocks[i] = create_each_block(child_ctx);
    						each_blocks[i].c();
    						each_blocks[i].m(select, null);
    					}
    				}

    				for (; i < each_blocks.length; i += 1) {
    					each_blocks[i].d(1);
    				}

    				each_blocks.length = each_value.length;
    			}

    			if (dirty[0] & /*_fontFamily, Families*/ 544) {
    				select_option(select, /*_fontFamily*/ ctx[5]);
    			}
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div6);
    			destroy_each(each_blocks, detaching);
    			mounted = false;
    			run_all(dispose);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_default_slot$1.name,
    		type: "slot",
    		source: "(195:2) <Toolbar>",
    		ctx
    	});

    	return block;
    }

    function create_fragment$5(ctx) {
    	let t0;
    	let div2;
    	let div0;
    	let pannable_action;
    	let t1;
    	let div1;
    	let tapout_action;
    	let current;
    	let mounted;
    	let dispose;
    	let if_block = /*operation*/ ctx[8] && create_if_block(ctx);

    	const block = {
    		c: function create() {
    			if (if_block) if_block.c();
    			t0 = space();
    			div2 = element("div");
    			div0 = element("div");
    			t1 = space();
    			div1 = element("div");
    			attr_dev(div0, "class", "absolute w-full h-full cursor-grab border border-dotted border-gray-500 svelte-14i4sqe");
    			toggle_class(div0, "cursor-grab", !/*operation*/ ctx[8]);
    			toggle_class(div0, "cursor-grabbing", /*operation*/ ctx[8] === 'move');
    			toggle_class(div0, "editing", ['edit', 'tool'].includes(/*operation*/ ctx[8]));
    			add_location(div0, file$3, 260, 2, 7247);
    			attr_dev(div1, "contenteditable", "true");
    			attr_dev(div1, "spellcheck", "false");
    			attr_dev(div1, "class", "outline-none whitespace-no-wrap");
    			set_style(div1, "font-weight", /*_bold*/ ctx[11]);
    			set_style(div1, "font-style", /*_italic*/ ctx[12]);
    			set_style(div1, "text-decoration", /*_underline*/ ctx[13]);
    			set_style(div1, "color", /*_color*/ ctx[10]);
    			set_style(div1, "font-size", /*_size*/ ctx[3] + "px");
    			set_style(div1, "font-family", "'" + /*_fontFamily*/ ctx[5] + "', serif");
    			set_style(div1, "line-height", /*_lineHeight*/ ctx[4]);
    			set_style(div1, "-webkit-user-select", "text");
    			add_location(div1, file$3, 270, 2, 7596);
    			attr_dev(div2, "class", "absolute left-0 top-0 select-none");
    			set_style(div2, "transform", "translate(" + (/*x*/ ctx[0] + /*dx*/ ctx[6]) + "px, " + (/*y*/ ctx[1] + /*dy*/ ctx[7]) + "px)");
    			add_location(div2, file$3, 255, 0, 7105);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			if (if_block) if_block.m(target, anchor);
    			insert_dev(target, t0, anchor);
    			insert_dev(target, div2, anchor);
    			append_dev(div2, div0);
    			append_dev(div2, t1);
    			append_dev(div2, div1);
    			/*div1_binding*/ ctx[37](div1);
    			current = true;

    			if (!mounted) {
    				dispose = [
    					action_destroyer(pannable_action = pannable.call(null, div0)),
    					listen_dev(div0, "panstart", /*handlePanStart*/ ctx[16], false, false, false),
    					listen_dev(div0, "panmove", /*handlePanMove*/ ctx[14], false, false, false),
    					listen_dev(div0, "panend", /*handlePanEnd*/ ctx[15], false, false, false),
    					listen_dev(div1, "focus", /*onFocus*/ ctx[17], false, false, false),
    					listen_dev(div1, "keydown", /*onKeydown*/ ctx[20], false, false, false),
    					listen_dev(div1, "paste", prevent_default(/*onPaste*/ ctx[19]), false, true, false),
    					action_destroyer(tapout_action = tapout.call(null, div2)),
    					listen_dev(div2, "tapout", /*onBlur*/ ctx[18], false, false, false)
    				];

    				mounted = true;
    			}
    		},
    		p: function update(ctx, dirty) {
    			if (/*operation*/ ctx[8]) {
    				if (if_block) {
    					if_block.p(ctx, dirty);

    					if (dirty[0] & /*operation*/ 256) {
    						transition_in(if_block, 1);
    					}
    				} else {
    					if_block = create_if_block(ctx);
    					if_block.c();
    					transition_in(if_block, 1);
    					if_block.m(t0.parentNode, t0);
    				}
    			} else if (if_block) {
    				group_outros();

    				transition_out(if_block, 1, 1, () => {
    					if_block = null;
    				});

    				check_outros();
    			}

    			if (dirty[0] & /*operation*/ 256) {
    				toggle_class(div0, "cursor-grab", !/*operation*/ ctx[8]);
    			}

    			if (dirty[0] & /*operation*/ 256) {
    				toggle_class(div0, "cursor-grabbing", /*operation*/ ctx[8] === 'move');
    			}

    			if (dirty[0] & /*operation*/ 256) {
    				toggle_class(div0, "editing", ['edit', 'tool'].includes(/*operation*/ ctx[8]));
    			}

    			if (!current || dirty[0] & /*_size*/ 8) {
    				set_style(div1, "font-size", /*_size*/ ctx[3] + "px");
    			}

    			if (!current || dirty[0] & /*_fontFamily*/ 32) {
    				set_style(div1, "font-family", "'" + /*_fontFamily*/ ctx[5] + "', serif");
    			}

    			if (!current || dirty[0] & /*_lineHeight*/ 16) {
    				set_style(div1, "line-height", /*_lineHeight*/ ctx[4]);
    			}

    			if (!current || dirty[0] & /*x, dx, y, dy*/ 195) {
    				set_style(div2, "transform", "translate(" + (/*x*/ ctx[0] + /*dx*/ ctx[6]) + "px, " + (/*y*/ ctx[1] + /*dy*/ ctx[7]) + "px)");
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(if_block);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(if_block);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (if_block) if_block.d(detaching);
    			if (detaching) detach_dev(t0);
    			if (detaching) detach_dev(div2);
    			/*div1_binding*/ ctx[37](null);
    			mounted = false;
    			run_all(dispose);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$5.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$5($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('Text', slots, []);
    	let { size } = $$props;
    	let { text } = $$props;
    	let { lineHeight } = $$props;
    	let { x } = $$props;
    	let { y } = $$props;
    	let { fontFamily } = $$props;
    	let { color } = $$props;
    	let { bold } = $$props;
    	let { italic } = $$props;
    	let { underline } = $$props;
    	let { pageScale = 1 } = $$props;
    	const Families = Object.keys(Fonts);
    	const dispatch = createEventDispatcher();
    	let startX;
    	let startY;
    	let editable;
    	let _size = size;
    	let _lineHeight = lineHeight;
    	let _fontFamily = fontFamily;
    	let _color = color;
    	let _bold = bold;
    	let _italic = italic;
    	let _underline = underline;
    	let dx = 0;
    	let dy = 0;
    	let operation = "";

    	function handlePanMove(event) {
    		$$invalidate(6, dx = (event.detail.x - startX) / pageScale);
    		$$invalidate(7, dy = (event.detail.y - startY) / pageScale);
    	}

    	function handlePanEnd(event) {
    		if (dx === 0 && dy === 0) {
    			return editable.focus();
    		}

    		dispatch("update", { x: x + dx, y: y + dy });
    		$$invalidate(6, dx = 0);
    		$$invalidate(7, dy = 0);
    		$$invalidate(8, operation = "");
    	}

    	function handlePanStart(event) {
    		startX = event.detail.x;
    		startY = event.detail.y;
    		$$invalidate(8, operation = "move");
    	}

    	function onFocus() {
    		$$invalidate(8, operation = "edit");
    	}

    	async function onBlur() {
    		if (operation !== "edit" || operation === "tool") return;
    		editable.blur();
    		sanitize();

    		dispatch("update", {
    			lines: extractLines(),
    			width: editable.clientWidth
    		});

    		$$invalidate(8, operation = "");
    	}

    	async function onPaste(e) {
    		// get text only
    		const pastedText = e.clipboardData.getData("text");

    		document.execCommand("insertHTML", false, pastedText);

    		// await tick() is not enough
    		await timeout();

    		sanitize();
    	}

    	function onKeydown(e) {
    		const childNodes = Array.from(editable.childNodes);

    		if (e.keyCode === 13) {
    			// prevent default adding div behavior
    			e.preventDefault();

    			const selection = window.getSelection();
    			const focusNode = selection.focusNode;
    			const focusOffset = selection.focusOffset;

    			// the caret is at an empty line
    			if (focusNode === editable) {
    				editable.insertBefore(document.createElement("br"), childNodes[focusOffset]);
    			} else if (focusNode instanceof HTMLBRElement) {
    				editable.insertBefore(document.createElement("br"), focusNode);
    			} else // the caret is at a text line but not end
    			if (focusNode.textContent.length !== focusOffset) {
    				document.execCommand("insertHTML", false, "<br>");
    			} else {
    				let br = focusNode.nextSibling; // the carat is at the end of a text line

    				if (br) {
    					editable.insertBefore(document.createElement("br"), br);
    				} else {
    					br = editable.appendChild(document.createElement("br"));
    					br = editable.appendChild(document.createElement("br"));
    				}

    				// set selection to new line
    				selection.collapse(br, 0);
    			}
    		}
    	}

    	function onFocusTool() {
    		$$invalidate(8, operation = "tool");
    	}

    	async function onBlurTool() {
    		if (operation !== "tool" || operation === "edit") return;

    		dispatch("update", {
    			lines: extractLines(),
    			lineHeight: _lineHeight,
    			size: _size,
    			fontFamily: _fontFamily,
    			color: _color,
    			bold: _bold,
    			italic: _italic,
    			underline: _underline
    		});

    		$$invalidate(8, operation = "");
    	}

    	function sanitize() {
    		let weirdNode;

    		while (weirdNode = Array.from(editable.childNodes).find(node => !["#text", "BR"].includes(node.nodeName))) {
    			editable.removeChild(weirdNode);
    		}
    	}

    	function onChangeFont() {
    		dispatch("selectFont", { name: _fontFamily });
    	}

    	function render() {
    		$$invalidate(2, editable.innerHTML = text, editable);
    		editable.focus();
    	}

    	function extractLines() {
    		const nodes = editable.childNodes;
    		const lines = [];
    		let lineText = "";

    		for (let index = 0; index < nodes.length; index++) {
    			const node = nodes[index];

    			if (node.nodeName === "BR") {
    				lines.push(lineText);
    				lineText = "";
    			} else {
    				lineText += node.textContent;
    			}
    		}

    		lines.push(lineText);
    		return lines;
    	}

    	function onDelete() {
    		dispatch("delete");
    	}

    	onMount(render);

    	const writable_props = [
    		'size',
    		'text',
    		'lineHeight',
    		'x',
    		'y',
    		'fontFamily',
    		'color',
    		'bold',
    		'italic',
    		'underline',
    		'pageScale'
    	];

    	Object_1.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Text> was created with unknown prop '${key}'`);
    	});

    	function input0_input_handler() {
    		_lineHeight = to_number(this.value);
    		$$invalidate(4, _lineHeight);
    	}

    	function input1_input_handler() {
    		_size = to_number(this.value);
    		$$invalidate(3, _size);
    	}

    	function select_change_handler() {
    		_fontFamily = select_value(this);
    		$$invalidate(5, _fontFamily);
    		$$invalidate(9, Families);
    	}

    	function div1_binding($$value) {
    		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
    			editable = $$value;
    			$$invalidate(2, editable);
    		});
    	}

    	$$self.$$set = $$props => {
    		if ('size' in $$props) $$invalidate(25, size = $$props.size);
    		if ('text' in $$props) $$invalidate(26, text = $$props.text);
    		if ('lineHeight' in $$props) $$invalidate(27, lineHeight = $$props.lineHeight);
    		if ('x' in $$props) $$invalidate(0, x = $$props.x);
    		if ('y' in $$props) $$invalidate(1, y = $$props.y);
    		if ('fontFamily' in $$props) $$invalidate(28, fontFamily = $$props.fontFamily);
    		if ('color' in $$props) $$invalidate(29, color = $$props.color);
    		if ('bold' in $$props) $$invalidate(30, bold = $$props.bold);
    		if ('italic' in $$props) $$invalidate(31, italic = $$props.italic);
    		if ('underline' in $$props) $$invalidate(32, underline = $$props.underline);
    		if ('pageScale' in $$props) $$invalidate(33, pageScale = $$props.pageScale);
    	};

    	$$self.$capture_state = () => ({
    		onMount,
    		createEventDispatcher,
    		Toolbar,
    		pannable,
    		tapout,
    		timeout,
    		Fonts,
    		size,
    		text,
    		lineHeight,
    		x,
    		y,
    		fontFamily,
    		color,
    		bold,
    		italic,
    		underline,
    		pageScale,
    		Families,
    		dispatch,
    		startX,
    		startY,
    		editable,
    		_size,
    		_lineHeight,
    		_fontFamily,
    		_color,
    		_bold,
    		_italic,
    		_underline,
    		dx,
    		dy,
    		operation,
    		handlePanMove,
    		handlePanEnd,
    		handlePanStart,
    		onFocus,
    		onBlur,
    		onPaste,
    		onKeydown,
    		onFocusTool,
    		onBlurTool,
    		sanitize,
    		onChangeFont,
    		render,
    		extractLines,
    		onDelete
    	});

    	$$self.$inject_state = $$props => {
    		if ('size' in $$props) $$invalidate(25, size = $$props.size);
    		if ('text' in $$props) $$invalidate(26, text = $$props.text);
    		if ('lineHeight' in $$props) $$invalidate(27, lineHeight = $$props.lineHeight);
    		if ('x' in $$props) $$invalidate(0, x = $$props.x);
    		if ('y' in $$props) $$invalidate(1, y = $$props.y);
    		if ('fontFamily' in $$props) $$invalidate(28, fontFamily = $$props.fontFamily);
    		if ('color' in $$props) $$invalidate(29, color = $$props.color);
    		if ('bold' in $$props) $$invalidate(30, bold = $$props.bold);
    		if ('italic' in $$props) $$invalidate(31, italic = $$props.italic);
    		if ('underline' in $$props) $$invalidate(32, underline = $$props.underline);
    		if ('pageScale' in $$props) $$invalidate(33, pageScale = $$props.pageScale);
    		if ('startX' in $$props) startX = $$props.startX;
    		if ('startY' in $$props) startY = $$props.startY;
    		if ('editable' in $$props) $$invalidate(2, editable = $$props.editable);
    		if ('_size' in $$props) $$invalidate(3, _size = $$props._size);
    		if ('_lineHeight' in $$props) $$invalidate(4, _lineHeight = $$props._lineHeight);
    		if ('_fontFamily' in $$props) $$invalidate(5, _fontFamily = $$props._fontFamily);
    		if ('_color' in $$props) $$invalidate(10, _color = $$props._color);
    		if ('_bold' in $$props) $$invalidate(11, _bold = $$props._bold);
    		if ('_italic' in $$props) $$invalidate(12, _italic = $$props._italic);
    		if ('_underline' in $$props) $$invalidate(13, _underline = $$props._underline);
    		if ('dx' in $$props) $$invalidate(6, dx = $$props.dx);
    		if ('dy' in $$props) $$invalidate(7, dy = $$props.dy);
    		if ('operation' in $$props) $$invalidate(8, operation = $$props.operation);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [
    		x,
    		y,
    		editable,
    		_size,
    		_lineHeight,
    		_fontFamily,
    		dx,
    		dy,
    		operation,
    		Families,
    		_color,
    		_bold,
    		_italic,
    		_underline,
    		handlePanMove,
    		handlePanEnd,
    		handlePanStart,
    		onFocus,
    		onBlur,
    		onPaste,
    		onKeydown,
    		onFocusTool,
    		onBlurTool,
    		onChangeFont,
    		onDelete,
    		size,
    		text,
    		lineHeight,
    		fontFamily,
    		color,
    		bold,
    		italic,
    		underline,
    		pageScale,
    		input0_input_handler,
    		input1_input_handler,
    		select_change_handler,
    		div1_binding
    	];
    }

    class Text extends SvelteComponentDev {
    	constructor(options) {
    		super(options);

    		init(
    			this,
    			options,
    			instance$5,
    			create_fragment$5,
    			not_equal,
    			{
    				size: 25,
    				text: 26,
    				lineHeight: 27,
    				x: 0,
    				y: 1,
    				fontFamily: 28,
    				color: 29,
    				bold: 30,
    				italic: 31,
    				underline: 32,
    				pageScale: 33
    			},
    			null,
    			[-1, -1]
    		);

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Text",
    			options,
    			id: create_fragment$5.name
    		});

    		const { ctx } = this.$$;
    		const props = options.props || {};

    		if (/*size*/ ctx[25] === undefined && !('size' in props)) {
    			console.warn("<Text> was created without expected prop 'size'");
    		}

    		if (/*text*/ ctx[26] === undefined && !('text' in props)) {
    			console.warn("<Text> was created without expected prop 'text'");
    		}

    		if (/*lineHeight*/ ctx[27] === undefined && !('lineHeight' in props)) {
    			console.warn("<Text> was created without expected prop 'lineHeight'");
    		}

    		if (/*x*/ ctx[0] === undefined && !('x' in props)) {
    			console.warn("<Text> was created without expected prop 'x'");
    		}

    		if (/*y*/ ctx[1] === undefined && !('y' in props)) {
    			console.warn("<Text> was created without expected prop 'y'");
    		}

    		if (/*fontFamily*/ ctx[28] === undefined && !('fontFamily' in props)) {
    			console.warn("<Text> was created without expected prop 'fontFamily'");
    		}

    		if (/*color*/ ctx[29] === undefined && !('color' in props)) {
    			console.warn("<Text> was created without expected prop 'color'");
    		}

    		if (/*bold*/ ctx[30] === undefined && !('bold' in props)) {
    			console.warn("<Text> was created without expected prop 'bold'");
    		}

    		if (/*italic*/ ctx[31] === undefined && !('italic' in props)) {
    			console.warn("<Text> was created without expected prop 'italic'");
    		}

    		if (/*underline*/ ctx[32] === undefined && !('underline' in props)) {
    			console.warn("<Text> was created without expected prop 'underline'");
    		}
    	}

    	get size() {
    		throw new Error("<Text>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set size(value) {
    		throw new Error("<Text>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get text() {
    		throw new Error("<Text>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set text(value) {
    		throw new Error("<Text>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get lineHeight() {
    		throw new Error("<Text>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set lineHeight(value) {
    		throw new Error("<Text>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get x() {
    		throw new Error("<Text>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set x(value) {
    		throw new Error("<Text>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get y() {
    		throw new Error("<Text>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set y(value) {
    		throw new Error("<Text>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get fontFamily() {
    		throw new Error("<Text>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set fontFamily(value) {
    		throw new Error("<Text>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get color() {
    		throw new Error("<Text>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set color(value) {
    		throw new Error("<Text>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get bold() {
    		throw new Error("<Text>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set bold(value) {
    		throw new Error("<Text>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get italic() {
    		throw new Error("<Text>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set italic(value) {
    		throw new Error("<Text>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get underline() {
    		throw new Error("<Text>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set underline(value) {
    		throw new Error("<Text>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get pageScale() {
    		throw new Error("<Text>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set pageScale(value) {
    		throw new Error("<Text>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}
    }

    /* src/Drawing.svelte generated by Svelte v3.48.0 */
    const file$4 = "src/Drawing.svelte";

    function create_fragment$6(ctx) {
    	let div4;
    	let div2;
    	let div0;
    	let t0;
    	let div1;
    	let pannable_action;
    	let t1;
    	let div3;
    	let img;
    	let img_src_value;
    	let t2;
    	let svg_1;
    	let path_1;
    	let mounted;
    	let dispose;

    	const block = {
    		c: function create() {
    			div4 = element("div");
    			div2 = element("div");
    			div0 = element("div");
    			t0 = space();
    			div1 = element("div");
    			t1 = space();
    			div3 = element("div");
    			img = element("img");
    			t2 = space();
    			svg_1 = svg_element("svg");
    			path_1 = svg_element("path");
    			attr_dev(div0, "data-direction", "left-top");
    			attr_dev(div0, "class", "absolute left-0 top-0 w-10 h-10 bg-green-400 rounded-full cursor-nwse-resize transform -translate-x-1/2 -translate-y-1/2 md:scale-25");
    			add_location(div0, file$4, 105, 4, 2778);
    			attr_dev(div1, "data-direction", "right-bottom");
    			attr_dev(div1, "class", "absolute right-0 bottom-0 w-10 h-10 bg-green-400 rounded-full cursor-nwse-resize transform translate-x-1/2 translate-y-1/2 md:scale-25");
    			add_location(div1, file$4, 109, 4, 2975);
    			attr_dev(div2, "class", "absolute w-full h-full cursor-grab border border-gray-400 border-dashed svelte-sf1zqb");
    			toggle_class(div2, "cursor-grabbing", /*operation*/ ctx[5] === 'move');
    			toggle_class(div2, "operation", /*operation*/ ctx[5]);
    			add_location(div2, file$4, 96, 2, 2501);
    			attr_dev(img, "class", "w-full h-full");
    			if (!src_url_equal(img.src, img_src_value = "/public/delete.svg")) attr_dev(img, "src", img_src_value);
    			attr_dev(img, "alt", "delete object");
    			add_location(img, file$4, 118, 4, 3358);
    			attr_dev(div3, "class", "absolute left-0 top-0 right-0 w-12 h-12 m-auto rounded-full bg-white cursor-pointer transform -translate-y-1/2 md:scale-25");
    			add_location(div3, file$4, 114, 2, 3185);
    			attr_dev(path_1, "stroke-width", "5");
    			attr_dev(path_1, "stroke-linejoin", "round");
    			attr_dev(path_1, "stroke-linecap", "round");
    			attr_dev(path_1, "stroke", "black");
    			attr_dev(path_1, "fill", "none");
    			attr_dev(path_1, "d", /*path*/ ctx[3]);
    			add_location(path_1, file$4, 121, 4, 3497);
    			attr_dev(svg_1, "width", "100%");
    			attr_dev(svg_1, "height", "100%");
    			add_location(svg_1, file$4, 120, 2, 3444);
    			attr_dev(div4, "class", "absolute left-0 top-0 select-none");
    			set_style(div4, "width", /*width*/ ctx[0] + /*dw*/ ctx[8] + "px");
    			set_style(div4, "height", (/*width*/ ctx[0] + /*dw*/ ctx[8]) / /*ratio*/ ctx[9] + "px");
    			set_style(div4, "transform", "translate(" + (/*x*/ ctx[1] + /*dx*/ ctx[6]) + "px, " + (/*y*/ ctx[2] + /*dy*/ ctx[7]) + "px)");
    			add_location(div4, file$4, 92, 0, 2334);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div4, anchor);
    			append_dev(div4, div2);
    			append_dev(div2, div0);
    			append_dev(div2, t0);
    			append_dev(div2, div1);
    			append_dev(div4, t1);
    			append_dev(div4, div3);
    			append_dev(div3, img);
    			append_dev(div4, t2);
    			append_dev(div4, svg_1);
    			append_dev(svg_1, path_1);
    			/*svg_1_binding*/ ctx[17](svg_1);

    			if (!mounted) {
    				dispose = [
    					action_destroyer(pannable_action = pannable.call(null, div2)),
    					listen_dev(div2, "panstart", /*handlePanStart*/ ctx[12], false, false, false),
    					listen_dev(div2, "panmove", /*handlePanMove*/ ctx[10], false, false, false),
    					listen_dev(div2, "panend", /*handlePanEnd*/ ctx[11], false, false, false),
    					listen_dev(div3, "click", /*onDelete*/ ctx[13], false, false, false)
    				];

    				mounted = true;
    			}
    		},
    		p: function update(ctx, [dirty]) {
    			if (dirty & /*operation*/ 32) {
    				toggle_class(div2, "cursor-grabbing", /*operation*/ ctx[5] === 'move');
    			}

    			if (dirty & /*operation*/ 32) {
    				toggle_class(div2, "operation", /*operation*/ ctx[5]);
    			}

    			if (dirty & /*path*/ 8) {
    				attr_dev(path_1, "d", /*path*/ ctx[3]);
    			}

    			if (dirty & /*width, dw*/ 257) {
    				set_style(div4, "width", /*width*/ ctx[0] + /*dw*/ ctx[8] + "px");
    			}

    			if (dirty & /*width, dw*/ 257) {
    				set_style(div4, "height", (/*width*/ ctx[0] + /*dw*/ ctx[8]) / /*ratio*/ ctx[9] + "px");
    			}

    			if (dirty & /*x, dx, y, dy*/ 198) {
    				set_style(div4, "transform", "translate(" + (/*x*/ ctx[1] + /*dx*/ ctx[6]) + "px, " + (/*y*/ ctx[2] + /*dy*/ ctx[7]) + "px)");
    			}
    		},
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div4);
    			/*svg_1_binding*/ ctx[17](null);
    			mounted = false;
    			run_all(dispose);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$6.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$6($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('Drawing', slots, []);
    	let { originWidth } = $$props;
    	let { originHeight } = $$props;
    	let { width } = $$props;
    	let { x } = $$props;
    	let { y } = $$props;
    	let { pageScale = 1 } = $$props;
    	let { path } = $$props;
    	const dispatch = createEventDispatcher();
    	let startX;
    	let startY;
    	let svg;
    	let operation = "";
    	let dx = 0;
    	let dy = 0;
    	let dw = 0;
    	let direction = "";
    	let colory = document.getElementById("colorx").value;
    	const ratio = originWidth / originHeight;

    	async function render() {
    		svg.setAttribute("viewBox", `0 0 ${originWidth} ${originHeight}`);
    	}

    	function handlePanMove(event) {
    		colory = document.getElementById("colorx").value;
    		const _dx = (event.detail.x - startX) / pageScale;
    		const _dy = (event.detail.y - startY) / pageScale;

    		if (operation === "move") {
    			$$invalidate(6, dx = _dx);
    			$$invalidate(7, dy = _dy);
    		} else if (operation === "scale") {
    			if (direction === "left-top") {
    				let d = Infinity;
    				d = Math.min(_dx, _dy * ratio);
    				$$invalidate(6, dx = d);
    				$$invalidate(8, dw = -d);
    				$$invalidate(7, dy = d / ratio);
    			}

    			if (direction === "right-bottom") {
    				let d = -Infinity;
    				d = Math.max(_dx, _dy * ratio);
    				$$invalidate(8, dw = d);
    			}
    		}
    	}

    	function handlePanEnd(event) {
    		colory = document.getElementById("colorx").value;

    		if (operation === "move") {
    			dispatch("update", { x: x + dx, y: y + dy });
    			$$invalidate(6, dx = 0);
    			$$invalidate(7, dy = 0);
    		} else if (operation === "scale") {
    			dispatch("update", {
    				x: x + dx,
    				y: y + dy,
    				width: width + dw,
    				scale: (width + dw) / originWidth
    			});

    			$$invalidate(6, dx = 0);
    			$$invalidate(7, dy = 0);
    			$$invalidate(8, dw = 0);
    			direction = "";
    		}

    		$$invalidate(5, operation = "");
    	}

    	function handlePanStart(event) {
    		colory = document.getElementById("colorx").value;
    		startX = event.detail.x;
    		startY = event.detail.y;

    		if (event.detail.target === event.currentTarget) {
    			return $$invalidate(5, operation = "move");
    		}

    		$$invalidate(5, operation = "scale");
    		direction = event.detail.target.dataset.direction;
    	}

    	function onDelete() {
    		dispatch("delete");
    	}

    	onMount(render);
    	const writable_props = ['originWidth', 'originHeight', 'width', 'x', 'y', 'pageScale', 'path'];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Drawing> was created with unknown prop '${key}'`);
    	});

    	function svg_1_binding($$value) {
    		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
    			svg = $$value;
    			$$invalidate(4, svg);
    		});
    	}

    	$$self.$$set = $$props => {
    		if ('originWidth' in $$props) $$invalidate(14, originWidth = $$props.originWidth);
    		if ('originHeight' in $$props) $$invalidate(15, originHeight = $$props.originHeight);
    		if ('width' in $$props) $$invalidate(0, width = $$props.width);
    		if ('x' in $$props) $$invalidate(1, x = $$props.x);
    		if ('y' in $$props) $$invalidate(2, y = $$props.y);
    		if ('pageScale' in $$props) $$invalidate(16, pageScale = $$props.pageScale);
    		if ('path' in $$props) $$invalidate(3, path = $$props.path);
    	};

    	$$self.$capture_state = () => ({
    		onMount,
    		createEventDispatcher,
    		pannable,
    		readAsArrayBuffer,
    		originWidth,
    		originHeight,
    		width,
    		x,
    		y,
    		pageScale,
    		path,
    		dispatch,
    		startX,
    		startY,
    		svg,
    		operation,
    		dx,
    		dy,
    		dw,
    		direction,
    		colory,
    		ratio,
    		render,
    		handlePanMove,
    		handlePanEnd,
    		handlePanStart,
    		onDelete
    	});

    	$$self.$inject_state = $$props => {
    		if ('originWidth' in $$props) $$invalidate(14, originWidth = $$props.originWidth);
    		if ('originHeight' in $$props) $$invalidate(15, originHeight = $$props.originHeight);
    		if ('width' in $$props) $$invalidate(0, width = $$props.width);
    		if ('x' in $$props) $$invalidate(1, x = $$props.x);
    		if ('y' in $$props) $$invalidate(2, y = $$props.y);
    		if ('pageScale' in $$props) $$invalidate(16, pageScale = $$props.pageScale);
    		if ('path' in $$props) $$invalidate(3, path = $$props.path);
    		if ('startX' in $$props) startX = $$props.startX;
    		if ('startY' in $$props) startY = $$props.startY;
    		if ('svg' in $$props) $$invalidate(4, svg = $$props.svg);
    		if ('operation' in $$props) $$invalidate(5, operation = $$props.operation);
    		if ('dx' in $$props) $$invalidate(6, dx = $$props.dx);
    		if ('dy' in $$props) $$invalidate(7, dy = $$props.dy);
    		if ('dw' in $$props) $$invalidate(8, dw = $$props.dw);
    		if ('direction' in $$props) direction = $$props.direction;
    		if ('colory' in $$props) colory = $$props.colory;
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [
    		width,
    		x,
    		y,
    		path,
    		svg,
    		operation,
    		dx,
    		dy,
    		dw,
    		ratio,
    		handlePanMove,
    		handlePanEnd,
    		handlePanStart,
    		onDelete,
    		originWidth,
    		originHeight,
    		pageScale,
    		svg_1_binding
    	];
    }

    class Drawing extends SvelteComponentDev {
    	constructor(options) {
    		super(options);

    		init(this, options, instance$6, create_fragment$6, not_equal, {
    			originWidth: 14,
    			originHeight: 15,
    			width: 0,
    			x: 1,
    			y: 2,
    			pageScale: 16,
    			path: 3
    		});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "Drawing",
    			options,
    			id: create_fragment$6.name
    		});

    		const { ctx } = this.$$;
    		const props = options.props || {};

    		if (/*originWidth*/ ctx[14] === undefined && !('originWidth' in props)) {
    			console.warn("<Drawing> was created without expected prop 'originWidth'");
    		}

    		if (/*originHeight*/ ctx[15] === undefined && !('originHeight' in props)) {
    			console.warn("<Drawing> was created without expected prop 'originHeight'");
    		}

    		if (/*width*/ ctx[0] === undefined && !('width' in props)) {
    			console.warn("<Drawing> was created without expected prop 'width'");
    		}

    		if (/*x*/ ctx[1] === undefined && !('x' in props)) {
    			console.warn("<Drawing> was created without expected prop 'x'");
    		}

    		if (/*y*/ ctx[2] === undefined && !('y' in props)) {
    			console.warn("<Drawing> was created without expected prop 'y'");
    		}

    		if (/*path*/ ctx[3] === undefined && !('path' in props)) {
    			console.warn("<Drawing> was created without expected prop 'path'");
    		}
    	}

    	get originWidth() {
    		throw new Error("<Drawing>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set originWidth(value) {
    		throw new Error("<Drawing>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get originHeight() {
    		throw new Error("<Drawing>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set originHeight(value) {
    		throw new Error("<Drawing>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get width() {
    		throw new Error("<Drawing>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set width(value) {
    		throw new Error("<Drawing>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get x() {
    		throw new Error("<Drawing>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set x(value) {
    		throw new Error("<Drawing>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get y() {
    		throw new Error("<Drawing>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set y(value) {
    		throw new Error("<Drawing>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get pageScale() {
    		throw new Error("<Drawing>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set pageScale(value) {
    		throw new Error("<Drawing>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	get path() {
    		throw new Error("<Drawing>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}

    	set path(value) {
    		throw new Error("<Drawing>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
    	}
    }

    /* src/DrawingCanvas.svelte generated by Svelte v3.48.0 */
    const file$5 = "src/DrawingCanvas.svelte";

    function create_fragment$7(ctx) {
    	let div1;
    	let div0;
    	let button0;
    	let t1;
    	let button1;
    	let t3;
    	let svg;
    	let path_1;
    	let pannable_action;
    	let mounted;
    	let dispose;

    	const block = {
    		c: function create() {
    			div1 = element("div");
    			div0 = element("div");
    			button0 = element("button");
    			button0.textContent = "Cancel";
    			t1 = space();
    			button1 = element("button");
    			button1.textContent = "Done";
    			t3 = space();
    			svg = svg_element("svg");
    			path_1 = svg_element("path");
    			attr_dev(button0, "class", "w-24 bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-4 rounded mr-4");
    			add_location(button0, file$5, 74, 4, 1984);
    			attr_dev(button1, "class", "w-24 bg-blue-600 hover:bg-blue-700 text-white font-bold py-1 px-4 rounded");
    			add_location(button1, file$5, 80, 4, 2146);
    			set_style(div0, "bottom", "40px");
    			attr_dev(div0, "class", "absolute right-0 bottom-0 mr-4 mb-4 flex");
    			add_location(div0, file$5, 73, 2, 1903);
    			attr_dev(path_1, "stroke-width", "5");
    			attr_dev(path_1, "stroke-linejoin", "round");
    			attr_dev(path_1, "stroke-linecap", "round");
    			attr_dev(path_1, "d", /*path*/ ctx[1]);
    			attr_dev(path_1, "stroke", "black");
    			attr_dev(path_1, "fill", "none");
    			add_location(path_1, file$5, 88, 4, 2390);
    			set_style(svg, "margin-top", "-100px");
    			attr_dev(svg, "class", "w-full h-full pointer-events-none");
    			add_location(svg, file$5, 87, 2, 2309);
    			attr_dev(div1, "class", "relative w-full h-full select-none");
    			add_location(div1, file$5, 66, 0, 1727);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div1, anchor);
    			append_dev(div1, div0);
    			append_dev(div0, button0);
    			append_dev(div0, t1);
    			append_dev(div0, button1);
    			append_dev(div1, t3);
    			append_dev(div1, svg);
    			append_dev(svg, path_1);
    			/*div1_binding*/ ctx[7](div1);

    			if (!mounted) {
    				dispose = [
    					listen_dev(button0, "click", /*cancel*/ ctx[6], false, false, false),
    					listen_dev(button1, "click", /*finish*/ ctx[5], false, false, false),
    					action_destroyer(pannable_action = pannable.call(null, div1)),
    					listen_dev(div1, "panstart", /*handlePanStart*/ ctx[2], false, false, false),
    					listen_dev(div1, "panmove", /*handlePanMove*/ ctx[3], false, false, false),
    					listen_dev(div1, "panend", /*handlePanEnd*/ ctx[4], false, false, false)
    				];

    				mounted = true;
    			}
    		},
    		p: function update(ctx, [dirty]) {
    			if (dirty & /*path*/ 2) {
    				attr_dev(path_1, "d", /*path*/ ctx[1]);
    			}
    		},
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div1);
    			/*div1_binding*/ ctx[7](null);
    			mounted = false;
    			run_all(dispose);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$7.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$7($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('DrawingCanvas', slots, []);
    	const dispatch = createEventDispatcher();
    	let canvas;
    	let x = 0;
    	let y = 0;
    	let path = "";
    	let minX = Infinity;
    	let maxX = 0;
    	let minY = Infinity;
    	let maxY = 0;
    	let paths = [];
    	let drawing = false;
    	colortt = document.getElementById("colorx").value;
    	let colory = colortt;

    	function handlePanStart(event) {
    		colory = document.getElementById("colorx").value;

    		if (event.detail.target !== canvas) {
    			return drawing = false;
    		}

    		drawing = true;
    		x = event.detail.x;
    		y = event.detail.y;
    		minX = Math.min(minX, x);
    		maxX = Math.max(maxX, x);
    		minY = Math.min(minY, y);
    		maxY = Math.max(maxY, y);
    		paths.push(["M", x, y]);
    		$$invalidate(1, path += `M${x},${y}`);
    	}

    	function handlePanMove(event) {
    		colory = document.getElementById("colorx").value;
    		if (!drawing) return;
    		x = event.detail.x;
    		y = event.detail.y;
    		minX = Math.min(minX, x);
    		maxX = Math.max(maxX, x);
    		minY = Math.min(minY, y);
    		maxY = Math.max(maxY, y);
    		paths.push(["L", x, y]);
    		$$invalidate(1, path += `L${x},${y}`);
    	}

    	function handlePanEnd() {
    		drawing = false;
    	}

    	function finish() {
    		colory = document.getElementById("colorx").value;
    		if (!paths.length) return;
    		const dx = -(minX - 10);
    		const dy = -(minY - 10);
    		const width = maxX - minX + 20;
    		const height = maxY - minY + 20;

    		dispatch("finish", {
    			originWidth: width,
    			originHeight: height,
    			path: paths.reduce(
    				(acc, cur) => {
    					return acc + cur[0] + (cur[1] + dx) + "," + (cur[2] + dy);
    				},
    				""
    			)
    		});
    	}

    	function cancel() {
    		dispatch("cancel");
    	}

    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<DrawingCanvas> was created with unknown prop '${key}'`);
    	});

    	function div1_binding($$value) {
    		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
    			canvas = $$value;
    			$$invalidate(0, canvas);
    		});
    	}

    	$$self.$capture_state = () => ({
    		createEventDispatcher,
    		pannable,
    		dispatch,
    		canvas,
    		x,
    		y,
    		path,
    		minX,
    		maxX,
    		minY,
    		maxY,
    		paths,
    		drawing,
    		colory,
    		handlePanStart,
    		handlePanMove,
    		handlePanEnd,
    		finish,
    		cancel
    	});

    	$$self.$inject_state = $$props => {
    		if ('canvas' in $$props) $$invalidate(0, canvas = $$props.canvas);
    		if ('x' in $$props) x = $$props.x;
    		if ('y' in $$props) y = $$props.y;
    		if ('path' in $$props) $$invalidate(1, path = $$props.path);
    		if ('minX' in $$props) minX = $$props.minX;
    		if ('maxX' in $$props) maxX = $$props.maxX;
    		if ('minY' in $$props) minY = $$props.minY;
    		if ('maxY' in $$props) maxY = $$props.maxY;
    		if ('paths' in $$props) paths = $$props.paths;
    		if ('drawing' in $$props) drawing = $$props.drawing;
    		if ('colory' in $$props) colory = $$props.colory;
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [
    		canvas,
    		path,
    		handlePanStart,
    		handlePanMove,
    		handlePanEnd,
    		finish,
    		cancel,
    		div1_binding
    	];
    }

    class DrawingCanvas extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$7, create_fragment$7, safe_not_equal, {});

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "DrawingCanvas",
    			options,
    			id: create_fragment$7.name
    		});
    	}
    }

    async function save(pdfFile, objects, name) {
      const PDFLib = await getAsset('PDFLib');
      const download = await getAsset('download');
      const makeTextPDF = await getAsset('makeTextPDF');
      let pdfDoc;
      try {
        pdfDoc = await PDFLib.PDFDocument.load(await readAsArrayBuffer(pdfFile));
      } catch (e) {
        console.log('Failed to load PDF.');
        throw e;
      }
      const pagesProcesses = pdfDoc.getPages().map(async (page, pageIndex) => {
        const pageObjects = objects[pageIndex];
        // 'y' starts from bottom in PDFLib, use this to calculate y
        const pageHeight = page.getHeight();
        const embedProcesses = pageObjects.map(async (object) => {
          if (object.type === 'image') {
            let { file, x, y, width, height } = object;
            let img;
            try {
              if (file.type === 'image/jpeg') {
                img = await pdfDoc.embedJpg(await readAsArrayBuffer(file));
              } else {
                img = await pdfDoc.embedPng(await readAsArrayBuffer(file));
              }
              return () =>
                page.drawImage(img, {
                  x,
                  y: pageHeight - y - height,
                  width,
                  height,
                });
            } catch (e) {
              console.log('Failed to embed image.', e);
              return noop$1;
            }
          } else if (object.type === 'text') {
            let { x, y, lines, lineHeight, size, fontFamily, width, color, bold, italic, underline } = object;

            const height = size * lineHeight * lines.length;
            const font = await fetchFont(fontFamily);
            const [textPage] = await pdfDoc.embedPdf(
              await makeTextPDF({
                lines,
                fontSize: size,
                lineHeight,
                width,
                height,
                font: font.buffer || fontFamily, // built-in font family
                dy: font.correction(size, lineHeight),
        	    color: color,
          	    bold: bold,
     	    italic: italic,
    	    underline: underline,
              }),
            );
            return () =>
              page.drawPage(textPage, {
                width,
                height,
                x,
                y: pageHeight - y - height,
              });
          } else if (object.type === 'drawing') {
            let { x, y, path, scale } = object;


            const {
              pushGraphicsState,
              setLineCap,
              popGraphicsState,
              setLineJoin,
              LineCapStyle,
              LineJoinStyle,
            } = PDFLib;
            return () => {
              page.pushOperators(
                pushGraphicsState(),
                setLineCap(LineCapStyle.Round),
                setLineJoin(LineJoinStyle.Round),
              );
              page.drawSvgPath(path, {
                borderWidth: 5,
                scale,
                x,
                y: pageHeight - y,
              });
              page.pushOperators(popGraphicsState());
            };
          }
        });
        // embed objects in order
        const drawProcesses = await Promise.all(embedProcesses);
        drawProcesses.forEach((p) => p());
      });
      await Promise.all(pagesProcesses);
      try {
        const pdfBytes = await pdfDoc.save();
        download(pdfBytes, name, 'application/pdf');
      } catch (e) {
        console.log('Failed to save PDF.');
        throw e;
      }
    }

    /* src/App.svelte generated by Svelte v3.48.0 */

    const { console: console_1 } = globals;
    const file$6 = "src/App.svelte";

    function get_each_context$1(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[42] = list[i];
    	child_ctx[44] = i;
    	return child_ctx;
    }

    function get_each_context_1(ctx, list, i) {
    	const child_ctx = ctx.slice();
    	child_ctx[45] = list[i];
    	return child_ctx;
    }

    // (1123:2) {#if addingDrawing}
    function create_if_block_4(ctx) {
    	let div;
    	let p;
    	let t1;
    	let drawingcanvas;
    	let div_transition;
    	let current;
    	drawingcanvas = new DrawingCanvas({ $$inline: true });
    	drawingcanvas.$on("finish", /*finish_handler*/ ctx[23]);
    	drawingcanvas.$on("cancel", /*cancel_handler*/ ctx[24]);

    	const block = {
    		c: function create() {
    			div = element("div");
    			p = element("p");
    			p.textContent = "Draw any picture to load in the PDF";
    			t1 = space();
    			create_component(drawingcanvas.$$.fragment);
    			set_style(p, "text-align", "center");
    			set_style(p, "margin-top", "10px");
    			add_location(p, file$6, 1128, 6, 30891);
    			attr_dev(div, "class", "fixed z-10 top-0 left-0 right-0 border-b border-gray-300 bg-white shadow-lg");
    			set_style(div, "margin", "80px auto 0 auto");
    			set_style(div, "height", "50%");
    			add_location(div, file$6, 1123, 4, 30679);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);
    			append_dev(div, p);
    			append_dev(div, t1);
    			mount_component(drawingcanvas, div, null);
    			current = true;
    		},
    		p: noop,
    		i: function intro(local) {
    			if (current) return;
    			transition_in(drawingcanvas.$$.fragment, local);

    			add_render_callback(() => {
    				if (!div_transition) div_transition = create_bidirectional_transition(div, fly, { y: -200, duration: 500 }, true);
    				div_transition.run(1);
    			});

    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(drawingcanvas.$$.fragment, local);
    			if (!div_transition) div_transition = create_bidirectional_transition(div, fly, { y: -200, duration: 500 }, false);
    			div_transition.run(0);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    			destroy_component(drawingcanvas);
    			if (detaching && div_transition) div_transition.end();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_4.name,
    		type: "if",
    		source: "(1123:2) {#if addingDrawing}",
    		ctx
    	});

    	return block;
    }

    // (1214:2) {:else}
    function create_else_block(ctx) {
    	let div;
    	let span;

    	const block = {
    		c: function create() {
    			div = element("div");
    			span = element("span");
    			span.textContent = "Drag something here";
    			attr_dev(span, "class", "font-bold text-3xl text-gray-500");
    			add_location(span, file$6, 1215, 6, 34356);
    			attr_dev(div, "class", "w-full flex-grow flex justify-center items-center");
    			add_location(div, file$6, 1214, 4, 34286);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div, anchor);
    			append_dev(div, span);
    		},
    		p: noop,
    		i: noop,
    		o: noop,
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_else_block.name,
    		type: "else",
    		source: "(1214:2) {:else}",
    		ctx
    	});

    	return block;
    }

    // (1143:2) {#if pages.length}
    function create_if_block$1(ctx) {
    	let div0;
    	let img;
    	let img_src_value;
    	let t0;
    	let input;
    	let t1;
    	let div1;
    	let each_blocks = [];
    	let each_1_lookup = new Map();
    	let current;
    	let mounted;
    	let dispose;
    	let each_value = /*pages*/ ctx[2];
    	validate_each_argument(each_value);
    	const get_key = ctx => /*page*/ ctx[42];
    	validate_each_keys(ctx, each_value, get_each_context$1, get_key);

    	for (let i = 0; i < each_value.length; i += 1) {
    		let child_ctx = get_each_context$1(ctx, each_value, i);
    		let key = get_key(child_ctx);
    		each_1_lookup.set(key, each_blocks[i] = create_each_block$1(key, child_ctx));
    	}

    	const block = {
    		c: function create() {
    			div0 = element("div");
    			img = element("img");
    			t0 = space();
    			input = element("input");
    			t1 = space();
    			div1 = element("div");

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].c();
    			}

    			if (!src_url_equal(img.src, img_src_value = "/public/edit.svg")) attr_dev(img, "src", img_src_value);
    			attr_dev(img, "class", "mr-2");
    			attr_dev(img, "alt", "a pen, edit pdf name");
    			add_location(img, file$6, 1144, 6, 31472);
    			attr_dev(input, "placeholder", "Rename your PDF here");
    			attr_dev(input, "type", "text");
    			attr_dev(input, "class", "flex-grow bg-transparent");
    			add_location(input, file$6, 1145, 6, 31549);
    			attr_dev(div0, "class", "flex justify-center px-5 w-full md:hidden");
    			add_location(div0, file$6, 1143, 4, 31410);
    			attr_dev(div1, "class", "w-full");
    			set_style(div1, "margin-top", "100px");
    			add_location(div1, file$6, 1151, 4, 31707);
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div0, anchor);
    			append_dev(div0, img);
    			append_dev(div0, t0);
    			append_dev(div0, input);
    			set_input_value(input, /*pdfName*/ ctx[1]);
    			insert_dev(target, t1, anchor);
    			insert_dev(target, div1, anchor);

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].m(div1, null);
    			}

    			current = true;

    			if (!mounted) {
    				dispose = listen_dev(input, "input", /*input_input_handler*/ ctx[25]);
    				mounted = true;
    			}
    		},
    		p: function update(ctx, dirty) {
    			if (dirty[0] & /*pdfName*/ 2 && input.value !== /*pdfName*/ ctx[1]) {
    				set_input_value(input, /*pdfName*/ ctx[1]);
    			}

    			if (dirty[0] & /*selectPage, pages, selectedPageIndex, pagesScale, allObjects, updateObject, deleteObject, selectFontFamily, onMeasure*/ 254012) {
    				each_value = /*pages*/ ctx[2];
    				validate_each_argument(each_value);
    				group_outros();
    				validate_each_keys(ctx, each_value, get_each_context$1, get_key);
    				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div1, outro_and_destroy_block, create_each_block$1, null, get_each_context$1);
    				check_outros();
    			}
    		},
    		i: function intro(local) {
    			if (current) return;

    			for (let i = 0; i < each_value.length; i += 1) {
    				transition_in(each_blocks[i]);
    			}

    			current = true;
    		},
    		o: function outro(local) {
    			for (let i = 0; i < each_blocks.length; i += 1) {
    				transition_out(each_blocks[i]);
    			}

    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div0);
    			if (detaching) detach_dev(t1);
    			if (detaching) detach_dev(div1);

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].d();
    			}

    			mounted = false;
    			dispose();
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block$1.name,
    		type: "if",
    		source: "(1143:2) {#if pages.length}",
    		ctx
    	});

    	return block;
    }

    // (1195:52) 
    function create_if_block_3(ctx) {
    	let drawing;
    	let current;

    	function update_handler_2(...args) {
    		return /*update_handler_2*/ ctx[31](/*object*/ ctx[45], ...args);
    	}

    	function delete_handler_2() {
    		return /*delete_handler_2*/ ctx[32](/*object*/ ctx[45]);
    	}

    	drawing = new Drawing({
    			props: {
    				path: /*object*/ ctx[45].path,
    				x: /*object*/ ctx[45].x,
    				y: /*object*/ ctx[45].y,
    				width: /*object*/ ctx[45].width,
    				originWidth: /*object*/ ctx[45].originWidth,
    				originHeight: /*object*/ ctx[45].originHeight,
    				pageScale: /*pagesScale*/ ctx[3][/*pIndex*/ ctx[44]]
    			},
    			$$inline: true
    		});

    	drawing.$on("update", update_handler_2);
    	drawing.$on("delete", delete_handler_2);

    	const block = {
    		c: function create() {
    			create_component(drawing.$$.fragment);
    		},
    		m: function mount(target, anchor) {
    			mount_component(drawing, target, anchor);
    			current = true;
    		},
    		p: function update(new_ctx, dirty) {
    			ctx = new_ctx;
    			const drawing_changes = {};
    			if (dirty[0] & /*allObjects, pages*/ 20) drawing_changes.path = /*object*/ ctx[45].path;
    			if (dirty[0] & /*allObjects, pages*/ 20) drawing_changes.x = /*object*/ ctx[45].x;
    			if (dirty[0] & /*allObjects, pages*/ 20) drawing_changes.y = /*object*/ ctx[45].y;
    			if (dirty[0] & /*allObjects, pages*/ 20) drawing_changes.width = /*object*/ ctx[45].width;
    			if (dirty[0] & /*allObjects, pages*/ 20) drawing_changes.originWidth = /*object*/ ctx[45].originWidth;
    			if (dirty[0] & /*allObjects, pages*/ 20) drawing_changes.originHeight = /*object*/ ctx[45].originHeight;
    			if (dirty[0] & /*pagesScale, pages*/ 12) drawing_changes.pageScale = /*pagesScale*/ ctx[3][/*pIndex*/ ctx[44]];
    			drawing.$set(drawing_changes);
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(drawing.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(drawing.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			destroy_component(drawing, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_3.name,
    		type: "if",
    		source: "(1195:52) ",
    		ctx
    	});

    	return block;
    }

    // (1179:49) 
    function create_if_block_2(ctx) {
    	let text_1;
    	let current;

    	function update_handler_1(...args) {
    		return /*update_handler_1*/ ctx[29](/*object*/ ctx[45], ...args);
    	}

    	function delete_handler_1() {
    		return /*delete_handler_1*/ ctx[30](/*object*/ ctx[45]);
    	}

    	text_1 = new Text({
    			props: {
    				text: /*object*/ ctx[45].text,
    				x: /*object*/ ctx[45].x,
    				y: /*object*/ ctx[45].y,
    				size: /*object*/ ctx[45].size,
    				color: /*object*/ ctx[45].color,
    				lineHeight: /*object*/ ctx[45].lineHeight,
    				fontFamily: /*object*/ ctx[45].fontFamily,
    				bold: /*object*/ ctx[45].bold,
    				italic: /*object*/ ctx[45].italic,
    				underline: /*object*/ ctx[45].underline,
    				pageScale: /*pagesScale*/ ctx[3][/*pIndex*/ ctx[44]]
    			},
    			$$inline: true
    		});

    	text_1.$on("update", update_handler_1);
    	text_1.$on("delete", delete_handler_1);
    	text_1.$on("selectFont", /*selectFontFamily*/ ctx[13]);

    	const block = {
    		c: function create() {
    			create_component(text_1.$$.fragment);
    		},
    		m: function mount(target, anchor) {
    			mount_component(text_1, target, anchor);
    			current = true;
    		},
    		p: function update(new_ctx, dirty) {
    			ctx = new_ctx;
    			const text_1_changes = {};
    			if (dirty[0] & /*allObjects, pages*/ 20) text_1_changes.text = /*object*/ ctx[45].text;
    			if (dirty[0] & /*allObjects, pages*/ 20) text_1_changes.x = /*object*/ ctx[45].x;
    			if (dirty[0] & /*allObjects, pages*/ 20) text_1_changes.y = /*object*/ ctx[45].y;
    			if (dirty[0] & /*allObjects, pages*/ 20) text_1_changes.size = /*object*/ ctx[45].size;
    			if (dirty[0] & /*allObjects, pages*/ 20) text_1_changes.color = /*object*/ ctx[45].color;
    			if (dirty[0] & /*allObjects, pages*/ 20) text_1_changes.lineHeight = /*object*/ ctx[45].lineHeight;
    			if (dirty[0] & /*allObjects, pages*/ 20) text_1_changes.fontFamily = /*object*/ ctx[45].fontFamily;
    			if (dirty[0] & /*allObjects, pages*/ 20) text_1_changes.bold = /*object*/ ctx[45].bold;
    			if (dirty[0] & /*allObjects, pages*/ 20) text_1_changes.italic = /*object*/ ctx[45].italic;
    			if (dirty[0] & /*allObjects, pages*/ 20) text_1_changes.underline = /*object*/ ctx[45].underline;
    			if (dirty[0] & /*pagesScale, pages*/ 12) text_1_changes.pageScale = /*pagesScale*/ ctx[3][/*pIndex*/ ctx[44]];
    			text_1.$set(text_1_changes);
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(text_1.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(text_1.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			destroy_component(text_1, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_2.name,
    		type: "if",
    		source: "(1179:49) ",
    		ctx
    	});

    	return block;
    }

    // (1168:16) {#if object.type === 'image'}
    function create_if_block_1(ctx) {
    	let image;
    	let current;

    	function update_handler(...args) {
    		return /*update_handler*/ ctx[27](/*object*/ ctx[45], ...args);
    	}

    	function delete_handler() {
    		return /*delete_handler*/ ctx[28](/*object*/ ctx[45]);
    	}

    	image = new Image$1({
    			props: {
    				file: /*object*/ ctx[45].file,
    				payload: /*object*/ ctx[45].payload,
    				x: /*object*/ ctx[45].x,
    				y: /*object*/ ctx[45].y,
    				width: /*object*/ ctx[45].width,
    				height: /*object*/ ctx[45].height,
    				pageScale: /*pagesScale*/ ctx[3][/*pIndex*/ ctx[44]]
    			},
    			$$inline: true
    		});

    	image.$on("update", update_handler);
    	image.$on("delete", delete_handler);

    	const block = {
    		c: function create() {
    			create_component(image.$$.fragment);
    		},
    		m: function mount(target, anchor) {
    			mount_component(image, target, anchor);
    			current = true;
    		},
    		p: function update(new_ctx, dirty) {
    			ctx = new_ctx;
    			const image_changes = {};
    			if (dirty[0] & /*allObjects, pages*/ 20) image_changes.file = /*object*/ ctx[45].file;
    			if (dirty[0] & /*allObjects, pages*/ 20) image_changes.payload = /*object*/ ctx[45].payload;
    			if (dirty[0] & /*allObjects, pages*/ 20) image_changes.x = /*object*/ ctx[45].x;
    			if (dirty[0] & /*allObjects, pages*/ 20) image_changes.y = /*object*/ ctx[45].y;
    			if (dirty[0] & /*allObjects, pages*/ 20) image_changes.width = /*object*/ ctx[45].width;
    			if (dirty[0] & /*allObjects, pages*/ 20) image_changes.height = /*object*/ ctx[45].height;
    			if (dirty[0] & /*pagesScale, pages*/ 12) image_changes.pageScale = /*pagesScale*/ ctx[3][/*pIndex*/ ctx[44]];
    			image.$set(image_changes);
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(image.$$.fragment, local);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(image.$$.fragment, local);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			destroy_component(image, detaching);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_if_block_1.name,
    		type: "if",
    		source: "(1168:16) {#if object.type === 'image'}",
    		ctx
    	});

    	return block;
    }

    // (1167:14) {#each allObjects[pIndex] as object (object.id)}
    function create_each_block_1(key_1, ctx) {
    	let first;
    	let current_block_type_index;
    	let if_block;
    	let if_block_anchor;
    	let current;
    	const if_block_creators = [create_if_block_1, create_if_block_2, create_if_block_3];
    	const if_blocks = [];

    	function select_block_type_1(ctx, dirty) {
    		if (/*object*/ ctx[45].type === 'image') return 0;
    		if (/*object*/ ctx[45].type === 'text') return 1;
    		if (/*object*/ ctx[45].type === 'drawing') return 2;
    		return -1;
    	}

    	if (~(current_block_type_index = select_block_type_1(ctx))) {
    		if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
    	}

    	const block = {
    		key: key_1,
    		first: null,
    		c: function create() {
    			first = empty();
    			if (if_block) if_block.c();
    			if_block_anchor = empty();
    			this.first = first;
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, first, anchor);

    			if (~current_block_type_index) {
    				if_blocks[current_block_type_index].m(target, anchor);
    			}

    			insert_dev(target, if_block_anchor, anchor);
    			current = true;
    		},
    		p: function update(new_ctx, dirty) {
    			ctx = new_ctx;
    			let previous_block_index = current_block_type_index;
    			current_block_type_index = select_block_type_1(ctx);

    			if (current_block_type_index === previous_block_index) {
    				if (~current_block_type_index) {
    					if_blocks[current_block_type_index].p(ctx, dirty);
    				}
    			} else {
    				if (if_block) {
    					group_outros();

    					transition_out(if_blocks[previous_block_index], 1, 1, () => {
    						if_blocks[previous_block_index] = null;
    					});

    					check_outros();
    				}

    				if (~current_block_type_index) {
    					if_block = if_blocks[current_block_type_index];

    					if (!if_block) {
    						if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
    						if_block.c();
    					} else {
    						if_block.p(ctx, dirty);
    					}

    					transition_in(if_block, 1);
    					if_block.m(if_block_anchor.parentNode, if_block_anchor);
    				} else {
    					if_block = null;
    				}
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(if_block);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(if_block);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(first);

    			if (~current_block_type_index) {
    				if_blocks[current_block_type_index].d(detaching);
    			}

    			if (detaching) detach_dev(if_block_anchor);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block_1.name,
    		type: "each",
    		source: "(1167:14) {#each allObjects[pIndex] as object (object.id)}",
    		ctx
    	});

    	return block;
    }

    // (1153:6) {#each pages as page, pIndex (page)}
    function create_each_block$1(key_1, ctx) {
    	let div2;
    	let div1;
    	let pdfpage;
    	let t0;
    	let div0;
    	let each_blocks = [];
    	let each_1_lookup = new Map();
    	let t1;
    	let current;
    	let mounted;
    	let dispose;

    	function measure_handler(...args) {
    		return /*measure_handler*/ ctx[26](/*pIndex*/ ctx[44], ...args);
    	}

    	pdfpage = new PDFPage({
    			props: { page: /*page*/ ctx[42] },
    			$$inline: true
    		});

    	pdfpage.$on("measure", measure_handler);
    	let each_value_1 = /*allObjects*/ ctx[4][/*pIndex*/ ctx[44]];
    	validate_each_argument(each_value_1);
    	const get_key = ctx => /*object*/ ctx[45].id;
    	validate_each_keys(ctx, each_value_1, get_each_context_1, get_key);

    	for (let i = 0; i < each_value_1.length; i += 1) {
    		let child_ctx = get_each_context_1(ctx, each_value_1, i);
    		let key = get_key(child_ctx);
    		each_1_lookup.set(key, each_blocks[i] = create_each_block_1(key, child_ctx));
    	}

    	function mousedown_handler() {
    		return /*mousedown_handler*/ ctx[33](/*pIndex*/ ctx[44]);
    	}

    	function touchstart_handler() {
    		return /*touchstart_handler*/ ctx[34](/*pIndex*/ ctx[44]);
    	}

    	const block = {
    		key: key_1,
    		first: null,
    		c: function create() {
    			div2 = element("div");
    			div1 = element("div");
    			create_component(pdfpage.$$.fragment);
    			t0 = space();
    			div0 = element("div");

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].c();
    			}

    			t1 = space();
    			attr_dev(div0, "class", "absolute top-0 left-0 transform origin-top-left");
    			set_style(div0, "transform", "scale(" + /*pagesScale*/ ctx[3][/*pIndex*/ ctx[44]] + ")");
    			set_style(div0, "touch-action", "none");
    			add_location(div0, file$6, 1163, 12, 32227);
    			attr_dev(div1, "class", "relative shadow-lg");
    			toggle_class(div1, "shadow-outline", /*pIndex*/ ctx[44] === /*selectedPageIndex*/ ctx[5]);
    			add_location(div1, file$6, 1157, 10, 31995);
    			attr_dev(div2, "class", "p-5 w-full flex flex-col items-center overflow-hidden");
    			add_location(div2, file$6, 1153, 8, 31806);
    			this.first = div2;
    		},
    		m: function mount(target, anchor) {
    			insert_dev(target, div2, anchor);
    			append_dev(div2, div1);
    			mount_component(pdfpage, div1, null);
    			append_dev(div1, t0);
    			append_dev(div1, div0);

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].m(div0, null);
    			}

    			append_dev(div2, t1);
    			current = true;

    			if (!mounted) {
    				dispose = [
    					listen_dev(div2, "mousedown", mousedown_handler, false, false, false),
    					listen_dev(div2, "touchstart", touchstart_handler, { passive: true }, false, false)
    				];

    				mounted = true;
    			}
    		},
    		p: function update(new_ctx, dirty) {
    			ctx = new_ctx;
    			const pdfpage_changes = {};
    			if (dirty[0] & /*pages*/ 4) pdfpage_changes.page = /*page*/ ctx[42];
    			pdfpage.$set(pdfpage_changes);

    			if (dirty[0] & /*allObjects, pages, pagesScale, updateObject, deleteObject, selectFontFamily*/ 106524) {
    				each_value_1 = /*allObjects*/ ctx[4][/*pIndex*/ ctx[44]];
    				validate_each_argument(each_value_1);
    				group_outros();
    				validate_each_keys(ctx, each_value_1, get_each_context_1, get_key);
    				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value_1, each_1_lookup, div0, outro_and_destroy_block, create_each_block_1, null, get_each_context_1);
    				check_outros();
    			}

    			if (!current || dirty[0] & /*pagesScale, pages*/ 12) {
    				set_style(div0, "transform", "scale(" + /*pagesScale*/ ctx[3][/*pIndex*/ ctx[44]] + ")");
    			}

    			if (dirty[0] & /*pages, selectedPageIndex*/ 36) {
    				toggle_class(div1, "shadow-outline", /*pIndex*/ ctx[44] === /*selectedPageIndex*/ ctx[5]);
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(pdfpage.$$.fragment, local);

    			for (let i = 0; i < each_value_1.length; i += 1) {
    				transition_in(each_blocks[i]);
    			}

    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(pdfpage.$$.fragment, local);

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				transition_out(each_blocks[i]);
    			}

    			current = false;
    		},
    		d: function destroy(detaching) {
    			if (detaching) detach_dev(div2);
    			destroy_component(pdfpage);

    			for (let i = 0; i < each_blocks.length; i += 1) {
    				each_blocks[i].d();
    			}

    			mounted = false;
    			run_all(dispose);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_each_block$1.name,
    		type: "each",
    		source: "(1153:6) {#each pages as page, pIndex (page)}",
    		ctx
    	});

    	return block;
    }

    function create_fragment$8(ctx) {
    	let tailwind;
    	let t0;
    	let div0;
    	let h1;
    	let t1;
    	let a0;
    	let t3;
    	let a1;
    	let t5;
    	let main;
    	let div3;
    	let script0;
    	let t7;
    	let input0;
    	let t8;
    	let input1;
    	let t9;
    	let label0;
    	let t11;
    	let div1;
    	let label1;
    	let img0;
    	let img0_src_value;
    	let t12;
    	let label2;
    	let img1;
    	let img1_src_value;
    	let t13;
    	let label3;
    	let img2;
    	let img2_src_value;
    	let t14;
    	let label4;
    	let img3;
    	let img3_src_value;
    	let t15;
    	let div2;
    	let img4;
    	let img4_src_value;
    	let t16;
    	let input2;
    	let t17;
    	let button0;
    	let t18_value = (/*saving*/ ctx[6] ? 'Saving' : 'Save') + "";
    	let t18;
    	let t19;
    	let style0;
    	let t21;
    	let script1;
    	let t23;
    	let div13;
    	let div12;
    	let div11;
    	let div5;
    	let div4;
    	let select0;
    	let option0;
    	let option1;
    	let option2;
    	let option3;
    	let t28;
    	let div7;
    	let div6;
    	let select1;
    	let option4;
    	let option5;
    	let option6;
    	let option7;
    	let option8;
    	let option9;
    	let option10;
    	let option11;
    	let option12;
    	let option13;
    	let option14;
    	let option15;
    	let option16;
    	let option17;
    	let option18;
    	let option19;
    	let option20;
    	let option21;
    	let option22;
    	let option23;
    	let option24;
    	let option25;
    	let option26;
    	let t52;
    	let div9;
    	let script2;
    	let t54;
    	let div8;
    	let input3;
    	let t55;
    	let style1;
    	let t57;
    	let div10;
    	let button1;
    	let i0;
    	let t58;
    	let button2;
    	let i1;
    	let t59;
    	let script3;
    	let t61;
    	let t62;
    	let current_block_type_index;
    	let if_block1;
    	let t63;
    	let ins;
    	let current;
    	let mounted;
    	let dispose;
    	tailwind = new Tailwind({ $$inline: true });
    	let if_block0 = /*addingDrawing*/ ctx[7] && create_if_block_4(ctx);
    	const if_block_creators = [create_if_block$1, create_else_block];
    	const if_blocks = [];

    	function select_block_type(ctx, dirty) {
    		if (/*pages*/ ctx[2].length) return 0;
    		return 1;
    	}

    	current_block_type_index = select_block_type(ctx);
    	if_block1 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);

    	const block = {
    		c: function create() {
    			create_component(tailwind.$$.fragment);
    			t0 = space();
    			div0 = element("div");
    			h1 = element("h1");
    			t1 = space();
    			a0 = element("a");
    			a0.textContent = "OffiDocs";
    			t3 = space();
    			a1 = element("a");
    			a1.textContent = "PDF Tools";
    			t5 = space();
    			main = element("main");
    			div3 = element("div");
    			script0 = element("script");
    			script0.textContent = "function gotohome() { \n\t\twindow.open(\"https://www.offidocs.com/\"); \n}\n\n\nfunction onLoadURLPress(urlname) {\n        //alert(\"onLoadURLPress \" + urlname );\n        var filenamex = Math.floor(Math.random() * 2000000);\n        filenamex = filenamex + \".pdf\";\n        var oReq = new XMLHttpRequest();\n        var ooo = \"https://www.offidocs.com/media/system/app/download.php?fileurl=\"+ encodeURIComponent(urlname)+\"&filename=\"+ filenamex;\n        console.log(ooo);\n        oReq.open(\"GET\", ooo, true);\n        oReq.responseType = \"arraybuffer\";\n\n        oReq.onload = function (oEvent) {\n\n                if ( oReq.status != 200 )\n                {\n                        console.log(\"Error\");\n                        return;\n                }\n                var arrayBuffer = oReq.response; // Note: not oReq.responseText\n                var new_file;\n                new_file = new File([arrayBuffer], filenamex, {type: \"application/pdf\"});\n                console.log(\"OK\");\n\n                console.log(new_file);\n\n                var type = \"drop\";\n                var event = new CustomEvent(\"CustomEvent\")\n                event.initCustomEvent(type, true, true, null)\n                //event.dataTransfer.files[0] = new_file;\n\n\t\tvar files = [];\n\t\tfiles[0] = new_file;\n\n                event.dataTransfer = {\n                        files\n                }\n\n                console.log(event);\n                console.log(\"fire event YYY\");\n                var node = window;\n\n                if (node.dispatchEvent) {\n                        node.dispatchEvent(event)\n                }\n                if (node.fireEvent) {\n                        node.fireEvent(\"on\" + type, event)\n                }\n        };\n\n        try {\n                oReq.send(null);\n        } catch(err) {\n                console.log(\"Error 2\");\n        }\n\n\n\tdocument.getElementById(\"homey\").style.display = \"block\";\n\tdocument.getElementById(\"pdftoolsy\").style.display = \"block\";\n}\n\nsetTimeout(function(){\n        var pdfurl = $_GET('pdfurl');\n        if ( pdfurl !== null ) {\n                onLoadURLPress(pdfurl);\n        }\n\n        //try {\n\t//\tvar userxxx = $_GET('v');\n\t//\tif ( userxxx == null ) {\n\t//\t\t(stpdwrapper = window.stpdwrapper || []).push({});\n\t//\t}\n\t//} catch(err) {}\n\n\tconsole.log(\"adxxxx\");\n}, 100);\n\nfunction $_GET(param) {\n        var vars = {};\n        window.location.href.replace( location.hash, '' ).replace(\n                /[?&]+([^=&]+)=?([^&]*)?/gi, // regexp\n                function( m, key, value ) { // callback\n                        vars[key] = value !== undefined ? value : '';\n                }\n        );\n\n        if ( param ) {\n                return vars[param] ? vars[param] : null;\n        }\n        return vars;\n}";
    			t7 = space();
    			input0 = element("input");
    			t8 = space();
    			input1 = element("input");
    			t9 = space();
    			label0 = element("label");
    			label0.textContent = "Upload PDF";
    			t11 = space();
    			div1 = element("div");
    			label1 = element("label");
    			img0 = element("img");
    			t12 = space();
    			label2 = element("label");
    			img1 = element("img");
    			t13 = space();
    			label3 = element("label");
    			img2 = element("img");
    			t14 = space();
    			label4 = element("label");
    			img3 = element("img");
    			t15 = space();
    			div2 = element("div");
    			img4 = element("img");
    			t16 = space();
    			input2 = element("input");
    			t17 = space();
    			button0 = element("button");
    			t18 = text(t18_value);
    			t19 = space();
    			style0 = element("style");
    			style0.textContent = ".btm-navbar-container .settings-container {\n  padding: 0 0 0 20px;\n  border-left: 2px solid #d0d0d0;\n  height: 45px;\n}\n\n.pull-left {\n  float: left;\n}\n\n.btm-navbar-container {\n  height: 55px;\n  padding: 5px 10px;\n  background: #f9fafb;\n  border-color: rgba(34,36,38,.15);\n  box-shadow: 0 2px 25px 0 rgb(34 36 38 / 5%) inset;\n  vertical-align: middle;\n  line-height: 44px;\n}\n\n@media only screen and (min-width: 1200px) {\n  .ui.container {\n    width: 100%!important;\n  }\n}\n\n@media only screen and (min-width: 1200px)  {\n  .ui.container {\n    width: 1127px;\n    margin-left: auto!important;\n    margin-right: auto!important;\n  }\n}\n\n.ui.container {\n  display: block;\n  max-width: 100%!important;\n}\n\n.btm-navbar-container .setting-group {\n  float: left;\n  margin-right: 10px;\n}\n\n.btm-navbar-container .settings-container {\n  padding: 0 0 0 20px;\n  border-left: 2px solid #d0d0d0;\n  height: 45px;\n}\n\n.pull-left {\n  float: left;\n}\n\n.btm-navbar-container .setting-margin.choice-margin {\n  margin-top: 3px;\n}\n\n.btm-navbar-container .setting-margin {\n  margin-right: 5px;\n}\n\n.ui.fluid.dropdown {\n  display: block;\n  width: 100%;\n  min-width: 0;\n}\n\n.ui.selection.dropdown {\n  cursor: pointer;\n  word-wrap: break-word;\n  line-height: 1em;\n  white-space: normal;\n  outline: 0;\n  transform: rotateZ(0);\n  min-width: 14em;\n  min-height: 2.71428571em;\n  background: #fff;\n  display: inline-block;\n  padding: 0.78571429em 2.1em 0.78571429em 1em;\n  color: rgba(0,0,0,.87);\n  box-shadow: none;\n  border: 1px solid rgba(34,36,38,.15);\n  border-radius: 0.28571429rem;\n  transition: box-shadow .1s ease,width .1s ease;\n}\n\n.ui.dropdown {\n  cursor: pointer;\n  position: relative;\n  display: inline-block;\n  outline: 0;\n  text-align: left;\n  transition: box-shadow .1s ease,width .1s ease;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.helvetica {\n  font-family: Helvetica,helvetica neue,Arial,sans-serif;\n}\n\n.ui.dropdown>.text {\n  display: inline-block;\n  transition: none;\n}\n\n.ui.fluid.dropdown>.dropdown.icon {\n  float: right;\n}\n\n.ui.selection.dropdown>.delete.icon, .ui.selection.dropdown>.dropdown.icon, .ui.selection.dropdown>.search.icon {\n  cursor: pointer;\n  position: absolute;\n  width: auto;\n  height: auto;\n  line-height: 1.21428571em;\n  top: 0.78571429em;\n  right: 1em;\n  z-index: 3;\n  margin: -0.78571429em;\n  padding: 0.91666667em;\n  opacity: .8;\n  transition: opacity .1s ease;\n}\n\n.ui.dropdown>.dropdown.icon {\n  font-family: Dropdown;\n  line-height: 1;\n  height: 1em;\n  width: 1.23em;\n  -webkit-backface-visibility: hidden;\n  backface-visibility: hidden;\n  font-weight: 400;\n  font-style: normal;\n  text-align: center;\n}\n\n.ui.dropdown>.dropdown.icon {\n  position: relative;\n  width: auto;\n  font-size: .85714286em;\n  margin: 0 0 0 1em;\n}\n\ni.icon, i.icons {\n  font-size: 1em;\n}\n\ni.icon {\n  display: inline-block;\n  opacity: 1;\n  margin: 0 0.25rem 0 0;\n  width: 1.18em;\n  height: 1em;\n  font-family: Icons;\n  font-style: normal;\n  font-weight: 400;\n  text-decoration: inherit;\n  text-align: center;\n  speak: none;\n  font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  -webkit-backface-visibility: hidden;\n  backface-visibility: hidden;\n}\n\n@media only screen and (min-width: 992px) {\n  .ui.selection.dropdown .menu {\n    max-height: 16.02857143rem;\n  }\n}\n\n@media only screen and (min-width: 768px) {\n  .ui.selection.dropdown .menu {\n    max-height: 10.68571429rem;\n  }\n}\n\n.ui.selection.dropdown .menu {\n  overflow-x: hidden;\n  overflow-y: auto;\n  -webkit-backface-visibility: hidden;\n  backface-visibility: hidden;\n  -webkit-overflow-scrolling: touch;\n  border-top-width: 0!important;\n  width: auto;\n  outline: 0;\n  margin: 0 -1px;\n  min-width: calc(100% + 2px);\n  width: calc(100% + 2px);\n  border-radius: 0 0 0.28571429rem 0.28571429rem;\n  box-shadow: 0 2px 3px 0 rgb(34 36 38 / 15%);\n  transition: opacity .1s ease;\n}\n\n.ui.dropdown .menu {\n  left: 0;\n}\n\n.ui.dropdown .menu {\n  cursor: auto;\n  position: absolute;\n  display: none;\n  outline: 0;\n  top: 100%;\n  min-width: -webkit-max-content;\n  min-width: -moz-max-content;\n  min-width: max-content;\n  margin: 0;\n  padding: 0 0;\n  background: #fff;\n  font-size: 1em;\n  text-shadow: none;\n  text-align: left;\n  box-shadow: 0 2px 3px 0 rgb(34 36 38 / 15%);\n  border: 1px solid rgba(34,36,38,.15);\n  border-radius: 0.28571429rem;\n  transition: opacity .1s ease;\n  z-index: 11;\n  will-change: transform,opacity;\n}\n\n.transition {\n  -webkit-animation-iteration-count: 1;\n  animation-iteration-count: 1;\n  -webkit-animation-duration: .3s;\n  animation-duration: .3s;\n  -webkit-animation-timing-function: ease;\n  animation-timing-function: ease;\n  -webkit-animation-fill-mode: both;\n  animation-fill-mode: both;\n}\n\n.ui.dropdown .menu .selected.item, .ui.dropdown.selected {\n  background: rgba(0,0,0,.03);\n  color: rgba(0,0,0,.95);\n}\n\n.ui.dropdown .menu .active.item {\n  background: 0 0;\n  font-weight: 700;\n  color: rgba(0,0,0,.95);\n  box-shadow: none;\n  z-index: 12;\n}\n\n.ui.selection.dropdown .menu>.item {\n  border-top: 1px solid #fafafa;\n  padding: 0.78571429rem 1.14285714rem!important;\n  white-space: normal;\n  word-wrap: normal;\n}\n\n.ui.dropdown .menu>.item:first-child {\n  border-top-width: 0;\n}\n\n.ui.dropdown .menu>.item {\n  position: relative;\n  cursor: pointer;\n  display: block;\n  border: none;\n  height: auto;\n  text-align: left;\n  border-top: none;\n  line-height: 1em;\n  color: rgba(0,0,0,.87);\n  padding: 0.78571429rem 1.14285714rem!important;\n  font-size: 1rem;\n  text-transform: none;\n  font-weight: 400;\n  box-shadow: none;\n  -webkit-touch-callout: none;\n}\n\n.ui.dropdown .menu>* {\n  white-space: nowrap;\n}\n\n.swatch-picker {\n  padding: 8px;\n  background: #fff;\n  display: inline-block;\n  cursor: pointer;\n  height: 38px;\n  box-shadow: none;\n  border: 1px solid rgba(34,36,38,.15);\n  border-radius: 0.28571429rem;\n  transition: box-shadow .1s ease,width .1s ease;\n}\n\n.swatch-picker .color-picker {\n  width: 20px;\n  height: 100%;\n  border: 1px solid rgba(34,36,38,.15);\n  border-radius: 0.28571429rem;\n  transition: box-shadow .1s ease,width .1s ease;\n}\n\n.ui.buttons:not(.basic):not(.inverted) {\n  box-shadow: none;\n}\n\n.btm-navbar-container .setting-group.ui.buttons {\n  margin-top: 6px;\n  margin-right: 5px;\n}\n\n.ui.buttons {\n  display: inline-flex;\n  flex-direction: row;\n  font-size: 0;\n  vertical-align: baseline;\n  margin: 0 0.25em 0 0;\n}\n\n.ui.buttons:not(.basic):not(.inverted)>.button, .ui.buttons>.ui.button:not(.basic):not(.inverted) {\n  box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgb(34 36 38 / 15%) inset;\n}\n\n.btm-navbar-container .setting-group .ui.icon.button {\n  font-size: 1.2rem;\n  padding: 0.5em;\n}\n\n.ui.buttons .button:first-child {\n  border-left: none;\n  margin-left: 0;\n  border-top-left-radius: 0.28571429rem;\n  border-bottom-left-radius: 0.28571429rem;\n}\n\n.ui.buttons .button {\n  flex: 1 0 auto;\n  margin: 0;\n  border-radius: 0;\n  margin: 0;\n}\n\n.ui.icon.button, .ui.icon.buttons .button {\n  padding: 0.78571429em 0.78571429em 0.78571429em;\n}\n\n.ui.button, .ui.buttons .button, .ui.buttons .or {\n  font-size: 1rem;\n}\n\n.ui.button {\n  cursor: pointer;\n  display: inline-block;\n  min-height: 1em;\n  outline: 0;\n  border: none;\n  vertical-align: baseline;\n  background: #e0e1e2 none;\n  color: rgba(0,0,0,.6);\n  font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;\n  margin: 0 0.25em 0 0;\n  padding: 0.78571429em 1.5em 0.78571429em;\n  text-transform: none;\n  text-shadow: none;\n  font-weight: 700;\n  line-height: 1em;\n  font-style: normal;\n  text-align: center;\n  text-decoration: none;\n  border-radius: 0.28571429rem;\n  box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgb(34 36 38 / 15%) inset;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;\n  will-change: '';\n  -webkit-tap-highlight-color: transparent;\n}\n\n[type=reset], [type=submit], button, html [type=button] {\n  -webkit-appearance: button;\n}\n\n.btm-navbar-container .ui.icon.button>.icon {\n  padding: 0;\n}\n\n.ui.icon.button>.icon, .ui.icon.buttons .button>.icon {\n  opacity: .9;\n  margin: 0!important;\n  vertical-align: top;\n}\n\n.ui.button>.icon:not(.button) {\n  height: 0.85714286em;\n  opacity: .8;\n  margin: 0 0.42857143em 0 -0.21428571em;\n  transition: opacity .1s ease;\n  vertical-align: '';\n  color: '';\n}\n\n.custom-select {\n  position: relative;\n  font-family: Arial;\n}\n\n.custom-select select {\n  height: 30px;\n}\n\n.select-selected {\n  background-color: #c6c3c3;\n}\n\n/* Style the arrow inside the select element: */\n\n.select-selected:after {\n  position: absolute;\n  content: \"\";\n  top: 14px;\n  right: 10px;\n  width: 0;\n  height: 0;\n  border: 6px solid transparent;\n  border-color: #fff transparent transparent transparent;\n}\n\n/* Point the arrow upwards when the select box is open (active): */\n\n.select-selected.select-arrow-active:after {\n  border-color: transparent transparent #fff transparent;\n  top: 7px;\n}\n\n/* style the items (options), including the selected item: */\n\n.select-items div,.select-selected {\n  color: #ffffff;\n  padding: 8px 16px;\n  border: 1px solid transparent;\n  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;\n  cursor: pointer;\n}\n\n/* Style items (options): */\n\n.select-items {\n  position: absolute;\n  background-color: #c6c3c3;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: 99;\n}\n\n/* Hide the items when the select box is closed: */\n\n.select-hide {\n  display: none;\n}\n\n.select-items div:hover, .same-as-selected {\n  background-color: rgba(0, 0, 0, 0.1);\n}";
    			t21 = space();
    			script1 = element("script");
    			script1.textContent = "var x, i, j, l, ll, selElmnt, a, b, c;\n/* Look for any elements with the class \"custom-select\": */\nx = document.getElementsByClassName(\"custom-select\");\nl = x.length;\nfor (i = 0; i < l; i++) {\n  selElmnt = x[i].getElementsByTagName(\"select\")[0];\n  ll = selElmnt.length;\n  /* For each element, create a new DIV that will act as the selected item: */\n  a = document.createElement(\"DIV\");\n  a.setAttribute(\"class\", \"select-selected\");\n  a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;\n  x[i].appendChild(a);\n  /* For each element, create a new DIV that will contain the option list: */\n  b = document.createElement(\"DIV\");\n  b.setAttribute(\"class\", \"select-items select-hide\");\n  for (j = 1; j < ll; j++) {\n    /* For each option in the original select element,\n    create a new DIV that will act as an option item: */\n    c = document.createElement(\"DIV\");\n    c.innerHTML = selElmnt.options[j].innerHTML;\n    c.addEventListener(\"click\", function(e) {\n        /* When an item is clicked, update the original select box,\n        and the selected item: */\n        var y, i, k, s, h, sl, yl;\n        s = this.parentNode.parentNode.getElementsByTagName(\"select\")[0];\n        sl = s.length;\n        h = this.parentNode.previousSibling;\n        for (i = 0; i < sl; i++) {\n          if (s.options[i].innerHTML == this.innerHTML) {\n            s.selectedIndex = i;\n            h.innerHTML = this.innerHTML;\n            y = this.parentNode.getElementsByClassName(\"same-as-selected\");\n            yl = y.length;\n            for (k = 0; k < yl; k++) {\n              y[k].removeAttribute(\"class\");\n            }\n            this.setAttribute(\"class\", \"same-as-selected\");\n            break;\n          }\n        }\n        h.click();\n    });\n    b.appendChild(c);\n  }\n  x[i].appendChild(b);\n  a.addEventListener(\"click\", function(e) {\n    /* When the select box is clicked, close any other select boxes,\n    and open/close the current select box: */\n    e.stopPropagation();\n    closeAllSelect(this);\n    this.nextSibling.classList.toggle(\"select-hide\");\n    this.classList.toggle(\"select-arrow-active\");\n  });\n}\n\nfunction closeAllSelect(elmnt) {\n  /* A function that will close all select boxes in the document,\n  except the current select box: */\n  var x, y, i, xl, yl, arrNo = [];\n  x = document.getElementsByClassName(\"select-items\");\n  y = document.getElementsByClassName(\"select-selected\");\n  xl = x.length;\n  yl = y.length;\n  for (i = 0; i < yl; i++) {\n    if (elmnt == y[i]) {\n      arrNo.push(i)\n    } else {\n      y[i].classList.remove(\"select-arrow-active\");\n    }\n  }\n  for (i = 0; i < xl; i++) {\n    if (arrNo.indexOf(i)) {\n      x[i].classList.add(\"select-hide\");\n    }\n  }\n}\n\n/* If the user clicks anywhere outside the select box,\nthen close all select boxes: */\ndocument.addEventListener(\"click\", closeAllSelect);";
    			t23 = space();
    			div13 = element("div");
    			div12 = element("div");
    			div11 = element("div");
    			div5 = element("div");
    			div4 = element("div");
    			select0 = element("select");
    			option0 = element("option");
    			option0.textContent = "Font-family:";
    			option1 = element("option");
    			option1.textContent = "Helvetica";
    			option2 = element("option");
    			option2.textContent = "Times-Roman";
    			option3 = element("option");
    			option3.textContent = "Courier";
    			t28 = space();
    			div7 = element("div");
    			div6 = element("div");
    			select1 = element("select");
    			option4 = element("option");
    			option4.textContent = "Font-size:";
    			option5 = element("option");
    			option5.textContent = "8";
    			option6 = element("option");
    			option6.textContent = "9";
    			option7 = element("option");
    			option7.textContent = "10";
    			option8 = element("option");
    			option8.textContent = "11";
    			option9 = element("option");
    			option9.textContent = "12";
    			option10 = element("option");
    			option10.textContent = "13";
    			option11 = element("option");
    			option11.textContent = "14";
    			option12 = element("option");
    			option12.textContent = "15";
    			option13 = element("option");
    			option13.textContent = "16";
    			option14 = element("option");
    			option14.textContent = "17";
    			option15 = element("option");
    			option15.textContent = "18";
    			option16 = element("option");
    			option16.textContent = "19";
    			option17 = element("option");
    			option17.textContent = "20";
    			option18 = element("option");
    			option18.textContent = "21";
    			option19 = element("option");
    			option19.textContent = "24";
    			option20 = element("option");
    			option20.textContent = "25";
    			option21 = element("option");
    			option21.textContent = "28";
    			option22 = element("option");
    			option22.textContent = "29";
    			option23 = element("option");
    			option23.textContent = "32";
    			option24 = element("option");
    			option24.textContent = "36";
    			option25 = element("option");
    			option25.textContent = "40";
    			option26 = element("option");
    			option26.textContent = "50";
    			t52 = space();
    			div9 = element("div");
    			script2 = element("script");
    			script2.textContent = "var colorPicker = document.getElementById(\"colorx\");\ncolorPicker.addEventListener(\"change\", watchColorPicker, false);\n\nvar colorxxy;\n\nfunction watchColorPicker(event) {\n  colorxxy = event.target.value;\n  //alert(colorxxy);\n}";
    			t54 = space();
    			div8 = element("div");
    			input3 = element("input");
    			t55 = space();
    			style1 = element("style");
    			style1.textContent = ".button {\n  border: none;\n  outline: none;\n  padding: 10px 16px;\n  background-color: #f1f1f1;\n  cursor: pointer;\n}\n\n.active, .button:hover {\n  background-color: #666;\n}";
    			t57 = space();
    			div10 = element("div");
    			button1 = element("button");
    			i0 = element("i");
    			t58 = space();
    			button2 = element("button");
    			i1 = element("i");
    			t59 = space();
    			script3 = element("script");
    			script3.textContent = "document.getElementById(\"boldx\").addEventListener(\"click\", function() {\n    if (document.getElementById(\"boldx\").className.indexOf(\"active\") !== -1)\n    {\n\tdocument.getElementById(\"boldx\").className = document.getElementById(\"boldx\").className.replace(\" active\", \"\");\n    }\n    else {\n\tdocument.getElementById(\"boldx\").className += \" active\";\n    }\n  });\n\ndocument.getElementById(\"italicx\").addEventListener(\"click\", function() {\n    if (document.getElementById(\"italicx\").className.indexOf(\"active\") !== -1)\n    {\n        document.getElementById(\"italicx\").className = document.getElementById(\"italicx\").className.replace(\" active\", \"\");\n    }\n    else {\n        document.getElementById(\"italicx\").className += \" active\";\n    }\n  });\n\n\n//document.getElementById(\"underlinex\").addEventListener(\"click\", function() {\n //   if (document.getElementById(\"underlinex\").className.indexOf(\"active\") !== -1)\n//    {\n //       document.getElementById(\"underlinex\").className = document.getElementById(\"underlinex\").className.replace(\" active\", \"\");\n//    }\n//    else {\n//        document.getElementById(\"underlinex\").className += \" active\";\n//    }\n//  });";
    			t61 = space();
    			if (if_block0) if_block0.c();
    			t62 = space();
    			if_block1.c();
    			t63 = space();
    			ins = element("ins");
    			set_style(h1, "font-size", "22px");
    			set_style(h1, "margin-top", "2px");
    			add_location(h1, file$6, 274, 0, 7354);
    			attr_dev(a0, "id", "homey");
    			attr_dev(a0, "class", "w-30 bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 md:px-4 mr-3 md:mr-4 rounded");
    			set_style(a0, "display", "none");
    			set_style(a0, "margin", "3px 0px 0px 10px");
    			set_style(a0, "float", "left");
    			attr_dev(a0, "href", "https://www.offidocs.com");
    			add_location(a0, file$6, 276, 0, 7407);
    			attr_dev(a1, "id", "pdftoolsy");
    			attr_dev(a1, "class", "w-30 bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 md:px-4 mr-3 md:mr-4 rounded");
    			set_style(a1, "display", "none");
    			set_style(a1, "margin", "3px 10px 0px 0px");
    			set_style(a1, "float", "right");
    			attr_dev(a1, "href", "https://pdf.offidocs.com");
    			add_location(a1, file$6, 277, 0, 7630);
    			set_style(div0, "position", "fixed");
    			set_style(div0, "z-index", "10");
    			set_style(div0, "text-align", "center");
    			set_style(div0, "width", "100%");
    			set_style(div0, "height", "60px");
    			set_style(div0, "color", "#fff");
    			set_style(div0, "background", "#0067b8", 1);
    			add_location(div0, file$6, 273, 0, 7218);
    			add_location(script0, file$6, 286, 1, 8151);
    			attr_dev(input0, "type", "file");
    			attr_dev(input0, "name", "pdf");
    			attr_dev(input0, "id", "pdf");
    			attr_dev(input0, "class", "hidden");
    			add_location(input0, file$6, 386, 4, 10917);
    			attr_dev(input1, "type", "file");
    			attr_dev(input1, "id", "image");
    			attr_dev(input1, "name", "image");
    			attr_dev(input1, "class", "hidden");
    			add_location(input1, file$6, 392, 4, 11032);
    			attr_dev(label0, "class", "whitespace-no-wrap bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 md:px-4 rounded mr-3 cursor-pointer md:mr-4");
    			attr_dev(label0, "for", "pdf");
    			add_location(label0, file$6, 398, 4, 11153);
    			if (!src_url_equal(img0.src, img0_src_value = "/public/addimage.png?v=01")) attr_dev(img0, "src", img0_src_value);
    			attr_dev(img0, "alt", "An icon for adding images");
    			add_location(img0, file$6, 413, 8, 11803);
    			set_style(label1, "height", "64px");
    			set_style(label1, "width", "64px");
    			attr_dev(label1, "class", "flex items-center justify-center h-full w-8 hover:bg-gray-500 cursor-pointer");
    			attr_dev(label1, "for", "image");
    			toggle_class(label1, "cursor-not-allowed", /*selectedPageIndex*/ ctx[5] < 0);
    			toggle_class(label1, "bg-gray-500", /*selectedPageIndex*/ ctx[5] < 0);
    			add_location(label1, file$6, 407, 6, 11523);
    			if (!src_url_equal(img1.src, img1_src_value = "/public/addtext.png?v=01")) attr_dev(img1, "src", img1_src_value);
    			attr_dev(img1, "alt", "An icon for adding text");
    			add_location(img1, file$6, 422, 8, 12208);
    			set_style(label2, "height", "64px");
    			set_style(label2, "width", "64px");
    			attr_dev(label2, "class", "flex items-center justify-center h-full w-8 hover:bg-gray-500 cursor-pointer");
    			attr_dev(label2, "for", "text");
    			toggle_class(label2, "cursor-not-allowed", /*selectedPageIndex*/ ctx[5] < 0);
    			toggle_class(label2, "bg-gray-500", /*selectedPageIndex*/ ctx[5] < 0);
    			add_location(label2, file$6, 415, 6, 11896);
    			if (!src_url_equal(img2.src, img2_src_value = "/public/adddraw.png?v=01")) attr_dev(img2, "src", img2_src_value);
    			attr_dev(img2, "alt", "An icon for adding drawing");
    			add_location(img2, file$6, 431, 8, 12601);
    			set_style(label3, "height", "64px");
    			set_style(label3, "width", "64px");
    			attr_dev(label3, "class", "flex items-center justify-center h-full w-8 hover:bg-gray-500 cursor-pointer");
    			attr_dev(label3, "for", "draw");
    			toggle_class(label3, "cursor-not-allowed", /*selectedPageIndex*/ ctx[5] < 0);
    			toggle_class(label3, "bg-gray-500", /*selectedPageIndex*/ ctx[5] < 0);
    			add_location(label3, file$6, 424, 6, 12298);
    			if (!src_url_equal(img3.src, img3_src_value = "/public/whiteout.png?v=01")) attr_dev(img3, "src", img3_src_value);
    			attr_dev(img3, "alt", "An icon for removing");
    			add_location(img3, file$6, 440, 8, 13002);
    			set_style(label4, "height", "64px");
    			set_style(label4, "width", "64px");
    			attr_dev(label4, "class", "flex items-center justify-center h-full w-8 hover:bg-gray-500 cursor-pointer");
    			attr_dev(label4, "for", "whiteout");
    			toggle_class(label4, "cursor-not-allowed", /*selectedPageIndex*/ ctx[5] < 0);
    			toggle_class(label4, "bg-gray-500", /*selectedPageIndex*/ ctx[5] < 0);
    			add_location(label4, file$6, 433, 6, 12694);
    			set_style(div1, "height", "70px");
    			set_style(div1, "margin-top", "2px");
    			set_style(div1, "background-color", "#edf2f7");
    			attr_dev(div1, "class", "relative mr-4 flex h-8 bg-gray-400 rounded-sm overflow-hidden md:mr-5");
    			add_location(div1, file$6, 404, 4, 11355);
    			if (!src_url_equal(img4.src, img4_src_value = "/public/edit.svg")) attr_dev(img4, "src", img4_src_value);
    			attr_dev(img4, "class", "mr-2");
    			attr_dev(img4, "alt", "a pen, edit pdf name");
    			add_location(img4, file$6, 444, 6, 13205);
    			attr_dev(input2, "placeholder", "Rename PDF");
    			attr_dev(input2, "type", "text");
    			attr_dev(input2, "class", "flex-grow bg-transparent");
    			add_location(input2, file$6, 445, 6, 13282);
    			set_style(div2, "max-width", "180px");
    			attr_dev(div2, "class", "justify-center mr-3 md:mr-4 w-full max-w-xs hidden md:flex");
    			add_location(div2, file$6, 443, 4, 13100);
    			attr_dev(button0, "class", "w-20 bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 md:px-4 mr-3 md:mr-4 rounded");
    			toggle_class(button0, "cursor-not-allowed", /*pages*/ ctx[2].length === 0 || /*saving*/ ctx[6] || !/*pdfFile*/ ctx[0]);
    			toggle_class(button0, "bg-blue-700", /*pages*/ ctx[2].length === 0 || /*saving*/ ctx[6] || !/*pdfFile*/ ctx[0]);
    			add_location(button0, file$6, 451, 4, 13430);
    			set_style(div3, "margin-top", "40px");
    			set_style(div3, "height", "70px");
    			attr_dev(div3, "class", "fixed z-10 top-0 left-0 right-0 h-12 flex justify-center items-center bg-gray-200 border-b border-gray-300");
    			add_location(div3, file$6, 283, 2, 7980);
    			add_location(style0, file$6, 461, 0, 13779);
    			add_location(script1, file$6, 926, 0, 23356);
    			option0.__value = "Helvetica";
    			option0.value = option0.__value;
    			add_location(option0, file$6, 1019, 40, 26574);
    			option1.__value = "Helvetica";
    			option1.value = option1.__value;
    			add_location(option1, file$6, 1020, 40, 26662);
    			option2.__value = "Times-Roman";
    			option2.value = option2.__value;
    			add_location(option2, file$6, 1021, 40, 26747);
    			option3.__value = "Courier";
    			option3.value = option3.__value;
    			add_location(option3, file$6, 1022, 40, 26836);
    			attr_dev(select0, "id", "familyx");
    			add_location(select0, file$6, 1018, 32, 26512);
    			attr_dev(div4, "class", "custom-select");
    			set_style(div4, "width", "150px");
    			add_location(div4, file$6, 1017, 3, 26431);
    			attr_dev(div5, "class", "setting-margin pull-left choice-margin");
    			add_location(div5, file$6, 1016, 2, 26375);
    			option4.__value = "13";
    			option4.value = option4.__value;
    			add_location(option4, file$6, 1030, 9, 27102);
    			option5.__value = "8";
    			option5.value = option5.__value;
    			add_location(option5, file$6, 1031, 9, 27150);
    			option6.__value = "9";
    			option6.value = option6.__value;
    			add_location(option6, file$6, 1031, 37, 27178);
    			option7.__value = "10";
    			option7.value = option7.__value;
    			add_location(option7, file$6, 1032, 5, 27212);
    			option8.__value = "11";
    			option8.value = option8.__value;
    			add_location(option8, file$6, 1032, 35, 27242);
    			option9.__value = "12";
    			option9.value = option9.__value;
    			add_location(option9, file$6, 1033, 5, 27278);
    			option10.__value = "13";
    			option10.value = option10.__value;
    			add_location(option10, file$6, 1033, 35, 27308);
    			option11.__value = "14";
    			option11.value = option11.__value;
    			add_location(option11, file$6, 1034, 40, 27379);
    			option12.__value = "15";
    			option12.value = option12.__value;
    			add_location(option12, file$6, 1034, 70, 27409);
    			option13.__value = "16";
    			option13.value = option13.__value;
    			add_location(option13, file$6, 1035, 40, 27480);
    			option14.__value = "17";
    			option14.value = option14.__value;
    			add_location(option14, file$6, 1035, 70, 27510);
    			option15.__value = "18";
    			option15.value = option15.__value;
    			add_location(option15, file$6, 1036, 40, 27581);
    			option16.__value = "19";
    			option16.value = option16.__value;
    			add_location(option16, file$6, 1036, 70, 27611);
    			option17.__value = "20";
    			option17.value = option17.__value;
    			add_location(option17, file$6, 1037, 40, 27682);
    			option18.__value = "21";
    			option18.value = option18.__value;
    			add_location(option18, file$6, 1037, 70, 27712);
    			option19.__value = "24";
    			option19.value = option19.__value;
    			add_location(option19, file$6, 1038, 40, 27783);
    			option20.__value = "25";
    			option20.value = option20.__value;
    			add_location(option20, file$6, 1038, 70, 27813);
    			option21.__value = "28";
    			option21.value = option21.__value;
    			add_location(option21, file$6, 1039, 40, 27884);
    			option22.__value = "29";
    			option22.value = option22.__value;
    			add_location(option22, file$6, 1039, 70, 27914);
    			option23.__value = "32";
    			option23.value = option23.__value;
    			add_location(option23, file$6, 1040, 40, 27985);
    			option24.__value = "36";
    			option24.value = option24.__value;
    			add_location(option24, file$6, 1040, 70, 28015);
    			option25.__value = "40";
    			option25.value = option25.__value;
    			add_location(option25, file$6, 1041, 40, 28086);
    			option26.__value = "50";
    			option26.value = option26.__value;
    			add_location(option26, file$6, 1041, 70, 28116);
    			attr_dev(select1, "id", "sizex");
    			add_location(select1, file$6, 1029, 6, 27073);
    			attr_dev(div6, "class", "custom-select");
    			set_style(div6, "width", "100px");
    			add_location(div6, file$6, 1028, 3, 27018);
    			attr_dev(div7, "class", "setting-margin pull-left choice-margin");
    			add_location(div7, file$6, 1027, 2, 26962);
    			add_location(script2, file$6, 1047, 0, 28238);
    			attr_dev(input3, "type", "color");
    			attr_dev(input3, "id", "colorx");
    			attr_dev(input3, "name", "head");
    			set_style(input3, "width", "27px");
    			input3.value = "#000000";
    			add_location(input3, file$6, 1061, 8, 28525);
    			set_style(div8, "margin-top", "3px");
    			add_location(div8, file$6, 1060, 2, 28486);
    			attr_dev(div9, "class", "setting-margin pull-left choice-margin");
    			add_location(div9, file$6, 1046, 2, 28185);
    			add_location(style1, file$6, 1065, 0, 28639);
    			attr_dev(i0, "aria-hidden", "true");
    			attr_dev(i0, "class", "fas fa-bold");
    			add_location(i0, file$6, 1077, 60, 28949);
    			attr_dev(button1, "id", "boldx");
    			attr_dev(button1, "class", "ui icon button text-format-btn");
    			add_location(button1, file$6, 1077, 2, 28891);
    			attr_dev(i1, "aria-hidden", "true");
    			attr_dev(i1, "class", "fas fa-italic");
    			add_location(i1, file$6, 1078, 62, 29067);
    			attr_dev(button2, "id", "italicx");
    			attr_dev(button2, "class", "ui icon button text-format-btn");
    			add_location(button2, file$6, 1078, 2, 29007);
    			attr_dev(div10, "id", "myDIV");
    			attr_dev(div10, "class", "ui buttons setting-group setting-margin");
    			add_location(div10, file$6, 1076, 1, 28824);
    			add_location(script3, file$6, 1083, 0, 29460);
    			add_location(div11, file$6, 1015, 1, 26367);
    			attr_dev(div12, "class", "pull-left settings-container");
    			add_location(div12, file$6, 1014, 2, 26323);
    			set_style(div13, "position", "fixed");
    			set_style(div13, "z-index", "10");
    			set_style(div13, "margin-top", "40px");
    			attr_dev(div13, "class", "ui container btm-navbar-container");
    			add_location(div13, file$6, 1013, 0, 26212);
    			attr_dev(main, "class", "flex flex-col items-center py-16 bg-gray-100 min-h-screen");
    			set_style(main, "background-color", "#c1d8f0");
    			add_location(main, file$6, 282, 0, 7870);
    			attr_dev(ins, "class", "stpdwrapper");
    			set_style(ins, "display", "inline-block");
    			attr_dev(ins, "data-tag-id", "7382");
    			add_location(ins, file$6, 1222, 0, 34461);
    		},
    		l: function claim(nodes) {
    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
    		},
    		m: function mount(target, anchor) {
    			mount_component(tailwind, target, anchor);
    			insert_dev(target, t0, anchor);
    			insert_dev(target, div0, anchor);
    			append_dev(div0, h1);
    			append_dev(div0, t1);
    			append_dev(div0, a0);
    			append_dev(div0, t3);
    			append_dev(div0, a1);
    			insert_dev(target, t5, anchor);
    			insert_dev(target, main, anchor);
    			append_dev(main, div3);
    			append_dev(div3, script0);
    			append_dev(div3, t7);
    			append_dev(div3, input0);
    			append_dev(div3, t8);
    			append_dev(div3, input1);
    			append_dev(div3, t9);
    			append_dev(div3, label0);
    			append_dev(div3, t11);
    			append_dev(div3, div1);
    			append_dev(div1, label1);
    			append_dev(label1, img0);
    			append_dev(div1, t12);
    			append_dev(div1, label2);
    			append_dev(label2, img1);
    			append_dev(div1, t13);
    			append_dev(div1, label3);
    			append_dev(label3, img2);
    			append_dev(div1, t14);
    			append_dev(div1, label4);
    			append_dev(label4, img3);
    			append_dev(div3, t15);
    			append_dev(div3, div2);
    			append_dev(div2, img4);
    			append_dev(div2, t16);
    			append_dev(div2, input2);
    			set_input_value(input2, /*pdfName*/ ctx[1]);
    			append_dev(div3, t17);
    			append_dev(div3, button0);
    			append_dev(button0, t18);
    			append_dev(main, t19);
    			append_dev(main, style0);
    			append_dev(main, t21);
    			append_dev(main, script1);
    			append_dev(main, t23);
    			append_dev(main, div13);
    			append_dev(div13, div12);
    			append_dev(div12, div11);
    			append_dev(div11, div5);
    			append_dev(div5, div4);
    			append_dev(div4, select0);
    			append_dev(select0, option0);
    			append_dev(select0, option1);
    			append_dev(select0, option2);
    			append_dev(select0, option3);
    			append_dev(div11, t28);
    			append_dev(div11, div7);
    			append_dev(div7, div6);
    			append_dev(div6, select1);
    			append_dev(select1, option4);
    			append_dev(select1, option5);
    			append_dev(select1, option6);
    			append_dev(select1, option7);
    			append_dev(select1, option8);
    			append_dev(select1, option9);
    			append_dev(select1, option10);
    			append_dev(select1, option11);
    			append_dev(select1, option12);
    			append_dev(select1, option13);
    			append_dev(select1, option14);
    			append_dev(select1, option15);
    			append_dev(select1, option16);
    			append_dev(select1, option17);
    			append_dev(select1, option18);
    			append_dev(select1, option19);
    			append_dev(select1, option20);
    			append_dev(select1, option21);
    			append_dev(select1, option22);
    			append_dev(select1, option23);
    			append_dev(select1, option24);
    			append_dev(select1, option25);
    			append_dev(select1, option26);
    			append_dev(div11, t52);
    			append_dev(div11, div9);
    			append_dev(div9, script2);
    			append_dev(div9, t54);
    			append_dev(div9, div8);
    			append_dev(div8, input3);
    			append_dev(div11, t55);
    			append_dev(div11, style1);
    			append_dev(div11, t57);
    			append_dev(div11, div10);
    			append_dev(div10, button1);
    			append_dev(button1, i0);
    			append_dev(div10, t58);
    			append_dev(div10, button2);
    			append_dev(button2, i1);
    			append_dev(div11, t59);
    			append_dev(div11, script3);
    			append_dev(main, t61);
    			if (if_block0) if_block0.m(main, null);
    			append_dev(main, t62);
    			if_blocks[current_block_type_index].m(main, null);
    			insert_dev(target, t63, anchor);
    			insert_dev(target, ins, anchor);
    			current = true;

    			if (!mounted) {
    				dispose = [
    					listen_dev(window, "dragenter", prevent_default(/*dragenter_handler*/ ctx[20]), false, true, false),
    					listen_dev(window, "dragover", prevent_default(/*dragover_handler*/ ctx[21]), false, true, false),
    					listen_dev(window, "drop", prevent_default(/*onUploadPDF*/ ctx[8]), false, true, false),
    					listen_dev(input0, "change", /*onUploadPDF*/ ctx[8], false, false, false),
    					listen_dev(input1, "change", /*onUploadImage*/ ctx[9], false, false, false),
    					listen_dev(label2, "click", /*onAddTextField*/ ctx[10], false, false, false),
    					listen_dev(label3, "click", /*onAddDrawing*/ ctx[11], false, false, false),
    					listen_dev(label4, "click", /*onAddWhiteout*/ ctx[19], false, false, false),
    					listen_dev(input2, "input", /*input2_input_handler*/ ctx[22]),
    					listen_dev(button0, "click", /*savePDF*/ ctx[18], false, false, false)
    				];

    				mounted = true;
    			}
    		},
    		p: function update(ctx, dirty) {
    			if (dirty[0] & /*selectedPageIndex*/ 32) {
    				toggle_class(label1, "cursor-not-allowed", /*selectedPageIndex*/ ctx[5] < 0);
    			}

    			if (dirty[0] & /*selectedPageIndex*/ 32) {
    				toggle_class(label1, "bg-gray-500", /*selectedPageIndex*/ ctx[5] < 0);
    			}

    			if (dirty[0] & /*selectedPageIndex*/ 32) {
    				toggle_class(label2, "cursor-not-allowed", /*selectedPageIndex*/ ctx[5] < 0);
    			}

    			if (dirty[0] & /*selectedPageIndex*/ 32) {
    				toggle_class(label2, "bg-gray-500", /*selectedPageIndex*/ ctx[5] < 0);
    			}

    			if (dirty[0] & /*selectedPageIndex*/ 32) {
    				toggle_class(label3, "cursor-not-allowed", /*selectedPageIndex*/ ctx[5] < 0);
    			}

    			if (dirty[0] & /*selectedPageIndex*/ 32) {
    				toggle_class(label3, "bg-gray-500", /*selectedPageIndex*/ ctx[5] < 0);
    			}

    			if (dirty[0] & /*selectedPageIndex*/ 32) {
    				toggle_class(label4, "cursor-not-allowed", /*selectedPageIndex*/ ctx[5] < 0);
    			}

    			if (dirty[0] & /*selectedPageIndex*/ 32) {
    				toggle_class(label4, "bg-gray-500", /*selectedPageIndex*/ ctx[5] < 0);
    			}

    			if (dirty[0] & /*pdfName*/ 2 && input2.value !== /*pdfName*/ ctx[1]) {
    				set_input_value(input2, /*pdfName*/ ctx[1]);
    			}

    			if ((!current || dirty[0] & /*saving*/ 64) && t18_value !== (t18_value = (/*saving*/ ctx[6] ? 'Saving' : 'Save') + "")) set_data_dev(t18, t18_value);

    			if (dirty[0] & /*pages, saving, pdfFile*/ 69) {
    				toggle_class(button0, "cursor-not-allowed", /*pages*/ ctx[2].length === 0 || /*saving*/ ctx[6] || !/*pdfFile*/ ctx[0]);
    			}

    			if (dirty[0] & /*pages, saving, pdfFile*/ 69) {
    				toggle_class(button0, "bg-blue-700", /*pages*/ ctx[2].length === 0 || /*saving*/ ctx[6] || !/*pdfFile*/ ctx[0]);
    			}

    			if (/*addingDrawing*/ ctx[7]) {
    				if (if_block0) {
    					if_block0.p(ctx, dirty);

    					if (dirty[0] & /*addingDrawing*/ 128) {
    						transition_in(if_block0, 1);
    					}
    				} else {
    					if_block0 = create_if_block_4(ctx);
    					if_block0.c();
    					transition_in(if_block0, 1);
    					if_block0.m(main, t62);
    				}
    			} else if (if_block0) {
    				group_outros();

    				transition_out(if_block0, 1, 1, () => {
    					if_block0 = null;
    				});

    				check_outros();
    			}

    			let previous_block_index = current_block_type_index;
    			current_block_type_index = select_block_type(ctx);

    			if (current_block_type_index === previous_block_index) {
    				if_blocks[current_block_type_index].p(ctx, dirty);
    			} else {
    				group_outros();

    				transition_out(if_blocks[previous_block_index], 1, 1, () => {
    					if_blocks[previous_block_index] = null;
    				});

    				check_outros();
    				if_block1 = if_blocks[current_block_type_index];

    				if (!if_block1) {
    					if_block1 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
    					if_block1.c();
    				} else {
    					if_block1.p(ctx, dirty);
    				}

    				transition_in(if_block1, 1);
    				if_block1.m(main, null);
    			}
    		},
    		i: function intro(local) {
    			if (current) return;
    			transition_in(tailwind.$$.fragment, local);
    			transition_in(if_block0);
    			transition_in(if_block1);
    			current = true;
    		},
    		o: function outro(local) {
    			transition_out(tailwind.$$.fragment, local);
    			transition_out(if_block0);
    			transition_out(if_block1);
    			current = false;
    		},
    		d: function destroy(detaching) {
    			destroy_component(tailwind, detaching);
    			if (detaching) detach_dev(t0);
    			if (detaching) detach_dev(div0);
    			if (detaching) detach_dev(t5);
    			if (detaching) detach_dev(main);
    			if (if_block0) if_block0.d();
    			if_blocks[current_block_type_index].d();
    			if (detaching) detach_dev(t63);
    			if (detaching) detach_dev(ins);
    			mounted = false;
    			run_all(dispose);
    		}
    	};

    	dispatch_dev("SvelteRegisterBlock", {
    		block,
    		id: create_fragment$8.name,
    		type: "component",
    		source: "",
    		ctx
    	});

    	return block;
    }

    function instance$8($$self, $$props, $$invalidate) {
    	let { $$slots: slots = {}, $$scope } = $$props;
    	validate_slots('App', slots, []);
    	const genID = ggID();
    	let pdfFile;
    	let pdfName = "";
    	let pages = [];
    	let pagesScale = [];
    	let allObjects = [];
    	let currentFont = "Times-Roman";
    	let focusId = null;
    	let selectedPageIndex = -1;
    	let saving = false;
    	let addingDrawing = false;

    	// for test purpose
    	onMount(async () => {
    		try {
    			const res = await fetch("/public/pdfblank.pdf");
    			const pdfBlob = await res.blob();
    			await addPDF(pdfBlob);
    			$$invalidate(5, selectedPageIndex = 0);

    			setTimeout(
    				() => {
    					fetchFont(currentFont);
    					prepareAssets();
    				},
    				5000
    			);
    		} catch(e) {
    			console.log(e); // const imgBlob = await (await fetch("/test.jpg")).blob();
    		}
    	});

    	async function onUploadPDF(e) {
    		console.log("onUploadPDF");
    		console.log(e);
    		const files = e.target.files || e.dataTransfer && e.dataTransfer.files;
    		console.log("FILES");
    		console.log(files);
    		const file = files[0] || files['new_file'];
    		console.log("FILE");
    		console.log(file);
    		if (!file || file.type !== "application/pdf") return;
    		$$invalidate(5, selectedPageIndex = -1);

    		try {
    			console.log("AddingPDF");
    			await addPDF(file);
    			$$invalidate(5, selectedPageIndex = 0);
    		} catch(e) {
    			console.log("Error");
    			console.log(e);
    		}
    	}

    	async function addPDF(file) {
    		try {
    			const pdf = await readAsPDF(file);
    			$$invalidate(1, pdfName = file.name);
    			$$invalidate(0, pdfFile = file);
    			const numPages = pdf.numPages;
    			$$invalidate(2, pages = Array(numPages).fill().map((_, i) => pdf.getPage(i + 1)));
    			$$invalidate(4, allObjects = pages.map(() => []));
    			$$invalidate(3, pagesScale = Array(numPages).fill(1));
    		} catch(e) {
    			console.log("Failed to add pdf.");
    			throw e;
    		}
    	}

    	async function onUploadImage(e) {
    		const file = e.target.files[0];

    		if (file && selectedPageIndex >= 0) {
    			addImage(file);
    		}

    		e.target.value = null;
    	}

    	async function addImage(file) {
    		try {
    			// get dataURL to prevent canvas from tainted
    			const url = await readAsDataURL(file);

    			const img = await readAsImage(url);
    			const id = genID();
    			const { width, height } = img;

    			const object = {
    				id,
    				type: "image",
    				width,
    				height,
    				x: 0,
    				y: 0,
    				payload: img,
    				file
    			};

    			$$invalidate(4, allObjects = allObjects.map((objects, pIndex) => pIndex === selectedPageIndex
    			? [...objects, object]
    			: objects));
    		} catch(e) {
    			console.log(`Fail to add image.`, e);
    		}
    	}

    	function onAddTextField() {
    		if (selectedPageIndex >= 0) {
    			addTextField();
    		}
    	}

    	function addTextField(text = "New Text Field") {
    		var sizex = document.getElementById("sizex").value;
    		var familyx = document.getElementById("familyx").value;
    		colortt = document.getElementById("colorx").value;

    		//alert(sizex);
    		//alert(familyx);
    		//alert(colortt);
    		var isbold = "normal";

    		var isitalic = "normal";
    		var idunderline = "unset";

    		if (document.getElementById("boldx").className.indexOf("active") !== -1) {
    			isbold = "bold";
    		}

    		if (document.getElementById("italicx").className.indexOf("active") !== -1) {
    			isitalic = "italic";
    		}

    		//if (document.getElementById("underlinex").className.indexOf("active") !== -1)   { idunderline = "underline"; }
    		//alert(isbold);
    		const id = genID();

    		//fetchFont(currentFont);
    		const object = {
    			id,
    			text,
    			type: "text",
    			size: sizex,
    			color: colortt,
    			bold: isbold,
    			italic: isitalic,
    			underline: idunderline,
    			width: 0, // recalculate after editing
    			lineHeight: 1.8,
    			fontFamily: familyx,
    			x: 20,
    			y: 20
    		};

    		$$invalidate(4, allObjects = allObjects.map((objects, pIndex) => pIndex === selectedPageIndex
    		? [...objects, object]
    		: objects));
    	}

    	function onAddDrawing() {
    		if (selectedPageIndex >= 0) {
    			$$invalidate(7, addingDrawing = true);
    		}
    	}

    	function addDrawing(originWidth, originHeight, path, scale = 1) {
    		const id = genID();

    		const object = {
    			id,
    			path,
    			type: "drawing",
    			x: 0,
    			y: 0,
    			originWidth,
    			originHeight,
    			width: originWidth * scale,
    			scale
    		};

    		$$invalidate(4, allObjects = allObjects.map((objects, pIndex) => pIndex === selectedPageIndex
    		? [...objects, object]
    		: objects));
    	}

    	function selectFontFamily(event) {
    		const name = event.detail.name;
    		fetchFont(name);
    		currentFont = name;
    	}

    	function selectPage(index) {
    		$$invalidate(5, selectedPageIndex = index);
    	}

    	function updateObject(objectId, payload) {
    		$$invalidate(4, allObjects = allObjects.map((objects, pIndex) => pIndex == selectedPageIndex
    		? objects.map(object => object.id === objectId
    			? { ...object, ...payload }
    			: object)
    		: objects));
    	}

    	function deleteObject(objectId) {
    		$$invalidate(4, allObjects = allObjects.map((objects, pIndex) => pIndex == selectedPageIndex
    		? objects.filter(object => object.id !== objectId)
    		: objects));
    	}

    	function onMeasure(scale, i) {
    		$$invalidate(3, pagesScale[i] = scale, pagesScale);
    	}

    	// FIXME: Should wait all objects finish their async work
    	async function savePDF() {
    		if (!pdfFile || saving || !pages.length) return;
    		$$invalidate(6, saving = true);

    		try {
    			await save(pdfFile, allObjects, pdfName, pagesScale);
    		} catch(e) {
    			console.log(e);
    		} finally {
    			$$invalidate(6, saving = false);
    		}
    	}

    	async function onAddWhiteout(e) {
    		const file = "/public/borrado.png";

    		if (selectedPageIndex >= 0) {
    			addImageUrlix(file);
    		}

    		e.target.value = null;
    	}

    	async function addImageUrlix(urlx) {
    		try {
    			// get dataURL to prevent canvas from tainted
    			let response = await fetch(urlx);

    			let data = await response.blob();
    			let metadata = { type: 'image/png' };
    			let file = new File([data], "/public/whiteout.png", metadata);
    			const url = await readAsDataURL(file);
    			const img = await readAsImage(url);
    			const id = genID();
    			const { width, height } = img;

    			const object = {
    				id,
    				type: "image",
    				width,
    				height,
    				x: 0,
    				y: 0,
    				payload: img,
    				file
    			};

    			$$invalidate(4, allObjects = allObjects.map((objects, pIndex) => pIndex === selectedPageIndex
    			? [...objects, object]
    			: objects));
    		} catch(e) {
    			console.log(`Fail to add image.`, e);
    		}
    	}

    	const writable_props = [];

    	Object.keys($$props).forEach(key => {
    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1.warn(`<App> was created with unknown prop '${key}'`);
    	});

    	function dragenter_handler(event) {
    		bubble.call(this, $$self, event);
    	}

    	function dragover_handler(event) {
    		bubble.call(this, $$self, event);
    	}

    	function input2_input_handler() {
    		pdfName = this.value;
    		$$invalidate(1, pdfName);
    	}

    	const finish_handler = e => {
    		const { originWidth, originHeight, path } = e.detail;
    		let scale = 1;

    		if (originWidth > 500) {
    			scale = 500 / originWidth;
    		}

    		addDrawing(originWidth, originHeight, path, scale);
    		$$invalidate(7, addingDrawing = false);
    	};

    	const cancel_handler = () => $$invalidate(7, addingDrawing = false);

    	function input_input_handler() {
    		pdfName = this.value;
    		$$invalidate(1, pdfName);
    	}

    	const measure_handler = (pIndex, e) => onMeasure(e.detail.scale, pIndex);
    	const update_handler = (object, e) => updateObject(object.id, e.detail);
    	const delete_handler = object => deleteObject(object.id);
    	const update_handler_1 = (object, e) => updateObject(object.id, e.detail);
    	const delete_handler_1 = object => deleteObject(object.id);
    	const update_handler_2 = (object, e) => updateObject(object.id, e.detail);
    	const delete_handler_2 = object => deleteObject(object.id);
    	const mousedown_handler = pIndex => selectPage(pIndex);
    	const touchstart_handler = pIndex => selectPage(pIndex);

    	$$self.$capture_state = () => ({
    		onMount,
    		fly,
    		Tailwind,
    		PDFPage,
    		Image: Image$1,
    		Text,
    		Drawing,
    		DrawingCanvas,
    		prepareAssets,
    		fetchFont,
    		readAsArrayBuffer,
    		readAsImage,
    		readAsPDF,
    		readAsDataURL,
    		ggID,
    		save,
    		genID,
    		pdfFile,
    		pdfName,
    		pages,
    		pagesScale,
    		allObjects,
    		currentFont,
    		focusId,
    		selectedPageIndex,
    		saving,
    		addingDrawing,
    		onUploadPDF,
    		addPDF,
    		onUploadImage,
    		addImage,
    		onAddTextField,
    		addTextField,
    		onAddDrawing,
    		addDrawing,
    		selectFontFamily,
    		selectPage,
    		updateObject,
    		deleteObject,
    		onMeasure,
    		savePDF,
    		onAddWhiteout,
    		addImageUrlix
    	});

    	$$self.$inject_state = $$props => {
    		if ('pdfFile' in $$props) $$invalidate(0, pdfFile = $$props.pdfFile);
    		if ('pdfName' in $$props) $$invalidate(1, pdfName = $$props.pdfName);
    		if ('pages' in $$props) $$invalidate(2, pages = $$props.pages);
    		if ('pagesScale' in $$props) $$invalidate(3, pagesScale = $$props.pagesScale);
    		if ('allObjects' in $$props) $$invalidate(4, allObjects = $$props.allObjects);
    		if ('currentFont' in $$props) currentFont = $$props.currentFont;
    		if ('focusId' in $$props) focusId = $$props.focusId;
    		if ('selectedPageIndex' in $$props) $$invalidate(5, selectedPageIndex = $$props.selectedPageIndex);
    		if ('saving' in $$props) $$invalidate(6, saving = $$props.saving);
    		if ('addingDrawing' in $$props) $$invalidate(7, addingDrawing = $$props.addingDrawing);
    	};

    	if ($$props && "$$inject" in $$props) {
    		$$self.$inject_state($$props.$$inject);
    	}

    	return [
    		pdfFile,
    		pdfName,
    		pages,
    		pagesScale,
    		allObjects,
    		selectedPageIndex,
    		saving,
    		addingDrawing,
    		onUploadPDF,
    		onUploadImage,
    		onAddTextField,
    		onAddDrawing,
    		addDrawing,
    		selectFontFamily,
    		selectPage,
    		updateObject,
    		deleteObject,
    		onMeasure,
    		savePDF,
    		onAddWhiteout,
    		dragenter_handler,
    		dragover_handler,
    		input2_input_handler,
    		finish_handler,
    		cancel_handler,
    		input_input_handler,
    		measure_handler,
    		update_handler,
    		delete_handler,
    		update_handler_1,
    		delete_handler_1,
    		update_handler_2,
    		delete_handler_2,
    		mousedown_handler,
    		touchstart_handler
    	];
    }

    class App extends SvelteComponentDev {
    	constructor(options) {
    		super(options);
    		init(this, options, instance$8, create_fragment$8, safe_not_equal, {}, null, [-1, -1]);

    		dispatch_dev("SvelteRegisterComponent", {
    			component: this,
    			tagName: "App",
    			options,
    			id: create_fragment$8.name
    		});
    	}
    }

    getAsset('pdfjsLib');
    const app = new App({
      target: document.body,
    });

    return app;

}());
//# sourceMappingURL=bundle.js.map