silly little doodles
make expansion zoom out instead of snapping
+69
-15
-1
README.md
-1
README.md
+32
-14
src/doodler.gleam
+32
-14
src/doodler.gleam
···
18
18
}
19
19
20
20
fn init(_flags) {
21
+
register_on_load()
21
22
Model(starting_points(), [], None, Both)
22
23
}
24
+
25
+
@external(javascript, "./doodler_ffi.js", "register_animate_viewbox_on_window_load")
26
+
fn register_on_load() -> Nil
23
27
24
28
type Model {
25
29
Model(
···
45
49
Both
46
50
}
47
51
52
+
fn mirroring_to_string(mirroring: Mirroring) -> String {
53
+
case mirroring {
54
+
Off -> "Off"
55
+
Vertical -> "Vertical"
56
+
Horizontal -> "Horizontal"
57
+
Both -> "Both"
58
+
}
59
+
}
60
+
48
61
type Msg {
49
62
UserClickedPoint(Point)
50
-
// TODO: add button to toggle
51
63
UserClickedCycleMirror
52
64
// TODO: implement 'shape verification mode' toggle
53
65
}
···
238
250
})
239
251
}
240
252
241
-
/// view
242
-
///
243
-
fn view(model: Model) {
253
+
@external(javascript, "./doodler_ffi.js", "animate_viewbox")
254
+
fn animate_viewbox_js(new_viewbox: String) -> Nil
255
+
256
+
fn animate_viewbox(model: Model) -> Nil {
244
257
let #(min_x, min_y, max_x, max_y) =
245
258
model.points
246
259
|> min_max()
···
259
272
<> " "
260
273
<> int.to_string(int.absolute_value(min_y) + max_y)
261
274
275
+
animate_viewbox_js(viewbox)
276
+
}
277
+
278
+
/// view
279
+
///
280
+
fn view(model: Model) {
281
+
animate_viewbox(model)
282
+
262
283
div([], [
263
284
html.button(
264
285
[
···
271
292
),
272
293
svg.svg(
273
294
[
295
+
attribute.id("main_svg"),
274
296
attribute.attribute("width", "97vw"),
275
297
attribute.attribute("height", "97vh"),
276
-
attribute.attribute("viewBox", viewbox),
277
298
],
278
299
list.append(
279
300
list.map(model.edges, view_edge),
···
282
303
)
283
304
|> list.append([
284
305
view_selected(model.selected),
306
+
// svg.animate([
307
+
// attribute.id("viewbox_animation"),
308
+
// attribute.attribute("attributeName", "viewBox"),
309
+
// attribute.attribute("dur", "1s"),
310
+
// attribute.attribute("fill", "freeze"),
311
+
// ]),
285
312
]),
286
313
),
287
314
])
288
-
}
289
-
290
-
fn mirroring_to_string(mirroring: Mirroring) -> String {
291
-
case mirroring {
292
-
Off -> "Off"
293
-
Vertical -> "Vertical"
294
-
Horizontal -> "Horizontal"
295
-
Both -> "Both"
296
-
}
297
315
}
298
316
299
317
/// turn simple Point(x,y) grid coords into 'display grid' by appling point_spacing
+37
src/doodler_ffi.js
+37
src/doodler_ffi.js
···
1
+
export function register_animate_viewbox_on_window_load() {
2
+
document.addEventListener("DOMContentLoaded", create_viewbox_animate)
3
+
console.log("registered on load")
4
+
}
5
+
6
+
function create_viewbox_animate(){
7
+
const main_svg = document.getElementById("main_svg")
8
+
9
+
var animate = document.createElementNS("http://www.w3.org/2000/svg", "animate")
10
+
animate.setAttribute("attributeName", "viewBox")
11
+
animate.setAttribute("id", "viewbox_animation")
12
+
animate.setAttribute("from", "-10 -10 20 20")
13
+
animate.setAttribute("to", "-10 -10 20 20")
14
+
animate.setAttribute("dur", "0.3s")
15
+
animate.setAttribute("fill", "freeze")
16
+
17
+
main_svg.appendChild(animate)
18
+
}
19
+
20
+
export function animate_viewbox(new_viewbox) {
21
+
console.log("entering animate_viewbox")
22
+
23
+
24
+
const viewbox_animate = document.getElementById("viewbox_animation")
25
+
if (viewbox_animate == null) return
26
+
27
+
const previous_viewbox = viewbox_animate.getAttribute("to")
28
+
console.log(previous_viewbox)
29
+
30
+
if(previous_viewbox != null)
31
+
viewbox_animate.setAttribute("from", previous_viewbox)
32
+
viewbox_animate.setAttribute("to", new_viewbox)
33
+
viewbox_animate.beginElement()
34
+
console.log(new_viewbox)
35
+
36
+
console.log("leaving animate_viewbox")
37
+
}