Method constructor

ui/media/js/image-editor.js:432–546

(popup, inpainter = false)

class ImageEditor {
    constructor(popup, inpainter = false) {
        this.inpainter = inpainter
        this.popup = popup
        this.history = new EditorHistory(this)
        if (inpainter) {
            this.popup.classList.add("inpainter")
        }
        this.drawing = false
        this.temp_previous_tool = null // used for the ctrl-colorpicker functionality
        this.container = popup.querySelector(".editor-controls-center > div")
        this.layers = {}
        var layer_names = ["background", "drawing", "overlay"]
        layer_names.forEach((name) => {
            let canvas = document.createElement("canvas")
            canvas.className = `editor-canvas-${name}`
            this.container.appendChild(canvas)
            this.layers[name] = {
                name: name,
                canvas: canvas,
                ctx: canvas.getContext("2d"),
            }
        })
        this.containerScale = 1.0

        // add mouse handlers
        this.container.addEventListener("mousedown", this.mouseHandler.bind(this))
        this.container.addEventListener("mouseup", this.mouseHandler.bind(this))
        this.container.addEventListener("mousemove", this.mouseHandler.bind(this))
        this.container.addEventListener("mouseout", this.mouseHandler.bind(this))
        this.container.addEventListener("mouseenter", this.mouseHandler.bind(this))

        this.container.addEventListener("touchstart", this.mouseHandler.bind(this))
        this.container.addEventListener("touchmove", this.mouseHandler.bind(this))
        this.container.addEventListener("touchcancel", this.mouseHandler.bind(this))
        this.container.addEventListener("touchend", this.mouseHandler.bind(this))

        // initialize editor controls
        this.options = {}
        this.optionElements = {}
        IMAGE_EDITOR_SECTIONS.forEach((section) => {
            section.id = `image_editor_${section.name}`
            var sectionElement = document.createElement("div")
            sectionElement.className = section.id

            var title = document.createElement("h4")
            title.innerText = section.title
            sectionElement.appendChild(title)

            var optionsContainer = document.createElement("div")
            optionsContainer.classList.add("editor-options-container")

            this.optionElements[section.name] = []
            section.options.forEach((option, index) => {
                var optionHolder = document.createElement("div")
                var optionElement = document.createElement("div")
                optionHolder.appendChild(optionElement)
                section.initElement(optionElement, option)
                optionElement.addEventListener("click", (target) => this.selectOption(section.name, index))