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

<head>
    <meta charset='UTF-8'>
    <title>Scatter</title>
    <link rel='stylesheet' href='../../3rdparty/highlight/styles/default.css'>
    <link rel='stylesheet' href='../../../css/doctest.css'> 
  
    <script src='../../../dist/iwmlib.3rdparty.js'></script>
    <script src='../../../dist/iwmlib.pixi.js'></script>
    <script src='../../../dist/iwmlib.js'></script>

    <style>
        .inline-showcase {
            display: flex
        }

        .map-example {
            display: inline-block;
            width: 256px;
            margin: 5px;
        }
    </style>
</head>

<body>
    <h1>Scatter</h1>
    <p>The Scatter in Tüsch specifies some classes to make them more suitable for Map applications.</p>

    <h2>CoverScatter</h2>
    <p>Usually maps should cover the whole app, or a window inside the app. Therefore they support a cover option. This option
        allows prevents the scatter to move inside the window.



    </p>
    <p>
        <h3>Legend</h3>
        <ul>
            <li>
                <span style="color: deepskyblue">Bounds:</span> The bounds represent the bounding boxes of the elements.
            </li>
            <li>
                <span style="color:red;">Polygon:</span> The polygon property of scatters describe their actual extends and are used for e.g. calculating
                overlap with the scatter container.
            </li>
            <li>
                <span style="color:greenyellow;">Boundaries:</span> You can set boundaries in the options in the form of
                <code>opts = {..., boundaries: {min: {x:0,y:0},
                        max{x:1,y:1},...}}</code> these will be applied relatively to the image dimensions.</li>
        </ul>
    </p>
    <canvas id="map_01">

    </canvas>
    <script>

        let app = new PIXIApp({
            view: map_01,
            width: 512,
            height: 512
        })

        app.sceneFactory = () => {
            window.scatterContainer = new AdvancedScatterContainer(app.renderer, { showBounds: true, showPolygon: true, app })
            return window.scatterContainer
        }

        app.setup().run()


        /*
        Create Rotated Container
        */

        let pad = 128
        let frame = new RigidContainer(app.width - 2 * pad, app.height - 2 * pad)
        frame.position.set(pad, pad)


        //Create Containers Scatter
        new CompactScatter(frame, app.renderer, { translatable: false, scalable: false, rotatable: false})
        app.scene.addChild(frame)

        let oldCenter = new PIXI.Point()
        oldCenter.copy(frame.scatter.center)

        frame.scatter.rotation = Math.PI / 4
        let offset = Points.subtract(frame.scatter.center, oldCenter)
        frame.scatter.position = Points.subtract(frame.scatter.position, offset)


        /* 
        
        Create Regular Rect
        
        */

        let map = new PIXI.Graphics()
        map.beginFill(0x00FFFF, 0.2)
        map.drawRect(0, 0, 100, 100)
        map.position.set(-10, -10)
        map.interactive = true
        new CoverScatter(map, app.renderer, { maxScale: Infinity, 
            autoBringToFront:false,
            boundaries: {
                min: { x: 0.2, y: 0.2 },
                max: { x: 0.8, y: 0.8 }
            },
        alpha: 0.5, 
        cover: true,
            debug:true
    })
        frame.addChild(map)


        /*

        Create Rotated Rect
        
        */

        let advancedScatter = new PIXI.Graphics()
        advancedScatter.interactive = true
        new CoverScatter(advancedScatter, app.renderer, {
            maxScale: Infinity, 
            autoBringToFront: false, 
            alpha: 0.3, cover:false,
            debug:true
        })
        advancedScatter.beginFill(0x000000, 0.2)
        advancedScatter.drawRect(0, 0, 200, 200)
        app.scene.addChild(advancedScatter)






    </script>

    <h2>Note</h2>
    <ul>
        <li>
            Cover behaviour is not yet working on rotated elements.
        </li>
    </ul>
</body>

</html>