Skip to content

Instantly share code, notes, and snippets.

@Conaws
Created July 18, 2016 07:37
Show Gist options
  • Save Conaws/dd15c937161fa0275cb64b57c43a9753 to your computer and use it in GitHub Desktop.
Save Conaws/dd15c937161fa0275cb64b57c43a9753 to your computer and use it in GitHub Desktop.
An example of using reagent to embed a foreign object in an SVG, and making that object draggable
(ns motion.svg.foreign
(:require [reagent.core :refer [atom]])
(:require-macros
[devcards.core :as dc
:refer [defcard defcard-doc defcard-rg deftest]]))
(defonce position1
(atom {:state {:x 1 :y 1} :rwidth 200 :rheight 100 :moving false :start {:x 1 :y 1}}))
(defonce position2
(atom @position1))
(defn log-position [evt]
(prn "motion: "(.-clientX evt)(.-clientY evt)))
(defn merge- [a b]
(merge-with - a b))
(defn start-position [evt ratom]
(do
(prn "motion: "(.-clientX evt)(.-clientY evt)
(swap! ratom assoc :start (merge- {:x (.-clientX evt) :y (.-clientY evt)} (:state @ratom)))
(prn @ratom))))
(defn change-position [evt ratom]
(let [x (.-clientX evt)
y (.-clientY evt)
diff (merge-with - {:x x :y y} (:start @ratom))]
(do
(prn "motion: difference" diff)
(swap! ratom assoc :state diff)
(prn @ratom))))
(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-position % 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
}
fo]]))))
(defn layout []
[:svg
{:height 3000
:width 3000}
[fo position1 [:div
{:style {:background-color "blue"
:width "600px"}}
[:h1 "text"]
[:textarea
{:style {:width "500px"}}]]]
[fo position2 [:h1
{:style {:background-color "green"
:width "200px"} }
"hey"]]])
(defcard-rg layout-card
"hey"
[layout])
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment