aico-image-editor/src/makeSortable.js

Combine multiple image into and create single combined image

import Sortable from 'sortablejs';
import { SortCommand } from './history/sortCommand';

function createSortableLayer(el) {
    
    let layersSortingStartArray;
    let sortable = Sortable.create(el,{
        // forceFallback: true,
        handle: '.layerblockmove',
        dataIdAttr: 'data-layer-id',
        onStart(event) {
            layersSortingStartArray = sortable.toArray().filter(item => item !== 'ignore');
        },
        onUpdate(event) {
            const layersSortingEndArray = sortable.toArray().filter(item => item !== 'ignore');
            sortableCanvas.sort(layersSortingEndArray);
            Alpine.store('canvas').isSaveButtonDisabled = false;
            canvasHistory.add(new SortCommand(sortable, layersSortingStartArray.slice(), layersSortingEndArray ));
            window.dispatchEvent(new CustomEvent('sort-objects-from-layer', {
                detail: {
                    layersSortingEndArray: layersSortingEndArray.slice().reverse(),
                }
            }))
        },
    });

    return sortable;
    
}

function createSortableThumbnail(el) {
    
    let canvasSortingStartArray;
    let sortableCanvas = new Sortable(el, {
        handle: '.layerblockmove',
        dataIdAttr: 'data-layer-id',
        onStart(event) {
            canvasSortingStartArray = sortableCanvas.toArray().filter(item => item !== 'ignore');
        },
        onUpdate(event) {
            const canvasSortingArray = sortableCanvas.toArray();
            // Synchronize sorting with layersSortingArray
            sortable.sort(canvasSortingArray);
            Alpine.store('canvas').isSaveButtonDisabled = false;
            canvasHistory.add(new SortCommand(sortableCanvas, canvasSortingStartArray.slice(), canvasSortingArray ));
            window.dispatchEvent(new CustomEvent('sort-objects-from-layer', {
                detail: {
                    layersSortingEndArray: canvasSortingArray.slice().reverse(),
                }
            }))
        }
    });
    return sortableCanvas;
}

export default {createSortableLayer, createSortableThumbnail};