<!doctype html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>PIXI Text</title>

    <link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
    <link rel="stylesheet" href="../../css/doctest.css">

    <script src="../3rdparty/highlight/highlight.pack.js"></script>
    <script src="../../dist/iwmlib.3rdparty.js"></script>

    <script src="../../dist/iwmlib.js"></script>
    <script src="../../dist/iwmlib.pixi.js"></script>

    <script src="../3rdparty/d3.min.js"></script>
</head>
<body onload="Doctest.run()">
    <h1>Text</h1>
    <p>
        The tooltip or infotip or a hint is a common graphical user interface element. It is used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a tooltip may appear—a small "hover box" with information about the item being hovered over.[1][2] Tooltips do not usually appear on mobile operating systems, because there is no cursor (though tooltips may be displayed when using a mouse).
    </p>
    <p>Let's look at some tooltip examples:</p><br />
    <canvas id="canvas" class="interactive"></canvas>
    <p>
        What you should see: Ten colored circles with different tooltips.
    </p>
    <script class="doctest">
const app = new PIXIApp({
    view: canvas,
    width: 900,
    height: 500,
    transparent: false,
    backgroundColor: 0x2c2d2b
}).setup().run()

const container = new PIXI.Graphics()
container.beginFill(0x58595b, 1)
container.drawRect(0, 0, 700, 300)
container.pivot.set(container.width / 2, container.height / 2)
container.position.set(450, 250)
app.scene.addChild(container)

const sixthWidth = container.width / 6
const halfHeight = container.height / 2

app.loadSprites([
    './assets/stuttgart-library.jpg',
    './assets/Arial.fnt'
], sprites => {

    // PIXI.Text
    //--------------------
    const text = new PIXI.Text('Bibliothek\nStuttgart', {fontSize: 50})
    text.x = sixthWidth
    text.y = halfHeight
    text.pivot.set(text.width / 2, text.height / 2)
    container.addChild(text)

    // PIXI.BitmapText
    //--------------------
    const bitmapText = new PIXI.BitmapText('Bibliothek\nStuttgart', {
        font: '50px Arial',
        align: 'left'
    })
    bitmapText.x = sixthWidth * 3
    bitmapText.y = halfHeight
    bitmapText.pivot.set(bitmapText.width / 2, bitmapText.height / 2)
    container.addChild(bitmapText)

    // PIXI.Sprite
    //--------------------
    const sprite = sprites.get('./assets/stuttgart-library.jpg')
    sprite.scale.set(.05, .05)
    sprite.x = sixthWidth * 5
    sprite.y = halfHeight
    sprite.anchor.set(.5, .5)
    container.addChild(sprite)

    // Scale
    //--------------------
    const scaleContainer = d3.scaleLinear().domain([0, 50, 100]).range([.05, 1, 50])
    const scaleTexts = d3.scaleLinear().domain([0, 50, 100]).range([.1, 1, 10])
    const scaleSprite = d3.scaleLinear().domain([0, 50, 100]).range([.005, .05, .5])

    // Sliders
    //--------------------
    const sliderContainer = new Slider({
        value: 50,
        width: 500,
        tooltip: 'Scale Container',
        container: app.view,
        onUpdate: function() {
            const value = scaleContainer(this.value)
            container.scale.set(value, value)
        }
    })
    sliderContainer.x = app.size.width / 2 - sliderContainer.width / 2
    sliderContainer.y = 10
    app.scene.addChild(sliderContainer)

    const sliderContainerAll = new Slider({
        value: 50,
        width: 500,
        tooltip: 'Scale Container All',
        container: app.view,
        onUpdate: function() {
            const value = scaleContainer(this.value)
            container.scale.set(value, value)

            text.scale.set(1 / value, 1 / value)
            bitmapText.scale.set(1 / value, 1 / value)
        }
    })
    sliderContainerAll.x = app.size.width / 2 - sliderContainerAll.width / 2
    sliderContainerAll.y = 55
    app.scene.addChild(sliderContainerAll)

    const sliderText = new Slider({
        value: 50,
        tooltip: 'Scale PIXI.Text',
        container: app.view,
        onUpdate: function() {
            const value = scaleTexts(this.value)
            text.scale.set(value, value)
        }
    })
    sliderText.x = app.size.width / 6 - sliderText.width / 2
    sliderText.y = app.size.height - 10 - sliderText.height
    app.scene.addChild(sliderText)

    const sliderBitmapText = new Slider({
        value: 50,
        tooltip: 'Scale PIXI.extras.BitmapText',
        container: app.view,
        onUpdate: function() {
            const value = scaleTexts(this.value)
            bitmapText.scale.set(value, value)
        }
    })
    sliderBitmapText.x = app.size.width / 6 * 3 - sliderBitmapText.width / 2
    sliderBitmapText.y = app.size.height - 10 - sliderBitmapText.height
    app.scene.addChild(sliderBitmapText)

    const sliderSprite = new Slider({
        value: 50,
        tooltip: 'Scale PIXI.Sprite',
        container: app.view,
        onUpdate: function() {
            const value = scaleSprite(this.value)
            sprite.scale.set(value, value)
        }
    })
    sliderSprite.x = app.size.width / 6 * 5 - sliderSprite.width / 2
    sliderSprite.y = app.size.height - 10 - sliderSprite.height
    app.scene.addChild(sliderSprite)

}, {resolutionDependent: false})

    </script>
</body>