1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162 | import QtQuick 2.4
import Ubuntu.Components 1.2
import QtQuick.Layouts 1.1
import Ubuntu.Components.ListItems 1.0 as ListItem
//import geometry functions
import "./geometry/rectangle.js" as Rectangle
import "./geometry/line.js" as Line
import "./geometry/circle.js" as Circle
import "./geometry/geometryUtils.js" as Util
//import scene object
import "scene.js" as Scene
MainView {
objectName: "mainView"
applicationName: "com.ubuntu.developer.boiko.bottomedge"
width: units.gu(100)
height: units.gu(75)
function startupFunction(canvas) {
Scene.startNew(canvas)
}
//Component.onCompleted: startupFunction();
ListModel {
id: toolList
//to do move shape.js files to a folder, count items in folder and add to the model in code
ListElement { name: "Line"; description: "Draw a line";}
ListElement { name: "Circle"; description: "Draw a circle";}
ListElement { name: "Rectangle"; description: "Draw a ";}
ListElement { name: "Point"; description: "Draw a ";}
}
Component {
id: pageComponent
PageWithBottomEdge {
id: mainPage
title: i18n.tr("Cadmium")
ColumnLayout {
anchors.fill: parent
Canvas {
id: canvas
Layout.fillHeight: true
Layout.fillWidth: true
//width: parent.width + units.gu(4)
//height: 500
//width: 100
//height: 200
antialiasing: true
property int radius: 10
//property int rectx: 30
//property int recty: 30
//property int rectWidth: width - 2*rectx
//property int rectHeight: height - 2*recty
property color fillStyle: "#ae32a0" // purple
property color strokeStyle: Qt.darker(fillStyle, 1.4)
property int lineWidth: 2
property bool fill: false
property bool stroke: true
property real alpha: 1.0
onLineWidthChanged:requestPaint();
onFillChanged:requestPaint();
onStrokeChanged:requestPaint();
onRadiusChanged:requestPaint();
onPaint: {
var ctx = getContext("2d");
ctx.save();
// setup a dark background
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.strokeStyle = canvas.strokeStyle;
ctx.lineWidth = canvas.lineWidth
ctx.globalAlpha = canvas.alpha
//Do the drawing here:
//Rectangle.draw(ctx, 10, 10,100, 100, 5)
//Circle.draw(ctx, 50, 50, 25)
//Line.draw(ctx, 25, 200, 100, 100)
for (var i = 0; i < Scene.items.length; i++) {
//console.log(Scene.items[i].name);
if (Scene.items[i].name){
ctx.beginPath()
Line.draw(ctx, Scene.items[i].startx, Scene.items[i].starty, Scene.items[i].endx, Scene.items[i].endy)
ctx.stroke()
}
}
}
MouseArea {
anchors.fill:parent
hoverEnabled: true
onPositionChanged: Scene.mouseMove(statusBarFooter, mouseX, canvas.x, mouseY, canvas.y);
onClicked: Scene.handleClick(mouseX,mouseY);
}
Component.onCompleted: startupFunction(canvas);
}
TextField {
id: inputPrompt
Layout.fillWidth: true
placeholderText: i18n.tr("Input")
hasClearButton: true
}
Label {
id: statusBarFooter
property string statusMessage
text: statusMessage
}
}
///////// Botom Edge Panel //////////
bottomEdgePageComponent: Page {
title: "Drawing Tools"
anchors.fill: parent
UbuntuListView {
id:toolListView
anchors.fill: parent
model: toolList
delegate: ListItem.Subtitled {
text: name;
subText: description;
onClicked: {
Scene.addItem(toolList.get(index).name, canvas)
stack.pop()
//canvas.requestPaint()
}
}
}
}
bottomEdgeTitle: i18n.tr("Drawing Tools")
}
}
PageStack {
id: stack
Component.onCompleted: stack.push(pageComponent)
}
}
|