activities/path_encoding/MapView.qml

0001 /* GCompris - MapView.qml
0002  *
0003  * SPDX-FileCopyrightText: 2021 Harsh Kumar <hadron43@yahoo.com>
0004  * SPDX-License-Identifier: GPL-3.0-or-later
0005  */
0006
0007 import QtQuick 2.12
0008 import GCompris 1.0
0009 import QtQml.Models 2.12
0010
0011 import "../../core"
0012 import "path.js" as Activity
0013
0014 Rectangle {
0015     id: mapView
0016
0017     color: 'transparent'
0018
0019     property int rows
0020     property int cols
0021
0022     property int cellSize
0023
0024     property bool touchEnabled: true
0025
0026     height: cellSize * rows
0027     width: cellSize * cols
0028
0029     signal init
0030
0031     onInit: {
0032         selectedOverlay.visible = false
0033     }
0034
0035     DelegateModel {
0036         id: delegateModel
0037         model: mapListModel
0038         delegate: Block {
0039             width: mapView.cellSize
0040             height: mapView.cellSize
0041             index: DelegateModel.itemsIndex
0042         }
0043     }
0044
0045     GridView {
0046         id: gridview
0047         anchors.fill: parent
0048         interactive: false
0049
0050         cellWidth: mapView.cellSize
0051         cellHeight: mapView.cellSize
0052
0053         model: delegateModel
0054     }
0055
0056     MultiPointTouchArea {
0057         anchors.fill: parent
0058         maximumTouchPoints: 1
0059         onPressed: {
0060             checkTouchPoint(touchPoints);
0061         }
0062         onTouchUpdated: checkTouchPoint(touchPoints);
0063         onReleased: {
0064             checkTouchPoint(touchPoints)
0065             if(selectedOverlay.visible && touchEnabled && !items.tux.isAnimationRunning) {
0066                 var row = Math.floor(selectedOverlay.y / cellSize)
0067                 var col = Math.floor(selectedOverlay.x / cellSize)
0068                 Activity.processBlockClick([col, row])
0069             }
0070         }
0071     }
0072
0073     Rectangle {
0074         id: selectedOverlay
0075         opacity: 0.35
0076         color: "#2651DA"
0077         width: cellSize
0078         height: cellSize
0079         visible: false
0080     }
0081
0082     function checkTouchPoint(touchPoints) {
0083         var touch = touchPoints[0]
0084
0085         if(items.tux.isAnimationRunning || !touch || !touchEnabled)
0086             return
0087
0088         var row = Math.floor(touch.y / cellSize)
0089         var col = Math.floor(touch.x / cellSize)
0090
0091         if(row >= 0 && row < rows && col >= 0 && col < cols) {
0092             selectedOverlay.x = col * cellSize
0093             selectedOverlay.y = row * cellSize
0094             selectedOverlay.visible = true
0095         }
0096         else {
0097             selectedOverlay.visible = false
0098         }
0099     }
0100 }