Untitled

import { fabric } from 'fabric';

window.initFabricCanvas = function (artworkUrl, livewireComponent) {
    return {
        artworkUrl,
        livewireComponent,
        init() {
            this.canvas = new fabric.Canvas('blushCanvas');
            this.loadArtwork();
            this.setupCanvasInteractions();
        },

        loadArtwork() {
            fabric.Image.fromURL(this.artworkUrl, img => {
                this.canvas.setBackgroundImage(img, this.canvas.renderAll.bind(this.canvas), {
                    scaleX: this.canvas.width / img.width,
                    scaleY: this.canvas.height / img.height
                });
            });
        },

        setupCanvasInteractions() {
            this.canvas.isDrawingMode = true;
            this.canvas.freeDrawingBrush.width = 10;
            this.canvas.freeDrawingBrush.color = 'white';

            document.getElementById('brushSize').addEventListener('input', e => {
                this.canvas.freeDrawingBrush.width = parseInt(e.target.value, 10);
            });

            document.getElementById('reset').addEventListener('click', () => {
                this.resetCanvas();
            });

            document.getElementById('undo').addEventListener('click', () => {
                this.undoLastAction();
            });

            document.getElementById('save').addEventListener('click', () => {
                this.saveDrawing();
            });
        },

        resetCanvas() {
            this.canvas.clear();
            this.loadArtwork();
        },

        undoLastAction() {
            const lastObject = this.canvas.getObjects().pop();
            if (lastObject) {
                this.canvas.remove(lastObject);
                this.canvas.renderAll();
            }
        },

        saveDrawing() {
            const grayBackground = new fabric.Rect({
                left: 0,
                top: 0,
                fill: 'gray',
                width: this.canvas.width,
                height: this.canvas.height
            });
            this.canvas.add(grayBackground);
            this.canvas.sendToBack(grayBackground);
            this.canvas.renderAll();

            const dataURL = this.canvas.toDataURL({
                format: 'png',
                quality: 1.0,
                left: 0,
                top: 0,
                width: this.canvas.width,
                height: this.canvas.height,
                multiplier: 1
            });




            return;
            Livewire.find(this.livewireComponent).set('photoMask', dataURL);
            Livewire.find(this.livewireComponent).set('open', false);

            this.canvas.remove(grayBackground);
            this.canvas.renderAll();
        },


    };
};