(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) ]]