import PIXIApp from '../../app.js'
import {DeepZoomInfo, DeepZoomImage} from '../image.js'
import {ScatterContainer, DisplayObjectScatter} from '../../scatter.js'

// deepZoom
//--------------------
const deepZoomInfo = new DeepZoomInfo({
    compression: ["dds"],
    clip: {
        minLevel: 12,
        maxLevel: 20,
        startCol: 275215,
        startRow: 181050,
        bounds: {
            min: [48.458353, 8.96484374976547],
            max: [48.5747899110263, 9.14062499976523]
        }
    },
    tileSize: 512,
    format: "png",
    overlap: 0,
    type: "map",
    height: 131072,
    width: 131072,
    path: "../../../../Tuesch/var/luftbild/2018",
    urlTileTemplate: "{path}/{level}/{row}/{column}.{format}"
})

// app
//--------------------
const app = new PIXIApp({
    width: 800,
    height: 500
}).setup().run()

div1.appendChild(app.view)

// create the ScatterContainer
//--------------------
const scatterContainer = new ScatterContainer(app.renderer, {showBounds: true, app: app})
app.scene.addChild(scatterContainer)

// Create the DeepZoomImage
//--------------------
const deepZoomImage = new DeepZoomImage(deepZoomInfo, {app, world: scatterContainer, useWorker: '../tileloader.js'})
deepZoomImage.scatter = new DisplayObjectScatter(deepZoomImage, app.renderer, {
    minScale: 0,
    maxScale: 50,
    onTransform: event => {
        deepZoomImage.transformed(event)
    }
})

scatterContainer.addChild(deepZoomImage)