status-im
/
reagent
mirror of https://github.com/status-im/reagent.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Modify geometry example to allow inclusion into other component

This commit is contained in:
Dan Holmsand 2014-02-15 17:05:22 +01:00
parent 8f308a4fe3
commit 478b74f6ae
5 changed files with 28 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
examples/geometry/example.css
View File

@ -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;
}

4
examples/geometry/example.html
View File

@ -5,11 +5,11 @@
<title>reagent svg example</title>
<link rel="stylesheet" href="example.css">
</head>
<body style="margin-left: -1px; margin-top: -1px">
<body>
<div id="app"></div>
<script type="text/javascript" src="target/client.js"></script>
<script type="text/javascript">
core.run();
geometry.core.run();
</script>
</body>
</html>

4
examples/geometry/src/components.cljs
View File

@ -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"

39
examples/geometry/src/core.cljs
View File

@ -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")))

2
examples/geometry/src/geometry.cljs
View File

@ -1,4 +1,4 @@
(ns geometry)
(ns geometry.geometry)
(defprotocol IPoint
(x [p])