canvas.js

import { fabric } from 'fabric'
import { clearObjects, sortObjects, transformHighlightedText, checkTextBoxHeight } from '../../components/canvas/utils'
import { PaddedHighlightingTextbox } from '../../components/canvas/textbox'
import overlayURL from '../../assets/template/poster/overlay.png'

let mainImage = null
let mainImageSource = null
let overlayImage = null

const redraw = async (canvas, options) => {
    clearObjects(
        [],
        canvas
    )

    canvas.preserveObjectStacking = true

    /* BEGIN Main image render */

    if (
        options.mainImage !== null
        && (
            !canvas.contains(mainImage)
            || (
                mainImage === null
                || options.mainImage.src !== mainImageSource
            )
        )
    ) {
        if (mainImage !== null) {
            canvas.remove(mainImage)
        }

        mainImage = new fabric.Image(
            options.mainImage,
            {
                left: 0,
                top: 0,
                zIndex: 10
            }
        )

        mainImage.controls = {
            ...fabric.Image.prototype.controls,
            mtr: new fabric.Control({ visible: false })
        }

        if (mainImage.width >= mainImage.height) {
            mainImage.scaleToHeight(canvas.height)
        } else {
            mainImage.scaleToWidth(canvas.width)
        }

        canvas.add(mainImage)
        mainImageSource = options.mainImage.src
        // canvas.centerObject(mainImage)
    } else if (
        mainImage !== null
        && options.mainImage === null
    ) {
        canvas.remove(mainImage)
    }

    /* END Main image render */

    /* BEGIN Overlay render */

    if (overlayImage === null) {
        overlayImage = new Image()

        await new Promise(resolve => {
            overlayImage.onload = () => {
                resolve()
            }

            overlayImage.src = overlayURL
        })

        overlayImage = new fabric.Image(
            overlayImage,
            {
                top: -20,  // FIXME: Why???? Fabric.js, what are you trying to tell me?!
                left: -20,
                zIndex: 20,
                selectable: false
            }
        )
        overlayImage.scaleToWidth(canvas.width + 22)

        canvas.add(overlayImage)
    }

    /* END Overlay render */

    sortObjects(canvas)
}

export default redraw