Rectangles defined in DataScript

rectangles.cljs

(ns rectangles.core
  (:require [reagent.core :as reagent :refer [atom]]
            [datascript.core :as d]))

(def schema
  {:rectangle/left {:db/valueType :db.type/ref}
   :rectangle/right {:db/valueType :db.type/ref}
   :rectangle/top {:db/valueType :db.type/ref}
   :rectangle/bottom {:db/valueType :db.type/ref}

   :edge/x {}
   :edge/y {}})

(def conn (d/create-conn schema))

(d/transact! conn [{:edge/y 3 :db/id -1}
                   {:edge/x 0 :db/id -2}
                   {:edge/x 4 :db/id -3}
                   {:edge/y 0 :db/id -4}
                   {:edge/x 6 :db/id -5}
                   {:edge/y -3 :db/id -6}
                   {:rectangle/left -2
                    :rectangle/right -3
                    :rectangle/top -1
                    :rectangle/bottom -4}
                   {:rectangle/left -2
                    :rectangle/right -5
                    :rectangle/top -4
                    :rectangle/bottom -6}])

(defn get-rectangles [conn]
  (d/q
   '[:find ?top-y ?bottom-y ?left-x ?right-x
     :where
     [?rectangle :rectangle/left ?left]
     [?left :edge/x ?left-x]
     [?rectangle :rectangle/right ?right]
     [?right :edge/x ?right-x]
     [?rectangle :rectangle/top ?top]
     [?top :edge/y ?top-y]
     [?rectangle :rectangle/bottom ?bottom]
     [?bottom :edge/y ?bottom-y]]
   @conn))

(defn rectangle [[top bottom left right]]
  [:div {:style {:position "absolute"
                 :top (* -100 bottom)
                 :left (* 100 left)
                 :width (* 100 (- right left))
                 :height (* -100 (- bottom top))
                 :background-color
                 (rand-nth ["#090300"
                            "#db2d20"
                            "#01a252"
                            "#fded02"
                            "#01a0e4"
                            "#a16a94"
                            "#b5e4f4"
                            "#a5a2a2"
                            "#5c5855"
                            "#db2d20"
                            "#01a252"
                            "#fded02"
                            "#01a0e4"
                            "#a16a94"
                            "#b5e4f4"])}}])

(defn app []
  (into [:div {:style {:position "relative"}}
         [:h1 "hello world"]]
        (for [x (get-rectangles conn)]
          [rectangle x])))

(reagent/render-component [app]
                          (. js/document (getElementById "app")))