diff --git a/examples/geometry/example.css b/examples/geometry/example.css
index e271a16..223d498 100644
--- a/examples/geometry/example.css
+++ b/examples/geometry/example.css
@@ -3,20 +3,3 @@ div, h1, input {
font-family: HelveticaNeue, Helvetica;
color: #777;
}
-
-.example-clock {
- font-size: 128px;
- line-height: 1.2em;
- font-family: HelveticaNeue-UltraLight, Helvetica;
-}
-
-@media (max-width: 768px) {
- .example-clock {
- font-size: 64px;
- }
-}
-
-.color-input, .color-input input {
- font-size: 24px;
- line-height: 1.5em;
-}
diff --git a/examples/geometry/example.html b/examples/geometry/example.html
index 6cc6c22..3c3be83 100644
--- a/examples/geometry/example.html
+++ b/examples/geometry/example.html
@@ -5,11 +5,11 @@
reagent svg example
-
+
diff --git a/examples/geometry/src/components.cljs b/examples/geometry/src/components.cljs
index 85dd0e1..e7003d9 100644
--- a/examples/geometry/src/components.cljs
+++ b/examples/geometry/src/components.cljs
@@ -1,6 +1,6 @@
-(ns components
+(ns geometry.components
(:require [reagent.core :as r]
- [geometry :refer [x y dist] :as g]))
+ [geometry.geometry :refer [x y dist] :as g]))
(def point-defaults
{:stroke "black"
diff --git a/examples/geometry/src/core.cljs b/examples/geometry/src/core.cljs
index cba5828..167161c 100644
--- a/examples/geometry/src/core.cljs
+++ b/examples/geometry/src/core.cljs
@@ -1,8 +1,8 @@
-(ns core
+(ns geometry.core
(:require
[reagent.core :as r]
- [components :as c]
- [geometry :as g]))
+ [geometry.components :as c]
+ [geometry.geometry :as g]))
(enable-console-print!)
@@ -12,8 +12,11 @@
:y 0
:mouse-down? false}))
-(defn on-mouse-move [evt]
- (swap! mouse-info assoc :x (.-clientX evt) :y (.-clientY evt)))
+(defn on-mouse-move [evt node]
+ (let [bcr (-> node .getBoundingClientRect)]
+ (swap! mouse-info assoc
+ :x (- (.-clientX evt) (.-left bcr))
+ :y (- (.-clientY evt) (.-top bcr)))))
(defn on-mouse-up [evt]
(swap! mouse-info assoc :mouse-down? false))
@@ -38,20 +41,24 @@
[c/draggable-point p2 mouse-info]
[c/draggable-point p3 mouse-info]])
+(defn main [{:keys [width height]}]
+ (let [this (r/current-component)]
+ [:svg {:on-mouse-down on-mouse-down
+ :on-mouse-up on-mouse-up
+ :on-mouse-move #(on-mouse-move % (r/dom-node this))
+ :width (or width 800)
+ :height (or height 600)
+ :style {:border "1px solid black"}}
+ [:text {:style {:-webkit-user-select "none"
+ :-moz-user-select "none"}
+ :x 20 :y 20 :font-size 20}
+ "The points are draggable"]
+ [root]]))
+
(defn by-id [id]
(.getElementById js/document id))
(defn ^:export run []
(r/render-component
- [:svg {:on-mouse-down on-mouse-down
- :on-mouse-up on-mouse-up
- :on-mouse-move on-mouse-move
- :width 800
- :height 600
- :style {:border "1px solid black"}}
- [:text {:style {:-webkit-user-select "none"
- :-moz-user-select "none"}
- :x 20 :y 20 :font-size 20}
- "The points are draggable"]
- [root]]
+ [main]
(by-id "app")))
diff --git a/examples/geometry/src/geometry.cljs b/examples/geometry/src/geometry.cljs
index ffdfac3..c81eccb 100644
--- a/examples/geometry/src/geometry.cljs
+++ b/examples/geometry/src/geometry.cljs
@@ -1,4 +1,4 @@
-(ns geometry)
+(ns geometry.geometry)
(defprotocol IPoint
(x [p])