@peteai/presentation-editor 0.0.6 → 0.0.7

package/dist/components/editor/editor.svelte.js

@@ -0,0 +1,1167 @@
+import uniqid from 'uniqid';
+import { getContext, setContext, tick } from 'svelte';
+import { defaultFonts } from './fonts.js';
+import { cognitionImages, cognitionPages } from './cognition-pages.js';
+import { cognitionPageToJson } from './utils.js';
+import { calculateBoundingBox, calculateImageCover, checkPolygonsIntersect, getRotatedCorners, calculateGroupBoundingBox, calculateGroupRotatedBoundingBox, calculateRelativeRects, calculateNewPosition, degToRad, rotatePoint, } from './layers/utils.js';
+import createEditor from './layers/types/text/editor/createEditor.js';
+import { extensions } from './layers/types/text/extensions.js';
+import { SvelteSet } from 'svelte/reactivity';
+export class Editor {
+    mode = 'multiple';
+    fonts = defaultFonts;
+    images = $state(cognitionImages);
+    pages = $state(cognitionPages.map(cognitionPageToJson)); // getPages()
+    width = 1920;
+    height = 1080;
+    zoom = $state(0.4);
+    generateId = () => uniqid();
+    loadFont = async (family) => {
+        const font = this.fonts[family];
+        if (!font)
+            return;
+        const WebFont = await import('webfontloader');
+        return new Promise((resolve, reject) => {
+            WebFont.load({
+                [font.type]: { families: [family] },
+                fontactive: () => resolve(null),
+                fontinactive: reject,
+            });
+        });
+    };
+    searchFonts = (q, limit) => {
+        const terms = q
+            .trim()
+            .split(/\W/g)
+            .map((term) => term.toLowerCase());
+        return Object.keys(this.fonts)
+            .filter((family) => terms.some((term) => ~family.toLowerCase().indexOf(term)))
+            .slice(0, limit);
+    };
+    onImageUpload;
+    onUpdate;
+    activeSidebarTab = $state(null);
+    activeSidebarPopup = $state(null);
+    toggleActiveSidebarTab(tab) {
+        this.activeSidebarTab = !this.activeSidebarPopup && this.activeSidebarTab === tab ? null : tab;
+        if (this.activeSidebarTab) {
+            this.activeSidebarPopup = null;
+        }
+    }
+    toggleActiveSidebarPopup(popup) {
+        this.activeSidebarPopup = this.activeSidebarPopup === popup ? null : popup;
+    }
+    zoomSnapping = $state(null);
+    findPage(pageId) {
+        return this.pages.find((p) => p.id === pageId);
+    }
+    getRootLayers(page) {
+        return page.layers.filter((l) => l.type === 'group' || !l.groupId);
+    }
+    findLayer(page, layerId) {
+        return page.layers.find((l) => l.id === layerId);
+    }
+    findGroupChildren(page, groupId) {
+        return page.layers
+            .filter((l) => l.type !== 'group')
+            .filter((l) => l.groupId === groupId)
+            .toSorted((a, b) => a.sortOrder - b.sortOrder);
+    }
+    /**
+     * Finds root layers in a page based on their IDs.
+     *
+     * @param page The page to search for layers.
+     * @param layerIds The IDs of the layers to find. Can be a single ID or an array of IDs.
+     * @returns An array of layers that match the provided IDs.
+     */
+    findRootLayers(page, layerIds) {
+        // Normalize the input to ensure it's always an array of IDs
+        const ids = Array.isArray(layerIds) ? layerIds : [layerIds];
+        // Filter the page's layers to only include those with IDs in the provided list
+        return this.getRootLayers(page).filter((l) => ids.includes(l.id));
+    }
+    sortedPages = $derived(this.pages.toSorted((a, b) => a.sortOrder - b.sortOrder));
+    activePage = $state();
+    rootLayers = $derived(this.activePage.layers
+        .filter((l) => l.type === 'group' || !l.groupId)
+        .toSorted((a, b) => a.sortOrder - b.sortOrder));
+    activeSelection = $state({ type: 'empty' });
+    activeGroupAndChild = $derived.by(() => {
+        if (this.activeSelection.type === 'child-layer') {
+            const childLayer = this.findLayer(this.activePage, this.activeSelection.childId);
+            if (!childLayer)
+                return;
+            if (childLayer.type === 'group' || !childLayer.groupId)
+                return;
+            const groupLayer = this.findLayer(this.activePage, childLayer.groupId);
+            if (!groupLayer)
+                return;
+            if (groupLayer.type !== 'group')
+                return;
+            return { groupLayer, childLayer };
+        }
+    });
+    activeLayers = $derived.by(() => {
+        if (this.activeSelection.type === 'root-layers') {
+            const layerIds = this.activeSelection.layerIds;
+            return this.rootLayers.filter((l) => layerIds.has(l.id));
+        }
+        else if (this.activeSelection.type === 'child-layer' && this.activeGroupAndChild) {
+            return [this.activeGroupAndChild.groupLayer];
+        }
+        return [];
+    });
+    selectedLayers = $derived.by(() => {
+        if (this.activeSelection.type === 'root-layers') {
+            const layerIds = this.activeSelection.layerIds;
+            return this.rootLayers.filter((l) => layerIds.has(l.id));
+        }
+        else if (this.activeSelection.type === 'child-layer' && this.activeGroupAndChild) {
+            return [this.activeGroupAndChild.childLayer];
+        }
+        return [];
+    });
+    selectedLayersNotLocked = $derived(this.selectedLayers.filter((layer) => !layer.locked));
+    selectedSimpleLayersNotLocked = $derived(this.selectedLayersNotLocked.flatMap((l) => l.type === 'group' ? this.findGroupChildren(this.activePage, l.id) : l));
+    activeGroupRotate = $state(0);
+    pageSelected = $state(false);
+    clipboard = null;
+    htmlEditor = createEditor({
+        extensions,
+        injectCSS: false,
+        editorProps: { attributes: { class: 'whitespace-pre-wrap focus:outline-none' } },
+    });
+    activeAction = $state(null);
+    historyActions = $state([]);
+    historyIndex = $state(-1);
+    dragged = $state();
+    fileDragged = $state(false);
+    constructor(options = {}) {
+        if (options.mode === 'single') {
+            const { page, ...rest } = options;
+            Object.assign(this, { ...rest });
+            if (page) {
+                Object.assign(this, { pages: [page] });
+            }
+        }
+        else {
+            Object.assign(this, options);
+        }
+        if (!this.pages.length) {
+            this.addPage();
+        }
+        this.activePage = this.pages[0];
+        setEditorContext(this);
+    }
+    buildEmptyPage(sortOrder = 1) {
+        return {
+            id: this.generateId(),
+            sortOrder,
+            locked: false,
+            backgroundColor: null,
+            backgroundImage: null,
+            backgroundLocked: false,
+            layers: [],
+        };
+    }
+    addPage({ page, index } = {}) {
+        if (this.mode !== 'multiple')
+            return false;
+        index ??= this.sortedPages.findIndex((l) => l.id === this.activePage.id) + 1;
+        console.log('index', index);
+        if (!page) {
+            page = this.buildEmptyPage();
+            const inheritedPage = this.sortedPages[index > 0 ? index - 1 : 0];
+            if (inheritedPage) {
+                Object.assign(page, { backgroundColor: inheritedPage.backgroundColor });
+            }
+        }
+        const prevPage = this.sortedPages[index - 1];
+        const nextPage = this.sortedPages[index];
+        if (!prevPage && !nextPage)
+            return false;
+        const sortOrder = nextPage && prevPage
+            ? (prevPage.sortOrder + nextPage.sortOrder) / 2
+            : prevPage
+                ? prevPage.sortOrder + 1
+                : nextPage.sortOrder - 1;
+        return this.historyPush({ type: 'pageAdd', page: { ...page, sortOrder } });
+    }
+    removePage(pageId) {
+        if (this.mode !== 'multiple')
+            return false;
+        const page = this.findPage(pageId);
+        if (!page || page.locked)
+            return false;
+        this.historyPush({ type: 'pageRemove', page });
+    }
+    copyPage(pageId) {
+        const page = this.findPage(pageId);
+        if (!page)
+            return;
+        this.clipboard = $state.snapshot(page);
+    }
+    togglePageLocked(pageId) {
+        if (this.mode !== 'multiple')
+            return false;
+        const page = this.findPage(pageId);
+        if (!page)
+            return false;
+        return this.historyPush({
+            type: 'pageUpdate',
+            pageId,
+            undo: { locked: page.locked },
+            redo: { locked: !page.locked },
+        });
+    }
+    removeBackground(pageId) {
+        const page = this.findPage(pageId);
+        if (!page || page.locked)
+            return;
+        this.historyPush({
+            pageId: page.id,
+            type: 'pageUpdate',
+            ...(page.backgroundImage
+                ? { undo: { backgroundImage: page.backgroundImage }, redo: { backgroundImage: null } }
+                : { undo: { backgroundColor: page.backgroundColor }, redo: { backgroundColor: null } }),
+        });
+    }
+    backgroundImageToLayer(pageId) {
+        const page = this.findPage(pageId);
+        if (!page || page.locked)
+            return;
+        if (!page.backgroundImage)
+            return;
+        this.historyPush([
+            {
+                type: 'backgroundImageRemove',
+                pageId: page.id,
+                previousBackgroundImage: page.backgroundImage,
+            },
+            {
+                type: 'layerAdd',
+                pageId: page.id,
+                layer: this.buildImageLayer({
+                    ...page.backgroundImage,
+                    sortOrder: this.generateLayersSortOrder()[0],
+                    // clean some background props
+                    scale: 1,
+                    opacity: 1,
+                    // clean offset to avoid wrong positioning
+                    offsetX: 0,
+                    offsetY: 0,
+                }),
+            },
+        ]);
+    }
+    backgroundToggleLocked(pageId) {
+        const page = this.findPage(pageId);
+        if (!page || page.locked)
+            return false;
+        return this.historyPush({
+            type: 'pageUpdate',
+            pageId,
+            undo: { backgroundLocked: page.backgroundLocked },
+            redo: { backgroundLocked: !page.backgroundLocked },
+        });
+    }
+    buildLayerDuplicate(layer, groupId) {
+        return {
+            ...layer,
+            id: this.generateId(),
+            ...(groupId && { groupId }),
+        };
+    }
+    duplicatePage(page) {
+        if (this.mode !== 'multiple')
+            return false;
+        const { layers, ...rest } = page;
+        const duplicates = this.buildLayersDuplicates(layers);
+        const duplicate = {
+            ...rest,
+            id: this.generateId(),
+            layers: duplicates,
+        };
+        return this.addPage({
+            page: duplicate,
+            index: this.sortedPages.findIndex((l) => l.id === page.id) + 1,
+        });
+    }
+    generateLayersSortOrder(amount = 1, index) {
+        const rootLayers = this.getRootLayers(this.activePage);
+        index ??= rootLayers.length;
+        index = Math.min(index, rootLayers.length);
+        const prev = rootLayers[index - 1];
+        const next = rootLayers[index];
+        let startingOrder = 0;
+        let increment = 1;
+        if (next && prev) {
+            increment = (next.sortOrder - prev.sortOrder) / (amount + 1);
+            startingOrder = prev.sortOrder;
+        }
+        else if (prev) {
+            startingOrder = prev.sortOrder;
+        }
+        else if (next) {
+            startingOrder = next.sortOrder - (amount + 1);
+        }
+        return Array.from({ length: amount }, (_, i) => startingOrder + increment * (i + 1));
+    }
+    buildTextLayer({ html, width, height, ...rest }) {
+        const scale = rest.scale ?? 1;
+        const x = rest.x ?? (this.width - width * scale) / 2;
+        const y = rest.y ?? (this.height - height * scale) / 2;
+        const layer = {
+            id: this.generateId(),
+            groupId: null,
+            type: 'text',
+            x,
+            y,
+            width,
+            height,
+            html,
+            sortOrder: 1,
+            locked: false,
+            rotate: 0,
+            opacity: 1,
+            scale,
+            ...rest,
+        };
+        console.log('textLayer', layer);
+        return layer;
+    }
+    getMaxScale({ width, height }) {
+        return Math.min(this.width / 2 / width, this.height / 2 / height);
+    }
+    buildImageLayer({ image, ...rest }) {
+        const width = rest.width ?? image.width;
+        const height = rest.height ?? image.height;
+        const inputScale = rest.scale ?? 1;
+        const scale = rest.scale ?? Math.min(this.getMaxScale({ width, height }), 1);
+        if (scale !== 1) {
+            rest.scale = scale;
+        }
+        // adjust x and y according to scale if set or center image
+        const x = rest.x == null
+            ? (this.width - width * scale) / 2
+            : rest.x + (width * inputScale - width * scale) / 2;
+        const y = rest.y == null
+            ? (this.height - height * scale) / 2
+            : rest.y + (height * inputScale - height * scale) / 2;
+        const layer = {
+            id: this.generateId(),
+            groupId: null,
+            type: 'image',
+            width,
+            height,
+            image: { ...image },
+            sortOrder: 1,
+            locked: false,
+            rotate: 0,
+            opacity: 1,
+            scale: 1,
+            offsetX: 0,
+            offsetY: 0,
+            cornerRadius: 0,
+            flipX: false,
+            flipY: false,
+            borderStyle: 'solid',
+            borderWidth: 0,
+            borderColor: '#000000',
+            ...rest,
+            x,
+            y,
+        };
+        console.log('imageLayer', layer);
+        return layer;
+    }
+    addLayers(pageId, layers, index) {
+        const page = this.findPage(pageId);
+        if (!page || page.locked)
+            return;
+        layers = Array.isArray(layers) ? layers : [layers];
+        const layersSortOrder = this.generateLayersSortOrder(layers.length, index);
+        this.historyPush(layers.map((layer, i) => ({
+            type: 'layerAdd',
+            pageId: page.id,
+            layer: { ...layer, sortOrder: layersSortOrder[i] },
+        })));
+        this.setActiveLayers(layers.map((l) => l.id));
+    }
+    copyLayers(pageId, layerIds) {
+        const page = this.findPage(pageId);
+        if (!page || page.locked)
+            return;
+        const layers = this.findRootLayers(page, layerIds);
+        if (!layers.length)
+            return;
+        this.clipboard = $state.snapshot([
+            ...layers,
+            ...layers
+                .filter((l) => l.type === 'group')
+                .flatMap((g) => this.findGroupChildren(page, g.id)),
+        ]);
+    }
+    buildGroupChildrenDuplicates(layers, oldGroupId, newGroupId) {
+        return layers
+            .filter((l) => l.type !== 'group' && l.groupId === oldGroupId)
+            .map((l) => this.buildLayerDuplicate(l, newGroupId));
+    }
+    buildLayersDuplicates(layers) {
+        const rootLayers = layers.filter((l) => l.type === 'group' || !l.groupId);
+        const duplicates = rootLayers.flatMap((l) => {
+            const duplicate = this.buildLayerDuplicate(l);
+            return l.type === 'group'
+                ? [duplicate, ...this.buildGroupChildrenDuplicates(layers, l.id, duplicate.id)]
+                : duplicate;
+        });
+        return duplicates;
+    }
+    duplicateLayers(layers) {
+        const duplicates = this.buildLayersDuplicates(layers);
+        const rootDuplicates = duplicates.filter((l) => l.type === 'group' || !l.groupId);
+        const increment = 50;
+        const groupBbox = calculateGroupBoundingBox(layers);
+        const xIncrement = groupBbox.x + groupBbox.width / 2 > this.width / 2 ? -increment : increment;
+        const yIncrement = groupBbox.y + groupBbox.height / 2 > this.height / 2 ? -increment : increment;
+        let xAdjust = 0;
+        let iteration = 0;
+        const tryToDuplicate = () => {
+            rootDuplicates.forEach((duplicate, i) => {
+                const layer = layers[i];
+                Object.assign(duplicate, {
+                    x: layer.x + xAdjust + xIncrement * iteration,
+                    y: layer.y + yIncrement * iteration,
+                });
+            });
+            const occupied = rootDuplicates.every((duplicate) => this.activePage.layers.some((l) => l.type === duplicate.type &&
+                l.x === duplicate.x &&
+                l.y === duplicate.y &&
+                l.scale === duplicate.scale &&
+                l.rotate === duplicate.rotate));
+            if (occupied) {
+                iteration++;
+                tryToDuplicate();
+            }
+            else if (!rootDuplicates.some((duplicate) => this.isLayerOutOfBounds(duplicate))) {
+                this.addLayers(this.activePage.id, duplicates);
+            }
+            else {
+                xAdjust += xIncrement;
+                iteration = 0;
+                const newX = groupBbox.x + xAdjust;
+                if (newX >= 0 && newX < this.width) {
+                    tryToDuplicate();
+                }
+            }
+        };
+        tryToDuplicate();
+    }
+    getAbsoluteGroupLayers(groupLayer, children) {
+        const theta = degToRad(groupLayer.rotate);
+        const groupCenter = {
+            x: groupLayer.x + (groupLayer.width * groupLayer.scale) / 2,
+            y: groupLayer.y + (groupLayer.height * groupLayer.scale) / 2,
+        };
+        return children.map((l) => {
+            const relativeCenter = {
+                x: groupLayer.x + (l.x + (l.width * l.scale) / 2) * groupLayer.scale,
+                y: groupLayer.y + (l.y + (l.height * l.scale) / 2) * groupLayer.scale,
+            };
+            const center = rotatePoint(relativeCenter, groupCenter, theta);
+            return {
+                ...l,
+                x: center.x - (l.width * l.scale * groupLayer.scale) / 2,
+                y: center.y - (l.height * l.scale * groupLayer.scale) / 2,
+                rotate: l.rotate + groupLayer.rotate,
+                scale: l.scale * groupLayer.scale,
+                opacity: l.opacity * groupLayer.opacity,
+            };
+        });
+    }
+    groupLayers(pageId, layerIds) {
+        const page = this.findPage(pageId);
+        if (!page || page.locked)
+            return;
+        const layers = this.findRootLayers(page, layerIds);
+        if (layers.length < 2 || layers.some(({ locked }) => locked))
+            return;
+        const absoluteLayers = layers.flatMap((layer) => layer.type === 'group'
+            ? this.getAbsoluteGroupLayers(layer, this.findGroupChildren(page, layer.id))
+            : layer);
+        const bbox = calculateGroupRotatedBoundingBox(absoluteLayers, this.activeGroupRotate);
+        const relativeRects = calculateRelativeRects(bbox, absoluteLayers);
+        const groupLayer = {
+            id: this.generateId(),
+            type: 'group',
+            ...bbox,
+            opacity: 1,
+            sortOrder: Math.max(...layers.map(({ sortOrder }) => sortOrder)),
+            locked: false,
+        };
+        const groupLayers = absoluteLayers.map((l, i) => {
+            return {
+                ...l,
+                id: this.generateId(),
+                groupId: groupLayer.id,
+                x: relativeRects[i].x,
+                y: relativeRects[i].y,
+                rotate: relativeRects[i].rotate,
+            };
+        });
+        this.historyPush([
+            ...$state.snapshot(layers).map((layer) => ({
+                type: 'layerRemove',
+                pageId,
+                layer,
+            })),
+            {
+                type: 'layerAdd',
+                pageId,
+                layer: groupLayer,
+            },
+            ...groupLayers.map((layer) => ({
+                type: 'layerAdd',
+                pageId,
+                layer,
+            })),
+        ]);
+        this.setActiveLayers(groupLayer.id);
+    }
+    ungroupLayers(pageId, layerIds) {
+        const page = this.findPage(pageId);
+        if (!page || page.locked)
+            return;
+        const layers = this.findRootLayers(page, layerIds);
+        if (!layers.length || layers.some(({ locked }) => locked))
+            return;
+        if (!layers.every((layer) => layer.type === 'group'))
+            return;
+        const absoluteLayers = layers
+            .flatMap((l) => this.getAbsoluteGroupLayers(l, this.findGroupChildren(page, l.id)))
+            .map((l) => ({
+            ...l,
+            id: this.generateId(),
+            groupId: null,
+        }));
+        this.historyPush([
+            ...$state.snapshot(layers).map((layer) => ({
+                type: 'layerRemove',
+                pageId,
+                layer,
+            })),
+            ...absoluteLayers.map((layer) => ({
+                type: 'layerAdd',
+                pageId,
+                layer,
+            })),
+        ]);
+        this.setActiveLayers(absoluteLayers.map((l) => l.id));
+    }
+    removeRootLayers(pageId, layerIds) {
+        const page = this.findPage(pageId);
+        if (!page || page.locked)
+            return;
+        const layers = this.findRootLayers(page, layerIds).filter(({ locked }) => !locked);
+        if (!layers.length)
+            return;
+        this.historyPush($state.snapshot(layers).map((layer) => ({
+            type: 'layerRemove',
+            pageId,
+            layer,
+        })));
+    }
+    removeLayers(pageId, layerIds) {
+        const page = this.findPage(pageId);
+        if (!page || page.locked)
+            return;
+        const layers = this.findRootLayers(page, layerIds).filter(({ locked }) => !locked);
+        if (layers.length) {
+            this.removeRootLayers(pageId, layers.map((l) => l.id));
+        }
+        else {
+            const layerId = Array.isArray(layerIds) ? layerIds[0] : layerIds;
+            const layer = this.findLayer(this.activePage, layerId);
+            if (!layer || layer.type === 'group' || !layer.groupId)
+                return;
+            const groupLayer = this.findLayer(this.activePage, layer.groupId);
+            if (!groupLayer || groupLayer.type !== 'group')
+                return;
+            const children = this.findGroupChildren(page, groupLayer.id);
+            const restChildren = children.filter((l) => l.id !== layer.id);
+            const restAbsoluteChildren = this.getAbsoluteGroupLayers(groupLayer, restChildren);
+            if (children.length <= 2) {
+                const newLayers = restAbsoluteChildren.map((l) => ({
+                    ...l,
+                    id: this.generateId(),
+                    groupId: null,
+                }));
+                this.historyPush([
+                    {
+                        type: 'layerRemove',
+                        pageId,
+                        layer: groupLayer,
+                    },
+                    ...newLayers.map((layer) => ({
+                        type: 'layerAdd',
+                        pageId,
+                        layer,
+                    })),
+                ]);
+                this.setActiveLayers(newLayers.map((l) => l.id));
+            }
+            else {
+                const newGroupBbox = calculateGroupRotatedBoundingBox(restAbsoluteChildren, groupLayer.rotate);
+                const relativeLayers = calculateRelativeRects(newGroupBbox, restAbsoluteChildren);
+                this.historyPush([
+                    {
+                        type: 'layerUpdate',
+                        pageId,
+                        layer: { id: groupLayer.id, type: groupLayer.type },
+                        undo: {
+                            x: groupLayer.x,
+                            y: groupLayer.y,
+                            width: groupLayer.width,
+                            height: groupLayer.height,
+                        },
+                        redo: {
+                            x: newGroupBbox.x,
+                            y: newGroupBbox.y,
+                            width: newGroupBbox.width / groupLayer.scale,
+                            height: newGroupBbox.height / groupLayer.scale,
+                        },
+                    },
+                    {
+                        type: 'layerRemove',
+                        pageId,
+                        layer: $state.snapshot(layer),
+                    },
+                    ...restChildren.map((layer, i) => {
+                        return {
+                            type: 'layerUpdate',
+                            pageId,
+                            layer: { id: layer.id, type: layer.type },
+                            undo: { x: layer.x, y: layer.y },
+                            redo: {
+                                x: relativeLayers[i].x / groupLayer.scale,
+                                y: relativeLayers[i].y / groupLayer.scale,
+                            },
+                        };
+                    }),
+                ]);
+                if (this.activePage.id === pageId) {
+                    this.setActiveLayers(groupLayer.id);
+                }
+            }
+        }
+    }
+    checkOverlap(corners, layer) {
+        const layerCorners = getRotatedCorners(layer);
+        return checkPolygonsIntersect(corners, layerCorners);
+    }
+    getLayerOverlaps(page, layers) {
+        const rootLayers = this.getRootLayers(page);
+        const indexes = layers.map((layer) => rootLayers.findIndex(({ id }) => id === layer.id));
+        const minIndex = Math.min(...indexes);
+        const maxIndex = Math.max(...indexes);
+        const corners = getRotatedCorners(layers.length === 1 ? layers[0] : calculateGroupBoundingBox(layers));
+        const overlapsIndexes = rootLayers
+            .map((l, i) => ({ l, i }))
+            .filter(({ l }) => !layers.includes(l) && this.checkOverlap(corners, l))
+            .map(({ i }) => i);
+        const overlaps = {
+            forward: overlapsIndexes.find((i) => i > maxIndex),
+            front: overlapsIndexes.findLast((i) => i > maxIndex),
+            backward: overlapsIndexes.findLast((i) => i < minIndex),
+            back: overlapsIndexes.find((i) => i < minIndex),
+        };
+        if (overlaps.forward === undefined) {
+            const forwardIndex = overlapsIndexes.findLast((i) => i > minIndex);
+            overlaps.forward = forwardIndex;
+            overlaps.front = forwardIndex;
+        }
+        if (overlaps.backward === undefined) {
+            const backwardIndex = overlapsIndexes.find((i) => i < maxIndex);
+            overlaps.backward = backwardIndex;
+            overlaps.back = backwardIndex;
+        }
+        return overlaps.backward !== undefined || overlaps.forward !== undefined ? overlaps : null;
+    }
+    moveLayers(pageId, layerIds, direction) {
+        const page = this.findPage(pageId);
+        if (!page || page.locked)
+            return;
+        const layers = this.findRootLayers(page, layerIds);
+        if (!layers.length || layers.some(({ locked }) => locked))
+            return;
+        const overlaps = this.getLayerOverlaps(page, layers);
+        if (!overlaps)
+            return;
+        const newIndex = overlaps[direction];
+        if (newIndex === undefined)
+            return;
+        const sortOrders = this.generateLayersSortOrder(layers.length, ['forward', 'front'].includes(direction) ? newIndex + 1 : newIndex);
+        this.historyPush(layers.map((layer, i) => {
+            return {
+                type: 'layerUpdate',
+                pageId,
+                layer: { id: layer.id, type: layer.type },
+                undo: { sortOrder: layer.sortOrder },
+                redo: { sortOrder: sortOrders[i] },
+            };
+        }));
+    }
+    alignLayers(pageId, layerIds, origin) {
+        const page = this.findPage(pageId);
+        if (!page || page.locked)
+            return;
+        const layers = this.findRootLayers(page, layerIds);
+        if (!layers.length || layers.some(({ locked }) => locked))
+            return;
+        const bbox = layers.length === 1
+            ? { x: 0, y: 0, width: this.width, height: this.height }
+            : calculateBoundingBox(calculateGroupRotatedBoundingBox(layers, this.activeGroupRotate));
+        this.historyPush(layers.map((layer) => {
+            const layerBbox = calculateBoundingBox(layer);
+            const { x, y, width, height, scale } = layer;
+            const alignment = {
+                left: {
+                    undo: { x },
+                    redo: { x: bbox.x + (layerBbox.width - width * scale) / 2 },
+                },
+                center: {
+                    undo: { x },
+                    redo: { x: bbox.x + (bbox.width - width * scale) / 2 },
+                },
+                right: {
+                    undo: { x },
+                    redo: {
+                        x: bbox.x + bbox.width - width * scale - (layerBbox.width - width * scale) / 2,
+                    },
+                },
+                top: {
+                    undo: { y },
+                    redo: { y: bbox.y + (layerBbox.height - height * scale) / 2 },
+                },
+                middle: {
+                    undo: { y },
+                    redo: { y: bbox.y + (bbox.height - height * scale) / 2 },
+                },
+                bottom: {
+                    undo: { y },
+                    redo: {
+                        y: bbox.y + bbox.height - height * scale - (layerBbox.height - height * scale) / 2,
+                    },
+                },
+            }[origin];
+            return {
+                type: 'layerUpdate',
+                pageId,
+                layer: { id: layer.id, type: layer.type },
+                ...alignment,
+            };
+        }));
+    }
+    imageLayerToBackground(pageId, layerId) {
+        const page = this.findPage(pageId);
+        if (!page || page.locked)
+            return false;
+        if (page.backgroundLocked)
+            return false;
+        const layer = this.findLayer(page, layerId);
+        if (!layer || layer.locked)
+            return false;
+        if (layer.type !== 'image')
+            return false;
+        const { width, height, rotate, image, opacity, flipX, flipY, offsetX, offsetY } = layer;
+        const cover = calculateImageCover({ width, height, rotate }, { width: this.width, height: this.height });
+        const backgroundImage = {
+            image: { ...image },
+            scale: cover.scale,
+            offsetX: (offsetX || 0) + cover.offsetX,
+            offsetY: (offsetY || 0) + cover.offsetY,
+            rotate,
+            opacity,
+            flipX,
+            flipY,
+        };
+        return this.historyPush([
+            {
+                type: 'layerRemove',
+                pageId: page.id,
+                layer: layer,
+            },
+            {
+                type: 'backgroundImageAdd',
+                pageId: page.id,
+                backgroundImage,
+                previousBackgroundImage: $state.snapshot(page.backgroundImage),
+            },
+        ]);
+    }
+    toggleLayersLocked(pageId, layerIds, locked) {
+        const page = this.findPage(pageId);
+        if (!page || page.locked)
+            return false;
+        const layers = this.findRootLayers(page, layerIds);
+        if (!layers.length)
+            return false;
+        return this.historyPush(layers.map((layer) => ({
+            type: 'layerUpdate',
+            pageId,
+            layer: { id: layer.id, type: layer.type },
+            undo: { locked: layer.locked },
+            redo: { locked },
+        })));
+    }
+    clipboardPaste() {
+        if (this.clipboard) {
+            if (Array.isArray(this.clipboard)) {
+                this.duplicateLayers(this.clipboard);
+            }
+            else if ('layers' in this.clipboard) {
+                this.duplicatePage(this.clipboard);
+            }
+        }
+    }
+    dropDragged(x, y, index) {
+        if (this.dragged) {
+            if ('image' in this.dragged) {
+                const { image, scale } = this.dragged;
+                const { width, height } = image;
+                const layer = this.buildImageLayer({ x, y, width, height, image, scale });
+                this.addLayers(this.activePage.id, layer, index);
+            }
+            else if (this.dragged?.ref) {
+                const { ref, html, scale } = this.dragged;
+                const rect = ref.getBoundingClientRect();
+                const width = rect.width / scale / this.zoom;
+                const height = rect.height / scale / this.zoom;
+                const layer = this.buildTextLayer({ x, y, width, height, scale, html });
+                this.addLayers(this.activePage.id, layer, index);
+            }
+        }
+    }
+    setActivePage(pageId) {
+        if (this.mode !== 'multiple')
+            return;
+        const page = this.findPage(pageId);
+        if (!page)
+            return;
+        this.clearActiveLayer();
+        // this.historyReset();
+        this.activePage = page;
+        this.pageSelected = true;
+        return page;
+    }
+    setActiveLayers(layerIds, action) {
+        layerIds = Array.isArray(layerIds) ? layerIds : [layerIds];
+        // Reset the active action, background, and page selection
+        this.activeAction = null;
+        if (this.activeSelection.type !== 'root-layers') {
+            const set = new SvelteSet(layerIds);
+            if (this.activeSelection.type === 'child-layer' && this.activeGroupAndChild) {
+                set.add(this.activeGroupAndChild.groupLayer.id);
+            }
+            this.activeSelection = { type: 'root-layers', layerIds: set };
+        }
+        this.pageSelected = false;
+        const ids = this.activeSelection.layerIds;
+        // If the action is 'delete', remove the layer from the active layer ids
+        if (action === 'delete') {
+            layerIds.forEach((layerId) => ids.delete(layerId));
+        }
+        else {
+            // If no action is provided, clear the active layer ids
+            if (!action) {
+                ids.clear();
+                this.activeGroupRotate = 0;
+            }
+            // Add the layers to the active layer ids
+            layerIds.forEach((layerId) => ids.add(layerId));
+        }
+    }
+    setActiveGroupChild(childId) {
+        this.activeAction = null;
+        this.activeSelection = { type: 'child-layer', childId };
+        this.pageSelected = false;
+        this.activeGroupRotate = 0;
+    }
+    clearActiveLayer() {
+        this.activeAction = null;
+        this.activeSelection = { type: 'empty' };
+        this.pageSelected = false;
+        this.activeGroupRotate = 0;
+    }
+    setActiveBackground(value) {
+        this.activeAction = null;
+        this.activeSelection = { type: value ? 'background' : 'empty' };
+        this.pageSelected = false;
+        this.activeGroupRotate = 0;
+    }
+    applyChanges(actions, type) {
+        console.log('applyChanges', $state.snapshot(actions), type);
+        const events = [];
+        (type === 'undo' ? actions.reverse() : actions).forEach((action) => {
+            if (this.mode === 'multiple' && (action.type === 'pageAdd' || action.type === 'pageRemove')) {
+                if ((action.type === 'pageAdd' && type === 'redo') ||
+                    (action.type === 'pageRemove' && type === 'undo')) {
+                    let page = { ...action.page };
+                    events.push({ type: 'pageAdd', data: { page } });
+                    this.pages.push(page);
+                    this.setActivePage(page.id);
+                    if (action.type === 'pageRemove' && action.newPage) {
+                        const pageId = action.newPage.id;
+                        const index = this.pages.findIndex(({ id }) => id === pageId);
+                        if (~index) {
+                            this.pages.splice(index, 1);
+                            events.push({ type: 'pageRemove', data: { pageId } });
+                        }
+                    }
+                }
+                else {
+                    const index = this.pages.findIndex(({ id }) => id === action.page.id);
+                    if (~index) {
+                        this.pages.splice(index, 1);
+                        events.push({ type: 'pageRemove', data: { pageId: action.page.id } });
+                        if (!this.pages.length && action.type === 'pageRemove') {
+                            let page = this.buildEmptyPage();
+                            events.push({ type: 'pageAdd', data: { page } });
+                            this.pages.push(page);
+                            this.setActivePage(page.id);
+                            action.newPage = page;
+                        }
+                        else {
+                            const prevPage = this.sortedPages.findLast((l) => l.sortOrder < action.page.sortOrder);
+                            this.setActivePage((prevPage ?? this.pages[0]).id);
+                        }
+                    }
+                }
+            }
+            else if ('pageId' in action) {
+                const page = this.pages.find(({ id }) => id === action.pageId);
+                if (!page)
+                    return false;
+                if (action.type === 'pageUpdate') {
+                    Object.assign(page, action[type]);
+                    events.push({ type: 'pageUpdate', data: { pageId: page.id, diff: action[type] } });
+                }
+                else if (action.type === 'layerAdd' || action.type === 'layerRemove') {
+                    if ((action.type === 'layerAdd' && type === 'redo') ||
+                        (action.type === 'layerRemove' && type === 'undo')) {
+                        page.layers.push(action.layer);
+                        events.push({ type: 'layerAdd', data: { pageId: page.id, layer: action.layer } });
+                    }
+                    else {
+                        const index = page.layers.findIndex(({ id }) => id === action.layer.id);
+                        if (!~index)
+                            return;
+                        page.layers.splice(index, 1);
+                        events.push({
+                            type: 'layerRemove',
+                            data: {
+                                pageId: page.id,
+                                layerId: action.layer.id,
+                                layerType: action.layer.type,
+                            },
+                        });
+                    }
+                }
+                else if (action.type === 'layerUpdate') {
+                    const layer = this.findLayer(page, action.layer.id);
+                    if (!layer)
+                        return false;
+                    Object.assign(layer, action[type]);
+                    events.push({
+                        type: 'layerUpdate',
+                        data: {
+                            pageId: page.id,
+                            layerId: layer.id,
+                            layerType: layer.type,
+                            diff: action[type],
+                        },
+                    });
+                }
+                else if (action.type === 'backgroundImageAdd' ||
+                    action.type === 'backgroundImageRemove') {
+                    if (action.type === 'backgroundImageAdd' && type === 'redo') {
+                        Object.assign(page, { backgroundImage: action.backgroundImage });
+                        events.push({
+                            type: 'backgroundImageAdd',
+                            data: { pageId: page.id, backgroundImage: action.backgroundImage },
+                        });
+                    }
+                    else {
+                        Object.assign(page, { backgroundImage: action.previousBackgroundImage });
+                        events.push({
+                            type: 'backgroundImageRemove',
+                            data: { pageId: page.id },
+                        });
+                    }
+                }
+                else if (action.type === 'backgroundImageUpdate') {
+                    if (!page.backgroundImage)
+                        return;
+                    Object.assign(page.backgroundImage, action[type]);
+                    events.push({
+                        type: 'backgroundImageUpdate',
+                        data: { pageId: page.id, diff: action[type] },
+                    });
+                }
+            }
+        });
+        console.log('events', events);
+        this.onUpdate?.(events, this.pages);
+        return true;
+    }
+    historyReset() {
+        this.historyActions = [];
+        this.historyIndex = -1;
+    }
+    historyPush(actions) {
+        actions = Array.isArray(actions) ? actions : [actions];
+        const done = this.applyChanges(actions, 'redo');
+        if (done) {
+            this.historyActions = [...this.historyActions.slice(0, this.historyIndex + 1), actions];
+            this.historyIndex = this.historyActions.length - 1;
+        }
+        return done;
+    }
+    historyUndo() {
+        if (this.historyIndex >= 0) {
+            const action = this.historyActions[this.historyIndex];
+            this.historyIndex--;
+            this.applyChanges(action, 'undo');
+        }
+    }
+    historyRedo() {
+        if (this.historyIndex < this.historyActions.length - 1) {
+            this.historyIndex++;
+            const action = this.historyActions[this.historyIndex];
+            this.applyChanges(action, 'redo');
+        }
+    }
+    isLayerOutOfBounds(layer) {
+        const bbox = calculateBoundingBox(layer);
+        return (bbox.x > this.width ||
+            bbox.y > this.height ||
+            bbox.x + bbox.width < 0 ||
+            bbox.y + bbox.height < 0);
+    }
+    createTextLayerInitial(page, layer) {
+        if (layer.groupId) {
+            const groupLayer = this.findLayer(page, layer.groupId);
+            const children = this.findGroupChildren(page, layer.groupId);
+            return {
+                layer: { initial: $state.snapshot(layer), state: layer },
+                groupLayer: {
+                    initial: $state.snapshot(groupLayer),
+                    state: groupLayer,
+                    childrenInitial: $state.snapshot(children),
+                    childrenState: children,
+                },
+            };
+        }
+        return {
+            layer: { initial: $state.snapshot(layer), state: layer },
+        };
+    }
+    async applyHtmlToLayer(initial, html) {
+        const { layer, groupLayer } = initial;
+        layer.state.html = html;
+        await tick();
+        const layerContent = document.getElementById(`layer-content-${layer.initial.id}`);
+        if (layerContent && layerContent.offsetHeight !== layer.initial.height) {
+            const newHeight = layerContent.offsetHeight;
+            if (groupLayer) {
+                const absoluteChildren = this.getAbsoluteGroupLayers(groupLayer.initial, groupLayer.childrenInitial);
+                const absoluteLayer = absoluteChildren.find((l) => l.id === layer.initial.id);
+                const { newX, newY } = calculateNewPosition(`top-left`, absoluteLayer, absoluteLayer.width * absoluteLayer.scale, newHeight * absoluteLayer.scale);
+                Object.assign(absoluteLayer, { x: newX, y: newY, height: newHeight });
+                const groupScale = groupLayer.initial.scale;
+                const groupRotate = groupLayer.initial.rotate;
+                const newGroupBbox = calculateGroupRotatedBoundingBox(absoluteChildren, groupRotate);
+                const groupAction = {
+                    type: 'layerUpdate',
+                    pageId: this.activePage.id,
+                    layer: { id: groupLayer.initial.id, type: groupLayer.initial.type },
+                    undo: {
+                        x: groupLayer.initial.x,
+                        y: groupLayer.initial.y,
+                        width: groupLayer.initial.width,
+                        height: groupLayer.initial.height,
+                    },
+                    redo: {
+                        x: newGroupBbox.x,
+                        y: newGroupBbox.y,
+                        width: newGroupBbox.width / groupScale,
+                        height: newGroupBbox.height / groupScale,
+                    },
+                };
+                Object.assign(groupLayer.state, groupAction.redo);
+                Object.assign(layer.state, { height: newHeight });
+                const relativeLayers = calculateRelativeRects(newGroupBbox, absoluteChildren);
+                return [
+                    groupAction,
+                    ...groupLayer.childrenState.map((state, i) => {
+                        const initialChild = groupLayer.childrenInitial[i];
+                        const isCurrentLayer = state.id === layer.initial.id;
+                        const relativeLayer = relativeLayers[i];
+                        const action = {
+                            type: 'layerUpdate',
+                            pageId: this.activePage.id,
+                            layer: { id: state.id, type: state.type },
+                            undo: {
+                                x: initialChild.x,
+                                y: initialChild.y,
+                                ...(isCurrentLayer && { html: layer.initial.html, height: layer.initial.height }),
+                            },
+                            redo: {
+                                x: relativeLayer.x / groupScale,
+                                y: relativeLayer.y / groupScale,
+                                ...(isCurrentLayer && { html, height: newHeight }),
+                            },
+                        };
+                        Object.assign(state, action.redo);
+                        return action;
+                    }),
+                ];
+            }
+            else {
+                const { newX, newY } = calculateNewPosition(`top-left`, layer.initial, layer.initial.width * layer.initial.scale, newHeight * layer.initial.scale);
+                const redo = { html, x: newX, y: newY, height: newHeight };
+                Object.assign(layer.state, redo);
+                return [
+                    {
+                        type: 'layerUpdate',
+                        pageId: this.activePage.id,
+                        layer: { id: layer.initial.id, type: layer.initial.type },
+                        undo: {
+                            html: layer.initial.html,
+                            x: layer.initial.x,
+                            y: layer.initial.y,
+                            height: layer.initial.height,
+                        },
+                        redo,
+                    },
+                ];
+            }
+        }
+        return [
+            {
+                type: 'layerUpdate',
+                pageId: this.activePage.id,
+                layer: { id: layer.initial.id, type: layer.initial.type },
+                undo: { html: layer.initial.html },
+                redo: { html },
+            },
+        ];
+    }
+}
+const editorKey = {};
+export function setEditorContext(editor) {
+    return setContext(editorKey, editor);
+}
+export function getEditorContext() {
+    return getContext(editorKey);
+}