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

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

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

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

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

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

@ -12,18 +12,6 @@
(defn point [x y] (defn point [x y]
(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] (defn dist [p1 p2]
(js/Math.sqrt (+ (js/Math.pow (- (x p2) (x p1)) 2) (js/Math.sqrt (+ (js/Math.pow (- (x p2) (x p1)) 2)
(js/Math.pow (- (y p2) (y p1)) 2)))) (js/Math.pow (- (y p2) (y p1)) 2))))