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