canvas.js

import { fabric } from 'fabric'
import { clearObjects, sortObjects, transformHighlightedText, checkTextBoxHeight } from '../../components/canvas/utils'
import { PaddedHighlightingTextbox } from '../../components/canvas/textbox'

let mainTextBox = null
let mainTextBoxBackground = null

let personInfoText = null

let mainImage = null
let logoImage = null

let arrow = null

const redraw = async (canvas, options) => {
    clearObjects(
        [
            mainTextBox,
            mainTextBoxBackground,
            personInfoText,
            arrow
        ],
        canvas
    )

    canvas.preserveObjectStacking = true

    const textMarginLeft = Math.ceil(canvas.width * 0.14)
    const textMarginRight = Math.ceil(canvas.width * 0.075)

    let mainTextMarginBottom = Math.ceil(canvas.height * 0.06)
    const mainTextBackgroundMarginTop = Math.ceil(canvas.height * 0.14)
    const mainTextSize = Math.ceil(canvas.height * 0.0725)
    const mainTextHeightLimit = Math.ceil(mainTextSize * 3.3)
    const mainTextLineHeight = 1

    const nameTextSize = Math.ceil(canvas.height * 0.03)
    const nameTextMarginTop = Math.ceil(canvas.height * 0.015)
    const nameTextExtraBottomMargin = Math.ceil(canvas.height * 0.06)

    const arrowWidth = Math.ceil(canvas.width * 0.047)
    const arrowHeight = Math.ceil(canvas.width * 0.055)
    const arrowThickness = Math.ceil(canvas.width * 0.019)
    const arrowMarginLeft = Math.ceil(canvas.width * 0.08)
    const arrowMarginLeftExtra = Math.ceil(canvas.width * -0.01)
    const arrowMarginTop = Math.ceil(canvas.height * 0.011)

    const logoWidth = Math.ceil(canvas.width * 0.2)
    const logoSideMargin = Math.ceil(canvas.width * 0.07)

    if (options.mainText !== null) {
        /* BEGIN Name text render */

        if (options.personName !== null) {
            mainTextMarginBottom += nameTextExtraBottomMargin

            let styles = {
                0: {}
            }
            

            for (let position = 0; position < options.personName.length; position++) {
                styles[0][position] = {
                    fontWeight: 'bold'
                }
            }

            let nameText = options.personName;

            if (options.personPosition) {