<!doctype html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>PIXI Scatter Doctest</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>
</head>

<body onload="Doctest.run()">
    <h1>
        Scatter
    </h1>
    <p>
        Scatter objects are UI elements that can be rotated, scaled or moved around which typically leads to "scattered" layouts.
        The PIXI scatter defined here is a specialization of the
        <a href="../scatter.html">abstract scatter pattern</a>.
    </p>
    <p>PIXI scatter are organized in
        <code>ScatterContainer</code> parent nodes and
        <code>DisplayObjectScatter</code> child nodes.
        <p>Let's look at an example of a PIXI scatter. Since scatter objects are mainly used as main views it is a common use
            case that the scene itself is used as the
            <code>ScatterContainer</code>. The
            <code>DisplayObjectScatter</code> is simply used as a wrapper that makes any interative DisplayObject zoomable, rotatable and translatable.</p>
        <canvas id="canvas" class="grayBorder interactive">Canvas not supported</canvas>
        <script class="doctest">

            class ScatterApp extends PIXIApp {

                sceneFactory() {
                    return new ScatterContainer(this.renderer, { showBounds: true, showPolygon: true, app: this })
                }

                setup() {
                    super.setup()
                    let x = 30
                    let y = 30
                    for (let key of ['women', 'king']) {
                        let sprite = PIXI.Sprite.fromImage('../examples/' + key + '.jpeg')
                        sprite.interactive = true
                        let scatter = new DisplayObjectScatter(sprite, this.renderer,
                            {
                                x: x, y: y,
                                startScale: 0.25,
                                minScale: 0.2,
                                maxScale: 1
                            })
                        this.scene.addChild(sprite)
                        scatter.zoom(0.5, { animate: 1.0 })
                        x += 100
                        y += 30
                    }
                    return this
                }
            }

            const app = new ScatterApp({
                view: canvas,
                autoResize: false,
                width: 450,
                height: 250
            })
                .setup()
                .run()

        </script>

        <h1>
            Two ScatterContainers in one canvas-element
        </h1>
        <p>
            You see two ScatterContainers within the same HTML-canvas-element. The Queen is included in the first, the King in the second
            ScatterContainer. You should interact the two images independently of each other.
        </p>
        <canvas id="canvas2" class="grayBorder interactive">Canvas not supported</canvas>
        <script class="doctest">

            class DoubleScatterApp extends PIXIApp {

                setup() {
                    super.setup()
                    // Obey order in which ScatterContainer are created because the
                    // InteractionMapper register event handlers in a first come first serve
                    // order
                    this.scatterContainerFront = new ScatterContainer(this.renderer, { app: this })
                    this.scatterContainerBack = new ScatterContainer(this.renderer, { app: this })

                    // Note that the addChild order is different because later children
                    // are placed in front of earlier children.
                    this.scene.addChild(this.scatterContainerBack)
                    this.scene.addChild(this.scatterContainerFront)

                    // Add the queen to ScatterContainer one
                    let sprite1 = PIXI.Sprite.fromImage('../examples/women.jpeg')
                    sprite1.interactive = true
                    let scatter1 = new DisplayObjectScatter(sprite1, this.renderer, {
                        x: 20,
                        y: 40,
                        startScale: .5
                    })
                    this.scatterContainerBack.addChild(sprite1)

                    // Add the king to ScatterContainer two
                    let sprite2 = PIXI.Sprite.fromImage('../examples/king.jpeg')
                    sprite2.interactive = true
                    let scatter2 = new DisplayObjectScatter(sprite2, this.renderer, {
                        x: 280,
                        y: 40,
                        startScale: .5
                    })
                    this.scatterContainerFront.addChild(sprite2)
                    return this
                }
            }

            const doubleScatterApp = new DoubleScatterApp({
                view: canvas2,
                autoResize: false,
                width: 450,
                height: 250
            }).setup().run()

        </script>

        <h1>
            Nested Scatter
        </h1>
        <p>
            Sometimes it can be required, that multiple scatters are nested in one another. E.g. when a map is displayed as scatter and
            another scatter is displayed on the map.
        </p>
        <canvas id="canvas3" class="grayBorder interactive">Canvas not supported</canvas>
        <script class="doctest">

            class NestedScatterApp extends PIXIApp {

                sceneFactory() {
                    return new ScatterContainer(this.renderer, { application: this, showBounds: true, showPolygon: true, app: this })
                }

                setup() {
                    super.setup()



                    // Add the queen to ScatterContainer one
                    let woman = PIXI.Sprite.fromImage('../examples/women.jpeg')
                    woman.interactive = true
                    new DisplayObjectScatter(woman, this.renderer, {
                        x: 20,
                        y: 40,
                        startScale: 2,
                        maxScale: 5
                    })
                    this.scene.addChild(woman)

                    let nestedKing = PIXI.Sprite.fromImage('../examples/king.jpeg')
                    nestedKing.interactive = true
                    new DisplayObjectScatter(nestedKing, this.renderer, {
                        x: 20, y: 20, startScale: 0.3
                    })
                    woman.addChild(nestedKing)

                     let nestedQueen = PIXI.Sprite.fromImage('../examples/women.jpeg')
                    nestedQueen.interactive = true
                    new DisplayObjectScatter(nestedQueen, this.renderer, {
                        x: 40, y: 40, startScale: 0.3
                    })
                    woman.addChild(nestedQueen)

                    let king = PIXI.Sprite.fromImage('../examples/king.jpeg')
                    king.interactive = true
                    new DisplayObjectScatter(king, this.renderer, {
                        x: 200, y: 20, startScale: 1
                    })
                    this.scene.addChild(king)


                    return this
                }
            }

            const nestedScatterApp = new NestedScatterApp({
                view: canvas3,
                autoResize: false,
                width: 450,
                height: 250
            }).setup().run()

        </script>
</body>