simplepaint, add keyboard controls

patch provided by GCI student "Smehnov"

src/activities/simplepaint/PaintCursor.qml

+/* GCompris - PaintCursor.qml
+ *
+ * Copyright (C) 2018 Bruno Coudoin <bruno.coudoin@gcompris.net>
+ *
+ * Authors:
+ *   Christof Petig and Ingo Konrad (GTK+ version)
+ *   Bruno Coudoin <bruno.coudoin@gcompris.net> (Qt Quick port)
+ *
+ *   This program is free software; you can redistribute it and/or modify
+ *   it under the terms of the GNU General Public License as published by
+ *   the Free Software Foundation; either version 3 of the License, or
+ *   (at your option) any later version.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *   GNU General Public License for more details.
+ *
+ *   You should have received a copy of the GNU General Public License
+ *   along with this program; if not, see <https://www.gnu.org/licenses/>.
+ */
+import QtQuick 2.6
+import "simplepaint.js" as Activity
+import GCompris 1.0
+
+
+Item {
+    id: cursor
+    property alias color: rectangle.color
+    property double ix
+    property double iy
+    property int nbx
+    property int nby
+    property int initialX
+    // Warning testing parent here, just to avoid an error at deletion time
+    property double r: parent ? Math.min((parent.width - initialX) / nbx / 2, (parent.height - bar.height) / nby / 2) : 0
+    property double offsetX: parent ? (initialX + parent.width % (width * nbx)) / 2 : 0
+    property double offsetY: parent ? 10 : 0
+    x: width * ix + offsetX
+    y: height * iy + offsetY
+    width: r * 2
+    height: r * 2
+
+    Rectangle {
+        id: rectangle
+        anchors.fill: parent
+        //border.width: bar.level == 1 ? 1 : 0
+        //border.color: "black"
+    }
+
+
+    Image {
+        scale: 0.9
+        width: rectangle.height
+        height: rectangle.height
+        sourceSize.width: rectangle.height
+        sourceSize.height: rectangle.height
+        source: Activity.url + "eraser.svg"
+        visible: true
+        anchors.centerIn: parent
+    }
+
+
+}

src/activities/simplepaint/Simplepaint.qml

@@ -39,22 +39,127 @@ ActivityBase {
         signal start
         signal stop
         focus: true
+        property bool isColorTab: false
+
+        Keys.onUpPressed: {
+            if(isColorTab) {
+                if (--items.current_color<0) {
+                    items.current_color = items.colors.length-1
+                }
+                items.colorSelector = items.colors[items.current_color]
+                moveColorSelector()
+            }else {
+                if(cursor.iy>0) {
+                cursor.iy--
+                }
+            }
+        }
+
+        Keys.onDownPressed: {
+            if(isColorTab) {
+                if (++items.current_color>items.colors.length-1){
+                    items.current_color = 0
+                }
+                items.colorSelector = items.colors[items.current_color]
+                moveColorSelector()
+        }else {
+                if(cursor.iy<(Activity.nby-1)) {
+                cursor.iy++
+                }
+            }
+        }
+
+        Keys.onRightPressed: {
+            if(!isColorTab) {
+                if(cursor.ix<(Activity.nbx-1)) {
+                cursor.ix++
+                }
+            }
+        }
+
+        Keys.onLeftPressed: {
+            if(!isColorTab) {
+                if(cursor.ix>0) {
+                cursor.ix--
+                }
+            }
+        }
+
+        Keys.onSpacePressed: spawnBlock()
+
+        Keys.onReturnPressed: spawnBlock()
+
+        Keys.onEnterPressed: spawnBlock()
+
+        Keys.onTabPressed:changeTab()
+
+        function changeTab() {
+            isColorTab = !isColorTab
+            if(isColorTab) {
+                 colorSelector.cellWidth = 60 * ApplicationInfo.ratio+20
+            }else {
+                colorSelector.cellWidth = 60 * ApplicationInfo.ratio
+            }
+        }
+
+        function spawnBlock() {
+            if(!isColorTab) {
+                var block = rootItem.childAt(cursor.x, cursor.y)
+                if(block)
+                    block.touched()
+            }else {
+                changeTab()
+            }
+        }
+
+        function refreshCursor() {
+            cursor.nbx= Activity.nbx
+            cursor.nby=Activity.nby
+        }
+
+        function moveColorSelector() {
+            moveColorSelectorAnim.running = false
+            moveColorSelectorAnim.from = colorSelector.contentY
+            if(items.current_color != (items.colors.length-1)) {
+                colorSelector.positionViewAtIndex(items.current_color >= 1 ? items.current_color-2 : items.current_color, colorSelector.Contain)
+            }else {
+                colorSelector.positionViewAtEnd()
+                colorSelector.positionViewAtEnd()
+            }
+            moveColorSelectorAnim.to = colorSelector.contentY
+            moveColorSelectorAnim.running = true
+        }
 
         Component.onCompleted: {
             activity.start.connect(start)
             activity.stop.connect(stop)
         }
+
+        //Cursor to navigate in cells
+        PaintCursor {
+            id:cursor;
+            initialX: colorSelector.width + 20 * ApplicationInfo.ratio
+            z:1
+            ix: 0
+            iy: 0
+            nbx: 20
+            nby: 10
+            color: items.colors[0]
+        }
+
+
         QtObject {
             id: items
             property alias background: background
             property alias bar: bar
             property alias paintModel: paintModel
             property var colors: bar.level < 10 ? Activity.colorsSimple : Activity.colorsAdvanced
-            property string colorSelector: colors[0]
+            property int current_color:0
+            property string colorSelector: colors[current_color]
             property string backgroundImg: Activity.backgrounds[bar.level - 1]
         }
 
-        onStart: Activity.start(main, items)
+        onStart: Activity.start(main, items, background)
         onStop: Activity.stop()
 
         MultiPointTouchArea {
@@ -68,6 +173,8 @@ ActivityBase {
                 var touch = touchPoints[i]
                 var block = rootItem.childAt(touch.x, touch.y)
                 if(block)
+                    cursor.ix = block.ix
+                    cursor.iy = block.iy
                     block.touched()
             }
         }
@@ -100,6 +207,14 @@ ActivityBase {
                 model: items.colors
                 cellWidth: 60 * ApplicationInfo.ratio
                 cellHeight: cellWidth
+
+                NumberAnimation {
+                    id: moveColorSelectorAnim
+                    target: colorSelector
+                    property: "contentY"
+                    duration: 150
+                }
+
                 delegate: Item {
                     width: colorSelector.cellWidth
                     height: width
@@ -197,6 +312,8 @@ ActivityBase {
                             onClicked: {
                                 activity.audioEffects.play('qrc:/gcompris/src/core/resource/sounds/scroll.wav')
                                 items.colorSelector = modelData
+                                items.current_color=items.colors.indexOf(modelData)
+                                items.colorSelector=items.colors[items.current_color]
                             }
                         }
                     }

src/activities/simplepaint/simplepaint.js

@@ -131,7 +131,10 @@ var nby
 var currentLevel = 0
 var numberOfLevel = backgrounds.length
 
-function start(main_, items_) {
+var background
+
+function start(main_, items_, _background) {
+    background=_background
     main = main_
     items = items_
     currentLevel = 0
@@ -146,6 +149,7 @@ function initLevel() {
     items.paintModel.clear()
     nbx = 20 + currentLevel
     nby = Math.floor(nbx * (main.height / main.width))
+    background.refreshCursor()
 
     var model = []
     for(var ix = 0;  ix < nbx; ++ix) {