QtQuickColouringBook/qml/ColouringBook/MainView.qml

import QtQuick 1.0
import ColoringItems 1.0

Rectangle {
    id: main
    color: "black"
    anchors.fill: parent

    property int canvasWidth
    property int canvasHeight

    function resetZoom() {
        flick.contentWidth = main.canvasWidth
        flick.contentHeight = main.canvasHeight
        flick.contentX = 0
        flick.contentY = 0
    }

    Flickable {
        id: flick
        anchors.fill: parent
        contentWidth: canvasWidth
        contentHeight: canvasHeight
        flickableDirection: Flickable.HorizontalAndVerticalFlick

        PinchArea {
            id: pincharea
            width: Math.max(flick.contentWidth, flick.width)
            height: Math.max(flick.contentHeight, flick.height)

            property real scale: 1.0

            onPinchChanged: {
                flick.contentX += pinch.lastCenter.x - pinch.center.x
                flick.contentY += pinch.lastCenter.y - pinch.center.y

                pincharea.scale = 1.0 + pinch.scale - pinch.lastScale

                var oldWidth = flick.contentWidth
                var oldHeight = flick.contentHeight
                flick.contentWidth = flick.contentWidth * scale
                flick.contentHeight = flick.contentHeight * scale

                if (pinch.center.x != 0) {
                    var pos = pinch.center.x * flick.contentWidth / oldWidth
                    flick.contentX = flick.contentX + pos - pinch.center.x
                }

                if (pinch.center.y != 0) {
                    var pos = pinch.center.y * flick.contentHeight / oldHeight
                    flick.contentY = flick.contentY + pos - pinch.center.y
                }
            }

            onPinchFinished: {
            }

            ColoringCanvas {
                id: coloringcanvas

                width: flick.contentWidth
                height: flick.contentHeight
                smooth: false

                color: colorChooser.fillColor

                source: fileChooser.currentImage
                //onSourceChanged: resetZoom()

                property real imageScale: flick.contentWidth / canvasWidth

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        var x = mouse.x / coloringcanvas.imageScale
                        var y = mouse.y / coloringcanvas.imageScale
                        coloringcanvas.click(x, y)
                    }
                }
            }
        }
    }

    BorderImage {
        anchors.fill: parent
        source: "gfx/mainview.png"
        border {
            top: 10
            bottom: 10
            left: 10
            right: 70
        }
    }

    Column {
        y: 5
        width: 60
        height: parent.height - 10
        anchors.right: parent.right

        spacing: parent.height / 4 - 55

        Button {
            source: "gfx/exit.png"
            onClicked: Qt.quit()
        }

        Button {
            source: "gfx/select.png"
            onClicked: {
                fileChooser.show()
            }
        }

        Button {
            source: "gfx/restore.png"
            onClicked: {
                resetZoom()
            }
        }

        Item {
            width: 60
            height: 60

            Rectangle {
                anchors.centerIn: parent
                width: 40
                height: 40
                radius: 20
                color: colorChooser.fillColor
            }

            Button {
                source: "gfx/colorpicker.png"
                onClicked: colorChooser.show()
            }
        }

    }


    ColorChooser {
        id: colorChooser
        width: parent.height
        height: parent.height
        x: parent.width
    }

    FileChooser {
        id: fileChooser
        width: parent.width
        height: parent.height
        x: parent.width
    }
}