Fixed navigation and animations.

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

4 files changed, 121 insertions, 51 deletions

diff --git a/QtDemo/qml/QtDemo/Slide.qml b/QtDemo/qml/QtDemo/Slide.qml
index 989b3c5..94d41ae 100644
--- a/QtDemo/qml/QtDemo/Slide.qml
+++ b/QtDemo/qml/QtDemo/Slide.qml
@@ -6,6 +6,7 @@ Rectangle {
 
     width: device === 0 ? 375 : device === 1 ? 838 : device === 2 ? 840 : 867
     height: device === 0 ? 835 : device === 1 ? 589 : device === 2 ? 763 : 520
+    scale: device === 0 ? .6 : device === 1 ? 1.4 : device === 2 ? .8 : 2
 
     color: "transparent"
     border {color: app.showDebugRects ? borderColor : "transparent"; width:3}
@@ -15,7 +16,7 @@ Rectangle {
     property string url: ""
     property int device: 0
     property bool loaded: false
-
+    property real targetScale: 1
 
     property int maskWidth: device === 0 ? 375 : device === 1 ? 900 : device === 2 ? 840 : 867
     property int maskHeight: device === 0 ? 835 : device === 1 ? 661 : device === 2 ? 763 : 520
diff --git a/QtDemo/qml/QtDemo/engine.js b/QtDemo/qml/QtDemo/engine.js
index e978406..91585c6 100644
--- a/QtDemo/qml/QtDemo/engine.js
+++ b/QtDemo/qml/QtDemo/engine.js
@@ -1,19 +1,19 @@
-var positions = [{x:700, y:-400, angle: 0, borderColor: "blue", scale: .6, url: "demos/samegame/samegame.qml", device: 0},
-        {x:1200, y:-200, angle:5, borderColor: "grey", scale: .6, url: "demos/tweetsearch/tweetsearch.qml", device: 0},
-        {x:-700, y:-300, angle: 2, borderColor: "green", scale: .6, url: "demos/calqlatr/Calqlatr.qml", device: 0},
-        {x:-1300, y:400, angle: -2, borderColor: "red", scale: 1.4, url: "demos/particledemo/particledemo.qml", device: 1},
-        {x: 900, y: 200, angle: 0, borderColor: "lime", scale: .6, url: "demos/tweetsearch/tweetsearch.qml", device: 0},
-        {x:-300, y:-900, angle: 8, borderColor: "black", scale: .6, url: "demos/calqlatr/Calqlatr.qml", device: 0},
-        {x: 300, y:-1000, angle: 0, borderColor: "orange", scale: .8, url: "demos/particledemo/particledemo.qml", device: 2},
-        {x: 200, y:1100, angle: -8, borderColor: "orange", scale: 2, url: "demos/particledemo/particledemo.qml", device: 3},
-
-        {x: -1300, y:1100, angle: 3, borderColor: "orange", scale: .8, url: "demos/boot/BootScreen.qml", device: 2},
-        {x: 1500, y:800, angle: -3, borderColor: "orange", scale: .8, url: "demos/boot/BootScreen.qml", device: 2},
-        {x: 1500, y:-1100, angle: -3, borderColor: "red", scale: 1.4, url: "demos/particledemo/particledemo.qml", device: 1},
-        {x: 2000, y: 0, angle: 5, borderColor: "red", scale: 1.4, url: "demos/photosurface/photosurface.qml", device: 1},
-        {x: -1700, y: -900, angle: 3, borderColor: "orange", scale: 2, url: "demos/particledemo/particledemo.qml", device: 3},
-
-        {x:-2200, y:200, angle: -5, borderColor: "blue", scale: .6, url: "demos/samegame/samegame.qml", device: 0}
+var positions = [{x:700, y:-400, angle: 0, borderColor: "blue", url: "demos/samegame/samegame.qml", device: 0},
+        {x:1200, y:-200, angle:5, borderColor: "grey", url: "demos/tweetsearch/tweetsearch.qml", device: 0},
+        {x:-700, y:-300, angle: 2, borderColor: "green", url: "demos/calqlatr/Calqlatr.qml", device: 0},
+        {x:-1300, y:400, angle: -2, borderColor: "red", url: "demos/particledemo/particledemo.qml", device: 1},
+        {x: 900, y: 200, angle: 0, borderColor: "lime", url: "demos/tweetsearch/tweetsearch.qml", device: 0},
+        {x:-300, y:-900, angle: 8, borderColor: "black", url: "demos/calqlatr/Calqlatr.qml", device: 0},
+        {x: 300, y:-1000, angle: 0, borderColor: "orange", url: "demos/particledemo/particledemo.qml", device: 2},
+        {x: 200, y:1100, angle: -8, borderColor: "orange", url: "demos/particledemo/particledemo.qml", device: 3},
+
+        {x: -1300, y:1100, angle: 3, borderColor: "orange", url: "demos/boot/BootScreen.qml", device: 2},
+        {x: 1500, y:800, angle: -3, borderColor: "orange", url: "demos/boot/BootScreen.qml", device: 2},
+        {x: 1500, y:-1100, angle: -3, borderColor: "red", url: "demos/particledemo/particledemo.qml", device: 1},
+        {x: 2000, y: 0, angle: 5, borderColor: "red", url: "demos/photosurface/photosurface.qml", device: 1},
+        {x: -1700, y: -900, angle: 3, borderColor: "orange", url: "demos/particledemo/particledemo.qml", device: 3},
+
+        {x:-2200, y:200, angle: -5, borderColor: "blue", url: "demos/samegame/samegame.qml", device: 0}
         ]
 
 var order = [1,2,3,4,5,6,7,8,9,10,11,12,13,14]
@@ -24,11 +24,11 @@ var objects = []
 
 function initSlides(){
     positions.forEach(function(pos){
-        createNew(pos.x,pos.y,pos.angle, pos.borderColor, pos.scale, pos.url, pos.device)
+        createNew(pos.x,pos.y,pos.angle, pos.borderColor, pos.url, pos.device)
     })
 }
 
-function showBootScreen(){
+function showBootScreen(scale){
     print ("Show BootScreen")
     var component = Qt.createComponent("demos/boot/BootScreen.qml")
     print ("component on: "+component)
@@ -39,13 +39,12 @@ function showBootScreen(){
     }
 }
 
-function createNew(x,y,angle,borderColor,scale,url,device){
+function createNew(x,y,angle,borderColor,url,device){
     var component = Qt.createComponent("Slide.qml")
     if (component.status === Component.Ready){
     var object=component.createObject(canvas)
     object.device = device
     object.rotation = angle
-    object.scale = scale
     object.uid = objects.length+1
     object.borderColor = borderColor
     object.x = x-object.width/2
@@ -111,8 +110,52 @@ function selectTarget(uid){
     }
     if (idx !== -1){
         currentDemoId = idx
-        return {"x": positions[idx].x, "y":  positions[idx].y, "angle": positions[idx].angle, "scale": positions[idx].scale}
+        return {"x": positions[idx].x, "y":  positions[idx].y, "angle": positions[idx].angle, "targetScale": objects[idx].targetScale}
     }
 
     return null;
 }
+
+function boundingBox(){
+    var minX = 0, maxX = 0, minY = 0, maxY = 0;
+
+    for (var i=0; i<objects.length; i++){
+        var scale = objects[i].scale;
+        var w2 = objects[i].width/2*scale;
+        var h2 = objects[i].height/2*scale;
+        var left = objects[i].x - w2;
+        var right = objects[i].x - w2;
+        var top = objects[i].y - h2;
+        var bottom = objects[i].y + h2;
+
+        if (left < minX)
+            minX = left;
+        else if (right > maxX)
+            maxX = right;
+
+        if (top < minY)
+            minY = top;
+        else if (bottom > maxY)
+            maxY = bottom;
+    }
+
+    return {"x": minX, "y": minY, "width": maxX-minX, "height": maxY-minY};
+}
+
+function scaleToBox(destWidth, destHeight, sourceWidth, sourceHeight)
+{
+    var xscale = destWidth / sourceWidth;
+    var yscale = destHeight / sourceHeight;
+
+    var scale = Math.max(xscale, yscale);
+    if (sourceWidth > destWidth || sourceHeight > destHeight)
+        scale = Math.min(xscale,yscale);
+
+    return scale;
+}
+
+function updateObjectScales(destWidth, destHeight)
+{
+    for (var i=0; i<objects.length; i++)
+        objects[i].targetScale = scaleToBox(destWidth, destHeight, objects[i].width*objects[i].scale, objects[i].height*objects[i].scale);
+}
diff --git a/QtDemo/qml/QtDemo/main.qml b/QtDemo/qml/QtDemo/main.qml
index 80940cc..85a9a5f 100644
--- a/QtDemo/qml/QtDemo/main.qml
+++ b/QtDemo/qml/QtDemo/main.qml
@@ -4,11 +4,34 @@ import "style.js" as Style
 
 Rectangle{
     id: app
-    width: Style.APP_WIDTH
-    height: Style.APP_HEIGHT
     clip: true
     color: "white"
     property bool showDebugRects: false //true
+    property real homeScaleFactor: .2
+    property real minScaleFactor: .04
+    property real maxScaleFactor: 1
+    property real tapLimitX : 2
+    property real tapLimitY : 1
+
+    function calculateScales(){
+        if (app.width > 0 && app.height > 0){
+            var appWidth = app.width * 0.90;
+            var appHeight = app.height * 0.90;
+
+            var bbox = Engine.boundingBox();
+            app.homeScaleFactor = Engine.scaleToBox(appWidth, appHeight, bbox.width, bbox.height);
+            app.minScaleFactor = app.homeScaleFactor / 5;
+            app.maxScaleFactor = app.homeScaleFactor * 5;
+
+            Engine.updateObjectScales(app.width, app.height);
+            tapLimitX = Math.max(1,app.width * 0.02);
+            tapLimitY = Math.max(1,app.height * 0.02);
+        }
+
+    }
+
+    onWidthChanged: calculateScales();
+    onHeightChanged: calculateScales();
 
     Rectangle{
         anchors.centerIn: parent
@@ -32,11 +55,18 @@ Rectangle{
 
         property int oldX: 0
         property int oldY: 0
+        property int startMouseX: 0
+        property int startMouseY: 0
         property bool panning: false
 
         onReleased: {
-            // Check the point only if we didn't move the mouse
-            if (!panning) {
+            var dx = mouse.x - startMouseX;
+            var dy = mouse.y - startMouseY;
+
+            // 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)
+            {
+                panning = false
                 var target = null;
 
                 // Check if there is target under mouse.
@@ -56,27 +86,26 @@ Rectangle{
                 else // If not target under mouse -> go home
                     canvas.goHome()
             }
-            panning = false
         }
 
         onPressed: {
             // Save mouse state
             oldX = mouse.x
             oldY = mouse.y
+            startMouseX = mouse.x
+            startMouseY = mouse.y
         }
 
         onPositionChanged: {
             var dx = mouse.x - oldX;
             var dy = mouse.y - oldY;
 
-            if (!panning && (Math.abs(dx) > 1 || Math.abs(dy) > 1))
-                panning=true;
-
             oldX = mouse.x;
             oldY = mouse.y;
 
             if (!zoomAnimation.running)
             {
+                panning = true;
                 canvas.xOffset += dx;
                 canvas.yOffset += dy;
             }
@@ -94,8 +123,8 @@ Rectangle{
         id: worldPinchArea
         anchors.fill: parent
         pinch.target: pinchProxy
-        pinch.minimumScale: .2
-        pinch.maximumScale: 5
+        pinch.minimumScale: app.minScaleFactor
+        pinch.maximumScale: app.maxScaleFactor
         pinch.maximumRotation: 360
         pinch.minimumRotation: -360
         enabled: !zoomAnimation.running
@@ -128,34 +157,32 @@ Rectangle{
         property real xOffset: 0
         property real yOffset: 0
         property real angle: 0
-        property real scalingFactor: .2
 
-        property real zoomInTarget: 1
-        property real zoomOutTarget: .4
+        property real zoomInTarget: app.homeScaleFactor
+        property real scalingFactor: app.homeScaleFactor
 
         property real rotationOriginX
         property real rotationOriginY
 
         function goHome()
         {
-            xOffset = 0
-            yOffset = 0
-            rotationOriginX = 0
-            rotationOriginY = 0
-            angle = 0
-            zoomInTarget = 0.2
+            xOffset = 0;
+            yOffset = 0;
+            rotationOriginX = 0;
+            rotationOriginY = 0;
+            angle = 0;
+            zoomInTarget = app.homeScaleFactor;
 
             zoomAnimation.restart();
         }
         function goTo(target)
         {
-            xOffset = -target.x
-            yOffset = -target.y
-            rotationOriginX = target.x
-            rotationOriginY = target.y
-            angle = -target.angle
-            zoomOutTarget = .4
-            zoomInTarget = 1.0/(target.scale)
+            xOffset = -target.x;
+            yOffset = -target.y;
+            rotationOriginX = target.x;
+            rotationOriginY = target.y;
+            angle = -target.angle;
+            zoomInTarget = target.targetScale;
 
             zoomAnimation.restart()
         }
@@ -242,8 +269,7 @@ Rectangle{
         id: zoomAnimation
         NumberAnimation { target: canvas; property: "scalingFactor"; duration: Style.APP_ANIMATION_DELAY; to:canvas.zoomInTarget }
         onRunningChanged: {
-            if (!running && canvas.zoomInTarget !== .2){
-                print ("zoomanimation calls loaddemo")
+            if (!running && canvas.zoomInTarget !== app.homeScaleFactor){
                 Engine.loadCurrentDemo();
             }
         }
@@ -255,7 +281,6 @@ Rectangle{
 
 
     Component.onCompleted: {
-
         logo.opacity=1.0
         Engine.showBootScreen()
 
diff --git a/QtDemo/qml/QtDemo/style.js b/QtDemo/qml/QtDemo/style.js
index e7cb85e..39565bb 100644
--- a/QtDemo/qml/QtDemo/style.js
+++ b/QtDemo/qml/QtDemo/style.js
@@ -2,6 +2,7 @@ var APP_WIDTH = 1280
 var APP_HEIGHT = 800
 
 var APP_ANIMATION_DELAY = 1000
+var APP_CLICK_TIME = 200
 
 var LOGO_WIDTH = 1006
 var LOGO_HEIGHT = 1200