From f28d54936f7a7382d0cf5492c2f0a561e9caee69 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Mon, 28 Dec 2015 16:33:14 +0200 Subject: [PATCH] Add basic icons rendering on canvas. --- frontend/uxbox/data/workspace.cljs | 54 ++++++++++++++++++++-- frontend/uxbox/ui/workspace/canvas.cljs | 3 +- frontend/uxbox/ui/workspace/toolboxes.cljs | 27 ++++++++--- frontend/uxbox/ui/workspace/workarea.cljs | 21 ++++++++- 4 files changed, 92 insertions(+), 13 deletions(-) diff --git a/frontend/uxbox/data/workspace.cljs b/frontend/uxbox/data/workspace.cljs index 8e7b9ee2b..159ead0d9 100644 --- a/frontend/uxbox/data/workspace.cljs +++ b/frontend/uxbox/data/workspace.cljs @@ -6,11 +6,22 @@ [uxbox.time :as time] [bouncer.validators :as v])) +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; Schemas +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; + +(def ^:static +shape-props-schema+ + {:x [v/required v/integer] + :y [v/required v/integer] + :width [v/required v/integer] + :height [v/required v/integer]}) + ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Events ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; (defn toggle-tool + "Toggle the enabled flag of the specified tool." [toolname] (reify rs/UpdateEvent @@ -20,9 +31,10 @@ IPrintWithWriter (-pr-writer [mv writer _] - (-write writer "#")))) + (-write writer "#")))) (defn toggle-toolbox + "Toggle the visibility flag of the specified toolbox." [toolname] (reify rs/UpdateEvent @@ -36,9 +48,44 @@ IPrintWithWriter (-pr-writer [mv writer _] - (-write writer "#")))) + (-write writer "#")))) + +(defn select-for-drawing + "Mark a shape selected for drawing in the canvas." + [shape] + (reify + rs/UpdateEvent + (-apply-update [_ state] + (println "select-for-drawing" shape) + (if shape + (assoc-in state [:workspace :drawing] shape) + (update-in state [:workspace] dissoc :drawing))) + + IPrintWithWriter + (-pr-writer [mv writer _] + (-write writer "#")))) + +;; TODO: validate shape + +(defn add-shape + "Mark a shape selected for drawing in the canvas." + [shape props] + (sc/validate! +shape-props-schema+ props) + (reify + rs/UpdateEvent + (-apply-update [_ state] + (println "add-shape") + (if-let [pageid (get-in state [:workspace :page])] + (update-in state [:pages-by-id pageid :shapes] conj + (merge shape props)) + state)) + + IPrintWithWriter + (-pr-writer [mv writer _] + (-write writer "#")))) (defn initialize + "Initialize the workspace state." [projectid pageid] (reify rs/UpdateEvent @@ -52,4 +99,5 @@ IPrintWithWriter (-pr-writer [mv writer _] - (-write writer "#")))) + (-write writer "#")))) + diff --git a/frontend/uxbox/ui/workspace/canvas.cljs b/frontend/uxbox/ui/workspace/canvas.cljs index 61a7a7d99..6cf387c65 100644 --- a/frontend/uxbox/ui/workspace/canvas.cljs +++ b/frontend/uxbox/ui/workspace/canvas.cljs @@ -111,7 +111,8 @@ } (background) [:svg.page-layout - #_(shape item)] + (for [item (:shapes page)] + (shape item))] #_(apply vector :svg#page-layout (map shapes/shape->svg raw-shapes)) #_(when-let [shape (rum/react drawing)] (shapes/shape->drawing-svg shape)) diff --git a/frontend/uxbox/ui/workspace/toolboxes.cljs b/frontend/uxbox/ui/workspace/toolboxes.cljs index da135ecb6..842b16bea 100644 --- a/frontend/uxbox/ui/workspace/toolboxes.cljs +++ b/frontend/uxbox/ui/workspace/toolboxes.cljs @@ -106,16 +106,28 @@ ;; Icons ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +(defn- select-icon + [icon] + (if (= (:drawing @wb/workspace-state) icon) + (rs/emit! (dw/select-for-drawing nil)) + (rs/emit! (dw/select-for-drawing icon)))) + +(defn- change-icon-coll + [local event] + (let [value (-> (dom/event->value event) + (read-string))] + (swap! local assoc :collid value) + (rs/emit! (dw/select-for-drawing nil)))) + (defn icons-render [own] (let [local (:rum/local own) + workspace (rum/react wb/workspace-state) collid (:collid @local) icons (get-in library/+icon-collections-by-id+ [collid :icons]) on-close #(rs/emit! (dw/toggle-toolbox :icons)) - on-change (fn [e] - (let [value (dom/event->value e) - value (read-string value)] - (swap! local assoc :collid value)))] + on-select #(select-icon %) + on-change #(change-icon-coll local %)] (html [:div#form-figures.tool-window [:div.tool-window-bar @@ -132,9 +144,10 @@ [:option {:key (str "icon-coll" (:id icon-coll)) :value (pr-str (:id icon-coll))} (:name icon-coll)])]] - (for [icon icons] - [:div.figure-btn {:class nil #_"selected" - :on-click (constantly nil)} + (for [icon icons + :let [selected? (= (:drawing workspace) icon)]] + [:div.figure-btn {:class (when selected? "selected") + :on-click #(on-select icon)} (shapes/render icon)])]]))) (def ^:static icons diff --git a/frontend/uxbox/ui/workspace/workarea.cljs b/frontend/uxbox/ui/workspace/workarea.cljs index 5a0f9b38a..7ec38374b 100644 --- a/frontend/uxbox/ui/workspace/workarea.cljs +++ b/frontend/uxbox/ui/workspace/workarea.cljs @@ -6,22 +6,39 @@ [uxbox.state :as s] [uxbox.ui.mixins :as mx] [uxbox.ui.util :as util] + [uxbox.data.workspace :as dw] [uxbox.ui.workspace.canvas :refer (canvas)] [uxbox.ui.workspace.grid :refer (grid)] [uxbox.ui.workspace.base :as wb])) +;; TODO: implement as streams + +(defn- on-click + [event wstate] + (let [mousepos @wb/mouse-position + shape (:drawing wstate)] + (when shape + (let [props {:x (first mousepos) + :y (second mousepos) + :width 100 + :height 100}] + (rs/emit! + (dw/add-shape shape props) + (dw/select-for-drawing nil)))))) + ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; Viewport +;; Viewport Component ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; (defn viewport-render - [] + [own] (let [workspace (rum/react wb/workspace-state) drawing? (:drawing workspace) zoom 1] (html [:svg.viewport {:width wb/viewport-height :height wb/viewport-width + :on-click #(on-click % workspace) :class (when drawing? "drawing")} [:g.zoom {:transform (str "scale(" zoom ", " zoom ")")} (canvas)