index.js

(() => {
    "use strict"

    // Parameters
    const saveInterval = 30 // Bbox recovery save in seconds **
    const fontBaseSize = 30 // Text size in pixels
    const fontColor = "rgb(124,173,91)" // Base font color
    const borderColor = "rgb(124,173,91)" // Base bbox border color
    const backgroundColor = "rgba(0, 116, 217,0.5)" // Base bbox fill color
    const markedFontColor = "#FF4136" // Marked bbox font color
    const markedBorderColor = "rgb(194,38,24)" // Marked bbox border color
    const markedBackgroundColor = "rgba(255, 133, 27, 0.2)" // Marked bbox fill color
    const minBBoxWidth = 5 // Minimal width of bbox
    const minBBoxHeight = 5 // Minimal height of bbox
    const scrollSpeed = 1.1 // Multiplying factor of wheel speed
    const minZoom = 0.1 // Smallest zoom allowed
    const maxZoom = 5 // Largest zoom allowed
    const edgeSize = 5 // Resize activation area in pixels
    const resetCanvasOnChange = true // Whether to return to default position and zoom on image change
    const defaultScale = 0.5 // Default zoom level for images. Can be overridden with fittedZoom
    const drawCenterX = true // Whether to draw a cross in the middle of bbox
    //const drawGuidelines = true // Whether to draw guidelines for cursor
    const fittedZoom = true // Whether to fit image in the screen by it's largest dimension. Overrides defaultScale

    // Main containers
    let canvas = null
    let images = {}
    let classes = {}
    let bboxes = {}

    //image extensions
    const extensions = ["jpg", "jpeg", "png", "JPG", "JPEG", "PNG", "gif"]

    //Initial state of annotation tool
    let currentImage = null
    let currentClass = null
    let currentBbox = null
    let imageListIndex = 0
    let classListIndex = 0

    // Scaling containers
    let scale = defaultScale
    let canvasX = 0
    let canvasY = 0
    let screenX = 0
    let screenY = 0

    // Mouse container initail state
    const mouse = {
        x: 0,
        y: 0,
        realX: 0,
        realY: 0,
        buttonL: false,
        buttonR: false,
        startRealX: 0,
        startRealY: 0
    }

   // https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event
    // Prevent context menu on right click - it's used for panning
    document.addEventListener("contextmenu", function (e) {
        e.preventDefault()
    }, false)

    //To check local storage support in browser
    //https://blog.logrocket.com/localstorage-javascript-complete-guide/#:~:text=To%20be%20sure%20the%20browser,%2F%2F%20No%20web%20storage%20Support.%20%7D
   //https://stackoverflow.com/questions/11214404/how-to-detect-if-browser-supports-html5-local-storage
    const isSupported = () => {
        try {
            //if random value supported in local storage then bbox data will
            //only store
            const key = "__some_random_key_1234%(*^()^)___"
            //set item store data in key value pair localstorage behave like object
            localStorage.setItem(key, key)
            //remove item from local storage
            localStorage.removeItem(key)
            return true
        } catch (e) {
            return false
        }
    }

    // Save bounding boxes to local storage every X seconds
    if (isSupported() === true) {
        setInterval(() => {
            if (Object.keys(bboxes).length > 0) {
                // store arrays or objects,have to convert to strings.To do this, the JSON.stringify() method before passing to setItem().
                localStorage.setItem("bboxes", JSON.stringify(bboxes))
            }
        }, saveInterval * 1000)
    } else {
        alert("Restore function is not supported. If you need it, use Chrome or Firefox instead.")
    }

    // Start everything
    //onreadystatechange https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState
    //Document.readyState property describes the loading state of the document.
    document.onreadystatechange = () => {
        //complete-e document and all sub-resources have finished loading.
        if (document.readyState === "complete") {
            listenCanvas()
            listenCanvasMouse()
            listenImageLoad()
            listenImageSelect()
            listenClassLoad()
            listenClassSelect()
            //listenBboxLoad()
            //listenBboxSave()
            //listenBboxVocSave()
            //listenBboxCocoSave()
            listenKeyboard()
            listenImageCrop()
        }
    }

    // Listen to canvas events
    const listenCanvas = () => {
        //clientwidth-clientWidth property returns the viewable width of an element in pixels, including padding, but not the border, scrollbar or margin.
        //https://www.w3schools.com/jsref/prop_element_clientwidth.asp
        //innerHeight-returns the interior height of the window in pixels, including the height of the horizontal scroll bar, if present.
        //https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight
        //Canvas is constructor defined in canvas.js file
        canvas = new Canvas("canvas", document.getElementById("right").clientWidth-10, window.innerHeight - 40)

        // canvas.on event defined in canvas.js as event 
        canvas.on("draw", (context) => {
            if (currentImage !== null) {
                drawImage(context)
                drawNewBbox(context)
                drawExistingBboxes(context)
                drawCross(context)
            }
            else {
                drawIntro(context)
            }
        }).start()
    }

    //draw image on screen using canvas or display image  
    const drawImage = (context) => {
        //set image coordinate to zoom till current image size
        //zoomX(0) and zoomY(0) setting origin of image
        //<canvas> element has only two attributes, width and height
        context.drawImage(currentImage.object, zoomX(0), zoomY(0), zoom(currentImage.width), zoom(currentImage.height))

    }
    
    //drawIntro not work if comment down
    const drawIntro = (context) => {
        context.font = "30px Verdana";

        //createLinearGradient(x1, y1, x2, y2)
        //Creates a linear gradient object with a starting point of 
        //(x1, y1) and an end point of (x2, y2).
        var gradient = context.createLinearGradient(0, 0, canvas.width, 0);
       //assign colors to canvas gradient
        gradient.addColorStop("0"," magenta");
        gradient.addColorStop("0.5", "blue");
        gradient.addColorStop("1.0", "red");
        // Fill with gradient- Sets the style used when filling shapes.
        context.fillStyle = gradient;
        //Sets the style used when filling text.
        context.fillText("Please load your images (jpg, png).", zoomX(canvas.width/2), zoomY(canvas.height/2));
       
    }
    //draw new bounding boxes
    const drawNewBbox = (context) => {
        if (mouse.buttonL === true && currentClass !== null && currentBbox === null) {
            //destructuring in js to get width height of bbox
            const { width, height } = newFunction()

            //set bounding box styles
            setBBoxStyles(context, true)
            //making rectangular bounding boxes
            context.strokeRect(zoomX(mouse.startRealX), zoomY(mouse.startRealY), zoom(width), zoom(height))
            //fill rectangular bounding boxes
            context.fillRect(zoomX(mouse.startRealX), zoomY(mouse.startRealY), zoom(width), zoom(height))
            //set + sign inside Bboxes
            drawX(context, mouse.startRealX, mouse.startRealY, width, height)
            //set coordinate of Bboxes
            setBboxCoordinates(mouse.startRealX, mouse.startRealY, width, height)
        }

        function newFunction() {
            console.log(mouse.realX, mouse.realY)
            //mouse down to draw bboxes to position till bbox size increase
            //during mouse down 
            //mouse down =mouse.startreal value 
            //size till bbox increase = mouse.real value
            const width = (mouse.realX - mouse.startRealX)
            const height = (mouse.realY - mouse.startRealY)
            return { width, height }
        }
    }

    //draw Bboxes of same class
    const drawExistingBboxes = (context) => {
       //console.log(currentImage.name)
        const currentBboxes = bboxes[currentImage.name]

        for (let className in currentBboxes) {
            currentBboxes[className].forEach(bbox => {
                //https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors#gradients
                setFontStyles(context, bbox.marked)

                context.fillText(className, zoomX(bbox.x), zoomY(bbox.y - 2))

                setBBoxStyles(context, bbox.marked)
                context.strokeRect(zoomX(bbox.x), zoomY(bbox.y), zoom(bbox.width), zoom(bbox.height))
                context.fillRect(zoomX(bbox.x), zoomY(bbox.y), zoom(bbox.width), zoom(bbox.height))

                drawX(context, bbox.x, bbox.y, bbox.width, bbox.height)

                if (bbox.marked === true) {
                    setBboxCoordinates(bbox.x, bbox.y, bbox.width, bbox.height)
                }
            })
        }
    }

    //for setting + sign between bboxes
    const drawX = (context, x, y, width, height) => {
        if (drawCenterX === true) {
            const centerX = x + width / 2
            const centerY = y + height / 2
            //https://www.w3schools.com/tags/canvas_lineto.asp
            //start drawinging
            context.beginPath()
            //move to start position 
            context.moveTo(zoomX(centerX), zoomY(centerY - 10))
            //from start to this postion
            context.lineTo(zoomX(centerX), zoomY(centerY + 10))
            //then make line between them
            context.stroke()

            context.beginPath()
            context.moveTo(zoomX(centerX - 10), zoomY(centerY))
            context.lineTo(zoomX(centerX + 10), zoomY(centerY))
            context.stroke()
        }
    }

    //cross axis line
    const drawCross = (context) => { 

        if (inside_image(0, 0, currentImage.width, currentImage.height, mouse.realX, mouse.realY) === true) {
            context.setLineDash([5])

            //draw vertical axis
             context.beginPath()
             context.moveTo(zoomX(mouse.realX), zoomY(0))
             context.lineTo(zoomX(mouse.realX), zoomY(currentImage.height))
             context.stroke()

            //draw horizontal axis
            context.beginPath()
            context.moveTo(zoomX(0), zoomY(mouse.realY))
            context.lineTo(zoomX(currentImage.width), zoomY(mouse.realY))
            context.stroke()
        }
    }
    //move pointer only inside image for this cross must draw inside and
    //bboxes would draw inside image
    const inside_image = (x, y, width, height, x_, y_) => {
         //check four condition two for each x or y coordinate
        //mouse real position greater than origin of image
        //mouse real position less than width of image
        return x_ >= x && x_ <= x + width && y_ >= y && y_ <= y + height
    }

    //styles of bboxes
    const setBBoxStyles = (context, marked) => {
        // initialise with empty array so that no dash appear in 
        //Bounding box
        //Returns the current line dash pattern array containing an even number of non-negative numbers.
        context.setLineDash([])

        //strokeStyleSets - the style for shapes' outlines.
        if (marked === false) {
            //strokestyle is for border of bbox
            context.strokeStyle = borderColor
            //fillstyle for inner background color of bbox
            context.fillStyle = backgroundColor
        } else {
            context.strokeStyle = markedBorderColor
            context.fillStyle = markedBackgroundColor
        }
    }
    
    //set coordinates of Bboxes
    const setBboxCoordinates = (x, y, width, height) => {
        //bbox first coordinate when mouse down i.e mouse start position
        //bbox coordinate 2nd coordinate is mouse last position when mouse down
        // i.e, mouse real position
        const x2 = x + width
        const y2 = y + height

        document.getElementById("bboxInformation").innerHTML = `Bounding Box Dimension ${width}x${height} (${x}, ${y}) (${x2}, ${y2})`
    }

    //set font styles
    const setFontStyles = (context, marked) => {
        if (marked === false) {
            context.fillStyle = fontColor
        } else {
            context.fillStyle = markedFontColor
        }
      
         // replacing base font size with  context of zoom size of image
        context.font = context.font.replace(/\d+px/, `${zoom(fontBaseSize)}px`)
    }

     //listener for mouse different position of mouse used in this project
    // to give desired output
    const listenCanvasMouse = () => {
        canvas.element.addEventListener("wheel", trackWheel, { passive: false })
        canvas.element.addEventListener("mousemove", trackPointer)
        canvas.element.addEventListener("mousedown", trackPointer)
        canvas.element.addEventListener("mouseup", trackPointer)
        canvas.element.addEventListener("mouseout", trackPointer)
        
    }

    //track wheel
    const trackWheel = (event) => {
        //https://www.w3schools.com/jsref/event_wheel_deltay.asp
        //a negative value when scrolling up (reduce size)
        if (event.deltaY < 0) {
            scale = Math.min(maxZoom, scale * scrollSpeed)
            
        }
       // a positive value when scrolling down (increase size zoom)
         else {
            scale = Math.max(minZoom, scale * (1 / scrollSpeed))
        }

        canvasX = mouse.realX
        canvasY = mouse.realY
        screenX = mouse.x
        screenY = mouse.y

        mouse.realX = zoomXInv(mouse.x)
        mouse.realY = zoomYInv(mouse.y)

        event.preventDefault()
    }

    const trackPointer = (event) => {
        //https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
        //getBoundingClientRect() give position of top right left bottom
        mouse.bounds = canvas.element.getBoundingClientRect()
        //Output the coordinates of the mouse pointer when the mouse button is clicked on an element
        //event.clientX = Get the horizontal coordinate
        //event.clientY = Get the vertical coordinate
        mouse.x = event.clientX - mouse.bounds.left
        mouse.y = event.clientY - mouse.bounds.top

        const xx = mouse.realX
        const yy = mouse.realY

        mouse.realX = zoomXInv(mouse.x)
        mouse.realY = zoomYInv(mouse.y)

        if (event.type === "mousedown" && inside_image(0, 0, currentImage.width, currentImage.height, mouse.realX, mouse.realY) === true) {
            mouse.startRealX = mouse.realX
            mouse.startRealY = mouse.realY
           // https://stackoverflow.com/questions/56199283/how-to-catch-mouse-left-button-on-mouseover-event
             //it points right button of mouse
            if (event.which === 3) {
                mouse.buttonR = true
            } 
           //it points left button of mouse
          else if (event.which === 1) {
                mouse.buttonL = true
           }
        } 
        else if (event.type === "mouseup" || event.type === "mouseout") {
            if (mouse.buttonL === true && currentImage !== null && currentClass !== null && inside_image(0, 0, currentImage.width, currentImage.height, mouse.realX, mouse.realY) === true) {
                const movedWidth = Math.max((mouse.startRealX - mouse.realX), (mouse.realX - mouse.startRealX))
                const movedHeight = Math.max((mouse.startRealY - mouse.realY), (mouse.realY - mouse.startRealY))

                if (movedWidth > minBBoxWidth && movedHeight > minBBoxHeight && inside_image(0, 0, currentImage.width, currentImage.height, mouse.realX, mouse.realY) === true) { // Only add if bbox is big enough
                    if (currentBbox === null) { // Add only when no other bbox is selected
                        storeNewBbox(movedWidth, movedHeight)
                    } else { // Bbox was moved or resized - update original data
                        updateBboxAfterTransform()
                    }
                } else { // (un)Mark a bbox
                    setBboxMarkedState()
                    if (currentBbox !== null) { // Bbox was moved or resized - update original data
                        updateBboxAfterTransform()
                    }
                }
            }

            mouse.buttonR = false
            mouse.buttonL = false
        }

        moveBbox()
        resizeBbox()
        changeCursorByLocation()
        panImage(xx, yy)
    }

    //after drawing every bounding box will get store here in array
    const storeNewBbox = (movedWidth, movedHeight) => {
        const bbox = {
            x: Math.min(mouse.startRealX, mouse.realX),
            y: Math.min(mouse.startRealY, mouse.realY),
            width: movedWidth,
            height: movedHeight,
            marked: true,
            class: currentClass
        }
        
         // typeof operator returns a string indicating the type of the unevaluated operand.
        if (typeof bboxes[currentImage.name] === "undefined") {
            bboxes[currentImage.name] = {}
        }

        if (typeof bboxes[currentImage.name][currentClass] === "undefined") {
            bboxes[currentImage.name][currentClass] = []
        }
          //pushing bounding boxes in array object
        bboxes[currentImage.name][currentClass].push(bbox)

         //current bounding box property
        currentBbox = {
            bbox: bbox,
            index: bboxes[currentImage.name][currentClass].length - 1,
            originalX: bbox.x,
            originalY: bbox.y,
            originalWidth: bbox.width,
            originalHeight: bbox.height,
            moving: false,
            resizing: null
        }
    }

   //after resizigng bbox 
   const updateBboxAfterTransform = () => {
    if (currentBbox.resizing !== null && 
        inside_image(0, 0, currentImage.width, currentImage.height, mouse.realX, mouse.realY) === true) {
        if (currentBbox.bbox.width < 0) {
            currentBbox.bbox.width = Math.abs(currentBbox.bbox.width)
            currentBbox.bbox.x -= currentBbox.bbox.width
        }

        if (currentBbox.bbox.height < 0) {
            currentBbox.bbox.height = Math.abs(currentBbox.bbox.height)
            currentBbox.bbox.y -= currentBbox.bbox.height
        }

        currentBbox.resizing = null
    }

    currentBbox.bbox.marked = true
    currentBbox.originalX = currentBbox.bbox.x
    currentBbox.originalY = currentBbox.bbox.y
    currentBbox.originalWidth = currentBbox.bbox.width
    currentBbox.originalHeight = currentBbox.bbox.height
    currentBbox.moving = false
}


     //setting bbox marked state
     const setBboxMarkedState = () => {
        if (currentBbox === null || (currentBbox.moving === false && currentBbox.resizing === null) && inside_image(0, 0, currentImage.width, currentImage.height, mouse.realX, mouse.realY) === true) {
            const currentBboxes = bboxes[currentImage.name]

            let wasInside = false
            //Number.MAX_SAFE_INTEGER constant represents the maximum safe integer in JavaScript (2^53 - 1)
            let smallestBbox = Number.MAX_SAFE_INTEGER
            for (let className in currentBboxes) {
                for (let i = 0; i < currentBboxes[className].length; i++) {
                    const bbox = currentBboxes[className][i]

                    bbox.marked = false;
                    //endX=minm of (startRealX,RealX)-bbox.width
                    const endX = bbox.x + bbox.width
                    //endX=minm of (startRealY,RealY)-bbox.height
                    const endY = bbox.y + bbox.height
                    const size = bbox.width * bbox.height

                    //check bounding box which is further creating is inside other bbox
                    if (mouse.startRealX >= bbox.x && mouse.startRealX <= endX
                        && mouse.startRealY >= bbox.y && mouse.startRealY <= endY && 
                        inside_image(0, 0, currentImage.width, currentImage.height, mouse.realX, mouse.realY) === true) {

                        wasInside = true
                            console.log(bbox)
                        if (size < smallestBbox) { 
                            // Make sure select the inner if it's inside a bigger one
                            smallestBbox = size
                            currentBbox = {
                                bbox: bbox,
                                index: i,
                                originalX: bbox.x,
                                originalY: bbox.y,
                                originalWidth: bbox.width,
                                originalHeight: bbox.height,
                                moving: false,
                                resizing: null
                            }
                        }
                    }
                }
            }

            if (wasInside === false) { // No more selected bbox
                currentBbox = null
            }
        }
    }

    //move bounding boxes from one location to other
    const moveBbox = () => {
        if (mouse.buttonL === true && currentBbox !== null && inside_image(0, 0, currentImage.width, currentImage.height, mouse.realX, mouse.realY) === true) {
            const endX = currentBbox.bbox.x + currentBbox.bbox.width
            const endY = currentBbox.bbox.y + currentBbox.bbox.height

            // Only if pointer inside the bbox then only bbox will move
            //initial edgeSize is minm 5
            if (mouse.startRealX >= (currentBbox.bbox.x + edgeSize) && mouse.startRealX <= (endX - edgeSize)
                && mouse.startRealY >= (currentBbox.bbox.y + edgeSize) && mouse.startRealY <= (endY - edgeSize)) {

                currentBbox.moving = true
            }

            if (currentBbox.moving === true) {
                currentBbox.bbox.x = currentBbox.originalX + (mouse.realX - mouse.startRealX)
                currentBbox.bbox.y = currentBbox.originalY + (mouse.realY - mouse.startRealY)
            }
        }
    }

    const resizeBbox = () => {
        if (mouse.buttonL === true && currentBbox !== null && inside_image(0, 0, currentImage.width, currentImage.height, mouse.realX, mouse.realY) === true) {
           //getting all coordinates of four corner
           //x,y coordinates top
            const topLeftX = currentBbox.bbox.x
            const topLeftY = currentBbox.bbox.y
            //x,y coordinates bottom
            const bottomLeftX = currentBbox.bbox.x
            const bottomLeftY = currentBbox.bbox.y + currentBbox.bbox.height
            //x,y coordinates top right
            const topRightX = currentBbox.bbox.x + currentBbox.bbox.width
            const topRightY = currentBbox.bbox.y
            //x,y coordinate bottom right
            const bottomRightX = currentBbox.bbox.x + currentBbox.bbox.width
            const bottomRightY = currentBbox.bbox.y + currentBbox.bbox.height

            // Get correct corner
            if (mouse.startRealX >= (topLeftX - edgeSize) && mouse.startRealX <= (topLeftX + edgeSize)
                && mouse.startRealY >= (topLeftY - edgeSize) && mouse.startRealY <= (topLeftY + edgeSize)) {

                currentBbox.resizing = "topLeft"
            } else if (mouse.startRealX >= (bottomLeftX - edgeSize) && mouse.startRealX <= (bottomLeftX + edgeSize)
                && mouse.startRealY >= (bottomLeftY - edgeSize) && mouse.startRealY <= (bottomLeftY + edgeSize)) {

                currentBbox.resizing = "bottomLeft"
            } else if (mouse.startRealX >= (topRightX - edgeSize) && mouse.startRealX <= (topRightX + edgeSize)
                && mouse.startRealY >= (topRightY - edgeSize) && mouse.startRealY <= (topRightY + edgeSize)) {

                currentBbox.resizing = "topRight"
            } else if (mouse.startRealX >= (bottomRightX - edgeSize) && mouse.startRealX <= (bottomRightX + edgeSize)
                && mouse.startRealY >= (bottomRightY - edgeSize) && mouse.startRealY <= (bottomRightY + edgeSize)) {

                currentBbox.resizing = "bottomRight"
            }

            if (currentBbox.resizing === "topLeft") {
                currentBbox.bbox.x = mouse.realX
                currentBbox.bbox.y = mouse.realY
                currentBbox.bbox.width = currentBbox.originalX + currentBbox.originalWidth - mouse.realX
                currentBbox.bbox.height = currentBbox.originalY + currentBbox.originalHeight - mouse.realY
            } else if (currentBbox.resizing === "bottomLeft") {
                currentBbox.bbox.x = mouse.realX
                currentBbox.bbox.y = mouse.realY - (mouse.realY - currentBbox.originalY)
                currentBbox.bbox.width = currentBbox.originalX + currentBbox.originalWidth - mouse.realX
                currentBbox.bbox.height = mouse.realY - currentBbox.originalY
            } else if (currentBbox.resizing === "topRight") {
                currentBbox.bbox.x = mouse.realX - (mouse.realX - currentBbox.originalX)
                currentBbox.bbox.y = mouse.realY
                currentBbox.bbox.width = mouse.realX - currentBbox.originalX
                currentBbox.bbox.height = currentBbox.originalY + currentBbox.originalHeight - mouse.realY
            } else if (currentBbox.resizing === "bottomRight") {
                currentBbox.bbox.x = mouse.realX - (mouse.realX - currentBbox.originalX)
                currentBbox.bbox.y = mouse.realY - (mouse.realY - currentBbox.originalY)
                currentBbox.bbox.width = mouse.realX - currentBbox.originalX
                currentBbox.bbox.height = mouse.realY - currentBbox.originalY
            }
        }
    }

    const changeCursorByLocation = () => {
        if (currentImage !== null) {
            const currentBboxes = bboxes[currentImage.name]

            for (let className in currentBboxes) {
                for (let i = 0; i < currentBboxes[className].length; i++) {
                    const bbox = currentBboxes[className][i]

                    const endX = bbox.x + bbox.width
                    const endY = bbox.y + bbox.height

                    if (mouse.realX >= (bbox.x + edgeSize) && mouse.realX <= (endX - edgeSize)
                        && mouse.realY >= (bbox.y + edgeSize) && mouse.realY <= (endY - edgeSize)) {

                        document.body.style.cursor = "pointer"

                        break
                    } else {
                        document.body.style.cursor = "default"
                    }
                }
            }

            if (currentBbox !== null) {
                const topLeftX = currentBbox.bbox.x
                const topLeftY = currentBbox.bbox.y
                const bottomLeftX = currentBbox.bbox.x
                const bottomLeftY = currentBbox.bbox.y + currentBbox.bbox.height
                const topRightX = currentBbox.bbox.x + currentBbox.bbox.width
                const topRightY = currentBbox.bbox.y
                const bottomRightX = currentBbox.bbox.x + currentBbox.bbox.width
                const bottomRightY = currentBbox.bbox.y + currentBbox.bbox.height

                if (mouse.realX >= (topLeftX + edgeSize) && mouse.realX <= (bottomRightX - edgeSize)
                    && mouse.realY >= (topLeftY + edgeSize) && mouse.realY <= (bottomRightY - edgeSize)) {

                    document.body.style.cursor = "move"
                } else if (mouse.realX >= (topLeftX - edgeSize) && mouse.realX <= (topLeftX + edgeSize)
                    && mouse.realY >= (topLeftY - edgeSize) && mouse.realY <= (topLeftY + edgeSize)) {
                    document.body.style.cursor = "nwse-resize"

                } else if (mouse.realX >= (bottomLeftX - edgeSize) && mouse.realX <= (bottomLeftX + edgeSize)
                    && mouse.realY >= (bottomLeftY - edgeSize) && mouse.realY <= (bottomLeftY + edgeSize)) {

                    document.body.style.cursor = "nesw-resize"
                } else if (mouse.realX >= (topRightX - edgeSize) && mouse.realX <= (topRightX + edgeSize)
                    && mouse.realY >= (topRightY - edgeSize) && mouse.realY <= (topRightY + edgeSize)) {

                    document.body.style.cursor = "nesw-resize"
                } else if (mouse.realX >= (bottomRightX - edgeSize) && mouse.realX <= (bottomRightX + edgeSize)
                    && mouse.realY >= (bottomRightY - edgeSize) && mouse.realY <= (bottomRightY + edgeSize)) {

                    document.body.style.cursor = "nwse-resize"
                }
            }
        }
    }

    //drag image on screen for this context is disabled above
    const panImage = (xx, yy) => {
        if (mouse.buttonR === true) {
            canvasX -= mouse.realX - xx
            canvasY -= mouse.realY - yy

            mouse.realX = zoomXInv(mouse.x)
            mouse.realY = zoomYInv(mouse.y)
        }
    }

    //zoom function to zoom the image  or bbox on basis of width of height not coordinate
    const zoom = (number) => {
        return Math.floor(number * scale)
    }

    //zoom in x direction or  for x coordinate
    const zoomX = (number) => {
        return Math.floor((number - canvasX) * scale + screenX)
    }

    //zoom in y direction or for y coordinate
    const zoomY = (number) => {
        return Math.floor((number - canvasY) * scale + screenY)
    }

    const zoomXInv = (number) => {
        return Math.floor((number - screenX) * (1 / scale) + canvasX)
    }

    const zoomYInv = (number) => {
        return Math.floor((number - screenY) * (1 / scale) + canvasY)
    }

    const listenImageLoad = () => {
        document.getElementById("images").addEventListener("change", (event) => {
            const imageList = document.getElementById("imageList")

            const files = event.target.files

            if (files.length > 0) {
                resetImageList()
                document.body.style.cursor = "wait"

                for (let i = 0; i < files.length; i++) {
                    const nameParts = files[i].name.split(".")

                    if (extensions.indexOf(nameParts[nameParts.length - 1]) !== -1) {
                        images[files[i].name] = {
                            meta: files[i],
                            index: i
                        }

                        const option = document.createElement("option")

                        option.value = files[i].name
                        option.innerHTML = files[i].name

                        if (i === 0) {
                            option.selected = true
                        }

                        imageList.appendChild(option);
                    }
                }

                const imageArray = Object.keys(images)

                let async = imageArray.length

                for (let image in images) {
                    const reader = new FileReader()

                    reader.addEventListener("load", () => {
                        const imageObject = new Image()

                        imageObject.addEventListener("load", (event) => {
                            images[image].width = event.target.width
                            images[image].height = event.target.height

                            if (--async === 0) {
                                document.body.style.cursor = "default"

                                setCurrentImage(images[imageArray[0]])

                                if (Object.keys(classes).length > 0) {
                                    // document.getElementById("bboxes").disabled = false
                                    document.getElementById("restoreBboxes").disabled = false
                                }
                            }
                        })

                        imageObject.src = reader.result
                    })

                    reader.readAsDataURL(images[image].meta)
                }
            }
        })
    }

    const resetImageList = () => {

        document.getElementById("download").addEventListener("click", download);
        const imageList = document.getElementById("imageList")

        imageList.innerHTML = ""

        images = {}
        bboxes = {}
        currentImage = null
    }

    const setCurrentImage = (image) => {
        if (resetCanvasOnChange === true) {
            resetCanvasPlacement()
        }

        if (fittedZoom === true) {
            fitZoom(image)
        }

        const reader = new FileReader()

        reader.addEventListener("load", () => {
            const dataUrl = reader.result
            const imageObject = new Image()

            imageObject.addEventListener("load", () => {
                currentImage = {
                    name: image.meta.name,
                    object: imageObject,
                    width: image.width,
                    height: image.height
                }
            })

            imageObject.src = dataUrl

            document.getElementById("imageInformation")
                .innerHTML = `Selected Image dimension, Image size : ${image.width}x${image.height}, ${formatBytes(image.meta.size)}`
        })

        reader.readAsDataURL(image.meta)

        if (currentBbox !== null) {
            currentBbox.bbox.marked = false // We unmark via reference
            currentBbox = null // and the we delete
        }
    }

    const fitZoom = (image) => {
        if (image.width > image.height) {
            scale = canvas.width / image.width
        } else {
            scale = canvas.height / image.height
        }
    }

    const formatBytes = (bytes, decimals) => {
        if (bytes === 0) {
            return "0 Bytes"
        }

        const k = 1024
        const dm = decimals || 2
        const sizes = ["Bytes", "KB", "MB"]
        const i = Math.floor(Math.log(bytes) / Math.log(k))

        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i]
    }

    const listenImageSelect = () => {
        const imageList = document.getElementById("imageList")

        imageList.addEventListener("change", () => {
            imageListIndex = imageList.selectedIndex3
            setCurrentImage(images[imageList.options[imageListIndex].innerHTML])
        })
    }

    const listenClassLoad = () => {
        const classesElement = document.getElementById("classes")

        classesElement.addEventListener("click", () => {
            classesElement.value = null
        })

        classesElement.addEventListener("change", (event) => {
            const files = event.target.files

            if (files.length > 0) {
                resetClassList()

                const nameParts = files[0].name.split(".")

                if (nameParts[nameParts.length - 1] === "txt") {
                    const reader = new FileReader()

                    reader.addEventListener("load", () => {
                        const lines = reader.result

                        const rows = lines.split(/[\r\n]+/)

                        if (rows.length > 0) {
                            const classList = document.getElementById("classList")

                            for (let i = 0; i < rows.length; i++) {
                                rows[i] = rows[i].trim()

                                if (rows[i] !== "") {
                                    classes[rows[i]] = i

                                    const option = document.createElement("option")

                                    option.value = i
                                    option.innerHTML = rows[i]

                                    if (i === 0) {
                                        option.selected = true
                                        currentClass = rows[i]
                                    }

                                    classList.appendChild(option)
                                }
                            }

                            setCurrentClass()

                            if (Object.keys(images).length > 0) {
                                // document.getElementById("bboxes").disabled = false
                                document.getElementById("restoreBboxes").disabled = false
                            }
                        }
                    })

                    reader.readAsText(files[0])
                }
            }
        })
    }

    const resetClassList = () => {
        document.getElementById("classList").innerHTML = ""

        classes = {}
        currentClass = null
    }

    const setCurrentClass = () => {
        const classList = document.getElementById("classList")

        currentClass = classList.options[classList.selectedIndex].text

        if (currentBbox !== null) {
            currentBbox.bbox.marked = false // We unmark via reference
            currentBbox = null // and the we delete
        }
    }

    const listenClassSelect = () => {
        const classList = document.getElementById("classList")

        classList.addEventListener("change", () => {
            classListIndex = classList.selectedIndex

            setCurrentClass()
        })
    }

    // const listenBboxLoad = () => {
    //     const bboxesElement = document.getElementById("bboxes")

    //     bboxesElement.addEventListener("click", () => {
    //         bboxesElement.value = null
    //     })

    //     bboxesElement.addEventListener("change", (event) => {
    //         const files = event.target.files

    //         if (files.length > 0) {
    //             resetBboxes()

    //             for (let i = 0; i < files.length; i++) {
    //                 const reader = new FileReader()

    //                 const extension = files[i].name.split(".").pop()

    //                 reader.addEventListener("load", () => {
    //                     if (extension === "txt" || extension === "xml" || extension === "json") {
    //                         storeBbox(files[i].name, reader.result)
    //                     } else {
    //                         const zip = new JSZip()

    //                         zip.loadAsync(reader.result)
    //                             .then((result) => {
    //                                 for (let filename in result.files) {
    //                                     result.file(filename).async("string")
    //                                         .then((text) => {
    //                                             storeBbox(filename, text)
    //                                         })
    //                                 }
    //                             })
    //                     }
    //                 })

    //                 if (extension === "txt" || extension === "xml" || extension === "json") {
    //                     reader.readAsText(files[i])
    //                 } else {
    //                     reader.readAsArrayBuffer(event.target.files[i])
    //                 }
    //             }
    //         }
    //     })
    // }

    const resetBboxes = () => {
        bboxes = {}
    }

    // const storeBbox = (filename, text) => {
    //     let image = null
    //     let bbox = null

    //     const extension = filename.split(".").pop()

    //     if (extension === "txt" || extension === "xml") {
    //         for (let i = 0; i < extensions.length; i++) {
    //             const imageName = filename.replace(`.${extension}`, `.${extensions[i]}`)

    //             if (typeof images[imageName] !== "undefined") {
    //                 image = images[imageName]

    //                 if (typeof bboxes[imageName] === "undefined") {
    //                     bboxes[imageName] = {}
    //                 }

    //                 bbox = bboxes[imageName]

    //                 if (extension === "txt") {
    //                     const rows = text.split(/[\r\n]+/)

    //                     for (let i = 0; i < rows.length; i++) {
    //                         const cols = rows[i].split(" ")

    //                         cols[0] = parseInt(cols[0])

    //                         for (let className in classes) {
    //                             if (classes[className] === cols[0]) {
    //                                 if (typeof bbox[className] === "undefined") {
    //                                     bbox[className] = []
    //                                 }

    //                                 // Reverse engineer actual position and dimensions from yolo format
    //                                 const width = cols[3] * image.width
    //                                 const x = cols[1] * image.width - width * 0.5
    //                                 const height = cols[4] * image.height
    //                                 const y = cols[2] * image.height - height * 0.5

    //                                 bbox[className].push({
    //                                     x: Math.floor(x),
    //                                     y: Math.floor(y),
    //                                     width: Math.floor(width),
    //                                     height: Math.floor(height),
    //                                     marked: false,
    //                                     class: className
    //                                 })

    //                                 break
    //                             }
    //                         }
    //                     }
    //                 } else if (extension === "xml") {
    //                     const parser = new DOMParser()
    //                     const xmlDoc = parser.parseFromString(text, "text/xml")

    //                     const objects = xmlDoc.getElementsByTagName("object")

    //                     for (let i = 0; i < objects.length; i++) {
    //                         const objectName = objects[i].getElementsByTagName("name")[0].childNodes[0].nodeValue

    //                         for (let className in classes) {
    //                             if (className === objectName) {
    //                                 if (typeof bbox[className] === "undefined") {
    //                                     bbox[className] = []
    //                                 }

    //                                 const bndBox = objects[i].getElementsByTagName("bndbox")[0]

    //                                 const bndBoxX = bndBox.getElementsByTagName("xmin")[0].childNodes[0].nodeValue
    //                                 const bndBoxY = bndBox.getElementsByTagName("ymin")[0].childNodes[0].nodeValue
    //                                 const bndBoxMaxX = bndBox.getElementsByTagName("xmax")[0].childNodes[0].nodeValue
    //                                 const bndBoxMaxY = bndBox.getElementsByTagName("ymax")[0].childNodes[0].nodeValue

    //                                 bbox[className].push({
    //                                     x: parseInt(bndBoxX),
    //                                     y: parseInt(bndBoxY),
    //                                     width: parseInt(bndBoxMaxX) - parseInt(bndBoxX),
    //                                     height: parseInt(bndBoxMaxY) - parseInt(bndBoxY),
    //                                     marked: false,
    //                                     class: className
    //                                 })

    //                                 break
    //                             }
    //                         }
    //                     }
    //                 }
    //             }
    //         }
    //     } else {
    //         const json = JSON.parse(text)

    //         for (let i = 0; i < json.annotations.length; i++) {
    //             let imageName = null
    //             let categoryName = null

    //             for (let j = 0; j < json.images.length; j++) {
    //                 if (json.annotations[i].image_id === json.images[j].id) {
    //                     imageName = json.images[j].file_name

    //                     if (typeof images[imageName] !== "undefined") {
    //                         image = images[imageName]

    //                         if (typeof bboxes[imageName] === "undefined") {
    //                             bboxes[imageName] = {}
    //                         }

    //                         bbox = bboxes[imageName]

    //                         break
    //                     }
    //                 }
    //             }

    //             for (let j = 0; j < json.categories.length; j++) {
    //                 if (json.annotations[i].category_id === json.categories[j].id) {
    //                     categoryName = json.categories[j].name

    //                     break
    //                 }
    //             }

    //             for (let className in classes) {
    //                 if (className === categoryName) {
    //                     if (typeof bbox[className] === "undefined") {
    //                         bbox[className] = []
    //                     }

    //                     const bboxX = json.annotations[i].bbox[0]
    //                     const bboxY = json.annotations[i].bbox[1]
    //                     const bboxWidth = json.annotations[i].bbox[2]
    //                     const bboxHeight = json.annotations[i].bbox[3]

    //                     bbox[className].push({
    //                         x: bboxX,
    //                         y: bboxY,
    //                         width: bboxWidth,
    //                         height: bboxHeight,
    //                         marked: false,
    //                         class: className
    //                     })

    //                     break
    //                 }
    //             }
    //         }
    //     }
    // }

    // const listenBboxSave = () => {
    //     document.getElementById("saveBboxes").addEventListener("click", () => {
    //         const zip = new JSZip()

    //         for (let imageName in bboxes) {
    //             const image = images[imageName]

    //             const name = imageName.split(".")

    //             name[name.length - 1] = "txt"

    //             const result = []

    //             for (let className in bboxes[imageName]) {
    //                 for (let i = 0; i < bboxes[imageName][className].length; i++) {
    //                     const bbox = bboxes[imageName][className][i]

    //                     // Prepare data for yolo format
    //                     const x = (bbox.x + bbox.width / 2) / image.width
    //                     const y = (bbox.y + bbox.height / 2) / image.height
    //                     const width = bbox.width / image.width
    //                     const height = bbox.height / image.height

    //                     result.push(`${classes[className]} ${x} ${y} ${width} ${height}`)
    //                 }
    //             }

    //             zip.file(name.join("."), result.join("\n"))
    //         }

    //         zip.generateAsync({ type: "blob" })
    //             .then((blob) => {
    //                 saveAs(blob, "bboxes_yolo.zip")
    //             })
    //     })
    // }

    // const listenBboxCocoSave = () => {
    //     document.getElementById("saveCocoBboxes").addEventListener("click", () => {
    //         const zip = new JSZip()

    //         const result = {
    //             images: [],
    //             type: "instances",
    //             annotations: [],
    //             categories: []
    //         }

    //         for (let className in classes) {
    //             result.categories.push({
    //                 supercategory: "none",
    //                 id: classes[className] + 1,
    //                 name: className
    //             })
    //         }

    //         for (let imageName in images) {
    //             result.images.push({
    //                 id: images[imageName].index + 1,
    //                 file_name: imageName, //eslint-disable-line camelcase
    //                 width: images[imageName].width,
    //                 height: images[imageName].height
    //             })
    //         }

    //         let id = 0

    //         for (let imageName in bboxes) {
    //             const image = images[imageName]

    //             for (let className in bboxes[imageName]) {
    //                 for (let i = 0; i < bboxes[imageName][className].length; i++) {
    //                     const bbox = bboxes[imageName][className][i]

    //                     const segmentation = [
    //                         bbox.x, bbox.y,
    //                         bbox.x, bbox.y + bbox.height,
    //                         bbox.x + bbox.width, bbox.y + bbox.height,
    //                         bbox.x + bbox.width, bbox.y
    //                     ]

    //                     result.annotations.push({
    //                         segmentation: segmentation,
    //                         area: bbox.width * bbox.height,
    //                         iscrowd: 0,
    //                         ignore: 0,
    //                         image_id: image.index + 1, //eslint-disable-line camelcase
    //                         bbox: [bbox.x, bbox.y, bbox.width, bbox.height],
    //                         category_id: classes[className] + 1, //eslint-disable-line camelcase
    //                         id: ++id
    //                     })
    //                 }
    //             }

    //             zip.file("bbox.json", JSON.stringify(result))
    //         }

    //         zip.generateAsync({ type: "blob" })
    //             .then((blob) => {
    //                 saveAs(blob, "bboxes_json.zip")
    //             })
    //     })
    // }

    const listenBboxRestore = () => {
        document.getElementById("restoreBboxes").addEventListener("click", () => {
            const item = localStorage.getItem("bboxes")
            console.log("restored")
            if (item) {
                bboxes = JSON.parse(item)
            }
        })
    }

    const listenKeyboard = () => {
        const imageList = document.getElementById("imageList")
        const classList = document.getElementById("classList")

        document.addEventListener("keydown", (event) => {
            const key = event.keyCode || event.charCode

            if (key === 46 || (key === 8 && event.metaKey === true)) {
                if (currentBbox !== null) {
                    bboxes[currentImage.name][currentBbox.bbox.class].splice(currentBbox.index, 1)
                    currentBbox = null

                    document.body.style.cursor = "default"
                }

                event.preventDefault()
            }

            if (key === 37) {
                if (imageList.length > 1) {
                    imageList.options[imageListIndex].selected = false

                    if (imageListIndex === 0) {
                        imageListIndex = imageList.length - 1
                    } else {
                        imageListIndex--
                    }

                    imageList.options[imageListIndex].selected = true
                    imageList.selectedIndex = imageListIndex

                    setCurrentImage(images[imageList.options[imageListIndex].innerHTML])

                    document.body.style.cursor = "default"
                }

                event.preventDefault()
            }

            if (key === 39) {
                if (imageList.length > 1) {
                    imageList.options[imageListIndex].selected = false

                    if (imageListIndex === imageList.length - 1) {
                        imageListIndex = 0
                    } else {
                        imageListIndex++
                    }

                    imageList.options[imageListIndex].selected = true
                    imageList.selectedIndex = imageListIndex

                    setCurrentImage(images[imageList.options[imageListIndex].innerHTML])

                    document.body.style.cursor = "default"
                }

                event.preventDefault()
            }

            if (key === 38) {
                if (classList.length > 1) {
                    classList.options[classListIndex].selected = false

                    if (classListIndex === 0) {
                        classListIndex = classList.length - 1
                    } else {
                        classListIndex--
                    }

                    classList.options[classListIndex].selected = true
                    classList.selectedIndex = classListIndex

                    setCurrentClass()
                }

                event.preventDefault()
            }

            if (key === 40) {
                if (classList.length > 1) {
                    classList.options[classListIndex].selected = false

                    if (classListIndex === classList.length - 1) {
                        classListIndex = 0
                    } else {
                        classListIndex++
                    }

                    classList.options[classListIndex].selected = true
                    classList.selectedIndex = classListIndex

                    setCurrentClass()
                }

                event.preventDefault()
            }
        })
    }

    const resetCanvasPlacement = () => {
        scale = defaultScale
        canvasX = 0
        canvasY = 0
        screenX = 0
        screenY = 0

        mouse.x = 0
        mouse.y = 0
        mouse.realX = 0
        mouse.realY = 0
        mouse.buttonL = 0
        mouse.buttonR = 0
        mouse.startRealX = 0
        mouse.startRealY = 0
    }

    const listenImageCrop = () => {
        document.getElementById("cropImages").addEventListener("click", () => {
            const zip = new JSZip()

            let x = 0

            for (let imageName in bboxes) {
                const image = images[imageName]

                for (let className in bboxes[imageName]) {
                    for (let i = 0; i < bboxes[imageName][className].length; i++) {
                        x++

                        if (x === 1) {
                            document.body.style.cursor = "wait" // Mark as busy
                        }

                        const bbox = bboxes[imageName][className][i]

                        const reader = new FileReader()

                        reader.addEventListener("load", () => {
                            const dataUrl = reader.result
                            const imageObject = new Image()

                            imageObject.addEventListener("load", () => {
                                const temporaryCanvas = document.createElement("canvas")

                                temporaryCanvas.style.display = "none"
                                temporaryCanvas.width = bbox.width
                                temporaryCanvas.height = bbox.height

                                temporaryCanvas.getContext("2d").drawImage(
                                    imageObject,
                                    bbox.x,
                                    bbox.y,
                                    bbox.width,
                                    bbox.height,
                                    0,
                                    0,
                                    bbox.width,
                                    bbox.height
                                )

                                temporaryCanvas.toBlob((blob) => {
                                    const imageNameParts = imageName.split(".")

                                    imageNameParts[imageNameParts.length - 2] += `-${className}-${i}`

                                    zip.file(imageNameParts.join("."), blob)

                                    if (--x === 0) {
                                        document.body.style.cursor = "default"

                                        zip.generateAsync({ type: "blob" })
                                            .then((blob) => {
                                                saveAs(blob, "crops.zip")
                                            })
                                    }
                                }, image.meta.type)
                            })

                            imageObject.src = dataUrl
                        })

                        reader.readAsDataURL(image.meta)
                    }
                }
            }
        })
    }

    function download() {


        //Make a Canvas to copy the data you would like to download to
        var hidden_canv = document.createElement('canvas');
        hidden_canv.style.display = 'none';
        document.body.appendChild(hidden_canv);
        hidden_canv.width = currentImage.width;
        hidden_canv.height = currentImage.height;

        //Draw the data you want to download to the hidden canvas
        var hidden_ctx = hidden_canv.getContext('2d');
        var img = new Image();
        canvas.renderCanvasElements();
        img.src = canvas.toImage("png");
        console.log(img.src);
        hidden_ctx.drawImage(
            currentImage.object, 
            zoomX(0),//Start Clipping
            zoomY(0),//Start Clipping
            currentImage.width,//Clipping Width
            currentImage.height,//Clipping Height
            0,//Place X
            0,//Place Y
            hidden_canv.width,//Place Width
            hidden_canv.height//Place Height
        );



        //Create a download URL for the data
        var hidden_data = hidden_canv.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
        
        var image =  hidden_data;
        const link = document.createElement("a");
        link.href = image;
        link.download = "image.png";
        link.click();
      }


})()