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

cleanup

This commit is contained in:
Jonas Enlund 2014-02-09 14:02:36 +02:00
parent bc607852ef
commit 757f2f88cc
4 changed files with 25 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/geometry/example.html
View File

@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<title>reagent simple example</title>
<title>reagent svg example</title>
<link rel="stylesheet" href="example.css">
</head>
<body style="margin-left: -1px; margin-top: -1px">

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

@ -8,10 +8,15 @@
:fill "blue"
:r 5})
(def line-defaults
(def segment-defaults
{:stroke "black"
:stroke-width 2})
(def circle-defaults
{:fill "rgba(255,0,0,0.1)"
:stroke "black"
:stroke-width 2})
(defn point [p]
[:circle
(merge point-defaults
@ -21,8 +26,7 @@
(when (:mouse-down? @mouse-info)
(reset! p (g/point (:x @mouse-info)
(:y @mouse-info)))
(.requestAnimationFrame
js/window
(r/next-tick
(fn []
(drag mouse-info p)))))
@ -37,7 +41,7 @@
(defn segment [from to]
[:line
(merge line-defaults
(merge segment-defaults
{:x1 (x from) :y1 (y from)
:x2 (x to) :y2 (y to)})])
@ -47,12 +51,9 @@
[segment b c]
[segment c a]])
(defn circle [c r]
[:circle
(merge circle-defaults
{:cx (x c)
:cy (y c)
:r (dist c r)
:stroke-width 2
:stroke "black"
:fill "rgba(0,0,0,0)"}])
:r (dist c r)})])

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

@ -24,13 +24,16 @@
(def p1 (r/atom (g/point 100 100)))
(def p2 (r/atom (g/point 200 200)))
(def p3 (r/atom (g/point 100 200)))
(def c (r/atom (g/point 250 250)))
(def p (r/atom (g/point 250 300)))
(defn root []
[:g
[c/triangle @p1 @p2 @p3]
[c/circle @p1 @p2]
[c/circle @p2 @p3]
[c/circle @p3 @p1]
[c/circle @p @c]
[c/segment @p @c]
[c/draggable-point c mouse-info]
[c/draggable-point p mouse-info]
[c/draggable-point p1 mouse-info]
[c/draggable-point p2 mouse-info]
[c/draggable-point p3 mouse-info]])
@ -43,11 +46,12 @@
[:svg {:on-mouse-down on-mouse-down
:on-mouse-up on-mouse-up
:on-mouse-move on-mouse-move
:width 400
:height 400
:width 800
:height 600
:style {:border "1px solid black"}}
[:text {:style {:-webkit-user-select "none"}
[:text {:style {:-webkit-user-select "none"
:-moz-user-select "none"}
:x 20 :y 20 :font-size 20}
"The corners are draggable"]
"The points are draggable"]
[root]]
(by-id "app")))

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

@ -12,18 +12,6 @@
(defn point [x y]
(Point. x y))
(defn addp [p1 p2]
(point (+ (x p1) (x p2))
(+ (y p1) (y p2))))
(defn rand-point [xmin xmax ymin ymax]
(point (rand-nth (vec (range xmin xmax)))
(rand-nth (vec (range ymin ymax)))))
(defn rand-dir []
(rand-point -1 2 -1 2))
(defn dist [p1 p2]
(js/Math.sqrt (+ (js/Math.pow (- (x p2) (x p1)) 2)
(js/Math.pow (- (y p2) (y p1)) 2))))