-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathrender.cljs
126 lines (119 loc) · 5.15 KB
/
render.cljs
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
(ns noc.render
(:require
[nextjournal.clerk.render.hooks :as hooks]
[noc.sketch]))
(def icon-reset [:svg
{:stroke "currentColor",
:aria-hidden "true",
:fill "none",
:width "1em",
:xmlns "http://www.w3.org/2000/svg",
:stroke-width "2",
:class "h-[15px] w-[15px]",
:viewBox "0 0 24 24",
:height "1em"}
[:path
{:stroke-linecap "round",
:stroke-linejoin "round",
:d
"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"}]])
(def icon-play
[:svg
{:stroke "currentColor",
:aria-hidden "true",
:fill "none",
:width "1em",
:xmlns "http://www.w3.org/2000/svg",
:stroke-width "2",
:class "h-4 w-4",
:viewBox "0 0 24 24",
:height "1em"}
[:path
{:stroke-linecap "round",
:stroke-linejoin "round",
:d
"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"}]
[:path
{:stroke-linecap "round",
:stroke-linejoin "round",
:d "M21 12a9 9 0 11-18 0 9 9 0 0118 0z"}]])
(def icon-pause
[:svg
{:stroke "currentColor",
:aria-hidden "true",
:fill "none",
:width "1em",
:xmlns "http://www.w3.org/2000/svg",
:stroke-width "2",
:class "h-4 w-4",
:viewBox "0 0 24 24",
:height "1em"}
[:path
{:stroke-linecap "round",
:stroke-linejoin "round",
:d "M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"}]])
(defn render-quil-sketch [sketch]
(let [!aspect-ratio (hooks/use-state (/ 8 3))
!is-paused (hooks/use-state false)
adjust-frame (fn [el]
(when-let [canvas (.querySelector el "canvas")]
(reset! !aspect-ratio (/ (.-width canvas) (.-height canvas)))
(aset (.-style canvas) "width" "100%")
(aset (.-style canvas) "height" "100%")))
!container-ref (hooks/use-ref nil)
sketch-opts (noc.sketch/load-sketch sketch)
!sketch (hooks/use-state nil)
reset (fn []
(noc.sketch/reset !sketch)
(noc.sketch/resume !sketch)
(reset! !is-paused false))
toggle-running (fn []
(if @!is-paused
(do
(noc.sketch/resume !sketch)
(reset! !is-paused false))
(do
(noc.sketch/pause !sketch)
(reset! !is-paused true))))]
;; Pauses the sketch when it is not in view, and resumes it when it is in view
(hooks/use-effect (fn []
(let [curr @!container-ref]
(when (and curr (not @!is-paused) @!sketch)
(let [intersection-callback (fn [entries]
(when (odd? (count entries))
(let [entry (last entries)]
(if (.-isIntersecting entry)
(noc.sketch/resume !sketch)
(noc.sketch/pause !sketch)))))
observer (js/IntersectionObserver. intersection-callback #js{:root nil
:rootMargin "0px"
:threshold 0})]
(.observe observer curr)
(fn [] (.unobserve observer curr))))))
[!container-ref !is-paused !sketch])
;; Loads the sketch when the container is mounted
(hooks/use-layout-effect (fn []
(when-let [el @!container-ref]
(reset! !sketch (noc.sketch/show-sketch adjust-frame sketch-opts el)))))
[:div {:class "clear-both my-4 overflow-hidden rounded border bg-gray-100"}
[:div {:class "relative overflow-hidden rounded-t bg-white"}
(if sketch-opts
[:div {:class "w-full border-none transition-opacity opacity-100"
:ref !container-ref}]
[:div (str "No sketch named " sketch " found")])]
[:div {:class "flex items-center justify-between border-t"}
[:div
{:class "flex"}
[:button {:class "flex items-center border-r px-2.5 py-1.5 text-sm hover:bg-gray-200"
:on-click reset}
icon-reset
[:span {:class "ml-1.5"} "Reset"]]
[:button
{:class "flex items-center border-r px-2.5 py-1.5 text-sm hover:bg-gray-200"
:on-click toggle-running}
(if @!is-paused
icon-play
icon-pause)
(if @!is-paused
[:span {:class "ml-1"} "Play"]
[:span {:class "ml-1"} "Pause"])]]]]))