@peteai/presentation-editor 0.0.6 → 0.0.7

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

@@ -1,813 +0,0 @@
-import uniqid from 'uniqid';
-import { getContext, setContext } from 'svelte';
-import { defaultFonts } from './fonts.js';
-import { cognitionImages, cognitionSlides } from './cognition-slides.js';
-import { cognitionSlideToJson } from './utils.js';
-import { calculateLayerTransform, calculateBoundingBox, calculateImageCover, checkPolygonsIntersect, getRotatedCorners, calculateGroupBoundingBox, calculateGroupRotatedBoundingBox, } from './layers/utils.js';
-import createEditor from './layers/types/html/editor/createEditor.js';
-import { extensions } from './layers/types/html/extensions.js';
-import { SvelteSet } from 'svelte/reactivity';
-export class PresentationEditor {
-    mode = 'multiple';
-    fonts = defaultFonts;
-    images = $state(cognitionImages);
-    slides = $state(cognitionSlides.map(cognitionSlideToJson)); // getSlides()
-    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] },
-                active: () => resolve(null),
-                inactive: 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;
-    onSlideAdd;
-    onSlideUpdate;
-    onSlideRemove;
-    onBackgroundImageAdd;
-    onBackgroundImageUpdate;
-    onBackgroundImageRemove;
-    onLayerAdd;
-    onLayerUpdate;
-    onLayerRemove;
-    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);
-    findSlide(slideId) {
-        return this.slides.find(({ id }) => id === slideId);
-    }
-    findLayer(slide, layerId) {
-        return slide.layers.find(({ id }) => id === layerId);
-    }
-    /**
-     * Finds layers in a slide based on their IDs.
-     *
-     * @param slide The slide 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.
-     */
-    findLayers(slide, layerIds) {
-        // Normalize the input to ensure it's always an array of IDs
-        const ids = Array.isArray(layerIds) ? layerIds : [layerIds];
-        // Filter the slide's layers to only include those with IDs in the provided list
-        return slide.layers.filter(({ id }) => ids.includes(id));
-    }
-    activeSlide = $state();
-    activeBackground = $state(false);
-    activeLayerIds = new SvelteSet();
-    activeLayers = $derived(this.activeBackground
-        ? []
-        : this.activeSlide.layers.filter(({ id }) => this.activeLayerIds.has(id)));
-    activeGroupRotate = $state(0);
-    slideSelected = $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 { slide, ...rest } = options;
-            Object.assign(this, { ...rest });
-            if (slide) {
-                Object.assign(this, { slides: [slide] });
-            }
-        }
-        else {
-            Object.assign(this, options);
-        }
-        if (!this.slides.length) {
-            this.addSlide();
-        }
-        // initial sorting
-        this.sortSlides();
-        this.slides.forEach((slide) => this.sortLayers(slide.layers));
-        this.activeSlide = this.slides[0];
-        setPresentationEditorContext(this);
-    }
-    sortLayers(layers) {
-        layers.sort((a, b) => a.sortOrder - b.sortOrder);
-    }
-    sortSlides() {
-        this.slides.sort((a, b) => a.sortOrder - b.sortOrder);
-    }
-    findSlideIndex(slideId) {
-        return this.slides.findIndex(({ id }) => id === slideId);
-    }
-    buildEmptySlide(sortOrder = 1) {
-        return {
-            id: this.generateId(),
-            sortOrder,
-            locked: false,
-            backgroundColor: null,
-            backgroundImage: null,
-            backgroundLocked: false,
-            layers: [],
-        };
-    }
-    async addSlide({ slide, index = this.findSlideIndex(this.activeSlide.id) + 1, } = {}) {
-        if (this.mode !== 'multiple')
-            return false;
-        if (!slide) {
-            slide = this.buildEmptySlide();
-            const inheritedSlide = this.slides[index > 0 ? index - 1 : 0];
-            if (inheritedSlide) {
-                Object.assign(slide, { backgroundColor: inheritedSlide.backgroundColor });
-            }
-        }
-        const prevSlide = this.slides[index - 1];
-        const nextSlide = this.slides[index];
-        if (!prevSlide && !nextSlide)
-            return false;
-        const sortOrder = nextSlide && prevSlide
-            ? (prevSlide.sortOrder + nextSlide.sortOrder) / 2
-            : prevSlide
-                ? prevSlide.sortOrder + 1
-                : nextSlide.sortOrder - 1;
-        return this.historyPush({ type: 'slideAdd', slide: { ...slide, sortOrder } });
-    }
-    removeSlide(slideId) {
-        if (this.mode !== 'multiple')
-            return false;
-        const slide = this.findSlide(slideId);
-        if (!slide || slide.locked)
-            return false;
-        this.historyPush({ type: 'slideRemove', slide });
-    }
-    copySlide(slideId) {
-        const slide = this.findSlide(slideId);
-        if (!slide)
-            return;
-        this.clipboard = $state.snapshot(slide);
-    }
-    async toggleSlideLocked(slideId) {
-        if (this.mode !== 'multiple')
-            return false;
-        const slide = this.findSlide(slideId);
-        if (!slide)
-            return false;
-        return this.historyPush({
-            type: 'slide',
-            slideId,
-            undo: { locked: slide.locked },
-            redo: { locked: !slide.locked },
-        });
-    }
-    async removeBackground(slideId) {
-        const slide = this.findSlide(slideId);
-        if (!slide || slide.locked)
-            return;
-        await this.historyPush({
-            slideId: slide.id,
-            type: 'slide',
-            ...(slide.backgroundImage
-                ? { undo: { backgroundImage: slide.backgroundImage }, redo: { backgroundImage: null } }
-                : { undo: { backgroundColor: slide.backgroundColor }, redo: { backgroundColor: null } }),
-        });
-    }
-    async backgroundImageToLayer(slideId) {
-        const slide = this.findSlide(slideId);
-        if (!slide || slide.locked)
-            return;
-        if (!slide.backgroundImage)
-            return;
-        await this.historyPush({
-            type: 'layerToSlideBackground',
-            slideId: slide.id,
-            imageLayer: this.buildImageLayer({
-                ...slide.backgroundImage,
-                sortOrder: this.generateLayersSortOrder()[0],
-                // clean some background props
-                scale: null,
-                opacity: null,
-                // clean offset to avoid wrong positioning
-                offsetX: null,
-                offsetY: null,
-            }),
-            backgroundImage: null,
-            opposite: true,
-        });
-    }
-    async backgroundToggleLocked(slideId) {
-        const slide = this.findSlide(slideId);
-        if (!slide || slide.locked)
-            return false;
-        return this.historyPush({
-            type: 'slide',
-            slideId,
-            undo: { backgroundLocked: slide.backgroundLocked },
-            redo: { backgroundLocked: !slide.backgroundLocked },
-        });
-    }
-    async duplicateSlide(slide) {
-        if (this.mode !== 'multiple')
-            return false;
-        const { layers, ...rest } = slide;
-        const duplicate = {
-            ...rest,
-            id: this.generateId(),
-            layers: layers.map((layer) => ({ ...layer, id: this.generateId() })),
-        };
-        return this.addSlide({ slide: duplicate });
-    }
-    generateLayersSortOrder(amount = 1, index = this.activeSlide.layers.length) {
-        index = Math.min(index, this.activeSlide.layers.length);
-        const prev = this.activeSlide.layers[index - 1];
-        const next = this.activeSlide.layers[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));
-    }
-    buildHtmlLayer({ 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(),
-            type: 'html',
-            x,
-            y,
-            width,
-            height,
-            html,
-            sortOrder: 1,
-            locked: false,
-            rotate: null,
-            opacity: null,
-            scale,
-            ...rest,
-        };
-        console.log('htmlLayer', 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(),
-            type: 'image',
-            width,
-            height,
-            image: { ...image },
-            sortOrder: 1,
-            locked: false,
-            rotate: null,
-            opacity: null,
-            scale: null,
-            offsetX: null,
-            offsetY: null,
-            cornerRadius: null,
-            flipX: false,
-            flipY: false,
-            borderStyle: null,
-            borderWidth: null,
-            borderColor: null,
-            ...rest,
-            x,
-            y,
-        };
-        console.log('imageLayer', layer);
-        return layer;
-    }
-    addLayers(slideId, layers, index) {
-        const slide = this.findSlide(slideId);
-        if (!slide || slide.locked)
-            return;
-        layers = Array.isArray(layers) ? layers : [layers];
-        const layersSortOrder = this.generateLayersSortOrder(layers.length, index);
-        this.historyPush({
-            type: 'layersAdd',
-            slideId: slide.id,
-            layers: layers.map((layer, i) => ({ ...layer, sortOrder: layersSortOrder[i] })),
-        });
-    }
-    copyLayers(slideId, layerIds) {
-        const slide = this.findSlide(slideId);
-        if (!slide || slide.locked)
-            return;
-        const layers = this.findLayers(slide, layerIds);
-        if (!layers.length)
-            return;
-        this.clipboard = $state.snapshot(layers);
-    }
-    duplicateLayers(layers) {
-        const duplicates = layers.map((layer) => ({
-            ...layer,
-            id: this.generateId(),
-        }));
-        const increment = 50;
-        const groupBbox = calculateGroupBoundingBox(layers.map(calculateLayerTransform));
-        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 = () => {
-            layers.forEach((layer, i) => Object.assign(duplicates[i], {
-                x: layer.x + xAdjust + xIncrement * iteration,
-                y: layer.y + yIncrement * iteration,
-            }));
-            const occupied = duplicates.every((duplicate) => this.activeSlide.layers.some((l) => l.x === duplicate.x &&
-                l.y === duplicate.y &&
-                l.width === duplicate.width &&
-                l.height === duplicate.height &&
-                l.scale === duplicate.scale &&
-                l.rotate === duplicate.rotate));
-            if (occupied) {
-                iteration++;
-                tryToDuplicate();
-            }
-            else if (!duplicates.some((duplicate) => this.isLayerOutOfBounds(duplicate))) {
-                this.addLayers(this.activeSlide.id, duplicates);
-            }
-            else {
-                xAdjust += xIncrement;
-                iteration = 0;
-                const newX = groupBbox.x + xAdjust;
-                if (newX >= 0 && newX < this.width) {
-                    tryToDuplicate();
-                }
-            }
-        };
-        tryToDuplicate();
-    }
-    async removeLayers(slideId, layerIds) {
-        const slide = this.findSlide(slideId);
-        if (!slide || slide.locked)
-            return;
-        const layers = this.findLayers(slide, layerIds).filter(({ locked }) => !locked);
-        if (!layers.length)
-            return;
-        this.historyPush({
-            type: 'layersRemove',
-            slideId: slide.id,
-            layers,
-        });
-    }
-    checkOverlap(corners, layer) {
-        const layerCorners = getRotatedCorners(calculateLayerTransform(layer));
-        return checkPolygonsIntersect(corners, layerCorners);
-    }
-    getLayerOverlaps(slide, layers) {
-        const indexes = layers.map((layer) => slide.layers.findIndex(({ id }) => id === layer.id));
-        const minIndex = Math.min(...indexes);
-        const maxIndex = Math.max(...indexes);
-        const corners = getRotatedCorners(layers.length === 1
-            ? calculateLayerTransform(layers[0])
-            : { ...calculateGroupBoundingBox(layers.map(calculateLayerTransform)), rotate: 0 });
-        const overlapsIndexes = slide.layers
-            .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;
-    }
-    async moveLayers(slideId, layerIds, direction) {
-        const slide = this.findSlide(slideId);
-        if (!slide || slide.locked)
-            return;
-        const layers = this.findLayers(slide, layerIds);
-        if (!layers.length || layers.some(({ locked }) => locked))
-            return;
-        const overlaps = this.getLayerOverlaps(slide, 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);
-        await this.historyPush({
-            type: 'layersGroup',
-            actions: layers.map((layer, i) => {
-                return {
-                    type: 'layer',
-                    slideId,
-                    layer: { id: layer.id, type: layer.type },
-                    undo: { sortOrder: layer.sortOrder },
-                    redo: { sortOrder: sortOrders[i] },
-                };
-            }),
-        });
-    }
-    async alignLayers(slideId, layerIds, origin) {
-        const slide = this.findSlide(slideId);
-        if (!slide || slide.locked)
-            return;
-        const layers = this.findLayers(slide, 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.map(calculateLayerTransform), this.activeGroupRotate));
-        await this.historyPush({
-            type: 'layersGroup',
-            actions: layers.map((layer) => {
-                const layerTransform = calculateLayerTransform(layer);
-                const layerBbox = calculateBoundingBox(layerTransform);
-                const { x, y, width, height } = layerTransform;
-                const alignment = {
-                    left: {
-                        undo: { x },
-                        redo: { x: bbox.x + (layerBbox.width - width) / 2 },
-                    },
-                    center: {
-                        undo: { x },
-                        redo: { x: bbox.x + (bbox.width - width) / 2 },
-                    },
-                    right: {
-                        undo: { x },
-                        redo: { x: bbox.x + bbox.width - width - (layerBbox.width - width) / 2 },
-                    },
-                    top: {
-                        undo: { y },
-                        redo: { y: bbox.y + (layerBbox.height - height) / 2 },
-                    },
-                    middle: {
-                        undo: { y },
-                        redo: { y: bbox.y + (bbox.height - height) / 2 },
-                    },
-                    bottom: {
-                        undo: { y },
-                        redo: { y: bbox.y + bbox.height - height - (layerBbox.height - height) / 2 },
-                    },
-                }[origin];
-                return {
-                    type: 'layer',
-                    slideId,
-                    layer: { id: layer.id, type: layer.type },
-                    ...alignment,
-                };
-            }),
-        });
-    }
-    async imageLayerToBackground(slideId, layerId) {
-        const slide = this.findSlide(slideId);
-        if (!slide || slide.locked)
-            return false;
-        if (slide.backgroundLocked)
-            return false;
-        const layer = this.findLayer(slide, layerId);
-        if (!layer || layer.locked)
-            return false;
-        if (layer.type !== 'image')
-            return false;
-        await this.historyPush({
-            type: 'layerToSlideBackground',
-            slideId: slide.id,
-            imageLayer: layer,
-            backgroundImage: slide.backgroundImage,
-        });
-    }
-    async toggleLayersLocked(slideId, layerIds, locked) {
-        const slide = this.findSlide(slideId);
-        if (!slide || slide.locked)
-            return false;
-        const layers = this.findLayers(slide, layerIds);
-        if (!layers.length)
-            return false;
-        return this.historyPush({
-            type: 'layersGroup',
-            actions: layers.map((layer) => ({
-                type: 'layer',
-                slideId,
-                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.duplicateSlide(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.activeSlide.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.buildHtmlLayer({ x, y, width, height, scale, html });
-                this.addLayers(this.activeSlide.id, layer, index);
-            }
-        }
-    }
-    setActiveSlide(slideId) {
-        if (this.mode !== 'multiple')
-            return;
-        const slide = this.findSlide(slideId);
-        if (!slide)
-            return;
-        this.clearActiveLayer();
-        // this.historyReset();
-        this.activeSlide = slide;
-        this.slideSelected = true;
-        return slide;
-    }
-    setActiveLayers(layerIds, action) {
-        layerIds = Array.isArray(layerIds) ? layerIds : [layerIds];
-        // Reset the active action, background, and slide selection
-        this.activeAction = null;
-        this.activeBackground = false;
-        this.slideSelected = false;
-        // If the action is 'delete', remove the layer from the active layer ids
-        if (action === 'delete') {
-            layerIds.forEach((layerId) => this.activeLayerIds.delete(layerId));
-        }
-        else {
-            // If no action is provided, clear the active layer ids
-            if (!action) {
-                this.activeLayerIds.clear();
-                this.activeGroupRotate = 0;
-            }
-            // Add the layers to the active layer ids
-            layerIds.forEach((layerId) => this.activeLayerIds.add(layerId));
-        }
-    }
-    clearActiveLayer() {
-        this.activeAction = null;
-        this.activeBackground = false;
-        this.slideSelected = false;
-        this.activeLayerIds.clear();
-        this.activeGroupRotate = 0;
-    }
-    setActiveBackground(value) {
-        this.activeAction = null;
-        this.activeBackground = value;
-        this.slideSelected = false;
-        this.activeLayerIds.clear();
-        this.activeGroupRotate = 0;
-    }
-    doSlideUpdate(slide, changes) {
-        Object.assign(slide, changes);
-        if ('sortOrder' in changes) {
-            this.sortSlides();
-        }
-        this.onSlideUpdate?.(slide.id, changes);
-    }
-    doBackgroundImageAdd(slide, backgroundImage) {
-        Object.assign(slide, { backgroundImage });
-        if (this.onBackgroundImageAdd) {
-            this.onBackgroundImageAdd(slide.id, backgroundImage);
-        }
-    }
-    doBackgroundImageUpdate(slide, changes) {
-        if (!slide.backgroundImage)
-            return;
-        Object.assign(slide.backgroundImage, changes);
-        this.onBackgroundImageUpdate?.(slide.id, changes);
-    }
-    doBackgroundImageRemove(slide) {
-        Object.assign(slide, { backgroundImage: null });
-        if (this.onBackgroundImageRemove) {
-            this.onBackgroundImageRemove(slide.id);
-        }
-    }
-    async doLayersAdd(slide, layers) {
-        if (this.onLayerAdd) {
-            const func = this.onLayerAdd;
-            layers = await Promise.all(layers.map((layer) => func(slide.id, { ...layer })));
-        }
-        slide.layers.push(...layers);
-        this.sortLayers(slide.layers);
-        this.setActiveLayers(layers.map(({ id }) => id));
-        return layers;
-    }
-    doLayersRemove(slide, layers) {
-        layers.forEach((layer) => {
-            const index = slide.layers.findIndex(({ id }) => id === layer.id);
-            if (!~index)
-                return;
-            this.setActiveLayers(layer.id, 'delete');
-            slide.layers.splice(index, 1);
-            this.onLayerRemove?.(slide.id, layer.id, layer.type);
-        });
-    }
-    async applyChanges(action, type) {
-        if (this.mode === 'multiple' && (action.type === 'slideAdd' || action.type === 'slideRemove')) {
-            if ((action.type === 'slideAdd' && type === 'redo') ||
-                (action.type === 'slideRemove' && type === 'undo')) {
-                let slide = { ...action.slide };
-                if (this.onSlideAdd) {
-                    slide = await this.onSlideAdd(slide);
-                    action.slide.id = slide.id;
-                }
-                this.slides.push(slide);
-                this.sortSlides();
-                this.setActiveSlide(slide.id);
-                if (action.type === 'slideRemove' && action.newSlide) {
-                    const slideId = action.newSlide.id;
-                    const index = this.slides.findIndex(({ id }) => id === slideId);
-                    if (~index) {
-                        this.slides.splice(index, 1);
-                        this.onSlideRemove?.(action.newSlide.id);
-                    }
-                }
-            }
-            else {
-                const index = this.slides.findIndex(({ id }) => id === action.slide.id);
-                if (~index) {
-                    this.slides.splice(index, 1);
-                    this.onSlideRemove?.(action.slide.id);
-                    if (!this.slides.length && action.type === 'slideRemove') {
-                        let slide = this.buildEmptySlide();
-                        if (this.onSlideAdd) {
-                            slide = await this.onSlideAdd(slide);
-                            action.slide.id = slide.id;
-                        }
-                        this.slides.push(slide);
-                        this.setActiveSlide(slide.id);
-                        action.newSlide = slide;
-                    }
-                    else {
-                        this.setActiveSlide(this.slides[index > 0 ? index - 1 : 0].id);
-                    }
-                }
-            }
-        }
-        else if (action.type === 'layersGroup') {
-            const results = await Promise.all(action.actions.map((a) => this.applyChanges(a, type)));
-            return results.some((res) => res);
-        }
-        else if ('slideId' in action) {
-            const slide = this.slides.find(({ id }) => id === action.slideId);
-            if (!slide)
-                return false;
-            if (action.type === 'slide') {
-                this.doSlideUpdate(slide, action[type]);
-            }
-            else if (action.type === 'layersAdd' || action.type === 'layersRemove') {
-                if ((action.type === 'layersAdd' && type === 'redo') ||
-                    (action.type === 'layersRemove' && type === 'undo')) {
-                    const layers = await this.doLayersAdd(slide, action.layers);
-                    action.layers.forEach((layer, i) => (layer.id = layers[i].id));
-                }
-                else {
-                    this.doLayersRemove(slide, action.layers);
-                }
-            }
-            else if (action.type === 'layer') {
-                const layer = slide.layers.find(({ id }) => id === action.layer.id);
-                if (!layer)
-                    return false;
-                Object.assign(layer, action[type]);
-                if ('sortOrder' in action[type]) {
-                    this.sortLayers(slide.layers);
-                }
-                this.onLayerUpdate?.(action.slideId, action.layer.id, action.layer.type, action[type]);
-            }
-            else if (action.type === 'layerToSlideBackground') {
-                if ((type === 'redo' && !action.opposite) || (type === 'undo' && action.opposite)) {
-                    const { width, height, rotate, image, opacity, flipX, flipY, offsetX, offsetY } = action.imageLayer;
-                    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,
-                    };
-                    this.doBackgroundImageAdd(slide, backgroundImage);
-                    this.doLayersRemove(slide, [action.imageLayer]);
-                }
-                else {
-                    this.doBackgroundImageRemove(slide);
-                    const [layer] = await this.doLayersAdd(slide, [action.imageLayer]);
-                    action.imageLayer.id = layer.id;
-                }
-            }
-            else if (action.type === 'backgroundImage') {
-                this.doBackgroundImageUpdate(slide, action[type]);
-            }
-        }
-        return true;
-    }
-    historyReset() {
-        this.historyActions = [];
-        this.historyIndex = -1;
-    }
-    async historyPush(action) {
-        const done = await this.applyChanges(action, 'redo');
-        if (done) {
-            this.historyActions = [...this.historyActions.slice(0, this.historyIndex + 1), action];
-            this.historyIndex = this.historyActions.length - 1;
-        }
-        return done;
-    }
-    async historyUndo() {
-        if (this.historyIndex >= 0) {
-            const action = this.historyActions[this.historyIndex];
-            this.historyIndex--;
-            await this.applyChanges(action, 'undo');
-        }
-    }
-    async historyRedo() {
-        if (this.historyIndex < this.historyActions.length - 1) {
-            this.historyIndex++;
-            const action = this.historyActions[this.historyIndex];
-            await this.applyChanges(action, 'redo');
-        }
-    }
-    isLayerOutOfBounds(layer) {
-        const bbox = calculateBoundingBox(calculateLayerTransform(layer));
-        const scale = layer.scale || 1;
-        return (bbox.x > this.width ||
-            bbox.y > this.height ||
-            bbox.x + bbox.width * scale < 0 ||
-            bbox.y * scale + bbox.height < 0);
-    }
-}
-const presentationEditorKey = Symbol('presentationEditor');
-export function setPresentationEditorContext(presentationEditor) {
-    setContext(presentationEditorKey, presentationEditor);
-}
-export function getPresentationEditorContext() {
-    return getContext(presentationEditorKey);
-}