+51 -43

src/doodler.gleam

reviewed

··· 18 18 } 19 19 20 20 fn init(_flags) { 21 21 - register_on_load() 22 22 - Model(starting_points(), [], None, Both) 21 21 + let start_points = starting_points() 22 22 + 23 23 + register_on_load(get_viewbox_string(start_points)) 24 24 + 25 25 + Model(start_points, [], None, Both) 23 26 } 24 27 25 25 - @external(javascript, "./doodler_ffi.js", "register_animate_viewbox_on_window_load") 26 26 - fn register_on_load() -> Nil 28 28 + /// registers the creation of `<animate>` for `viewBox` in the `main_svg` on `DOMContentLoaded` using the supplied `viewbox_string` as a starting point 29 29 + /// 30 30 + @external(javascript, "./doodler_ffi.js", "create_viewbox_animation_on_load") 31 31 + fn register_on_load(viewbox_string: String) -> Nil 27 32 28 33 type Model { 29 34 Model( ··· 64 69 // TODO: implement 'shape verification mode' toggle 65 70 } 66 71 72 72 + /// gets the default 3x3 starting points 73 73 + /// 67 74 fn starting_points() { 68 75 set.from_list(add_point_neighbors(set.new(), Point(0, 0)) |> set.to_list()) 69 76 } ··· 158 165 Edge(Point(a.x, -a.y), Point(b.x, -b.y)) 159 166 } 160 167 161 161 - fn filter_edge(edge: Edge, point_a, point_b, mirroring) { 168 168 + fn filter_edge( 169 169 + edge: Edge, 170 170 + point_a: Point, 171 171 + point_b: Point, 172 172 + mirroring: Mirroring, 173 173 + ) -> Bool { 162 174 { 163 175 points_equal_respect_mirror(edge.a, point_a, mirroring) 164 176 && points_equal_respect_mirror(edge.b, point_b, mirroring) ··· 205 217 |> set.insert(Point(x + 1, y + 1)) 206 218 } 207 219 208 208 - /// compare two points for equality 209 209 - /// 210 210 - fn points_equal(first_point: Point, second_point: Point) -> Bool { 211 211 - first_point.x == second_point.x && first_point.y == second_point.y 212 212 - } 213 213 - 214 220 /// compare two points for equality; while respecting Mirroring 215 221 /// 216 222 fn points_equal_respect_mirror( ··· 250 256 }) 251 257 } 252 258 259 259 + /// moves `main_svg` > `viewbox_animation`'s current `to` value into `from` and sets `to` to `new_viewbox` 260 260 + /// 253 261 @external(javascript, "./doodler_ffi.js", "animate_viewbox") 254 262 fn animate_viewbox_js(new_viewbox: String) -> Nil 255 263 256 256 - fn animate_viewbox(model: Model) -> Nil { 257 257 - let #(min_x, min_y, max_x, max_y) = 258 258 - model.points 259 259 - |> min_max() 264 264 + fn animate_viewbox(points: Set(Point)) -> Nil { 265 265 + let viewbox = get_viewbox_string(points) 260 266 261 261 - let min_x = to_dispay_grid(min_x) - point_spacing 262 262 - let min_y = to_dispay_grid(min_y) - point_spacing 263 263 - let max_x = to_dispay_grid(max_x) + point_spacing 264 264 - let max_y = to_dispay_grid(max_y) + point_spacing 267 267 + animate_viewbox_js(viewbox) 268 268 + } 265 269 266 266 - let viewbox = 267 267 - int.to_string(min_x) 268 268 - <> " " 269 269 - <> int.to_string(min_y) 270 270 - <> " " 271 271 - <> int.to_string(int.absolute_value(min_x) + max_x) 272 272 - <> " " 273 273 - <> int.to_string(int.absolute_value(min_y) + max_y) 270 270 + /// generates a viewbox string like `-10 -10 20 20` based on the provided points 271 271 + /// 272 272 + fn get_viewbox_string(points: Set(Point)) -> String { 273 273 + // get min and max x y values from the current points 274 274 + let #(min_x, min_y, max_x, max_y) = min_max(points) 274 275 275 275 - animate_viewbox_js(viewbox) 276 276 + // map them to the svg grid 277 277 + let min_x = to_svg_grid(min_x) - point_spacing 278 278 + let min_y = to_svg_grid(min_y) - point_spacing 279 279 + let max_x = to_svg_grid(max_x) + point_spacing 280 280 + let max_y = to_svg_grid(max_y) + point_spacing 281 281 + // assemble into viewbox string 282 282 + [ 283 283 + min_x, 284 284 + min_y, 285 285 + int.absolute_value(min_x) + max_x, 286 286 + int.absolute_value(min_y) + max_y, 287 287 + ] 288 288 + |> list.map(int.to_string) 289 289 + |> list.fold("", fn(x, y) { x <> " " <> y }) 276 290 } 277 291 278 292 /// view 279 293 /// 280 294 fn view(model: Model) { 281 281 - animate_viewbox(model) 295 295 + animate_viewbox(model.points) 282 296 283 297 div([], [ 284 298 html.button( ··· 303 317 ) 304 318 |> list.append([ 305 319 view_selected(model.selected), 306 306 - // svg.animate([ 307 307 - // attribute.id("viewbox_animation"), 308 308 - // attribute.attribute("attributeName", "viewBox"), 309 309 - // attribute.attribute("dur", "1s"), 310 310 - // attribute.attribute("fill", "freeze"), 311 311 - // ]), 312 320 ]), 313 321 ), 314 322 ]) 315 323 } 316 324 317 317 - /// turn simple Point(x,y) grid coords into 'display grid' by appling point_spacing 325 325 + /// turn simple Point(x,y) grid coords into 'svg grid' by appling point_spacing 318 326 /// 319 319 - fn to_dispay_grid(a) { 327 327 + fn to_svg_grid(a) { 320 328 a * point_spacing 321 329 } 322 330 ··· 334 342 fn view_edge(edge: Edge) { 335 343 let Edge(a, b) = edge 336 344 svg.line([ 337 337 - attribute.attribute("x1", int.to_string(a.x |> to_dispay_grid())), 338 338 - attribute.attribute("y1", int.to_string(a.y |> to_dispay_grid())), 339 339 - attribute.attribute("x2", int.to_string(b.x |> to_dispay_grid())), 340 340 - attribute.attribute("y2", int.to_string(b.y |> to_dispay_grid())), 345 345 + attribute.attribute("x1", int.to_string(a.x |> to_svg_grid())), 346 346 + attribute.attribute("y1", int.to_string(a.y |> to_svg_grid())), 347 347 + attribute.attribute("x2", int.to_string(b.x |> to_svg_grid())), 348 348 + attribute.attribute("y2", int.to_string(b.y |> to_svg_grid())), 341 349 attribute.styles([ 342 350 #("stroke", "black"), 343 351 #("stroke-width", "1"), ··· 360 368 svg.circle([ 361 369 on_click(UserClickedPoint(point)), 362 370 attribute.attribute("r", "1"), 363 363 - attribute.attribute("cy", int.to_string(point.y |> to_dispay_grid())), 364 364 - attribute.attribute("cx", int.to_string(point.x |> to_dispay_grid())), 371 371 + attribute.attribute("cy", int.to_string(point.y |> to_svg_grid())), 372 372 + attribute.attribute("cx", int.to_string(point.x |> to_svg_grid())), 365 373 ..selected_attrs 366 374 ]) 367 375 }

+13 -13

src/doodler_ffi.js

reviewed

··· 1 1 - export function register_animate_viewbox_on_window_load() { 2 2 - document.addEventListener("DOMContentLoaded", create_viewbox_animate) 3 3 - console.log("registered on load") 1 1 + 2 2 + export function create_viewbox_animation_on_load(viewbox_string) { 3 3 + document.addEventListener("DOMContentLoaded", function() { create_viewbox_animation(viewbox_string) }) 4 4 } 5 5 6 6 - function create_viewbox_animate(){ 6 6 + function create_viewbox_animation(viewbox_string){ 7 7 const main_svg = document.getElementById("main_svg") 8 8 9 9 var animate = document.createElementNS("http://www.w3.org/2000/svg", "animate") 10 10 animate.setAttribute("attributeName", "viewBox") 11 11 animate.setAttribute("id", "viewbox_animation") 12 12 - animate.setAttribute("from", "-10 -10 20 20") 13 13 - animate.setAttribute("to", "-10 -10 20 20") 12 12 + animate.setAttribute("from", viewbox_string) 13 13 + animate.setAttribute("to", viewbox_string) 14 14 animate.setAttribute("dur", "0.3s") 15 15 animate.setAttribute("fill", "freeze") 16 16 ··· 18 18 } 19 19 20 20 export function animate_viewbox(new_viewbox) { 21 21 - console.log("entering animate_viewbox") 22 22 - 23 23 - 21 21 + // get viewbox_animation element 24 22 const viewbox_animate = document.getElementById("viewbox_animation") 25 23 if (viewbox_animate == null) return 26 24 25 25 + // get the previous target viewbox 27 26 const previous_viewbox = viewbox_animate.getAttribute("to") 28 28 - console.log(previous_viewbox) 29 27 28 28 + // set the previous target to be the new start 30 29 if(previous_viewbox != null) 31 30 viewbox_animate.setAttribute("from", previous_viewbox) 31 31 + 32 32 + // set the new target as the new target 32 33 viewbox_animate.setAttribute("to", new_viewbox) 33 33 - viewbox_animate.beginElement() 34 34 - console.log(new_viewbox) 35 34 36 36 - console.log("leaving animate_viewbox") 35 35 + // start the animation 36 36 + viewbox_animate.beginElement() 37 37 }