Function addImageGrabbing

ui/media/js/image-modal.js:92–125

(image)

    }

    const addImageGrabbing = (image) => {
        image?.addEventListener('mousedown', (e) => {
            if (!image.classList.contains("natural-zoom")) {
                e.stopPropagation()
                e.stopImmediatePropagation()
                e.preventDefault()

                imageContainer.classList.add("grabbing")
                state.start.x = e.pageX - imageContainer.offsetLeft
                state.scroll.x = imageContainer.scrollLeft
                state.start.y = e.pageY - imageContainer.offsetTop
                state.scroll.y = imageContainer.scrollTop
            }
        })

        image?.addEventListener('mouseup', stopGrabbing)
        image?.addEventListener('mouseleave', stopGrabbing)
        image?.addEventListener('mousemove', (e) => {
            if (imageContainer.classList.contains("grabbing")) {
                e.stopPropagation()
                e.stopImmediatePropagation()
                e.preventDefault()

                // Might need to increase this multiplier based on the image size to window size ratio
                // The default 1:1 is pretty slow
                const multiplier = 1.0

                const deltaX = e.pageX - imageContainer.offsetLeft - state.start.x
                imageContainer.scrollLeft = state.scroll.x - (deltaX * multiplier)
                const deltaY = e.pageY - imageContainer.offsetTop - state.start.y
                imageContainer.scrollTop = state.scroll.y - (deltaY * multiplier)
            }
        })
    }

    const clear = () => {
        imageContainer.innerHTML = ""