silly little doodles
more working
+55
-59
+55
-59
src/doodler.gleam
+55
-59
src/doodler.gleam
···
84
84
|> echo
85
85
86
86
let edges = case thing {
87
+
// TODO: implement mirror toggle
88
+
// For horizontal / vertical mirroring
87
89
// the new edge wasnt found in the existing ones, add it
88
90
#([], edges) -> [Edge(first_point, clicked_point), ..edges]
89
91
// the new edge was found in the existing ones, remove it
···
134
136
@external(javascript, "./doodler.js", "viewport_width")
135
137
pub fn viewport_width() -> Int
136
138
139
+
fn min_max(points) {
140
+
points
141
+
|> set.fold(#(0, 0, 0, 0), fn(counts, point) {
142
+
let #(min_x, min_y, max_x, max_y) = counts
143
+
144
+
let Point(x:, y:) = point
145
+
let min_x = int.min(x, min_x)
146
+
let min_y = int.min(y, min_y)
147
+
148
+
let max_x = int.max(x, max_x)
149
+
let max_y = int.max(y, max_y)
150
+
151
+
#(min_x, min_y, max_x, max_y)
152
+
})
153
+
|> echo
154
+
}
155
+
137
156
fn count_x_y(points: Set(Point)) -> #(Int, Int) {
138
157
let #(x, y) =
139
158
points
···
151
170
}
152
171
})
153
172
154
-
#(x * 2 + 1, y * 2 + 1)
173
+
#(x, y)
155
174
}
156
175
157
176
fn view(model: Model) {
···
159
178
model.points
160
179
|> count_x_y
161
180
162
-
let vp_width = viewport_width()
163
-
let vp_height = viewport_height()
181
+
let buffer = 5
182
+
183
+
let #(min_x, min_y, max_x, max_y) =
184
+
model.points
185
+
|> min_max()
164
186
165
-
let width = vp_width / x
166
-
let height = vp_height / y
187
+
let min_x = min_x * 5 - buffer
188
+
let min_y = min_y * 5 - buffer
189
+
let max_x = max_x * 5 + buffer
190
+
let max_y = max_y * 5 + buffer
167
191
168
-
let size = int.min(width, height)
169
-
// let size = 5
192
+
let viewbox =
193
+
int.to_string(min_x)
194
+
<> " "
195
+
<> int.to_string(min_y)
196
+
<> " "
197
+
<> int.to_string(int.absolute_value(min_x) + max_x)
198
+
<> " "
199
+
<> int.to_string(int.absolute_value(min_y) + max_y)
170
200
171
201
div([], [
172
202
svg.svg(
173
203
[
174
-
attribute.attribute("width", "vw"),
175
-
attribute.attribute("height", "vh"),
204
+
attribute.attribute("width", "100vw"),
205
+
attribute.attribute("height", "100vh"),
206
+
attribute.attribute("viewBox", viewbox),
176
207
],
177
208
list.append(
178
-
list.map(model.edges, view_edge(_, size, vp_width / 2, vp_height / 2)),
179
-
set.map(model.points, view_point(
180
-
_,
181
-
size,
182
-
vp_width / 2,
183
-
vp_height / 2,
184
-
False,
185
-
))
209
+
list.map(model.edges, view_edge),
210
+
set.map(model.points, view_point(_, False))
186
211
|> set.to_list(),
187
212
)
188
213
|> list.append([
189
-
view_selected(model.selected, size, vp_width / 2, vp_height / 2),
214
+
view_selected(model.selected),
190
215
]),
191
216
),
192
217
])
193
218
}
194
219
195
-
fn view_selected(
196
-
selected: Option(Point),
197
-
size: Int,
198
-
x_offset: Int,
199
-
y_offset: Int,
200
-
) {
220
+
fn view_selected(selected: Option(Point)) {
201
221
case selected {
202
222
None -> div([], [])
203
-
Some(point) -> view_point(point, size, x_offset, y_offset, True)
223
+
Some(point) -> view_point(point, True)
204
224
}
205
225
}
206
226
207
-
fn view_edge(edge: Edge, size: Int, x_offset: Int, y_offset: Int) {
227
+
fn view_edge(edge: Edge) {
208
228
let Edge(a, b) = edge
209
229
svg.line([
210
-
attribute.attribute(
211
-
"x1",
212
-
int.to_string(calculate_offset(size, a.x, x_offset)),
213
-
),
214
-
attribute.attribute(
215
-
"y1",
216
-
int.to_string(calculate_offset(size, a.y, y_offset)),
217
-
),
218
-
attribute.attribute(
219
-
"x2",
220
-
int.to_string(calculate_offset(size, b.x, x_offset)),
221
-
),
222
-
attribute.attribute(
223
-
"y2",
224
-
int.to_string(calculate_offset(size, b.y, y_offset)),
225
-
),
230
+
attribute.attribute("x1", int.to_string(a.x * 5)),
231
+
attribute.attribute("y1", int.to_string(a.y * 5)),
232
+
attribute.attribute("x2", int.to_string(b.x * 5)),
233
+
attribute.attribute("y2", int.to_string(b.y * 5)),
226
234
attribute.styles([
227
235
#("stroke", "black"),
228
-
#("stroke-width", int.to_string(size / 5)),
236
+
#("stroke-width", "1"),
229
237
]),
230
238
])
231
239
}
232
240
233
-
fn view_point(
234
-
point: Point,
235
-
size: Int,
236
-
x_offset: Int,
237
-
y_offset: Int,
238
-
selected: Bool,
239
-
) {
241
+
fn view_point(point: Point, selected: Bool) {
240
242
let selected_attrs = case selected {
241
243
False -> [
242
244
attribute.attribute("fill", "black"),
···
248
250
249
251
svg.circle([
250
252
on_click(UserClickedPoint(point)),
251
-
attribute.attribute("r", int.to_string(size / 5)),
252
-
attribute.style(
253
-
"cy",
254
-
int.to_string(calculate_offset(size, point.y, y_offset)),
255
-
),
256
-
attribute.style(
257
-
"cx",
258
-
int.to_string(calculate_offset(size, point.x, x_offset)),
259
-
),
253
+
attribute.attribute("r", "1"),
254
+
attribute.attribute("cy", int.to_string(point.y * 5)),
255
+
attribute.attribute("cx", int.to_string(point.x * 5)),
260
256
..selected_attrs
261
257
])
262
258
}