aico-image-editor/src/components/controlBar/controlBar.js

Combine multiple image into and create single combined image

const loadControlBarHTML = () => import(/* webpackMode: "eager" */'./controlBar.html')

import { hotReloadAlpineComponent } from '../../hotReloader';
import { SortCommand } from '../../history/sortCommand';

import cropperBlock from '../cropperBlock/cropperBlock';

import initHTML from "../../initHTML";
initHTML('control-bar',  loadControlBarHTML)


document.addEventListener('alpine:init', function() {
    
    Alpine.data('cropperBlock',cropperBlock)
    
})


export default () => ({
    init() {
        if(module.hot) {
            module.hot.accept('./controlBar.html', function() {
                console.log('change detected')
                hotReloadAlpineComponent(this.$el.getRootNode().host ,loadControlBarHTML)
            }.bind(this));
        }
    },
   
    activeBlock: null,
    getSortedObjectsArray() {
        return  window.__canvas.getObjects().filter(obj => obj.name !== 'initOperationObj').map(obj => obj.id);
    },
    updateObjectsZIndex() {
        window.__canvas.getObjects().filter(obj => obj.name !== 'initOperationObj').forEach((obj, objIndex) => {
            obj.zIndex = objIndex;
        })
    },
    arrangeObjects(operation) {
        const activeObj = window.__canvas.getActiveObject();
        if(activeObj) {
            let cropSelectionRect = __canvas.getObjects().find(obj => obj.altName === 'cropRectangle');
            let layersSortingStartArray = this.getSortedObjectsArray();
            switch(operation) {
                case 'bringForward':
                    activeObj.bringForward();
                    
                    break;
                case 'bringToFront':
                    activeObj.bringToFront();
                    break;
                case 'sendBackwards':
                    activeObj.sendBackwards();
                    break;
                case 'sendToBack':
                    activeObj.sendToBack();
                    break;
                default:
                    break;
            }
            cropSelectionRect.bringToFront()
            this.updateObjectsZIndex()
            let layersSortingEndArray = this.getSortedObjectsArray();
            sortable.sort(layersSortingEndArray.reverse())
            sortableCanvas.sort(layersSortingEndArray.reverse())
            canvasHistory.add(new SortCommand(sortable, layersSortingStartArray.slice().reverse(), layersSortingEndArray.reverse() ));
        }
    },
   
    keydownHandler(evtobj) {
        //const evtobj = window.event ? window.event : e;

        if (evtobj.ctrlKey) {
            if (evtobj.keyCode == 219) {
                if(evtobj.altKey) {
                    this.arrangeObjects('sendToBack');
                } else {
                    this.arrangeObjects('sendBackwards');
                }
            }

            if (evtobj.keyCode == 221) {
                if(evtobj.altKey) {
                    this.arrangeObjects('bringToFront');
                } else {
                    this.arrangeObjects('bringForward');
                }
            }
        }
    },
    
})