One of my first uses of cljs, don't hate.

motion.cljs

(ns motioncards
  (:require [reagent.core    :as rx     ]
            [posh.core       :as rx-db  :refer [pull transact!]]
            [reagent.session :as session]
            [datascript.core :as mdb    ]
            [cljs.reader                ]
            [clojure.string  :as str    ]
            [soda-ash.element :as s     ])
  (:require-macros
            [reagent.ratom :refer [reaction]]
            [devcards.core   :as dc
             :refer [defcard defcard-doc defcard-rg deftest]]))



(defn merge- [a b]
  (merge-with - a b))

(defn start-position1 [evt atom]
  (do 
    (prn "motion: "(.-clientX evt)(.-clientY evt)
    (swap! atom assoc :start (merge- {:x (.-clientX evt) :y (.-clientY evt)} (:state @atom)))  
    (prn @atom))))



(defn change-position [evt atom]
  (let [x (.-clientX evt)
        y (.-clientY evt)
        diff (merge-with - {:x x :y y} (:start @atom))]
  (do 
    (prn "motion: difference" diff)
    (swap! atom assoc :state diff)  
    (prn @atom))))

(defn log-position [evt]
  (prn "motion: "(.-clientX evt)(.-clientY evt)))



(defonce position1 (rx/atom {:state {:x 1 :y 1} :rwidth 200 :rheight 100 :moving false :start {:x 1 :y 1}}))

(defonce position2 (rx/atom @position1))

(defn newboard1 [posatom fo]
  (let [position posatom]
    (fn []
      (let [dw (:rwidth @position)
            dh (:rheight @position)
            dx (get-in @position [:state :x])
            dy (get-in @position [:state :y])]
         [:g 
          { :width 100
            :height 100

            :transform (str "matrix(1 0 0 1 0 ""0"")")
            :on-mouse-down #(do (swap! position assoc :moving true)
                                (start-position1 % position))
            :on-mouse-up #(do (swap! position assoc :moving false)
                                (log-position %))
            :on-mouse-leave #(do (swap! position assoc :moving false))
            :on-mouse-move #(do (if (:moving @position)
                                      (change-position % position))) } 


            [:rect
              {:width dw
                :height dh
                :x (* 0.5 dx)
                :y (* 0.75 dy)
                :fill "blue"}]

            [:rect
              {:width dw 
                :height dh
                :x (+ 10 dx)
                :y (+ 10 dy)
                :fill "grey"}]
            [:foreignObject 
              {:width dw 
               :height dw
               :x (+ (/ dw 3) dx)
               :y (+ (/ dh 2) dy) 
              }
              fo]

            [:line
              {
                :stroke "green"
                :stroke-width 20
                :stroke-linecap "round"
                :x1 (+ 100 dx)
                :y1 (+ 10 dy)
                :x2 (* 0.5 (+ 0 dx ))
                :y2 (* 0.75 (+ 0 dy))}]
            [:line
              {
                :stroke "white"
                :stroke-width 4
                :stroke-linecap "round"
                :x1 (+ 10 dx)
                :y1 (+ 10 dy)
                :x2 (* 0.5 (+ 0 dx ))
                :y2 (* 0.75 (+ 0 dy))}]
            [:line
              {
                :stroke "black"
                :stroke-width 4
                :stroke-linecap "round"
                :x1 (+ 10 dx)
                :y1 (+ dh 10 dy)
                :x2 (+ 2 (* 0.5 (+ 0 dx )))
                :y2 (+ dh -2 (* 0.75 dy))}]]))))

(def s1
(rx/atom {:state {:x 0 :y 0} 
			  :start {:x 0 :y 0}
			  :moving false }))

(defn patom [sx sy] 
	(rx/atom {:state {:x sx :y sy} 
			  :start {:x 0 :y 0}
			  :moving false }))


(defn fo [posatom fo]
  (let [position posatom]
    (fn []
      (let [
            dx (get-in @position [:state :x])
            dy (get-in @position [:state :y])]
         [:g 
          { 
          

            :on-mouse-down #(do (swap! position assoc :moving true)
                                (start-position1 % position))
            :on-mouse-up #(do (swap! position assoc :moving false)
                                (log-position %))
            :on-mouse-leave #(do (swap! position assoc :moving false))
            :on-mouse-move #(do (if (:moving @position)
                                      (change-position % position))) } 

            [:foreignObject 
              {:width 1000
              	:height 1000
               :x dx
               :y dy
              }
              (if (:moving @position)
              	[s/icon {:soda {:icon :spinner
              					:state :loading}}])
              fo
              ]]))))



(defcard-rg next-step-adding-svg1*
  "Motion using groups"
  [:svg 
  	{:height 500
  	 :width 500}
    [newboard1 position1 [:button {:on-click #(js/alert "Hello SVG")} "Hellllooo"]]

    [newboard1 position2 [:button {:on-click #(js/alert "Hello VG")} "looo"]]

    [fo s1 [:div 
    		[:h1 "This is a grand statement"]]]
    ]
  position2
  {:inspect-data true
   :history true}
  )