Skip to content

Instantly share code, notes, and snippets.

@nrfm

nrfm/main-gist.cljs

Last active August 20, 2020 16:58
Show Gist options
  • Save nrfm/959c20b61d30dd228fa9044db1a0795f to your computer and use it in GitHub Desktop.
Save nrfm/959c20b61d30dd228fa9044db1a0795f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
main-gist.cljs
(defn xy [e]
[] (let [rect (.getBoundingClientRect (.-target e))]
[:div "render ok! updated"] [(- (.-clientX e) (.-left rect))
) (- (.-clientY e) (.-top rect))]))
(defn mouse-handlers [drawing]
(let [pen-down? (r/atom false)
start-path
(fn start-path [e]
(when (not= (.-buttons e) 0)
(reset! pen-down? true)
(let [[x y] (xy e)]
(swap! drawing conj [x y x y]))))
continue-path
(fn continue-path [e]
(when @pen-down?
(let [[x y] (xy e)]
(swap! drawing (fn [lines]
(let [last-line-idx (dec (count lines))]
(update lines last-line-idx conj x y)))))))
end-path
(fn end-path [e]
(when @pen-down?
(continue-path e)
(reset! pen-down? false)))]
{:on-mouse-down start-path
:on-mouse-over start-path
:on-mouse-move continue-path
:on-mouse-up end-path
:on-mouse-out end-path}))
(defn paths [drawing]
(into
[:g
{:style {:pointer-events "none"}
:fill "none"
:stroke "black"
:stroke-width 4}]
(for [[x y & more-points] @drawing]
[:path {:d (str "M " x " " y "L "(string/join " " more-points))}])))
(defn scribble3 [attrs drawing]
[:svg
(merge-with merge attrs
{:width "100%"
:height 400
:style {:border "1px solid"
:box-sizing "border-box"
:cursor "crosshair"}})
[paths drawing]])
(defn scribble-widget [& {:keys [ratom]}]
(let [
handlers (mouse-handlers ratom)]
[scribble3 handlers ratom]))
(def my-drawing4 (r/atom []))
(def my-drawing5 (r/atom []))
[:div
[scribble-widget :ratom my-drawing4 :mouse-handlers (mouse-handlers my-drawing4) ]
[scribble-widget :ratom my-drawing5 :mouse-handlers (mouse-handlers my-drawing5) ]]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment