status-im/reagent
2
0
Fork 0
mirror of https://github.com/status-im/reagent.git synced 2025-02-03 07:33:24 +00:00
Code Issues Projects Releases Wiki Activity

testing the anyargs branch

Browse Source
This commit is contained in:
Jonas Enlund 2014-02-09 12:04:13 +02:00
parent e32c3ad044
commit b25facab63
7 changed files with 212 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
examples/geometry/Makefile Normal file
View File

@ -0,0 +1,20 @@
PROF = dev
# PROF = dev,test,srcmap
# PROF = prod,test
# PROF = prod
CLJSBUILD = client
all: autocompile
run: openbrowser autocompile
openbrowser:
(sleep 1 && open example.html) &
autocompile:
lein with-profile $(PROF) cljsbuild auto $(CLJSBUILD)
clean:
lein -o clean

22
examples/geometry/example.css Normal file
View File

@ -0,0 +1,22 @@
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;
}

15
examples/geometry/example.html Normal file
View File

@ -0,0 +1,15 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>reagent simple example</title>
<link rel="stylesheet" href="example.css">
</head>
<body style="margin-left: -1px; margin-top: -1px">
<div id="app"></div>
<script type="text/javascript" src="target/client.js"></script>
<script type="text/javascript">
core.run();
</script>
</body>
</html>

28
examples/geometry/project.clj Normal file
View File

@ -0,0 +1,28 @@
(defproject geometry-reagent "0.1.0"
:dependencies [[org.clojure/clojure "1.5.1"]
[org.clojure/clojurescript "0.0-2138"]
[reagent "0.4.0-SNAPSHOT"]]
:plugins [[lein-cljsbuild "1.0.1"]]
:hooks [leiningen.cljsbuild]
:profiles {:prod {:cljsbuild
{:builds
{:client {:compiler
{:optimizations :advanced
:preamble ^:replace ["reagent/react.min.js"]
:pretty-print false}}}}}
:srcmap {:cljsbuild
{:builds
{:client {:compiler
{:source-map "target/client.js.map"
:source-map-path "client"}}}}}}
:source-paths ["src"]
:cljsbuild
{:builds
{:client {:source-paths ["src"]
:compiler
{:preamble ["reagent/react.js"]
:output-dir "target/client"
:output-to "target/client.js"
:pretty-print true}}}})

48
examples/geometry/src/components.cljs Normal file
View File

@ -0,0 +1,48 @@
(ns components
(:require [reagent.core :as r]
[geometry :refer [x y] :as g]))
(def point-defaults
{:stroke "black"
:stroke-width 2
:fill "blue"
:r 5})
(def line-defaults
{:stroke "black"
:stroke-width 2})
(defn point [p]
[:circle
(merge point-defaults
{:cx (x p) :cy (y p)})])
(defn drag [mouse-info p]
(when (:mouse-down? @mouse-info)
(reset! p (g/point (:x @mouse-info)
(:y @mouse-info)))
(.requestAnimationFrame
js/window
(fn []
(drag mouse-info p)))))
(defn draggable-point [p mouse-info]
[:circle
(merge point-defaults
{:on-mouse-down #(do
(swap! mouse-info assoc :mouse-down? true)
(drag mouse-info p))
:cx (x @p)
:cy (y @p)})])
(defn segment [from to]
[:line
(merge line-defaults
{:x1 (x from) :y1 (y from)
:x2 (x to) :y2 (y to)})])
(defn triangle [a b c]
[:g
[segment a b]
[segment b c]
[segment c a]])

51
examples/geometry/src/core.cljs Normal file
View File

@ -0,0 +1,51 @@
(ns core
(:require
[reagent.core :as r]
[components :as c]
[geometry :as g]))
(enable-console-print!)
;; "Global" mouse events
(def mouse-info
(r/atom {:x 0
:y 0
:mouse-down? false}))
(defn on-mouse-move [evt]
(swap! mouse-info assoc :x (.-clientX evt) :y (.-clientY evt)))
(defn on-mouse-up [evt]
(swap! mouse-info assoc :mouse-down? false))
(defn on-mouse-down [evt]
(swap! mouse-info assoc :mouse-down? true))
(def p1 (r/atom (g/point 100 100)))
(def p2 (r/atom (g/point 200 200)))
(def p3 (r/atom (g/point 100 200)))
(defn root []
[:g
[c/triangle @p1 @p2 @p3]
[c/draggable-point p1 mouse-info]
[c/draggable-point p2 mouse-info]
[c/draggable-point p3 mouse-info]])
(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 400
:height 400
:style {:border "1px solid black"}}
[:text {:style {:-webkit-user-select "none"}
:x 20 :y 20 :font-size 20}
"The corners are draggable"]
[root]]
(by-id "app")))

28
examples/geometry/src/geometry.cljs Normal file
View File

@ -0,0 +1,28 @@
(ns geometry)
(defprotocol IPoint
(x [p])
(y [p]))
(deftype Point [x-coord y-coord]
IPoint
(x [_] x-coord)
(y [_] y-coord))
(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))