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 }