Added pinch-feature to the main-screen and fixed font-sources.

Change-Id: Ifeb8ba0096c3d5a0bc3606e5dcc5ebce2ed4f25b
Reviewed-by: Kimmo Ollila <kimmo.ollila@digia.com>

8 files changed, 219 insertions, 189 deletions

diff --git a/QtDemo/qml/QtDemo/Group.qml b/QtDemo/qml/QtDemo/Group.qml
index 6ee3304..1a21889 100644
--- a/QtDemo/qml/QtDemo/Group.qml
+++ b/QtDemo/qml/QtDemo/Group.qml
@@ -38,7 +38,7 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.2
 import "style.js" as Style
 
 Item {
@@ -53,7 +53,7 @@ Item {
     property real imageScale: 6.0
 
     property int fontSize: 160
-    property string uiFont: Style.FONT_FAMILY
+    property string uiFont: fontLoader.name
     property bool bold: true
     property int fontTransition: 6
 
@@ -62,7 +62,7 @@ Item {
         x: textX
         y: textY
         font.pixelSize: group.fontSize
-        font.family: Style.FONT_FAMILY
+        font.family: fontLoader.name
         font.bold: group.bold
         color: "#42200a"
         smooth: true
@@ -73,7 +73,7 @@ Item {
             x:group.fontTransition
             y:-group.fontTransition
             font.pixelSize: group.fontSize
-            font.family: Style.FONT_FAMILY
+            font.family: fontLoader.name
             font.bold: group.bold
             smooth: true
         }
diff --git a/QtDemo/qml/QtDemo/HelpScreen.qml b/QtDemo/qml/QtDemo/HelpScreen.qml
index 3fb540c..cde7f5f 100644
--- a/QtDemo/qml/QtDemo/HelpScreen.qml
+++ b/QtDemo/qml/QtDemo/HelpScreen.qml
@@ -38,7 +38,7 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.2
 import "style.js" as Style
 
 Item {
@@ -125,7 +125,7 @@ Item {
         anchors {horizontalCenter: parent.horizontalCenter; top: parent.top; topMargin: parent.height*.05}
         text: ""
         font.pixelSize: parent.width*.075
-        font.family: Style.FONT_FAMILY
+        font.family: fontLoader.name
         smooth: true
         color: "white"
 
@@ -134,7 +134,7 @@ Item {
             anchors {horizontalCenter: parent.horizontalCenter; top: parent.bottom; topMargin: -parent.height/2}
             text: ""
             font.pixelSize: parent.font.pixelSize
-            font.family: Style.FONT_FAMILY
+            font.family: fontLoader.name
             smooth: true
             color: "white"
         }
@@ -210,12 +210,12 @@ Item {
                 script: {
                     highlight.size= (700+clickAnimation.index*100)*canvas.scalingFactor
 
-                    highlight.x=root.width/2 +getPosition(clickAnimation.uids[clickAnimation.index]).x*canvas.scalingFactor
-                    highlight.y=root.height/2 +getPosition(clickAnimation.uids[clickAnimation.index]).y*canvas.scalingFactor
+                    highlight.x=root.width/2 +app.getPosition(clickAnimation.uids[clickAnimation.index]).x*canvas.scalingFactor
+                    highlight.y=root.height/2 +app.getPosition(clickAnimation.uids[clickAnimation.index]).y*canvas.scalingFactor
 
-                    pointer.x= root.width/2 -pointer.width/2 +getPosition(clickAnimation.uids[clickAnimation.index]).x*canvas.scalingFactor*.5
-                    pointer.y= root.height/2 -pointer.height/2 +getPosition(clickAnimation.uids[clickAnimation.index]).y*canvas.scalingFactor*.5
-                    pointer.rotation=Math.atan2(getPosition(clickAnimation.uids[clickAnimation.index]).y*canvas.scalingFactor, getPosition(clickAnimation.uids[clickAnimation.index]).x*canvas.scalingFactor)*180.0/Math.PI
+                    pointer.x= root.width/2 -pointer.width/2 +app.getPosition(clickAnimation.uids[clickAnimation.index]).x*canvas.scalingFactor*.5
+                    pointer.y= root.height/2 -pointer.height/2 +app.getPosition(clickAnimation.uids[clickAnimation.index]).y*canvas.scalingFactor*.5
+                    pointer.rotation=Math.atan2(app.getPosition(clickAnimation.uids[clickAnimation.index]).y*canvas.scalingFactor, app.getPosition(clickAnimation.uids[clickAnimation.index]).x*canvas.scalingFactor)*180.0/Math.PI
                     pointingAnimation.restart()
                 }
             }
diff --git a/QtDemo/qml/QtDemo/Slide.qml b/QtDemo/qml/QtDemo/Slide.qml
index 36e0b08..99ef4a9 100644
--- a/QtDemo/qml/QtDemo/Slide.qml
+++ b/QtDemo/qml/QtDemo/Slide.qml
@@ -38,7 +38,7 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.2
 import "style.js" as Style
 
 Item {
@@ -91,7 +91,7 @@ Item {
                 id: splashScreenText
                 color: 'white'
                 font.pixelSize: parent.width *.2
-                font.family: Style.FONT_FAMILY
+                font.family: fontLoader.name
                 text: slide.name
                 anchors.centerIn: parent
                 smooth: true
diff --git a/QtDemo/qml/QtDemo/SplashScreen.qml b/QtDemo/qml/QtDemo/SplashScreen.qml
index 42dd8d3..eecddb7 100644
--- a/QtDemo/qml/QtDemo/SplashScreen.qml
+++ b/QtDemo/qml/QtDemo/SplashScreen.qml
@@ -38,7 +38,7 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.2
 import QtQuick.Particles 2.0
 import "style.js" as Style
 //based on the SmokeText component from SameGame
@@ -64,7 +64,7 @@ Item {
             id: txt
             color: 'white'
             font.pixelSize: parent.width *.2
-            font.family: Style.FONT_FAMILY
+            font.family: fontLoader.name
             anchors.centerIn: parent
             smooth: true
         }
diff --git a/QtDemo/qml/QtDemo/WorldCanvas.qml b/QtDemo/qml/QtDemo/WorldCanvas.qml
index f73116b..a121cd3 100644
--- a/QtDemo/qml/QtDemo/WorldCanvas.qml
+++ b/QtDemo/qml/QtDemo/WorldCanvas.qml
@@ -38,7 +38,7 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.2
 import "style.js" as Style
 
 Item{
@@ -59,7 +59,7 @@ Item{
     property real rotationOriginX
     property real rotationOriginY
 
-    function goHome()
+    function goHome(useZoom)
     {
         worldMouseArea.panning = false
         xOffset = 0; //(app.homeCenterX * app.homeScaleFactor);
@@ -70,7 +70,10 @@ Item{
         zoomInTarget = app.homeScaleFactor;
         app.navigationState = 0 //home
         app.forceActiveFocus()
-        zoomAnimation.restart();
+        if (useZoom)
+            zoomAnimation.restart();
+        else
+            navigationAnimation.restartAnimation()
     }
     function goTo(target, updateScalingFactor)
     {
@@ -105,7 +108,7 @@ Item{
             zoomAnimation.restart()
         }
         else
-            canvas.goHome()
+            canvas.goHome(true)
     }
 
     Behavior on xOffset {
@@ -121,11 +124,13 @@ Item{
     }
 
     Behavior on rotationOriginX {
+        enabled: !worldMouseArea.panning
         NumberAnimation{
             duration: Style.APP_ANIMATION_DELAY
         }
     }
     Behavior on rotationOriginY {
+        enabled: !worldMouseArea.panning
         NumberAnimation{
             duration: Style.APP_ANIMATION_DELAY
         }
diff --git a/QtDemo/qml/QtDemo/WorldMouseArea.qml b/QtDemo/qml/QtDemo/WorldMouseArea.qml
index ee22054..e009898 100644
--- a/QtDemo/qml/QtDemo/WorldMouseArea.qml
+++ b/QtDemo/qml/QtDemo/WorldMouseArea.qml
@@ -38,7 +38,7 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.2
 
 MouseArea{
     id: worldMouseArea
@@ -54,6 +54,14 @@ MouseArea{
         var dx = mouse.x - startMouseX;
         var dy = mouse.y - startMouseY;
 
+        var coords = mapToItem(canvas, width/2, height/2)
+
+        canvas.rotationOriginX=coords.x
+        canvas.rotationOriginY=coords.y
+
+        canvas.xOffset = -canvas.rotationOriginX;
+        canvas.yOffset = -canvas.rotationOriginY;
+
         // Check the point only if we didn't move the mouse too much
         if (!mouse.wasHeld && Math.abs(dx) <= app.tapLimitX && Math.abs(dy) <= app.tapLimitY)
         {
@@ -74,7 +82,7 @@ MouseArea{
                 zoomAnimation.restart()
             }
             else // If not target under mouse -> go home
-                canvas.goHome()
+                canvas.goHome(true)
         }
     }
 
diff --git a/QtDemo/qml/QtDemo/main.qml b/QtDemo/qml/QtDemo/main.qml
index f35623c..f0e32eb 100644
--- a/QtDemo/qml/QtDemo/main.qml
+++ b/QtDemo/qml/QtDemo/main.qml
@@ -38,203 +38,222 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.2
+import QtQuick.Window 2.1
 import "engine.js" as Engine
 import "style.js" as Style
 
-Rectangle{
-    id: app
-    clip: true
-    focus: true
-
-    property real homeScaleFactor: .2
-    property int homeCenterX: 0
-    property int homeCenterY: 0
-    property real minScaleFactor: .04
-    property real maxScaleFactor: 1
-    property real tapLimitX : 2
-    property real tapLimitY : 1
-    property int navigationState: 0 //home, group, slide, dirty
-    property bool useGroups: true
-
-    function calculateScales(){
-        if (app.width > 0 && app.height > 0){
-            var bbox = Engine.boundingBox();
-            app.homeScaleFactor = Engine.scaleToBox(app.width*0.85, app.height*0.85, bbox.width, bbox.height);
-            app.homeCenterX = bbox.centerX;
-            app.homeCenterY = bbox.centerY;
-            app.minScaleFactor = app.homeScaleFactor / 10;
-            app.maxScaleFactor = app.homeScaleFactor * 20;
-            Engine.updateObjectScales(app.width*0.9, app.height*0.9);
-            Engine.updateGroupScales(app.width, app.height);
-            tapLimitX = Math.max(1,app.width * 0.02);
-            tapLimitY = Math.max(1,app.height * 0.02);
-
-
-            var target = Engine.getCurrentGroup()
-            if (app.useGroups && navigationState == 1) {
-                if (target !== null)
-                    canvas.goTo(target, true)
+Window {
+    visible: true
+
+    onWidthChanged: app.calculateScales();
+    onHeightChanged: app.calculateScales();
+
+    Rectangle {
+        id: app
+        anchors.fill: parent
+        clip: true
+        focus: true
+
+        property real homeScaleFactor: .2
+        property int homeCenterX: 0
+        property int homeCenterY: 0
+        property real minScaleFactor: .04
+        property real maxScaleFactor: 1
+        property real tapLimitX : 2
+        property real tapLimitY : 1
+        property int navigationState: 0 //home, group, slide, dirty
+        property bool useGroups: true
+
+        function calculateScales(){
+            if (app.width > 0 && app.height > 0){
+                var bbox = Engine.boundingBox();
+                app.homeScaleFactor = Engine.scaleToBox(app.width*0.85, app.height*0.85, bbox.width, bbox.height);
+                app.homeCenterX = bbox.centerX;
+                app.homeCenterY = bbox.centerY;
+                app.minScaleFactor = app.homeScaleFactor / 10;
+                app.maxScaleFactor = app.homeScaleFactor * 20;
+                Engine.updateObjectScales(app.width*0.9, app.height*0.9);
+                Engine.updateGroupScales(app.width, app.height);
+                tapLimitX = Math.max(1,app.width * 0.02);
+                tapLimitY = Math.max(1,app.height * 0.02);
+
+                var target = Engine.getCurrentGroup()
+                if (app.useGroups && app.navigationState == 1) {
+                    if (target !== null)
+                        canvas.goTo(target, true)
+                    else
+                        canvas.goHome(false)
+                }
+                else if (app.navigationState == 2) {
+                    target = Engine.getCurrent()
+                    if (target !== null)
+                        canvas.goTo(target, true)
+                    else
+                        canvas.goHome(false)
+                }
                 else
-                    canvas.goHome()
-            }
-            else if (navigationState == 2) {
-                target = Engine.getCurrent()
-                if (target !== null)
-                    canvas.goTo(target, true)
-                else
-                    canvas.goHome()
-            }
-            else
-                canvas.goHome()
+                    canvas.goHome(false)
 
-            navigationPanel.checkOrientation()
+                navigationPanel.checkOrientation()
+            }
         }
-    }
-
-    function selectTarget(uid) {
-        return Engine.selectTarget(uid)
-    }
-
-    function selectGroup(uid) {
-        return Engine.selectGroup(uid)
-    }
-
-    function getCurrentGroup() {
-        return Engine.getCurrentGroup()
-    }
-
-    function getNext() {
-        if (app.useGroups && app.navigationState == 1)
-            return Engine.getNextGroup()
-        else
-            return Engine.getNext()
-    }
 
-    function getPrevious() {
-        if (app.useGroups && app.navigationState == 1)
-            return Engine.getPreviousGroup()
-        else
-            return Engine.getPrevious()
-    }
-
-    onWidthChanged: calculateScales();
-    onHeightChanged: calculateScales();
+        function selectTarget(uid) {
+            return Engine.selectTarget(uid)
+        }
 
-    FontLoader {
-        id: fontLoader
-        source: "fonts/PatrickHandSC-Regular.ttf"
-    }
+        function selectGroup(uid) {
+            return Engine.selectGroup(uid)
+        }
 
-    gradient: Gradient {
-        GradientStop { position: 0.0; color: "#89d4ff" }
-        GradientStop { position: 1.0; color: "#f3fbff" }
-    }
+        function getCurrentGroup() {
+            return Engine.getCurrentGroup()
+        }
 
-    Cloud { id: cloud1; sourceImage: "images/cloud1.png"}
-    Cloud { id: cloud2; sourceImage: "images/cloud1.png"}
-    Cloud { id: cloud3; sourceImage: "images/cloud1.png"}
-    Cloud { id: cloud4; sourceImage: "images/cloud2.png"}
-    Cloud { id: cloud5; sourceImage: "images/cloud2.png"}
-    Cloud { id: cloud6; sourceImage: "images/cloud2.png"}
+        function getNext() {
+            if (app.useGroups && app.navigationState == 1)
+                return Engine.getNextGroup()
+            else
+                return Engine.getNext()
+        }
 
-    WorldMouseArea { id: worldMouseArea }
-    WorldCanvas { id:canvas }
-    NavigationPanel{ id: navigationPanel }
+        function getPrevious() {
+            if (app.useGroups && app.navigationState == 1)
+                return Engine.getPreviousGroup()
+            else
+                return Engine.getPrevious()
+        }
 
-    HelpScreen {
-        id: helpscreen
-        visible: false
-    }
-    function getPosition(index){
-        return Engine.getPosition(index)
-    }
+        function getPosition(index){
+            return Engine.getPosition(index)
+        }
 
-    QuitDialog {
-        id: quitDialog
-        visible: false
+        FontLoader {
+            id: fontLoader
+            source: "fonts/PatrickHandSC-Regular.ttf"
+        }
 
-        onYes: Qt.quit()
-        onNo: visible = false
-    }
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: "#89d4ff" }
+            GradientStop { position: 1.0; color: "#f3fbff" }
+        }
 
-    SmoothedAnimation {
-        id: zoomAnimation
-        target: canvas;
-        property: "scalingFactor";
-        duration: Style.APP_ANIMATION_DELAY
-        velocity: -1
-        to:canvas.zoomInTarget
-
-        onRunningChanged: {
-            if (!running) {
-                if (app.navigationState === 2)
-                    Engine.loadCurrentDemo();
-                else
-                    Engine.releaseDemos();
+        Cloud { id: cloud1; sourceImage: "images/cloud1.png"}
+        Cloud { id: cloud2; sourceImage: "images/cloud1.png"}
+        Cloud { id: cloud3; sourceImage: "images/cloud1.png"}
+        Cloud { id: cloud4; sourceImage: "images/cloud2.png"}
+        Cloud { id: cloud5; sourceImage: "images/cloud2.png"}
+        Cloud { id: cloud6; sourceImage: "images/cloud2.png"}
+
+        PinchArea {
+            anchors.fill: parent
+            property real initialValue: 1.0
+            pinch.minimumRotation: 0
+            pinch.maximumRotation: 0
+            onPinchStarted: initialValue = canvas.scalingFactor
+            onPinchUpdated: canvas.scalingFactor = Math.min(app.maxScaleFactor, Math.max(app.minScaleFactor, initialValue + pinch.scale-1.0));
+
+            WorldMouseArea {
+                id: worldMouseArea
             }
         }
-    }
-
-    SequentialAnimation {
-        id: navigationAnimation
 
-        property int animCounter: 0
+        WorldCanvas { id:canvas }
+        NavigationPanel{ id: navigationPanel }
 
-        function restartAnimation() {
-            navigationAnimation.animCounter++;
-            restart();
+        HelpScreen {
+            id: helpscreen
+            visible: false
         }
+        QuitDialog {
+            id: quitDialog
+            visible: false
 
-        NumberAnimation {
-            id: zoomOutAnimation
-            target: canvas;
-            property: "scalingFactor";
-            duration: Style.APP_ANIMATION_DELAY/2;
-            to: app.homeScaleFactor*1.3
-            easing.type: Easing.OutCubic
+            onYes: Qt.quit()
+            onNo: visible = false
         }
 
-        NumberAnimation {
-            id: zoomInAnimation
+        SmoothedAnimation {
+            id: zoomAnimation
             target: canvas;
             property: "scalingFactor";
-            duration: Style.APP_ANIMATION_DELAY/2;
-            to: canvas.zoomInTarget
-            easing.type: Easing.InCubic
+            duration: Style.APP_ANIMATION_DELAY
+            velocity: -1
+            to:canvas.zoomInTarget
+
+            onRunningChanged: {
+                if (!running) {
+                    if (app.navigationState === 2)
+                        Engine.loadCurrentDemo();
+                    else
+                        Engine.releaseDemos();
+                }
+            }
         }
 
-        onRunningChanged: {
-            if (!running)
-                animCounter--
+        SequentialAnimation {
+            id: navigationAnimation
+
+            property int animCounter: 0
+
+            function restartAnimation() {
+                navigationAnimation.animCounter++;
+                restart();
+            }
+
+            NumberAnimation {
+                id: zoomOutAnimation
+                target: canvas;
+                property: "scalingFactor";
+                duration: Style.APP_ANIMATION_DELAY/2;
+                to: app.homeScaleFactor*1.3
+                easing.type: Easing.OutCubic
+            }
+
+            NumberAnimation {
+                id: zoomInAnimation
+                target: canvas;
+                property: "scalingFactor";
+                duration: Style.APP_ANIMATION_DELAY/2;
+                to: canvas.zoomInTarget
+                easing.type: Easing.InCubic
+            }
+
+            onRunningChanged: {
+                if (!running)
+                    animCounter--
 
-            if (animCounter === 0 && navigationState === 2)
-                Engine.loadCurrentDemo();
+                if (animCounter === 0 && app.navigationState === 2)
+                    Engine.loadCurrentDemo();
+            }
         }
-    }
 
-    Keys.onReleased: {
-        // Handle back-key
-        if (event.key === Qt.Key_Back) {
-            event.accepted = true;
+        Keys.onReleased: {
+            // Handle back-key
+            if (event.key === Qt.Key_Back) {
+                event.accepted = true;
 
-            if (app.navigationState !== 0)
-                canvas.goBack();
-            else
-                quitDialog.visible = true
+                if (app.navigationState !== 0)
+                    canvas.goBack();
+                else
+                    quitDialog.visible = true
+            }
         }
-    }
 
-    Component.onCompleted: {
-        if (app.useGroups)
-            Engine.initGroups()
-
-        Engine.initSlides()
-        cloud1.start();
-        cloud2.start();
-        cloud3.start();
-        cloud4.start();
-        cloud5.start();
-        cloud6.start();
+        Component.onCompleted: {
+            if (app.useGroups)
+                Engine.initGroups()
+
+            Engine.initSlides()
+            cloud1.start();
+            cloud2.start();
+            cloud3.start();
+            cloud4.start();
+            cloud5.start();
+            cloud6.start();
+
+            app.calculateScales()
+        }
     }
 }
diff --git a/QtDemo/qml/QtDemo/style.js b/QtDemo/qml/QtDemo/style.js
index c63c2cc..4de4635 100644
--- a/QtDemo/qml/QtDemo/style.js
+++ b/QtDemo/qml/QtDemo/style.js
@@ -45,5 +45,3 @@ var APP_ANIMATION_DELAY = 1000
 
 var LOGO_WIDTH = 800 //1006
 var LOGO_HEIGHT = 960 //1200
-
-var FONT_FAMILY = "Patrick Hand SC"