silly little doodles
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

make expansion zoom out instead of snapping

nnuuvv 71f7e05c 94f715c8

+69 -15
-1
README.md
··· 7 7 ``` 8 8 9 9 ### TODO 10 - - Button to swap between mirroring modes 11 10 - Drag to draw
+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
··· 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 + }