Warning, /education/gcompris/src/activities/simplepaint/Simplepaint.qml is written in an unsupported language. File is not indexed.
0001 /* GCompris - Simplepaint.qml
0002 *
0003 * SPDX-FileCopyrightText: 2014 Bruno Coudoin <bruno.coudoin@gcompris.net>
0004 *
0005 * Authors:
0006 * Christof Petig and Ingo Konrad (GTK+ version)
0007 * Bruno Coudoin <bruno.coudoin@gcompris.net> (Qt Quick port)
0008 *
0009 * SPDX-License-Identifier: GPL-3.0-or-later
0010 */
0011
0012 import QtQuick 2.12
0013 import GCompris 1.0
0014
0015 import "../../core"
0016 import "simplepaint.js" as Activity
0017
0018 ActivityBase {
0019 id: activity
0020
0021 onStart: focus = true
0022
0023 pageComponent: Image {
0024 id: background
0025 source: items.backgroundImg
0026 sourceSize.width: width
0027 sourceSize.height: height
0028 fillMode: Image.PreserveAspectCrop
0029 signal start
0030 signal stop
0031 focus: true
0032 property bool isColorTab: true
0033 property bool spaceIsPressed: false
0034
0035 Keys.onPressed: {
0036 items.keyboardControls = true;
0037
0038 if(event.key === Qt.Key_Up) {
0039 if(isColorTab) {
0040 if(--items.current_color < 0) {
0041 items.current_color = items.colors.length - 1;
0042 }
0043 items.selectedColor = items.colors[items.current_color];
0044 moveColorSelector();
0045 } else {
0046 if(cursor.iy > 0) {
0047 cursor.iy--;
0048 }
0049 if(spaceIsPressed) {
0050 spawnBlock();
0051 }
0052 }
0053 }
0054
0055 if(event.key === Qt.Key_Down) {
0056 if(isColorTab) {
0057 if(++items.current_color > items.colors.length - 1){
0058 items.current_color = 0;
0059 }
0060 items.selectedColor = items.colors[items.current_color];
0061 moveColorSelector();
0062 }else {
0063 if(cursor.iy < (Activity.nby - 1)) {
0064 cursor.iy++;
0065 }
0066 if(spaceIsPressed) {
0067 spawnBlock();
0068 }
0069 }
0070 }
0071
0072 if(event.key === Qt.Key_Right) {
0073 if(!isColorTab) {
0074 if(cursor.ix < (Activity.nbx - 1)) {
0075 cursor.ix++;
0076 }
0077 if(spaceIsPressed) {
0078 spawnBlock();
0079 }
0080 }
0081 }
0082
0083 if(event.key === Qt.Key_Left) {
0084 if(!isColorTab) {
0085 if(cursor.ix > 0) {
0086 cursor.ix--;
0087 }
0088 if(spaceIsPressed) {
0089 spawnBlock();
0090 }
0091 }
0092 }
0093
0094 if(event.key === Qt.Key_Space || event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
0095 if(!isColorTab) {
0096 spawnBlock();
0097 spaceIsPressed = true;
0098 } else {
0099 changeTab();
0100 }
0101 }
0102
0103 if(event.key === Qt.Key_Tab) {
0104 changeTab();
0105 }
0106 }
0107
0108 Keys.onReleased: {
0109 if(event.key === Qt.Key_Space || event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
0110 spaceIsPressed = false;
0111 }
0112 }
0113
0114 function changeTab() {
0115 isColorTab = !isColorTab;
0116 }
0117
0118 function spawnBlock() {
0119 if(!isColorTab) {
0120 var block = rootItem.childAt(cursor.x, cursor.y);
0121 if(block)
0122 block.touched();
0123 }else {
0124 changeTab();
0125 }
0126 }
0127
0128 function refreshCursor() {
0129 cursor.nbx = Activity.nbx;
0130 cursor.nby = Activity.nby;
0131 }
0132
0133 function moveColorSelector() {
0134 moveColorSelectorAnim.running = false;
0135 moveColorSelectorAnim.from = colorSelector.contentY;
0136 if(items.current_color != (items.colors.length-1)) {
0137 colorSelector.positionViewAtIndex(items.current_color >= 1 ? items.current_color-2 : items.current_color, colorSelector.Contain);
0138 }else {
0139 colorSelector.positionViewAtEnd();
0140 }
0141 moveColorSelectorAnim.to = colorSelector.contentY;
0142 moveColorSelectorAnim.running = true;
0143 }
0144
0145 Component.onCompleted: {
0146 activity.start.connect(start);
0147 activity.stop.connect(stop);
0148 }
0149
0150 //Cursor to navigate in cells
0151 PaintCursor {
0152 id: cursor
0153 visible: items.keyboardControls && !isColorTab
0154 initialX: colorSelector.width + 20 * ApplicationInfo.ratio
0155 z: 1
0156 ix: 0
0157 iy: 0
0158 nbx: 20
0159 nby: 10
0160 }
0161
0162
0163 QtObject {
0164 id: items
0165 property alias background: background
0166 property int currentLevel: activity.currentLevel
0167 property alias paintModel: paintModel
0168 property alias colorSelector: colorSelector
0169 property alias gridLayout: gridLayout
0170 property var colors: bar.level < 10 ? Activity.colorsSimple : Activity.colorsAdvanced
0171 property int current_color: 1
0172 property string selectedColor: colors[current_color]
0173 property string backgroundImg: Activity.backgrounds[items.currentLevel]
0174 property bool keyboardControls: false
0175 }
0176
0177 onStart: Activity.start(items, background);
0178 onStop: Activity.stop();
0179
0180 MultiPointTouchArea {
0181 anchors.fill: parent
0182 onPressed: {
0183 items.keyboardControls = false;
0184 isColorTab = false;
0185 checkTouchPoint(touchPoints);
0186 }
0187 onTouchUpdated: checkTouchPoint(touchPoints);
0188 }
0189
0190 function checkTouchPoint(touchPoints) {
0191 for(var i in touchPoints) {
0192 var touch = touchPoints[i]
0193 if(rootItem.childAt(touch.x, touch.y)) {
0194 var block = rootItem.childAt(touch.x, touch.y)
0195 cursor.ix = block.ix
0196 cursor.iy = block.iy
0197 block.touched()
0198 }
0199 }
0200 }
0201
0202 Item {
0203 id: rootItem
0204 anchors.fill: parent
0205 }
0206
0207 Item {
0208 id: gridLayout
0209 anchors.fill: parent
0210 anchors.bottomMargin: 1.4 * bar.height
0211 anchors.leftMargin: colorSelector.width + 20 * ApplicationInfo.ratio
0212 }
0213
0214 ListModel {
0215 id: paintModel
0216 }
0217
0218 Column {
0219 id: colorSelectorColumn
0220 spacing: 2
0221
0222 anchors {
0223 left: background.left
0224 top: background.top
0225 bottom: bar.top
0226 }
0227
0228 // The color selector
0229 GridView {
0230 id: colorSelector
0231 clip: true
0232 width: cellWidth + 10 * ApplicationInfo.ratio
0233 height: colorSelectorColumn.height - (2 + colorSelectorButton.height)
0234 model: items.colors
0235 cellWidth: 60 * ApplicationInfo.ratio
0236 cellHeight: cellWidth
0237
0238 NumberAnimation {
0239 id: moveColorSelectorAnim
0240 target: colorSelector
0241 property: "contentY"
0242 duration: 150
0243 }
0244
0245 delegate: Item {
0246 width: colorSelector.cellWidth
0247 height: width
0248 Rectangle {
0249 id: rect
0250 width: parent.width
0251 height: width
0252 radius: width * 0.1
0253 z: iAmSelected ? 10 : 1
0254 color: modelData
0255 border.color: "#373737"
0256 border.width: modelData == "#00FFFFFF" ? 0 : 1
0257
0258 Image {
0259 scale: 0.9
0260 width: rect.height
0261 height: rect.height
0262 sourceSize.width: rect.height
0263 sourceSize.height: rect.height
0264 source: Activity.url + "eraser.svg"
0265 visible: modelData == "#00FFFFFF" ? 1 : 0
0266 anchors.centerIn: parent
0267 }
0268
0269 Rectangle {
0270 id: colorCursor
0271 visible: items.keyboardControls && isColorTab
0272 anchors.fill: parent
0273 scale: 1.1
0274 color: "#00FFFFFF"
0275 radius: parent.radius
0276 border.width: rect.iAmSelected ? radius : 0
0277 border.color: "#E0FFFFFF"
0278 }
0279
0280 property bool iAmSelected: modelData == items.selectedColor
0281
0282 states: [
0283 State {
0284 name: "notclicked"
0285 when: !rect.iAmSelected && !mouseArea.containsMouse
0286 PropertyChanges {
0287 target: rect
0288 scale: 0.8
0289 }
0290 },
0291 State {
0292 name: "clicked"
0293 when: mouseArea.pressed
0294 PropertyChanges {
0295 target: rect
0296 scale: 0.7
0297 }
0298 },
0299 State {
0300 name: "hover"
0301 when: mouseArea.containsMouse
0302 PropertyChanges {
0303 target: rect
0304 scale: 1.1
0305 }
0306 },
0307 State {
0308 name: "selected"
0309 when: rect.iAmSelected
0310 PropertyChanges {
0311 target: rect
0312 scale: 1
0313 }
0314 }
0315 ]
0316
0317 SequentialAnimation {
0318 id: anim
0319 running: rect.iAmSelected
0320 loops: Animation.Infinite
0321 alwaysRunToEnd: true
0322 NumberAnimation {
0323 target: rect
0324 property: "rotation"
0325 from: 0; to: 10
0326 duration: 200
0327 easing.type: Easing.OutQuad
0328 }
0329 NumberAnimation {
0330 target: rect
0331 property: "rotation"
0332 from: 10; to: -10
0333 duration: 400
0334 easing.type: Easing.InOutQuad
0335 }
0336 NumberAnimation {
0337 target: rect
0338 property: "rotation"
0339 from: -10; to: 0
0340 duration: 200
0341 easing.type: Easing.InQuad
0342 }
0343 }
0344
0345 Behavior on scale { NumberAnimation { duration: 70 } }
0346 MouseArea {
0347 id: mouseArea
0348 anchors.fill: parent
0349 hoverEnabled: true
0350 onClicked: {
0351 activity.audioEffects.play('qrc:/gcompris/src/core/resource/sounds/scroll.wav');
0352 items.keyboardControls = false;
0353 items.selectedColor = modelData;
0354 items.current_color = items.colors.indexOf(modelData);
0355 items.selectedColor = items.colors[items.current_color];
0356 }
0357 }
0358 }
0359 }
0360 }
0361
0362 // Scroll buttons
0363 GCButtonScroll {
0364 id: colorSelectorButton
0365 isHorizontal: true
0366 width: colorSelectorColumn.width - 10 * ApplicationInfo.ratio
0367 height: width * heightRatio
0368 onUp: colorSelector.flick(0, 1400)
0369 onDown: colorSelector.flick(0, -1400)
0370 upVisible: colorSelector.atYBeginning ? false : true
0371 downVisible: colorSelector.atYEnd ? false : true
0372 }
0373 }
0374
0375 Item {
0376 anchors {
0377 top: parent.top
0378 left: colorSelectorColumn.right
0379 right: parent.right
0380 bottom: parent.bottom
0381 }
0382
0383 Repeater {
0384 model: paintModel
0385 parent: rootItem
0386
0387 PaintItem {
0388 initialX: colorSelector.width + 20 * ApplicationInfo.ratio
0389 ix: m_ix
0390 iy: m_iy
0391 nbx: m_nbx
0392 nby: m_nby
0393 color: items.colors[0]
0394 }
0395 }
0396 }
0397
0398 DialogHelp {
0399 id: dialogHelpLeftRight
0400 onClose: home()
0401 }
0402
0403 Bar {
0404 id: bar
0405 level: items.currentLevel + 1
0406 content: BarEnumContent { value: help | home | reload | level }
0407 onHelpClicked: {
0408 displayDialog(dialogHelpLeftRight)
0409 }
0410 onReloadClicked: Activity.initLevel()
0411 onPreviousLevelClicked: Activity.previousLevel()
0412 onNextLevelClicked: Activity.nextLevel()
0413 onHomeClicked: home()
0414 }
0415 }
0416
0417 }