Tumortisch-Dist/resources/app/node_modules/iwmlib/lib/popup.js

/* eslint-disable no-console */
/* eslint-disable no-case-declarations */
/* eslint-disable no-unused-vars */
import { Elements } from './utils.js'
import Poppable from './poppable.js'

/** A Popup that shows text labels, images, or html
 */
export default class Popup extends Poppable {
    /**
     * Creates an instance of Popup.
     * @param {any} [{
     *     parent = null,     - The DOM parent element.
     *     content = null,    - A dict object with type strings (text, img, html) as keys
     *                       and corresponding values.
     *     context = window,    - A context object for poppable elements
     *     fontSize = "1em",  - Describes the font size as CSS value
     *     fontFamily = "Arial", - Describes the font family as CSS value
     *     padding = 16,      - {number || string} padding - Describes the padding as CSS value
     *     notchSize = 10,    - {number || string} notchSize - Describes the size of the notch (callout) as CSS value
     *     switchPos = false,
     *     minWidth = null,
     *     maxWidth = 800,
     *     backgroundColor = "#EEE",  - The color of the background as CSS value
     *     normalColor = "#444", - normalColor  - The color of textitems as CSS value
     *     notchPosition = "bottomLeft",
     *     zIndex = 0,
     *     keepWithin = null, - Ensure that popup is visible within the bounds of the given container
     *     autoClose = true,  - Autoclose the Popup on tap
     *     closeIcon = null,
     *     resizeIcon = null,
     *     closeCommand = null,
     *     draggable = false
     *      noStyle = false - When true, prevents the popup from doing any aesthetic manipulations to the DOM leaving the styling completely to the style sheets.
     * }={}]
     * @memberof Popup
     */
    constructor({
        parent = null,
        content = null,
        context = window,
        fontSize = '1em',
        fontFamily = 'Arial',
        padding = 16,
        notchSize = 10,
        switchPos = false,
        minWidth = null,
        maxWidth = 800,
        backgroundColor = '#EEE',
        normalColor = '#444',
        notchPosition = 'bottomCenter',
        zIndex = 0,
        keepWithin = null,
        autoClose = true,
        closeIcon = null,
        resizeIcon = null,
        closeCommand = null,
        draggable = false,
        posOffset = 0,
        targetBoundingBox = null,
        useEventPosWithBoundingBox = false,
        interactive = false,
        onResize = null,
        onMove = null,
        noStyle = false,
        hideOnUp = true
    } = {}) {
        super()
        this.context = context
        this.noStyle = noStyle
        this.hideOnUp = hideOnUp
        this.padding = padding
        this.notchPosition = notchPosition
        this.notchSize = notchSize
        this.switchPos = switchPos
        this.fontSize = fontSize
        this.fontFamily = fontFamily
        this.minWidth = minWidth
        this.maxWidth = maxWidth
        this.normalColor = normalColor
        this.backgroundColor = backgroundColor
        this.keepWithin = keepWithin
        this.autoClose = autoClose
        this.resizeIcon = resizeIcon
        this.closeIcon = closeIcon
        this.closeCommand = closeCommand
        this.zIndex = zIndex
        this.parent = parent || document.body
        this.draggable = draggable
        this.posOffset = posOffset
        this.targetBoundingBox = targetBoundingBox
        this.useEventPosWithBoundingBox = useEventPosWithBoundingBox
        this.currentPos = null
        this.insertedNode = null
        this.loaded = false
        this.interactive = interactive
        this.onload = null
        this.onResize = onResize
        this.onMove = onMove
        if (content) {
            this.show(content)
        }
    }

    /** Setup popup with a dictionary of content types and contents.
     * @param {Object} content - A dict object with type strings (text, img, html) as keys
     *                            and corresponding values.
     * @return {Popup} this
     */
    setup(content) {
        //console.log("Popup.setup", this.draggable)
        this.content = content
        this.items = {}
        this.element = document.createElement('div')
        this.element.classList.add('popup')
        this.setAlpha(this.element, 0)
        // this.element.style.opacity = 0
        Elements.addClass(this.element, 'unselectable')
        this.notch = document.createElement('div')
        Elements.setStyle(this.notch, this.notchStyle())
        this.notch.className = 'notch'
        this.setupDraggable()
        if (this.closeIcon) {
            let img = document.createElement('img')
            img.setAttribute('draggable', false)
            img.src = this.closeIcon
            img.style.position = 'absolute'
            img.style.right = '0px'
            img.style.top = '0px'
            img.style.width = '16px'
            img.style.height = '16px'
            img.onclick = e => {
                this.close()
            }
            this.element.appendChild(img)
        }
        if (this.resizeIcon) {
            let img = document.createElement('img')
            img.style.position = 'absolute'
            img.style.right = '0px'
            img.style.bottom = '0px'
            img.style.width = '16px'
            img.style.height = '16px'
            img.src = this.resizeIcon
            img.setAttribute('draggable', true)
            img.ondragstart = e => {
                this.currentPos = { x: e.clientX, y: e.clientY }
                return true
            }
            img.ondrag = e => {
                e.preventDefault()

                let target = this.element.querySelector('iframe') || this.element
                let delta = {
                    x: e.clientX - this.currentPos.x,
                    y: e.clientY - this.currentPos.y
                }

                this.currentPos = { x: e.clientX, y: e.clientY }
                if (delta.x == 0 && delta.y == 0) return

                let rect = target.getBoundingClientRect()
                let width = rect.width + delta.x
                let height = rect.height + delta.y
                target.style.width = width + 'px'
                target.style.height = height + 'px'

                switch (this.notchPosition) {
                    case 'bottomLeft':
                    case 'bottomCenter':
                        let bottom = parseFloat(this.element.style.bottom)
                        this.element.style.bottom = bottom - delta.y + 'px'
                        break
                    default:
                        break
                }
                //console.log("onResize", this.onResize)
                if (this.onResize) {
                    this.onResize({ target, delta, width, height })
                }
            }
            img.ondragend = e => {}
            this.element.appendChild(img)
        }

        for (let key in content) {
            console.log('using', key, this.loaded)
            switch (key) {
                case 'selector':
                    break
                case 'text':
                    let text = document.createElement('span')
                    this.element.appendChild(text)
                    text.innerHTML = content[key]
                    Elements.setStyle(text, { color: this.normalColor })
                    Elements.addClass(text, 'unselectable')
                    Elements.addClass(text, 'PopupContent')
                    this.insertedNode = text
                    this.loaded = true
                    break
                case 'img':
                    alert('img to be implemented')
                    break
                case 'iframe':
                    let iframe = document.createElement('iframe')
                    iframe.setAttribute('frameBorder', 0)
                    iframe.src = content[key]
                    iframe.onload = e => {
                        let body = iframe.contentWindow.document.body
                        let observer = new MutationObserver(() => {
                            this.iframeChanged(iframe)
                        })
                        observer.observe(iframe.contentWindow.document, {
                            attributes: true,
                            subtree: true,
                            childList: true,
                            characterData: true
                        })
                        let w = Math.max(body.scrollWidth, body.offsetWidth)
                        let h = Math.max(body.scrollHeight, body.offsetHeight)
                        iframe.style.width = w + 'px'
                        iframe.style.height = h + 'px'
                        this.layoutAfterInsert()
                        if (this.onload != null) {
                            this.onload()
                        }
                        this.loaded = true
                    }
                    this.element.appendChild(iframe)
                    Elements.addClass(iframe, 'PopupContent')
                    this.insertIntoDOM()
                    return
                case 'html':
                    this.loaded = false
                    let div = document.createElement('div')
                    Elements.addClass(div, 'PopupContent')
                    this.element.appendChild(div)
                    div.innerHTML = content.html
                    //console.log("insert", content)
                    let selector = content.selector
                    if (selector) {
                        this.insertedNode = div.querySelector(selector)
                        if (this.insertedNode == null) {
                            div.innerHTML = `<p style="color:red;">Popup content not found. Missing ${selector}</p>`
                            this.insertedNode = div.firstElementChild
                        }
                    } else {
                        this.insertedNode = div.firstElementChild || div
                    }
                    this.setAlpha(this.insertedNode, 0)
                    let images = this.element.querySelectorAll('img')
                    let total = 0
                    if (images.length > 0) {
                        let count = 0
                        for (let image of images) {
                            if (!image.complete && !image.src.startsWith('data:')) {
                                total += 1
                                console.log('image not complete', image.src)
                                image.onload = e => {
                                    count += 1
                                    if (count == total) {
                                        this.loaded = true
                                        if (this.onload != null) {
                                            this.onload()
                                        }
                                    }
                                }
                            }
                        }
                    }
                    if (total == 0) {
                        this.loaded = true
                    }
                    break
                case 'node':
                    this.loaded = true
                    Elements.addClass(content.node, 'PopupContent')
                    this.element.appendChild(content.node)
                    this.insertedNode = content.node
                    this.setAlpha(this.insertedNode, 0)
                    break
                default:
                    alert('Unexpected content type: ' + key)
                    break
            }
        }
        this.insertIntoDOM()
        this.layoutAfterInsert()
        this.setupEventHandler()
        return this
    }

    handleClose(e) {
        let closing = this.closingEvent(e)
        if (closing) {
            this.close(e)
        } else {
            this.setupCloseHandler()
        }
    }

    setupCloseHandler() {
        let close = this.handleClose
        if (this.hideOnUp) {
            if (window.PointerEvent)
                this.parent.addEventListener('pointerup', close.bind(this), {
                    capture: true,
                    once: true
                })
            else if (window.TouchEvent)
                this.parent.addEventListener('touchend', close.bind(this), {
                    capture: true,
                    once: true
                })
            else
                this.parent.addEventListener('mouseup', close.bind(this), {
                    capture: true,
                    once: true
                })
        } else {
            if (window.PointerEvent)
                this.parent.addEventListener('pointerdown', close.bind(this), {
                    capture: true,
                    once: true
                })
            else if (window.TouchEvent)
                this.parent.addEventListener('touchstart', close.bind(this), {
                    capture: true,
                    once: true
                })
            else
                this.parent.addEventListener('mousedown', close.bind(this), {
                    capture: true,
                    once: true
                })
        }
    }

    setupEventHandler() {
        if (this.autoClose) {
            this.setupCloseHandler()
        }
    }

    closingEvent(e) {
        if (this.interactive) {
            let node = e.target.closest('.PopupContent')
            return node == null
        }
        return true
    }

    iframeChanged(iframe) {
        let body = iframe.contentWindow.document.body
        let w = Math.max(body.scrollWidth, body.offsetWidth)
        let h = Math.max(body.scrollHeight, body.offsetHeight)
        iframe.style.width = w + 'px'
        iframe.style.height = h + 'px'
    }

    setupDraggable() {
        if (this.draggable) {
            let target = this.element
            target.setAttribute('draggable', true)
            target.ondragstart = e => {
                this.currentPos = { x: e.clientX, y: e.clientY }
                var img = document.createElement('img')
                img.src = 'data:image/gifbase64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
                e.dataTransfer.setDragImage(img, 0, 0)
            }
            target.ondrag = e => {
                e.preventDefault()
                let delta = {
                    x: e.clientX - this.currentPos.x,
                    y: e.clientY - this.currentPos.y
                }
                this.currentPos = { x: e.clientX, y: e.clientY }
                let left = parseFloat(target.style.left)
                let top = parseFloat(target.style.top)

                target.style.left = left + delta.x + 'px'
                target.style.top = top + delta.y + 'px'

                //console.log("Popup.ondrag", target, event.target)
                if (this.onMove) {
                    this.onMove({ target, delta })
                }

                this.lastDrag = { left, top }
            }
            target.ondragend = e => {
                target.style.left = this.lastDrag.left + 'px'
                target.style.top = this.lastDrag.top + 'px'
                this.currentPos = null
            }
        }
    }

    moveDragged(target) {}

    insertIntoDOM(layout = true) {
        this.setAlpha(this.insertedNode, 0)
        this.element.appendChild(this.notch)
        this.parent.appendChild(this.element)
    }

    layoutAfterInsert() {
        Elements.setStyle(this.element, this.defaultStyle())
        this.layout()
        //this.element.style.opacity = 1
    }

    /** Layout the menu items. Needed only in the subclass.
     */
    layout() {}

    remove() {
        if (this.parent.contains(this.element)) this.parent.removeChild(this.element)
        this.unregister(this.context)
    }

    /** Close and remove the Popup from the DOM tree.
     */
    close(event) {
        //console.log("Popup.close", this.closeCommand)
        this.unregister(this.context)
        if (this.closeCommand) {
            this.closeCommand(this, () => this.remove(), event)
        } else {
            this.remove()
        }
    }

    /**
     * Set the alpha value to show or hide the popup. Uses CSS transitions.
     * (A former dependency on TweenLite has beeen removed.)
     *
     * @param {*} targets
     * @param {*} value
     * @memberof Popup
     */
    setAlpha(targets, value) {
        let objs = targets instanceof Array ? targets : [targets]
        for (let obj of objs) {
            if (value) {
                obj.style.transition = 'opacity 0.2s ease-in'
            }
            obj.style.opacity = value
        }
        // if (value) {
        //     TweenLite.to(targets, 0.2,  { autoAlpha: value })
        // }
        // else {
        //     TweenLite.set(targets, { autoAlpha: 0 })
        // }
    }

    /**
     * Starts a fade in animation.
     *
     * @memberof Popup
     */
    fadeIn() {
        this.setAlpha([this.element, this.insertedNode], 1)
    }

    /** Shows the Popup with the given commands at the specified point.
     * @param {Object} content - A dict object with type strings (text, img, html) as keys
     *                            and corresponding values.
     * @param {Point} point - The position as x, y coordinates {px}.
     * @return {Popup} this
     */
    showAt(content, point) {
        this.setup(content)
        console.log('showAt', this.loaded)
        if (this.loaded) {
            this.placeAt(point)
            this.fadeIn()
        } else {
            this.setAlpha([this.element, this.insertedNode], 0)
            this.onload = () => {
                this.layoutAfterInsert()
                this.placeAt(point)
                this.fadeIn()
            }
        }
        return this
    }

    /**
     *  Place the origin, i.e. the upper left corner at the given position using CSS styles.
     *
     * @param {any} x
     * @param {any} y
     * @memberof Popup
     */
    placeOrigin(x, y) {
        Elements.setStyle(this.element, { left: x + 'px', top: y + 'px' })
    }

    /**
     * Calculate the local coordinates within the keepWithin container.
     *
     * @param {any} x
     * @param {any} y
     * @returns
     * @memberof Popup
     */
    localPointWithin(x, y, width, height) {
        let pt = { x, y }
        return pt
    }

    withinDimensions() {
        return {
            width: this.keepWithin.offsetWidth,
            height: this.keepWithin.offsetHeight
        }
    }

    localDimensions() {
        return {
            width: this.element.offsetWidth,
            height: this.element.offsetHeight
        }
    }

    /**
     * Returns the notch position depending on the local coordinates within the keepWithin container
     * Divides the space vertically into top, center, bottom and horizontally into left, center, right
     *
     * @param {any} x
     * @param {any} y
     * @returns
     * @memberof Popup
     */
    notchPositionWithin(x, y) {
        let horizontal = 'Center'
        let vertical = 'center'
        let { width, height } = this.withinDimensions()
        let local = this.localPointWithin(x, y, width, height)
        if (local.y < height * 0.33) {
            vertical = 'top'
        }
        if (local.y > height * 0.66) {
            vertical = 'bottom'
        }
        if (local.x < width * 0.33) {
            horizontal = 'Left'
        }
        if (local.x > width * 0.66) {
            horizontal = 'Right'
        }
        let result = vertical + horizontal
        if (result == 'centerCenter') return this.notchPosition
        return result
    }

    placeAt(point) {
        let x = point.x
        let y = point.y
        let notchPosition = this.notchPosition
        if (this.keepWithin != null) {
            notchPosition = this.notchPositionWithin(x, y)
        }
        Elements.setStyle(this.notch, this.notchStyle(notchPosition))
        this.notch.className = 'notch ' + notchPosition
        let { width, height } = this.localDimensions()

        //if targetBoundingBox is set, popup is placed next to the rectangle
        if (this.targetBoundingBox) {
            let bbTop = this.targetBoundingBox.y
            let bbBottom = this.targetBoundingBox.y + this.targetBoundingBox.height
            let bbLeft = this.targetBoundingBox.x
            let bbRight = this.targetBoundingBox.x + this.targetBoundingBox.width
            //console.log("place popup with bb set:", x, y, bbTop, bbBottom, bbLeft, bbRight)
            switch (notchPosition) {
                case 'bottomLeft':
                case 'bottomRight':
                case 'bottomCenter':
                    y = bbTop
                    if (!this.useEventPosWithBoundingBox) x = (bbLeft + bbRight) / 2
                    break
                case 'topLeft':
                case 'topRight':
                case 'topCenter':
                    y = bbBottom
                    if (!this.useEventPosWithBoundingBox) x = (bbLeft + bbRight) / 2
                    break
                case 'centerRight':
                    x = bbLeft
                    if (!this.useEventPosWithBoundingBox) y = (bbTop + bbBottom) / 2
                    break
                case 'centerLeft':
                    x = bbRight
                    if (!this.useEventPosWithBoundingBox) y = (bbTop + bbBottom) / 2
                    break
                default:
                    break
            }
        }

        //calculate position depending on several (optional) parameters
        switch (notchPosition) {
            case 'bottomLeft':
                x -= this.padding
                x -= this.notchSize
                y -= height
                y -= this.notchSize * 2
                y -= this.posOffset
                break
            case 'bottomRight':
                x -= width
                x += this.padding
                x += this.notchSize
                y -= height
                y -= this.notchSize * 2
                y -= this.posOffset
                break
            case 'bottomCenter':
                x -= width / 2
                y -= height
                y -= this.notchSize * 2
                y -= this.posOffset
                break
            case 'topLeft':
                x -= this.padding
                x -= this.notchSize
                y += this.notchSize * 2
                y += this.posOffset
                break
            case 'topRight':
                x -= width
                x += this.padding
                x += this.notchSize
                y += this.notchSize * 2
                y += this.posOffset
                break
            case 'topCenter':
                x -= width / 2
                y += this.notchSize * 2
                y += this.posOffset
                break
            case 'centerRight':
                x -= width + this.notchSize * 2
                x -= this.posOffset
                y -= height / 2
                break
            case 'centerLeft':
                //console.log("height", height)
                y -= height / 2
                x += this.notchSize * 2
                x += this.posOffset
                break
            default:
                break
        }
        this.placeOrigin(x, y)
    }

    /** Shows the Popup with the given commands at the current position.
     * @param {Object} content - A dict object with type strings (text, img, html) as keys
     *                            and corresponding values.
     * @return {Popup} this
     */
    show(content) {
        this.setup(content)
        this.fadeIn()
        return this
    }

    /** Configuration object. Return default styles as CSS values.
     */
    defaultStyle() {
        let padding = this.padding
        let style = {
            maxWidth: this.maxWidth + 'px',
            zIndex: this.zIndex,
            position: 'absolute'
        }
        if (this.minWidth) {
            style.minWidth = this.minWidth + 'px'
        }
        if (!this.noStyle) {
            Object.assign(style, {
                borderRadius: Math.round(this.padding / 2) + 'px',
                backgroundColor: this.backgroundColor,
                padding: this.padding + 'px',
                boxShadow: '0 10px 15px rgba(0, 0, 0, 0.3)',
                fontFamily: this.fontFamily,
                fontSize: this.fontSize,
                stroke: 'black',
                fill: 'white'
            })
        }

        return style
    }

    /** Configuration object. Return notch styles as CSS values.
     */
    notchStyle(notchPosition = null) {
        if (notchPosition == null) {
            notchPosition = this.notchPosition
        }
        let width = 0
        let height = 0
        let left = this.padding
        let size = this.localDimensions()
        if (notchPosition.endsWith('Right')) {
            left = size.width - this.padding - this.notchSize * 2
        }
        if (notchPosition.endsWith('Center')) {
            left = size.width / 2 - this.notchSize
        }
        left = Math.round(left) + 'px'
        let borderBottom = 0
        let borderTop = 0

        if (notchPosition.startsWith('bottom')) {
            if (this.noStyle) {
                return {
                    width,
                    height,
                    left,
                    bottom: -this.notchSize + 'px',
                    position: 'absolute',
                    borderStyle: 'solid',
                    borderTopWidth: this.notchSize + 'px',
                    borderRight: this.notchSize + 'px solid transparent',
                    borderLeft: this.notchSize + 'px solid transparent',
                    borderBottom: 0
                }
            } else {
                return {
                    width,
                    height,
                    left,
                    boxShadow: '0 12px 15px rgba(0, 0, 0, 0.1)',
                    bottom: -this.notchSize + 'px',
                    position: 'absolute',
                    borderTop: this.notchSize + 'px solid ' + this.backgroundColor,
                    borderRight: this.notchSize + 'px solid transparent',
                    borderLeft: this.notchSize + 'px solid transparent',
                    borderBottom: 0
                }
            }
        }
        if (notchPosition.startsWith('top')) {
            if (this.noStyle) {
                return {
                    width,
                    height,
                    left,
                    top: -this.notchSize + 'px',
                    position: 'absolute',
                    borderStyle: 'solid',
                    borderBottomWidth: this.notchSize + 'px',
                    borderRight: this.notchSize + 'px solid transparent',
                    borderLeft: this.notchSize + 'px solid transparent',
                    borderTop: 0
                }
            } else {
                return {
                    width,
                    height,
                    left,
                    top: -this.notchSize + 'px',
                    position: 'absolute',
                    borderBottom: this.notchSize + 'px solid ' + this.backgroundColor,
                    borderRight: this.notchSize + 'px solid transparent',
                    borderLeft: this.notchSize + 'px solid transparent',
                    borderTop: 0
                }
            }
        }

        if (this.noStyle) {
            if (notchPosition.endsWith('Left')) {
                left = -this.notchSize * 2 + 'px'
            }

            if (notchPosition.endsWith('Right')) {
                left = size.width + 'px'
            }

            let top = size.height / 2 - this.notchSize
            top = Math.round(top) + 'px'

            return {
                width,
                height,
                left,
                top,
                borderRightWidth: this.notchSize,
                borderLeftWidth: this.notchSize,
                position: 'absolute',
                borderTop: this.notchSize + 'px solid transparent',
                borderBottom: this.notchSize + 'px solid transparent'
            }
        } else {
            let borderRight = this.notchSize + 'px solid transparent'
            let borderLeft = this.notchSize + 'px solid transparent'
            let top = size.height / 2 - this.notchSize
            if (notchPosition.endsWith('Left')) {
                left = -this.notchSize * 2 + 'px'
                borderRight = this.notchSize + 'px solid ' + this.backgroundColor
                this.element.style.boxShadow = '15px 10px 15px  rgba(0, 0, 0, 0.3)'
            }
            if (notchPosition.endsWith('Right')) {
                left = size.width + 'px'
                borderLeft = this.notchSize + 'px solid ' + this.backgroundColor
                this.element.style.boxShadow = '15px 5px 15px rgba(0, 0, 0, 0.3)'
            }

            top = Math.round(top) + 'px'

            return {
                width,
                height,
                left,
                top,
                borderRight,
                borderLeft,
                //  boxShadow,
                position: 'absolute',
                borderTop: this.notchSize + 'px solid transparent',
                borderBottom: this.notchSize + 'px solid transparent'
            }
        }
    }

    /** Convenient static methods to show and reuse a Popup implemented
     * as a class variable.
     * @param {Object} content - A dict object with type strings (text, img, html) as keys
     *                            and corresponding values.
     * @param {Point} point - The position as x, y coordinates {px}.
     * @param {boolean} autoClose - Autoclose the menu after selecting an item.
     */
    static open(
        content,
        point,
        {
            parent = null,
            context = window,
            fontSize = '1em',
            fontFamily = 'Arial',
            padding = 16,
            notchSize = 10,
            switchPos = false,
            minWidth = null,
            maxWidth = 800,
            backgroundColor = '#EEE',
            zIndex = 0,
            normalColor = '#444',
            closeIcon = null,
            resizeIcon = null,
            closeCommand = null,
            autoClose = true,
            keepWithin = null,
            draggable = false,
            posOffset = 0,
            targetBoundingBox = null,
            useEventPosWithBoundingBox = false,
            interactive = false,
            onResize = null,
            onMove = null
        } = {}
    ) {
        let notchPosition = switchPos && point.y < 50 ? 'topCenter' : 'bottomCenter'
        let popup = new Popup({
            parent,
            context,
            fontFamily,
            fontSize,
            padding,
            notchSize,
            switchPos,
            minWidth,
            maxWidth,
            backgroundColor,
            normalColor,
            notchPosition,
            zIndex,
            autoClose,
            keepWithin,
            closeCommand,
            closeIcon,
            resizeIcon,
            draggable,
            posOffset,
            targetBoundingBox,
            useEventPosWithBoundingBox,
            interactive,
            onResize,
            onMove
        })
        popup.register(context)
        popup.showAt(content, point)
        return popup
    }

    /** Convenient static method to close the Popup implemented
     * as a class variable. Calls the close command.
     */
    static closePopup(context = window) {
        let popup = Poppable.registrations.get(context)
        if (popup != null) {
            popup.close()
        }
    }

    /** Convenient static methods to remove the Popup implemented
     * as a class variable. Removes the popup without performing the close command.
     */
    static remove(context = window) {
        let popup = Poppable.registrations.get(context)
        if (popup != null) {
            popup.remove()
        }
    }

    /**
     * Convenient static method to compute the clicked rect of objects that have multiple clients rects.
     * Needed to position popups correctly above objects with line breaks, e.g. spans
     *
     * @static
     * @param {*} event
     * @returns {*} DOMRect
     * @memberof Popup
     */
    static targetRect(event) {
        let target = event.target
        let x = event.pageX
        let y = event.pageY
        for (let rect of target.getClientRects()) {
            let withinX = x >= rect.left && x <= rect.left + rect.width
            let withinY = y >= rect.top && y <= rect.top + rect.height
            if (withinX && withinY) {
                return rect
            }
        }
        return null
    }

    /**
     * Convenient static method to compute the center of objects that have multiple clients rects.
     * Needed to position popups correctly above objects with line breaks, e.g. spans
     *
     * @static
     * @param {*} event
     * @returns {*} Point
     * @memberof Popup
     */
    static targetCenter(event) {
        let target = event.target
        let x = event.pageX
        let y = event.pageY
        let rect = Popup.targetRect(event)
        if (rect != null) {
            x = rect.left + rect.width / 2
            y = rect.top + rect.height / 2
        }
        return { x, y }
    }
}