Restructured library.

lib/pixi/tooltip.js

@@ -0,0 +1,155 @@
+import Theme from './theme.js'
+import AbstractPopup from './abstractpopup.js'
+
+/**
+ * Class that represents a PixiJS Tooltip.
+ * 
+ * @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 tooltip = new Tooltip({
+ *     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/tooltip.html|DocTest}
+ */
+export default class Tooltip extends AbstractPopup {
+    
+    /**
+     * Creates an instance of a Tooltip.
+     * 
+     * @constructor
+     * @param {object} [opts] - An options object to specify to style and behaviour of the tooltip.
+     * @param {number} [opts.minWidth=0] - The minimum width of the tooltip.
+     * @param {number} [opts.minHeight=0] - The minimum height of the tooltip.
+     * @param {number} [opts.padding=Theme.padding / 2] - The inner spacing of the tooltip.
+     * @param {PIXI.DisplayObject} opts.object - The object, where the tooltip should be displayed.
+     * @param {PIXI.DisplayObject} [opts.container=object] - The container where the tooltip should be attached to.
+     * @param {number} [opts.offsetLeft=8] - The horizontal shift of the tooltip.
+     * @param {number} [opts.offsetTop=-8] - The vertical shift of the tooltip.
+     * @param {number} [opts.delay=0] - A delay, after which the tooltip should be opened.
+     */
+    constructor(opts = {}) {
+        
+        const theme = Theme.fromString(opts.theme)
+        
+        opts = Object.assign({}, {
+            minWidth: 0,
+            minHeight: 0,
+            padding: theme.padding / 2,
+            object: null,
+            container: null,
+            offsetLeft: 8,
+            offsetTop: -8,
+            delay: 0
+        }, opts)
+
+        opts.container = opts.container || opts.object
+
+        super(opts)
+
+        // setup
+        //-----------------
+        this.setup()
+
+        // layout
+        //-----------------
+        this.layout()
+    }
+    
+    /**
+     * Creates children and instantiates everything.
+     * 
+     * @private
+     * @return {Tooltip} A reference to the tooltip for chaining.
+     */
+    setup() {
+
+        super.setup()
+
+        // bind events this
+        //-----------------
+        this.interactive = true
+
+        let mouseoverTooltip = false
+        
+        this.on('mouseover', e => {
+            mouseoverTooltip = true
+        })
+
+        this.on('mouseout', e => {
+            mouseoverTooltip = false
+            if (!mouseoverObject) {
+                this.hide(() => {
+                    this.opts.container.removeChild(this)
+                })
+            }
+        })
+        
+        // bind events object
+        //-----------------
+        const object = this.opts.object
+        object.interactive = true
+
+        let mouseoverObject = false
+
+        object.on('mouseover', e => {
+
+            this.timeout = window.setTimeout(() => {
+                mouseoverObject = true
+                this.visible = true
+                this.opts.container.addChild(this)
+                this.setPosition(e)
+            }, this.opts.delay * 1000)
+        })
+
+        object.on('mousemove', e => {
+            if (mouseoverObject) {
+                this.setPosition(e)
+            }
+        })
+
+        object.on('mouseout', e => {
+            mouseoverObject = false
+            window.clearTimeout(this.timeout)
+            if (!mouseoverTooltip) {
+                this.hide(() => {
+                    this.opts.container.removeChild(this)
+                })
+            }
+        })
+
+        return this
+    }
+    
+    /**
+     * Calculates and sets the position of the tooltip.
+     * 
+     * @private
+     * @return {Tooltip} A reference to the tooltip for chaining.
+     */
+    setPosition(e) {
+
+        const position = e.data.getLocalPosition(this.opts.container)
+
+        this.x = position.x + this.opts.offsetLeft
+        this.y = position.y + this.opts.offsetTop - this.height
+
+        return this
+    }
+}