1
=== modified file 'qml/Components/LazyImage.qml'
2
--- qml/Components/LazyImage.qml	2014-03-21 10:48:42 +0000
3
+++ qml/Components/LazyImage.qml	2014-04-30 13:51:56 +0000
4
@@ -36,6 +36,7 @@
5
36
    property alias cache: image.cache
36
    property alias cache: image.cache
6
37
    property alias horizontalAlignment: image.horizontalAlignment
37
    property alias horizontalAlignment: image.horizontalAlignment
7
38
    property alias verticalAlignment: image.verticalAlignment
38
    property alias verticalAlignment: image.verticalAlignment
8
39
    property alias sourceImage: image
9
39
40
10
40
    state: "default"
41
    state: "default"
11
41
42
12
42
43
13
=== added file 'qml/Components/ZoomableImage.qml'
14
--- qml/Components/ZoomableImage.qml	1970-01-01 00:00:00 +0000
15
+++ qml/Components/ZoomableImage.qml	2014-04-30 13:51:56 +0000
16
@@ -0,0 +1,153 @@
17
1
/*
18
2
 * Copyright (C) 2014 Canonical, Ltd.
19
3
 *
20
4
 * This program is free software; you can redistribute it and/or modify
21
5
 * it under the terms of the GNU General Public License as published by
22
6
 * the Free Software Foundation; version 3.
23
7
 *
24
8
 * This program is distributed in the hope that it will be useful,
25
9
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
26
10
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
27
11
 * GNU General Public License for more details.
28
12
 *
29
13
 * You should have received a copy of the GNU General Public License
30
14
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
31
15
 */
32
16
33
17
import QtQuick 2.0
34
18
import Ubuntu.Components 0.1
35
19
import "../Components"
36
20
37
21
/*! \brief Zoomable for image.
38
22
39
23
    This widget shows image contained in source,
40
24
    can be zoomable accordingly with zoomable.
41
25
 */
42
26
43
27
Item {
44
28
    id: root
45
29
    property alias source: lazyImage.source
46
30
    property var zoomable: false
47
31
    property alias imageState: lazyImage.state
48
32
    property alias scaleTo: lazyImage.scaleTo
49
33
    property alias asynchronous: lazyImage.asynchronous
50
34
51
35
    Flickable {
52
36
        id: flickable
53
37
        objectName: "flickable"
54
38
        clip: true
55
39
        contentHeight: imageContainer.height
56
40
        contentWidth: imageContainer.width
57
41
58
42
        onHeightChanged: image.resetScale()
59
43
        onWidthChanged: image.resetScale()
60
44
        anchors.fill: parent
61
45
62
46
        Item {
63
47
            id: imageContainer
64
48
            objectName: "imageContainer"
65
49
            width: Math.max(image.width * image.scale, flickable.width)
66
50
            height: Math.max(image.height * image.scale, flickable.height)
67
51
68
52
            Item {
69
53
                id: image
70
54
                objectName: "image"
71
55
                property alias imageState: lazyImage.state
72
56
                property var prevScale
73
57
                anchors.centerIn: parent
74
58
75
59
                signal imageReloaded
76
60
77
61
                LazyImage {
78
62
                    id: lazyImage
79
63
                    objectName: "lazyImage"
80
64
                    smooth: !flickable.movingVertically
81
65
                    anchors.fill: parent
82
66
                    fillMode: Image.PreserveAspectFit
83
67
                    scaleTo: "fit"
84
68
85
69
                    onStateChanged: {
86
70
                        if (state == "ready") {
87
71
                            image.imageReloaded();
88
72
                        }
89
73
                    }
90
74
                }
91
75
92
76
                onImageReloaded: {
93
77
                    image.height = lazyImage.sourceImage.implicitHeight
94
78
                    image.width = lazyImage.sourceImage.implicitWidth
95
79
                    image.resetScale();
96
80
                }
97
81
98
82
                function resetScale() {
99
83
                    image.scale = Math.min(flickable.width / image.width, flickable.height / image.height);
100
84
                    pinchArea.minScale = image.scale;
101
85
                    prevScale = Math.min(image.scale, 1);
102
86
                }
103
87
104
88
                onScaleChanged: {
105
89
                    var currentWidth = width * scale
106
90
                    var currentHeight = height * scale
107
91
                    var scaleRatio = scale / prevScale
108
92
                    if (currentWidth > flickable.width) {
109
93
                        var xpos = flickable.width / 2 + flickable.contentX;
110
94
                        var xoff = xpos * scaleRatio;
111
95
                        flickable.contentX = xoff - flickable.width / 2;
112
96
                    }
113
97
                    if (currentHeight > flickable.height) {
114
98
                        var ypos = flickable.height / 2 + flickable.contentY;
115
99
                        var yoff = ypos * scaleRatio;
116
100
                        flickable.contentY = yoff - flickable.height / 2;
117
101
                    }
118
102
                    prevScale = scale;
119
103
                }
120
104
            }
121
105
        }
122
106
123
107
        PinchArea {
124
108
            id: pinchArea
125
109
            objectName: "pinchArea"
126
110
            property real minScale: 1.0
127
111
            anchors.fill: parent
128
112
            enabled: zoomable ? zoomable : false
129
113
130
114
            pinch.target: image
131
115
            pinch.minimumScale: minScale
132
116
            pinch.maximumScale: 10
133
117
134
118
            onPinchFinished: flickable.returnToBounds()
135
119
        }
136
120
137
121
        MouseArea {
138
122
            id: mouseArea
139
123
            objectName: "mouseArea"
140
124
141
125
            anchors.fill: parent
142
126
            enabled: zoomable ? zoomable : false
143
127
144
128
            onWheel: {
145
129
                var startScale = image.scale;
146
130
                if (wheel.angleDelta.y > 0) {
147
131
                    image.scale = startScale + 0.1;
148
132
                } else if (wheel.angleDelta.y < 0) {
149
133
                    if (image.scale > 0.1 && image.scale > pinchArea.minScale) {
150
134
                        image.scale = startScale - 0.1;
151
135
                    }
152
136
                }
153
137
                wheel.accepted = true;
154
138
            }
155
139
156
140
            onPressed: {
157
141
                mouse.accepted = false;
158
142
            }
159
143
160
144
            onReleased: {
161
145
                mouse.accepted = false;
162
146
            }
163
147
164
148
            onClicked: {
165
149
                mouse.accepted = false;
166
150
            }
167
151
        }
168
152
    }
169
153
}
170
0
154
171
=== modified file 'qml/Dash/Previews/PreviewZoomableImage.qml'
172
--- qml/Dash/Previews/PreviewZoomableImage.qml	2014-02-21 18:41:37 +0000
173
+++ qml/Dash/Previews/PreviewZoomableImage.qml	2014-04-30 13:51:56 +0000
174
@@ -28,14 +28,11 @@
175
28
    id: root
28
    id: root
176
29
    implicitHeight: units.gu(22)
29
    implicitHeight: units.gu(22)
177
30
30
179
31
    LazyImage {
31
    ZoomableImage {
180
32
        id: image
181
32
        objectName: "image"
33
        objectName: "image"
182
33
        anchors {
183
34
            top: parent.top
184
35
            bottom: parent.bottom
185
36
        }
186
37
        scaleTo: "height"
187
38
        source: widgetData["source"]
34
        source: widgetData["source"]
189
39
        initialWidth: units.gu(13)
35
        zoomable: widgetData["zoomable"] ? widgetData["zoomable"] : false
190
36
        anchors.fill: parent
191
40
    }
37
    }
192
41
}
38
}
193
42
39
194
=== modified file 'tests/qmltests/CMakeLists.txt'
195
--- tests/qmltests/CMakeLists.txt	2014-04-22 08:51:33 +0000
196
+++ tests/qmltests/CMakeLists.txt	2014-04-30 13:51:56 +0000
197
@@ -32,6 +32,7 @@
198
32
add_qml_test(Components SeeMore)
32
add_qml_test(Components SeeMore)
199
33
add_qml_test(Components Showable)
33
add_qml_test(Components Showable)
200
34
add_qml_test(Components PageHeaderLabel)
34
add_qml_test(Components PageHeaderLabel)
201
35
add_qml_test(Components ZoomableImage)
202
35
add_qml_test(Dash Dash IMPORT_PATHS ${CMAKE_BINARY_DIR}/plugins ${qmltest_DEFAULT_IMPORT_PATHS})
36
add_qml_test(Dash Dash IMPORT_PATHS ${CMAKE_BINARY_DIR}/plugins ${qmltest_DEFAULT_IMPORT_PATHS})
203
36
add_qml_test(Dash DashContent IMPORT_PATHS ${CMAKE_BINARY_DIR}/plugins ${qmltest_DEFAULT_IMPORT_PATHS})
37
add_qml_test(Dash DashContent IMPORT_PATHS ${CMAKE_BINARY_DIR}/plugins ${qmltest_DEFAULT_IMPORT_PATHS})
204
37
add_qml_test(Dash Card)
38
add_qml_test(Dash Card)
205
38
39
206
=== added file 'tests/qmltests/Components/tst_ZoomableImage.qml'
207
--- tests/qmltests/Components/tst_ZoomableImage.qml	1970-01-01 00:00:00 +0000
208
+++ tests/qmltests/Components/tst_ZoomableImage.qml	2014-04-30 13:51:56 +0000
209
@@ -0,0 +1,192 @@
210
1
/*
211
2
 * Copyright 2014 Canonical Ltd.
212
3
 *
213
4
 * This program is free software; you can redistribute it and/or modify
214
5
 * it under the terms of the GNU General Public License as published by
215
6
 * the Free Software Foundation; version 3.
216
7
 *
217
8
 * This program is distributed in the hope that it will be useful,
218
9
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
219
10
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
220
11
 * GNU General Public License for more details.
221
12
 *
222
13
 * You should have received a copy of the GNU General Public License
223
14
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
224
15
 */
225
16
226
17
import QtQuick 2.0
227
18
import QtTest 1.0
228
19
import "../../../qml/Components"
229
20
import Unity.Test 0.1 as UT
230
21
231
22
Rectangle {
232
23
    id: root
233
24
    width: units.gu(30)
234
25
    height: units.gu(60)
235
26
    color: "lightgrey"
236
27
237
28
    property var widgetData0: {
238
29
        "source": "",
239
30
        "zoomable": false
240
31
    }
241
32
242
33
    property var widgetData1: {
243
34
        "source": "../../../qml/graphics/phone_background.jpg",
244
35
        "zoomable": false
245
36
    }
246
37
247
38
    property var widgetData2: {
248
39
        "source": "../../../qml/Dash/graphics/phone/screenshots/gallery@12.png",
249
40
        "zoomable": true
250
41
    }
251
42
252
43
    ZoomableImage {
253
44
        id: zoomableImage
254
45
        width: parent.width
255
46
        anchors.fill: parent
256
47
        asynchronous: false
257
48
    }
258
49
259
50
    SignalSpy {
260
51
        id: signalSpy
261
52
    }
262
53
263
54
    UT.UnityTestCase {
264
55
        name: "ZoomableImageTest"
265
56
        when: windowShown
266
57
267
58
        function test_loadImage() {
268
59
            var lazyImage = findChild(zoomableImage, "lazyImage");
269
60
270
61
            zoomableImage.source = widgetData0["source"];
271
62
            zoomableImage.zoomable = widgetData0["zoomable"];
272
63
            waitForRendering(zoomableImage);
273
64
            tryCompare(zoomableImage, "imageState", "default");
274
65
275
66
            signalSpy.signalName = "onStateChanged";
276
67
            signalSpy.target = lazyImage;
277
68
            signalSpy.clear();
278
69
279
70
            zoomableImage.source = widgetData1["source"];
280
71
            zoomableImage.zoomable = widgetData1["zoomable"];
281
72
            waitForRendering(lazyImage);
282
73
            tryCompareFunction(function() { return get_filename(lazyImage.source.toString()) === get_filename(widgetData1["source"]); }, true);
283
74
            waitForRendering(zoomableImage);
284
75
            tryCompare(zoomableImage, "imageState", "ready");
285
76
            compare (signalSpy.count, 1);
286
77
        }
287
78
288
79
        function get_filename(a) {
289
80
            var wordsA = a.split("/");
290
81
            var filenameA = wordsA[wordsA.length-1];
291
82
            return filenameA;
292
83
        }
293
84
294
85
        function test_mousewheel() {
295
86
            var image = findChild(zoomableImage, "image");
296
87
            var lazyImage = findChild(zoomableImage, "lazyImage");
297
88
            var flickable = findChild(zoomableImage, "flickable");
298
89
299
90
            zoomableImage.source = widgetData2["source"];
300
91
            zoomableImage.zoomable = true;
301
92
            waitForRendering(zoomableImage);
302
93
303
94
            tryCompare(zoomableImage, "imageState", "ready");
304
95
            tryCompareFunction(function() { return get_filename(lazyImage.source.toString()) === get_filename(widgetData2["source"]); }, true);
305
96
            waitForRendering(image);
306
97
307
98
            // move mouse to center
308
99
            mouseMove(zoomableImage, zoomableImage.width / 2, zoomableImage.height / 2);
309
100
310
101
            // Test Zoom-in Zoom-out twice.
311
102
            for (var c=0; c<2; c++) {
312
103
                // zoom in
313
104
                for (var i=0; i<10; i++) {
314
105
                    mouseWheel(zoomableImage, zoomableImage.width / 2, zoomableImage.height / 2, 0, 10);
315
106
                    tryCompare(image, "scale", 1.0 + (i + 1) * 0.1);
316
107
                    compare(flickable.contentWidth, lazyImage.width * image.scale);
317
108
                    compare(flickable.contentHeight, lazyImage.height * image.scale);
318
109
                }
319
110
320
111
                // zoom out
321
112
                for (var i=0; i<10; i++) {
322
113
                    mouseWheel(zoomableImage, zoomableImage.width / 2, zoomableImage.height / 2, 0, -10);
323
114
                    tryCompare(image, "scale", 2.0 - (i + 1) * 0.1);
324
115
                    compare(flickable.contentWidth, lazyImage.width * image.scale);
325
116
                    compare(flickable.contentHeight, lazyImage.height * image.scale);
326
117
                }
327
118
            }
328
119
        }
329
120
330
121
        function test_pinch_data() {
331
122
            return [ { source:widgetData2["source"],
332
123
                       zoomable:false,
333
124
                       answer1: true,
334
125
                       answer2: false,
335
126
                       answer3: true,
336
127
                       answer4: 1.0,
337
128
                       answer5: 1.0 },
338
129
                     { source:widgetData2["source"],
339
130
                       zoomable:true,
340
131
                       answer1: false,
341
132
                       answer2: true,
342
133
                       answer3: false,
343
134
                       answer4: 1.7740461882048026,
344
135
                       answer5: 1.0 }
345
136
                   ]
346
137
        }
347
138
348
139
        function test_pinch(data) {
349
140
            var image = findChild(zoomableImage, "image");
350
141
            var lazyImage = findChild(zoomableImage, "lazyImage");
351
142
            var flickable = findChild(zoomableImage, "flickable");
352
143
353
144
            signalSpy.signalName = "onScaleChanged";
354
145
            signalSpy.target = image;
355
146
            signalSpy.clear();
356
147
357
148
            zoomableImage.source = data.source;
358
149
            zoomableImage.zoomable = data.zoomable;
359
150
            waitForRendering(zoomableImage);
360
151
361
152
            tryCompare(zoomableImage, "imageState", "ready");
362
153
            tryCompareFunction(function() { return get_filename(lazyImage.source.toString()) === get_filename(data.source); }, true);
363
154
            waitForRendering(image);
364
155
365
156
            var x1Start = zoomableImage.width * 2 / 6;
366
157
            var y1Start = zoomableImage.height * 2 / 6;
367
158
            var x1End = zoomableImage.width * 1 / 6;
368
159
            var y1End = zoomableImage.height * 1 / 6;
369
160
            var x2Start = zoomableImage.width * 4 / 6;
370
161
            var y2Start = zoomableImage.height * 4 / 6;
371
162
            var x2End = zoomableImage.width * 5 / 6;
372
163
            var y2End = zoomableImage.height * 5 / 6;
373
164
374
165
            var oldScale = image.scale;
375
166
376
167
            // move mouse to center
377
168
            mouseMove(zoomableImage, zoomableImage.width / 2, zoomableImage.height / 2);
378
169
379
170
            // Test Zoom-in Zoom-out twice.
380
171
            for (var c=0; c<2; c++) {
381
172
                wait(3000); // have to delay between two consequent pinch event.
382
173
                // pinch zoom-in
383
174
                touchPinch(zoomableImage, x1Start, y1Start, x1End, y1End, x2Start, y2Start, x2End, y2End);
384
175
385
176
                tryCompare(image, "scale", data.answer4);
386
177
                var newScale = image.scale;
387
178
                compare(newScale == oldScale, data.answer1, "scale factor not equal: "+ oldScale + "=?" + newScale);
388
179
                compare(newScale > oldScale, data.answer2, "scale factor didn't changed");
389
180
                compare(signalSpy.count == 0, data.answer3, "scale signal count error");
390
181
                compare(newScale, data.answer4, "scale factor error");
391
182
                compare(flickable.contentWidth, lazyImage.width * image.scale);
392
183
                compare(flickable.contentHeight, lazyImage.height * image.scale);
393
184
394
185
                wait(3000); // have to delay between two consequent pinch event.
395
186
                // pinch zoom-out
396
187
                touchPinch(zoomableImage, x1End, y1End, x1Start, y1Start, x2End, y2End, x2Start, y2Start);
397
188
                tryCompare(image, "scale", data.answer5);
398
189
            }
399
190
        }
400
191
    }
401
192
}
402
0
193
403
=== modified file 'tests/qmltests/Dash/Previews/tst_PreviewZoomableImage.qml'
404
--- tests/qmltests/Dash/Previews/tst_PreviewZoomableImage.qml	2014-03-03 10:43:23 +0000
405
+++ tests/qmltests/Dash/Previews/tst_PreviewZoomableImage.qml	2014-04-30 13:51:56 +0000
406
@@ -36,7 +36,8 @@
407
36
36
408
37
    PreviewZoomableImage {
37
    PreviewZoomableImage {
409
38
        id: zoomableImage
38
        id: zoomableImage
411
39
        width: parent.width
39
        anchors.fill: parent
412
40
        widgetData: widgetData1
413
40
    }
41
    }
414
41
42
415
42
    UT.UnityTestCase {
43
    UT.UnityTestCase {
416
@@ -47,10 +48,12 @@
417
47
            var image = findChild(zoomableImage, "image");
48
            var image = findChild(zoomableImage, "image");
418
48
49
419
49
            zoomableImage.widgetData = widgetData0;
50
            zoomableImage.widgetData = widgetData0;
421
50
            tryCompare(image, "state", "default");
51
            waitForRendering(zoomableImage);
422
52
            tryCompare(image, "imageState", "default");
423
51
53
424
52
            zoomableImage.widgetData = widgetData1;
54
            zoomableImage.widgetData = widgetData1;
426
53
            tryCompare(image, "state", "ready");
55
            waitForRendering(zoomableImage);
427
56
            tryCompare(image, "imageState", "ready");
428
54
        }
57
        }
429
55
    }
58
    }
430
56
}
59
}
431
57
60
432
=== modified file 'tests/utils/modules/Unity/Test/UnityTestCase.qml'
433
--- tests/utils/modules/Unity/Test/UnityTestCase.qml	2014-02-28 15:15:21 +0000
434
+++ tests/utils/modules/Unity/Test/UnityTestCase.qml	2014-04-30 13:51:56 +0000
435
@@ -260,6 +260,32 @@
436
260
        }
260
        }
437
261
    }
261
    }
438
262
262
439
263
    function touchPinch(item, x1Start, y1Start, x1End, y1End, x2Start, y2Start, x2End, y2End) {
440
264
        // Make sure the item is rendered
441
265
        waitForRendering(item);
442
266
443
267
        var event1 = touchEvent();
444
268
        // first finger
445
269
        event1.press(0, x1Start, y1Start);
446
270
        event1.commit();
447
271
        // second finger
448
272
        event1.stationary(0);
449
273
        event1.press(1, x2Start, y2Start);
450
274
        event1.commit();
451
275
452
276
        // pinch
453
277
        for (var i = 0.0; i < 1.0; i += 0.02) {
454
278
            event1.move(0, x1Start + (x1End - x1Start) * i, y1Start + (y1End - y1Start) * i);
455
279
            event1.move(1, x2Start + (x2End - x2Start) * i, y2Start + (y2End - y2Start) * i);
456
280
            event1.commit();
457
281
        }
458
282
459
283
        // release
460
284
        event1.release(0, x1End, y1End);
461
285
        event1.release(1, x2End, y2End);
462
286
        event1.commit();
463
287
    }
464
288
465
263
    function fetchRootItem(item) {
289
    function fetchRootItem(item) {
466
264
        if (item.parent)
290
        if (item.parent)
467
265
            return fetchRootItem(item.parent)
291
            return fetchRootItem(item.parent)
Status:	Merged
Approved by:	Albert Astals Cid on 2014-05-05
Approved revision:	754
Merged at revision:	873
Proposed branch:	lp:~paulliu/unity8/zoomImage
Merge into:	lp:unity8
Diff against target:	467 lines (+383/-10) 7 files modified qml/Components/LazyImage.qml (+1/-0) qml/Components/ZoomableImage.qml (+153/-0) qml/Dash/Previews/PreviewZoomableImage.qml (+4/-7) tests/qmltests/CMakeLists.txt (+1/-0) tests/qmltests/Components/tst_ZoomableImage.qml (+192/-0) tests/qmltests/Dash/Previews/tst_PreviewZoomableImage.qml (+6/-3) tests/utils/modules/Unity/Test/UnityTestCase.qml (+26/-0)
To merge this branch:	bzr merge lp:~paulliu/unity8/zoomImage
Related bugs:	Link a bug report
Reviewer	Review Type	Date Requested	Status
Albert Astals Cid (community)			Approve on 2014-05-02
PS Jenkins bot (community)	continuous-integration		Needs Fixing on 2014-04-30
Andrea Cimitan (community)		2014-02-24	Needs Fixing on 2014-03-13
Michał Sawicz			Needs Information on 2014-03-05
Review via email: mp+207941@code.launchpad.net