<!doctype html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Scatter Doctest</title>
	<link rel="stylesheet" href="../lib/3rdparty/highlight/styles/default.css">
	<link rel="stylesheet" href="../css/doctest.css">
	<script src="./3rdparty/highlight/highlight.pack.js"></script>
    <script src="./3rdparty/all.js"></script>
	<script src="all.js"></script>
	<script>
    function drawPolygons() {
        debugCanvas.width = main.getBoundingClientRect().width
        let context = debugCanvas.getContext('2d')
        context.clearRect(0, 0, debugCanvas.width, debugCanvas.height)

        let stage = scatterContainer.polygon
        stage.draw(context, { stroke: '#FF0000'})
        for(let scatter of scatterContainer.scatter.values()) {
            let polygon = scatter.polygon
            polygon.draw(context, { stroke: '#FF0000'})
        }
    }

    function animatePolygons() {
        requestAnimationFrame((dt) => {
            drawPolygons()
            animatePolygons()
        })
    }
    </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. Scatters come in two flavours:
DOM Scatters are working with arbitrary DOM elements, wheras PIXI Scatter
work with PIXI Containers and DisplayObjects within the PIXI scene graph. Here
we describe the more basic DOM scatter.
</p>
<p>Let's look at an example.</p>
<div id="main" class="grayBorder interactive" style="position: relative; width: 100%; height: 280px;">
    <!-- Note that we need to set draggable to false to avoid conflicts. The DOM elements
    must also be positioned absolutely. -->
    <img id="women" draggable="false" style="position: absolute;" src="examples/women.jpeg" />
    <img id="king" draggable="false"  style="position: absolute;" src="examples/king.jpeg" />

    <canvas id="debugCanvas" height="280" style="z-index: 100000; pointer-events: none; position: absolute; border: 1px solid red;">
        Canvas not supported.
    </canvas>
</div>

<script class="doctest">
let dx = 44

let app = new App()
let scatterContainer = new DOMScatterContainer(main)
let angle = 0 // 15
for(let key of ['women', 'king']) {
    let image = document.getElementById(key)
    // The DOMScatter needs initial width and height. Therefore we
    // define the scatter when the image size is known, i.e. after loading...
    image.onload = (e) => {
        let scatter = new DOMScatter(image, scatterContainer, {
                        x: dx,
                        y: 44,
                        width: e.target.naturalWidth,
                        height: e.target.naturalHeight,
                        rotationDegrees: angle,
                        throwVisibility: 88,
                        minScale: 0.5,
                        maxScale: 1.5})
        dx += 300
        angle = -angle
    }
}
app.run()
animatePolygons()
</script>

</body>