mirror of https://github.com/status-im/reagent.git
Dan Holmsand
commit
bd1c04e0b3
|
|
@ -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
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>reagent svg 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>
|
||||
|
|
@ -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}}}})
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
(ns components
|
||||
(:require [reagent.core :as r]
|
||||
[geometry :refer [x y dist] :as g]))
|
||||
|
||||
(def point-defaults
|
||||
{:stroke "black"
|
||||
:stroke-width 2
|
||||
:fill "blue"
|
||||
:r 5})
|
||||
|
||||
(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
|
||||
{: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)))
|
||||
(r/next-tick
|
||||
(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 segment-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]])
|
||||
|
||||
(defn circle [c r]
|
||||
[:circle
|
||||
(merge circle-defaults
|
||||
{:cx (x c)
|
||||
:cy (y c)
|
||||
:r (dist c r)})])
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
(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)))
|
||||
(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 @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]])
|
||||
|
||||
(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]]
|
||||
(by-id "app")))
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
(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 dist [p1 p2]
|
||||
(js/Math.sqrt (+ (js/Math.pow (- (x p2) (x p1)) 2)
|
||||
(js/Math.pow (- (y p2) (y p1)) 2))))
|
||||
|
||||
Loading…
Reference in New Issue