@peteai/presentation-editor 0.0.2 → 0.0.4

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

@@ -1,29 +1,98 @@
 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 { calculateBoundingBox } from './layers/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';
-    slides = $state(cognitionSlides.map(cognitionSlideToJson)); // getSlides()
+    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();
-    clipboard = null;
-    slideSelected = $state(false);
-    activeLayer = $state();
     activeBackground = $state(false);
-    htmlEditor = $state.raw(null);
+    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);
@@ -41,7 +110,7 @@ export class PresentationEditor {
             Object.assign(this, options);
         }
         if (!this.slides.length) {
-            this.addSlide({ index: 0 });
+            this.addSlide();
         }
         // initial sorting
         this.sortSlides();
@@ -62,53 +131,184 @@ export class PresentationEditor {
         return {
             id: this.generateId(),
             sortOrder,
+            locked: false,
             backgroundColor: null,
+            backgroundImage: null,
+            backgroundLocked: false,
             layers: [],
         };
     }
-    addSlide({ slide = this.buildEmptySlide(), index = this.findSlideIndex(this.activeSlide.id) + 1, } = {}) {
+    async addSlide({ slide, index = this.findSlideIndex(this.activeSlide.id) + 1, } = {}) {
         if (this.mode !== 'multiple')
-            return;
+            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;
+            return false;
         const sortOrder = nextSlide && prevSlide
             ? (prevSlide.sortOrder + nextSlide.sortOrder) / 2
             : prevSlide
                 ? prevSlide.sortOrder + 1
                 : nextSlide.sortOrder - 1;
-        this.historyPush({ type: 'slideAdd', slide: { ...slide, sortOrder } });
+        return this.historyPush({ type: 'slideAdd', slide: { ...slide, sortOrder } });
     }
-    removeSlide(slide) {
+    removeSlide(slideId) {
         if (this.mode !== 'multiple')
-            return;
+            return false;
+        const slide = this.findSlide(slideId);
+        if (!slide || slide.locked)
+            return false;
         this.historyPush({ type: 'slideRemove', slide });
     }
-    duplicateSlide(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() })),
         };
-        this.addSlide({ slide: duplicate });
+        return this.addSlide({ slide: duplicate });
     }
-    async addImageLayer({ image, x, y, width, height, sortOrder, ...rest }) {
-        const imageLayer = {
+    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: 'image',
+            type: 'html',
             x,
             y,
             width,
             height,
-            image,
-            sortOrder: sortOrder ??
-                (this.activeSlide.layers.length
-                    ? this.activeSlide.layers[this.activeSlide.layers.length - 1].sortOrder + 1
-                    : 1),
+            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,
@@ -121,51 +321,66 @@ export class PresentationEditor {
             borderWidth: null,
             borderColor: null,
             ...rest,
+            x,
+            y,
         };
-        console.log('imageLayer', imageLayer);
-        this.historyPush({ type: 'layerAdd', layer: { ...imageLayer } });
+        console.log('imageLayer', layer);
+        return layer;
     }
-    addLayer({ layer, index = this.activeSlide.layers.length }) {
-        const prev = this.activeSlide.layers[index - 1];
-        const next = this.activeSlide.layers[index];
-        if (!prev && !next)
+    addLayers(slideId, layers, index) {
+        const slide = this.findSlide(slideId);
+        if (!slide || slide.locked)
             return;
-        const sortOrder = next && prev
-            ? (prev.sortOrder + next.sortOrder) / 2
-            : prev
-                ? prev.sortOrder + 1
-                : next.sortOrder - 1;
-        this.historyPush({ type: 'layerAdd', layer: { ...layer, sortOrder } });
-    }
-    duplicateLayer(layer) {
+        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 scale = layer.scale || 1;
-        const xIncrement = layer.x + (layer.width * scale) / 2 > this.width / 2 ? -increment : increment;
-        const yIncrement = layer.y + (layer.height * scale) / 2 > this.height / 2 ? -increment : increment;
+        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 = 1;
+        let iteration = 0;
         const tryToDuplicate = () => {
-            const duplicate = {
-                ...layer,
-                id: this.generateId(),
+            layers.forEach((layer, i) => Object.assign(duplicates[i], {
                 x: layer.x + xAdjust + xIncrement * iteration,
                 y: layer.y + yIncrement * iteration,
-            };
-            const occupied = this.activeSlide.layers.some((l) => l.x === duplicate.x &&
+            }));
+            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.height === duplicate.height &&
+                l.scale === duplicate.scale &&
+                l.rotate === duplicate.rotate));
             if (occupied) {
                 iteration++;
                 tryToDuplicate();
             }
-            else if (this.checkIfLayerInBounds(duplicate, true)) {
-                this.addLayer({ layer: duplicate });
+            else if (!duplicates.some((duplicate) => this.isLayerOutOfBounds(duplicate))) {
+                this.addLayers(this.activeSlide.id, duplicates);
             }
             else {
                 xAdjust += xIncrement;
                 iteration = 0;
-                const newX = layer.x + xAdjust;
+                const newX = groupBbox.x + xAdjust;
                 if (newX >= 0 && newX < this.width) {
                     tryToDuplicate();
                 }
@@ -173,41 +388,297 @@ export class PresentationEditor {
         };
         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.slides.find(({ id }) => id === slideId);
-        if (slide) {
-            this.setActiveLayer(null);
-            // this.historyReset();
-            this.activeSlide = slide;
-            this.slideSelected = true;
-            return slide;
+        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));
         }
     }
-    setActiveLayer(layer) {
+    clearActiveLayer() {
         this.activeAction = null;
-        this.activeLayer = layer;
         this.activeBackground = false;
         this.slideSelected = false;
+        this.activeLayerIds.clear();
+        this.activeGroupRotate = 0;
     }
     setActiveBackground(value) {
         this.activeAction = null;
-        this.activeLayer = 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 newSlide = { ...action.slide };
+                let slide = { ...action.slide };
                 if (this.onSlideAdd) {
-                    newSlide = await this.onSlideAdd(action.slide);
+                    slide = await this.onSlideAdd(slide);
+                    action.slide.id = slide.id;
                 }
-                this.slides.push(newSlide);
+                this.slides.push(slide);
                 this.sortSlides();
-                this.setActiveSlide(newSlide.id);
+                this.setActiveSlide(slide.id);
                 if (action.type === 'slideRemove' && action.newSlide) {
                     const slideId = action.newSlide.id;
                     const index = this.slides.findIndex(({ id }) => id === slideId);
@@ -223,13 +694,14 @@ export class PresentationEditor {
                     this.slides.splice(index, 1);
                     this.onSlideRemove?.(action.slide.id);
                     if (!this.slides.length && action.type === 'slideRemove') {
-                        let newSlide = this.buildEmptySlide();
+                        let slide = this.buildEmptySlide();
                         if (this.onSlideAdd) {
-                            newSlide = await this.onSlideAdd(action.slide);
+                            slide = await this.onSlideAdd(slide);
+                            action.slide.id = slide.id;
                         }
-                        this.slides.push(newSlide);
-                        this.setActiveSlide(newSlide.id);
-                        action.newSlide = newSlide;
+                        this.slides.push(slide);
+                        this.setActiveSlide(slide.id);
+                        action.newSlide = slide;
                     }
                     else {
                         this.setActiveSlide(this.slides[index > 0 ? index - 1 : 0].id);
@@ -237,68 +709,83 @@ export class PresentationEditor {
                 }
             }
         }
-        else {
+        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;
-            if (this.mode === 'multiple' && action.type === 'slide') {
-                Object.assign(slide, action[type]);
-                if ('sortOrder' in action[type]) {
-                    this.sortSlides();
-                }
-                this.onSlideUpdate?.(action.slideId, action[type]);
+                return false;
+            if (action.type === 'slide') {
+                this.doSlideUpdate(slide, action[type]);
             }
-            else if (action.type === 'layerAdd' || action.type === 'layerRemove') {
-                if ((action.type === 'layerAdd' && type === 'redo') ||
-                    (action.type === 'layerRemove' && type === 'undo')) {
-                    let layer = { ...action.layer };
-                    if (this.onLayerAdd) {
-                        layer = await this.onLayerAdd(action.slideId, action.layer);
-                    }
-                    slide.layers.push(layer);
-                    this.sortLayers(slide.layers);
-                    this.setActiveLayer(layer);
+            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 {
-                    const index = slide.layers.findIndex(({ id }) => id === action.layer.id);
-                    if (~index) {
-                        slide.layers.splice(index, 1);
-                        this.onLayerRemove?.(action.slideId, action.layer.id, action.layer.type);
-                    }
+                    this.doLayersRemove(slide, action.layers);
                 }
             }
-            else if (!action.type || action.type === 'layer') {
+            else if (action.type === 'layer') {
                 const layer = slide.layers.find(({ id }) => id === action.layer.id);
                 if (!layer)
-                    return;
+                    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(newAction, slideId) {
-        const action = { ...newAction, slideId: slideId ?? this.activeSlide.id };
-        this.historyActions = [...this.historyActions.slice(0, this.historyIndex + 1), action];
-        this.historyIndex = this.historyActions.length - 1;
-        await this.applyChanges(action, 'redo');
+    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');
-            if (this.activeLayer) {
-                if (action.type === 'layerAdd' && action.layer.id === this.activeLayer.id) {
-                    this.setActiveLayer(null);
-                }
-            }
         }
     }
     async historyRedo() {
@@ -306,41 +793,15 @@ export class PresentationEditor {
             this.historyIndex++;
             const action = this.historyActions[this.historyIndex];
             await this.applyChanges(action, 'redo');
-            if (this.activeLayer) {
-                if (action.type === 'layerRemove' && action.layer.id === this.activeLayer.id) {
-                    this.setActiveLayer(null);
-                }
-            }
         }
     }
-    async removeBackground() {
-        await this.historyPush({
-            type: 'slide',
-            undo: { backgroundColor: this.activeSlide.backgroundColor },
-            redo: { backgroundColor: null },
-        });
-    }
-    async removeLayer(layer) {
-        await this.historyPush({
-            type: 'layerRemove',
-            layer: this.activeAction?.layer ?? layer,
-        });
-        this.setActiveLayer(null);
-        return true;
-    }
-    checkIfLayerInBounds(layer, check = false) {
-        const bBox = calculateBoundingBox(layer);
+    isLayerOutOfBounds(layer) {
+        const bbox = calculateBoundingBox(calculateLayerTransform(layer));
         const scale = layer.scale || 1;
-        if (bBox.x > this.width ||
-            bBox.y > this.height ||
-            bBox.x + bBox.width * scale < 0 ||
-            bBox.y * scale + bBox.height < 0) {
-            if (!check) {
-                this.removeLayer(layer);
-            }
-            return false;
-        }
-        return true;
+        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');