iwmlib/lib/pixi/badge.js

import Theme from './theme.js'
import AbstractPopup from './abstractpopup.js'
import Tooltip from './tooltip.js'

/**
 * Class that represents a PixiJS Badge.
 *
 * @example
 * // Create the app
 * const app = new PIXIApp({
 *     view: canvas,
 *     width: 900,
 *     height: 250
 * }).setup().run()
 *
 * // Add an DisplayObject to the app
 * const circle = new PIXI.Graphics()
 * circle.beginFill(0x5251a3)
 * circle.drawCircle(50, 50, 40)
 * app.scene.addChild(circle)
 *
 * const badge1 = new Badge({
 *     object: circle,
 *     container: app.scene,
 *     content: 'Das Gesetz ist der Freund des Schwachen.'
 * })
 *
 * @class
 * @extends AbstractPopup
 * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/badge.html|DocTest}
 */
export default class Badge extends AbstractPopup {
    /**
     * Creates an instance of a Badge.
     *
     * @constructor
     * @param {object} [opts] - An options object to specify to style and behaviour of the badge.
     * @param {number} [opts.minWidth=0] - The minimum width of the badge.
     * @param {number} [opts.minHeight=0] - The minimum height of the badge.
     * @param {number} [opts.padding=Theme.padding / 2] - The inner spacing of the badge.
     * @param {string|object} [opts.tooltip] - A string for the label of the tooltip or an object to configure the tooltip
     *     to display.
     */
    constructor(opts = {}) {
        const theme = Theme.fromString(opts.theme)

        opts = Object.assign(
            {},
            {
                minWidth: 0,
                minHeight: 0,
                padding: theme.padding / 2,
                tooltip: null
            },
            opts
        )

        super(opts)

        this.tooltip = null

        // setup
        //-----------------
        this.setup()

        // layout
        //-----------------
        this.layout()
    }

    /**
     * Creates children and instantiates everything.
     *
     * @private
     * @override
     * @return {Badge} A reference to the badge for chaining.
     */
    setup() {
        super.setup()

        // tooltip
        //-----------------
        if (this.opts.tooltip) {
            if (typeof this.opts.tooltip === 'string') {
                this.tooltip = new Tooltip({
                    object: this,
                    content: this.opts.tooltip
                })
            } else {
                this.opts.tooltip = Object.assign(
                    {},
                    { object: this },
                    this.opts.tooltip
                )
                this.tooltip = new Tooltip(this.opts.tooltip)
            }
        }

        return this
    }

    /**
     * Should be called to refresh the layout of the badge. Can be used after resizing.
     *
     * @override
     * @return {Badge} A reference to the badge for chaining.
     */
    layout() {
        super.layout()

        this.content.x =
            this.width / 2 - this.content.width / 2 - this.opts.strokeWidth / 2
        this.content.y =
            this.height / 2 -
            this.content.height / 2 -
            this.opts.strokeWidth / 2

        return this
    }
}