Differential D12329 Diff 32513 src/activities/programmingMaze/AnswerSheet.qml

Changeset View

Standalone View

View Options

src/activities/programmingMaze/AnswerSheet.qml

1/* GCompris - AnswerSheet.qml 1​/* GCompris - AnswerSheet.qml
2 * 2​ *
3 * Copyright (C) 2015 Siddhesh Suthar <siddhesh.it@gmail.com> 3​ * Copyright (C) 2015 Siddhesh Suthar <siddhesh.it@gmail.com>
4​ * Copyright (C) 2018 Aman Kumar Gupta <gupta2140@gmail.com>
4 * 5​ *
5 * Authors: 6​ * Authors:
6 * Siddhesh Suthar <siddhesh.it@gmail.com> 7​ * Siddhesh Suthar <siddhesh.it@gmail.com>
Context not available.
25import "programmingMaze.js" as Activity 26​import "programmingMaze.js" as Activity
26 27​
27GridView { 28​GridView {
28 id: answerSheet 29​ id: codeArea
29 property Item background ​
30 property ListModel currentModel ​
31 z: 1 30​ z: 1
32 ​
33 width: background.width * 0.4 31​ width: background.width * 0.4
34 height: background.height * 0.29 32​ height: background.height * 0.29
35 cellWidth: background.buttonWidth 33​ cellWidth: background.buttonWidth
Context not available.
54 keyNavigationWraps: true 52​ keyNavigationWraps: true
55 focus: true 53​ focus: true
56 54​
55​ property ListModel currentModel
57 property int draggedItemIndex: -1 56​ property int draggedItemIndex: -1
58 property int possibleDropIndex: -1 57​ property int possibleDropIndex: -1
59 property int possibleDropRemoveIndex: -1 58​ property int possibleDropRemoveIndex: -1
Context not available.
69 */ 68​ */
70 property int initialEditItemIndex: -1 69​ property int initialEditItemIndex: -1
71 70​
72 //Tells if any instruction is selected for editing. 71​ // Tells if any instruction is selected for editing.
73 property bool isEditingInstruction: false 72​ property bool isEditingInstruction: false
74 73​
75 Keys.onRightPressed: moveCurrentIndexRight() 74​ signal spaceKeyPressed
76 Keys.onLeftPressed: moveCurrentIndexLeft() 75​ signal tabKeyPressed
77 Keys.onUpPressed: moveCurrentIndexUp() 76​ signal deleteKeyPressed
amankumarguptaAuthorUnsubmitted
Not Done

Previously, each code area had their own separate keyboard controls and statements for them and certain statements were redundant. Also additional functions were used to switch the keyboard focus from one to other.

Now, they are centralised. This can be seen in ProgrammingMaze.qml down below for further clarification.

amankumargupta: Previously, each code area had their own separate keyboard controls and statements for them and…
78 Keys.onDownPressed: moveCurrentIndexDown() ​
79 Keys.onEnterPressed: background.runCodeOrResetTux() ​
80 Keys.onReturnPressed: background.runCodeOrResetTux() ​
81 77​
82 /** 78​ /**
83 * There can be three possibilities here: 79​ * There can be three possibilities here:
Context not available.
86 * 2. We want to select an instruction to edit, or deselect it. 82​ * 2. We want to select an instruction to edit, or deselect it.
87 * 3. We want to append an instruction. 83​ * 3. We want to append an instruction.
88 */ 84​ */
89 Keys.onSpacePressed: { 85​ onSpaceKeyPressed: {
90 if(currentIndex != -1) { 86​ if(currentIndex != -1) {
91 if(instruction.instructionToInsert && (items.numberOfInstructionsAdded < items.maxNumberOfInstructionsAllowed)) { 87​ if(instructionArea.instructionToInsert && (items.numberOfInstructionsAdded < items.maxNumberOfInstructionsAllowed)) {
92 var isInstructionInserted = appendInstruction() 88​ var isInstructionInserted = appendInstruction()
93 if(isInstructionInserted) 89​ if(isInstructionInserted)
94 currentModel.move(currentModel.count - 1, currentIndex, 1) 90​ currentModel.move(currentModel.count - 1, currentIndex, 1)
95 } 91​ }
96 else { 92​ else {
97 if((initialEditItemIndex == currentIndex) || (initialEditItemIndex == -1 && currentIndex != -1)) { 93​ if((initialEditItemIndex == currentIndex) || (initialEditItemIndex == -1 && currentIndex != -1)) {
98 answerSheet.isEditingInstruction = !answerSheet.isEditingInstruction 94​ codeArea.isEditingInstruction = !codeArea.isEditingInstruction
99 } 95​ }
100 96​
101 if(!answerSheet.isEditingInstruction) 97​ if(!codeArea.isEditingInstruction)
102 answerSheet.initialEditItemIndex = -1 98​ codeArea.initialEditItemIndex = -1
103 else 99​ else
104 initialEditItemIndex = currentIndex 100​ initialEditItemIndex = currentIndex
105 var calculatedX = (initialEditItemIndex % 4) * answerSheet.cellWidth 101​
106 var calculatedY = Math.floor(initialEditItemIndex / 4) * answerSheet.cellHeight 102​ var calculatedX = (initialEditItemIndex % 4) * codeArea.cellWidth
103​ var calculatedY = Math.floor(initialEditItemIndex / 4) * codeArea.cellHeight
107 editInstructionIndicator.x = calculatedX + 1.5 * ApplicationInfo.ratio 104​ editInstructionIndicator.x = calculatedX + 1.5 * ApplicationInfo.ratio
108 editInstructionIndicator.y = calculatedY + 1.5 * ApplicationInfo.ratio 105​ editInstructionIndicator.y = calculatedY + 1.5 * ApplicationInfo.ratio
109 } 106​ }
110 } 107​ }
111 else if((items.numberOfInstructionsAdded < items.maxNumberOfInstructionsAllowed) && instruction.instructionToInsert) 108​ else if((items.numberOfInstructionsAdded < items.maxNumberOfInstructionsAllowed) && instructionArea.instructionToInsert)
112 appendInstruction() 109​ appendInstruction()
113 } 110​ }
114 Keys.onDeletePressed: { 111​
112​ onDeleteKeyPressed: {
115 if(currentIndex != -1) { 113​ if(currentIndex != -1) {
116 currentModel.remove(currentIndex) 114​ currentModel.remove(currentIndex)
117 items.numberOfInstructionsAdded-- 115​ items.numberOfInstructionsAdded--
Context not available.
120 } 118​ }
121 119​
122 function appendInstruction() { 120​ function appendInstruction() {
123 if(!(background.insertIntoProcedure && (instruction.instructionToInsert === "call-procedure"))) { 121​ if(background.insertIntoMain || (instructionArea.instructionToInsert != "call-procedure")) {
124 currentModel.append({ "name": instruction.instructionToInsert }) 122​ currentModel.append({ "name": instructionArea.instructionToInsert })
125 items.numberOfInstructionsAdded++ 123​ items.numberOfInstructionsAdded++
126 instruction.instructionToInsert = "" 124​ instructionArea.instructionToInsert = ""
127 return true 125​ return true
128 } 126​ }
129 return false 127​ return false
Context not available.
135 } 133​ }
136 134​
137 Item { 135​ Item {
138 id: dropPosIndicator 136​ id: dropPositionIndicator
139 visible: false 137​ visible: false
140 height: background.buttonHeight 138​ height: background.buttonHeight
141 width: 3 * ApplicationInfo.ratio 139​ width: 3 * ApplicationInfo.ratio
Context not available.
152 states: [ 150​ states: [
153 State { 151​ State {
154 name: "shown" 152​ name: "shown"
155 when: answerSheet.possibleDropIndex != -1 153​ when: codeArea.possibleDropIndex != -1
156 PropertyChanges { 154​ PropertyChanges {
157 target: dropPosIndicator 155​ target: dropPositionIndicator
158 visible: true 156​ visible: true
159 x: Math.floor(answerSheet.xCoordinateInPossibleDrop / answerSheet.cellWidth) * 157​ x: Math.floor(codeArea.xCoordinateInPossibleDrop / codeArea.cellWidth) *
160 answerSheet.cellWidth - 1.5 * ApplicationInfo.ratio 158​ codeArea.cellWidth - 1.5 * ApplicationInfo.ratio
161 y: Math.floor(answerSheet.yCoordinateInPossibleDrop / answerSheet.cellHeight) * 159​ y: Math.floor(codeArea.yCoordinateInPossibleDrop / codeArea.cellHeight) *
162 answerSheet.cellHeight + 1.5 * ApplicationInfo.ratio 160​ codeArea.cellHeight + 1.5 * ApplicationInfo.ratio
163 } 161​ }
164 } 162​ }
165 ] 163​ ]
Context not available.
167 165​
168 Rectangle { 166​ Rectangle {
169 id: editInstructionIndicator 167​ id: editInstructionIndicator
170 visible: answerSheet.isEditingInstruction && answerSheet.count != 0 168​ visible: codeArea.isEditingInstruction && codeArea.count != 0
171 width: background.buttonWidth - 3 * ApplicationInfo.ratio 169​ width: background.buttonWidth - 3 * ApplicationInfo.ratio
172 height: background.buttonHeight - 3 * ApplicationInfo.ratio 170​ height: background.buttonHeight - 3 * ApplicationInfo.ratio
173 color: "red" 171​ color: "red"
Context not available.
177 radius: width / 18 175​ radius: width / 18
178 } 176​ }
179 177​
180 Item { ​
181 id: dndContainer ​
182 anchors.fill: parent ​
183 } ​
184 ​
185 MouseArea { 178​ MouseArea {
186 id: coords 179​ id: codeAreaMouse
187 anchors.fill: parent 180​ anchors.fill: parent
188 enabled: items.isTuxMouseAreaEnabled || items.isRunCodeEnabled 181​ enabled: items.isTuxMouseAreaEnabled || items.isRunCodeEnabled
189 onPressed: { 182​ onPressed: {
190 answerSheet.draggedItemIndex = answerSheet.indexAt(mouseX,mouseY) 183​ codeArea.draggedItemIndex = codeArea.indexAt(mouseX,mouseY)
191 if(answerSheet.draggedItemIndex === -1) { 184​ if(codeArea.draggedItemIndex === -1) {
192 constraintInstruction.changeConstraintInstructionOpacity() 185​ constraintInstruction.changeConstraintInstructionOpacity()
193 answerSheet.isEditingInstruction = false 186​ codeArea.isEditingInstruction = false
194 } 187​ }
195 else if(!answerSheet.isEditingInstruction) 188​ else if(!codeArea.isEditingInstruction)
196 answerSheet.initialEditItemIndex = answerSheet.draggedItemIndex 189​ codeArea.initialEditItemIndex = codeArea.draggedItemIndex
197 } 190​ }
191​
192​ onPositionChanged: {
amankumarguptaAuthorUnsubmitted
Not Done

This portion of code is moved here from line 243 since, the order pressed --> position changed --> released seems more easy to read code than pressed --> released --> position changed.

amankumargupta: This portion of code is moved here from line 243 since, the order pressed --> position changed…
193​ var newPos = codeArea.indexAt(mouseX, mouseY)
194​ var calculatedX = Math.floor(mouseX / codeArea.cellWidth) * codeArea.cellWidth
195​ var previousIndexPosition = codeArea.indexAt(calculatedX - 1, mouseY)
196​
197​ // If the user want to move an item to the end, then the new position will be after the last instruction.
198​ if(newPos == -1 && previousIndexPosition != -1)
199​ newPos = previousIndexPosition + 1
200​
201​ codeArea.isEditingInstruction = false
202​ codeArea.xCoordinateInPossibleDrop = mouseX
203​ codeArea.yCoordinateInPossibleDrop = mouseY
204​ codeArea.possibleDropIndex = newPos
205​ }
206​
198 onReleased: { 207​ onReleased: {
199 if(answerSheet.draggedItemIndex != -1) { 208​ if(codeArea.draggedItemIndex != -1) {
200 var draggedIndex = answerSheet.draggedItemIndex 209​ var draggedIndex = codeArea.draggedItemIndex
201 var dropIndex = answerSheet.indexAt(mouseX,mouseY) 210​ var dropIndex = codeArea.indexAt(mouseX,mouseY)
202 var calculatedX = Math.floor(mouseX / answerSheet.cellWidth) * answerSheet.cellWidth 211​ var calculatedX = Math.floor(mouseX / codeArea.cellWidth) * codeArea.cellWidth
203 var calculatedY = Math.floor(mouseY / answerSheet.cellHeight) * answerSheet.cellHeight 212​ var calculatedY = Math.floor(mouseY / codeArea.cellHeight) * codeArea.cellHeight
204 answerSheet.draggedItemIndex = -1 213​ codeArea.draggedItemIndex = -1
214​
205 if(dropIndex == -1) { 215​ if(dropIndex == -1) {
206 var previousIndexCalculatedPosition = answerSheet.indexAt(calculatedX - 1, mouseY) 216​ var previousIndexPosition = codeArea.indexAt(calculatedX - 1, mouseY)
207 if(previousIndexCalculatedPosition == -1) { 217​ if(previousIndexPosition == -1) {
208 currentModel.remove(draggedIndex) 218​ currentModel.remove(draggedIndex)
209 items.numberOfInstructionsAdded-- 219​ items.numberOfInstructionsAdded--
210 } 220​ }
Context not available.
212 currentModel.append(currentModel.get(draggedIndex)) 222​ currentModel.append(currentModel.get(draggedIndex))
213 currentModel.remove(draggedIndex) 223​ currentModel.remove(draggedIndex)
214 } 224​ }
215 answerSheet.initialEditItemIndex = -1 225​ codeArea.initialEditItemIndex = -1
216 } 226​ }
217 else if(draggedIndex != dropIndex) { 227​ else if(draggedIndex != dropIndex) {
218 if(dropIndex <= draggedIndex) { 228​ if(dropIndex <= draggedIndex) {
219 //moving box from right to left 229​ // Moving instruction from right to left
220 currentModel.move(draggedIndex, dropIndex, 1) 230​ currentModel.move(draggedIndex, dropIndex, 1)
221 } 231​ }
222 else { 232​ else {
223 //moving box from left to right 233​ // Moving instruction from left to right
224 currentModel.move(draggedIndex, dropIndex - 1, 1) 234​ currentModel.move(draggedIndex, dropIndex - 1, 1)
225 } 235​ }
226 answerSheet.initialEditItemIndex = -1 236​ codeArea.initialEditItemIndex = -1
227 } 237​ }
228 else { 238​ else {
229 if(answerSheet.initialEditItemIndex == dropIndex) { 239​ /**
230 answerSheet.isEditingInstruction = !answerSheet.isEditingInstruction 240​ * If the index of the initially selected instruction (if any) is same as the currently selected instruction,
231 if(!answerSheet.isEditingInstruction) 241​ * deselect it for editing, else make the current instruction as the initially editable item and move the edit indicator to that position.
232 answerSheet.initialEditItemIndex = -1 242​ */
243​ if(codeArea.initialEditItemIndex == dropIndex) {
244​ codeArea.isEditingInstruction = !codeArea.isEditingInstruction
245​ if(!codeArea.isEditingInstruction)
246​ codeArea.initialEditItemIndex = -1
233 } 247​ }
234 else 248​ else
235 answerSheet.initialEditItemIndex = draggedIndex 249​ codeArea.initialEditItemIndex = draggedIndex
236 250​
237 editInstructionIndicator.x = calculatedX + 1.5 * ApplicationInfo.ratio 251​ editInstructionIndicator.x = calculatedX + 1.5 * ApplicationInfo.ratio
238 editInstructionIndicator.y = calculatedY + 1.5 * ApplicationInfo.ratio 252​ editInstructionIndicator.y = calculatedY + 1.5 * ApplicationInfo.ratio
239 } 253​ }
240 answerSheet.possibleDropIndex = -1 254​ codeArea.possibleDropIndex = -1
241 } 255​ }
242 } 256​ }
243 onPositionChanged: { ​
244 var newPos = answerSheet.indexAt(mouseX, mouseY) ​
245 var calculatedX = Math.floor(mouseX / answerSheet.cellWidth) * answerSheet.cellWidth ​
246 var previousIndexCalculatedPosition = answerSheet.indexAt(calculatedX - 1, mouseY) ​
247 ​
248 //If the user want to move an item to the end, then the new position will be after the last instruction. ​
249 if(newPos == -1 && previousIndexCalculatedPosition != -1) ​
250 newPos = previousIndexCalculatedPosition + 1 ​
251 answerSheet.isEditingInstruction = false ​
252 answerSheet.xCoordinateInPossibleDrop = mouseX ​
253 answerSheet.yCoordinateInPossibleDrop = mouseY ​
254 answerSheet.possibleDropIndex = newPos ​
255 } ​
256 } 257​ }
257 258​
258 delegate: Item { 259​ delegate: Item {
Context not available.
284 states: [ 285​ states: [
285 State { 286​ State {
286 name: "inDrag" 287​ name: "inDrag"
287 when: index == answerSheet.draggedItemIndex 288​ when: index == codeArea.draggedItemIndex
289​
288 PropertyChanges { target: circlePlaceholder; opacity: 1 } 290​ PropertyChanges { target: circlePlaceholder; opacity: 1 }
289 PropertyChanges { target: item; parent: dndContainer } 291​ PropertyChanges { target: item; parent: codeArea }
290 PropertyChanges { target: item; width: background.buttonWidth * 0.80 } 292​ PropertyChanges { target: item; width: background.buttonWidth * 0.80 }
291 PropertyChanges { target: item; height: background.buttonHeight * 0.80 } 293​ PropertyChanges { target: item; height: background.buttonHeight * 0.80 }
292 PropertyChanges { target: item; anchors.centerIn: undefined } 294​ PropertyChanges { target: item; anchors.centerIn: undefined }
293 PropertyChanges { target: item; x: coords.mouseX - item.width / 2 } 295​ PropertyChanges { target: item; x: codeAreaMouse.mouseX - item.width / 2 }
294 PropertyChanges { target: item; y: coords.mouseY - item.height / 2 } 296​ PropertyChanges { target: item; y: codeAreaMouse.mouseY - item.height / 2 }
295 }, 297​ },
296 State { 298​ State {
297 name: "greyedOut" 299​ name: "greyedOut"
298 when: (answerSheet.draggedItemIndex != -1) && (answerSheet.draggedItemIndex != index) 300​ when: (codeArea.draggedItemIndex != -1) && (codeArea.draggedItemIndex != index)
301​
299 PropertyChanges { target: item; opacity: 0.7 } 302​ PropertyChanges { target: item; opacity: 0.7 }
300 }, 303​ },
301 State { 304​ State {
302 name: "inactive" 305​ name: "inactive"
303 when: (answerSheet.draggedItemIndex == -1) || (answerSheet.draggedItemIndex == index) 306​ when: (codeArea.draggedItemIndex == -1) || (codeArea.draggedItemIndex == index)
307​
304 PropertyChanges { target: item; opacity: 1.0 } 308​ PropertyChanges { target: item; opacity: 1.0 }
305 } 309​ }
306 ] 310​ ]
Context not available.